/* ==========================================================================
   ZELLOO 2.0 — PERSONALIZED OPPORTUNITY OS
   Design tokens
   ========================================================================== */
:root{
  --violet-700:#4C2FD1;
  --violet-600:#6338EE;
  --violet-500:#8461FF;
  --violet-400:#A78BFF;
  --violet-100:#EFEAFF;
  --blue-500:#3E7BFA;
  --blue-400:#6FA0FF;
  --green-500:#22E6A6;
  --green-400:#5FF2C4;
  --green-100:#E1FBF0;
  --amber-500:#FFB84D;
  --coral-500:#FF6B6B;

  --radar-grad: conic-gradient(from 180deg at 50% 50%, var(--green-400), var(--blue-500), var(--violet-500), var(--green-400));
  --hero-grad: linear-gradient(135deg, var(--violet-600) 0%, var(--violet-500) 42%, var(--blue-500) 100%);
  --gold-grad: linear-gradient(135deg,#ffd76b,#ffb84d);

  --radius-s:10px; --radius-m:16px; --radius-l:22px; --radius-xl:30px; --radius-pill:999px;
  --font-display:'Space Grotesk', sans-serif;
  --font-body:'Inter', sans-serif;
  --font-mono:'JetBrains Mono', monospace;

  --shadow-sm: 0 1px 2px rgba(10,8,30,.28), 0 1px 1px rgba(10,8,30,.18);
  --shadow-md: 0 10px 28px rgba(10,8,30,.32);
  --shadow-lg: 0 22px 56px rgba(10,8,30,.42);
  --glow-violet: 0 0 0 1px rgba(132,97,255,.35), 0 0 32px rgba(132,97,255,.28);
  --glow-green: 0 0 0 1px rgba(34,230,166,.35), 0 0 28px rgba(34,230,166,.22);
}

/* ---------- DARK (default) ---------- */
:root, [data-theme="dark"]{
  --bg:#0A0A1E;
  --bg-soft:#100F2A;
  --surface:#15143A;
  --surface-2:#1D1B4A;
  --surface-3:#26235E;
  --line:rgba(255,255,255,.09);
  --line-strong:rgba(255,255,255,.16);
  --text-1:#F6F4FF;
  --text-2:#B4AFDA;
  --text-3:#7D7AA0;
  --overlay:rgba(6,5,20,.72);
  --scrim: linear-gradient(180deg, rgba(10,10,30,0) 0%, rgba(10,10,30,.9) 100%);
}

/* ---------- LIGHT ---------- */
[data-theme="light"]{
  --bg:#F5F4FC;
  --bg-soft:#FFFFFF;
  --surface:#FFFFFF;
  --surface-2:#F1EFFB;
  --surface-3:#E7E3F9;
  --line:#E5E1F5;
  --line-strong:#D7D1F2;
  --text-1:#161329;
  --text-2:#514C74;
  --text-3:#8D89AC;
  --overlay:rgba(20,16,50,.45);
  --scrim: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.92) 100%);
  --shadow-sm: 0 1px 2px rgba(30,20,80,.06), 0 1px 1px rgba(30,20,80,.04);
  --shadow-md: 0 10px 26px rgba(30,20,80,.10);
  --shadow-lg: 0 22px 50px rgba(30,20,80,.16);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--text-1);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  overscroll-behavior:none;
  transition:background .25s ease, color .25s ease;
}
h1,h2,h3,h4{font-family:var(--font-display);margin:0;letter-spacing:-.01em;}
p{margin:0;}
a{color:inherit;text-decoration:none;}
button{font-family:var(--font-body);cursor:pointer;color:inherit;}
input,textarea{font-family:var(--font-body);color:inherit;}
::selection{background:var(--violet-400);color:#fff;}
.mono{font-family:var(--font-mono);}
img,svg{display:block;}
button:focus-visible, a:focus-visible, input:focus-visible, [tabindex]:focus-visible{
  outline:2.5px solid var(--green-400); outline-offset:2px; border-radius:6px;
}
@media (prefers-reduced-motion: reduce){ *{animation-duration:.001ms !important; transition-duration:.001ms !important;} }
::-webkit-scrollbar{width:0;height:0;}

/* ============ ICONS ============ */
.ic{width:22px;height:22px;display:inline-block;background:currentColor;flex:none;
  -webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;}
.ic-sm{width:16px;height:16px;}
.ic-home{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l9-8 9 8'/%3E%3Cpath d='M5 10v10h14V10'/%3E%3Cpath d='M9 20v-6h6v6'/%3E%3C/svg%3E");mask-image:var(--m,none);}
.ic-compass{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M15 9l-2 6-6 2 2-6z'/%3E%3C/svg%3E");}
.ic-map{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4L3 6v14l6-2 6 2 6-2V4l-6 2-6-2z'/%3E%3Cpath d='M9 4v14M15 6v14'/%3E%3C/svg%3E");}
.ic-plus{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");}
.ic-user{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20c0-4.4 3.6-7 8-7s8 2.6 8 7'/%3E%3C/svg%3E");}
.ic-search{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E");}
.ic-bell{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 10a6 6 0 0112 0c0 5 2 6 2 6H4s2-1 2-6z'/%3E%3Cpath d='M10 20a2 2 0 004 0'/%3E%3C/svg%3E");}
.ic-close{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M5 5l14 14M19 5L5 19'/%3E%3C/svg%3E");}
.ic-back{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 6l-6 6 6 6'/%3E%3C/svg%3E");}
.ic-chevr{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E");}
.ic-check{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12l6 6L20 6'/%3E%3C/svg%3E");}
.ic-heart{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20s-7.5-4.7-9.7-9.4C.8 6.9 3 3.5 6.7 3.5c2 0 3.6 1 5.3 3 1.7-2 3.3-3 5.3-3 3.7 0 5.9 3.4 4.4 7.1C19.5 15.3 12 20 12 20z'/%3E%3C/svg%3E");}
.ic-star{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 2l2.9 6.9L22 9.6l-5.4 4.9L18.2 22 12 18l-6.2 4 1.6-7.5L2 9.6l7.1-.7z'/%3E%3C/svg%3E");}
.ic-users{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20c0-3.6 2.9-6.5 6.5-6.5s6.5 2.9 6.5 6.5'/%3E%3Ccircle cx='17.5' cy='9' r='2.8'/%3E%3Cpath d='M15.8 13.6c2.7.3 4.7 2.7 4.7 5.5v.9'/%3E%3C/svg%3E");}
.ic-bag{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8h12l1 13H5z'/%3E%3Cpath d='M9 8V6a3 3 0 016 0v2'/%3E%3C/svg%3E");}
.ic-grad{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 9l10-5 10 5-10 5-10-5z'/%3E%3Cpath d='M6 11.5V17c0 1.5 3 3 6 3s6-1.5 6-3v-5.5'/%3E%3Cpath d='M22 9v6'/%3E%3C/svg%3E");}
.ic-filter{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h16M7 12h10M10 18h4'/%3E%3C/svg%3E");}
.ic-pin{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s7-7.5 7-12.5A7 7 0 105 9.5C5 14.5 12 22 12 22z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E");}
.ic-target{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Ccircle cx='12' cy='12' r='1.4' fill='%23000' stroke='none'/%3E%3C/svg%3E");}
.ic-coin{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v10M9.5 9.3c0-1.3 1.1-2.1 2.5-2.1s2.5.8 2.5 2c0 2.6-5 1.6-5 4.1 0 1.2 1.1 2 2.5 2s2.5-.8 2.5-2.1'/%3E%3C/svg%3E");}
.ic-globe{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.8 2.6 4.2 5.7 4.2 9s-1.4 6.4-4.2 9c-2.8-2.6-4.2-5.7-4.2-9s1.4-6.4 4.2-9z'/%3E%3C/svg%3E");}
.ic-share{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='5' r='2.6'/%3E%3Ccircle cx='6' cy='12' r='2.6'/%3E%3Ccircle cx='18' cy='19' r='2.6'/%3E%3Cpath d='M8.3 10.7l7.4-4.2M8.3 13.3l7.4 4.2'/%3E%3C/svg%3E");}
.ic-sparkle{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 2l1.8 5.6L19 9.5l-5.2 2 1.8 5.5-3.6-4-3.6 4 1.8-5.5L5 9.5l5.2-1.9z'/%3E%3C/svg%3E");}
.ic-sun{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4.2'/%3E%3Cpath d='M12 2.5v2.4M12 19.1v2.4M4.6 4.6l1.7 1.7M17.7 17.7l1.7 1.7M2.5 12h2.4M19.1 12h2.4M4.6 19.4l1.7-1.7M17.7 6.3l1.7-1.7'/%3E%3C/svg%3E");}
.ic-moon{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 14.3A8.5 8.5 0 1110 3.8a7 7 0 0010 10.5z'/%3E%3C/svg%3E");}
.ic-flame{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 2s5 4.4 5 9.8A5 5 0 0112 17a5 5 0 01-5-5.2c0-1.2.6-2.2 1.4-3 .1 1.4.9 2 1.6 2 .9 0 .8-1 .6-2C10 6.5 12 2 12 2z'/%3E%3C/svg%3E");}
.ic-award{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8.5' r='5.5'/%3E%3Cpath d='M8.5 13.2L7 21l5-2.3 5 2.3-1.5-7.8'/%3E%3C/svg%3E");}
.ic-layers{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l9 4.5-9 4.5-9-4.5z'/%3E%3Cpath d='M3 12l9 4.5 9-4.5M3 16.5l9 4.5 9-4.5'/%3E%3C/svg%3E");}
.ic-bolt{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2L4 14h6l-1 8 9-12h-6z'/%3E%3C/svg%3E");}
.ic-mic{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='2' width='6' height='11' rx='3'/%3E%3Cpath d='M5 11a7 7 0 0014 0M12 18v4'/%3E%3C/svg%3E");}
.ic-calendar{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E");}
.ic-building{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='11' height='18'/%3E%3Cpath d='M15 8h5v13h-5M7 7h.01M11 7h.01M7 11h.01M11 11h.01M7 15h.01M11 15h.01'/%3E%3C/svg%3E");}
.ic-plug{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='16' height='16' rx='4'/%3E%3Cpath d='M9 9h.01M15 9h.01M8 14c1.2 1.4 2.6 2 4 2s2.8-.6 4-2'/%3E%3C/svg%3E");}
.ic-gauge{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 15a8 8 0 1116 0'/%3E%3Cpath d='M12 15l4-5'/%3E%3C/svg%3E");}

/* ============ APP SHELL ============ */
#app{max-width:1480px;margin:0 auto;min-height:100vh;position:relative;}
.layout{display:flex;align-items:stretch;min-height:100vh;}
.main-col{flex:1;min-width:0;display:flex;flex-direction:column;}

/* ---- Sidebar (tablet/desktop) ---- */
.sidebar{
  display:none;flex-direction:column;gap:4px;width:250px;flex:none;
  padding:22px 16px;border-right:1px solid var(--line);position:sticky;top:0;height:100vh;overflow-y:auto;
}
.brandmark{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:700;font-size:21px;margin-bottom:22px;padding:0 6px;}
.brandmark .ring{width:30px;height:30px;border-radius:50%;background:var(--radar-grad);position:relative;flex:none;animation:spin 7s linear infinite;}
.brandmark .ring::after{content:'';position:absolute;inset:4px;border-radius:50%;background:var(--bg-soft);}
@keyframes spin{to{transform:rotate(360deg);}}
.side-link{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:var(--radius-m);color:var(--text-2);font-weight:600;font-size:14.5px;transition:.15s;}
.side-link:hover{background:var(--surface-2);color:var(--text-1);}
.side-link.active{background:var(--surface-2);color:var(--text-1);box-shadow:inset 3px 0 0 var(--violet-500);}
.side-link .ic{width:19px;height:19px;background:currentColor;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;}
.side-cta{display:flex;align-items:center;justify-content:center;gap:8px;background:var(--hero-grad);color:#fff;border:none;border-radius:var(--radius-m);padding:12px;font-weight:700;font-size:14.5px;margin-bottom:14px;box-shadow:var(--glow-violet);}
.side-sec{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);}
.side-foot{margin-top:auto;display:flex;align-items:center;gap:10px;padding:10px 12px;}

/* ---- Topbar ---- */
.topbar{
  position:sticky;top:0;z-index:40;background:color-mix(in srgb, var(--bg) 82%, transparent);backdrop-filter:blur(16px);
  display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line);
}
.topbar .brandmark{display:flex;margin:0;font-size:18px;}
.topbar .spacer{flex:1;}
.icon-btn{position:relative;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--surface);display:flex;align-items:center;justify-content:center;color:var(--text-1);transition:.15s;flex:none;}
.icon-btn:active{transform:scale(.94);}
.icon-btn .ic{width:19px;height:19px;background:currentColor;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;}
.icon-btn .dot{position:absolute;top:7px;right:8px;width:7px;height:7px;border-radius:50%;background:var(--coral-500);border:2px solid var(--bg);}
.avatar{width:40px;height:40px;border-radius:50%;flex:none;cursor:pointer;background:var(--hero-grad);display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--font-display);font-weight:700;font-size:13px;box-shadow:var(--glow-violet);}

/* ---- Views / page wrap ---- */
main{flex:1;padding-bottom:96px;}
.view{display:none;}
.view.active{display:block;animation:fadein .25s ease;}
@keyframes fadein{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
.page-wrap{max-width:640px;margin:0 auto;padding:16px 16px 8px;}
.page-wrap.wide{max-width:1160px;}
.section-head{display:flex;align-items:baseline;justify-content:space-between;margin:26px 0 12px;}
.section-head h2{font-size:16.5px;font-weight:700;}
.section-head .see-all{font-size:12.5px;font-weight:700;color:var(--violet-400);}
.eyebrow{font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--text-3);}

/* ---- Bottom nav (mobile) ---- */
.bottomnav{
  position:fixed;left:0;right:0;bottom:0;z-index:50;max-width:1480px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-around;
  padding:8px 6px calc(8px + env(safe-area-inset-bottom));
  background:color-mix(in srgb, var(--bg-soft) 90%, transparent);backdrop-filter:blur(18px);
  border-top:1px solid var(--line);
}
.bn-item{display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--text-3);font-size:10.5px;font-weight:600;padding:4px 10px;border-radius:12px;background:none;border:none;}
.bn-item .ic{width:21px;height:21px;background:currentColor;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;}
.bn-item.active{color:var(--text-1);}
.bn-item.active .ic{background:var(--violet-400);}
.bn-plus{width:52px;height:52px;border-radius:50%;background:var(--hero-grad);display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:var(--glow-violet);margin-top:-22px;border:4px solid var(--bg);}
.bn-plus .ic{width:22px;height:22px;background:#fff;}

/* ============ HOME ============ */
.greeting h1{font-size:23px;}
.greeting p{color:var(--text-2);font-size:13.5px;margin-top:3px;}

.hero-oppo{
  margin-top:16px;border-radius:var(--radius-xl);padding:22px 20px;position:relative;overflow:hidden;
  background:var(--hero-grad);color:#fff;box-shadow:var(--shadow-lg);
}
.hero-oppo::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 88% -10%, rgba(255,255,255,.35), transparent 55%);}
.hero-oppo .tag{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.18);padding:5px 11px;border-radius:var(--radius-pill);font-size:11.5px;font-weight:700;letter-spacing:.03em;position:relative;}
.hero-oppo h3{font-size:21px;margin-top:12px;position:relative;max-width:80%;}
.hero-oppo .desc{font-size:13.5px;opacity:.92;margin-top:6px;position:relative;max-width:90%;}
.hero-oppo .meta{display:flex;gap:14px;margin-top:14px;font-size:12px;font-weight:600;opacity:.95;position:relative;}
.hero-oppo .meta span{display:flex;align-items:center;gap:5px;}
.hero-oppo .cta{margin-top:16px;display:inline-flex;align-items:center;gap:6px;background:#fff;color:var(--violet-700);font-weight:700;font-size:13.5px;padding:11px 18px;border-radius:var(--radius-pill);border:none;position:relative;}

.progress-card{
  margin-top:16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-l);
  padding:16px 18px;display:flex;align-items:center;gap:16px;
}
.level-ring{width:58px;height:58px;border-radius:50%;background:var(--radar-grad);display:flex;align-items:center;justify-content:center;flex:none;position:relative;}
.level-ring::after{content:'';position:absolute;inset:4px;border-radius:50%;background:var(--surface);}
.level-ring b{position:relative;font-family:var(--font-display);font-size:15px;}
.progress-card .info{flex:1;min-width:0;}
.progress-card .row1{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:8px;}
.progress-card .row1 strong{font-size:14px;}
.progress-card .row1 span{font-size:12px;color:var(--text-3);font-family:var(--font-mono);}
.bar{height:8px;border-radius:var(--radius-pill);background:var(--surface-3);overflow:hidden;}
.bar > i{display:block;height:100%;background:linear-gradient(90deg,var(--green-400),var(--violet-500));border-radius:var(--radius-pill);}
.progress-card .stage{margin-top:8px;font-size:11.5px;color:var(--text-3);font-weight:600;}
.progress-card .stage b{color:var(--green-400);}

.pour-toi-rail{display:flex;gap:12px;overflow-x:auto;padding:2px 0 6px;scrollbar-width:none;}
.pt-card{
  flex:none;width:168px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-l);padding:14px;
  display:flex;flex-direction:column;gap:8px;transition:.15s;
}
.pt-card:active{transform:scale(.97);}
.pt-card .ico{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:#fff;}
.pt-card .ico .ic{width:17px;height:17px;background:#fff;}
.pt-card .t{font-size:13px;font-weight:700;line-height:1.3;}
.pt-card .s{font-size:11.5px;color:var(--text-3);}
.pt-card .mini-bar{height:5px;border-radius:99px;background:var(--surface-3);margin-top:2px;overflow:hidden;}
.pt-card .mini-bar>i{display:block;height:100%;background:var(--green-400);}

/* ============ RADAR ============ */
.radar-hero{
  position:relative;border-radius:var(--radius-xl);padding:22px 20px 20px;overflow:hidden;
  background:var(--surface);border:1px solid var(--line);
}
.radar-sweep{position:absolute;top:-70px;right:-70px;width:220px;height:220px;border-radius:50%;background:var(--radar-grad);opacity:.28;filter:blur(6px);animation:spin 12s linear infinite;}
.radar-hero h2{font-size:22px;position:relative;}
.radar-hero p{position:relative;color:var(--text-2);font-size:13px;margin-top:4px;}
.radar-search{
  margin-top:14px;display:flex;align-items:center;gap:9px;background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--radius-pill);padding:11px 15px;position:relative;color:var(--text-3);
}
.radar-search input{background:none;border:none;flex:1;font-size:13.5px;color:var(--text-1);}
.radar-search input::placeholder{color:var(--text-3);}

.dim-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:18px;}
.dim-card{
  border-radius:var(--radius-l);padding:16px;color:#fff;position:relative;overflow:hidden;min-height:104px;
  display:flex;flex-direction:column;justify-content:space-between;transition:.15s;
}
.dim-card:active{transform:scale(.97);}
.dim-card .ic{width:22px;height:22px;background:#fff;}
.dim-card .name{font-weight:700;font-size:14.5px;margin-top:8px;}
.dim-card .count{font-size:11px;opacity:.85;font-weight:600;}
.dim-card.active{box-shadow:0 0 0 2px #fff inset;}

.chip-row{display:flex;gap:8px;overflow-x:auto;margin-top:18px;padding-bottom:4px;scrollbar-width:none;}
.chip{flex:none;padding:8px 15px;border-radius:var(--radius-pill);background:var(--surface-2);border:1px solid var(--line);font-size:12.5px;font-weight:600;color:var(--text-2);}
.chip.active{background:var(--text-1);color:var(--bg);border-color:var(--text-1);}

.oppo-list{display:flex;flex-direction:column;gap:12px;margin-top:14px;}
.oppo-card{
  display:flex;gap:13px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-l);
  padding:14px;transition:.15s;
}
.oppo-card:active{transform:scale(.985);}
.oppo-card .ico{width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;color:#fff;flex:none;}
.oppo-card .ico .ic{width:22px;height:22px;background:#fff;}
.oppo-card .body{flex:1;min-width:0;}
.oppo-card .top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;}
.oppo-card .t{font-size:14.5px;font-weight:700;line-height:1.3;}
.oppo-card .org{font-size:12px;color:var(--text-3);margin-top:2px;}
.oppo-card .metaline{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px;font-size:11.5px;color:var(--text-3);font-weight:600;}
.oppo-card .metaline span{display:flex;align-items:center;gap:4px;}
.oppo-card .save-btn{width:30px;height:30px;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;background:var(--surface-2);flex:none;color:var(--text-3);}
.oppo-card .save-btn.saved{color:var(--coral-500);border-color:var(--coral-500);}
.oppo-card .save-btn .ic{width:14px;height:14px;background:currentColor;}
.deadline-tag{display:inline-block;margin-top:8px;font-size:11px;font-weight:700;color:var(--amber-500);}

/* ============ MAP ============ */
.map-wrap{position:relative;height:calc(100vh - 128px);border-radius:0;overflow:hidden;background:var(--surface-2);}
.map-canvas{position:absolute;inset:0;overflow:hidden;}
.map-canvas svg{width:100%;height:100%;}
.map-topbar{position:absolute;top:0;left:0;right:0;z-index:5;padding:14px;display:flex;flex-direction:column;gap:10px;}
.map-search{
  display:flex;align-items:center;gap:9px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-md);
  border-radius:var(--radius-pill);padding:11px 15px;color:var(--text-3);
}
.map-search input{background:none;border:none;flex:1;font-size:13.5px;color:var(--text-1);}
.map-filters{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;}
.map-filters .chip{background:var(--surface);box-shadow:var(--shadow-sm);}

.map-pin{position:absolute;transform:translate(-50%,-100%);cursor:pointer;transition:.15s;}
.map-pin:hover, .map-pin:active{transform:translate(-50%,-100%) scale(1.12);}
.map-pin .dot{width:34px;height:34px;border-radius:50% 50% 50% 0;transform:rotate(45deg);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-md);border:2px solid rgba(255,255,255,.5);}
.map-pin .dot .ic{width:15px;height:15px;background:#fff;transform:rotate(-45deg);}
.map-pin.me .dot{background:var(--green-400)!important;}
.map-cluster{position:absolute;transform:translate(-50%,-50%);width:40px;height:40px;border-radius:50%;background:var(--violet-500);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;box-shadow:var(--glow-violet);border:3px solid var(--bg-soft);}

.map-zoom{position:absolute;right:14px;bottom:200px;display:flex;flex-direction:column;border-radius:var(--radius-m);overflow:hidden;box-shadow:var(--shadow-md);z-index:5;}
.map-zoom button{width:42px;height:42px;background:var(--surface);border:none;border-bottom:1px solid var(--line);font-size:19px;color:var(--text-1);font-weight:700;}
.map-locate{position:absolute;right:14px;bottom:150px;width:42px;height:42px;border-radius:50%;background:var(--surface);box-shadow:var(--shadow-md);border:none;display:flex;align-items:center;justify-content:center;color:var(--violet-500);z-index:5;}
.map-locate .ic{width:19px;height:19px;background:currentColor;}

.bottom-sheet{
  position:absolute;left:0;right:0;bottom:0;background:var(--surface);border-radius:24px 24px 0 0;box-shadow:0 -12px 40px rgba(0,0,0,.25);
  max-height:46%;display:flex;flex-direction:column;z-index:6;transition:max-height .25s ease;
}
.bottom-sheet.expanded{max-height:88%;}
.sheet-handle{width:40px;height:4px;background:var(--line-strong);border-radius:99px;margin:10px auto 6px;flex:none;}
.sheet-head{display:flex;align-items:center;justify-content:space-between;padding:0 16px 10px;flex:none;}
.sheet-head h3{font-size:15px;}
.sheet-body{overflow-y:auto;padding:0 16px 20px;}
.sheet-mini{display:flex;gap:12px;background:var(--surface-2);border-radius:var(--radius-l);padding:12px;margin-bottom:10px;}

/* ============ COMMUNITY ============ */
.tab-row{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin-top:12px;padding-bottom:2px;}
.tab-row .chip{padding:9px 14px;}
.post-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-l);padding:15px;margin-top:12px;}
.post-head{display:flex;align-items:center;gap:10px;}
.post-head .av{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;flex:none;}
.post-head .nm{font-size:13.5px;font-weight:700;display:flex;align-items:center;gap:5px;}
.post-head .tm{font-size:11.5px;color:var(--text-3);}
.post-text{font-size:13.5px;line-height:1.5;margin-top:10px;color:var(--text-2);}
.post-actions{display:flex;gap:18px;margin-top:12px;}
.post-actions button{display:flex;align-items:center;gap:6px;background:none;border:none;color:var(--text-3);font-size:12.5px;font-weight:600;}
.post-actions .ic{width:17px;height:17px;background:currentColor;}
.post-actions .liked{color:var(--coral-500);}
.verified{width:14px;height:14px;background:var(--blue-400);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;}
.verified .ic{width:8px;height:8px;background:#fff;}

/* ============ PASSPORT ============ */
.passport-hero{
  border-radius:var(--radius-xl);padding:24px 20px;background:var(--hero-grad);color:#fff;position:relative;overflow:hidden;text-align:center;
}
.passport-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 15% 0%, rgba(255,255,255,.3), transparent 55%);}
.passport-hero .pav{width:84px;height:84px;border-radius:50%;background:rgba(255,255,255,.16);border:3px solid rgba(255,255,255,.5);margin:0 auto 12px;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:26px;font-weight:700;position:relative;}
.passport-hero h2{font-size:19px;position:relative;}
.passport-hero .lvl{font-size:12.5px;opacity:.9;margin-top:3px;position:relative;font-weight:600;}
.role-pills{display:flex;gap:8px;justify-content:center;margin-top:12px;position:relative;flex-wrap:wrap;}
.role-pills span{background:rgba(255,255,255,.18);padding:5px 12px;border-radius:var(--radius-pill);font-size:11.5px;font-weight:700;}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:16px;position:relative;}
.stat-grid b{display:block;font-size:17px;font-family:var(--font-display);}
.stat-grid span{font-size:10.5px;opacity:.85;}

.skill-row{display:flex;align-items:center;gap:12px;margin-top:12px;}
.skill-row .nm{width:112px;flex:none;font-size:13px;font-weight:600;color:var(--text-2);}
.skill-row .bar{flex:1;}
.skill-row .pct{width:34px;text-align:right;font-size:12px;font-family:var(--font-mono);color:var(--text-3);}

.grid-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;}
.grid-chips span{background:var(--surface-2);border:1px solid var(--line);padding:8px 13px;border-radius:var(--radius-pill);font-size:12.5px;font-weight:600;}

.ach-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:12px;}
.ach{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-m);padding:12px 8px;text-align:center;}
.ach .ico{width:36px;height:36px;border-radius:50%;background:var(--gold-grad);display:flex;align-items:center;justify-content:center;margin:0 auto 6px;color:#7a4b00;}
.ach .ico .ic{width:17px;height:17px;background:#7a4b00;}
.ach span{font-size:10.5px;font-weight:600;color:var(--text-2);display:block;line-height:1.25;}

.settings-row{display:flex;align-items:center;justify-content:space-between;padding:13px 4px;border-bottom:1px solid var(--line);}
.settings-row:last-child{border-bottom:none;}
.settings-row .lft{display:flex;align-items:center;gap:11px;font-size:13.5px;font-weight:600;}
.settings-row .lft .ic{width:18px;height:18px;background:var(--text-2);}
.theme-toggle{display:flex;background:var(--surface-2);border-radius:var(--radius-pill);padding:3px;gap:2px;}
.theme-toggle button{padding:6px 12px;border:none;background:none;border-radius:var(--radius-pill);font-size:11.5px;font-weight:700;color:var(--text-3);display:flex;align-items:center;gap:5px;}
.theme-toggle button.active{background:var(--surface);color:var(--text-1);box-shadow:var(--shadow-sm);}
.theme-toggle .ic{width:13px;height:13px;background:currentColor;}

/* ============ MISSIONS ============ */
.mission-card{display:flex;align-items:center;gap:13px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-l);padding:14px;margin-top:10px;}
.mission-card.done{opacity:.55;}
.mission-card .ico{width:40px;height:40px;border-radius:12px;background:var(--surface-2);display:flex;align-items:center;justify-content:center;flex:none;color:var(--violet-400);}
.mission-card .ico .ic{width:19px;height:19px;background:currentColor;}
.mission-card .body{flex:1;min-width:0;}
.mission-card .t{font-size:13.5px;font-weight:700;}
.mission-card .s{font-size:11.5px;color:var(--text-3);margin-top:2px;}
.mission-card .xp{font-size:12px;font-weight:700;color:var(--green-400);font-family:var(--font-mono);flex:none;}

/* ============ CREATE SHEET ============ */
.create-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;padding:6px 16px 20px;}
.create-opt{display:flex;flex-direction:column;gap:10px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-l);padding:16px;}
.create-opt .ico{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;color:#fff;}
.create-opt .ico .ic{width:18px;height:18px;background:#fff;}
.create-opt .t{font-size:13.5px;font-weight:700;}
.create-opt .s{font-size:11px;color:var(--text-3);}

/* ============ AI ============ */
.ai-hero{border-radius:var(--radius-xl);padding:22px 20px;background:var(--surface);border:1px solid var(--line);position:relative;overflow:hidden;text-align:center;}
.ai-orb{width:64px;height:64px;border-radius:50%;background:var(--radar-grad);margin:0 auto 14px;animation:spin 6s linear infinite;position:relative;box-shadow:var(--glow-violet);}
.ai-orb::after{content:'';position:absolute;inset:6px;border-radius:50%;background:var(--surface);}
.ai-input-row{display:flex;gap:8px;margin-top:16px;}
.ai-input-row input{flex:1;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-pill);padding:12px 16px;font-size:13.5px;color:var(--text-1);}
.ai-input-row button{width:46px;height:46px;border-radius:50%;background:var(--hero-grad);border:none;color:#fff;display:flex;align-items:center;justify-content:center;flex:none;box-shadow:var(--glow-violet);}
.ai-input-row button .ic{width:18px;height:18px;background:#fff;}
.ai-suggest{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:14px;}
.ai-suggest button{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-pill);padding:8px 13px;font-size:12px;font-weight:600;color:var(--text-2);}
.ai-path-step{display:flex;gap:13px;margin-top:14px;}
.ai-path-step .num{width:28px;height:28px;border-radius:50%;background:var(--surface-3);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex:none;font-family:var(--font-mono);}
.ai-path-step .body{flex:1;padding-bottom:14px;border-left:2px solid var(--line);margin-left:14px;padding-left:16px;margin-top:-28px;padding-top:28px;}
.ai-path-step:last-child .body{border-left:2px solid transparent;}
.ai-path-step .t{font-size:13.5px;font-weight:700;}
.ai-path-step .s{font-size:12px;color:var(--text-3);margin-top:2px;}

/* ============ ONBOARDING ============ */
.onboard{position:fixed;inset:0;background:var(--bg);z-index:200;display:flex;flex-direction:column;}
.onboard-top{display:flex;align-items:center;gap:10px;padding:18px 20px 0;}
.ob-dots{display:flex;gap:6px;flex:1;}
.ob-dots i{height:4px;flex:1;border-radius:99px;background:var(--surface-3);}
.ob-dots i.on{background:var(--violet-500);}
.onboard-body{flex:1;overflow-y:auto;padding:24px 20px 20px;max-width:520px;margin:0 auto;width:100%;}
.onboard-body h1{font-size:25px;}
.onboard-body .sub{color:var(--text-2);font-size:14px;margin-top:8px;}
.ob-opt{display:flex;align-items:center;gap:12px;padding:14px 15px;border-radius:var(--radius-l);border:1.5px solid var(--line);margin-top:10px;background:var(--surface);}
.ob-opt.sel{border-color:var(--violet-500);background:var(--violet-100);box-shadow:var(--glow-violet);}
[data-theme="dark"] .ob-opt.sel{background:rgba(132,97,255,.14);}
.ob-opt .emo{font-size:20px;}
.ob-opt .t{flex:1;font-size:14px;font-weight:600;}
.ob-opt .ic-check{width:18px;height:18px;background:var(--violet-500);opacity:0;}
.ob-opt.sel .ic-check{opacity:1;}
.ob-chip-grid{display:flex;flex-wrap:wrap;gap:9px;margin-top:16px;}
.ob-chip{padding:10px 16px;border-radius:var(--radius-pill);border:1.5px solid var(--line);font-size:13px;font-weight:600;background:var(--surface);}
.ob-chip.sel{background:var(--violet-500);border-color:var(--violet-500);color:#fff;}
.onboard-foot{padding:16px 20px calc(16px + env(safe-area-inset-bottom));border-top:1px solid var(--line);}
.ob-name-input{width:100%;padding:15px 16px;border-radius:var(--radius-m);border:1.5px solid var(--line);background:var(--surface);font-size:15px;color:var(--text-1);margin-top:18px;}

/* ---- Welcome / auth step ---- */
.ob-welcome{display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:6vh;}
.ob-welcome .ob-logo{width:72px;height:72px;border-radius:22px;background:var(--hero-grad);box-shadow:var(--glow-violet);display:flex;align-items:center;justify-content:center;font-family:var(--font-display,inherit);font-weight:700;font-size:28px;color:#fff;margin-bottom:18px;}
.ob-welcome h1{font-size:25px;}
.ob-welcome .sub{max-width:340px;margin-left:auto;margin-right:auto;}
.ob-auth-stack{width:100%;max-width:340px;margin-top:32px;display:flex;flex-direction:column;gap:11px;}
.btn-google{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--surface);color:var(--text-1);border:1.5px solid var(--line-strong);border-radius:var(--radius-pill);font-weight:700;font-size:14px;padding:13px 20px;width:100%;transition:.15s;}
.btn-google:hover{background:var(--surface-2);}
.btn-google:disabled{opacity:.65;}
.btn-google .g-logo{width:18px;height:18px;flex:none;}
.btn-google .g-spin{width:16px;height:16px;border-radius:50%;border:2px solid var(--line-strong);border-top-color:var(--violet-500);flex:none;animation:gspin .7s linear infinite;}
@keyframes gspin{to{transform:rotate(360deg);}}
.ob-auth-divider{display:flex;align-items:center;gap:10px;width:100%;max-width:340px;margin:18px 0 0;color:var(--text-3);font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;}
.ob-auth-divider::before,.ob-auth-divider::after{content:'';flex:1;height:1px;background:var(--line);}
.btn-email-alt{background:none;border:1.5px solid var(--line-strong);color:var(--text-1);border-radius:var(--radius-pill);font-weight:700;font-size:14px;padding:13px 20px;width:100%;max-width:340px;margin-top:14px;}
.ob-legal{max-width:320px;margin:22px auto 0;font-size:11px;line-height:1.5;color:var(--text-3);}
.ob-google-badge{display:inline-flex;align-items:center;gap:7px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-pill);padding:7px 13px;font-size:12.5px;font-weight:700;color:var(--text-1);margin-top:18px;}
.ob-google-badge .g-logo{width:14px;height:14px;}

/* ============ BUTTONS / GENERIC ============ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;border-radius:var(--radius-pill);font-weight:700;font-size:14px;padding:13px 20px;width:100%;}
.btn-primary{background:var(--hero-grad);color:#fff;box-shadow:var(--glow-violet);}
.btn-primary:disabled{opacity:.4;box-shadow:none;}
.btn-ghost{background:var(--surface-2);color:var(--text-1);border:1px solid var(--line);}
.btn-outline{background:none;border:1.5px solid var(--line-strong);color:var(--text-1);}

/* ============ MODAL / SHEET (opportunity detail etc) ============ */
.modal-scrim{position:fixed;inset:0;background:var(--overlay);z-index:100;display:none;}
.modal-scrim.open{display:block;}
.sheet-modal{
  position:fixed;left:0;right:0;bottom:0;z-index:101;background:var(--surface);border-radius:26px 26px 0 0;
  max-height:90vh;display:flex;flex-direction:column;transform:translateY(100%);transition:transform .3s cubic-bezier(.2,.8,.2,1);
  max-width:640px;margin:0 auto;
}
.sheet-modal.open{transform:translateY(0);}
.sheet-modal .sheet-body{padding:0 20px 24px;}

.detail-hero{height:150px;border-radius:0;position:relative;display:flex;align-items:flex-end;padding:16px 20px;}
.detail-hero .emo{font-size:38px;}
.det-title{font-size:19px;font-weight:700;margin-top:14px;}
.det-org{font-size:13px;color:var(--text-3);margin-top:3px;}
.det-info-grid{display:flex;flex-direction:column;gap:10px;margin-top:16px;}
.det-info-grid .row{display:flex;align-items:center;gap:10px;font-size:13.5px;}
.det-info-grid .ic{width:17px;height:17px;background:var(--violet-400);}
.det-actions{display:flex;gap:10px;margin-top:18px;}
.det-actions .btn{width:auto;flex:1;}
.det-actions .icon-btn{width:48px;height:48px;flex:none;}

.toast{position:fixed;left:50%;bottom:110px;transform:translateX(-50%);background:var(--text-1);color:var(--bg);padding:11px 18px;border-radius:var(--radius-pill);font-size:13px;font-weight:700;z-index:300;opacity:0;pointer-events:none;transition:.25s;}
.toast.show{opacity:1;transform:translate(-50%,-6px);}

/* ============ DESKTOP LAYOUT ============ */
@media (min-width:900px){
  .sidebar{display:flex;}
  .bottomnav{display:none;}
  main{padding-bottom:40px;}
  .page-wrap{max-width:none;padding:24px 32px;}
  .home-grid{display:grid;grid-template-columns:1.4fr .9fr;gap:28px;align-items:start;}
  .home-grid .right-col{position:sticky;top:88px;display:flex;flex-direction:column;gap:18px;}
  .radar-grid{display:grid;grid-template-columns:1fr;}
  .dim-grid{grid-template-columns:repeat(5,1fr);}
  .oppo-list{display:grid;grid-template-columns:repeat(2,1fr);}
  .map-wrap{height:calc(100vh - 20px);border-radius:var(--radius-xl);margin:10px 20px;}
  .bottom-sheet{position:absolute;left:20px;right:auto;bottom:20px;top:20px;width:360px;border-radius:var(--radius-xl);max-height:none;}
  .bottom-sheet.expanded{max-height:none;}
  .sheet-modal{left:auto;right:32px;bottom:32px;border-radius:var(--radius-xl);max-height:80vh;}
  .create-grid{grid-template-columns:repeat(4,1fr);max-width:640px;}
  .passport-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start;}
  .ach-grid{grid-template-columns:repeat(4,1fr);}
}
@media (max-width:899px){
  .pt-card{width:150px;}
}