/* ═══ SHARED THEME — Clean Fintech Design ═══ */
/* Neutral dark — pure greys, luminous borders, generous radius */
:root, [data-theme="dark"] {
  /* Surfaces: pure black → dark greys */
  --bg:#0b0b0e;
  --s1:#111114;
  --s2:#18181b;
  --s3:#1f1f23;
  --s4:#27272b;

  /* Borders: white luminous strokes */
  --bd:rgba(255,255,255,.15);
  --bd2:rgba(255,255,255,.22);

  /* Text: intense white */
  --tx:#ffffff;
  --t2:#ececef;
  --t3:#c8c8d0;

  /* Semantic */
  --g:#34d399;--gd:rgba(52,211,153,.08);--gb:rgba(52,211,153,.12);
  --r:#f87171;--rd:rgba(248,113,113,.08);--rb:rgba(248,113,113,.12);
  --b:#60a5fa;--y:#FCA311;--yd:rgba(252,163,17,.1);
  --o:#FCA311;--p:#a78bfa;

  /* Inputs */
  --input-bg:#18181b;
  --input-bd:rgba(255,255,255,.1);

  --select-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2371717a'/%3E%3C/svg%3E");

  /* Fonts */
  --font:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  /* Radius */
  --r-sm:8px;
  --r-md:12px;
  --r-lg:16px;
  --r-xl:20px;

  /* Shadows */
  --shadow:0 2px 16px rgba(0,0,0,.5);
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow-md:0 4px 16px rgba(0,0,0,.4);
  --shadow-lg:0 8px 40px rgba(0,0,0,.5);
  --shadow-glow-gold:0 0 20px rgba(252,163,17,.06);
  --shadow-glow-green:0 0 12px rgba(52,211,153,.08);
  --shadow-glow-blue:0 0 12px rgba(96,165,250,.08);

  /* Glass */
  --glass:rgba(255,255,255,.02);
  --glass-border:rgba(255,255,255,.06);
  --glass-hover:rgba(255,255,255,.04);

  /* Transitions */
  --t-fast:0.15s cubic-bezier(0.25,0.1,0.25,1);
  --t-medium:0.25s cubic-bezier(0.25,0.1,0.25,1);
  --t-spring:0.3s cubic-bezier(0.34,1.56,0.64,1);

  /* Focus */
  --bd-subtle:rgba(255,255,255,.04);
  --bd-focus:rgba(255,255,255,.25);

  color-scheme: dark;
}

/* Light mode */
[data-theme="light"] {
  --bg:#FFFFFF;--s1:#f5f5f5;--s2:#E5E5E5;--s3:#d5d5d5;--s4:#c5c5c5;
  --bd:#d0d0d0;--bd2:#c0c0c0;
  --tx:#000000;--t2:#14213D;--t3:#4a5568;
  --g:#10b981;--gd:rgba(16,185,129,.08);--gb:#d1fae5;
  --r:#ef4444;--rd:rgba(239,68,68,.07);--rb:#fee2e2;
  --b:#3b82f6;--y:#d97706;--yd:rgba(217,119,6,.08);
  --o:#d97706;--p:#7c3aed;
  --input-bg:#FFFFFF;--input-bd:#d0d0d0;
  --select-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%234a5568'/%3E%3C/svg%3E");
  --glass:rgba(0,0,0,.02);--glass-border:rgba(0,0,0,.06);--glass-hover:rgba(0,0,0,.04);
  --card-bg:linear-gradient(145deg,var(--s1) 0%,rgba(229,229,229,.6) 100%);
  --surface-elevated:linear-gradient(180deg,var(--s2) 0%,rgba(245,245,245,.95) 100%);
  --shadow-sm:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.04);
  --shadow-md:0 4px 12px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.04);
  --shadow-lg:0 8px 32px rgba(0,0,0,.08),0 2px 8px rgba(0,0,0,.04);
  --shadow-glow-gold:0 0 20px rgba(217,119,6,.06);
  --bd-subtle:rgba(0,0,0,.04);--bd-focus:rgba(59,130,246,.3);
  --shadow:0 2px 12px rgba(0,0,0,.06);
  color-scheme: light;
}

/* ═══ FONTS ═══ */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

/* ═══ RESET & BASE ═══ */
* { margin:0; padding:0; box-sizing:border-box }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--tx);
  overflow-x: hidden;
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'cv02','cv03','cv04','cv11';
  letter-spacing: -0.01em;
}

