:root { color-scheme: dark; --bg:#0e1512; --panel:#17221d; --panel2:#1d2b24; --line:#34483d; --text:#eef5ef; --muted:#9fb1a6; --gold:#e3bd61; --green:#7fce96; --red:#ef8e86; --blue:#77bcd2; --shadow:0 12px 35px rgb(0 0 0 / 30%); font-family:Inter,ui-sans-serif,system-ui,sans-serif; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:radial-gradient(circle at 15% -20%,#294032 0,transparent 38%),var(--bg); color:var(--text); }
[hidden] { display:none!important; }
button,input,select,textarea { font:inherit; }
button,.button { border:1px solid var(--line); border-radius:.45rem; padding:.55rem .8rem; background:#26372e; color:var(--text); cursor:pointer; text-decoration:none; }
button:hover,.button:hover { border-color:var(--gold); }
button.primary { background:#775d20; border-color:#b58e33; }
button.danger,.bad { color:var(--red); }
button:disabled { opacity:.45; cursor:not-allowed; }
input,select,textarea { width:100%; border:1px solid var(--line); border-radius:.4rem; background:#101914; color:var(--text); padding:.55rem .65rem; }
input[type="checkbox"] { width:auto; }
textarea { min-height:7rem; resize:vertical; }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.25rem clamp(1rem,3vw,3rem); border-bottom:1px solid var(--line); }
h1,h2,h3 { margin:0; font-family:Georgia,serif; font-weight:500; }
h1 { color:var(--gold); font-size:clamp(1.55rem,3vw,2.25rem); }
h2 { font-size:1.55rem; }
h3 { font-size:1.05rem; color:var(--gold); }
p { line-height:1.55; }
.eyebrow { margin:0 0 .25rem; color:var(--muted); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; }
.tabs { display:flex; gap:.25rem; overflow-x:auto; padding:.75rem clamp(1rem,3vw,3rem) 0; }
.tabs button { white-space:nowrap; background:transparent; border-color:transparent; border-radius:.45rem .45rem 0 0; color:var(--muted); }
.tabs button.active { background:var(--panel); color:var(--text); border-color:var(--line); border-bottom-color:var(--panel); }
main { max-width:1600px; margin:0 auto; padding:1rem clamp(1rem,3vw,3rem) 3rem; }
main.wide-view { max-width:none; }
.panel { background:linear-gradient(145deg,var(--panel),#131d18); border:1px solid var(--line); border-radius:.7rem; padding:1rem; box-shadow:var(--shadow); }
.section-head { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:1rem; }
.section-head p { margin:.35rem 0 0; color:var(--muted); }
.grid { display:grid; gap:1rem; }
.grid.two { grid-template-columns:repeat(auto-fit,minmax(min(100%,27rem),1fr)); }
.fields { display:grid; grid-template-columns:repeat(auto-fit,minmax(10rem,1fr)); gap:.75rem; }
label { display:grid; gap:.35rem; color:var(--muted); font-size:.86rem; }
.field-label { display:grid; align-content:start; gap:.55rem; color:var(--muted); font-size:.86rem; }
.actions { display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; margin-top:1rem; }
.compact-actions { margin-top:0; }
.landing { max-width:1150px; padding-top:clamp(2rem,6vw,5rem); }
.hero { display:grid; grid-template-columns:1fr auto; align-items:center; gap:2rem; padding:clamp(1.2rem,4vw,3rem); }
.hero h2 { color:var(--gold); font-size:clamp(2rem,6vw,4.4rem); max-width:13ch; }
.hero>div>p:not(.eyebrow) { max-width:46rem; color:var(--muted); font-size:1.05rem; }
.hero-mark { display:grid; place-items:center; width:clamp(7rem,18vw,13rem); aspect-ratio:1; border:1px solid var(--gold); border-radius:50%; color:var(--gold); font:clamp(4rem,12vw,9rem)/1 Georgia,serif; box-shadow:inset 0 0 3rem rgb(227 189 97 / 12%); }
.landing-grid { margin-top:1rem; }
.analysis-result { margin-top:1rem; padding:1rem; border:1px solid var(--line); border-radius:.5rem; background:#101914; }
.analysis-result ul { padding-left:1.25rem; color:var(--muted); }
.admin-row { display:flex; align-items:center; justify-content:space-between; gap:.6rem; margin:.45rem 0; padding:.5rem; border:1px solid var(--line); border-radius:.4rem; }
.admin-row span { min-width:0; overflow-wrap:anywhere; }
.secret-key { white-space:pre-wrap; overflow-wrap:anywhere; color:var(--gold); }
.toolbar { display:flex; flex-wrap:wrap; gap:.65rem; align-items:end; margin-bottom:1rem; }
.toolbar>label { min-width:9rem; flex:1; }
.table-wrap { overflow:auto; max-height:68vh; border:1px solid var(--line); border-radius:.5rem; }
table { width:100%; border-collapse:collapse; font-size:.84rem; }
th,td { padding:.55rem .65rem; text-align:left; border-bottom:1px solid #2c3b33; vertical-align:top; white-space:nowrap; }
th { position:sticky; top:0; z-index:1; background:#223028; color:var(--gold); }
tbody tr:hover { background:rgb(255 255 255 / 3%); }
td.wrap,.wrap { white-space:normal; min-width:15rem; }
.muted { color:var(--muted); }
.good { color:var(--green); }
.warn { color:var(--gold); }
.mono { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
.pill { display:inline-block; border:1px solid var(--line); border-radius:2rem; padding:.12rem .45rem; color:var(--muted); font-size:.72rem; white-space:nowrap; }
.status-cluster { display:flex; gap:.75rem; align-items:center; color:var(--muted); font-size:.82rem; }
.status-dot::before { content:""; display:inline-block; width:.55rem; height:.55rem; margin-right:.4rem; border-radius:50%; background:var(--green); }
.status-dot.busy::before { background:var(--gold); }
.status-dot.error::before { background:var(--red); }
.notice { border-left:3px solid var(--blue); background:#132329; padding:.75rem 1rem; margin:.75rem 0; }
.notice.warning { border-color:var(--gold); background:#292414; }
.notice.error { border-color:var(--red); background:#2b1717; }
.notice ul { margin:.35rem 0; padding-left:1.25rem; }
.builder-grid { display:grid; grid-template-columns:minmax(30rem,.68fr) minmax(60rem,1.32fr); gap:1rem; }
.builder-grid>.panel { min-width:0; }
.slot-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,25rem),1fr)); gap:.65rem; }
.slot-row { display:grid; grid-template-columns:6rem 1fr auto; align-items:center; gap:.5rem; padding:.5rem; border:1px solid var(--line); border-radius:.45rem; }
.slot-button { width:100%; min-width:0; overflow:hidden; text-align:left; text-overflow:ellipsis; white-space:nowrap; }
.slot-button[aria-disabled="true"] { cursor:default; }
.slot-item-anchor { display:block; min-width:0; }
.slot-actions { display:flex; align-items:center; gap:.35rem; }
.slot-lock,.clear-slot { padding:.45rem .65rem; }
.plan-slot { padding:.45rem .65rem; }
.slot-lock[aria-pressed="true"] { border-color:var(--gold); background:#775d20; color:#fff4cf; }
.score { font-size:2rem; color:var(--gold); }
.score-button { border-color:transparent; border-bottom-color:var(--gold); padding:.15rem .25rem; background:transparent; line-height:1; }
.score-button:hover,.score-button:focus-visible { border-color:var(--gold); background:#292414; }
.property-summary { display:flex; flex-wrap:wrap; gap:.35rem; max-width:30rem; white-space:normal; }
.property-summary span { border-radius:.25rem; background:#27382f; padding:.15rem .35rem; }
.empty-state { color:var(--muted); text-align:center; padding:3rem; }
.help-steps { padding-left:1.4rem; }
.help-steps li { margin-bottom:.65rem; line-height:1.45; }
code { border:1px solid var(--line); background:#0b110e; border-radius:.25rem; padding:.1rem .3rem; }
pre { overflow:auto; border:1px solid var(--line); background:#0b110e; border-radius:.45rem; padding:.75rem; }
#toast { position:fixed; right:1rem; bottom:1rem; max-width:min(28rem,calc(100vw - 2rem)); background:#293b31; border:1px solid var(--green); border-radius:.5rem; padding:.75rem 1rem; box-shadow:var(--shadow); opacity:0; transform:translateY(1rem); pointer-events:none; transition:.2s; }
#toast.show { opacity:1; transform:none; }
#toast.error { border-color:var(--red); }
dialog { width:min(70rem,calc(100vw - 2rem)); max-height:90vh; overflow:auto; border:1px solid var(--line); border-radius:.65rem; background:var(--panel); color:var(--text); box-shadow:var(--shadow); }
dialog::backdrop { background:rgb(0 0 0 / 70%); }
.dialog-head { position:sticky; top:-1rem; z-index:3; display:flex; justify-content:space-between; align-items:center; gap:1rem; margin:-1rem -1rem 1rem; padding:1rem; border-bottom:1px solid var(--line); background:var(--panel); }
.dialog-actions { display:flex; justify-content:flex-end; gap:.5rem; flex-wrap:wrap; }
.dialog-properties { columns:2 15rem; font-size:.82rem; color:var(--muted); }
.property-editor { margin:.65rem 0; border:1px solid var(--line); border-radius:.45rem; padding:.65rem; }
.property-editor summary { color:var(--gold); cursor:pointer; }
.property-editor .fields { margin-top:.7rem; }
.link-button { border:0; padding:0; background:transparent; color:var(--blue); text-decoration:underline; text-underline-offset:.18rem; }
.link-button:hover { color:var(--gold); border:0; }
.sort-header { border:0; padding:0; background:transparent; color:var(--gold); white-space:nowrap; }
.sort-header:hover { border:0; color:var(--text); }
.status-cell { min-width:10rem; }
.status-warning { display:inline-block; margin:0 .25rem .2rem 0; border:1px solid #794d45; border-radius:2rem; padding:.1rem .4rem; color:var(--red); }
.overcap-contributor { border-color:var(--gold); background:#443817; color:#ffe39a; box-shadow:inset 0 0 0 1px rgb(227 189 97 / 25%); }
.inline-check { display:flex; grid-template-columns:auto 1fr; align-items:center; gap:.4rem; }
.checkbox-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(14rem,1fr)); gap:.35rem; max-height:18rem; overflow:auto; margin:.75rem 0; }
.property-picker { margin:0 0 1rem; border:1px solid var(--line); border-radius:.45rem; padding:.65rem; }
.score-property-group { margin:.65rem 0; padding:.55rem; border:1px solid var(--line); border-radius:.45rem; }
.score-property-group .checkbox-grid { margin:.55rem 0 0; }
.breadcrumbs { display:flex; align-items:center; flex-wrap:wrap; gap:.35rem; margin-bottom:.5rem; color:var(--muted); }
.item-card-anchor { display:inline-block; }
.item-card { position:fixed; inset:auto; z-index:auto; display:none; width:min(30rem,calc(100vw - 1rem)); max-height:min(22rem,calc(100vh - 1rem)); margin:0; overflow:auto; white-space:normal; border:1px solid var(--gold); border-radius:.5rem; padding:.7rem; background:#101914; color:var(--text); box-shadow:var(--shadow); }
.item-card:popover-open { display:block; }
.item-card>span,.item-card>strong { display:block; margin-bottom:.35rem; }
.compact { max-height:24rem; margin-top:.7rem; }
.skill-editor { max-height:65vh; }
.skill-editor input { min-width:6rem; }
.equipment-effects,.equipment-skills,.equipment-other,.builder-section { margin-top:1rem; }
.builder-section>.section-head { align-items:end; margin-bottom:.65rem; }
.builder-properties { max-height:52rem; }
.all-stats-table { min-width:52rem; table-layout:fixed; font-size:.8rem; }
.all-stats-table th,.all-stats-table td { padding:.42rem .45rem; overflow-wrap:anywhere; white-space:normal; }
.all-stats-table .property-column { width:20%; }
.all-stats-table .raw-column { width:11%; }
.all-stats-table .effects-column { width:15%; }
.all-stats-table .effective-column { width:9%; }
.all-stats-table .target-column { width:9%; }
.all-stats-table .cap-column { width:14%; }
.all-stats-table .change-column { width:8%; }
.all-stats-table .short-column { width:6%; }
.all-stats-table .completion-column { width:8%; }
.all-stats-table .property-group-row th { position:static; padding:.48rem .45rem .32rem; border-top:1px solid var(--line); background:#192820; color:var(--gold); letter-spacing:.04em; }
.all-stats-table .compact-input { width:100%; min-width:0; max-width:5.5rem; padding:.3rem .4rem; }
.other-item-groups { display:grid; gap:.65rem; margin-top:.7rem; }
.other-item-group { border:1px solid var(--line); border-radius:.45rem; padding:.65rem; background:rgb(255 255 255 / 2%); }
.other-item-group>div:first-child { display:flex; flex-wrap:wrap; justify-content:space-between; gap:.5rem; }
.other-properties { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.55rem; }
.other-properties>span { border-radius:.3rem; padding:.25rem .4rem; background:#27382f; white-space:normal; }
.other-properties strong { color:var(--muted); font-weight:500; }
.effect-groups { display:grid; gap:.8rem; margin:.75rem 0; }
.effect-group { border:1px solid var(--line); border-radius:.45rem; padding:.6rem; }
.effect-group>summary { font-weight:600; }
.effect-group[open]>summary { margin-bottom:.55rem; }
.effect-group .effect-row+.effect-row { margin-top:.55rem; }
.compact-empty { padding:1rem; margin:0; }
.effect-row { border:1px solid var(--line); border-radius:.45rem; padding:.65rem; background:rgb(255 255 255 / 2%); }
.effect-row p { margin:.4rem 0; color:var(--muted); font-size:.82rem; }
.effect-title { display:flex; align-items:center; flex-wrap:wrap; gap:.45rem; }
.effect-title input { width:auto; }
.effect-parameters { display:grid; grid-template-columns:repeat(auto-fit,minmax(10rem,1fr)); gap:.5rem; margin:.55rem 0; }
.effect-row dl { display:grid; gap:.35rem; margin:.5rem 0; font-size:.8rem; }
.effect-row dl>div { display:grid; grid-template-columns:7rem 1fr; gap:.5rem; }
.effect-row dt { color:var(--muted); }
.effect-row dd { margin:0; white-space:normal; }
.effect-sources { font-size:.78rem; }
.compact-input { min-width:6rem; padding:.35rem .45rem; }
.review-fields { margin-top:1rem; }
.recommendation-scores { display:flex; align-items:center; gap:.8rem; margin:1rem 0; font-size:1.1rem; }
.recommendation-table { table-layout:fixed; }
.recommendation-table th,.recommendation-table td { white-space:normal; overflow-wrap:anywhere; }
.recommendation-table .recommendation-slot-column { width:14%; }
.recommendation-table .recommendation-item-column { width:32%; }
.recommendation-table .recommendation-location-column { width:28%; }
.recommendation-table .recommendation-change-column { width:14%; }
.recommendation-table .recommendation-status-column { width:12%; }
.recommendation-table .recommendation-status { white-space:nowrap; overflow-wrap:normal; }
.build-detail-group th { position:static; padding:.5rem .65rem; background:#192820; color:var(--gold); }
.build-detail-group .detail-count { color:var(--muted); font-weight:400; }
.analysis-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(13rem,1fr)); gap:.65rem; margin:.75rem 0; }
.analysis-grid article { border:1px solid var(--line); border-radius:.45rem; padding:.65rem; background:rgb(255 255 255 / 2%); }
.analysis-grid article p { margin:.35rem 0 0; color:var(--muted); }
.quality-tier-pair { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:.5rem; }
.quality-tier-pair>span { display:flex; align-items:center; gap:.35rem; color:var(--muted); font-size:.82rem; }
.item-analysis,.catalog-correction,.planned-changes { margin:1rem 0; padding:1rem; border:1px solid var(--line); border-radius:.55rem; }
.catalog-table { max-height:70vh; }
.catalog-metrics { display:flex; flex-wrap:wrap; gap:.6rem; margin:.75rem 0; }
.catalog-metrics span { border:1px solid var(--line); border-radius:.45rem; padding:.55rem .75rem; color:var(--muted); }
.catalog-metrics strong { color:var(--text); }
.void-dashboard { display:grid; gap:1rem; }
.void-dashboard>.section-head { padding:.5rem 0; }
.void-character-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(22rem,1fr)); gap:.75rem; }
.void-character { border:1px solid var(--line); border-radius:.55rem; padding:.8rem; background:rgb(255 255 255 / 2%); }
.void-character h4 { margin:.1rem 0 .65rem; }
.void-tier-wanted { color:#67e8f9; border-color:#67e8f9; }
.void-tier-ordinary { color:#b8c0cc; border-color:#b8c0cc; }
.void-tier-uncommon { color:#55cc66; border-color:#55cc66; }
.void-tier-rare { color:#4da6ff; border-color:#4da6ff; }
.void-tier-epic { color:#b46cff; border-color:#b46cff; }
.void-tier-legendary { color:#ff8c32; border-color:#ff8c32; }
.void-tier-mythic { color:#ff3b3b; border-color:#ff3b3b; }
.void-tier-special { color:#ffd700; border-color:#ffd700; }
.void-tier-exceptional { color:#c084fc; border-color:#c084fc; }
hr { border:0; border-top:1px solid var(--line); margin:1.2rem 0; }
summary { cursor:pointer; color:var(--gold); }
@media (max-width:1700px) { .builder-grid{grid-template-columns:1fr} }
@media (max-width:900px) { .slot-grid{grid-template-columns:1fr} }
@media (max-width:640px) { .topbar{align-items:flex-start}.status-cluster{flex-direction:column;align-items:end}.slot-row{grid-template-columns:1fr auto}.slot-row>span{grid-column:1/-1}.hero{grid-template-columns:1fr}.hero-mark{display:none}th,td{padding:.5rem} }