:root {
  color-scheme: dark;
  --bg: #090d16;
  --surface: #111827;
  --surface-2: #182133;
  --line: #263248;
  --text: #f6f7fb;
  --muted: #93a0b8;
  --brand: #ff6b35;
  --brand-2: #ff9d5c;
  --violet: #9c7cff;
  --cyan: #42c7df;
  --green: #45d093;
  --danger: #ff6577;
  --radius: 20px;
  --shadow: 0 18px 50px rgba(0,0,0,.22);
  font-family: "Segoe UI", Arial, sans-serif;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f3f5f9;
  --surface: #fff;
  --surface-2: #f7f8fb;
  --line: #dfe4ed;
  --text: #172033;
  --muted: #63708a;
  --shadow: 0 18px 42px rgba(40,55,80,.10);
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); min-height: 100vh; }
button, input, select { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }
.is-hidden { display: none !important; }
.skip-link { position: fixed; inset-block-start: -60px; inset-inline-start: 20px; z-index: 100; background: var(--text); color: var(--bg); padding: 10px 16px; border-radius: 10px; }
.skip-link:focus { inset-block-start: 12px; }
.ltr-safe, code { direction: ltr; unicode-bidi: isolate; }
.muted { color: var(--muted); }
.eyebrow { color: var(--muted); text-transform: uppercase; letter-spacing: .13em; font-size: .72rem; font-weight: 700; margin: 0 0 5px; }

