/* ═══ QURO DESIGN SYSTEM v2 ═══ */
/* Inspired by: Zerodha (clarity), Discord (density), WhatsApp (speed) */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}

:root{
  /* ── Brand ── */
  --primary:#38a169;
  --primary-hover:#48bb78;
  --primary-dim:rgba(56,161,105,.12);
  --primary-glow:rgba(56,161,105,.2);
  --primary-subtle:rgba(56,161,105,.06);

  /* ── Neutrals (dark) — slightly warm undertone ── */
  --bg:#09090b;
  --bg2:#111113;
  --bg3:#16161a;
  --bg4:#1c1c21;
  --bg5:#26262c;
  --bg6:#313139;

  /* ── Borders — subtle, consistent ── */
  --border:rgba(255,255,255,.07);
  --border2:rgba(255,255,255,.04);
  --border-hover:rgba(255,255,255,.12);
  --border-active:rgba(56,161,105,.3);

  /* ── Text — higher contrast hierarchy ── */
  --text:#f0f0f2;
  --text-secondary:rgba(255,255,255,.6);
  --muted:rgba(255,255,255,.34);
  --text-faint:rgba(255,255,255,.16);

  /* ── Semantic ── */
  --success:#38a169;
  --warning:#d69e2e;
  --error:#e53e3e;
  --info:#4299e1;

  /* ── Trading semantic (P&L, badges) ── */
  --up:#3da87a;
  --up-dim:rgba(61,168,122,.12);
  --up-subtle:rgba(61,168,122,.06);
  --down:#e05050;
  --down-dim:rgba(224,80,80,.12);
  --down-subtle:rgba(224,80,80,.06);
  --accent-blue:rgba(88,101,242,.8);
  --accent-blue-dim:rgba(88,101,242,.1);

  /* ── Surfaces (elevation layers) ── */
  --surface-0:rgba(255,255,255,.02);
  --surface-1:rgba(255,255,255,.035);
  --surface-2:rgba(255,255,255,.055);
  --surface-3:rgba(255,255,255,.075);
  --surface-hover:rgba(255,255,255,.045);
  --surface-active:rgba(255,255,255,.07);

  /* ── Safe areas ── */
  --sb:env(safe-area-inset-bottom,0px);
  --st:env(safe-area-inset-top,0px);

  /* ── Typography — tighter, more intentional ── */
  --font:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
  --font-mono:'Fira Code','Consolas','Courier New',monospace;

  --text-2xs:10px;
  --text-xs:11px;
  --text-sm:12px;
  --text-base:13px;
  --text-md:14px;
  --text-lg:15px;
  --text-xl:17px;
  --text-2xl:20px;
  --text-3xl:26px;

  --weight-normal:400;
  --weight-medium:500;
  --weight-semi:600;
  --weight-bold:700;
  --weight-extra:800;

  --leading-tight:1.2;
  --leading-snug:1.4;
  --leading-normal:1.5;
  --leading-relaxed:1.65;

  --tracking-tight:-0.01em;
  --tracking-normal:0;
  --tracking-wide:0.02em;
  --tracking-caps:0.06em;

  /* ── Spacing (4px grid) ── */
  --sp-0:2px; --sp-1:4px;  --sp-px:6px; --sp-2:8px; --sp-2h:10px;
  --sp-3:12px; --sp-3h:14px; --sp-4:16px;
  --sp-5:20px; --sp-6:24px; --sp-7:28px; --sp-8:32px;
  --sp-9:36px; --sp-10:40px;--sp-12:48px;--sp-16:64px;

  /* ── Radius — clean, consistent ── */
  --r-xs:4px;
  --r-sm:6px;
  --r-md:8px;
  --r-lg:12px;
  --r-xl:16px;
  --r-2xl:20px;
  --r-3xl:24px;
  --r-full:9999px;

  /* ── Shadows — minimal, purposeful ── */
  --shadow-xs:0 1px 2px rgba(0,0,0,.12);
  --shadow-sm:0 2px 8px rgba(0,0,0,.16);
  --shadow-md:0 4px 16px rgba(0,0,0,.2);
  --shadow-lg:0 8px 32px rgba(0,0,0,.24);
  --shadow-xl:0 16px 48px rgba(0,0,0,.3);
  --shadow-glow:0 0 20px var(--primary-dim);
  --shadow-inset:inset 0 1px 0 rgba(255,255,255,.04);
  --shadow-ring:0 0 0 3px var(--primary-dim);

  /* ── Animations — crisp, fast ── */
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-in-out:cubic-bezier(.45,0,.55,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --ease-expo:cubic-bezier(.19,1,.22,1);
  --ease-bounce:cubic-bezier(.175,.885,.32,1.275);
  --dur-fast:100ms;
  --dur-normal:180ms;
  --dur-slow:280ms;
  --dur-slower:400ms;

  /* ── Z-index scale ── */
  --z-base:1;
  --z-dropdown:100;
  --z-sticky:200;
  --z-overlay:300;
  --z-modal:400;
  --z-popover:500;
  --z-toast:600;
  --z-nav:700;
  --z-sidebar:750;
  --z-call:800;
  --z-call-in:950;
}

/* ── Light mode ── */
[data-theme="light"]{
  --bg:#f7f7f8;--bg2:#ffffff;--bg3:#f0f0f1;--bg4:#e8e8ea;--bg5:#dddde0;--bg6:#d0d0d4;
  --border:rgba(0,0,0,.08);--border2:rgba(0,0,0,.05);--border-hover:rgba(0,0,0,.14);--border-active:rgba(56,161,105,.35);
  --text:#111113;--text-secondary:rgba(0,0,0,.55);--muted:rgba(0,0,0,.38);--text-faint:rgba(0,0,0,.14);
  --surface-0:rgba(0,0,0,.015);--surface-1:rgba(0,0,0,.03);--surface-2:rgba(0,0,0,.05);--surface-3:rgba(0,0,0,.07);
  --surface-hover:rgba(0,0,0,.035);--surface-active:rgba(0,0,0,.06);
  --shadow-xs:0 1px 2px rgba(0,0,0,.04);--shadow-sm:0 2px 6px rgba(0,0,0,.06);
  --shadow-md:0 4px 12px rgba(0,0,0,.08);--shadow-lg:0 8px 24px rgba(0,0,0,.1);
  --shadow-inset:inset 0 1px 0 rgba(255,255,255,.7);
  --primary-dim:rgba(56,161,105,.1);--primary-glow:rgba(56,161,105,.15);--primary-subtle:rgba(56,161,105,.04);
  --up:#2d8a62;--up-dim:rgba(45,138,98,.1);--up-subtle:rgba(45,138,98,.05);
  --down:#c94040;--down-dim:rgba(201,64,64,.1);--down-subtle:rgba(201,64,64,.05);
  --accent-blue:rgba(88,101,242,.85);--accent-blue-dim:rgba(88,101,242,.08);
}

/* ── Base ── */
html{height:100%;height:-webkit-fill-available;background:var(--bg)}
body{
  height:100%;height:-webkit-fill-available;
  font-family:var(--font);
  font-size:var(--text-base);
  line-height:var(--leading-normal);
  letter-spacing:var(--tracking-tight);
  background:var(--bg);
  color:var(--text);
  overflow:hidden;
  touch-action:manipulation;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* ── Scrollbar — thinner, quieter ── */
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.06);border-radius:var(--r-full)}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.12)}
[data-theme="light"] ::-webkit-scrollbar-thumb{background:rgba(0,0,0,.08)}
[data-theme="light"] ::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.16)}

