:root {
  --dnd-bg: #0b1118;
  --dnd-panel: #131d27;
  --dnd-panel-2: #192631;
  --dnd-ink: #edf1e8;
  --dnd-muted: #a9b4af;
  --dnd-gold: #d6a84b;
  --dnd-red: #d8463a;
  --dnd-green: #65b78c;
  --dnd-line: rgba(238, 241, 232, .13);
}

* { box-sizing: border-box; }
.dnd-page { margin: 0; min-height: 100vh; background: var(--dnd-bg); color: var(--dnd-ink); font-family: "Noto Sans HK", sans-serif; }
.dnd-page::before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .28; background: radial-gradient(circle at 15% 8%, rgba(214,168,75,.18), transparent 28rem), radial-gradient(circle at 88% 44%, rgba(216,70,58,.12), transparent 32rem), linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px); background-size: auto, auto, 34px 34px, 34px 34px; }
.hidden { display: none !important; }

.dnd-topbar { position: sticky; top: 0; z-index: 20; min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 10px clamp(16px, 4vw, 54px); background: rgba(11,17,24,.92); border-bottom: 1px solid var(--dnd-line); backdrop-filter: blur(18px); }
.dnd-topbar .brand { display: flex; align-items: center; gap: 12px; color: var(--dnd-ink); text-decoration: none; }
.dnd-topbar .brand-logo { width: 42px; height: 42px; object-fit: cover; border-radius: 10px; }
.dnd-topbar .brand-text { display: grid; line-height: 1.1; }
.dnd-topbar .brand-text small { margin-top: 5px; color: var(--dnd-gold); letter-spacing: .11em; font-size: .66rem; }
.dnd-account-actions { display: flex; align-items: center; gap: 12px; color: var(--dnd-muted); font-size: .86rem; }

.dnd-shell { position: relative; z-index: 1; width: min(1500px, 100%); margin: 0 auto; padding: clamp(24px, 5vw, 68px) clamp(14px, 3vw, 42px) 80px; }
.dnd-login-gate { max-width: 660px; margin: 10vh auto; padding: clamp(26px, 6vw, 52px); text-align: center; border: 1px solid var(--dnd-line); background: var(--dnd-panel); box-shadow: 0 28px 70px rgba(0,0,0,.28); }
.dnd-login-gate h1 { margin: 8px 0 14px; font-size: clamp(2rem, 6vw, 3.4rem); }
.dnd-login-gate p:not(.eyebrow) { color: var(--dnd-muted); }

.dnd-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 430px); gap: clamp(24px, 5vw, 70px); align-items: end; margin-bottom: 34px; }
.dnd-hero h1 { max-width: 780px; margin: 6px 0 16px; font-size: clamp(2.5rem, 6vw, 5.8rem); line-height: .98; letter-spacing: -.045em; }
.dnd-hero h1 em { color: var(--dnd-gold); font-style: normal; }
.dnd-hero > div > p:last-child { max-width: 760px; color: var(--dnd-muted); line-height: 1.8; }
.dnd-page .eyebrow { color: var(--dnd-gold); letter-spacing: .13em; font-weight: 900; }