/* ═══ SHARED NAV ACTIVE TAB ═══ */
.hd-nav-btn.on,.hd-nav-link.on,a.on[href]{position:relative;color:#fff !important}
.hd-nav-btn.on::after,.hd-nav-link.on::after,a.on[href]::after{content:'';position:absolute;bottom:-1px;left:20%;right:20%;height:2px;background:var(--o,#FCA311);border-radius:2px;box-shadow:0 0 8px rgba(252,163,17,.4)}

/* Selection */
::selection { background:rgba(252,163,17,.25); color:var(--tx) }

/* Keyboard focus ring */
:focus-visible { outline:2px solid var(--bd-focus); outline-offset:2px; border-radius:inherit }
:focus:not(:focus-visible) { outline:none }

/* ═══ FORM CONTROLS ═══ */
button { font-family:var(--font); cursor:pointer; border:none; outline:none; position:relative }
input, select, textarea {
  font-family: var(--mono);
  outline: none;
  background: var(--input-bg);
  border: 1px solid var(--input-bd);
  border-radius: var(--r-sm);
  color: var(--tx);
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 500;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
input:focus, select:focus, textarea:focus {
  border-color: rgba(255,255,255,.25);
  box-shadow: 0 0 0 3px rgba(255,255,255,.06);
}
input:hover:not(:focus), select:hover:not(:focus), textarea:hover:not(:focus) {
  border-color: rgba(255,255,255,.15);
}

/* Custom select */
select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background-image: var(--select-arrow);
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
  cursor: pointer;
}
select::-ms-expand { display: none }

/* Number input — cleaner spinner */
input[type="number"] { -moz-appearance: textfield }
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { opacity: 0.4 }

/* Checkbox */
input[type="checkbox"] {
  width: 16px; height: 16px; accent-color: var(--b);
  cursor: pointer; border-radius: 4px; padding: 0;
}

/* ═══ SCROLLBAR ═══ */
::-webkit-scrollbar { width:6px; height:6px }
::-webkit-scrollbar-track { background:transparent }
::-webkit-scrollbar-thumb { background:var(--s3); border-radius:3px; border:1px solid transparent; background-clip:padding-box }
::-webkit-scrollbar-thumb:hover { background:var(--s4) }
::-webkit-scrollbar-corner { background:transparent }
* { scrollbar-width:thin; scrollbar-color:var(--s3) transparent }

/* ═══ TOAST ═══ */
.toast {
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(8px);
  padding:12px 20px; border-radius:10px;
  font:600 12px var(--font);
  z-index:9999; opacity:0; pointer-events:none;
  transition:opacity .25s, transform .25s var(--ease-out-expo);
  box-shadow:var(--shadow-lg);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.toast.show { opacity:1; transform:translateX(-50%) translateY(0) }
.toast.ok { background:var(--gb); color:var(--g); border:1px solid var(--g) }
.toast.err { background:var(--rb); color:var(--r); border:1px solid var(--r) }

/* ═══ SETTINGS MODAL ═══ */
.modal-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.6);
  z-index:1000; display:none; align-items:center; justify-content:center;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.modal-overlay.open { display:flex }
.modal {
  background:var(--s1); border:1px solid rgba(255,255,255,.08); border-radius:var(--r-xl);
  width:700px; height:600px; max-height:85vh; overflow:hidden;
  box-shadow:0 24px 80px rgba(0,0,0,.6);
  display:flex; flex-direction:column; position:relative;
}
.modal::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);
  pointer-events:none; z-index:1;
}
.modal-hdr {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px; border-bottom:1px solid var(--bd); flex-shrink:0;
}
.modal-hdr h2 { font:700 15px var(--font); color:var(--tx) }
.modal-close {
  width:28px; height:28px; border-radius:8px; background:var(--s3);
  color:var(--t2); font:700 14px var(--mono); display:flex; align-items:center;
  justify-content:center; cursor:pointer; border:1px solid var(--bd);
  transition:all var(--t-fast);
}
.modal-close:hover { color:var(--r); border-color:var(--r); background:var(--rd) }
.modal-body { padding:16px 20px; overflow-y:auto; flex:1; min-height:0 }
.modal-section { margin-bottom:20px }
.modal-section h3 {
  font:700 11px var(--mono); text-transform:uppercase;
  letter-spacing:.8px; color:var(--t3); margin-bottom:10px;
}
.modal-row { display:flex; gap:10px; margin-bottom:8px; align-items:center }
.modal-field { flex:1 }
.modal-field label {
  display:block; font:600 10px var(--font); color:var(--t3);
  text-transform:uppercase; letter-spacing:.5px; margin-bottom:4px;
}
.modal-field input, .modal-field select { width:100% }

/* Theme toggle pill */
.theme-toggle {
  display:inline-flex; background:var(--s3); border-radius:10px;
  padding:3px; border:1px solid var(--bd); gap:2px;
}
.theme-opt {
  padding:7px 16px; border-radius:8px; font:600 11px var(--font);
  color:var(--t3); cursor:pointer; transition:all var(--t-fast); border:none;
  background:transparent;
}
.theme-opt.active {
  background:var(--b); color:#fff;
  box-shadow:0 1px 4px rgba(96,165,250,.3), 0 1px 2px rgba(0,0,0,.2);
}

/* Account cards */
.acct-card {
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px; background:var(--s2); border:1px solid var(--bd);
  border-radius:10px; margin-bottom:6px; transition:all var(--t-fast);
  box-shadow:var(--shadow-sm);
}
.acct-card.active { border-color:var(--g); background:var(--gd) }
.acct-card:hover { border-color:var(--t3); box-shadow:var(--shadow-md) }
.acct-info { display:flex; align-items:center; gap:10px }
.acct-avatar {
  width:32px; height:32px; border-radius:10px;
  background:linear-gradient(135deg,var(--s3),var(--s4));
  display:flex; align-items:center; justify-content:center;
  font:700 13px var(--mono); color:var(--t2);
}
.acct-name { font:600 12px var(--font); color:var(--tx) }
.acct-bal { font:500 10px var(--mono); color:var(--t2) }
.acct-actions { display:flex; gap:4px }
.acct-btn {
  padding:4px 10px; border-radius:6px; font:600 10px var(--font);
  cursor:pointer; transition:all var(--t-fast); border:1px solid var(--bd);
  background:var(--s3); color:var(--t2);
}
.acct-btn:hover { color:var(--tx); border-color:var(--t3) }
.acct-btn.primary { background:var(--gd); color:var(--g); border-color:var(--gb) }
.acct-btn.danger { color:var(--r) }
.acct-btn.danger:hover { border-color:var(--r) }

/* Settings gear */
.settings-btn {
  width:28px; height:28px; border-radius:8px; background:var(--s3);
  border:1px solid var(--bd); color:var(--t2); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:all var(--t-fast);
}
.settings-btn:hover { color:var(--tx); border-color:var(--t3); transform:rotate(30deg) }
.settings-btn svg { width:14px; height:14px }

/* ═══ POLYMARKET CONNECTION ═══ */
.pm-conn-status { margin-bottom:10px }
.pm-conn-badge {
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 12px; border-radius:20px;
  font:600 11px var(--font);
  border:1px solid var(--bd);
}
.pm-conn-badge.connected { background:var(--gd); color:var(--g); border-color:var(--gb) }
.pm-conn-badge.disconnected { background:var(--s2); color:var(--t3); border-color:var(--bd) }
.pm-conn-dot { width:7px; height:7px; border-radius:50%; display:inline-block }
.pm-conn-badge.connected .pm-conn-dot {
  background:var(--g); box-shadow:0 0 6px var(--g);
  animation:livePulse 2s ease infinite;
}
.pm-conn-badge.disconnected .pm-conn-dot { background:var(--t3) }

.pm-wallet-card {
  background:var(--s2); border:1px solid var(--bd); border-radius:var(--r-lg);
  padding:16px; margin-top:8px;
}
.pm-wallet-row { display:flex; align-items:center; gap:12px }
.pm-wallet-icon {
  width:40px; height:40px; border-radius:var(--r-md);
  background:linear-gradient(135deg,var(--b),var(--p));
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; box-shadow:0 2px 8px rgba(96,165,250,.2);
}
.pm-wallet-icon svg { width:20px; height:20px; color:#fff }
.pm-wallet-addr {
  font:600 12px var(--mono); color:var(--tx);
  cursor:pointer; letter-spacing:.3px;
}
.pm-wallet-addr:hover { color:var(--b) }
.pm-wallet-bal { font:500 11px var(--font); color:var(--t2); margin-top:2px }
.pm-bal-value { color:var(--g); font-weight:700 }

.pm-connect-btn {
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; padding:12px; margin-top:10px;
  background:#fff; color:#000;
  border:none; border-radius:var(--r-md);
  font:700 13px var(--font); cursor:pointer;
  transition:all var(--t-fast);
}
.pm-connect-btn:hover { background:#e4e4e7; transform:translateY(-1px) }
.pm-connect-btn:disabled { opacity:.6; cursor:not-allowed; transform:none }

.pm-conn-error {
  margin-top:8px; padding:8px 12px; border-radius:8px;
  background:var(--rd); color:var(--r); border:1px solid var(--r);
  font:500 11px var(--font);
}
.pm-spinner {
  display:inline-block; width:14px; height:14px;
  border:2px solid rgba(255,255,255,.3); border-top-color:#fff;
  border-radius:50%; animation:spin .6s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg) } }

/* ═══ ANIMATIONS ═══ */
:root {
  --spring:cubic-bezier(0.34,1.56,0.64,1);
  --ease-out-expo:cubic-bezier(0.16,1,0.3,1);
  --ease-smooth:cubic-bezier(0.25,0.1,0.25,1);
}

/* Skeleton loader */
.skeleton {
  background:linear-gradient(90deg,var(--s2) 25%,rgba(27,42,74,.7) 37%,var(--s2) 63%);
  background-size:400% 100%;
  animation:shimmer 1.8s ease infinite;
  border-radius:6px;
}
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

@keyframes fadeSlideIn {
  from { opacity:0; transform:translateY(8px) }
  to { opacity:1; transform:translateY(0) }
}
@keyframes fadeIn { from { opacity:0 } to { opacity:1 } }
@keyframes scaleIn { from { opacity:0; transform:scale(.95) } to { opacity:1; transform:scale(1) } }
@keyframes pulseGlow {
  0%,100% { box-shadow:0 0 0 0 rgba(52,211,153,.3) }
  50% { box-shadow:0 0 0 4px rgba(52,211,153,.1) }
}
@keyframes livePulse { 0%,100% { opacity:1 } 50% { opacity:.4 } }
@keyframes breathe {
  0%,100% { opacity:1; transform:scale(1) }
  50% { opacity:.7; transform:scale(1.05) }
}

/* Button press */
button:active:not(:disabled) { transform:scale(0.97); transition-duration:0.06s }

/* Smooth modal */
.modal-overlay { transition:opacity .2s var(--ease-smooth) }
.modal { animation:scaleIn .2s var(--ease-out-expo) }

/* Stagger entrance */
.stagger-in > * { animation:fadeSlideIn 0.3s var(--ease-out-expo) both }
.stagger-in > *:nth-child(1) { animation-delay:0s }
.stagger-in > *:nth-child(2) { animation-delay:0.04s }
.stagger-in > *:nth-child(3) { animation-delay:0.08s }
.stagger-in > *:nth-child(4) { animation-delay:0.12s }
.stagger-in > *:nth-child(5) { animation-delay:0.16s }
.stagger-in > *:nth-child(6) { animation-delay:0.2s }
.stagger-in > *:nth-child(n+7) { animation-delay:0.24s }

/* ═══ PAGE TRANSITION ═══ */
.page-transition {
  position:fixed;inset:0;z-index:99999;pointer-events:none;
  background:var(--bg);opacity:0;
  transition:opacity .25s var(--ease-out-expo);
}
.page-transition.active { opacity:1;pointer-events:all }

/* ═══ RESIZE HANDLE ═══ */
.resize-h {
  width:4px;cursor:col-resize;background:var(--bd-subtle);
  flex-shrink:0;position:relative;z-index:5;
  transition:background var(--t-fast);
}
.resize-h:hover,.resize-h.dragging { background:var(--b); box-shadow:0 0 8px rgba(96,165,250,.2) }
.resize-h::after { content:'';position:absolute;inset:-2px -4px }
.resize-v {
  height:4px;cursor:row-resize;background:var(--bd-subtle);
  flex-shrink:0;position:relative;z-index:5;
  transition:background var(--t-fast);
}
.resize-v:hover,.resize-v.dragging { background:var(--b); box-shadow:0 0 8px rgba(96,165,250,.2) }
.resize-v::after { content:'';position:absolute;inset:-4px -2px }

/* ═══ SETTINGS TABS ═══ */
.settings-tabs{display:flex;flex:1;min-height:0;overflow:hidden}
.settings-nav{width:180px;background:var(--s2);border-right:1px solid var(--bd);padding:12px 8px;flex-shrink:0;display:flex;flex-direction:column;gap:2px;overflow-y:auto}
.settings-nav-item{padding:10px 14px;border-radius:8px;font:600 11px var(--font);color:var(--t2);cursor:pointer;transition:all var(--t-fast);display:flex;align-items:center;gap:10px;border:none;background:transparent;width:100%;text-align:left}
.settings-nav-item:hover{background:var(--s3);color:var(--tx)}
.settings-nav-item.active{background:rgba(96,165,250,.1);color:var(--b);border:1px solid rgba(96,165,250,.15)}
.settings-nav-icon{width:18px;height:18px;opacity:.6;flex-shrink:0}
.settings-nav-item.active .settings-nav-icon{opacity:1}
.settings-content{flex:1;overflow-y:auto;padding:0}
.settings-panel{display:none;padding:20px;animation:fadeIn .15s;overflow-y:auto;flex:1}
.settings-panel.active{display:block}
.settings-panel h3{font:700 14px var(--font);color:var(--tx);margin-bottom:16px;padding-bottom:8px;border-bottom:1px solid var(--bd)}
.settings-panel h4{font:600 11px var(--mono);text-transform:uppercase;letter-spacing:.6px;color:var(--t3);margin:16px 0 8px}
.settings-desc{font:400 10px var(--font);color:var(--t3);margin-bottom:12px;line-height:1.5}
.setting-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--bd)}
.setting-row:last-child{border:none}
.setting-label{font:500 12px var(--font);color:var(--tx)}
.setting-sublabel{font:400 10px var(--font);color:var(--t3);margin-top:2px}
.setting-control{display:flex;align-items:center;gap:6px}
.setting-toggle{width:38px;height:22px;border-radius:11px;background:var(--s3);border:1px solid var(--bd);cursor:pointer;position:relative;transition:all .25s var(--ease-smooth)}
.setting-toggle.on{background:rgba(52,211,153,.2);border-color:var(--g);box-shadow:0 0 8px rgba(52,211,153,.15)}
.setting-toggle::after{content:'';position:absolute;width:16px;height:16px;border-radius:50%;top:2px;left:2px;background:var(--t3);transition:all .25s var(--ease-smooth);box-shadow:0 1px 3px rgba(0,0,0,.3)}
.setting-toggle.on::after{left:18px;background:var(--g)}