.auth-screen { position: fixed; inset: 0; display: grid; place-items: center; padding: 20px; background: radial-gradient(circle at 15% 15%, rgba(255,107,53,.13), transparent 34%), var(--bg); z-index: 90; }
.auth-card { width: min(430px, 100%); background: var(--surface); border: 1px solid var(--line); border-radius: 28px; padding: 38px; box-shadow: var(--shadow); }
.auth-card h1 { font-size: 2rem; margin: 8px 0; }
.auth-card label { display: grid; gap: 8px; margin-block: 18px; font-weight: 650; }
.auth-card input { width: 100%; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); border-radius: 12px; padding: 13px 14px; }
.form-error { color: var(--danger); min-height: 1.5em; }
.brand-mark { display: grid; place-items: center; width: 45px; aspect-ratio: 1; border-radius: 14px; color: white; background: linear-gradient(135deg, var(--brand), #ff426c); font-weight: 900; box-shadow: 0 9px 25px rgba(255,107,53,.28); }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 240px minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "side top" "side main"; }
.sidebar { grid-area: side; position: sticky; top: 0; height: 100vh; background: color-mix(in srgb, var(--surface) 88%, transparent); border-inline-end: 1px solid var(--line); padding: 25px 18px; display: flex; flex-direction: column; z-index: 20; backdrop-filter: blur(18px); }
.brand { display: flex; align-items: center; gap: 12px; padding: 0 8px 28px; }
.brand strong, .brand span { display: block; }
.brand span { color: var(--muted); font-size: .84rem; margin-block-start: 3px; }
nav { display: grid; gap: 7px; }
.nav-item { background: transparent; border: 0; border-radius: 12px; padding: 12px 14px; text-align: start; cursor: pointer; color: var(--muted); font-weight: 650; display: flex; gap: 12px; align-items: center; }
.nav-item:hover { background: var(--surface-2); color: var(--text); }
.nav-item.active { background: linear-gradient(90deg, rgba(255,107,53,.18), rgba(255,107,53,.04)); color: var(--brand-2); box-shadow: inset -3px 0 var(--brand); }
.sidebar-footer { margin-block-start: auto; border-block-start: 1px solid var(--line); padding: 18px 8px 0; display: grid; gap: 13px; }
.connection-pill { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: .86rem; }
.connection-pill i { width: 8px; height: 8px; border-radius: 99px; background: var(--green); box-shadow: 0 0 12px var(--green); }
.text-button { border: 0; background: transparent; color: var(--muted); padding: 0; text-align: start; cursor: pointer; }

.topbar { grid-area: top; display: flex; align-items: center; gap: 18px; justify-content: space-between; padding: 22px clamp(22px,4vw,48px) 12px; }
.topbar h1 { margin: 0; font-size: clamp(1.55rem, 3vw, 2.2rem); }
.top-actions { display: flex; align-items: center; gap: 12px; }
.icon-button { width: 42px; height: 42px; border-radius: 13px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; }
#menu-toggle { display: none; }
.mode-badge { border-radius: 99px; padding: 7px 12px; font-size: .78rem; font-weight: 800; }
.mode-badge.demo { background: rgba(66,199,223,.12); color: var(--cyan); border: 1px solid rgba(66,199,223,.28); }
.mode-badge.live { background: rgba(69,208,147,.12); color: var(--green); border: 1px solid rgba(69,208,147,.28); }

main { grid-area: main; padding: 20px clamp(22px,4vw,48px) 50px; overflow: auto; min-width:0; }
.view { display: none; animation: reveal .22s ease-out; }
.view.active { display: block; }
@keyframes reveal { from { opacity: 0; transform: translateY(4px); } }
.demo-banner, .notice { background: rgba(66,199,223,.08); border: 1px solid rgba(66,199,223,.24); border-radius: 14px; padding: 13px 16px; display: flex; align-items: center; gap: 12px; margin-block-end: 18px; color: var(--muted); }
.demo-banner strong, .notice strong { color: var(--text); }
.demo-banner .data-kind { margin-inline-start: auto; }
.printer-alerts { display:grid; gap:10px; border:1px solid rgba(255,101,119,.35); background:rgba(255,101,119,.1); border-radius:14px; padding:14px 16px; margin-block-end:18px; color:var(--danger); }
.printer-alerts details { margin-block-start:8px; color:var(--muted); }
.printer-alerts code { display:block; margin-block-start:6px; white-space:pre-wrap; overflow-wrap:anywhere; }
.data-kind { font-size: .68rem; padding: 4px 8px; border-radius: 99px; font-weight: 800; }
.data-kind.simulated { background: rgba(66,199,223,.14); color: var(--cyan); }
.data-kind.measured { background: rgba(69,208,147,.14); color: var(--green); }
.data-kind.calculated { background: rgba(156,124,255,.14); color: var(--violet); }

.hero-card { min-height: 230px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 24px; background: radial-gradient(circle at 15% 0%, rgba(255,107,53,.18), transparent 45%), linear-gradient(140deg, var(--surface), var(--surface-2)); border: 1px solid var(--line); border-radius: 26px; padding: clamp(24px,4vw,42px); box-shadow: var(--shadow); }
.hero-copy h2 { font-size: clamp(1.45rem,3vw,2.5rem); margin: 12px 0 8px; }
.hero-copy p { color: var(--muted); }
.status-line { color: var(--green); font-weight: 800; display: flex; gap: 9px; align-items: center; }
.pulse { width: 9px; height: 9px; border-radius: 99px; background: var(--green); box-shadow: 0 0 14px var(--green); }
.progress-ring { --progress: 0; width: 145px; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(closest-side, var(--surface) 77%, transparent 78%), conic-gradient(var(--brand) calc(var(--progress)*1%), var(--line) 0); font-size: 1.7rem; font-weight: 900; }
.hero-actions { grid-column: 1 / -1; display: flex; gap: 10px; }
.button { border: 1px solid transparent; border-radius: 12px; padding: 11px 17px; cursor: pointer; font-weight: 750; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.button.primary { background: linear-gradient(135deg, var(--brand), #ff8152); color: #fff; }
.button.secondary { background: var(--surface-2); border-color: var(--line); }
.button.danger-ghost { background: rgba(255,101,119,.08); border-color: rgba(255,101,119,.25); color: var(--danger); }
.button.wide { width: 100%; }
.button:disabled { opacity: .45; cursor: not-allowed; filter: grayscale(.35); }
.compact-button { padding: 8px 11px; border-radius: 10px; font-size: .82rem; }

.metric-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 15px; margin-block: 18px; }
.metric-card { position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.metric-card::after { content:""; position:absolute; inset-inline-end:-25px; inset-block-end:-35px; width:100px; height:100px; background:var(--accent); filter:blur(35px); opacity:.12; }
.metric-card header { display: flex; justify-content: space-between; align-items: center; color: var(--muted); }
.metric-card strong { display: block; font-size: 2rem; margin-block: 15px 3px; }
.metric-card p { color: var(--muted); margin: 0; }
.accent-orange { --accent: var(--brand); } .accent-violet { --accent: var(--violet); } .accent-cyan { --accent: var(--cyan); } .accent-green { --accent: var(--green); }
.dashboard-grid { display: grid; grid-template-columns: 1.45fr 1fr; gap: 18px; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.panel-header, .section-head { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-block-end: 20px; }
.panel h2, .section-head h2 { margin: 0; }
.live-label { color: var(--green); font-size: .75rem; }
canvas { width: 100%; border-block-end: 1px solid var(--line); }
.chart-legend { display: flex; gap: 20px; margin-block-start: 12px; color: var(--muted); font-size: .8rem; }
.legend-dot { display: inline-block; width: 8px; height: 8px; border-radius: 99px; margin-inline-end: 5px; }.orange{background:var(--brand)}.violet{background:var(--violet)}
.details-list { margin: 0; }
.details-list div { display: flex; justify-content: space-between; gap: 20px; padding-block: 15px; border-block-end: 1px solid var(--line); }
.details-list div:last-child { border: 0; }.details-list dt{color:var(--muted)}.details-list dd{margin:0;font-weight:750}
.upload-button input { display: none; }
.file-toolbar, .file-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.files-panel { margin-block-end: 26px; }
.section-head.compact { margin-block-start: 28px; margin-block-end: 12px; }
.jobs-list { display: grid; gap: 10px; }
.job-row { display: grid; grid-template-columns: 1fr auto auto; gap: 20px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; }
.job-row strong { direction: ltr; unicode-bidi: isolate; }.job-row span{color:var(--muted)}
.file-row { grid-template-columns: minmax(0, 1fr) auto; }
.file-name { min-width: 0; display: grid; gap: 5px; }
.file-name strong { overflow-wrap: anywhere; }
.file-name small { color: var(--muted); }
.calibration-layout { display: grid; grid-template-columns: minmax(260px,.8fr) minmax(340px,1.4fr); gap: 18px; }
.calibration-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; max-height: 70vh; overflow: auto; }
.calibration-item button { width:100%; border:1px solid var(--line); background:var(--surface); color:var(--text); border-radius:14px; padding:14px; cursor:pointer; text-align:start; display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; }
.calibration-item button.active { border-color: var(--brand); box-shadow: inset -3px 0 var(--brand); }
.step-number { width:28px;height:28px;border-radius:9px;background:var(--surface-2);display:grid;place-items:center;color:var(--muted);font-size:.8rem; }
.step-status { color:var(--muted);font-size:.72rem; }.calibration-detail{min-height:420px}.calibration-detail>p{color:var(--muted);line-height:1.7}
.calibration-item button.completed{border-color:rgba(69,208,147,.5)}
.calibration-item button.completed .step-number{background:rgba(69,208,147,.15);color:var(--green)}
.calibration-checklist{display:grid;gap:9px;margin-block:12px 22px}
.calibration-check{display:flex;gap:10px;align-items:flex-start;padding:11px 12px;border:1px solid var(--line);border-radius:11px;background:var(--surface-2);cursor:pointer}
.calibration-check input{margin-block-start:3px;accent-color:var(--brand)}
.calibration-actions{display:flex;gap:9px;flex-wrap:wrap;margin-block:12px 20px}
.calibration-actions .button{min-width:150px}
.calibration-guidance{color:var(--muted);border:1px dashed var(--line);border-radius:12px;padding:14px}
.calibration-output-wrap{margin-block:18px;padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2)}
.calibration-output{margin:10px 0 0;max-height:190px;overflow:auto;white-space:pre-wrap;text-align:left;color:var(--text);font-size:.82rem}
.calibration-footer{display:flex;justify-content:space-between;gap:10px;margin-block-start:24px;padding-block-start:18px;border-block-start:1px solid var(--line)}
.safety-box { border:1px solid rgba(255,157,92,.3);background:rgba(255,107,53,.08);border-radius:14px;padding:16px;margin-block:22px; }.safety-box p{margin-block-end:0;color:var(--muted)}
.camera-placeholder { min-height:460px;border:1px dashed var(--line);border-radius:26px;background:linear-gradient(135deg,var(--surface),var(--surface-2));display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px; }
.camera-icon{font-size:4rem;color:var(--muted)}.camera-placeholder p,.camera-placeholder li{color:var(--muted)}.camera-placeholder ul{text-align:start}
.camera-stream { width: 100%; max-height: 62vh; object-fit: contain; border-radius: 18px; background: #05070b; margin-block-end: 18px; }
.settings-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:18px }.check-list{padding-inline-start:20px;line-height:2;color:var(--muted)}
.status-tag{display:inline-block;padding:7px 10px;border-radius:99px;font-size:.75rem}.status-tag.pending{color:var(--brand-2);background:rgba(255,107,53,.1)}
.status-tag.success{color:var(--green);background:rgba(69,208,147,.12)}
.maintenance-grid{grid-template-columns:repeat(2,minmax(0,1fr));margin-block:18px}
.service-list{display:grid;gap:9px}
.service-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:center;padding:11px 0;border-block-end:1px solid var(--line)}
.service-row:last-child{border:0}.service-row span:first-child{display:grid;gap:3px}.service-row small{color:var(--muted)}
.maintenance-grid label{display:grid;gap:7px;margin-block:16px;color:var(--muted)}
.maintenance-grid input,.logs-panel select{color:var(--text);background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:11px 12px;font:inherit}
.system-logs{min-height:260px;max-height:48vh;overflow:auto;background:#080b12;color:#d7e0ee;border:1px solid var(--line);border-radius:12px;padding:16px;white-space:pre-wrap;text-align:left}
.axis-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-block:18px; }
.motion-panel { max-width:760px; }
.inline-control { display:flex;align-items:center;gap:12px;color:var(--muted);margin-block-end:18px; }
.inline-control select, .model-builder textarea { color:var(--text);background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:10px 12px; }
.jog-grid { display:grid;grid-template-columns:repeat(2,minmax(100px,1fr));gap:10px;max-width:440px; }
.model-builder { display:grid;gap:16px;max-width:900px; }
.model-attachments { display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px;border:1px dashed var(--line);border-radius:12px;background:var(--surface-2); }
.model-attachments p { margin:4px 0 0; }
.attachment-picker { position:relative;overflow:hidden;flex:0 0 auto; }
.attachment-picker input { position:absolute;inline-size:1px;block-size:1px;opacity:0;pointer-events:none; }
.attachment-list { list-style:none;margin:0;padding:0;display:grid;gap:8px; }
.attachment-list li { display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:10px; }
.attachment-list span { display:grid;gap:3px;min-width:0; }
.attachment-list strong,.attachment-list small { overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.attachment-list small { color:var(--muted);direction:ltr;text-align:right; }
.api-settings { max-width:900px;margin-block-end:18px; }
.api-settings summary { cursor:pointer;font-weight:800; }
.settings-form { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-block-start:18px; }
.settings-form label { display:grid;gap:7px;color:var(--muted); }
.settings-form input, .settings-form select { color:var(--text);background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:11px 12px;font:inherit;direction:ltr;text-align:left; }
.settings-form .button { align-self:end; }
.settings-actions { display:flex;align-items:center;gap:8px;flex-wrap:wrap;grid-column:1 / -1; }
#gemini-connection-result { grid-column:1 / -1;min-height:1.5em;margin:0; }
.model-builder textarea { width:100%;resize:vertical;line-height:1.6;font:inherit; }
.model-result { display:grid;gap:10px;border-block-start:1px solid var(--line);padding-block-start:18px; }
.model-result pre { direction:ltr;text-align:left;max-height:420px;overflow:auto;background:#080b12;color:#d7e0ee;border:1px solid var(--line);border-radius:12px;padding:16px;white-space:pre-wrap; }
.workflow-steps { display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-block-end:8px; }
.workflow-steps span { padding:9px;border-radius:10px;background:var(--surface-2);color:var(--muted);text-align:center;font-size:.82rem; }
.workflow-steps span.active { background:rgba(69,208,147,.14);color:var(--green); }
.model-preview-grid { display:grid;grid-template-columns:minmax(240px,.75fr) minmax(360px,1.25fr);gap:18px;align-items:stretch; }
.preview-frame { min-height:320px;margin:0;border:1px solid var(--line);border-radius:16px;background:linear-gradient(145deg,#0b0f18,#161e2d);display:grid;place-items:center;overflow:hidden;color:var(--muted); }
.preview-frame img { display:block;width:100%;height:100%;max-height:520px;object-fit:contain; }
.print-preparation { border-block-start:1px solid var(--line);padding-block-start:18px;display:grid;gap:16px; }
.profile-choice { display:grid;grid-template-columns:repeat(2,1fr);gap:12px; }
.profile-choice label { display:flex;align-items:center;gap:12px;padding:15px;border:1px solid var(--line);border-radius:13px;cursor:pointer;background:var(--surface-2); }
.profile-choice span,.profile-choice small { display:block; }.profile-choice small{color:var(--muted);margin-block-start:4px;}
.slice-result { display:grid;grid-template-columns:minmax(300px,1.2fr) minmax(260px,.8fr);gap:18px;align-items:start; }
.slice-result .toolpath { min-height:300px;grid-row:span 2; }
.send-actions { display:flex;gap:10px;flex-wrap:wrap; }
.toast { position: fixed; inset-inline-start: 28px; inset-block-end: 28px; background: var(--text); color: var(--bg); border-radius: 12px; padding: 13px 18px; box-shadow: var(--shadow); transform: translateY(140%); transition: transform .2s; z-index: 100; max-width: min(430px, calc(100vw - 40px)); }
.toast.show { transform: translateY(0); }

@media (max-width: 980px) {
  .app-shell { grid-template-columns: 1fr; grid-template-areas:"top" "main"; }
  .sidebar { position:fixed;inset-block:0;inset-inline-start:0;width:250px;transform:translateX(110%);transition:transform .2s;box-shadow:var(--shadow); }
  .sidebar.open { transform:translateX(0); }
  #menu-toggle { display:block; }
  .metric-grid,.axis-grid { grid-template-columns:repeat(2,1fr); }.dashboard-grid,.settings-grid,.maintenance-grid,.settings-form,.model-preview-grid,.slice-result{grid-template-columns:1fr}.calibration-layout{grid-template-columns:1fr}.calibration-list{max-height:none}
}
@media (max-width: 600px) {
    .topbar,main{padding-inline:16px}.topbar{padding-block-start:16px}.mode-badge{display:none}.hero-card{grid-template-columns:1fr;text-align:center}.progress-ring{margin:auto}.hero-actions{justify-content:center}.metric-grid,.axis-grid,.profile-choice{grid-template-columns:1fr}.workflow-steps{grid-template-columns:repeat(2,1fr)}.preview-frame{min-height:240px}.demo-banner,.notice,.model-attachments{align-items:flex-start;flex-direction:column}.demo-banner .data-kind{margin:0}.job-row,.file-row,.service-row{grid-template-columns:1fr}.file-actions,.file-toolbar,.attachment-picker{width:100%}.file-actions .button{flex:1}.auth-card{padding:28px 22px}.calibration-footer{flex-direction:column}.calibration-footer .button{width:100%}
}
@media (min-width:981px) and (min-height:720px) {
  body:has(#view-dashboard.active) { overflow:hidden; }
  body:has(#view-dashboard.active) .app-shell { height:100dvh;min-height:0; }
  body:has(#view-dashboard.active) main { overflow:hidden;padding-block:10px 16px; }
  #view-dashboard.active .demo-banner { padding-block:9px;margin-block-end:10px; }
  #view-dashboard.active .hero-card { min-height:150px;padding:18px 26px; }
  #view-dashboard.active .progress-ring { width:110px;font-size:1.35rem; }
  #view-dashboard.active .hero-copy h2 { margin-block:7px 4px;font-size:clamp(1.25rem,2.2vw,1.8rem); }
  #view-dashboard.active .metric-grid { margin-block:10px; }
  #view-dashboard.active .metric-card { padding:13px 16px; }
  #view-dashboard.active .metric-card strong { font-size:1.55rem;margin-block:8px 2px; }
  #view-dashboard.active .panel { padding:15px 18px; }
  #view-dashboard.active .panel-header { margin-block-end:8px; }
  #view-dashboard.active canvas { height:145px; }
  #view-dashboard.active .details-list div { padding-block:9px; }
}
@media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; transition-duration: .01ms !important; } }