:root {
  --bg:#0b111b; --bg-deep:#070b12; --panel:rgba(24,31,42,.94); --panel-alt:rgba(34,43,58,.92);
  --fg:#f3f7ff; --muted:#99a7ba; --border:rgba(146,166,200,.18); --shadow:rgba(0,0,0,.42);
  --accent:#4f8cff; --accent-hover:#6ca0ff; --warning:#ffcc4d;
}
body {
  color:var(--fg);
  background:radial-gradient(circle at 12% -10%, rgba(79,140,255,.22), transparent 34rem),
             radial-gradient(circle at 94% 8%, rgba(255,204,77,.12), transparent 34rem),
             linear-gradient(180deg,var(--bg),var(--bg-deep));
}
.reforge-page { width:min(1500px, calc(100% - 48px)); margin:20px auto 40px; }
.hero-card,.table-card,.comments-card { border:1px solid var(--border); background:linear-gradient(180deg, rgba(26,35,48,.94), rgba(17,24,34,.94)); border-radius:18px; box-shadow:0 24px 70px var(--shadow); overflow:hidden; }
.hero-card { display:block; padding:28px 34px 20px; margin-bottom:16px; }
.title-line { display:flex; align-items:center; flex-wrap:wrap; gap:14px; }
h1 { margin:0; color:#fff; font-size:clamp(42px,5vw,70px); line-height:.95; letter-spacing:-.07em; text-shadow:0 14px 40px rgba(0,0,0,.35); }
.hero-copy p { margin:16px 0 0; color:var(--muted); font-size:17px; font-weight:650; }
.page-badge { display:inline-flex; align-items:center; min-height:38px; padding:0 14px; border:1px solid rgba(79,140,255,.58); border-radius:10px; background:rgba(79,140,255,.1); color:#84b7ff; font-size:17px; font-weight:900; }
.table-card-head { display:flex; align-items:flex-end; justify-content:space-between; gap:18px; padding:18px 24px; border-bottom:1px solid var(--border); background:rgba(255,255,255,.035); }
.table-card-head h2 { margin:0; font-size:18px; letter-spacing:-.02em; }
.table-card-head p { margin:4px 0 0; color:var(--muted); font-size:13px; font-weight:700; }
.legend { display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; color:rgba(244,248,255,.82); font-size:12px; font-weight:800; }
.legend span { display:inline-flex; align-items:center; gap:5px; }
.dot { width:10px; height:10px; border-radius:999px; display:inline-block; }
.dot-hit{background:#d4696b}.dot-interrupt{background:#8a68b6}.dot-chain{background:#62a464}.dot-move{background:#4c8fd1}.dot-support{background:#d4ad30}
.table-scroll { overflow-x:auto; overflow-y:hidden; max-height:none; scrollbar-color:rgba(127,176,255,.55) rgba(255,255,255,.05); }
.reforge-table { width:100%; min-width:760px; border-collapse:separate; border-spacing:0; table-layout:fixed; font-size:16px; }
.reforge-table caption { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.reforge-table th,.reforge-table td { height:40px; padding:6px 10px; border-right:1px solid rgba(146,166,200,.14); border-bottom:1px solid rgba(146,166,200,.14); text-align:center; vertical-align:middle; background:rgba(8,13,21,.34); color:rgba(244,248,255,.92); font-weight:760; }
.reforge-table thead th { position:sticky; top:0; z-index:12; background:linear-gradient(180deg, rgba(28,37,51,.98), rgba(19,27,39,.98)); color:#fff; font-size:16px; font-weight:950; }
.reforge-table thead tr:first-child th { height:44px; font-size:18px; }
.main-head { width:300px; }
.family { width:170px; color:#fff!important; text-align:center!important; font-size:17px; font-weight:950!important; letter-spacing:-.02em; }
.job { width:140px; color:#fff!important; text-align:center!important; font-weight:950!important; }
.family-warrior,.job-warrior{background:linear-gradient(180deg,#bf151d,#97131a)!important}
.family-healer,.job-healer{background:linear-gradient(180deg,#1f6db3,#1f558b)!important}
.family-mage,.job-mage{background:linear-gradient(180deg,#1553b3,#123f8a)!important}
.family-archer,.job-archer{background:linear-gradient(180deg,#e48718,#c66b0b)!important}
.family-bard,.job-bard{background:linear-gradient(180deg,#ad9200,#917500)!important}
.family-rogue,.job-rogue{background:linear-gradient(180deg,#dfb20e,#bd9200)!important}
.empty { color:rgba(178,191,213,.72)!important; font-weight:800!important; }
.tag { display:inline-flex; justify-content:center; align-items:center; min-width:70px; height:27px; padding:0 11px; border-radius:7px; border:1px solid rgba(255,255,255,.16); box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 5px 14px rgba(0,0,0,.2); color:#fff; font-weight:950; line-height:1; }
.tag-hit{background:linear-gradient(180deg,rgba(216,100,104,.85),rgba(140,62,69,.9))}
.tag-interrupt{background:linear-gradient(180deg,rgba(141,101,183,.86),rgba(94,69,127,.92))}
.tag-chain{background:linear-gradient(180deg,rgba(90,158,91,.86),rgba(60,107,67,.92))}
.tag-move{background:linear-gradient(180deg,rgba(70,137,205,.9),rgba(40,91,143,.92))}
.tag-support,.tag-cool{background:linear-gradient(180deg,rgba(216,178,48,.9),rgba(142,113,28,.92))}
.tag-summon{background:linear-gradient(180deg,rgba(109,95,186,.9),rgba(75,66,132,.92))}
.tag-element{background:linear-gradient(180deg,rgba(53,119,196,.9),rgba(31,76,132,.92))}
.tag-survive{background:linear-gradient(180deg,rgba(35,145,128,.9),rgba(28,95,86,.92))}
.tag-move-cool{background:linear-gradient(180deg,rgba(87,152,143,.9),rgba(54,103,100,.92))}
.comments-card { margin-top:16px; }
.comments-head { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; padding:18px 24px; border-bottom:1px solid var(--border); background:rgba(255,255,255,.035); }
.comments-head h2 { margin:0; font-size:18px; letter-spacing:-.02em; }
.comments-head p { margin:4px 0 0; color:var(--muted); font-size:13px; font-weight:700; }
.comments-head p.is-error { color:#ff9a9a; }
.comments-count { display:inline-flex; align-items:center; min-height:34px; padding:0 12px; border:1px solid rgba(79,140,255,.42); border-radius:999px; background:rgba(79,140,255,.1); color:#dceaff; font-size:13px; font-weight:900; white-space:nowrap; }
.comment-form { display:grid; grid-template-columns:minmax(120px, 180px) minmax(130px, 180px) 1fr auto; gap:12px; padding:18px 24px; border-bottom:1px solid var(--border); }
.comment-form label { display:flex; flex-direction:column; gap:7px; color:rgba(244,248,255,.86); font-size:13px; font-weight:900; }
.comment-form input,.comment-form textarea { width:100%; border:1px solid rgba(146,166,200,.22); border-radius:10px; background:rgba(7,11,18,.72); color:#fff; font:inherit; font-size:14px; line-height:1.5; outline:none; }
.comment-form input { height:42px; padding:0 12px; }
.comment-form textarea { min-height:92px; resize:vertical; padding:10px 12px; }
.comment-form input:focus,.comment-form textarea:focus { border-color:rgba(79,140,255,.78); box-shadow:0 0 0 3px rgba(79,140,255,.14); }
.comment-message-field { min-width:0; }
.comment-website { position:absolute; left:-9999px; width:1px!important; height:1px!important; opacity:0; }
.comment-form button { align-self:end; height:42px; min-width:78px; border:1px solid rgba(79,140,255,.7); border-radius:10px; background:linear-gradient(180deg,rgba(79,140,255,.95),rgba(40,94,180,.95)); color:#fff; font-size:14px; font-weight:950; cursor:pointer; }
.comment-form button:disabled { cursor:wait; opacity:.62; }
.comments-list { display:grid; gap:10px; margin:0; padding:18px 24px 22px; list-style:none; }
.comment-item { border:1px solid rgba(146,166,200,.15); border-radius:12px; background:rgba(8,13,21,.36); padding:13px 14px; }
.comment-meta { display:flex; align-items:center; justify-content:space-between; gap:12px; color:#fff; font-size:13px; font-weight:900; }
.comment-tools { display:inline-flex; align-items:center; gap:8px; }
.comment-meta time { color:var(--muted); font-size:12px; font-weight:800; white-space:nowrap; }
.comment-delete { display:inline-flex; align-items:center; justify-content:center; min-height:28px; padding:0 9px; border:1px solid rgba(255,115,115,.4); border-radius:999px; background:rgba(255,115,115,.1); color:#ffd6d6; font:inherit; font-size:12px; font-weight:900; cursor:pointer; }
.comment-delete:disabled { cursor:wait; opacity:.62; }
.comment-item p { margin:8px 0 0; color:rgba(244,248,255,.88); font-size:14px; line-height:1.7; white-space:pre-wrap; word-break:break-word; }
.comment-empty { color:var(--muted); font-size:14px; font-weight:800; }
@media (max-width:1100px) {
  .comment-form { grid-template-columns:minmax(120px, 180px) minmax(130px, 180px) 1fr; }
  .comment-form button { grid-column:1 / -1; justify-self:end; }
}
@media (max-width:880px) {
  .reforge-page { width:min(100% - 20px, 1500px); }
  .hero-card { padding:22px 18px; }
  .table-card-head,.comments-head { align-items:flex-start; flex-direction:column; }
  .legend { justify-content:flex-start; }
  .reforge-table { font-size:14px; }
  .reforge-table th,.reforge-table td { height:38px; padding:5px 8px; }
  .main-head { width:240px; }
  .family { width:145px; font-size:15px; }
  .job { width:115px; }
  .tag { min-width:62px; height:25px; font-size:13px; }
  .comment-form { grid-template-columns:1fr; padding:16px 18px; }
  .comment-form button { grid-column:auto; justify-self:stretch; }
  .comments-list { padding:16px 18px 20px; }
}