/* All rules belong to the editable sample page, not the host shell. */
[data-live-customize] { --primary:var(--ink); --page:var(--workspace); --text:var(--ink); --field:var(--surface); --header:var(--surface); --input-border:var(--line); --hover:var(--sidebar); --active:var(--sidebar); --focus:var(--ink); --link:var(--ink); --on-primary:var(--surface); --radius:8px; --button-radius:6px; --panel-shadow:none; --type-scale:1; --page-spacing:16px; color:var(--ink); background:transparent; font-family:inherit; }
[data-live-customize] .live-heading h1 {font:inherit;font-size:22px;font-weight:600;margin:0 0 6px;}
[data-live-customize] .live-heading p {font-size:13px;margin:0 0 14px;color:var(--muted);}
[data-live-customize] .live-tools {position:sticky;top:0;z-index:20;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:12px;margin-bottom:16px;box-shadow:0 3px 10px #0001;}
[data-live-customize] .live-tools-title {display:flex;justify-content:space-between;gap:10px;font-size:13px;margin-bottom:10px;}
[data-live-customize] [data-live-status] {font-size:11px;color:var(--muted);}
[data-live-customize] .live-controls {display:flex;flex-wrap:wrap;align-items:end;gap:12px;}
[data-live-customize] .live-controls label {display:grid;gap:5px;font-size:11px;min-width:70px;flex:1;}
[data-live-customize] .live-controls input,[data-live-customize] .live-controls select {max-width:100%;min-width:0;width:100%;height:30px;border:1px solid var(--line);border-radius:4px;background:var(--surface);color:var(--ink);padding:3px;font:inherit;}
[data-live-customize] .live-controls input[type=color] {padding:2px;cursor:pointer;}
[data-live-customize] .live-controls input[type=range] {accent-color:var(--ink);}
[data-live-customize] .live-actions {display:flex;gap:8px;margin-top:10px;}
[data-live-customize] .live-actions button {padding:6px 10px;border:1px solid var(--line);border-radius:5px;background:var(--surface);color:var(--ink);font-size:12px;cursor:pointer;}
[data-live-customize] .live-actions button:disabled {opacity:.45;cursor:default;}
[data-live-customize] [data-component] {cursor:pointer;scroll-margin-top:230px;}
[data-live-customize] [data-component]:hover {outline:1px dashed var(--ink);outline-offset:2px;}
[data-live-customize] [data-live-selected] {outline:2px solid var(--ink)!important;outline-offset:3px;}
[data-live-customize] .sample-sidebar {background:var(--sidebar);color:var(--ink);}
[data-live-customize] .sample-nav button,[data-live-customize] .sample-logo {color:var(--ink);}
[data-live-customize] .sample-nav button.active {background:var(--surface);color:var(--ink);}
[data-live-customize] .sample-canvas {padding:10px;}
[data-live-customize] .sample-content {padding:16px;}
[data-live-customize] .sample-metrics {gap:10px;}
[data-live-customize] .component-directory {display:none;}
@media(max-width:760px){[data-live-customize] .live-controls label{flex-basis:28%;}[data-live-customize] .live-tools-title{flex-wrap:wrap;}}

/* Keep the selected preview and its compact tools visible together. */
[data-live-customize]{display:grid;grid-template-columns:minmax(0,1fr) 220px;grid-template-rows:auto minmax(0,1fr);gap:12px;height:calc(100dvh - 150px);min-height:350px;}
[data-live-customize] .live-heading{grid-column:1/-1;}
[data-live-customize] .live-heading h1{display:none;}
[data-live-customize] .live-heading p{margin:0;}
[data-live-customize] .live-tools{grid-column:2;grid-row:2;position:static;overflow:auto;margin:0;box-shadow:none;}
[data-live-customize] .live-tools-title{display:grid;}
[data-live-customize] .live-controls{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
[data-live-customize] .live-controls label:first-child,[data-live-customize] .live-controls [data-live-text-label]{grid-column:1/-1;}
[data-live-customize] .live-actions{flex-wrap:wrap;}
[data-live-customize] .sample-canvas{grid-column:1;grid-row:2;overflow:auto;min-height:0;}
[data-live-customize] .sample-app{display:block;}
[data-live-customize] .sample-sidebar{padding:10px;}
[data-live-customize] .sample-nav{display:flex;flex-wrap:wrap;}
[data-live-customize] .sample-logo{margin-bottom:8px;}
[data-live-customize] [data-component]{scroll-margin-top:10px;}
[data-live-customize] .sample-metrics{grid-template-columns:repeat(3,minmax(0,1fr));}
@media(max-width:760px){[data-live-customize]{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(160px,1fr) auto;height:calc(100dvh - 130px);}[data-live-customize] .sample-canvas{grid-column:1;grid-row:2;}[data-live-customize] .live-tools{grid-column:1;grid-row:3;max-height:220px;}[data-live-customize] .live-controls{grid-template-columns:repeat(3,minmax(0,1fr));}[data-live-customize] .live-controls label:first-child,[data-live-customize] .live-controls [data-live-text-label]{grid-column:auto;}}

@scope ([data-live-customize]) {
.picker{position:fixed;z-index:20;top:20px;left:50%;transform:translateX(-50%);width:min(820px,calc(100vw - 48px));padding:24px;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:0 20px 60px rgba(16,24,40,.18);overflow:hidden}.picker[hidden]{display:none}.picker-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.picker-head strong{font-size:15px}.close{border:0;background:none;color:var(--muted);font-size:20px;cursor:pointer}.current{display:flex;align-items:center;gap:12px;margin:0 0 14px}.current i{width:38px;height:38px;border:1px solid var(--line);border-radius:9px}.current code{color:var(--muted);font-size:11px}.spectrum{height:420px;border-radius:12px;cursor:crosshair;background:linear-gradient(to top,#000 0%,transparent 55%,rgba(255,255,255,.9) 100%),linear-gradient(to right,#f00 0%,#ff0 16%,#0f0 33%,#0ff 50%,#00f 66%,#f0f 83%,#f00 100%);box-shadow:inset 0 0 0 1px rgba(16,24,40,.12)}.rgba{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:14px}.rgba label{display:block;margin-bottom:5px;color:var(--muted);font-size:10px;font-weight:800}.rgba input,.hex{width:100%;padding:10px;border:1px solid #cbd5e1;border-radius:9px;background:var(--field);color:var(--text);font:inherit;font-size:12px}.hexrow{display:grid;grid-template-columns:1fr auto;gap:9px;margin-top:10px}.picker-undo{width:38px;height:38px;padding:0;display:grid;place-items:center;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--text);font-size:0;cursor:pointer}.picker-undo svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.hint{margin:12px 0 0;color:var(--muted);font-size:10px}
}
[data-live-customize] .color-trigger{display:flex;align-items:center;gap:5px;width:100%;min-height:32px;padding:4px;border:1px solid var(--line);border-radius:5px;background:var(--surface);color:var(--ink);cursor:pointer;}
[data-live-customize] .color-trigger .swatch{display:block;width:24px;height:22px;border:1px solid var(--line);border-radius:3px;flex-shrink:0;}
[data-live-customize] .color-trigger code{font-size:9px;}
[data-live-customize] .picker{z-index:100;max-height:calc(100dvh - 32px);overflow:auto;}
@media(max-width:760px){[data-live-customize] .spectrum{height:min(420px,40dvh);}}