:root {
  --bg: #fff7f1;
  --bg2: #fffdfb;
  --surface: rgba(255,255,255,.9);
  --surface-solid: #ffffff;
  --soft: #fff3ea;
  --border: rgba(34, 28, 24, .10);
  --border-strong: rgba(229, 106, 74, .24);
  --text: #1e1b19;
  --muted: #7c7169;
  --primary: #e56a4a;
  --primary2: #ff9b61;
  --green: #16a34a;
  --red: #dc2626;
  --amber: #d97706;
  --shadow: 0 22px 70px rgba(101, 48, 28, .12);
  --shadow-soft: 0 12px 36px rgba(101, 48, 28, .08);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at top left, rgba(255,155,97,.26), transparent 32rem),
    radial-gradient(circle at top right, rgba(229,106,74,.14), transparent 30rem),
    linear-gradient(180deg, var(--bg) 0%, var(--bg2) 46%, #fff 100%);
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(30,27,25,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(30,27,25,.035) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.75), transparent 62%);
}

.page { position: relative; z-index: 1; width: min(1080px, calc(100% - 36px)); margin: 0 auto; padding: 30px 0 56px; }
.hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(300px, .75fr); align-items: end; gap: 28px; padding: 20px 0 26px; }
.hero-copy { min-width: 0; }
.brand { display: inline-flex; gap: 8px; align-items: center; padding: 8px 13px; color: #b9472a; background: rgba(229,106,74,.13); border: 1px solid rgba(229,106,74,.18); border-radius: 999px; font-weight: 900; box-shadow: 0 10px 24px rgba(229,106,74,.08); }
h1 { max-width: 720px; font-size: clamp(40px, 6vw, 72px); line-height: .95; margin: 18px 0 12px; letter-spacing: -.065em; }
h2 { margin: 0 0 7px; font-size: 20px; letter-spacing: -.02em; }
h3 { margin: 0; }
p { color: var(--muted); margin: 0; line-height: 1.6; }
.hero p { max-width: 620px; font-size: 17px; }
.hero-points { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.hero-points span { display: inline-flex; align-items: center; gap: 7px; padding: 9px 11px; border: 1px solid var(--border); border-radius: 999px; background: rgba(255,255,255,.7); color: var(--muted); font-size: 13px; font-weight: 800; }
.hero-points span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), var(--primary2)); }
.hero-panel { padding: 18px; border-radius: 28px; border: 1px solid rgba(255,255,255,.75); background: linear-gradient(145deg, rgba(255,255,255,.78), rgba(255,244,236,.76)); box-shadow: var(--shadow); backdrop-filter: blur(18px); }
.hero-panel-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.hero-panel-title { font-weight: 950; letter-spacing: -.02em; }
.status-dot { display: inline-flex; align-items: center; gap: 7px; color: var(--green); font-size: 12px; font-weight: 900; }
.status-dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 6px rgba(22,163,74,.10); }
.hero-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hero-stat { padding: 14px; border-radius: 18px; background: rgba(255,255,255,.78); border: 1px solid var(--border); }
.hero-stat small { display: block; color: var(--muted); font-size: 12px; margin-bottom: 4px; }
.hero-stat b { font-size: 22px; letter-spacing: -.035em; }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: 26px; padding: 24px; box-shadow: var(--shadow-soft); backdrop-filter: blur(18px); }
.stack { display: grid; gap: 16px; }
.search-card { margin-bottom: 16px; padding: 12px; border-color: rgba(229,106,74,.18); box-shadow: 0 24px 70px rgba(229,106,74,.14); }
.search-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; border-radius: 20px; background: #fff; }
input { width: 100%; min-width: 0; height: 56px; border: 1px solid transparent; border-radius: 18px; background: #fff; color: var(--text); padding: 0 16px; font-size: 16px; outline: none; }
input:focus { border-color: rgba(229,106,74,.75); box-shadow: 0 0 0 4px rgba(229,106,74,.12); }
button { border: 0; border-radius: 16px; padding: 0 20px; color: white; background: linear-gradient(135deg, var(--primary), var(--primary2)); font-weight: 900; cursor: pointer; transition: .18s ease; box-shadow: 0 14px 30px rgba(229,106,74,.22); }
button:hover { transform: translateY(-1px); filter: brightness(1.03); }
button:disabled { opacity: .6; cursor: not-allowed; transform: none; }
.search-row button { height: 48px; min-width: 124px; }
.error { color: var(--red); margin: 10px 8px 2px; font-size: 14px; font-weight: 750; }
.hidden { display: none !important; }

.tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 16px; background: rgba(255,255,255,.68); border: 1px solid var(--border); padding: 7px; border-radius: 20px; box-shadow: 0 10px 28px rgba(101,48,28,.06); position: sticky; top: 10px; z-index: 10; backdrop-filter: blur(16px); }
.tab-btn { height: 46px; background: transparent; color: var(--muted); box-shadow: none; }
.tab-btn.active { background: linear-gradient(135deg, var(--primary), var(--primary2)); color: white; box-shadow: 0 14px 34px rgba(229,106,74,.18); }
.tab-panel { display: none; }
.tab-panel.active { display: grid; }

