:root{--blue:#0b57d0;--navy:#062e63;--bg:#f3f6fb;--card:#fff;--text:#14213d;--muted:#718096;--line:#e6ebf2;--green:#16a34a;--red:#dc3545;--orange:#f59e0b;--shadow:0 10px 30px rgba(15,35,70,.08)}*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,"Noto Sans Thai",sans-serif;background:var(--bg);color:var(--text)}a{text-decoration:none;color:inherit}.mobile-shell{max-width:520px;margin:auto;min-height:100vh;padding-bottom:78px}.mobile-top{background:linear-gradient(135deg,var(--navy),var(--blue));color:#fff;padding:24px 18px 32px;display:flex;justify-content:space-between;align-items:center}.mobile-top h2{margin:3px 0}.avatar{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--blue);font-weight:900}.mobile-content{padding:0 15px 24px;margin-top:-14px}.hero,.card,.map-card,.profile-card,.panel{background:#fff;border-radius:19px;box-shadow:var(--shadow);margin-bottom:14px}.hero{padding:20px;background:linear-gradient(135deg,#0b57d0,#4c8df5);color:#fff;display:flex;justify-content:space-between}.hero h1{margin:8px 0 3px;font-size:22px}.hero p{margin:0;opacity:.85}.badge,.chip,.status{display:inline-flex;padding:5px 9px;border-radius:999px;font-size:11px;font-weight:800}.badge{background:rgba(255,255,255,.18)}.date-box{text-align:right;font-size:20px;font-weight:900}.date-box small{display:block;font-size:12px}.card{padding:17px}.section-head,.panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.section-head h3,.panel-head h3,.card h3{margin:0}.section-head a,.panel-head a{color:var(--blue)}.time-cards,.metrics{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:13px}.time-cards>div,.metrics>div{padding:13px;background:#f7f9fc;border:1px solid var(--line);border-radius:13px}.time-cards small,.metrics small{display:block;color:var(--muted)}.time-cards b{font-size:28px}.quick-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:11px;margin-bottom:14px}.quick-grid a{background:#fff;border-radius:17px;padding:15px;box-shadow:var(--shadow);display:flex;flex-direction:column}.quick-grid span{font-size:24px}.quick-grid small,.list-row small,.request-row small{color:var(--muted);display:block}.btn{border:0;border-radius:12px;padding:12px 15px;font-weight:800;cursor:pointer;display:inline-flex;justify-content:center;align-items:center}.btn.primary{background:var(--blue);color:#fff}.btn.secondary{background:#eaf1ff;color:var(--blue)}.btn.success{background:var(--green);color:#fff}.btn.danger{background:var(--red);color:#fff}.full{width:100%}.large{padding:16px}.alert{padding:13px;border-radius:13px;margin:12px 0}.alert.info{background:#dbeafe;color:#1e40af}.alert.success{background:#dcfce7;color:#166534}.alert.danger{background:#fee2e2;color:#991b1b}.status.ok{background:#dcfce7;color:#166534}.status.warn{background:#fff3cd;color:#9a6700}.status.bad{background:#fee2e2;color:#991b1b}.status.info{background:#dbeafe;color:#1d4ed8}.list-row,.request-row{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}.list-row:last-child,.request-row:last-child{border:0}.page-title{height:54px;display:flex;justify-content:space-between;align-items:center}.page-title h2{font-size:19px}.page-title a{font-size:31px}.map-card{overflow:hidden}.map-placeholder{height:190px;background:linear-gradient(135deg,#dbeafe,#dcfce7);display:grid;place-items:center;position:relative}.gps-pulse{width:35px;height:35px;background:#2563eb;border:9px solid rgba(37,99,235,.25);border-radius:50%;box-shadow:0 0 0 20px rgba(37,99,235,.1)}.map-placeholder span{position:absolute;bottom:15px;background:#fff;padding:7px 10px;border-radius:999px}.map-detail{padding:17px}.metrics{grid-template-columns:repeat(3,1fr);margin:12px 0 0}.metrics b{font-size:13px}.camera-box{height:350px;background:#101828;border-radius:15px;overflow:hidden;position:relative;margin-top:12px}.camera-box video,.camera-box img{width:100%;height:100%;object-fit:cover}.camera-box button{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);width:65px;height:65px;border-radius:50%;border:7px solid rgba(255,255,255,.7);font-size:24px}.form-stack{display:flex;flex-direction:column;gap:13px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.span2{grid-column:span 2}label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:700}input,select,textarea{width:100%;border:1px solid var(--line);border-radius:11px;padding:12px;background:#fff;font:inherit;color:var(--text)}textarea{min-height:80px}.leave-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.leave-grid input{display:none}.leave-grid label{padding:11px 4px;border:1px solid var(--line);border-radius:13px;text-align:center;align-items:center}.leave-grid label:has(input:checked){border-color:var(--blue);background:#eff6ff;color:var(--blue)}.leave-grid span{font-size:23px}.success-page{text-align:center;background:#fff;border-radius:18px;padding:38px 20px}.success-page>div{margin:auto;width:80px;height:80px;background:var(--green);color:#fff;border-radius:50%;display:grid;place-items:center;font-size:48px}.profile-card{text-align:center;padding:24px}.profile-avatar{width:82px;height:82px;margin:auto;border-radius:50%;background:#dbeafe;color:var(--blue);display:grid;place-items:center;font-size:32px;font-weight:900}.menu-list a{display:flex;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--line)}.menu-list a:last-child{border:0}.module-hero{text-align:center;padding:32px 20px}.module-icon{font-size:42px}.feature-list div{padding:9px 0}.empty{text-align:center;padding:25px;color:var(--muted)}.bottom-nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:min(520px,100%);height:70px;background:#fff;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(5,1fr);z-index:9}.bottom-nav a{display:flex;align-items:center;justify-content:center;flex-direction:column;font-size:20px;color:#718096}.bottom-nav small{font-size:10px}.bottom-nav a.active{color:var(--blue);font-weight:800}.auth-body{min-height:100vh;display:grid;place-items:center;padding:20px;background:linear-gradient(135deg,#dbeafe,#f8fafc)}.auth-card{width:min(420px,100%);background:#fff;padding:28px;border-radius:24px;box-shadow:var(--shadow);text-align:center}.logo-box{width:75px;height:60px;background:linear-gradient(135deg,var(--navy),var(--blue));color:#fff;border-radius:15px;display:grid;place-items:center;font-size:25px;font-weight:900;margin:auto}.auth-card p{color:var(--muted)}.link{display:block;color:var(--blue);margin-top:15px}.demo,.info-box{background:#f7f9fc;padding:13px;border-radius:12px;margin-top:16px;text-align:left}
/* admin */.admin-shell{display:flex;min-height:100vh}.sidebar{width:270px;background:linear-gradient(180deg,#052957,#061f41);color:#fff;padding:20px 14px;position:fixed;top:0;bottom:0;overflow:auto}.brand{padding:5px 10px 20px;display:flex;align-items:baseline;gap:8px}.brand b{font-size:29px}.brand span{font-weight:800}.brand small{opacity:.5}.user-mini{display:flex;gap:10px;align-items:center;background:rgba(255,255,255,.08);padding:11px;border-radius:13px;margin-bottom:15px}.user-mini small{display:block;opacity:.7}.sidebar nav{display:flex;flex-direction:column;gap:3px}.sidebar nav a{padding:10px 11px;border-radius:10px;display:flex;align-items:center;gap:9px;color:#d7e6fb;font-size:14px}.sidebar nav a:hover,.sidebar nav a.active{background:#1261c9;color:#fff}.nav-icon{width:22px;text-align:center}.admin-main{margin-left:270px;width:calc(100% - 270px)}.admin-top{height:85px;background:#fff;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;padding:0 26px}.admin-top h1{margin:0;font-size:24px}.admin-top p{margin:3px 0;color:var(--muted)}.chip{background:#eaf1ff;color:var(--blue)}.admin-content{padding:23px}.stat-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:13px;margin-bottom:18px}.stat-card{background:#fff;padding:17px;border-radius:15px;box-shadow:var(--shadow);display:flex;gap:12px;align-items:center}.stat-card>span{font-size:26px}.stat-card small{display:block;color:var(--muted)}.stat-card b{font-size:26px}.admin-grid{display:grid;gap:17px}.admin-grid.two{grid-template-columns:1.2fr 1fr}.panel{padding:19px;border-radius:17px}.chart-placeholder{display:flex;align-items:center;justify-content:center;gap:45px;padding:15px}.donut{width:170px;height:170px;border-radius:50%;border:28px solid #4f8ff7;border-right-color:#f59e0b;border-bottom-color:#22c55e;display:grid;place-items:center}.donut b{font-size:31px}.donut small{display:block}.legend{display:flex;flex-direction:column;gap:12px}.module-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:11px}.module-grid a{background:#f7f9fc;border:1px solid var(--line);padding:13px;border-radius:13px;display:flex;flex-direction:column;min-height:110px}.module-grid span{color:var(--blue);font-weight:900}.module-grid small{margin-top:auto;color:var(--muted)}.module-banner{background:linear-gradient(135deg,#0b57d0,#07346b);color:#fff;display:flex;justify-content:space-between;align-items:center;padding:28px}.module-banner h2{font-size:28px;margin:10px 0 3px}.module-banner p{margin:0;opacity:.8}.big-icon{font-size:70px;opacity:.25}.module-cards{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:17px}.module-cards .panel{min-height:210px}.module-no{color:var(--blue);font-size:23px;font-weight:900}.progress-list>div{display:flex;justify-content:space-between;margin-top:13px}progress{width:100%;height:12px}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:12px;border-bottom:1px solid var(--line);white-space:nowrap}th{font-size:12px;color:var(--muted);background:#f7f9fc}td small{display:block;color:var(--muted)}@media(max-width:1100px){.stat-grid{grid-template-columns:repeat(3,1fr)}.module-grid{grid-template-columns:repeat(4,1fr)}.module-cards{grid-template-columns:repeat(3,1fr)}}@media(max-width:800px){.sidebar{display:none}.admin-main{margin:0;width:100%}.admin-grid.two{grid-template-columns:1fr}.stat-grid{grid-template-columns:repeat(2,1fr)}.module-grid{grid-template-columns:repeat(2,1fr)}.module-cards{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}.span2{grid-column:auto}.admin-content{padding:13px}}
.toggle{flex-direction:row;align-items:center}.toggle input{width:auto}.rule-card{padding:14px;border:1px solid var(--line);border-radius:13px;margin-bottom:10px}.rule-card p{margin:7px 0 0;color:var(--muted)}hr{border:0;border-top:1px solid var(--line);width:100%;margin:8px 0}

.stat-grid.compact{grid-template-columns:repeat(2,1fr)}
.approval-card{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.approval-card small{display:block;color:var(--muted);margin-top:4px}
.approval-actions{display:flex;gap:8px;align-items:center}
.approval-actions input{min-width:180px}
.filter-bar{display:flex;gap:12px;align-items:end;flex-wrap:wrap}
.code-box{background:#0f172a;color:#e2e8f0;padding:15px;border-radius:12px;overflow:auto}
@media(max-width:800px){.approval-card{align-items:flex-start;flex-direction:column}.approval-actions{width:100%;flex-wrap:wrap}.approval-actions input{width:100%}}

.security-note{margin-top:16px;padding:12px;background:#eff6ff;color:#1e40af;border-radius:12px;font-size:13px}
.otp-card{max-width:430px}.otp-icon{width:78px;height:78px;margin:auto;background:#dbeafe;color:#0b57d0;border-radius:50%;display:grid;place-items:center;font-size:36px}
.otp-input{text-align:center;font-size:32px;letter-spacing:12px;font-weight:900}
.resend-form{margin-top:10px}.otp-meta{margin-top:15px;color:var(--muted);font-size:13px;line-height:1.7}
.device-card{display:flex;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--line)}
.device-card:last-child{border-bottom:0}.device-symbol{font-size:28px}.device-main{flex:1}.device-main small{display:block;color:var(--muted);margin-top:3px}

.module-cards{align-items:start}.module-cards .panel{height:auto;min-height:0}
form select,form input,form textarea{min-width:0}
.panel .table-wrap form{display:flex;gap:6px;align-items:center}
.panel .table-wrap form select{min-width:120px}

/* Modern commercial login */
.login-modern-body{min-height:100vh;margin:0;padding:28px;background:
radial-gradient(circle at 8% 12%,rgba(45,112,255,.16),transparent 30%),
radial-gradient(circle at 92% 88%,rgba(49,187,164,.13),transparent 28%),
#eef4fc;display:grid;place-items:center}
.login-modern-shell{position:relative;width:min(1180px,100%);min-height:690px;background:#fff;border-radius:30px;overflow:hidden;display:grid;grid-template-columns:1.08fr .92fr;box-shadow:0 35px 90px rgba(25,55,105,.18);border:1px solid rgba(255,255,255,.8)}
.login-showcase{position:relative;overflow:hidden;padding:46px;color:#fff;background:
linear-gradient(145deg,rgba(3,35,81,.98),rgba(8,82,190,.96)),
linear-gradient(45deg,#062b63,#0b63db)}
.login-showcase:before{content:"";position:absolute;inset:0;background-image:
linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:38px 38px;mask-image:linear-gradient(to bottom,#000,transparent)}
.showcase-glow{position:absolute;border-radius:50%;filter:blur(2px)}.glow-one{width:320px;height:320px;background:rgba(76,143,255,.26);right:-100px;top:-90px}.glow-two{width:260px;height:260px;background:rgba(33,213,176,.16);left:-90px;bottom:-90px}
.modern-brand{position:relative;display:flex;gap:14px;align-items:center}.modern-logo{width:74px;height:60px;border:1px solid rgba(255,255,255,.42);border-radius:18px;display:grid;place-items:center;font-size:26px;font-weight:950;background:rgba(255,255,255,.1);backdrop-filter:blur(8px)}.modern-brand b{display:block;font-size:23px}.modern-brand small{opacity:.65}
.showcase-copy{position:relative;margin-top:70px;max-width:540px}.showcase-label{display:inline-flex;font-size:11px;letter-spacing:1.8px;font-weight:800;background:rgba(255,255,255,.1);padding:8px 12px;border-radius:999px}.showcase-copy h1{font-size:48px;line-height:1.14;margin:22px 0 16px;letter-spacing:-1.4px}.showcase-copy p{font-size:17px;line-height:1.7;max-width:500px;color:rgba(255,255,255,.78)}
.feature-orbit{position:relative;margin-top:46px;display:grid;grid-template-columns:1fr 1fr;gap:13px}.feature-orbit article{display:flex;align-items:center;gap:13px;padding:15px;border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.075);border-radius:16px;backdrop-filter:blur(8px)}.feature-orbit article>span{font-size:25px}.feature-orbit b,.feature-orbit small{display:block}.feature-orbit small{color:rgba(255,255,255,.62);margin-top:2px}.showcase-footer{position:absolute;left:46px;bottom:32px;color:rgba(255,255,255,.48);font-size:12px}
.login-form-panel{display:grid;place-items:center;padding:50px}.login-form-inner{width:min(420px,100%)}.login-heading{margin-bottom:28px}.login-heading h2{font-size:32px;margin:8px 0 5px;letter-spacing:-.7px}.login-heading p{color:#76849a;margin:0}.mobile-brand{display:none;color:#0b57d0;font-weight:950;letter-spacing:1px}
.setup-banner{display:flex;align-items:flex-start;gap:12px;padding:14px;background:#fff7df;color:#805d00;border:1px solid #f4d37b;border-radius:15px;margin-bottom:18px}.setup-banner-icon{width:38px;height:38px;border-radius:11px;background:#fff1bd;display:grid;place-items:center;font-size:19px}.setup-banner p{margin:4px 0 0;font-size:12px;line-height:1.45}
.modern-login-form{display:flex;flex-direction:column;gap:17px}.modern-login-form label>span{font-size:13px;color:#34445d}.modern-input{height:56px;display:flex;align-items:center;border:1px solid #dce4ef;border-radius:14px;background:#f9fbfe;transition:.2s}.modern-input:focus-within{border-color:#1767df;box-shadow:0 0 0 4px rgba(23,103,223,.1);background:#fff}.modern-input i{width:46px;text-align:center;font-style:normal;opacity:.6}.modern-input input{height:100%;border:0;background:transparent;padding:0 8px;outline:0;box-shadow:none}.password-eye{border:0;background:none;width:46px;height:100%;cursor:pointer;color:#718096}.login-options{display:flex;justify-content:space-between;align-items:center;font-size:13px}.login-options a{color:#0b57d0;font-weight:700}.remember-row{display:flex!important;flex-direction:row!important;align-items:center;gap:7px!important;color:#68768a}.remember-row input{width:auto}
.modern-login-button{height:56px;border:0;border-radius:14px;background:linear-gradient(135deg,#0b57d0,#126ee8);color:#fff;font-size:16px;font-weight:850;display:flex;align-items:center;justify-content:center;gap:12px;cursor:pointer;box-shadow:0 13px 26px rgba(11,87,208,.25)}.modern-login-button:hover{transform:translateY(-1px)}.modern-login-button span{font-size:23px}
.login-security{display:flex;gap:12px;margin-top:20px;padding:14px;border:1px solid #dce8f8;background:#f2f7ff;border-radius:15px}.login-security>div{font-size:24px}.login-security p{font-size:12px;color:#64748b;margin:0;line-height:1.5}.login-security b{color:#274260}.login-help{margin-top:28px;padding-top:20px;border-top:1px solid #edf0f5;display:flex;justify-content:space-between;color:#7b8798;font-size:13px}.login-help a{color:#0b57d0;font-weight:750}
.bootstrap-header{display:flex;align-items:center;gap:15px;background:linear-gradient(135deg,#fff7df,#fff);border:1px solid #f2d27b;padding:17px;border-radius:16px;margin-bottom:17px}.bootstrap-header>div:nth-child(2){flex:1}.bootstrap-header p{margin:4px 0 0;color:#7f681d}.bootstrap-icon{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:#ffeba8;font-size:24px}.setup-progress{display:flex;align-items:center;background:#fff;padding:16px 20px;border-radius:16px;box-shadow:var(--shadow);margin-bottom:17px}.setup-progress>div{display:flex;align-items:center;gap:8px;color:#8b96a8}.setup-progress>div span{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#e9eef6;font-weight:850}.setup-progress>div.done,.setup-progress>div.active{color:#155ec5}.setup-progress>div.done span{background:#16a34a;color:#fff}.setup-progress>div.active span{background:#0b57d0;color:#fff}.setup-progress i{flex:1;height:2px;background:#e4e9f1;margin:0 12px}.gmail-guide{margin-top:16px;background:#f7f9fc;border:1px solid var(--line);border-radius:13px;padding:14px}.gmail-guide ol{padding-left:20px;margin:8px 0 0;color:var(--muted);line-height:1.8}
@media(max-width:850px){.login-modern-body{padding:0;background:#fff}.login-modern-shell{display:block;min-height:100vh;border:0;border-radius:0;box-shadow:none}.login-showcase{display:none}.login-form-panel{min-height:100vh;padding:32px 22px}.mobile-brand{display:block}.login-heading{margin-top:30px}.login-heading h2{font-size:29px}.setup-progress{overflow:auto}.setup-progress b{white-space:nowrap;font-size:12px}}

/* v4.1 UX system */
.top-profile-link{padding:8px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--blue);font-size:13px;font-weight:800}
.page-intro{display:flex;justify-content:space-between;align-items:center;gap:20px;background:linear-gradient(135deg,#fff,#edf5ff);border:1px solid #dce9fb;border-radius:18px;padding:23px;margin-bottom:17px}
.page-intro h2{margin:5px 0;font-size:25px}.page-intro p{margin:0;color:var(--muted)}.eyebrow{font-size:11px;letter-spacing:1.4px;color:var(--blue);font-weight:900}.intro-actions{display:flex;gap:9px}
.site-designer-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(340px,.75fr);gap:17px;align-items:start;margin-bottom:17px}.map-panel{min-width:0}.admin-map{height:610px;border-radius:15px;background:#e8eef7;z-index:1}.sticky-form-panel{position:sticky;top:18px}.map-legend{display:flex;gap:18px;padding-top:13px;color:var(--muted);font-size:12px}.legend-dot{width:10px;height:10px;border-radius:50%;display:inline-block;margin-right:5px}.legend-dot.office{background:#2563eb}.legend-dot.project{background:#7c3aed}.legend-dot.inactive{background:#94a3b8}
.map-buttons{display:flex;gap:8px}.radius-field b{color:var(--blue)}.radius-field input[type=range]{padding:0;border:0;accent-color:var(--blue)}
.assignment-row,.supervisor-row{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}.assignment-row>div:first-child,.supervisor-row>div:nth-child(2){flex:1}.assignment-row small,.supervisor-row small{display:block;color:var(--muted)}.compact-scroll{max-height:355px;overflow:auto}
.row-actions,.master-actions,.shift-actions{display:flex;gap:5px;align-items:center}.row-actions form,.master-actions form,.shift-actions form{display:inline-flex}.icon-btn{width:34px;height:34px;border:1px solid var(--line);border-radius:9px;background:#fff;display:inline-grid;place-items:center;cursor:pointer;color:#506079;font-weight:900}.icon-btn:hover{border-color:#8bb6f5;background:#eff6ff;color:var(--blue)}.edit-icon{color:#0b57d0}.danger-icon{color:#dc3545!important}.table-search{max-width:270px;padding:9px 12px}
.admin-tabs{display:flex;gap:8px;margin-bottom:17px;background:#fff;border-radius:14px;padding:6px;box-shadow:var(--shadow);overflow:auto}.admin-tabs a{padding:11px 15px;border-radius:10px;color:#66758a;font-weight:800;white-space:nowrap}.admin-tabs a.active{background:#eaf2ff;color:var(--blue)}.admin-tabs b{display:inline-grid;place-items:center;min-width:22px;height:22px;background:#eef1f6;border-radius:999px;margin-left:5px;font-size:11px}
.master-layout{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:17px;align-items:start}.master-form{position:sticky;top:18px}.master-card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.master-card{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:12px;align-items:center;border:1px solid var(--line);border-radius:14px;padding:14px;background:#fbfdff}.master-card-icon{width:46px;height:46px;border-radius:13px;background:#eaf2ff;color:#0b57d0;display:grid;place-items:center;font-size:22px}.master-card-icon.purple{background:#f1eafe;color:#7c3aed}.master-card-icon.orange{background:#fff0dc;color:#ea7a0a}.master-card h4{margin:0 0 4px}.master-card p,.master-card small{margin:0;color:var(--muted)}.master-actions{grid-column:2/4;justify-content:flex-end;border-top:1px solid var(--line);padding-top:9px}.small-avatar{width:40px;height:40px}
.collapsible-panel{display:none}.collapsible-panel.is-open{display:block}.employee-create-grid{grid-template-columns:repeat(4,1fr)}.employee-stat-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:17px}.employee-stat-strip article{display:flex;align-items:center;gap:12px;background:#fff;border-radius:15px;padding:16px;box-shadow:var(--shadow)}.employee-stat-strip article>span{font-size:26px}.employee-stat-strip b{font-size:24px;display:block}.employee-stat-strip small{color:var(--muted)}
.directory-toolbar{display:flex;gap:10px;align-items:center;margin-bottom:15px}.search-box{flex:1;display:flex;align-items:center;border:1px solid var(--line);border-radius:12px;padding-left:13px;background:#f9fbfd}.search-box input{border:0;background:transparent}.employee-directory{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.employee-directory-card{display:grid;grid-template-columns:62px minmax(0,1fr);gap:12px;border:1px solid var(--line);border-radius:16px;padding:16px;background:#fff}.employee-avatar{position:relative;width:58px;height:58px;border-radius:17px;background:linear-gradient(135deg,#dbeafe,#eff6ff);display:grid;place-items:center;color:var(--blue);font-size:22px;font-weight:900}.employee-avatar span{position:absolute;right:-2px;bottom:-2px;width:13px;height:13px;border-radius:50%;border:3px solid #fff}.employee-avatar span.online{background:#16a34a}.employee-avatar span.offline{background:#94a3b8}
.employee-card-title{display:flex;justify-content:space-between;gap:8px;align-items:start}.employee-card-title h3{margin:0}.employee-card-main>p{margin:3px 0 10px;color:var(--muted)}.employee-meta,.employee-time-policy{display:flex;gap:7px;flex-wrap:wrap}.employee-meta span,.employee-time-policy span{background:#f5f7fb;border-radius:8px;padding:5px 7px;font-size:11px;color:#58687e}.employee-time-policy{margin-top:8px}.employee-time-policy span{background:#eef6ff;color:#245ea8}.employee-card-actions{grid-column:1/3;display:flex;gap:7px;border-top:1px solid var(--line);padding-top:12px}.employee-card-actions form{display:inline-flex}.employee-card-actions .btn{padding:9px 11px;font-size:12px}
.employee-profile-hero{display:flex;align-items:center;gap:18px;background:linear-gradient(135deg,#07346b,#0b67dd);color:#fff;border-radius:20px;padding:24px;margin-bottom:15px}.employee-profile-avatar{width:86px;height:86px;border-radius:24px;background:rgba(255,255,255,.16);display:grid;place-items:center;font-size:36px;font-weight:900}.employee-profile-hero h2{margin:4px 0}.employee-profile-hero p{margin:0;color:rgba(255,255,255,.72)}.profile-badges{display:flex;gap:7px;margin-top:10px}.profile-hero-actions{margin-left:auto;display:flex;gap:8px}.profile-tabs{box-shadow:none;border:1px solid var(--line)}.profile-form{grid-template-columns:repeat(3,1fr)}
.policy-priority article{display:flex;gap:12px;padding:13px 0;border-bottom:1px solid var(--line)}.policy-priority article>span{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#0b57d0;color:#fff;font-weight:900}.policy-priority p{margin:2px 0;color:var(--muted)}.time-preview{margin-top:18px;background:#eef6ff;border-radius:14px;padding:16px}.time-preview b{display:block;font-size:19px;color:var(--blue);margin:5px 0}.location-profile-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:11px}.location-profile-grid article{display:flex;gap:12px;border:1px solid var(--line);border-radius:14px;padding:14px}.location-profile-grid article>span{font-size:25px}.location-profile-grid p{margin:4px 0;color:var(--muted)}
.shift-layout{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:17px;align-items:start;margin-bottom:17px}.shift-card-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:11px}.shift-card{display:grid;grid-template-columns:48px minmax(0,1fr);gap:12px;border:1px solid var(--line);border-radius:15px;padding:14px}.shift-clock{width:45px;height:45px;border-radius:13px;background:#eaf2ff;display:grid;place-items:center;font-size:22px}.shift-card h3,.shift-card p{margin:0}.shift-card p,.shift-card small{color:var(--muted)}.shift-actions{grid-column:1/3;justify-content:flex-end;border-top:1px solid var(--line);padding-top:8px}.disabled-card{opacity:.55}.late-explainer{padding-top:18px}.timeline-bar{height:14px;border-radius:999px;overflow:hidden;display:grid;grid-template-columns:45% 20% 35%}.timeline-bar span.green{background:#22c55e}.timeline-bar span.yellow{background:#f59e0b}.timeline-bar span.red{background:#ef4444}.timeline-labels{display:grid;grid-template-columns:45% 20% 35%;font-size:11px;margin-top:7px}.timeline-labels b:nth-child(2){text-align:center}.timeline-labels b:nth-child(3){text-align:right}
.mobile-profile-hero{text-align:center;background:linear-gradient(135deg,#07346b,#0b67dd);color:#fff;border-radius:20px;padding:25px;margin-bottom:13px}.profile-photo-large{position:relative;width:92px;height:92px;margin:auto;border-radius:30px;background:rgba(255,255,255,.17);display:grid;place-items:center;font-size:36px;font-weight:900}.profile-photo-large button{position:absolute;right:-5px;bottom:-5px;width:34px;height:34px;border-radius:50%;border:3px solid #fff;background:#fff}.mobile-profile-hero h2{margin:12px 0 4px}.mobile-profile-hero p{margin:0 0 8px;color:rgba(255,255,255,.75)}.mobile-profile-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin-bottom:13px}.mobile-profile-grid article{background:#fff;border-radius:14px;padding:13px;box-shadow:var(--shadow)}.mobile-profile-grid small{display:block;color:var(--muted)}.profile-time-summary{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}.profile-time-summary>div{display:flex;flex-direction:column;background:#f5f8fc;border-radius:13px;padding:13px}.profile-time-summary span{font-size:23px}.profile-time-summary small{color:var(--muted)}
@media(max-width:1100px){.site-designer-grid,.master-layout,.shift-layout{grid-template-columns:1fr}.sticky-form-panel,.master-form{position:static}.employee-create-grid,.profile-form{grid-template-columns:repeat(2,1fr)}.employee-directory{grid-template-columns:1fr}.admin-map{height:500px}}
@media(max-width:800px){.page-intro{align-items:flex-start;flex-direction:column}.admin-map{height:420px}.master-card-grid,.shift-card-grid{grid-template-columns:1fr}.employee-stat-strip{grid-template-columns:repeat(2,1fr)}.employee-create-grid,.profile-form{grid-template-columns:1fr}.employee-create-grid .span2,.profile-form .span2{grid-column:auto}.directory-toolbar{align-items:stretch;flex-direction:column}.employee-profile-hero{align-items:flex-start;flex-wrap:wrap}.profile-hero-actions{margin-left:0;width:100%}.location-profile-grid{grid-template-columns:1fr}}

.employee-work-plan{border-left:4px solid #2563eb}
.planned-time-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:12px}
.planned-time-grid>div{background:#f3f7fd;border:1px solid #e2eaf5;border-radius:13px;padding:13px;text-align:center}
.planned-time-grid small{display:block;color:var(--muted)}
.planned-time-grid b{display:block;font-size:22px;margin-top:4px;color:#174f9d}
.work-plan-detail{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
.work-plan-detail span{font-size:11px;background:#eef6ff;color:#245ea8;padding:6px 8px;border-radius:8px}
.schedule-summary-card{background:linear-gradient(145deg,#fff,#eef6ff)}
.employee-schedule-list article{display:grid;grid-template-columns:58px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.employee-schedule-list article.today{background:#eef6ff;margin:0 -12px;padding:12px;border-radius:12px}
.schedule-date{width:52px;height:52px;border-radius:14px;background:#f2f5fa;display:grid;place-items:center;align-content:center}
.schedule-date b{font-size:20px;color:var(--blue)}
.schedule-date small{color:var(--muted);font-size:10px}
.schedule-main b,.schedule-main span,.schedule-main small{display:block}
.schedule-main span{font-size:16px;margin:3px 0}
.schedule-main small{color:var(--muted)}
.attendance-history-row>div:last-child{text-align:right}
.attendance-history-row small{display:block;color:var(--muted);margin-top:3px}
@media(max-width:600px){
 .planned-time-grid{grid-template-columns:repeat(3,1fr)}
 .planned-time-grid b{font-size:18px}
 .employee-schedule-list article{grid-template-columns:52px minmax(0,1fr)}
 .employee-schedule-list article>.status{grid-column:2}
}