.dnd-slot-card { padding: 24px; border-top: 3px solid var(--dnd-gold); background: var(--dnd-panel); box-shadow: 0 24px 60px rgba(0,0,0,.22); }
.dnd-slot-head { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; }
.dnd-slot-head span { color: var(--dnd-muted); }
.dnd-slot-head strong { font-size: 1.8rem; }
.dnd-slot-track { height: 8px; margin: 14px 0; overflow: hidden; background: #070c11; }
.dnd-slot-track span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--dnd-gold), #f4d47f); transition: width .3s ease; }
.dnd-slot-card p { min-height: 42px; color: var(--dnd-muted); font-size: .9rem; line-height: 1.55; }
.dnd-slot-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.dnd-workspace { display: grid; grid-template-columns: 290px minmax(0, 1fr); min-height: 680px; border: 1px solid var(--dnd-line); background: rgba(13,20,27,.82); box-shadow: 0 30px 80px rgba(0,0,0,.24); }
.dnd-roster { padding: 22px; border-right: 1px solid var(--dnd-line); background: rgba(19,29,39,.78); }
.dnd-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.dnd-section-heading h2, .dnd-section-heading h3 { margin: 0; }
.dnd-section-heading .eyebrow { margin: 0 0 4px; }
.dnd-icon-btn { width: 38px; height: 38px; border: 1px solid var(--dnd-line); background: var(--dnd-panel-2); color: var(--dnd-ink); font-size: 1.45rem; cursor: pointer; }
.dnd-character-list { display: grid; gap: 9px; margin-top: 20px; }
.dnd-character-item { width: 100%; padding: 14px; text-align: left; color: var(--dnd-ink); border: 1px solid var(--dnd-line); background: transparent; cursor: pointer; transition: border-color .18s ease, background .18s ease; }
.dnd-character-item:hover, .dnd-character-item.active { border-color: rgba(214,168,75,.7); background: var(--dnd-panel-2); }
.dnd-character-item strong { display: block; margin-bottom: 4px; font-size: 1rem; }
.dnd-character-item span { color: var(--dnd-muted); font-size: .78rem; }
.dnd-roster-empty { padding: 22px 4px; color: var(--dnd-muted); line-height: 1.7; }

