:root{
    --ink:#1E3A3F; --ink-2:#123338; --ink-3:#0C2427;
    --bg:#FBF6E9; --surface:#FFFFFF; --surface-2:#FFF7DF;
    --line:#EADFBE; --line-2:#F1E9D3;
    --text:#1E3A3F; --muted:#748688; --muted-2:#9CAAAA;
    --teal:#2FA79C; --teal-dark:#1E7C73; --teal-soft:rgba(47,167,156,.14); --teal-bright:#43C6BA;
    --sun:#F5B93F; --sun-dark:#D89A1E; --sun-soft:rgba(245,185,63,.22); --sun-bright:#FFCE5C;
    --amber:#D98A2B; --amber-soft:rgba(217,138,43,.15);
    --red:#E8604C; --red-soft:rgba(232,96,76,.12);
    --gold:#C9A227;
    --mark-a:#FFE9B0; --mark-b:#BDEDE6;
    --aurora-1:#FF9E5E; --aurora-2:#2FA79C; --aurora-3:#7C6BFF; --harbor-dusk-1:#0C2427; --harbor-dusk-2:#1E3A3F; --harbor-dusk-3:#2A4A4F;
    --mark-ink:#123338;
    --shadow:0 1px 2px rgba(120,95,40,.07), 0 10px 30px rgba(120,95,40,.10);
    --glow:0 0 0 1px rgba(245,185,63,.4), 0 0 22px rgba(245,185,63,.2);
    --radius:14px;
    --mono:'JetBrains Mono',monospace;
    --display:'Space Grotesk',sans-serif;
  }
  body.theme-dark{
    --ink:#0B3554; --ink-2:#0B3554; --ink-3:#123350;
    --bg:#E4F3FB; --surface:#FAFDFF; --surface-2:#D6ECF8;
    --line:#B9DEF0; --line-2:#CBE7F5;
    --text:#123350; --muted:#4E7590; --muted-2:#7BA0B6;
    --shadow:0 1px 2px rgba(11,53,84,.08), 0 10px 30px rgba(11,53,84,.12);
    --glow:0 0 0 1px rgba(245,185,63,.35), 0 0 22px rgba(245,185,63,.18);
  }
  body.theme-dark .panel,body.theme-dark .modal,body.theme-dark .stat,body.theme-dark .invest-card,body.theme-dark .wallet-card{
    box-shadow:0 1px 2px rgba(11,53,84,.07), 0 10px 26px rgba(11,53,84,.1);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%;touch-action:manipulation}
  /* touch-action:manipulation removes the ~300ms synthetic-click delay some
     mobile browsers add while they wait to see if a tap is the start of a
     double-tap-to-zoom gesture — with pinch-zoom already off (see the
     viewport meta tag) that delay serves no purpose here and just makes
     every tap in the app feel a beat slower/less responsive than it should. */
  html,body{overflow-x:hidden;max-width:100%}
  body{
    font-family:'Inter',system-ui,-apple-system,sans-serif;
    background:
      radial-gradient(1100px 650px at 88% -8%, rgba(245,185,63,.20), transparent 60%),
      radial-gradient(900px 620px at 4% 8%, rgba(47,167,156,.13), transparent 55%),
      radial-gradient(700px 500px at 50% 105%, rgba(232,96,76,.06), transparent 60%),
      var(--bg);
    background-attachment:fixed;
    color:var(--text);
    -webkit-font-smoothing:antialiased; line-height:1.45;
    position:relative;
  }
  body::before{
    content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.5;mix-blend-mode:multiply;
    background-image:radial-gradient(rgba(30,58,63,.035) 1px, transparent 1px);
    background-size:3px 3px;
  }
  h1,h2,h3,.brand,.login-brand,.wallet-bal,.stat .v{font-family:var(--display)}
  .num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
  .mono{font-family:var(--mono)}
  button{font-family:inherit;cursor:pointer;border:none;background:none}
  a{color:inherit;text-decoration:none}
  input,select,textarea{font-family:inherit}
  ::selection{background:var(--sun-soft);color:var(--ink-2)}
  ::-webkit-scrollbar{width:10px;height:10px}
  ::-webkit-scrollbar-thumb{background:var(--line);border-radius:20px}
  ::-webkit-scrollbar-track{background:transparent}

  @keyframes glowPulse{0%,100%{box-shadow:0 0 0 0 rgba(245,185,63,.5)}50%{box-shadow:0 0 0 7px rgba(245,185,63,0)}}
  @keyframes dotPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(1.4)}}
  @keyframes riseIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
  @keyframes shimmer{0%{transform:translateX(-120%)}100%{transform:translateX(220%)}}
  @keyframes drift{0%{background-position:0 0}100%{background-position:120px 0}}
  @keyframes sail{0%{transform:translateX(-6%)}50%{transform:translateX(106%)}100%{transform:translateX(-6%)}}
  @keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
  @keyframes sheen{0%{transform:translateX(-140%) rotate(8deg)}100%{transform:translateX(240%) rotate(8deg)}}
  @keyframes washDrift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(2%,-2%) scale(1.04)}}
  @keyframes float3d{0%,100%{transform:translateY(0) rotateX(10deg) rotateY(-12deg)}50%{transform:translateY(-16px) rotateX(-8deg) rotateY(12deg)}}
  @keyframes bootBrandIn{0%{opacity:0;transform:translateY(16px) scale(.92)}100%{opacity:1;transform:none}}
  @keyframes curtainOpenL{0%{transform:translateX(0)}100%{transform:translateX(-102%)}}
  @keyframes curtainOpenR{0%{transform:translateX(0)}100%{transform:translateX(102%)}}
  @keyframes sunRise{0%{transform:translateY(18px) scale(.85);opacity:0}100%{transform:translateY(0) scale(1);opacity:1}}
  @keyframes sunGlow{0%,100%{filter:drop-shadow(0 0 18px rgba(255,206,92,.55))}50%{filter:drop-shadow(0 0 34px rgba(255,206,92,.85))}}
  @keyframes waveScrollA{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
  @keyframes waveScrollB{0%{transform:translateX(-50%)}100%{transform:translateX(0)}}
  @keyframes gullFly{0%{transform:translate(0,0)}50%{transform:translate(-14px,-8px)}100%{transform:translate(0,0)}}
  @keyframes craneArm{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
  @keyframes shipBob{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-4px) rotate(-1.2deg)}}
  @keyframes shipMotion{
    0%{transform:translate(-32vw,8px) rotate(-2deg) scale(.88);opacity:0}
    10%{opacity:1}
    32%{transform:translate(8vw,-16px) rotate(1.4deg) scale(1)}
    58%{transform:translate(48vw,10px) rotate(-1.2deg) scale(1.05)}
    82%{transform:translate(92vw,-12px) rotate(1.6deg) scale(1)}
    92%{opacity:1}
    100%{transform:translate(128vw,6px) rotate(0deg) scale(.88);opacity:0}
  }
  @keyframes wcShipLoop{0%{transform:translateX(-8px)}100%{transform:translateX(76px)}}
  @keyframes welcomeGateOpen{0%{transform:scaleX(1)}100%{transform:scaleX(0)}}
  @keyframes welcomeShipCross{0%{transform:translateX(-46vw) rotateY(18deg) scale(.85);opacity:0}12%{opacity:1}88%{opacity:1}100%{transform:translateX(46vw) rotateY(-14deg) scale(.85);opacity:0}}
  @keyframes welcomeBrandPop{0%{opacity:0;transform:translateY(10px) scale(.9)}25%{opacity:1;transform:none}80%{opacity:1}100%{opacity:0;transform:translateY(-6px) scale(1.02)}}
  @keyframes clockGlow{0%,100%{box-shadow:0 0 0 0 rgba(245,185,63,.35)}50%{box-shadow:0 0 0 4px rgba(245,185,63,0)}}
  @keyframes causticsDrift{0%{background-position:0 0, 40px 20px}100%{background-position:300px 60px, 260px 340px}}
  @keyframes waterlineSheen{0%{transform:translateX(-120%)}100%{transform:translateX(220%)}}
  @keyframes vesselSail{
    0%{transform:translate(-26vw,0) rotate(-1deg)}
    25%{transform:translate(-8vw,-3px) rotate(.6deg)}
    50%{transform:translate(14vw,2px) rotate(-.8deg)}
    75%{transform:translate(38vw,-2px) rotate(.5deg)}
    100%{transform:translate(58vw,0) rotate(-1deg)}
  }

  /* ---------- Water body: deep water + caustic light + a vessel with a real
     reflection beneath the surface — shared by login, boot splash & topbar ---------- */
  .water-body{position:absolute;left:0;right:0;bottom:0;overflow:hidden;pointer-events:none;z-index:1}
  .water-body::before{
    content:"";position:absolute;inset:0;
    background:linear-gradient(180deg, rgba(196,232,250,.6) 0%, #6FC1E8 20%, #3E92C9 55%, #1E4E72 100%);
  }
  .water-caustics{
    position:absolute;inset:0;mix-blend-mode:overlay;opacity:.5;
    background-image:
      radial-gradient(180px 90px at 20% 30%, rgba(255,255,255,.5), transparent 65%),
      radial-gradient(220px 100px at 70% 60%, rgba(255,255,255,.4), transparent 65%),
      radial-gradient(160px 80px at 45% 80%, rgba(255,255,255,.35), transparent 65%);
    background-size:400px 300px, 380px 320px, 340px 280px;
    animation:causticsDrift 11s ease-in-out infinite alternate;
  }
  .water-surface{position:absolute;left:0;right:0;top:0;height:10px;overflow:hidden}
  .water-surface::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);animation:waterlineSheen 4.5s ease-in-out infinite}
  .water-waves{position:absolute;left:0;right:0;top:-1px;height:28px;overflow:hidden}
  .water-waves svg{width:200%;height:100%}
  .water-waves .w1{animation:waveScrollA 8s linear infinite}
  .water-waves .w2{animation:waveScrollB 12s linear infinite;opacity:.6}
  .water-vessel{position:absolute;top:14px;left:0;width:120px;height:60px;animation:vesselSail 26s ease-in-out infinite alternate;filter:drop-shadow(0 8px 10px rgba(0,0,0,.35))}
  .water-vessel .hull-wrap{width:100%;height:100%;animation:shipBob 2.4s ease-in-out infinite}
  .water-vessel .hull-reflection{
    width:100%;height:100%;transform:scaleY(-1);opacity:.3;filter:blur(2.5px) saturate(1.1);margin-top:2px;
    -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,.55), transparent 75%);
    mask-image:linear-gradient(to bottom, rgba(0,0,0,.55), transparent 75%);
  }
  .water-body.lg{height:46vh}
  .water-body.sm{height:100%}
  .water-body.sm .water-vessel{top:6px;width:70px;height:34px}
  .water-body.sm .water-waves{height:14px}

  /* ---------- One-time boot splash: cinematic dusk-harbor scene ---------- */
  .boot-splash{
    position:fixed;inset:0;z-index:900;overflow:hidden;cursor:pointer;
    background:linear-gradient(180deg,var(--harbor-dusk-1) 0%,var(--harbor-dusk-2) 45%,#2E5A55 78%,#3D6E5E 100%);
    transition:opacity .4s ease, visibility .4s ease;
  }
  .boot-splash.boot-hide{opacity:0;visibility:hidden;pointer-events:none}
  .boot-curtain{position:absolute;top:0;bottom:0;width:52%;background:linear-gradient(180deg,var(--harbor-dusk-1),var(--harbor-dusk-2));z-index:20}
  .boot-curtain.l{left:0;animation:curtainOpenL 1s cubic-bezier(.6,0,.2,1) .15s both}
  .boot-curtain.r{right:0;animation:curtainOpenR 1s cubic-bezier(.6,0,.2,1) .15s both}
  .boot-sun{position:absolute;left:50%;top:26%;width:64px;height:64px;margin-left:-32px;border-radius:50%;
    background:radial-gradient(circle at 35% 30%, #FFF3D0, var(--sun-bright) 45%, var(--sun-dark) 100%);
    animation:sunRise 1.1s ease .5s both, sunGlow 3s ease-in-out 1.6s infinite}
  .boot-gulls{position:absolute;inset:0;pointer-events:none;opacity:.55}
  .boot-gulls path{animation:gullFly 2.6s ease-in-out infinite}
  .boot-skyline{position:absolute;left:0;right:0;bottom:46vh;height:70px;opacity:.5;color:var(--harbor-dusk-1)}
  .boot-skyline .arm{transform-origin:20% 90%;animation:craneArm 3.4s ease-in-out infinite}
  .boot-brand{position:absolute;left:50%;bottom:9%;transform:translateX(-50%);display:flex;align-items:center;gap:10px;
    opacity:0;animation:bootBrandIn .5s ease 1.2s both;z-index:5}
  .boot-brand .mark{width:36px;height:36px;border-radius:10px;background:linear-gradient(155deg,var(--mark-a),var(--mark-b));display:grid;place-items:center;color:var(--mark-ink);box-shadow:0 0 26px rgba(245,185,63,.4)}
  .boot-brand .mark svg{width:20px;height:20px}
  .boot-brand b{font-family:var(--display);font-size:21px;color:#FFEAB2;letter-spacing:-.01em}
  .boot-tag{position:absolute;left:50%;bottom:5%;transform:translateX(-50%);font-size:12px;color:rgba(255,234,174,.6);
    opacity:0;animation:bootBrandIn .5s ease 1.4s both;white-space:nowrap;z-index:5}

  /* ---------- Login: floating 3D import/export crates ---------- */
  .login-crate{position:absolute;border-radius:6px;box-shadow:0 16px 28px rgba(0,0,0,.16);animation:float3d 6.5s ease-in-out infinite;pointer-events:none;z-index:1}
  .login-crate::before{content:"";position:absolute;inset:3px;border:1px solid rgba(255,255,255,.35);border-radius:3px}
  .login-crane-deco{position:absolute;pointer-events:none;z-index:1;opacity:.28;color:var(--ink-2)}

  /* ---------- Post-login welcome transition ---------- */
  .welcome-splash{position:fixed;inset:0;z-index:900;overflow:hidden;perspective:1200px;
    background:linear-gradient(180deg,var(--harbor-dusk-1) 0%,var(--harbor-dusk-2) 55%,#2E5A55 100%);
    transition:opacity .5s ease, visibility .5s ease}
  .welcome-splash.boot-hide{opacity:0;visibility:hidden;pointer-events:none}
  .welcome-ship{position:absolute;top:48%;left:50%;width:100px;height:50px;margin:-25px 0 0 -50px;
    animation:welcomeShipCross 1.9s cubic-bezier(.3,.7,.3,1) both;filter:drop-shadow(0 12px 18px rgba(0,0,0,.4))}
  .welcome-text{position:absolute;bottom:36%;left:50%;transform:translateX(-50%);text-align:center;
    font-family:var(--display);color:#FFEAB2;font-size:19px;font-weight:700;letter-spacing:-.01em;
    animation:welcomeBrandPop 1.9s ease .05s both;white-space:nowrap}

  /* ---------- 3D tilt-enabled surfaces ---------- */
  .tilt-3d{transform-style:preserve-3d;will-change:transform}
  .invest-card .ic-hero-img,.invest-card .ic-code,.invest-card .ic-cta{transform:translateZ(18px)}

  /* ---------- Live World Clock ticker (topbar) — sits on the water strip ---------- */
  .worldclock-bar{
    position:sticky;top:60px;z-index:45;overflow:hidden;height:46px;
    border-bottom:1px solid rgba(0,0,0,.15);
  }
  .wc-cells-row{position:relative;z-index:2;display:flex;align-items:stretch;gap:0;height:100%;overflow-x:auto;scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 3%,#000 94%,transparent)}
  .wc-cells-row::-webkit-scrollbar{display:none}
  .wc-cell{flex:0 0 auto;display:flex;align-items:center;gap:9px;padding:6px 16px;color:#FFEAB2;position:relative}
  .wc-cell+.wc-cell::before{content:"";position:absolute;left:0;top:20%;bottom:20%;width:1px;background:rgba(255,234,174,.15)}
  .wc-cell .wc-info{display:flex;flex-direction:column;line-height:1.25}
  .wc-cell .wc-city{font-size:10px;font-weight:600;letter-spacing:.02em;color:rgba(255,234,174,.65);white-space:nowrap}
  .wc-cell .wc-time{font-family:var(--mono);font-size:13.5px;font-weight:600;color:#FFEAB2;font-variant-numeric:tabular-nums;text-shadow:0 1px 3px rgba(0,0,0,.4)}
  .wc-cell.is-night .dial-face{fill:rgba(30,58,110,.28)}
  @media (max-width:640px){
    .worldclock-bar{top:0}
    /* Previously each cell kept its natural (fairly wide) content size and
       relied on horizontal swipe to see the rest. On a phone that meant the
       first 2-3 cities were visible and the rest needed a side-scroll to
       find. Instead, share the row equally between however many cities are
       configured and drop the analog dial (the single biggest space user)
       so every city fits in view at once, no swipe needed. */
    .wc-cells-row{overflow-x:visible}
    .wc-cell{flex:1 1 0;min-width:0;padding:6px 2px;gap:0;justify-content:center}
    .wc-cell+.wc-cell::before{display:none}
    .wc-cell .wc-dial.sm{display:none}
    .wc-cell .wc-info{align-items:center;width:100%}
    .wc-cell .wc-city{font-size:8px;max-width:100%;overflow:hidden;text-overflow:ellipsis}
    .wc-cell .wc-time{font-size:11px}
  }
  @media (max-width:640px){
    .water-body.lg{height:34vh}
    .boot-skyline{bottom:34vh;height:50px}
    .boot-sun{width:44px;height:44px;margin-left:-22px;top:20%}
    .boot-brand .mark{width:30px;height:30px}
    .boot-brand b{font-size:17px}
    .boot-tag{font-size:10.5px;max-width:82vw;white-space:normal;text-align:center;line-height:1.4}
    .water-vessel{width:82px}
  }

  /* Analog clock dial — real hands, smoothly sweeping between ticks */
  .wc-dial{flex:0 0 auto;overflow:visible}
  .dial-hour,.dial-min,.dial-sec{transform-box:view-box;transform-origin:20px 20px;transition:transform .28s cubic-bezier(.4,0,.2,1)}
  .dial-face{transition:fill .4s ease}

  /* World clock — bigger dashboard/overview widget (original dark-teal look,
     kept distinct from the lighter page background around it) */
  .wc-panel{border-radius:var(--radius);overflow:hidden;margin-bottom:22px;position:relative;
    background:linear-gradient(120deg,var(--harbor-dusk-1),var(--harbor-dusk-2) 60%,#2E5A55);
    box-shadow:var(--shadow)}
  .wc-panel-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;color:#FFEAB2;font-weight:700;font-family:var(--display);font-size:14.5px}
  .wc-panel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:1px;background:rgba(255,255,255,.06)}
  .wc-card{background:rgba(0,0,0,.12);padding:16px 14px;text-align:center;transition:.2s;display:flex;flex-direction:column;align-items:center;gap:8px}
  .wc-card:hover{background:rgba(255,255,255,.06)}
  .wc-card .wc-city{font-size:11px;color:rgba(255,234,174,.7);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
  .wc-card .wc-time{font-family:var(--mono);font-size:19px;font-weight:700;color:#FFEAB2;font-variant-numeric:tabular-nums}
  .wc-card .wc-date{font-size:10.5px;color:rgba(255,234,174,.45)}
  .wc-card.is-night .dial-face{fill:rgba(30,58,110,.3)}

  /* ---------- Click ripple micro-interaction (buttons, nav items) ---------- */
  .btn,.nav-item,.icon-btn{position:relative;overflow:hidden;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
  .ripple-fx{position:absolute;border-radius:50%;background:rgba(255,255,255,.55);
    transform:scale(0);opacity:.6;pointer-events:none;animation:rippleOut .55s ease-out forwards}
  .btn-primary .ripple-fx,.login-role-toggle button.active .ripple-fx{background:rgba(255,255,255,.65)}
  @keyframes rippleOut{to{transform:scale(2.6);opacity:0}}

  #parallax-boats{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
  .app-bg-wave{position:fixed;left:0;right:0;bottom:0;height:16vh;min-height:90px;max-height:180px;overflow:hidden;pointer-events:none;z-index:-1}
  .app-bg-wave svg{width:200%;height:100%;display:block}
  .app-bg-wave .abw1{animation:waveScrollA 15s linear infinite}
  .app-bg-wave .abw2{animation:waveScrollB 21s linear infinite}
  .parallax-boat{position:absolute;opacity:.1;will-change:transform}
  .parallax-boat-inner{animation:boatSway 5s ease-in-out infinite}
  .parallax-boat-inner svg{display:block}
  @keyframes boatSway{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-6px) rotate(1.5deg)}}

  /* ---------- Water View: cards float, randomized, on a tinted watery backdrop ---------- */
  @keyframes floatRandom{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(var(--float-amp,-7px)) rotate(var(--float-rot,.6deg))}}
  body.water-view .main{position:relative;isolation:isolate}
  body.water-view .main::before{
    content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
    background:
      radial-gradient(180px 90px at 20% 20%, rgba(255,255,255,.5), transparent 65%),
      radial-gradient(220px 100px at 75% 55%, rgba(255,255,255,.35), transparent 65%),
      radial-gradient(160px 80px at 45% 85%, rgba(255,255,255,.3), transparent 65%),
      linear-gradient(180deg, rgba(47,167,156,.10), rgba(30,124,115,.16) 60%, rgba(12,36,39,.2));
    background-size:400px 300px,380px 320px,340px 280px,auto;
    animation:causticsDrift 12s ease-in-out infinite alternate;
    mix-blend-mode:normal;
  }
  body.water-view .panel,body.water-view .stat,body.water-view .invest-card,body.water-view .wallet-card,
  body.water-view .wc-panel,body.water-view .about-banner{
    animation:floatRandom var(--float-dur,6s) ease-in-out var(--float-delay,0s) infinite;
    box-shadow:0 14px 26px rgba(18,51,56,.16), 0 0 0 1px rgba(47,167,156,.18);
  }
  body.water-view .panel:hover,body.water-view .stat:hover,body.water-view .invest-card:hover,body.water-view .wallet-card:hover{
    animation-play-state:paused;
  }
  /* On phones there isn't enough vertical room between stacked cards for the
     float to stay clear of its neighbor — that's what caused the wallet card
     and the world-clock panel above it to visually overlap ("flip into" each
     other) when this was on. Keep the effect desktop-only. */
  @media (max-width:640px){
    body.water-view .panel,body.water-view .stat,body.water-view .invest-card,body.water-view .wallet-card,
    body.water-view .wc-panel,body.water-view .about-banner{
      animation:none!important;transform:none!important;
    }
  }

  /* ---------- Announcements & About Us: colorful, animated ---------- */
  .ann-item{position:relative;padding:15px 18px 15px 20px;border-bottom:1px solid var(--line-2);display:flex;gap:12px;
    border-left:3px solid var(--sun);transition:.15s;animation:riseIn .35s ease backwards}
  .ann-item:hover{background:var(--surface-2)}
  .ann-item:last-child{border-bottom:none}
  .ann-item .ann-icon{width:34px;height:34px;border-radius:10px;flex:0 0 auto;display:grid;place-items:center;
    background:linear-gradient(155deg,var(--sun-soft),var(--teal-soft));color:var(--amber)}
  .ann-item .ann-icon svg{width:17px;height:17px}
  .ann-item .a-title{font-weight:700;font-size:14px;color:var(--ink-2);display:flex;align-items:center;gap:7px}
  .ann-item .a-body{font-size:13px;color:var(--muted);margin-top:3px;line-height:1.55}
  .ann-item .a-date{font-size:11px;color:var(--muted-2);margin-top:6px}
  .about-banner{border-radius:14px;padding:22px 20px;margin-bottom:16px;position:relative;overflow:hidden;
    background:linear-gradient(120deg,var(--harbor-dusk-1),var(--teal-dark) 70%,var(--harbor-dusk-2));color:#FFEAB2}
  .about-banner::after{content:"";position:absolute;top:0;left:0;width:40%;height:100%;
    background:linear-gradient(100deg,transparent,rgba(255,255,255,.18),transparent);animation:sheen 6s ease-in-out infinite}
  .about-banner .mark{width:40px;height:40px;border-radius:11px;background:linear-gradient(155deg,var(--mark-a),var(--mark-b));display:grid;place-items:center;color:var(--mark-ink);margin-bottom:10px}
  .about-banner h3{font-family:var(--display);font-size:18px;letter-spacing:-.01em}
  .about-banner p{font-size:12.5px;color:rgba(255,234,174,.7);margin-top:3px}


  /* ---------- Login ---------- */
  .login-wrap{
    min-height:100vh;display:flex;align-items:center;justify-content:center;
    position:relative;overflow:hidden;
    background:
      radial-gradient(900px 620px at 12% -8%, rgba(245,185,63,.35), transparent 60%),
      radial-gradient(800px 560px at 105% 15%, rgba(47,167,156,.28), transparent 58%),
      radial-gradient(700px 620px at 25% 115%, rgba(232,96,76,.14), transparent 60%),
      var(--bg);
    padding:20px;
  }
  .login-wrap::before{
    content:"";position:absolute;inset:-20%;
    background:
      radial-gradient(340px 220px at 20% 30%, rgba(47,167,156,.20), transparent 70%),
      radial-gradient(300px 260px at 80% 65%, rgba(245,185,63,.28), transparent 70%),
      radial-gradient(260px 220px at 55% 85%, rgba(232,96,76,.12), transparent 70%);
    filter:blur(6px);
    animation:washDrift 14s ease-in-out infinite;
    pointer-events:none;
  }

  .login-card{
    width:100%;max-width:400px;background:var(--surface);border:1px solid var(--line);border-radius:20px;
    box-shadow:0 30px 70px rgba(120,95,40,.16), var(--glow);padding:36px 32px;position:relative;z-index:2;
    animation:riseIn .5s ease;
  }
  .login-brand{display:flex;align-items:center;gap:11px;margin-bottom:6px}
  .login-brand .mark{width:36px;height:36px;border-radius:10px;background:linear-gradient(155deg,var(--mark-a),var(--mark-b));display:grid;place-items:center;animation:glowPulse 2.6s ease-in-out infinite;color:var(--mark-ink)}
  .login-brand .mark svg{width:20px;height:20px}
  .login-brand b{font-size:20px;letter-spacing:-.01em;font-weight:700;color:var(--ink-2)}
  .login-card h1{font-size:21px;font-weight:700;margin-top:22px;letter-spacing:-.02em;font-family:var(--display);color:var(--ink-2)}
  .login-card p.sub{color:var(--muted);font-size:13.5px;margin-top:4px;margin-bottom:22px}
  .field{margin-bottom:14px}
  .field label{display:block;font-size:12.5px;font-weight:600;color:var(--muted);margin-bottom:6px}
  .field input,.field select,.field textarea{
    width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:9px;
    font-size:16px;background:var(--surface-2);color:var(--text);transition:.15s;
  }
  .field input:focus,.field select:focus{outline:none;border-color:var(--sun);background:#fff;box-shadow:0 0 0 3px var(--sun-soft)}
  .field .hint{font-size:11.5px;color:var(--muted-2);margin-top:4px}
  .login-role-toggle{display:flex;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:3px;margin-bottom:20px}
  .login-role-toggle button{flex:1;padding:9px;border-radius:8px;font-size:13.5px;font-weight:600;color:var(--muted);transition:.15s}
  .login-role-toggle button.active{background:var(--sun);color:var(--ink-2);box-shadow:0 0 14px rgba(245,185,63,.5)}
  .login-err{background:var(--red-soft);color:#B84331;font-size:12.5px;font-weight:500;padding:9px 12px;border-radius:8px;margin-bottom:14px;display:none}
  .btn-full{width:100%;justify-content:center;padding:11px}
  .login-foot{text-align:center;margin-top:18px;font-size:12px;color:var(--muted-2)}
  .server-cfg{position:fixed;bottom:16px;right:16px;font-size:11.5px;color:var(--muted-2);cursor:pointer;z-index:2}

  /* ---------- Top bar ---------- */
  .topbar{
    height:60px;background:var(--surface);color:var(--ink-2);display:flex;align-items:center;
    padding:0 20px;gap:18px;position:sticky;top:0;z-index:50;border-bottom:1px solid var(--line);
    position:sticky;
  }
  .topbar::after{
    content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;
    background:repeating-linear-gradient(90deg, var(--sun) 0 18px, var(--teal) 18px 36px);
    background-size:36px 100%;opacity:.55;animation:drift 6s linear infinite;pointer-events:none;
  }
  .topbar{position:sticky}
  .brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:16.5px;letter-spacing:-.01em;color:var(--ink-2)}
  .brand .mark{width:28px;height:28px;border-radius:7px;background:linear-gradient(155deg,var(--mark-a),var(--mark-b));display:grid;place-items:center;flex:0 0 auto;color:var(--mark-ink);box-shadow:0 0 14px rgba(245,185,63,.25);transition:.25s cubic-bezier(.2,.8,.2,1)}
  .brand:hover .mark{transform:perspective(300px) rotateY(18deg) translateZ(2px);box-shadow:0 4px 18px rgba(245,185,63,.45)}
  .brand .mark svg{width:16px;height:16px}
  .topbar .sep{flex:1}
  .switcher{display:flex;background:var(--surface-2);border:1px solid var(--line);border-radius:9px;padding:3px}
  .switcher button{color:var(--muted);font-size:13px;font-weight:600;padding:7px 16px;border-radius:7px;transition:.15s}
  .switcher button.active{background:var(--sun);color:var(--ink-2)}
  .topbar .acct{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--ink);position:relative;cursor:pointer}
  .topbar .avatar{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--mark-a),var(--mark-b));display:grid;place-items:center;font-weight:700;font-size:12px;color:var(--mark-ink)}
  .acct-menu{position:absolute;top:44px;right:0;background:var(--surface);border:1px solid var(--line);color:var(--text);border-radius:11px;box-shadow:0 20px 45px rgba(120,95,40,.18);width:190px;padding:6px;display:none;z-index:60}
  .acct-menu.open{display:block;animation:riseIn .15s ease}
  .acct-menu button{width:100%;text-align:left;padding:9px 11px;font-size:13.5px;border-radius:7px;color:var(--text)}
  .acct-menu button:hover{background:var(--surface-2)}
  .icon-btn{position:relative;width:38px;height:38px;border-radius:10px;display:grid;place-items:center;color:var(--ink-2);margin-right:6px;transition:.15s}
  .icon-btn:hover{background:var(--surface-2)}
  .icon-btn svg{width:19px;height:19px}
  .icon-badge{position:absolute;top:5px;right:6px;width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 0 2px var(--surface)}
  .announce-panel{position:absolute;top:52px;right:190px;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 20px 45px rgba(120,95,40,.18);width:340px;max-height:420px;overflow:auto;display:none;z-index:60}
  .announce-panel.open{display:block;animation:riseIn .15s ease}
  .announce-panel .ap-head{padding:14px 16px;border-bottom:1px solid var(--line-2);font-weight:700;font-size:14px;color:var(--ink-2)}
  .announce-item{padding:13px 16px;border-bottom:1px solid var(--line-2)}
  .announce-item:last-child{border-bottom:none}
  .announce-item .a-title{font-weight:600;font-size:13.5px;color:var(--ink-2);display:flex;align-items:center;gap:6px}
  .announce-item .a-dot{width:6px;height:6px;border-radius:50%;background:var(--sun-dark)}
  .announce-item .a-body{font-size:12.5px;color:var(--muted);margin-top:3px;line-height:1.5}
  .announce-item .a-date{font-size:11px;color:var(--muted-2);margin-top:5px}
  .msg-thread{display:flex;flex-direction:column;gap:10px;padding:18px;max-height:480px;overflow-y:auto}
  .msg-bubble{max-width:72%;padding:10px 14px;border-radius:14px;font-size:13.5px;line-height:1.5}
  .msg-bubble.investor{align-self:flex-end;background:var(--sun-soft);color:var(--ink-2);border-bottom-right-radius:4px}
  .msg-bubble.admin{align-self:flex-start;background:var(--teal-soft);color:var(--ink-2);border-bottom-left-radius:4px}
  .msg-bubble.system{align-self:flex-start;background:var(--surface-2);color:var(--muted);border-bottom-left-radius:4px;font-style:italic}
  .msg-bubble .m-meta{font-size:10.5px;opacity:.65;margin-top:5px}
  .msg-compose{display:flex;gap:10px;padding:14px 18px;border-top:1px solid var(--line-2)}
  .msg-compose textarea{flex:1;resize:none;border:1px solid var(--line);border-radius:9px;padding:9px 12px;font-size:16px;font-family:inherit;background:var(--surface-2);color:var(--text);min-height:44px}
  .msg-compose textarea:focus{outline:none;border-color:var(--sun);background:#fff}
  .thread-row{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--line-2);cursor:pointer;transition:.15s;touch-action:manipulation}
  .thread-row:last-child{border-bottom:none}
  .thread-row:hover{background:var(--surface-2)}

  /* ---------- Layout ---------- */
  .shell{display:flex;min-height:calc(100vh - 60px)}
  .sidebar{width:230px;background:var(--surface);border-right:1px solid var(--line);padding:18px 12px;flex:0 0 auto}
  .nav-label{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2);padding:0 12px;margin:14px 0 6px}
  .nav-item{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:9px;font-size:14px;font-weight:500;color:var(--muted);width:100%;text-align:left;transition:.15s}
  .nlbl-m{display:none}
  .nav-item svg{width:18px;height:18px;flex:0 0 auto;opacity:.75}
  .nav-item:hover{background:var(--surface-2);color:var(--ink-2)}
  .nav-item.active{background:var(--sun-soft);color:var(--amber);font-weight:600;box-shadow:inset 2px 0 0 var(--sun)}
  .nav-item.active svg{opacity:1}
  body.theme-dark .nav-item.active{background:rgba(79,168,216,.16);color:#1477B8;box-shadow:inset 2px 0 0 #4FA8D8}
  .nav-badge{margin-left:auto;font-size:11px;font-weight:600;background:var(--line-2);color:var(--muted);padding:1px 7px;border-radius:20px}

  .main{flex:1;padding:28px 34px;max-width:1180px;overflow:auto}
  .page{display:none}
  .page.active{display:block;animation:fade .3s ease}
  @keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

  .page-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:22px;gap:16px;flex-wrap:wrap}
  .page-head h1{font-size:24px;font-weight:700;letter-spacing:-.01em;color:var(--ink-2)}
  .page-head p{color:var(--muted);font-size:14px;margin-top:3px}

  .demo-note{background:var(--sun-soft);border:1px solid rgba(245,185,63,.4);color:#8A5A12;font-size:12.5px;font-weight:500;padding:9px 14px;border-radius:10px;margin-bottom:22px;display:flex;gap:9px;align-items:center}
  .demo-note svg{width:16px;height:16px;flex:0 0 auto;color:var(--sun-dark)}
  .empty{padding:40px 20px;text-align:center;color:var(--muted);font-size:13.5px}

  .stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px}
  .stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);transition:.2s;animation:riseIn .4s ease backwards}
  .stat:nth-child(1){animation-delay:.02s} .stat:nth-child(2){animation-delay:.08s}
  .stat:nth-child(3){animation-delay:.14s} .stat:nth-child(4){animation-delay:.2s}
  .stat:hover{transform:translateY(-2px);border-color:rgba(245,185,63,.45);box-shadow:var(--shadow), var(--glow)}
  .stat .k{font-size:12.5px;color:var(--muted);font-weight:500;display:flex;align-items:center;gap:6px}
  .stat .v{font-size:26px;font-weight:700;letter-spacing:-.01em;margin-top:9px;color:var(--ink-2)}
  .stat .d{font-size:12.5px;font-weight:600;margin-top:5px;display:flex;align-items:center;gap:4px}
  .up{color:var(--teal-dark)} .down{color:var(--red)}

  .panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:18px;overflow:hidden;transition:.2s}
  .panel-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--line-2)}
  .panel-head h2{font-size:15.5px;font-weight:600;color:var(--ink-2)}
  .panel-head .link{font-size:13px;color:var(--teal-dark);font-weight:600;cursor:pointer}
  .panel-body{padding:18px}
  .grid-2{display:grid;grid-template-columns:1.5fr 1fr;gap:18px}

  /* Invest page container cards — a Spotify/Apple-Music-style hero: the full
     photo always shows (never cropped) sitting on a softly blurred version of
     itself so there's never letterbox bars, plus a richer detail section and
     a stronger call-to-action underneath. */
  .invest-card{background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:0 8px 24px rgba(30,58,63,.08);margin-bottom:20px;overflow:hidden;position:relative;transition:.25s cubic-bezier(.2,.8,.2,1);touch-action:manipulation}
  .invest-card:hover{box-shadow:0 22px 48px rgba(30,58,63,.18);transform:translateY(-3px)}
  .invest-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--sun),var(--teal-bright));z-index:3}
  .invest-card .ic-hero{position:relative;height:210px;overflow:hidden;background:var(--ink-2)}
  .invest-card .ic-hero-bg{position:absolute;inset:-16px;background-size:cover;background-position:center;filter:blur(24px) saturate(1.2) brightness(.62);transform:scale(1.18)}
  .invest-card .ic-hero-img{position:absolute;inset:0;background-size:contain;background-repeat:no-repeat;background-position:center;filter:drop-shadow(0 8px 20px rgba(0,0,0,.35))}
  .invest-card .ic-hero.no-img{background:radial-gradient(130% 150% at 15% -10%,var(--teal-dark) 0%,var(--ink-2) 60%)}
  .invest-card .ic-hero.no-img .ic-hero-watermark{position:absolute;right:-18px;bottom:-22px;width:150px;height:150px;color:rgba(255,255,255,.08)}
  .invest-card .ic-hero-watermark svg{width:100%;height:100%}
  .invest-card .ic-hero::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,36,39,0) 0%,rgba(12,36,39,.1) 45%,rgba(12,36,39,.62) 82%,rgba(12,36,39,.9) 100%);z-index:1}
  .invest-card .ic-hero-content{position:absolute;left:0;right:0;bottom:0;padding:16px 20px;display:flex;align-items:flex-end;justify-content:space-between;gap:10px;z-index:2}
  .invest-card .ic-code{color:#fff;font-weight:800;font-size:17.5px;letter-spacing:-.01em;display:flex;align-items:center;gap:8px;text-shadow:0 2px 10px rgba(0,0,0,.45)}
  .invest-card .ic-route{color:rgba(255,255,255,.92);font-size:13px;margin-top:3px;font-weight:600;text-shadow:0 2px 8px rgba(0,0,0,.45);display:flex;align-items:center;gap:5px}
  .invest-card .ic-stage{position:absolute;top:14px;right:14px;z-index:2;box-shadow:0 2px 10px rgba(0,0,0,.25)}
  .invest-card .ic-body{padding:18px 20px 20px}
  .invest-card .ic-stat-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
  .invest-card .ic-stat{background:var(--surface-2);border:1px solid var(--line-2);border-radius:12px;padding:11px 13px}
  .invest-card .ic-stat .lbl{font-size:10.5px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.05em}
  .invest-card .ic-stat .val{font-size:15.5px;font-weight:800;color:var(--ink-2);margin-top:3px;letter-spacing:-.01em}
  .invest-card .ic-cta-row{display:flex;align-items:center;gap:14px;margin-top:14px}
  .invest-card .ic-cta{flex:0 0 auto;padding:11px 22px;font-size:14px;box-shadow:0 4px 14px rgba(245,185,63,.35)}
  .invest-card .ic-invested-badge{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;color:var(--teal-dark);background:var(--teal-soft);padding:10px 18px;border-radius:10px}
  .invest-card .ic-invested-badge svg{width:15px;height:15px}

  /* Admin Containers page: 3-up per-tier snapshot cards */
  .tier-summary-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:22px}
  .tier-summary-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 6px 18px rgba(30,58,63,.07);display:flex;flex-direction:column}
  .tier-summary-card .tsc-photo{height:88px;background-size:cover;background-position:center;background-color:var(--ink-2);position:relative;display:flex;align-items:center;justify-content:center}
  .tier-summary-card .tsc-photo-fallback{width:40px;height:40px;color:rgba(255,255,255,.25)}
  .tier-summary-card .tsc-photo-fallback svg{width:100%;height:100%}
  .tier-summary-card .tsc-body{padding:14px 16px 16px}
  .tier-summary-card .tsc-label{font-weight:700;font-size:14.5px;color:var(--ink-2);margin-bottom:10px;font-family:var(--display)}
  .tier-summary-card .tsc-stat-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:8px}
  .tier-summary-card .tsc-stat{background:var(--surface-2);border:1px solid var(--line-2);border-radius:10px;padding:8px 10px}
  .tier-summary-card .tsc-stat .lbl{font-size:9.5px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.05em}
  .tier-summary-card .tsc-stat .val{font-size:14px;font-weight:800;color:var(--ink-2);margin-top:2px;letter-spacing:-.01em}

  table{width:100%;border-collapse:collapse}
  thead th{text-align:left;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-2);padding:11px 18px;border-bottom:1px solid var(--line-2)}
  tbody td{padding:13px 18px;font-size:13.5px;border-bottom:1px solid var(--line-2);vertical-align:middle}
  tbody tr:last-child td{border-bottom:none}
  tbody tr{transition:.15s;animation:riseIn .35s ease backwards}
  tbody tr:nth-child(1){animation-delay:.01s} tbody tr:nth-child(2){animation-delay:.04s}
  tbody tr:nth-child(3){animation-delay:.07s} tbody tr:nth-child(4){animation-delay:.1s}
  tbody tr:nth-child(5){animation-delay:.13s} tbody tr:nth-child(6){animation-delay:.16s}
  tbody tr.clickable{touch-action:manipulation}
  tbody tr.clickable:hover{background:var(--surface-2);cursor:pointer}
  .cell-main{font-weight:600;font-size:13.5px;color:var(--ink-2)}
  .cell-sub{color:var(--muted);font-size:12px;margin-top:1px}
  .avatar-sm{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--teal-soft);color:var(--teal-dark);font-size:11px;font-weight:700;margin-right:9px;vertical-align:middle}

  .pill{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;padding:3px 10px;border-radius:20px}
  .pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
  .pill.transit::before,.pill.active::before,.pill.pending::before,.pill.funding::before{animation:dotPulse 1.6s ease-in-out infinite}
  .pill.transit{background:var(--amber-soft);color:var(--amber)}
  .pill.active{background:var(--teal-soft);color:var(--teal-dark)}
  .pill.delivered{background:rgba(30,58,63,.06);color:var(--muted)}
  .pill.docked{background:var(--red-soft);color:#B84331}
  .pill.pending{background:rgba(30,58,63,.06);color:var(--muted)}
  .pill.funding{background:var(--sun-soft);color:#8A5A12}

  .btn{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;padding:9px 16px;border-radius:9px;transition:.15s;position:relative;overflow:hidden}
  .btn:active{transform:scale(.96)}
  .btn-ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.7);mix-blend-mode:overlay;transform:scale(0);animation:btnRipple .55s ease-out forwards;pointer-events:none}
  @keyframes btnRipple{to{transform:scale(2.8);opacity:0}}
  .btn svg{width:16px;height:16px}
  .btn-primary{background:var(--sun);color:var(--ink-2);box-shadow:0 0 0 rgba(245,185,63,0)}
  .btn-primary:hover{background:var(--sun-bright);box-shadow:0 6px 20px rgba(245,185,63,.45);transform:translateY(-1px)}
  .btn-primary:active{transform:translateY(0)}
  .btn-primary:disabled{opacity:.4;cursor:not-allowed;box-shadow:none;transform:none}
  .btn-ghost{background:var(--surface);border:1px solid var(--line);color:var(--ink-2)}
  .btn-ghost:hover{background:var(--surface-2);border-color:rgba(245,185,63,.5)}
  .btn-sm{padding:6px 12px;font-size:12.5px}
  .btn-danger{background:var(--red-soft);color:#B84331}

  .bar{position:relative;height:7px;background:var(--line-2);border-radius:20px;overflow:hidden}
  .bar i{position:absolute;left:0;top:0;height:100%;background:linear-gradient(90deg,var(--teal),var(--sun));border-radius:20px;font-style:normal;transition:width .5s ease}
  .bar i::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent,rgba(255,255,255,.65),transparent);animation:shimmer 2.2s ease-in-out infinite}

  /* ---------- Stage tracker ---------- */
  .tracker{display:flex;align-items:center;gap:0;min-width:220px}
  .tracker .node{display:flex;flex-direction:column;align-items:center;gap:6px;position:relative;flex:0 0 auto}
  .tracker .dot{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:700;border:2px solid var(--line);background:var(--surface-2);color:var(--muted-2);transition:.3s}
  .tracker .dot.done{background:var(--teal);border-color:var(--teal);color:#fff}
  .tracker .dot.now{background:var(--surface);border-color:var(--sun);color:var(--sun-dark);box-shadow:0 0 0 4px var(--sun-soft);animation:glowPulse 1.8s ease-in-out infinite}
  .tracker .dot.now svg{width:12px;height:12px;animation:bob 1.6s ease-in-out infinite}
  .tracker .lbl{font-size:10.5px;color:var(--muted-2);font-weight:600;white-space:nowrap}
  .tracker .lbl.done,.tracker .lbl.now{color:var(--ink-2)}
  .tracker .connector{height:2px;background:var(--line);flex:1 1 30px;margin:0 2px 18px;position:relative;overflow:hidden}
  .tracker .connector.done{background:var(--teal)}

  /* ---------- Wallet card (golden harbor-ticket style) ---------- */
  .wallet-card{
    border-radius:20px;padding:24px 26px;color:var(--ink-2);position:relative;overflow:hidden;
    background:
      radial-gradient(480px 260px at -10% -30%, rgba(255,255,255,.55), transparent 60%),
      radial-gradient(420px 300px at 120% 130%, rgba(47,167,156,.28), transparent 60%),
      linear-gradient(155deg,#FFEAB2 0%,#FFD166 45%,#F0A93B 100%);
    box-shadow:0 20px 46px rgba(196,140,30,.28), 0 0 0 1px rgba(255,255,255,.5);
    transition:.25s;
  }
  .wallet-card:hover{box-shadow:0 26px 56px rgba(196,140,30,.34), 0 0 0 1px rgba(255,255,255,.65)}
  .wallet-card::before{
    content:"";position:absolute;inset:0;
    background-image:radial-gradient(rgba(255,255,255,.5) 1px, transparent 1px);
    background-size:14px 14px;opacity:.4;pointer-events:none;
  }
  .wallet-card::after{
    content:"";position:absolute;top:0;left:0;width:40%;height:100%;
    background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);
    animation:sheen 5s ease-in-out infinite;pointer-events:none;
  }
  /* The wallet card's gold gradient background never changes with the site
     theme (light/dark) — so its text must use its own fixed dark ink color
     rather than the theme's --ink-2 variable, which turns pale gold in dark
     mode and becomes invisible against this card. */
  .wallet-top{display:flex;justify-content:space-between;align-items:flex-start;position:relative}
  .wallet-top .tag{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#8A5A12;font-weight:700}
  .wallet-top .chain{display:flex;align-items:center;gap:6px;font-size:11.5px;color:#6b4a16;background:rgba(255,255,255,.45);padding:4px 10px;border-radius:20px;font-weight:600}
  .wallet-bal{font-size:36px;font-weight:700;letter-spacing:-.01em;margin-top:26px;position:relative;color:#12333B}
  .wallet-bal .unit{font-size:16px;color:#8A5A12;font-weight:600;margin-left:6px;font-family:'Inter',sans-serif}
  .wallet-addr{margin-top:16px;font-family:var(--mono);font-size:12.5px;color:#6b4a16;letter-spacing:.02em;position:relative;display:flex;align-items:center;gap:8px}
  .wallet-addr button{color:#6b4a16;font-size:11px;font-weight:600;background:rgba(255,255,255,.5);padding:3px 8px;border-radius:6px}
  .wallet-actions{display:flex;gap:10px;margin-top:22px;position:relative}
  .wallet-actions .btn{flex:1;justify-content:center;background:rgba(255,255,255,.55);color:#12333B;backdrop-filter:blur(4px);transition:.15s}
  .wallet-actions .btn:hover{background:rgba(255,255,255,.8);transform:translateY(-1px)}
  .wallet-actions .btn.primary{background:#12333B;color:#FFE9AE}
  .wallet-actions .btn.primary:hover{background:#0b2124;box-shadow:0 6px 20px rgba(18,51,56,.35)}
  .wallet-pending{display:flex;gap:18px;margin-top:16px;position:relative;flex-wrap:wrap}
  .wallet-pending .p{font-size:11.5px;color:#7A5518}
  .wallet-pending .p b{display:block;font-size:14px;color:#12333B;font-weight:700;margin-top:2px}

  /* ---------- Flip widget: wallet card <-> live world clock ---------- */
  .flip-card{perspective:1600px;margin-bottom:20px;touch-action:pan-y;cursor:grab}
  .flip-card:active{cursor:grabbing}
  .flip-card-inner{position:relative;width:100%;height:340px;transition:transform .6s cubic-bezier(.4,.2,.2,1);transform-style:preserve-3d}
  .flip-card.flipped .flip-card-inner{transform:rotateY(180deg)}
  .flip-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:visible;border-radius:20px}
  .flip-face.back{transform:rotateY(180deg)}
  .flip-face .wallet-card,.flip-face .wc-panel{min-height:100%;margin-bottom:0}

  .ledger-pos{color:var(--teal-dark)} .ledger-neg{color:#B84331}

  /* ---------- Forms / modal ---------- */
  .form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
  .modal-overlay{position:fixed;inset:0;background:rgba(30,58,63,.35);backdrop-filter:blur(2px);display:none;align-items:center;justify-content:center;z-index:100;padding:20px}
  .modal-overlay.open{display:flex}
  .modal{background:var(--surface);border:1px solid var(--line);border-radius:16px;width:100%;max-width:480px;max-height:88vh;overflow:auto;box-shadow:0 30px 70px rgba(120,95,40,.22), var(--glow);animation:riseIn .2s ease}
  .modal-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--line-2)}
  .modal-head h3{font-size:16.5px;font-weight:700;font-family:var(--display);color:var(--ink-2)}
  .modal-head button{font-size:18px;color:var(--muted)}
  .ap-popup-close{
    width:26px;height:26px;border-radius:50%;font-size:12px;font-weight:700;
    display:inline-flex;align-items:center;justify-content:center;
    background:var(--surface-2);color:var(--muted);border:1px solid var(--line-2);
    transition:.2s;cursor:not-allowed;
  }
  .ap-popup-close:not(:disabled){
    background:var(--red-soft);color:var(--red);border-color:rgba(255,122,97,.3);
    font-size:15px;cursor:pointer;
  }
  .modal-body{padding:20px}
  .modal-foot{padding:16px 20px;border-top:1px solid var(--line-2);display:flex;justify-content:flex-end;gap:10px}

  .toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--ink-2);color:#FFEAB2;border:1px solid rgba(255,255,255,.1);
    font-size:13.5px;font-weight:500;padding:11px 18px;border-radius:10px;box-shadow:0 15px 40px rgba(18,51,56,.35), var(--glow);
    opacity:0;transition:.25s;z-index:200;display:flex;align-items:center;gap:8px}
  .toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
  .toast.err{background:#5A2418;border-color:rgba(232,96,76,.4);color:#FFE1DA}

  code.small{font-size:11px;background:var(--surface-2);padding:2px 6px;border-radius:5px;color:var(--ink-2)}
  @media (max-width:640px){
    .shell{flex-direction:column}
    .main{padding:16px 14px 84px;max-width:100%}
    .sidebar{
      position:fixed;left:0;right:0;bottom:0;width:100%;height:58px;
      display:flex;flex-direction:row;justify-content:stretch;align-items:stretch;
      padding:0 0 env(safe-area-inset-bottom);
      border-right:none;border-top:1px solid var(--line);
      background:var(--ink-3);z-index:70;
      box-shadow:0 -8px 24px rgba(120,95,40,.14);
      box-sizing:border-box;
    }
    .nav-label{display:none}
    .nav-item{
      flex:1 1 0;min-width:0;max-width:none;position:relative;
      display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
      padding:5px 1px;border-radius:0;
      font-size:clamp(8.5px,2.6vw,10.5px);font-weight:600;text-align:center;color:rgba(255,255,255,.55);
    }
    .nav-item svg{display:block;width:18px;height:18px;flex:0 0 auto}
    .nav-item.active svg{color:var(--sun-bright)}
    /* Thin divider between items, echoing a plain text nav bar ("A | B | C")
       rather than a row of boxed icon buttons. */
    .nav-item:not(:last-child)::after{
      content:'';position:absolute;right:0;top:20%;bottom:20%;width:1px;background:rgba(255,255,255,.14);
    }
    .nav-item.active{background:none;box-shadow:none;color:var(--sun-bright);font-weight:800}
    .nav-item .nlbl{display:none}
    .nav-item .nlbl-m{display:inline;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    /* World clock grid: the desktop auto-fit(120px) rule fits 3 columns even
       on narrow phones, leaving an odd empty cell for 5 cities. Force 2
       columns on mobile, and let a trailing odd item span the full row
       instead of sitting alone next to empty space. */
    .wc-panel-grid{grid-template-columns:repeat(2,1fr)}
    .wc-card:last-child:nth-child(odd){grid-column:1/-1}
    .nav-badge{
      position:absolute;top:2px;right:18%;margin-left:0;
      font-size:8px;line-height:1;padding:1.5px 4px;background:var(--red);color:#fff;border-radius:999px;
    }
    .page-head{align-items:flex-start;flex-direction:column;gap:10px}
    .page-head h1{font-size:19px}
    .page-head p{font-size:12.5px}
    .stat-grid{grid-template-columns:repeat(2,1fr);gap:10px}
    .stat{padding:13px}
    .stat .v{font-size:20px;margin-top:6px}
    .grid-2{grid-template-columns:1fr}
    .form-row{grid-template-columns:1fr}
    .tier-summary-grid{grid-template-columns:1fr;gap:10px;margin-bottom:16px}
    table{display:block;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch}

    /* Component sizes below are tuned for desktop viewing distance — on a
       phone they read as "zoomed in" rather than a native app. Scale each
       one down so more fits on screen without shrinking tap targets. */
    .panel{margin-bottom:14px;border-radius:14px}
    .panel-head{padding:14px 16px}
    .panel-head h2{font-size:14px}
    .invest-card{border-radius:16px;margin-bottom:14px}
    .invest-card .ic-hero{height:140px}
    .invest-card .ic-code{font-size:15.5px}
    .invest-card .ic-route{font-size:12px}
    .invest-card .ic-body{padding:14px 16px 16px}
    .invest-card .ic-stat .val{font-size:14px}
    .invest-card .ic-stat .lbl{font-size:9.5px}
    .invest-card .ic-stat-row{grid-template-columns:repeat(auto-fit,minmax(84px,1fr));gap:8px}
    .invest-card .ic-stat{padding:9px 8px}
    .btn{padding:10px 16px;font-size:13px}
    .modal{border-radius:16px}
    .modal-body{padding:16px}
    .field input,.field select,.field textarea{padding:10px 12px;font-size:16px}
    .wallet-card{padding:20px 18px}
    .wallet-bal{font-size:28px;margin-top:18px}
    .wallet-actions .btn{padding:11px 10px;font-size:12.5px}
    .wc-panel-head{padding:11px 14px;font-size:13px}
    .wc-card{padding:11px 8px;gap:5px}
    .wc-card .wc-city{font-size:11px}
    .wc-card .wc-time{font-size:15px}
    .wc-card .wc-date{font-size:9.5px}
    .wc-card .wc-dial.lg{width:44px;height:44px}
  }

  @media (max-width:900px) and (min-width:641px){
    .stat-grid{grid-template-columns:repeat(2,1fr)}
    .grid-2{grid-template-columns:1fr}
    .sidebar{width:190px}
    .form-row{grid-template-columns:1fr}
    .tier-summary-grid{grid-template-columns:repeat(2,1fr)}
  }