:root{--bg-dark:#0a0a12;--bg-panel:#12121e;--bg-hover:#1a1a2e;--border:#2a2a3e;--border-light:#3a3a5e;--text:#d4d4c8;--text-dim:#8888a0;--text-bright:#f0f0e0;--gold:#c8a84e;--gold-dim:#8a7030;--red:#c04040;--green:#40a040;--blue:#4080c0}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%}body{background:var(--bg-dark);color:var(--text);font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.6}a{color:var(--gold);text-decoration:none}a:hover{color:var(--text-bright)}.app{max-width:800px;min-height:100%;margin:0 auto;padding:20px}.app-header{text-align:center;border-bottom:1px solid var(--border);margin-bottom:24px;padding:20px 0 10px}.app-header h1{color:var(--gold);letter-spacing:4px;text-transform:uppercase;font-size:20px}.app-header .subtitle{color:var(--text-dim);letter-spacing:2px;font-size:11px}.panel{border:1px solid var(--border);background:var(--bg-panel);margin-bottom:16px;padding:16px}.panel-title{color:var(--gold);letter-spacing:2px;text-transform:uppercase;border-bottom:1px solid var(--border);margin-bottom:12px;padding-bottom:6px;font-size:13px}button{background:var(--bg-panel);color:var(--gold);border:1px solid var(--gold-dim);cursor:pointer;letter-spacing:1px;text-transform:uppercase;padding:8px 20px;font-family:inherit;font-size:13px;transition:all .15s}button:hover:not(:disabled){background:var(--bg-hover);border-color:var(--gold);color:var(--text-bright)}button:disabled{opacity:.4;cursor:not-allowed}button.primary{background:var(--gold-dim);color:var(--bg-dark);border-color:var(--gold)}button.primary:hover:not(:disabled){background:var(--gold)}.wizard-progress{gap:4px;margin-bottom:20px;display:flex}.wizard-progress .step{background:var(--border);flex:1;height:3px;transition:background .3s}.wizard-progress .step.done{background:var(--gold)}.wizard-progress .step.active{background:var(--gold-dim)}.wizard-nav{border-top:1px solid var(--border);justify-content:space-between;margin-top:20px;padding-top:16px;display:flex}.dice-row{border-bottom:1px solid var(--border);align-items:center;gap:12px;padding:8px 0;display:flex}.dice-row:last-child{border-bottom:none}.ability-name{width:120px;color:var(--text-dim);text-transform:uppercase;letter-spacing:1px;font-size:11px}.die{border:1px solid var(--border-light);width:28px;height:28px;color:var(--text);justify-content:center;align-items:center;font-size:14px;display:inline-flex}.die.dropped{color:var(--red);opacity:.4;text-decoration:line-through}.ability-total{color:var(--text-bright);text-align:right;width:40px;font-size:18px;font-weight:700}.card-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px;display:grid}.card{border:1px solid var(--border);cursor:pointer;padding:12px;transition:all .15s}.card:hover{border-color:var(--gold-dim);background:var(--bg-hover)}.card.selected{border-color:var(--gold);background:var(--bg-hover)}.card.disabled{opacity:.3;cursor:not-allowed}.card-title{color:var(--gold);text-transform:uppercase;letter-spacing:1px;margin-bottom:4px;font-size:12px}.card-detail{color:var(--text-dim);font-size:11px}.alignment-grid{grid-template-columns:repeat(3,1fr);gap:6px;display:grid}input[type=text]{background:var(--bg-dark);color:var(--text-bright);border:1px solid var(--border);width:100%;padding:10px 14px;font-family:inherit;font-size:16px}input[type=text]:focus{border-color:var(--gold-dim);outline:none}.stat-grid{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.stat-box{border:1px solid var(--border);text-align:center;padding:8px}.stat-box .label{color:var(--text-dim);text-transform:uppercase;letter-spacing:1px;font-size:10px}.stat-box .value{color:var(--text-bright);font-size:22px}.char-list-row{border-bottom:1px solid var(--border);cursor:pointer;justify-content:space-between;align-items:center;padding:10px 12px;transition:background .15s;display:flex}.char-list-row:hover{background:var(--bg-hover)}.text-gold{color:var(--gold)}.text-dim{color:var(--text-dim)}.text-bright{color:var(--text-bright)}.text-center{text-align:center}.mt-8{margin-top:8px}.mt-16{margin-top:16px}.mb-8{margin-bottom:8px}.mb-16{margin-bottom:16px}.toggle-group{gap:0;margin-bottom:16px;display:flex}.toggle-group button{border-radius:0;flex:1}.toggle-group button.active{background:var(--gold-dim);color:var(--bg-dark);border-color:var(--gold)}
