@font-face{
    font-family: Vazirmatn;
    src: url("../fonts/Vazirmatn-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }
  :root{
    --bg:#0b0f14;
    --card:#121824;
    --muted:#9aa4b2;
    --text:#e6edf3;
    --brand:#7c3aed;
    --brand2:#22c55e;
    --danger:#ef4444;
    --border:#1f2a3a;
    --ring:rgba(110,231,255,.55);
    --btnA:#7c3aed;
    --btnB:#4f46e5;
    --ease:cubic-bezier(.2,.8,.2,1);
    --t-fast:140ms;
    --t:220ms;
    --t-slow:420ms
  }
  *{box-sizing:border-box}
  html,body{min-height:100%}
  html{
    overflow-x:hidden;
    overflow-x:clip;
  }
  body{
    margin:0;
    font-family: Vazirmatn, system-ui, -apple-system, Segoe UI, Roboto, Arial;
    background: var(--bg);
    color:var(--text);
    direction: rtl;
    position:relative;
    z-index:0;
    overflow-x:hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  a{color:inherit;text-decoration:none}
  img{max-width:100%;height:auto}
pre, code, kbd, samp{
  direction:ltr;
  unicode-bidi:isolate;
  text-align:left;
}
pre{
  max-width:100%;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}

  .container{max-width:1100px;margin:0 auto;padding:24px}

  .skipLink{
    position:fixed;
    top:10px;
    inset-inline-start:10px;
    padding:10px 12px;
    border-radius:14px;
    border:1px solid var(--border);
    background:rgba(18,24,36,.95);
    transform:translateY(-140%);
    transition:transform var(--t) var(--ease);
    z-index:10000
  }
  .skipLink:focus{transform:translateY(0)}
  .skipLink:focus-visible{outline:2px solid var(--ring);outline-offset:2px}

  .nav{
    position:relative;
    z-index:20;
    backdrop-filter: blur(10px);
    background: rgba(7,10,15,0.7);
    border-bottom:1px solid var(--border);
  }
  .nav .row{
    display:flex;
    gap:16px;
    align-items:center;
    justify-content:flex-start;
    flex-wrap:nowrap
  }
  .brand{display:flex;gap:10px;align-items:center;min-width:0;flex:0 1 auto}
  .brand > div{min-width:0;overflow:hidden}
  .brand b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .brand .small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

  .logo{
    width:36px;height:36px;border-radius:12px;
    background: url("/logo.png") center / contain no-repeat;
    background-color: transparent;
  }
  .menu{display:flex;align-items:center;flex:1 1 auto;min-width:0}
  .menuHead,.menuTools{display:none}
  .menuLinks{
    display:flex;
    gap:14px;
    flex-wrap:nowrap;
    align-items:center;
    flex:1 1 auto;
    min-width:0;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .menuLinks::-webkit-scrollbar{display:none}
  .burger{display:none}
  .navBackdrop{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.55);
    backdrop-filter: blur(2px);
    opacity:0;
    pointer-events:none;
    transition: opacity var(--t-slow) var(--ease);
    z-index:40
  }
  .navBackdrop[aria-hidden="false"]{opacity:1;pointer-events:auto}
  body.navOpen{overflow:hidden}
  .pill{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 12px;border:1px solid var(--border);border-radius:999px;
    background: rgba(18,24,36,0.6);
    transition: transform var(--t) var(--ease), border-color var(--t) var(--ease), background var(--t) var(--ease), box-shadow var(--t) var(--ease);
  }
  .pillIcon{
    width:20px;height:20px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto
  }
  .pillIcon svg{width:20px;height:20px;display:block}
  .pillText{line-height:1.25}
  .pill:hover{border-color:rgba(255,255,255,.18);transform:translateY(-1px)}
  .pill:active{transform:translateY(0)}
  .pill:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
  .pill[aria-current="page"]{
    border-color:transparent;
    box-shadow:none;
  }

  .navTools{
    margin-inline-start:auto;
    display:flex;
    gap:10px;
    align-items:center;
    flex:0 0 auto
  }
  .toolGroup{
    display:flex;
    align-items:center;
    gap:6px;
    padding:6px 6px;
    border-radius:999px;
    border:1px solid var(--border);
    background: rgba(7,10,15,0.35);
    backdrop-filter: blur(10px);
  }
  .toolGroup.themeSwitch,
  .themeSwitch{
    min-width:124px;
    justify-content:space-between;
    gap:0;
    direction:ltr;
  }
  .toolGroup.themeSwitch > :not([data-theme]),
  .themeSwitch > :not([data-theme]){display:none}

  .toolGroup.themeSwitch > [data-theme],
  .themeSwitch > [data-theme]{
    flex:0 0 auto;
    width:32px;
    height:32px;
  }

  .toolGroup.themeSwitch > [data-theme="light"],
  .themeSwitch > [data-theme="light"]{order:1}
  .toolGroup.themeSwitch > [data-theme="dark"],
  .themeSwitch > [data-theme="dark"]{order:2}

  html[dir="ltr"] .toolGroup.themeSwitch > [data-theme="dark"],
  html[dir="ltr"] .themeSwitch > [data-theme="dark"]{order:1}
  html[dir="ltr"] .toolGroup.themeSwitch > [data-theme="light"],
  html[dir="ltr"] .themeSwitch > [data-theme="light"]{order:2}

  .toolGroup.langSwitch{
    min-width:124px;
    justify-content:space-between;
    gap:0;
    padding:6px;
    direction:ltr;
  }
  .toolGroup.langSwitch .langSep{
    margin-inline:auto;
    padding:0 6px;
  }

  .langBtn,.iconBtn{
    appearance:none;
    -webkit-appearance:none;
    border:0;
    background:transparent;
    color:var(--muted);
    font:inherit;
    cursor:pointer;
    border-radius:999px;
    display:inline-flex;
    align-items:center;
    justify-content:center
  }
  .langBtn{
    height:32px;
    padding:0 10px;
    font-weight:800;
    letter-spacing:.4px;
  }
  .langSep{color:var(--muted);opacity:.65;font-weight:800;padding:0 2px}
  .iconBtn{
    width:32px;height:32px;
    border:1px solid transparent;
  }
  .iconBtn svg{width:18px;height:18px;display:block}
  .iconBtn.burger{display:none}
  .langBtn.on,.iconBtn.on{color:var(--text)}
  .iconBtn.on{background:rgba(255,255,255,0.06);border-color:rgba(255,255,255,0.10)}
  .langBtn:focus-visible,.iconBtn:focus-visible{outline:2px solid var(--ring);outline-offset:2px}

  .hero{
    padding:44px 0 24px 0;
    display:grid;grid-template-columns:1.3fr 1fr;gap:18px;
    align-items:stretch;
  }
  .card{
    border:1px solid var(--border);
    border-radius:20px;
    padding:18px;
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)), rgba(18,24,36,0.65);
    box-shadow:0 18px 50px rgba(0,0,0,0.35);
    transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
  }
  @media (hover:hover) and (pointer:fine){
    .card:hover{
      border-color: rgba(110,231,255,.16);
      box-shadow: 0 22px 70px rgba(0,0,0,0.45);
    }
  }
  .h1{font-size:38px;line-height:1.25;margin:0 0 10px 0}
  .h2{font-size:22px;line-height:1.4;margin:0 0 10px 0}
  .p{color:var(--muted);line-height:1.9;margin:0}
  .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
  .grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
  .kv{display:flex;gap:10px;align-items:flex-start}
  .kv b{display:block}
  .kv span{color:var(--muted);line-height:1.8}

  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    padding:12px 14px;border-radius:14px;border:1px solid transparent;
    background: linear-gradient(135deg,var(--btnA),var(--btnB));
    color:white;font-weight:700;
    transition: transform var(--t-fast) var(--ease), filter var(--t-fast) var(--ease), border-color var(--t) var(--ease);
  }
  .btn:hover{filter:brightness(1.07)}
  .btn:active{transform:translateY(1px) scale(.99)}
  .btn:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
  .btn2{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    padding:12px 14px;border-radius:14px;border:1px solid var(--border);
    background: rgba(18,24,36,0.6);
    color:var(--text);font-weight:700;
    transition: transform var(--t-fast) var(--ease), filter var(--t-fast) var(--ease), border-color var(--t) var(--ease);
  }
  .btn2:hover{border-color:#2c3a52}
  .btn2:active{transform:translateY(1px) scale(.99)}
  .btn2:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
  button.btn,button.btn2{appearance:none;-webkit-appearance:none;font-family:inherit;font-size:inherit;line-height:inherit}

  .small{font-size:13px;color:var(--muted)}
  .footer{padding:36px 0;color:var(--muted);border-top:1px solid var(--border);margin-top:0;background:transparent}
  .footerRow{display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap}
  .footerMeta{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
  .footerLinks{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
  .footerSeal img{display:block;width:110px;height:auto}

  .form{display:grid;gap:10px}
  .input, select, textarea{
    width:100%;
    padding:12px 12px;border-radius:14px;
    border:1px solid var(--border);
    background: rgba(7,10,15,0.6);
    color: var(--text);
    outline:none;
    transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease), background var(--t) var(--ease);
  }
  .input:focus, select:focus, textarea:focus{
    border-color: rgba(110,231,255,.28);
    background: rgba(110,231,255,.06);
    box-shadow:none;
    outline:none;
    transition: border-color .15s ease, background-color .15s ease;
  }
  .pwBtn{
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
  }
  .pwBtn:hover{background:transparent !important}

  textarea{min-height:120px;resize:vertical}
  .row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
  .badge{display:inline-flex;align-items:center;gap:8px;padding:8px 10px;border-radius:999px;border:1px solid var(--border);background:rgba(18,24,36,0.55);color:var(--muted)}
  .table{width:100%;border-collapse:separate;border-spacing:0 10px}
  .table th{color:var(--muted);font-weight:600;text-align:right;font-size:13px}
  .table td{padding:12px 12px;background:rgba(18,24,36,0.65);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
  .table td:first-child{border-right:1px solid var(--border);border-top-right-radius:16px;border-bottom-right-radius:16px}
  .table td:last-child{border-left:1px solid var(--border);border-top-left-radius:16px;border-bottom-left-radius:16px}
  .alert{padding:12px 14px;border-radius:14px;border:1px solid var(--border);background:rgba(18,24,36,0.65)}
  .alert.ok{border-color:rgba(34,197,94,0.35)}
  .alert.bad{border-color:rgba(239,68,68,0.35)}

  .calendar{border:1px solid var(--border);border-radius:18px;overflow:hidden}
  .cal-head{display:flex;align-items:center;justify-content:space-between;padding:12px 12px;background:rgba(18,24,36,0.8);border-bottom:1px solid var(--border)}
  .cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--border)}
  .cal-cell{background:rgba(7,10,15,0.7);padding:10px;min-height:76px;cursor:pointer}
  .cal-cell:hover{filter:brightness(1.08)}
  .cal-cell.disabled{opacity:.35;cursor:not-allowed}
  .cal-cell.selected{outline:2px solid rgba(124,58,237,0.7);outline-offset:-2px}
  .cal-dow{font-size:12px;color:var(--muted);padding:10px;background:rgba(7,10,15,0.8);text-align:center}
  .slot{padding:10px 12px;border-radius:14px;border:1px solid var(--border);background:rgba(7,10,15,0.55);display:flex;justify-content:space-between;align-items:center}
  .slot.disabled{opacity:.45}

  @media (max-width: 900px){
    .hero{grid-template-columns:1fr}
    .grid3{grid-template-columns:1fr}
    .grid2{grid-template-columns:1fr}
    .h1{font-size:30px}
  }

  .res-shell{display:grid;grid-template-columns:1.15fr .85fr;gap:14px;align-items:start}
  .res-hero{position:relative;overflow:hidden}
  .res-hero:before{content:"";position:absolute;inset:-120px -140px auto auto;width:360px;height:360px;border-radius:999px;background:radial-gradient(circle at 30% 30%, rgba(167,139,250,.75), rgba(124,58,237,.22) 55%, rgba(0,0,0,0) 70%);pointer-events:none}
  .res-hero:after{content:"";position:absolute;inset:auto auto -160px -160px;width:420px;height:420px;border-radius:999px;background:radial-gradient(circle at 40% 40%, rgba(34,197,94,.30), rgba(34,197,94,.10) 55%, rgba(0,0,0,0) 70%);pointer-events:none}
  .res-top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap}
  .res-title{display:flex;flex-direction:column;gap:8px;position:relative;z-index:1}
  .res-title b{font-size:22px}
  .res-title span{color:var(--muted);line-height:1.9}
  .res-stepper{display:flex;gap:10px;flex-wrap:wrap;position:relative;z-index:1}
  .step{display:inline-flex;align-items:center;gap:8px;padding:10px 12px;border-radius:999px;border:1px solid var(--border);background:rgba(7,10,15,.55);color:var(--muted)}
  .step i{width:22px;height:22px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;background:rgba(124,58,237,.18);color:#c4b5fd;font-style:normal;font-weight:800}
  .step.on{border-color:rgba(124,58,237,.45);color:var(--text)}
  .step.on i{background:linear-gradient(135deg,var(--btnA),var(--btnB));color:#fff}
  .res-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px;position:relative;z-index:1}
  .kpi{border:1px solid var(--border);background:rgba(7,10,15,.45);border-radius:16px;padding:12px}
  .kpi b{display:block;font-size:18px;margin-bottom:6px}
  .kpi span{display:block;color:var(--muted);line-height:1.8;font-size:13px}
  .res-side{position:sticky;top:86px}
  .res-card-title{display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap}
  .datePill{display:inline-flex;align-items:center;gap:10px;padding:10px 12px;border-radius:999px;border:1px solid var(--border);background:rgba(18,24,36,.55)}
  .datePill b{font-size:13px}
  .datePill span{color:var(--muted);font-size:13px}
  .slotGrid{display:grid;grid-template-columns:1fr;gap:10px;margin-top:10px}
  .slotItem{border:1px solid var(--border);background:rgba(7,10,15,.55);border-radius:18px;padding:12px;display:flex;justify-content:space-between;gap:10px;align-items:center}
  .slotItem .meta{display:flex;flex-direction:column;gap:6px}
  .slotItem .meta b{font-size:15px}
  .slotItem .meta span{color:var(--muted);font-size:13px}
  .slotItem .cta{display:flex;gap:8px;align-items:center}
  .slotTag{display:inline-flex;align-items:center;gap:8px;padding:8px 10px;border-radius:999px;border:1px solid var(--border);background:rgba(18,24,36,.55);color:var(--muted);font-size:12px}
  .slotItem.off{opacity:.45}
  .shimmer{height:14px;border-radius:10px;background:linear-gradient(90deg, rgba(31,42,58,.35), rgba(255,255,255,.10), rgba(31,42,58,.35));background-size:200% 100%;animation:sh 1.2s linear infinite}
  .shimmerBox{border:1px solid var(--border);background:rgba(7,10,15,.55);border-radius:18px;padding:12px;display:grid;gap:10px}
  @keyframes sh{0%{background-position:0% 0}100%{background-position:200% 0}}
  .cal-cell.has{position:relative}
  .cal-dot{position:absolute;left:10px;bottom:10px;width:8px;height:8px;border-radius:999px;background:linear-gradient(135deg,var(--brand2),var(--brand));box-shadow:0 8px 20px rgba(34,197,94,.25)}
  .cal-cell.selected .cal-dot{filter:brightness(1.15)}
  @media (max-width: 900px){
    .res-shell{grid-template-columns:1fr}
    .res-side{position:static}
    .res-kpis{grid-template-columns:1fr}
  }

  @view-transition { navigation: auto; }
  ::view-transition-old(root),
  ::view-transition-new(root){ animation-duration: var(--t-slow); animation-timing-function: var(--ease); }
  ::view-transition-old(root){ animation-name: vtOut; }
  ::view-transition-new(root){ animation-name: vtIn; }
  @keyframes vtOut{ from{opacity:1;transform:none} to{opacity:0;transform:translateY(-8px) scale(.99)} }
  @keyframes vtIn{ from{opacity:0;transform:translateY(10px) scale(.99)} to{opacity:1;transform:none} }

  .vt-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.65); opacity:0; pointer-events:none; transition:opacity var(--t) var(--ease); z-index:9999; }
  body.leaving .vt-overlay{ opacity:1; }

  .page{ min-height: calc(100vh - 120px); opacity:1; transform:none; transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); }
  html.js body.preload .page{ opacity:0; transform: translateY(10px); }
  body.leaving .page{ opacity:0; transform: translateY(-8px) scale(.99); }

  body::before{
    content:"";
    position:fixed;
    inset:-20%;
    background:
      radial-gradient(60rem 40rem at 20% 10%, rgba(167,139,250,.18), transparent 60%),
      radial-gradient(55rem 38rem at 80% 18%, rgba(34,197,94,.12), transparent 60%),
      radial-gradient(70rem 50rem at 40% 90%, rgba(124,58,237,.16), transparent 62%),
      radial-gradient(90rem 70rem at 50% 50%, rgba(0,0,0,.55), rgba(0,0,0,.85));
    transform: translate3d(0,0,0);
    animation: bgFloat 18s var(--ease) infinite alternate;
    pointer-events:none;
    z-index:-2;
  }
  @keyframes bgFloat{
    from{ transform: translate3d(-1.2%, -0.8%, 0) scale(1); }
    to{ transform: translate3d(1.4%, 1.1%, 0) scale(1.03); }
  }
  body::after{
    content:"";
    position:fixed;
    inset:0;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
    opacity:.06;
    mix-blend-mode: overlay;
    pointer-events:none;
    z-index:-1;
  }

  .reveal{
    opacity:0;
    transform: translateY(14px);
    filter: blur(6px);
    transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease), filter var(--t-slow) var(--ease);
    transition-delay: var(--reveal-delay, 0ms);
    will-change: transform, opacity, filter;
  }
  .reveal.in{
    opacity:1;
    transform:none;
    filter: blur(0);
  }

  html[dir="ltr"] body,
  html[lang^="en"] body{direction:ltr}
  html[dir="ltr"] .table th,
  html[lang^="en"] .table th{text-align:left}
  html[dir="ltr"] .table td,
  html[lang^="en"] .table td{text-align:left}
  html[dir="ltr"] .table td:first-child,
  html[lang^="en"] .table td:first-child{border-right:0;border-left:1px solid var(--border);border-top-right-radius:0;border-bottom-right-radius:0;border-top-left-radius:16px;border-bottom-left-radius:16px}
  html[dir="ltr"] .table td:last-child,
  html[lang^="en"] .table td:last-child{border-left:0;border-right:1px solid var(--border);border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:16px;border-bottom-right-radius:16px}
  html[dir="ltr"] .menuLinks a.pill[href*="register" i],
  html[lang^="en"] .menuLinks a.pill[href*="register" i],
  html[dir="ltr"] .menuLinks a.pill[href*="signup" i],
  html[lang^="en"] .menuLinks a.pill[href*="signup" i]{display:none}

  html[data-theme="light"]{
    --bg:#ffffff;
    --card:#ffffff;
    --muted:#334155;
    --text:#0b1220;
    --brand:#4f46e5;
    --brand2:#10b981;
    --danger:#dc2626;
    --border:rgba(15,23,42,.14);
    --ring:rgba(59,130,246,.28);
    --btnA:#4f46e5;
    --btnB:#2563eb;
  }
  html[data-theme="light"] body{background:linear-gradient(180deg,#ffffff,#f3f8ff);color:var(--text)}
  html[data-theme="light"] body::before{
    background:
      radial-gradient(64rem 44rem at 6% -6%, rgba(79,70,229,.12), transparent 64%),
      radial-gradient(58rem 40rem at 96% 8%, rgba(16,185,129,.10), transparent 62%),
      radial-gradient(70rem 54rem at 14% 104%, rgba(236,72,153,.08), transparent 64%),
      radial-gradient(92rem 72rem at 50% 54%, rgba(255,255,255,1), rgba(243,248,255,1));
    opacity:1;
  }
  html[data-theme="light"] body::after{opacity:.008;mix-blend-mode:normal}
  html[data-theme="light"] .nav{background:rgba(255,255,255,.92);border-bottom:1px solid rgba(15,23,42,.10)}
  html[data-theme="light"] .toolGroup{background:rgba(255,255,255,.82)}
  html[data-theme="light"] .iconBtn.on{background:rgba(79,70,229,.10);border-color:rgba(79,70,229,.18)}
  html[data-theme="light"] .pill{background:rgba(255,255,255,.92);border-color:rgba(15,23,42,.10)}
  html[data-theme="light"] .pill:hover{border-color:rgba(79,70,229,.28)}
  html[data-theme="light"] .btn2{background:rgba(255,255,255,.92);border-color:rgba(15,23,42,.12);color:var(--text)}
  html[data-theme="light"] .badge{background:rgba(255,255,255,.88);border-color:rgba(15,23,42,.10);color:var(--muted)}
  html[data-theme="light"] .card{background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(255,255,255,.92));box-shadow:0 18px 50px rgba(15,23,42,.08)}
  html[data-theme="light"] .table td{background:rgba(255,255,255,.96)}
  html[data-theme="light"] .input,html[data-theme="light"] select,html[data-theme="light"] textarea{background:#ffffff;border-color:rgba(15,23,42,.12);color:var(--text)}
  html[data-theme="light"] .vt-overlay{background:rgba(15,23,42,.14)}
  html[data-theme="light"] .menu{background:transparent;border-left:0}
  html[data-theme="light"] .menuTools{background:rgba(255,255,255,.92)}
  html[data-theme="light"] .navBackdrop{background:rgba(15,23,42,.38)}

  @media (max-width: 720px){
    .container{padding:16px}
    .nav{position:sticky;top:0;z-index:60}
    .nav .row{flex-wrap:nowrap}
    .brand .small{display:none}
    .brand b{font-size:15px}
    .logo{width:32px;height:32px;border-radius:12px}
    .navTools{display:none}
    .iconBtn.burger{display:inline-flex;margin-inline-start:auto}

    .menu{
      position:fixed;
      top:0;bottom:0;
      width:min(78vw,360px);
      left:0;
      right:auto;
      display:flex;
      flex-direction:column;
      gap:12px;
      padding:14px;
      padding-top:12px;
      padding-bottom:calc(14px + env(safe-area-inset-bottom));
      background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0)), rgba(7,10,15,0.96);
      backdrop-filter: blur(16px);
      border-right:1px solid var(--border);
      border-left:0;
      border-top-right-radius:22px;
      border-bottom-right-radius:22px;
      box-shadow: 18px 0 70px rgba(0,0,0,.55);
      isolation:isolate;
      transform: translateX(calc(-100% - 18px));
      opacity:0;
      pointer-events:none;
      transition: transform 520ms var(--ease), opacity 260ms var(--ease);
      will-change: transform, opacity;
      z-index:70;
      overflow:hidden;
      overscroll-behavior:contain
    }
    .menu::before{
      content:"";
      position:absolute;
      inset:-45% -60% auto auto;
      width:440px;height:440px;
      border-radius:999px;
      background:radial-gradient(circle at 30% 30%, rgba(167,139,250,.30), rgba(0,0,0,0) 62%);
      pointer-events:none;
      z-index:-1;
    }
    .menu::after{
      content:"";
      position:absolute;
      inset:auto auto -55% -60%;
      width:480px;height:480px;
      border-radius:999px;
      background:radial-gradient(circle at 40% 40%, rgba(34,197,94,.18), rgba(0,0,0,0) 65%);
      pointer-events:none;
      z-index:-1;
    }

    html[data-theme="light"] .menu{
      background:rgba(255,255,255,.96);
      border-right:1px solid rgba(15,23,42,.12);
      border-left:0
    }
    html[dir="ltr"] .menu,
    html[lang^="en"] .menu{
      left:auto;
      right:0;
      border-left:1px solid var(--border);
      border-right:0;
      border-top-left-radius:22px;
      border-bottom-left-radius:22px;
      border-top-right-radius:0;
      border-bottom-right-radius:0;
      box-shadow: -18px 0 70px rgba(0,0,0,.55);
      transform: translateX(calc(100% + 18px));
    }
    html[dir="ltr"][data-theme="light"] .menu,
    html[lang^="en"][data-theme="light"] .menu{
      border-left:1px solid rgba(15,23,42,.12);
      border-right:0
    }
    html[dir="ltr"] .menu[aria-hidden="true"],
    html[lang^="en"] .menu[aria-hidden="true"]{
      transform: translateX(calc(100% + 18px));
    }

    .menu[aria-hidden="true"]{
      transform: translateX(calc(-100% - 18px));
      opacity:0;
      pointer-events:none;
    }
    .menu[aria-hidden="false"]{
      transform: translateX(0);
      opacity:1;
      pointer-events:auto;
    }
    html[dir="ltr"] .menu[aria-hidden="false"],
    html[lang^="en"] .menu[aria-hidden="false"]{
      transform: translateX(0);
      opacity:1;
      pointer-events:auto;
    }

    .menuHead{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      padding:6px 4px 10px;
      border-bottom:1px solid rgba(255,255,255,.06);
    }
    .menuTitle{font-weight:950;letter-spacing:.2px;font-size:14px}
    .menuTools{
      margin-top:auto;
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:8px;
      padding:10px;
      border:1px solid rgba(255,255,255,.08);
      border-radius:18px;
      background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)), rgba(18,24,36,.45)
    }

    .menuLinks{
      display:flex;
      flex-direction:column;
      gap:8px;
      align-items:stretch;
      overflow:auto;
      -webkit-overflow-scrolling:touch;
      scrollbar-width:none;
      padding:2px 2px 0;
      flex:1 1 auto;
      min-height:0
    }
    .menuLinks::-webkit-scrollbar{display:none}

    .menuLinks .pill{
      width:100%;
      justify-content:flex-start;
      padding:10px 12px;
      min-height:50px;
      border-radius:16px;
      border:1px solid rgba(255,255,255,.08);
      background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)), rgba(255,255,255,.02);
      transform:none;
      box-shadow:none;
      transition: transform var(--t-fast) var(--ease), background var(--t) var(--ease), border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
    }
    .menuLinks .pill:hover{
      border-color:rgba(255,255,255,.16);
      background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)), rgba(255,255,255,.03)
    }
    .menuLinks .pill:active{transform:scale(.995)}
    .menuLinks .pill:focus-visible{outline:2px solid var(--ring);outline-offset:2px}

    .menuLinks .pillIcon{
      width:36px;height:36px;
      border-radius:14px;
      border:1px solid rgba(255,255,255,.10);
      background:linear-gradient(135deg, rgba(34,197,94,.16), rgba(124,58,237,.14));
      color:var(--text);
    }
    .menuLinks .pillIcon svg{width:18px;height:18px}
    .menuLinks .pillText{line-height:1.2;font-weight:950;font-size:15px}

    .menuLinks .pill[aria-current="page"]{
      background:linear-gradient(135deg, rgba(34,197,94,.18), rgba(124,58,237,.14)), rgba(255,255,255,.02);
      border-color:transparent;
      box-shadow:none;
    }

    @keyframes menuItemIn{
      from{opacity:0;transform:translateX(-12px)}
      to{opacity:1;transform:none}
    }
    @keyframes menuItemInR{
      from{opacity:0;transform:translateX(12px)}
      to{opacity:1;transform:none}
    }
    html[dir="ltr"] .menu[aria-hidden="false"] .menuLinks .pill{animation:menuItemInR 520ms var(--ease) both}

    .menu[aria-hidden="false"] .menuLinks .pill{animation:menuItemIn 520ms var(--ease) both}
    .menu[aria-hidden="false"] .menuLinks .pill:nth-child(1){animation-delay:40ms}
    .menu[aria-hidden="false"] .menuLinks .pill:nth-child(2){animation-delay:60ms}
    .menu[aria-hidden="false"] .menuLinks .pill:nth-child(3){animation-delay:80ms}
    .menu[aria-hidden="false"] .menuLinks .pill:nth-child(4){animation-delay:100ms}
    .menu[aria-hidden="false"] .menuLinks .pill:nth-child(5){animation-delay:120ms}
    .menu[aria-hidden="false"] .menuLinks .pill:nth-child(6){animation-delay:140ms}
    .menu[aria-hidden="false"] .menuLinks .pill:nth-child(7){animation-delay:160ms}
    .menu[aria-hidden="false"] .menuLinks .pill:nth-child(8){animation-delay:180ms}
    .menu[aria-hidden="false"] .menuLinks .pill:nth-child(9){animation-delay:200ms}
    .menu[aria-hidden="false"] .menuLinks .pill:nth-child(10){animation-delay:220ms}
    .menu[aria-hidden="false"] .menuLinks .pill:nth-child(11){animation-delay:240ms}
    .menu[aria-hidden="false"] .menuLinks .pill:nth-child(12){animation-delay:260ms}

    html[data-theme="light"] .menuHead{border-bottom:1px solid rgba(15,23,42,.10)}
    html[data-theme="light"] .menuTools{border-color:rgba(15,23,42,.12);background:linear-gradient(180deg, rgba(15,23,42,.04), rgba(15,23,42,.02)), rgba(255,255,255,.72)}
    html[data-theme="light"] .menuLinks .pill{border-color:rgba(15,23,42,.10);background:linear-gradient(180deg, rgba(15,23,42,.04), rgba(15,23,42,.02)), rgba(255,255,255,.72)}
    html[data-theme="light"] .menuLinks .pill:hover{border-color:rgba(15,23,42,.16);background:linear-gradient(180deg, rgba(15,23,42,.06), rgba(15,23,42,.03)), rgba(255,255,255,.78)}
    html[data-theme="light"] .menuLinks .pillIcon{border-color:rgba(15,23,42,.10);background:linear-gradient(135deg, rgba(16,185,129,.18), rgba(79,70,229,.14))}
    html[data-theme="light"] .menuLinks .pill[aria-current="page"]{border-color:transparent;box-shadow:none}

    .table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
    .table th,.table td{white-space:nowrap}
    input,select,textarea{font-size:16px}
  }

  @media (min-width: 721px){
    .menuLinks{
      overflow-x:auto;
      overflow-y:hidden;
      -webkit-overflow-scrolling:touch;
      scrollbar-width:none;
      gap:12px
    }
    .menuLinks .pill{
      position:relative;
      overflow:hidden;
      padding:10px 13px;
      gap:9px;
      border-radius:16px;
      background:rgba(255,255,255,.04);
      border-color:rgba(255,255,255,.10);
      box-shadow:0 10px 28px rgba(0,0,0,.18);
      transform:translateY(0);
      will-change:transform;
      isolation:isolate;
      flex:0 0 auto;
    }
    .menuLinks .pill::before{
      content:"";
      position:absolute;
      inset:-60% -70%;
      background:radial-gradient(circle at 22% 28%, rgba(110,231,255,.18), rgba(124,58,237,.10) 45%, rgba(0,0,0,0) 72%);
      opacity:0;
      transition:opacity var(--t) var(--ease);
      pointer-events:none;
      z-index:0;
    }
    .menuLinks .pill::after{
      content:"";
      position:absolute;
      left:14px;
      right:14px;
      bottom:6px;
      height:2px;
      border-radius:999px;
      background:linear-gradient(90deg, rgba(110,231,255,0), rgba(110,231,255,.55), rgba(110,231,255,0));
      transform:scaleX(0);
      transform-origin:center;
      transition:transform var(--t) var(--ease), opacity var(--t) var(--ease);
      opacity:.75;
      pointer-events:none;
      z-index:0;
    }
    .menuLinks .pill:hover{
      background:rgba(255,255,255,.07);
      border-color:rgba(110,231,255,.22);
      box-shadow:0 16px 46px rgba(0,0,0,.26);
      transform:translateY(0);
    }
    .menuLinks .pill:hover::before{opacity:1}
    .menuLinks .pill:hover::after{transform:scaleX(1)}
    .menuLinks .pill:active{transform:translateY(0)}
    .menuLinks .pill[aria-current="page"]{
      background:linear-gradient(135deg, rgba(34,197,94,.18), rgba(124,58,237,.14)), rgba(255,255,255,.04);
      border-color:transparent;
      box-shadow:0 18px 52px rgba(0,0,0,.30);
    }
    .menuLinks .pill[aria-current="page"]::before{opacity:1}
    .menuLinks .pill[aria-current="page"]::after{
      transform:scaleX(0);
      opacity:0;
    }
    .menuLinks .pillIcon{
      width:29px;height:29px;
      border-radius:12px;
      border:1px solid rgba(255,255,255,.10);
      background:linear-gradient(135deg, rgba(110,231,255,.12), rgba(124,58,237,.10));
      color:var(--text);
      position:relative;
      z-index:1;
    }
    .menuLinks .pillIcon svg{width:18px;height:18px}
    .menuLinks .pill[aria-current="page"] .pillIcon{
      border-color:rgba(255,255,255,.10);
      background:linear-gradient(135deg, var(--brand2), var(--brand));
      color:#fff;
      box-shadow:0 10px 26px rgba(124,58,237,.22);
    }
    html[data-theme="light"] .menuLinks .pill{
      background:rgba(255,255,255,.92);
      border-color:rgba(15,23,42,.10);
      box-shadow:none;
    }
    html[data-theme="light"] .menuLinks .pill:hover{
      background:rgba(255,255,255,.98);
      border-color:rgba(79,70,229,.18);
      box-shadow:none;
    }
    html[data-theme="light"] .menuLinks .pill::before{
      background:radial-gradient(circle at 22% 28%, rgba(59,130,246,.16), rgba(79,70,229,.10) 45%, rgba(0,0,0,0) 72%);
    }
    html[data-theme="light"] .menuLinks .pill::after{
      background:linear-gradient(90deg, rgba(59,130,246,0), rgba(59,130,246,.55), rgba(59,130,246,0));
      opacity:.85;
    }
    html[data-theme="light"] .menuLinks .pill[aria-current="page"]{
      border-color:transparent;
      box-shadow:none;
    }
    html[data-theme="light"] .menuLinks .pill[aria-current="page"]::after{
      background:linear-gradient(90deg, rgba(16,185,129,0), rgba(16,185,129,.70), rgba(79,70,229,.50), rgba(16,185,129,0));
    }
    html[data-theme="light"] .menuLinks .pillIcon{
      border-color:rgba(15,23,42,.10);
      background:linear-gradient(135deg, rgba(16,185,129,.16), rgba(79,70,229,.12));
      color:var(--text);
    }
    .menuLinks .pillText{
      position:relative;
      z-index:1;
      font-size:12.5px;
      font-weight:950;
      letter-spacing:.12px;
      white-space:nowrap;
      line-height:1.35;
    }
    .toolGroup{padding:5px 6px;gap:6px}
    .toolGroup.themeSwitch,
    .themeSwitch{padding:5px 6px}

    .langBtn{height:32px;padding:0 8px}
    .iconBtn{width:32px;height:32px}
    .iconBtn svg{width:17px;height:17px}

    .nav .row{
      display:grid;
      grid-template-columns: 1fr auto;
      grid-template-areas:
        "brand brand"
        "links tools";
      align-items:center;
      column-gap:16px;
      row-gap:12px;
    }
    .brand{
      grid-area:brand;
      min-width:0;
    }
    .menu{
      grid-area:links;
      min-width:0;
    }
    .navTools{
      grid-area:tools;
      margin-inline-start:0;
      justify-self:end;
      flex-wrap:nowrap;
    }
    .menuLinks{
      flex-wrap:nowrap;
      overflow-x:auto;
      overflow-y:hidden;
      -webkit-overflow-scrolling:touch;
      scrollbar-width:none;
      padding:0;
      gap:12px;
      min-width:0;
    }
    .menuLinks::-webkit-scrollbar{display:none}
    .menuLinks .pill{
      max-width:none;
      flex:0 0 auto;
      min-width:max-content;
      padding:10px 14px;
      border-radius:16px;
    }
    .menuLinks .pillText{
      white-space:nowrap;
      overflow-wrap:normal;
      word-break:normal;
      line-height:1.25;
    }
    .brand > div{overflow:visible}
    .brand .small{
      white-space:normal;
      overflow:visible;
      text-overflow:clip;@font-face{
    font-family: Vazirmatn;
    src: url("../fonts/Vazirmatn-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }
  :root{
    --bg:#0b0f14;
    --card:#121824;
    --muted:#9aa4b2;
    --text:#e6edf3;
    --brand:#7c3aed;
    --brand2:#22c55e;
    --danger:#ef4444;
    --border:#1f2a3a;
    --ring:rgba(110,231,255,.55);
    --btnA:#7c3aed;
    --btnB:#4f46e5;
    --ease:cubic-bezier(.2,.8,.2,1);
    --t-fast:140ms;
    --t:220ms;
    --t-slow:420ms
  }
  *{box-sizing:border-box}
  html,body{min-height:100%}
  html{
    overflow-x:hidden;
    overflow-x:clip;
  }
  body{
    margin:0;
    font-family: Vazirmatn, system-ui, -apple-system, Segoe UI, Roboto, Arial;
    background: var(--bg);
    color:var(--text);
    direction: rtl;
    position:relative;
    z-index:0;
    overflow-x:hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  a{color:inherit;text-decoration:none}
  img{max-width:100%;height:auto}
pre, code, kbd, samp{
  direction:ltr;
  unicode-bidi:isolate;
  text-align:left;
}
pre{
  max-width:100%;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}

  .container{max-width:1100px;margin:0 auto;padding:24px}

  .skipLink{
    position:fixed;
    top:10px;
    inset-inline-start:10px;
    padding:10px 12px;
    border-radius:14px;
    border:1px solid var(--border);
    background:rgba(18,24,36,.95);
    transform:translateY(-140%);
    transition:transform var(--t) var(--ease);
    z-index:10000
  }
  .skipLink:focus{transform:translateY(0)}
  .skipLink:focus-visible{outline:2px solid var(--ring);outline-offset:2px}

  .nav{
    position:relative;
    z-index:20;
    backdrop-filter: blur(10px);
    background: rgba(7,10,15,0.7);
    border-bottom:1px solid var(--border);
  }
  .nav .row{
    display:flex;
    gap:16px;
    align-items:center;
    justify-content:flex-start;
    flex-wrap:nowrap
  }
  .brand{display:flex;gap:10px;align-items:center;min-width:0;flex:0 1 auto}
  .brand > div{min-width:0;overflow:hidden}
  .brand b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .brand .small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

  .logo{
    width:36px;height:36px;border-radius:12px;
    background: url("/logo.png") center / contain no-repeat;
    background-color: transparent;
  }
  .menu{display:flex;align-items:center;flex:1 1 auto;min-width:0}
  .menuHead,.menuTools{display:none}
  .menuLinks{
    display:flex;
    gap:14px;
    flex-wrap:nowrap;
    align-items:center;
    flex:1 1 auto;
    min-width:0;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .menuLinks::-webkit-scrollbar{display:none}
  .burger{display:none}
  .navBackdrop{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.55);
    backdrop-filter: blur(2px);
    opacity:0;
    pointer-events:none;
    transition: opacity var(--t-slow) var(--ease);
    z-index:40
  }
  .navBackdrop[aria-hidden="false"]{opacity:1;pointer-events:auto}
  body.navOpen{overflow:hidden}
  .pill{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 12px;border:1px solid var(--border);border-radius:999px;
    background: rgba(18,24,36,0.6);
    transition: transform var(--t) var(--ease), border-color var(--t) var(--ease), background var(--t) var(--ease), box-shadow var(--t) var(--ease);
  }
  .pillIcon{
    width:20px;height:20px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto
  }
  .pillIcon svg{width:20px;height:20px;display:block}
  .pillText{line-height:1.25}
  .pill:hover{border-color:rgba(255,255,255,.18);transform:translateY(-1px)}
  .pill:active{transform:translateY(0)}
  .pill:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
  .pill[aria-current="page"]{
    border-color:transparent;
    box-shadow:none;
  }

  .navTools{
    margin-inline-start:auto;
    display:flex;
    gap:10px;
    align-items:center;
    flex:0 0 auto
  }
  .toolGroup{
    display:flex;
    align-items:center;
    gap:6px;
    padding:6px 6px;
    border-radius:999px;
    border:1px solid var(--border);
    background: rgba(7,10,15,0.35);
    backdrop-filter: blur(10px);
  }
  .toolGroup.themeSwitch,
  .themeSwitch{
    min-width:124px;
    justify-content:space-between;
    gap:0;
    direction:ltr;
  }
  .toolGroup.themeSwitch > :not([data-theme]),
  .themeSwitch > :not([data-theme]){display:none}

  .toolGroup.themeSwitch > [data-theme],
  .themeSwitch > [data-theme]{
    flex:0 0 auto;
    width:32px;
    height:32px;
  }

  .toolGroup.themeSwitch > [data-theme="light"],
  .themeSwitch > [data-theme="light"]{order:1}
  .toolGroup.themeSwitch > [data-theme="dark"],
  .themeSwitch > [data-theme="dark"]{order:2}

  html[dir="ltr"] .toolGroup.themeSwitch > [data-theme="dark"],
  html[dir="ltr"] .themeSwitch > [data-theme="dark"]{order:1}
  html[dir="ltr"] .toolGroup.themeSwitch > [data-theme="light"],
  html[dir="ltr"] .themeSwitch > [data-theme="light"]{order:2}

  .toolGroup.langSwitch{
    min-width:124px;
    justify-content:space-between;
    gap:0;
    padding:6px;
    direction:ltr;
  }
  .toolGroup.langSwitch .langSep{
    margin-inline:auto;
    padding:0 6px;
  }

  .langBtn,.iconBtn{
    appearance:none;
    -webkit-appearance:none;
    border:0;
    background:transparent;
    color:var(--muted);
    font:inherit;
    cursor:pointer;
    border-radius:999px;
    display:inline-flex;
    align-items:center;
    justify-content:center
  }
  .langBtn{
    height:32px;
    padding:0 10px;
    font-weight:800;
    letter-spacing:.4px;
  }
  .langSep{color:var(--muted);opacity:.65;font-weight:800;padding:0 2px}
  .iconBtn{
    width:32px;height:32px;
    border:1px solid transparent;
  }
  .iconBtn svg{width:18px;height:18px;display:block}
  .iconBtn.burger{display:none}
  .langBtn.on,.iconBtn.on{color:var(--text)}
  .iconBtn.on{background:rgba(255,255,255,0.06);border-color:rgba(255,255,255,0.10)}
  .langBtn:focus-visible,.iconBtn:focus-visible{outline:2px solid var(--ring);outline-offset:2px}

  .hero{
    padding:44px 0 24px 0;
    display:grid;grid-template-columns:1.3fr 1fr;gap:18px;
    align-items:stretch;
  }
  .card{
    border:1px solid var(--border);
    border-radius:20px;
    padding:18px;
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)), rgba(18,24,36,0.65);
    box-shadow:0 18px 50px rgba(0,0,0,0.35);
    transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
  }
  @media (hover:hover) and (pointer:fine){
    .card:hover{
      border-color: rgba(110,231,255,.16);
      box-shadow: 0 22px 70px rgba(0,0,0,0.45);
    }
  }
  .h1{font-size:38px;line-height:1.25;margin:0 0 10px 0}
  .h2{font-size:22px;line-height:1.4;margin:0 0 10px 0}
  .p{color:var(--muted);line-height:1.9;margin:0}
  .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
  .grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
  .kv{display:flex;gap:10px;align-items:flex-start}
  .kv b{display:block}
  .kv span{color:var(--muted);line-height:1.8}

  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    padding:12px 14px;border-radius:14px;border:1px solid transparent;
    background: linear-gradient(135deg,var(--btnA),var(--btnB));
    color:white;font-weight:700;
    transition: transform var(--t-fast) var(--ease), filter var(--t-fast) var(--ease), border-color var(--t) var(--ease);
  }
  .btn:hover{filter:brightness(1.07)}
  .btn:active{transform:translateY(1px) scale(.99)}
  .btn:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
  .btn2{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    padding:12px 14px;border-radius:14px;border:1px solid var(--border);
    background: rgba(18,24,36,0.6);
    color:var(--text);font-weight:700;
    transition: transform var(--t-fast) var(--ease), filter var(--t-fast) var(--ease), border-color var(--t) var(--ease);
  }
  .btn2:hover{border-color:#2c3a52}
  .btn2:active{transform:translateY(1px) scale(.99)}
  .btn2:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
  button.btn,button.btn2{appearance:none;-webkit-appearance:none;font-family:inherit;font-size:inherit;line-height:inherit}

  .small{font-size:13px;color:var(--muted)}
  .footer{padding:36px 0;color:var(--muted);border-top:1px solid var(--border);margin-top:0;background:transparent}
  .footerRow{display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap}
  .footerMeta{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
  .footerLinks{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
  .footerSeal img{display:block;width:110px;height:auto}

  .form{display:grid;gap:10px}
  .input, select, textarea{
    width:100%;
    padding:12px 12px;border-radius:14px;
    border:1px solid var(--border);
    background: rgba(7,10,15,0.6);
    color: var(--text);
    outline:none;
    transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease), background var(--t) var(--ease);
  }
  .input:focus, select:focus, textarea:focus{
    border-color: rgba(110,231,255,.28);
    background: rgba(110,231,255,.06);
    box-shadow:none;
    outline:none;
    transition: border-color .15s ease, background-color .15s ease;
  }
  .pwBtn{
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
  }
  .pwBtn:hover{background:transparent !important}

  textarea{min-height:120px;resize:vertical}
  .row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
  .badge{display:inline-flex;align-items:center;gap:8px;padding:8px 10px;border-radius:999px;border:1px solid var(--border);background:rgba(18,24,36,0.55);color:var(--muted)}
  .table{width:100%;border-collapse:separate;border-spacing:0 10px}
  .table th{color:var(--muted);font-weight:600;text-align:right;font-size:13px}
  .table td{padding:12px 12px;background:rgba(18,24,36,0.65);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
  .table td:first-child{border-right:1px solid var(--border);border-top-right-radius:16px;border-bottom-right-radius:16px}
  .table td:last-child{border-left:1px solid var(--border);border-top-left-radius:16px;border-bottom-left-radius:16px}
  .alert{padding:12px 14px;border-radius:14px;border:1px solid var(--border);background:rgba(18,24,36,0.65)}
  .alert.ok{border-color:rgba(34,197,94,0.35)}
  .alert.bad{border-color:rgba(239,68,68,0.35)}

  .calendar{border:1px solid var(--border);border-radius:18px;overflow:hidden}
  .cal-head{display:flex;align-items:center;justify-content:space-between;padding:12px 12px;background:rgba(18,24,36,0.8);border-bottom:1px solid var(--border)}
  .cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--border)}
  .cal-cell{background:rgba(7,10,15,0.7);padding:10px;min-height:76px;cursor:pointer}
  .cal-cell:hover{filter:brightness(1.08)}
  .cal-cell.disabled{opacity:.35;cursor:not-allowed}
  .cal-cell.selected{outline:2px solid rgba(124,58,237,0.7);outline-offset:-2px}
  .cal-dow{font-size:12px;color:var(--muted);padding:10px;background:rgba(7,10,15,0.8);text-align:center}
  .slot{padding:10px 12px;border-radius:14px;border:1px solid var(--border);background:rgba(7,10,15,0.55);display:flex;justify-content:space-between;align-items:center}
  .slot.disabled{opacity:.45}

  @media (max-width: 900px){
    .hero{grid-template-columns:1fr}
    .grid3{grid-template-columns:1fr}
    .grid2{grid-template-columns:1fr}
    .h1{font-size:30px}
  }

  .res-shell{display:grid;grid-template-columns:1.15fr .85fr;gap:14px;align-items:start}
  .res-hero{position:relative;overflow:hidden}
  .res-hero:before{content:"";position:absolute;inset:-120px -140px auto auto;width:360px;height:360px;border-radius:999px;background:radial-gradient(circle at 30% 30%, rgba(167,139,250,.75), rgba(124,58,237,.22) 55%, rgba(0,0,0,0) 70%);pointer-events:none}
  .res-hero:after{content:"";position:absolute;inset:auto auto -160px -160px;width:420px;height:420px;border-radius:999px;background:radial-gradient(circle at 40% 40%, rgba(34,197,94,.30), rgba(34,197,94,.10) 55%, rgba(0,0,0,0) 70%);pointer-events:none}
  .res-top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap}
  .res-title{display:flex;flex-direction:column;gap:8px;position:relative;z-index:1}
  .res-title b{font-size:22px}
  .res-title span{color:var(--muted);line-height:1.9}
  .res-stepper{display:flex;gap:10px;flex-wrap:wrap;position:relative;z-index:1}
  .step{display:inline-flex;align-items:center;gap:8px;padding:10px 12px;border-radius:999px;border:1px solid var(--border);background:rgba(7,10,15,.55);color:var(--muted)}
  .step i{width:22px;height:22px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;background:rgba(124,58,237,.18);color:#c4b5fd;font-style:normal;font-weight:800}
  .step.on{border-color:rgba(124,58,237,.45);color:var(--text)}
  .step.on i{background:linear-gradient(135deg,var(--btnA),var(--btnB));color:#fff}
  .res-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px;position:relative;z-index:1}
  .kpi{border:1px solid var(--border);background:rgba(7,10,15,.45);border-radius:16px;padding:12px}
  .kpi b{display:block;font-size:18px;margin-bottom:6px}
  .kpi span{display:block;color:var(--muted);line-height:1.8;font-size:13px}
  .res-side{position:sticky;top:86px}
  .res-card-title{display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap}
  .datePill{display:inline-flex;align-items:center;gap:10px;padding:10px 12px;border-radius:999px;border:1px solid var(--border);background:rgba(18,24,36,.55)}
  .datePill b{font-size:13px}
  .datePill span{color:var(--muted);font-size:13px}
  .slotGrid{display:grid;grid-template-columns:1fr;gap:10px;margin-top:10px}
  .slotItem{border:1px solid var(--border);background:rgba(7,10,15,.55);border-radius:18px;padding:12px;display:flex;justify-content:space-between;gap:10px;align-items:center}
  .slotItem .meta{display:flex;flex-direction:column;gap:6px}
  .slotItem .meta b{font-size:15px}
  .slotItem .meta span{color:var(--muted);font-size:13px}
  .slotItem .cta{display:flex;gap:8px;align-items:center}
  .slotTag{display:inline-flex;align-items:center;gap:8px;padding:8px 10px;border-radius:999px;border:1px solid var(--border);background:rgba(18,24,36,.55);color:var(--muted);font-size:12px}
  .slotItem.off{opacity:.45}
  .shimmer{height:14px;border-radius:10px;background:linear-gradient(90deg, rgba(31,42,58,.35), rgba(255,255,255,.10), rgba(31,42,58,.35));background-size:200% 100%;animation:sh 1.2s linear infinite}
  .shimmerBox{border:1px solid var(--border);background:rgba(7,10,15,.55);border-radius:18px;padding:12px;display:grid;gap:10px}
  @keyframes sh{0%{background-position:0% 0}100%{background-position:200% 0}}
  .cal-cell.has{position:relative}
  .cal-dot{position:absolute;left:10px;bottom:10px;width:8px;height:8px;border-radius:999px;background:linear-gradient(135deg,var(--brand2),var(--brand));box-shadow:0 8px 20px rgba(34,197,94,.25)}
  .cal-cell.selected .cal-dot{filter:brightness(1.15)}
  @media (max-width: 900px){
    .res-shell{grid-template-columns:1fr}
    .res-side{position:static}
    .res-kpis{grid-template-columns:1fr}
  }

  @view-transition { navigation: auto; }
  ::view-transition-old(root),
  ::view-transition-new(root){ animation-duration: var(--t-slow); animation-timing-function: var(--ease); }
  ::view-transition-old(root){ animation-name: vtOut; }
  ::view-transition-new(root){ animation-name: vtIn; }
  @keyframes vtOut{ from{opacity:1;transform:none} to{opacity:0;transform:translateY(-8px) scale(.99)} }
  @keyframes vtIn{ from{opacity:0;transform:translateY(10px) scale(.99)} to{opacity:1;transform:none} }

  .vt-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.65); opacity:0; pointer-events:none; transition:opacity var(--t) var(--ease); z-index:9999; }
  body.leaving .vt-overlay{ opacity:1; }

  .page{ min-height: calc(100vh - 120px); opacity:1; transform:none; transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); }
  html.js body.preload .page{ opacity:0; transform: translateY(10px); }
  body.leaving .page{ opacity:0; transform: translateY(-8px) scale(.99); }

  body::before{
    content:"";
    position:fixed;
    inset:-20%;
    background:
      radial-gradient(60rem 40rem at 20% 10%, rgba(167,139,250,.18), transparent 60%),
      radial-gradient(55rem 38rem at 80% 18%, rgba(34,197,94,.12), transparent 60%),
      radial-gradient(70rem 50rem at 40% 90%, rgba(124,58,237,.16), transparent 62%),
      radial-gradient(90rem 70rem at 50% 50%, rgba(0,0,0,.55), rgba(0,0,0,.85));
    transform: translate3d(0,0,0);
    animation: bgFloat 18s var(--ease) infinite alternate;
    pointer-events:none;
    z-index:-2;
  }
  @keyframes bgFloat{
    from{ transform: translate3d(-1.2%, -0.8%, 0) scale(1); }
    to{ transform: translate3d(1.4%, 1.1%, 0) scale(1.03); }
  }
  body::after{
    content:"";
    position:fixed;
    inset:0;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
    opacity:.06;
    mix-blend-mode: overlay;
    pointer-events:none;
    z-index:-1;
  }

  .reveal{
    opacity:0;
    transform: translateY(14px);
    filter: blur(6px);
    transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease), filter var(--t-slow) var(--ease);
    transition-delay: var(--reveal-delay, 0ms);
    will-change: transform, opacity, filter;
  }
  .reveal.in{
    opacity:1;
    transform:none;
    filter: blur(0);
  }

  html[dir="ltr"] body,
  html[lang^="en"] body{direction:ltr}
  html[dir="ltr"] .table th,
  html[lang^="en"] .table th{text-align:left}
  html[dir="ltr"] .table td,
  html[lang^="en"] .table td{text-align:left}
  html[dir="ltr"] .table td:first-child,
  html[lang^="en"] .table td:first-child{border-right:0;border-left:1px solid var(--border);border-top-right-radius:0;border-bottom-right-radius:0;border-top-left-radius:16px;border-bottom-left-radius:16px}
  html[dir="ltr"] .table td:last-child,
  html[lang^="en"] .table td:last-child{border-left:0;border-right:1px solid var(--border);border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:16px;border-bottom-right-radius:16px}
  html[dir="ltr"] .menuLinks a.pill[href*="register" i],
  html[lang^="en"] .menuLinks a.pill[href*="register" i],
  html[dir="ltr"] .menuLinks a.pill[href*="signup" i],
  html[lang^="en"] .menuLinks a.pill[href*="signup" i]{display:none}

  html[data-theme="light"]{
    --bg:#ffffff;
    --card:#ffffff;
    --muted:#334155;
    --text:#0b1220;
    --brand:#4f46e5;
    --brand2:#10b981;
    --danger:#dc2626;
    --border:rgba(15,23,42,.14);
    --ring:rgba(59,130,246,.28);
    --btnA:#4f46e5;
    --btnB:#2563eb;
  }
  html[data-theme="light"] body{background:linear-gradient(180deg,#ffffff,#f3f8ff);color:var(--text)}
  html[data-theme="light"] body::before{
    background:
      radial-gradient(64rem 44rem at 6% -6%, rgba(79,70,229,.12), transparent 64%),
      radial-gradient(58rem 40rem at 96% 8%, rgba(16,185,129,.10), transparent 62%),
      radial-gradient(70rem 54rem at 14% 104%, rgba(236,72,153,.08), transparent 64%),
      radial-gradient(92rem 72rem at 50% 54%, rgba(255,255,255,1), rgba(243,248,255,1));
    opacity:1;
  }
  html[data-theme="light"] body::after{opacity:.008;mix-blend-mode:normal}
  html[data-theme="light"] .nav{background:rgba(255,255,255,.92);border-bottom:1px solid rgba(15,23,42,.10)}
  html[data-theme="light"] .toolGroup{background:rgba(255,255,255,.82)}
  html[data-theme="light"] .iconBtn.on{background:rgba(79,70,229,.10);border-color:rgba(79,70,229,.18)}
  html[data-theme="light"] .pill{background:rgba(255,255,255,.92);border-color:rgba(15,23,42,.10)}
  html[data-theme="light"] .pill:hover{border-color:rgba(79,70,229,.28)}
  html[data-theme="light"] .btn2{background:rgba(255,255,255,.92);border-color:rgba(15,23,42,.12);color:var(--text)}
  html[data-theme="light"] .badge{background:rgba(255,255,255,.88);border-color:rgba(15,23,42,.10);color:var(--muted)}
  html[data-theme="light"] .card{background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(255,255,255,.92));box-shadow:0 18px 50px rgba(15,23,42,.08)}
  html[data-theme="light"] .table td{background:rgba(255,255,255,.96)}
  html[data-theme="light"] .input,html[data-theme="light"] select,html[data-theme="light"] textarea{background:#ffffff;border-color:rgba(15,23,42,.12);color:var(--text)}
  html[data-theme="light"] .vt-overlay{background:rgba(15,23,42,.14)}
  html[data-theme="light"] .menu{background:transparent;border-left:0}
  html[data-theme="light"] .menuTools{background:rgba(255,255,255,.92)}
  html[data-theme="light"] .navBackdrop{background:rgba(15,23,42,.38)}

  @media (max-width: 720px){
    .container{padding:16px}
    .nav{position:sticky;top:0;z-index:60}
    .nav .row{flex-wrap:nowrap}
    .brand .small{display:none}
    .brand b{font-size:15px}
    .logo{width:32px;height:32px;border-radius:12px}
    .navTools{display:none}
    .iconBtn.burger{display:inline-flex;margin-inline-start:auto}

    .menu{
      position:fixed;
      top:0;bottom:0;
      width:min(78vw,360px);
      left:0;
      right:auto;
      display:flex;
      flex-direction:column;
      gap:12px;
      padding:14px;
      padding-top:12px;
      padding-bottom:calc(14px + env(safe-area-inset-bottom));
      background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0)), rgba(7,10,15,0.96);
      backdrop-filter: blur(16px);
      border-right:1px solid var(--border);
      border-left:0;
      border-top-right-radius:22px;
      border-bottom-right-radius:22px;
      box-shadow: 18px 0 70px rgba(0,0,0,.55);
      isolation:isolate;
      transform: translateX(calc(-100% - 18px));
      opacity:0;
      pointer-events:none;
      transition: transform 520ms var(--ease), opacity 260ms var(--ease);
      will-change: transform, opacity;
      z-index:70;
      overflow:hidden;
      overscroll-behavior:contain
    }
    .menu::before{
      content:"";
      position:absolute;
      inset:-45% -60% auto auto;
      width:440px;height:440px;
      border-radius:999px;
      background:radial-gradient(circle at 30% 30%, rgba(167,139,250,.30), rgba(0,0,0,0) 62%);
      pointer-events:none;
      z-index:-1;
    }
    .menu::after{
      content:"";
      position:absolute;
      inset:auto auto -55% -60%;
      width:480px;height:480px;
      border-radius:999px;
      background:radial-gradient(circle at 40% 40%, rgba(34,197,94,.18), rgba(0,0,0,0) 65%);
      pointer-events:none;
      z-index:-1;
    }

    html[data-theme="light"] .menu{
      background:rgba(255,255,255,.96);
      border-right:1px solid rgba(15,23,42,.12);
      border-left:0
    }
    html[dir="ltr"] .menu,
    html[lang^="en"] .menu{
      left:auto;
      right:0;
      border-left:1px solid var(--border);
      border-right:0;
      border-top-left-radius:22px;
      border-bottom-left-radius:22px;
      border-top-right-radius:0;
      border-bottom-right-radius:0;
      box-shadow: -18px 0 70px rgba(0,0,0,.55);
      transform: translateX(calc(100% + 18px));
    }
    html[dir="ltr"][data-theme="light"] .menu,
    html[lang^="en"][data-theme="light"] .menu{
      border-left:1px solid rgba(15,23,42,.12);
      border-right:0
    }
    html[dir="ltr"] .menu[aria-hidden="true"],
    html[lang^="en"] .menu[aria-hidden="true"]{
      transform: translateX(calc(100% + 18px));
    }

    .menu[aria-hidden="true"]{
      transform: translateX(calc(-100% - 18px));
      opacity:0;
      pointer-events:none;
    }
    .menu[aria-hidden="false"]{
      transform: translateX(0);
      opacity:1;
      pointer-events:auto;
    }
    html[dir="ltr"] .menu[aria-hidden="false"],
    html[lang^="en"] .menu[aria-hidden="false"]{
      transform: translateX(0);
      opacity:1;
      pointer-events:auto;
    }

    .menuHead{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      padding:6px 4px 10px;
      border-bottom:1px solid rgba(255,255,255,.06);
    }
    .menuTitle{font-weight:950;letter-spacing:.2px;font-size:14px}
    .menuTools{
      margin-top:auto;
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:8px;
      padding:10px;
      border:1px solid rgba(255,255,255,.08);
      border-radius:18px;
      background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)), rgba(18,24,36,.45)
    }

    .menuLinks{
      display:flex;
      flex-direction:column;
      gap:8px;
      align-items:stretch;
      overflow:auto;
      -webkit-overflow-scrolling:touch;
      scrollbar-width:none;
      padding:2px 2px 0;
      flex:1 1 auto;
      min-height:0
    }
    .menuLinks::-webkit-scrollbar{display:none}

    .menuLinks .pill{
      width:100%;
      justify-content:flex-start;
      padding:10px 12px;
      min-height:50px;
      border-radius:16px;
      border:1px solid rgba(255,255,255,.08);
      background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)), rgba(255,255,255,.02);
      transform:none;
      box-shadow:none;
      transition: transform var(--t-fast) var(--ease), background var(--t) var(--ease), border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
    }
    .menuLinks .pill:hover{
      border-color:rgba(255,255,255,.16);
      background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)), rgba(255,255,255,.03)
    }
    .menuLinks .pill:active{transform:scale(.995)}
    .menuLinks .pill:focus-visible{outline:2px solid var(--ring);outline-offset:2px}

    .menuLinks .pillIcon{
      width:36px;height:36px;
      border-radius:14px;
      border:1px solid rgba(255,255,255,.10);
      background:linear-gradient(135deg, rgba(34,197,94,.16), rgba(124,58,237,.14));
      color:var(--text);
    }
    .menuLinks .pillIcon svg{width:18px;height:18px}
    .menuLinks .pillText{line-height:1.2;font-weight:950;font-size:15px}

    .menuLinks .pill[aria-current="page"]{
      background:linear-gradient(135deg, rgba(34,197,94,.18), rgba(124,58,237,.14)), rgba(255,255,255,.02);
      border-color:transparent;
      box-shadow:none;
    }

    @keyframes menuItemIn{
      from{opacity:0;transform:translateX(-12px)}
      to{opacity:1;transform:none}
    }
    @keyframes menuItemInR{
      from{opacity:0;transform:translateX(12px)}
      to{opacity:1;transform:none}
    }
    html[dir="ltr"] .menu[aria-hidden="false"] .menuLinks .pill{animation:menuItemInR 520ms var(--ease) both}

    .menu[aria-hidden="false"] .menuLinks .pill{animation:menuItemIn 520ms var(--ease) both}
    .menu[aria-hidden="false"] .menuLinks .pill:nth-child(1){animation-delay:40ms}
    .menu[aria-hidden="false"] .menuLinks .pill:nth-child(2){animation-delay:60ms}
    .menu[aria-hidden="false"] .menuLinks .pill:nth-child(3){animation-delay:80ms}
    .menu[aria-hidden="false"] .menuLinks .pill:nth-child(4){animation-delay:100ms}
    .menu[aria-hidden="false"] .menuLinks .pill:nth-child(5){animation-delay:120ms}
    .menu[aria-hidden="false"] .menuLinks .pill:nth-child(6){animation-delay:140ms}
    .menu[aria-hidden="false"] .menuLinks .pill:nth-child(7){animation-delay:160ms}
    .menu[aria-hidden="false"] .menuLinks .pill:nth-child(8){animation-delay:180ms}
    .menu[aria-hidden="false"] .menuLinks .pill:nth-child(9){animation-delay:200ms}
    .menu[aria-hidden="false"] .menuLinks .pill:nth-child(10){animation-delay:220ms}
    .menu[aria-hidden="false"] .menuLinks .pill:nth-child(11){animation-delay:240ms}
    .menu[aria-hidden="false"] .menuLinks .pill:nth-child(12){animation-delay:260ms}

    html[data-theme="light"] .menuHead{border-bottom:1px solid rgba(15,23,42,.10)}
    html[data-theme="light"] .menuTools{border-color:rgba(15,23,42,.12);background:linear-gradient(180deg, rgba(15,23,42,.04), rgba(15,23,42,.02)), rgba(255,255,255,.72)}
    html[data-theme="light"] .menuLinks .pill{border-color:rgba(15,23,42,.10);background:linear-gradient(180deg, rgba(15,23,42,.04), rgba(15,23,42,.02)), rgba(255,255,255,.72)}
    html[data-theme="light"] .menuLinks .pill:hover{border-color:rgba(15,23,42,.16);background:linear-gradient(180deg, rgba(15,23,42,.06), rgba(15,23,42,.03)), rgba(255,255,255,.78)}
    html[data-theme="light"] .menuLinks .pillIcon{border-color:rgba(15,23,42,.10);background:linear-gradient(135deg, rgba(16,185,129,.18), rgba(79,70,229,.14))}
    html[data-theme="light"] .menuLinks .pill[aria-current="page"]{border-color:transparent;box-shadow:none}

    .table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
    .table th,.table td{white-space:nowrap}
    input,select,textarea{font-size:16px}
  }

  @media (min-width: 721px){
    .menuLinks{
      overflow-x:auto;
      overflow-y:hidden;
      -webkit-overflow-scrolling:touch;
      scrollbar-width:none;
      gap:12px
    }
    .menuLinks .pill{
      position:relative;
      overflow:hidden;
      padding:10px 13px;
      gap:9px;
      border-radius:16px;
      background:rgba(255,255,255,.04);
      border-color:rgba(255,255,255,.10);
      box-shadow:0 10px 28px rgba(0,0,0,.18);
      transform:translateY(0);
      will-change:transform;
      isolation:isolate;
      flex:0 0 auto;
    }
    .menuLinks .pill::before{
      content:"";
      position:absolute;
      inset:-60% -70%;
      background:radial-gradient(circle at 22% 28%, rgba(110,231,255,.18), rgba(124,58,237,.10) 45%, rgba(0,0,0,0) 72%);
      opacity:0;
      transition:opacity var(--t) var(--ease);
      pointer-events:none;
      z-index:0;
    }
    .menuLinks .pill::after{
      content:"";
      position:absolute;
      left:14px;
      right:14px;
      bottom:6px;
      height:2px;
      border-radius:999px;
      background:linear-gradient(90deg, rgba(110,231,255,0), rgba(110,231,255,.55), rgba(110,231,255,0));
      transform:scaleX(0);
      transform-origin:center;
      transition:transform var(--t) var(--ease), opacity var(--t) var(--ease);
      opacity:.75;
      pointer-events:none;
      z-index:0;
    }
    .menuLinks .pill:hover{
      background:rgba(255,255,255,.07);
      border-color:rgba(110,231,255,.22);
      box-shadow:0 16px 46px rgba(0,0,0,.26);
      transform:translateY(0);
    }
    .menuLinks .pill:hover::before{opacity:1}
    .menuLinks .pill:hover::after{transform:scaleX(1)}
    .menuLinks .pill:active{transform:translateY(0)}
    .menuLinks .pill[aria-current="page"]{
      background:linear-gradient(135deg, rgba(34,197,94,.18), rgba(124,58,237,.14)), rgba(255,255,255,.04);
      border-color:transparent;
      box-shadow:0 18px 52px rgba(0,0,0,.30);
    }
    .menuLinks .pill[aria-current="page"]::before{opacity:1}
    .menuLinks .pill[aria-current="page"]::after{
      transform:scaleX(0);
      opacity:0;
    }
    .menuLinks .pillIcon{
      width:29px;height:29px;
      border-radius:12px;
      border:1px solid rgba(255,255,255,.10);
      background:linear-gradient(135deg, rgba(110,231,255,.12), rgba(124,58,237,.10));
      color:var(--text);
      position:relative;
      z-index:1;
    }
    .menuLinks .pillIcon svg{width:18px;height:18px}
    .menuLinks .pill[aria-current="page"] .pillIcon{
      border-color:rgba(255,255,255,.10);
      background:linear-gradient(135deg, var(--brand2), var(--brand));
      color:#fff;
      box-shadow:0 10px 26px rgba(124,58,237,.22);
    }
    html[data-theme="light"] .menuLinks .pill{
      background:rgba(255,255,255,.92);
      border-color:rgba(15,23,42,.10);
      box-shadow:none;
    }
    html[data-theme="light"] .menuLinks .pill:hover{
      background:rgba(255,255,255,.98);
      border-color:rgba(79,70,229,.18);
      box-shadow:none;
    }
    html[data-theme="light"] .menuLinks .pill::before{
      background:radial-gradient(circle at 22% 28%, rgba(59,130,246,.16), rgba(79,70,229,.10) 45%, rgba(0,0,0,0) 72%);
    }
    html[data-theme="light"] .menuLinks .pill::after{
      background:linear-gradient(90deg, rgba(59,130,246,0), rgba(59,130,246,.55), rgba(59,130,246,0));
      opacity:.85;
    }
    html[data-theme="light"] .menuLinks .pill[aria-current="page"]{
      border-color:transparent;
      box-shadow:none;
    }
    html[data-theme="light"] .menuLinks .pill[aria-current="page"]::after{
      background:linear-gradient(90deg, rgba(16,185,129,0), rgba(16,185,129,.70), rgba(79,70,229,.50), rgba(16,185,129,0));
    }
    html[data-theme="light"] .menuLinks .pillIcon{
      border-color:rgba(15,23,42,.10);
      background:linear-gradient(135deg, rgba(16,185,129,.16), rgba(79,70,229,.12));
      color:var(--text);
    }
    .menuLinks .pillText{
      position:relative;
      z-index:1;
      font-size:12.5px;
      font-weight:950;
      letter-spacing:.12px;
      white-space:nowrap;
      line-height:1.35;
    }
    .toolGroup{padding:5px 6px;gap:6px}
    .toolGroup.themeSwitch,
    .themeSwitch{padding:5px 6px}

    .langBtn{height:32px;padding:0 8px}
    .iconBtn{width:32px;height:32px}
    .iconBtn svg{width:17px;height:17px}

    .nav .row{
      display:grid;
      grid-template-columns: 1fr auto;
      grid-template-areas:
        "brand brand"
        "links tools";
      align-items:center;
      column-gap:16px;
      row-gap:12px;
    }
    .brand{
      grid-area:brand;
      min-width:0;
    }
    .menu{
      grid-area:links;
      min-width:0;
    }
    .navTools{
      grid-area:tools;
      margin-inline-start:0;
      justify-self:end;
      flex-wrap:nowrap;
    }
    .menuLinks{
      flex-wrap:nowrap;
      overflow-x:auto;
      overflow-y:hidden;
      -webkit-overflow-scrolling:touch;
      scrollbar-width:none;
      padding:0;
      gap:12px;
      min-width:0;
    }
    .menuLinks::-webkit-scrollbar{display:none}
    .menuLinks .pill{
      max-width:none;
      flex:0 0 auto;
      min-width:max-content;
      padding:10px 14px;
      border-radius:16px;
    }
    .menuLinks .pillText{
      white-space:nowrap;
      overflow-wrap:normal;
      word-break:normal;
      line-height:1.25;
    }
    .brand > div{overflow:visible}
    .brand .small{
      white-space:normal;
      overflow:visible;
      text-overflow:clip;
      line-height:1.35;
    }

    .menuLinks{
      overflow-y: visible;
      padding-bottom: 14px;
      margin-bottom: -14px;
    }

  }

  @media (max-width: 900px){
    .hero{grid-template-columns:1fr}
    .grid3{grid-template-columns:1fr}
    .grid2{grid-template-columns:1fr}
    .h1{font-size:30px}
  }

  @media (prefers-reduced-motion: reduce){
    body::before{ animation:none; }
    .page,.vt-overlay,.pill,.btn,.btn2,.card,.input,select,textarea,.reveal,.menu{ transition:none !important; }
    .menu,.menuLinks .pill{ animation:none !important; }
    .reveal{ opacity:1; transform:none; filter:none; }
  }
      line-height:1.35;
    }

    .menuLinks{
      overflow-y: visible;
      padding-bottom: 14px;
      margin-bottom: -14px;
    }

  }

  @media (max-width: 900px){
    .hero{grid-template-columns:1fr}
    .grid3{grid-template-columns:1fr}
    .grid2{grid-template-columns:1fr}
    .h1{font-size:30px}
  }

  @media (prefers-reduced-motion: reduce){
    body::before{ animation:none; }
    .page,.vt-overlay,.pill,.btn,.btn2,.card,.input,select,textarea,.reveal,.menu{ transition:none !important; }
    .menu,.menuLinks .pill{ animation:none !important; }
    .reveal{ opacity:1; transform:none; filter:none; }
  }