/* Volume slider */
.volume-slider{-webkit-appearance:none;appearance:none;width:100px;height:4px;border-radius:2px;background:var(--s3);outline:none;cursor:pointer;border:none;padding:0}
.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--b);cursor:pointer;border:2px solid var(--s1);box-shadow:0 0 3px rgba(0,0,0,.3)}
.volume-slider::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--b);cursor:pointer;border:2px solid var(--s1);box-shadow:0 0 3px rgba(0,0,0,.3)}

/* ═══ DATA TABLE ═══ */
.price-data-table{width:100%;border-collapse:separate;border-spacing:0;font:500 12px var(--font);margin-bottom:8px;border:1px solid var(--bd);border-radius:var(--r-md);overflow:hidden}
.price-data-table th{font:600 10px var(--mono);text-transform:uppercase;letter-spacing:.6px;color:var(--t3);padding:12px 14px;background:var(--s2);border-bottom:1px solid var(--bd);text-align:left}
.price-data-table td{padding:10px 14px;border-bottom:1px solid var(--bd);color:var(--t2);font:500 12px var(--font)}
.price-data-table tr:last-child td{border-bottom:none}
.price-data-table tr:hover td{background:rgba(255,255,255,.02)}
.data-fetch-controls{background:var(--s2);border:1px solid var(--bd);border-radius:var(--r-lg);padding:16px;margin-top:8px}

