:root{--bg: #f5f8fd;--panel: #ffffff;--line: #e4eaf3;--text: #0d1832;--muted: #647087;--blue: #1769ff;--blue-soft: #eaf1ff;--green: #16a34a;--green-soft: #e9f8ef;--purple: #7c3aed;--purple-soft: #f0eaff;--orange: #f97316;--orange-soft: #fff0e6;--red: #ef4444;--red-soft: #ffebeb;--shadow: 0 18px 55px rgba(20, 31, 56, .08);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text)}button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.62}.app{min-height:100vh;display:grid;grid-template-columns:276px 1fr}.sidebar{min-height:100vh;background:linear-gradient(180deg,#08203f,#061a33);color:#fff;padding:28px 18px;position:sticky;top:0;display:flex;flex-direction:column;gap:24px}.brand,.phone-brand{display:flex;align-items:center;gap:13px}.brand-mark{width:42px;height:42px;border-radius:10px;display:grid;place-items:center;color:#fff;font-weight:900;background:linear-gradient(135deg,#4c8dff,#075bff);box-shadow:0 12px 30px #1769ff47}.brand strong{font-size:21px;letter-spacing:0}.sidebar nav{display:grid;gap:8px}.sidebar nav button,.logout{height:54px;border:0;border-radius:8px;background:transparent;color:#ffffffe0;display:flex;align-items:center;gap:14px;padding:0 14px;font-weight:650}.sidebar nav button.active{background:linear-gradient(135deg,#4d81ff,#2463f4);color:#fff;box-shadow:0 12px 26px #1f63f452}.sidebar-note{margin-top:auto;padding:22px;border-radius:8px;background:#ffffff14;text-align:center}.sidebar-note p{color:#ffffffc7;line-height:1.55;margin-bottom:0}.medal{width:66px;height:66px;margin:0 auto 16px;border-radius:50%;display:grid;place-items:center;color:#ffd64d;background:linear-gradient(135deg,#4c8dff,#294fb4)}.logout{margin-top:0}.mobile-demo-logout{display:none}.main-shell{min-width:0}.topbar{height:112px;padding:25px 32px;display:grid;grid-template-columns:minmax(250px,1fr) minmax(260px,470px) auto;gap:26px;align-items:center;background:#ffffffdb;border-bottom:1px solid var(--line);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);position:sticky;top:0;z-index:10}h1,h2,p{margin-top:0}.topbar h1,.section-header h1{margin-bottom:6px;font-size:28px;line-height:1.1}.topbar p,.section-header p{color:var(--muted);margin-bottom:0}.search{height:50px;border:1px solid var(--line);border-radius:8px;display:flex;align-items:center;gap:12px;padding:0 16px;background:var(--panel)}.search input{width:100%;border:0;outline:0;color:var(--text)}.top-actions{display:flex;align-items:center;gap:12px}.user-switcher{min-width:230px;display:grid;gap:4px;color:var(--muted);font-size:12px;font-weight:800}.user-switcher select{height:38px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--text);padding:0 10px;outline:none;font-weight:700}.icon-btn,.ghost-icon{width:44px;height:44px;border:1px solid var(--line);border-radius:50%;background:var(--panel);color:var(--text);display:grid;place-items:center;position:relative}.icon-btn span{position:absolute;top:-5px;right:-1px;min-width:18px;height:18px;border-radius:10px;background:var(--blue);color:#fff;font-size:11px;line-height:18px}.avatar{width:42px;height:42px;border-radius:50%;display:inline-grid;place-items:center;flex:0 0 auto;color:#183057;background:linear-gradient(135deg,#f7d2be,#eaf1ff);font-weight:800;border:2px solid #ffffff;box-shadow:0 8px 18px #141f381a}.admin-name{display:grid;gap:2px}.admin-name small,td small,.mini-row small,.roster-panel small{display:block;color:var(--muted)}.content{padding:28px 32px 38px}.stats-grid{display:grid;grid-template-columns:repeat(4,minmax(170px,1fr));gap:18px;margin-bottom:18px}.stat-card,.panel,.phone-preview{background:var(--panel);border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow)}.stat-card{min-height:148px;padding:24px;display:flex;align-items:center;gap:20px}.stat-card p{color:var(--muted);margin-bottom:8px}.stat-card strong{display:block;font-size:30px;line-height:1.1;margin-bottom:10px}.stat-card small{font-weight:750}.stat-icon{width:64px;height:64px;border-radius:50%;display:grid;place-items:center}.blue,.stat-icon.blue{color:var(--blue)}.stat-icon.blue{background:var(--blue-soft)}.green,.stat-icon.green{color:var(--green)}.stat-icon.green{background:var(--green-soft)}.purple,.stat-icon.purple{color:var(--purple)}.stat-icon.purple{background:var(--purple-soft)}.orange,.stat-icon.orange{color:var(--orange)}.stat-icon.orange{background:var(--orange-soft)}.dashboard-grid{display:grid;grid-template-columns:1.3fr .9fr .85fr;gap:18px;align-items:start}.panel{overflow:hidden}.employee-chart,.department-panel,.small-panel,.table-panel,.roster-panel,.split-panel{padding:20px}.panel-title,.mini-title,.section-header,.toolbar,.button-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.panel-title h2,.mini-title h2{font-size:18px;margin-bottom:0}.small-btn,.primary-small,.danger-small{height:38px;border-radius:6px;display:inline-flex;align-items:center;gap:8px;padding:0 14px;border:1px solid var(--line);background:#fff;color:var(--text);font-weight:700}.primary-small{border-color:var(--blue);background:var(--blue);color:#fff}.danger-small{border-color:#fecaca;background:var(--red-soft);color:var(--red)}.ghost-icon{width:34px;height:34px;border:0}.line-chart{width:100%;height:255px;margin-top:22px}.line-chart line{stroke:#d9e1ed;stroke-dasharray:3 3}.area{fill:#1769ff14}.line{fill:none;stroke:var(--blue);stroke-width:1.2;vector-effect:non-scaling-stroke}.chart-labels{display:flex;justify-content:space-between;color:var(--muted);font-size:14px}.donut-wrap{display:grid;grid-template-columns:190px 1fr;gap:28px;align-items:center;min-height:260px}.donut{width:178px;height:178px;border-radius:50%;background:conic-gradient(#316bff 0,#316bff 40%,#22a95a 40%,#22a95a 58%,#ffb020 58%,#ffb020 74%,#ff5630 74%,#ff5630 84%,#d65db1 84%,#d65db1 92%,#a6b0c1 92%,#a6b0c1);position:relative}.donut:after{content:"";position:absolute;top:40px;right:40px;bottom:40px;left:40px;border-radius:50%;background:#fff}.legend{list-style:none;padding:0;margin:0;display:grid;gap:16px}.legend li{display:flex;align-items:center;gap:10px;color:var(--text)}.dot{width:9px;height:9px;border-radius:50%;background:#316bff}.d1{background:#22a95a}.d2{background:#ffb020}.d3{background:#ff5630}.d4{background:#d65db1}.d5{background:#a6b0c1}.total-row{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:18px}.side-stack{display:grid;gap:18px}.role-dashboard-panel,.today-actions-panel{margin-top:18px;padding:20px}.role-control-grid{display:grid;grid-template-columns:repeat(3,minmax(180px,1fr));gap:14px;margin-top:16px}.role-control-grid div{border:1px solid var(--line);border-radius:8px;background:#fbfcff;padding:15px}.role-control-grid p{color:var(--muted);line-height:1.45;margin:6px 0 0}.today-action-grid{display:grid;grid-template-columns:repeat(3,minmax(180px,1fr));gap:12px;margin-top:16px}.today-action-card,.today-action-empty{min-height:92px;border:1px solid var(--line);border-radius:8px;background:#fbfcff;padding:14px}.today-action-card{display:grid;gap:8px;align-content:start}.today-action-card p,.approval-item p{margin:0;color:var(--muted);line-height:1.45}.today-action-empty{grid-column:1 / -1;color:var(--green);display:flex;align-items:center;gap:10px;font-weight:800}.approval-center-grid{display:grid;grid-template-columns:repeat(2,minmax(360px,1fr));gap:18px}.approval-queue-panel{padding:20px}.approval-list{display:grid;gap:12px;margin-top:16px}.approval-item{border:1px solid var(--line);border-radius:8px;background:#fbfcff;padding:14px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px}.mini-title button{border:0;background:transparent;color:var(--blue);font-weight:700}.mini-row{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:14px 0;border-top:1px solid var(--line)}.green-text{color:var(--green)}.red-text{color:var(--red)}.announce{display:flex;gap:15px;padding:16px 0;border-top:1px solid var(--line)}.announce svg{width:54px;height:54px;padding:14px;border-radius:8px;color:var(--blue);background:var(--blue-soft);flex:0 0 auto}.announce.green svg{color:var(--green);background:var(--green-soft)}.announce p{color:var(--muted);line-height:1.45;margin:5px 0 0}.table-panel{margin-top:18px}table{width:100%;border-collapse:collapse;margin-top:16px}th,td{padding:15px 12px;text-align:left;border-top:1px solid var(--line);color:#3c4860}th{font-size:13px;color:var(--muted);background:#fbfcff}.person-cell{display:flex;align-items:center;gap:12px;color:var(--text);font-weight:700}.employee-settings-grid{display:grid;grid-template-columns:420px 1fr;gap:18px;align-items:start}.settings-list,.settings-form{padding:20px}.staff-list{display:grid;gap:10px;margin-top:18px}.staff-list-item{width:100%;min-height:74px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--text);display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:12px;text-align:left}.staff-list-item.active{border-color:#9bbcff;background:#f5f8ff;box-shadow:0 10px 28px #1769ff1a}.staff-list-item small{display:block;color:var(--muted);margin-top:4px}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(180px,1fr));gap:14px;margin-top:18px}.form-grid label,.staff-phone-select{display:grid;gap:8px;color:var(--muted);font-size:13px;font-weight:800}.form-grid input,.form-grid select,.form-grid textarea,.staff-phone-select select{width:100%;min-height:44px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--text);padding:0 12px;outline:none}.form-grid textarea{min-height:96px;padding:12px;resize:vertical;line-height:1.45}.wide-field{grid-column:1 / -1}.setup-note{margin-top:18px;border:1px solid #bdd4ff;border-radius:8px;background:#edf4ff;color:#1250c6;padding:15px;display:flex;gap:12px}.setup-note p{margin:5px 0 0;color:#375a96;line-height:1.5}.access-preview-grid{display:grid;grid-template-columns:repeat(3,minmax(170px,1fr));gap:12px;margin-top:18px}.access-preview-grid div{border:1px solid var(--line);border-radius:8px;background:#fbfcff;padding:14px}.access-preview-grid p{margin:6px 0 0;color:var(--muted);line-height:1.45}.outlet-settings{padding:20px}.shift-settings-grid{display:grid;grid-template-columns:repeat(2,minmax(260px,1fr));gap:16px;margin-top:18px}.shift-setting-card{border:1px solid var(--line);border-radius:8px;background:#fbfcff;padding:16px}.pill{min-width:38px;min-height:26px;padding:5px 10px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;color:var(--blue);background:var(--blue-soft);font-size:13px;font-weight:800;white-space:nowrap}.pill.green{color:var(--green);background:var(--green-soft)}.pill.purple{color:var(--purple);background:var(--purple-soft)}.pill.orange{color:var(--orange);background:var(--orange-soft)}.pill.gray{color:#647087;background:#eef2f7}.section-header{margin-bottom:22px}.mobile-and-table{display:grid;grid-template-columns:410px 1fr;gap:20px;align-items:start}.phone-preview{padding:20px}.phone-top,.time-card,.verification-list p{display:flex;align-items:center;justify-content:space-between}.phone-top{font-weight:800;margin-bottom:18px}.phone-brand{justify-content:center;margin-bottom:24px}.phone-brand strong{font-size:21px}.phone-preview h2{font-size:27px}.staff-phone-select{margin-bottom:14px}.staff-card,.time-card,.verification-list{border:1px solid var(--line);border-radius:8px;padding:16px;margin-bottom:14px;background:#fff}.staff-card{display:flex;align-items:center;gap:18px}.staff-card .avatar,.camera-box .face-circle{width:86px;height:86px;font-size:24px}.staff-card p{color:var(--muted);margin:5px 0 0}.compact-staff-card{display:grid;grid-template-columns:auto 1fr auto}.time-card{gap:12px}.compact-time-card span{display:inline-flex;align-items:center;gap:10px}.time-card strong{color:var(--blue);font-size:20px}.quick-attendance-card{border:1px solid var(--line);border-radius:8px;background:#fff;padding:14px;margin-bottom:14px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.quick-attendance-card div{min-width:0}.quick-attendance-card small{display:block;color:var(--muted);font-size:12px;font-weight:800;margin-bottom:5px}.quick-attendance-card strong{display:block;color:var(--green);line-height:1.25}.staff-bottom-tabs{display:none}.staff-tab-panel{display:grid;gap:12px}.staff-tab-panel h2{margin-bottom:4px;font-size:22px}.staff-tab-row,.staff-empty-box{border:1px solid var(--line);border-radius:8px;background:#fff;padding:14px}.staff-tab-row{min-height:66px;display:flex;align-items:center;justify-content:space-between;gap:12px}.staff-tab-row small{display:block;color:var(--muted);margin-top:4px;line-height:1.35}.staff-empty-box{color:var(--muted);font-weight:750}.camera-box{height:280px;border-radius:8px;background:linear-gradient(#09152733,#09152740),radial-gradient(circle at 50% 45%,#e9f1ff 0,#e9f1ff 18%,#a7b2c6 19%,#a7b2c6 25%,#1f2937 26%,#1f2937);margin-bottom:14px;position:relative;display:grid;place-items:center;color:#fff;overflow:hidden}.face-status{position:absolute;left:18px;top:18px;padding:9px 13px;border-radius:8px;background:#081324c7;font-weight:800;z-index:2}.face-status.danger{background:#7f1d1ddb}.face-circle{border:3px solid #dcecff;border-radius:50%;display:grid;place-items:center;background:#fff3;z-index:1}.live-camera video{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover}.camera-box small{position:absolute;bottom:18px;padding:9px 16px;border-radius:999px;background:#081324c7;z-index:2}.verification-list p{margin-bottom:0;padding:12px 0;border-bottom:1px solid var(--line);gap:12px}.verification-list p:last-child{border-bottom:0}.verification-list svg{color:var(--blue)}.verification-list strong{margin-left:auto;color:var(--green)}.primary-wide,.secondary-wide{width:100%;height:56px;border-radius:8px;font-size:18px;font-weight:850;margin-top:12px}.primary-wide{border:0;color:#fff;background:var(--blue)}.secondary-wide{border:1px solid var(--blue);color:var(--blue);background:#fff}.primary-wide,.secondary-wide{display:flex;align-items:center;justify-content:center;gap:10px}.flow-hint{min-height:48px;border:1px solid #bdd4ff;border-radius:8px;background:#edf4ff;color:#1250c6;padding:12px 14px;display:flex;align-items:center;gap:10px;font-weight:750;line-height:1.35}.flow-hint.green{border-color:#bde7ca;background:#effaf3;color:#087231}.flow-hint.orange{border-color:#ffd3a8;background:#fff8f1;color:#9a4d00}.subtle-flow{margin-top:12px;background:#f7faff}.missing-punch-card{margin-top:14px;border:1px solid #ffd3a8;border-radius:8px;background:#fff8f1;padding:16px;display:grid;gap:12px}.missing-punch-card label{display:grid;gap:7px;color:#7c4a03;font-size:13px;font-weight:800}.missing-punch-card input,.missing-punch-card textarea{width:100%;border:1px solid #ffd3a8;border-radius:8px;background:#fff;color:var(--text);padding:10px 12px;outline:none;resize:vertical}.attendance-note{margin-top:12px;font-size:14px}.today-attendance{margin-top:14px;border:1px solid var(--line);border-radius:8px;background:#fff;padding:16px}.today-attendance div{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px}.today-attendance button{border:0;background:transparent;color:var(--blue);font-weight:750}.today-attendance p{color:var(--muted);margin:8px 0 0}.today-attendance strong{color:var(--text)}.toolbar{justify-content:flex-start;flex-wrap:wrap}.toolbar-select{min-height:38px;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--text);padding:0 12px;font-weight:750}.roster-panel td,.roster-panel th{text-align:center}.roster-panel td:first-child,.roster-panel th:first-child{text-align:left}.roster-cell{width:48px;height:34px;border:1px solid #b8d0ff;border-radius:6px;color:var(--blue);background:var(--blue-soft);font-weight:850}.roster-cell.a{color:var(--green);border-color:#bde7ca;background:var(--green-soft)}.roster-cell.b{color:var(--blue);border-color:#b8d0ff;background:var(--blue-soft)}.roster-cell.off{color:#647087;border-color:#d8dee8;background:#eef2f7}.daily-summary-row td{background:#fbfcff}.roster-preview-grid{display:grid;grid-template-columns:420px 1fr;gap:18px;align-items:start;margin-top:18px}.staff-roster-preview{padding:20px}.mobile-roster-day{min-height:58px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:12px}.mobile-roster-day small{display:block;color:var(--muted);margin-top:4px}.notice{margin-top:16px;border:1px solid #bdd4ff;background:#edf4ff;color:#1250c6;padding:14px 16px;border-radius:8px;display:flex;align-items:center;gap:10px;font-weight:650}.azure-config{margin-top:22px;border-top:1px solid var(--line);padding-top:18px}.attendance-records{margin-top:20px;border-top:1px solid var(--line);padding-top:18px}.attendance-records h2{font-size:18px}.attendance-records p{color:var(--muted);line-height:1.5}.azure-config h2{font-size:18px}.azure-config p{color:var(--muted);line-height:1.55}.azure-config code{display:inline-flex;margin:0 8px 8px 0;padding:7px 9px;border-radius:6px;background:#f3f6fb;color:#253149;font-size:13px}.split-panel{display:grid;grid-template-columns:1fr 390px;gap:22px}.approval-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;padding:16px 0;border-top:1px solid var(--line)}.detail-card{border:1px solid var(--line);border-radius:8px;padding:22px;background:#fbfcff}.detail-card .avatar{width:72px;height:72px;margin-bottom:12px}.detail-card p,.empty-state p{color:var(--muted);line-height:1.55}.leave-flow-grid{display:grid;grid-template-columns:minmax(360px,.9fr) minmax(480px,1.1fr);gap:18px;align-items:start}.leave-apply-panel,.leave-approval-panel{padding:20px}.leave-request-list{display:grid;gap:10px;margin-top:18px;max-height:285px;overflow:auto;padding-right:4px}.leave-request-row{min-height:66px;border:1px solid var(--line);border-radius:8px;background:#fbfcff;display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px;padding:12px 14px}.leave-request-row small{display:block;color:var(--muted);margin-top:5px}.leave-detail-card{margin-top:16px}.leave-detail-card label{display:grid;gap:8px;color:var(--muted);font-size:13px;font-weight:800;margin:16px 0}.leave-detail-card textarea{width:100%;min-height:92px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--text);padding:12px;outline:none;resize:vertical}.staff-leave-content{display:grid;gap:14px}.staff-leave-hero{border:1px solid var(--line);border-radius:16px;background:linear-gradient(135deg,#f7fbff,#fff);box-shadow:var(--shadow);padding:16px;display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.staff-leave-hero p,.staff-leave-hero span{margin:0;color:var(--muted);font-weight:800}.staff-leave-hero h1{margin:3px 0 6px;font-size:26px}.staff-leave-form,.staff-leave-status{border-radius:16px;padding:16px}.staff-form-grid{grid-template-columns:1fr;gap:12px}.staff-leave-list{display:grid;gap:10px;margin-top:12px}.staff-leave-mini-form{display:grid;gap:11px;margin-bottom:18px}.staff-leave-mini-form label{display:grid;gap:7px;color:var(--muted);font-size:13px;font-weight:850}.staff-leave-mini-form input,.staff-leave-mini-form select,.staff-leave-mini-form textarea{width:100%;min-height:46px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--text);padding:0 12px;outline:none}.staff-leave-mini-form textarea{min-height:92px;padding:12px;resize:vertical}.staff-status-heading{margin-top:18px}.action-cell{white-space:nowrap}.action-cell button{height:32px;border:1px solid #b8d0ff;background:#f7fbff;color:var(--blue);border-radius:6px;margin-right:7px;font-weight:750}.action-cell button:last-child{color:var(--red);border-color:#fecaca;background:#fff8f8}.empty-state{min-height:430px;display:grid;place-items:center;align-content:center;text-align:center;padding:40px}.empty-state svg{color:var(--blue)}.inline-empty{box-shadow:none;padding:28px;text-align:center}@media(max-width:1180px){.app{grid-template-columns:92px 1fr}.brand strong,.sidebar nav span,.sidebar-note,.logout{display:none}.sidebar{padding:24px 14px;align-items:center}.sidebar nav button{width:54px;justify-content:center;padding:0}.dashboard-grid{grid-template-columns:1fr 1fr}.side-stack{grid-column:1 / -1;grid-template-columns:repeat(3,1fr)}}@media(max-width:980px){.app{display:block}.sidebar{min-height:auto;position:static;flex-direction:row;overflow-x:auto;align-items:center}.brand{flex:0 0 auto}.sidebar nav{display:flex}.topbar{position:static;height:auto;grid-template-columns:1fr}.top-actions{flex-wrap:wrap}.user-switcher{min-width:min(100%,320px)}.stats-grid,.dashboard-grid,.mobile-and-table,.split-panel,.employee-settings-grid,.shift-settings-grid,.roster-preview-grid,.leave-flow-grid,.side-stack,.role-control-grid,.today-action-grid,.approval-center-grid,.access-preview-grid{grid-template-columns:1fr}table{min-width:760px}.table-panel,.roster-panel,.panel{overflow-x:auto}}@media(max-width:620px){.content,.topbar{padding-left:18px;padding-right:18px}.staff-app .sidebar{display:none}.staff-app .topbar{padding:10px 14px;gap:8px;border-bottom:0}.staff-app .topbar h1{font-size:18px;margin-bottom:2px}.staff-app .topbar p{font-size:12px}.staff-app .search,.staff-app .icon-btn,.staff-app .admin-name,.staff-app .top-actions .avatar,.staff-app .top-actions>svg{display:none}.staff-app .top-actions{gap:8px;align-items:center}.staff-app .user-switcher{flex:1;min-width:0}.staff-app .user-switcher span{display:none}.staff-app .user-switcher select{height:34px;font-size:13px}.staff-app .mobile-demo-logout{min-height:34px;border:1px solid #fecaca;border-radius:8px;background:#fff8f8;color:var(--red);display:inline-flex;align-items:center;gap:6px;padding:0 10px;font-size:12px;font-weight:900}.staff-app .content{padding-top:10px;padding-bottom:86px}.staff-app .section-header{display:none}.stats-grid{grid-template-columns:1fr}.section-header{align-items:flex-start;flex-direction:column}.donut-wrap{grid-template-columns:1fr;justify-items:center}.phone-preview{padding:14px}.staff-bottom-tabs{position:fixed;left:12px;right:12px;bottom:12px;z-index:30;min-height:62px;border:1px solid var(--line);border-radius:18px;background:#fffffff5;box-shadow:0 18px 45px #141f382e;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:7px}.staff-bottom-tabs button{border:0;border-radius:14px;background:transparent;color:var(--muted);display:grid;place-items:center;gap:3px;font-size:11px;font-weight:850}.staff-bottom-tabs button.active{color:var(--blue);background:var(--blue-soft)}.staff-tab-panel{min-height:520px}.staff-tab-panel h2{font-size:20px}.phone-top,.phone-brand,.phone-preview>h2,.staff-phone-select{display:none}.compact-staff-card,.compact-time-card,.quick-attendance-card{margin-bottom:10px}.compact-staff-card{grid-template-columns:auto 1fr auto;gap:12px;padding:12px}.compact-staff-card .pill{grid-column:auto;justify-self:end}.staff-card .avatar,.camera-box .face-circle{width:56px;height:56px;font-size:17px}.compact-time-card{padding:12px}.compact-time-card strong{font-size:18px}.quick-attendance-card{grid-template-columns:repeat(3,minmax(0,1fr));padding:12px}.quick-attendance-card strong{font-size:13px;overflow-wrap:anywhere}.camera-box{height:210px;margin-top:12px}.camera-box small{display:none}.verification-list{display:grid;gap:0;padding:10px 12px}.verification-list p{padding:9px 0;font-size:14px}.flow-hint{font-size:14px;min-height:auto;padding:10px 12px}.camera-start-btn{height:46px;font-size:15px}.primary-wide,.secondary-wide{height:52px;font-size:17px}.form-grid{grid-template-columns:1fr}.button-row{flex-wrap:wrap;justify-content:flex-start}}