:root {
  --demo-navy: #0b1f33;
  --demo-navy-soft: #132b44;
  --demo-blue: #1477d4;
  --demo-cyan: #19a9c7;
  --demo-bg: #f3f6f9;
  --demo-card: #ffffff;
  --demo-border: #dde5ec;
  --demo-text: #172b3d;
  --demo-muted: #64788a;
  --demo-success: #198754;
  --demo-warning: #d97706;
  --demo-danger: #c2414d;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; color: var(--demo-text); background: var(--demo-bg); font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, input { font: inherit; }
a { color: var(--demo-blue); }

.demo-topbar {
  position: fixed; z-index: 30; top: 0; left: 264px; right: 0; height: 64px;
  display: flex; align-items: center; justify-content: space-between; padding: 0 28px;
  background: rgba(255,255,255,.96); border-bottom: 1px solid var(--demo-border); backdrop-filter: blur(12px);
}
.demo-topbar-title, .demo-topbar-actions, .demo-heading-actions { display: flex; align-items: center; gap: 12px; }
.demo-topbar-title strong { font-size: 18px; }
.demo-environment { padding: 5px 9px; border-radius: 999px; color: #93520a; background: #fff1d6; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.demo-shared-note { color: var(--demo-muted); font-size: 13px; }
.demo-user { font-weight: 700; }
.demo-link-button { border: 0; background: none; color: var(--demo-blue); cursor: pointer; padding: 8px; }
.demo-mobile-menu { display: none; }

.demo-sidebar { position: fixed; z-index: 40; inset: 0 auto 0 0; width: 264px; background: var(--demo-navy); color: #fff; overflow-y: auto; box-shadow: 5px 0 25px rgba(4, 19, 32, .12); }
.demo-brand { height: 84px; display: flex; align-items: center; gap: 12px; padding: 0 22px; border-bottom: 1px solid rgba(255,255,255,.08); }
.demo-brand-mark { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; color: white; background: linear-gradient(135deg, var(--demo-blue), var(--demo-cyan)); font-size: 24px; font-weight: 900; box-shadow: 0 8px 18px rgba(20,119,212,.3); }
.demo-brand strong { display: block; font-size: 16px; }
.demo-brand small { display: block; color: #91a7ba; margin-top: 3px; }
.demo-sidebar nav { padding: 12px 10px 92px; }
.demo-sidebar nav a { display: flex; align-items: center; gap: 13px; min-height: 43px; margin: 2px 0; padding: 0 13px; color: #bfd0de; border-radius: 9px; font-size: 14px; font-weight: 600; }
.demo-sidebar nav a i { font-size: 20px; color: #8099ae; }
.demo-sidebar nav a:hover, .demo-sidebar nav a.active { color: #fff; background: rgba(34,145,225,.18); }
.demo-sidebar nav a.active i { color: #4ec7ed; }
.demo-nav-heading { padding: 18px 13px 7px; color: #718ca2; font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.demo-sidebar-footer { position: fixed; bottom: 0; left: 0; width: 264px; display: flex; align-items: center; gap: 10px; padding: 15px 20px; color: #a8bdcc; background: #081a2c; border-top: 1px solid rgba(255,255,255,.08); font-size: 12px; }
.demo-sidebar-footer i { color: #51d1a2; font-size: 18px; }

.demo-main { margin-left: 264px; padding: 94px 28px 50px; min-height: 100vh; }
.demo-page-heading { display: flex; justify-content: space-between; gap: 28px; align-items: flex-end; margin: 0 auto 24px; max-width: 1500px; }
.demo-page-heading h1 { margin: 2px 0 5px; font-size: clamp(28px, 3vw, 38px); line-height: 1.15; font-weight: 750; letter-spacing: -.03em; }
.demo-page-heading p:not(.demo-eyebrow) { margin: 0; max-width: 760px; color: var(--demo-muted); font-size: 15px; }
.demo-eyebrow { margin: 0; color: var(--demo-blue); font-size: 11px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }

.demo-primary-button, .demo-secondary-button, .demo-danger-outline { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 16px; border-radius: 8px; border: 1px solid transparent; cursor: pointer; font-weight: 750; text-decoration: none; }
.demo-primary-button { color: #fff; background: var(--demo-blue); box-shadow: 0 6px 14px rgba(20,119,212,.2); }
.demo-primary-button:hover { color: #fff; background: #0e67bb; }
.demo-primary-button:disabled { opacity: .56; cursor: default; }
.demo-secondary-button { color: var(--demo-text); background: #fff; border-color: var(--demo-border); }
.demo-secondary-button:hover { color: var(--demo-blue); border-color: #b7c9d8; }
.demo-danger-outline { color: var(--demo-danger); background: #fff; border-color: #efc2c7; }
.demo-heading-actions i { font-size: 18px; }

.demo-notice { max-width: 1500px; margin: 0 auto 22px; padding: 14px 17px; display: flex; align-items: flex-start; gap: 12px; color: #245269; background: #e9f7fb; border: 1px solid #bde5ee; border-radius: 10px; }
.demo-notice i { margin-top: 1px; color: var(--demo-cyan); }
.demo-notice strong, .demo-notice span { display: block; }
.demo-notice span { margin-top: 2px; font-size: 13px; color: #527487; }

.demo-metric-grid { max-width: 1500px; margin: 0 auto 22px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.demo-metric-card, .demo-panel, .demo-table-card, .demo-equipment-card { background: var(--demo-card); border: 1px solid var(--demo-border); border-radius: 12px; box-shadow: 0 5px 18px rgba(12,39,62,.045); }
.demo-metric-card { display: flex; align-items: center; gap: 15px; padding: 19px; }
.demo-metric-card > div:last-child { min-width: 0; }
.demo-metric-card span, .demo-metric-card small { display: block; color: var(--demo-muted); }
.demo-metric-card strong { display: block; margin: 2px 0 1px; font-size: 28px; letter-spacing: -.03em; }
.demo-metric-icon { width: 48px; height: 48px; flex: none; display: grid; place-items: center; border-radius: 12px; }
.demo-blue { color: #1464b5; background: #e5f1fc; }
.demo-orange { color: #b45e08; background: #fff0dc; }
.demo-teal { color: #087a67; background: #dff7f1; }
.demo-red { color: #b83342; background: #fde8eb; }

.demo-dashboard-grid { max-width: 1500px; margin: 0 auto; display: grid; grid-template-columns: 1.6fr 1fr; gap: 18px; }
.demo-panel { padding: 20px; min-width: 0; }
.demo-panel-wide { grid-row: span 2; }
.demo-panel-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 15px; }
.demo-panel-heading h2 { margin: 2px 0 0; font-size: 19px; }
.demo-panel-heading a { font-size: 13px; font-weight: 700; }
.demo-schedule-list { display: grid; gap: 2px; }
.demo-schedule-row { display: grid; grid-template-columns: 4px minmax(190px, 1.4fr) minmax(110px, .8fr) minmax(130px, .8fr) auto; align-items: center; gap: 14px; min-height: 65px; border-top: 1px solid #edf1f4; }
.demo-lot-status { height: 34px; border-radius: 3px; background: var(--demo-blue); }
.demo-schedule-main strong, .demo-schedule-main span, .demo-schedule-row div > small, .demo-schedule-row div > strong { display: block; }
.demo-schedule-main span, .demo-schedule-row small { color: var(--demo-muted); font-size: 12px; }
.demo-progress { height: 6px; overflow: hidden; border-radius: 999px; background: #e9eef2; }
.demo-progress span, .demo-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--demo-blue), var(--demo-cyan)); }
.demo-progress-wrap small { display: block; margin-bottom: 5px; }
.demo-status-pill { display: inline-flex; align-items: center; width: max-content; max-width: 100%; padding: 4px 9px; border-radius: 999px; color: #385569; background: #edf3f7; font-size: 11px; font-weight: 750; white-space: nowrap; }
.demo-equipment-mini, .demo-compact-list { display: grid; }
.demo-equipment-mini article { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid #edf1f4; }
.demo-equipment-mini strong, .demo-equipment-mini small { display: block; }
.demo-equipment-mini small { margin-top: 2px; color: var(--demo-muted); }
.demo-equipment-dot { width: 9px; height: 9px; border-radius: 50%; background: #9aaab6; }
.equipment-running, .equipment-holding { background: #20a16c; box-shadow: 0 0 0 4px rgba(32,161,108,.12); }
.equipment-available { background: #1f82d3; }
.equipment-maintenance { background: #d97706; }
.demo-compact-list article { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 11px 0; border-top: 1px solid #edf1f4; }
.demo-compact-list i { color: #7892a5; font-size: 20px; }
.demo-compact-list strong, .demo-compact-list span { display: block; }
.demo-compact-list span, .demo-compact-list time { color: var(--demo-muted); font-size: 12px; }

.demo-table-card { max-width: 1500px; margin: 0 auto; overflow: hidden; }
.demo-table-tools { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 12px 18px; border-bottom: 1px solid var(--demo-border); color: var(--demo-muted); font-size: 13px; }
.demo-search { width: min(420px, 100%); display: flex; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid var(--demo-border); border-radius: 8px; background: #f9fbfc; }
.demo-search i { color: #8095a5; }
.demo-search input { height: 40px !important; margin: 0 !important; border: 0 !important; box-shadow: none !important; }
.demo-table-scroll { overflow-x: auto; }
.demo-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.demo-table th { padding: 12px 15px; color: #708697; background: #f7f9fb; font-size: 10px; font-weight: 850; letter-spacing: .06em; text-align: left; text-transform: uppercase; white-space: nowrap; }
.demo-table td { padding: 13px 15px; border-top: 1px solid #edf1f4; vertical-align: middle; }
.demo-table tbody tr:hover { background: #fafdff; }
.demo-row-action { border: 0; padding: 6px 9px; color: var(--demo-blue); background: #eaf4fd; border-radius: 6px; cursor: pointer; font-size: 11px; font-weight: 750; white-space: nowrap; }
.demo-inline-progress { min-width: 100px; }
.demo-inline-progress > span { display: block; margin-bottom: 4px; font-size: 11px; color: var(--demo-muted); }

.demo-equipment-grid { max-width: 1500px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.demo-equipment-card { padding: 20px; }
.demo-equipment-card-top { display: flex; align-items: center; justify-content: space-between; }
.demo-equipment-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 10px; color: #d96c16; background: #fff0e2; }
.demo-equipment-card h2 { margin: 18px 0 2px; font-size: 20px; }
.demo-equipment-card p { margin: 0 0 18px; color: var(--demo-muted); }
.demo-equipment-reading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 13px; }
.demo-equipment-reading strong { font-size: 24px; }
.demo-equipment-reading span { color: var(--demo-muted); font-size: 12px; text-align: right; }
.demo-equipment-card > small { display: block; margin-top: 7px; color: var(--demo-muted); }

.demo-walkthrough-progress { max-width: 1100px; margin: 0 auto 18px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 14px; }
.demo-tour-list { max-width: 1100px; margin: 0 auto; display: grid; gap: 10px; }
.demo-tour-step { display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 16px; padding: 18px; background: #fff; border: 1px solid var(--demo-border); border-radius: 11px; }
.demo-tour-step.current { border-color: #7db8eb; box-shadow: 0 0 0 3px rgba(20,119,212,.08); }
.demo-tour-step.complete { background: #f7fcfa; border-color: #bee8d6; }
.demo-tour-number { width: 34px; height: 34px; display: grid; place-items: center; color: #fff; background: #8397a6; border-radius: 50%; font-weight: 800; }
.demo-tour-step.current .demo-tour-number { background: var(--demo-blue); }
.demo-tour-step.complete .demo-tour-number { background: var(--demo-success); }
.demo-tour-icon { width: 44px; height: 44px; display: grid; place-items: center; color: var(--demo-blue); background: #eaf4fd; border-radius: 10px; }
.demo-tour-copy h2 { margin: 0 0 4px; font-size: 17px; }
.demo-tour-copy p { margin: 0; color: var(--demo-muted); font-size: 13px; }
.demo-tour-actions { display: flex; gap: 8px; }

.demo-account-grid { max-width: 1500px; margin: 0 auto; display: grid; grid-template-columns: 340px 1fr; gap: 18px; align-items: start; }
.demo-account-form { display: grid; gap: 8px; }
.demo-account-form label { margin-top: 7px; color: #526a7d; font-size: 12px; font-weight: 750; }
.demo-account-form input, .demo-login-form input { height: 44px !important; margin: 0 0 5px !important; padding: 0 12px !important; border: 1px solid var(--demo-border) !important; border-radius: 8px !important; box-shadow: none !important; }
.demo-account-form input:focus, .demo-login-form input:focus { border-color: var(--demo-blue) !important; box-shadow: 0 0 0 3px rgba(20,119,212,.09) !important; }
.demo-account-form p { color: var(--demo-muted); font-size: 12px; line-height: 1.5; }

.demo-login-page { background: radial-gradient(circle at 70% 15%, #17466f 0, #0b243b 32%, #071827 100%); }
.demo-login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 30px; }
.demo-login-card { width: min(470px, 100%); padding: 34px; background: #fff; border-radius: 16px; box-shadow: 0 30px 80px rgba(0,0,0,.3); }
.demo-login-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
.demo-login-brand h1 { margin: 0; font-size: 25px; }
.demo-login-brand p { margin: 2px 0 0; color: var(--demo-muted); }
.demo-mode-callout { display: flex; gap: 11px; margin-bottom: 20px; padding: 13px; color: #245269; background: #eaf7fb; border-radius: 9px; }
.demo-mode-callout i { color: var(--demo-cyan); }
.demo-mode-callout strong, .demo-mode-callout span { display: block; }
.demo-mode-callout span { margin-top: 3px; font-size: 12px; line-height: 1.45; }
.demo-login-form { display: grid; gap: 7px; }
.demo-login-form label { margin-top: 7px; font-size: 12px; font-weight: 750; color: #526a7d; }
.demo-login-form button { margin-top: 10px; }
.demo-alert { margin-bottom: 14px; padding: 10px 12px; border-radius: 7px; font-size: 13px; }
.demo-alert-error { color: #9d2834; background: #fdebed; border: 1px solid #f5c7cc; }
.demo-local-hint { margin: 14px 0 0; padding: 9px; background: #fff8df; border-radius: 6px; color: #775c16; font-size: 11px; text-align: center; }
.demo-login-footer { margin: 18px 0 0; color: var(--demo-muted); font-size: 11px; line-height: 1.45; text-align: center; }
.demo-empty-state { max-width: 620px; margin: 80px auto; padding: 60px 30px; text-align: center; background: #fff; border: 1px solid var(--demo-border); border-radius: 14px; }
.demo-empty-state > i { font-size: 52px; color: #8198aa; }

.demo-toast { position: fixed; z-index: 100; right: 24px; bottom: 24px; max-width: 420px; padding: 13px 16px; color: #fff; background: #183349; border-radius: 9px; box-shadow: 0 12px 30px rgba(0,0,0,.2); opacity: 0; transform: translateY(12px); transition: .2s ease; }
.demo-toast.show { opacity: 1; transform: translateY(0); }

@media (max-width: 1100px) {
  .demo-metric-grid { grid-template-columns: repeat(2, 1fr); }
  .demo-dashboard-grid { grid-template-columns: 1fr; }
  .demo-panel-wide { grid-row: auto; }
  .demo-equipment-grid { grid-template-columns: repeat(2, 1fr); }
  .demo-account-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .demo-sidebar { transform: translateX(-100%); transition: transform .2s ease; }
  .demo-sidebar.open { transform: translateX(0); }
  .demo-sidebar-footer { position: static; width: auto; }
  .demo-topbar { left: 0; padding: 0 15px; }
  .demo-mobile-menu { display: inline-flex; color: var(--demo-text); }
  .demo-topbar-title strong, .demo-shared-note, .demo-user { display: none; }
  .demo-main { margin-left: 0; padding: 84px 14px 35px; }
  .demo-page-heading { align-items: flex-start; flex-direction: column; }
  .demo-heading-actions { width: 100%; flex-wrap: wrap; }
  .demo-metric-grid, .demo-equipment-grid { grid-template-columns: 1fr; }
  .demo-schedule-row { grid-template-columns: 4px 1fr auto; padding: 10px 0; }
  .demo-schedule-row > div:nth-of-type(3), .demo-progress-wrap { display: none; }
  .demo-tour-step { grid-template-columns: auto 1fr; }
  .demo-tour-icon { display: none; }
  .demo-tour-actions { grid-column: 1 / -1; }
  .demo-tour-actions a, .demo-tour-actions button { flex: 1; }
  .demo-login-wrap { padding: 16px; }
  .demo-login-card { padding: 24px; }
}