:root{--navy:#102744;--navy2:#1e4167;--blue:#246dda;--ink:#19324f;--muted:#677e97;--line:#d8e4ef;--bg:#eef4f9;--surface:#fff;--shadow-card:0 10px 28px #173d6510}
html,body{font-family:'IBM Plex Sans Thai',Tahoma,sans-serif!important}
body,button,input,select,textarea,.brand,.counter,.stat strong,.mini b,.report-kpis b,.asset-card h3,.report-bars strong,.avatar,.asset-pager button,.pager-numbers button,.location-site-filter button,.mobile-nav button,.mobile-drawer button{font-family:'IBM Plex Sans Thai',Tahoma,sans-serif!important}
body:not(.local-auth-page){background:radial-gradient(circle at 68% -10%,#dcecff 0,transparent 29%),linear-gradient(180deg,#edf4fb 0,#f4f8fc 65%,#f1f6fb 100%);color:#19324f;font-size:14px}
body:not(.local-auth-page) .shell{grid-template-columns:276px minmax(0,1fr)}
body:not(.local-auth-page) .sidebar{background:radial-gradient(circle at 0 0,#234d7c 0,transparent 38%),linear-gradient(180deg,#122d4c,#0c2039 78%);border-right:1px solid #36567555;box-shadow:8px 0 28px #112c4a13}
body:not(.local-auth-page) .brand{font-size:23px;font-weight:600;letter-spacing:-.035em}
body:not(.local-auth-page) .brand-mark{background:linear-gradient(145deg,#71c0ff,#2d7de7 60%,#1d57b4);box-shadow:0 8px 19px #1254a755}
body:not(.local-auth-page) .workspace{border-color:#6085a14a;background:#ffffff12;box-shadow:inset 0 1px #ffffff16}
body:not(.local-auth-page) .menu-label{color:#a9c1d8;font-size:12px;font-weight:600;letter-spacing:.02em}
body:not(.local-auth-page) .menu button{min-height:49px;color:#d6e5f3;border-radius:11px;font-size:15px;font-weight:500;transition:background .16s,color .16s,transform .16s}
body:not(.local-auth-page) .menu button:hover{transform:translateX(2px);background:#ffffff16;color:#fff}
body:not(.local-auth-page) .menu button.active{background:linear-gradient(95deg,#286fcb,#2054a1);color:#fff;box-shadow:0 6px 17px #081b3580,inset 0 1px #ffffff32}
body:not(.local-auth-page) .menu button.active i{color:#e0f1ff}
body:not(.local-auth-page) .topbar{background:#ffffffed;border-bottom:1px solid #d5e3f0;box-shadow:0 6px 20px #1b42690c;backdrop-filter:blur(14px)}
body:not(.local-auth-page) .search{border:1px solid #dce8f3;background:#f6f9fd}
body:not(.local-auth-page) .bell{border-color:#dce8f3;box-shadow:0 2px 7px #1c43620a}
body:not(.local-auth-page) .content{max-width:1580px;padding-top:32px}
body:not(.local-auth-page) .hero,body:not(.local-auth-page) .page-head{position:relative;align-items:center;margin-bottom:20px;padding:21px 24px;border:1px solid #dae7f1;border-radius:18px;background:linear-gradient(110deg,#fff 68%,#f0f7ff);box-shadow:0 8px 26px #1b46610d}
body:not(.local-auth-page) .hero:before,body:not(.local-auth-page) .page-head:before{content:'';position:absolute;left:0;top:23px;bottom:23px;width:4px;border-radius:0 4px 4px 0;background:#347fec}
body:not(.local-auth-page) .eyebrow{color:#3770ae;font-size:12px;font-weight:600;letter-spacing:.04em}
body:not(.local-auth-page) h1,body:not(.local-auth-page) .hero h1,body:not(.local-auth-page) .page-head h1{color:#122d4c;font-size:clamp(25px,2.3vw,33px);font-weight:600;letter-spacing:-.035em;line-height:1.3}
body:not(.local-auth-page) .sub{color:#526b84;font-size:15px}
body:not(.local-auth-page) .panel,body:not(.local-auth-page) .stat,body:not(.local-auth-page) .mini,body:not(.local-auth-page) .station-card,body:not(.local-auth-page) .asset-card,body:not(.local-auth-page) .ma-plan-card,body:not(.local-auth-page) .location-site-group,body:not(.local-auth-page) .checklist-template-card{border:1px solid #d9e5f0;border-radius:16px;background:#fff;box-shadow:0 10px 28px #193e6310}
body:not(.local-auth-page) .panel header{border-bottom-color:#edf2f7}
body:not(.local-auth-page) .panel h2{color:#1b3959;font-size:17px;font-weight:600}
body:not(.local-auth-page) .stat{min-height:142px;padding:20px;box-shadow:0 10px 25px #1e426213}
body:not(.local-auth-page) .stat:before{width:4px;opacity:1}
body:not(.local-auth-page) .stat strong,body:not(.local-auth-page) .mini b,body:not(.local-auth-page) .report-kpis b{color:#123052;font-weight:600;font-variant-numeric:tabular-nums}
body:not(.local-auth-page) .stat small,body:not(.local-auth-page) .mini small{font-size:11px;font-weight:500;letter-spacing:0}
body:not(.local-auth-page) .btn,body:not(.local-auth-page) .text-btn{border-radius:10px;font-size:14px;font-weight:600;min-height:42px;transition:background .17s,color .17s,border-color .17s,box-shadow .17s,transform .17s}
body:not(.local-auth-page) .btn.primary,body:not(.local-auth-page) .primary{background:linear-gradient(110deg,#327feb,#205fcb);border-color:#2c70d6;color:#fff;box-shadow:0 6px 14px #2262c82e}
body:not(.local-auth-page) .btn.primary:hover,body:not(.local-auth-page) .primary:hover{transform:translateY(-2px);background:linear-gradient(110deg,#448ef0,#1b56bd);box-shadow:0 10px 18px #2058bc3d}
body:not(.local-auth-page) .btn.secondary,body:not(.local-auth-page) .secondary{background:#fff;border-color:#cfdfee;color:#335a80}
body:not(.local-auth-page) .btn.secondary:hover,body:not(.local-auth-page) .secondary:hover{background:#edf6ff;border-color:#8fbbea;color:#1c65c1}
body:not(.local-auth-page) .text-btn{background:#eff6ff!important;border-color:#c9e0f8!important;color:#216ac7!important}
body:not(.local-auth-page) .text-btn:hover{background:#276ed8!important;border-color:#276ed8!important;color:#fff!important;transform:translateY(-1px)}
body:not(.local-auth-page) .asset-card:hover,body:not(.local-auth-page) .station-card:hover,body:not(.local-auth-page) .location-card:hover{border-color:#9bc5ec;box-shadow:0 15px 33px #1c559b23}
body:not(.local-auth-page) .detail{border-color:#dce8f3;background:#fafdff}
body:not(.local-auth-page) .table-wrap{border-color:#d9e5f0;box-shadow:0 5px 14px #193e6209}
body:not(.local-auth-page) th{background:#edf5fd;border-bottom-color:#cfdfed;color:#385b7b;font-size:13px;font-weight:600;letter-spacing:0}
body:not(.local-auth-page) td{border-bottom-color:#e8eff6;font-size:14px}
body:not(.local-auth-page) tbody tr:hover td{background:#f1f7fe}
body:not(.local-auth-page) .modal{border-color:#d8e6f2;box-shadow:0 28px 75px #1027444d}
body:not(.local-auth-page) .modal h2{color:#173653;font-size:19px;font-weight:600}
body:not(.local-auth-page) .form label{font-size:14px;font-weight:500}
body:not(.local-auth-page) .form input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]),body:not(.local-auth-page) .form select,body:not(.local-auth-page) .form textarea{border-color:#cfdfed;background:#fbfdff;font-size:15px}
body:not(.local-auth-page) .form input:focus,body:not(.local-auth-page) .form select:focus,body:not(.local-auth-page) .form textarea:focus{border-color:#3682e8;box-shadow:0 0 0 3px #3682e81c}
@media(max-width:1100px){body:not(.local-auth-page) .shell{grid-template-columns:250px minmax(0,1fr)}}
@media(max-width:700px){body:not(.local-auth-page) .shell{display:block}body:not(.local-auth-page) .content{padding:17px 14px 29px}body:not(.local-auth-page) .hero,body:not(.local-auth-page) .page-head{align-items:flex-start;padding:17px 17px 19px;border-radius:15px}body:not(.local-auth-page) .hero:before,body:not(.local-auth-page) .page-head:before{top:18px;bottom:18px}body:not(.local-auth-page) .hero h1,body:not(.local-auth-page) .page-head h1{font-size:25px}body:not(.local-auth-page) .actions .btn{font-size:11px}body:not(.local-auth-page) .panel,body:not(.local-auth-page) .stat,body:not(.local-auth-page) .asset-card{border-radius:14px}body:not(.local-auth-page) .mobile-nav{background:#fff;border-top-color:#d4e2f0;box-shadow:0 -7px 20px #173d6020}body:not(.local-auth-page) .mobile-nav button{font-size:10px}body:not(.local-auth-page) #topbar.topbar{background:#ffffffee}}
@media(prefers-reduced-motion:reduce){body:not(.local-auth-page) .btn,body:not(.local-auth-page) .text-btn,body:not(.local-auth-page) .menu button{transition:none}}

/* Site scope and legible controls for real daily work. */
body:not(.local-auth-page) .sidebar{padding-inline:17px}
body:not(.local-auth-page) .brand{padding-bottom:23px}
body:not(.local-auth-page) .brand small{font-size:11px;color:#b9cee1;letter-spacing:0;font-weight:400}
body:not(.local-auth-page) .menu{gap:3px}
body:not(.local-auth-page) .menu button{width:100%;gap:13px;padding:10px 13px;line-height:1.35}
body:not(.local-auth-page) .menu button i{width:22px;flex:none;font-size:18px}
body:not(.local-auth-page) .menu .counter{margin-left:auto;flex:none;min-width:31px;padding:3px 8px;background:#325c86;color:#fff;font-size:12px;text-align:center}
body:not(.local-auth-page) .menu-label{padding:16px 12px 7px}
body:not(.local-auth-page) .sidebar .hint{font-size:12px;color:#aac0d4}
.site-switcher{display:grid;gap:7px;margin:0 0 18px;padding:14px;border:1px solid #7aa0c95c;border-radius:13px;background:#ffffff12}
.site-switcher label{color:#b8d2ec;font-size:12px;font-weight:600}
.site-switcher select,.mobile-site-switcher select{width:100%;min-width:0;min-height:45px;padding:9px 32px 9px 11px;border:1px solid #8aaed088;border-radius:9px;background:#f7fbff;color:#143452;font-size:14px;font-weight:600;cursor:pointer;appearance:auto}
.site-switcher select:focus-visible,.mobile-site-switcher select:focus-visible{outline:3px solid #80bbff;outline-offset:2px}
.site-switcher small{color:#c1d5e8;font-size:12px}
.site-context-note{display:flex;align-items:center;gap:9px;flex-wrap:wrap;width:max-content;max-width:100%;margin:0 0 14px;padding:8px 12px;border:1px solid #d4e5f5;border-radius:999px;background:#fff;color:#3c5b78;font-size:13px}
.site-context-note b{font-size:13px;color:#145bb3}
.site-context-note label{font-size:13px;font-weight:600}
.site-context-note select{max-width:min(420px,45vw);min-height:32px;padding:3px 27px 3px 7px;border:0;border-radius:7px;background:#edf5ff;color:#134e92;font-size:13px;font-weight:600;cursor:pointer}
.site-context-note select:focus-visible{outline:3px solid #80bbff;outline-offset:2px}
.site-context-dot{width:8px;height:8px;border-radius:50%;background:#20aa83;box-shadow:0 0 0 3px #20aa8322}
body:not(.local-auth-page) .panel header p,body:not(.local-auth-page) .asset-card p,body:not(.local-auth-page) .station-card p,body:not(.local-auth-page) .detail small{font-size:13px}
body:not(.local-auth-page) .asset-card h3,body:not(.local-auth-page) .location-card h3{font-size:18px}
body:not(.local-auth-page) .detail b{font-size:15px}
body:not(.local-auth-page) .filter-row input,body:not(.local-auth-page) .filter-row select{min-height:44px;font-size:14px}
body:not(.local-auth-page) .btn:focus-visible,body:not(.local-auth-page) .text-btn:focus-visible,body:not(.local-auth-page) .menu button:focus-visible{outline:3px solid #6fb0ff;outline-offset:2px}
@media(max-width:700px){
  body:not(.local-auth-page) .content{padding:18px 15px 95px}
  body:not(.local-auth-page) .sub{font-size:14px}
  body:not(.local-auth-page) .actions .btn{min-height:46px;font-size:14px}
  body:not(.local-auth-page) .mobile-nav button{font-size:12px;line-height:1.25}
  body:not(.local-auth-page) .mobile-drawer button{font-size:16px;min-height:48px}
  .mobile-site-switcher{display:grid;gap:7px;margin:8px 0 15px;padding:13px;border:1px solid #d3e3f3;border-radius:12px;background:#edf5fd}
  .mobile-site-switcher label{font-size:13px;font-weight:600;color:#385a7b}
  .site-context-note{width:100%;border-radius:11px;font-size:13px}
  .site-context-note select{flex:1;max-width:none;min-width:0}
  .site-context-note b{width:100%;padding-left:17px}
  .users-table-wrap{overflow:visible}
  .users-table-wrap table.users-table,.users-table tbody,.users-table tr{display:block;width:100%;min-width:0}
  .users-table thead{display:none}
  .users-table tr{margin:0 0 12px;padding:13px;border:1px solid #d8e6f3;border-radius:12px;background:#fff;box-shadow:0 5px 12px #123b6110}
  .users-table td{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;width:100%;padding:6px 0;border:0;white-space:normal;text-align:right;overflow-wrap:anywhere}
  .users-table td:before{content:attr(data-label);flex:none;color:#627d98;font-weight:500;text-align:left}
  .users-table td:first-child{font-size:16px}
}