/* CARX Studio — UI styles. All colours come from CSS variables generated from
   /shared/brand.js at boot (no hex values here). Professional internal tool:
   Warm Concrete canvas, white cards, charcoal text, Lime only as accent. */

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:var(--f-family);background:var(--c-concrete);color:var(--c-charcoal);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}
body.booting{visibility:hidden}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit}
:focus-visible{outline:2px solid var(--c-black);outline-offset:2px}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- shell ---------- */
.shell{display:grid;grid-template-columns:248px minmax(0,1fr);min-height:100%}
.sidebar{background:var(--c-white);border-inline-start:1px solid var(--u-line);position:sticky;top:0;height:100vh;display:flex;flex-direction:column;padding:18px 14px;gap:14px;overflow-y:auto}
.sidebar .brand{display:flex;align-items:center;gap:10px;padding:4px 8px 10px;border-bottom:1px solid var(--u-line)}
.sidebar .brand img{height:20px;width:auto}
.sidebar .brand .appname{font-size:16px;font-weight:900;color:var(--c-charcoal)}
.sidebar .brand span{font-size:12px;color:var(--u-muted);font-weight:700;letter-spacing:.04em}
.nav{display:flex;flex-direction:column;gap:2px}
.nav .group{font-size:11px;font-weight:800;color:var(--u-muted);padding:12px 10px 4px;letter-spacing:.04em}
.nav a{display:flex;align-items:center;gap:10px;text-decoration:none;padding:9px 10px;border-radius:9px;font-weight:700;font-size:14px;position:relative}
.nav a:hover{background:var(--u-surface-alt)}
.nav a[aria-current=page]{background:var(--c-concrete)}
.nav a[aria-current=page]::before{content:"";position:absolute;inset-inline-start:-14px;top:8px;bottom:8px;width:3px;border-radius:3px;background:var(--c-lime)}
.nav .dot{width:7px;height:7px;border-radius:50%;background:var(--u-line-strong);flex:0 0 auto}
.nav a[aria-current=page] .dot{background:var(--c-black)}
.sidebar .foot{margin-top:auto;border-top:1px solid var(--u-line);padding-top:12px;font-size:13px;display:flex;flex-direction:column;gap:6px}
.sidebar .foot .who{font-weight:800}
.main{min-width:0;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:20;background:var(--c-concrete);border-bottom:1px solid var(--u-line);display:flex;align-items:center;gap:12px;padding:10px 24px}
.crumbs{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--u-muted);min-width:0;flex:1;overflow:hidden;white-space:nowrap}
.crumbs a{text-decoration:none;font-weight:700}
.crumbs b{color:var(--c-charcoal);overflow:hidden;text-overflow:ellipsis}
.search{position:relative;width:min(360px,40vw)}
.search input{width:100%;border:1px solid var(--u-line);background:var(--c-white);border-radius:10px;padding:8px 12px}
.search .results{position:absolute;inset-inline:0;top:calc(100% + 6px);background:var(--c-white);border:1px solid var(--u-line);border-radius:12px;box-shadow:0 12px 32px color-mix(in srgb,var(--c-black) 12%,transparent);max-height:60vh;overflow:auto;padding:6px;z-index:30}
.search .results .gh{font-size:11px;font-weight:800;color:var(--u-muted);padding:8px 10px 2px}
.search .results a{display:block;padding:8px 10px;border-radius:8px;text-decoration:none;font-size:14px}
.search .results a:hover,.search .results a.on{background:var(--c-concrete)}
.search .results small{display:block;color:var(--u-muted);font-size:12px}
.topbar .menu-btn{display:none}
#view{padding:24px;max-width:1360px;width:100%;margin:0 auto;min-width:0}
.banner-warn{background:var(--s-warn-bg);color:var(--s-warn);border-bottom:1px solid var(--u-line);padding:8px 24px;font-size:13px;font-weight:700}

