@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800&family=Chivo+Mono:wght@400;700&family=Noto+Serif+JP:wght@600&family=Noto+Sans+SC:wght@400;500;700&display=swap");
:root{--black:#0b0e11;--char:#12161c;--char-2:#1a1f27;--gold:#f0b90b;--molten:#fcd535;--gold-deep:#b98a06;--bone:#eaecef;--muted:#8a94a1;--ember:#f6465d;--jade:#7fc45c;--hairline:rgba(240,185,11,.16);--hairline-strong:rgba(240,185,11,.34);--font-display:"IBM Plex Sans Condensed","IBM Plex Sans","Noto Sans SC",sans-serif;--font-body:"IBM Plex Sans","Noto Sans SC",system-ui,sans-serif;--font-jp:"Noto Serif JP",serif;--font-mono:"IBM Plex Mono",monospace;--ease-spring:cubic-bezier(0.22,1.2,0.36,1)}*{box-sizing:border-box}body,html{margin:0;padding:0;background:var(--black);color:var(--bone);font-family:var(--font-body);-webkit-font-smoothing:antialiased}body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;background:radial-gradient(120% 80% at 50% -20%,rgba(240,185,11,.08),transparent 60%),radial-gradient(80% 60% at 100% 0,rgba(252,213,53,.05),transparent 55%),linear-gradient(transparent 95%,var(--hairline) 95%) 0 0 /100% 46px,linear-gradient(90deg,transparent 95%,var(--hairline) 95%) 0 0 /46px 100%;opacity:.5;-webkit-mask-image:radial-gradient(140% 100% at 50% 0,#000 40%,transparent 100%);mask-image:radial-gradient(140% 100% at 50% 0,#000 40%,transparent 100%)}a{color:var(--gold);text-decoration:none}a:hover{text-decoration:underline}.wrap{position:relative;z-index:1;max-width:920px;margin:0 auto;padding:28px 20px 100px}.topbar{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding-bottom:20px;border-bottom:1px solid var(--hairline)}.brand{display:flex;gap:14px;align-items:center}.crest{width:46px;height:54px;filter:drop-shadow(0 4px 14px rgba(240,185,11,.35));flex-shrink:0}.wordmark{font-family:var(--font-display);font-weight:700;font-size:30px;letter-spacing:.06em;line-height:1;color:var(--bone)}.wordmark b{color:var(--gold)}.unit{font-family:var(--font-display);letter-spacing:.42em;color:var(--gold);text-transform:uppercase;margin-top:6px}.kata,.unit{font-weight:600;font-size:12px}.kata{font-family:var(--font-jp);color:var(--muted);letter-spacing:.14em;margin-top:3px}.creed{margin:18px 0 26px;padding:11px 16px;border:1px solid var(--hairline);border-left:2px solid var(--gold);background:linear-gradient(90deg,rgba(240,185,11,.06),transparent);font-family:var(--font-mono);font-weight:500;font-size:12px;letter-spacing:.28em;color:var(--molten);text-transform:uppercase;display:flex;gap:10px;align-items:center;overflow-x:auto;white-space:nowrap}.creed:before{content:"◆";color:var(--gold)}.eyebrow{display:flex;align-items:center;gap:12px;margin:30px 2px 14px;font-family:var(--font-display);font-weight:700;font-size:13px;letter-spacing:.32em;text-transform:uppercase;color:var(--gold)}.eyebrow:after{content:"";flex:1 1;height:1px;background:linear-gradient(90deg,var(--hairline-strong),transparent)}.eyebrow .jp{font-family:var(--font-jp);font-weight:600;font-size:11px;letter-spacing:.1em;color:var(--muted)}.panel{position:relative;background:linear-gradient(180deg,var(--char),var(--black));border:1px solid var(--hairline);border-radius:3px;padding:20px;margin-bottom:16px}.panel:before{top:-1px;left:-1px;border-top:2px solid var(--gold);border-left:2px solid var(--gold)}.panel:after,.panel:before{content:"";position:absolute;width:14px;height:14px}.panel:after{bottom:-1px;right:-1px;border-bottom:2px solid var(--gold);border-right:2px solid var(--gold)}.panel.danger{border-color:rgba(246,70,93,.35)}.panel.danger:after,.panel.danger:before{border-color:var(--ember)}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}.panel-title{font-family:var(--font-display);font-weight:700;font-size:18px;letter-spacing:.04em;color:var(--bone)}.muster{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:12px;gap:12px}.tile{background:var(--char-2);border:1px solid var(--hairline);border-radius:2px;padding:14px 15px}.tile .k{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}.tile .v{font-family:var(--font-display);font-weight:700;font-size:24px;color:var(--gold);margin-top:6px;line-height:1}.tile .v small{font-size:13px;color:var(--muted);font-weight:600}label{display:block;font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:14px 0 6px}input,select,textarea{width:100%;background:var(--black);border:1px solid var(--hairline);border-radius:2px;color:var(--bone);padding:11px 12px;font-size:14px;font-family:var(--font-body);transition:border-color .15s}input:focus,select:focus,textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(240,185,11,.12)}button{cursor:pointer;border:1px solid transparent;border-radius:2px;padding:11px 18px;font-family:var(--font-display);font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--black);background:linear-gradient(180deg,var(--molten),var(--gold));transition:transform .12s var(--ease-spring),filter .15s,opacity .15s}button:hover{filter:brightness(1.08);transform:translateY(-1px)}button:active{transform:translateY(0)}button:disabled{opacity:.4;cursor:not-allowed;transform:none;filter:none}button.ghost{background:transparent;color:var(--gold);border-color:var(--hairline-strong)}button.ghost:hover{background:rgba(240,185,11,.08)}button.green{background:linear-gradient(180deg,var(--molten),var(--gold));color:var(--black)}button.red{background:transparent;color:var(--ember);border-color:rgba(246,70,93,.5)}button.red:hover{background:rgba(246,70,93,.1)}button.blue{background:linear-gradient(180deg,#ffe9a3,var(--gold));color:var(--black)}.pill{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:4px 10px;border-radius:2px;border:1px solid var(--hairline-strong);color:var(--muted)}.pill:before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}.pill.Active{color:var(--gold);border-color:rgba(240,185,11,.5)}.pill.Executed,.pill.Succeeded{color:var(--jade);border-color:rgba(127,196,92,.5)}.pill.Executed{background:rgba(127,196,92,.1)}.pill.Defeated{color:var(--ember);border-color:rgba(246,70,93,.5)}.pill.Canceled{color:var(--muted)}.tag{font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;border-radius:2px;border:1px solid var(--hairline);color:var(--gold)}.tag.warn{color:var(--ember);border-color:rgba(246,70,93,.4)}.track{height:10px;border-radius:2px;background:var(--char-2);border:1px solid var(--hairline);overflow:hidden;display:flex;margin:12px 0 8px}.track .aye{background:linear-gradient(180deg,var(--molten),var(--gold))}.track .nay{background:linear-gradient(180deg,#ff6b7d,var(--ember))}.tally{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:12px;letter-spacing:.08em}.tally .aye{color:var(--gold)}.tally .nay{color:var(--ember)}.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}.dim,.muted{color:var(--muted);font-size:13px}.mono{font-family:var(--font-mono);font-size:12px}.banner{background:linear-gradient(90deg,rgba(240,185,11,.08),transparent);border:1px solid var(--hairline);border-left:2px solid var(--gold);color:var(--molten);border-radius:2px;padding:12px 14px;font-size:13px;margin-bottom:16px}.banner.warn{border-left-color:var(--ember);color:#ffb3bd;background:linear-gradient(90deg,rgba(246,70,93,.08),transparent)}.grid2{display:grid;grid-template-columns:1fr 1fr;grid-gap:12px;gap:12px}.decree-desc{margin:6px 0 14px;font-size:15px;line-height:1.5;color:var(--bone)}.meta{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.foot{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;color:var(--muted);margin-top:10px}appkit-button{--w3m-accent:var(--gold)}@media (max-width:600px){.grid2,.muster{grid-template-columns:1fr}.wordmark{font-size:24px}.topbar{flex-direction:column}}
/* ============================================================================
   TCC WAR COUNCIL — BNB CHAIN TERMINAL reskin
   Loaded after the app's compiled stylesheet. It re-points the app's own token
   names at the new system, then restyles the component layer to match tcc.fun.
   No markup or behavior is touched; the DAO app is a built artifact.
   ========================================================================== */

:root {
  --black: #0b0e11;
  --char: #12161c;
  --char-2: #181e26;
  --gold: #fcd535;
  --molten: #ffe470;
  --gold-deep: #f0b90b;
  --bone: #eaecef;
  --muted: #9aa3af;
  --ember: #f6465d;
  --jade: #0ecb81;
  --hairline: #262d38;
  --hairline-strong: #343d4b;

  --font-display: "Archivo", "Noto Sans SC", system-ui, sans-serif;
  --font-body: "Archivo", "Noto Sans SC", system-ui, sans-serif;
  --font-jp: "Noto Serif JP", serif;
  --font-mono: "Chivo Mono", ui-monospace, "SF Mono", monospace;

  --s3: #1f2732;
  --faint: #6b7480;
  --r: 10px;
  --r-lg: 14px;
  --lift-1: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 1px 2px rgba(0, 0, 0, 0.5);
  --lift-2: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 10px 28px -14px rgba(0, 0, 0, 0.9),
    0 2px 6px rgba(0, 0, 0, 0.4);
}

html, body {
  font-size: 15px;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
}

/* one calm ambient field, replacing the app's gold grid overlay */
body::before {
  background:
    radial-gradient(70% 55% at 76% -6%, rgba(252, 213, 53, 0.12), transparent 62%),
    radial-gradient(55% 40% at 4% 0%, rgba(240, 185, 11, 0.06), transparent 70%) !important;
  opacity: 1 !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
}

a { color: var(--gold); }
a:hover { text-decoration: none; color: var(--molten); }
::selection { background: var(--gold); color: #0b0e11; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px; }

.wrap { max-width: 1080px; padding: 26px 24px 110px; }

/* ---------- top bar ---------- */
.topbar {
  align-items: center;
  padding: 0 0 22px;
  border-bottom: 1px solid var(--hairline);
}
.crest { filter: none; width: 40px; height: 46px; }
.wordmark {
  font-family: var(--font-display); font-weight: 800; font-size: 26px;
  letter-spacing: -0.025em; color: var(--bone);
}
.wordmark b { color: var(--bone); }
.unit {
  font-family: var(--font-mono); font-weight: 700; font-size: 10.5px;
  letter-spacing: 0.14em; color: var(--faint); margin-top: 7px;
}
.kata { font-size: 11px; letter-spacing: 0.12em; color: var(--faint); }

/* ---------- creed strip: exchange ticker, not a callout ---------- */
.creed {
  margin: 20px 0 30px;
  padding: 0 16px;
  height: 44px;
  border: 1px solid var(--hairline);
  border-left: 1px solid var(--hairline);
  border-radius: var(--r);
  background: linear-gradient(180deg, var(--char), #0e1218);
  box-shadow: var(--lift-1);
  font-family: var(--font-mono); font-weight: 700; font-size: 11.5px;
  letter-spacing: 0.2em; color: var(--muted);
}
.creed::before { content: "\25C6"; color: var(--gold); font-size: 9px; }

/* ---------- section headers ---------- */
.eyebrow {
  margin: 40px 0 16px;
  font-family: var(--font-display); font-weight: 800; font-size: 20px;
  letter-spacing: -0.03em; text-transform: none; color: var(--bone);
  padding-bottom: 14px;
}
.eyebrow::after { background: var(--hairline); height: 1px; }
.eyebrow .jp { font-size: 12px; letter-spacing: 0.1em; color: var(--faint); }

/* ---------- module panels ---------- */
.panel {
  background: var(--char);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  box-shadow: var(--lift-2);
  padding: 20px;
  margin-bottom: 16px;
}
.panel::before, .panel::after { display: none; }
.panel.danger { border-color: rgba(246, 70, 93, 0.4); }
.panel-head { margin-bottom: 12px; }
.panel-title {
  font-family: var(--font-display); font-weight: 700; font-size: 15px;
  letter-spacing: -0.005em; color: var(--bone);
}

/* ---------- stat tiles ---------- */
.muster { gap: 14px; }
.tile {
  background: var(--char-2);
  border: 1px solid var(--hairline);
  border-radius: var(--r);
  padding: 15px 16px;
  box-shadow: var(--lift-1);
}
.tile .k {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--faint);
}
.tile .v {
  font-family: var(--font-mono); font-weight: 700; font-size: 22px;
  letter-spacing: -0.02em; color: var(--bone); margin-top: 9px;
}
.tile .v small { font-size: 12px; color: var(--faint); font-weight: 400; }

/* ---------- forms ---------- */
label {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em;
  color: var(--faint); margin: 16px 0 7px;
}
input, select, textarea {
  background: var(--s3);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r);
  padding: 12px 14px;
  font-family: var(--font-mono); font-size: 13.5px;
  color: var(--bone);
}
input::placeholder, textarea::placeholder { color: var(--faint); }
input:hover, select:hover, textarea:hover { border-color: #46505f; }
input:focus, select:focus, textarea:focus {
  border-color: var(--gold);
  background: var(--char-2);
  box-shadow: none;
}

/* ---------- buttons ---------- */
button {
  height: 44px; padding: 0 20px;
  border-radius: var(--r);
  font-family: var(--font-display); font-size: 14px; font-weight: 700;
  letter-spacing: 0.005em; text-transform: none;
  background: var(--gold); color: #0b0e11;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) inset, 0 6px 18px -8px rgba(252, 213, 53, 0.55);
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease;
}
button:hover { filter: none; transform: none; background: var(--molten); }
button:active { transform: translateY(1px); background: var(--gold-deep); }
button.ghost, button.red {
  background: var(--char-2); border-color: var(--hairline-strong);
  box-shadow: var(--lift-1);
}
button.ghost { color: var(--bone); }
button.ghost:hover { background: var(--s3); border-color: #46505f; }
button.red { color: var(--ember); border-color: rgba(246, 70, 93, 0.45); }
button.red:hover { background: rgba(246, 70, 93, 0.12); }
button.green, button.blue { background: var(--gold); color: #0b0e11; }
button.green:hover, button.blue:hover { background: var(--molten); }

/* ---------- state pills ---------- */
.pill, .tag {
  border-radius: 4px; padding: 4px 9px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em;
  border: 0; background: var(--s3); color: var(--faint);
}
.pill.Active { background: rgba(252, 213, 53, 0.1); color: var(--gold); }
.pill.Succeeded, .pill.Executed { background: rgba(14, 203, 129, 0.12); color: var(--jade); }
.pill.Defeated { background: rgba(246, 70, 93, 0.12); color: var(--ember); }
.pill.Canceled { background: var(--s3); color: var(--faint); }
.tag { color: var(--muted); }
.tag.warn { background: rgba(246, 70, 93, 0.12); color: var(--ember); }

/* ---------- vote tally ---------- */
.track {
  height: 8px; border-radius: 4px; border: 0;
  background: var(--s3); margin: 14px 0 9px;
}
.track .aye { background: linear-gradient(90deg, #0a9d64, var(--jade)); }
.track .nay { background: linear-gradient(90deg, var(--ember), #c2364a); }
.tally { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0; }
.tally .aye { color: var(--jade); }
.tally .nay { color: var(--ember); }

/* ---------- misc ---------- */
.banner {
  background: var(--char-2);
  border: 1px solid var(--hairline);
  border-left: 1px solid var(--hairline);
  border-radius: var(--r);
  color: var(--muted);
  padding: 13px 15px;
  box-shadow: var(--lift-1);
}
.banner.warn { border-color: rgba(246, 70, 93, 0.4); color: #ffb3bd; background: rgba(246, 70, 93, 0.07); }
.dim, .muted { color: var(--muted); }
.mono { font-family: var(--font-mono); }
.decree-desc { font-size: 15px; color: var(--bone); }
.foot { font-family: var(--font-mono); font-size: 11px; color: var(--faint); }

/* ---------- back to site ---------- */
.tcc-back {
  display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 14px;
  border: 1px solid var(--hairline); border-radius: 8px;
  background: var(--char-2); box-shadow: var(--lift-1);
  font-size: 13px; font-weight: 700; color: var(--muted);
  transition: color 0.15s ease, border-color 0.15s ease;
}
.tcc-back:hover { color: var(--bone); border-color: var(--hairline-strong); text-decoration: none; }

@media (max-width: 600px) {
  .wrap { padding: 20px 18px 90px; }
  .creed { letter-spacing: 0.12em; font-size: 10.5px; }
}