/* ── Selection ── */
::selection{background:var(--primary-dim);color:var(--text)}

/* ── Focus — clean ring ── */
:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:var(--r-sm)}

/* ── Shared transitions — targeted properties only ── */
a{transition:color var(--dur-fast) var(--ease-out),opacity var(--dur-fast)}
button{transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast),opacity var(--dur-fast),transform var(--dur-normal) var(--ease-spring)}
input,textarea,select{transition:border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast)}

/* ── Button base ── */
.btn-primary{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  padding:var(--sp-3) var(--sp-5);
  background:var(--primary);color:#fff;
  border:none;border-radius:var(--r-lg);
  font-family:var(--font);font-size:var(--text-sm);font-weight:var(--weight-semi);
  letter-spacing:var(--tracking-wide);
  cursor:pointer;min-height:40px;
  box-shadow:var(--shadow-sm);
  transition:background var(--dur-normal) var(--ease-out),box-shadow var(--dur-normal),transform var(--dur-normal) var(--ease-spring);
  will-change:transform;
}
.btn-primary:hover{background:var(--primary-hover);box-shadow:var(--shadow-md),var(--shadow-glow);transform:translateY(-1px)}
.btn-primary:active{animation:btnPress 200ms var(--ease-spring);transform:scale(.95);transition-duration:80ms}

