.artifact-detail-page { --artifact-surface:var(--panel-bg,#182735); color:var(--palette-ink,inherit); }
#artifacts-page-section > .artifact-page-panel,
#artifacts-page-section > .artifact-page-hero {
    background:var(--artifact-surface); border:1px solid var(--panel-border,#8796a8);
    border-radius:18px; padding:clamp(16px,2vw,28px); min-width:0;
}
.artifact-page-hero { border-top:4px solid var(--accent-green,#8796a8) !important; }
.artifact-page-title { font-size:clamp(18px,2vw,26px); line-height:1.5; }
.artifact-base-stats,.artifact-page-note { font-size:13px; line-height:1.8; overflow-wrap:anywhere; }
.artifact-total-metrics { display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; align-items:center; margin-block:18px; }
.artifact-metric-rating { font-size:clamp(20px,2vw,30px); font-weight:700; line-height:1.4; }
.artifact-metric-numbers { display:flex; align-items:baseline; white-space:nowrap; }
.artifact-metric-rating { white-space:nowrap; }
.artifact-total-metrics > div { min-width:0; overflow-x:auto; }
.artifact-page-hero .artifact-total-metrics > div { container-type:inline-size; overflow:visible; }
.artifact-page-hero .artifact-total-metrics :is(strong,.artifact-theory-value,.artifact-metric-rating) { font-size:clamp(10px,7cqi,30px); line-height:1.4; }
.artifact-metric-numbers { min-width:0; }
@media(max-width:760px) {
    .artifact-page-hero .artifact-total-metrics { grid-template-columns:minmax(0,1fr); }
}
.artifact-total-metrics > div { display:grid; gap:6px; border-left:1px solid var(--panel-border); padding-left:16px; }
.artifact-total-metrics strong { font-size:clamp(20px,2vw,30px); font-variant-numeric:tabular-nums; }
#rv-effective-stat-list { grid-template-columns:repeat(5,minmax(0,1fr)); }
#rv-effective-stat-list .rv-effective-toggle { flex-direction:column; padding:8px 2px; min-width:0; text-align:center; overflow-wrap:anywhere; }
#artifact-settings .artifact-config-subsection p, #artifact-settings #rv-base-values, #artifact-settings #score-base-values { font-size:10px; line-height:1.65; }
.artifact-rank-guide { overflow-x:auto; padding:16px; border:1px solid var(--panel-border); border-radius:14px; }
.artifact-rank-guide table { width:100%; min-width:300px; margin-block:16px; font-size:12px; text-align:right; }
.artifact-rank-guide :is(th,td) { padding:6px; border-bottom:1px solid var(--panel-border); }
.artifact-rank-guide p { font-size:11px; line-height:1.7; }
#artifacts-detailed-grid .artifact-piece-ratings { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; margin-top:10px; padding-top:8px; border-top:1px solid var(--panel-border); text-align:left; }
.artifact-rating-item { min-width:0; padding:7px 5px; background:var(--panel-bg); border:1px solid var(--panel-border); border-radius:9px; }
.artifact-rating-label { display:block; font-size:10px; line-height:1.3; color:var(--palette-ink); }
.artifact-rating-value-row { display:flex; flex-wrap:wrap; align-items:baseline; gap:3px; margin-top:4px; color:var(--palette-ink); }
.artifact-rating-value { font-size:13px; font-weight:800; font-variant-numeric:tabular-nums; }
.artifact-rating-rank { font-size:11px; font-weight:800; }
.artifact-detail-image { width:77px; height:77px; background:transparent !important; border:0 !important; }
#artifacts-detailed-grid .text-\[10px\].flex { flex-wrap:wrap; }
#artifacts-detailed-grid .text-\[10px\].flex > span { white-space:nowrap; }
.artifact-page-panel h3 { margin-bottom:14px; font-size:16px; }
.artifact-page-panel > * + * { margin-top:12px; }
.artifact-table-wrap { overflow:auto; max-width:100%; }
.artifact-table-wrap table { min-width:620px; border-collapse:collapse; }
.artifact-table-wrap :is(th,td) { padding:12px; text-align:right; white-space:nowrap; border-bottom:1px solid var(--panel-border); }
.artifact-table-wrap :is(th,td):first-child { text-align:left; }
#artifacts-detailed-grid.grid { grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)); gap:20px; }
#artifacts-detailed-grid > * { min-width:0; overflow:visible; container-type:inline-size; }
#artifacts-detailed-grid .artifact-piece-ratings { grid-template-columns:1fr; }
#artifacts-detailed-grid .artifact-rating-value-row { flex-wrap:nowrap; white-space:nowrap; }
#artifacts-detailed-grid :is(.artifact-rating-value,.artifact-rating-rank) { font-size:clamp(9px,7cqi,15px); }
@container (min-width:300px) {
    #artifacts-detailed-grid .artifact-piece-ratings { grid-template-columns:repeat(3,minmax(0,1fr)); }
    #artifacts-detailed-grid :is(.artifact-rating-value,.artifact-rating-rank) { font-size:clamp(9px,3cqi,15px); }
}
#artifacts-detailed-grid :is(b,strong,.font-mono,.roll-internal-value) { white-space:nowrap; }
#artifacts-detailed-grid .truncate { white-space:normal; overflow:visible; text-overflow:clip; overflow-wrap:anywhere; }
.showcase-sidebar > :is(details,section) { min-width:0; border-color:var(--panel-border); }
.showcase-sidebar summary { line-height:1.5; padding-block:10px; }
.showcase-sidebar :is(input,select,button) { max-width:100%; }
.showcase-sidebar .wb-note { line-height:1.7; }
#artifact-settings { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
#artifact-settings > * { margin:0; min-width:0; padding:16px 0; border:0; border-radius:0; background:transparent; grid-column:auto; }
#artifact-settings > :last-child { border-top:1px solid var(--panel-border); }
#artifact-settings :is(h3,label[for="score-preset-select"]) { display:block; }
.artifact-config-subsection { margin-top:16px; padding-top:16px; border-top:1px solid var(--panel-border); }
.artifact-base-values { font-size:12px; line-height:1.8; overflow-wrap:anywhere; }
.artifact-total-metrics .artifact-theory-value { font-size:clamp(20px,2vw,30px); font-weight:700; font-variant-numeric:tabular-nums; line-height:1.4; }
.artifact-total-metrics > .artifact-rank-summary { border:0; padding:0; align-self:start; }
#artpage-achievement-rates { display:grid; gap:4px; font-variant-numeric:tabular-nums; }
.artifact-total-metrics #artpage-rank-badge,
#artpage-achievement-rates > div { font-size:clamp(20px,2vw,30px); font-weight:700; line-height:1.4; }
#artifact-settings > :nth-child(n+3) { grid-column:1/-1; }
.artifact-total-metrics small { font-size:12px; line-height:1.7; overflow-wrap:anywhere; }
.rv-default-config-table-wrap { width:100%; max-width:100%; }
.rv-default-config-table { width:100%; table-layout:fixed; border-collapse:collapse; font-size:11px; line-height:1.55; }
.rv-default-config-table :is(th,td) { padding:7px 6px; text-align:left; vertical-align:top; border-bottom:1px solid var(--panel-border); overflow-wrap:anywhere; }
.rv-default-config-table thead th { color:var(--palette-focus,var(--palette-ink)); font-weight:700; }
.rv-default-config-table tbody th { font-weight:600; }
.rv-default-config-table tbody tr.is-current-character { background:color-mix(in srgb,var(--palette-focus,#888) 10%,transparent); }
.rv-default-config-table :is(th,td):nth-child(1) { width:16%; }
.rv-default-config-table :is(th,td):nth-child(2) { width:20%; }
.rv-default-config-table :is(th,td):nth-child(3) { width:42%; }
.rv-default-config-table :is(th,td):nth-child(4) { width:14%; }
.rv-default-config-table :is(th,td):nth-child(5) { width:8%; text-align:center; }
.sidebar-drop-zone { display:none; }
.showcase-sidebar.is-empty .sidebar-drop-zone,
body.sidebar-dragging .sidebar-drop-zone { display:flex; align-items:center; justify-content:center; min-height:120px; margin:8px 0; padding:16px; border:2px dashed var(--panel-border); border-radius:14px; color:var(--palette-ink); background:var(--panel-bg); font-size:13px; }
body.sidebar-dragging .showcase-sidebar { min-height:160px; pointer-events:auto; }
.showcase-sidebar > [data-sidebar-panel], #left-sidebar-content > [data-sidebar-panel] { border-radius:14px; margin-bottom:12px; }
.sidebar-panel-handle { border:1px solid var(--panel-border); border-radius:6px; padding:3px 8px; cursor:grab; }
@media(min-width:1200px) {
    #artifacts-detailed-grid.grid { grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; }
}
@media(max-width:600px) {
    #artifact-settings { grid-template-columns:minmax(0,1fr); }
    .artifact-total-metrics { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
    .artifact-rank-summary { grid-column:1/-1; }
    .artifact-total-metrics > div { padding-left:8px; font-size:11px; }
}
.reaction-conditions { margin-top:16px; font-size:12px; line-height:1.7; overflow-wrap:anywhere; }
.reaction-conditions p { margin:8px 0; }
.artifact-calculator-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; }
.artifact-roll-editor { min-width:0; padding:10px; border:1px solid var(--panel-border); border-radius:10px; }
.artifact-roll-editor :is(select,input) { max-width:100%; min-width:0; }
.artifact-roll-editor .layer-control-row { display:flex; flex-direction:column; align-items:stretch; gap:4px; margin:6px 0; }
.artifact-roll-editor fieldset { min-width:0; margin:8px 0; padding:8px; border:1px solid var(--panel-border); }
.artifact-roll-editor output { display:block; overflow-wrap:anywhere; }
.artifact-roll-editor button { margin:4px; min-height:32px; }
@media(max-width:1199px) { .artifact-calculator-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:639px) { .artifact-calculator-grid { grid-template-columns:minmax(0,1fr); } }
html body #artifact-talent-comparison .talent-difference[data-direction="positive"] { color:#22c55e !important; }
html body #artifact-talent-comparison .talent-difference[data-direction="negative"] { color:#ef4444 !important; }
html body #artifact-talent-comparison .talent-difference[data-direction="zero"] { color:var(--text-muted) !important; }
html body #artifact-talent-comparison .wb-table :is(th,td):is(:nth-child(2),:nth-child(4),:nth-child(6)) { background-color:var(--comparison-before-bg,var(--page-bg)) !important; }
html body #artifact-talent-comparison .wb-table :is(th,td):is(:nth-child(3),:nth-child(5),:nth-child(7)) { background-color:var(--comparison-after-bg,var(--page-bg)) !important; }
.artifact-import-controls { display:flex; flex-wrap:wrap; align-items:end; gap:12px; margin:12px 0; }
.artifact-import-controls label { display:flex; flex-direction:column; gap:6px; min-width:0; }
.artifact-import-controls :is(input,select) { max-width:100%; box-sizing:border-box; }
.artifact-import-controls [role=status] { flex-basis:100%; overflow-wrap:anywhere; }