:root{--bg:#0d1117;--panel:#161b22;--line:#30363d;--text:#f0f3f6;--muted:#8b949e;--accent:#ffd400;--danger:#ff7b72}
*{box-sizing:border-box}body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--text)}
.app-grid{display:grid;grid-template-columns:390px 1fr;min-height:calc(100vh - 58px)}.panel{background:var(--panel);border-right:1px solid var(--line);padding:18px;overflow:auto}.panel h2{font-size:13px;text-transform:uppercase;letter-spacing:.08em;margin:22px 0 10px;color:#c9d1d9}.panel h2:first-child{margin-top:0}
label{display:block;font-size:12px;color:#c9d1d9;margin:8px 0}input,select,button{font:inherit}input[type=text],input[type=number],input[type=password],select{width:100%;margin-top:5px;background:#0d1117;color:var(--text);border:1px solid var(--line);border-radius:7px;padding:9px 10px}input[type=color]{display:block;margin-top:5px;width:100%;height:36px;border:1px solid var(--line);background:#0d1117;border-radius:7px}.field-row{display:grid;gap:9px}.field-row.two{grid-template-columns:1fr 1fr}.field-row.three{grid-template-columns:1fr 1fr 1fr}.check{display:flex;gap:8px;align-items:center}.check input{width:auto}
button{background:#21262d;color:var(--text);border:1px solid var(--line);border-radius:7px;padding:9px 11px;cursor:pointer}button:hover{border-color:#6e7681}.primary{background:var(--accent);border-color:var(--accent);color:#111;font-weight:700}.button-row,.preset-row{display:flex;gap:8px;margin-top:8px}.wrap{flex-wrap:wrap}.preset-row button{font-size:12px;padding:7px 9px}.help{font-size:12px;line-height:1.5;color:var(--muted)}.warning{color:#d29922}
.workspace{min-width:0;padding:24px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start}.ruler-note{color:var(--muted);font-size:12px;margin-bottom:14px}#previewWrap{width:100%;max-width:1100px;display:flex;align-items:center;justify-content:center;padding:30px;background:#0a0d12;border:1px solid var(--line);border-radius:12px;min-height:500px;overflow:auto}#plateCanvasPreview{display:block;max-width:100%;height:auto;filter:drop-shadow(0 14px 28px rgba(0,0,0,.45));background:#fff}.technical-svg{position:absolute!important;left:-10000px!important;top:-10000px!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important}.measurements{gap:14px;flex-wrap:wrap}#collisionReadout.warn{color:#ffb86b;font-weight:700}#collisionReadout.ok{color:#7ee787}.measurements{width:100%;max-width:1100px;display:flex;justify-content:space-between;color:var(--muted);font-size:12px;padding-top:10px}
.login-page{min-height:100vh;display:grid;place-items:center}.login-card{width:min(420px,92vw);background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:26px}.login-card h1{margin:0 0 6px}.login-card p{color:var(--muted)}.login-card button{margin-top:12px;width:100%;background:var(--accent);color:#111;font-weight:700}.error{background:#3b171a;color:#ffb4ad;border:1px solid #6e252b;padding:9px;border-radius:7px;margin-bottom:12px}
@media(max-width:900px){.app-grid{grid-template-columns:1fr}.panel{border-right:0;border-bottom:1px solid var(--line)}#previewWrap{min-height:320px}}
.font-status{margin-top:8px;padding:9px 10px;border:1px solid var(--line);border-radius:7px;background:#0d1117;color:#c9d1d9;font-size:12px;line-height:1.5}

/* v0.7 road-use character sizing */
.road-size-status{margin:.35rem 0 .55rem;padding:.55rem .7rem;border-radius:8px;background:#151515;border:1px solid #333;color:#bbb;font-size:.9rem}
.road-size-status.ok{border-color:#3aa655;color:#bdf5c8;background:#102014}
.road-size-status.warn{border-color:#d9a300;color:#ffe48a;background:#251f0b}
.road-size-check{margin-top:.35rem}

/* v1.0 precision nudge controls */
.nudge-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:8px 0 14px}.nudge-grid button{min-height:34px;padding:6px 8px;font-size:12px}.nudge-grid span{min-height:1px}


/* v1.2 precision editor */
#plateCanvasPreview{touch-action:none;cursor:grab}
#plateCanvasPreview:active{cursor:grabbing}
#selectedObject{font-weight:600}

/* v1.3 workspace layout: independently scrollable settings + always-visible plate */
html,body{height:100%}
body{overflow:hidden}
.app-grid{height:calc(100vh - 58px);min-height:0;overflow:hidden}
.panel.controls{height:100%;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;padding-bottom:40px}
.workspace{height:100%;min-height:0;overflow:auto;align-items:stretch;padding:18px 24px 24px}
.workspace-toolbar{width:100%;max-width:1100px;margin:0 auto 8px;display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:12px;background:#0a0d12;border:1px solid var(--line);border-radius:10px;position:sticky;top:0;z-index:20}
.toolbar-primary{display:flex;gap:8px;flex-wrap:wrap}
.toolbar-options{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.toolbar-options label{margin:0;min-width:120px}
.toolbar-options select{margin-top:4px;padding:7px 9px}
.toolbar-help{width:100%;max-width:1100px;margin:0 auto 9px;color:var(--muted);font-size:11px;line-height:1.4}
.ruler-note{width:100%;max-width:1100px;margin:0 auto 12px;text-align:center}
#previewWrap{margin:0 auto;flex:0 0 auto;min-height:420px}
.measurements{margin:0 auto}

.login-card input[type="email"],
.login-card input[type="password"],
.login-card input[type="text"] {
    width: 100%;
    box-sizing: border-box;

    background: #0d1117;
    color: #ffffff;

    border: 1px solid #343b45;
    border-radius: 7px;

    padding: 10px 12px;
    font-size: 14px;

    outline: none;
}

.login-card input:focus {
    border-color: #FFD800;
    box-shadow: 0 0 0 2px rgba(255, 216, 0, 0.12);
}

.topbar {
    min-height: 90px;
    padding: 10px 20px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    box-sizing: border-box;
}

.brand-area {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;

    gap: 3px;
    min-width: 0;
}

.brand-logo {
    display: flex;
    align-items: center;

    height: 55px;
    max-width: 220px;
}

.brand-logo img {
    display: block;

    width: auto;
    height: auto;

    max-width: 220px;
    max-height: 55px;

    object-fit: contain;
}

.brand-subtitle {
    display: block;
    margin: 0;

    font-size: 13px;
    line-height: 16px;
    white-space: nowrap;
}

.logout {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 9px 16px;
    border: 1px solid #333;
    border-radius: 8px;

    background: #181818;
    color: #ffffff;

    font-size: 13px;
    font-weight: 600;
    text-decoration: none;

    flex-shrink: 0;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.logout:visited {
    color: #ffffff;
}

.logout:hover {
    background: #242424;
    border-color: #FFD800;
    color: #FFD800;
}

.logout:active {
    background: #111111;
}

@media(max-width:900px){
  body{overflow:auto}
  .app-grid{height:auto;min-height:calc(100vh - 58px);overflow:visible;grid-template-columns:1fr}
  .panel.controls{height:auto;max-height:none;overflow:visible;border-right:0;border-bottom:1px solid var(--line)}
  .workspace{height:auto;overflow:visible;padding:14px}
  .workspace-toolbar{position:static;align-items:stretch}
  .toolbar-primary,.toolbar-options{width:100%}
  .toolbar-primary button{flex:1 1 180px}
  .toolbar-options label{flex:1 1 140px}
  #previewWrap{min-height:300px;padding:18px}
}

/* v2.0 friendly editor navigation */
.editor-tabs{position:sticky;top:-18px;z-index:30;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:-18px -18px 16px;padding:12px;background:rgba(22,27,34,.97);border-bottom:1px solid var(--line);backdrop-filter:blur(8px)}
.editor-tab{padding:9px 6px;font-size:11px;font-weight:700}.editor-tab.active,.mode-switch button.active,.plate-face-buttons button.active{background:var(--accent);border-color:var(--accent);color:#111}
.editor-section{display:none}.editor-section.active{display:block}.editor-section>h2:first-child{margin-top:0}
.mode-switch,.plate-face-buttons{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:8px 0 12px}.plate-face-buttons{grid-template-columns:repeat(3,1fr)}
.size-preset-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:8px 0 12px}.size-preset-grid button{text-align:left;font-size:12px}
.custom-colour-row{margin-top:10px}.legacy-hidden{display:none!important}.full-width{width:100%}
.logo-list,.saved-design-list{display:grid;gap:7px;margin:10px 0}.logo-list-item{text-align:left}.logo-list-item.active{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.saved-design-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:6px;align-items:center;padding:8px;border:1px solid var(--line);border-radius:8px;background:#0d1117}.saved-design-row span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}.saved-design-row button{padding:6px 8px;font-size:11px}
@media(max-width:430px){.plate-face-buttons,.size-preset-grid{grid-template-columns:1fr}.editor-tabs{grid-template-columns:repeat(2,1fr)}}

/* Account legal-marking controls */
[data-editor-section="legal"] input[readonly]{opacity:.9;background:#111;}

/* v2.3 flag / badge controls */
[data-editor-section="badge"] #badgeFile{margin-top:6px;width:100%;color:var(--muted)}
[data-editor-section="badge"] .road-font-warning{margin-top:10px}
.badge-preview-chip{display:inline-flex;align-items:center;gap:7px;margin-top:8px;padding:6px 8px;border:1px solid var(--line);border-radius:7px;background:#0d1117;font-size:12px;color:var(--muted)}

/* v2.4 production-style badge controls */
[data-editor-section="badge"] input[type="color"]:disabled{opacity:.55;cursor:not-allowed}
[data-editor-section="badge"] .help{margin-bottom:10px}


/* v2.4 Road Legal validation */
.validation-chip{display:inline-flex;align-items:center;justify-content:center;min-height:34px;padding:7px 10px;border:1px solid var(--line);border-radius:999px;font-size:11px;font-weight:800;white-space:nowrap}
.validation-chip.ok{border-color:#2d6a3f;background:#102519;color:#8ee6a8}.validation-chip.fail{border-color:#8b4a22;background:#2a170e;color:#ffb86b}.validation-chip.neutral{color:var(--muted);background:#0d1117}
.road-validation-summary{padding:12px 13px;border-radius:9px;border:1px solid var(--line);font-weight:800;font-size:13px;line-height:1.4;margin:8px 0 12px}.road-validation-summary.ok{border-color:#2d6a3f;background:#102519;color:#8ee6a8}.road-validation-summary.fail{border-color:#8b4a22;background:#2a170e;color:#ffb86b}.road-validation-summary.neutral{color:var(--muted);background:#0d1117}
.road-validation-list{list-style:none;padding:0;margin:0;display:grid;gap:7px}.road-validation-list li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:8px;align-items:start;padding:9px 10px;border:1px solid var(--line);border-radius:8px;background:#0d1117}.road-validation-list li.ok{border-color:#244b31}.road-validation-list li.fail{border-color:#6e3a23}.validation-mark{font-weight:900;font-size:15px;line-height:1.2}.road-validation-list li.ok .validation-mark{color:#7ee787}.road-validation-list li.fail .validation-mark{color:#ffb86b}.road-validation-list strong{display:block;font-size:12px;color:#f0f3f6}.road-validation-list small{display:block;margin-top:2px;color:var(--muted);font-size:11px;line-height:1.35}
@media(max-width:900px){.validation-chip{width:100%}}