/* ============================================================
   CLAUDE-STYLE.CSS — REMAINING
   Everything EXCEPT: AI Chat Panel, Swap Panel, Wallet Setup,
   Token Select Panel, Wallet Dashboard
   Includes: Global tokens, header, sidebar, tables, cards,
   stat bar, notifications, misc components
   ============================================================ */

/*
 * claude-style.css — v1.0
 * Applies Claude AI interface design language:
 * shadows · border-radius · typography · spacing · borders
 * Loads LAST — overrides previous theme layers.
 * Color tokens already applied via tokens.css / style.css.
 */

/* ═══════════════════════════════════════════════════════════════
   GOOGLE FONTS — Claude uses Inter (already loaded) + system
   We keep Montserrat for brand identity but align size/weight
   system to match Claude's typographic scale.
═══════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

/* Design tokens (typography, spacing, radius, shadow scale) migrated to css/style.css */

/* ═══════════════════════════════════════════════════════════════
   GLOBAL BASE — Claude typography foundation
═══════════════════════════════════════════════════════════════ */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--ff-base) !important;
  font-size: var(--fs-base) !important;
  font-weight: var(--fw-normal);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-normal);
}

/* ═══════════════════════════════════════════════════════════════
   TOP BAR — Claude-style header
═══════════════════════════════════════════════════════════════ */
#top {
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--bb-border);
}

/* Nav tabs — Claude pill style */
.ptab, .chtab, .vtab {
  font-family: var(--ff-base) !important;
  font-size: var(--fs-xs) !important;
  font-weight: var(--fw-semibold) !important;
  letter-spacing: var(--ls-wide) !important;
  border-radius: var(--radius-md) !important;
  transition:
    background var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out) !important;
}

.ptab:hover, .chtab:hover, .vtab:hover {
  border: 1px solid var(--bb-border);
}

.ptab.on, .chtab.on, .vtab.on {
  border: 1px solid var(--bb-border);
}

/* Logo text */
.ltext {
  font-family: var(--ff-base) !important;
  font-size: var(--fs-xl) !important;
  font-weight: var(--fw-bold) !important;
  letter-spacing: var(--ls-tight) !important;
}

.lsub {
  font-family: var(--ff-base) !important;
  font-size: 9px !important;
  letter-spacing: var(--ls-wider) !important;
  font-weight: var(--fw-semibold) !important;
}

/* Search input */
#sinp {
  font-family: var(--ff-base) !important;
  font-size: var(--fs-sm) !important;
  border-radius: var(--radius-md) !important;
  border: var(--border-subtle) !important;
  border: 1px solid var(--bb-border)!important;
  transition:
    border-color var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out),
    width var(--duration-base) var(--ease-out) !important;
}

#sinp:focus {
  border: var(--border-default) !important;
  border: 1px solid var(--bb-border)!important;
  outline: none !important;
}

/* Register/connect button */
#rbtn {
  font-family: var(--ff-base) !important;
  font-size: var(--fs-xs) !important;
  font-weight: var(--fw-semibold) !important;
  letter-spacing: var(--ls-normal) !important;
  border-radius: var(--radius-md) !important;
  border: 1px solid var(--bb-border)!important;
  transition:
    box-shadow var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out) !important;
}

#rbtn:hover {
  border: 1px solid var(--bb-border)!important;
  transform: translateY(-1px) !important;
}

#rbtn:active {
  border: 1px solid var(--bb-border)!important;
  transform: translateY(0) !important;
}

/* ═══════════════════════════════════════════════════════════════
   SIDEBAR — Claude-style nav panel
═══════════════════════════════════════════════════════════════ */
#sb {
  border-right: var(--border-subtle) !important;
  backdrop-filter: blur(12px);
}

.slbl {
  font-family: var(--ff-base) !important;
  font-size: 10px !important;
  font-weight: var(--fw-semibold) !important;
  letter-spacing: var(--ls-wider) !important;
  text-transform: uppercase;
}

.eco {
  border-radius: var(--radius-lg) !important;
  transition:
    background var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out) !important;
}

