/* Trono OG gate. Design tokens lifted from the main site's splash page so the
   application flow reads as part of tronoroleplay.com rather than a bolt-on. */
:root{
  --ink:#eef1f8;
  --muted:#8b95ad;
  --faint:#5a647d;
  --azure:#2aa7ff;
  --violet:#a78bfa;
  --cyan:#39d6f2;
  --danger:#ff5d69;
  --ok:#3ecf8e;
  --panel:rgba(255,255,255,0.04);
  --stroke:rgba(255,255,255,0.09);
}
*{margin:0;padding:0;box-sizing:border-box}
body{
  min-height:100%;
  background:
    radial-gradient(900px 500px at 50% -10%, rgba(42,167,255,0.10), transparent 60%),
    #05060d;
  color:var(--ink);
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}
a{color:var(--cyan)}

.wrap{max-width:760px;margin:0 auto;padding:38px 20px 80px}
.wrap.wide{max-width:1040px}

header.top{display:flex;align-items:center;gap:14px;margin-bottom:28px}
header.top img{width:44px;height:44px;border-radius:10px;object-fit:cover}
.brand{font-size:20px;font-weight:800;letter-spacing:.2px}
.brand span{
  background:linear-gradient(90deg,var(--azure),var(--violet));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.sub{color:var(--muted);font-size:13px}

h1{font-size:27px;font-weight:800;margin-bottom:10px;letter-spacing:-.2px}
h2{font-size:15px;font-weight:700;margin:26px 0 10px}
p.lede{color:var(--muted);font-size:14.5px;margin-bottom:22px}

.card{
  background:var(--panel);border:1px solid var(--stroke);
  border-radius:14px;padding:20px;margin-bottom:16px;
}
.card.tight{padding:15px}

label{display:block;font-size:12px;font-weight:700;color:var(--muted);margin-bottom:6px;letter-spacing:.2px}
input[type=text],textarea{
  width:100%;padding:11px 13px;
  background:rgba(0,0,0,0.30);border:1px solid var(--stroke);border-radius:9px;
  color:var(--ink);font-family:inherit;font-size:14.5px;outline:none;
}
input[type=text]:focus,textarea:focus{border-color:var(--azure)}
textarea{min-height:96px;resize:vertical;line-height:1.55}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:560px){.row2{grid-template-columns:1fr}}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 20px;border:none;border-radius:10px;cursor:pointer;
  font-family:inherit;font-size:14.5px;font-weight:700;color:#fff;
  background:linear-gradient(135deg,var(--azure),#1d7fd0);
  transition:transform .12s ease,opacity .12s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn.ghost{background:rgba(255,255,255,0.06);border:1px solid var(--stroke)}
.btn.danger{background:linear-gradient(135deg,#e0454f,#a5252d)}
.btn.ok{background:linear-gradient(135deg,var(--ok),#2a9e6b)}
.btn.sm{padding:8px 13px;font-size:13px}
.btn.discord{background:linear-gradient(135deg,#5865F2,#4148c4)}

.charblock{border:1px solid var(--stroke);border-radius:12px;padding:16px;margin-bottom:12px;background:rgba(0,0,0,0.16)}
.charhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.charhead b{font-size:13.5px}
.linkbtn{background:none;border:none;color:var(--danger);font-family:inherit;font-size:12.5px;font-weight:700;cursor:pointer;padding:0}

.who{display:flex;align-items:center;gap:11px}
.who img{width:38px;height:38px;border-radius:50%}
.who b{font-size:14.5px}

.msg{padding:12px 14px;border-radius:10px;font-size:13.5px;margin-bottom:14px;border:1px solid}
.msg.err{background:rgba(255,93,105,.10);border-color:rgba(255,93,105,.35);color:#ffc4c8}
.msg.ok{background:rgba(62,207,142,.10);border-color:rgba(62,207,142,.35);color:#b7f0d5}
.msg.info{background:rgba(42,167,255,.09);border-color:rgba(42,167,255,.30);color:#c2e4ff}
.hidden{display:none}
.hint{color:var(--faint);font-size:12px;margin-top:6px}

/* ---- admin ---- */
.tabs{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap}
.tab{padding:8px 15px;border-radius:999px;border:1px solid var(--stroke);background:transparent;color:var(--muted);font-family:inherit;font-size:13px;font-weight:700;cursor:pointer}
.tab.on{background:var(--azure);border-color:var(--azure);color:#fff}

.app{border:1px solid var(--stroke);border-radius:13px;padding:17px;margin-bottom:13px;background:var(--panel)}
.app.approved{border-left:3px solid var(--ok)}
.app.denied{border-left:3px solid var(--danger)}
.app.pending{border-left:3px solid var(--azure)}
.apphead{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.chars{display:flex;flex-direction:column;gap:10px}
.char{background:rgba(0,0,0,0.22);border-radius:9px;padding:11px 13px}
.charname{font-size:13.5px;font-weight:700;margin-bottom:4px;color:#dbe6f7}
.mem{font-size:13px;color:var(--muted);white-space:pre-wrap;word-break:break-word}
.acts{display:flex;gap:8px;margin-top:13px;flex-wrap:wrap}
.pill{font-size:10.5px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;padding:3px 9px;border-radius:20px}
.pill.pending{background:rgba(42,167,255,.16);color:#8fcaff}
.pill.approved{background:rgba(62,207,142,.16);color:#8ee7bd}
.pill.denied{background:rgba(255,93,105,.16);color:#ffb0b5}
/* Which application type this is - the two queues live on one page, so a
   glanceable marker matters more than it would on a single-type list. */
.pill.kindpill.og{background:rgba(42,167,255,.14);color:#9ad2ff;border:1px solid rgba(42,167,255,.3)}
.pill.kindpill.whitelist{background:rgba(167,139,250,.16);color:#cbb8ff;border:1px solid rgba(167,139,250,.35)}
.tab .badge{display:inline-block;min-width:17px;padding:0 5px;margin-left:5px;border-radius:20px;
  background:var(--danger);color:#fff;font-size:10.5px;font-weight:800;line-height:17px;text-align:center}
.tab .badge:empty{display:none}
.tab.kind.on{background:var(--violet);border-color:var(--violet)}
.warn{margin-top:10px;padding:9px 12px;border-radius:9px;background:rgba(255,182,72,.10);border:1px solid rgba(255,182,72,.35);color:#ffd79a;font-size:12.5px}
.meta{font-size:12px;color:var(--faint)}
.empty{text-align:center;color:var(--faint);padding:46px 20px;font-size:14px}

/* ===================== RULES PAGE ===================== */
/* Two-column: a sticky sidebar that is built from the document's own headings,
   and the rules themselves. Collapses to a single column on mobile, where the
   sidebar becomes a normal block at the top rather than a sticky rail. */
.ruleswrap{display:grid;grid-template-columns:266px 1fr;gap:34px;max-width:1180px;margin:0 auto;padding:30px 20px 90px}
@media (max-width:900px){.ruleswrap{grid-template-columns:1fr;gap:20px}}

.side{position:sticky;top:26px;align-self:start;max-height:calc(100vh - 52px);display:flex;flex-direction:column;gap:12px}
@media (max-width:900px){.side{position:static;max-height:none}}
.sidebrand{display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit}
.sidebrand img{width:38px;height:38px;border-radius:9px}
.sidesearch{width:100%;padding:9px 12px;background:rgba(0,0,0,.32);border:1px solid var(--stroke);
  border-radius:9px;color:var(--ink);font-family:inherit;font-size:13.5px;outline:none}
.sidesearch:focus{border-color:var(--azure)}
.nav{display:flex;flex-direction:column;gap:1px;overflow-y:auto;padding-right:4px}
.navlink{display:flex;gap:9px;align-items:baseline;padding:7px 9px;border-radius:8px;
  text-decoration:none;color:var(--muted);font-size:13px;font-weight:600;border-left:2px solid transparent}
.navlink:hover{background:rgba(255,255,255,.04);color:var(--ink)}
.navlink.on{background:rgba(42,167,255,.10);color:#cfe6ff;border-left-color:var(--azure)}
.navnum{color:var(--faint);font-size:11px;font-variant-numeric:tabular-nums;font-weight:700}
.sideapply{margin-top:auto;text-align:center;text-decoration:none}
@media (max-width:900px){.sideapply{margin-top:8px}}

.ruleshead{margin-bottom:26px}
.ruleshead h1{font-size:33px;margin-bottom:12px}
.callout{margin-top:18px;padding:15px 17px;border-radius:12px;font-size:14px;line-height:1.6;
  background:linear-gradient(135deg,rgba(42,167,255,.10),rgba(167,139,250,.08));
  border:1px solid rgba(42,167,255,.28);color:#d7e8fb}
.callout b{color:#fff}

.rule-sec{margin-bottom:38px;scroll-margin-top:24px}
.rule-sec h2{font-size:20px;font-weight:800;margin:0 0 14px;padding-bottom:9px;
  border-bottom:1px solid var(--stroke);letter-spacing:-.2px}
.rule{padding:14px 16px;margin-bottom:9px;border-radius:11px;background:var(--panel);
  border:1px solid var(--stroke);scroll-margin-top:24px;transition:border-color .2s ease,background .2s ease}
.rule:hover{border-color:rgba(255,255,255,.16)}
.rule.target{border-color:var(--azure);background:rgba(42,167,255,.07)}
.rulehead{display:flex;align-items:baseline;gap:10px;margin-bottom:6px}
.rulehead b{font-size:14.5px;color:#eef4ff}
.rulenum{flex:0 0 auto;font-size:11px;font-weight:800;color:var(--azure);
  font-variant-numeric:tabular-nums;background:rgba(42,167,255,.12);
  padding:2px 7px;border-radius:5px;user-select:none}
.rule p{font-size:13.5px;line-height:1.65;color:var(--muted)}
.rule p em{color:#c9d6ea;font-style:italic}

.rulesfoot{margin-top:44px;padding-top:24px;border-top:1px solid var(--stroke);text-align:center}
.rulesfoot p{color:var(--muted);font-size:13.5px;margin-bottom:16px}
.rulesfoot .btn{text-decoration:none}

/* ===================== ADMIN DASHBOARD ===================== */
.statgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:22px}
.stat{background:var(--panel);border:1px solid var(--stroke);border-radius:12px;padding:13px 15px;
  display:flex;flex-direction:column;gap:3px}
.stat-l{font-size:10.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--faint)}
.stat-v{font-size:21px;font-weight:800;font-variant-numeric:tabular-nums;color:#eaf2ff}
.stat-s{font-size:11.5px;color:var(--muted)}

.searchrow{display:flex;gap:9px;margin-bottom:16px}
.searchrow input{flex:1;padding:11px 13px;background:rgba(0,0,0,.30);border:1px solid var(--stroke);
  border-radius:9px;color:var(--ink);font-family:inherit;font-size:14px;outline:none}
.searchrow input:focus{border-color:var(--azure)}
.searchrow .btn{flex:0 0 auto}

/* Bars are plain divs with a percentage width - no chart library to keep
   patched, and it degrades to readable text if CSS ever fails to load. */
.barrow{margin-bottom:11px}
.barhead{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:4px}
.barlabel{font-size:13px;font-weight:600;color:#dce7f7;word-break:break-word}
.barval{font-size:12.5px;font-variant-numeric:tabular-nums;color:var(--muted);white-space:nowrap}
.bartrack{height:7px;border-radius:20px;background:rgba(255,255,255,.06);overflow:hidden}
.barfill{height:100%;border-radius:20px;background:var(--azure);transition:width .25s ease}
.barfill.in{background:linear-gradient(90deg,#3ecf8e,#2a9e6b)}
.barfill.out{background:linear-gradient(90deg,#ff5d69,#c2333d)}
.barfill.tax{background:linear-gradient(90deg,#a78bfa,#7c5bd6)}
.barsub{font-size:11px;color:var(--faint);margin-top:3px}

.dayrow{display:grid;grid-template-columns:52px 1fr 132px;gap:11px;align-items:center;margin-bottom:7px}
.daylabel{font-size:11.5px;color:var(--faint);font-variant-numeric:tabular-nums}
.daybars{display:flex;flex-direction:column;gap:3px}
.dayval{font-size:11.5px;color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}
@media (max-width:620px){
  .dayrow{grid-template-columns:44px 1fr;}
  .dayval{grid-column:2;text-align:left}
}


/* ===================== ADMIN SIDEBAR =====================
   Primary navigation moved out of the content column so it stops competing
   with each section's own pill row. Sticky, so it stays reachable on the long
   pages (economy, property) where scrolling back up was the annoyance. */
.adminshell{display:grid;grid-template-columns:186px 1fr;gap:26px;align-items:start}
.sidenav{position:sticky;top:22px;display:flex;flex-direction:column;gap:15px}
.navgroup{display:flex;flex-direction:column;gap:3px}
.navlabel{font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);font-weight:800;padding:0 11px 3px}
.navitem{display:flex;align-items:center;justify-content:space-between;gap:8px;
  width:100%;text-align:left;padding:8px 11px;border-radius:9px;
  border:1px solid transparent;background:transparent;color:var(--muted);
  font-family:inherit;font-size:13.5px;font-weight:700;cursor:pointer;
  text-decoration:none;transition:background .12s ease,color .12s ease}
.navitem:hover{background:rgba(255,255,255,.05);color:var(--ink)}
.navitem.on{background:linear-gradient(90deg,rgba(42,167,255,.17),transparent);
  border-color:rgba(42,167,255,.30);color:var(--ink);box-shadow:inset 2px 0 0 var(--azure)}
.navitem .badge{display:inline-block;min-width:17px;padding:0 5px;border-radius:20px;
  background:var(--azure);color:#fff;font-size:11px;font-weight:800;text-align:center}
.navitem .badge:empty{display:none}

/* Below this width a 186px column costs more than it gives, so the sidebar
   becomes an ordinary wrapping row again. */
@media(max-width:880px){
  .adminshell{grid-template-columns:1fr;gap:14px}
  .sidenav{position:static;flex-direction:row;flex-wrap:wrap;gap:8px}
  .navgroup{flex-direction:row;flex-wrap:wrap;gap:6px}
  .navlabel{display:none}
  .navitem{width:auto;border-radius:999px;border-color:var(--stroke);padding:7px 13px}
  .navitem.on{box-shadow:none;background:var(--azure);border-color:var(--azure);color:#fff}
}

/* ---------- economy drill-down ---------- */
/* A bar that can be broken down. The affordance is deliberately quiet - these
   sit in a long list and a loud control on every row would be noise. */
.barrow.drill { cursor: pointer; border-radius: 6px; padding: 4px 6px; margin: -4px -6px; }
.barrow.drill:hover { background: rgba(42, 167, 255, 0.07); }
.barrow.drill:focus-visible { outline: 2px solid var(--azure, #2aa7ff); outline-offset: 1px; }
.barrow.drill .barlabel::after {
    content: ' ›';
    opacity: .45;
    font-weight: 700;
}
.barrow.drill-open .barlabel::after { content: ' ⌄'; opacity: .8; }

.drillbox {
    margin: 6px 0 14px;
    padding: 10px 12px;
    border: 1px solid rgba(120, 160, 210, 0.18);
    border-left: 2px solid var(--azure, #2aa7ff);
    border-radius: 8px;
    background: rgba(10, 20, 36, 0.5);
}
.drill-loading { font-size: 13px; opacity: .6; }
.drill-sum {
    display: flex; gap: 18px; flex-wrap: wrap;
    padding-bottom: 8px; margin-bottom: 8px;
    border-bottom: 1px solid rgba(120, 160, 210, 0.15);
    font-size: 12px; letter-spacing: .04em; text-transform: uppercase;
    color: var(--muted, #8b95ad);
}
.drill-rows { display: flex; flex-direction: column; }
.drill-row {
    display: grid;
    grid-template-columns: minmax(140px, 1.1fr) minmax(150px, 1fr) minmax(160px, 1.4fr) auto;
    gap: 10px;
    align-items: baseline;
    padding: 7px 0;
    border-bottom: 1px solid rgba(120, 160, 210, 0.08);
    font-size: 13px;
}
.drill-row:last-child { border-bottom: none; }
@media (max-width: 760px) {
    .drill-row { grid-template-columns: 1fr auto; }
    .drill-when, .drill-what { grid-column: 1 / -1; }
}
.drill-who { display: flex; flex-direction: column; gap: 1px; }
.drill-name { color: var(--azure, #2aa7ff); text-decoration: none; font-weight: 600; }
.drill-name:hover { text-decoration: underline; }
.drill-discord { font-size: 11.5px; color: var(--muted, #8b95ad); }
.drill-when { color: var(--muted, #8b95ad); font-size: 12.5px; }
.drill-what { display: flex; flex-direction: column; gap: 1px; }
.drill-reason { color: var(--ink, #eef1f8); }
.drill-meta { font-size: 11.5px; color: var(--faint, #5a647d); }
/* Tabular figures so the amounts line up as a column you can scan. */
.drill-amt { font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.drill-amt.in  { color: #39d6a0; }
.drill-amt.out { color: #ff5d69; }
.drill-note { margin-top: 8px; font-size: 12px; color: var(--faint, #5a647d); }

/* ---------- fun stats ---------- */
.boardgrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
}
.board {
    border: 1px solid rgba(120, 160, 210, 0.18);
    border-radius: 10px;
    background: rgba(10, 20, 36, 0.45);
    padding: 12px 14px;
}
.board-t {
    font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
    color: var(--muted, #8b95ad);
    padding-bottom: 8px; margin-bottom: 6px;
    border-bottom: 1px solid rgba(120, 160, 210, 0.14);
}
.board-row {
    display: grid; grid-template-columns: 18px 1fr auto;
    gap: 8px; align-items: baseline;
    padding: 5px 0; font-size: 13.5px;
}
.board-rank { color: var(--faint, #5a647d); font-variant-numeric: tabular-nums; }
.board-name { color: var(--azure, #2aa7ff); text-decoration: none; }
.board-name:hover { text-decoration: underline; }
/* Tabular figures so the numbers form a scannable column. */
.board-n { font-variant-numeric: tabular-nums; white-space: nowrap; }

.profile-sub {
    margin: 14px 0 7px;
    font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
    color: var(--muted, #8b95ad);
}
.profile-stats {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
}
.pstat {
    display: flex; flex-direction: column; gap: 2px;
    padding: 7px 10px;
    border: 1px solid rgba(120, 160, 210, 0.15);
    border-radius: 8px;
    background: rgba(10, 20, 36, 0.4);
}
.pstat-l { font-size: 11px; color: var(--muted, #8b95ad); }
.pstat-v { font-size: 16px; font-variant-numeric: tabular-nums; }

/* ---------- audit pages ---------- */
.auditrow {
    display: grid; grid-template-columns: 1fr auto auto; gap: 12px;
    align-items: baseline; padding: 6px 0;
    border-bottom: 1px solid rgba(120, 160, 210, 0.08);
    font-size: 13.5px;
}
.audit-l { color: var(--ink, #eef1f8); }
.audit-n { font-variant-numeric: tabular-nums; }
.audit-s { color: var(--faint, #5a647d); font-size: 12px; white-space: nowrap; }

.feedrow {
    display: grid;
    grid-template-columns: minmax(140px, .8fr) minmax(120px, .8fr) minmax(180px, 1.6fr) auto;
    gap: 10px; align-items: baseline;
    padding: 7px 0;
    border-bottom: 1px solid rgba(120, 160, 210, 0.08);
    font-size: 13px;
}
@media (max-width: 780px) {
    .feedrow { grid-template-columns: 1fr; gap: 2px; padding: 10px 0; }
}
.feed-when { color: var(--muted, #8b95ad); font-size: 12.5px; }
.feed-name { color: var(--azure, #2aa7ff); text-decoration: none; }
.feed-name:hover { text-decoration: underline; }
/* Commands are what somebody typed - monospace so args line up and a stray
   space is visible. */
.feed-what { font-family: "Cascadia Mono", Consolas, ui-monospace, monospace; font-size: 12.5px; }
.feed-detail {
    color: var(--faint, #5a647d); font-size: 11.5px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 320px;
}