.label { color: var(--muted); font-size: 12px; margin-bottom: 6px; text-transform: uppercase; letter-spacing: .07em; font-weight: 850; }
.user-card { display: flex; align-items: center; justify-content: space-between; gap: 18px; background: linear-gradient(135deg, rgba(255,255,255,.94), rgba(255,245,238,.90)); }
.user-name { font-size: 28px; font-weight: 950; letter-spacing: -.035em; }
.muted { color: var(--muted); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.small { font-size: 13px; }
.badge, .pill { display: inline-flex; align-items: center; justify-content: center; padding: 7px 11px; border-radius: 999px; font-size: 13px; font-weight: 900; white-space: nowrap; }
.badge.ok { color: var(--green); background: rgba(22,163,74,.12); }
.badge.bad { color: var(--red); background: rgba(220,38,38,.10); }
.badge.neutral { color: var(--muted); background: rgba(30,27,25,.06); }
.grid.two { display: grid; grid-template-columns: .86fr 1.14fr; gap: 16px; }
.metric-card, .limit-card, .optimize-card { position: relative; overflow: hidden; }
.metric-card::after, .limit-card::after, .optimize-card::after { content: ""; position: absolute; right: -42px; top: -42px; width: 110px; height: 110px; border-radius: 50%; background: rgba(229,106,74,.08); }
.big { font-size: 34px; font-weight: 950; letter-spacing: -.045em; }
.limit-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 18px; position: relative; z-index: 1; }
.pill { color: #bd4f31; background: rgba(229,106,74,.12); border: 1px solid rgba(229,106,74,.14); }
.bar { height: 12px; border-radius: 999px; overflow: hidden; background: rgba(30,27,25,.07); margin-bottom: 10px; position: relative; z-index: 1; }
.bar > div { height: 100%; width: 0%; background: linear-gradient(90deg, var(--primary), var(--primary2)); border-radius: 999px; transition: width .25s ease; }
.limit-foot { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 14px; position: relative; z-index: 1; }

.opt-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 18px; position: relative; z-index: 1; }
.toggle-box, .caveman-box { display: grid; gap: 8px; background: rgba(30,27,25,.045); border: 1px solid var(--border); padding: 7px; border-radius: 18px; position: relative; z-index: 1; }
.toggle-box { grid-template-columns: 1fr 1fr; }
.caveman-box { grid-template-columns: repeat(4, 1fr); }
.toggle-btn { height: 48px; background: transparent; color: var(--muted); box-shadow: none; }
.toggle-btn.active { background: linear-gradient(135deg, var(--primary), var(--primary2)); color: white; box-shadow: 0 14px 34px rgba(229,106,74,.24); }
.save-state { min-height: 22px; margin-top: 12px; color: var(--green); font-size: 14px; font-weight: 800; }

