/* Site themes are selected centrally. Tokens also drive the admin chooser previews. */
[data-skin=porcelain],[data-preview=porcelain]{
 --paper:#f5f7fb;--surface:#fff;--tone:#203045;--sub:#546578;--edge:#d9e1eb;--action:#285cb6;--tint:#eaf0fc;--rail:#f3f6fc;--rail-text:#263a58;--radius:16px
}
[data-skin=cobalt],[data-preview=cobalt]{
 --paper:#f5f7ff;--surface:#fff;--tone:#111c3b;--sub:#4d5978;--edge:#cbd4eb;--action:#153ed0;--tint:#e5ebff;--rail:#152d87;--rail-text:#fff;--radius:6px
}
[data-skin=forest],[data-preview=forest]{
 --paper:#ebece0;--surface:#fffff5;--tone:#182e20;--sub:#52634f;--edge:#c3c9b5;--action:#29533b;--tint:#e5ebdc;--rail:#142e23;--rail-text:#f2f2de;--radius:10px
}
[data-skin=draft],[data-preview=draft]{
 --paper:#eff2f6;--surface:#fff;--tone:#1e3041;--sub:#516477;--edge:#c1cedc;--action:#356491;--tint:#e2edf8;--rail:#344454;--rail-text:#f3f7fa;--radius:4px
}
[data-skin=celadon],[data-preview=celadon]{
 --paper:#eef5ef;--surface:#fcfefb;--tone:#1c382e;--sub:#51695f;--edge:#c9dace;--action:#346d55;--tint:#dfefe4;--rail:#e3eee5;--rail-text:#254b39;--radius:14px
}
html[data-skin]{color-scheme:light;--bg:var(--paper);--panel:var(--surface);--panel-2:var(--tint);--line:var(--edge);--text:var(--tone);--ink:var(--tone);--dim:var(--sub);--muted:var(--sub);--hair:var(--edge);--accent:var(--action)}
html[data-skin] body,html[data-skin] body::before{background:var(--paper);color:var(--tone)}
html[data-skin] :is(.platform-pane,.manage-content,.content){background:transparent;color:var(--tone)}
html[data-skin] :is(.rail,.platform-rail,.manage-shell .rail){background:var(--rail);color:var(--rail-text);border-color:var(--edge)}
html[data-skin] .rail :is(.brand,.foot,button,a,small),html[data-skin] .rail #navBalance{color:var(--rail-text)}
html[data-skin] .rail :is(button,a){background:transparent;border-color:transparent;box-shadow:none}
html[data-skin] .rail nav :is(button,a){transition-property:transform}
html[data-skin] .rail nav :is(button,a):is(:hover,:focus-visible,.on,[aria-current=page]){background:var(--surface);color:var(--action);box-shadow:inset 3px 0 var(--action)}
html[data-skin] :is(.hero h1,.manage-content h1,.panel h1,.card h3,.brand,.manage-content h2){color:var(--tone)}
html[data-skin] :is(.quiet,.hero p,.card p,.manage-top,.foot){color:var(--sub)}
html[data-skin] :is(.composer,.card,.box,.supplier-entry,.manage-table-wrap,.login,.recharge-dialog,.period-value-card,.creation-parameters label){background:var(--surface);border-color:var(--edge);border-radius:var(--radius);color:var(--tone)}
html[data-skin] :is(.primary,.recharge-dialog form button,.tabs .on){background:var(--action);border-color:var(--action);color:white}
html[data-skin] :is(.manage-table thead th,.creation-slider){background:var(--tint);color:var(--tone)}
html[data-skin] :is(input,textarea,select):focus-visible{outline-color:var(--action)}
html[data-skin] .composer:focus-within{border-color:var(--action);box-shadow:0 0 0 3px var(--tint)}
html[data-skin] :is(.manage-top,.topbar,#platformBar){background:var(--surface);border-color:var(--edge);color:var(--tone)}
html[data-skin] #platformBar :is(a,button){color:var(--action)}
html[data-skin] #editorRoot :is(.topbar,.left-rail,.canvas-toolbar,.studio-node,.inspector){background:var(--surface);color:var(--tone);border-color:var(--edge)}
html[data-skin] #editorRoot :is(.canvas-scroll,.canvas-wrap){background-color:var(--paper);background-image:radial-gradient(var(--edge) 1px,transparent 1px);background-size:18px 18px}
html[data-skin] #editorRoot :is(.node-header,.node-body label,.project-title,.inspector-title,.brand strong){color:var(--tone)}
html[data-skin] #editorRoot :is(.canvas-tab-shell.active,.brand-mark,.primary-button){background:var(--action);color:white}
html[data-skin] .studio-node{border-radius:var(--radius)}
/* Ceramic gallery: continuous strip of finished work. */
@media(min-width:1000px){
 html[data-skin=porcelain] .content .grid{display:grid;grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:minmax(190px,23%);overflow-x:auto;padding:3px 2px 14px}
 html[data-skin=cobalt] :is(.platform-shell,.manage-shell){grid-template-columns:166px minmax(0,1fr)}
 html[data-skin=cobalt] :is(.platform-pane,.manage-content){border-top:6px solid var(--action)}
 html[data-skin=cobalt] .manage-content :is(.manage-table th,.manage-table td){padding-block:10px}
 html[data-skin=cobalt] .content .grid{gap:12px}
 html[data-skin=forest] .hero h1,html[data-skin=forest] .manage-content h1{font-family:Georgia,'Songti SC',SimSun,serif}
 html[data-skin=celadon] .manage-content h1{border-bottom:2px solid var(--action);padding-bottom:12px}
 html[data-skin=draft] .platform-pane,html[data-skin=draft] #editorRoot .canvas-scroll{background-color:var(--paper);background-image:linear-gradient(var(--edge) 1px,transparent 1px),linear-gradient(90deg,var(--edge) 1px,transparent 1px);background-size:32px 32px}
 html[data-skin=draft] .content{background:color-mix(in srgb,var(--paper) 85%,transparent)}
 html[data-skin=draft] .manage-table{font-variant-numeric:tabular-nums}
 html[data-skin=draft] .manage-table td{border-inline-end:1px solid var(--edge)}
}
.theme-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,213px),1fr));gap:16px;margin:22px 0}
.theme-choice{display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px;padding:12px;border:1px solid #c8d1d7;border-radius:12px;background:white;color:#213140;cursor:pointer}
.theme-choice:has(input:checked){outline:2px solid var(--action);outline-offset:1px}
.theme-choice input{accent-color:var(--action)}.theme-choice strong,.theme-choice small{display:block}.theme-choice small{margin-top:4px;color:#546270}
.theme-sample{grid-column:1/-1;height:86px;position:relative;overflow:hidden;border:1px solid var(--edge);border-radius:6px;background:var(--paper)}
.theme-sample i,.theme-sample b,.theme-sample em{position:absolute;display:block}.theme-sample i{inset:0 80% 0 0;background:var(--rail);border-right:1px solid var(--edge)}.theme-sample b{inset:13px 12px 15px 26%;background:var(--surface);border:1px solid var(--edge);border-radius:var(--radius)}.theme-sample em{bottom:23px;right:19px;width:21%;height:9px;border-radius:3px;background:var(--action)}
@media(min-width:1080px){
 html[data-skin] #managePane:has(#shopConfig){display:grid;grid-template-columns:minmax(260px,1fr) minmax(300px,1fr);align-items:start;gap:18px}
 html[data-skin] #managePane:has(#shopConfig)>h1{grid-column:1/-1;margin-bottom:0}
 html[data-skin] #managePane :is(#shopConfig,#issueCards){margin:0;min-width:0;width:100%;height:auto}
 html[data-skin=forest] #managePane:has(#shopConfig){grid-template-columns:minmax(0,1fr)}
 html[data-skin=forest] #issueCards{display:grid;grid-template-columns:1fr 1fr auto;align-items:end}
 html[data-skin=forest] #issueCards :is(h2,#issuedLabel){grid-column:1/-1}
 html:is([data-skin=draft],[data-skin=cobalt]) #managePane:has(#shopConfig){grid-template-columns:minmax(290px,1.35fr) minmax(260px,1fr)}
 html:is([data-skin=cobalt],[data-skin=draft],[data-skin=celadon]) dialog.recharge-dialog[open]{margin:auto 24px auto auto}
 html[data-skin=celadon] .composer,html[data-skin=celadon] .recharge-dialog{background:color-mix(in srgb,var(--surface) 94%,transparent);backdrop-filter:blur(16px)}
}
/* Keep the composer on the same left edge as the work below it. */
html[data-skin] .platform-pane .content .hero{
 display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;
 gap:16px 24px;text-align:left;padding:clamp(12px,2.8vw,42px) 0 8px;margin:0;min-height:0
}
html[data-skin] .content .hero>*{grid-column:1/-1;min-width:0}
html[data-skin] .content .hero>h1{
 grid-column:1;grid-row:1;margin:0;color:var(--tone);line-height:1.2;
 font-size:clamp(28px,3.2vw,48px);letter-spacing:-.045em
}
html[data-skin] .content .hero>#creationControls{grid-column:2;grid-row:1;margin:0;justify-self:end}
html[data-skin] .hero>.composer{box-sizing:border-box;width:100%;max-width:none;margin:0;padding:clamp(14px,2vw,26px);box-shadow:0 2px 4px #13212c08}
html[data-skin] .hero>.chips{justify-content:flex-start;margin:0;flex-wrap:wrap}
html[data-skin] .platform-pane .content{max-width:1500px}
html[data-skin=porcelain] .content .section h2{font-weight:550;letter-spacing:-.035em}
html[data-skin=cobalt] .content .hero>h1{padding-left:14px;border-left:5px solid var(--action);font-weight:760}
html[data-skin=cobalt] .hero>.composer{border-radius:4px;border-top:2px solid var(--action)}
html[data-skin=forest] .content .hero>h1{font-weight:520;letter-spacing:.035em}
html[data-skin=forest] .hero>.composer{border-width:1px 0;border-radius:0;background:transparent;box-shadow:none;padding-inline:0}
html[data-skin=forest] .content .section h2{font-family:Georgia,'Songti SC',SimSun,serif;font-weight:550}
html[data-skin=draft] .platform-pane .content{background:var(--paper)}
html[data-skin=draft] .hero>.composer{border-radius:2px;border-color:var(--action);box-shadow:3px 3px 0 var(--edge)}
html[data-skin=celadon] .hero>.composer{border-left:3px solid var(--action);border-radius:4px 14px 14px 4px}
@media(min-width:1150px){
 html[data-skin=forest] .content .grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
 html[data-skin=forest] .content .card .thumb{aspect-ratio:16/9;height:auto;border-radius:3px}
 html[data-skin=celadon] .content .grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
 html[data-skin=celadon] .content .card .thumb{aspect-ratio:4/5;height:auto;border-radius:8px}
}
@media(max-width:720px){
 html[data-skin] .platform-pane .content .hero{grid-template-columns:minmax(0,1fr);gap:12px}
 html[data-skin] .content .hero>#creationControls{grid-column:1;grid-row:auto;justify-self:start}
}