.eco:hover {
  border: 1px solid var(--bb-border)!important;
}

.eco.on {
  border: 1px solid var(--bb-border)!important;
}

.enm {
  font-family: var(--ff-base) !important;
  font-size: var(--fs-sm) !important;
  font-weight: var(--fw-semibold) !important;
  letter-spacing: var(--ls-normal) !important;
}

.esub {
  font-family: var(--ff-base) !important;
  font-size: var(--fs-xs) !important;
  letter-spacing: var(--ls-normal) !important;
}

.tri {
  border-radius: var(--radius-md) !important;
  transition:
    background var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out) !important;
}

.tri:hover {
  border: 1px solid var(--bb-border)!important;
}

.trs {
  font-family: var(--ff-base) !important;
  font-size: var(--fs-sm) !important;
  font-weight: var(--fw-semibold) !important;
  letter-spacing: var(--ls-normal) !important;
}

.trp, .trc, .trk {
  font-family: var(--ff-base) !important;
  font-size: var(--fs-xs) !important;
}

/* ═══════════════════════════════════════════════════════════════
   STAT BAR — ticker-style info strip
═══════════════════════════════════════════════════════════════ */
.scl {
  font-family: var(--ff-base) !important;
  font-size: 10px !important;
  font-weight: var(--fw-semibold) !important;
  letter-spacing: var(--ls-wider) !important;
  text-transform: uppercase;
}

.scv {
  font-family: var(--ff-base) !important;
  font-size: var(--fs-md) !important;
  font-weight: var(--fw-semibold) !important;
  letter-spacing: var(--ls-tight) !important;
  line-height: var(--lh-tight) !important;
}

/* ═══════════════════════════════════════════════════════════════
   TABLE — Claude data table style
═══════════════════════════════════════════════════════════════ */
thead th {
  font-family: var(--ff-base) !important;
  font-size: 10px !important;
  font-weight: var(--fw-semibold) !important;
  letter-spacing: var(--ls-wider) !important;
  text-transform: uppercase;
  border-bottom: var(--border-subtle) !important;
}

td {
  font-family: var(--ff-base) !important;
  font-size: var(--fs-sm) !important;
  font-weight: var(--fw-normal);
  letter-spacing: var(--ls-normal) !important;
}

.pn {
  font-family: var(--ff-base) !important;
  font-size: var(--fs-sm) !important;
  font-weight: var(--fw-semibold) !important;
  letter-spacing: var(--ls-normal) !important;
}

.pd {
  font-family: var(--ff-base) !important;
  font-size: var(--fs-xs) !important;
  letter-spacing: var(--ls-normal) !important;
}

/* Badges in table */
.b {
  font-family: var(--ff-base) !important;
  font-size: 10px !important;
  font-weight: var(--fw-semibold) !important;
  letter-spacing: var(--ls-wide) !important;
  border-radius: var(--radius-xs) !important;
  padding: 2px 6px !important;
}

/* ═══════════════════════════════════════════════════════════════
   CARDS & SURFACES — Claude card system
═══════════════════════════════════════════════════════════════ */

/* Generic card pattern */
.card,
.tcard,
[class*="-card"],
[class*="card-"] {
  border-radius: var(--radius-lg) !important;
  border: 1px solid var(--bb-border)!important;
  border: var(--border-subtle) !important;
}

/* Token / trade card */
.tcard {
  border-radius: var(--radius-lg) !important;
  border: 1px solid var(--bb-border)!important;
  overflow: hidden;
}

.tcard-hdr {
  font-family: var(--ff-base) !important;
  font-size: var(--fs-sm) !important;
  font-weight: var(--fw-semibold) !important;
  letter-spacing: var(--ls-normal) !important;
}

.tcard-name {
  font-family: var(--ff-base) !important;
  font-size: var(--fs-md) !important;
  font-weight: var(--fw-semibold) !important;
  letter-spacing: var(--ls-tight) !important;
}