/* ── Input base ── */
.form-input{
  width:100%;padding:10px var(--sp-4);
  background:var(--surface-0);border:1px solid var(--border);border-radius:var(--r-lg);
  color:var(--text);font-family:var(--font);font-size:var(--text-base);
  outline:none;min-height:40px;
  transition:border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast);
}
.form-input:focus{border-color:var(--primary);box-shadow:var(--shadow-ring);outline:none}
.form-input:focus-visible{outline:2px solid var(--primary);outline-offset:1px}
.form-input::placeholder{color:var(--muted)}

/* ── Toggle base ── */
.toggle{
  width:40px;height:22px;border-radius:11px;
  background:var(--bg5);border:1px solid var(--border);
  cursor:pointer;position:relative;transition:background var(--dur-slow) var(--ease-out),border-color var(--dur-slow),box-shadow var(--dur-slow);flex-shrink:0;
}
.toggle.on{background:var(--primary);border-color:var(--primary);box-shadow:0 0 10px var(--primary-dim)}
.toggle::after{
  content:'';position:absolute;width:16px;height:16px;
  background:#fff;border-radius:50%;top:2px;left:2px;
  transition:left var(--dur-slow) var(--ease-spring),box-shadow var(--dur-slow);box-shadow:var(--shadow-xs);
}
.toggle.on::after{left:20px;box-shadow:var(--shadow-sm),0 0 8px var(--primary-glow)}

/* ── Keyframes ── */
@keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes slideUp{from{opacity:0;transform:translateY(20px) scale(.97)}to{opacity:1;transform:none}}
@keyframes slideInUp{from{transform:translateY(100%)}to{transform:none}}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.03);opacity:.8}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes glow{0%,100%{box-shadow:0 0 6px var(--primary-dim)}50%{box-shadow:0 0 18px var(--primary-glow)}}
@keyframes nIn{from{opacity:0;transform:translateX(20px) scale(.97)}to{opacity:1;transform:none}}
@keyframes nOut{to{opacity:0;transform:translateX(20px) scale(.97)}}
@keyframes callIn{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
@keyframes skeletonPulse{0%{opacity:.03}50%{opacity:.07}100%{opacity:.03}}
@keyframes bubbleIn{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}
@keyframes bubblePop{0%{transform:scale(.93)}60%{transform:scale(1.02)}100%{transform:scale(1)}}
@keyframes softFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}

/* ── Premium micro-interaction keyframes ── */
@keyframes btnPress{0%{transform:scale(1)}40%{transform:scale(.94)}100%{transform:scale(1)}}
@keyframes btnBounce{0%{transform:scale(.92)}50%{transform:scale(1.04)}100%{transform:scale(1)}}
@keyframes msgSlideIn{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
@keyframes cardReveal{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}
@keyframes listItemIn{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
@keyframes subtlePulse{0%,100%{opacity:1}50%{opacity:.7}}
@keyframes badgePop{0%{transform:scale(0)}60%{transform:scale(1.2)}100%{transform:scale(1)}}
@keyframes rippleOut{from{transform:scale(.5);opacity:.4}to{transform:scale(2.5);opacity:0}}

/* ── Trade success celebration ── */
@keyframes tradeSuccess{
  0%{transform:scale(1);box-shadow:none}
  20%{transform:scale(1.02)}
  40%{box-shadow:0 0 0 4px var(--up-dim)}
  60%{transform:scale(1);box-shadow:0 0 0 8px transparent}
  100%{transform:scale(1);box-shadow:none}
}
@keyframes tradeSuccessSell{
  0%{transform:scale(1);box-shadow:none}
  20%{transform:scale(1.02)}
  40%{box-shadow:0 0 0 4px var(--down-dim)}
  60%{transform:scale(1);box-shadow:0 0 0 8px transparent}
  100%{transform:scale(1);box-shadow:none}
}
@keyframes checkDraw{
  from{stroke-dashoffset:24}to{stroke-dashoffset:0}
}
@keyframes successFlash{
  0%{opacity:0}
  20%{opacity:1}
  100%{opacity:0}
}
@keyframes tradeCardSlide{
  from{opacity:0;transform:translateY(16px) scale(.95)}
  to{opacity:1;transform:none}
}
@keyframes pageSlideIn{
  from{transform:translateY(100%) scale(.98);opacity:.8}
  to{transform:none;opacity:1}
}
@keyframes pageSlideOut{
  from{transform:none;opacity:1}
  to{transform:translateY(40px) scale(.98);opacity:0}
}
@keyframes notifSlideIn{
  from{opacity:0;transform:translateX(30px) scale(.95)}
  to{opacity:1;transform:none}
}
@keyframes notifCountdown{
  from{width:100%}to{width:0}
}
@keyframes shakeError{
  0%,100%{transform:translateX(0)}
  20%,60%{transform:translateX(-4px)}
  40%,80%{transform:translateX(4px)}
}

/* ── Trade success overlay styles ── */
.trade-success-overlay{
  position:fixed;inset:0;z-index:var(--z-toast);
  display:flex;align-items:center;justify-content:center;
  pointer-events:none;
  animation:successFlash 600ms var(--ease-out) forwards;
}
.trade-success-overlay.buy{background:radial-gradient(circle at center,rgba(61,168,122,.12) 0%,transparent 70%)}
.trade-success-overlay.sell{background:radial-gradient(circle at center,rgba(224,80,80,.12) 0%,transparent 70%)}
.trade-success-check{
  width:64px;height:64px;
  border-radius:var(--r-full);
  display:flex;align-items:center;justify-content:center;
  animation:btnBounce 400ms var(--ease-spring) both;
}
.trade-success-check.buy{background:var(--up-dim);border:2px solid var(--up)}
.trade-success-check.sell{background:var(--down-dim);border:2px solid var(--down)}
.trade-success-check svg{width:28px;height:28px}
.trade-success-check.buy svg{stroke:var(--up)}
.trade-success-check.sell svg{stroke:var(--down)}
.trade-success-check svg path{
  stroke-dasharray:24;stroke-dashoffset:24;
  animation:checkDraw 350ms var(--ease-out) 100ms forwards;
}

/* ── Enhanced notification entrance ── */
.notif{animation:notifSlideIn .25s var(--ease-out) both}

/* ── Trade card entrance in chat ── */
.msg-trade{animation:tradeCardSlide .35s var(--ease-out) both}

/* ── Error shake for inputs ── */
.shake-error{animation:shakeError 350ms var(--ease-out)}

/* ── Accessibility: reduce motion ── */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:0.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:0.01ms!important;
    scroll-behavior:auto!important;
  }
}