@media (max-width:960px){
  .shell{grid-template-columns:1fr}
  .sidebar{position:fixed;inset-block:0;inset-inline-start:0;width:min(290px,86vw);z-index:50;transform:translateX(100%);transition:transform .18s ease;box-shadow:0 0 0 100vmax color-mix(in srgb,var(--c-black) 0%,transparent)}
  body.nav-open .sidebar{transform:none;box-shadow:0 0 0 100vmax color-mix(in srgb,var(--c-black) 35%,transparent)}
  .topbar .menu-btn{display:inline-flex}
  .topbar{padding:10px 16px;flex-wrap:wrap}
  .search{width:100%;order:3}
  #view{padding:16px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---------- typography & layout ---------- */
h1{font-size:24px;font-weight:900;margin:0;line-height:1.3;text-wrap:balance}
h2{font-size:18px;font-weight:800;margin:0;line-height:1.35}
h3{font-size:15px;font-weight:800;margin:0}
.muted{color:var(--u-muted)}
.small{font-size:13px}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.page-head p{margin:4px 0 0;color:var(--u-muted);font-size:14px}
.stack{display:flex;flex-direction:column;gap:12px}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.spread{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1100px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.g2,.g3,.g4{grid-template-columns:1fr}}
.section{margin-top:28px}
.section > .spread{margin-bottom:12px}

/* ---------- cards ---------- */
.card{background:var(--c-white);border:1px solid var(--u-line);border-radius:14px;padding:16px;min-width:0}
.card.flat{background:var(--u-surface-alt)}
.action{display:flex;flex-direction:column;gap:6px;text-decoration:none;background:var(--c-white);border:1px solid var(--u-line);border-radius:14px;padding:16px;min-height:96px;cursor:pointer;text-align:start}
.action:hover{border-color:var(--c-black)}
.action b{font-size:15px}
.action span{font-size:13px;color:var(--u-muted)}
.action.primary{background:var(--c-black);color:var(--c-white);border-color:var(--c-black)}
.action.primary span{color:var(--c-concrete);opacity:.8}
.action.primary::after{content:"";display:block;width:28px;height:3px;border-radius:2px;background:var(--c-lime);margin-top:auto}

.proj-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.proj{background:var(--c-white);border:1px solid var(--u-line);border-radius:14px;overflow:hidden;text-decoration:none;display:flex;flex-direction:column;min-width:0}
.proj:hover{border-color:var(--c-black)}
.proj .thumb{aspect-ratio:4/3;background:var(--u-surface-alt);display:grid;place-items:center;overflow:hidden;border-bottom:1px solid var(--u-line)}
.proj .thumb img{max-height:100%;object-fit:contain}
.proj .meta{padding:10px 12px;display:flex;flex-direction:column;gap:4px;min-width:0}
.proj .name{font-weight:800;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.proj .sub{font-size:12px;color:var(--u-muted);display:flex;gap:6px;align-items:center;flex-wrap:wrap}

/* ---------- badges ---------- */
.badge{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:800;border-radius:99px;padding:2px 9px;background:var(--c-concrete);color:var(--c-charcoal);white-space:nowrap}
.badge.draft{background:var(--u-surface-alt);border:1px solid var(--u-line)}
.badge.review{background:var(--s-warn-bg);color:var(--s-warn)}
.badge.approved{background:var(--c-black);color:var(--c-white)}
.badge.approved::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--c-lime)}
.badge.published{background:var(--s-pass-bg);color:var(--s-pass)}
.badge.archived{background:var(--u-surface-alt);color:var(--u-muted);text-decoration:line-through}
.badge.legacy{background:var(--s-warn-bg);color:var(--s-warn)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:10px;padding:9px 16px;min-height:40px;font-weight:800;font-size:14px;border:1px solid var(--u-line-strong);background:var(--c-white);cursor:pointer;text-decoration:none;white-space:nowrap}
.btn:hover{border-color:var(--c-black)}
.btn.primary{background:var(--c-black);color:var(--c-white);border-color:var(--c-black)}
.btn.primary:hover{opacity:.92}
.btn.accent{background:var(--c-lime);color:var(--c-black);border-color:var(--c-lime)}
.btn.ghost{background:transparent;border-color:transparent}
.btn.ghost:hover{background:var(--u-surface-alt)}
.btn.danger{color:var(--s-error)}
.btn.sm{min-height:34px;padding:6px 12px;font-size:13px}
.btn:disabled{opacity:.45;cursor:not-allowed}

