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

:root {
  --bg: #081015;
  --bg-2: #0b151b;
  --panel: #101b21;
  --panel-2: #132129;
  --line: #223139;
  --line-soft: #19282f;
  --text: #edf3f4;
  --muted: #82939b;
  --muted-2: #566871;
  --lime: #c9ff3d;
  --lime-2: #a5d82b;
  --cyan: #39d7e5;
  --violet: #9f8cff;
  --red: #ff6f77;
  --amber: #ffbe55;
  --green: #54d69b;
  --shadow: 0 22px 60px rgba(0, 0, 0, .3);
  --radius: 16px;
}

* { box-sizing: border-box; }
html { color-scheme: dark; scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--bg); color: var(--text); font-family: Manrope, "PingFang SC", "Microsoft YaHei", sans-serif; font-size: 14px; line-height: 1.5; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid rgba(201,255,61,.7); outline-offset: 2px; }
button:disabled { opacity: .4; cursor: not-allowed; }
.icon { width: 19px; height: 19px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.muted { color: var(--muted); }
code { font-family: "DM Mono", Consolas, monospace; }

/* Login */
.login-page { min-height: 100vh; display: grid; grid-template-columns: minmax(500px, 1.35fr) minmax(450px, .85fr); background: #091116; }
.login-brand { position: relative; overflow: hidden; padding: 52px clamp(48px, 7vw, 110px); display: flex; flex-direction: column; justify-content: space-between; border-right: 1px solid #1e2b32; background:
  linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
  radial-gradient(circle at 68% 52%, rgba(201,255,61,.08), transparent 27%), #071015; background-size: 64px 64px, 64px 64px, auto, auto; }
.login-brand::after { content: ""; position: absolute; width: 1px; height: 100%; left: 22%; top: 0; background: linear-gradient(transparent, rgba(201,255,61,.15), transparent); }
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; color: var(--text); font-size: 19px; font-weight: 800; letter-spacing: -.5px; }
.brand b { color: var(--lime); font-weight: 700; }
.brand-large { z-index: 2; width: max-content; font-size: 21px; }
.logo-mark { width: 34px; height: 34px; border-radius: 10px 2px 10px 2px; display: inline-flex; align-items: center; justify-content: center; background: var(--lime); color: #101607; box-shadow: 0 0 32px rgba(201,255,61,.16); }
.logo-mark .icon { width: 21px; height: 21px; }
.logo-mark .icon svg { stroke-width: 2.4; }
.hero-copy { position: relative; z-index: 2; margin-top: 8vh; }
.eyebrow { display: flex; align-items: center; gap: 9px; color: var(--lime); font-size: 11px; letter-spacing: 2.2px; font-weight: 700; }
.eyebrow i { width: 24px; height: 1px; background: var(--lime); }
.hero-copy h1 { font-size: clamp(50px, 5vw, 78px); line-height: 1.07; letter-spacing: -4px; margin: 20px 0 25px; font-weight: 700; }
.hero-copy h1 em { color: var(--lime); font-style: normal; }
.hero-copy p { color: #94a5ab; font-size: 17px; line-height: 1.9; }
.login-proof { position: relative; z-index: 2; width: max-content; display: flex; gap: 20px; align-items: center; color: var(--muted); font-size: 11px; letter-spacing: .3px; }
.login-proof strong { color: var(--green); display: flex; align-items: center; gap: 7px; font-size: 11px; }
.login-proof strong i, .status-pill i, .eyebrow i:first-child { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; }
.power-orbit { position: absolute; width: 420px; height: 420px; right: -94px; top: 31%; border: 1px solid rgba(201,255,61,.12); border-radius: 50%; }
.power-orbit::before, .power-orbit::after { content: ""; position: absolute; border: 1px solid rgba(201,255,61,.08); border-radius: 50%; inset: 52px; }
.power-orbit::after { inset: 115px; }
.power-orbit > span { position: absolute; left: 138px; top: 138px; width: 142px; height: 142px; border-radius: 50%; color: var(--lime); background: rgba(201,255,61,.035); display: grid; place-items: center; box-shadow: inset 0 0 50px rgba(201,255,61,.06), 0 0 80px rgba(201,255,61,.04); }
.power-orbit > span .icon { width: 48px; height: 48px; }
.power-orbit > i { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 13px var(--lime); }
.power-orbit > i:nth-of-type(1) { top: 42px; left: 102px; }.power-orbit > i:nth-of-type(2) { right: 52px; bottom: 87px; }.power-orbit > i:nth-of-type(3) { left: 44px; bottom: 93px; background: var(--cyan); box-shadow: 0 0 13px var(--cyan); }
.login-panel { display: grid; place-items: center; padding: 48px; background: #0b151a; }
.login-box { width: min(400px, 100%); }
.form-kicker { color: var(--lime); font-weight: 700; font-size: 11px; letter-spacing: 1.8px; }
.login-box h2 { font-size: 34px; margin: 8px 0 5px; letter-spacing: -1.2px; }
.login-box > p { margin: 0 0 32px; }
.login-box form { display: grid; gap: 12px; }
label { color: #aebbc0; font-size: 12px; font-weight: 600; }
input, select, textarea { width: 100%; background: #0c171d; color: var(--text); border: 1px solid #293941; border-radius: 9px; padding: 12px 13px; transition: border-color .2s, box-shadow .2s; }
input:hover, select:hover, textarea:hover { border-color: #3a4d55; }
input:focus, select:focus, textarea:focus { border-color: rgba(201,255,61,.55); box-shadow: 0 0 0 3px rgba(201,255,61,.06); outline: none; }
input:disabled { opacity: .6; }
textarea { min-height: 82px; resize: vertical; }
.field-wrap { position: relative; }
.field-wrap input { padding-right: 112px; }
.field-action { position: absolute; right: 6px; top: 6px; height: 34px; padding: 0 10px; border: 0; background: #17252b; color: var(--lime); font-size: 11px; border-radius: 6px; cursor: pointer; }
.btn { min-height: 40px; padding: 0 15px; border-radius: 9px; border: 1px solid transparent; display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; font-weight: 700; font-size: 12px; transition: transform .15s, border-color .2s, background .2s; }
.btn:hover { transform: translateY(-1px); }
.btn.primary { background: var(--lime); color: #101607; box-shadow: 0 8px 24px rgba(201,255,61,.08); }
.btn.primary:hover { background: #d5ff69; }
.btn.soft { background: rgba(201,255,61,.08); border-color: rgba(201,255,61,.18); color: var(--lime); }
.btn.ghost { background: #111d23; border-color: #2a3941; color: #b6c3c8; }
.btn.danger-outline { color: var(--red); background: transparent; border-color: rgba(255,111,119,.25); }
.btn.full { width: 100%; margin-top: 8px; }
.btn.tiny { min-height: 31px; padding: 0 10px; border-radius: 7px; font-size: 10px; }
.demo-sep { display: flex; align-items: center; gap: 12px; color: var(--muted-2); font-size: 10px; margin: 26px 0 16px; }
.demo-sep::before, .demo-sep::after { content: ""; height: 1px; background: var(--line); flex: 1; }
.demo-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.terms { text-align: center; color: var(--muted-2) !important; font-size: 10px; margin: 25px 0 0 !important; }
.mobile-logo { display: none; }

/* Shell */
.app-shell { min-height: 100vh; display: flex; }
.sidebar { width: 244px; flex: 0 0 244px; position: fixed; z-index: 50; inset: 0 auto 0 0; display: flex; flex-direction: column; background: #091319; border-right: 1px solid var(--line-soft); }
.sidebar-top { min-height: 70px; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line-soft); }
.admin-badge { font: 500 8px "DM Mono"; color: var(--amber); border: 1px solid rgba(255,190,85,.25); background: rgba(255,190,85,.06); padding: 4px 6px; border-radius: 4px; letter-spacing: 1px; }
.sidebar nav { flex: 1; padding: 19px 11px; }
.nav-item, .role-switch { position: relative; width: 100%; height: 45px; display: flex; align-items: center; gap: 12px; border: 0; border-radius: 8px; padding: 0 12px; margin-bottom: 5px; background: transparent; color: #74868e; cursor: pointer; font-weight: 600; font-size: 12px; text-align: left; }
.nav-item:hover, .role-switch:hover { color: #b7c5ca; background: rgba(255,255,255,.025); }
.nav-item.active { color: var(--lime); background: rgba(201,255,61,.075); }
.nav-item.active::before { content: ""; position: absolute; left: -11px; width: 2px; height: 22px; background: var(--lime); box-shadow: 0 0 12px rgba(201,255,61,.5); }
.nav-count { margin-left: auto; min-width: 19px; height: 19px; display: grid; place-items: center; border-radius: 10px; background: rgba(255,190,85,.12); color: var(--amber); font-size: 9px; }
.sidebar-bottom { padding: 12px; border-top: 1px solid var(--line-soft); }
.mini-power { padding: 13px; margin-bottom: 8px; border: 1px solid rgba(201,255,61,.12); background: linear-gradient(135deg, rgba(201,255,61,.06), rgba(201,255,61,.01)); border-radius: 10px; }
.mini-power, .mini-power > div { display: flex; align-items: center; justify-content: space-between; }
.mini-power > div { gap: 8px; }
.mini-power > div > .icon { color: var(--lime); }
.mini-power span { display: grid; }
.mini-power small { color: var(--muted); font-size: 8px; }.mini-power strong { color: var(--lime); font-size: 14px; }
.mini-power button { border: 0; border-radius: 5px; background: var(--lime); color: #111; font-weight: 800; font-size: 9px; padding: 5px 8px; cursor: pointer; }
.role-switch { border: 1px solid var(--line-soft); height: 38px; font-size: 10px; }
.role-switch .icon:last-child { margin-left: auto; width: 14px; }
.user-chip { margin-top: 11px; display: grid; grid-template-columns: 34px 1fr 28px; align-items: center; gap: 9px; }
.avatar { display: inline-grid; place-items: center; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px; background: linear-gradient(135deg,#32454d,#18262d); color: #c2d0d4; font-weight: 700; font-size: 11px; }
.user-chip > span:nth-child(2) { min-width: 0; display: grid; }.user-chip strong { font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.user-chip small { color: var(--muted-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 8px; }
.user-chip button { border: 0; background: transparent; color: var(--muted-2); cursor: pointer; padding: 5px; }.user-chip button:hover { color: var(--red); }.user-chip button .icon { width: 15px; }
.main-wrap { min-width: 0; flex: 1; margin-left: 244px; }
.topbar { height: 70px; padding: 0 clamp(22px, 3vw, 40px); position: sticky; top: 0; z-index: 30; background: rgba(8,16,21,.88); backdrop-filter: blur(18px); border-bottom: 1px solid var(--line-soft); display: flex; align-items: center; justify-content: space-between; }
.topbar > div:first-of-type { font-size: 11px; }.crumb { color: var(--muted-2); margin-right: 6px; }
.topbar-actions { display: flex; align-items: center; gap: 12px; }
.status-pill, .date-pill { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 10px; }
.status-pill i { color: var(--green); }
.balance-pill { height: 34px; padding: 0 5px 0 10px; border-radius: 8px; border: 1px solid rgba(201,255,61,.2); background: rgba(201,255,61,.055); color: var(--lime); display: flex; align-items: center; gap: 7px; cursor: pointer; }
.balance-pill .icon { width: 15px; }.balance-pill span { font-weight: 800; font-size: 11px; }.balance-pill b { color: #101607; background: var(--lime); border-radius: 5px; padding: 4px 8px; font-size: 9px; }
.mobile-menu { display: none; }
.sidebar-close { display:none; width:30px; height:30px; place-items:center; border:1px solid var(--line); border-radius:7px; color:var(--muted); background:#101c22; cursor:pointer; }.sidebar-close .icon { width:14px; }
.content { width: min(1520px, 100%); margin: 0 auto; padding: 31px clamp(22px, 3vw, 42px) 60px; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 26px; }
.page-head h1 { margin: 0 0 5px; font-size: 25px; letter-spacing: -.8px; }.page-head p { margin: 0; color: var(--muted); font-size: 11px; }

/* Panels and metrics */
.panel, .metric { border: 1px solid var(--line-soft); background: linear-gradient(145deg, rgba(17,29,35,.98), rgba(12,23,29,.98)); border-radius: var(--radius); box-shadow: 0 1px 0 rgba(255,255,255,.015) inset; }
.panel { padding: 20px; margin-bottom: 17px; }
.metric-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; margin-bottom: 17px; }
.metric { position: relative; overflow: hidden; min-height: 145px; padding: 19px; }
.metric-icon { float: right; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 9px; color: var(--lime); background: rgba(201,255,61,.08); }
.metric-icon.cyan { color: var(--cyan); background: rgba(57,215,229,.08); }.metric-icon.violet { color: var(--violet); background: rgba(159,140,255,.08); }.metric-icon.green { color: var(--green); background: rgba(84,214,155,.08); }
.metric-icon .icon { width: 18px; }
.metric-label { color: var(--muted); font-size: 10px; margin-bottom: 18px; }
.hint { display: inline-grid; place-items: center; width: 13px; height: 13px; border: 1px solid var(--muted-2); border-radius: 50%; font-size: 8px; }
.metric > strong { display: block; margin-bottom: 7px; font-size: 26px; letter-spacing: -1px; line-height: 1; }.metric strong em { font-style: normal; font-size: 11px; color: var(--muted); margin-left: 4px; }
.metric small { color: var(--muted-2); font-size: 9px; }.metric small b { color: #a9babf; }.metric small.up { color: var(--green); }.metric small.up span { color: var(--muted-2); margin-left: 3px; }.danger-text { color: var(--red) !important; }
.power-card { border-color: rgba(201,255,61,.12); background: linear-gradient(135deg,rgba(201,255,61,.075),rgba(15,27,32,.96) 60%); }
.power-card > strong { color: var(--lime); text-shadow: 0 0 25px rgba(201,255,61,.08); }
.electric-line { position: absolute; bottom: -13px; right: -15px; width: 160px; height: 55px; opacity: .35; background: linear-gradient(135deg, transparent 0 28%, var(--lime) 29% 30%, transparent 31% 45%, var(--lime) 46% 47%, transparent 48%); transform: skewX(-20deg); }
.split-grid { display: grid; grid-template-columns: minmax(0,1.55fr) minmax(320px,.85fr); gap: 17px; }
.overview-row .panel { min-height: 310px; }
.panel-head { min-height: 37px; display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; margin-bottom: 17px; }
.panel-head h3 { font-size: 13px; margin: 0 0 3px; }.panel-head p { color: var(--muted-2); font-size: 9px; margin: 0; }
.legend { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 9px; }.legend i { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); }.legend i.cyan-dot { background: var(--cyan); margin-left: 8px; }.legend button { border: 1px solid var(--line); color: var(--muted); background: transparent; border-radius: 6px; padding: 5px 8px; margin-left: 8px; font-size: 9px; }
.chart-wrap { height: 228px; position: relative; padding: 0 5px 24px 30px; }.chart-wrap svg { width: 100%; height: 190px; overflow: visible; }.chart-wrap .grid-lines { stroke: #223139; stroke-width: 1; }.chart-wrap circle { fill: #0f1b20; stroke: var(--lime); stroke-width: 2; }.y-labels { position: absolute; left: 0; top: 9px; bottom: 36px; display: flex; flex-direction: column; justify-content: space-between; color: var(--muted-2); font-size: 8px; }.x-labels { display: flex; justify-content: space-between; color: var(--muted-2); font-size: 8px; padding-left: 5px; }
.live-dot { color: var(--lime); border: 1px solid rgba(201,255,61,.18); background: rgba(201,255,61,.06); font: 500 8px "DM Mono"; padding: 4px 6px; border-radius: 4px; }
.step { display: flex; gap: 11px; align-items: center; padding: 10px 0; }.step > b { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; color: var(--lime); background: rgba(201,255,61,.08); font-size: 9px; }.step > div { flex: 1; }.step strong { font-size: 10px; }.step p { margin: 1px 0 0; color: var(--muted-2); font-size: 8px; }
.text-btn { border: 0; background: transparent; color: var(--lime); display: inline-flex; align-items: center; gap: 3px; cursor: pointer; font-size: 9px; }.text-btn .icon { width: 13px; }
.endpoint { margin: 10px 0 11px; position: relative; background: #081217; border: 1px solid var(--line-soft); border-radius: 8px; padding: 9px 36px 9px 11px; display: grid; gap: 2px; }.endpoint small { color: var(--muted-2); font-size: 7px; letter-spacing: 1px; }.endpoint code { color: #b9c7ca; font-size: 9px; overflow: hidden; text-overflow: ellipsis; }.endpoint button { position: absolute; right: 7px; top: 13px; border: 0; background: transparent; color: var(--muted); cursor: pointer; }.endpoint button .icon { width: 14px; }

/* Tables */
.table-scroll { overflow-x: auto; margin: 0 -6px; }.table-scroll table { width: 100%; border-collapse: collapse; min-width: 800px; }.table-scroll th { color: var(--muted-2); font-weight: 600; font-size: 8px; text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }.table-scroll td { color: #9baab0; font-size: 9px; padding: 12px 10px; border-bottom: 1px solid var(--line-soft); white-space: nowrap; }.table-scroll tbody tr:last-child td { border-bottom: 0; }.table-scroll tbody tr:hover td { background: rgba(255,255,255,.012); }.table-scroll td code { color: #c3d0d3; font-size: 8px; }.prompt-cell { max-width: 200px; overflow: hidden; text-overflow: ellipsis; color: #b4c1c5 !important; }.badge { width: max-content; display: inline-flex; align-items: center; gap: 5px; border: 1px solid; border-radius: 5px; padding: 3px 6px; font-size: 8px; line-height: 1.25; font-weight: 700; white-space: nowrap; }.badge i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; }.badge.success { color: var(--green); border-color: rgba(84,214,155,.16); background: rgba(84,214,155,.055); }.badge.pending { color: var(--amber); border-color: rgba(255,190,85,.18); background: rgba(255,190,85,.055); }.badge.failed { color: var(--red); border-color: rgba(255,111,119,.18); background: rgba(255,111,119,.055); }.cost { color: var(--lime); display: inline-flex; align-items: center; gap: 2px; }.cost .icon { width: 12px; }.icon-btn { width: 28px; height: 28px; border: 1px solid transparent; background: transparent; border-radius: 6px; display: inline-grid; place-items: center; color: var(--muted); cursor: pointer; }.icon-btn:hover { border-color: var(--line); color: var(--lime); }.icon-btn .icon { width: 14px; }

/* Tokens, records, forms */
.notice { margin-bottom: 17px; padding: 14px 16px; display: flex; gap: 12px; align-items: flex-start; border: 1px solid rgba(57,215,229,.14); background: rgba(57,215,229,.045); border-radius: 10px; color: var(--cyan); }.notice > .icon { margin-top: 1px; }.notice strong { color: #b9dfe2; font-size: 10px; }.notice p { color: #728b92; font-size: 9px; margin: 2px 0 0; }.notice.warning { color: var(--amber); border-color: rgba(255,190,85,.15); background: rgba(255,190,85,.045); }.notice.warning strong { color: #dfc796; }.notice.compact { padding: 10px 12px; font-size: 9px; }
.search-box { width: 190px; height: 34px; display: flex; align-items: center; gap: 7px; padding: 0 9px; border: 1px solid var(--line); border-radius: 7px; background: #0b161b; }.search-box .icon { width: 13px; color: var(--muted-2); }.search-box input { padding: 0; border: 0; background: transparent; font-size: 9px; }.search-box input:focus { box-shadow: none; }.search-box.wide { width: min(330px,100%); }
.token-list { margin: 0 -6px; }.token-row { display: flex; align-items: center; gap: 13px; padding: 15px 7px; border-bottom: 1px solid var(--line-soft); }.token-row:last-child { border: 0; }.token-symbol { width: 38px; height: 38px; flex: 0 0 auto; border-radius: 9px; background: rgba(201,255,61,.06); color: var(--lime); display: grid; place-items: center; }.token-symbol .icon { width: 17px; }.token-main { flex: 1; min-width: 0; }.token-main > div { display: flex; align-items: center; gap: 8px; }.token-main strong { font-size: 11px; }.token-main code { display: block; margin: 4px 0 2px; color: #a7b6ba; font-size: 9px; }.token-main p { color: var(--muted-2); font-size: 8px; margin: 0; }.row-actions { display: flex; align-items: center; gap: 7px; }
.tips-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }.tips-grid > div { position: relative; padding: 16px; background: #0b161b; border: 1px solid var(--line-soft); border-radius: 9px; }.tips-grid b { position: absolute; right: 12px; top: 8px; color: rgba(201,255,61,.1); font: 500 24px "DM Mono"; }.tips-grid strong { display: block; font-size: 10px; }.tips-grid p { color: var(--muted-2); font-size: 8px; margin: 5px 0 0; }
.records-summary { display: grid; grid-template-columns: repeat(4,1fr); padding: 0 20px; margin-bottom: 17px; border: 1px solid var(--line-soft); background: #0e1a20; border-radius: 12px; }.records-summary > div { padding: 17px 20px; border-right: 1px solid var(--line-soft); }.records-summary > div:last-child { border: 0; }.records-summary span { display: block; color: var(--muted-2); font-size: 9px; }.records-summary strong { display: flex; align-items: center; gap: 3px; margin-top: 4px; font-size: 17px; }.records-summary strong .icon { width: 15px; color: var(--lime); }
.filter-bar { display: flex; align-items: center; gap: 9px; margin-bottom: 15px; }.filter-bar select { width: auto; min-width: 105px; height: 34px; padding: 0 28px 0 10px; font-size: 9px; }.filter-bar .btn { min-height: 34px; }
.pagination { margin-top: 14px; display: flex; justify-content: space-between; align-items: center; color: var(--muted-2); font-size: 8px; }.pagination div { display: flex; gap: 4px; }.pagination button { width: 26px; height: 26px; border: 1px solid var(--line); border-radius: 5px; background: #0c171c; color: var(--muted); font-size: 8px; }.pagination button.active { color: #111; border-color: var(--lime); background: var(--lime); }
.settings-grid { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(280px,.7fr); gap: 17px; }.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }.form-grid label, .form-panel label { display: grid; gap: 6px; }.form-panel input, .form-panel select { font-size: 10px; }.form-actions { display: flex; justify-content: flex-end; padding-top: 18px; margin-top: 18px; border-top: 1px solid var(--line-soft); }
.setting-row { display: flex; justify-content: space-between; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--line-soft); }.setting-row:last-child { border: 0; }.setting-row > div { display: flex; align-items: center; gap: 10px; }.setting-row > div > .icon { color: var(--lime); }.setting-row span span { display: grid; }.setting-row strong { font-size: 10px; }.setting-row small { color: var(--muted-2); font-size: 8px; }.support-card { text-align: center; }.support-card > span { width: 44px; height: 44px; margin: 0 auto 10px; display: grid; place-items: center; border-radius: 50%; color: var(--lime); background: rgba(201,255,61,.07); }.support-card p { color: var(--muted); font-size: 9px; }

/* Docs */
.docs-layout { display: grid; grid-template-columns: 150px minmax(0,1fr) 130px; gap: 20px; align-items: start; }.docs-nav, .toc { position: sticky; top: 92px; display: grid; gap: 3px; }.docs-nav strong { font-size: 9px; margin: 10px 0 5px; color: #b9c6c9; }.docs-nav a, .toc a { color: var(--muted-2); padding: 5px 7px; border-radius: 5px; font-size: 9px; cursor: pointer; }.docs-nav a.active { color: var(--lime); background: rgba(201,255,61,.06); }.toc { border-left: 1px solid var(--line); padding-left: 10px; }.toc span { font-size: 9px; color: #b8c5c8; margin-bottom: 4px; }.toc a { padding: 3px 0; }
.docs-body { padding: 32px 38px; }.docs-kicker { color: var(--lime); letter-spacing: 1.5px; font: 500 8px "DM Mono"; }.docs-body h2 { font-size: 27px; margin: 6px 0 10px; }.docs-body h3 { margin: 28px 0 8px; font-size: 14px; }.docs-body > p { color: #87979e; font-size: 10px; line-height: 1.8; }.docs-body > p code { color: var(--lime); background: rgba(201,255,61,.06); padding: 2px 4px; border-radius: 3px; }
.doc-callout { display: flex; gap: 11px; margin: 22px 0; padding: 14px; border-left: 2px solid var(--lime); background: rgba(201,255,61,.035); }.doc-callout > .icon { color: var(--lime); }.doc-callout strong { font-size: 10px; }.doc-callout p { color: var(--muted); font-size: 9px; margin: 3px 0 0; }
.code-block { overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: #071015; }.code-block > div { display: flex; align-items: center; height: 36px; padding: 0 12px; border-bottom: 1px solid var(--line-soft); }.code-dots { display: flex; gap: 5px; }.code-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--red); }.code-dots i:nth-child(2) { background: var(--amber); }.code-dots i:nth-child(3) { background: var(--green); }.code-block b { color: var(--muted); font-size: 8px; margin-left: 12px; }.code-block button { margin-left: auto; display: flex; gap: 5px; align-items: center; border: 0; background: transparent; color: var(--muted); font-size: 8px; cursor: pointer; }.code-block button .icon { width: 13px; }.code-block pre { color: #b4c5c8; padding: 19px; margin: 0; overflow-x: auto; font: 400 9px/1.8 "DM Mono"; }.endpoint-row { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); background: #091319; border-radius: 8px; }.method { color: #111; background: var(--lime); border-radius: 4px; padding: 3px 6px; font-size: 8px; font-weight: 800; }.endpoint-row code { flex: 1; color: #b8c7ca; font-size: 9px; }.endpoint-row button { color: var(--muted); background: transparent; border: 0; cursor: pointer; }

/* Admin */
.admin-row .panel { min-height: 300px; }.bar-chart { position: relative; height: 230px; display: flex; justify-content: space-around; gap: 13px; padding: 20px 8px 0; }.bar-grid { position: absolute; inset: 20px 0 27px; display: flex; flex-direction: column; justify-content: space-between; }.bar-grid i { display: block; height: 1px; background: var(--line-soft); }.bar-col { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 7px; text-align: center; }.bars { height: 174px; display: flex; align-items: flex-end; justify-content: center; gap: 4px; }.bars span { width: min(16px,32%); border-radius: 3px 3px 0 0; background: linear-gradient(var(--lime),#88b21e); }.bars span:last-child { background: linear-gradient(var(--cyan),#188c9c); opacity: .65; }.bar-col small { color: var(--muted-2); font-size: 8px; }
.admin-row .table-scroll table { min-width: 650px; }
.admin-row .table-scroll th, .admin-row .table-scroll td { padding-left: 7px; padding-right: 7px; }
.health-item { display: flex; align-items: center; gap: 11px; padding: 13px 0; border-bottom: 1px solid var(--line-soft); }.health-item:last-child { border: 0; }.health-icon { width: 37px; height: 37px; display: grid; place-items: center; border-radius: 9px; background: rgba(255,190,85,.06); color: var(--amber); }.health-icon.ok { color: var(--lime); background: rgba(201,255,61,.06); }.health-icon .icon { width: 17px; }.health-item div { flex: 1; }.health-item strong { font-size: 10px; }.health-item p { color: var(--muted-2); font-size: 8px; margin: 2px 0 0; }
.alert-customer { display: flex; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line-soft); }.alert-customer:last-child { border: 0; }.alert-customer > div { flex: 1; }.alert-customer strong { font-size: 9px; }.alert-customer p { color: var(--muted-2); font-size: 8px; margin: 1px 0; }.alert-customer > span:last-child { display: grid; text-align: right; }.alert-customer > span small { color: var(--muted-2); font-size: 8px; }.alert-customer > span b { color: var(--red); font-size: 11px; }
.customer-cell { display: flex; align-items: center; gap: 9px; }.customer-cell .avatar { width: 30px; height: 30px; }.customer-cell div { display: grid; }.customer-cell strong { color: #becbce; font-size: 9px; }.customer-cell small, .cell-sub { display: block; color: var(--muted-2); font-size: 7px; }.point-value { color: var(--lime); display: inline-flex; gap: 2px; align-items: center; }.point-value .icon { width: 12px; }
.channel-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 17px; }.channel-card { min-height: 280px; }.channel-top { display: flex; align-items: center; gap: 11px; }.channel-top > div { flex: 1; }.channel-top h3 { margin: 0; font-size: 12px; }.channel-top p { color: var(--muted-2); font-size: 8px; margin: 2px 0; }.channel-icon { width: 40px; height: 40px; display: grid; place-items: center; color: var(--lime); background: rgba(201,255,61,.08); border: 1px solid rgba(201,255,61,.14); border-radius: 10px; font-weight: 800; }.channel-card dl { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 17px 0; margin: 15px 0; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }.channel-card dl div { display: grid; }.channel-card dt { color: var(--muted-2); font-size: 8px; }.channel-card dd { margin: 3px 0 0; color: #b0bdc1; font-size: 10px; }.channel-actions { display: flex; gap: 8px; }
.empty-channel { min-height: 280px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px dashed #2c3d44; border-radius: var(--radius); background: rgba(16,27,33,.35); color: var(--muted); cursor: pointer; }.empty-channel:hover { border-color: rgba(201,255,61,.3); color: var(--lime); }.empty-channel > .icon { width: 27px; height: 27px; margin-bottom: 12px; }.empty-channel strong { font-size: 11px; }.empty-channel span { color: var(--muted-2); font-size: 8px; margin-top: 3px; }
.reserved { margin-top: 17px; }.reserved-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }.reserved-grid > div { display: grid; grid-template-columns: 110px 1fr auto; align-items: center; gap: 10px; padding: 12px; border: 1px solid var(--line-soft); border-radius: 8px; background: #0b161b; }.reserved-grid span { color: var(--muted-2); font-size: 8px; }.reserved-grid strong,.reserved-grid code { color: #acbabe; font-size: 9px; }
.pricing-layout { display: grid; grid-template-columns: 1.4fr .6fr; gap: 17px; }.exchange-box { display: flex; align-items: flex-end; gap: 13px; }.exchange-box label { flex: 1; position: relative; display: grid; gap: 5px; }.exchange-box label span { position: absolute; right: 11px; bottom: 12px; color: var(--muted); font-size: 9px; }.exchange-box > b { padding-bottom: 12px; color: var(--lime); }.form-hint { color: var(--muted-2); font-size: 8px; margin: 10px 0 0; }.margin-card { display: flex; align-items: center; gap: 15px; background: linear-gradient(135deg,rgba(201,255,61,.08),rgba(15,27,32,.96)); }.margin-card > span { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: rgba(201,255,61,.08); color: var(--lime); }.margin-card small { color: var(--muted); font-size: 8px; }.margin-card strong { display: block; color: var(--lime); font-size: 26px; }.margin-card p { color: var(--muted-2); font-size: 8px; margin: 1px 0; }
.price-table { display: grid; }.price-head,.price-row { display: grid; grid-template-columns: 1fr 1fr 1fr .8fr .5fr; align-items: center; gap: 12px; padding: 10px; border-bottom: 1px solid var(--line-soft); }.price-head { color: var(--muted-2); font-size: 8px; }.price-row:last-child { border: 0; }.price-row > strong { font-size: 10px; }.price-row label { position: relative; }.price-row label > .icon { position: absolute; z-index: 1; left: 8px; top: 9px; width: 12px; color: var(--lime); }.price-row input { width: 80px; padding: 7px 8px 7px 23px; font-size: 9px; }.margin-good { color: var(--green); font-size: 9px; }.switch { position: relative !important; width: 34px; height: 19px; display: inline-block; }.switch input { display: none; }.switch i { position: absolute; inset: 0; border-radius: 10px; background: #2a393f; cursor: pointer; transition: .2s; }.switch i::after { content: ""; position: absolute; width: 13px; height: 13px; top: 3px; left: 3px; background: #788991; border-radius: 50%; transition: .2s; }.switch input:checked + i { background: rgba(201,255,61,.25); }.switch input:checked + i::after { left: 18px; background: var(--lime); }.policy-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }.policy-grid > label { display: flex; justify-content: space-between; align-items: center; padding: 14px; border: 1px solid var(--line-soft); border-radius: 8px; background: #0b161b; }.policy-grid label span:first-child { display: grid; }.policy-grid strong { font-size: 9px; }.policy-grid small { color: var(--muted-2); font-size: 8px; margin-top: 2px; }
.audit-row { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; padding: 14px 5px; border-bottom: 1px solid var(--line-soft); }.audit-row:last-child { border: 0; }.audit-icon { width: 34px; height: 34px; display: grid; place-items: center; color: var(--cyan); background: rgba(57,215,229,.06); border-radius: 8px; }.audit-icon .icon { width: 15px; }.audit-row div strong { font-size: 10px; }.audit-row p { color: var(--muted); font-size: 8px; margin: 2px 0; }.audit-row p code { color: #a9b8bc; }.audit-row > span:last-child { display: grid; text-align: right; }.audit-row > span:last-child strong { font-size: 8px; color: var(--muted); }.audit-row > span:last-child small { font-size: 8px; color: var(--muted-2); }

/* Model catalog and upstream adapter */
.exchange-tag { min-height: 38px; padding: 0 12px; border: 1px solid rgba(201,255,61,.18); border-radius: 8px; background: rgba(201,255,61,.06); color: var(--lime); display: inline-flex; align-items: center; gap: 5px; font-weight: 700; font-size: 10px; }.exchange-tag .icon { width: 14px; }
.product-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 13px; margin-bottom: 17px; }
.product-card { position: relative; overflow: hidden; padding: 19px; border: 1px solid var(--line-soft); border-radius: 14px; background: linear-gradient(145deg,#111e24,#0c171d); }
.product-card::before { content:""; position:absolute; inset:0 0 auto; height:2px; background:var(--lime); opacity:.55; }.product-card.cyan::before { background:var(--cyan); }.product-card.violet::before { background:var(--violet); }.product-card.amber::before { background:var(--amber); }
.product-top { display:flex; justify-content:space-between; align-items:center; }.product-mark { width:37px; height:37px; display:grid; place-items:center; border-radius:9px; background:rgba(201,255,61,.07); color:var(--lime); }.product-card.cyan .product-mark { color:var(--cyan); background:rgba(57,215,229,.07); }.product-card.violet .product-mark { color:var(--violet); background:rgba(159,140,255,.07); }.product-card.amber .product-mark { color:var(--amber); background:rgba(255,190,85,.07); }
.product-tag { padding:3px 6px; border:1px solid var(--line); border-radius:5px; color:var(--muted); font-size:8px; }.product-card h3 { margin:17px 0 1px; font-size:15px; }.product-card > code { color:var(--muted-2); font-size:8px; }.product-card > p { min-height:32px; color:var(--muted); font-size:9px; }.product-price { display:flex; align-items:baseline; gap:5px; padding:10px 0 13px; border-bottom:1px solid var(--line-soft); }.product-price strong { color:var(--lime); font-size:28px; }.product-price span { color:var(--muted); font-size:8px; }.product-card ul { display:grid; gap:7px; list-style:none; padding:13px 0 5px; margin:0; color:#91a1a7; font-size:8px; }.product-card li { display:flex; align-items:center; gap:6px; }.product-card li .icon { width:12px; color:var(--green); }
.pricing-workbench { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(300px,.65fr); gap:17px; }.calculator-card > .panel-head > .icon { color:var(--lime); }.calc-grid { display:grid; grid-template-columns:1fr 1fr 1.1fr; align-items:end; gap:11px; }.calc-grid label { display:grid; gap:6px; }.check-label { min-height:42px; display:flex !important; flex-direction:row; align-items:center; gap:8px !important; padding:8px 10px; border:1px solid var(--line); border-radius:8px; background:#0b161b; }.check-label input { width:auto; accent-color:var(--lime); }.check-label span { display:grid; font-size:9px; }.check-label small { color:var(--muted-2); font-size:7px; }.calc-result { display:grid; grid-template-columns:1fr auto; align-items:center; gap:4px; padding:14px; margin-top:15px; border:1px solid rgba(201,255,61,.13); border-radius:9px; background:rgba(201,255,61,.045); }.calc-result > span { color:var(--muted); font-size:9px; }.calc-result strong { display:flex; align-items:center; color:var(--lime); font-size:16px; }.calc-result strong .icon { width:17px; }.calc-result small { grid-column:1/-1; color:var(--muted-2); font-size:7px; }
.rule-row { display:flex; align-items:center; gap:11px; padding:10px 0; border-bottom:1px solid var(--line-soft); }.rule-row:last-child { border:0; }.rule-row > b { width:24px; height:24px; display:grid; place-items:center; border-radius:50%; background:rgba(201,255,61,.07); color:var(--lime); font:500 8px "DM Mono"; }.rule-row > span { display:grid; }.rule-row strong { font-size:9px; }.rule-row small { color:var(--muted-2); font-size:8px; }
.asset-steps { display:grid; grid-template-columns:1fr 40px 1fr 40px 1fr; align-items:center; margin-bottom:13px; }.asset-steps article { min-height:82px; display:grid; grid-template-columns:20px 34px 1fr; gap:9px; align-items:center; padding:13px; border:1px solid var(--line-soft); border-radius:10px; background:#0e1a20; }.asset-steps article > b { color:var(--muted-2); font:500 8px "DM Mono"; }.asset-steps article > span { width:34px; height:34px; display:grid; place-items:center; color:var(--lime); background:rgba(201,255,61,.06); border-radius:8px; }.asset-steps strong { font-size:9px; }.asset-steps p { color:var(--muted-2); font-size:8px; margin:2px 0; }.asset-steps > i { height:1px; background:linear-gradient(90deg,var(--line),var(--lime),var(--line)); opacity:.3; }
.asset-limits { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:17px; }.asset-limits span { display:flex; align-items:center; gap:6px; padding:6px 9px; border:1px solid var(--line-soft); border-radius:6px; color:var(--muted); font-size:8px; }.asset-limits .icon { width:12px; color:var(--cyan); }
.asset-row { display:grid; grid-template-columns:42px 1fr auto 90px; align-items:center; gap:12px; padding:13px 5px; border-bottom:1px solid var(--line-soft); }.asset-row:last-child { border:0; }.asset-thumb { width:42px; height:42px; display:grid; place-items:center; border-radius:9px; color:var(--cyan); background:rgba(57,215,229,.07); }.asset-thumb.视频 { color:var(--violet); background:rgba(159,140,255,.07); }.asset-thumb.音频 { color:var(--amber); background:rgba(255,190,85,.07); }.asset-name { display:grid; min-width:0; }.asset-name strong { font-size:10px; }.asset-name code { color:var(--lime); font-size:8px; }.asset-name small { color:var(--muted-2); font-size:8px; }.asset-review { display:grid; justify-items:end; gap:3px; }.asset-review small { color:var(--muted-2); font-size:7px; }
.response-example { display:grid; gap:3px; margin-top:9px; padding:10px 12px; border-left:2px solid var(--green); background:rgba(84,214,155,.04); }.response-example small { color:var(--muted-2); font-size:7px; }.response-example code { color:#a8cbb9; font-size:8px; }
.route-card { min-height:280px; }.route-list { display:grid; gap:7px; }.route-list > div { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 10px; border:1px solid var(--line-soft); border-radius:7px; background:#0a151a; }.route-list span { color:var(--muted); font-size:8px; }.route-list code { color:#aab8bc; font-size:8px; }.configured { border-color:rgba(201,255,61,.13); }
.mapping-table,.model-price-table { display:grid; overflow-x:auto; }.mapping-head,.mapping-row { min-width:780px; display:grid; grid-template-columns:1.3fr 1.2fr .8fr .9fr .7fr; gap:12px; align-items:center; padding:10px; border-bottom:1px solid var(--line-soft); }.mapping-head { color:var(--muted-2); font-size:8px; }.mapping-row:last-child { border:0; }.mapping-row code { color:var(--lime); font-size:8px; }.mapping-row code.muted-code { color:var(--muted); }.mapping-row span { color:#9cabb0; font-size:9px; }.mapping-row strong { display:flex; align-items:center; color:#bdcbce; font-size:9px; }.mapping-row strong .icon { width:12px; color:var(--lime); }
.adapter-rules { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }.adapter-rules article { display:flex; gap:9px; padding:13px; border:1px solid var(--line-soft); border-radius:8px; background:#0a151a; }.adapter-rules article > .icon { color:var(--lime); width:16px; }.adapter-rules strong { font-size:9px; }.adapter-rules p { color:var(--muted-2); font-size:8px; margin:3px 0; }.adapter-rules code { color:#9db2b7; }
.model-price-head,.model-price-row { min-width:920px; display:grid; grid-template-columns:1.3fr .8fr .65fr .8fr .65fr .55fr .35fr; gap:10px; align-items:center; padding:10px; border-bottom:1px solid var(--line-soft); }.model-price-head { color:var(--muted-2); font-size:8px; }.model-price-row:last-child { border:0; }.model-price-row code { color:var(--lime); font-size:8px; }.model-price-row strong,.model-price-row span { font-size:9px; }.model-price-row label { position:relative; width:80px; }.model-price-row label > .icon { position:absolute; left:8px; top:9px; z-index:1; width:12px; color:var(--lime); }.model-price-row input { padding:7px 7px 7px 23px; font-size:9px; }
.upload-drop { min-height:120px; position:relative; display:flex !important; flex-direction:column; align-items:center; justify-content:center; gap:5px !important; border:1px dashed #3a4d55; border-radius:10px; background:#0a151a; cursor:pointer; }.upload-drop:hover { border-color:rgba(201,255,61,.35); }.upload-drop > .icon { color:var(--lime); width:25px; height:25px; }.upload-drop strong { font-size:10px; }.upload-drop small { color:var(--muted-2); font-size:8px; }.upload-drop input { position:absolute; inset:0; opacity:0; cursor:pointer; }.check-line { display:flex !important; flex-direction:row; align-items:center; gap:9px !important; padding:11px; border:1px solid var(--line-soft); border-radius:8px; }.check-line input { width:auto; accent-color:var(--lime); }.check-line span { display:grid; }.check-line strong { font-size:9px; }.check-line small { color:var(--muted-2); font-size:8px; }

/* Modal */
.modal-backdrop { position: fixed; z-index: 100; inset: 0; padding: 24px; display: grid; place-items: center; background: rgba(2,7,10,.76); backdrop-filter: blur(10px); animation: fadeIn .15s ease; }.modal-card { width: min(520px,100%); max-height: calc(100vh - 48px); overflow-y: auto; position: relative; padding: 25px; border: 1px solid #2b3b42; border-radius: 16px; background: #101c22; box-shadow: var(--shadow); animation: popIn .2s ease; }.modal-close { position: absolute; right: 15px; top: 15px; border: 0; background: transparent; color: var(--muted); cursor: pointer; }.modal-close .icon { width: 16px; }.modal-card > header { display: flex; gap: 12px; align-items: center; margin-bottom: 22px; padding-right: 25px; }.modal-symbol { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 10px; background: rgba(201,255,61,.08); color: var(--lime); }.modal-card header h2 { margin: 0; font-size: 17px; }.modal-card header p { color: var(--muted-2); font-size: 8px; margin: 2px 0; }.modal-card form { display: grid; gap: 14px; }.modal-card form label { display: grid; gap: 6px; }.modal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.secret-box { display: flex; align-items: center; gap: 8px; background: #071015; border: 1px solid rgba(201,255,61,.2); border-radius: 8px; padding: 12px; margin-bottom: 14px; }.secret-box code { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--lime); font-size: 10px; }.secret-box button { margin-left: auto; border: 0; background: transparent; color: var(--lime); cursor: pointer; }
.bank-card { padding: 15px; margin-bottom: 17px; background: linear-gradient(135deg,rgba(201,255,61,.07),rgba(57,215,229,.025)); border: 1px solid rgba(201,255,61,.13); border-radius: 10px; }.bank-card > span { color: var(--muted); font-size: 8px; }.bank-card > strong { display: block; margin: 3px 0 11px; font-size: 11px; }.bank-card dl { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 9px; }.bank-card dt { color: var(--muted-2); font-size: 7px; }.bank-card dd { color: #b5c3c6; font-size: 9px; margin: 2px 0; }.bank-card small { color: var(--amber); font-size: 7px; }.detail-status { display: flex; justify-content: space-between; align-items: center; padding: 13px; background: #0b161b; border-radius: 8px; }.detail-status strong { display: flex; align-items: center; gap: 3px; color: var(--lime); font-size: 11px; }.detail-status strong .icon { width: 14px; }.detail-list { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; margin: 17px 0; }.detail-list div { display: grid; padding-bottom: 9px; border-bottom: 1px solid var(--line-soft); }.detail-list div.full { grid-column: 1/-1; }.detail-list dt { color: var(--muted-2); font-size: 8px; }.detail-list dd { color: #b7c5c8; font-size: 10px; margin: 3px 0; }

/* Toast */
#toast-root { position: fixed; z-index: 200; top: 20px; right: 20px; display: grid; gap: 8px; }.toast { transform: translateX(120%); opacity: 0; min-width: 230px; display: flex; align-items: center; gap: 9px; padding: 12px 14px; color: #bad8c8; background: #12221d; border: 1px solid rgba(84,214,155,.25); border-radius: 9px; box-shadow: var(--shadow); transition: .25s; font-size: 10px; }.toast.show { transform: translateX(0); opacity: 1; }.toast .icon { color: var(--green); width: 16px; }.toast.error { color: #e2a7aa; background: #281719; border-color: rgba(255,111,119,.25); }.toast.error .icon { color: var(--red); }
@keyframes fadeIn { from { opacity: 0; } } @keyframes popIn { from { opacity: 0; transform: scale(.97) translateY(8px); } }

/* Responsive */
@media (max-width: 1100px) {
  .metric-grid { grid-template-columns: repeat(2,1fr); }
  .product-grid { grid-template-columns: repeat(2,1fr); }
  .adapter-rules { grid-template-columns: repeat(2,1fr); }
  .docs-layout { grid-template-columns: 135px minmax(0,1fr); }.toc { display: none; }
  .reserved-grid { grid-template-columns: 1fr; }
  .policy-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .login-page { grid-template-columns: 1fr; }.login-brand { display: none; }.login-panel { min-height: 100vh; }.mobile-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 48px; }.mobile-logo .logo-mark { width: 30px; height: 30px; }
  .sidebar { transform: translateX(-100%); box-shadow:none; transition: transform .25s; }.sidebar.open { transform: translateX(0); box-shadow:var(--shadow); }.sidebar-close { display:grid; }.admin-badge { margin-left:auto; margin-right:7px; }.main-wrap { margin-left: 0; }.mobile-menu { display: inline-grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--line); background: #101c22; border-radius: 7px; color: var(--muted); margin-right: 10px; }.topbar > div:first-of-type { margin-right: auto; }.split-grid, .settings-grid, .pricing-workbench { grid-template-columns: 1fr; }.docs-layout { grid-template-columns: 1fr; }.docs-nav { display: none; }
}
@media (max-width: 680px) {
  .content { padding: 22px 15px 50px; }.topbar { padding: 0 15px; }.status-pill,.date-pill { display: none; }.page-head { align-items: flex-start; }.page-head h1 { font-size: 21px; }.page-head > .btn { min-width: auto; }.metric-grid { grid-template-columns: 1fr 1fr; gap: 9px; }.metric { min-height: 130px; padding: 15px; }.metric > strong { font-size: 21px; }.metric-icon { width: 31px; height: 31px; }.records-summary { grid-template-columns: 1fr 1fr; padding: 0; }.records-summary > div { border-bottom: 1px solid var(--line-soft); }.records-summary > div:nth-child(2) { border-right: 0; }.filter-bar { flex-wrap: wrap; }.filter-bar .search-box { width: 100%; }.tips-grid,.channel-grid,.pricing-layout { grid-template-columns: 1fr; }.form-grid,.modal-grid { grid-template-columns: 1fr; }.token-row { align-items: flex-start; }.row-actions { flex-direction: column; }.docs-body { padding: 24px 20px; }.price-head,.price-row { grid-template-columns: .8fr 1fr 1fr .6fr; }.price-head span:last-child,.price-row > label:last-child { display: none; }.login-panel { padding: 25px; }.asset-steps { grid-template-columns:1fr; gap:8px; }.asset-steps > i { display:none; }.calc-grid { grid-template-columns:1fr; }.asset-row { grid-template-columns:42px 1fr auto; }.asset-row > .btn { grid-column:2/-1; }.adapter-rules { grid-template-columns:1fr; }
}
@media (max-width: 420px) {
  .metric-grid,.product-grid { grid-template-columns: 1fr; }.topbar .crumb { display: none; }.balance-pill b { display: none; }.page-head { flex-direction: column; }.page-head .btn { width: 100%; }.demo-actions { grid-template-columns: 1fr; }
}

/* Enterprise B2B console */
.account-invite { display:flex; align-items:flex-start; gap:9px; margin:18px 0 0; padding:11px 12px; border:1px solid rgba(57,215,229,.14); border-radius:9px; background:rgba(57,215,229,.035); }
.account-invite > .icon { width:16px; color:var(--cyan); margin-top:1px; }
.account-invite > span { display:grid; gap:2px; }.account-invite strong { font-size:9px; color:#b6c9ce; }.account-invite small { color:var(--muted-2); font-size:8px; line-height:1.5; }
.head-actions { display:flex; align-items:center; gap:8px; }
.balance-pill { cursor:default; }.balance-pill b { color:var(--lime); background:rgba(201,255,61,.08); }
.enterprise-access { min-height:310px; }
.contract-row { display:flex; align-items:center; justify-content:space-between; padding:8px 2px; border-bottom:1px solid var(--line-soft); }
.contract-row span { color:var(--muted-2); font-size:8px; }.contract-row strong { font-size:9px; color:#b8c5c9; }
.access-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.manager-line { display:grid; grid-template-columns:30px 1fr auto; align-items:center; gap:8px; margin-top:12px; padding-top:11px; border-top:1px solid var(--line-soft); }
.manager-line .avatar { width:30px; height:30px; }.manager-line > span:nth-child(2) { display:grid; }.manager-line small { color:var(--muted-2); font-size:7px; }.manager-line strong { font-size:8px; color:#aebdc1; }.manager-line button { border:0; color:var(--lime); background:transparent; cursor:pointer; font-size:8px; }

.project-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:13px; margin-bottom:17px; }
.project-card { padding:16px; border:1px solid var(--line-soft); border-radius:12px; background:linear-gradient(145deg,#111e24,#0c171d); }
.project-card.primary-project { border-color:rgba(201,255,61,.16); background:linear-gradient(145deg,rgba(201,255,61,.055),#0c171d 55%); }
.project-title { display:grid; grid-template-columns:34px 1fr auto; align-items:center; gap:9px; }
.project-title > span { width:34px; height:34px; display:grid; place-items:center; border-radius:8px; color:var(--lime); background:rgba(201,255,61,.07); }.project-title > span .icon { width:16px; }
.project-title > div { min-width:0; display:grid; }.project-title strong { font-size:10px; }.project-title code { color:var(--muted-2); font-size:7px; }
.project-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin:15px 0 12px; }
.project-stats span { display:grid; gap:2px; padding:9px; border:1px solid var(--line-soft); border-radius:7px; background:#0a151a; }.project-stats small { color:var(--muted-2); font-size:7px; }.project-stats strong { font-size:10px; color:#afbec2; }
.project-card footer { display:flex; justify-content:space-between; align-items:center; color:var(--muted-2); font-size:8px; }
.env-tag { padding:3px 6px; border-radius:5px; color:var(--lime); background:rgba(201,255,61,.07); font-size:7px; font-weight:700; }.env-tag.test { color:var(--cyan); background:rgba(57,215,229,.07); }

.usage-filter { margin-bottom:17px; padding:13px; border:1px solid var(--line-soft); border-radius:10px; background:#0e1a20; }
.usage-filter select { width:auto; min-width:145px; }.data-note { margin-left:auto; color:var(--muted-2); font-size:8px; }
.compact-metrics .metric { min-height:115px; }.compact-metrics .metric-label { margin-bottom:14px; }.compact-metrics .metric > strong { font-size:23px; }
.usage-layout { grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr); }
.usage-breakdown { display:grid; gap:17px; padding-top:5px; }.usage-breakdown > div { display:grid; grid-template-columns:1fr auto; gap:6px; }.usage-breakdown span { display:grid; }.usage-breakdown strong { font-size:9px; }.usage-breakdown small { color:var(--muted-2); font-size:7px; }.usage-breakdown b { color:var(--lime); font-size:10px; }
.usage-breakdown i { grid-column:1/-1; height:5px; overflow:hidden; border-radius:5px; background:#223038; }.usage-breakdown em { display:block; height:100%; border-radius:5px; background:linear-gradient(90deg,var(--lime),var(--cyan)); }
.inline-bar { width:100px; height:5px; overflow:hidden; border-radius:5px; background:#223038; }.inline-bar i { display:block; height:100%; background:var(--lime); }
.ledger-change { font-size:10px; }.ledger-change.positive { color:var(--green); }.ledger-change.negative { color:#c4d0d3; }

.client-selector { display:grid; grid-template-columns:1fr minmax(220px,.7fr) minmax(190px,.5fr); align-items:center; gap:18px; }
.client-selector > div { display:flex; align-items:center; gap:10px; }.client-selector > div > span:last-child { display:grid; }.client-selector small { color:var(--muted-2); font-size:7px; }.client-selector strong { font-size:10px; }.client-selector code { color:var(--muted); font-size:8px; }.client-selector label { display:grid; gap:5px; }

.channel-ops-list { display:grid; }.channel-ops-list > article { min-width:930px; display:grid; grid-template-columns:38px minmax(170px,1.2fr) .4fr .65fr .55fr .5fr .45fr .45fr auto; align-items:center; gap:12px; padding:13px 5px; border-bottom:1px solid var(--line-soft); }.channel-ops-list { overflow-x:auto; }.channel-ops-list > article:last-child { border:0; }
.channel-avatar { width:36px; height:36px; display:grid; place-items:center; border-radius:9px; color:var(--lime); background:rgba(201,255,61,.07); font-weight:800; }
.channel-ident { display:grid; }.channel-ident strong { font-size:9px; }.channel-ident code { color:var(--muted-2); font-size:7px; }.channel-ops-list article > div:not(.channel-ident):not(.row-actions) { display:grid; }.channel-ops-list article > div small { color:var(--muted-2); font-size:7px; }.channel-ops-list article > div strong { font-size:9px; }
.route-priority { width:max-content; padding:4px 7px; color:var(--cyan); border:1px solid rgba(57,215,229,.14); border-radius:5px; background:rgba(57,215,229,.04); font-size:7px; }
.channel-policy { grid-template-columns:1fr 1fr; }.adapter-rules.two { grid-template-columns:1fr 1fr; }
.policy-list { display:grid; }.policy-list > div { display:flex; justify-content:space-between; gap:15px; padding:11px 3px; border-bottom:1px solid var(--line-soft); }.policy-list > div:last-child { border:0; }.policy-list span { color:var(--muted-2); font-size:8px; }.policy-list strong,.policy-list code { color:#aebdc1; font-size:8px; text-align:right; }

.route-secrecy { display:grid; grid-template-columns:1fr 42px 1fr; align-items:stretch; gap:12px; margin-bottom:17px; }.route-secrecy > span { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:14px; border:1px solid var(--line-soft); border-radius:10px; background:#0e1a20; }.route-secrecy > span > .icon { color:var(--lime); }.route-secrecy strong { font-size:9px; margin-right:4px; }.route-secrecy code { padding:4px 6px; border-radius:4px; background:#081217; color:#9fb0b5; font-size:7px; }.route-secrecy > i { display:grid; place-items:center; color:var(--lime); }.route-secrecy > i .icon { width:18px; }
.route-policy-table { overflow-x:auto; }.route-policy-head,.route-policy-row { min-width:980px; display:grid; grid-template-columns:1.25fr .65fr 1fr 1fr .55fr .55fr .3fr; align-items:center; gap:10px; padding:10px; border-bottom:1px solid var(--line-soft); }.route-policy-head { color:var(--muted-2); font-size:8px; }.route-policy-row:last-child { border:0; }.route-policy-row code { color:var(--lime); font-size:8px; }.route-policy-row strong,.route-policy-row span { font-size:8px; }.route-policy-row select { padding:8px; font-size:8px; }
.method.get { color:var(--cyan); border-color:rgba(57,215,229,.2); background:rgba(57,215,229,.06); }

@media (max-width: 1100px) {
  .project-grid { grid-template-columns:1fr 1fr; }
  .client-selector { grid-template-columns:1fr 1fr; }.client-selector > div:last-child { grid-column:1/-1; }
  .channel-policy { grid-template-columns:1fr; }
}
@media (max-width: 900px) {
  .usage-layout { grid-template-columns:1fr; }
  .route-secrecy { grid-template-columns:1fr; }.route-secrecy > i { transform:rotate(90deg); }
}
@media (max-width: 680px) {
  .project-grid,.client-selector { grid-template-columns:1fr; }.client-selector > div:last-child { grid-column:auto; }
  .head-actions { width:100%; display:grid; grid-template-columns:1fr 1fr; }.head-actions .btn { width:100%; }
  .project-stats { grid-template-columns:1fr; }.project-stats span { grid-template-columns:1fr auto; }
  .usage-filter select { width:100%; }.data-note { margin-left:0; }
  .adapter-rules.two { grid-template-columns:1fr; }
}