:root{
      --page:#0A0F1A;
      --topbar:#0D1117;
      --card:#161B27;
      --card2:#111827;
      --hero:#071225;
      --stroke:rgba(255,255,255,0.08);
      --stroke2:rgba(255,255,255,0.16);
      --text:#F0F4FF;
      --muted:#8B95A8;
      --blue:#3B82F6;
      --blue2:#60A5FA;
      --danger:#ef4444;
      --shadow:0 22px 70px rgba(0,0,0,.42);
      --shadow2:0 12px 34px rgba(0,0,0,.28);
      --radius:16px;
      --ring:0 0 0 3px rgba(59,130,246,.24);
      --maxw:1720px;
    }

    *{ box-sizing:border-box; }
    html,body{ min-height:100%; }
    body{
      margin:0;
      font-family:ui-sans-serif, system-ui, -apple-system, "SF Pro Display","SF Pro Text", Segoe UI, Roboto, Helvetica, Arial, sans-serif;
      color:var(--text);
      background:radial-gradient(880px 420px at 18% -8%, var(--tint), transparent 62%),
        radial-gradient(900px 520px at 92% 14%, var(--tint), transparent 64%),
        linear-gradient(180deg, var(--panel-2) 0%, var(--page) 45%, var(--panel-2) 100%);
      overflow-x:hidden;
    }

    button, input{ font:inherit; }
    button{ color:inherit; }
    a{ color:inherit; }

    .appHidden{ visibility:hidden; }
    .appShell{
      width:min(var(--maxw), 100%);
      margin:0 auto;
      padding:0 32px 32px;
    }

    /* ===== Topbar ===== */
    .topbar{
      height:64px;
      margin:18px auto 28px;
      padding:0 18px;
      border:1px solid var(--stroke);
      border-bottom-color:var(--line-soft);
      border-radius:18px;
      background:var(--tint);
      box-shadow:0 18px 50px var(--pos-shadow);
      backdrop-filter:blur(14px);
      -webkit-backdrop-filter:blur(14px);
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:18px;
      position:relative;
      z-index:50;
    }
    .topbarLeft,
    .topbarRight{
      display:flex;
      align-items:center;
      gap:14px;
      min-width:0;
    }
    .logoMark{
      width:36px;
      height:36px;
      border-radius:10px;
      display:grid;
      place-items:center;
      color:var(--blue);
      font-weight:900;
      font-size:21px;
      line-height:1;
      letter-spacing:-.5px;
      background:linear-gradient(180deg, var(--tint), var(--tint));
      border:1px solid var(--accent-line);
      box-shadow:0 0 0 4px var(--pos-shadow-sm), 0 12px 28px var(--pos-shadow-sm);
      flex:0 0 auto;
    }
    .brandText{
      font-size:18px;
      font-weight:850;
      letter-spacing:-.2px;
      white-space:nowrap;
    }
    .posTopbarTitle {
      font-size: 15px;
      font-weight: 800;
      color:var(--text, var(--blue));
      text-decoration: none;
      letter-spacing: -.2px;
      transition: opacity .15s;
      white-space: nowrap;
    }
    .posTopbarTitle:hover { opacity: .8; }
    .posTopbarDateTime {
      font-size: 12px;
      color:var(--muted, var(--muted));
      white-space: nowrap;
      font-weight: 500;
    }
    .posTopbarBell {
      position: relative;
    }
    .posTopbarBtn{
      width:42px;
      height:42px;
      border-radius:999px;
      border:1px solid var(--line);
      background:var(--line-soft);
      display:inline-flex;
      align-items:center;
      justify-content:center;
      cursor:pointer;
      color:var(--text);
    }
    @media(max-width:640px) {
      .posTopbarDateTime { display: none; }
    }
    .topDivider{
      width:1px;
      height:32px;
      background:var(--panel-2);
      margin:0 8px;
      flex:0 0 auto;
    }
    .shopSlot{
      display:flex;
      align-items:center;
      gap:10px;
      color:var(--blue);
      min-width:0;
    }
    .shopIcon{
      width:22px;
      height:22px;
      color:var(--muted);
      flex:0 0 auto;
    }
    .shopText{
      font-size:16px;
      font-weight:650;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
      max-width:360px;
    }
    .shopCaret{
      color:var(--muted);
      font-size:17px;
      margin-left:1px;
    }

    .themeToggle{
      height:42px;
      min-width:86px;
      padding:4px;
      border-radius:999px;
      border:1px solid var(--line);
      background:var(--line-soft);
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:4px;
      cursor:pointer;
      transition:border-color .16s ease, background .16s ease, transform .16s ease;
      box-shadow:inset 0 1px 0 var(--pos-shadow-sm);
    }
    .themeToggle:hover{
      transform:translateY(-1px);
      border-color:var(--accent-line);
      background:var(--tint);
    }
    .themeToggle:focus-visible{
      outline:none;
      box-shadow:var(--ring);
      border-color:var(--accent-line);
    }
    .toggleIcon{
      width:34px;
      height:32px;
      border-radius:999px;
      display:grid;
      place-items:center;
      color:var(--muted);
      transition:background .16s ease, color .16s ease, box-shadow .16s ease;
    }
    .toggleIcon svg{ width:17px; height:17px; }
    body[data-theme="dark"] .toggleIcon.moon,
    body:not([data-theme]) .toggleIcon.moon{
      color:var(--text);
      background:linear-gradient(180deg, var(--blue), var(--tint));
      box-shadow:0 10px 18px var(--pos-shadow-sm);
    }
    body[data-theme="light"] .toggleIcon.sun{
      color:#0B1220;
      background:linear-gradient(180deg, rgba(255,255,255,1), rgba(226,232,240,.94));
      box-shadow:0 10px 18px rgba(15,23,42,.10);
    }
    .themeLabel{
      position:absolute;
      width:1px;
      height:1px;
      overflow:hidden;
      clip:rect(0 0 0 0);
      white-space:nowrap;
    }
    .avatar{
      width:42px;
      height:42px;
      border-radius:999px;
      display:grid;
      place-items:center;
      background:linear-gradient(180deg, var(--tint), var(--tint));
      border:1px solid var(--accent-line);
      color:white;
      font-size:14px;
      font-weight:900;
      letter-spacing:.2px;
      box-shadow:0 0 0 4px var(--pos-shadow-sm);
      flex:0 0 auto;
    }
    .posTopbarAvatar{
      width:42px;
      height:42px;
      border-radius:999px;
      display:grid;
      place-items:center;
      background:linear-gradient(180deg, var(--tint), var(--tint));
      border:1px solid var(--accent-line);
      color:white;
      box-shadow:0 0 0 4px var(--pos-shadow-sm);
      flex:0 0 auto;
    }
    .notificationWrap{position:relative;flex:0 0 auto}
    .posTopbarBell[aria-expanded="true"]{border-color:var(--accent-line);background:var(--tint)}
    .notificationBadge{position:absolute;right:-2px;top:-2px;min-width:17px;height:17px;padding:0 4px;border-radius:999px;display:grid;place-items:center;background:var(--danger-bg);color:var(--text);border:2px solid var(--accent-line);font-size:9px;font-weight:900;line-height:1;pointer-events:none}
    .notificationBadge[hidden]{display:none!important}
    .notificationPanel{position:absolute;right:0;top:52px;width:min(360px,calc(100vw - 28px));max-height:min(520px,70vh);overflow:auto;padding:14px;border:1px solid var(--stroke2);border-radius:16px;background:var(--tint);box-shadow:0 22px 60px var(--pos-shadow);z-index:100}
    .notificationPanel[hidden]{display:none!important}
    .notificationHead{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding-bottom:10px;border-bottom:1px solid var(--stroke)}
    .notificationHead strong{font-size:15px}.notificationHead span{display:block;margin-top:3px;color:var(--muted);font-size:11px;line-height:1.4}
    .notificationList{display:grid;gap:9px;margin-top:10px}.notificationItem{width:100%;padding:11px;border:1px solid var(--stroke);border-radius:12px;background:var(--line-soft);color:var(--text);text-align:left;cursor:pointer}.notificationItem:hover{border-color:var(--accent-line);background:var(--tint)}.notificationItem strong{display:block;font-size:13px}.notificationItem span{display:block;margin-top:4px;color:var(--muted);font-size:11px;line-height:1.45}.notificationEmpty{padding:14px 8px;color:var(--muted);font-size:12px;text-align:center}
    .profileWrap{position:relative;flex:0 0 auto}
    .posTopbarAvatar{cursor:pointer}
    .profileMenu{position:absolute;right:0;top:52px;width:290px;padding:14px;border:1px solid var(--stroke2);border-radius:16px;background:var(--tint);box-shadow:0 22px 60px var(--pos-shadow);z-index:90}
    .profileMenu[hidden]{display:none!important}.profileName{font-size:15px;font-weight:850}.profileShop{margin-top:3px;color:var(--muted);font-size:12px}.profileStats{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:13px 0}.profileStat{padding:11px;border-radius:12px;border:1px solid var(--stroke);background:var(--line-soft)}.profileStat span{display:block;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.07em;font-weight:800}.profileStat strong{display:block;margin-top:5px;font-size:22px}.profileAction{width:100%;margin-top:8px;padding:10px 11px;border-radius:10px;border:1px solid var(--stroke2);background:var(--line-soft);color:var(--text);text-align:left;cursor:pointer;font-weight:750}.profileAction:hover{background:var(--tint);border-color:var(--accent-line)}.profileAction.danger{color:var(--red)}a.profileAction{display:block;box-sizing:border-box;text-decoration:none}
    .posModalOverlay{position:fixed;inset:0;display:grid;place-items:center;padding:20px;background:var(--tint);z-index:200}.posModalOverlay[hidden]{display:none!important}.posModal{width:min(620px,100%);max-height:min(720px,88vh);overflow:auto;border:1px solid var(--stroke2);border-radius:20px;background:var(--panel-2);box-shadow:0 28px 90px var(--pos-shadow);padding:22px}.posModal h2{margin:0 0 8px;font-size:22px}.posModal p{color:var(--muted);line-height:1.55}.posModal .messageBody{white-space:pre-wrap;color:var(--text);line-height:1.6;padding:14px;border:1px solid var(--stroke);border-radius:14px;background:var(--line-soft)}.posModalActions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}.posModalBtn{padding:10px 15px;border-radius:11px;border:1px solid var(--accent-line);background:var(--blue);color:var(--text);font-weight:800;cursor:pointer}.changeList{display:grid;gap:10px;margin-top:14px}.changeItem{padding:13px;border:1px solid var(--stroke);border-radius:13px;background:var(--line-soft)}.changeItem strong{display:block}.changeItem span{display:block;margin-top:5px;color:var(--muted);font-size:13px;line-height:1.5}.suggestText{width:100%;min-height:150px;resize:vertical;padding:12px;border:1px solid var(--stroke2);border-radius:12px;background:var(--panel-2);color:var(--text);font:inherit}
    body[data-theme="light"] .profileMenu,body[data-theme="light"] .notificationPanel,body[data-theme="light"] .posModal{background:#fff;color:#0f172a;border-color:rgba(15,23,42,.14)}body[data-theme="light"] .suggestText{background:#fff;color:#0f172a;border-color:rgba(15,23,42,.18)}body[data-theme="light"] .profileStat,body[data-theme="light"] .notificationItem,body[data-theme="light"] .changeItem,body[data-theme="light"] .posModal .messageBody{background:#f8fafc;border-color:rgba(15,23,42,.10)}body[data-theme="light"] .notificationBadge{border-color:#fff}

    /* ===== Desktop Workbench Navigation ===== */
    .desktopWorkbench{
      min-height:48px;
      margin:-16px 0 18px;
      padding:5px 7px 5px 9px;
      border:1px solid var(--stroke);
      border-radius:14px;
      background:var(--tint);
      box-shadow:0 10px 28px var(--pos-shadow-sm);
      display:flex;
      align-items:center;
      gap:6px;
      position:relative;
      z-index:40;
    }
    .desktopNavLinks{display:flex;align-items:center;gap:3px;min-width:0;flex:0 1 auto}
    .desktopNavLink{
      min-height:36px;
      padding:0 11px;
      border:1px solid transparent;
      border-radius:10px;
      background:transparent;
      color:var(--muted);
      display:inline-flex;
      align-items:center;
      justify-content:center;
      font-size:12px;
      font-weight:800;
      white-space:nowrap;
      cursor:pointer;
      text-decoration:none;
    }
    .desktopNavLink:hover{color:var(--text);background:var(--line-soft);border-color:var(--stroke)}
    .desktopNavLink[aria-current="page"]{color:var(--blue);background:var(--tint);border-color:var(--accent-line)}
    .desktopNavLink:focus-visible{outline:none;color:var(--text);box-shadow:var(--ring);border-color:var(--accent-line)}
    .desktopSearch{margin-left:auto;min-width:260px;max-width:420px;flex:1 1 320px;position:relative}
    .desktopSearch .searchInput{
      width:100%;
      height:36px;
      padding:0 38px 0 34px;
      border-radius:10px;
      border:1px solid var(--stroke);
      background:var(--line-soft);
      color:var(--text);
      outline:none;
    }
    .desktopSearch .searchInput:focus{border-color:var(--accent-line);box-shadow:var(--ring);background:var(--tint)}
    .desktopSearchIcon{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:14px;height:14px;color:var(--muted);pointer-events:none}
    .desktopSearchHint{position:absolute;right:10px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:10px;font-weight:800;pointer-events:none}
    .searchDrop{
      position:absolute;
      top:42px;
      right:0;
      width:min(720px,calc(100vw - 64px));
      max-height:min(560px,70vh);
      overflow:auto;
      border:1px solid var(--stroke2);
      border-radius:14px;
      background:var(--tint);
      box-shadow:0 24px 70px var(--pos-shadow);
      z-index:120;
    }
    .searchDrop[hidden]{display:none!important}.searchDropInner{padding:10px}.searchSection+ .searchSection{margin-top:8px}.searchSecTitle{padding:4px 6px 7px;color:var(--muted);font-size:10px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
    .searchHwGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.searchList{display:grid;gap:6px}.searchItem{width:100%;border:1px solid var(--stroke);border-radius:11px;background:var(--line-soft);color:var(--text);text-align:left;cursor:pointer}.searchItem:hover{border-color:var(--accent-line);background:var(--tint)}.searchItem:focus-visible{outline:none;box-shadow:var(--ring)}
    .searchHwCard{display:grid;grid-template-columns:34px 1fr;gap:9px;padding:9px}.searchHwIcon{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:var(--tint);color:var(--blue)}.searchHwIcon svg{width:18px;height:18px}.searchHwMeta{min-width:0}.searchHwTitle{font-size:12px;font-weight:850;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.searchHwSub{margin-top:5px;display:flex;align-items:center;gap:6px;min-width:0;flex-wrap:wrap}.miniPrice,.miniTariffs{font-size:10px;color:var(--muted)}.miniTag{display:inline-flex;align-items:center;justify-content:center;min-width:22px;margin-right:3px;padding:2px 5px;border-radius:999px;background:var(--tint);color:var(--blue);font-size:9px;font-weight:900}.miniVal{color:var(--text);font-weight:800}.miniTariffs{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.searchList .searchItem{padding:9px 10px}.searchList .searchItem strong{display:block;font-size:12px}.searchList .searchItem span{display:block;margin-top:3px;color:var(--muted);font-size:10px;line-height:1.4}
    body[data-theme="light"] .desktopWorkbench,body[data-theme="light"] .searchDrop{background:rgba(255,255,255,.96);border-color:rgba(15,23,42,.12)}body[data-theme="light"] .desktopSearch .searchInput,body[data-theme="light"] .searchItem{background:#f8fafc;color:#0f172a;border-color:rgba(15,23,42,.10)}body[data-theme="light"] .desktopNavLink{color:#64748b}body[data-theme="light"] .desktopNavLink:hover{color:#0f172a;background:#f1f5f9}body[data-theme="light"] .desktopNavLink[aria-current="page"]{color:#1d4ed8;background:#eff6ff;border-color:#bfdbfe}

    /* ===== Main Layout ===== */
    .mainStack{
      display:grid;
      gap:24px;
    }

    .heroBanner{
      width:100%;
      min-height:180px;
      border:1px solid var(--accent-line);
      border-radius:16px;
      background:linear-gradient(100deg, var(--tint) 0%, var(--tint) 52%, var(--tint) 100%);
      box-shadow:0 24px 72px var(--pos-shadow), 0 0 0 1px var(--pos-shadow-sm), inset 0 1px 0 var(--pos-shadow-sm);
      padding:28px 48px;
      display:grid;
      grid-template-columns:1fr auto;
      align-items:center;
      gap:24px;
      position:relative;
      overflow:hidden;
      text-align:left;
      outline:none;
      isolation:isolate;
      transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease;
    }
    .heroBanner::before{
      content:"";
      position:absolute;
      inset:-80px -120px -70px 40%;
      background:radial-gradient(closest-side at 72% 55%, var(--tint), transparent 72%),
        repeating-radial-gradient(ellipse at 66% 52%, var(--tint) 0 1px, transparent 1px 12px);
      opacity:.70;
      filter:blur(.2px);
      transform:translateX(0);
      pointer-events:none;
      z-index:0;
    }
    .heroBanner::after{
      content:"";
      position:absolute;
      width:72%;
      height:140px;
      right:-6%;
      bottom:-42px;
      background:linear-gradient(90deg, transparent, var(--tint), transparent);
      clip-path:polygon(0 54%, 15% 48%, 30% 55%, 45% 44%, 60% 50%, 75% 36%, 100% 44%, 100% 62%, 75% 54%, 60% 68%, 45% 58%, 30% 70%, 15% 62%, 0 70%);
      opacity:.45;
      filter:blur(1px);
      z-index:0;
      pointer-events:none;
    }
    @media (hover: hover) and (pointer: fine){
      .heroBanner:hover{
        transform:translateY(-2px);
        border-color:var(--accent-line);
        box-shadow:0 28px 78px var(--pos-shadow), 0 0 36px var(--pos-shadow-sm);
      }
      }
    .heroBanner:focus-visible{
      box-shadow:0 28px 78px var(--pos-shadow), var(--ring);
      border-color:var(--accent-line);
    }
    .heroLeft,
    .heroActions,
    .heroCta{
      position:relative;
      z-index:1;
    }
    .heroBadge{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:7px 13px;
      border-radius:999px;
      border:1px solid var(--accent-line);
      background:var(--tint);
      color:var(--blue);
      font-size:13px;
      font-weight:780;
      letter-spacing:.15px;
      margin-bottom:20px;
    }
    .heroIntro{
      display:flex;
      align-items:center;
      gap:18px;
      min-width:0;
    }
    .heroIcon{
      width:44px;
      height:44px;
      border-radius:13px;
      display:grid;
      place-items:center;
      color:var(--blue2);
      background:var(--tint);
      border:1px solid var(--accent-line);
      box-shadow:0 0 22px var(--pos-shadow-sm);
      flex:0 0 auto;
    }
    .heroIcon svg{ width:25px; height:25px; }
    .heroTitle{
      margin:0;
      color:var(--text);
      font-size:38px;
      line-height:1.05;
      letter-spacing:-.9px;
      font-weight:900;
    }
    .heroSub{
      margin:10px 0 0;
      color:var(--muted);
      font-size:17px;
      font-weight:500;
      letter-spacing:.05px;
    }
    .heroActions{
      display:flex;
      align-items:center;
      justify-content:flex-end;
      gap:12px;
      min-width:0;
    }
    .heroCta{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:12px;
      min-height:58px;
      padding:16px 26px;
      border-radius:50px;
      border:1px solid transparent;
      color:var(--text);
      font-size:16px;
      font-weight:850;
      white-space:nowrap;
      cursor:pointer;
      outline:none;
      transition:transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
    }
    .heroCta:focus-visible{ box-shadow:var(--ring); }
    .heroCtaPrimary{
      background:linear-gradient(180deg, var(--blue) 0%, var(--blue) 100%);
      box-shadow:0 18px 42px var(--pos-shadow), inset 0 1px 0 var(--pos-shadow-sm);
    }
    .heroCtaPrimary:hover{
      background:linear-gradient(180deg, var(--blue) 0%, var(--blue) 100%);
      box-shadow:0 20px 46px var(--pos-shadow), inset 0 1px 0 var(--pos-shadow);
    }
    .heroCtaSecondary{
      border-color:var(--accent-line);
      background:linear-gradient(180deg, var(--tint), var(--tint));
      color:var(--blue);
      box-shadow:0 16px 36px var(--pos-shadow-sm), inset 0 1px 0 var(--pos-shadow-sm);
    }
    .heroCtaSecondary:hover{
      border-color:var(--accent-line);
      background:linear-gradient(180deg, var(--tint), var(--tint));
      box-shadow:0 18px 42px var(--pos-shadow-sm), inset 0 1px 0 var(--pos-shadow-sm);
    }
    .heroCta svg{ width:19px; height:19px; flex:0 0 auto; }

    .moduleGrid{
      display:grid;
      grid-template-columns:repeat(3, minmax(0, 1fr));
      gap:16px;
    }
    .moduleCard{
      min-height:140px;
      border:1px solid var(--stroke);
      border-radius:14px;
      background:linear-gradient(180deg, var(--tint), var(--tint));
      padding:28px 24px;
      display:grid;
      grid-template-columns:56px 1fr auto;
      align-items:center;
      gap:20px;
      cursor:pointer;
      text-align:left;
      outline:none;
      position:relative;
      overflow:hidden;
      box-shadow:var(--shadow2);
      transition:transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
    }

    .moduleCard:disabled{
      opacity:.55;
      cursor:not-allowed;
      transform:none !important;
      filter:saturate(.7);
    }
    .moduleCard:disabled .moduleArrow{opacity:.4;}
    .moduleCard::before{
      content:"";
      position:absolute;
      inset:0;
      background:radial-gradient(460px 110px at 0% 50%, var(--tint), transparent 65%);
      opacity:.88;
      pointer-events:none;
    }
    @media (hover: hover) and (pointer: fine){
      .moduleCard:hover{
        transform:translateY(-2px);
        border-color:var(--accent-line);
        background:linear-gradient(180deg, var(--tint), var(--tint));
        box-shadow:0 18px 44px var(--pos-shadow);
      }
    }
    .moduleCard:focus-visible{
      border-color:var(--accent-line);
      box-shadow:var(--shadow2), var(--ring);
    }
    .moduleIcon,
    .moduleText,
    .moduleArrow{
      position:relative;
      z-index:1;
    }
    .moduleIcon{
      width:56px;
      height:56px;
      border-radius:14px;
      display:grid;
      place-items:center;
      color:var(--blue);
      background:var(--tint);
      border:1px solid var(--accent-line);
      box-shadow:inset 0 1px 0 var(--pos-shadow-sm);
    }
    .moduleIcon svg{ width:29px; height:29px; }
    .moduleTitle{
      margin:0;
      color:var(--text);
      font-size:17px;
      line-height:1.25;
      font-weight:780;
      letter-spacing:-.1px;
    }
    .moduleSub{
      margin:7px 0 0;
      color:var(--muted);
      font-size:13px;
      line-height:1.42;
      font-weight:500;
    }
    .moduleArrow{
      color:var(--muted);
      font-size:25px;
      font-weight:500;
      line-height:1;
      transition:color .16s ease, transform .16s ease;
    }
    @media (hover: hover) and (pointer: fine){
      .moduleCard:hover .moduleArrow{
        color:var(--blue);
        transform:translateX(3px);
      }
    }
    /* ===== News Strip ===== */
    .newsStrip{
      min-height:64px;
      border-radius:14px;
      border:1px solid var(--stroke);
      background:linear-gradient(180deg, var(--tint), var(--tint));
      box-shadow:var(--shadow2);
      display:grid;
      grid-template-columns:auto 1fr;
      align-items:center;
      gap:18px;
      padding:12px 18px;
      overflow:hidden;
    }
    .newsBtn{
      height:42px;
      border:0;
      border-right:1px solid var(--line-soft);
      background:transparent;
      color:var(--text);
      display:inline-flex;
      align-items:center;
      gap:12px;
      padding:0 24px 0 0;
      font-size:15px;
      font-weight:820;
      cursor:pointer;
      white-space:nowrap;
    }
    .newsBtn svg{
      width:22px;
      height:22px;
      color:var(--blue);
      filter:drop-shadow(0 0 10px rgba(59,130,246,.20));
    }
    .newsBtn:focus-visible{ outline:none; box-shadow:var(--ring); border-radius:10px; }
    .welcomeBar{
      min-width:0;
      overflow-x:auto;
      scrollbar-width:thin;
      scrollbar-color:rgba(59,130,246,.38) transparent;
    }
    .ticker{
      display:flex;
      align-items:center;
      gap:12px;
      min-width:max-content;
      white-space:nowrap;
      color:var(--muted);
      animation:none;
    }
    .ticker .sep{ display:none; }
    .ticker > span:not(.sep),
    .ticker > a{
      display:inline-flex;
      align-items:center;
      gap:10px;
      min-height:40px;
      padding:0 16px;
      border-radius:999px;
      border:1px solid var(--line-soft);
      background:var(--line-soft);
      color:var(--blue);
      text-decoration:none;
      font-size:14px;
      font-weight:650;
    }
    .ticker > span:not(.sep)::before,
    .ticker > a::before{
      content:"";
      width:8px;
      height:8px;
      border-radius:999px;
      background:var(--blue);
      box-shadow:0 0 0 5px var(--pos-shadow-sm);
      flex:0 0 auto;
    }
    .ticker > a:hover{
      color:var(--text);
      border-color:var(--accent-line);
      background:var(--tint);
    }

    /* ===== Subpages / Dynamic Content ===== */
    .page{ display:none; }
    .page.active{ display:block; }
    .panel{
      margin-top:24px;
      border-radius:16px;
      border:1px solid var(--stroke);
      background:linear-gradient(180deg, var(--tint), var(--tint));
      box-shadow:var(--shadow);
      overflow:hidden;
    }
    .panelHead{
      min-height:64px;
      padding:16px 18px;
      border-bottom:1px solid var(--line-soft);
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:14px;
      background:var(--line-soft);
    }
    .panelHead h2{
      margin:0;
      color:var(--text);
      font-size:20px;
      font-weight:850;
      letter-spacing:-.2px;
    }
    .content{ padding:18px; }
    .backBtn,
    .btn,
    .btnLink{
      min-height:40px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      padding:9px 14px;
      border-radius:12px;
      border:1px solid var(--accent-line);
      background:var(--tint);
      color:var(--blue);
      text-decoration:none;
      font-size:13px;
      font-weight:850;
      cursor:pointer;
    }
    .backBtn:hover,
    .btn:hover,
    .btnLink:hover{ border-color:var(--accent-line); background:var(--tint); }
    .backBtn:focus-visible,
    .btn:focus-visible,
    .btnLink:focus-visible{ outline:none; box-shadow:var(--ring); }
    .btn.secondary{ background:var(--line-soft); border-color:var(--line); }

    .hint{
      color:var(--muted);
      font-size:13px;
      line-height:1.5;
    }
    .table{
      width:100%;
      border-collapse:separate;
      border-spacing:0;
      overflow:hidden;
      border-radius:14px;
      border:1px solid var(--stroke);
      background:var(--line-soft);
    }
    .table th,
    .table td{
      padding:12px;
      border-bottom:1px solid var(--line-soft);
      text-align:left;
      vertical-align:top;
      font-size:14px;
    }
    .table th{
      color:var(--blue);
      background:var(--line-soft);
      font-weight:850;
    }
    .table tr:last-child td{ border-bottom:0; }
    .mono{
      font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    }
    .list{ display:grid; gap:10px; }
    .item{
      border:1px solid var(--stroke);
      background:var(--line-soft);
      border-radius:14px;
      padding:13px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:14px;
    }
    .item .left{ min-width:0; }
    .item .title{
      margin:0;
      font-size:15px;
      font-weight:850;
      color:var(--text);
      letter-spacing:-.1px;
    }
    .item .sub{
      margin:6px 0 0;
      color:var(--muted);
      font-size:13px;
      line-height:1.38;
    }
    .split{
      display:grid;
      grid-template-columns:repeat(2, minmax(0,1fr));
      gap:14px;
    }
    .box{
      border:1px solid var(--stroke);
      background:var(--line-soft);
      border-radius:16px;
      overflow:hidden;
    }
    .boxFull{ margin-top:14px; }
    .boxHead{
      min-height:52px;
      padding:13px 14px;
      border-bottom:1px solid var(--line-soft);
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      background:var(--line-soft);
    }
    .boxHead .h{
      color:var(--blue);
      font-size:13px;
      font-weight:850;
      display:flex;
      align-items:center;
      gap:8px;
    }
    .count{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-width:24px;
      height:24px;
      padding:0 8px;
      border-radius:999px;
      background:var(--tint);
      color:var(--blue);
      border:1px solid var(--accent-line);
      font-size:12px;
      font-weight:900;
    }
    .boxBody{ padding:14px; }

    .skeleton{
      border-radius:16px;
      border:1px solid var(--stroke);
      background:var(--line-soft);
      padding:16px;
      overflow:hidden;
      position:relative;
    }
    .skeleton::before{
      content:"";
      position:absolute;
      inset:0;
      transform:translateX(-65%);
      background:linear-gradient(90deg, transparent, var(--line-soft), transparent);
      animation:shimmer 1.25s ease-in-out infinite;
    }
    @keyframes shimmer{
      from{ transform:translateX(-65%); }
      to{ transform:translateX(65%); }
    }
    .sk{
      height:12px;
      border-radius:999px;
      background:var(--line-soft);
      margin:12px 0;
    }
    .sk.s1{ width:84%; }
    .sk.s2{ width:62%; }
    .sk.s3{ width:42%; }

    .euCalcCard{
      max-width:520px;
      margin:0 auto;
      padding:22px;
      border-radius:16px;
      border:1px solid var(--accent-line);
      background:linear-gradient(180deg, var(--tint), var(--tint));
    }
    .euCalcTitle{
      margin:0 0 12px;
      font-size:18px;
      font-weight:900;
      text-align:center;
    }
    .euCalcLabel{
      display:block;
      margin-top:14px;
      color:var(--blue);
      font-size:13px;
      font-weight:800;
    }
    .euCalcInput{
      width:100%;
      height:46px;
      margin-top:8px;
      border-radius:12px;
      border:1px solid var(--stroke);
      background:var(--panel-2);
      color:var(--text);
      padding:0 12px;
      outline:none;
    }
    .euCalcInput:focus{ border-color:var(--accent-line); box-shadow:var(--ring); }
    .euCalcResult{
      margin-top:16px;
      color:var(--blue);
      font-size:18px;
      font-weight:900;
      text-align:center;
    }
    .euCalcSmall{
      margin-top:8px;
      color:var(--muted);
      font-size:12px;
      text-align:center;
    }

    .adminBar{
      display:flex;
      align-items:flex-end;
      gap:12px;
      flex-wrap:wrap;
      margin-bottom:14px;
    }
    .adminField{ display:grid; gap:6px; }
    .adminDate{
      height:42px;
      border-radius:12px;
      border:1px solid var(--stroke);
      background:var(--line-soft);
      color:var(--text);
      padding:0 12px;
      outline:none;
    }
    .adminDate:focus{ border-color:var(--accent-line); box-shadow:var(--ring); }
    .adminBtns{ display:flex; gap:10px; flex-wrap:wrap; }
    .grid-cards{
      display:grid;
      grid-template-columns:repeat(4, minmax(0,1fr));
      gap:12px;
    }
    .grid-cards .card{
      border:1px solid var(--stroke);
      background:var(--line-soft);
      border-radius:14px;
      padding:14px;
    }
    .label{
      color:var(--muted);
      font-size:11px;
      text-transform:uppercase;
      font-weight:900;
      letter-spacing:.08em;
    }
    .value{
      margin-top:6px;
      color:var(--text);
      font-size:28px;
      font-weight:900;
    }
    .sub{ color:var(--muted); font-size:12px; margin-top:4px; }
    .section-header h2{ margin:0; }
    .section-header p{ color:var(--muted); margin:6px 0 0; }
    .padded{ padding:18px; }
    .table-wrap{ overflow-x:auto; }
    .empty{ text-align:center; color:var(--muted); }

    .richText{
      color:var(--blue);
      white-space:pre-wrap;
      line-height:1.55;
    }
    .inlineLink{ color:var(--blue); text-decoration:underline; text-underline-offset:3px; }

    .hwCards{
      display:grid;
      grid-template-columns:repeat(auto-fit, minmax(300px,1fr));
      gap:12px;
    }
    .hwCard{
      border:1px solid var(--stroke);
      background:var(--line-soft);
      border-radius:14px;
      padding:13px;
    }
    .hwTop{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
    .hwIcon{
      width:38px;
      height:38px;
      border-radius:12px;
      display:grid;
      place-items:center;
      color:var(--blue);
      border:1px solid var(--accent-line);
      background:var(--tint);
      flex:0 0 auto;
    }
    .hwIcon svg{ width:22px; height:22px; }
    .hwMeta{ min-width:0; }
    .hwTarif{
      color:var(--text);
      font-size:14px;
      font-weight:850;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .hwSub{ color:var(--muted); font-size:12px; }
    .hwGrid{ display:grid; gap:8px; }
    .hwRow{
      display:grid;
      grid-template-columns:36px 1fr auto;
      gap:10px;
      align-items:center;
      border:1px solid var(--stroke);
      background:var(--panel-2);
      border-radius:12px;
      padding:9px 10px;
    }
    .hwRow.empty{ opacity:.55; }
    .hwLz{ color:var(--muted); text-align:center; font-weight:900; }
    .hwPrice{ color:var(--text); font-weight:900; }
    .hwBook{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-height:34px;
      padding:7px 12px;
      border-radius:999px;
      border:1px solid var(--accent-line);
      background:var(--tint);
      color:var(--blue);
      text-decoration:none;
      font-size:12px;
      font-weight:850;
      white-space:nowrap;
    }

    .toastWrap{
      position:fixed;
      right:18px;
      bottom:18px;
      z-index:9998;
      display:grid;
      gap:10px;
      pointer-events:none;
    }
    .toast{
      max-width:360px;
      border:1px solid var(--stroke);
      border-radius:14px;
      background:var(--tint);
      color:var(--text);
      box-shadow:var(--shadow2);
      padding:11px 13px;
      font-size:13px;
      font-weight:800;
      transition:opacity .18s ease, transform .18s ease;
    }

    /* ===== Auth ===== */
    .authOverlay{
      position:fixed;
      inset:0;
      background:radial-gradient(880px 420px at 18% -8%, var(--tint), transparent 62%),
        radial-gradient(900px 520px at 92% 14%, var(--tint), transparent 64%),
        linear-gradient(180deg, var(--panel-2) 0%, var(--page) 100%);
      display:flex;
      align-items:center;
      justify-content:center;
      padding:24px;
      z-index:9999;
    }
    .authCard{
      width:min(520px, 100%);
      border-radius:20px;
      border:1px solid var(--stroke);
      background:linear-gradient(180deg, var(--tint), var(--tint));
      box-shadow:var(--shadow);
      padding:22px;
    }
    .authHead{
      display:flex;
      align-items:center;
      gap:13px;
      padding:4px 2px 14px;
    }
    .authLogo{
      width:46px;
      height:46px;
      border-radius:14px;
      border:1px solid var(--accent-line);
      background:var(--tint);
      color:var(--blue);
      display:grid;
      place-items:center;
      flex:0 0 auto;
    }
    .authTitle{
      margin:0;
      color:var(--text);
      font-size:19px;
      font-weight:900;
      letter-spacing:-.2px;
    }
    .authSub{
      margin:6px 0 0;
      color:var(--muted);
      font-size:13px;
      line-height:1.4;
    }
    .authHint{
      margin:0 0 14px;
      font-size:13px;
      color:var(--muted);
      text-align:center;
      line-height:1.5;
    }
    .authErr{
      display:none;
      border:1px solid var(--danger-line);
      background:var(--danger-bg);
      border-radius:14px;
      padding:10px 12px;
      color:var(--red);
      font-size:13px;
      margin-bottom:10px;
    }
    .authErr.show{ display:block; }
    .authForm{ display:grid; gap:10px; }
    .authRow{
      display:flex;
      gap:10px;
      align-items:center;
    }
    .authInput{
      flex:1;
      height:46px;
      min-width:0;
      border-radius:14px;
      border:1px solid var(--stroke);
      background:var(--line-soft);
      color:var(--text);
      padding:0 12px;
      outline:none;
    }
    .authInput:focus{ border-color:var(--accent-line); box-shadow:var(--ring); }
    .authBtn{
      height:46px;
      padding:0 18px;
      border-radius:14px;
      border:1px solid var(--accent-line);
      background:linear-gradient(180deg, var(--blue), var(--tint));
      color:var(--text);
      font-weight:900;
      cursor:pointer;
      white-space:nowrap;
    }
    .authBtn:disabled{ opacity:.62; cursor:not-allowed; }
    .authMeta{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      color:var(--muted);
      font-size:12.5px;
    }

    /* ===== Light theme fallback ===== */
    body[data-theme="light"]{
      --page:#EEF3FB;
      --topbar:#FFFFFF;
      --card:#FFFFFF;
      --card2:#F7FAFF;
      --hero:#EAF2FF;
      --stroke:rgba(15,23,42,.10);
      --stroke2:rgba(15,23,42,.18);
      --text:#102033;
      --muted:#607086;
      --shadow:0 22px 70px rgba(16,33,51,.12);
      --shadow2:0 12px 34px rgba(16,33,51,.10);
      background:
        radial-gradient(880px 420px at 18% -8%, rgba(59,130,246,.12), transparent 62%),
        radial-gradient(900px 520px at 92% 14%, rgba(59,130,246,.08), transparent 64%),
        linear-gradient(180deg, #F8FBFF 0%, #EEF3FB 100%);
    }
    body[data-theme="light"] .topbar,
    body[data-theme="light"] .moduleCard,
    body[data-theme="light"] .newsStrip,
    body[data-theme="light"] .panel,
    body[data-theme="light"] .authCard,
    body[data-theme="light"] .box,
    body[data-theme="light"] .item,
    body[data-theme="light"] .table,
    body[data-theme="light"] .skeleton{
      background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(247,250,255,.98));
    }
    body[data-theme="light"] .heroBanner{
      background:linear-gradient(100deg, rgba(234,242,255,.98), rgba(216,232,255,.96));
      border-color:rgba(59,130,246,.28);
    }
    body[data-theme="light"] .heroCtaSecondary{
      color:#17345E;
      border-color:rgba(59,130,246,.28);
      background:linear-gradient(180deg, rgba(255,255,255,.88), rgba(226,238,255,.94));
      box-shadow:0 12px 28px rgba(46,99,170,.14), inset 0 1px 0 rgba(255,255,255,.8);
    }
    body[data-theme="light"] .brandText,
    body[data-theme="light"] .shopSlot,
    body[data-theme="light"] .ticker > span:not(.sep),
    body[data-theme="light"] .ticker > a{
      color:#102033;
    }
    body[data-theme="light"] .authOverlay{
      background:
        radial-gradient(880px 420px at 18% -8%, rgba(59,130,246,.12), transparent 62%),
        radial-gradient(900px 520px at 92% 14%, rgba(59,130,246,.08), transparent 64%),
        linear-gradient(180deg, #F8FBFF 0%, #EEF3FB 100%);
    }
    body[data-theme="light"] .heroSub,
    body[data-theme="light"] .moduleSub,
    body[data-theme="light"] .hint,
    body[data-theme="light"] .item .sub{
      color:var(--muted);
    }

    @media (prefers-reduced-motion: reduce){
      .heroBanner,
      .moduleCard,
      .themeToggle,
      .moduleArrow{ transition:none; }
      .heroBanner::before,
      .heroBanner::after,
      .skeleton::before{ animation:none; }
    }

    @media (min-width: 1041px){
      .topbar{height:60px;margin:12px auto 22px;padding:0 16px;border-radius:15px}
      .topbarLeft,.topbarRight{gap:11px}
      .posTopbarBtn,.posTopbarAvatar{width:38px;height:38px}.themeToggle{height:38px;min-width:80px}.toggleIcon{width:31px;height:29px}
      .mainStack{gap:14px}
      .heroBanner{min-height:132px;padding:20px 30px;gap:18px}
      .heroBadge{padding:5px 10px;margin-bottom:12px;font-size:11px}
      .heroIntro{gap:14px}.heroIcon{width:40px;height:40px}.heroIcon svg{width:22px;height:22px}
      .heroTitle{font-size:32px}.heroSub{margin-top:7px;font-size:14px}
      .heroActions{gap:9px}.heroCta{min-height:46px;padding:11px 18px;font-size:14px;gap:9px}
      .moduleGrid{gap:12px}
      .moduleCard{min-height:104px;padding:18px 17px;grid-template-columns:44px 1fr auto;gap:14px;border-radius:13px}
      .moduleIcon{width:44px;height:44px;border-radius:12px}.moduleIcon svg{width:23px;height:23px}
      .moduleTitle{font-size:15px}.moduleSub{margin-top:5px;font-size:12px;line-height:1.34}.moduleArrow{font-size:21px}
      .newsStrip{min-height:50px;border-radius:12px}.newsBtn{min-width:152px;padding:0 16px;font-size:12px}.ticker>span:not(.sep),.ticker>a{min-height:48px;font-size:12px}
    }

    @media (max-width: 1180px){
      .desktopWorkbench{gap:4px}.desktopNavLink{padding:0 8px;font-size:11px}.desktopSearch{min-width:220px;flex-basis:260px}
      .heroActions{ flex-direction:column; align-items:stretch; min-width:240px; }
      .heroCta{ width:100%; min-height:52px; padding:13px 20px; }
    }

    @media (max-width: 1040px){
      .desktopWorkbench{display:none}
      .moduleGrid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
      .heroTitle{ font-size:34px; }
      .heroBanner{ padding:26px 28px; }
      .split{ grid-template-columns:1fr; }
      .grid-cards{ grid-template-columns:repeat(2, minmax(0,1fr)); }
    }

    @media (max-width: 900px){
      .desktopWorkbench{display:none}
    }

    @media (max-width: 760px){
      .appShell{ padding:0 20px 24px; }
      .topbar{ margin-top:14px; }
      .heroBanner{
        grid-template-columns:1fr;
        min-height:unset;
      }
      .heroActions{ width:100%; min-width:0; flex-direction:column; }
      .heroCta{ width:100%; }
      .moduleGrid{ grid-template-columns:1fr; }
      .newsStrip{ grid-template-columns:1fr; }
      .newsBtn{
        border-right:0;
        border-bottom:1px solid var(--line-soft);
        width:100%;
        justify-content:flex-start;
        padding:0 0 12px;
      }
      .shopText{ max-width:220px; }
    }

    @media (max-width: 640px){
      .appShell{ padding:0 16px 22px; }
      .topbar{
        height:64px;
        padding:0 12px;
        margin:12px 0 20px;
        border-radius:16px;
      }
      .brandText{ font-size:16px; }
      .topDivider,
      .shopSlot{ display:none; }
      .topbarLeft,
      .topbarRight{ gap:10px; }
      .notificationPanel{
        position:fixed;
        top:84px;
        left:14px;
        right:14px;
        width:auto;
        max-height:calc(100vh - 104px);
      }
      .themeToggle{
        min-width:78px;
        height:40px;
      }
      .toggleIcon{
        width:31px;
        height:30px;
      }
      .avatar{
        width:40px;
        height:40px;
      }
      .mainStack{ gap:18px; }
      .heroBanner{
        padding:22px;
        border-radius:16px;
        gap:20px;
      }
      .heroBadge{ margin-bottom:16px; }
      .heroIntro{
        align-items:flex-start;
        gap:14px;
      }
      .heroIcon{
        width:40px;
        height:40px;
      }
      .heroTitle{
        font-size:30px;
        letter-spacing:-.6px;
      }
      .heroSub{ font-size:15px; }
      .heroCta{
        min-height:54px;
        padding:15px 20px;
        justify-content:center;
      }
      .moduleCard{
        min-height:118px;
        padding:20px 18px;
        gap:14px;
        grid-template-columns:52px 1fr auto;
      }
      .moduleIcon{
        width:52px;
        height:52px;
      }
      .moduleTitle{ font-size:16px; }
      .moduleSub{ font-size:13px; }
      .newsStrip{
        min-height:58px;
        padding:12px 14px;
      }
      .ticker > span:not(.sep),
      .ticker > a{
        min-height:38px;
        padding:0 14px;
        font-size:13px;
      }
      .panelHead{
        align-items:flex-start;
        flex-direction:column;
      }
      .authRow{ flex-direction:column; align-items:stretch; }
      .authBtn{ width:100%; }
      .grid-cards{ grid-template-columns:1fr; }
    }
  

/* 1.3.11 – persönlicher Überblick und erweitertes Profil */
.profileIdentity{padding-bottom:10px;border-bottom:1px solid var(--stroke)}
.profileDevelopment{margin:12px 0;padding:12px;border:1px solid var(--stroke);border-radius:13px;background:var(--line-soft)}
.profileDevelopmentRow{display:flex;align-items:center;justify-content:space-between;gap:10px}
.profileDevelopmentRow span,.profileDevelopmentGrid span{color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.06em;font-weight:800}
.profileDevelopmentRow strong{font-size:13px}
.profileProgress{height:7px;margin:8px 0 11px;background:var(--stroke);border-radius:999px;overflow:hidden}
.profileProgress span{display:block;height:100%;background:var(--blue);border-radius:inherit}
.profileDevelopmentGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.profileDevelopmentGrid div{min-width:0}
.profileDevelopmentGrid strong{display:block;margin-top:4px;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.personalOverview{border:1px solid var(--stroke2);border-radius:20px;background:var(--panel);box-shadow:var(--shadow);padding:18px 20px}
.personalOverviewHead{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}
.personalOverviewHead h2{margin:2px 0 3px;font-size:22px}.personalOverviewHead p{margin:0;color:var(--muted);font-size:13px}
.personalEyebrow{display:block;color:var(--blue);font-size:10px;font-weight:900;letter-spacing:.09em;text-transform:uppercase}
.personalOverviewActions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.personalOverviewActions .btn{min-height:40px}
.personalOverviewGrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:15px}
.personalMetric{display:block;min-width:0;padding:12px 13px;border:1px solid var(--stroke);border-radius:14px;background:var(--line-soft);text-align:left;color:var(--text)}
.personalMetric>span{display:block;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.065em;font-weight:850}.personalMetric>strong{display:block;margin-top:5px;font-size:21px}.personalMetric>small{display:block;margin-top:3px;color:var(--muted);font-size:11px;line-height:1.3}
.personalMetricButton{font:inherit;cursor:pointer;width:100%}.personalMetricButton:hover{border-color:var(--accent-line);background:var(--tint)}
body[data-theme="light"] .profileDevelopment,body[data-theme="light"] .personalMetric{background:#f8fafc;border-color:rgba(15,23,42,.10)}
@media(max-width:900px){.personalOverviewGrid{grid-template-columns:repeat(2,minmax(0,1fr))}.personalOverviewHead{align-items:stretch;flex-direction:column}.personalOverviewActions{justify-content:flex-start}}
@media(max-width:560px){.personalOverview{padding:15px}.personalOverviewGrid{grid-template-columns:1fr 1fr}.personalOverviewActions .btn{flex:1}.profileMenu{width:min(320px,calc(100vw - 28px))}}
.profileMenu{width:340px;background:var(--panel-2);backdrop-filter:none}.profileDevelopment{background:var(--panel)}

/* 1.3.12: Der Zugang zu Führung & Entwicklung ist eine einzelne, eindeutige Aktion.
   Erklärtexte stehen erst dort, wo MFA und Führungsfunktionen tatsächlich relevant sind. */
.leadershipEntryActions{
  display:flex;
  justify-content:flex-end;
  align-items:center;
}
@media (max-width:700px){
  .leadershipEntryActions .btn{width:100%}
}

/* 1.3.13 – POS League. Bewusst nur neue Komponenten im bestehenden
   Designsystem: dieselben Tokens, dieselben Radien, keine zweite Designwelt. */
.leagueCard{border:1px solid var(--stroke2);border-radius:20px;background:var(--panel);box-shadow:var(--shadow);padding:18px 20px}
.leagueCardHead{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}
.leagueCardIdentity{min-width:0}
.leagueCardHead h2{margin:2px 0 3px;font-size:22px}
.leagueCardHead p{margin:0;color:var(--muted);font-size:13px;font-weight:800;letter-spacing:.04em}
.leagueCardActions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end}
.leagueBadgeStrip{font-size:19px;letter-spacing:.12em;line-height:1}
.leagueCardBody{margin-top:14px}
.leagueCardXp{display:block;font-size:26px;font-weight:900}
.leagueProgress{height:9px;margin:10px 0;background:var(--stroke);border-radius:999px;overflow:hidden}
.leagueProgress span{display:block;height:100%;background:var(--blue);border-radius:inherit;transition:width .25s ease}
.leagueNote{margin:3px 0;color:var(--muted);font-size:12px}
.leagueCard[data-state="error"] .leagueProgress{opacity:.35}
.leagueSectionTitle{margin:20px 0 10px;font-size:15px}
.leagueSectionTitle:first-child{margin-top:0}
.leagueShopBox{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.leagueShopBox>div{min-width:0;padding:12px 13px;border:1px solid var(--stroke);border-radius:14px;background:var(--line-soft)}
.leagueShopBox span{display:block;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.065em;font-weight:850}
.leagueShopBox strong{display:block;margin-top:5px;font-size:17px;overflow-wrap:anywhere}
.leagueTableWrap{overflow-x:auto;border:1px solid var(--stroke);border-radius:14px}
.leagueTable{width:100%;border-collapse:collapse;min-width:460px}
.leagueTable th,.leagueTable td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--stroke);font-size:13px}
.leagueTable thead th{color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.07em}
.leagueTable tbody tr:last-child td{border-bottom:0}
.leagueTable .leagueXpCell,.leagueTable thead th:last-child{text-align:right}
.leagueTable .leagueXpCell{font-variant-numeric:tabular-nums;font-weight:850}
.leagueTable tr.leagueOwnRow td{background:var(--tint);font-weight:850}
.leagueBadgeRow{display:flex;flex-wrap:wrap;gap:9px}
.leagueBadge{width:46px;height:46px;font-size:22px;line-height:1;border:1px solid var(--stroke2);border-radius:14px;background:var(--line-soft);color:var(--text);cursor:pointer;display:grid;place-items:center}
.leagueBadge:hover,.leagueBadge:focus-visible{border-color:var(--accent-line);background:var(--tint)}
.leagueBadgeDetail{margin-top:10px;padding:12px 13px;border:1px solid var(--stroke);border-radius:14px;background:var(--line-soft)}
.leagueBadgeDetail strong{display:block;margin-bottom:4px}
.leagueBadgeDetail span{color:var(--muted);font-size:13px;line-height:1.5}
.leagueEmpty{margin:0;color:var(--muted);font-size:13px}
.leagueHall{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.leagueHallSeason{padding:12px 13px;border:1px solid var(--stroke);border-radius:14px;background:var(--line-soft)}
.leagueHallSeason h3{margin:0 0 6px;font-size:14px}
.leagueHallSeason ul{margin:0;padding:0;list-style:none;color:var(--muted);font-size:13px;line-height:1.6}
body[data-theme="light"] .leagueShopBox>div,body[data-theme="light"] .leagueBadge,body[data-theme="light"] .leagueBadgeDetail,body[data-theme="light"] .leagueHallSeason{background:#f8fafc;border-color:rgba(15,23,42,.10)}
@media(max-width:900px){.leagueShopBox{grid-template-columns:repeat(2,minmax(0,1fr))}.leagueHall{grid-template-columns:1fr}.leagueCardHead{flex-direction:column;align-items:stretch}.leagueCardActions{justify-content:flex-start}}
@media(max-width:560px){.leagueCard{padding:15px}.leagueCardActions .btn{flex:1}}