:root{--primary:#c1121f;--primary-dark:#8f0e18;--primary-light:#f6d3d6;--primary-soft:#fdf3f3;--success:#16a34a;--warning:#f59e0b;--danger:#c1121f;--info:#2563eb;--bg:#fafafa;--surface:#fff;--text:#141414;--text-secondary:#5c5c5c;--muted:#8f8f8f;--border:#e6e6e6;--radius-sm:10px;--radius-md:14px;--radius-lg:20px;--radius-xl:28px;--shadow-sm:0 2px 10px rgba(0,0,0,.06);--shadow-md:0 10px 26px rgba(0,0,0,.1);--shadow-lg:0 20px 48px rgba(0,0,0,.14);--sidebar-width:250px;--accent-green:#16a34a;--accent-green-pale:#dcf7e3;--accent-blue:#2563eb;--accent-blue-pale:#e0eaff;--accent-purple:#9333ea;--accent-purple-pale:#f2e3ff;--gradient-warm:linear-gradient(135deg,#e5383b 0%,#c1121f 55%,#8f0e18 100%)}*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{font-family:"Prompt","Segoe UI",Tahoma,Arial,sans-serif;background:var(--bg);color:var(--text);font-size:14px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}button,input,textarea,select{font:inherit}button{border:0;cursor:pointer}img{max-width:100%;display:block}a{color:inherit;text-decoration:none}.hidden{display:none!important}.text-red{color:var(--primary)}.text-green{color:var(--success)}.text-warning{color:var(--warning)}.text-muted{color:var(--text-secondary)}.w-full{width:100%} .login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;background:radial-gradient(circle at 15% 15%,rgba(193,18,31,.08),transparent 30%),radial-gradient(circle at 85% 85%,rgba(193,18,31,.06),transparent 32%),#fafafa}.login-card{width:100%;max-width:420px;padding:38px;background:rgba(255,255,255,.98);border-radius:28px;box-shadow:0 20px 50px rgba(0,0,0,.1);animation:loginIn .4s ease}@keyframes loginIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}.brand-mark{width:62px;height:62px;display:grid;place-items:center;margin-bottom:16px;border-radius:18px;color:#fff;background:linear-gradient(145deg,#c1121f,#7a0d16);font-size:23px;font-weight:800;box-shadow:0 10px 20px rgba(193,18,31,.32)}.brand-title{color:#141414;font-size:26px;font-weight:700;letter-spacing:-.5px}.brand-sub{margin-top:4px;margin-bottom:28px;color:var(--text-secondary);font-size:13px} label{display:block;margin:13px 0 7px;color:#5c5c5c;font-size:13px;font-weight:500}input,textarea,select{width:100%;padding:12px 14px;border:1px solid var(--border);border-radius:var(--radius-md);outline:none;background:#fff;color:var(--text);transition:border-color .2s ease,box-shadow .2s ease,background .2s ease}input:hover,textarea:hover,select:hover{border-color:#e3b3b7}input:focus,textarea:focus,select:focus{border-color:#c1121f;box-shadow:0 0 0 4px rgba(193,18,31,.12)}textarea{min-height:120px;resize:vertical} .input-search{padding-left:42px;border-radius:100px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238f8f8f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:14px center;background-size:17px} .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:10px 18px;border-radius:100px;font-size:13px;font-weight:600;transition:transform .2s ease,box-shadow .2s ease,background .2s ease}.btn:hover{transform:translateY(-1px)}.btn:active{transform:translateY(0)}.btn-primary{color:#fff;background:linear-gradient(135deg,#c1121f,#8f0e18);box-shadow:0 6px 16px rgba(193,18,31,.3)}.btn-primary:hover{background:linear-gradient(135deg,#8f0e18,#5c090f)}.btn-light{color:#141414;background:#f0f0f0}.btn-light:hover{background:#e5e5e5}.btn-danger{color:#991b1b;background:#fee2e2}.btn-success{color:#166534;background:#dcfce7}.btn-full{width:100%}.demo-hint{margin-top:18px;color:#8f8f8f;text-align:center;font-size:11px} .app{min-height:100vh;display:flex;background:var(--bg)}.sidebar{width:var(--sidebar-width);position:fixed;inset:0 auto 0 0;z-index:50;display:flex;flex-direction:column;padding:16px 14px;color:var(--text);background:#fff;border-right:1px solid var(--border);box-shadow:4px 0 20px rgba(0,0,0,.04);overflow-y:auto}.sidebar-brand{display:flex;align-items:center;gap:11px;padding:10px 8px 22px}.sidebar-brand>span{width:42px;height:42px;display:grid;place-items:center;border-radius:13px;background:var(--primary-light);color:var(--primary);font-size:14px;font-weight:800}.sidebar-brand b{display:block;font-size:13px;font-weight:700;color:var(--text)}.sidebar-brand small{display:block;margin-top:2px;color:var(--text-secondary);font-size:9px;letter-spacing:.7px}.sidebar nav{display:grid;gap:5px}.sidebar nav button{width:100%;padding:12px 13px;border-radius:10px;color:#3d3d3d;background:transparent;text-align:left;font-size:13px;transition:background .2s ease,color .2s ease}.sidebar nav button:hover{color:var(--primary-dark);background:var(--primary-soft)}.sidebar nav button.active{color:var(--primary-dark);background:var(--primary-light);box-shadow:inset 3px 0 0 #c1121f}.sidebar-bottom{margin-top:auto}.profile-mini{width:100%;padding:12px;border-radius:12px;color:var(--text);background:var(--surface-card,#f2f2f2);text-align:left}.profile-mini small{color:var(--text-secondary)}.logout{width:100%;margin-top:7px;padding:10px 12px;color:var(--primary-dark);background:transparent;text-align:left;border-radius:10px}.logout:hover{background:var(--primary-soft)} .main{width:calc(100% - var(--sidebar-width));margin-left:var(--sidebar-width)}.topbar{height:78px;position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:0 30px;background:rgba(255,255,255,.96);border-bottom:1px solid var(--border);backdrop-filter:blur(12px)}.topbar h2{margin:0;font-size:19px;font-weight:700}.topbar>div:first-of-type span{display:block;color:var(--text-secondary);font-size:11px}.top-right{display:flex;align-items:center;gap:14px}.user-chip{padding:7px 12px;color:var(--primary)!important;background:var(--primary-light);border-radius:100px}.menu-btn{display:none;width:40px;height:40px;margin-right:10px;color:#141414;background:#f0f0f0;border-radius:10px} #content{width:100%;max-width:1500px;padding:28px;margin:0 auto}.section-title{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}.section-title h3{margin:0;font-size:20px;font-weight:700}.section-title p{margin-top:3px;color:var(--text-secondary);font-size:12px}.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.stat{position:relative;overflow:hidden;padding:19px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}.stat::after{content:"";width:75px;height:75px;position:absolute;top:-30px;right:-30px;border-radius:50%;background:var(--primary-light)}.stat .icon{width:40px;height:40px;display:grid;place-items:center;position:relative;z-index:2;color:var(--primary);background:var(--primary-light);border-radius:12px;font-weight:700}.stat b{display:block;margin-top:10px;font-size:28px;line-height:1.1}.stat small{color:var(--text-secondary);font-size:12px}.card{padding:18px;background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}.card h4{margin-bottom:14px;font-size:15px}.two{display:grid;grid-template-columns:1.4fr 1fr;gap:16px;margin-top:16px}.table-wrap{width:100%;overflow-x:auto}.table{width:100%;border-collapse:collapse}.table th,.table td{padding:13px 10px;border-bottom:1px solid #ececec;text-align:left;font-size:12px;white-space:nowrap}.table th{color:var(--text-secondary);font-size:11px;font-weight:600;background:#fafafa}.table tr:hover td{background:#f7f7f7} .toolbar{display:flex;gap:10px;margin-bottom:16px}.toolbar input{max-width:400px}.project-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.project-card{position:relative;padding:19px;background:#fff;border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow-sm);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}.project-card:hover{transform:translateY(-2px);border-color:#e3b3b7;box-shadow:var(--shadow-md)}.project-head{display:flex;justify-content:space-between;gap:14px}.project-head h4{margin-bottom:4px;font-size:16px}.meta{margin:4px 0;color:var(--text-secondary);font-size:11px}.project-card p{margin:15px 0;color:#5c5c5c;font-size:12px}.project-actions{display:flex;gap:8px;margin-top:16px}.project-actions .btn{font-size:12px}.tag{display:inline-flex;padding:5px 9px;margin-right:4px;border-radius:100px;color:#3d3d3d;background:#f0f0f0;font-size:10px}.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.form-grid .full{grid-column:1/-1}.staff-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.staff-item{display:flex;align-items:center;gap:9px;min-height:46px;padding:10px 12px;background:#fff;border:1px solid var(--border);border-radius:11px;color:#1a1a1a;font-size:12px;cursor:pointer;transition:border-color .2s ease,background .2s ease}.staff-item:hover{border-color:#e3b3b7;background:#fafafa}.staff-item input{width:auto;margin:0}.map-box{min-height:260px;display:grid;place-items:center;border-radius:14px;color:#8f0e18;background:radial-gradient(circle at center,rgba(255,255,255,.9),transparent 35%),linear-gradient(135deg,#f6d3d6,#f0f0f0);font-size:13px}.empty{padding:55px 20px;color:var(--text-secondary);text-align:center;grid-column:1/-1}.empty b{display:block;margin-bottom:5px;color:#2a2a2a;font-size:14px}.mini-list{display:grid;gap:0}.mini-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid #f0f0f0}.mini-row:last-child{border-bottom:0}.person{display:flex;align-items:center;gap:9px}.avatar{width:36px;height:36px;display:grid;place-items:center;flex-shrink:0;border-radius:11px;color:var(--primary-dark);background:var(--primary-light);font-weight:700} .modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:18px;background:rgba(0,0,0,.62);backdrop-filter:blur(4px)}.modal-card{width:min(620px,96vw);max-height:94vh;overflow-y:auto;padding:18px;background:#fff;border-radius:20px;box-shadow:0 25px 80px rgba(0,0,0,.25);animation:modalIn .22s ease}@keyframes modalIn{from{opacity:0;transform:scale(.97) translateY(6px)}to{opacity:1;transform:scale(1) translateY(0)}}.modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.modal-head h3{font-size:17px}.modal-head button{width:35px;height:35px;display:grid;place-items:center;border-radius:10px;color:#1a1a1a;background:#f0f0f0}.modal-head button:hover{background:#e5e5e5}.camera-card{width:min(680px,96vw)}.camera-wrap{position:relative;overflow:hidden;width:100%;aspect-ratio:3/4;max-height:46vh;border-radius:17px;background:#050505}.camera-wrap video{width:100%;height:100%;object-fit:cover}.camera-guide{position:absolute;inset:13% 10%;border:2px solid rgba(255,255,255,.82);border-radius:22px;box-shadow:0 0 0 999px rgba(0,0,0,.17);pointer-events:none}.camera-guide::before{content:"";position:absolute;top:50%;left:50%;width:10px;height:10px;margin:-5px;border-radius:50%;background:rgba(255,255,255,.8)}.camera-status{margin:10px 0;color:var(--text-secondary);text-align:center;font-size:12px}.location-box{padding:12px 14px;border:1px solid var(--border);border-radius:12px;color:#2a2a2a;background:#fafafa;font-size:12px;line-height:1.75}.camera-actions{display:flex;gap:10px;margin-top:12px}.camera-actions .btn{flex:1}.qr-card{width:min(420px,95vw);text-align:center}#qrBox{min-height:270px;display:grid;place-items:center;padding:25px;background:#fafafa;border-radius:15px}#qrBox img{padding:10px;background:#fff;border-radius:12px}.qr-inline{display:grid;place-items:center;min-height:220px;padding:15px;background:#fafafa;border-radius:14px}.toast{position:fixed;right:20px;bottom:20px;z-index:200;max-width:360px;padding:12px 16px;color:#fff;background:#141414;border-radius:12px;box-shadow:0 12px 30px rgba(0,0,0,.2);opacity:0;pointer-events:none;transform:translateY(12px);transition:opacity .25s ease,transform .25s ease}.toast.show{opacity:1;transform:translateY(0)} @media(max-width:1100px){.grid4{grid-template-columns:repeat(2,1fr)}.project-grid{grid-template-columns:1fr}.two{grid-template-columns:1fr}}@media(max-width:1400px){.sidebar{transform:translateX(-100%);transition:transform .25s ease}.sidebar.open{transform:translateX(0)}.main{width:100%;margin-left:0}.topbar{height:68px;padding:0 15px}.menu-btn{display:inline-grid;place-items:center}.top-right #currentDate{display:none}#content{padding:16px}.section-title{align-items:flex-start;flex-direction:column}.section-title>.btn{width:100%}.grid4{grid-template-columns:repeat(2,1fr)}.form-grid{grid-template-columns:1fr}.form-grid .full{grid-column:auto}.staff-grid{grid-template-columns:1fr}.toolbar{flex-direction:column}.toolbar input{max-width:none}.project-actions{flex-direction:column}.project-actions .btn{width:100%}.table-wrap{overflow-x:auto}input,textarea,select{font-size:16px}.topbar{height:auto;min-height:64px;flex-wrap:wrap;row-gap:8px;padding:12px 15px}.top-right{flex-wrap:wrap;row-gap:6px}.user-chip{max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}@media(max-width:430px){.login-card{padding:28px 22px;border-radius:20px}.brand-title{font-size:22px}.grid4{grid-template-columns:1fr}.stat{display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:center}.stat b{margin-top:0}.stat small{grid-column:2}.camera-wrap{max-height:38vh}}@media print{body{background:#fff}.sidebar,.topbar,.btn,.modal-head button{display:none!important}.main{width:100%;margin:0}#content{max-width:none;padding:0}} /* ========================================================= COMPATIBILITY BRIDGE ระบบเราเดิมใช้ชื่อ token/class ต่างไปบ้าง — alias ให้ชี้มาที่ token ชุดใหม่ด้านบน เพื่อให้หน้าที่ยังไม่ได้ปรับโครง (เช่น staff mobile) ยังใช้จานสีเดียวกันได้ถูกต้อง ไม่ต้องไล่แก้ inline style ทุกที่ ========================================================= */ :root { --primary-pressed: var(--primary-dark); --ink: var(--text); --body-c: var(--text); --mute: var(--text-secondary); --ash: var(--muted); --hairline: var(--border); --hairline-soft: var(--border); --canvas: var(--surface); --surface-soft: var(--bg); --surface-card: #f2f2f2; --success-deep: #166534; --success-pale: #dcfce7; --error: var(--danger); --error-pale: #fbe4e6; --warn-deep: #92400e; --warn-pale: #fef3c7; --info-deep: #1d4ed8; --info-pale: #dbeafe; --rounded-md: var(--radius-lg); --rounded-sm: var(--radius-md); --rounded-lg: var(--radius-xl); --rounded-full: 9999px; --shadow: var(--shadow-md); --ease: cubic-bezier(0.2, 0.7, 0.2, 1); --safe-b: env(safe-area-inset-bottom, 0px); --safe-t: env(safe-area-inset-top, 0px); } @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } html { -webkit-tap-highlight-color: transparent; } @keyframes fadeInUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } @keyframes spin { to { transform: rotate(360deg); } } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } } @keyframes popupBounceIn { 0% { transform: scale(0.3); opacity: 0; } 50% { transform: scale(1.08); opacity: 1; } 70% { transform: scale(0.95); } 100% { transform: scale(1); opacity: 1; } } /* --- Layout utilities ยังใช้ทุกหน้า --- */ .container { max-width: 1040px; margin: 0 auto; padding: 24px 20px 64px; } .container-narrow { max-width: 460px; margin: 0 auto; padding: 24px 20px 64px; } .grid { display: grid; gap: 16px; } .grid-2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .stack { display: flex; flex-direction: column; gap: 12px; } .row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; } .row-between { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; } h1 { font-size: 24px; font-weight: 700; color: var(--ink); margin: 0 0 4px; letter-spacing: -0.2px; } h2 { font-size: 18px; font-weight: 700; color: var(--ink); margin: 0 0 4px; letter-spacing: -0.1px; } .page-head { margin-bottom: 20px; } .page-head p { color: var(--mute); font-size: 14px; margin: 0; } .hint { font-size: 12px; color: var(--ash); margin-top: 4px; } .field { margin-bottom: 16px; } /* --- Sidebar: รองรับ nav แบบ จริง (multi-page ไม่ใช่ SPA) ควบคู่กับ