:root { --sidebar-left-width: 260px; --header-offset: 0px; --showcase-columns: var(--sidebar-left-width) minmax(0, 1fr) 240px; }
:root.left-sidebar-collapsed { --sidebar-left-width: 64px; }
.showcase-layout {
    display: grid;
    grid-template-columns: var(--showcase-columns);
    align-items: start;
    gap: 20px;
    width: 100%;
    padding: 20px;
    flex: 1;
}
.showcase-content { min-width: 0; width: 100%; }
/* Wait for saved panel selection before exposing the initial sidebar contents. */
html[data-palette]:not(.sidebars-ready) .showcase-sidebar { visibility:hidden; }
.showcase-sidebar {
    min-width: 0;
    position: sticky;
    top: calc(var(--header-offset) + 20px);
    max-height: max(80px, calc(100dvh - var(--header-offset) - 40px));
    overflow-y: auto;
    scrollbar-width: thin;
    overscroll-behavior: contain;
}
.sidebar-left > section, #left-sidebar-content > section { margin-bottom: 18px; }
.sidebar-collapse-toggle { width: 100%; min-height: 40px; margin-bottom: 12px; border: 1px solid var(--panel-border); background: var(--panel-bg); border-radius: 10px; cursor: pointer; font-size: 12px; }
.sidebar-collapse-toggle:focus-visible { outline: 2px solid var(--palette-focus); outline-offset: 2px; }
#left-sidebar-content[hidden] { display: none !important; }
.left-sidebar-collapsed .site-brand span { display: none; }
.sidebar-left #search-form { flex-direction: column; }
.sidebar-left #uid-input { padding-left: 12px; min-width: 0; }
.sidebar-left #uid-history { padding: 12px; border: 1px solid var(--panel-border); border-radius: 14px; background: var(--panel-bg); }
.sidebar-left .history-profile { display: flex; flex-direction: column; gap: 10px; }
.sidebar-left .history-profile > div { min-width: 0; overflow-wrap: anywhere; }
.sidebar-left .history-progress { display: grid; grid-template-columns: 1fr; }
:is(.sidebar-left,.sidebar-right) .palette-picker { display: flex; flex-direction: column; align-items: stretch; margin: 0; }
:is(.sidebar-left,.sidebar-right) .palette-picker > div:first-child { margin: 0; }
:is(.sidebar-left,.sidebar-right) .palette-picker select, :is(.sidebar-left,.sidebar-right) .palette-picker input[type="range"] { width: 100%; min-width: 0; }
:is(.sidebar-left,.sidebar-right) .palette-swatches { display: grid; grid-template-columns: repeat(6, minmax(24px, 1fr)); width: 100%; margin: 0; gap: 8px; }
:is(.sidebar-left,.sidebar-right) .palette-swatches button { justify-self: center; }
:is(.sidebar-left,.sidebar-right) .palette-swatches.color-control-palette { grid-template-columns: repeat(6,24px); grid-template-rows:repeat(4,24px); width:min(182px,100%); height:120px; gap:8px 0; justify-content:space-between; }
:is(.sidebar-left,.sidebar-right) .mode-toggle { align-self: flex-start; }
@media (max-width: 1199px) {
    :root { --sidebar-left-width: 220px; --showcase-columns: var(--sidebar-left-width) minmax(0, 1fr); }
    .sidebar-right { grid-column: 1; grid-row: 2; position: static; max-height: none; }
    .showcase-content { grid-column: 2; grid-row: 1 / span 2; }
    .sidebar-left { position: static; max-height: none; }
}
@media (max-width: 760px) {
    .showcase-layout { display: flex; flex-direction: column; padding: 12px; gap: 16px; }
    .showcase-sidebar { position: static; width: 100%; max-height: none; overflow: visible; overscroll-behavior: auto; }
    .sidebar-left { order: 0; }
    .sidebar-right { order: 1; }
    .showcase-content { order: 2; }
    .sidebar-left #uid-history { max-height: none; overflow: visible; }
}

