/* ==========================================================================
   IndoLinessa Market — brand.css
   Lapisan terakhir setelah app.css, glass.css, theme.css.
   Tugasnya satu: menyamakan Market dengan bahasa visual IndoLinessa —
   ink gelap, satu aksen teal, garis rambut 1px, radius 8/12/16, tanpa
   gradien, tanpa blur kaca, tanpa bayangan tebal.
   Hanya warna, tipografi, garis, dan jarak. Tata letak tidak diubah.
   ========================================================================== */

@font-face {
  font-family: "Montserrat";
  src: url("/assets/fonts/montserrat-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg: #0a0b10;
  --bg-2: #0d0f15;
  --panel: #101219;
  --panel-2: #151821;
  --panel-3: #171a24;
  --input: #0d0f15;

  --ink-950: #08090d;
  --ink-900: #0a0b10;
  --ink-850: #0d0f15;
  --ink-800: #101219;
  --ink-750: #151821;
  --ink-700: #171a24;
  --line-1: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.16);

  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.16);

  --text: #f4f5f7;
  --muted: #a6adbc;
  --muted-2: #7b8291;
  --faint: #7b8291;

  --accent: #7fd8ce;
  --accent-hover: #a8e8e1;
  --accent-ink: #06201c;
  --accent-dim: rgba(127, 216, 206, 0.1);
  --accent-line: rgba(127, 216, 206, 0.28);
  --green: #5ce0a0;
  --green-dim: rgba(92, 224, 160, 0.1);
  --red: #ff7a8a;
  --red-dim: rgba(255, 122, 138, 0.1);
  --gold: #d9c27a;

  --shadow: none;
  --shadow-soft: none;
  --lift-1: none;
  --lift-2: none;

  --glass-bg: #101219;
  --glass-bg-hi: #151821;
  --glass-line: rgba(255, 255, 255, 0.08);
  --glass-line-hi: rgba(255, 255, 255, 0.16);
  --obsidian: #0a0b10;
  --obsidian-2: #0d0f15;

  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 16px;
  --r-xs: 8px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 16px;

  --font: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --display: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ---------- Dasar: datar, tanpa tekstur ---------- */
html { background: var(--bg); }
body {
  background: var(--bg);
  background-image: none;
  color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6, .brand-text b, .btn { font-family: var(--font); }
h1, h2, h3 { letter-spacing: -0.03em; }
h1 { line-height: 1.04; }
main { color: var(--text); }

.nav, .ticker, .mobile-nav, .card, .feature, .cta-panel, .market-card,
.mc-row, .hero-badge, .hero-chip, .stats-strip, .trust-strip, .btn,
.notif-panel, .nav-balance, .scroll-cue, .glass-panel, .panel,
.auto-card, .quest-card, .auth-card, .auth-aside, .podium-card,
.wallet-card, .kpi-card, .table-wrap table.data {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.card, .feature, .cta-panel, .market-card, .panel, .glass-panel,
.auto-card, .quest-card, .podium-card, .wallet-card, .kpi-card {
  background: var(--surface, #101219);
  background-image: none !important;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: none !important;
}

/* ---------- Navigasi ---------- */
.nav {
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  box-shadow: none !important;
}
body.is-scrolled .nav {
  background: var(--bg);
  border-bottom-color: var(--line-strong);
}
.nav-inner { max-width: 1240px; }
.brand img {
  width: auto;
  height: 34px;
  filter: none !important;
  border-radius: 0;
}
.foot-brand .brand img { height: 42px; }
.auth-aside .brand img { height: 30px; }
.brand-text b {
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--text);
}
.brand-text b em { font-style: normal; color: var(--text); }
.brand-text small {
  font-family: var(--mono);
  font-size: 0.5rem;
  letter-spacing: 0.26em;
  color: var(--accent);
  opacity: 1;
}
.nav-links a {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  border-radius: 0;
}
.nav-links a:hover { color: var(--text); }
.nav-links a.active {
  color: var(--text);
  background: none;
  box-shadow: none !important;
  border-bottom: 1px solid var(--accent);
}
.nav-balance {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: none !important;
}
.nav-balance span {
  font-family: var(--mono);
  font-size: 0.5rem;
  letter-spacing: 0.18em;
  color: var(--dim, #7b8291);
}
.nav-user .avatar,
.podium-avatar,
.avatar {
  background: var(--surface, #101219);
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--accent);
}
.icon-btn {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: transparent;
}
.icon-btn:hover { border-color: var(--line-strong); background: rgba(255, 255, 255, 0.04); }

/* ---------- Ticker ---------- */
.ticker {
  background: #08090d;
  border-bottom: 1px solid var(--line);
  box-shadow: none !important;
}
.ticker::after { background: none !important; }
.tick {
  border-right: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 0.66rem;
}
.tick b { color: var(--text); letter-spacing: 0.06em; }
.tick span { color: var(--muted); }

/* ---------- Tombol ---------- */
.btn {
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-weight: 600;
  font-size: 0.84rem;
  letter-spacing: -0.005em;
  box-shadow: none !important;
  background-image: none !important;
  filter: none !important;
}
.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.btn-primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--accent-ink);
}
.btn:not(.btn-primary):not(.btn-green):not(.btn-red):not(.btn-danger-soft) {
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--text);
}
.btn:not(.btn-primary):not(.btn-green):not(.btn-red):not(.btn-danger-soft):hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.4);
}
.btn-green {
  background: var(--green);
  border-color: var(--green);
  color: #04231a;
}
.btn-red {
  background: var(--red);
  border-color: var(--red);
  color: #2a0509;
}
.btn-soft {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line);
  color: var(--text);
}