/* ---------- forms ---------- */
label.f{display:flex;flex-direction:column;gap:5px;font-size:13px;font-weight:700;min-width:0}
label.f small{color:var(--u-muted);font-weight:400}
input[type=text],input[type=search],input[type=password],input[type=number],input[type=url],select,textarea{width:100%;min-width:0;border:1px solid var(--u-line-strong);background:var(--c-white);border-radius:10px;padding:9px 11px;font-size:15px;min-height:40px}
textarea{resize:vertical;line-height:1.7;min-height:80px}
input:disabled,select:disabled,textarea:disabled{background:var(--u-surface-alt);color:var(--u-muted)}
.ltr{direction:ltr;text-align:right}
.check{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;cursor:pointer}
.check input{width:18px;height:18px;accent-color:var(--c-black)}
.seg{display:flex;flex-wrap:wrap;gap:6px}
.seg button{border:1px solid var(--u-line-strong);background:var(--c-white);border-radius:9px;padding:7px 12px;font-weight:700;font-size:13px;cursor:pointer;min-height:36px}
.seg button[aria-pressed=true]{background:var(--c-black);color:var(--c-white);border-color:var(--c-black)}
.range{display:grid;grid-template-columns:70px minmax(0,1fr) 46px;gap:8px;align-items:center;font-size:13px}
.range input{accent-color:var(--c-black);width:100%;direction:ltr}
.range output{direction:ltr;text-align:left;font-variant-numeric:tabular-nums;color:var(--u-muted)}

