:root {
            --fh: 'Bricolage Grotesque', sans-serif;
            --fm: 'Space Mono', monospace;
            --a1: #6366f1;
            --a2: #8b5cf6;
            --a3: #06b6d4;
            --a4: #10b981;
            --aglow: rgba(99,102,241,.35);
            --gb:  rgba(255,255,255,.055);
            --gb2: rgba(255,255,255,.085);
            --gbd: rgba(255,255,255,.10);
            --gbd2:rgba(255,255,255,.18);
            --t1: rgba(255,255,255,.95);
            --t2: rgba(255,255,255,0.75);
            --t3: rgba(255,255,255,.55);
            --bg: #060810;
            --gb3: rgba(255,255,255,.04);
            --fs: 'Space Mono', monospace;
            --r:  20px;
            --rsm:12px;
            --rlg:28px;
            --ease:cubic-bezier(.16,1,.3,1);
        }
        [data-theme="light"] {
            --gb:  rgba(255,255,255,.85);
            --gb2: rgba(255,255,255,1);
            --gbd: rgba(0,0,0,.08);
            --gbd2:rgba(0,0,0,.15);
            --t1: #0f172a;
            --t2: #475569;
            --t3: rgba(15,23,42,.65);
            --bg: #f8fafc;
            --gb3: rgba(0,0,0,.03);
            --aglow:rgba(99,102,241,.12);
        }
        /* LIGHT ANIMACE OZDRAVA PRO KARTY */
        [data-theme="light"] .card, [data-theme="light"] .tc { box-shadow: 0 4px 20px rgba(0,0,0,.04); border-color: rgba(0,0,0,.06); }
        [data-theme="light"] .card:hover, [data-theme="light"] .tc:hover { box-shadow: 0 12px 30px rgba(0,0,0,.08); border-color: rgba(0,0,0,.15); }
        [data-theme="light"] .bg { background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.04); border-color: rgba(0,0,0,.1); }
        [data-theme="light"] .bg:hover { background: #f8fafc; box-shadow: 0 4px 12px rgba(0,0,0,.08); }
        [data-theme="light"] .bgh { border-color: rgba(0,0,0,.12); color: #475569; }
        [data-theme="light"] .bgh:hover { background: rgba(0,0,0,.04); color: #0f172a; }
        [data-theme="light"] .fr:hover, [data-theme="light"] .ach { background: rgba(0,0,0,.03); }
        
        /* POSUVNÍK LIDI (RANGE) */
        input[type="range"].range-slider {
            -webkit-appearance: none; appearance: none; background: rgba(255,255,255,0.1); height: 6px; border-radius: 4px; box-shadow: inset 0 1px 3px rgba(0,0,0,.3); outline: none; margin:10px 0;
        }
        input[type="range"].range-slider::-webkit-slider-thumb {
            -webkit-appearance: none; appearance: none; height: 18px; width: 18px; border-radius: 50%; background: var(--a1); cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,.4); transition: transform 0.1s;
        }
        input[type="range"].range-slider::-webkit-slider-thumb:hover { transform: scale(1.15); }
        [data-theme="light"] input[type="range"].range-slider { box-shadow: inset 0 1px 3px rgba(0,0,0,.15); background: rgba(0,0,0,.08); }

        *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
        html{scroll-behavior:smooth;}
        body{font-family:var(--fh);background:var(--bg);color:var(--t1);min-height:100vh;overflow-x:hidden;transition:background .5s,color .5s;}

        /* Aurora */
        .aurora{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
        .blob { position:absolute;border-radius:50%;filter:blur(120px);opacity:.28;animation:drift 18s ease-in-out infinite alternate; will-change: transform; opacity: 0.12 !important; }
        [data-theme="light"] .blob{opacity:.12;}
        .blob:nth-child(1){width:700px;height:700px;background:var(--a1);top:-200px;left:-150px;animation-duration:20s;}
        .blob:nth-child(2){width:600px;height:600px;background:var(--a3);top:30%;right:-200px;animation-duration:24s;animation-delay:-6s;}
        .blob:nth-child(3){width:500px;height:500px;background:var(--a4);bottom:-100px;left:30%;animation-duration:16s;animation-delay:-10s;}
        .blob:nth-child(4){width:400px;height:400px;background:var(--a2);top:60%;left:10%;animation-duration:22s;animation-delay:-3s;}
        @keyframes drift{from{transform:translate(0,0) scale(1)}to{transform:translate(60px,40px) scale(1.08)}}

        /* Pojistka pro základní vrstvy (aby nerušila modaly) */
        body>*:not(.aurora){position:relative;z-index:2;}
        .hidden{display:none!important;}

        @keyframes fadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
        @keyframes fadeIn{from{opacity:0}to{opacity:1}}
        @keyframes spin{to{transform:rotate(360deg)}}
        .au{animation:fadeUp .6s var(--ease) both;}
        .d1{animation-delay:.08s}.d2{animation-delay:.16s}.d3{animation-delay:.24s}

        /* NAV */
        .nav{position:sticky !important;top:0;z-index:4000 !important;}
        .nav-in{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 28px;height:62px;background:var(--bg);border-bottom:1px solid var(--gbd); z-index:4000;}
        .logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--t1);flex-shrink:0;}
        .logo-gem{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--a1),var(--a3));display:flex;align-items:center;justify-content:center;font-size:16px;box-shadow:0 0 18px var(--aglow);flex-shrink:0;}
        .logo-wm{font-size:1.05rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;}
        .logo-tag{font-family:var(--fm);font-size:.58rem;color:var(--t2);letter-spacing:.04em;display:block;line-height:1;margin-top:2px;}
        .tabs{display:flex;gap:3px;background:rgba(0,0,0,.18);padding:4px;border-radius:99px;border:1px solid var(--gbd);}
        [data-theme="light"] .tabs{background:rgba(0,0,0,.06);}
        .tab { padding:7px 20px;border-radius:99px;border:none;font-family:var(--fh);font-size:.82rem;font-weight:700;cursor:pointer;color:var(--t2);background:transparent;transition:all .25s var(--ease);white-space:nowrap; will-change: color, background-color; }
        .tab:hover:not(.active){color:var(--t1);}
        .tab.active{color:#fff;}
        .nav-act{display:flex;align-items:center;gap:12px;flex-shrink:0;}

        /* Tab Indicator */
        .tabs { position: relative; }
        .tab-indicator {
            position: absolute;
            height: calc(100% - 8px);
            background: linear-gradient(135deg, var(--a1), var(--a2));
            border-radius: 99px;
            z-index: 0;
            transition: all 0.4s var(--ease);
            box-shadow: 0 4px 16px rgba(99,102,241,0.35);
            pointer-events: none;
        }
        .tab { position: relative; z-index: 1; }

        /* Profile Dropdown */
        .profile-dropdown {
            position: relative;
        }
        .dropdown-trigger {
            display: flex;
            align-items:center;
            gap: 8px;
            padding: 6px 14px;
            background: var(--gb);
            border: 1px solid var(--gbd2);
            border-radius: 14px;
            cursor: pointer;
            transition: all 0.3s var(--ease);
            color: var(--t1);
            font-weight: 700;
            font-size: 0.85rem;
        }
        .dropdown-trigger:hover {
            background: var(--gb2);
            transform: translateY(-1px);
        }
        .dropdown-menu {
            position: absolute;
            top: calc(100% + 12px);
            right: 0;
            width: 240px;
            background: rgba(15, 17, 26, 0.95);
            backdrop-filter: blur(28px) saturate(200%);
            -webkit-backdrop-filter: blur(28px) saturate(200%);
            border: 1px solid var(--gbd2);
            border-radius: 20px;
            padding: 8px;
            display: flex;
            flex-direction: column;
            gap: 4px;
            opacity: 0;
            transform: translateY(10px) scale(0.95);
            pointer-events: none;
            transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
            z-index: 5000;
            box-shadow: 0 20px 40px rgba(0,0,0,0.4);
        }
        .dropdown-menu.open {
            opacity: 1;
            transform: translateY(0) scale(1);
            pointer-events: auto;
        }
        .dropdown-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 14px;
            border-radius: 12px;
            color: var(--t2);
            text-decoration: none;
            font-size: 0.82rem;
            font-weight: 600;
            transition: all 0.2s;
            background: transparent;
            border: none;
            width: 100%;
            cursor: pointer;
        }
        .dropdown-item:hover {
            background: var(--gb);
            color: var(--t1);
        }
        .dropdown-item i {
            font-size: 1.1rem;
        }
        .friend-dropdown-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 8px 12px;
            border-radius: 10px;
            transition: all 0.2s;
            cursor: pointer;
        }
        .friend-dropdown-item:hover {
            background: rgba(255,255,255,0.05);
        }
        .friend-info {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .friend-status {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #4b5563; /* grey */
        }
        .friend-status.online {
            background: #10b981; /* green */
            box-shadow: 0 0 8px #10b981;
        }
        .friend-name {
            font-size: 0.8rem;
            font-weight: 500;
            color: var(--t2);
        }
        .dropdown-divider {
            height: 1px;
            background: var(--gbd);
            margin: 4px 8px;
        }



        /* BUTTONS */
        .btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:9px 18px;border-radius:99px;border:none;font-family:var(--fh);font-size:.82rem;font-weight:700;cursor:pointer;transition:all .2s var(--ease);white-space:nowrap;}
        .btn:hover{transform:translateY(-1px);}
        .btn:active{transform:translateY(0);opacity:.85;}
        .bg{background:var(--gb);backdrop-filter:blur(12px);border:1px solid var(--gbd2);color:var(--t1);}
        .bg:hover{background:var(--gb2);}
        .bp{background:linear-gradient(135deg,var(--a1),var(--a2));color:#fff;border:none;box-shadow:0 4px 20px rgba(99,102,241,.4);}
        .bp:hover{box-shadow:0 6px 28px rgba(99,102,241,.6);}
        .ba{background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;border:none;box-shadow:0 4px 16px rgba(245,158,11,.35);}
        .bgh{background:transparent;border:1px solid var(--gbd2);color:var(--t2);}
        .bgh:hover{color:var(--t1);background:var(--gb);}
        .bi{width:38px;height:38px;padding:0;border-radius:11px;}
        .bf{width:100%;border-radius:var(--rsm);}
        .blg{padding:14px 28px;font-size:.9rem;border-radius:var(--rsm);}
        .btnx{width:32px;height:32px;border-radius:10px;background:var(--gb);border:1px solid var(--gbd);color:var(--t2);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.8rem;transition:all .2s;flex-shrink:0; position:relative; z-index:10;}
        .btnx:hover{background:var(--gb2);color:var(--t1);}

        /* LAYOUT */
        .wrap{max-width:1260px;margin:0 auto;padding:0 24px;}
        .view{padding:32px 0 60px;}
        .pg{display:grid;grid-template-columns:320px 1fr;gap:22px;align-items:start;}
        .fc{max-width:640px;margin:0 auto;}

        /* GLASS CARD */
        .card{background:var(--gb);backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);border:1px solid var(--gbd);border-radius:var(--rlg);padding:26px;transition:border-color .3s,box-shadow .3s;}
        .card:hover{border-color:var(--gbd2);box-shadow:0 8px 40px rgba(0,0,0,.2);}
        .sidebar{position:sticky;top:78px;}

        /* FIELDS */
        .f{width:100%;padding:12px 15px;background-color:rgba(0,0,0,.2);border:1px solid var(--gbd2);border-radius:var(--rsm);color:var(--t1);font-family:var(--fh);font-size:.88rem;font-weight:500;transition:all .2s;margin-bottom:10px;}
        [data-theme="light"] .f{background-color:rgba(255,255,255,.5); color: #000; border: 1px solid rgba(0,0,0,.2);}
        [data-theme="light"] select.f option { color: #000; background: #fff; }
        .f::placeholder{color:var(--t3);}
        .f:focus{outline:none;border-color:var(--a1);background-color:rgba(99,102,241,.08);box-shadow:0 0 0 3px rgba(99,102,241,.15);}
        textarea.f{resize:vertical;min-height:80px;}
        select.f{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='rgba(255,255,255,.4)' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px;cursor:pointer;}
        [data-theme="light"] select.f{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='rgba(0,0,0,.4)' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");}

        /* ACCORDION */
        .acc{margin-bottom:6px;border-radius:var(--rsm);overflow:hidden;border:1px solid var(--gbd);}
        .ach{padding:11px 14px;font-size:.78rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--t2);cursor:pointer;display:flex;justify-content:space-between;align-items:center;background:rgba(0,0,0,.15);transition:background .2s,color .2s;user-select:none;}
        [data-theme="light"] .ach{background:rgba(0,0,0,.04);}
        .ach:hover{color:var(--t1);background:var(--gb);}
        .aa{transition:transform .3s;font-size:.65rem;}
        .acc.open .aa{transform:rotate(180deg);}
        .acb{max-height:0;overflow:hidden;transition:max-height .35s var(--ease);background:rgba(0,0,0,.1);}
        [data-theme="light"] .acb{background:rgba(255,255,255,.3);}
        .acc.open .acb{max-height:380px;overflow-y:auto;}
        .aci{padding:8px 10px 10px;display:flex;flex-direction:column;gap:2px;}
        .fr{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:8px;cursor:pointer;font-size:.83rem;font-weight:500;color:var(--t2);transition:all .15s;}
        .fr:hover{background:var(--gb);color:var(--t1);}
        .fr input[type="checkbox"]{width:15px;height:15px;accent-color:var(--a1);flex-shrink:0;}

        /* TIMELINE */
        .tl{padding:4px 0;display:flex;flex-direction:column;}
        .tr{display:grid;grid-template-columns:56px 1fr;gap:14px;align-items:start;}
        .tr:not(:last-child){margin-bottom:0;}
        .tr-line{width:2px;height:20px;background:linear-gradient(to bottom,rgba(99,102,241,.4),transparent);margin:0 auto;}
        .t-left{display:flex;flex-direction:column;align-items:center;gap:4px;}
        .td{width:42px;height:42px;border-radius:13px;background:linear-gradient(135deg,var(--a1),var(--a2));display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 0 22px var(--aglow),0 4px 14px rgba(99,102,241,.3);font-size:.7rem;color:rgba(255,255,255,.95);font-family:var(--fm);font-weight:700;letter-spacing:-.01em;line-height:1.2;text-align:center;padding:2px;}
        .tt{font-family:var(--fm);font-size:.63rem;color:var(--a1);letter-spacing:.02em;text-align:center;white-space:nowrap;}
        .tc{background:var(--gb2);border:1px solid var(--gbd2);border-radius:20px;padding:18px 22px 18px 20px;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);transition:all .25s var(--ease);position:relative;overflow:hidden;margin-bottom:0;}
        .tc::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(to bottom,var(--a1),var(--a2));opacity:.75;}
        .tc:hover{border-color:rgba(99,102,241,.42);box-shadow:0 8px 32px rgba(0,0,0,.22);transform:translateX(3px);}
        .tc h4{font-size:1.05rem;font-weight:800;margin-bottom:7px;letter-spacing:-.02em;color:var(--t1);}
        .tc p{font-size:.87rem;color:var(--t2);line-height:1.7;margin:0;}
        .ait{background:linear-gradient(135deg,rgba(99,102,241,.1),rgba(139,92,246,.07));border:1px solid rgba(99,102,241,.28);border-radius:20px;padding:18px 22px;margin-top:14px;color:#a5b4fc;font-size:.88rem;line-height:1.7;display:flex;gap:12px;align-items:flex-start;}
        .ait-ico{font-size:1.1rem;flex-shrink:0;margin-top:1px;}

        /* DIARY */
        .dg{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px;}
        .dc{background:var(--gb);backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);border:1px solid var(--gbd);border-radius:var(--rlg);padding:22px;cursor:pointer;transition:all .3s var(--ease);position:relative;overflow:hidden;display:flex;flex-direction:column;}
        .dc::before{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(135deg,rgba(99,102,241,.06),transparent 60%);opacity:0;transition:opacity .3s; pointer-events:none;}
        .dc:hover{transform:translateY(-5px);border-color:rgba(99,102,241,.35);box-shadow:0 20px 60px rgba(0,0,0,.35);}
        .dc:hover::before{opacity:1;}
        .dc.done{border-left:2px solid var(--a4);}

        .chip{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:99px;font-family:var(--fm);font-size:.65rem;font-weight:700;letter-spacing:.03em;}
        .ci{background:rgba(99,102,241,.18);color:#a5b4fc;border:1px solid rgba(99,102,241,.25);}
        .cm{background:rgba(255,255,255,.07);color:var(--t2);border:1px solid var(--gbd);}

        .star{font-size:1.1rem;color:var(--t3);cursor:pointer;transition:all .15s;display:inline-block;}
        .star.lit{color:#fbbf24;}
        .star:hover{transform:scale(1.35);color:#fbbf24;}

        /* FEED */
        .composer{background:var(--gb2);backdrop-filter:blur(28px) saturate(200%);-webkit-backdrop-filter:blur(28px) saturate(200%);border:1px solid var(--gbd2);border-radius:var(--rlg);padding:24px;margin-bottom:20px;}
        .clabel{font-family:var(--fm);font-size:.65rem;color:var(--a1);letter-spacing:.1em;text-transform:uppercase;margin-bottom:14px;}
        .fp{background:var(--gb);backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);border:1px solid var(--gbd);border-radius:var(--rlg);padding:22px;margin-bottom:14px;transition:all .3s var(--ease);animation:fadeUp .5s var(--ease) both;}
        .fp:hover{border-color:var(--gbd2);transform:translateY(-2px);box-shadow:0 12px 40px rgba(0,0,0,.2);}
        .ph{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;}
        .pa{display:flex;align-items:center;gap:11px;}
        .an{font-size:.9rem;font-weight:700;}
        .pd{font-family:var(--fm);font-size:.64rem;color:var(--t2);}
        .pt{font-size:.9rem;line-height:1.7;color:var(--t2);white-space:pre-wrap;margin-bottom:10px;}
        .lt{background:linear-gradient(135deg,rgba(99,102,241,.1),rgba(6,182,212,.07));border:1px dashed rgba(99,102,241,.35);border-radius:var(--r);padding:14px 16px;display:flex;justify-content:space-between;align-items:center;margin-top:12px;}
        .ll{font-family:var(--fm);font-size:.62rem;color:var(--a3);text-transform:uppercase;letter-spacing:.07em;margin-bottom:3px;}
        .ln{font-size:.95rem;font-weight:700;}
        .av{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--a1),var(--a3));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.88rem;background-size:cover;background-position:center;flex-shrink:0;border:1.5px solid var(--gbd2);}

        /* MODALS (Opravené vrstvení pomocí !important) */
        .overlay {
            position: fixed !important;
            inset: 0;
            background: rgba(0,0,0,.65);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            z-index: 9999 !important; /* Bezpečně překryje navigační lištu i mapu */
            display: none;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }
        .mb {
            background: var(--gb2);
            backdrop-filter: blur(40px) saturate(200%);
            -webkit-backdrop-filter: blur(40px) saturate(200%);
            border: 1px solid var(--gbd2);
            border-radius: var(--rlg);
            padding: 36px;
            width: 100%;
            max-width: 580px;
            max-height: 90vh;
            overflow-y: auto;
            box-shadow: 0 40px 80px rgba(0,0,0,.5), 0 0 0 1px rgba(99,102,241,.1);
            animation: fadeUp .4s var(--ease) both;
            margin: auto;
        }
        .mh { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 28px; }
        .mt { font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; }
        .pa2 { width: 86px; height: 86px; border-radius: 50%; background: linear-gradient(135deg, var(--a1), var(--a3)); color: #fff; font-size: 2rem; font-weight: 900; display: flex; align-items: center; justify-content: center; cursor: pointer; background-size: cover; background-position: center; margin: 0 auto 8px; border: 2px solid var(--gbd2); box-shadow: 0 0 0 4px transparent; transition: box-shadow .2s; }
        .pa2:hover { box-shadow: 0 0 0 4px rgba(99,102,241,.4); }

        /* COMMENTS */
        .ci2{display:flex;gap:11px;padding:14px;background:rgba(0,0,0,.12);border-radius:var(--r);margin-bottom:10px;border:1px solid var(--gbd);}
        [data-theme="light"] .ci2{background:rgba(255,255,255,.35);}
        .cm2{display:flex;justify-content:space-between;align-items:center;margin-bottom:5px;}
        .cn{font-size:.84rem;font-weight:700;}
        .cd{font-family:var(--fm);font-size:.62rem;color:var(--t2);}
        .ct{font-size:.85rem;line-height:1.6;color:var(--t2);}

        /* LIGHTBOX */
        .lbx{position:fixed !important;inset:0;background:rgba(0,0,0,.92);backdrop-filter:blur(14px);z-index:5000 !important;display:none;justify-content:center;align-items:center;}
        .lbx img{max-width:90vw;max-height:85vh;border-radius:var(--rlg);object-fit:contain;}
        .lbxx{position:absolute;top:22px;right:28px;color:#fff;font-size:1.2rem;cursor:pointer;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;transition:background .2s;}
        .lbxx:hover{background:rgba(255,255,255,.2);}

        /* MAP */
        .mw{height:380px;border-radius:var(--rlg);overflow:hidden;border:1px solid var(--gbd);margin-bottom:28px;}

        /* CONTACT */
        .cf{position:fixed !important;bottom:26px;right:26px;left:auto;z-index:2000 !important;display:flex;flex-direction:column;align-items:flex-end;}
        .cb{width:52px;height:52px;border-radius:15px;background:var(--gb);backdrop-filter:blur(12px);border:1px solid var(--gbd2);color:var(--t1);cursor:pointer;font-size:1.1rem;display:flex;align-items:center;justify-content:center;transition:all .3s var(--ease);}
        .cb:hover{background:var(--gb2);transform:translateY(-2px);}
        .cp{position:absolute;bottom:66px;right:0;width:330px;background:var(--gb2);backdrop-filter:blur(32px) saturate(200%);-webkit-backdrop-filter:blur(32px) saturate(200%);border:1px solid var(--gbd2);border-radius:var(--rlg);overflow:hidden;box-shadow:0 24px 64px rgba(0,0,0,.5),0 0 0 1px rgba(99,102,241,.1);display:none;animation:fadeUp .3s var(--ease) both; transform-origin: bottom right;}
        .cph{padding:16px 18px;background:linear-gradient(135deg,var(--a1),var(--a2));color:#fff;font-weight:800;font-size:.85rem;display:flex;justify-content:space-between;align-items:center;}
        .cpb{padding:18px;display:flex;flex-direction:column;gap:10px;}

        /* SECTIONS */
        .ey{font-family:var(--fm);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:#818cf8;margin-bottom:6px;}
[data-theme="light"] .ey { color: #4338ca; }
        .st{font-size:1.65rem;font-weight:800;letter-spacing:-.02em;margin-bottom:20px;}
        .hr{height:1px;background:var(--gbd);margin:24px 0;}
        .pr{display:flex;justify-content:space-between;align-items:center;padding:9px 13px;background:rgba(0,0,0,.12);border-radius:var(--rsm);border:1px solid var(--gbd);margin-bottom:12px;}
        [data-theme="light"] .pr{background:rgba(0,0,0,.04);}
        .sr{display:flex;justify-content:space-between;padding:10px 13px;background:rgba(0,0,0,.12);border-radius:var(--rsm);border:1px solid var(--gbd);margin-bottom:12px;}
        [data-theme="light"] .sr{background:rgba(0,0,0,.04);}
        .sl{font-family:var(--fm);font-size:.6rem;color:var(--t2);text-transform:uppercase;letter-spacing:.05em;display:block;margin-bottom:3px;}
        .sv{font-size:.88rem;font-weight:700;}
        .ps{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px;}
        .pt2{width:68px;height:68px;border-radius:10px;object-fit:cover;cursor:pointer;transition:all .2s;border:1px solid var(--gbd);}
        .pt2:hover{transform:scale(1.06);border-color:rgba(99,102,241,.45);}
        .ar{display:flex;gap:7px;align-items:center;margin-top:auto;padding-top:14px;}
        .es{grid-column:1/-1;text-align:center;padding:56px 20px;color:var(--t2);border:1px dashed var(--gbd2);border-radius:var(--rlg);}
        .spin{width:20px;height:20px;border:2px solid var(--gbd2);border-top-color:var(--a1);border-radius:50%;animation:spin .7s linear infinite;display:inline-block;}

        /* MAP OVERRIDES */
        .custom-map-marker{background:var(--a1);width:11px;height:11px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 10px var(--a1);}
        .leaflet-popup-content-wrapper,.leaflet-popup-tip{background:#0d1117;color:#fff;border:1px solid rgba(99,102,241,.35);border-radius:14px;}
        .marker-cluster-small div,.marker-cluster-medium div,.marker-cluster-large div{background:linear-gradient(135deg,var(--a1),var(--a2))!important;color:#fff!important;font-weight:800;border-radius:50%;font-family:var(--fm);font-size:.68rem;}
        [data-theme="light"] .leaflet-popup-content-wrapper, [data-theme="light"] .leaflet-popup-tip {background: #fff; color: #0a0a14; border-color: rgba(0,0,0,.15); box-shadow: 0 4px 20px rgba(0,0,0,.15); }

        /* RESULT */
        .rc{margin-bottom:22px;}
        .rtop{padding:28px 28px 22px;background:linear-gradient(135deg,rgba(99,102,241,.12),rgba(6,182,212,.06));border-radius:var(--rlg) var(--rlg) 0 0;border:1px solid var(--gbd);border-bottom:none;position:relative;overflow:hidden;}
        .rtop::after{content:'';position:absolute;top:-60px;right:-60px;width:220px;height:220px;background:radial-gradient(circle,rgba(99,102,241,.25),transparent 70%);pointer-events:none;}
        .rbody{padding:28px;background:var(--gb);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid var(--gbd);border-top:none;border-radius:0 0 var(--rlg) var(--rlg);}

        /* SHIMMER TEXT - OPRAVENO */
        @keyframes shimmer-bg {
            0% { background-position: 200% center; }
            100% { background-position: -200% center; }
        }

        .shimmer-text {
            /* 1. Gradient aplikujeme přímo na pozadí prvku */
            background: linear-gradient(
                90deg, 
                var(--t1) 0%, 
                #ffffff 50%, 
                var(--t1) 100%
            );
            background-size: 200% auto;
            
            /* 2. KLÍČOVÁ ČÁST: Toto ořízne gradient PŘESNĚ do tvaru písmen */
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            color: transparent;
            
            font-weight: 800;
            text-align: center;
            letter-spacing: -0.02em;
            display: inline-block;
            
            /* 3. Animace pozadí namísto posouvání obdélníku */
            animation: shimmer-bg 3s linear infinite;
        }

        /* 4. Nastavení pro světlý režim */
        [data-theme="light"] .shimmer-text { 
            background: linear-gradient(
                90deg, 
                var(--a1) 0%, 
                #5ac8f5 50%, 
                var(--a1) 100%
            );
            background-size: 200% auto;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            color: transparent;
        }

        /* 📱 EXTREME MOBILE OPTIMIZATION */
        .m-ico { display: none; } /* Defaultně skryté ikony na PC */
        @media(max-width:768px){
            body{padding-bottom:120px;}
            .nav-in{padding:0 12px;}
            .nav-in .tabs{display:none !important;} /* Odstraní duplikaci s PC menu */
            .logo-tag{display:none;}
            .logo-wm{font-size: 0.95rem;}
            .mnav{
                position:fixed !important;
                bottom: max(16px, env(safe-area-inset-bottom)); /* Zabrání překrytí s domovskou lištou na iPhonech */
                left:50%;transform:translateX(-50%);
                z-index:4000 !important;
                background:rgba(6,8,16,.88);backdrop-filter:blur(28px) saturate(200%);-webkit-backdrop-filter:blur(28px) saturate(200%);
                border:1px solid var(--gbd2);border-radius:99px;padding:6px;
                display:flex !important;gap:4px;box-shadow:0 16px 48px rgba(0,0,0,.6);
                width:calc(100vw - 24px);max-width:380px;
            }
            [data-theme="light"] .mnav{background:rgba(230,233,248,.95);}
            .mnav .tab{flex:1;text-align:center;font-size:.7rem;padding:10px 4px; white-space:nowrap; letter-spacing:-0.03em;}
            
            /* Záchrana místa nahoře v liště (převedení tlačítek na luxusní ikony) */
            .nav-act .btn span:not(.m-ico) {display:none;}
            .nav-act .btn .m-ico {display:inline !important; font-size: 1.1rem; line-height: 1;}
            .nav-act .btn {width: 38px; height: 38px; padding: 0 !important; display: flex; align-items: center; justify-content: center; border-radius: 11px;}
            .nav-act{gap:8px;}

            /* Oprava přetékání mimo displej */
            .wrap{padding:0 16px;}
            .dg{grid-template-columns:1fr !important;} /* Výlety a akce na plnou šířku mobilu */
            .pg{grid-template-columns:1fr;gap:16px;}
            .sidebar{position:static;}
            .card,.dc{padding:18px;border-radius:var(--r);}
            .mb{padding:20px; width:calc(100vw - 24px); max-height: 85vh; margin: 0 auto;}
            .cf{bottom:90px;right:14px;left:auto;}
            
            /* Zmenšení obřích textů na úvodní obrazovce */
            h1 { font-size: 2.2rem !important; line-height: 1.15 !important; margin-bottom: 16px !important; }
            .view { padding: 10px 0 60px; }
        }
        @media(min-width:769px){.mnav{display:none !important;}} /* Brání duplikaci mobilního menu na PC */
        ::-webkit-scrollbar{width:5px;}
        ::-webkit-scrollbar-track{background:transparent;}
        ::-webkit-scrollbar-thumb{background:var(--gbd2);border-radius:99px;}

        /* WEATHER ANIMATIONS */
        @keyframes weather-float {
            0%, 100% { transform: translateY(0) rotate(0); }
            50% { transform: translateY(-8px) rotate(5deg); }
        }
        @keyframes weather-spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        @keyframes weather-pulse {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.8; transform: scale(1.05); }
        }
        .wa { display: block; filter: drop-shadow(0 0 12px rgba(99,102,241,0.3)); }
        .wa-float { animation: weather-float 4s ease-in-out infinite; }
        .wa-spin { animation: weather-spin 10s linear infinite; }
        .wa-pulse { animation: weather-pulse 3s ease-in-out infinite; }
        .wa-sun { color: #fbbf24 !important; filter: drop-shadow(0 0 15px rgba(251,191,36,0.4)); }
        .wa-cloud { color: #94a3b8 !important; }
        .wa-rain { color: #3b82f6 !important; }
        .wa-snow { color: #e2e8f0 !important; }
        .wa-bolt { color: #facc15 !important; }

        .btn-strava { background: #fc4c02 !important; color: #fff !important; border: none !important; }
        .btn-ig { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888) !important; color: #fff !important; border: none !important; }
        .btn-qr { background: #000 !important; color: #fff !important; border: none !important; }

        /* ACHIEVEMENT STYLES */
        @keyframes ach-bounce {
            from { transform: translateY(0) scale(1.02); }
            to { transform: translateY(-5px) scale(1); }
        }
        .achievement-card {
            background: linear-gradient(160deg, #1e1b4b, #060810);
            border: 2px solid var(--a1);
            border-radius: 32px;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
            position: relative;
            z-index: 10001;
            overflow: hidden;
            animation: ach-bounce 1s infinite alternate;
        }
        .confetti-canvas {
            position: absolute;
            inset: 0;
            pointer-events: none;
            z-index: 1;
        }

        /* Oprava spinner kontrastu ve světlém režimu */
        [data-theme="light"] .spin {
            border-color: rgba(0,0,0,0.12);
            border-top-color: var(--a1);
        }

/* --- SOCIÁLNÍ PANEL (PRAVÁ STRANA) --- */
.social-sidebar {
    position: fixed;
    top: 0;
    right: -380px; /* Schovaný mimo obrazovku */
    width: 350px;
    height: 100vh;
    background: rgba(15, 15, 25, 0.95);
    backdrop-filter: blur(15px);
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 9999;
    transition: right 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex;
    flex-direction: column;
    box-shadow: -5px 0 30px rgba(0,0,0,0.5);
    color: white;
}
.social-sidebar.open {
    right: 0; /* Vyjede na obrazovku */
}

/* Hlavička a záložky */
.soc-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    background: rgba(0,0,0,0.2);
}
.soc-tabs { display: flex; gap: 10px; }
.soc-tab {
    padding: 8px 12px;
    border-radius: 12px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    color: rgba(255,255,255,0.5);
    transition: 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
}
.soc-tab:hover { color: white; background: rgba(255,255,255,0.05); }
.soc-tab.active { color: white; background: var(--a1, #6b4ce6); }
.soc-close {
    background: none; border: none; color: white; font-size: 1.2rem; cursor: pointer;
    padding: 5px; opacity: 0.7; transition: 0.2s;
}
.soc-close:hover { opacity: 1; transform: scale(1.1); }

/* Obsah */
.soc-content { flex: 1; overflow-y: auto; padding: 15px; }
.soc-search {
    width: 100%; padding: 12px 15px; border-radius: 12px;
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
    color: white; outline: none; margin-bottom: 20px;
}
.soc-search:focus { border-color: var(--a1, #6b4ce6); }
.soc-section-title {
    font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px;
    color: rgba(255,255,255,0.4); margin-bottom: 10px; font-weight: bold;
}
.soc-list { font-size: 0.9rem; color: rgba(255,255,255,0.6); margin-bottom: 20px; }
/* SVG Icons Base Styling */
svg.ti { vertical-align: middle; flex-shrink: 0; }

.logo-wm, .logo-tag { color: #ffffff !important; }

/* =========================
   UX/UI REDESIGN A NOVÉ STYLY 
   ========================= */

/* TIMELINE A AKTIVITA */
.profile-activity-section {
    background: rgba(255,255,255, 0.03); 
    border: 1px solid rgba(255,255,255, 0.05);
    border-radius: 24px; padding: 24px; margin-top: 10px;
}
[data-theme="light"] .profile-activity-section {
    background: white; border-color: rgba(0,0,0,0.06); box-shadow: 0 8px 20px rgba(0,0,0,0.03);
}
.activity-legend { display: flex; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.legend-item { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--t2); font-weight: 600; }
.dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.dot-blue { background: #3b82f6; box-shadow: 0 0 10px rgba(59,130,246,0.4); }
.dot-green { background: #10b981; box-shadow: 0 0 10px rgba(16,185,129,0.4); }
.dot-purple { background: #8b5cf6; box-shadow: 0 0 10px rgba(139,92,246,0.4); }
.activity-timeline { list-style: none; display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 0; }
.timeline-item { display: flex; align-items: flex-start; gap: 14px; padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,0.05); }
.timeline-item:last-child { border-bottom: none; padding-bottom: 0; }
[data-theme="light"] .timeline-item { border-bottom-color: rgba(0,0,0,0.05); }
.timeline-icon { width: 14px; height: 14px; border-radius: 50%; margin-top: 4px; flex-shrink: 0; }
.timeline-content { display: flex; flex-direction: column; gap: 4px; }
.timeline-content strong { color: var(--t1); font-size: 0.95rem; font-weight: 700; }
.timeline-date { color: var(--t2); font-size: 0.75rem; }

/* ACHIEVEMENTY GRID */
.achievements-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 1rem; margin-top: 16px;
}
.achievement-badge {
    background: rgba(255,255,255, 0.04); border: 1px solid rgba(255,255,255, 0.08);
    border-radius: 20px; padding: 20px 10px; display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; gap: 12px; transition: transform 0.2s;
}
[data-theme="light"] .achievement-badge { background: white; border-color: rgba(0,0,0,0.06); box-shadow: 0 4px 12px rgba(0,0,0,0.02); }
.achievement-badge.unlocked:hover { transform: translateY(-4px); background: rgba(255,255,255, 0.08); }
.ach-icon {
    width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--a1), var(--a3)); color: white; box-shadow: 0 4px 15px rgba(99,102,241,0.3);
}
.ach-title { font-size: 0.85rem; font-weight: 800; color: var(--t1); }
.achievement-badge.locked { opacity: 0.5; background: rgba(0,0,0, 0.2); border-color: transparent; filter: grayscale(100%); }
.achievement-badge.locked .ach-icon { background: rgba(255,255,255, 0.1); color: var(--t2); box-shadow: none; }
.achievement-badge.locked .ach-title { color: var(--t2); }
[data-theme="light"] .achievement-badge.locked { background: rgba(0,0,0, 0.04); }
[data-theme="light"] .achievement-badge.locked .ach-icon { background: rgba(0,0,0, 0.1); color: var(--t2); }
/* VYLEPŠENÁ LAMP LOGIN ANIMATION */
.lamp-scene { position: relative; width: 100%; min-height: 520px; background: radial-gradient(circle at 30% 50%, #0a0c16 0%, #030408 100%); border-radius: 32px; border: 1px solid rgba(255,255,255,0.05); display: flex; align-items: center; justify-content: center; overflow: hidden; margin-bottom: 40px; box-shadow: inset 0 0 100px rgba(0,0,0,0.8); transition: background 1.5s cubic-bezier(0.4, 0, 0.2, 1); }
[data-theme="light"] .lamp-scene { background: radial-gradient(circle at 30% 50%, #f0f4ff 0%, #e2e8f0 100%); border-color: rgba(0,0,0,0.1); box-shadow: inset 0 0 100px rgba(0,0,0,0.05); }
.lamp-wrapper { position: absolute; left: 15%; top: 15%; display: flex; flex-direction: column; align-items: center; z-index: 10; }
.lamp-head { width: 140px; height: 45px; background: linear-gradient(to bottom, #1c1c1e, #0a0a0c); border-radius: 70px 70px 0 0; border: 1px solid #333; border-bottom: none; position: relative; z-index: 3; }
[data-theme="light"] .lamp-head { background: linear-gradient(to bottom, #475569, #1e293b); }
.lamp-stand { width: 8px; height: 250px; background: linear-gradient(to right, #1a1a1c, #333, #1a1a1c); z-index: 2; }
.lamp-base { width: 100px; height: 12px; background: #1c1c1e; border-radius: 10px 10px 0 0; z-index: 2; box-shadow: 0 4px 10px rgba(0,0,0,0.5); }
.lamp-cord { position: absolute; top: 45px; right: 35px; width: 20px; height: 80px; cursor: pointer; z-index: 4; transform-origin: top; animation: swing-cord 4s infinite ease-in-out; }
.cord-line { position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 2px; height: 100%; background: rgba(255,255,255,0.4); transition: height 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
.cord-knob { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 14px; height: 14px; background: #fff; border-radius: 50%; box-shadow: 0 0 8px rgba(255,255,255,0.8); transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
.lamp-cord:active .cord-line { height: 120%; }
.lamp-cord:active .cord-knob { transform: translate(-50%, 15px) scale(0.9); }
.lamp-light { position: absolute; top: 45px; left: 50%; transform: translateX(-50%); width: 500px; height: 550px; background: linear-gradient(to bottom, rgba(99,102,241,0.6) 0%, rgba(6,182,212,0.15) 60%, transparent 100%); clip-path: polygon(35% 0, 65% 0, 100% 100%, 0 100%); opacity: 0; pointer-events: none; transition: opacity 1.5s cubic-bezier(0.4, 0, 0.2, 1); z-index: 1; filter: blur(6px); }
[data-theme="light"] .lamp-light { background: linear-gradient(to bottom, rgba(99,102,241,0.3) 0%, rgba(6,182,212,0.05) 50%, transparent 100%); }
.scene-content { margin-left: 30%; max-width: 500px; text-align: left; position: relative; z-index: 20; }
.scene-content h1, .scene-content p, .scene-desc { opacity: 0.1; transform: translateY(15px); transition: all 1s cubic-bezier(0.4, 0, 0.2, 1); }
.scene-actions { opacity: 0; transform: translateY(20px); pointer-events: none; transition: all 1s cubic-bezier(0.4, 0, 0.2, 1); }
.lamp-scene.light-on { background: radial-gradient(circle at 30% 50%, rgba(30,27,75,0.9) 0%, #060810 100%); }
[data-theme="light"] .lamp-scene.light-on { background: radial-gradient(circle at 30% 50%, rgba(224,231,255,0.8) 0%, #f8fafc 100%); }
.lamp-scene.light-on .lamp-light { opacity: 1; animation: pulse-light 4s infinite alternate ease-in-out; }
.lamp-scene.light-on .scene-content h1, .lamp-scene.light-on .scene-content p, .lamp-scene.light-on .scene-desc { opacity: 1; transform: translateY(0); }
.lamp-scene.light-on .scene-actions { opacity: 1; transform: translateY(0); pointer-events: auto; transition-delay: 0.3s; }
.firefly { position: absolute; width: 5px; height: 5px; background: #06b6d4; border-radius: 50%; box-shadow: 0 0 12px #06b6d4, 0 0 24px #6366f1; opacity: 0; pointer-events: none; transition: opacity 0.8s; }
.lamp-scene.light-on .firefly { opacity: 0.9; animation: float-fly 4s infinite alternate ease-in-out; }
.f1 { top: 200px; left: 100px; animation-delay: 0s; }
.f2 { top: 350px; left: 250px; animation-delay: 1.5s; }
.f3 { top: 250px; left: -50px; animation-delay: 2.2s; }
.f4 { top: 400px; left: 50px; animation-delay: 0.7s; }
.f5 { top: 150px; left: 200px; animation-delay: 1.8s; }
@keyframes float-fly { 0% { transform: translate(0, 0) scale(1); opacity: 0.5; } 100% { transform: translate(40px, -50px) scale(1.6); opacity: 1; } }
@keyframes swing-cord { 0% { transform: rotate(0deg); } 50% { transform: rotate(3deg); } 100% { transform: rotate(0deg); } }
@keyframes pulse-light { 0% { opacity: 0.85; filter: blur(5px); } 100% { opacity: 1; filter: blur(8px); } }
@media(max-width: 768px) { .lamp-scene { flex-direction: column; min-height: 600px; text-align: center; } .lamp-wrapper { position: relative; left: 0; top: 0; margin-top: 40px; margin-bottom: 20px; transform: scale(0.8); } .scene-content { margin-left: 0; text-align: center; padding: 0 20px; } .scene-actions { justify-content: center; } }
/* FÁZE 1: MAGIC GLOW CARDS (Bez chyb ve VS Code) */
.glow-card { position: relative; border-radius: 20px; background: rgba(255, 255, 255, 0.02); overflow: hidden; }
.glow-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: inherit; padding: 2px; background: radial-gradient(400px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(99, 102, 241, 0.6), transparent 40%); -webkit-mask: linear-gradient(#ffffff, #ffffff) content-box, linear-gradient(#ffffff, #ffffff); -webkit-mask-composite: destination-out; mask-composite: exclude; opacity: 0; transition: opacity 0.3s ease; pointer-events: none; z-index: 10; }
.glow-card:hover::before { opacity: 1; }
.glow-card::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(400px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(99, 102, 241, 0.12), transparent 40%); opacity: 0; transition: opacity 0.3s ease; pointer-events: none; z-index: 0; }
.glow-card:hover::after { opacity: 1; }
.glow-content { position: relative; z-index: 1; padding: 32px 20px; height: 100%; border-radius: inherit; }
[data-theme="light"] .glow-card { background: rgba(0, 0, 0, 0.02); }