#effect-sidebar > summary { font-size:calc(13px + var(--font-size-adjustment, 0px)); font-weight:700; }
#character-history > summary { font-size: .75rem; }
.constellation-map { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; margin:16px 0; }
.constellation-node { display:flex; flex-direction:column; align-items:center; gap:6px; border:1px solid var(--panel-border); border-radius:16px; padding:10px; font-size:12px; }
.constellation-node img, #constellation-page-section .wb-panel > img { border-radius:50%; background:var(--panel-bg); border:1px solid var(--panel-border); padding:6px; object-fit:contain; }
.constellation-node .talent-detail-icon { background:var(--panel-bg); margin:0; width:64px; height:64px; }
.constellation-node[aria-pressed="true"] { outline:3px solid var(--palette-focus, #479ac2); outline-offset:2px; }
.constellation-node.is-owned img { opacity:.65; }
.constellation-node.is-locked img { filter:grayscale(1); opacity:.4; }
[data-constellation-panel][hidden] { display:none !important; }
[data-passive-panel][hidden], #talent-table > details[hidden] { display:none !important; }
.calculation-team-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.calculation-team-grid fieldset { min-width:0; border:1px solid var(--panel-border); padding:10px; }
.calculation-team-grid label, #calculation-team > label { display:flex; align-items:center; gap:6px; margin:8px 0; }
.calculation-team-grid select, .calculation-team-grid input[type="range"] { width:100%; min-width:0; }
.calculation-team-effects { margin-top:14px; padding-top:10px; border-top:1px solid var(--panel-border); }
.calculation-team-effects > summary { cursor:pointer; font-weight:700; }
.calculation-team-effect { padding:8px 0; border-bottom:1px solid var(--panel-border); }
.calculation-team-effect > label { display:flex; flex-direction:row; justify-content:flex-start; align-items:center; gap:8px; margin:0; }
.calculation-team-effect > label > input[role="switch"] { order:-1; flex:0 0 auto; }
.calculation-team-effect > .wb-note { margin:4px 0 0 26px; }
.sidebar-left #calculator-page-section { padding:8px; min-width:0; }
.sidebar-left #calculator-page-section .grid { grid-template-columns:minmax(0,1fr); }
@media (max-width:760px) { .calculation-team-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
.settings-list { list-style:none; padding:0; margin:0; display:grid; gap:8px; }
.settings-list > li { padding:10px 0; border-bottom:1px solid var(--panel-border); min-width:0; }
.settings-list label { font-size:12px; }
.settings-list select { width:100%; }
@media (max-width:760px) { .constellation-map { grid-template-columns:repeat(3,minmax(0,1fr)); } }
.sidebar-left #search-form { position: relative; }
.sidebar-left #uid-input { padding-right: 42px; }
.sidebar-left #search-btn {
    position: absolute; right: 4px; top: 4px; bottom: 4px;
    width: 34px; padding: 0; background: transparent !important;
    color: inherit; box-shadow: none; font-size: 20px;
}
.sidebar-left #search-btn:focus-visible { outline: 2px solid currentColor; }
.sidebar-left #search-btn:disabled { opacity: .4; }
.uid-history-row { display: grid; grid-template-columns: minmax(0, 1fr) 28px; gap: 6px; align-items: center; }
.uid-history-link { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; align-items: center; min-width: 0; font-size: 12px; }
.uid-history-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uid-history-number { white-space: nowrap; font-variant-numeric: tabular-nums; }
.uid-history-delete { width: 28px; height: 32px; border-radius: 6px; }
.uid-history-delete:hover { background: rgb(200 60 60 / 15%); }
.sidebar-left #settings-page-section .grid { grid-template-columns: minmax(0, 1fr); }
.sidebar-left #settings-page-section .p-5 { padding: 10px; }
.sidebar-left #settings-page-section .flex { flex-wrap: wrap; gap: 6px; }
.sidebar-left #settings-page-section label.flex { flex-wrap: nowrap; }
.sidebar-left #settings-page-section input { flex-shrink: 0; }
.roll-internal-value[hidden] { display: none !important; }
.sidebar-right #settings-page-section { margin-top: 18px; }
.sidebar-right #settings-page-section .grid { grid-template-columns: minmax(0, 1fr); }
.sidebar-right #settings-page-section .p-5 { padding: 10px; }
.sidebar-right #settings-page-section .flex { flex-wrap: wrap; gap: 6px; }
.sidebar-right #settings-page-section label.flex { flex-wrap: nowrap; }
.sidebar-right #settings-page-section input { flex-shrink: 0; }
.build-preview-viewport { width: 100%; overflow: hidden; position: relative; }
#build-card.free-layout-card, #build-output-card.free-layout-card { box-sizing:border-box; width:1920px; height:1080px; min-height:1080px; max-height:1080px; overflow:hidden; padding:24px; }
.free-layout-card > .free-card-stage { display:block !important; position:relative; width:1872px; height:1032px; }
.card-layout-box { position:absolute; overflow:hidden; margin:0 !important; min-width:0; }
.card-layout-content { width:100%; margin:0 !important; transform-origin:top left; }
.free-layout-card .card-layout-content [class*="text-"] { font-size:16px; line-height:1.35; }
.free-layout-card .card-layout-content h4 { font-size:18px; }
.free-layout-card .card-layout-content h4:empty,
.free-layout-card [data-layout-key="talents"] h4,
.free-layout-card [data-layout-key="sets"] h4 { display:none; }
.free-layout-card .card-equipment-icon { width:80px; height:80px; flex:none; object-fit:contain; background:transparent; border:0; padding:0; }
.free-layout-card [data-layout-key="score"] [class*="text-"] { font-size:18px; }
.free-layout-card [data-layout-key="score"] [data-card-field],
.free-layout-card [data-layout-key="score"] [id^="summary-total"] { font-size:24px; }
.free-layout-card .card-stat-components { grid-column:2; text-align:right; font-size:13px; line-height:1.4; color:var(--text-secondary,#94a3b8); }
.free-layout-card .card-passive-item { font-size:15px; line-height:1.35; }
.free-layout-card [data-layout-key="constellations"] .const-node,
.free-layout-card [data-layout-key="constellations"] .const-node img { width:60px; height:60px; flex-shrink:0; object-fit:contain; }
.card-layout-box { touch-action:pan-y; }
.build-preview-viewport { position:relative; touch-action:pan-y; }
.build-preview-viewport.is-layout-editing, .is-layout-editing .card-layout-box { touch-action:none; }
.layout-pan-surface { position:relative; width:100%; height:100%; }
#card-editor-toolbar { position:sticky; top:var(--header-offset,0px); z-index:30; margin:10px 0; border:1px solid var(--panel-border); border-radius:12px; background:var(--panel-bg); color:var(--text-main); }
#card-editor-toolbar .card-toolbar-row { display:flex; align-items:center; flex-wrap:wrap; gap:8px; padding:8px 12px; }
#card-editor-toolbar .card-toolbar-row + .card-toolbar-row { border-top:1px solid var(--panel-border); }
#card-editor-toolbar .toolbar-group { display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
#card-editor-toolbar .toolbar-zoom-group { margin-left:auto; }
#card-editor-toolbar button { min-height:36px; padding:6px 10px; border:1px solid transparent; border-radius:7px; background:transparent; color:inherit; cursor:pointer; }
#card-editor-toolbar button:hover { border-color:var(--accent-green); }
#card-editor-toolbar button:focus-visible { outline:2px solid var(--accent-green); outline-offset:2px; }
#card-editor-toolbar button[aria-pressed="true"] { background:var(--accent-green) !important; color:var(--palette-ink,#17212b) !important; }
#card-editor-toolbar button:disabled { opacity:.45; cursor:default; }
#toolbar-zoom { min-width:52px; text-align:center; font-variant-numeric:tabular-nums; }
#card-editor-toolbar .toolbar-selection { flex:1; min-width:150px; overflow-wrap:anywhere; }
#card-editor-toolbar small { font-size:11px; }
.card-editor-grid-overlay { position:absolute; pointer-events:none; z-index:999; background-image:linear-gradient(to right,color-mix(in srgb,var(--accent-green) 25%,transparent) 1px,transparent 1px),linear-gradient(to bottom,color-mix(in srgb,var(--accent-green) 25%,transparent) 1px,transparent 1px); }
.card-editor-grid-overlay[hidden],.layout-resize-handle[hidden] { display:none !important; }
.is-layout-editing[data-editor-tool="pan"],.is-layout-editing[data-editor-tool="pan"] .card-layout-box { cursor:grab; }
.is-layout-editing[data-editor-tool="move"] .card-layout-box { cursor:move; }
.is-layout-editing[data-editor-tool="select"] .card-layout-box { cursor:default; }
.is-layout-editing .layout-edit-overlay { border-color:var(--accent-green); }
.is-layout-editing .layout-resize-handle { background:var(--accent-green); border-color:var(--palette-ink); }
@media(max-width:767px) { #card-editor-toolbar button { min-height:44px; } #card-editor-toolbar .card-toolbar-row { padding:6px; gap:4px; } }
.layout-edit-overlay { position:absolute; border:2px solid #38bdf8; box-shadow:0 0 0 1px #0f172a; pointer-events:none; z-index:1000; box-sizing:border-box; }
.layout-edit-overlay[hidden] { display:none !important; }
.layout-resize-handle { position:absolute; pointer-events:auto; touch-action:none; padding:0 !important; min-width:0 !important; min-height:0 !important; border:2px solid #fff; background:#0369a1; border-radius:3px; width:12px; height:12px; }
.layout-resize-handle.n { top:-6px; left:calc(50% - 6px); cursor:ns-resize; }
.layout-resize-handle.s { bottom:-6px; left:calc(50% - 6px); cursor:ns-resize; }
.layout-resize-handle.e { right:-6px; top:calc(50% - 6px); cursor:ew-resize; }
.layout-resize-handle.w { left:-6px; top:calc(50% - 6px); cursor:ew-resize; }
.layout-resize-handle.nw { top:-6px; left:-6px; cursor:nwse-resize; }
.layout-resize-handle.ne { top:-6px; right:-6px; cursor:nesw-resize; }
.layout-resize-handle.sw { bottom:-6px; left:-6px; cursor:nesw-resize; }
.layout-resize-handle.se { bottom:-6px; right:-6px; cursor:nwse-resize; }
.layout-edit-toggle { margin:8px 0; min-height:44px; }
.layout-edit-title { flex-basis:100%; }
.layout-scale-control { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.layout-scale-control input[type=range] { width:180px; }
.layout-bottom-sheet { position:fixed; left:0; right:0; bottom:0; z-index:10000; max-height:42dvh; overflow-y:auto; background:var(--panel-bg,#172032); color:var(--text-main,#fff); padding:14px 16px calc(14px + env(safe-area-inset-bottom)); border:1px solid var(--panel-border,#64748b); border-radius:18px 18px 0 0; box-shadow:0 -4px 18px #0005; margin:0 !important; }
.layout-bottom-sheet input[type=number] { min-height:44px; font-size:16px; }
.layout-bottom-sheet input[type=range], .layout-bottom-sheet button { min-height:44px; }
@media (pointer:coarse) {
 .layout-resize-handle { display:none; }
 .layout-resize-handle.se { display:block; width:28px; height:28px; right:-14px; bottom:-14px; border-radius:50%; border-width:3px; }
}
:is(#card-layout-layers,#sidebar-layer-tree) .layer-row { display:flex; align-items:center; gap:4px; cursor:grab; }
:is(#card-layout-layers,#sidebar-layer-tree) .layer-name { flex:1; min-width:0; text-align:left; }
:is(#card-layout-layers,#sidebar-layer-tree) .layer-row.is-selected { outline:1px solid currentColor; }
.layout-artifact-slots { display:contents; }
.layout-position-controls { display:flex; flex-wrap:wrap; gap:8px; margin:8px 0; }
.layout-position-controls input { width:80px; }
.layout-map { aspect-ratio:1872/1032; position:relative; width:100%; max-width:640px; background:repeating-linear-gradient(0deg,#8882 0 1px,transparent 1px 10%),repeating-linear-gradient(90deg,#8882 0 1px,transparent 1px 10%); border:1px solid currentColor; }
.layout-map button { position:absolute; overflow:hidden; padding:2px; border:1px solid currentColor; background:var(--panel-bg,#243041); color:inherit; touch-action:none; font-size:12px; }
.layout-map button[aria-pressed="true"] { outline:3px solid #4a9bbb; z-index:1; }
.layout-map { aspect-ratio:16/9; padding:0; box-sizing:content-box; }
.layout-map button { min-width:0!important; min-height:0!important; max-width:none!important; margin:0!important; box-sizing:border-box; }
.layer-drag-toggle { display:flex!important; flex-direction:row!important; align-items:center; gap:8px; }
.layer-drag-toggle span { flex:1; }
.sidebar-panel-handle { cursor:grab; font-size:11px; padding:3px 8px; margin:0 8px 6px 0; }
.showcase-sidebar [data-sidebar-panel] { position:relative; }
.showcase-sidebar .sidebar-panel-handle { float:right; margin:0 0 6px 8px; }
.build-preview-controls p, .build-preview-controls h3 { text-align:left; }
.showcase-sidebar .build-preview-controls label[for^="art-"] { text-align:left; align-items:start; justify-content:start; }
.showcase-sidebar .build-preview-controls label.art-follow-label { display:flex; flex-direction:row; align-items:center; justify-content:flex-start; gap:8px; }
.build-preview-controls .art-follow-label input { flex:none; }
.showcase-sidebar:has(.sidebar-panel-handle:active) { outline:1px dashed currentColor; }
.live-build-card > .editable-card-grid { display:grid; grid-template-columns:repeat(var(--layout-columns,3),minmax(0,1fr)) !important; grid-template-rows:repeat(var(--layout-rows,3),minmax(180px,auto)); grid-auto-rows:minmax(180px,auto); align-items:start; }
.live-build-card > .editable-card-grid > div { grid-column:span 1 !important; min-width:0; }
.live-build-card > .editable-card-grid > .card-portrait-panel { grid-column:span 2 !important; grid-row:span 2; height:100%; }
.layout-order > div { display:flex; gap:8px; align-items:center; padding:6px; border-bottom:1px solid currentColor; }
.layout-order button:first-of-type { margin-left:auto; }
#build-card.live-build-card { width: 1920px; max-width: none; transform-origin: top left; padding: 24px; transition: none; }
#build-card.live-build-card > .grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
#build-card.live-build-card > .grid > div { grid-column: span 4 / span 4; }
.live-build-card #char-gacha-art {
    width: 280px; height: 360px;
    transform: translate(calc(var(--art-x, 0px) + var(--pointer-x, 0px)), calc(var(--art-y, 0px) + var(--pointer-y, 0px))) scale(var(--art-zoom, 1));
    transition: transform .45s ease-out;
}
.export-capture *, .export-capture { animation: none !important; transition: none !important; }
.build-preview-controls { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.build-preview-controls h3, .build-preview-controls p { flex-basis: 100%; }
.build-preview-controls label { display: flex; align-items: center; gap: 8px; }
@media (prefers-reduced-motion: reduce) { .live-build-card #char-gacha-art { transition: none; } }
.uid-history-row { padding: 8px; border-radius: 10px; background-size: cover; background-position: center; border: 1px solid var(--panel-border); }
.uid-history-meta { grid-column: 1 / -1; display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 5px; font-size: 10px; }
.uid-history-meta img { width: 26px; height: 26px; object-fit: cover; border-radius: 5px; }
.uid-history-meta time { overflow-wrap: anywhere; }
.uid-history-meta button { padding: 5px; border: 1px solid currentColor; border-radius: 5px; }
.uid-history-row.has-namecard, .uid-history-row.has-namecard * { color: white !important; }
.uid-history-row.has-namecard button { background: rgba(0,0,0,.35) !important; }
.sidebar-disclosure { margin-bottom: 14px; border: 1px solid var(--panel-border); border-radius: 12px; background: var(--panel-bg); }
.sidebar-disclosure > summary { padding: 12px; cursor: pointer; font-size: 13px; font-weight: 700; }
.sidebar-disclosure > #uid-history > h2,
.sidebar-disclosure > #settings-page-section > div:first-child,
.sidebar-disclosure > .palette-picker > div:first-child { display: none; }
.sidebar-disclosure > #uid-history { border: 0; }
body, button, input, select, textarea { font-family: var(--ui-font, sans-serif) !important; }
.custom-palette-editor { display: grid; gap: 8px; min-width: 0; }
.custom-palette-editor label { display: grid; gap: 4px; }
.custom-palette-editor input { min-width: 0; width: 100%; }
.duplicate-card-viewport { overflow: auto; max-width: 100%; }
#build-output-card.live-build-card { width: 1920px; max-width: none; padding: 24px; }
#build-output-card.live-build-card > .grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
#build-output-card.live-build-card > .grid > div { grid-column: span 4 / span 4; }
#build-output-card [data-original-id="char-gacha-art"] { width: 280px; height: 360px; transform: translate(var(--art-x, 0px), var(--art-y, 0px)) scale(var(--art-zoom, 1)); }
.talent-detail-icon { display: inline-block; object-fit: contain; vertical-align: middle; margin-right: 12px; border-radius: 50%; background: var(--inset-bg); }
.card-portrait-panel { min-height: 480px; padding-top: 100px !important; }
.card-element-corner { position: absolute; top: 16px; left: 16px; z-index: 2; }
.card-identity-corner { position: absolute; top: 16px; right: 16px; display: grid; justify-items: end; gap: 6px; max-width: 65%; text-align: right; }
.card-sub-line { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.card-sub-line, .card-sub-line * { font-family: inherit; font-size: 14px; font-weight: 700; line-height: 1.2; color: inherit; }
#constellation-nodes { display: none !important; }
#card-constellations #constellation-nodes { display: flex !important; position: static; flex-direction: row; justify-content: space-between; margin-top: 8px; }
.card-identity-corner h3 { font-size: 22px; }
.free-layout-card .card-identity-corner h3 { font-size:26px; }
.free-layout-card .card-sub-line, .free-layout-card .card-sub-line * { font-size:18px; }
.free-layout-card [data-layout-key="talents"] .card-passive-level,
.free-layout-card [data-layout-key="talents"] .text-amber-300 { font-size:16px; line-height:1.35; font-weight:700; }
.free-layout-card .card-stat-row > [data-card-field] { text-align:right; justify-self:end; }
.free-layout-card .card-stat-components { font-size:10px; }
.free-layout-card #stats-list .card-stat-row { padding:6px 0; row-gap:3px; line-height:1.5; }
.free-layout-card #stats-list .card-stat-components { font-size:12px; line-height:1.4; }

html body :is(#card-constellations .const-node,.constellation-layer .const-node,.card-talent-icon) { background:var(--const-bg,#34404e) !important; border-color:var(--const-border,#8796a8) !important; }
#card-constellations #constellation-nodes[data-direction="vertical"] { flex-direction:column !important; align-items:center; justify-content:space-between; height:100%; margin-top:0 !important; }
.constellation-layer .const-node { width:100% !important; height:100% !important; border-radius:50%; box-sizing:border-box; }
.constellation-layer .const-node img { width:100%; height:100%; object-fit:contain; }
.layout-map-viewport { overflow:auto; max-height:650px; }
.free-layout-card .card-layout-box .card-equipment-icon { width:var(--equipment-size,100px); height:var(--equipment-size,100px); }
.free-layout-card [data-layout-key="score"] #set-bonuses-card { padding:8px 0 0; border:0; background:transparent; }
.build-preview-controls label:not(.art-follow-label) { display:block; text-align:left; }
.build-preview-controls label:not(.art-follow-label) output { display:inline; float:none; margin-left:8px; }
.build-preview-controls input[type="range"] { display:block; width:100%; }
.card-identity-corner img { display: inline-block; vertical-align: middle; margin-right: 5px; }
.card-portrait-panel .char-element-badge { display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box; line-height:1; flex-shrink:0; }
.card-portrait-panel .char-element-badge img { display:block; width:40px; height:40px; margin:0; object-fit:contain; }
.card-portrait-panel #char-friendship-badge,
.card-portrait-panel [data-original-id="char-friendship-badge"] { display:inline-flex; align-items:center; justify-content:center; gap:5px; white-space:nowrap; line-height:20px; }
.card-portrait-panel #char-friendship-badge img,
.card-portrait-panel [data-original-id="char-friendship-badge"] img { display:block; flex:none; width:18px; height:18px; margin:0; object-fit:contain; }
.card-portrait-panel #char-friendship,
.card-portrait-panel [data-original-id="char-friendship"] { display:block; margin:0; padding:0; line-height:20px; font-variant-numeric:tabular-nums; }
.card-stat-row { display:grid !important; grid-template-columns:minmax(0,1fr) auto; align-items:center; column-gap:12px; min-height:28px; }
.card-stat-row > span { display:block; margin:0; line-height:20px; }
.card-stat-row > span:last-child { text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.card-constellation-column { position: absolute; bottom: 16px; left: 12px; display: flex !important; flex-direction: column; gap: 8px; }
#card-stat-breakdown details { margin-top: 12px; border-top: 1px solid var(--panel-border); padding-top: 10px; }
#card-stat-breakdown summary { cursor: pointer; font-weight: 600; }
.card-constellation-column .const-node { width: 60px; height: 60px; min-width: 60px; flex-shrink: 0; }
.card-constellation-column .const-node img { width: 60px; height: 60px; object-fit: contain; }
.card-constellation-column .const-node.locked { opacity: .55; }
.card-talent-icon { width: 96px !important; height: 96px !important; padding: 8px; background: #34404e !important; border: 1px solid #8796a8; }
.card-passive-list { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; margin-top: 12px; }
#talents-list, [data-original-id="talents-list"] { grid-template-columns:repeat(4,minmax(0,1fr)); }
.card-talent-icon, html[data-color-mode="light"] #talents-list img { border-radius:50% !important; max-width:100%; object-fit:contain; }
.card-passive-item { min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; font-size: 11px; }
.card-passive-list > h5, .card-passive-list > p { grid-column: 1 / -1; }
.card-talents-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.card-talents-grid > :not(#talents-list):not(.card-passive-list):not([data-original-id="talents-list"]) { grid-column:1 / -1; }
.card-talents-grid > #talents-list, .card-talents-grid > [data-original-id="talents-list"], .card-talents-grid > .card-passive-list { display:contents; }
.card-talents-grid .card-passive-list > h5 { display:none; }
.card-talents-grid #talents-list > div, .card-talents-grid [data-original-id="talents-list"] > div { background:transparent !important; border:0; border-radius:0; min-width:0; padding:0; }
[id="char-constellation-badge"][hidden], [data-original-id="char-constellation-badge"][hidden] { display: none !important; }
.site-header { display: block; padding: 12px 20px; }
.site-brand { display: flex; align-items: center; gap: 12px; min-width: 0; font-weight: 700; }
.site-brand img { width: 48px; height: 48px; flex-shrink: 0; object-fit: contain; }
header #view-mode-selector { min-width: 0; padding: 0; border-bottom: 0; }
header #view-mode-selector > div { align-items: center; justify-content: center; width: 100%; }
header #view-mode-selector button { white-space: nowrap; }
@media (max-width: 760px) {
    .site-header { padding: 12px; position: static; }
}
.reaction-icons { display: inline-flex; gap: 3px; vertical-align: middle; margin-right: 8px; }
.reaction-icons img { object-fit: contain; background: #34404e; border-radius: 4px; }
.uid-history-link { font-size: calc(12px + var(--font-size-adjustment, 0px)); }
.uid-history-meta { font-size: max(10px, calc(10px + var(--font-size-adjustment, 0px))); }
.sidebar-disclosure > summary { font-size: calc(13px + var(--font-size-adjustment, 0px)); }
.reaction-image-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(190px,1fr)); gap: 10px; margin-top: 12px; }
.reaction-image-item { display: flex; gap: 5px; align-items: center; padding: 8px; border: 1px solid var(--panel-border); border-radius: 8px; }
.reaction-image-item img { object-fit: contain; background: #34404e; border-radius: 4px; }

/* Team badge (top-right of the card) and edit mode */
.char-tab-btn[data-avatar-id], .history-char-tab[data-avatar-id] { position: relative; }
html body .team-slot-badge { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 4px; display: flex; align-items: center; justify-content: center; border-radius: 999px; font-size: 11px; font-weight: 700; line-height: 1; background: var(--accent-green, #6366f1); color: var(--palette-ink, #fff) !important; border: 2px solid var(--page-bg, #020617); }
.team-slot-badge[hidden] { display: none !important; }
html body .team-slot-badge { background:#0f172a !important; color:#fff !important; border:1px solid #94a3b8 !important; border-radius:6px; font-weight:800; text-shadow:0 1px 2px #000; }
.card-layout-background { position:absolute; left:0; top:0; pointer-events:none; z-index:-1; }
.card-layout-box { isolation:isolate; }
.char-tab-btn.team-edit-target, .history-char-tab.team-edit-target { cursor: copy; }
.team-edit-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 8px 0; }
.layer-branch > summary { display:flex; align-items:center; cursor:pointer; }
.layer-branch > summary::before { content:'▸'; margin-right:6px; }
.layer-branch[open] > summary::before { content:'▾'; }
.layer-branch .layer-row { flex:1; }
.layer-children { margin:8px 0 8px 14px; padding-left:12px; border-left:1px solid var(--panel-border); font-size:12px; }
.layer-children li { padding:4px 0; overflow-wrap:anywhere; }
#build-card .layout-artifact-slots .card-layout-content > .flex-grow > .grid { grid-template-columns:1fr !important; row-gap:4px !important; }
.card-layout-box[data-bg]:not([data-bg=""]) > .card-layout-content { background:var(--layer-bg) !important; background-image:none !important; }
#build-card .card-identity-corner #char-name { font-size:20px !important; }
#card-constellations .const-node { background:var(--const-bg,#34404e) !important; border-color:var(--const-border,#8796a8) !important; }
html[data-high-lightness="true"] :is(.card-talent-icon,.talent-detail-icon,.constellation-node img,#card-constellations .const-node) { background:rgba(15,23,42,var(--icon-auto-opacity,.7)) !important; }
.team-stat-list > div { display:flex; justify-content:space-between; gap:8px; padding:4px 0; }
#character-selector-section > h3 { flex-wrap: wrap; gap: 8px; }
#character-selector-section .team-edit-head { margin: 0 0 0 auto; flex-wrap: wrap; font-size: inherit; text-transform: none; letter-spacing: normal; }
.team-edit-head small { display: block; font-size: 10px; opacity: .7; }
.team-edit-head button, .team-edit-slot { padding: 6px 12px; border-radius: 8px; border: 1px solid var(--panel-border, #334155); background: var(--panel-bg, transparent); font-size: 12px; font-weight: 600; cursor: pointer; }
.team-edit-head button[aria-pressed="true"], .team-edit-slot.is-editing { border-color: var(--accent-green, #6366f1); outline: 2px solid var(--palette-focus, #6366f1); }
.team-edit-slots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-bottom: 6px; }
/* Talent text and passive level */
#talents-list span.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.card-passive-level { font-size: 11px; font-weight: 700; color: #fcd34d; }
/* Light mode only (dark mode unchanged): skill/passive/constellation icon backgrounds use the
   same color as an unlocked constellation node, which follows the selected PCCS palette. */
html[data-color-mode="light"] :is(.card-talent-icon, .talent-detail-icon, #talents-list img, .constellation-node img, #constellation-page-section .wb-panel > img) {
    background: var(--accent-green, #a3c9ad) !important; border: 1px solid var(--palette-focus, #b5d0b9) !important;
}
html[data-color-mode="light"] .constellation-node .talent-detail-icon { background: var(--accent-green, #a3c9ad) !important; }

/* Layer panel */
.layer-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.layer-row { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 6px; padding: 4px 6px; border: 1px solid var(--panel-border, #334155); border-radius: 8px; font-size: 12px; }
.layer-row.is-selected { outline: 2px solid var(--palette-focus, #4a9bbb); }
.layer-row.is-hidden .layer-name { opacity: .45; text-decoration: line-through; }
.layer-row button { padding: 2px 8px; border: 1px solid var(--panel-border, #334155); border-radius: 6px; font-size: 12px; cursor: pointer; }
.layer-row button:disabled { opacity: .35; cursor: default; }
.layer-name { cursor: pointer; text-align: left; }
.card-layout-box > :first-child { min-height: 100%; box-sizing: border-box; }
#calculator-page-section .calculator-substat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
#calculator-page-section .calculator-substat-grid > div { min-width: 0; }
.build-preview-controls > summary { cursor: pointer; text-align: left; font-weight: 700; }

/* 聖遺物カードのサブステータスと取得順・RVスタイル */
.card-layout-box[data-layout-key="flower"],
.card-layout-box[data-layout-key="plume"],
.card-layout-box[data-layout-key="sands"],
.card-layout-box[data-layout-key="goblet"],
.card-layout-box[data-layout-key="circlet"] {
    min-height: 40px;
}
.artifact-rv {
    display: inline-block;
    width: 7ch;
    text-align: right;
    white-space: pre;
    font-variant-numeric: tabular-nums;
}
.rv-stat-disabled {
    opacity: 0.52;
}
.rv-stat-disabled .artifact-rv,
.rv-stat-disabled span {
    color: var(--text-secondary, #94a3b8) !important;
}
/* ビルドカード内のサブステータスはグレーアウトさせず常に鮮明表示 */
#build-card .rv-stat-disabled,
.free-card-stage .rv-stat-disabled,
.card-layout-content .rv-stat-disabled {
    opacity: 1 !important;
}
#build-card .rv-stat-disabled span,
.free-card-stage .rv-stat-disabled span,
.card-layout-content .rv-stat-disabled span {
    opacity: 1 !important;
}
.artifact-roll-detail {
    font-size: 8px;
    line-height: 1.1;
    margin-top: 1px;
    margin-bottom: 3px;
    letter-spacing: -0.02em;
    white-space: nowrap;
}
.artifact-score-footer {
    margin-top: auto !important;
    flex-shrink: 0 !important;
}

/* Keep the constellation layer frameless, including custom background plates. */
.genshin-term-link {
    font: inherit; color: inherit; border: 0; background: transparent;
    padding: 0; text-decoration: underline dotted; text-underline-offset: 3px; cursor: help;
}
.genshin-term-link:focus-visible { outline: 2px solid var(--palette-focus, #479ac2); }
#genshin-link-tooltip {
    position: fixed; z-index: 99999; width: min(380px, calc(100vw - 24px));
    max-height: calc(100dvh - 24px); overflow: auto; padding: 14px;
    border: 1px solid var(--panel-border, #8796a8); border-radius: 12px;
    background: var(--panel-bg, #182735); color: var(--palette-ink, #edf5fa);
    box-shadow: 0 6px 24px #0004; font-size: 14px; line-height: 1.6;
    white-space: pre-line;
}
#genshin-link-tooltip[hidden] { display: none; }
html body #card-constellations,
html body .card-layout-box[data-layout-key="constellations"] {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}
.card-layout-box[data-layout-key="constellations"] > .card-layout-background {
    display: none !important;
}
html body :is(#card-constellations .const-node, .constellation-layer .const-node, .constellation-node > img) {
    background: var(--const-bg, #34404e) !important;
    border-color: var(--const-border, #8796a8) !important;
    border-radius: 50%;
}
html body :is(#card-constellations, .constellation-layer) .const-node.locked {
    opacity: 1;
}
html body :is(#card-constellations, .constellation-layer) .const-node.locked > img:not(.constellation-lock-overlay) {
    opacity: .35;
}
html body .const-node > .constellation-lock-overlay {
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    opacity: 1 !important;
}

/* Layer panel controls and visibility extensions */
.layer-controls-box {
    margin-top: 6px;
    padding: 6px 8px;
    background: var(--panel-bg, #182735);
    border: 1px solid var(--panel-border, #334155);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.layer-control-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 11px;
    color: var(--text-secondary, #94a3b8);
}
.layer-control-row input[type="range"] {
    flex: 1;
    min-width: 60px;
    cursor: pointer;
}
.layer-control-row output {
    min-width: 3.5ch;
    text-align: right;
    font-family: monospace;
    font-size: 10px;
    color: var(--palette-ink, #e2e8f0);
}
.layer-control-row select {
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--panel-bg, #182735);
    border: 1px solid var(--panel-border, #8796a8);
    color: var(--palette-ink, #e2e8f0);
}
/* Shared dropdown appearance for every sidebar, including dynamically moved panels. */
html body :is(.showcase-sidebar,.sidebar-left,.sidebar-right,#palette-sidebar,#left-sidebar-content,.dual-sidebar-content) select {
    appearance:auto !important;
    font:inherit !important;
    font-size:11px !important;
    padding:2px 6px !important;
    border-radius:4px !important;
    background:var(--panel-bg,#182735) !important;
    border:1px solid var(--panel-border,#8796a8) !important;
    color:var(--text-main,#e2e8f0) !important;
    box-shadow:none !important;
    min-height:28px;
    min-width:0;
    max-width:100%;
}
.color-controls { min-width:0; display:grid; gap:8px; margin:10px 0; padding:10px; border:1px solid var(--panel-border); border-radius:8px; }
.palette-picker > fieldset.color-controls { border:0; border-radius:0; padding:0; }
html body .color-controls .color-control-row { display:grid !important; grid-template-columns:minmax(0,1fr) auto; gap:5px; align-items:center; }
.color-controls .color-control-row input[type=range] { min-width:0; width:100%; }
.color-controls .color-control-row input[type=number] { width:40px; height:16px; min-height:16px; padding:0 2px; box-sizing:border-box; border-radius:0; font-size:10px; }
.color-controls .color-control-row :is(select,input[type=text],input[type=color]) { grid-column:1/-1; width:100%; min-width:0; }
.color-controls output { font-variant-numeric:tabular-nums; }
.color-controls input[type=color] { height:34px; }

/* Frame and border toggles */
html body #build-card .card-layout-box.frame-hidden > .card-layout-content,
html body #build-card .card-layout-box.frame-hidden > .card-layout-content > div,
html body #build-card .card-layout-box.frame-hidden > .card-layout-content > section {
    border: 0 !important;
    border-width: 0 !important;
    border-color: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}
html body #build-card .card-layout-box.frame-hidden > .card-layout-content::before,
html body #build-card .card-layout-box.frame-hidden > .card-layout-content::after {
    opacity: 0 !important;
    pointer-events: none;
}
html body #build-card .card-layout-box.bg-hidden > .card-layout-content,
html body #build-card .card-layout-box.bg-hidden > .card-layout-content > div,
html body #build-card .card-layout-box.bg-hidden > .card-layout-content > section {
    background: transparent !important;
    background-color: transparent !important;
}
html body #build-card .card-layout-box.bg-hidden > .card-layout-background {
    display: none !important;
}
html body #build-card .stats-no-borders .card-stat-row {
    border-bottom: 0 !important;
    border-bottom-color: transparent !important;
}

/* Talent grid variations (unified layer) */
.talents-grid-8x1 #talents-list,
.talents-grid-8x1 .card-passive-list {
    display: grid !important;
    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
}
.talents-grid-4x2 #talents-list,
.talents-grid-4x2 .card-passive-list {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
.talents-grid-2x4 #talents-list,
.talents-grid-2x4 .card-passive-list {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.talents-grid-1x8 #talents-list,
.talents-grid-1x8 .card-passive-list {
    display: grid !important;
    grid-template-columns: 1fr !important;
}

/* Artifact element toggles */
.hide-roll-counts .artifact-roll-count {
    display: none !important;
}
.hide-roll-details .artifact-roll-detail {
    display: none !important;
}

/* Talent text element toggles */
.hide-talent-names .card-talent-name {
    display: none !important;
}
.hide-talent-levels .card-talent-level,
.hide-talent-levels .card-passive-level {
    display: none !important;
}

/* Score summary metrics toggles */
.hide-metric-cv [data-metric="cv"] {
    display: none !important;
}
.hide-metric-rv [data-metric="rv"] {
    display: none !important;
}
.hide-metric-score [data-metric="score"] {
    display: none !important;
}
.hide-set-bonuses #set-bonuses-card {
    display: none !important;
}

/* Artifact individual metrics & substat grid toggles */
.artifact-substats-1x4 .artifact-substats-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
.artifact-substats-2x2 .artifact-substats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.hide-artifact-cv .artifact-cv-badge {
    display: none !important;
}
.hide-artifact-individual-rv .artifact-rv {
    display: none !important;
}
.hide-artifact-total-rv .artifact-total-rv-badge {
    display: none !important;
}
.hide-artifact-score .artifact-score-badge {
    display: none !important;
}
.hide-artifact-rank .artifact-rank-badge {
    display: none !important;
}

/* Portrait element toggles */
.hide-element-img #char-element-badge img {
    display: none !important;
}
.hide-element-bg #char-element-badge {
    background: transparent !important;
    border-color: transparent !important;
}
.hide-char-name #char-name {
    display: none !important;
}
.hide-char-level .card-sub-line > span:first-child {
    display: none !important;
}
.hide-char-friendship #char-friendship-badge {
    display: none !important;
}
.hide-char-element-bg #char-element-bg {
    display: none !important;
}

/* Build card surface colors follow PCCS Palette */
#build-card.artifact-substats-4x1 .artifact-substats-grid,
#build-card.artifact-substats-4x1 .layout-artifact-slots .card-layout-content > .flex-grow > .artifact-substats-grid {
    grid-template-columns: minmax(0,1fr) !important;
}
[data-layout-key="portrait-info"] .card-element-corner,
[data-layout-key="portrait-info"] .card-identity-corner {
    position: static; inset: auto; transform: none;
}
[data-layout-key="portrait-info"] .char-element-badge {
    display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; line-height:1;
}
[data-layout-key="portrait-info"] .char-element-badge img {
    display:block; width:40px; height:40px; margin:0; object-fit:contain;
}
html body .layer-controls-box, html body .layer-control-row, html body .layer-control-row output {
    color: var(--palette-ink, #e2e8f0);
}
#build-card.artifact-substats-1x4 .layout-artifact-slots .card-layout-content > .flex-grow > .artifact-substats-grid { grid-template-columns: repeat(4,minmax(0,1fr)) !important; }
#build-card.artifact-substats-2x2 .layout-artifact-slots .card-layout-content > .flex-grow > .artifact-substats-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
.card-talents-grid.talents-grid-8x1 { grid-template-columns:repeat(8,minmax(0,1fr)); }
.card-talents-grid.talents-grid-4x2 { grid-template-columns:repeat(4,minmax(0,1fr)); }
.card-talents-grid.talents-grid-2x4 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.card-talents-grid.talents-grid-1x8 { grid-template-columns:1fr; }
.card-talents-grid[class*="talents-grid-"] > #talents-list,
.card-talents-grid[class*="talents-grid-"] > .card-passive-list { display:contents !important; }
.hide-element-img [data-original-id="char-element-badge"] img,
.hide-char-name [data-original-id="char-name"],
.hide-char-friendship [data-original-id="char-friendship-badge"] { display:none !important; }
.hide-element-bg [data-original-id="char-element-badge"] { background:transparent !important; border-color:transparent !important; }
[data-layout-key="portrait-art"] img { width:100%;height:100%;object-fit:contain; }
html[data-palette] #build-card .card-layout-content {
    border-color: var(--panel-border) !important;
}
html[data-palette] #build-card .card-layout-box:not([data-bg="transparent"]) > .card-layout-content {
    background-color: var(--layer-bg, var(--page-bg, var(--panel-bg))) !important;
}

/* Unified sidebar panel header: every top-level panel (.sidebar-disclosure / .wb-panel) uses the same
   container, summary and move-handle geometry so the 移動 buttons line up. */
.showcase-sidebar [data-sidebar-panel="true"] {
    padding: 0; margin-bottom: 14px; border: 1px solid var(--panel-border); border-radius: 12px; background: var(--panel-bg);
}
.showcase-sidebar [data-sidebar-panel="true"] > summary {
    display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 12px; box-sizing: border-box;
    cursor: pointer; list-style: none; font-size: calc(13px + var(--font-size-adjustment, 0px)); font-weight: 700; line-height: 1.2; text-align: left;
}
.showcase-sidebar [data-sidebar-panel="true"] > summary::-webkit-details-marker { display: none; }
.showcase-sidebar [data-sidebar-panel="true"] > summary::marker { content: ""; }
.showcase-sidebar [data-sidebar-panel="true"] > summary::after { content: "›"; order: 3; flex: 0 0 auto; width: 12px; text-align: center; transition: transform .15s ease; }
.showcase-sidebar [data-sidebar-panel="true"][open] > summary::after { transform: rotate(90deg); }
.showcase-sidebar [data-sidebar-panel="true"] > summary > .sidebar-panel-handle {
    order: 2; margin: 0 0 0 auto; float: none; flex: 0 0 auto; width: 44px; height: 26px; padding: 0 8px; box-sizing: border-box;
    display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; line-height: 1; cursor: grab;
    border: 1px solid var(--panel-border); border-radius: 8px; background: var(--palette-selected, transparent);
}
/* Panels built on .wb-panel: keep body content inset like .sidebar-disclosure panels */
.showcase-sidebar [data-sidebar-panel="true"].wb-panel > :not(summary) { margin-left: 12px; margin-right: 12px; }
.showcase-sidebar [data-sidebar-panel="true"].wb-panel > :last-child { margin-bottom: 12px; }

/* Empty sidebar: invisible drop zone (nothing is displayed, but panels can still be dropped here) */
.showcase-sidebar.is-empty { min-height: 140px; border: 0; outline: 0; background: none; }
.showcase-sidebar.is-empty::before { content: none; }
body.sidebar-dragging .showcase-sidebar:not(.is-empty) { min-height: 160px; outline: 1px dashed var(--panel-border); outline-offset: 2px; }
body.sidebar-dragging .showcase-sidebar.sidebar-right.is-empty { min-height: max(160px, 40vh); outline: 0; }

/* Sidebar container backgrounds only; retain existing borders and focus outlines. */
html body :is(.showcase-sidebar,.dual-sidebar,#palette-sidebar,#left-sidebar-content),
html body :is(.showcase-sidebar,.dual-sidebar,#palette-sidebar,#left-sidebar-content) :is(section,fieldset,details,.wb-panel,.palette-picker,.sidebar-disclosure,.dual-sidebar-content,[data-sidebar-panel],.layer-branch,.layer-controls-box,.history-profile,.history-char-card,.settings-list) {
    background:transparent !important;
    background-image:none !important;
}

/* Remove only the outer frame of the PCCS palette panel. */
html body section.palette-picker {
    border:0 !important;
    border-radius:0 !important;
    outline:0 !important;
    box-shadow:none !important;
}

/* One typography style throughout the additional-effects list. */
html body #effect-sidebar .effect-sidebar-list,
html body #effect-sidebar .effect-sidebar-list :is(summary,label,span,p,small,strong,b) {
    font-family:var(--ui-font,sans-serif) !important;
    font-size:calc(12px + var(--font-size-adjustment,0px)) !important;
    font-weight:var(--custom-card-weight,400) !important;
    line-height:1.6 !important;
    letter-spacing:normal !important;
}

/* Portrait and background controls fit either sidebar at its current width. */
.showcase-sidebar .build-preview-controls { display:block; min-width:0; }
.showcase-sidebar .build-preview-controls > :not(summary) { box-sizing:border-box; max-width:calc(100% - 24px); }
.showcase-sidebar .build-preview-controls label:not(.art-follow-label) {
    display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px; min-width:0; text-align:left;
}
.showcase-sidebar .build-preview-controls label output { float:none; margin:0; text-align:right; font-variant-numeric:tabular-nums; }
.showcase-sidebar .build-preview-controls input:is([type=range],[type=file]) { grid-column:1/-1; width:100%; min-width:0; max-width:100%; box-sizing:border-box; }
.showcase-sidebar .build-preview-controls button { display:block; width:100%; min-width:0; box-sizing:border-box; white-space:normal; overflow-wrap:anywhere; }
.showcase-sidebar .build-preview-controls #card-background-adjustment { display:block; min-width:0; box-sizing:border-box; }
.showcase-sidebar .build-preview-controls #card-background-adjustment > :not(summary) { min-width:0; max-width:100%; box-sizing:border-box; }

/* Settings use one row layout, including controls created after font loading. */
html body #sidebar-settings,
html body #settings-page-section,
html body #settings-page-section :is(section,fieldset,.settings-list,li,label),
html body #uid-search-settings :is(li,label) {
    border:0 !important; border-radius:0 !important; background:transparent !important;
    background-image:none !important; box-shadow:none !important; backdrop-filter:none !important;
}
html body #settings-page-section { padding:0 !important; }
html body :is(#settings-page-section,#uid-search-settings) .settings-list {
    display:grid; grid-template-columns:minmax(0,1fr); gap:8px; padding:0; margin:0; list-style:none;
}
html body :is(#settings-page-section,#uid-search-settings) li { min-width:0; padding:4px 0; margin:0; }
html body :is(#settings-page-section,#uid-search-settings) .settings-control {
    display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start;
    gap:6px; width:100%; min-width:0; margin:0; padding:0; box-sizing:border-box;
    font-size:calc(12px + var(--font-size-adjustment,0px)); line-height:1.6;
}
html body :is(#settings-page-section,#uid-search-settings) .settings-switch {
    flex-direction:row; align-items:flex-start; gap:8px; cursor:pointer;
}
html body :is(#settings-page-section,#uid-search-settings) .settings-switch input {
    flex:0 0 auto; order:0; margin:3px 0 0; float:none;
}
html body :is(#settings-page-section,#uid-search-settings) :is(select,input:not([type=checkbox]),button) {
    max-width:100%; box-sizing:border-box;
}
html body #settings-page-section :is(select,input:not([type=checkbox]),button) { width:100%; }
html body #settings-page-section :is(p,output) { display:block; margin:4px 0; overflow-wrap:anywhere; }
html body #settings-page-section > section { margin:16px 0 0 !important; padding:0 !important; }
html body #settings-page-section h3 { margin:0 0 8px; font-size:calc(13px + var(--font-size-adjustment,0px)); }
html body #uid-search-settings { margin:12px 0; }

/* Text and outline color editors share a frameless layout in global and layer settings. */
html body :is(#card-typography-settings,:is(#card-layout-layers,#sidebar-layer-tree)) fieldset.color-controls {
    border:0 !important; border-radius:0 !important; box-shadow:none !important; padding:0;
}

/* Shared geometry for every layer editor, including deeply nested color controls. */
html body :is(#card-layout-layers,#sidebar-layer-tree) { min-width:0; }
html body :is(#card-layout-layers,#sidebar-layer-tree) select[aria-label="レイヤー選択"] {
    width:180px !important; height:32px !important; min-width:0 !important; max-width:100% !important; box-sizing:border-box;
}

html body #sidebar-layer-common .layer-opacity-controls { min-width:0; }
html body #sidebar-layer-common .layer-control-row { display:flex; flex-wrap:wrap; gap:6px; margin:8px 0; }
html body #sidebar-layer-common .layer-control-row:has(input[type=checkbox]) { flex-wrap:nowrap; }
html body #sidebar-layer-common :is(select,input[type=range]) { width:100%; min-width:0; max-width:100%; box-sizing:border-box; }
html body #sidebar-layer-common label:has(select) { display:flex; flex-direction:column; gap:6px; }
html body :is(#card-layout-layers,#sidebar-layer-tree) .layer-list :is(ul,li,details,fieldset,.layer-controls-box,.layer-controls-box > div) {
    min-width:0; max-width:100%; box-sizing:border-box; border:0 !important;
    border-radius:0 !important; box-shadow:none !important;
}
html body :is(#card-layout-layers,#sidebar-layer-tree) .layer-list ul { list-style:none; padding-left:8px; margin-left:0; }
html body :is(#card-layout-layers,#sidebar-layer-tree) .layer-controls-box { margin-left:0; padding:8px 0; }
html body :is(#card-layout-layers,#sidebar-layer-tree) .layer-list fieldset { padding:0; margin:8px 0; }
html body :is(#card-layout-layers,#sidebar-layer-tree) .layer-list .layer-control-row {
    min-width:0; max-width:100%; box-sizing:border-box; margin:6px 0;
}
html body :is(#card-layout-layers,#sidebar-layer-tree) .layer-control-row:has(select),
html body :is(#card-layout-layers,#sidebar-layer-tree) .layer-control-row:has(input[type=text]),
html body :is(#card-layout-layers,#sidebar-layer-tree) .layer-control-row:has(input[type=number]):not(:has(input[type=range])) {
    display:flex; flex-direction:column; align-items:stretch; gap:4px;
}
html body :is(#card-layout-layers,#sidebar-layer-tree) .layer-list :is(select,input[type=text],input[type=number]) {
    width:100% !important; min-width:0 !important; max-width:100% !important; box-sizing:border-box;
}
html body :is(#card-layout-layers,#sidebar-layer-tree) .color-control-row:has(input[type=range]) {
    display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px;
}
html body :is(#card-layout-layers,#sidebar-layer-tree) .color-control-row input[type=range] { grid-column:1/-1; width:100%; min-width:0; }
html body :is(#card-layout-layers,#sidebar-layer-tree) .color-control-row input[type=number] { grid-column:1/-1; }

html body :is(#card-layout-layers,#sidebar-layer-tree) .layer-row[data-layer-key="constellations"] {
    display:grid; grid-template-columns:22px 28px minmax(0,1fr); gap:5px; align-items:center;
}
html body :is(#card-layout-layers,#sidebar-layer-tree) .layer-row[data-layer-key="constellations"] .layer-name {
    width:100%; min-width:0; text-align:left; white-space:normal;
}
html body :is(#card-layout-layers,#sidebar-layer-tree) .layer-row[data-layer-key="constellations"] .layer-lock {
    grid-column:2/-1; grid-row:2; justify-self:start;
}
html body #sidebar-artifact-common .layer-controls-box { min-width:0; margin:0; padding:8px 0; border:0; }
html body #sidebar-artifact-common .layer-control-row { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:6px 0; }
html body #sidebar-artifact-common .layer-control-row:has(input[type=checkbox]) { flex-wrap:nowrap; }
html body #sidebar-artifact-common :is(select,input[type=range]) { width:100%; min-width:0; max-width:100%; box-sizing:border-box; }

/* Layer panel follows its visible contents; only the sidebar detail area scrolls. */
html body :is(#card-layout-layers,#sidebar-layer-tree) {
    height:auto; min-height:0; max-height:none; overflow:visible;
    border:0 !important; border-radius:0 !important; outline:none !important; box-shadow:none !important;
}
html body :is(#card-layout-layers,#sidebar-layer-tree) > .layer-list {
    height:auto; max-height:none; overflow:visible;
}

html body :is(#card-layout-layers,#sidebar-layer-tree).layer-workspace > .layer-list {
    max-height:none; overflow:visible; padding:0;
}
html body :is(#card-layout-layers,#sidebar-layer-tree).layer-workspace .layer-row {
    display:grid; grid-template-columns:22px 24px minmax(0,1fr) auto; align-items:center;
    gap:5px; padding:6px 2px; background:transparent; color:var(--text-main);
}
html body :is(#card-layout-layers,#sidebar-layer-tree).layer-workspace .layer-row.is-selected {
    background:var(--palette-selected); outline:none; border-color:var(--palette-focus);
}
html body :is(#card-layout-layers,#sidebar-layer-tree).layer-workspace .layer-thumbnail { width:24px; height:24px; object-fit:contain; }
html body :is(#card-layout-layers,#sidebar-layer-tree).layer-workspace .layer-name { min-width:0; padding:0; background:transparent; text-align:left; }
html body :is(#card-layout-layers,#sidebar-layer-tree).layer-workspace .layer-lock { background:var(--inset-bg); border:1px solid var(--panel-border); padding:3px; font-size:10px; }
html body :is(#card-layout-layers,#sidebar-layer-tree).layer-workspace .layer-eye { accent-color:var(--accent-green); }
html body :is(#card-layout-layers,#sidebar-layer-tree).layer-workspace .layer-branch:not(:has(> ul > li)) { display:none; }
html body :is(#card-layout-layers,#sidebar-layer-tree) .layer-inspector {
    min-width:0; padding:12px 0 0; margin:12px 0 0; border:0; background:transparent;
}
html body :is(#card-layout-layers,#sidebar-layer-tree) .layer-inspector h4 { color:var(--text-main); font-size:13px; margin:0 0 8px; }
html body :is(#card-layout-layers,#sidebar-layer-tree) .layer-inspector :is(fieldset,.layer-controls-box) { border:0; margin:0; padding:4px 0; min-width:0; }
html body :is(#card-layout-layers,#sidebar-layer-tree) .layer-inspector :is(select,input[type=text],input[type=number]) { width:100%; min-width:0; max-width:100%; box-sizing:border-box; }
html body :is(#card-layout-layers,#sidebar-layer-tree) :is(.layer-list,.layer-inspector) .color-controls .color-control-row input[type=number] {
    width:40px !important; min-width:40px !important; max-width:40px !important;
    height:16px !important; min-height:16px !important; padding:0 2px; box-sizing:border-box; border-radius:0; font-size:10px;
}

/* Layer tree styled after the supplied reference, using the current PCCS theme. */
html body :is(#card-layout-layers,#sidebar-layer-tree).layer-workspace {
 --line:var(--panel-border); --text:var(--text-main); --sub:var(--text-muted);
 --row-hover:var(--inset-bg); --accent:var(--palette-focus); --accent-soft:var(--palette-selected);
 --thumb:var(--inset-bg); --eye-off:var(--text-muted); --eye-on:var(--accent-green);
}
html body :is(#card-layout-layers,#sidebar-layer-tree).layer-workspace .layer-row {display:grid;grid-template-columns:20px 28px 1fr auto;align-items:center;gap:8px;padding:5px 8px;border-radius:8px;border:1px solid transparent;cursor:grab;transition:background .12s}
html body :is(#card-layout-layers,#sidebar-layer-tree).layer-workspace .layer-row:hover {background:var(--row-hover)}
html body :is(#card-layout-layers,#sidebar-layer-tree).layer-workspace .layer-row.is-selected {background:var(--accent-soft);border-color:var(--accent)}
html body :is(#card-layout-layers,#sidebar-layer-tree).layer-workspace .layer-row.dragging {opacity:.5}
html body :is(#card-layout-layers,#sidebar-layer-tree).layer-workspace .layer-eye {appearance:none;-webkit-appearance:none;margin:0;width:20px;height:20px;cursor:pointer;background:var(--eye-off);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 3l18 18M10.6 6.1A10 10 0 0 1 12 6c5 0 9 6 9 6a16 16 0 0 1-3.2 3.7M6.6 7.6A15 15 0 0 0 3 12s4 6 9 6c1.2 0 2.3-.3 3.3-.7'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 3l18 18M10.6 6.1A10 10 0 0 1 12 6c5 0 9 6 9 6a16 16 0 0 1-3.2 3.7M6.6 7.6A15 15 0 0 0 3 12s4 6 9 6c1.2 0 2.3-.3 3.3-.7'/%3E%3C/svg%3E") center/contain no-repeat}
html body :is(#card-layout-layers,#sidebar-layer-tree).layer-workspace .layer-eye:checked {background:var(--eye-on);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center/contain no-repeat}
html body :is(#card-layout-layers,#sidebar-layer-tree).layer-workspace .layer-eye:focus-visible,
html body :is(#card-layout-layers,#sidebar-layer-tree).layer-workspace .layer-name:focus-visible,
html body :is(#card-layout-layers,#sidebar-layer-tree).layer-workspace .layer-lock:focus-visible {outline:2px solid var(--accent);outline-offset:2px}
html body :is(#card-layout-layers,#sidebar-layer-tree).layer-workspace .layer-thumbnail {width:28px;height:28px;border-radius:6px;background:var(--thumb);object-fit:contain;display:block}
html body :is(#card-layout-layers,#sidebar-layer-tree).layer-workspace .layer-thumbnail[hidden] {display:block;visibility:hidden}
html body :is(#card-layout-layers,#sidebar-layer-tree).layer-workspace .ph {background:linear-gradient(135deg,hsl(var(--h) 70% 70%),hsl(var(--h) 60% 50%))}
html body :is(#card-layout-layers,#sidebar-layer-tree).layer-workspace .layer-name {background:none;color:inherit;font:inherit;text-align:left;padding:2px 0;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html body :is(#card-layout-layers,#sidebar-layer-tree).layer-workspace .layer-row.is-selected .layer-name {font-weight:600}
html body :is(#card-layout-layers,#sidebar-layer-tree).layer-workspace .layer-lock {font:inherit;font-size:11px;padding:2px 8px;border-radius:999px;border:1px solid var(--line);background:none;color:var(--sub);cursor:pointer}
html body :is(#card-layout-layers,#sidebar-layer-tree).layer-workspace .layer-lock:hover {border-color:var(--accent);color:var(--accent)}
html body :is(#card-layout-layers,#sidebar-layer-tree).layer-workspace .layer-lock[aria-pressed="true"] {background:var(--accent);border-color:var(--accent);color:#fff}
html body :is(#card-layout-layers,#sidebar-layer-tree).layer-workspace .layer-branch>summary {list-style:none;cursor:pointer;margin:2px 0 2px 36px;padding:0 6px;font-size:11px;color:var(--sub);display:inline-flex;gap:4px}
html body :is(#card-layout-layers,#sidebar-layer-tree).layer-workspace .layer-branch>summary::-webkit-details-marker {display:none}
html body :is(#card-layout-layers,#sidebar-layer-tree).layer-workspace .layer-branch>summary::before {content:"▸";transition:transform .15s}
html body :is(#card-layout-layers,#sidebar-layer-tree).layer-workspace .layer-branch[open]>summary::before {transform:rotate(90deg)}
html body :is(#card-layout-layers,#sidebar-layer-tree).layer-workspace .layer-branch:not(:has(.layer-children))>summary {display:none}
html body :is(#card-layout-layers,#sidebar-layer-tree).layer-workspace .layer-children {margin-left:22px!important;padding-left:8px!important;border-left:2px solid var(--line)}
html body :is(#card-layout-layers,#sidebar-layer-tree).layer-workspace .layer-children .layer-row {grid-template-columns:20px 22px 1fr auto;padding:3px 8px;font-size:13px}
html body :is(#card-layout-layers,#sidebar-layer-tree).layer-workspace .layer-children .layer-thumbnail {width:22px;height:22px}
html body :is(#card-layout-layers,#sidebar-layer-tree).layer-workspace .layer-row[data-layer-key="constellations"] {
 grid-template-columns:20px 28px minmax(0,1fr) auto;
}
html body :is(#card-layout-layers,#sidebar-layer-tree).layer-workspace .layer-row .layer-lock { grid-column:auto; grid-row:auto; justify-self:auto; }
html body :is(#card-layout-layers,#sidebar-layer-tree).layer-workspace .layer-eye { border:0 !important; border-radius:0 !important; box-shadow:none !important; }
html body :is(#card-layout-layers,#sidebar-layer-tree).layer-workspace .layer-eye:checked { box-shadow:none !important; }
html body :is(#card-layout-layers,#sidebar-layer-tree).layer-workspace .layer-row { grid-template-columns:20px 28px minmax(0,1fr) auto; }
html body :is(#card-layout-layers,#sidebar-layer-tree).layer-workspace .layer-list > li > details:not(.layer-branch) > summary {
 display:flex; align-items:center; gap:6px; padding:6px 8px; list-style:none; font-size:12px;
}
html body :is(#card-layout-layers,#sidebar-layer-tree).layer-workspace .layer-list > li > details:not(.layer-branch) > summary::before { content:'▸'; }
html body :is(#card-layout-layers,#sidebar-layer-tree).layer-workspace .layer-list > li > details[open]:not(.layer-branch) > summary::before { transform:rotate(90deg); }

html body :is(#card-layout-layers,#sidebar-layer-tree).layer-workspace .layer-children { border-left:2px solid var(--panel-border) !important; }

html body :is(#card-layout-layers,#sidebar-layer-tree).layer-workspace .layer-list .layer-row {
    width:175px; max-width:100%; height:30px; min-height:30px; box-sizing:border-box;
    grid-template-columns:20px 28px minmax(0,1fr) auto; gap:4px; padding:0 4px;
}

html body :is(#card-layout-layers,#sidebar-layer-tree).layer-workspace .layer-list .layer-row {
    grid-template-columns:20px 20px 28px minmax(0,1fr);
}
html body :is(#card-layout-layers,#sidebar-layer-tree).layer-workspace .layer-row .layer-lock {
    display:grid; place-items:center; width:20px; height:24px; padding:0;
    grid-column:auto; grid-row:auto; border:0; border-radius:4px; background:transparent;
}
html body :is(#card-layout-layers,#sidebar-layer-tree).layer-workspace .layer-lock::before {
    content:''; display:block; width:18px; height:18px; background:var(--text-muted);
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Crect x='4' y='10' width='16' height='11' rx='2'/%3E%3Cpath d='M8 10V6a4 4 0 0 1 8 0'/%3E%3C/svg%3E") center/contain no-repeat;
}
html body :is(#card-layout-layers,#sidebar-layer-tree).layer-workspace .layer-lock[aria-pressed="true"]::before {
    background:var(--accent-green);
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Crect x='4' y='10' width='16' height='11' rx='2'/%3E%3Cpath d='M8 10V6a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E");
}

html body #sidebar-card-toolbar #card-editor-toolbar {
    position:static; width:auto; min-width:0; margin:0; border:0; border-radius:0;
    background:transparent; color:var(--text-main);
}
html body #sidebar-card-toolbar .card-toolbar-row {
    display:flex; flex-direction:column; align-items:stretch; gap:8px; padding:8px 0;
}
html body #sidebar-card-toolbar .toolbar-group { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px; width:100%; min-width:0; }
html body #sidebar-card-toolbar .toolbar-zoom-group { margin-left:0; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:center; }
html body #sidebar-card-toolbar [data-action=fit] { grid-column:1/-1; }
html body #sidebar-card-toolbar :is(.layout-scale-control,input[type=range],select) { width:100%; min-width:0; max-width:100%; box-sizing:border-box; }
html body #sidebar-card-toolbar .layout-scale-control { margin:8px 0; }
html body #sidebar-card-toolbar .layout-scale-control output { margin-left:auto; }
html body #sidebar-card-toolbar .toolbar-zoom-group input[type=range] { grid-column:1/-1; }
html body #sidebar-card-toolbar .toolbar-selection { min-width:0; width:100%; }
html body #sidebar-card-toolbar button { min-width:0; max-width:100%; padding:6px 4px; white-space:normal; overflow-wrap:anywhere; background:var(--inset-bg); }
.layout-edit-size { position:absolute; left:0; bottom:calc(100% + 4px); padding:3px 6px; border-radius:4px; background:var(--panel-bg); color:var(--text-main); font-size:12px; white-space:nowrap; pointer-events:none; }
.toolbar-layer-size { font-size:12px; font-variant-numeric:tabular-nums; color:var(--text-main); }
html body #sidebar-layout-presets #card-canvas-settings { min-width:0; padding:0; margin:8px 0; border:0; background:transparent; }
html body #sidebar-layout-presets #card-canvas-settings label { display:flex; flex-direction:column; align-items:stretch; gap:6px; margin:8px 0; min-width:0; }
html body #sidebar-layout-presets #card-canvas-settings :is(input,select,button) { width:100%; max-width:100%; min-width:0; box-sizing:border-box; }
.is-layout-editing[data-editor-tool="edit"] .card-layout-box { cursor:move; }
@media (pointer:coarse), (max-width:767px) {
    .is-layout-editing .layout-resize-handle.se {
        width:44px; height:44px; right:-22px; bottom:-22px;
        border:0; background:transparent;
    }
    .is-layout-editing .layout-resize-handle.se::after {
        content:''; position:absolute; inset:12px; border:2px solid var(--palette-ink);
        border-radius:50%; background:var(--accent-green); pointer-events:none;
    }
}