:root { --dual-left:280px; --dual-right:280px; }
#summary-rank-badge { display:none !important; }
@media(min-width:1280px) { .showcase-layout { grid-template-columns:var(--dual-left) minmax(0,1fr) var(--dual-right); gap:12px; padding:12px; } }
.dual-sidebar { border:1px solid var(--panel-border); background:var(--panel-bg); border-radius:12px; padding:6px; }
.dual-sidebar [data-sidebar-panel] { background:var(--panel-bg); color:var(--palette-ink); border:1px solid var(--panel-border); border-radius:10px; padding:10px; margin:0 0 12px; }
.dual-sidebar [data-sidebar-panel] > summary { font-weight:700; font-size:13px; line-height:1.6; cursor:pointer; }
.dual-panel-closed > :not(.dual-panel-actions):not(.sidebar-panel-handle):not(h2):not(h3) { display:none !important; }
.dual-sidebar .dual-panel-actions { padding:8px 0; border-top:1px solid var(--panel-border); flex-wrap:wrap; }
.dual-sidebar .dual-active,.dual-icons button:focus-visible { outline:2px solid var(--palette-focus,var(--panel-border)); background:color-mix(in srgb,var(--palette-ink) 8%,var(--panel-bg)); }
.dual-toggle,.dual-icons button,.dual-panel-actions button,.dual-mobile-bar button { min-height:44px; min-width:44px; border:1px solid var(--panel-border); border-radius:10px; color:var(--palette-ink); background:var(--panel-bg); cursor:pointer; }
.dual-toggle { width:100%; margin-bottom:8px; }
.dual-icons { display:flex; flex-wrap:wrap; gap:4px; margin-bottom:8px; }
.dual-collapsed .dual-sidebar-content { display:none; }
.dual-collapsed .dual-toggle { font-size:10px; min-width:0; }
.dual-panel-actions { display:flex; gap:4px; justify-content:flex-end; }
.dual-active { outline:2px solid var(--palette-focus,var(--panel-border)); outline-offset:-2px; }
.dual-sidebar { display:grid; grid-template-columns:48px minmax(0,1fr); gap:6px; align-content:start; }
.dual-toggle { grid-column:1/-1; position:sticky; top:0; z-index:5; background:var(--panel-bg); }
.dual-sidebar[data-side="right"] { grid-template-columns:minmax(0,1fr) 48px; }
.dual-sidebar[data-side="right"] > .dual-icons { grid-column:2; grid-row:2; }
.dual-sidebar[data-side="right"] > .dual-sidebar-content { grid-column:1; grid-row:2; }
.dual-sidebar[data-side="right"].dual-collapsed { grid-template-columns:48px; }
.dual-sidebar[data-side="right"].dual-collapsed > .dual-icons { grid-column:1; }
.dual-sidebar [data-sidebar-panel="true"] > summary::after { order:-1; margin-right:4px; }
.dual-icons { grid-column:1; flex-direction:column; flex-wrap:nowrap; align-self:start; position:sticky; top:58px; }
.dual-sidebar-content { grid-column:2; min-width:0; }
.dual-collapsed { grid-template-columns:48px; }
.photoshop-layers .layer-list { padding:0; margin:0; }
#card-layout-layers > .layer-list { max-height:55vh; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; }
#card-layout-layers > select { width:100%; height:32px; margin-bottom:8px; }
#card-layout-layers .layer-branch[hidden] { display:none !important; }
#card-layout-layers fieldset { min-width:0; }
#card-layout-layers fieldset .layer-control-row { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
#card-layout-layers fieldset select { width:170px; max-width:100%; min-height:25px; }
#card-layout-layers fieldset label:has(input[type="checkbox"]) { flex-wrap:nowrap; }
@media(max-width:767px) { #card-layout-layers > .layer-list { max-height:45dvh; } }
.photoshop-layers .layer-branch { border:0; border-bottom:1px solid var(--panel-border); border-radius:0; background:transparent; }
.photoshop-layers .layer-row { display:flex; align-items:center; gap:5px; padding:6px 2px; min-height:40px; }
.photoshop-layers .layer-row.is-selected { background:color-mix(in srgb,var(--palette-focus,var(--panel-border)) 25%,var(--panel-bg)); }
.photoshop-layers .layer-name { flex:1; min-width:0; text-align:left; font-size:12px; background:transparent; color:var(--palette-ink); overflow-wrap:anywhere; }
.photoshop-layers .layer-thumbnail { width:28px; height:28px; object-fit:contain; border:1px solid var(--panel-border); }
.photoshop-layers .layer-eye { appearance:none; width:20px; height:20px; flex:0 0 20px; border:1px solid var(--panel-border); border-radius:50%; background:transparent; }
.photoshop-layers .layer-eye:checked { background:var(--palette-focus,var(--panel-border)); box-shadow:inset 0 0 0 5px var(--panel-bg); }
.photoshop-layers .layer-lock { font-size:10px; padding:3px; background:var(--panel-bg); color:var(--palette-ink); border:1px solid var(--panel-border); }
.photoshop-layers .layer-controls-box { background:var(--panel-bg); border:0; border-left:2px solid var(--panel-border); margin-left:12px; padding:8px; }
.photoshop-layers input[type="search"] { width:100%; padding:8px; border:1px solid var(--panel-border); background:var(--panel-bg); color:var(--palette-ink); }
.dual-mobile-bar,.dual-backdrop { display:none; }
.dual-icons button[aria-pressed="true"],.dual-sidebar [data-sidebar-panel].dual-active { background:color-mix(in srgb,var(--palette-focus) 22%,var(--panel-bg)) !important; border-color:var(--palette-focus) !important; color:var(--palette-ink) !important; }
#card-layout-layers .layer-control-row:has(input[type="checkbox"]) { display:flex; flex-direction:row; justify-content:flex-start; align-items:center; gap:8px; }
#card-layout-layers .layer-control-row input[type="checkbox"] { order:-1; }
#card-layout-layers .layer-list summary { font-size:12px; }
#constellations-page-section .wb-description,#talents-page-section .wb-description { font-size:12px; line-height:1.65; }
#artifacts-page-section .artifact-table-wrap :is(th,td) { vertical-align:middle; }
.dual-sidebar [data-sidebar-panel="true"] > summary { display:none !important; }
.dual-icons button { display:flex; flex-direction:column; align-items:center; gap:3px; padding:5px 2px; }
.dual-icons button small { font-size:9px; line-height:1.3; overflow-wrap:anywhere; }
.dual-icons button[aria-pressed="true"] { background:var(--palette-selected,var(--panel-bg)) !important; border-color:var(--palette-focus,var(--panel-border)); color:var(--palette-ink); }
#search-btn { background:var(--palette-selected,var(--panel-bg)) !important; color:var(--palette-ink) !important; box-shadow:none !important; }
#search-btn::before { content:'⌕'; font-size:18px; }
#card-layout-layers > .wb-note { display:none; }
#card-layout-layers input[type="search"],#card-layout-layers select[aria-label="背景透明度の適用"] { width:170px; max-width:100%; height:25px; min-height:25px; padding:2px 5px; font-size:12px; box-sizing:border-box; }
#card-layout-layers .layer-controls-box,#card-layout-layers .layer-controls-box > div { background:transparent !important; box-shadow:none; }
#card-layout-layers .layer-control-row:has(input[type="range"]) { display:grid; grid-template-columns:minmax(0,1fr) auto; }
#card-layout-layers .layer-control-row input[type="range"] { grid-column:1/-1; grid-row:2; width:100%; }
#card-layout-layers .layer-control-row output { grid-column:2; grid-row:1; text-align:right; }
#card-layout-layers input[type="checkbox"] { appearance:none; flex-shrink:0; width:18px; height:18px; border:1px solid var(--panel-border); border-radius:50%; background:transparent; }
#card-layout-layers input[type="checkbox"]:checked { background:var(--palette-focus,var(--palette-ink)); box-shadow:inset 0 0 0 4px var(--panel-bg); }
.genshin-term-link { background:transparent !important; box-shadow:none !important; border:0 !important; }
.team-slot-badge { background:var(--accent-green) !important; color:var(--palette-ink) !important; border:1px solid var(--palette-focus,var(--panel-border)); font-weight:700; }
.dual-sidebar .dual-icons button[aria-pressed="true"],#sidebar-uid-search #search-btn { background:var(--accent-green) !important; color:var(--palette-ink) !important; }
#rv-achievement { line-height:1.8; overflow-wrap:anywhere; }
#stats-list[style*="font-family"] .font-mono { font-family:inherit; }
.card-layout-box[data-layout-key="combat-talents"] .card-layout-background,
.card-layout-box[data-layout-key="passive-talents"] .card-layout-background { display:none !important; }
.card-layout-box[data-layout-key="combat-talents"] > .card-layout-content,
.card-layout-box[data-layout-key="passive-talents"] > .card-layout-content { background:transparent !important; border:0 !important; }
.dual-unselected { display:none !important; }
html body #build-card :is(#weapon-icon,.card-weapon-icon,[data-original-id="weapon-icon"]) { width:var(--weapon-icon-size,150px) !important; height:var(--weapon-icon-size,150px) !important; object-fit:contain; }
#build-card [data-artifact-metric-rank="cv"] { display:var(--rank-cv-display,inline); }
#build-card [data-artifact-metric-rank="rv"] { display:var(--rank-rv-display,inline); }
#build-card [data-artifact-metric-rank="score"] { display:var(--rank-score-display,inline); }
#card-layout-layers .layer-control-row { gap:6px; }
#sidebar-uid-search #search-form,#sidebar-uid-search #uid-input { width:100% !important; max-width:none !important; }
html[data-color-mode="dark"] body .team-slot-badge { background:#0f172a !important; color:#fff !important; border-color:#94a3b8 !important; text-shadow:none !important; }
#card-background-adjustment { padding:0; border:0; border-top:1px solid var(--panel-border); border-radius:0; background:transparent; margin-top:16px; }
#card-background-adjustment > summary { list-style:none; cursor:default; font-size:inherit; font-weight:700; }
#card-background-adjustment > summary::after { content:none; }
#card-layout-layers .layer-row { min-width:0; flex-wrap:wrap; }
#card-layout-layers .layer-name { white-space:normal; overflow-wrap:anywhere; }
#card-layout-layers .layer-control-row > :is(select,input[type="number"]) { width:100%; flex-basis:100%; }
#card-layout-layers .layer-controls-box > :is(label,div) { min-width:0; width:auto; max-width:100%; }
.dual-sidebar-content > *,#card-layout-layers,#card-layout-layers .layer-branch,#card-layout-layers .layer-controls-box { min-width:0; max-width:100%; box-sizing:border-box; }
#card-layout-layers .layer-controls-box { margin-left:4px; padding:6px 2px; }
#card-layout-layers :is(select,input:not([type="checkbox"]),button) { min-width:0; max-width:100%; box-sizing:border-box; }
#card-layout-layers .layer-control-row { flex-wrap:wrap; overflow-wrap:anywhere; }
#sidebar-uid-search > div { width:100%; max-width:none; }
html body .team-slot-badge { text-shadow:none !important; filter:none !important; opacity:1 !important; font-family:Arial,sans-serif !important; font-weight:700 !important; -webkit-text-stroke:0; font-synthesis:none; font-size:12px; line-height:1.2; }
#sidebar-uid-search #sidebar-history { margin-top:16px; padding-top:8px; border-top:1px solid var(--panel-border); }
#sidebar-uid-search #sidebar-history > summary { display:list-item !important; font-size:12px; cursor:pointer; }
#sidebar-uid-search #sidebar-history > summary { list-style:none; cursor:default; }
#sidebar-uid-search #sidebar-history > summary::after { content:none; }
#sidebar-uid-search #search-form { width:100%; height:36px; }
#sidebar-uid-search #uid-input { height:36px; padding-right:40px; }
#sidebar-uid-search #search-btn { height:36px; width:36px; }
html body .card-layout-box[data-layout-key="constellations"] > .card-layout-background { display:block !important; }
html body #build-card :is(#char-friendship-badge,[data-original-id="char-friendship-badge"]) img { width:1.1em !important; height:1.1em !important; }
html body #build-card :is(#char-level,#char-max-level,[data-original-id="char-level"],[data-original-id="char-max-level"]) { font-size:inherit !important; }
html body #build-card .const-node { width:var(--constellation-size,60px) !important; height:var(--constellation-size,60px) !important; min-width:var(--constellation-size,60px); }
html body #build-card .const-node > img { width:100%; height:100%; }
html body #build-card :is(#talents-list,[data-layout-key="combat-talents"]) .text-center { background:transparent !important; border:0 !important; box-shadow:none !important; align-self:stretch; display:grid; grid-template-rows:auto 1fr auto; justify-items:center; gap:4px; }
html body #build-card [data-layout-key="combat-talents"] .grid { align-items:stretch; }
html body #build-card :is(#stats-list,[data-original-id="stats-list"]) .card-stat-row { padding-block:var(--stat-row-gap,6px) !important; margin:0 !important; }
html body .team-slot-badge { background:color-mix(in srgb,var(--accent-green) 15%,white) !important; color:#17212b !important; }
html body #build-card :is(#card-constellations .const-node,.constellation-layer .const-node) { background:color-mix(in srgb,var(--accent-green) 45%,#263240) !important; border-color:var(--accent-green) !important; }
.melody-rv-inputs { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); gap:12px; margin-block:16px; }
.melody-rv-inputs label { display:flex; flex-direction:column; gap:6px; }
.melody-rv-inputs input[type="range"] { width:100%; accent-color:var(--accent-green); }
.melody-rv-total { font-size:clamp(16px,2vw,24px); font-weight:700; margin-block:12px; }
.melody-rv-breakdown { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; }
.melody-rv-breakdown dd { margin:0; text-align:right; font-variant-numeric:tabular-nums; }
.melody-rv button { margin:8px 8px 8px 0; }
#build-card.custom-card-weight :is(span,strong,b,h3,h4,p,div) { font-weight:var(--custom-card-weight) !important; }
html.custom-ui-weight body :is(span,strong,b,h1,h2,h3,h4,p,div,label,button,input,select,textarea,td,th,output,summary,small) { font-weight:var(--custom-card-weight) !important; }
body,body * { font-synthesis:var(--configured-font-synthesis,weight); }
#font-live-preview { font-size:18px; line-height:1.8; overflow-wrap:anywhere; }
#font-settings-result,#font-copy-status { display:block; white-space:pre-wrap; overflow-wrap:anywhere; }
.dual-sidebar [data-sidebar-panel].dual-active { background:var(--panel-bg) !important; outline:none; border-color:var(--panel-border) !important; color:var(--text-primary,inherit) !important; }
#card-layout-layers .layer-control-row input[type="checkbox"] { border-radius:50% / 70%; width:22px; height:15px; background:transparent; box-shadow:none; }
#card-layout-layers .layer-control-row input[type="checkbox"]:checked { background:radial-gradient(circle,var(--accent-green) 0 3px,transparent 4px); box-shadow:none; }
#card-layout-layers .layer-controls-box > div { border:0; }
#talent-table .wb-description,[data-passive-panel] .wb-description { font-size:12px; line-height:1.65; }
#artifacts-page-section #detailed-stats-summary-tbody tr { display:table-row; }
#artifacts-page-section #detailed-stats-summary-tbody td { display:table-cell; padding:8px; border-bottom:1px solid var(--panel-border); vertical-align:middle; }
.dual-icons [aria-pressed="true"] { background:var(--palette-selected,var(--panel-bg)); outline:2px solid var(--palette-focus,var(--panel-border)); outline-offset:-2px; }
#sidebar-uid-search #search-form { position:relative; width:147px; max-width:100%; height:25px; display:block; margin:8px 0 0; }
#sidebar-uid-search #search-form > div { height:100%; }
#sidebar-uid-search #uid-input { width:100%; height:25px; min-height:0; padding:2px 25px 2px 5px; font-size:11px; border-radius:6px; }
#sidebar-uid-search #search-btn { position:absolute; right:0; top:0; width:25px; height:25px; min-height:0; min-width:0; padding:0; border-radius:0 6px 6px 0; }
.showcase-sidebar.dual-sidebar { grid-template-rows:44px minmax(0,1fr); height:max(160px,calc(100dvh - var(--header-offset) - 40px)); overflow:hidden; align-content:stretch; }
.dual-sidebar > .dual-toggle { position:static; margin:0; height:44px; }
.dual-sidebar > .dual-icons { position:static; min-height:0; max-height:100%; overflow-y:auto; margin:0; align-self:stretch; }
.dual-sidebar > .dual-sidebar-content { min-height:0; overflow-y:auto; overflow-x:hidden; padding-top:8px; overscroll-behavior:contain; }
.dual-sidebar [data-sidebar-panel="true"] > summary { width:200px; max-width:100%; height:25px; min-height:25px; padding:0 4px; box-sizing:border-box; font-size:12px; line-height:25px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dual-sidebar [data-sidebar-drag] { cursor:grab; }
.dual-sidebar [data-sidebar-drag]:active { cursor:grabbing; }
@media(max-width:1279px) {
 .showcase-layout { display:block; padding-bottom:70px; }
 .dual-sidebar { display:none; position:fixed; top:var(--header-offset); bottom:0; width:min(86vw,360px); max-height:none; overflow-y:auto; z-index:10002; }
 .showcase-sidebar.dual-sidebar { height:calc(100dvh - var(--header-offset)); overflow:hidden; }
 .dual-sidebar[data-side="left"] { left:0; }
 .dual-sidebar[data-side="right"] { right:0; }
 .dual-sidebar.drawer-open { display:grid; grid-template-columns:48px minmax(0,1fr); }
 .dual-sidebar[data-side="right"].drawer-open { grid-template-columns:minmax(0,1fr) 48px; }
 .dual-sidebar[data-side="right"].drawer-open > .dual-icons { grid-column:2; }
 .dual-sidebar.drawer-open .dual-sidebar-content { display:block; }
 .dual-mobile-bar { position:fixed; bottom:0; left:0; right:0; display:flex; justify-content:space-between; padding:8px 12px calc(8px + env(safe-area-inset-bottom)); background:var(--panel-bg); z-index:10000; }
 .dual-backdrop:not([hidden]) { display:block; position:fixed; inset:0; border:0; background:rgb(0 0 0 / .35); z-index:10001; }
}

/* Both rails and their detail panes derive every UI color from PCCS. */
html body :is(.sidebar-left,.sidebar-right,#palette-sidebar).dual-sidebar {
 --dual-rail-width:64px;
 --dual-bg:var(--panel-bg);
 --dual-rail-bg:var(--inset-bg);
 --dual-hover:var(--palette-selected);
 --dual-text:var(--text-main);
 background:var(--dual-bg) !important; color:var(--dual-text);
 grid-template-columns:var(--dual-rail-width) minmax(0,1fr);
 border-color:var(--panel-border); border-radius:12px;
}
html body :is(.sidebar-left,.sidebar-right,#palette-sidebar).dual-sidebar[data-side="right"] { grid-template-columns:minmax(0,1fr) var(--dual-rail-width); }
html body :is(.sidebar-left,.sidebar-right,#palette-sidebar).dual-sidebar.dual-collapsed { --dual-rail-width:48px; grid-template-columns:var(--dual-rail-width); }
html body .dual-sidebar > .dual-icons {
 width:var(--dual-rail-width); padding:8px 4px; gap:5px; box-sizing:border-box;
 background:var(--dual-rail-bg); border-radius:8px; scrollbar-width:thin;
}
html body .dual-sidebar .dual-icons > button {
 min-height:48px; width:100%; min-width:0; padding:8px 4px; border:0;
 border-radius:10px; background:transparent; color:var(--dual-text) !important;
 cursor:grab; transition:background 160ms ease;
}
html body .dual-sidebar .dual-icons > button:hover,
html body .dual-sidebar .dual-icons > button[aria-pressed="true"] {
 background:var(--dual-hover) !important; color:var(--palette-focus) !important;
}
html body .dual-sidebar .dual-icons > button[aria-pressed="true"] { box-shadow:inset 3px 0 var(--accent-green); }
html body .dual-sidebar[data-side="right"] .dual-icons > button[aria-pressed="true"] { box-shadow:inset -3px 0 var(--accent-green); }
html body .dual-icons button > img { width:26px; height:26px; object-fit:contain; pointer-events:none; }
html body .dual-icons button > small { display:block; width:100%; font-size:9px; line-height:1.4; text-align:center; white-space:normal; overflow-wrap:anywhere; }
html body .dual-sidebar > .dual-sidebar-content {
 width:100%; min-width:0; background:var(--dual-bg); scrollbar-width:thin;
}
html body .dual-sidebar > .dual-toggle { background:var(--dual-rail-bg); color:var(--text-main) !important; z-index:30; }
@media(max-width:1279px) {
 html body :is(.sidebar-left,.sidebar-right,#palette-sidebar).dual-sidebar.drawer-open { --dual-rail-width:64px; grid-template-columns:var(--dual-rail-width) minmax(0,1fr); }
 html body :is(.sidebar-left,.sidebar-right,#palette-sidebar).dual-sidebar[data-side="right"].drawer-open { grid-template-columns:minmax(0,1fr) var(--dual-rail-width); }
}