:root { color-scheme: dark; --bg:#0b100e; --panel:#131b18; --line:#293630; --muted:#91a29a; --text:#f3f7f5; --green:#67e8a5; --green-deep:#163e2b; --red:#ff7474; --red-deep:#452323; --amber:#f6c86a; }
* { box-sizing: border-box; }
body { margin:0; min-width:1080px; background:radial-gradient(circle at 80% 0,#17241f 0,transparent 34%),var(--bg); color:var(--text); font:15px/1.45 Inter,ui-sans-serif,system-ui,-apple-system,sans-serif; }
.auth-screen { position:fixed; inset:0; z-index:1000; display:grid; place-items:center; padding:24px; background:radial-gradient(circle at 75% 10%,#1d342a 0,transparent 38%),#0b100e; }.auth-card { width:min(430px,100%); padding:34px; border:1px solid var(--line); border-radius:18px; background:#131b18; box-shadow:0 24px 80px rgba(0,0,0,.45); }.auth-card .brand-mark { margin-bottom:18px; }.auth-card h1 { margin:0; font-size:28px; }.auth-card p { margin:5px 0 22px; color:var(--muted); }.auth-card p strong { color:var(--text); }.auth-card label { display:block; margin-top:14px; color:#b9c6c0; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }.auth-card input { display:block; width:100%; height:48px; margin-top:7px; padding:0 13px; color:var(--text); border:1px solid #33423b; border-radius:10px; background:#0d1411; }.auth-card .auth-help { display:block; margin-top:7px; color:var(--muted); font-size:11px; font-weight:500; letter-spacing:0; line-height:1.4; text-transform:none; }.auth-card .primary { width:100%; margin-top:22px; }.auth-card .form-error { min-height:20px; margin:12px 0 0; color:var(--red); }.auth-link { display:block; width:100%; margin-top:12px; padding:4px; border:0; background:transparent; color:var(--green); font-size:12px; font-weight:700; }.auth-link:hover { text-decoration:underline; }.user-session { display:flex; align-items:center; gap:8px; padding-left:12px; border-left:1px solid var(--line); }.user-session strong { max-width:150px; overflow:hidden; color:#cbd8d2; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }.user-session button { padding:6px 9px; border:1px solid #42534b; border-radius:7px; background:transparent; color:var(--muted); font-size:11px; }
button,input,select { font:inherit; }
button { cursor:pointer; }
.topbar { height:72px; display:flex; align-items:center; justify-content:space-between; padding:0 36px; border-bottom:1px solid var(--line); background:rgba(11,16,14,.9); }
.brand { display:flex; align-items:center; gap:12px; }.brand-mark { display:grid; place-items:center; width:38px; height:38px; border-radius:11px; color:#0b100e; background:var(--green); font-weight:900; }.brand strong,.brand small { display:block; }.brand strong { font-size:17px; }.brand small { color:var(--muted); font-size:12px; }
.device-statuses { display:flex; align-items:center; gap:18px; }.connection { color:#c6d2cc; font-size:13px; }.connection span { display:inline-block; width:8px; height:8px; margin-right:7px; border-radius:50%; }.connection.online span { background:var(--green); box-shadow:0 0 12px var(--green); }.connection.offline span { background:var(--red); box-shadow:0 0 10px #ff6b6b66; }
main { max-width:1480px; margin:auto; padding:30px 36px 60px; }.panel { border:1px solid var(--line); border-radius:18px; background:linear-gradient(145deg,rgba(22,31,27,.98),rgba(15,22,19,.98)); box-shadow:0 16px 44px rgba(0,0,0,.16); }
.hidden { display:none!important; }.setup { padding:28px; }.section-title { display:flex; gap:16px; align-items:flex-start; margin-bottom:24px; }.section-title>span { display:grid; place-items:center; width:34px; height:34px; flex:none; border-radius:10px; background:var(--green); color:#0b100e; font-weight:900; }.section-title h1,.station-header h1 { margin:0; font-size:25px; }.section-title p,.station-header p,.panel-heading p { margin:3px 0 0; color:var(--muted); }
.manual-validation-banner { display:flex; gap:12px; align-items:center; margin-top:16px; padding:14px 16px; border:1px solid #d49b32; border-radius:12px; background:#fff6df; color:#593b06; }.manual-validation-banner strong { white-space:nowrap; }.manual-validation-banner span { line-height:1.4; }
.setup-grid { display:grid; grid-template-columns:1.4fr 1.2fr 1fr 1.2fr auto; gap:14px; align-items:end; }.setup-grid label { color:#b9c6c0; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }.setup-grid input,.setup-grid select { width:100%; height:48px; margin-top:7px; padding:0 13px; color:var(--text); border:1px solid #33423b; border-radius:10px; background:#0d1411; outline:none; }.setup-grid input:focus,.setup-grid select:focus { border-color:var(--green); box-shadow:0 0 0 3px rgba(103,232,165,.1); }
.primary,.secondary { height:48px; padding:0 22px; border-radius:10px; font-weight:800; }.primary { border:0; background:var(--green); color:#0b100e; }.secondary { border:1px solid #42534b; background:transparent; color:var(--text); }.form-error { min-height:21px; margin:10px 0 0; color:var(--red); }
.station-header { display:flex; justify-content:space-between; align-items:center; margin:4px 0 22px; }.eyebrow { color:var(--green); font-size:11px; font-weight:900; letter-spacing:.14em; }.workspace-grid { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(360px,.85fr); gap:20px; }.camera-panel,.current-card,.progress-panel,.history-panel { padding:20px; }.panel-heading { display:flex; justify-content:space-between; gap:18px; align-items:flex-start; margin-bottom:16px; }.panel-heading h2 { margin:0; font-size:17px; }.panel-heading p { font-size:12px; }
.camera-actions { display:flex; align-items:center; gap:9px; }.camera-connect { height:36px; padding:0 13px; border:1px solid #3e8a67; border-radius:9px; background:#173a29; color:var(--green); font-size:12px; font-weight:800; }.camera-connect:hover { border-color:var(--green); }.pill { align-self:center; padding:7px 10px; border-radius:999px; font-size:10px; font-weight:900; letter-spacing:.08em; }.pill.neutral { color:#bbc9c2; background:#26332d; }.pill.approved { color:var(--green); background:var(--green-deep); }.pill.rejected { color:var(--red); background:var(--red-deep); }
.camera-view { position:relative; overflow:hidden; aspect-ratio:16/9; border:1px solid #34443d; border-radius:14px; background:#080c0a; }.camera-view video,.camera-preview { width:100%; height:100%; object-fit:contain; display:block; }.camera-preview { position:absolute; inset:0; z-index:1; }.camera-placeholder { position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; color:var(--muted); background:radial-gradient(circle,#18231f,#080c0a); }.camera-placeholder strong { color:#dbe5e0; font-size:24px; }.camera-placeholder.hidden { display:none; }.scan-corners { position:absolute; inset:12%; z-index:3; pointer-events:none; }.scan-corners i { position:absolute; width:44px; height:44px; border-color:var(--green); }.scan-corners i:nth-child(1){top:0;left:0;border-top:3px solid;border-left:3px solid}.scan-corners i:nth-child(2){top:0;right:0;border-top:3px solid;border-right:3px solid}.scan-corners i:nth-child(3){bottom:0;left:0;border-bottom:3px solid;border-left:3px solid}.scan-corners i:nth-child(4){bottom:0;right:0;border-bottom:3px solid;border-right:3px solid}
.inspection-toolbar { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-top:14px; }.inspection-toolbar label { min-width:220px; color:#b9c6c0; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }.inspection-toolbar select { display:block; width:100%; height:40px; margin-top:6px; padding:0 11px; border:1px solid #33423b; border-radius:8px; background:#0d1411; color:var(--text); }.side-indicator { display:flex; gap:8px; }.side-indicator span { padding:7px 10px; border:1px solid #34433c; border-radius:999px; color:var(--muted); font-size:11px; }.side-indicator span.active { border-color:#4c7a65; color:#dbe7e1; }.side-indicator span.done { border-color:var(--green); background:var(--green-deep); color:var(--green); }.inspection-controls { display:flex; align-items:center; gap:8px; margin-top:12px; }.inspection-controls>span { margin-right:auto; color:var(--muted); font-size:12px; }.inspection-controls button { height:40px; padding:0 12px; border:1px solid #384840; border-radius:8px; background:#101713; color:#cbd5d0; }.inspection-controls button.approve { border-color:#367b5b; background:#153526; color:var(--green); }.inspection-controls button.reject { border-color:#784343; background:#351c1c; color:#ff9b9b; }.inspection-controls button:disabled { opacity:.35; cursor:not-allowed; }.secondary.small { height:40px; padding:0 12px; }
.side-column { display:flex; flex-direction:column; gap:20px; }.current-card { flex:1; }.result-badge { min-width:90px; padding:8px 10px; text-align:center; border-radius:8px; font-size:11px; font-weight:900; letter-spacing:.08em; }.result-badge.idle { background:#26332d; color:#a9b7b0; }.result-badge.approved { background:var(--green-deep); color:var(--green); }.result-badge.rejected { background:var(--red-deep); color:var(--red); }
.checks { border-top:1px solid var(--line); border-bottom:1px solid var(--line); }.check-row { display:flex; align-items:center; gap:12px; padding:15px 0; }.check-row+.check-row { border-top:1px solid var(--line); }.check-icon { display:grid; place-items:center; width:29px; height:29px; flex:none; border:1px solid #415149; border-radius:50%; color:#9fafa7; font-size:12px; font-weight:900; }.check-row strong,.check-row small { display:block; }.check-row small { margin-top:2px; color:var(--muted); font-size:11px; }.check-row.pass .check-icon { border-color:var(--green); background:var(--green-deep); color:var(--green); }.check-row.fail .check-icon { border-color:var(--red); background:var(--red-deep); color:var(--red); }
.details { margin:10px 0 0; }.details div { display:flex; justify-content:space-between; gap:20px; padding:8px 0; }.details dt { color:var(--muted); }.details dd { margin:0; max-width:70%; text-align:right; font-weight:700; overflow-wrap:anywhere; }.progress-panel .panel-heading>strong { color:var(--green); font-size:20px; }.progress-track { height:8px; overflow:hidden; border-radius:99px; background:#26332d; }.progress-track span { display:block; width:0; height:100%; background:linear-gradient(90deg,#43c985,var(--green)); transition:width .3s ease; }.metrics { display:grid; grid-template-columns:repeat(3,1fr); margin-top:18px; }.metrics div { text-align:center; }.metrics div+div { border-left:1px solid var(--line); }.metrics strong,.metrics span { display:block; }.metrics strong { font-size:22px; }.metrics span { color:var(--muted); font-size:11px; }
.history-panel { margin-top:20px; }.table-wrap { overflow:auto; }.history-panel table { width:100%; border-collapse:collapse; }.history-panel th { padding:10px 12px; color:#82948b; border-bottom:1px solid var(--line); text-align:left; font-size:10px; letter-spacing:.09em; text-transform:uppercase; }.history-panel td { padding:12px; border-bottom:1px solid #202c27; color:#d6dfda; }.history-panel tbody tr:last-child td { border-bottom:0; }.empty-row td { padding:34px; text-align:center; color:var(--muted); }.status-text.pass { color:var(--green); }.status-text.fail { color:var(--red); }.toast { position:fixed; right:24px; bottom:24px; max-width:390px; padding:14px 18px; border-radius:10px; background:#26332d; box-shadow:0 12px 40px #0008; opacity:0; transform:translateY(14px); pointer-events:none; transition:.2s; }.toast.visible { opacity:1; transform:none; }.toast.error { color:#ffd0d0; background:var(--red-deep); }
@media(max-width:1180px){body{min-width:0}.setup-grid{grid-template-columns:1fr 1fr}.primary{grid-column:span 2}.workspace-grid{grid-template-columns:1fr}.side-column{display:grid;grid-template-columns:1fr 1fr}} @media(max-width:720px){main{padding:20px 14px}.topbar{height:auto;min-height:68px;padding:10px 16px;gap:10px}.device-statuses{align-items:flex-end;flex-direction:column;gap:5px}.setup-grid,.side-column{grid-template-columns:1fr}.primary{grid-column:auto}.workspace-grid{display:block}.side-column>*{margin-top:16px}.station-header{align-items:flex-end}.camera-panel{padding:12px}.inspection-toolbar,.inspection-controls{align-items:stretch;flex-direction:column}.side-indicator{flex-wrap:wrap}.inspection-controls>span{margin:0}body{font-size:14px}}
.field-help { display:block; min-height:16px; margin-top:5px; color:var(--muted); font-size:10px; font-weight:500; letter-spacing:0; text-transform:none; }.field-help.ready { color:var(--green); }.field-help.warning { color:var(--amber); }
.detected-card span,.detected-card strong,.detected-card small { display:block; }.detected-card span { color:#b9c6c0; font-size:10px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; }.detected-card strong { margin-top:3px; font-size:18px; }.detected-card small { color:var(--muted); }
.rejected-panel { margin-top:20px; padding:20px; }.rejected-panel .panel-heading>strong { color:var(--red); font-size:22px; }.rejected-panel table { width:100%; border-collapse:collapse; }.rejected-panel th { padding:10px 12px; color:#82948b; border-bottom:1px solid var(--line); text-align:left; font-size:10px; letter-spacing:.09em; text-transform:uppercase; }.rejected-panel td { padding:12px; border-bottom:1px solid #202c27; color:#d6dfda; }.rejected-panel tbody tr:last-child td { border-bottom:0; }
.bank-capture { display:grid; grid-template-columns:260px 1fr 180px auto; gap:14px; align-items:end; margin-top:20px; padding-top:20px; border-top:1px solid var(--line); }.bank-capture label { color:#b9c6c0; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }.bank-capture select { display:block; width:100%; height:44px; margin-top:6px; padding:0 11px; border:1px solid #33423b; border-radius:8px; background:#0d1411; color:var(--text); }.bank-preview { position:relative; overflow:hidden; height:150px; border:1px solid #33423b; border-radius:10px; background:#080c0a; }.bank-preview video { width:100%; height:100%; object-fit:cover; }.bank-preview span { position:absolute; left:8px; bottom:8px; padding:4px 7px; border-radius:6px; background:#0009; color:#ccd7d2; font-size:10px; }.bank-capture p { grid-column:2/-1; margin:0; color:var(--muted); font-size:11px; }
.side-diagnostics { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:14px 0; }.side-diagnostic { min-height:112px; padding:14px; border:1px solid #33423b; border-radius:12px; background:#0d1411; }.side-diagnostic>div { display:flex; align-items:center; justify-content:space-between; gap:12px; }.side-diagnostic span { color:#bac7c1; font-size:11px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }.side-diagnostic strong { font-size:24px; }.side-diagnostic p { margin:8px 0 3px; font-weight:800; }.side-diagnostic small { display:block; color:var(--muted); line-height:1.35; }.side-diagnostic.pass { border-color:#2d7655; background:#10271d; }.side-diagnostic.pass strong { color:var(--green); }.side-diagnostic.warning { border-color:#80682f; background:#2b2414; }.side-diagnostic.warning strong { color:var(--amber); }.side-diagnostic.fail { border-color:#7a3e3e; background:#2b1717; }.side-diagnostic.fail strong { color:var(--red); }
.report-panel,.replacement-panel { margin-top:20px; padding:20px; }.report-panel table,.replacement-panel table { width:100%; border-collapse:collapse; }.report-panel th,.replacement-panel th { padding:10px 12px; color:#82948b; border-bottom:1px solid var(--line); text-align:left; font-size:10px; letter-spacing:.09em; text-transform:uppercase; }.report-panel td,.replacement-panel td { padding:12px; border-bottom:1px solid #202c27; color:#d6dfda; vertical-align:top; }.report-panel tbody tr:last-child td,.replacement-panel tbody tr:last-child td { border-bottom:0; }.approved-reports-panel .panel-heading>strong { color:var(--green); font-size:22px; }.replacement-panel .panel-heading>strong { color:var(--amber); font-size:22px; }.report-detail { min-width:330px; }.report-side { display:block; margin-bottom:5px; }.report-side strong,.report-side small { display:block; }.report-side small { color:var(--muted); }.report-side.pass strong { color:var(--green); }.report-side.fail strong { color:var(--red); }.report-side.pending strong { color:var(--muted); }.report-issues { margin-bottom:8px; color:var(--red); font-weight:700; }.discard-report { padding:7px 10px; border:1px solid #69534b; border-radius:8px; background:#241b18; color:#ffc1ad; font-size:11px; font-weight:800; }.discard-report:hover { border-color:var(--red); color:#fff; }
@media(max-width:720px){.side-diagnostics{grid-template-columns:1fr}.report-detail{min-width:250px}}
.app-nav { display:flex; gap:6px; margin-left:auto; padding:4px; border:1px solid var(--line); border-radius:10px; background:#0d1411; }.app-nav button { padding:8px 12px; border:0; border-radius:7px; background:transparent; color:var(--muted); font-size:11px; font-weight:800; }.app-nav button.active { background:#25342d; color:var(--text); }.device-statuses { margin-left:0; }
.report-actions,.history-detail-actions { display:flex; align-items:center; gap:10px; }.report-actions strong { color:var(--green); font-size:22px; }.rejected-panel .report-actions strong { color:var(--red); }.download-button,.view-history { padding:8px 11px; border:1px solid #35765a; border-radius:8px; background:#123022; color:#a9f5c9; font-size:11px; font-weight:800; }.download-button:hover,.view-history:hover { border-color:var(--green); color:#fff; }.download-button.rejected { border-color:#744747; background:#2a1818; color:#ffb7b7; }.download-button.rejected:hover { border-color:var(--red); color:#fff; }
.rfid-blocks { display:flex; flex-direction:column; gap:3px; min-width:88px; }.rfid-blocks strong { display:inline-block; color:#b9e8d1; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11px; }.not-recorded { color:var(--muted); font-size:11px; }.details .rfid-blocks { margin-top:4px; }
.history-screen-header { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:20px; }.history-screen-header h1 { margin:4px 0; font-size:30px; }.history-screen-header p { margin:0; color:var(--muted); }.history-search { width:min(360px,100%); color:#b9c6c0; font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }.history-search input { display:block; width:100%; height:44px; margin-top:6px; padding:0 12px; border:1px solid #33423b; border-radius:9px; background:#0d1411; color:var(--text); }.production-history-panel,.history-detail { padding:20px; }.production-history-panel table,.history-detail table { width:100%; border-collapse:collapse; }.production-history-panel th,.history-detail th { padding:10px 12px; border-bottom:1px solid var(--line); color:#82948b; text-align:left; font-size:10px; letter-spacing:.09em; text-transform:uppercase; }.production-history-panel td,.history-detail td { padding:12px; border-bottom:1px solid #202c27; color:#d6dfda; vertical-align:top; }.lot-status { display:inline-block; padding:4px 7px; border-radius:999px; font-size:10px; font-weight:900; }.lot-status.closed { background:#143522; color:var(--green); }.lot-status.active { background:#3b3017; color:var(--amber); }.history-detail { margin-top:20px; scroll-margin-top:20px; }.history-detail-metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:18px 0; }.history-detail-metrics div { padding:14px; border:1px solid var(--line); border-radius:10px; background:#0d1411; }.history-detail-metrics strong,.history-detail-metrics span { display:block; }.history-detail-metrics strong { color:var(--green); font-size:24px; }.history-detail-metrics span { margin-top:3px; color:var(--muted); font-size:11px; }
@media(max-width:900px){.topbar{flex-wrap:wrap}.app-nav{order:3;width:100%;margin:0}.app-nav button{flex:1}.history-screen-header{align-items:stretch;flex-direction:column}.history-search{width:100%}.history-detail-metrics{grid-template-columns:1fr 1fr}.report-actions,.history-detail-actions{align-items:flex-end;flex-direction:column}}

/* MagicBox Web Dashboard visual language */
:root {
  color-scheme: light;
  --bg: #f5f9fd;
  --panel: #ffffff;
  --line: #cfddea;
  --muted: #566577;
  --text: #16202c;
  --green: #47b9ef;
  --green-deep: #e8f3fb;
  --red: #dc5b5b;
  --red-deep: #fff0f0;
  --amber: #f59e0b;
  --magic-blue: #47b9ef;
  --magic-blue-dark: #17455d;
  --magic-blue-soft: #e8f3fb;
  --magic-mint: #e7f9f1;
  --magic-mint-text: #207257;
  --shadow: 0 18px 42px rgba(33, 59, 87, 0.07);
}

body {
  background:
    radial-gradient(circle at top, rgba(71, 185, 239, 0.14), transparent 30%),
    radial-gradient(circle at bottom right, rgba(128, 214, 250, 0.1), transparent 24%),
    linear-gradient(180deg, #ffffff 0%, var(--bg) 44%, #f0f7fc 100%);
  color: var(--text);
  font-family: Manrope, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: -0.02em;
}

::selection { background: rgba(71, 185, 239, 0.24); color: var(--text); }

.auth-screen {
  background:
    radial-gradient(circle at top, rgba(71, 185, 239, 0.18), transparent 32%),
    radial-gradient(circle at bottom right, rgba(128, 214, 250, 0.13), transparent 26%),
    linear-gradient(180deg, #ffffff 0%, #f5f9fd 54%, #edf6fc 100%);
}
.auth-card {
  width: min(510px, 100%);
  padding: 42px;
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 36px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 24px 56px rgba(66, 128, 164, 0.12);
  backdrop-filter: blur(16px);
}
.auth-logo { display: block; width: min(240px, 72%); height: auto; margin: 0 auto 28px; }
.auth-card .brand-mark { display: none; }
.auth-card form > div:first-child { text-align: center; }
.auth-card h1 { color: #0f172a; font-size: 36px; font-weight: 700; letter-spacing: -0.05em; }
.auth-card p { margin: 12px 0 26px; color: #566577; line-height: 1.7; }
.auth-card p strong { color: var(--text); }
.auth-card label,
.setup-grid label,
.bank-capture label,
.inspection-toolbar label,
.history-search {
  color: #334155;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}
.auth-card input,
.setup-grid select,
.setup-grid input,
.bank-capture select,
.inspection-toolbar select,
.history-search input {
  border: 1px solid var(--line);
  background: #ffffff;
  color: var(--text);
  box-shadow: 0 1px 2px rgba(33, 59, 87, 0.03);
  outline: none;
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
.auth-card input:focus,
.setup-grid select:focus,
.setup-grid input:focus,
.bank-capture select:focus,
.inspection-toolbar select:focus,
.history-search input:focus {
  border-color: var(--magic-blue);
  box-shadow: 0 0 0 4px rgba(71, 185, 239, 0.15);
}
.auth-card .auth-help { color: var(--muted); }
.auth-link { color: #1689bd; }

.topbar {
  height: 86px;
  padding: 0 30px;
  border-bottom: 1px solid rgba(207, 221, 234, 0.9);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 10px 30px rgba(33, 59, 87, 0.045);
  backdrop-filter: blur(18px);
  position: sticky;
  top: 0;
  z-index: 100;
}
.brand { gap: 18px; }
.brand-logo { display: block; width: 174px; height: auto; }
.brand-product { padding-left: 18px; border-left: 1px solid var(--line); }
.brand-product strong { display: block; color: #16202c; font-size: 15px; font-weight: 800; }
.brand-product small { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; }
.brand-mark { background: var(--magic-blue); color: #ffffff; box-shadow: 0 8px 20px rgba(71, 185, 239, 0.24); }

main { max-width: 1520px; padding: 30px 36px 54px; }
.panel {
  border: 1px solid rgba(207, 221, 234, 0.92);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(248, 251, 254, 0.97));
  box-shadow: var(--shadow);
}
.setup { padding: 28px; }
.section-title > span {
  background: var(--magic-blue-soft);
  color: #1689bd;
  box-shadow: inset 0 0 0 1px rgba(71, 185, 239, 0.18);
}
.section-title h1,
.station-header h1,
.history-screen-header h1,
.panel-heading h2 { color: #16202c; letter-spacing: -0.035em; }
.section-title p,
.station-header p,
.panel-heading p,
.history-screen-header p { color: var(--muted); }
.eyebrow { color: #1689bd; }

.primary,
.secondary,
.camera-connect,
.download-button,
.view-history,
.discard-report,
.user-session button {
  border-radius: 12px;
  transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease, background 150ms ease;
}
.primary {
  background: var(--magic-blue);
  color: #ffffff;
  box-shadow: 0 9px 20px rgba(71, 185, 239, 0.22);
}
.primary:hover { background: #2caae4; box-shadow: 0 11px 24px rgba(71, 185, 239, 0.3); transform: translateY(-1px); }
.secondary {
  border-color: var(--line);
  background: #ffffff;
  color: var(--magic-blue-dark);
}
.secondary:hover { border-color: #8bcff0; background: var(--magic-blue-soft); color: #0f739e; }

.app-nav {
  border-color: var(--line);
  border-radius: 14px;
  background: #edf5fb;
  box-shadow: inset 0 1px 2px rgba(33, 59, 87, 0.04);
}
.app-nav button { border-radius: 10px; color: var(--muted); }
.app-nav button:hover { color: #17455d; }
.app-nav button.active { background: #ffffff; color: #1689bd; box-shadow: 0 4px 12px rgba(33, 59, 87, 0.09); }
.device-statuses { gap: 8px; }
.camera-connect {
  border-color: #a7dbf3;
  background: var(--magic-blue-soft);
  color: #147ca9;
}
.camera-connect:hover { border-color: var(--magic-blue); background: #dff2fb; }
.connection { color: #64748b; }
.connection.online { color: var(--magic-mint-text); }
.connection.offline { color: #7b8795; }
.connection.online span { background: #43c985; }
.connection.offline span { background: #94a3b8; }
.user-session { border-left-color: var(--line); }
.user-session strong { color: #334155; }
.user-session button { border-color: var(--line); background: #ffffff; color: var(--muted); }
.user-session button:hover { border-color: #f0b1b1; background: #fff5f5; color: var(--red); }

.camera-view {
  border-color: #d6e3ee;
  background: #edf4f8;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.85);
}
.camera-placeholder { color: #607083; }
.camera-placeholder strong { color: #334155; }
.camera-placeholder span { color: #6b7c8f; }
.camera-view .guide { border-color: rgba(71, 185, 239, 0.58); box-shadow: 0 0 0 999px rgba(22, 32, 44, 0.25); }
.camera-view .guide strong { background: rgba(255, 255, 255, 0.94); color: #147ca9; }
.camera-view .capture-caption { background: rgba(22, 32, 44, 0.76); color: #ffffff; }
.camera-view video,
.camera-preview { background: #eef5f9; }

.pill.neutral { border-color: #c9d9e6; background: #edf5fb; color: #566577; }
.pill.approved { border-color: #b9e8d4; background: var(--magic-mint); color: var(--magic-mint-text); }
.pill.rejected { border-color: #f1c5c5; background: #fff0f0; color: #b83f3f; }
.manual-validation-banner { border-color: #b9dff1; background: #edf8fd; color: #23566d; }
.manual-validation-banner strong { color: #1689bd; }

.detected-card,
.side-diagnostic,
.history-detail-metrics div {
  border-color: var(--line);
  background: #f7fbfe;
}
.detected-card span,
.side-diagnostic span { color: #64748b; }
.detected-card strong { color: #16202c; }
.detected-card small { color: var(--muted); }
.detected-card.warning { border-color: #f1cf8b; background: #fffbeb; }
.detected-card.warning strong { color: #9a6700; }
.side-diagnostic strong { color: #334155; }
.side-diagnostic.pass { border-color: #b8e8d3; background: #f0fbf6; }
.side-diagnostic.pass strong { color: var(--magic-mint-text); }
.side-diagnostic.warning { border-color: #f1cf8b; background: #fffbeb; }
.side-diagnostic.warning strong { color: #a16207; }
.side-diagnostic.fail { border-color: #f0c0c0; background: #fff3f3; }
.side-diagnostic.fail strong { color: #c24141; }

.result-badge.neutral { background: #edf5fb; color: var(--muted); }
.result-badge.approved { background: var(--magic-mint); color: var(--magic-mint-text); }
.result-badge.rejected { background: #fff0f0; color: #bd4545; }
.checks { border-color: var(--line); }
.check-row + .check-row { border-color: #e3ecf3; }
.check-row strong { color: #334155; }
.check-row small { color: var(--muted); }
.check-row .icon { background: #edf5fb; color: #718096; }
.check-row.pass .icon { background: var(--magic-mint); color: var(--magic-mint-text); }
.check-row.fail .icon { background: #fff0f0; color: #c24141; }
.details dt { color: var(--muted); }
.details dd { color: #334155; }

.progress { background: #dce8f1; }
.progress > span { background: linear-gradient(90deg, #47b9ef, #7bcff5); box-shadow: 0 0 12px rgba(71, 185, 239, 0.28); }
.progress-copy { color: var(--muted); }
.progress-copy strong { color: #16202c; }
.step-flow li { color: #7b8795; }
.step-flow li::before { background: #d9e5ee; color: #607083; }
.step-flow li.active { color: #1689bd; }
.step-flow li.active::before { background: var(--magic-blue); color: #ffffff; box-shadow: 0 5px 12px rgba(71, 185, 239, 0.24); }
.step-flow li.done { color: var(--magic-mint-text); }
.step-flow li.done::before { background: #43c985; color: #ffffff; }

.bank-capture { border-top-color: var(--line); }
.bank-preview { border-color: #d6e3ee; background: #edf4f8; }
.bank-preview span { background: rgba(22, 32, 44, 0.74); color: #ffffff; }
.field-help.ready { color: var(--magic-mint-text); }
.field-help.warning { color: #b7791f; }
.form-error { color: var(--red); }

.table-wrap { border-radius: 14px; }
.history-panel th,
.rejected-panel th,
.report-panel th,
.replacement-panel th,
.production-history-panel th,
.history-detail th {
  border-bottom-color: var(--line);
  color: #64748b;
  background: #f6fafd;
}
.history-panel td,
.rejected-panel td,
.report-panel td,
.replacement-panel td,
.production-history-panel td,
.history-detail td {
  border-bottom-color: #e4edf4;
  color: #334155;
}
.history-panel tbody tr:hover td,
.production-history-panel tbody tr:hover td { background: #f5faff; }
.empty-row td { color: var(--muted); }
.status-text.pass { color: var(--magic-mint-text); }
.status-text.fail { color: #c24141; }
.rfid-blocks strong { color: #17688c; }
.not-recorded { color: var(--muted); }

.approved-reports-panel .panel-heading > strong,
.report-actions strong,
.history-detail-metrics strong { color: var(--magic-mint-text); }
.replacement-panel .panel-heading > strong { color: #b7791f; }
.rejected-panel .panel-heading > strong,
.rejected-panel .report-actions strong { color: #c24141; }
.report-side.pass strong { color: var(--magic-mint-text); }
.report-side.fail strong,
.report-issues { color: #c24141; }
.report-side.pending strong { color: var(--muted); }
.report-side small { color: var(--muted); }
.download-button,
.view-history {
  border-color: #aadcf2;
  background: var(--magic-blue-soft);
  color: #147ca9;
}
.download-button:hover,
.view-history:hover { border-color: var(--magic-blue); background: #dff3fc; color: #0c6f99; }
.download-button.rejected,
.discard-report { border-color: #f1c5c5; background: #fff1f1; color: #bd4545; }
.download-button.rejected:hover,
.discard-report:hover { border-color: var(--red); background: #ffe8e8; color: #a92f2f; }
.lot-status.closed { background: var(--magic-mint); color: var(--magic-mint-text); }
.lot-status.active { background: #fff6df; color: #9a6700; }
.history-detail-metrics span { color: var(--muted); }

@media (max-width: 1180px) {
  .topbar { height: auto; min-height: 86px; padding-top: 12px; padding-bottom: 12px; }
  .brand-logo { width: 154px; }
  main { padding-right: 24px; padding-left: 24px; }
}

@media (max-width: 720px) {
  .auth-card { padding: 30px 24px; border-radius: 28px; }
  .auth-card h1 { font-size: 30px; }
  .topbar { padding-right: 18px; padding-left: 18px; }
  .brand-product { display: none; }
  main { padding: 22px 14px 40px; }
  .setup { padding: 20px; }
  .panel { border-radius: 18px; }
}