.tcard-sym {
  font-family: var(--ff-mono) !important;
  font-size: var(--fs-xs) !important;
  letter-spacing: var(--ls-wide) !important;
}

.tcs-lbl {
  font-family: var(--ff-base) !important;
  font-size: 10px !important;
  font-weight: var(--fw-semibold) !important;
  letter-spacing: var(--ls-wider) !important;
  text-transform: uppercase;
}

.tcs-val {
  font-family: var(--ff-base) !important;
  font-size: var(--fs-sm) !important;
  font-weight: var(--fw-semibold) !important;
}

.tcl-btn {
  font-family: var(--ff-base) !important;
  font-size: var(--fs-xs) !important;
  font-weight: var(--fw-semibold) !important;
  letter-spacing: var(--ls-wide) !important;
  transition:
    background var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out) !important;
}

/* ═══════════════════════════════════════════════════════════════
   NOTIFICATIONS / TOASTS
═══════════════════════════════════════════════════════════════ */
.nt,
.toast {
  font-family: var(--ff-base) !important;
  font-size: var(--fs-sm) !important;
  font-weight: var(--fw-medium) !important;
  border-radius: var(--radius-lg) !important;
  border: 1px solid var(--bb-border)!important;
  letter-spacing: var(--ls-normal) !important;
  border: var(--border-subtle) !important;
}

/* ═══════════════════════════════════════════════════════════════
   SECURITY BADGES
═══════════════════════════════════════════════════════════════ */
.sec-badge {
  font-family: var(--ff-base) !important;
  font-size: 10px !important;
  font-weight: var(--fw-semibold) !important;
  letter-spacing: var(--ls-wide) !important;
  border-radius: var(--radius-xs) !important;
}

/* ═══════════════════════════════════════════════════════════════
   MISC COMPONENTS
═══════════════════════════════════════════════════════════════ */

/* Pill labels */
.pill {
  font-family: var(--ff-base) !important;
  font-size: var(--fs-xs) !important;
  font-weight: var(--fw-medium) !important;
  border-radius: var(--radius-full) !important;
}

/* Sl-btn (route select) */
.sl-btn {
  font-family: var(--ff-base) !important;
  font-size: var(--fs-xs) !important;
  font-weight: var(--fw-semibold) !important;
  border-radius: var(--radius-full) !important;
  transition:
    background var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out) !important;
}

/* rbadge */
.rbadge {
  font-family: var(--ff-base) !important;
  font-size: var(--fs-xs) !important;
  font-weight: var(--fw-semibold) !important;
  border-radius: var(--radius-full) !important;
}

/* Mon footer */
#mon-foot {
  font-family: var(--ff-base) !important;
  font-size: var(--fs-xs) !important;
  border-top: var(--border-subtle) !important;
  border: 1px solid var(--bb-border)!important;
}

/* Verify / source badge */
.mon-badge {
  font-family: var(--ff-base) !important;
  font-size: var(--fs-xs) !important;
  font-weight: var(--fw-medium) !important;
  border-radius: var(--radius-sm) !important;
  border: var(--border-subtle) !important;
}

/* ── Spinner ── */
.sp {
  border-radius: var(--radius-full) !important;
}

/* ── Version tab ── */
.ver-tog {
  border-radius: var(--radius-md) !important;
  border: var(--border-subtle) !important;
  overflow: hidden;
}

/* ── Pair / price displays ── */
.lc-price, .lc-change, .lc-vol,
.t-price, .t-chg, .t-vol, .t-liq,
.box-bal, .ri-out, .i-val {
  font-family: var(--ff-base) !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--ls-tight) !important;
}

/* ═══════════════════════════════════════════════════════════════
   SCROLLBAR — thin, Claude style
═══════════════════════════════════════════════════════════════ */
::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.10);
  border-radius: var(--radius-full) !important;
  transition: background 0.2s;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.22);
}

/* ═══════════════════════════════════════════════════════════════
   FOCUS VISIBLE — Claude keyboard nav rings
═══════════════════════════════════════════════════════════════ */
:focus-visible {
  outline: 2px solid rgba(255,255,255,0.25) !important;
  outline-offset: 2px !important;
  border-radius: var(--radius-sm) !important;
}