.help-btn { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; margin-left: 6px; border-radius: 999px; background: rgba(229,106,74,.12); color: var(--primary); font-size: 13px; font-weight: 950; vertical-align: 2px; box-shadow: none; }
.help-btn:hover { transform: none; filter: none; background: rgba(229,106,74,.20); }
.help-box { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(30,27,25,.34); backdrop-filter: blur(8px); }
.help-content { width: min(520px, 100%); position: relative; background: #fff; color: var(--text); border: 1px solid var(--border); border-radius: 26px; padding: 24px; box-shadow: 0 24px 80px rgba(30,27,25,.18); }
.help-close { position: absolute; right: 14px; top: 12px; width: 34px; height: 34px; padding: 0; border-radius: 999px; background: rgba(30,27,25,.06); color: var(--muted); font-size: 22px; line-height: 1; box-shadow: none; }
.help-title { font-size: 22px; font-weight: 950; margin-bottom: 12px; letter-spacing: -.02em; }
.help-text { color: var(--muted); line-height: 1.65; font-size: 15px; }
.help-text ul { margin: 10px 0 0; padding-left: 20px; }
.help-text li { margin: 7px 0; }

.models { display: flex; flex-wrap: wrap; gap: 8px; }
.model-chip { padding: 8px 11px; border-radius: 12px; background: rgba(229,106,74,.10); border: 1px solid rgba(229,106,74,.12); color: #b9472a; font-size: 13px; font-weight: 850; }

.setup-card { overflow: hidden; }
.setup-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.copy-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 14px; padding: 15px; border: 1px solid var(--border); border-radius: 18px; background: rgba(255,247,241,.62); }
.copy-row code { word-break: break-all; color: var(--text); font-weight: 800; }
.setup-note { margin-top: 6px; }
.copy-btn { height: 40px; padding: 0 15px; flex: 0 0 auto; }
pre { margin: 14px 0 0; padding: 18px; overflow: auto; border-radius: 18px; border: 1px solid rgba(255,255,255,.12); background: #14110f; color: #fff7ed; font-size: 13px; line-height: 1.6; box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
pre code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.tool-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 14px; }
.tool-card { padding: 16px; border: 1px solid var(--border); border-radius: 20px; background: rgba(255,247,241,.62); }
.tool-card h3 { margin: 0 0 10px; font-size: 18px; letter-spacing: -.02em; }
.tool-card ol { margin: 0; padding-left: 20px; color: var(--muted); line-height: 1.6; }
.tool-card li { margin: 5px 0; }
.tool-card code { word-break: break-all; }
.guide-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 14px; }
.guide-list > div { padding: 15px; border: 1px solid var(--border); border-radius: 18px; background: rgba(255,247,241,.62); }
.guide-list p { margin-top: 5px; }
.guide-list code { color: #b9472a; word-break: break-all; font-weight: 850; }

.usage-table-wrap { overflow-x: auto; margin-top: 14px; }
.usage-table { width: 100%; border-collapse: collapse; min-width: 760px; font-size: 14px; }
.usage-table th, .usage-table td { padding: 12px 10px; border-bottom: 1px solid rgba(30,27,25,.08); text-align: left; vertical-align: top; }
.usage-table th { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
.usage-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.usage-table .model-name { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; word-break: break-all; }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; align-items: start; }
  .hero-panel { max-width: 520px; }
  .tool-grid, .guide-list { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .grid.two { grid-template-columns: 1fr; }
  .search-row, .user-card, .opt-head, .copy-row { flex-direction: column; align-items: stretch; }
  button { min-height: 46px; }
}

@media (max-width: 640px) {
  body { background: linear-gradient(180deg, #fff8f2 0%, #fff 58%); }
  body::before { background-size: 34px 34px; opacity: .65; }
  .page { width: 100%; padding: 20px 14px 34px; }
  .hero { display: block; padding: 8px 0 18px; }
  .brand { border-radius: 14px; font-size: 13px; padding: 7px 10px; }
  h1 { font-size: 34px; line-height: 1.02; letter-spacing: -.055em; margin: 14px 0 8px; }
  h2 { font-size: 18px; }
  p { font-size: 14px; line-height: 1.5; }
  .hero p { font-size: 15px; max-width: 350px; }
  .hero-points { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 14px; }
  .hero-points span { border-radius: 14px; padding: 9px; font-size: 12px; }
  .hero-panel { margin-top: 18px; padding: 14px; border-radius: 22px; }
  .hero-stat-grid { gap: 8px; }
  .hero-stat { padding: 12px; border-radius: 16px; }
  .hero-stat b { font-size: 20px; }
  .card { padding: 18px; border-radius: 22px; box-shadow: 0 10px 30px rgba(101,48,28,.075); }
  .stack { gap: 12px; }
  .search-card { margin-bottom: 12px; padding: 7px; border-radius: 22px; }
  .search-row { display: grid; grid-template-columns: 1fr auto; gap: 6px; }
  input { height: 46px; border: 0; background: transparent; padding: 0 10px; font-size: 16px; }
  input:focus { box-shadow: none; }
  .search-row button { min-width: 0; width: auto; height: 42px; min-height: 42px; padding: 0 13px; border-radius: 15px; }
  .tabs { position: sticky; top: 8px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; padding: 5px; border-radius: 18px; margin-bottom: 12px; }
  .tab-btn { min-width: 0; width: 100%; height: 40px; min-height: 40px; padding: 0 5px; border-radius: 14px; font-size: 12px; line-height: 1.1; }
  .user-card { flex-direction: row; align-items: center; gap: 12px; }
  .user-card > div:first-child { min-width: 0; }
  .user-card .badge { margin-left: auto; }
  .user-name { font-size: 23px; word-break: break-word; }
  .mono { word-break: break-all; }
  .big { font-size: 30px; }
  .limit-head { flex-direction: row; align-items: flex-start; gap: 10px; margin-bottom: 14px; }
  .limit-foot { gap: 8px; font-size: 13px; }
  .pill, .badge { width: fit-content; max-width: 100%; white-space: normal; }
  .opt-head { flex-direction: row; align-items: flex-start; gap: 10px; }
  .toggle-box { border-radius: 16px; }
  .caveman-box { grid-template-columns: repeat(4, 1fr); gap: 5px; padding: 5px; border-radius: 16px; }
  .toggle-btn { height: 42px; min-height: 42px; font-size: 12px; padding: 0 6px; }
  .models { gap: 7px; }
  .model-chip { max-width: 100%; word-break: break-all; font-size: 12px; }
  .setup-head { flex-direction: column; gap: 8px; }
  .copy-row { padding: 12px; gap: 10px; }
  .copy-row > div { min-width: 0; }
  .copy-btn { width: auto; align-self: flex-start; }
  pre { font-size: 12px; padding: 13px; border-radius: 15px; max-height: 360px; }
  .tool-card, .guide-list > div { padding: 13px; border-radius: 16px; }
  .tool-card h3 { font-size: 16px; }
  .usage-table-wrap { margin: 14px 0 0; padding: 0; overflow: visible; }
  .usage-table, .usage-table thead, .usage-table tbody, .usage-table tr, .usage-table td { display: block; width: 100%; min-width: 0; }
  .usage-table thead { display: none; }
  .usage-table { border-collapse: separate; border-spacing: 0; font-size: 13px; }
  .usage-table tr { margin-bottom: 12px; padding: 14px; border: 1px solid var(--border); border-radius: 18px; background: rgba(255,247,241,.52); }
  .usage-table td { display: flex; justify-content: space-between; gap: 14px; padding: 8px 0; border-bottom: 1px dashed rgba(30,27,25,.09); text-align: right; }
  .usage-table td:last-child { border-bottom: 0; padding-bottom: 0; }
  .usage-table td:first-child { padding-top: 0; }
  .usage-table td::before { content: attr(data-label); color: var(--muted); text-align: left; font-weight: 800; }
  .usage-table td.num { text-align: right; }
  .usage-table .model-name { max-width: 190px; text-align: right; }
  .help-box { padding: 12px; align-items: flex-end; }
  .help-content { border-radius: 22px 22px 16px 16px; padding: 20px; max-height: 82vh; overflow: auto; }
}

@media (max-width: 380px) {
  .page { padding-left: 11px; padding-right: 11px; }
  h1 { font-size: 31px; }
  .hero-points { grid-template-columns: 1fr; }
  .hero-stat-grid { grid-template-columns: 1fr; }
  .search-row { grid-template-columns: 1fr; }
  .search-row button { width: 100%; }
  .tabs { display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab-btn { flex: 0 0 112px; }
  .user-card, .limit-head, .limit-foot, .opt-head { flex-direction: column; align-items: stretch; }
  .caveman-box { grid-template-columns: repeat(2, 1fr); }
}

/* Refined setup tab */
.setup-flow { gap: 18px; }
.setup-hero-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 20px; background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(255,239,227,.92)); border-color: rgba(229,106,74,.18); }
.setup-hero-copy h2 { font-size: clamp(24px, 3vw, 34px); margin-bottom: 8px; letter-spacing: -.045em; }
.setup-mini-steps { display: grid; gap: 8px; min-width: 220px; }
.setup-mini-steps span { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border: 1px solid rgba(229,106,74,.14); border-radius: 16px; background: rgba(255,255,255,.72); color: var(--muted); font-size: 13px; font-weight: 850; }
.setup-mini-steps b { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 9px; background: linear-gradient(135deg, var(--primary), var(--primary2)); color: #fff; }
.config-grid { display: grid; grid-template-columns: 1.1fr .95fr .95fr; gap: 14px; }
.config-card { position: relative; display: grid; grid-template-columns: auto minmax(0,1fr); grid-template-rows: auto auto; gap: 12px; padding: 18px; border: 1px solid var(--border); border-radius: 24px; background: rgba(255,255,255,.88); box-shadow: var(--shadow-soft); overflow: hidden; }
.config-card.featured { border-color: rgba(229,106,74,.24); background: linear-gradient(135deg, #fff, #fff3ea); }
.config-card::after { content: ""; position: absolute; right: -30px; top: -30px; width: 86px; height: 86px; border-radius: 50%; background: rgba(229,106,74,.08); }
.config-icon { width: 42px; height: 42px; border-radius: 15px; display: inline-flex; align-items: center; justify-content: center; background: rgba(229,106,74,.12); color: #b9472a; font-weight: 950; }
.config-body { min-width: 0; position: relative; z-index: 1; }
.config-body code { display: block; color: var(--text); font-weight: 900; word-break: break-all; margin-bottom: 7px; }
.config-body p { font-size: 13px; line-height: 1.45; }
.config-card .copy-btn { grid-column: 1 / -1; width: fit-content; min-height: 38px; height: 38px; padding: 0 15px; align-self: end; position: relative; z-index: 1; }
.code-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.code-card-head h2 { font-size: 24px; letter-spacing: -.035em; }
.code-card-head.compact { margin-bottom: 10px; }
.code-badge { flex: 0 0 auto; padding: 8px 11px; border-radius: 999px; background: rgba(229,106,74,.11); color: #b9472a; font-size: 12px; font-weight: 900; }
.primary-code-card pre { margin-top: 0; }
.setup-columns { display: grid; grid-template-columns: .95fr 1.05fr; gap: 14px; }
.guide-list.clean { grid-template-columns: 1fr 1fr; }
.guide-card .guide-list.clean > div { background: rgba(255,255,255,.72); }
.tool-grid.refined { grid-template-columns: repeat(3, minmax(0,1fr)); }
.tool-grid.refined .tool-card p { font-size: 14px; margin-bottom: 12px; }
.tool-grid.refined .tool-card pre { font-size: 12px; max-height: 220px; }
@media(max-width:900px){.setup-hero-card,.setup-columns{grid-template-columns:1fr}.setup-mini-steps{min-width:0}.config-grid,.tool-grid.refined{grid-template-columns:1fr}.guide-list.clean{grid-template-columns:1fr}}
@media(max-width:640px){.setup-flow{gap:12px}.setup-hero-card{padding:18px}.setup-mini-steps span{border-radius:14px}.config-card{border-radius:20px;padding:15px}.code-card-head{flex-direction:column;gap:8px}.code-card-head h2{font-size:20px}.config-card .copy-btn{width:100%}.tool-grid.refined .tool-card pre{max-height:260px}}

/* Refined usage history + typography */
body { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif; letter-spacing: -.006em; }
code, pre, .mono, .usage-table .model-name { font-family: "JetBrains Mono", "SFMono-Regular", ui-monospace, Menlo, Monaco, Consolas, monospace; }
.usage-panel-card { background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(255,244,236,.9)); }
#usagePanel .setup-card:first-child { padding: 0; overflow: hidden; border-color: rgba(229,106,74,.18); }
#usagePanel .setup-head { padding: 24px 24px 18px; background: linear-gradient(135deg, rgba(229,106,74,.10), rgba(255,155,97,.08)); border-bottom: 1px solid rgba(229,106,74,.10); }
#usagePanel .setup-head h2 { font-size: clamp(24px, 3vw, 34px); letter-spacing: -.045em; }
#usagePanel .setup-head p { max-width: 560px; }
.usage-table-wrap { margin: 0; padding: 14px; overflow-x: auto; }
.usage-table { min-width: 860px; border-collapse: separate; border-spacing: 0 10px; font-size: 13px; }
.usage-table th { padding: 0 12px 4px; border: 0; color: #9b8b80; font-size: 11px; font-weight: 950; text-transform: uppercase; letter-spacing: .075em; }
.usage-table td { padding: 14px 12px; border-top: 1px solid rgba(30,27,25,.08); border-bottom: 1px solid rgba(30,27,25,.08); background: rgba(255,255,255,.78); vertical-align: middle; }
.usage-table td:first-child { border-left: 1px solid rgba(30,27,25,.08); border-radius: 16px 0 0 16px; color: var(--text); font-weight: 850; }
.usage-table td:last-child { border-right: 1px solid rgba(30,27,25,.08); border-radius: 0 16px 16px 0; }
.usage-table tr:hover td { background: #fff7f1; border-color: rgba(229,106,74,.18); }
.usage-table td.num { color: #3b342f; font-weight: 850; font-variant-numeric: tabular-nums; }
.usage-table td.num b { color: #b9472a; }
.usage-table .model-name { display: inline-flex; max-width: 230px; padding: 7px 9px; border-radius: 11px; background: rgba(229,106,74,.09); color: #b9472a; font-size: 12px; font-weight: 850; line-height: 1.35; }
.usage-table .badge { padding: 6px 10px; font-size: 12px; }
#recentCalls td[colspan] { border-radius: 18px; text-align: center; padding: 30px 16px; color: var(--muted); background: rgba(255,247,241,.72); }
@media(max-width:640px){
  #usagePanel .setup-card:first-child { padding: 0; }
  #usagePanel .setup-head { padding: 18px; }
  #usagePanel .setup-head h2 { font-size: 24px; }
  .usage-table-wrap { padding: 12px; overflow: visible; }
  .usage-table { min-width: 0; border-spacing: 0; font-size: 13px; }
  .usage-table tr { position: relative; margin-bottom: 12px; padding: 14px; border: 1px solid rgba(229,106,74,.14); border-radius: 20px; background: rgba(255,255,255,.78); box-shadow: 0 10px 26px rgba(101,48,28,.06); }
  .usage-table td { background: transparent!important; border: 0!important; border-bottom: 1px dashed rgba(30,27,25,.09)!important; border-radius: 0!important; padding: 8px 0; align-items: flex-start; }
  .usage-table td:last-child { border-bottom: 0!important; }
  .usage-table td:first-child { font-size: 13px; }
  .usage-table td::before { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
  .usage-table .model-name { max-width: 190px; justify-content: flex-end; text-align: right; }
  #recentCalls td[colspan] { display: block; text-align: center; border: 0!important; padding: 26px 10px; }
}

/* SanzoAPI wordmark logo */
.brand-wordmark{gap:10px;background:rgba(255,255,255,.78);color:#123c7c;border-color:rgba(30,123,255,.14)}.brand-wordmark img{display:block;width:138px;height:auto}.brand-wordmark span{font-size:13px;color:#1e7bff;font-weight:950}@media(max-width:640px){.brand-wordmark img{width:118px}.brand-wordmark span{font-size:12px}}

/* Brand refresh: blue/navy palette from new SanzoAPI wordmark */
:root{--bg:#f8fbff;--bg2:#ffffff;--soft:#eff6ff;--border:rgba(18,60,124,.12);--border-strong:rgba(30,123,255,.22);--text:#0b1220;--muted:#64748b;--primary:#1e7bff;--primary2:#123c7c;--shadow:0 22px 70px rgba(11,18,32,.10);--shadow-soft:0 12px 36px rgba(11,18,32,.07)}
body{background:radial-gradient(circle at top left,rgba(30,123,255,.16),transparent 32rem),radial-gradient(circle at top right,rgba(18,60,124,.12),transparent 30rem),linear-gradient(180deg,#f8fbff 0%,#fff 46%,#f8fbff 100%)}
.brand,.hero-panel,.card,.search-card,.tabs,.copy-row,.tool-card,.guide-list>div,.config-card,.setup-hero-card{border-color:rgba(18,60,124,.12)}
.brand{color:#123c7c;background:rgba(30,123,255,.09);border-color:rgba(30,123,255,.14)}
button,.tab-btn.active,.toggle-btn.active,.setup-mini-steps b,.bar>div{background:linear-gradient(135deg,#123c7c,#1e7bff);box-shadow:0 14px 32px rgba(30,123,255,.20)}
input:focus{border-color:rgba(30,123,255,.65);box-shadow:0 0 0 4px rgba(30,123,255,.12)}
.pill,.model-chip,.code-badge,.config-icon,.optimizer-badge{color:#123c7c;background:rgba(30,123,255,.10);border-color:rgba(30,123,255,.14)}
.metric-card:after,.limit-card:after,.optimize-card:after,.config-card:after{background:rgba(30,123,255,.08)}
.user-card,.setup-hero-card,.config-card.featured,#usagePanel .setup-head{background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(239,246,255,.92))}
.config-card.featured,#usagePanel .setup-card:first-child{border-color:rgba(30,123,255,.18)}
.config-body code,.guide-list code,.usage-table td.num b,.usage-table .model-name{color:#123c7c}.usage-table .model-name{background:rgba(30,123,255,.09)}.usage-table tr:hover td{background:#eff6ff;border-color:rgba(30,123,255,.18)}pre{background:#0b1220;color:#eff6ff}.brand-wordmark{background:rgba(255,255,255,.82);border-color:rgba(30,123,255,.14)}

/* Key portal premium sync with new SanzoAPI landing */
:root{--bg:#f8fbff;--bg2:#ffffff;--surface:rgba(255,255,255,.88);--surface-solid:#fff;--soft:#f1f7ff;--border:rgba(15,23,42,.10);--border-strong:rgba(30,123,255,.22);--text:#0b1220;--muted:#64748b;--primary:#1e7bff;--primary2:#123c7c;--green:#16a34a;--red:#dc2626;--shadow:0 24px 80px rgba(15,23,42,.10);--shadow-soft:0 14px 40px rgba(15,23,42,.07)}
body{font-family:Inter,Manrope,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",sans-serif;background:linear-gradient(180deg,#f8fbff 0%,#fff 42%,#f6f9ff 100%);letter-spacing:-.006em}body:before{background:radial-gradient(circle at 14% -4%,rgba(30,123,255,.20),transparent 34rem),radial-gradient(circle at 88% 2%,rgba(56,189,248,.14),transparent 30rem),linear-gradient(rgba(15,23,42,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(15,23,42,.022) 1px,transparent 1px);background-size:auto,auto,42px 42px,42px 42px;mask-image:linear-gradient(180deg,#000 0%,transparent 70%)}
.page{width:min(1080px,calc(100% - 36px));padding:32px 0 58px}.hero{grid-template-columns:minmax(0,1.05fr) minmax(340px,.74fr);gap:34px;padding:28px 0 30px}.brand-wordmark{background:rgba(255,255,255,.84);border:1px solid rgba(30,123,255,.14);box-shadow:0 12px 34px rgba(15,23,42,.07)}.brand-wordmark img{width:150px}.brand-wordmark span{color:var(--primary);font-weight:950}.hero h1{max-width:760px;background:linear-gradient(135deg,#071225 0%,#0b1220 48%,#123c7c 100%);-webkit-background-clip:text;background-clip:text;color:transparent;font-size:clamp(44px,6vw,72px);line-height:.95;letter-spacing:-.07em;text-wrap:balance}.hero p{text-wrap:pretty;color:var(--muted)}.hero-points span{background:rgba(255,255,255,.78);border-color:rgba(15,23,42,.085);box-shadow:0 10px 28px rgba(15,23,42,.045)}.hero-points span:before{background:linear-gradient(135deg,var(--primary2),var(--primary))}.hero-panel{background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(239,246,255,.90));border-color:rgba(148,163,184,.22);box-shadow:0 34px 110px rgba(15,23,42,.14)}.hero-stat{background:rgba(255,255,255,.84);border-color:rgba(15,23,42,.08);box-shadow:0 12px 30px rgba(15,23,42,.055)}
.card,.search-card,.tabs{background:rgba(255,255,255,.88);border-color:rgba(15,23,42,.09);box-shadow:var(--shadow-soft);backdrop-filter:blur(18px)}.search-card{padding:8px;border-radius:24px;border-color:rgba(30,123,255,.16);box-shadow:0 24px 70px rgba(30,123,255,.12)}.search-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;background:#fff;border-radius:18px}.search-row button{height:48px;border-radius:16px;background:linear-gradient(135deg,var(--primary2),var(--primary));box-shadow:0 16px 34px rgba(30,123,255,.22)}input{height:52px;border-radius:16px}input:focus{border-color:rgba(30,123,255,.65);box-shadow:0 0 0 4px rgba(30,123,255,.12)}button{background:linear-gradient(135deg,var(--primary2),var(--primary));box-shadow:0 14px 32px rgba(30,123,255,.20)}
.tabs{position:sticky;top:10px;z-index:12;padding:6px;border-radius:20px}.tab-btn{box-shadow:none}.tab-btn.active{background:linear-gradient(135deg,var(--primary2),var(--primary));box-shadow:0 14px 34px rgba(30,123,255,.18)}.label{color:#7890ad}.user-card{background:linear-gradient(135deg,#fff,#eff6ff);border-color:rgba(30,123,255,.16)}.badge.ok{color:var(--green);background:rgba(22,163,74,.10)}.badge.neutral,.pill,.model-chip,.code-badge,.config-icon{color:var(--primary2);background:rgba(30,123,255,.09);border:1px solid rgba(30,123,255,.12)}.bar>div,.toggle-btn.active,.setup-mini-steps b{background:linear-gradient(135deg,var(--primary2),var(--primary));box-shadow:0 12px 28px rgba(30,123,255,.18)}.metric-card:after,.limit-card:after,.optimize-card:after,.config-card:after{background:rgba(30,123,255,.08)}
.metric-card,.limit-card,.optimize-card,.setup-card,.config-card,.guide-card,.tools-card,.code-card{position:relative;overflow:hidden}.metric-card:before,.limit-card:before,.optimize-card:before,.setup-card:before,.config-card:before,.guide-card:before,.tools-card:before,.code-card:before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,var(--primary2),var(--primary),#38bdf8);opacity:.70}.copy-row,.tool-card,.guide-list>div{background:rgba(255,255,255,.74);border-color:rgba(15,23,42,.08)}pre{background:linear-gradient(145deg,#071225,#0b1830);color:#eff6ff;border-color:rgba(255,255,255,.12);box-shadow:0 22px 70px rgba(7,18,37,.18)}code,pre,.mono,.usage-table .model-name{font-family:"JetBrains Mono","SFMono-Regular",ui-monospace,Menlo,Monaco,Consolas,monospace}.setup-hero-card{background:linear-gradient(135deg,#fff,#eff6ff);border-color:rgba(30,123,255,.16)}.config-card{background:rgba(255,255,255,.86);border-color:rgba(15,23,42,.085)}.config-card.featured{background:linear-gradient(135deg,#fff,#eaf3ff);border-color:rgba(30,123,255,.18)}.config-body code,.guide-list code,.usage-table td.num b,.usage-table .model-name{color:var(--primary2)}
#usagePanel .setup-card:first-child{border-color:rgba(30,123,255,.16);box-shadow:var(--shadow-soft)}#usagePanel .setup-head{background:linear-gradient(135deg,rgba(30,123,255,.10),rgba(56,189,248,.08));border-bottom-color:rgba(30,123,255,.10)}.usage-table td{background:rgba(255,255,255,.82);border-color:rgba(15,23,42,.075)}.usage-table tr:hover td{background:#eff6ff;border-color:rgba(30,123,255,.18)}.usage-table .model-name{background:rgba(30,123,255,.09);border:1px solid rgba(30,123,255,.10)}.help-content{border-color:rgba(15,23,42,.10);box-shadow:0 24px 80px rgba(15,23,42,.18)}
@media(max-width:900px){.hero{grid-template-columns:1fr}.hero-panel{max-width:560px}.tool-grid.refined,.tool-grid,.config-grid,.setup-columns{grid-template-columns:1fr}}@media(max-width:640px){.page{padding:20px 14px 34px}.hero{padding:10px 0 20px}.brand-wordmark img{width:120px}.hero h1{font-size:clamp(34px,10vw,44px)}.hero-points{grid-template-columns:1fr 1fr}.hero-panel{border-radius:24px}.card{border-radius:22px}.search-row{grid-template-columns:1fr auto}.tabs{top:8px}.tab-btn{font-size:12px}.user-card{flex-direction:row}.usage-table tr{background:rgba(255,255,255,.82);border-color:rgba(30,123,255,.12)}}@media(max-width:380px){.hero-points{grid-template-columns:1fr}.search-row{grid-template-columns:1fr}.search-row button{width:100%}.tabs{display:flex;overflow-x:auto}.tab-btn{flex:0 0 112px}.user-card,.limit-head,.limit-foot,.opt-head{flex-direction:column;align-items:stretch}}