/* ---------- Badge & status ---------- */
.badge {
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 0.56rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: transparent;
}
.badge-ok { color: var(--green); border: 1px solid rgba(92, 224, 160, 0.32); background: rgba(92, 224, 160, 0.06); }
.badge-info { color: var(--accent); border: 1px solid var(--accent-line); background: var(--accent-dim); }
.badge-warn { color: var(--gold); border: 1px solid rgba(217, 194, 122, 0.3); background: rgba(217, 194, 122, 0.06); }
.badge-bad { color: var(--red); border: 1px solid rgba(255, 122, 138, 0.32); background: rgba(255, 122, 138, 0.06); }
.badge-muted { color: var(--muted); border: 1px solid var(--line); background: transparent; }
.live-dot { background: var(--green); box-shadow: none !important; }

/* ---------- Hero landing ---------- */
.hero {
  background: var(--bg);
  background-image: none !important;
  border-bottom: 1px solid var(--line);
  padding: clamp(56px, 7vw, 96px) 0 clamp(44px, 5vw, 64px);
}
.hero-grid { gap: clamp(32px, 5vw, 64px); }
.hero-badge {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  box-shadow: none !important;
}
.hero-badge .pulse { background: var(--accent); box-shadow: none !important; }
.hero h1 {
  font-size: clamp(2.25rem, 4.1vw, 3.35rem);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1.02;
}
.hero h1 .grad-text,
.grad-text {
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--accent);
}
.hero .lead {
  color: var(--muted);
  font-size: clamp(0.95rem, 1.2vw, 1.02rem);
  line-height: 1.75;
  max-width: 52ch;
}
.hero-note { color: var(--dim, #7b8291); font-size: 0.78rem; }
.hero-chip {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  box-shadow: none !important;
}
.hero-chip b { color: var(--text); }

/* Kartu market besar di hero */
.hero-visual::before { display: none !important; }
.market-card {
  background: #0d0f15;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  box-shadow: none !important;
}
.market-card-top { border-bottom: 1px solid var(--line); }
.market-card-price .price {
  font-family: var(--mono);
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--text);
}
.market-card-rows .mc-row { border-bottom: 1px solid var(--line); }
.market-card-rows .mc-row:hover { background: rgba(255, 255, 255, 0.03); }
.market-card-rows .sym { font-family: var(--mono); letter-spacing: 0.02em; }
.market-card-rows .nm { color: var(--dim, #7b8291); }
.market-card-foot { border-top: 1px solid var(--line); color: var(--dim, #7b8291); }
.scroll-cue { background: transparent; border-color: var(--line); box-shadow: none !important; }

/* ---------- Strip statistik ---------- */
.stats-strip {
  background: var(--surface, #101219);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: none !important;
}
.stats-strip > div { border-right: 1px solid var(--line); }
.stats-strip .l {
  font-family: var(--mono);
  font-size: 0.55rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dim, #7b8291);
}
.stats-strip .v { font-family: var(--mono); font-weight: 400; letter-spacing: -0.01em; }

/* ---------- Section head ---------- */
.eyebrow {
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}
.eyebrow .chapter { color: var(--dim, #7b8291); }
.section-head h2 { font-size: clamp(1.7rem, 2.9vw, 2.4rem); font-weight: 700; letter-spacing: -0.035em; }
.section-head p { color: var(--muted); }
.section-head.center { text-align: center; }

/* ---------- Tabel ---------- */
.table-wrap { border-radius: var(--r-md); }
table.data { font-family: var(--font); }
table.data thead th {
  font-family: var(--mono);
  font-size: 0.54rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim, #7b8291);
  border-bottom: 1px solid var(--line-strong);
}
table.data tbody td { border-bottom: 1px solid var(--line); }
table.data tbody tr:hover { background: rgba(255, 255, 255, 0.025); }
table.data .num { font-family: var(--mono); font-size: 0.8rem; }
.asset-cell .sym { font-family: var(--mono); letter-spacing: 0.02em; }
.asset-cell .nm { color: var(--dim, #7b8291); }
.coin-icon { border-radius: 50%; }

/* ---------- Feature, trust, step ---------- */
.feature .ico {
  background: transparent !important;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--accent);
}
.feature .ico svg { stroke: var(--accent) !important; }
.feature h3 { font-size: 1rem; font-weight: 700; letter-spacing: -0.02em; }
.feature p { color: var(--muted); }
.trust-strip {
  background: var(--surface, #101219);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: none !important;
}
.trust-item b { font-weight: 600; }
.trust-item span { color: var(--dim, #7b8291); }
.trust-item .t-ico svg { stroke: var(--accent) !important; }
.step {
  background: var(--surface, #101219);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.step h3 { font-size: 0.98rem; }
.step p { color: var(--muted); }
.code-pill {
  background: #0d0f15;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 0.76em;
  color: var(--accent);
}
.cta-panel {
  background: #101219;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
}
.cta-panel h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); }

/* ---------- Market list ---------- */
.market-hero {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.market-stats .stat-chip {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.market-toolbar .search-box input,
.toolbar select,
input[type="text"], input[type="search"], input[type="number"],
input[type="password"], input[type="email"], input[type="datetime-local"],
select, textarea {
  background: var(--input);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: var(--font);
  box-shadow: none !important;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--accent-line);
  outline: 2px solid rgba(127, 216, 206, 0.22);
  outline-offset: 1px;
  box-shadow: none !important;
}
.mm-card { border-bottom: 1px solid var(--line); }
.mm-sym { font-family: var(--mono); }
.mm-name { color: var(--dim, #7b8291); }
.info-card .info-ico { background: transparent; border: 1px solid var(--line); color: var(--accent); }
.info-card .info-ico svg { stroke: var(--accent) !important; }

/* ---------- Terminal trade ---------- */
.symbol-bar .symbol-chip {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-family: var(--mono);
  font-size: 0.66rem;
}
.symbol-bar .symbol-chip.active {
  border-color: var(--accent-line);
  background: var(--accent-dim);
  color: var(--text);
}
.trade-head { border-bottom: 1px solid var(--line); }
.trade-price { font-family: var(--mono); font-weight: 400; letter-spacing: -0.02em; }
.trade-stats .s { border-left: 1px solid var(--line); }
.trade-stats .s span { font-family: var(--mono); font-size: 0.54rem; letter-spacing: 0.14em; color: var(--dim, #7b8291); }
.intervals button, .ind-btn, .seg button, .quick button {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 6px;
  min-height: 30px;
  padding: 0 10px;
  font-family: var(--mono);
  font-size: 0.6rem;
  color: var(--muted);
}
.intervals button.active, .ind-btn.active, .seg button.active, .seg button.active,
.tabs button.active, .tabs button[aria-selected="true"] {
  background: var(--accent-dim);
  border-color: var(--accent-line);
  color: var(--text);
}
.ob-head { font-family: var(--mono); font-size: 0.52rem; letter-spacing: 0.14em; color: var(--dim, #7b8291); border-bottom: 1px solid var(--line); }
.ob-row { font-family: var(--mono); font-size: 0.68rem; border-bottom: 1px solid rgba(255, 255, 255, 0.04); }
.ob-row .bar { background: rgba(255, 255, 255, 0.06); }
.ask .bar { background: rgba(255, 122, 138, 0.16); }
.bid .bar { background: rgba(92, 224, 160, 0.16); }
.ob-mid { border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); }
.ob-mid .mid { font-family: var(--mono); font-size: 1rem; color: var(--text); }
.trade-list .trade-line { font-family: var(--mono); font-size: 0.66rem; border-bottom: 1px solid rgba(255, 255, 255, 0.04); }
.order-form .tabs { border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.order-form .tabs button { border: 0; border-radius: 0; font-family: var(--font); font-weight: 600; }
.order-form .tabs button.buy { color: var(--green); }
.order-form .tabs button.sell { color: var(--red); }
.order-form .tabs button.active.buy { background: rgba(92, 224, 160, 0.14); color: var(--green); }
.order-form .tabs button.active.sell { background: rgba(255, 122, 138, 0.14); color: var(--red); }
.order-meta, .fee-note { font-family: var(--mono); font-size: 0.62rem; color: var(--dim, #7b8291); }
.auto-card .auto-ico { background: transparent; border: 1px solid var(--line); color: var(--accent); }
.auto-card .auto-ico svg { stroke: var(--accent) !important; }
.auto-item { border-bottom: 1px solid var(--line); }

/* ---------- Wallet / portfolio / rewards ---------- */
.wallet-hero, .wallet-card, .reward-hero, .redeem-card, .pnl-headline, .my-rank, .podium-card {
  box-shadow: none !important;
  background-image: none !important;
}
.wallet-total, .big-number, .reward-amount, .podium-value, .my-rank-pos {
  font-family: var(--mono);
  font-weight: 400;
  letter-spacing: -0.02em;
}
.stat-label, .wallet-sub, .desc { color: var(--dim, #7b8291); }
.kpi-card .stat-value { font-family: var(--mono); font-weight: 400; }
.alloc-bar { background: rgba(255, 255, 255, 0.06); border-radius: 3px; }
.alloc-bar span { border-radius: 3px; }
.progress { background: rgba(255, 255, 255, 0.06); border-radius: 3px; }

/* ---------- Leaderboard ---------- */
.podium-card, .podium-medal, .medal {
  background-image: none !important;
  box-shadow: none !important;
}
.podium-card.rank-1 { border-color: var(--accent-line); }
.podium-medal { background: #0d0f15; border: 1px solid var(--line-strong); border-radius: 50%; }
.rank-cell { font-family: var(--mono); }

/* ---------- Login / auth ---------- */
.auth-shell {
  background: #0d0f15;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  box-shadow: none !important;
}
.auth-aside {
  background: #101219;
  border-right: 1px solid var(--line);
}
.auth-mini-chart span { background: rgba(255, 255, 255, 0.08); border-radius: 2px; }
.auth-mini-chart span:nth-last-child(2) { background: var(--accent); }
.auth-point .tick { color: var(--accent); }
.auth-steps .auth-step .n {
  font-family: var(--mono);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--muted);
}
.auth-card h1 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
.code-input { font-family: var(--mono); letter-spacing: 0.28em; text-align: center; }
.alert { border-radius: var(--radius-sm); background-image: none !important; box-shadow: none !important; }
.alert-warn { border: 1px solid rgba(217, 194, 122, 0.28); background: rgba(217, 194, 122, 0.05); color: #e8dcc0; }
.alert-info { border: 1px solid var(--accent-line); background: var(--accent-dim); color: var(--text); }
.alert-bad { border: 1px solid rgba(255, 122, 138, 0.3); background: rgba(255, 122, 138, 0.05); }

/* ---------- Guide ---------- */
.guide-nav a { border-radius: var(--radius-sm); }
.guide-nav a.active { background: var(--accent-dim); color: var(--text); border-color: var(--accent-line); }
.callout { border-radius: var(--radius-sm); background-image: none !important; }
.callout.warn { border: 1px solid rgba(217, 194, 122, 0.26); background: rgba(217, 194, 122, 0.05); }

/* ---------- Footer & mobile nav ---------- */
footer, .foot {
  background: #08090d;
  border-top: 1px solid var(--line);
}
.foot-col h4 {
  font-family: var(--mono);
  font-size: 0.55rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dim, #7b8291);
}
.foot-col a { color: var(--muted); }
.foot-col a:hover { color: var(--text); }
.foot-bottom {
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.04em;
  color: var(--dim, #7b8291);
  border-top: 1px solid var(--line);
}
.mobile-nav {
  background: #08090d;
  border-top: 1px solid var(--line);
  box-shadow: none !important;
}
.mnav-item span { font-family: var(--mono); font-size: 0.52rem; letter-spacing: 0.1em; text-transform: uppercase; }
.mnav-item.active { color: var(--accent); }

/* ---------- Toast & skeleton ---------- */
.toast {
  background: #101219;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  box-shadow: none !important;
}
.skeleton { background: rgba(255, 255, 255, 0.05); }
.empty { color: var(--dim, #7b8291); }

/* ---------- Fokus keyboard ---------- */
a:focus-visible, button:focus-visible, .btn:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: none !important;
}