/* Shared palette studio and semantic surfaces for all three appearances. */
.palette-studio{max-width:1440px;margin-inline:auto}
.palette-studio .palette-tabs{flex-wrap:wrap;margin-bottom:24px}
.palette-modes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-width:740px;margin:24px 0 28px}
.palette-modes button{display:flex;align-items:center;gap:13px;min-height:76px;padding:15px 18px;text-align:left;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:14px;font-size:15px;font-weight:600;line-height:1.3;cursor:pointer}
.palette-modes button[aria-pressed=true]{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent);background:color-mix(in srgb,var(--accent) 7%,var(--surface))}
.palette-modes small{display:block;font-size:11px;font-weight:400;margin-top:5px;color:var(--muted)}
.palette-mode-icon{display:block;flex:none;width:28px;height:28px;border:1px solid #80909b;border-radius:50%;background:#f8fafc}
.palette-mode-icon.dark{background:#17232c}.palette-mode-icon.combined{background:linear-gradient(90deg,#17232c 50%,#f8fafc 50%)}
.palette-group-heading{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;margin-bottom:18px}
.palette-group-heading h3{font-size:18px}.palette-group-heading p{margin:0;color:var(--muted);font-size:12px}
.palette-studio .palette-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:17px}
.palette-studio .palette-card{padding:10px;border-radius:14px;min-width:0;cursor:pointer;transition:border-color .15s}
.palette-studio .palette-card:hover{border-color:var(--accent);filter:none}
.palette-studio button:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
.palette-card-title{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 3px 10px}
.palette-studio .palette-card strong{font-size:12px;margin:0}.palette-check{color:var(--accent);font-size:16px;min-height:19px}
.palette-studio .swatches{height:12px;border-radius:4px;margin:0 3px 7px}.palette-studio .palette-card small{font-size:9px;padding-inline:3px;color:var(--muted)}
.palette-mini{display:flex;height:112px;overflow:hidden;border-radius:8px;background:var(--mini-canvas);border:1px solid color-mix(in srgb,var(--mini-ink) 12%,var(--mini-canvas))}
.palette-mini-nav{display:flex;flex-direction:column;gap:7px;width:24%;padding:14px 8px;background:var(--mini-nav);border-right:1px solid color-mix(in srgb,var(--mini-nav-ink) 12%,var(--mini-nav))}
.palette-mini-nav i{height:4px;background:var(--mini-nav-ink);opacity:.35;border-radius:4px}.palette-mini-nav i:first-child{margin-bottom:10px;opacity:.8;width:65%}
.palette-mini-main{display:flex;flex:1;flex-direction:column;align-items:flex-start;gap:10px;padding:14px}
.palette-mini-main>i{width:55%;height:5px;background:var(--mini-ink);opacity:.8;border-radius:4px}
.palette-mini-main>span{display:flex;gap:7px;width:100%}.palette-mini-main>span i{height:33px;flex:1;border-radius:5px;background:var(--mini-panel);border:1px solid color-mix(in srgb,var(--mini-ink) 12%,var(--mini-panel))}
.palette-mini-main>b{width:35%;height:10px;background:var(--mini-accent);border-radius:3px}
.palette-current{display:block;color:var(--muted);font-size:9px;letter-spacing:.12em;margin-bottom:12px}
.palette-studio .palette-editor{margin-top:32px;gap:36px;border-radius:16px;padding:28px}
.palette-studio .palette-live-card{padding:0;overflow:hidden;display:block}.palette-live-card>.palette-live-nav{display:flex;justify-content:space-between;gap:16px;padding:15px 20px;border-radius:0;font-size:12px;font-weight:600}.palette-live-nav span{font-size:10px;font-weight:400;opacity:.8}
.palette-live-card>.palette-live-content{padding:24px;border-radius:0}.palette-live-content>span{font-size:8px;letter-spacing:2px}.palette-live-content>div{padding:12px;border-radius:6px;font-size:11px}.palette-live-content h3{color:inherit}
html[data-palette-mode] body{background:var(--paper);color:var(--ink)}
html[data-palette-mode] body :is(input,select,textarea){color:var(--ink);background-color:var(--surface);border-color:var(--line)}
html[data-palette-mode] body input[type=color]{background:transparent}
html[data-palette-mode] body .xr-account-header{background-color:var(--surface);color:var(--ink);border-color:var(--line)}
html[data-palette-mode=dark] body :is(.panel,.stat,.palette-card,.palette-editor,.topbar,.contextbar,.drawer,.modal,.admin-top,.admin-sidebar,.field-header,.field-topbar,.studio-topbar,.field-sidebar,.field-card,.field-panel,.studio-panel,.auth-card,.plan-card){background-color:var(--surface);color:var(--ink);border-color:var(--line)}
html[data-palette-mode=combined] body :is(.xr-sidebar,.sidebar,.admin-sidebar,.field-sidebar,.topbar,.admin-top,.field-header,.field-topbar,.studio-topbar,.public-nav,.xr-account-header){--surface:var(--palette-nav-surface);--card:var(--palette-nav-surface);--palette-soft:var(--palette-nav-soft);--control-line:var(--palette-nav-control-line);--white:var(--palette-nav-surface);--paper:var(--palette-nav-surface);--ink:var(--palette-nav-ink);--muted:var(--palette-nav-muted);--accent:var(--palette-nav-accent);--green:var(--palette-nav-accent);--on-accent:var(--palette-nav-on-accent);--line:var(--palette-nav-line);--xr-nav-surface:var(--palette-nav-surface);--xr-nav-ink:var(--palette-nav-ink);--xr-nav-accent:var(--palette-nav-accent);--xr-nav-line:var(--palette-nav-line);background:var(--palette-nav-surface);color:var(--palette-nav-ink);color-scheme:dark}
@media(max-width:1150px){.palette-studio .palette-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:720px){.palette-studio .palette-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.palette-modes{gap:8px}.palette-modes button{padding:12px 10px;gap:8px;font-size:12px}.palette-mode-icon{width:22px;height:22px}.palette-studio .palette-editor{grid-template-columns:1fr;padding:18px;gap:24px}.palette-group-heading{gap:8px}.palette-live-nav span{display:none}}
@media(max-width:380px){.palette-modes button{flex-direction:column;align-items:flex-start}.palette-mini{height:95px}.palette-mini-main{padding:12px 8px}.palette-studio .palette-card small{font-size:8px}.palette-studio .color-controls{gap:10px}}
@media(prefers-reduced-motion:reduce){.palette-studio .palette-card{transition:none}}

.palette-studio .palette-editor>div{min-width:0}.palette-studio .color-controls{flex-wrap:wrap}.palette-studio .palette-tabs button{max-width:100%}

/* Readable controls share the same surface and never dim their text on hover. */
html[data-palette-mode] body :is(input:not([type=checkbox]):not([type=radio]),select,textarea){border-color:var(--control-line);caret-color:var(--ink)}
html[data-palette-mode] body :is(input,textarea)::placeholder{color:var(--muted);opacity:1}
html[data-palette-mode] body :is(button,a):hover{filter:none}
html[data-palette-mode] body :is(button,a,input,select,textarea):focus-visible{outline:2px solid var(--accent);outline-offset:3px}

html[data-palette-mode] body :is(.btn,.button,.iconbtn){background-color:var(--surface);color:var(--ink);border-color:var(--control-line)}
html[data-palette-mode] body .btn.dark{background:var(--ink);color:var(--paper)}
html[data-palette-mode] body .day.selected{background:var(--accent);color:var(--on-accent)}
html[data-palette-mode] body .day.selected :is(span,strong,small){color:inherit}

html[data-palette-mode] body #sync{color:var(--palette-nav-success)}
html[data-palette-mode] body .avatar.client{background:var(--highlight);color:var(--on-highlight)}
html[data-palette-mode] body .xr-sidebar .xr-nav-item{transition:box-shadow .15s,border-color .15s}
html[data-palette-mode] body .xr-sidebar .xr-nav-item:is([aria-current=page],.selected,.active){background:var(--palette-nav-soft);color:var(--palette-nav-accent)}
html[data-palette-mode] body .xr-profile-menu{--xr-profile-muted:var(--palette-nav-muted);--xr-profile-tint:var(--palette-nav-soft)}
html[data-palette-mode] body .xr-profile-menu>summary{background:var(--surface);transition:box-shadow .15s,border-color .15s}

html[data-palette-mode] body :is(.btn.primary,.button.primary,.ws-button.primary,.ent-button.primary,.primary-link,.palette-card):hover{filter:none}