.dnd-editor-shell { min-width: 0; }
.dnd-empty-editor { display: grid; place-items: center; align-content: center; min-height: 680px; padding: 40px; text-align: center; }
.dnd-empty-editor h2 { margin: 18px 0 4px; }
.dnd-empty-editor p { max-width: 460px; margin-bottom: 20px; color: var(--dnd-muted); }
.dnd-d20 { display: grid; place-items: center; width: 92px; height: 92px; color: var(--dnd-gold); font-size: 1.85rem; font-weight: 900; border: 2px solid var(--dnd-gold); transform: rotate(45deg); }
.dnd-d20::first-line { transform: rotate(-45deg); }
.dnd-editor { min-width: 0; }
.dnd-editor-head { position: sticky; top: 68px; z-index: 12; display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 20px 26px; border-bottom: 1px solid var(--dnd-line); background: rgba(15,23,32,.96); backdrop-filter: blur(14px); }
.dnd-character-name { width: min(520px, 100%); padding: 0; border: 0; border-bottom: 1px solid transparent; border-radius: 0; background: transparent; color: var(--dnd-ink); font: inherit; font-size: clamp(1.6rem, 3vw, 2.65rem); font-weight: 900; }
.dnd-character-name:focus { outline: 0; border-bottom-color: var(--dnd-gold); }
.dnd-save-state { margin: 5px 0 0; color: var(--dnd-muted); font-size: .75rem; }
.dnd-save-state.dirty { color: #f4d47f; }
.dnd-editor-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.dnd-danger { color: #ff8b82 !important; }

.dnd-quick-stats { display: grid; grid-template-columns: repeat(6, minmax(90px, 1fr)); gap: 1px; border-bottom: 1px solid var(--dnd-line); background: var(--dnd-line); }
.dnd-quick-stat { padding: 16px 12px; text-align: center; background: var(--dnd-panel); }
.dnd-quick-stat span { display: block; color: var(--dnd-muted); font-size: .7rem; letter-spacing: .08em; }
.dnd-quick-stat strong { display: block; margin-top: 4px; font-size: 1.45rem; }

.dnd-tabs { position: sticky; top: 155px; z-index: 10; display: flex; gap: 4px; overflow-x: auto; padding: 10px 18px; border-bottom: 1px solid var(--dnd-line); background: rgba(19,29,39,.98); scrollbar-width: thin; }
.dnd-tabs button { flex: 0 0 auto; padding: 10px 14px; color: var(--dnd-muted); border: 0; border-bottom: 2px solid transparent; background: transparent; font: inherit; font-weight: 700; cursor: pointer; }
.dnd-tabs button.active { color: var(--dnd-ink); border-bottom-color: var(--dnd-gold); }
.dnd-tab-panels { padding: 26px; }
.dnd-tab-panel { display: none; }
.dnd-tab-panel.active { display: block; }
.dnd-form-section { margin-bottom: 28px; padding-bottom: 28px; border-bottom: 1px solid var(--dnd-line); }
.dnd-form-section:last-child { border-bottom: 0; }
.dnd-form-section > h3 { margin: 0 0 5px; font-size: 1.28rem; }
.dnd-form-section > p { margin: 0 0 18px; color: var(--dnd-muted); font-size: .86rem; }
.dnd-form-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; }
.dnd-field { grid-column: span 3; display: grid; gap: 6px; color: var(--dnd-muted); font-size: .78rem; font-weight: 700; }
.dnd-field.span-2 { grid-column: span 2; }
.dnd-field.span-4 { grid-column: span 4; }
.dnd-field.span-6 { grid-column: span 6; }
.dnd-field.span-8 { grid-column: span 8; }
.dnd-field.span-12 { grid-column: span 12; }
.dnd-field input, .dnd-field select, .dnd-field textarea, .dnd-dialog input, .dnd-dialog select, .dnd-admin input, .dnd-admin textarea { width: 100%; min-height: 44px; padding: 10px 12px; color: var(--dnd-ink); border: 1px solid var(--dnd-line); border-radius: 0; background: #0d151d; font: inherit; }
.dnd-field textarea { resize: vertical; min-height: 110px; line-height: 1.65; }
.dnd-field input:focus, .dnd-field select:focus, .dnd-field textarea:focus { outline: 2px solid rgba(214,168,75,.5); outline-offset: 1px; }
.dnd-inline-check { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px; border: 1px solid var(--dnd-line); background: #0d151d; }
.dnd-inline-check input { width: auto; min-height: auto; }

.dnd-ability-grid { display: grid; grid-template-columns: repeat(6, minmax(110px, 1fr)); gap: 10px; }
.dnd-ability-card { padding: 13px; border: 1px solid var(--dnd-line); background: var(--dnd-panel-2); text-align: center; }
.dnd-ability-card label { display: grid; gap: 7px; color: var(--dnd-muted); font-size: .75rem; }
.dnd-ability-card input { width: 100%; padding: 7px; text-align: center; color: var(--dnd-ink); border: 1px solid var(--dnd-line); background: #0b1218; font: inherit; font-size: 1.15rem; }
.dnd-ability-mod { display: block; margin: 8px 0; color: var(--dnd-gold); font-size: 1.6rem; font-weight: 900; }
.dnd-skill-table { width: 100%; border-collapse: collapse; }
.dnd-skill-table th, .dnd-skill-table td { padding: 9px; border-bottom: 1px solid var(--dnd-line); text-align: left; }
.dnd-skill-table th { color: var(--dnd-muted); font-size: .72rem; }
.dnd-skill-table tbody th { color: var(--dnd-ink); font-size: inherit; }
.dnd-skill-table select { min-height: 36px; padding: 6px; color: var(--dnd-ink); border: 1px solid var(--dnd-line); background: #0d151d; }
.dnd-skill-value { color: var(--dnd-gold); font-weight: 900; }

.dnd-repeat-list { display: grid; gap: 10px; }
.dnd-repeat-row { position: relative; display: grid; grid-template-columns: repeat(12, 1fr); gap: 8px; padding: 12px 42px 12px 12px; border: 1px solid var(--dnd-line); background: rgba(25,38,49,.5); }
.dnd-repeat-row .dnd-field { grid-column: span 3; }
.dnd-repeat-row .dnd-field.wide { grid-column: span 6; }
.dnd-remove-row { position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; color: #ff8b82; border: 1px solid var(--dnd-line); background: transparent; cursor: pointer; }
.dnd-add-row { margin-top: 10px; }

.dnd-option-detail { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; min-height: 42px; margin-top: 10px; padding: 10px 12px; color: var(--dnd-muted); border-left: 3px solid var(--dnd-gold); background: rgba(8, 14, 20, .72); font-size: .78rem; line-height: 1.55; }
.dnd-option-detail strong { color: var(--dnd-ink); }
.dnd-option-detail span { flex: 1 1 380px; }
.dnd-option-detail small { color: #d2d8d3; }
.dnd-option-detail.muted { border-left-color: rgba(169, 180, 175, .45); }
.dnd-option-detail .link-btn { min-height: 36px; padding: 6px 10px; white-space: nowrap; color: #f4d47f; border: 1px solid rgba(214, 168, 75, .48); }

.dnd-builder-health { display: grid; gap: 8px; margin-bottom: 12px; padding: 12px 14px; border: 1px solid var(--dnd-line); background: #0d151d; }
.dnd-builder-health > div { display: flex; gap: 16px; flex-wrap: wrap; }
.dnd-builder-health strong { color: var(--dnd-ink); font-size: .86rem; }
.dnd-builder-health p, .dnd-builder-health ul { margin: 0; color: var(--dnd-muted); font-size: .8rem; line-height: 1.6; }
.dnd-builder-health ul { padding-left: 20px; }
.dnd-builder-health.ok { border-left: 3px solid var(--dnd-green); }
.dnd-builder-health.invalid { border-left: 3px solid var(--dnd-red); }
.dnd-builder-health.invalid li { color: #ffb0a9; }

.dnd-attribution { margin-top: 24px; padding: 16px 18px; color: var(--dnd-muted); border-top: 1px solid var(--dnd-line); font-size: .78rem; line-height: 1.65; }
.dnd-attribution strong { color: var(--dnd-ink); }
.dnd-attribution p { margin: 5px 0 0; }
.dnd-attribution a { color: #f4d47f; }

.dnd-page button:active { transform: translateY(1px); }

.dnd-admin { margin-top: 34px; padding: 28px; border: 1px solid rgba(214,168,75,.35); background: var(--dnd-panel); }
.dnd-admin > .dnd-section-heading > span { max-width: 440px; color: var(--dnd-muted); text-align: right; font-size: .8rem; }
.dnd-admin-grid { display: grid; grid-template-columns: minmax(260px, .7fr) minmax(0, 1.3fr); gap: 18px; margin-top: 20px; }
.dnd-admin-card { padding: 20px; border: 1px solid var(--dnd-line); background: #0e171f; }
.dnd-admin-card > label { display: grid; gap: 7px; margin: 14px 0; color: var(--dnd-muted); font-size: .8rem; }
.dnd-switch { grid-template-columns: auto 1fr !important; align-items: center; }
.dnd-switch input { width: auto; min-height: auto; }
.dnd-admin-orders { display: grid; gap: 9px; margin-top: 15px; }
.dnd-order { padding: 14px; border-left: 3px solid var(--dnd-gold); background: var(--dnd-panel-2); }
.dnd-order-head, .dnd-order-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.dnd-order p { margin: 6px 0; color: var(--dnd-muted); font-size: .8rem; }
.dnd-order-actions { justify-content: flex-start; margin-top: 10px; }

.dnd-dialog { width: min(560px, calc(100vw - 24px)); padding: 0; color: var(--dnd-ink); border: 1px solid var(--dnd-line); border-top: 3px solid var(--dnd-gold); background: var(--dnd-panel); box-shadow: 0 40px 100px rgba(0,0,0,.65); }
.dnd-dialog::backdrop { background: rgba(3,7,10,.78); backdrop-filter: blur(5px); }
.dnd-dialog form { position: relative; display: grid; gap: 15px; padding: 28px; }
.dnd-dialog h2 { margin: -8px 0 2px; }
.dnd-dialog label { display: grid; gap: 7px; color: var(--dnd-muted); font-size: .82rem; }
.dnd-dialog-close { position: absolute; top: 14px; right: 14px; color: var(--dnd-muted); border: 0; background: transparent; font-size: 1.1rem; cursor: pointer; }
.dnd-dialog-actions { display: flex; justify-content: flex-end; gap: 9px; flex-wrap: wrap; margin-top: 4px; }
.dnd-unlock-price { padding: 18px; border: 1px solid var(--dnd-line); background: #0d151d; }
.dnd-unlock-price strong { display: block; color: var(--dnd-gold); font-size: 2rem; }
.dnd-unlock-price p { color: var(--dnd-muted); white-space: pre-wrap; }

@media (max-width: 1050px) {
  .dnd-workspace { grid-template-columns: 230px minmax(0, 1fr); }
  .dnd-quick-stats { grid-template-columns: repeat(3, 1fr); }
  .dnd-ability-grid { grid-template-columns: repeat(3, 1fr); }
  .dnd-field { grid-column: span 4; }
  .dnd-field.span-2 { grid-column: span 3; }
  .dnd-admin-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .dnd-topbar { align-items: flex-start; }
  .dnd-account-actions > span { display: none; }
  .dnd-shell { padding-inline: 10px; }
  .dnd-hero { grid-template-columns: 1fr; }
  .dnd-hero h1 { font-size: clamp(2.65rem, 14vw, 4.5rem); }
  .dnd-workspace { display: block; border-inline: 0; }
  .dnd-roster { border-right: 0; border-bottom: 1px solid var(--dnd-line); }
  .dnd-character-list { display: flex; overflow-x: auto; padding-bottom: 6px; }
  .dnd-character-item { min-width: 180px; }
  .dnd-editor-head { top: 63px; display: block; padding: 16px; }
  .dnd-editor-actions { justify-content: flex-start; margin-top: 12px; }
  .dnd-editor-actions .btn, .dnd-option-detail .link-btn { min-height: 44px; }
  .dnd-icon-btn { width: 44px; height: 44px; }
  .dnd-tabs { top: 177px; }
  .dnd-tab-panels { padding: 18px 14px; }
  .dnd-ability-grid { grid-template-columns: repeat(2, 1fr); }
  .dnd-form-grid { grid-template-columns: repeat(2, 1fr); }
  .dnd-field, .dnd-field.span-2, .dnd-field.span-4, .dnd-field.span-6, .dnd-field.span-8 { grid-column: span 1; }
  .dnd-field.span-12 { grid-column: span 2; }
  .dnd-repeat-row { grid-template-columns: 1fr; padding-right: 42px; }
  .dnd-repeat-row .dnd-field, .dnd-repeat-row .dnd-field.wide { grid-column: 1; }
  .dnd-option-detail { align-items: flex-start; }
  .dnd-option-detail .link-btn { width: 100%; }
  .dnd-skill-table th:nth-child(2), .dnd-skill-table td:nth-child(2) { display: none; }
  .dnd-admin { padding: 18px 12px; }
  .dnd-admin > .dnd-section-heading { align-items: flex-start; flex-direction: column; }
  .dnd-admin > .dnd-section-heading > span { text-align: left; }
}

@media (max-width: 430px) {
  .dnd-topbar .brand-text small { display: none; }
  .dnd-topbar .brand-logo { width: 36px; height: 36px; }
  .dnd-slot-actions .btn { width: 100%; }
  .dnd-quick-stats { grid-template-columns: repeat(2, 1fr); }
  .dnd-ability-grid { grid-template-columns: 1fr 1fr; }
  .dnd-editor-actions .btn { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}