/* ---------- states ---------- */
.state{border:1px dashed var(--u-line-strong);border-radius:14px;padding:28px 18px;text-align:center;color:var(--u-muted);background:var(--u-surface-alt);display:flex;flex-direction:column;align-items:center;gap:10px}
.state b{color:var(--c-charcoal);font-size:15px}
.state.error{border-color:var(--s-error);color:var(--s-error);background:var(--s-error-bg)}
.spinner{width:22px;height:22px;border-radius:50%;border:3px solid var(--u-line);border-top-color:var(--c-black);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- toast / modal ---------- */
.toasts{position:fixed;inset-inline-start:16px;bottom:16px;display:flex;flex-direction:column;gap:8px;z-index:100;max-width:min(380px,calc(100vw - 32px))}
.toast{background:var(--c-black);color:var(--c-white);border-radius:12px;padding:10px 14px;font-weight:700;font-size:14px;box-shadow:0 10px 30px color-mix(in srgb,var(--c-black) 25%,transparent)}
.toast.err{background:var(--s-error)}
dialog.modal{border:none;border-radius:16px;padding:0;width:min(640px,calc(100vw - 32px));max-height:calc(100vh - 48px);background:var(--c-white);color:var(--c-charcoal);box-shadow:0 30px 80px color-mix(in srgb,var(--c-black) 30%,transparent)}
dialog.modal::backdrop{background:color-mix(in srgb,var(--c-black) 45%,transparent)}
dialog.modal.wide{width:min(1100px,calc(100vw - 32px))}
.modal .mh{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:14px 18px;border-bottom:1px solid var(--u-line);position:sticky;top:0;background:var(--c-white);z-index:1}
.modal .mb{padding:18px;overflow:auto;max-height:calc(100vh - 160px)}
.modal .mf{display:flex;gap:8px;justify-content:flex-start;padding:12px 18px;border-top:1px solid var(--u-line);flex-wrap:wrap}

/* ---------- login ---------- */
.login{min-height:100vh;display:grid;place-items:center;padding:16px}
.login .card{width:min(400px,100%);padding:28px;display:flex;flex-direction:column;gap:14px}
.login img{height:26px;width:auto;margin-bottom:6px}

/* ---------- studio ---------- */
.studio{display:grid;grid-template-columns:minmax(0,370px) minmax(0,1fr);gap:16px;align-items:start}
@media (max-width:1100px){.studio{grid-template-columns:1fr}}
.panel{display:flex;flex-direction:column;gap:10px}
details.step{background:var(--c-white);border:1px solid var(--u-line);border-radius:14px}
details.step summary{list-style:none;cursor:pointer;padding:12px 14px;font-weight:800;display:flex;justify-content:space-between;align-items:center;gap:8px}
details.step summary::-webkit-details-marker{display:none}
details.step summary .n{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--c-concrete);font-size:12px;margin-inline-end:8px}
details.step[open] summary .n{background:var(--c-black);color:var(--c-white)}
details.step summary .v{font-size:12px;color:var(--u-muted);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:50%}
details.step .body{padding:0 14px 14px;display:flex;flex-direction:column;gap:10px}
.stage{position:sticky;top:70px;display:flex;flex-direction:column;gap:12px;min-width:0}
@media (max-width:1100px){.stage{position:static;order:-1}}
.stage .canvas-wrap{background:var(--u-surface-alt);border:1px solid var(--u-line);border-radius:14px;padding:14px;display:flex;justify-content:center;align-items:center;min-height:200px;overflow:hidden}
.stage canvas{max-width:100%;max-height:62vh;width:auto;height:auto;box-shadow:0 6px 24px color-mix(in srgb,var(--c-black) 12%,transparent);touch-action:none;cursor:grab;background:var(--c-white)}
.stage canvas.drag{cursor:grabbing}
.dropzone{border:1.5px dashed var(--u-line-strong);border-radius:12px;padding:16px;text-align:center;color:var(--u-muted);font-size:13px;cursor:pointer;background:var(--u-surface-alt)}
.dropzone.over{border-color:var(--c-black);background:var(--c-concrete)}
.layers{display:flex;flex-direction:column;gap:6px}
.layer{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:8px;align-items:center;border:1px solid var(--u-line);border-radius:10px;padding:5px 6px;cursor:pointer;background:var(--c-white)}
.layer[aria-current=true]{border-color:var(--c-black);box-shadow:inset 3px 0 0 var(--c-lime)}
.layer img{width:40px;height:40px;object-fit:contain;background:var(--c-white);border-radius:6px;border:1px solid var(--u-line)}
.layer .nm{font-size:13px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.layer .acts{display:flex;gap:3px}
.layer .acts button{width:30px;height:30px;border-radius:7px;border:1px solid var(--u-line);background:var(--c-white);cursor:pointer;font-size:12px}
.presets{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px}
.presets button{border:1px solid var(--u-line);background:var(--c-white);border-radius:10px;padding:8px 10px;text-align:start;cursor:pointer;display:flex;flex-direction:column;gap:2px;min-height:52px}
.presets button b{font-size:13px}
.presets button span{font-size:11px;color:var(--u-muted);direction:ltr;text-align:right}
.presets button[aria-pressed=true]{border-color:var(--c-black);box-shadow:inset 3px 0 0 var(--c-lime)}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.qa{display:flex;flex-direction:column;gap:6px}
.qa .sum{display:flex;gap:8px;flex-wrap:wrap}
.qa .sum span{border-radius:99px;padding:3px 10px;font-weight:800;font-size:12px}
.qa .pass{background:var(--s-pass-bg);color:var(--s-pass)}
.qa .warn{background:var(--s-warn-bg);color:var(--s-warn)}
.qa .error{background:var(--s-error-bg);color:var(--s-error)}
.qa ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.qa li{font-size:13px;border-radius:9px;padding:7px 10px;display:flex;gap:8px;align-items:flex-start}
.qa li b{flex:0 0 auto;font-size:11px;min-width:52px}
.preview-frame{display:flex;flex-direction:column;gap:10px;align-items:center;width:100%}
.preview-frame .phone{width:min(390px,100%);border:10px solid var(--c-black);border-radius:28px;background:var(--c-concrete);padding:12px 0;overflow:hidden}
.preview-frame .phone img{width:100%}
.preview-frame .desk{width:100%;border:1px solid var(--u-line);border-radius:10px;background:var(--c-white);padding:16px;overflow:hidden}
.preview-frame .cap{font-size:12px;color:var(--u-muted);font-weight:700}
.locked-note{background:var(--c-black);color:var(--c-white);border-radius:12px;padding:10px 14px;font-size:13px;display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.locked-note::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c-lime)}