/* ═══ CARD SYSTEM ═══ */
.card-elevated {
  background:var(--s1); border:1px solid var(--bd); border-radius:var(--r-lg);
  transition:all var(--t-medium); position:relative; overflow:hidden;
}
.card-elevated:hover { border-color:var(--bd2) }

/* Glass card */
.card-glass {
  background:var(--glass); border:1px solid var(--glass-border); border-radius:var(--r-lg);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}

/* ═══ BUTTON SYSTEM ═══ */
.btn-premium {
  padding:10px 20px; border-radius:var(--r-sm); font:600 13px var(--font);
  border:1px solid var(--bd); background:var(--s2);
  color:var(--tx); transition:all var(--t-fast);
}
.btn-premium:hover { background:var(--s3); border-color:var(--bd2) }

.btn-primary-gold {
  padding:10px 20px; border-radius:var(--r-sm); font:700 13px var(--font);
  background:#fff; color:#000; border:none;
  transition:all var(--t-fast);
}
.btn-primary-gold:hover { background:#e4e4e7; transform:translateY(-1px) }

.btn-ghost {
  background:transparent; border:1px solid var(--bd); color:var(--t2);
  padding:8px 16px; border-radius:var(--r-sm); font:600 12px var(--font);
  transition:all var(--t-fast);
}
.btn-ghost:hover { background:var(--glass-hover); border-color:var(--bd2); color:var(--tx) }