._wpin_input:focus-visible {
  outline: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   SELECTION
═══════════════════════════════════════════════════════════════ */
::selection {
  background: rgba(255,255,255,0.15);
  color: inherit;
}

/* ═══════════════════════════════════════════════════════════════
   MINIMUM FONT SIZE — match Claude's floor (13px body, 11px min)
   Claude never renders interactive text below 11px
═══════════════════════════════════════════════════════════════ */

/* Override any sub-11px font sizes throughout the app */
.slbl, .trk, .lsub, .esub, .scl, .scs,
.b, .pg-sep, .src-tag, #src-tag,
.tcs-lbl, .tcard-sym, .tcl-btn,
.aq-section-label, .sec-badge,
.chtab, .vtab, .ptab, .pill,
.ai-s-lbl, .ai-settings-arr,
.mon-badge,
.pg-btn, .pg-info, .trc, .trp,
.ai-chip, .ai-s-save, .ai-s-clear,
thead th, .scl, .slbl {
  font-size: max(11px, 1em) !important;
}

/* Specific overrides for elements that were set below 11px */
.slbl         { font-size: 11px !important; }
.trk          { font-size: 11px !important; }
.b            { font-size: 11px !important; }
.scl          { font-size: 11px !important; }
.scs          { font-size: 11px !important; }
.tcs-lbl      { font-size: 11px !important; }
.aq-section-label { font-size: 11px !important; }
.sec-badge    { font-size: 11px !important; }
thead th      { font-size: 11px !important; }
td            { font-size: 13px !important; }

/* Body text floor */
body { font-size: 13px !important; }

/* ═══════════════════════════════════════════════════════════════
   GLOBAL 11px FLOOR — catches every sub-11px declaration
   across all CSS files. Single universal rule, loads last.
═══════════════════════════════════════════════════════════════ */
* {
  font-size: max(11px, 1em);
}

/* Re-assert explicit sizes that should stay above 11px */
body                { font-size: 13px !important; }
td                  { font-size: 13px !important; }

/* ═══════════════════════════════════════════════════════════════
   GIDO STAT CARDS — fix mobile !important overrides that
   break the 11px floor on small screens (≤640px)
═══════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .rz-stat-label  { font-size: 11px !important; }
  .rz-stat-meta   { font-size: 11px !important; }
  .rz-stat-value  { font-size: 16px !important; }
}

/* ═══════════════════════════════════════════════════════════════
   OVERRIDE ALL SUB-11px !important DECLARATIONS
   These rules load last and match specificity exactly.
═══════════════════════════════════════════════════════════════ */

/* swap-elite-v16.css:301 — token arrow */
.sdv5-swap#swap-card .sdv5-swap-box .tok-pick .tok-arr {
  font-size: 11px !important;
}

/* swapdex-ui-upgrade.css — hero eyebrow, sub, btn */
.hdr-hero-eyebrow                        { font-size: 11px !important; }
.hdr-hero-sub                            { font-size: 11px !important; }
.hdr-hero-btn                            { font-size: 11px !important; }

/* swapdex-ui-upgrade.css:508 — small screen hero sub */
@media (max-width: 768px) {
  .hdr-hero-sub                          { font-size: 11px !important; }
}

/* style.css — sidebar label, bottom nav btn, quick-actions label */

.nav-btn                                 { font-size: 11px !important; }
.aq-section-label                        { font-size: 11px !important; }

/* pakixto-theme.css — expanded sidebar labels */





/* swapdex-redesign.css — wallet assets head */
.sdv5-w-assets-head .ttl                 { font-size: 11px !important; }

/* gidoverse-redesign.css — stat label + meta (already done above, belt+braces) */
.rz-stat-label                           { font-size: 11px !important; }
.rz-stat-meta                            { font-size: 11px !important; }
/* ── Hide all scrollbars app-wide (keep scrolling functional) ── */
* {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
*::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}