/* ---------- versions ---------- */
.versions{display:flex;flex-direction:column;gap:8px}
.ver{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:10px;align-items:center;border:1px solid var(--u-line);border-radius:12px;padding:8px;background:var(--c-white)}
.ver img{width:64px;height:48px;object-fit:contain;background:var(--u-surface-alt);border-radius:6px}
.ver .t{font-weight:800}
.ver.approved{border-color:var(--c-black);box-shadow:inset 3px 0 0 var(--c-lime)}

/* ---------- content / service ---------- */
.out-field{border:1px solid var(--u-line);border-radius:12px;background:var(--c-white);padding:12px;display:flex;flex-direction:column;gap:8px;min-width:0}
.out-field textarea,.out-field input{background:var(--u-surface-alt)}
.count{font-size:11px;color:var(--u-muted);direction:ltr}
.count.over{color:var(--s-error);font-weight:800}
.msgs{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.msg{background:var(--c-white);border:1px solid var(--u-line);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:8px;min-width:0}
.msg pre{white-space:pre-wrap;font-family:inherit;font-size:14px;line-height:1.85;background:var(--u-surface-alt);border-radius:10px;padding:10px 12px;margin:0;overflow-wrap:anywhere;flex:1}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips button{border:1px solid var(--u-line-strong);background:var(--c-white);border-radius:99px;padding:6px 12px;font-weight:700;font-size:13px;cursor:pointer;min-height:34px}
.chips button[aria-pressed=true]{background:var(--c-black);color:var(--c-white);border-color:var(--c-black)}
.kv{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:4px 12px;font-size:13px}
.kv dt{color:var(--u-muted)}
.kv dd{margin:0;font-weight:700;overflow-wrap:anywhere}
.swatch{display:flex;flex-direction:column;border:1px solid var(--u-line);border-radius:12px;overflow:hidden;background:var(--c-white)}
.swatch .c{height:72px}
.swatch .i{padding:8px 10px;font-size:12px}
.swatch .i b{display:block;font-size:13px}
.asset-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.asset{background:var(--c-white);border:1px solid var(--u-line);border-radius:12px;overflow:hidden;cursor:pointer;text-align:start;padding:0;display:flex;flex-direction:column;min-width:0}
.asset:hover{border-color:var(--c-black)}
.asset .im{aspect-ratio:1;background:var(--u-surface-alt);display:grid;place-items:center;overflow:hidden}
.asset .im img{max-height:100%;object-fit:contain}
.asset .m{padding:8px 10px;font-size:12px;display:flex;flex-direction:column;gap:2px;min-width:0}
.asset .m b{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
table.t{width:100%;border-collapse:collapse;font-size:13px}
table.t th,table.t td{border-bottom:1px solid var(--u-line);padding:8px;text-align:start;vertical-align:top}
.table-wrap{overflow-x:auto}

.logo-ph{border:2px dashed var(--u-line-strong);border-radius:10px;padding:18px;display:grid;place-items:center;min-height:110px;color:var(--u-muted);font-weight:800;text-align:center}
.gate{border-inline-start:4px solid var(--s-error);background:var(--s-error-bg);padding:10px 12px;border-radius:8px;font-weight:700}
.gate.ok{border-color:var(--s-pass);background:var(--s-pass-bg)}

.note.open{border-inline-start:3px solid var(--s-warn)}
.note.resolved{opacity:.75}
.btn.warn{border-color:var(--s-warn);color:var(--s-warn)}
.fit-row select{max-width:130px}.fit-row input{min-width:0;flex:1}