/* ============================================================ Revelling HR — ธีมเดียวกับ report.revelling.cloud โทเคนสี / รัศมี / เงา ก๊อปมาตรงจาก /root/dashboard/web/index.html โครงหน้า: พื้นเทา (--ground) → กล่องใหญ่มุมโค้ง (--shell) → การ์ด (--card) โหมดมืดเป็นค่าเริ่มต้นของ HR · สลับเป็นสว่างที่ (report ใช้ class .light ที่ แต่ HR ต้องอยู่ที่ เพราะสคริปต์ กันจอกระพริบรันตั้งแต่ใน ตอนที่ ยังไม่ถูก parse) ============================================================ */ @font-face{font-family:'IBM Plex Sans Thai';font-weight:400;font-display:swap;src:url('/fonts/ipst-thai-400.woff2') format('woff2');unicode-range:U+0E00-0E7F} @font-face{font-family:'IBM Plex Sans Thai';font-weight:400;font-display:swap;src:url('/fonts/ipst-latin-400.woff2') format('woff2');unicode-range:U+0000-024F,U+2000-206F,U+20A0-20BF,U+2122,U+2212} @font-face{font-family:'IBM Plex Sans Thai';font-weight:500;font-display:swap;src:url('/fonts/ipst-thai-500.woff2') format('woff2');unicode-range:U+0E00-0E7F} @font-face{font-family:'IBM Plex Sans Thai';font-weight:500;font-display:swap;src:url('/fonts/ipst-latin-500.woff2') format('woff2');unicode-range:U+0000-024F,U+2000-206F,U+20A0-20BF,U+2122,U+2212} @font-face{font-family:'IBM Plex Sans Thai';font-weight:600;font-display:swap;src:url('/fonts/ipst-thai-600.woff2') format('woff2');unicode-range:U+0E00-0E7F} @font-face{font-family:'IBM Plex Sans Thai';font-weight:600;font-display:swap;src:url('/fonts/ipst-latin-600.woff2') format('woff2');unicode-range:U+0000-024F,U+2000-206F,U+20A0-20BF,U+2122,U+2212} /* ============ tokens — โหมดมืด (ค่าเริ่มต้น) ============ */ :root{ color-scheme:dark; --ground:#080809;--shell:#0E0E10;--card:#151518;--bigcard:#0B0B0D;--tile:#131317;--tray:#0F0F12;--pill:#1D1D22; --ink:#F3F3F5;--ink2:#DDDDE2;--ink3:#C2C2C8;--dim:#A8A8B0;--muted:#8C8C95;--muted2:#8C8C95;--faint:#8C8C95; --accent:#E31E24;--pos:#3ECF8E;--posbg:rgba(62,207,142,.16);--neg:#FF6B6B;--negbg:rgba(227,30,36,.20); --warnc:#F0B33E;--warnbg:rgba(240,179,62,.16);--infoc:#5FA6FF;--infobg:rgba(24,119,242,.20); --line:rgba(255,255,255,.12);--line2:rgba(255,255,255,.12);--track:rgba(255,255,255,.12);--track2:rgba(255,255,255,.12);--input:rgba(255,255,255,.16); --hub:#1B1B1F;--grid:rgba(255,255,255,.10);--off:rgba(255,255,255,.18);--knob:#fff; --blue:#1877F2;--orange:#F97316;--linegreen:#06C755; --shadow:0 30px 70px rgba(0,0,0,.55);--pop:0 18px 40px rgba(0,0,0,.6); --pagepad:34px;--zonepad:30px;--rad:46px; --portal:760px; /* ความกว้างคอลัมน์หน้าพนักงาน */ /* ชื่อโทเคนเดิมของ HR ชี้มาที่โทเคน report — โค้ดเก่าที่เขียน var(--brand) ฯลฯ ยังใช้ได้ */ --brand:var(--accent);--brand-d:#B4151B;--brand-soft:var(--negbg); --bg:var(--tile);--bg2:var(--pill);--inputbg:var(--tile);--bd:var(--input); --ok:var(--pos);--ok-bg:var(--posbg);--warn:var(--warnc);--warn-bg:var(--warnbg); --info:var(--infoc);--info-bg:var(--infobg);--bad:var(--neg);--bad-bg:var(--negbg); --dark:var(--hub);--dark2:var(--bigcard); --r:22px;--r-sm:16px;--r-xs:999px;--sh:var(--shadow);--sh-red:none; } /* ============ tokens — โหมดสว่าง ============ */ html[data-theme="light"]{ color-scheme:light; --ground:#E3E3E3;--shell:#EDEDEF;--card:#fff;--bigcard:#fff;--tile:#F7F7F7;--tray:#F7F7F7;--pill:#fff; --ink:#111;--ink2:#333;--ink3:#555;--dim:#6E6E72;--muted:#8A8A8A;--muted2:#A6A6A6;--faint:#B0B0B0; --accent:#E31E24;--pos:#0E8A4C;--posbg:#E8F6EE;--neg:#C4402B;--negbg:#FDECEC; --warnc:#9A6B12;--warnbg:#FBF1DC;--infoc:#1568D6;--infobg:#E7F0FE; --line:#EDEDED;--line2:#DCDCE0;--track:#F2F2F4;--track2:#F0F0F0;--input:#E4E4E6; --hub:#0E0E0E;--grid:#EBEBEB;--off:#E0E0E0;--knob:#fff; --shadow:0 30px 70px rgba(0,0,0,.08);--pop:0 18px 40px rgba(0,0,0,.14); } /* ============ base ============ */ *{box-sizing:border-box} html{-webkit-text-size-adjust:100%;background:var(--ground)} body{margin:0;min-height:100vh;background:var(--ground);color:var(--ink);font-size:14px;line-height:1.55; font-family:'IBM Plex Sans Thai','Noto Sans Thai',-apple-system,'Segoe UI',system-ui,sans-serif;-webkit-font-smoothing:antialiased} [hidden]{display:none!important} button,input,select,textarea{font:inherit} svg{display:block} canvas{max-width:100%} ::placeholder{color:var(--faint)} ::-webkit-scrollbar{width:8px;height:8px} ::-webkit-scrollbar-thumb{background:var(--off);border-radius:8px} ::-webkit-scrollbar-track{background:transparent} @keyframes rvFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} @keyframes rvPop{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}} @keyframes rvPulse{0%,100%{opacity:1}50%{opacity:.35}} @keyframes rvScan{0%{top:8%}50%{top:88%}100%{top:8%}} /* ============ โครงหน้าพนักงาน: ground → shell ============ */ .wrap,.page{width:100%;max-width:var(--portal);margin:var(--pagepad) auto;padding:var(--zonepad); background:var(--shell);border-radius:var(--rad);animation:rvFade .3s ease} .page{padding-bottom:calc(var(--zonepad) + 92px)} header.bar+.wrap,header.bar+.page{margin-top:0} h1,h2,h3{margin:.3em 0;font-weight:600;letter-spacing:-.3px;color:var(--ink)} h2{font-size:21px}h3{font-size:16px} .muted{color:var(--muted);font-size:13px} .center{text-align:center} .big{font-size:34px;font-weight:600;letter-spacing:-1px;color:var(--ink);line-height:1.1} .row{display:flex;gap:12px}.row>*{flex:1} .scroll{overflow-x:auto;-webkit-overflow-scrolling:touch} .empty{text-align:center;color:var(--muted2);padding:34px 0;font-size:13px} .secttl{margin:24px 4px 12px;font-size:17px;font-weight:600;color:var(--ink)} .secttl:first-child{margin-top:4px} /* logo + ไอคอน */ .brandlogo{height:28px;width:auto;display:block} .brandlogo.white{filter:brightness(0) invert(1)} .ico{width:20px;height:20px;display:block;flex:0 0 auto} .iic{width:1.05em;height:1.05em;display:inline-block;vertical-align:-.16em;flex:0 0 auto} /* ============ topbar หน้าย่อยพนักงาน (สร้างจาก bar()) ============ */ header.bar{position:relative;z-index:20;width:100%;max-width:var(--portal);margin:0 auto; padding:var(--pagepad) 10px 18px;background:transparent;color:var(--ink);display:flex;align-items:center;gap:14px} header.bar .t{flex:1;min-width:0;font-size:21px;font-weight:600;letter-spacing:-.3px} header.bar a,header.bar button{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:40px;padding:0 16px; border:0;border-radius:999px;background:var(--pill);color:var(--ink3);font-size:13px;font-family:inherit; text-decoration:none;cursor:pointer;flex:0 0 auto} header.bar a:hover,header.bar button:hover{color:var(--ink)} .bell{position:relative;width:44px;padding:0!important} .bell .dot{position:absolute;top:-3px;right:-3px;background:var(--accent);color:#fff;border-radius:999px; font-size:10px;font-weight:600;padding:2px 6px;line-height:1.35} /* ============ การ์ด ============ */ .card{background:var(--card);border-radius:var(--r);padding:24px;margin:16px 0;min-width:0;display:flex;flex-direction:column} .card>*:first-child{margin-top:0} .card.dark{background:var(--hub);color:#fff} .card.dark .muted{color:#9A9A9E} .card.brand{background:var(--accent);color:#fff} .card.brand .muted,.card.brand .big{color:#fff} /* ตัวเลข KPI */ /* จำนวน KPI แต่ละหน้าไม่เท่ากัน (3–4 ใบ) ใช้ auto-fit ให้เต็มแถวเสมอ */ .kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:20px;margin-bottom:8px} .kpi{background:var(--tile);border-radius:26px;padding:24px;min-width:0;display:flex;flex-direction:column;justify-content:center} .kpi .n{font-size:34px;font-weight:600;letter-spacing:-1px;line-height:1.1;color:var(--ink)} .kpi .l{margin-top:10px;font-size:15.5px;color:var(--muted);line-height:1.35} .kpi.add{background:var(--accent);color:#fff;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:9px; font-size:14px;font-weight:500;cursor:pointer;border:0} .kpi.add:hover{filter:brightness(1.08)} /* ============ ไทล์เมนู ============ */ .grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px} .grid.g2{grid-template-columns:repeat(2,minmax(0,1fr))} .tile{background:var(--tile);border-radius:26px;padding:20px 10px 18px;text-align:center;text-decoration:none;color:var(--ink); display:flex;flex-direction:column;align-items:center;gap:12px;transition:background .16s ease} .tile:hover{background:var(--pill)} .tile .ic,.itile{width:44px;height:44px;flex:0 0 44px;border-radius:50%;background:var(--pill); display:grid;place-items:center;position:relative;color:var(--accent)} .tile .ic .ico,.itile .ico{width:21px;height:21px;stroke:currentColor} .tile .lb{font-size:12.5px;font-weight:500;color:var(--ink3)} .tile .badge{position:absolute;top:-5px;right:-5px;min-width:19px;height:19px;padding:0 5px;border-radius:999px; background:var(--accent);color:#fff;font-size:10.5px;font-weight:600;display:flex;align-items:center;justify-content:center} /* ============ แถวรายการ ============ */ .list .it{display:flex;align-items:center;gap:12px;border-top:1px solid var(--line);padding:14px 0} .list .it:first-child{border-top:0} .kv{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:6px 0} .kv b{font-weight:500} .itile{color:var(--accent)} /* ============ ฟอร์ม ============ */ label{display:block;margin:16px 0 7px;font-size:13px;font-weight:500;color:var(--ink3)} input,select,textarea{width:100%;height:48px;padding:0 18px;border:1px solid var(--input);border-radius:999px; background:var(--tile);color:var(--ink);font-size:15px;font-family:inherit;outline:none;transition:border-color .14s ease} textarea{height:auto;min-height:96px;padding:14px 18px;border-radius:20px;resize:vertical} input:focus,select:focus,textarea:focus{border-color:var(--accent)} select option{background:var(--card);color:var(--ink)} input[type=file]{padding:12px 16px;height:auto} input[type=checkbox],input[type=radio]{width:auto;height:auto;accent-color:var(--accent)} /* ============ ปุ่ม ============ */ .btn{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;height:50px;margin-top:18px; border:0;border-radius:999px;background:var(--accent);color:#fff;font-size:14.5px;font-weight:500; font-family:inherit;text-decoration:none;cursor:pointer;transition:filter .14s ease} .btn:hover{filter:brightness(1.08)} .btn:active{transform:scale(.995)} .btn.sec{background:var(--tile);color:var(--ink3)} .btn.sec:hover{background:var(--pill);color:var(--ink);filter:none} /* ปุ่มสถานะ: โหมดมืดสีพื้นสว่าง ต้องใช้ตัวอักษรเข้มถึงจะอ่านออก */ .btn.ok{background:var(--pos);color:#06130C} .btn.bad{background:var(--neg);color:#2A0A0B} .btn.warn{background:var(--warnc);color:#241802} html[data-theme="light"] .btn.ok, html[data-theme="light"] .btn.bad, html[data-theme="light"] .btn.warn{color:#fff} .btn:disabled{opacity:.45;cursor:not-allowed} .btn.sm{width:auto;height:auto;display:inline-flex;margin:8px 8px 0 0;padding:11px 20px;font-size:13.5px} /* ============ pill / chip / seg ============ */ .pill{display:inline-flex;align-items:center;border-radius:999px;padding:5px 12px;font-size:13px;font-weight:500;line-height:1.35; background:var(--pill);color:var(--ink3)} .pill.ok{color:var(--pos);background:var(--posbg)} .pill.warn{color:var(--warnc);background:var(--warnbg)} .pill.bad{color:var(--neg);background:var(--negbg)} .pill.info{color:var(--infoc);background:var(--infobg)} .chips{display:flex;flex-wrap:wrap;gap:8px} .chip{border:0;border-radius:999px;padding:11px 18px;background:var(--tile);color:var(--ink3); font-size:13.5px;font-family:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:background .14s ease} .chip:hover{background:var(--pill)} .chip.on{background:var(--accent);color:#fff;font-weight:500} .chip.off{background:var(--tile);color:var(--faint);opacity:.6} .wd{margin:5px 6px 0 0} .wd.on{background:var(--accent);color:#fff} .seg{display:flex;align-items:center;gap:2px;padding:5px;border-radius:999px;background:var(--tile);max-width:100%;flex-wrap:wrap} .seg button{flex:1;height:auto;padding:11px 20px;border:0;border-radius:999px;background:transparent;color:var(--ink3); font-size:13.5px;font-family:inherit;cursor:pointer;white-space:nowrap} .seg button.on{background:var(--accent);color:#fff;font-weight:500} /* ============ ตาราง ============ */ table{width:100%;border-collapse:collapse;font-size:14px} th{padding:14px 12px;font-size:13px;font-weight:400;color:var(--muted);text-align:left; border-bottom:1px solid var(--line);white-space:nowrap} td{padding:14px 12px;color:var(--ink3);border-top:1px solid var(--line);vertical-align:middle} tbody tr:first-child td{border-top:0} .dtable{width:100%;border-collapse:collapse;font-size:13.5px;white-space:nowrap} .dtable thead th{padding:13px 14px;font-size:13px;font-weight:400;color:var(--muted);text-align:left; background:transparent;border-bottom:1px solid var(--line)} .dtable tbody td{padding:13px 14px;color:var(--ink3);border-top:1px solid var(--line);border-bottom:0} .dtable tbody tr:first-child td{border-top:0} .dtable tbody tr.clickable{cursor:pointer} .dtable tbody tr.clickable:hover td{background:var(--tile)} .dtable tbody tr.grp td{background:var(--tile);color:var(--accent);font-weight:500;font-size:12.5px; letter-spacing:.2px;padding:9px 14px} .dtable tbody tr.grp td .iic{vertical-align:-2px;margin-right:4px} .av{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:600;flex:0 0 auto; background:var(--pill);color:var(--ink2)} /* สีอวาตาร์ 6 เฉด — ใช้โทเคน จะได้เปลี่ยนตามโหมดเอง */ .av.c1{background:var(--negbg);color:var(--accent)} .av.c2{background:var(--warnbg);color:var(--warnc)} .av.c3{background:var(--infobg);color:var(--infoc)} .av.c4{background:var(--posbg);color:var(--pos)} .av.c5{background:var(--track);color:var(--ink2)} .av.c6{background:var(--pill);color:var(--ink3)} /* ============ ปฏิทินกะ ============ */ .cal{display:grid;grid-template-columns:repeat(7,minmax(96px,1fr));gap:8px;min-width:700px} .cal .h{text-align:center;font-size:12px;color:var(--muted);padding:4px 0} .cal .cell{min-height:96px;border-radius:18px;padding:9px 10px;background:var(--tile);overflow:hidden} .cal .cell.empty{background:transparent;padding:0} .cal .cell.today{box-shadow:inset 0 0 0 1px var(--accent)} .cal .cell.holi{background:var(--negbg)} .cal .cell .dn{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;font-size:12.5px;font-weight:500;color:var(--ink)} .cal .cell .dn .hx{font-size:9.5px;color:var(--neg)} .cal .ev{border-radius:9px;padding:3px 7px;margin-bottom:4px;font-size:10px;line-height:1.4} .cal .ev .nm{color:#fff;font-weight:500;font-size:9.5px} .cal .ev .pp{color:rgba(255,255,255,.92)} .cal .ev.empty{background:var(--pill)} .cal .ev.empty .nm{color:var(--muted)} .cal .ev.empty .pp{color:var(--faint)} .cal .off{font-size:9.5px;color:var(--faint)} /* ============ สื่อ / PIN / โน้ต ============ */ .thumb{width:56px;height:56px;border-radius:16px;object-fit:cover;background:var(--tile)} .cam{width:100%;border-radius:22px;background:#000;aspect-ratio:3/4;object-fit:cover} canvas{display:none} .pincells{display:flex;gap:9px} .pincells .pc{flex:1;height:52px;border:1px solid var(--input);border-radius:16px;background:var(--tile); display:grid;place-items:center;font-size:20px;color:var(--accent)} .pincells .pc.filled{background:var(--pill)} .pincells .pc.active{border-color:var(--accent)} .note{background:var(--negbg);color:var(--accent);border-radius:20px;padding:14px 20px;font-size:13.5px;margin:12px 0} .toast{position:fixed;left:50%;bottom:104px;transform:translateX(-50%);z-index:9999;max-width:90%; padding:13px 22px;border-radius:999px;background:var(--pill);color:var(--ink);font-size:13.5px; box-shadow:var(--pop);opacity:0;transition:opacity .2s ease} .toast.show{opacity:1} /* ============ แถบล่าง (พนักงาน) ============ */ .botnav{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);z-index:30; width:calc(100% - 24px);max-width:460px;display:flex;align-items:center;justify-content:space-around;gap:4px; padding:8px;border-radius:999px;background:var(--card);box-shadow:var(--pop)} .botnav a{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 0; border-radius:999px;text-decoration:none;color:var(--muted);font-size:10.5px} .botnav a.on{color:var(--accent);background:var(--tile)} .botnav a .ico{width:21px;height:21px} .botnav .fab{flex:0 0 52px;width:52px;height:52px;padding:0;border-radius:50%;background:var(--accent);color:#fff; display:grid;place-items:center} .botnav .fab .ico{width:23px;height:23px} .botnav .fab.on{background:var(--accent);color:#fff} /* ============ โครงหน้า HR (เดสก์ท็อป) ============ */ .hr-shell{display:flex;min-height:100vh;background:var(--ground)} .hr-side{width:262px;flex:0 0 262px;position:sticky;top:0;height:100vh;overflow-y:auto; display:flex;flex-direction:column;padding:26px 16px 18px;background:var(--bigcard);border-right:1px solid var(--line)} .hr-side .logobox{padding:0 8px;margin-bottom:28px} .hr-side .logobox .brandlogo{height:26px} .hr-side .seclabel{padding:18px 14px 8px;color:var(--muted);font-size:9px;font-weight:700;letter-spacing:.16em;text-transform:uppercase} .hr-side .nav{flex:1;display:grid;gap:3px;align-content:start} .hr-side .nav a{min-height:44px;display:flex;align-items:center;gap:12px;padding:0 13px;border-radius:999px; color:var(--dim);font-size:13.5px;text-decoration:none;cursor:pointer} .hr-side .nav a .ic{width:20px;display:flex;justify-content:center} .hr-side .nav a .ico{width:18px;height:18px} .hr-side .nav a:not(.on):hover{color:var(--ink);background:var(--tile)} .hr-side .nav a.on{background:var(--accent);color:#fff;font-weight:500} .hr-side .foot{margin-top:auto;display:flex;align-items:center;gap:10px;padding:15px 6px 0;border-top:1px solid var(--line)} .hr-side .foot .av{width:34px;height:34px;border-radius:50%;background:var(--accent);color:#fff;font-size:12px;font-weight:600} .hr-side .foot .nm{flex:1;min-width:0;font-size:12.5px;font-weight:500;color:var(--ink);line-height:1.25} .hr-side .foot .nm small{display:block;margin-top:4px;color:var(--muted);font-weight:400;font-size:10.5px;letter-spacing:.06em} .hr-side .foot button{margin-left:auto;border:0;background:transparent;color:var(--muted);cursor:pointer;padding:4px} .hr-side .foot button:hover{color:var(--accent)} .hr-main{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--ground)} .hr-top{display:flex;align-items:center;gap:16px;padding:var(--pagepad) var(--pagepad) 0;background:transparent} .hr-top .t{flex:1;min-width:0;font-size:26px;font-weight:600;letter-spacing:-.02em;color:var(--ink)} .hr-top .t small{display:block;margin-top:5px;font-size:12.5px;font-weight:400;color:var(--muted);letter-spacing:0} .hr-top a,.hr-top .backlink{display:inline-flex;align-items:center;height:38px;padding:0 16px;border-radius:999px; background:var(--pill);color:var(--ink3)!important;font-size:12.5px;text-decoration:none;flex:0 0 auto} .hr-top a:hover{color:var(--ink)!important} .hr-body{margin:20px var(--pagepad) var(--pagepad);padding:var(--zonepad);background:var(--shell);border-radius:var(--rad); flex:1;min-width:0} .hr-body>#view>*:first-child,.hr-body .card:first-child{margin-top:0} .hr-burger{display:none;width:44px;height:44px;flex:0 0 44px;border:0;border-radius:50%;background:var(--pill); color:var(--ink);font-size:17px;cursor:pointer} .hr-backdrop{display:none} /* ============ drawer ============ */ .drawer-ov{position:fixed;inset:0;z-index:8000;background:rgba(0,0,0,.55);animation:rvFade .2s ease} .drawer{position:fixed;top:0;right:0;z-index:8001;height:100vh;width:460px;max-width:94vw; display:flex;flex-direction:column;background:var(--card);border-radius:28px 0 0 28px; box-shadow:var(--pop);animation:rvSlideIn .25s ease;overflow:hidden} @keyframes rvSlideIn{from{transform:translateX(100%)}to{transform:none}} .drawer .dh{display:flex;align-items:center;gap:14px;padding:22px 24px;background:var(--tile);color:var(--ink)} .drawer .dh .av{width:46px;height:46px;border-radius:50%;background:var(--accent);color:#fff;font-size:17px} .drawer .db{flex:1 1 auto;min-height:0;overflow-y:auto;padding:22px 24px} .drawer .df{flex:0 0 auto;display:flex;gap:10px;padding:16px 24px;background:var(--card);border-top:1px solid var(--line)} .drawer .seclabel{margin:20px 0 9px;font-size:9px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)} .drawer .seclabel:first-child{margin-top:0} .drawer .card{background:var(--tile)} /* ============ หน้าเข้าสู่ระบบ ============ */ .auth{min-height:100vh;display:flex;gap:var(--pagepad);padding:var(--pagepad);background:var(--ground)} .auth .form{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;padding:var(--zonepad); background:var(--shell);border-radius:var(--rad)} .auth .form .inner{width:100%;max-width:390px;animation:rvFade .4s ease} .auth .hero{flex:1;min-width:0;display:none;flex-direction:column;justify-content:flex-end;position:relative;overflow:hidden; padding:46px;border-radius:var(--rad);background:var(--accent);color:#fff} .auth .hero .ring{position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.22)} .auth .hero .ring.a{width:380px;height:380px;top:-90px;right:-90px} .auth .hero .ring.b{width:300px;height:300px;bottom:-130px;left:-70px} .auth .hero .url{position:absolute;top:44px;right:46px;font-size:12.5px;color:rgba(255,255,255,.72);letter-spacing:.06em} .auth .hero h2{max-width:440px;font-size:34px;font-weight:600;line-height:1.2;color:#fff} .auth .hero p{max-width:430px;font-size:15px;line-height:1.65;color:rgba(255,255,255,.86)} .auth .hero .stats{display:flex;gap:24px;margin-top:34px} .auth .hero .stats .n{font-size:24px;font-weight:600;letter-spacing:-.5px} .auth .hero .stats small{font-size:12px;color:rgba(255,255,255,.78)} .auth .hero .stats .div{width:1px;background:rgba(255,255,255,.24)} @media(min-width:900px){.auth .hero{display:flex}} /* ============ ปุ่มสลับโหมด (เหมือน report) ============ */ .theme-toggle{width:48px;height:48px;flex:0 0 48px;padding:0;border:0;border-radius:50%; background:var(--pill);color:var(--ink);display:grid;place-items:center;cursor:pointer} .theme-toggle svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .theme-toggle:not(.in-header){position:fixed;top:18px;right:18px;z-index:7990;box-shadow:var(--pop)} .topred .theme-toggle.in-header{background:var(--tile)} /* ============ responsive ============ */ @media(max-width:1024px){ :root{--pagepad:20px;--zonepad:20px} .kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px} } @media(max-width:859px){ .hr-side{position:fixed;left:0;top:0;z-index:50;width:270px;flex-basis:270px;transform:translateX(-100%); transition:transform .22s ease;box-shadow:var(--pop)} .hr-side.open{transform:translateX(0)} .hr-burger{display:grid;place-items:center;order:1} .hr-backdrop.open{display:block;position:fixed;inset:0;z-index:40;background:rgba(0,0,0,.55)} /* จอแคบ: ปุ่มอยู่แถวบน หัวเรื่องลงมาเต็มบรรทัดล่าง จะได้ไม่ทับกัน */ .hr-top{flex-wrap:wrap;gap:10px} .hr-top .theme-toggle.in-header{order:2;margin-left:auto} .hr-top a{order:3} .hr-top .t{order:4;flex:1 1 100%;font-size:21px} .kpis{grid-template-columns:minmax(0,1fr)} } @media(max-width:640px){ :root{--pagepad:10px;--zonepad:16px;--rad:26px} .wrap,.page{margin:var(--pagepad) auto;border-radius:var(--rad)} header.bar{padding:var(--pagepad) 6px 14px} header.bar .t{font-size:19px} .card{padding:18px;border-radius:20px;margin:14px 0} .kpi{padding:18px;border-radius:22px} .kpi .n{font-size:27px} .kpi .l{font-size:14px;margin-top:8px} .tile{border-radius:22px;padding:16px 8px 14px} .grid{gap:9px} .hr-body{margin:14px var(--pagepad) var(--pagepad);padding:var(--zonepad);border-radius:var(--rad)} .hr-top{padding:var(--pagepad) var(--pagepad) 0;gap:12px} .drawer{border-radius:24px 0 0 24px} .drawer .dh,.drawer .db,.drawer .df{padding-left:18px;padding-right:18px} .auth{padding:var(--pagepad)} .auth .form{padding:22px 16px;border-radius:var(--rad)} table,.dtable{font-size:13px} th,td,.dtable thead th,.dtable tbody td{padding:11px 10px} .cal{grid-template-columns:repeat(7,minmax(84px,1fr))} } @media(hover:none){.seg button,.chip,.btn{-webkit-tap-highlight-color:transparent;touch-action:manipulation}}