/* ── Empty state ── */
.empty-state{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:var(--sp-12) var(--sp-6);text-align:center;gap:var(--sp-3);
  animation:fadeUp .4s var(--ease-out) both;
}
.empty-state svg{width:44px;height:44px;stroke:var(--text-faint);stroke-width:1.5;margin-bottom:var(--sp-2)}
.empty-state h3{font-size:var(--text-lg);font-weight:var(--weight-semi);color:var(--text-secondary);letter-spacing:var(--tracking-tight)}
.empty-state p{font-size:var(--text-sm);color:var(--muted);max-width:260px;line-height:var(--leading-relaxed)}
.empty-state .empty-cta{
  margin-top:var(--sp-3);padding:var(--sp-2h) var(--sp-5);
  background:var(--primary);color:#fff;border:none;border-radius:var(--r-lg);
  font-family:var(--font);font-size:var(--text-sm);font-weight:var(--weight-semi);
  cursor:pointer;transition:background var(--dur-fast),transform var(--dur-normal) var(--ease-spring),box-shadow var(--dur-fast);
  box-shadow:var(--shadow-sm);
}
.empty-state .empty-cta:hover{background:var(--primary-hover);box-shadow:var(--shadow-md),var(--shadow-glow);transform:translateY(-1px)}
.empty-state .empty-cta:active{transform:scale(.96)}

/* ── Enhanced skeleton loading ── */
.skeleton{
  background:var(--surface-2);
  border-radius:var(--r-md);
  animation:skeletonPulse 1.5s ease-in-out infinite;
}
.skeleton-text{height:11px;margin-bottom:7px;border-radius:var(--r-xs)}
.skeleton-text:last-child{width:60%}
.skeleton-text.w-40{width:40%}.skeleton-text.w-50{width:50%}.skeleton-text.w-70{width:70%}.skeleton-text.w-80{width:80%}.skeleton-text.w-full{width:100%}
.skeleton-avatar{width:34px;height:34px;border-radius:50%;flex-shrink:0}
.skeleton-row{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4)}
.skeleton-card{
  background:var(--surface-1);border:1px solid var(--border2);border-radius:var(--r-lg);
  padding:var(--sp-3) var(--sp-4);margin-bottom:var(--sp-2);
}
.skeleton-badge{width:24px;height:24px;border-radius:var(--r-sm);flex-shrink:0}
.skeleton-bar{height:8px;border-radius:var(--r-xs)}