.wb-panel { background:var(--panel-bg); border:1px solid var(--panel-border); border-radius:18px; padding:20px; margin-bottom:16px; }
input[type="checkbox"] { appearance:none; width:36px!important; height:20px!important; min-width:36px!important; padding:0!important; border:1px solid var(--panel-border)!important; border-radius:20px!important; background:#69727b!important; position:relative; cursor:pointer; vertical-align:middle; }
input[type="checkbox"]::before { content:''; position:absolute; width:14px; height:14px; border-radius:50%; background:white; top:2px; left:2px; transition:transform .15s; }
input[type="checkbox"]:checked { background:var(--palette-focus)!important; }
input[type="checkbox"]:checked::before { transform:translateX(16px); }
input[type="checkbox"]:indeterminate { background:var(--palette-focus)!important; }
input[type="checkbox"]:indeterminate::before { transform:translateX(8px); }
input[type="checkbox"]:disabled { opacity:.45; cursor:not-allowed; }
.history-profile { display:grid; grid-template-columns:90px 1fr; gap:18px; padding:16px; }
.history-profile img { width:80px; height:80px; object-fit:cover; border-radius:14px; }
.history-profile h3 { font-size:20px; font-weight:700; }
.history-profile p { margin:8px 0; }
.history-progress { display:flex; flex-wrap:wrap; gap:12px; font-size:12px; }
html[data-color-mode="light"] #talents-list img { background:#55505d; padding:4px; border-radius:8px; }
.export-desktop > .grid { display:grid!important; grid-template-columns:repeat(12,minmax(0,1fr))!important; }
.export-desktop > .grid > div { grid-column:span 4 / span 4!important; }
.export-desktop,.export-desktop * { backdrop-filter:none!important; box-shadow:none!important; text-shadow:none!important; }
.export-desktop .intro-favorites { grid-template-columns:repeat(4,minmax(0,1fr))!important; }
.wb-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; }
.wb-panel h2,.wb-panel h3 { font-weight:700; margin-bottom:12px; }
.wb-panel label { display:flex; flex-direction:column; gap:5px; font-size:12px; }
.wb-panel input,.wb-panel select,.wb-panel textarea { border:1px solid var(--panel-border); border-radius:8px; padding:8px; min-width:0; max-width:100%; }
.wb-panel button { border:1px solid var(--panel-border); background:var(--palette-selected); border-radius:8px; padding:8px 12px; margin:4px; font-size:12px; }
.wb-table { width:100%; border-collapse:collapse; font-size:12px; }
.wb-table td,.wb-table th { padding:8px; border-bottom:1px solid var(--panel-border); text-align:left; }
.wb-table input { width:100px; }
.wb-scroll { overflow:auto; }
#effect-sidebar { min-width:0; padding:12px; }
#effect-sidebar summary { cursor:pointer; font-weight:600; }
.effect-sidebar-list { display:grid; gap:10px; margin-top:12px; }
.effect-sidebar-list label { display:flex; flex-direction:row; flex-wrap:nowrap; align-items:center; gap:8px; min-width:0; }
.effect-sidebar-list span { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:inherit; }
#effect-sidebar .effect-sidebar-list { font-size:12px; }
#effect-sidebar .effect-sidebar-list summary, #effect-sidebar .effect-sidebar-list label { font-size:inherit; }
.effect-sidebar-list input { flex:0 0 18px; width:18px; margin:0; accent-color:var(--accent-green); }
.support-disclosure { margin-top:12px; min-width:0; }
.support-disclosure > summary { cursor:pointer; padding:10px 0; font-weight:600; }
.support-table { min-width:1140px; table-layout:fixed; }
.support-table th { white-space:normal; overflow-wrap:anywhere; }
.support-table :is(input:not([type="checkbox"]),select) { width:100%; min-width:0; box-sizing:border-box; }
.support-table input[type="checkbox"] { width:18px; }
.support-table :is(th,td):first-child { width:48px; }
.support-table :is(th,td):nth-child(2) { width:180px; }
.support-table :is(th,td):nth-child(3),.support-table :is(th,td):nth-child(4) { width:140px; }
.support-table :is(th,td):nth-child(6),.support-table :is(th,td):last-child { width:60px; }
.support-table .support-group-heading th { width:auto; }
.wb-note { font-size:12px; line-height:1.8; margin:10px 0; }
.wb-description { white-space:pre-line; font-size:12px; line-height:1.8; }
#intro-card { position:relative; overflow:hidden; border-radius:20px; padding:32px; background:var(--panel-bg); border:1px solid var(--panel-border); }
#intro-card h2 { font-size:28px; }
#intro-card .intro-content { position:relative; z-index:1; background:var(--panel-bg); padding:20px; border-radius:16px; }
#intro-card .intro-favorites { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-top:20px; }
#intro-card img { width:72px; height:72px; object-fit:cover; border-radius:12px; }
.wb-image-layer { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none; }
#build-card { position:relative; overflow:hidden; }
#build-card > .grid { position:relative; }
dialog.wb-panel { width:min(600px,95vw); max-height:90vh; color:var(--text-main); }
dialog.wb-panel::backdrop { background:rgba(0,0,0,.55); }
.constellation-overview-layout { display:grid; grid-template-columns:minmax(180px,30%) minmax(0,1fr); gap:20px; align-items:start; }
.constellation-overview-layout figure { margin:0; padding:16px; border-radius:16px; background:var(--panel-bg); color:var(--text-main); }
.constellation-overview-layout figure img { width:100%; height:340px; object-fit:contain; }
.constellation-overview-layout figcaption { text-align:center; font-size:12px; }
@media(max-width:600px) { .constellation-overview-layout { grid-template-columns:1fr; } .constellation-overview-layout figure img { height:220px; } }
@media(max-width:600px) { .wb-panel { padding:12px; } #intro-card { padding:12px; } #intro-card .intro-favorites { grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* Additional-effects table: 2-line rows (paired cells stacked) */
.wb-table.effect-table-compact { min-width: 940px; table-layout: fixed; }
.wb-table.effect-table-compact :is(input:not([type="checkbox"]), select) { width: 100%; min-width: 0; box-sizing: border-box; }
.wb-table.effect-table-compact td, .wb-table.effect-table-compact th { vertical-align: middle; }
.wb-table.effect-table-compact :is(th, td):nth-child(1) { width: 48px; }
.wb-table.effect-table-compact :is(th, td):nth-child(2) { width: 200px; }
.wb-table.effect-table-compact :is(th, td):nth-child(3) { width: 150px; }
.wb-table.effect-table-compact :is(th, td):nth-child(4) { width: 150px; }
.wb-table.effect-table-compact :is(th, td):nth-child(5) { width: 110px; }
.wb-table.effect-table-compact :is(th, td):nth-child(6) { width: 140px; }
.wb-table.effect-table-compact :is(th, td):nth-child(7) { width: 130px; }
.wb-table.effect-table-compact :is(th, td):nth-child(8) { width: 56px; }
.wb-table.effect-table-compact .pair-cell { padding-top: 4px; padding-bottom: 4px; }
.wb-table.effect-table-compact .pair-line { display: block; }
.wb-table.effect-table-compact .pair-line + .pair-line { margin-top: 4px; }
.wb-table.effect-table-compact [data-label]::before { content: attr(data-label); display: block; font-size: 10px; opacity: .65; line-height: 1.2; }
.wb-table.effect-table-compact td[data-label]:not(.pair-cell)::before { margin-bottom: 2px; }
.wb-table.effect-table-compact .support-group-heading th { width: auto; }

/* PCCS combat timeline; the previous design switcher is no longer used. */
.combat-timeline-editor { --studio-accent:var(--accent-green); }
.combat-design-bar { display:flex; flex-wrap:wrap; align-items:center; gap:16px; padding:16px 0; }
.combat-design-bar > div { flex:1; min-width:200px; }
.combat-design-bar small { letter-spacing:.15em; color:var(--accent-green); font-weight:700; }
.combat-design-bar h3 { font-size:20px; margin:6px 0; }
.combat-design-bar label { display:grid; gap:6px; }
.effect-definition-table { min-width:1900px; table-layout:auto; }
.effect-definition-table td { vertical-align:top; min-width:130px; }
.effect-definition-table td:first-child,.effect-definition-table td:last-child { min-width:44px; }
.effect-definition-table td:nth-child(3) { min-width:230px; max-width:290px; }
.effect-definition-table input,.effect-definition-table select { width:100%; min-height:34px; margin:3px 0; }
.effect-definition-table input[type=checkbox] { width:36px !important; height:20px !important; min-height:20px !important; max-height:20px; box-sizing:content-box; }
.effect-definition-table details p { max-width:280px; white-space:normal; overflow-wrap:anywhere; }
.effect-definition-table details label { display:block; margin:8px 0; }
#damage-audit-panel output { display:block; padding:12px 0; font-variant-numeric:tabular-nums; }
.combat-chart-heading { display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; padding:18px 0; }
#combat-dps-chart { color:var(--accent-green); }
#combat-dps-chart svg { width:100%; height:auto; display:block; }
.combat-timeline-editor #frame-dps { display:block; padding:12px 0; font-variant-numeric:tabular-nums; }
.combat-timeline-editor #frame-dps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.combat-timeline-editor #frame-dps > span { padding:10px; border:1px solid var(--panel-border); border-radius:8px; overflow-wrap:anywhere; }
.combat-timeline-editor .fm-name { white-space:normal; line-height:1.3; }
@media(max-width:767px){.combat-timeline-editor #frame-dps{grid-template-columns:repeat(2,minmax(0,1fr))}.combat-timeline-editor .fm-side{max-width:42vw}.combat-timeline-editor .fm-skill-icons{display:none}}
@media(max-width:767px){.combat-design-bar select{min-height:44px}.combat-design-bar h3{font-size:18px}}

/* Additional effects: concise seven-column overview with the full editor kept on its row. */
.effect-list-scroll { width:100%; max-width:100%; overflow-x:hidden; overflow-y:visible; }
.wb-table.effect-list-table { width:100%; min-width:0; table-layout:fixed; }
.effect-list-table :is(th,td) { min-width:0; vertical-align:middle; overflow-wrap:anywhere; }
.wb-table.effect-list-table td:nth-child(3) { min-width:0; max-width:none; }
.effect-list-table :is(th,td):nth-child(1) { width:6%; }
.effect-list-table :is(th,td):nth-child(2) { width:12%; }
.effect-list-table :is(th,td):nth-child(3) { width:17%; }
.effect-list-table :is(th,td):nth-child(4) { width:20%; }
.effect-list-table :is(th,td):nth-child(5) { width:19%; }
.effect-list-table :is(th,td):nth-child(6) { width:11%; }
.effect-list-table :is(th,td):nth-child(7) { width:15%; }
.effect-list-table td > [data-summary] { display:block; overflow-wrap:anywhere; }
.effect-list-table .effect-type-badge { display:inline-block; margin-top:5px; padding:2px 7px; border-radius:999px; background:var(--palette-selected); color:var(--text-main); font-size:10px; }
.effect-actions-cell { min-width:0; }
.effect-actions-cell > [data-summary] { margin-bottom:5px; font-size:11px; }
.effect-edit-button { color:var(--palette-focus)!important; font-weight:700; white-space:nowrap; }
.effect-editor-dialog { width:min(900px,calc(100vw - 32px)); max-width:none; max-height:min(88vh,900px); overflow:auto; padding:20px; border:1px solid var(--panel-border); border-radius:16px; background:var(--panel-bg); color:var(--text-main); box-shadow:0 20px 70px #0008; }
.effect-editor-dialog::backdrop { background:rgba(8,7,12,.68); backdrop-filter:blur(3px); }
.effect-editor-panel { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; width:100%; min-width:0; padding:0; }
.effect-editor-header { display:flex; grid-column:1 / -1; align-items:center; justify-content:space-between; gap:12px; min-width:0; }
.effect-editor-header h4 { min-width:0; margin:0; overflow-wrap:anywhere; }
.effect-editor-header .effect-editor-close { flex:0 0 auto; }
.effect-editor-section { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-content:start; gap:8px; min-width:0; margin:0; padding:10px; border:1px solid var(--panel-border); border-radius:10px; }
.effect-editor-section legend { padding:0 5px; font-size:12px; font-weight:700; }
.effect-editor-field { display:grid; grid-template-columns:minmax(0,1fr); gap:4px; min-width:0; font-size:11px; }
.effect-editor-field > span { overflow-wrap:anywhere; }
.effect-editor-panel :is(input:not([type=checkbox]),select) { width:100%; min-width:0; box-sizing:border-box; }
.effect-editor-panel select[multiple] { min-height:78px; }
.effect-editor-panel .effect-original-disclosure { grid-column:1/-1; }
.effect-editor-panel .effect-original-disclosure p { max-height:180px; overflow:auto; white-space:pre-wrap; overflow-wrap:anywhere; }
.effect-editor-panel .wb-note,.effect-editor-panel .effect-remove-button { grid-column:1/-1; }
.effect-editor-panel .effect-remove-button { justify-self:start; }
.effect-editor-panel [data-calculation-status="memo-only"] { opacity:.75; }
@media(max-width:767px) {
  .wb-table.effect-list-table { display:block; }
  .wb-table.effect-list-table thead { display:none; }
  .wb-table.effect-list-table tbody { display:grid; gap:10px; }
  .wb-table.effect-list-table tbody > tr:not(.support-group-heading) { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); min-width:0; border:1px solid var(--panel-border); border-radius:10px; padding:6px; }
  .wb-table.effect-list-table tbody > tr.support-group-heading { display:block; }
  .wb-table.effect-list-table tbody > tr.support-group-heading th { display:block; width:100%; }
  .wb-table.effect-list-table td { display:block; min-width:0; width:auto!important; padding:6px; border:0; }
  .wb-table.effect-list-table td[data-label]::before { content:attr(data-label); display:block; margin-bottom:3px; font-size:10px; opacity:.7; }
  .wb-table.effect-list-table td:first-child { display:flex; align-items:center; gap:6px; }
  .wb-table.effect-list-table td:first-child::before { margin:0; }
  .effect-editor-dialog { width:calc(100vw - 20px); max-height:92vh; padding:12px; }
  .effect-editor-panel { grid-template-columns:1fr; }
  .effect-editor-section { grid-template-columns:1fr; }
  .effect-editor-panel .effect-editor-header,.effect-editor-panel .effect-original-disclosure,.effect-editor-panel .wb-note,.effect-editor-panel .effect-remove-button { grid-column:1; }
}