@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root { --ink:#18222f; --ink-soft:#687588; --paper:#f7f8fa; --paper-light:#fff; --signal:#c78a16; --signal-dark:#a86e08; --ready:#15735c; --danger:#c5484b; --line:#e6ebf0; --shadow:0 14px 40px rgba(24,34,47,.08); --muted:#738092; --body:Inter,ui-sans-serif,system-ui,sans-serif; --display:Inter,ui-sans-serif,system-ui,sans-serif; }
body { color:var(--ink); background:var(--paper); font-family:var(--body); }
.factory-grid { display:none; }.topbar,.terminal-footer { padding:max(17px,env(safe-area-inset-top)) clamp(20px,5vw,64px) 16px; }.topbar { border-bottom:1px solid var(--line); background:rgba(255,255,255,.88); backdrop-filter:blur(12px); }.brand { gap:10px; letter-spacing:-.02em; text-transform:none; }.brand-mark { width:34px; height:34px; border-radius:10px; background:var(--ready); color:#fff; font:700 .64rem/1 var(--body); }.brand strong { font-size:.82rem; }.brand small { color:var(--muted); font-size:.64rem; }.network-state { padding:7px 10px; border:1px solid var(--line); border-radius:999px; background:#fff; color:#576578; font-size:.65rem; letter-spacing:.05em; }.network-dot { width:7px; height:7px; background:var(--ready); box-shadow:0 0 0 4px rgba(21,115,92,.11); }
.terminal-shell { display:block; min-height:calc(100dvh - 124px); max-width:1100px; padding:clamp(24px,5vw,54px) clamp(18px,5vw,48px); }.context-rail { display:none; }.terminal-panel { min-height:560px; border:1px solid var(--line); border-radius:18px; background:var(--paper-light); box-shadow:var(--shadow); overflow:hidden; }.terminal-panel::before { top:0; left:0; right:auto; width:44px; height:4px; border-radius:0 0 999px 0; background:var(--ready); }.loading-view,.activation-view,.linked-view,.blocked-view { min-height:560px; }.loading-view { color:var(--muted); }.spinner { width:34px; height:34px; border-color:#e8edf1; border-top-color:var(--ready); }
.activation-view { grid-template-columns:minmax(0,1.1fr) minmax(310px,.9fr); }.panel-heading { border-right:1px solid var(--line); }.panel-heading,.activation-form,.linked-view,.blocked-view { padding:clamp(30px,6vw,68px); }.eyebrow { gap:7px; color:var(--ready); font-family:var(--body); font-size:.65rem; letter-spacing:.1em; }.eyebrow::before { width:18px; height:2px; }.panel-heading h1,h1,.start-production h1 { margin:16px 0; font-family:var(--display); font-weight:700; letter-spacing:-.055em; }.panel-heading h1 { font-size:clamp(2.35rem,5vw,4.65rem); line-height:.98; }.panel-heading p,.next-step,.blocked-view p { color:var(--muted); font-size:.94rem; line-height:1.65; }.activation-form label { color:#4e5c6d; font-size:.68rem; letter-spacing:.05em; }.activation-form input,.operator-login-form input,#part-number { border:1px solid var(--line); border-radius:10px; background:#fff; transition:border-color .2s,box-shadow .2s; }.activation-form input:focus,.operator-login-form input:focus,#part-number:focus { border-color:#78b9a8; box-shadow:0 0 0 3px rgba(21,115,92,.12); }.activation-form input { padding:13px 14px; }.activation-form label:not(:first-child) { margin-top:24px; } #pairing-code { font-family:var(--body); font-size:clamp(1.35rem,3vw,2.1rem); letter-spacing:.07em; }.primary-action { min-height:54px; margin-top:28px; border-radius:10px; background:var(--ready); font-size:.9rem; font-weight:600; box-shadow:0 2px 4px rgba(15,69,55,.15); transition:transform .2s,background .2s,box-shadow .2s; }.primary-action:hover { transform:translateY(-1px); background:#0f614d; box-shadow:0 7px 16px rgba(15,69,55,.16); }
.operator-login-view,.operation-view { padding:clamp(24px,4vw,48px); }.machine-banner { border-color:var(--line); border-radius:13px; background:#fafcfc; overflow:hidden; }.machine-banner>.machine-code { min-width:104px; padding:16px; background:var(--green-soft,#eaf6f1); color:var(--ready); font:700 1rem/1 var(--body); }.machine-banner>div { padding:12px 17px; }.machine-banner small,.operator-chip small { color:var(--muted); font-size:.62rem; letter-spacing:.09em; }.machine-banner strong { font:700 1.05rem/1.25 var(--body); letter-spacing:-.03em; }.login-layout { gap:clamp(28px,6vw,72px); }.operator-login-form { gap:11px; }.operator-login-form input { padding:12px 14px; font-size:1.15rem; }.operator-login-form #operator-pin { font-size:1.55rem; letter-spacing:.22em; }.operation-header { gap:12px; }.operator-chip { border-color:var(--line); border-radius:12px; background:#fff; }.state-strip { margin:16px 0; padding:13px 16px; border:1px solid #d8ece5; border-radius:11px; background:#eff9f5; color:var(--ready); font-size:.7rem; letter-spacing:.07em; }.state-strip.paused { border-color:#f3dfb6; background:#fff9ec; color:#a86e08; }.state-strip.running { background:#eff9f5; }.state-strip>span:last-child { color:#586677; font-size:.82rem; }
.start-production { gap:clamp(28px,6vw,72px); padding:clamp(26px,5vw,54px) 0; }.start-production>*,#start-form { min-width:0; }.start-production h1 { font-size:clamp(2rem,5vw,3.7rem); }.start-production p { color:var(--muted); }.production-button { width:100%; max-width:100%; min-height:64px; border-radius:11px; padding:16px 20px; font-family:var(--body); font-size:clamp(.92rem,2vw,1.12rem); font-weight:600; transition:transform .2s,box-shadow .2s,background .2s; }.production-button:hover:not(:disabled) { transform:translateY(-1px); box-shadow:0 7px 18px rgba(24,34,47,.1); }.production-button.start,.production-button.resume { background:var(--ready); }.production-button.pause { background:#fff7e8; color:#9a6507; border:1px solid #f1dfb8; }.production-button.finish { border:1px solid #f0d4d5; background:#fff3f3; color:var(--danger); }.time-grid { gap:12px; border:0; background:none; }.time-grid article { padding:clamp(16px,3vw,28px); border:1px solid var(--line); border-radius:12px; background:#fff; }.time-grid small { color:var(--muted); font-size:.62rem; letter-spacing:.08em; }.time-grid strong { font-family:var(--body); font-size:clamp(1.45rem,3.5vw,2.4rem); letter-spacing:-.055em; }.production-actions { gap:12px; }.operator-actions { border-color:var(--line); flex-wrap:wrap; }.operator-actions button { color:var(--muted); font-family:var(--body); font-size:.75rem; font-weight:600; }.operator-actions button:hover { color:var(--ready); }.operation-message,.form-message { border-radius:9px; }
.blocked-symbol { border-radius:50%; background:#fff1f1; color:var(--danger); }.secondary-action { border:1px solid var(--line); border-radius:10px; background:#fff; color:#465466; font:600 .82rem var(--body); transition:background .2s; }.secondary-action:hover { background:#f5f7f8; }.machine-dialog { border:0; border-radius:16px; background:#fff; box-shadow:0 24px 70px rgba(24,34,47,.22); }.machine-dialog h2 { font-family:var(--body); letter-spacing:-.04em; }.machine-dialog select { border:1px solid var(--line); border-radius:10px; }.machine-dialog button { border-radius:9px; font-family:var(--body); }.terminal-footer { color:#99a4b1; font-family:var(--body); font-size:.62rem; letter-spacing:.06em; }.update-notice { border:1px solid var(--line); border-radius:13px; background:#fff; box-shadow:var(--shadow); }.update-notice button { border-radius:8px; background:var(--ready); font-family:var(--body); }
@media (max-width:900px) { .topbar { padding:14px 18px; }.network-state { padding:6px 8px; }.network-state #network-label { display:none; }.terminal-shell { min-height:calc(100dvh - 105px); padding:19px 14px; }.terminal-panel { min-height:calc(100dvh - 143px); border-radius:14px; }.activation-view { display:block; }.panel-heading { border-right:0; border-bottom:1px solid var(--line); }.panel-heading,.activation-form,.linked-view,.blocked-view { padding:30px 24px; }.panel-heading h1 { font-size:2.55rem; }.login-layout,.start-production { grid-template-columns:1fr; gap:24px; }.operator-login-view,.operation-view { padding:19px; }.operation-header { grid-template-columns:1fr; }.operator-chip { min-width:0; }.machine-banner>.machine-code { min-width:78px; font-size:.82rem; }.state-strip { flex-wrap:wrap; }.state-strip>span:last-child { width:100%; margin-left:0; }.time-grid { grid-template-columns:1fr; }.production-actions { grid-template-columns:1fr; }.production-button { min-height:58px; }.operator-actions { justify-content:flex-start; }.terminal-footer { padding:10px 18px max(14px,env(safe-area-inset-bottom)); } }
@media (prefers-reduced-motion:reduce) { *,*:before,*:after { transition-duration:.01ms!important; animation-duration:.01ms!important; } }