@import "https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;800&family=Roboto:wght@400;500;700&display=swap";:root{--page-bg:#fff;--page-bg-soft:#fff;--shell-bg:#fff;--sidebar-bg:#fff;--content-bg:#fff;--card-bg:#fff;--card-bg-muted:#fff;--card-bg-strong:#fff;--inner-row-bg:#fff;--card-border:#dde7dc;--card-border-strong:#cddbcc;--shadow-shell:0 20px 48px #354f3d1a, 0 2px 6px #354f3d0a;--shadow-soft:0 14px 34px #354f3d14, 0 2px 6px #354f3d0a;--shadow-card:0 14px 30px #354f3d14, 0 1px 3px #354f3d0d;--shadow-card-hover:0 22px 42px #354f3d1f, 0 4px 12px #354f3d0f;--shadow-chart:inset 0 1px 0 #ffffffbf, 0 16px 34px #354f3d14, 0 2px 6px #354f3d0a;--primary-accent:#1f6b4f;--primary-accent-strong:#15503b;--primary-accent-soft:#dceee1;--sidebar-theme-bg:#06402b;--sidebar-theme-bg-strong:#042f1f;--sidebar-theme-surface:#ffffff14;--sidebar-theme-surface-strong:#ffffff1f;--sidebar-theme-border:#ffffff24;--sidebar-theme-text:#f7fbf8;--sidebar-theme-text-soft:#f7fbf8d6;--topbar-bg:#06402b;--topbar-bg-strong:#042f1f;--topbar-border:#ffffff1f;--topbar-surface:#ffffff14;--topbar-surface-strong:#ffffff1f;--topbar-text:#f7fbf8;--topbar-text-soft:#f7fbf8e6;--warning-accent:#c9963d;--warning-soft:#f4ebd3;--red-accent:#c96b63;--red-soft:#f7e6e4;--text-primary:#101a14;--text-secondary:#33443a;--text-muted:#54655a;--text-on-accent:#f6fbf6;--font-sans:"Roboto", "Segoe UI", "Trebuchet MS", sans-serif;--font-serif:"Montserrat", "Segoe UI", sans-serif;--radius-shell:32px;--radius-card:24px;--radius-inner:18px;--radius-pill:999px;--radius-button:999px;--page-padding:clamp(12px, 1.35vw, 22px);--shell-gap:clamp(16px, 1.2vw, 24px);--sidebar-width:clamp(240px, 16vw, 312px);--topbar-height:0px;--topbar-offset:calc(var(--topbar-height) + var(--shell-gap));--sidebar-top:calc(var(--page-padding) + var(--topbar-offset));--shell-section-height:170px;--status-badge-height:66px;--metric-card-height:126px;--compact-card-height:140px;--overview-card-height:228px;--workflow-card-height:152px;--message-card-height:148px;--chart-card-height:348px;--records-card-height:480px;--settings-card-height:360px}*{box-sizing:border-box;margin:0;padding:0}.dashboard-page{width:100%;min-height:100vh;padding:var(--page-padding);color:var(--text-primary);font-family:var(--font-sans);background:#fff;display:flex;overflow:visible}.dashboard-page:before,.dashboard-page:after{display:none}.dashboard-container{width:100%;max-width:none;min-height:calc(100vh - (var(--page-padding) * 2));z-index:1;gap:var(--shell-gap);flex-direction:column;flex:auto;margin:0;padding-top:0;display:flex;position:relative}.dashboard-container:before{content:"";height:calc(var(--page-padding) + var(--topbar-height) + var(--shell-gap));background:var(--page-bg);pointer-events:none;z-index:25;position:fixed;top:0;left:0;right:0}.topbar{top:var(--page-padding);z-index:30;justify-content:space-between;align-items:center;gap:var(--shell-gap);border-radius:var(--radius-shell);background:radial-gradient(circle at top right, #ffffff1f, transparent 26%), linear-gradient(135deg, var(--topbar-bg), var(--topbar-bg-strong));box-shadow:var(--shadow-shell);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border:1px solid #042f1fc7;padding:clamp(16px,1.2vw,24px);display:flex;position:sticky;left:auto;right:auto;overflow:hidden}.topbar-leading{z-index:1;align-items:center;gap:14px;min-width:0;display:flex;position:relative}.topbar:after{content:"";pointer-events:none;background:linear-gradient(#ffffff14,#0000 45%);position:absolute;inset:0}.topbar-brand{align-items:center;gap:14px;min-width:0;display:flex}.brand-mark{border:1px solid var(--topbar-border);background:linear-gradient(180deg, var(--topbar-surface-strong), #ffffff0d);border-radius:18px;place-items:center;width:52px;height:52px;display:grid;box-shadow:inset 0 1px #ffffff29,0 12px 24px #00000029}.brand-mark__icon{width:24px;height:24px;color:var(--topbar-text);filter:drop-shadow(0 6px 12px #00000029)}.brand-copy{gap:4px;min-width:0;display:grid}.brand-eyebrow,.content-kicker,.sidebar-section-label,.summary-label,.card-title,.form-label{text-transform:uppercase;letter-spacing:.12em;font-size:.72rem;font-weight:700}.brand-eyebrow{color:var(--topbar-text)}.topbar-title{font-family:var(--font-serif);color:var(--topbar-text);font-size:clamp(1.08rem,1.7vw,1.42rem);font-weight:700;line-height:1.18}.topbar-datetime{border:1px solid var(--topbar-border);background:linear-gradient(180deg, var(--topbar-surface-strong), #ffffff0d);min-width:156px;color:var(--topbar-text-soft);border-radius:18px;flex-direction:column;justify-content:center;align-items:flex-start;gap:4px;padding:10px 14px;display:flex;box-shadow:inset 0 1px #ffffff24,0 10px 20px #0000001f}.topbar-datetime__date{letter-spacing:.1em;text-transform:uppercase;font-size:.72rem;font-weight:700}.topbar-datetime__time{color:var(--topbar-text);font-size:1rem;font-weight:800;line-height:1}.topbar-actions{z-index:1;flex:auto;justify-content:flex-end;align-items:center;gap:12px;min-width:0;display:flex;position:relative}.mobile-nav-toggle{border:1px solid var(--topbar-border);border-radius:var(--radius-pill);background:linear-gradient(180deg, var(--topbar-surface-strong), #ffffff0f);min-height:48px;color:var(--topbar-text);cursor:pointer;justify-content:center;align-items:center;gap:8px;padding:12px 18px;font-size:.85rem;font-weight:700;transition:transform .16s,border-color .16s,background .16s;display:none}.mobile-nav-toggle:hover{border-color:#ffffff3d;transform:translateY(-1px)}.mobile-nav-toggle.active{background:#ffffff24}.control-icon{background:linear-gradient(#ffffff29,#ffffff14);border:1px solid #ffffff29;border-radius:12px;justify-content:center;align-items:center;width:28px;height:28px;display:inline-flex;box-shadow:inset 0 1px #ffffff24,0 8px 16px #0000001f}.control-icon svg{display:block}.mobile-nav-toggle:hover .control-icon,.mobile-nav-toggle.active .control-icon,.sidebar-close:hover .control-icon{background:linear-gradient(#ffffff38,#ffffff1f);border-color:#ffffff3d}.status-dot{border-radius:50%;flex-shrink:0;width:10px;height:10px;box-shadow:0 0 0 6px #ffffff1f}.status-dot.green{background:var(--primary-accent)}.status-dot.amber,.status-dot.yellow{background:var(--warning-accent);box-shadow:0 0 0 5px #c9963d24}.status-dot.error{background:var(--red-accent);box-shadow:0 0 0 5px #c96b6324}.status-dot.idle{background:var(--text-muted);box-shadow:0 0 0 5px #ffffff14}.main-content{grid-template-columns:minmax(220px, var(--sidebar-width)) minmax(0, 1fr);align-items:start;gap:var(--shell-gap);flex:auto;width:100%;min-height:0;padding-left:0;display:grid}.sidebar{top:calc(var(--page-padding) + var(--topbar-height) + var(--shell-gap));z-index:20;width:100%;max-height:calc(100vh - var(--topbar-height) - var(--shell-gap) - (var(--page-padding) * 2));border-radius:var(--radius-shell);background:radial-gradient(circle at top left, #ffffff1f, transparent 22%), linear-gradient(180deg, var(--sidebar-theme-bg), var(--sidebar-theme-bg-strong));box-shadow:var(--shadow-shell);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);scrollbar-gutter:stable;overscroll-behavior:contain;border:1px solid #042f1fcc;flex-direction:column;gap:12px;padding:clamp(16px,1.1vw,22px) clamp(14px,1vw,20px);display:flex;position:sticky;bottom:auto;left:auto;overflow:hidden auto}.sidebar:after{content:"";pointer-events:none;background:linear-gradient(#ffffff0f,#0000 26%);position:absolute;inset:0}.sidebar-brand{z-index:1;align-items:center;gap:10px;padding:8px 8px 2px;display:flex;position:relative}.sidebar-brand-mark{border:1px solid var(--sidebar-theme-border);background:linear-gradient(180deg, var(--sidebar-theme-surface-strong), #ffffff0d);width:42px;height:42px;color:var(--sidebar-theme-text);letter-spacing:.08em;border-radius:14px;place-items:center;font-weight:800;display:grid;box-shadow:inset 0 1px #ffffff24,0 10px 24px #0000002e}.sidebar-brand-mark svg{color:var(--sidebar-theme-text)}.sidebar-brand-copy{gap:4px;display:grid}.sidebar-brand-name{font-family:var(--font-serif);color:var(--sidebar-theme-text);font-size:1rem;font-weight:700}.sidebar-brand-subtitle{color:var(--sidebar-theme-text-soft);font-size:.8rem;font-weight:600;line-height:1.35}.sidebar-section-label{color:var(--sidebar-theme-text-soft);padding:0 10px}.nav-items{z-index:1;flex-direction:column;gap:6px;display:flex;position:relative}.nav-item{width:100%;color:inherit;text-align:left;cursor:pointer;background:0 0;border:1px solid #0000;border-radius:18px;align-items:center;gap:10px;padding:11px 12px;transition:transform .16s,border-color .16s,background .16s,box-shadow .16s;display:flex}.nav-item:hover{border-color:var(--sidebar-theme-border);background:#ffffff14;transform:translateY(-1px)}.nav-item.active{background:linear-gradient(135deg,#ffffff24,#ffffff14);border-color:#ffffff2e;box-shadow:inset 0 1px #ffffff2e,0 10px 20px #00000024}.nav-icon-shell{background:linear-gradient(#ffffff24,#ffffff0f);border:1px solid #ffffff1f;border-radius:14px;flex-shrink:0;place-items:center;width:38px;height:38px;transition:transform .16s,border-color .16s,background .16s,box-shadow .16s;display:grid;box-shadow:inset 0 1px #ffffff24,0 10px 20px #0000001f}.nav-icon{width:18px;height:18px;color:var(--sidebar-theme-text);flex-shrink:0}.nav-item:hover .nav-icon-shell{background:linear-gradient(#ffffff2e,#ffffff14);border-color:#ffffff2e;transform:translateY(-1px)}.nav-item.active .nav-icon-shell{background:linear-gradient(#ffffff38,#ffffff1f);border-color:#ffffff3d;box-shadow:inset 0 1px #fff3,0 12px 22px #00000024}.nav-item.active .nav-icon,.nav-item.active .nav-label{color:var(--sidebar-theme-text)}.nav-content{gap:1px;display:grid}.nav-label{color:var(--sidebar-theme-text);font-size:.9rem;font-weight:700;line-height:1.25}.nav-subtitle{color:var(--sidebar-theme-text-soft);font-size:.78rem;font-weight:600;line-height:1.3}.sidebar-status{z-index:1;border:1px solid var(--sidebar-theme-border);background:linear-gradient(#ffffff1f,#ffffff0f);border-radius:18px;gap:10px;margin-top:auto;padding:14px;display:grid;position:relative;box-shadow:inset 0 1px #ffffff29,0 14px 28px #00000029}.sidebar-status-title{font-family:var(--font-serif);color:var(--sidebar-theme-text);font-size:.98rem}.status-line{color:var(--sidebar-theme-text);align-items:flex-start;gap:8px;font-size:.82rem;font-weight:600;line-height:1.45;display:flex}.sidebar-mobile-header{z-index:1;justify-content:space-between;align-items:center;gap:12px;padding:2px 6px 0;display:none;position:relative}.sidebar-mobile-title{color:var(--sidebar-theme-text);font-family:var(--font-serif);font-size:.96rem;font-weight:700}.sidebar-close{color:inherit;cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;padding:0;transition:transform .16s;display:inline-flex}.sidebar-close:hover{transform:translateY(-1px)}.sidebar-backdrop{display:none}.content-area{gap:var(--shell-gap);isolation:isolate;flex-direction:column;flex:auto;min-width:0;min-height:0;display:flex;position:relative}.content-area:before{content:"";pointer-events:none;z-index:-1;background:radial-gradient(circle at 0 0,#1f6b4f14,#0000 34%),linear-gradient(#f8fbf8f5,#fff0);border-radius:30px;height:280px;position:absolute;inset:6px 0 auto}.content-header{align-items:start;gap:var(--shell-gap);min-height:var(--shell-section-height);border-radius:var(--radius-shell);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:radial-gradient(circle at 100% 0,#1f6b4f14,#0000 28%),linear-gradient(#fffffffa,#f7faf7fa);border:1px solid #d9e4daf5;grid-template-columns:minmax(0,1.08fr) minmax(340px,.92fr);padding:clamp(22px,1.6vw,28px);display:grid;position:relative;overflow:hidden;box-shadow:0 22px 42px #354f3d14,0 2px 6px #354f3d0a}.content-header__copy{gap:10px;max-width:100%;display:grid}.content-kicker{color:var(--primary-accent);align-items:center;gap:8px;display:inline-flex}.content-kicker:before{content:"";background:#1f6b4f57;width:26px;height:1px}.content-title{font-family:var(--font-serif);letter-spacing:-.02em;font-size:clamp(1.52rem,2.25vw,2.24rem);line-height:1.02}.content-description{color:var(--text-secondary);max-width:66ch;font-size:.94rem;font-weight:600;line-height:1.72}.content-summary{grid-template-columns:repeat(2,minmax(180px,1fr));justify-self:stretch;gap:8px;width:100%;min-width:0;max-width:none;display:grid}.summary-card{background:#fff;border:1px solid #d7e1d8fa;border-radius:20px;gap:8px;height:100%;padding:16px 16px 18px;display:grid;box-shadow:inset 0 1px #ffffffe6,0 14px 28px #354f3d0f}.summary-card--accent{background:linear-gradient(#1f6b4ff0,#15503bf5);border-color:#15503bd9;box-shadow:inset 0 1px #ffffff1f,0 16px 30px #15503b33}.summary-card--accent .summary-label,.summary-card--accent strong{color:var(--text-on-accent)}.summary-label{color:var(--text-secondary)}.summary-card strong{font-size:.88rem;line-height:1.55}.panel{display:none}.panel.active{animation:.24s panelFadeIn;display:block}.live-detection-layout,.system-overview-layout,.analytics-layout,.reports-layout,.records-layout,.settings-layout{align-items:stretch;gap:16px;display:grid}.live-detection-layout{grid-template-columns:minmax(0,1.08fr) minmax(280px,.92fr)}.live-detection-left,.live-detection-right{align-content:start}.live-detection-left,.live-detection-right,.system-overview-layout,.analytics-layout,.settings-layout,.grid-2,.grid-2x2,.grid-3,.grid-4{align-items:stretch;gap:16px;display:grid}.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-2x2{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(var(--metric-card-height), 1fr)}.grid-3{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:minmax(var(--workflow-card-height), 1fr)}.grid-4{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(var(--metric-card-height), 1fr)}.card{border-radius:var(--radius-card);background:linear-gradient(#fffffffc,#f9fbf9fc);border:1px solid #dbe5dcfa;flex-direction:column;gap:12px;min-width:0;min-height:128px;padding:20px;transition:transform .18s,box-shadow .18s,border-color .18s;display:flex;position:relative;box-shadow:inset 0 1px #ffffffeb,0 16px 32px #354f3d12,0 2px 6px #354f3d0a}.card:before{content:"";background:linear-gradient(90deg,#1f6b4fcc,#1f6b4f14);border-radius:999px;height:3px;position:absolute;top:0;left:20px;right:20px}.card:hover{box-shadow:var(--shadow-card-hover);border-color:#1f6b4f3d;transform:translateY(-2px)}.card-title{color:var(--text-secondary);border-bottom:1px solid #dde7dce0;align-items:center;gap:10px;padding-bottom:10px;line-height:1.3;display:inline-flex}.card-title:before{content:"";background:linear-gradient(#1f6b4ff2,#1f6b4f66);border-radius:50%;width:10px;height:10px;box-shadow:0 0 0 6px #1f6b4f14}.card--metric{min-height:var(--metric-card-height);background:radial-gradient(circle at 100% 0,#1f6b4f12,#0000 36%),linear-gradient(#fffffffc,#f8fbf8fc);justify-content:space-between;gap:16px}.card--compact-info{min-height:var(--compact-card-height);background:linear-gradient(#fffffffc,#f9fcf9fc);justify-content:center}.card--overview{min-height:var(--overview-card-height)}.card--workflow{min-height:var(--workflow-card-height)}.card--settings{min-height:var(--settings-card-height)}.metric-value{font-family:var(--font-serif);color:var(--primary-accent);letter-spacing:-.03em;font-size:clamp(1.76rem,2.55vw,2.56rem);line-height:.96}.metric-value--warning{color:var(--warning-accent)}.webcam-card{gap:14px;min-height:404px}.feedback-card,.rule-card{min-height:var(--message-card-height);justify-content:space-between}.stream-container,.stream-wrapper{position:relative}.stream-wrapper{border-radius:22px;overflow:hidden;box-shadow:0 18px 34px #354f3d14,0 2px 8px #354f3d0d}.stream-placeholder{text-align:center;color:var(--text-secondary);background:#fffffffa;place-items:center;gap:12px;padding:20px;display:grid;position:absolute;inset:0}.stream-badge{z-index:2;border-radius:var(--radius-pill);background:var(--warning-soft);color:var(--warning-accent);letter-spacing:.06em;text-transform:uppercase;padding:8px 14px;font-size:.72rem;font-weight:700;position:absolute;top:16px;right:16px}.stream-badge.success{background:var(--primary-accent-soft);color:var(--primary-accent)}.stream-badge.error{background:var(--red-soft);color:var(--red-accent)}.webcam-feed{aspect-ratio:16/10;object-fit:cover;background:linear-gradient(#dfe8df,#eff5ef);width:100%;min-height:260px}.webcam-controls{justify-content:center;display:flex}.helper-text{color:var(--text-secondary);font-size:.9rem;line-height:1.5}.helper-text--error{color:var(--red-accent)}.btn-row{flex-wrap:wrap;gap:10px;display:flex}.btn{border:1px solid var(--card-border-strong);border-radius:var(--radius-button);color:var(--text-primary);cursor:pointer;background:#ffffffeb;justify-content:center;align-items:center;gap:8px;padding:12px 20px;font-size:.9rem;font-weight:700;transition:transform .16s,border-color .16s,background .16s,box-shadow .16s;display:inline-flex}.btn:hover{border-color:#1f6b4f47;transform:translateY(-1px);box-shadow:0 16px 28px #36523f1c}.btn-primary{background:linear-gradient(180deg, var(--primary-accent), var(--primary-accent-strong));border-color:var(--primary-accent-strong);color:var(--text-on-accent)}.btn-primary:hover{border-color:var(--primary-accent-strong)}.btn-inline{margin-top:8px}.status-pill{border-radius:var(--radius-pill);background:var(--card-bg-muted);width:fit-content;color:var(--text-secondary);letter-spacing:.06em;text-transform:uppercase;align-items:center;padding:9px 14px;font-size:.8rem;font-weight:700;display:inline-flex}.status-pill.success{background:var(--primary-accent-soft);color:var(--primary-accent)}.status-pill.error{background:var(--red-soft);color:var(--red-accent)}.status-pill.neutral{color:var(--text-secondary);background:#54655a17}.detail-copy,.detail-timestamp,.workflow-copy,.rule-copy,.message-block,.empty-state{line-height:1.65}.detail-copy,.workflow-copy,.rule-copy,.message-block,.status-label{color:var(--text-secondary);font-size:.9rem;font-weight:600}.detail-copy--accent{color:var(--primary-accent);font-weight:700}.detail-timestamp{color:var(--text-muted);font-size:.84rem;font-weight:600}.message-block{border-left:4px solid var(--primary-accent);background:linear-gradient(#fffffffa,#f7faf7fa);border-radius:20px;padding:18px 20px}.rule-copy{background:linear-gradient(#dceee18c,#fffffff5);border-radius:20px;padding:18px 20px}.status-row{border-radius:var(--radius-inner);background:linear-gradient(#fffffff5,#f7faf7f5);border:1px solid #dde7dce6;justify-content:space-between;align-items:center;gap:14px;padding:14px 16px;transition:border-color .16s,transform .16s;display:flex}.status-row:hover{border-color:#1f6b4f29;transform:translateY(-1px)}.status-label,.status-value{font-size:.92rem}.status-value{color:var(--text-primary);font-weight:700}.workflow-step{background:#fff}.step-number{background:var(--primary-accent);width:28px;height:28px;color:var(--text-on-accent);border-radius:50%;place-items:center;margin-right:10px;font-size:.82rem;font-weight:700;display:inline-grid}.tabs{flex-wrap:wrap;gap:8px;display:flex}.analytics-middle{align-content:center;min-height:44px}.tab{border:1px solid var(--card-border);border-radius:var(--radius-pill);color:var(--text-secondary);cursor:pointer;background:#ffffffe0;padding:11px 18px;font-size:.9rem;font-weight:700;transition:transform .16s,border-color .16s,background .16s}.tab:hover{border-color:#1f6b4f33;transform:translateY(-1px)}.tab.active{color:var(--primary-accent);background:linear-gradient(#1f6b4f24,#1f6b4f14);border-color:#1f6b4f47}.chart-card{min-height:var(--chart-card-height)}.records-card{min-height:var(--records-card-height);gap:14px}.error-card{background:linear-gradient(#fffafafa,#fff);border-color:#c96b6347}.error-copy{border-left-color:var(--red-accent);color:var(--red-accent)}.reports-toolbar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px;display:flex}.toolbar-copy{gap:4px;display:grid}.toolbar-eyebrow{color:var(--primary-accent);text-transform:uppercase;letter-spacing:.12em;font-size:.72rem;font-weight:700}.toolbar-title{font-family:var(--font-serif);color:var(--text-primary);font-size:1.06rem;line-height:1.3}.toolbar-meta{color:var(--text-muted);font-size:.84rem;font-weight:600}.toolbar-actions{flex-wrap:wrap;gap:10px;display:flex}.report-list{gap:12px;display:grid}.report-list-row{border-radius:var(--radius-inner);background:linear-gradient(#fffffff5,#f7faf7f5);border:1px solid #dde7dcf0;justify-content:space-between;align-items:flex-start;gap:14px;padding:14px 16px;display:flex}.report-list-row span{color:var(--text-secondary);font-size:.9rem;font-weight:650}.report-list-row strong{color:var(--text-primary);text-align:right;font-size:.9rem;line-height:1.45}.chart-placeholder{background:linear-gradient(#fffffffa,#f7faf7fa);border:1px solid #dde7dcf5;border-radius:22px;justify-content:center;align-items:center;min-height:240px;display:flex;box-shadow:inset 0 1px #ffffffe6,0 16px 34px #354f3d14,0 2px 6px #354f3d0a}.chart-placeholder--chart{padding:10px 12px 4px;display:block}.chart-placeholder--chart .recharts-responsive-container{min-height:230px}.chart-card .chart-placeholder{flex:1;min-height:0}.table-container{background:#fffffffa;border:1px solid #dde7dcf5;border-radius:20px;overflow:auto;box-shadow:inset 0 1px #ffffffe0,0 16px 34px #354f3d0f,0 2px 6px #354f3d0a}.records-card .table-container{flex:1;min-height:0}.table{border-collapse:collapse;width:100%;min-width:760px}.table th,.table td{text-align:left;vertical-align:middle;border-bottom:1px solid #dde7dceb;padding:16px 18px}.table th{z-index:1;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.09em;background:#f6faf6fa;font-size:.76rem;font-weight:800;position:sticky;top:0}.table td{color:var(--text-primary);white-space:nowrap;font-size:.9rem;font-weight:650;line-height:1.45}.table tbody tr:nth-child(2n) td{background:#f8fbf8c7}.table tr:hover td{background:#1f6b4f0a}.empty-state{text-align:center;color:var(--text-muted);padding:22px;font-size:.9rem}.form-field{border-top:1px solid #dde7dccc;gap:8px;padding:14px 14px 0;display:grid}.form-control{width:100%;color:var(--text-primary);background:linear-gradient(#fffffffa,#f8fbf8fa);border:1px solid #d6e1d8f5;border-radius:18px;padding:12px 14px;font-size:.9rem;font-weight:600;transition:border-color .16s,box-shadow .16s,background .16s}.form-control:focus{background:#fbfdfb;border-color:#1f6b4f66;outline:none;box-shadow:0 0 0 4px #1f6b4f14}.settings-top,.settings-bottom,.analytics-top,.analytics-middle,.analytics-bottom,.system-overview-top,.system-overview-middle,.system-overview-bottom{gap:18px;display:grid}.system-overview-top .grid-2,.settings-top .grid-2,.analytics-bottom .grid-2{align-items:stretch}.system-overview-top .grid-2>.card,.settings-top .grid-2>.card,.analytics-bottom .grid-2>.card{height:100%}.settings-bottom .btn-row{align-items:center;min-height:48px}.records-layout,.records-card,.chart-card,.settings-layout,.content-area,.live-detection-left,.live-detection-right{min-width:0}@keyframes panelFadeIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@media (width<=1280px){:root{--sidebar-width:clamp(220px, 22vw, 272px);--shell-section-height:160px;--chart-card-height:328px;--records-card-height:448px;--settings-card-height:336px}.live-detection-layout,.content-summary,.grid-4,.grid-3{grid-template-columns:1fr 1fr}.content-header{align-items:start}}@media (width<=960px){:root{--shell-section-height:auto;--metric-card-height:120px;--compact-card-height:132px;--overview-card-height:210px;--workflow-card-height:144px;--message-card-height:140px;--chart-card-height:316px;--records-card-height:420px;--settings-card-height:auto}.live-detection-layout,.grid-2,.grid-2x2,.content-summary,.content-header{grid-template-columns:1fr}.main-content{padding-left:0;display:block}.topbar{flex-direction:column;align-items:stretch;position:static;top:auto;left:auto;right:auto}.topbar-leading{flex-direction:column;align-items:stretch;width:100%}.topbar-actions{flex-direction:column;align-items:stretch}.mobile-nav-toggle{display:inline-flex}.sidebar-backdrop{inset:var(--sidebar-top) var(--page-padding) var(--page-padding);z-index:18;border-radius:calc(var(--radius-shell) + 6px);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);cursor:pointer;background:#08140e47;border:0;display:block;position:fixed}.sidebar{left:var(--page-padding);right:auto;bottom:var(--page-padding);width:min(360px, calc(100vw - (var(--page-padding) * 2)));max-width:calc(100vw - (var(--page-padding) * 2));max-height:calc(100vh - var(--sidebar-top) - var(--page-padding));top:var(--sidebar-top);transform:translateX(calc(-100% - var(--shell-gap)));opacity:0;pointer-events:none;transition:transform .22s,opacity .22s;position:fixed}.sidebar.sidebar-open{opacity:1;pointer-events:auto;transform:translate(0)}.sidebar-mobile-header{display:flex}}@media (width<=760px){:root{--metric-card-height:112px;--compact-card-height:126px;--overview-card-height:auto;--workflow-card-height:auto;--message-card-height:auto;--chart-card-height:288px;--records-card-height:380px}.dashboard-page{padding:12px}.topbar,.content-header,.card{border-radius:24px}.topbar,.content-header{padding:18px}.grid-4,.grid-3,.btn-row,.toolbar-actions{grid-template-columns:1fr}.btn-row,.toolbar-actions{display:grid}.btn{width:100%}.table th,.table td{padding:14px}.webcam-feed,.chart-placeholder{min-height:220px}.content-title{font-size:clamp(1.56rem,7vw,1.95rem)}.sidebar{border-radius:24px;width:100%;max-width:100%}.status-row{flex-direction:column;align-items:flex-start}.report-list-row{flex-direction:column}.report-list-row strong{text-align:left}.overview-panel{padding:16px}.overview-header{margin-bottom:24px}.overview-hero{text-align:center;gap:16px}.overview-title{font-size:clamp(1.4rem,6vw,1.8rem)}.overview-subtitle{margin-bottom:16px;font-size:.95rem}.system-notice{text-align:center;flex-direction:column;gap:12px;padding:16px}.notice-icon{margin:0 auto}.overview-grid{gap:24px}.metrics-grid{grid-template-columns:1fr;gap:16px}.system-config-grid{grid-template-columns:1fr;gap:12px}.config-item{background:var(--card-bg-muted);border-radius:12px;padding:12px}.health-indicators{gap:16px}.health-indicator{text-align:center;flex-direction:column;gap:12px;padding:16px}.health-details{grid-template-columns:1fr;gap:12px}.health-detail-item{background:var(--card-bg-muted);border-radius:8px;justify-content:space-between;padding:8px 12px}.step-number{margin-bottom:8px}}@media (width<=560px){.topbar-brand{align-items:flex-start}.topbar-datetime{width:100%;min-width:0}.brand-mark{border-radius:16px;width:46px;height:46px}.content-description,.detail-copy,.workflow-copy,.rule-copy,.message-block,.status-label,.table td{font-size:.86rem}.summary-card,.message-block,.rule-copy{padding-left:14px;padding-right:14px}.webcam-feed,.chart-placeholder{min-height:200px}}.archive-panel{gap:var(--shell-gap);flex-direction:column;display:flex}.archive-stats{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;display:grid}.archive-stats .stat-card{background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--radius-inner);text-align:center;padding:20px}.archive-stats .stat-value{color:var(--primary-accent);margin-bottom:4px;font-size:2rem;font-weight:600}.archive-stats .stat-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;font-size:.9rem}.archive-controls{flex-direction:column;gap:16px;display:flex}.search-filter-group{flex-wrap:wrap;gap:16px;display:flex}.search-input{background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--radius-inner);flex:1;align-items:center;min-width:300px;padding:12px 16px;display:flex}.search-input svg{color:var(--text-muted);margin-right:12px}.search-input input{color:var(--text-primary);background:0 0;border:none;outline:none;flex:1;font-size:.95rem}.search-input input::placeholder{color:var(--text-muted)}.date-filter{background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--radius-inner);align-items:center;min-width:200px;padding:12px 16px;display:flex}.date-filter svg{color:var(--text-muted);margin-right:12px}.date-filter input{color:var(--text-primary);background:0 0;border:none;outline:none;flex:1;font-size:.95rem}.clear-date-btn{cursor:pointer;color:var(--text-muted);background:0 0;border:none;border-radius:4px;margin-left:8px;padding:4px}.clear-date-btn:hover{background:var(--card-bg-muted)}.bulk-actions{background:var(--card-bg-muted);border-radius:var(--radius-inner);border:1px solid var(--card-border);align-items:center;gap:12px;padding:12px 16px;display:flex}.bulk-restore-btn{background:var(--primary-accent);color:var(--text-on-accent);border-radius:var(--radius-button);cursor:pointer;border:none;align-items:center;gap:8px;padding:10px 16px;font-size:.9rem;font-weight:500;display:flex}.bulk-restore-btn:hover{background:var(--primary-accent-strong)}.clear-selection-btn{border:1px solid var(--card-border);border-radius:var(--radius-button);cursor:pointer;color:var(--text-secondary);background:0 0;padding:10px 16px;font-size:.9rem}.clear-selection-btn:hover{background:var(--card-bg-muted)}.archive-table-container{background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--radius-card);overflow:hidden}.archive-table{border-collapse:collapse;width:100%}.table-header{background:var(--card-bg-muted);border-bottom:1px solid var(--card-border)}.table-row{border-bottom:1px solid var(--card-border);grid-template-columns:40px 1fr 100px 80px 80px 80px 140px 80px;align-items:center;display:grid}.table-row:last-child{border-bottom:none}.table-cell{color:var(--text-primary);padding:12px 16px;font-size:.9rem}.table-cell.header-checkbox,.table-cell:first-child{justify-content:center;align-items:center;display:flex}.table-cell input[type=checkbox]{cursor:pointer;width:16px;height:16px}.table-cell.empty-state{text-align:center;color:var(--text-muted);grid-column:1/-1;padding:40px 16px;font-style:italic}.restore-btn{background:var(--primary-accent);color:var(--text-on-accent);cursor:pointer;border:none;border-radius:6px;justify-content:center;align-items:center;width:28px;height:28px;padding:6px;display:flex}.restore-btn:hover{background:var(--primary-accent-strong)}.archive-btn{background:var(--warning-accent);color:var(--text-on-accent);cursor:pointer;border:none;border-radius:6px;justify-content:center;align-items:center;width:28px;height:28px;padding:6px;display:flex}.archive-btn:hover{background:var(--warning-accent);opacity:.8}.text-green-400{color:#10b981}.text-red-400{color:#ef4444}.text-emerald-400{color:#34d399}.text-amber-400{color:#fbbf24}@media (width<=768px){.table-row{grid-template-columns:40px 1fr 80px 70px 60px 60px 120px 60px}.table-cell{padding:8px 12px;font-size:.85rem}.search-filter-group{flex-direction:column}.search-input,.date-filter{min-width:100%}}.esp32-bottle-detector{background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--radius-card);flex-direction:column;gap:20px;padding:24px;display:flex}.detector-header{align-items:center;gap:16px;margin-bottom:8px;display:flex}.detector-header h3{color:var(--text-primary);margin:0;font-size:1.25rem;font-weight:600}.detector-header p{color:var(--text-muted);margin:4px 0 0;font-size:.9rem}.detector-status{background:var(--card-bg-muted);border-radius:var(--radius-inner);border:1px solid var(--card-border);justify-content:space-between;align-items:center;padding:16px;display:flex}.status-indicator{align-items:center;gap:8px;font-weight:500;display:flex}.status-dot.active{background:#10b981;animation:2s infinite pulse}.status-dot.inactive{background:#ef4444}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.status-details{flex-wrap:wrap;gap:16px;display:flex}.status-item{color:var(--text-secondary);align-items:center;gap:6px;font-size:.85rem;display:flex}.detector-controls{flex-wrap:wrap;gap:12px;display:flex}.config-panel{background:var(--card-bg-muted);border:1px solid var(--card-border);border-radius:var(--radius-inner);padding:20px}.config-panel h4{color:var(--text-primary);margin:0 0 16px;font-size:1rem;font-weight:600}.config-field{margin-bottom:16px}.config-field label{color:var(--text-secondary);margin-bottom:8px;font-size:.9rem;font-weight:500;display:block}.config-field input[type=range]{background:var(--card-border);appearance:none;border-radius:3px;outline:none;width:100%;height:6px}.config-field input[type=range]::-webkit-slider-thumb{appearance:none;background:var(--primary-accent);cursor:pointer;border-radius:50%;width:18px;height:18px}.config-field input[type=range]::-moz-range-thumb{background:var(--primary-accent);cursor:pointer;border:none;border-radius:50%;width:18px;height:18px}.config-field input[type=number]{border:1px solid var(--card-border);background:var(--card-bg);width:100%;color:var(--text-primary);border-radius:6px;padding:8px 12px;font-size:.9rem}.config-actions{gap:12px;margin-top:20px;display:flex}.last-detection{background:var(--card-bg-muted);border:1px solid var(--card-border);border-radius:var(--radius-inner);padding:16px}.last-detection h4{color:var(--text-primary);margin:0 0 12px;font-size:1rem;font-weight:600}.detection-result{border-radius:var(--radius-inner);padding:12px}.detection-result.success{background:#dcfce7;border:1px solid #bbf7d0}.detection-result.info{background:#f0f9ff;border:1px solid #bae6fd}.detection-result.green{background:#dcfce7;border:1px solid #bbf7d0}.detection-result.red{background:#fef2f2;border:1px solid #fecaca}.detection-result.yellow{background:#fefce8;border:1px solid #fde68a}.result-header{align-items:center;gap:8px;margin-bottom:8px;font-weight:500;display:flex}.detection-result.success .result-header{color:#166534}.detection-result.info .result-header{color:#0369a1}.detection-result.green .result-header{color:#166534}.detection-result.red .result-header{color:#dc2626}.detection-result.yellow .result-header{color:#ca8a04}.result-color-indicator{align-items:center;gap:8px;margin-bottom:12px;font-weight:500;display:flex}.color-dot{border:2px solid #333;border-radius:50%;width:12px;height:12px}.color-dot.green{background:#22c55e}.color-dot.red{background:#ef4444}.color-dot.yellow{background:#eab308}.result-item.success{color:#166534}.result-item.reject{color:#dc2626}.result-details{flex-direction:column;gap:6px;display:flex}.result-item{justify-content:space-between;font-size:.85rem;display:flex}.result-item span{color:var(--text-muted)}.result-item strong{color:var(--text-primary);font-weight:500}.esp32-stream{background:var(--card-bg-muted);border:1px solid var(--card-border);border-radius:var(--radius-inner);padding:16px}.esp32-stream h4{color:var(--text-primary);margin:0 0 12px;font-size:1rem;font-weight:600}.stream-container{border-radius:var(--radius-inner);background:#000;position:relative;overflow:hidden}.stream-image{object-fit:cover;width:100%;height:auto;max-height:240px;display:block}.stream-overlay{background:#0000004d;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.detection-indicator{color:#fff;flex-direction:column;align-items:center;gap:8px;font-size:.9rem;font-weight:600;display:flex}.scanning-line{background:linear-gradient(90deg,#0000,#10b981,#0000);width:80%;height:2px;animation:2s linear infinite scan}@keyframes scan{0%{transform:translateY(-60px)}to{transform:translateY(60px)}}@media (width<=768px){.detector-status{flex-direction:column;align-items:flex-start;gap:12px}.status-details{gap:12px}.detector-controls{flex-direction:column}.detector-controls .btn{justify-content:center;width:100%}.esp32-bottle-detector{padding:16px}.detector-header{text-align:center;flex-direction:column;gap:12px}.config-panel{padding:16px}.config-field{margin-bottom:16px}.config-actions{flex-direction:column;gap:8px}.config-actions .btn{width:100%}}@media (width<=480px){.esp32-bottle-detector{padding:12px}.detector-header h3{font-size:1.1rem}.detector-header p{font-size:.9rem}.status-details{grid-template-columns:1fr}.last-detection,.detection-result{padding:12px}}.topbar-user-area{align-items:center;gap:10px;margin-left:8px;display:flex}.topbar-user-pill{background:#ffffff14;border:1px solid #ffffff24;border-radius:999px;align-items:center;gap:8px;padding:4px 12px;font-size:.8rem;display:flex}.user-role-badge{color:#064e3b;text-transform:uppercase;letter-spacing:.04em;background:#10b981;border-radius:999px;padding:2px 7px;font-size:.68rem;font-weight:700}.user-name-label{color:#f7fbf8;font-weight:600}.topbar-logout-button{color:#fca5a5;cursor:pointer;background:#ef444426;border:1px solid #ef444459;border-radius:999px;align-items:center;gap:6px;padding:6px 12px;font-size:.78rem;font-weight:600;transition:all .2s;display:flex}.topbar-logout-button:hover{color:#fff;background:#ef44444d;border-color:#ef444499;transform:translateY(-1px)}.sidebar-user-footer{border-top:1px solid #ffffff1f;flex-direction:column;gap:10px;margin-top:auto;padding:14px 10px 6px;display:flex}.sidebar-user-card{align-items:center;gap:10px;display:flex}.sidebar-user-avatar{color:#fff;background:linear-gradient(135deg,#10b981,#059669);border-radius:10px;justify-content:center;align-items:center;width:34px;height:34px;font-size:.95rem;font-weight:700;display:flex;box-shadow:0 4px 12px #10b9814d}.sidebar-user-details{flex-direction:column;gap:2px;display:flex;overflow:hidden}.sidebar-user-name{color:#f7fbf8;white-space:nowrap;text-overflow:ellipsis;font-size:.82rem;font-weight:600;overflow:hidden}.sidebar-user-badge{color:#86efac;font-size:.7rem}.sidebar-logout-button{color:#fca5a5;cursor:pointer;background:#ef44441f;border:1px solid #ef444447;border-radius:10px;justify-content:center;align-items:center;gap:8px;width:100%;padding:8px 12px;font-size:.78rem;font-weight:600;transition:all .2s;display:flex}.sidebar-logout-button:hover{color:#fff;background:#ef444440;border-color:#ef444480}:root{--login-bg:#07130c;--login-surface:#0e1c14c7;--login-surface-border:#2e755952;--login-primary:#10b981;--login-primary-dark:#059669;--login-primary-glow:#10b98159;--login-text-main:#f0fdf4;--login-text-muted:#86efac;--login-text-dim:#94a3b8;--login-card-radius:24px}.login-viewport{background-color:var(--login-bg);width:100%;min-height:100vh;font-family:var(--font-sans,"Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);color:var(--login-text-main);background-image:radial-gradient(at 0 0,#10b98126 0,#0000 50%),radial-gradient(at 100% 100%,#0596692e 0,#0000 50%),radial-gradient(#042f1fcc 0,#0000 100%);justify-content:center;align-items:center;padding:24px 16px;display:flex;position:relative;overflow:hidden}.login-ambient-grid{pointer-events:none;opacity:.6;background-image:linear-gradient(90deg,#ffffff08 1px,#0000 1px),linear-gradient(#ffffff08 1px,#0000 1px);background-size:40px 40px;position:absolute;inset:0}.login-glow-orb{filter:blur(90px);pointer-events:none;z-index:0;border-radius:50%;position:absolute}.login-glow-orb--primary{background:radial-gradient(circle,#10b98138 0%,#0000 70%);width:320px;height:320px;top:15%;left:20%}.login-glow-orb--secondary{background:radial-gradient(circle,#064e3b73 0%,#0000 70%);width:380px;height:380px;bottom:15%;right:20%}.login-card-container{z-index:10;flex-direction:column;gap:16px;width:100%;max-width:480px;animation:.5s cubic-bezier(.16,1,.3,1) forwards loginFadeIn;display:flex;position:relative}@keyframes loginFadeIn{0%{opacity:0;transform:translateY(18px)scale(.98)}to{opacity:1;transform:translateY(0)scale(1)}}.login-system-bar{-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);color:var(--login-text-dim);background:#0a181199;border:1px solid #ffffff14;border-radius:12px;justify-content:space-between;align-items:center;padding:8px 14px;font-size:.78rem;display:flex}.system-pill{align-items:center;gap:8px;display:flex}.status-dot{background:#64748b;border-radius:50%;width:8px;height:8px}.status-dot--live{background:#10b981;box-shadow:0 0 10px #10b981}.status-dot--pulse{background:#f59e0b;animation:1.4s infinite pulseDot}.status-dot--ready{background:#06b6d4}@keyframes pulseDot{0%,to{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.85)}}.system-meta-pill{color:#a7f3d0;align-items:center;gap:6px;font-weight:500;display:flex}.meta-icon{color:#10b981}.login-glass-card{-webkit-backdrop-filter:blur(28px);border:1px solid var(--login-surface-border);border-radius:var(--login-card-radius);background:#0a1811d9;padding:36px 32px;box-shadow:0 24px 60px #00000073,0 0 0 1px #ffffff0f,inset 0 1px 1px #ffffff26}.login-header{text-align:center;flex-direction:column;align-items:center;margin-bottom:24px;display:flex}.brand-badge{background:linear-gradient(135deg,#064e3b,#047857);border:1px solid #6ee7b766;border-radius:18px;justify-content:center;align-items:center;width:64px;height:64px;margin-bottom:16px;display:flex;position:relative;box-shadow:0 8px 24px #10b98159,inset 0 1px 1px #ffffff4d}.shield-icon{color:#ecfdf5}.brand-badge__accent{color:#064e3b;background:#10b981;border:2px solid #07130c;border-radius:50%;justify-content:center;align-items:center;width:22px;height:22px;display:flex;position:absolute;bottom:-4px;right:-4px;box-shadow:0 2px 6px #0006}.login-title{letter-spacing:-.02em;color:#fff;margin-bottom:6px;font-size:1.5rem;font-weight:700}.login-subtitle{color:#94a3b8;max-width:360px;font-size:.88rem;line-height:1.45}.quick-roles-wrapper{background:#064e3b40;border:1px solid #10b98133;border-radius:14px;margin-bottom:20px;padding:10px 12px}.quick-roles-label{text-transform:uppercase;letter-spacing:.05em;color:#6ee7b7;align-items:center;gap:6px;margin-bottom:8px;font-size:.74rem;font-weight:600;display:flex}.quick-role-buttons{grid-template-columns:1fr 1fr 1fr;gap:6px;display:grid}.quick-role-btn{color:#e2e8f0;cursor:pointer;text-align:center;background:#ffffff0d;border:1px solid #ffffff1a;border-radius:8px;padding:7px 4px;font-size:.76rem;font-weight:600;transition:all .2s}.quick-role-btn:hover{color:#fff;background:#10b9812e;border-color:#10b98166;transform:translateY(-1px)}.quick-role-btn.active{color:#042f1f;background:#10b981;border-color:#34d399;box-shadow:0 4px 12px #10b98159}.login-error-banner{color:#fca5a5;background:#ef44441f;border:1px solid #ef444459;border-radius:12px;align-items:center;gap:10px;margin-bottom:18px;padding:10px 14px;font-size:.83rem;animation:.35s cubic-bezier(.36,.07,.19,.97) both shakeError;display:flex}@keyframes shakeError{10%,90%{transform:translate(-1px)}20%,80%{transform:translate(2px)}30%,50%,70%{transform:translate(-3px)}40%,60%{transform:translate(3px)}}.error-icon{color:#f87171;flex-shrink:0}.login-form{flex-direction:column;gap:16px;display:flex}.input-group{flex-direction:column;gap:6px;display:flex}.input-label-row{justify-content:space-between;align-items:center;display:flex}.input-label{color:#cbd5e1;font-size:.8rem;font-weight:500}.input-field-wrap{align-items:center;display:flex;position:relative}.field-icon{color:#64748b;pointer-events:none;transition:color .2s;position:absolute;left:14px}.login-input{color:#fff;background:#0f172a99;border:1px solid #ffffff1f;border-radius:12px;outline:none;width:100%;padding:12px 14px 12px 42px;font-size:.92rem;transition:all .2s}.login-input:focus{background:#0f172ad9;border-color:#10b981;box-shadow:0 0 0 3px #10b98133}.login-input:focus~.field-icon,.login-input:focus+.field-icon{color:#10b981}.password-toggle-btn{color:#64748b;cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;padding:4px;transition:color .2s;display:flex;position:absolute;right:12px}.password-toggle-btn:hover{color:#cbd5e1}.input-hint{color:#64748b;font-size:.72rem}.form-options-row{justify-content:space-between;align-items:center;padding:2px 0;font-size:.8rem;display:flex}.remember-label{color:#94a3b8;cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:8px;display:flex}.remember-checkbox{accent-color:#10b981;cursor:pointer;width:15px;height:15px}.mode-toggle-link{color:#34d399;cursor:pointer;text-underline-offset:2px;background:0 0;border:none;padding:2px 4px;font-size:.78rem;text-decoration:underline;transition:color .2s}.mode-toggle-link:hover{color:#6ee7b7}.login-submit-btn{color:#fff;cursor:pointer;background:linear-gradient(135deg,#10b981,#059669);border:none;border-radius:12px;justify-content:center;align-items:center;gap:10px;margin-top:6px;padding:14px 20px;font-size:.95rem;font-weight:600;transition:all .2s cubic-bezier(.16,1,.3,1);display:flex;box-shadow:0 8px 24px #10b98159,inset 0 1px 1px #ffffff4d}.login-submit-btn:hover:not(:disabled){background:linear-gradient(135deg,#34d399,#059669);transform:translateY(-2px);box-shadow:0 12px 30px #10b98173,inset 0 1px 1px #fff6}.login-submit-btn:active:not(:disabled){transform:translateY(0)}.login-submit-btn:disabled{opacity:.7;cursor:not-allowed}.spinner-icon{animation:1s linear infinite spin}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.arrow-icon{transition:transform .2s}.login-submit-btn:hover .arrow-icon{transform:translate(3px)}.login-footer{text-align:center;flex-direction:column;align-items:center;gap:12px;margin-top:24px;display:flex}.credential-hints{flex-wrap:wrap;justify-content:center;gap:6px;display:flex}.hint-pill{color:#94a3b8;background:#ffffff0d;border:1px solid #ffffff14;border-radius:999px;padding:3px 10px;font-family:monospace;font-size:.72rem}.footer-copyright{color:#475569;font-size:.72rem}.student-page{--sp-green:#1f6b4f;--sp-green-deep:#14503a;--sp-green-soft:#e6f2ec;--sp-accent:#56a37f;--sp-text:#1c2a22;--sp-muted:#6b7c72;--sp-card:#fff;--sp-bg:#f2f6f3;--sp-error:#c96b63;--sp-radius:16px;background:var(--sp-bg);min-height:100vh;color:var(--sp-text);box-sizing:border-box;max-width:480px;margin:0 auto;padding:0 16px 40px;font-family:Segoe UI,system-ui,-apple-system,sans-serif}.student-header{text-align:center;padding:28px 0 20px}.student-brand{color:var(--sp-green-deep);letter-spacing:.01em;font-size:1.25rem;font-weight:700}.student-tagline{color:var(--sp-muted);margin-top:4px;font-size:.9rem}.student-card{background:var(--sp-card);border-radius:var(--sp-radius);margin-bottom:14px;padding:20px;box-shadow:0 1px 3px #14281e0f,0 6px 20px #14281e0d}.student-card--hero{background:linear-gradient(160deg, var(--sp-green) 0%, var(--sp-green-deep) 100%);color:#fff;text-align:center;padding:26px 20px}.student-greeting{opacity:.9;font-size:1rem}.student-points{justify-content:center;align-items:baseline;gap:8px;margin-top:6px;display:flex}.student-points-value{letter-spacing:-.02em;font-size:3.2rem;font-weight:800;line-height:1}.student-points-label{opacity:.85;font-size:1rem}.student-earned{background:#ffffff2e;border:1px solid #ffffff59;border-radius:999px;margin-top:14px;padding:6px 14px;font-weight:600;animation:.42s ease-out student-pop;display:inline-block}@keyframes student-pop{0%{opacity:0;transform:scale(.85)}60%{opacity:1;transform:scale(1.06)}to{transform:scale(1)}}.student-label{margin-bottom:8px;font-weight:600;display:block}.student-input{box-sizing:border-box;letter-spacing:.35em;text-align:center;border:2px solid #d8e2dc;border-radius:12px;outline:none;width:100%;margin-bottom:12px;padding:14px;font-size:1.6rem;transition:border-color .12s}.student-input:focus{border-color:var(--sp-accent)}.student-btn{box-sizing:border-box;width:100%;color:var(--sp-green-deep);cursor:pointer;background:#fff;border:2px solid #d8e2dc;border-radius:12px;padding:14px 18px;font-size:1rem;font-weight:600;transition:transform 80ms,background .12s}.student-btn:active{transform:scale(.98)}.student-btn:disabled{opacity:.55;cursor:not-allowed}.student-btn--primary{background:var(--sp-green);border-color:var(--sp-green);color:#fff}.student-btn--primary:not(:disabled):hover{background:var(--sp-green-deep)}.student-btn--ghost{color:var(--sp-muted);background:0 0;border-color:#0000;font-weight:500}.student-error{color:var(--sp-error);margin-top:10px;font-size:.9rem;font-weight:500}.student-help{color:var(--sp-muted);margin:10px 0 14px;font-size:.9rem;line-height:1.45}.student-status{color:var(--sp-green-deep);font-size:1.05rem;font-weight:700}.student-status--live{align-items:center;gap:10px;display:flex}.student-pulse{background:var(--sp-accent);border-radius:50%;width:12px;height:12px;animation:1.4s infinite student-pulse;box-shadow:0 0 #56a37f99}@keyframes student-pulse{0%{box-shadow:0 0 #56a37f99}70%{box-shadow:0 0 0 12px #56a37f00}to{box-shadow:0 0 #56a37f00}}.student-countdown{color:var(--sp-green);font-variant-numeric:tabular-nums;margin:6px 0 2px;font-size:2.6rem;font-weight:800}.student-section-title{letter-spacing:.08em;text-transform:uppercase;color:var(--sp-muted);margin-bottom:12px;font-size:.78rem;font-weight:700}.student-tiers{grid-template-columns:repeat(4,1fr);gap:8px;display:grid}.student-tiers div{background:var(--sp-green-soft);text-align:center;border-radius:10px;flex-direction:column;gap:2px;padding:10px 6px;display:flex}.student-tiers span{color:var(--sp-muted);font-size:.8rem}.student-tiers strong{color:var(--sp-green-deep)}.student-history,.student-leaderboard{margin:0;padding:0;list-style:none}.student-history li,.student-leaderboard li{border-top:1px solid #edf2ef;align-items:center;gap:10px;padding:10px 0;display:flex}.student-history li:first-child,.student-leaderboard li:first-child{border-top:0}.student-history-when{color:var(--sp-muted);margin-left:auto;font-size:.8rem}.student-history strong,.student-leaderboard strong{color:var(--sp-green);text-align:right;min-width:3ch}.student-rank{color:var(--sp-muted);min-width:2.5ch;font-weight:700}.student-lb-name{flex:1}.student-leaderboard li.is-me{background:var(--sp-green-soft);border-radius:8px;margin:0 -20px;padding-left:20px;padding-right:20px}.student-leaderboard li.is-me .student-lb-name{color:var(--sp-green-deep);font-weight:700}.student-input--text{letter-spacing:normal;text-align:left;font-size:1.05rem}.student-optional{color:var(--sp-muted);font-weight:400}.student-points-sub{opacity:.8;margin-top:6px;font-size:.85rem}.student-choice{grid-template-columns:1fr 1fr;gap:10px;display:grid}.student-choice .student-btn{flex-direction:column;gap:2px;padding:14px 10px;display:flex}.student-choice .student-btn span{opacity:.85;font-size:.8rem;font-weight:500}.student-tiers{grid-template-columns:repeat(3,1fr)}.student-tier-btn{background:var(--sp-green-soft);text-align:center;cursor:pointer;font:inherit;color:var(--sp-green-deep);border:2px solid #0000;border-radius:10px;flex-direction:column;gap:2px;padding:12px 6px;display:flex}.student-tier-btn span{color:var(--sp-muted);font-size:.8rem}.student-tier-btn strong{color:var(--sp-green-deep)}.student-tier-btn:not(:disabled):hover{border-color:var(--sp-accent)}.student-tier-btn:disabled{opacity:.45;cursor:not-allowed}.student-row{grid-template-columns:1fr 1fr;gap:10px;display:grid}.student-row--phone{grid-template-columns:1fr auto;align-items:start}.student-row--phone .student-btn{white-space:nowrap;width:auto;padding:14px 12px}.student-inline-error{color:var(--sp-error);font-weight:600}:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;color:#17221b;background:#fff;font-family:Roboto,Segoe UI,Trebuchet MS,sans-serif}*{box-sizing:border-box}html,body,#root{min-height:100%}html{background:#fff}body{background:#fff;min-height:100vh;margin:0}body,button,input,select,table{font:inherit}button,input,select{color:inherit}.icon-badge{--icon-badge-bg:linear-gradient(180deg, #ebf3ed, #dce7df);--icon-badge-border:#1634241a;--icon-badge-color:#1f6b4f;border:1px solid var(--icon-badge-border);background:var(--icon-badge-bg);width:2.5rem;height:2.5rem;color:var(--icon-badge-color);border-radius:.95rem;flex-shrink:0;justify-content:center;align-items:center;display:inline-flex;box-shadow:inset 0 1px #ffffffbf,0 10px 24px #101a1414}.icon-badge svg{display:block}.icon-badge--xs{border-radius:.75rem;width:1.75rem;height:1.75rem}.icon-badge--sm{border-radius:.85rem;width:2rem;height:2rem}.icon-badge--lg{border-radius:1.05rem;width:2.875rem;height:2.875rem}.icon-badge--green{--icon-badge-bg:linear-gradient(180deg, #edf7f0, #dcefe1);--icon-badge-border:#1f6b4f29;--icon-badge-color:#1f6b4f}.icon-badge--blue{--icon-badge-bg:linear-gradient(180deg, #eef6fb, #dcecf7);--icon-badge-border:#2271b029;--icon-badge-color:#216ea2}.icon-badge--amber{--icon-badge-bg:linear-gradient(180deg, #fcf5e9, #f5e8cb);--icon-badge-border:#b0781f29;--icon-badge-color:#9b6818}.icon-badge--slate{--icon-badge-bg:linear-gradient(180deg, #f2f5f4, #e4eae7);--icon-badge-border:#3e584b24;--icon-badge-color:#365040}.icon-badge--red{--icon-badge-bg:linear-gradient(180deg, #fdf0ef, #f7e3e1);--icon-badge-border:#bf4e4329;--icon-badge-color:#b0493e}