*{box-sizing:border-box}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#f3f6fa;color:#122033}a{text-decoration:none;color:inherit}.topbar{height:72px;background:#fff;border-bottom:1px solid #e6ebf2;display:flex;align-items:center;justify-content:space-between;padding:0 6%;position:sticky;top:0;z-index:10}.topbar nav{display:flex;gap:24px;align-items:center;font-size:14px}.brand{font-weight:850;letter-spacing:-.4px}.btn{display:inline-flex;border:0;border-radius:10px;background:#10233c;color:#fff;padding:11px 16px;font-weight:750;cursor:pointer;align-items:center;justify-content:center}.btn.small{padding:7px 10px;font-size:12px}.btn.ghost{background:#fff;color:#122033;border:1px solid #d6dee8}.btn.danger{background:#b42318}.hero{max-width:1180px;margin:auto;padding:90px 24px;display:grid;grid-template-columns:1.3fr .7fr;gap:70px;align-items:center}.eyebrow{font-size:12px;font-weight:850;letter-spacing:1.4px;color:#4b6279}.hero h1,.section h1{font-size:54px;line-height:1.04;margin:16px 0}.hero h1 span{color:#2f6bff}.hero p{font-size:19px;line-height:1.7;color:#5c6c7e;max-width:690px}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}.hero-card{background:#122033;color:#fff;border-radius:24px;padding:34px;box-shadow:0 20px 60px rgba(18,32,51,.18)}.mini-top{font-size:12px;opacity:.7;letter-spacing:1px}.big-num{font-size:58px;font-weight:800;margin-top:12px}.progress{height:9px;background:#2d3c50;border-radius:10px;margin:25px 0}.progress span{display:block;width:88%;height:100%;background:#6ee7b7;border-radius:10px}.mini-grid,.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.mini-grid div,.stats div{background:rgba(255,255,255,.08);padding:14px;border-radius:12px}.mini-grid small,.stats small{display:block;opacity:.65;margin-top:4px}.section{max-width:1180px;padding:75px 24px;margin:auto}.section.narrow{max-width:900px}.section-head{display:flex;justify-content:space-between;align-items:end;gap:12px;margin-bottom:20px}.section h2{font-size:32px;margin:0}.grid3,.grid2{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.grid2{grid-template-columns:1fr 1fr}.card{background:#fff;border:1px solid #e5ebf2;border-radius:18px;padding:24px;box-shadow:0 5px 18px rgba(18,32,51,.04)}.card h2,.card h3{margin-top:0}.card p{color:#64748b;line-height:1.7}.icon{font-size:30px}.form{display:grid;gap:14px}.form.inline{grid-template-columns:2fr 1fr auto;align-items:center}.form input,.form textarea,.form select,.search{width:100%;padding:11px 13px;border:1px solid #d7dfe9;border-radius:10px;background:#fff;font:inherit}.grid-form{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.grid-form label{display:flex;flex-direction:column;gap:7px;font-size:13px;font-weight:700;color:#405266}.grid-form label textarea{resize:vertical}.form-actions{grid-column:1/-1;display:flex;gap:10px;padding-top:6px}.login-box{max-width:460px;margin:20px auto;background:#fff;padding:32px;border-radius:20px}.alert{max-width:100%;margin:16px 0;padding:13px 16px;border-radius:10px;background:#eef2f7;transition:opacity .5s}.alert.success{background:#e7f8ef;color:#17663c}.alert.error{background:#fdecec;color:#9b1c1c}.alert.fade{opacity:.4}.muted,small{color:#6b7a8c}.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px}.kpi{background:#fff;border:1px solid #e5eaf0;border-radius:14px;padding:19px}.kpi span{display:block;color:#6b7a8c;font-size:12px}.kpi strong{display:block;font-size:30px;margin-top:8px}.app{display:flex;background:#f3f6fa}.sidebar{width:260px;background:#101c2d;color:#eaf0f6;min-height:100vh;padding:20px 13px;position:fixed;overflow:auto;top:0;bottom:0}.sidebar .brand{display:block;padding:8px 12px 18px;font-size:17px}.sidebar a{display:block;padding:9px 11px;margin:2px 0;border-radius:8px;color:#cbd5e1;font-size:13px}.sidebar a:hover{background:#1c2b40;color:#fff}.side-label{font-size:9px;color:#6e8095;font-weight:850;letter-spacing:1.2px;padding:17px 11px 6px}.app-main{margin-left:260px;width:calc(100% - 260px);padding:0 26px 40px}.appbar{min-height:96px;display:flex;justify-content:space-between;align-items:center;gap:12px}.appbar h1{margin:0 0 4px;font-size:26px}.appbar-actions{display:flex;gap:8px;align-items:center}.pill,.status{display:inline-block;padding:5px 9px;border-radius:999px;font-size:10px;font-weight:850;background:#eef2f7}.status.good{background:#e8f8ef;color:#17663c}.status.warn{background:#fff4da;color:#8a5b00}.status.critical{background:#fde7e7;color:#a11a1a}.toolbar{display:flex;gap:10px;align-items:center;justify-content:space-between;margin-bottom:16px}.toolbar form{flex:1}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:10px 9px;border-bottom:1px solid #edf0f4;font-size:12px;vertical-align:top}th{font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:#6b7a8c;background:#fafbfd}.list-row{display:flex;justify-content:space-between;gap:10px;padding:12px 0;border-bottom:1px solid #edf0f4}.list-row small{display:block;margin-top:4px}.placeholder-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.placeholder-grid div,.checkpoint{border:1px dashed #ccd5e0;border-radius:12px;padding:18px;background:#fafbfd}.checkpoint{display:flex;justify-content:space-between;align-items:center;margin:10px 0}.map-placeholder{min-height:360px;border-radius:16px;background:linear-gradient(135deg,#e9eef5,#dce4ed);display:flex;align-items:center;justify-content:center;color:#66788d;font-weight:800}.chart-bars{display:flex;align-items:end;gap:10px;height:200px}.chart-bars i{display:block;flex:1;background:#9db4cf;border-radius:8px 8px 0 0;min-height:18px}.metric-list{display:grid;gap:10px}.metric-row{display:grid;grid-template-columns:150px 1fr 60px;gap:10px;align-items:center;font-size:12px}.metric-row .bar{height:9px;background:#e8edf3;border-radius:20px;overflow:hidden}.metric-row .bar span{display:block;height:100%;background:#6d91b8}.tag{font-size:10px;border:1px solid #d8e0ea;padding:5px 7px;border-radius:7px;background:#fff}.grid-kpi{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}.empty{padding:28px;text-align:center;color:#7b8a9b}footer{border-top:1px solid #e6ebf2;background:#fff;padding:32px 6%;display:flex;justify-content:space-between;gap:25px}@media(max-width:1050px){.grid-kpi{grid-template-columns:repeat(3,1fr)}.cards{grid-template-columns:repeat(2,1fr)}.grid-form{grid-template-columns:1fr 1fr}}@media(max-width:900px){.hero{grid-template-columns:1fr;gap:35px;padding-top:55px}.hero h1,.section h1{font-size:42px}.grid3,.grid2{grid-template-columns:1fr}.sidebar{position:relative;width:220px}.app-main{margin-left:0;width:calc(100% - 220px);padding:0 16px}.form.inline{grid-template-columns:1fr 1fr}.placeholder-grid{grid-template-columns:1fr 1fr}.topbar nav{gap:12px}.topbar nav a:not(.btn){display:none}}@media(max-width:620px){.app{display:block}.sidebar{width:100%;min-height:auto;display:flex;overflow:auto;gap:4px;position:relative}.sidebar .brand,.side-label{display:none}.sidebar a{white-space:nowrap}.app-main{width:100%;padding:0 12px 24px}.form.inline,.grid-form{grid-template-columns:1fr}.grid-kpi,.cards{grid-template-columns:1fr 1fr}.hero,.section{padding-left:18px;padding-right:18px}.mini-grid,.stats{grid-template-columns:1fr}.appbar{min-height:84px}.appbar-actions .btn{display:none}}

/* INDUSTRIAL SECURITY SERVICE enhancements */
.lead{font-size:18px;line-height:1.75;color:#5c6c7e;max-width:780px}.trust-strip{display:flex;gap:18px;flex-wrap:wrap;margin-top:22px;color:#536679;font-size:13px;font-weight:700}.dark-section{background:#10233c;color:#fff;max-width:none;padding-left:calc((100% - 1180px)/2 + 24px);padding-right:calc((100% - 1180px)/2 + 24px)}.dark-section h2,.dark-section .eyebrow{color:#fff}.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.process-step{border:1px solid rgba(255,255,255,.14);padding:22px;border-radius:16px;background:rgba(255,255,255,.05)}.process-step strong,.process-step b,.process-step span{display:block}.process-step strong{font-size:12px;opacity:.55}.process-step b{font-size:18px;margin:12px 0 8px}.process-step span{color:#cbd5e1;line-height:1.6;font-size:13px}.action-card{display:block;color:inherit}.action-card small{display:block;margin-top:6px}.nowrap{white-space:nowrap}.contact-meta{display:flex;gap:16px;flex-wrap:wrap;margin-top:18px;color:#63758a;font-size:13px}.faq{background:#fff;border:1px solid #e5ebf2;border-radius:14px;padding:17px 20px;margin:10px 0}.faq summary{font-weight:800;cursor:pointer}.faq p{color:#617285;line-height:1.7}.grid-form label>span{font-weight:800}.sidebar .brand{line-height:1.25}.sidebar{scrollbar-width:thin}@media(max-width:900px){.process-grid{grid-template-columns:1fr 1fr}.dark-section{padding-left:18px;padding-right:18px}}@media(max-width:620px){.process-grid{grid-template-columns:1fr}.trust-strip{font-size:11px}}

/* ===================== Premium includes upgrade ===================== */

/* --- public site: info bar + nav --- */
.info-bar{background:#10233c;color:#cbd5e1;font-size:12px}
.info-bar-inner{max-width:1180px;margin:auto;padding:8px 6%;display:flex;gap:24px;align-items:center}
.info-bar a{color:#eaf0f6}
.info-bar-loc{margin-left:auto;opacity:.85}
.topbar nav a.active{color:#2f6bff;font-weight:800}
.topbar nav a.btn.active{color:#fff}
.nav-cta{margin-left:6px}
.nav-toggle{display:none;flex-direction:column;gap:4px;background:none;border:0;cursor:pointer;padding:8px}
.nav-toggle span{display:block;width:22px;height:2px;background:#122033;border-radius:2px}

/* --- premium footer --- */
footer.footer-premium{display:block;padding:48px 6% 24px}
.footer-grid{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr 1.4fr;gap:32px}
.footer-col h4{margin:0 0 12px;font-size:13px;letter-spacing:.4px;text-transform:uppercase;color:#122033}
.footer-col a{display:block;padding:5px 0;color:#5c6c7e}
.footer-col a:hover{color:#122033}
.footer-social{display:flex;gap:10px;margin-top:16px}
.footer-social span{width:34px;height:34px;border-radius:50%;background:#eef2f7;display:flex;align-items:center;justify-content:center;font-size:15px}
.footer-form{display:grid;gap:8px}
.footer-form textarea{resize:vertical;min-height:56px}
.footer-bottom{max-width:1180px;margin:32px auto 0;padding-top:20px;border-top:1px solid #e6ebf2;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}

/* --- admin sidebar: user card + active link --- */
.sidebar-user{display:flex;align-items:center;gap:10px;padding:10px 11px 16px;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:8px}
.sidebar-user strong{display:block;font-size:13px;color:#fff}
.sidebar-user small{display:block;color:#8ea0b6;font-size:11px;margin-top:2px}
.avatar{width:36px;height:36px;flex:0 0 36px;border-radius:50%;background:linear-gradient(135deg,#2f6bff,#6ee7b7);color:#0b1626;font-weight:850;font-size:13px;display:flex;align-items:center;justify-content:center}
.sidebar a.active{background:#1c2b40;color:#fff;box-shadow:inset 3px 0 0 #2f6bff}

/* --- admin appbar: search + notification bell --- */
.appbar-search{flex:1;max-width:360px}
.appbar-search input{width:100%;padding:10px 13px;border:1px solid #d7dfe9;border-radius:10px;font:inherit;background:#fff}
.notif-bell{position:relative;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:10px;background:#fff;border:1px solid #d6dee8;font-size:16px}
.notif-bell.has-alerts{border-color:#f3b8b8}
.notif-count{position:absolute;top:-6px;right:-6px;background:#b42318;color:#fff;font-size:10px;font-weight:800;border-radius:999px;min-width:17px;height:17px;display:flex;align-items:center;justify-content:center;padding:0 4px}

/* --- dashboard footer bar --- */
.dash-footer-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px 0 30px;flex-wrap:wrap}

@media(max-width:1050px){.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:900px){
  .nav-toggle{display:flex}
  .topbar nav{position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;align-items:stretch;gap:0;padding:8px 6% 16px;display:none;box-shadow:0 12px 24px rgba(18,32,51,.1)}
  .topbar nav.open{display:flex}
  .topbar nav.open a,.topbar nav.open a:not(.btn){display:block}
  .topbar nav a{padding:12px 4px;border-bottom:1px solid #f0f3f7}
  .info-bar-loc{display:none}
  .appbar-search{display:none}
}
@media(max-width:620px){.footer-grid{grid-template-columns:1fr}.footer-bottom{flex-direction:column;align-items:flex-start}}

/* =====================================================================
   PREMIUM DESIGN SYSTEM v3 — tokens, motion, components (additive only)
   Nothing above this line is modified or removed.
   ===================================================================== */
:root{
  --navy:#10233c;--navy-2:#0b1a2d;--ink:#122033;--blue:#2f6bff;--blue-2:#1d4fd6;
  --green:#6ee7b7;--red:#b42318;--amber:#8a5b00;--bg:#f3f6fa;--surface:#fff;
  --line:#e5ebf2;--muted:#6b7a8c;--muted-2:#5c6c7e;
  --radius-sm:8px;--radius:14px;--radius-lg:20px;--radius-xl:26px;
  --shadow-sm:0 2px 8px rgba(18,32,51,.06);
  --shadow:0 10px 30px rgba(18,32,51,.09);
  --shadow-lg:0 24px 60px rgba(18,32,51,.16);
  --ease:cubic-bezier(.4,0,.2,1);--ease-spring:cubic-bezier(.34,1.56,.64,1);
  --dur:.22s;
}
[data-theme="dark"]{
  --bg:#0b1420;--surface:#101c2d;--ink:#e9eef5;--line:#1f2d40;--muted:#8ea0b6;--muted-2:#9db0c4;
}
[data-theme="dark"] body{background:var(--bg);color:var(--ink)}
[data-theme="dark"] .card,[data-theme="dark"] .kpi,[data-theme="dark"] .login-box,
[data-theme="dark"] .faq,[data-theme="dark"] .topbar,[data-theme="dark"] footer.footer-premium,
[data-theme="dark"] th{background:var(--surface);color:var(--ink);border-color:var(--line)}
[data-theme="dark"] .app{background:var(--bg)}

*{scroll-behavior:smooth}
::selection{background:var(--blue);color:#fff}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:4px}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#c7d2e0;border-radius:20px;border:2px solid var(--bg)}
[data-theme="dark"] ::-webkit-scrollbar-thumb{background:#233247;border-color:var(--bg)}

/* --- motion utilities --- */
@keyframes fadeInUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes popIn{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}
@keyframes shimmer{0%{background-position:-400px 0}100%{background-position:400px 0}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes growUp{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes pulseDot{0%,100%{opacity:1}50%{opacity:.35}}
.reveal-up{opacity:0}
.reveal-up.in-view{animation:fadeInUp .6s var(--ease-spring) forwards}
.card,.kpi{will-change:transform,box-shadow}
.card.in-view,.kpi.in-view{animation:fadeInUp .55s var(--ease) both}

/* --- refined interactivity on existing components (non-destructive overrides) --- */
.btn{transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),background var(--dur) var(--ease),opacity var(--dur) var(--ease);position:relative;overflow:hidden}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(18,32,51,.18)}
.btn:active{transform:translateY(0) scale(.98)}
.btn.ghost:hover{background:#f5f8fc;box-shadow:none}
.btn.danger:hover{box-shadow:0 8px 20px rgba(180,35,24,.28)}
.btn[disabled],.btn.is-loading{opacity:.7;pointer-events:none}
.btn.is-loading{color:transparent!important}
.btn.is-loading::after{content:"";position:absolute;inset:0;margin:auto;width:16px;height:16px;border-radius:50%;
  border:2px solid rgba(255,255,255,.5);border-top-color:#fff;animation:spin .7s linear infinite}
.btn.ghost.is-loading::after{border-color:rgba(18,32,51,.25);border-top-color:var(--ink)}
.btn.icon-btn{width:38px;height:38px;padding:0;border-radius:10px}

.card{transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease);}
a.card:hover,.card.hoverable:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.card.gradient-navy{background:linear-gradient(135deg,var(--navy),var(--navy-2));color:#fff;border:0}
.card.gradient-navy p{color:#c9d6e6}

/* skeleton loading */
.skeleton{background:linear-gradient(90deg,#eef1f6 25%,#f7f9fc 37%,#eef1f6 63%);background-size:800px 100%;
  animation:shimmer 1.4s linear infinite;border-radius:8px;color:transparent!important}
.skeleton::selection{background:transparent}

/* status/badge extras */
.status.info{background:#e8f0fe;color:#1a4fb4}
.status.neutral{background:#eef1f6;color:#4b5b6d}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;background:var(--muted);vertical-align:middle}
.dot.good{background:#17663c}.dot.warn{background:#8a5b00}.dot.critical{background:#a11a1a;animation:pulseDot 1.4s ease-in-out infinite}

/* forms: focus rings + validation */
.form input,.form textarea,.form select,.search,.appbar-search input{
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);}
.form input:focus,.form textarea:focus,.form select:focus,.search:focus,.appbar-search input:focus{
  outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(47,107,255,.14)}
.form input:invalid:not(:placeholder-shown){border-color:#e3a3a3}
.field-error{color:var(--red);font-size:12px;margin-top:-6px;display:block}
.field-hint{color:var(--muted);font-size:12px;margin-top:-6px;display:block}
.input-group{position:relative}
.input-group .icon-prefix{position:absolute;left:12px;top:50%;transform:translateY(-50%);opacity:.55;font-size:14px}
.input-group input{padding-left:34px}

/* toggle switch */
.switch{position:relative;display:inline-block;width:42px;height:24px}
.switch input{opacity:0;width:0;height:0}
.switch .track{position:absolute;inset:0;background:#d7dfe9;border-radius:999px;transition:background var(--dur)}
.switch .track::before{content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;background:#fff;border-radius:50%;
  transition:transform var(--dur) var(--ease-spring);box-shadow:0 1px 3px rgba(0,0,0,.3)}
.switch input:checked + .track{background:var(--blue)}
.switch input:checked + .track::before{transform:translateX(18px)}

/* tables: sticky header, hover, sortable */
.table-wrap table{border-collapse:separate;border-spacing:0}
.table-wrap tbody tr{transition:background var(--dur)}
.table-wrap tbody tr:hover{background:#f7fafd}
.table-wrap th{position:sticky;top:0;z-index:2}
th[data-sort]{cursor:pointer;user-select:none;white-space:nowrap}
th[data-sort]::after{content:"↕";opacity:.35;margin-left:5px;font-size:10px}
th[data-sort].sort-asc::after{content:"↑";opacity:.9;color:var(--blue)}
th[data-sort].sort-desc::after{content:"↓";opacity:.9;color:var(--blue)}
.row-fade-in{animation:fadeIn .3s var(--ease) both}

/* sidebar collapse mode */
.sidebar{transition:width var(--dur) var(--ease)}
.sidebar.collapsed{width:76px}
.sidebar.collapsed .brand span,.sidebar.collapsed a span,.sidebar.collapsed .side-label,
.sidebar.collapsed .sidebar-user strong,.sidebar.collapsed .sidebar-user small{display:none}
.sidebar.collapsed + .app-main,.sidebar.collapsed ~ .app-main{margin-left:76px;width:calc(100% - 76px)}
.sidebar-collapse-btn{width:100%;text-align:left;background:none;border:0;color:#8ea0b6;padding:9px 11px;
  border-radius:8px;cursor:pointer;font-size:12px}
.sidebar-collapse-btn:hover{background:#1c2b40;color:#fff}
.sidebar a{transition:background var(--dur),box-shadow var(--dur)}

/* dropdown (used for notification bell etc.) */
.dropdown{position:relative;display:inline-block}
.dropdown-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:280px;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:8px;opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity var(--dur),transform var(--dur),visibility var(--dur);z-index:40}
.dropdown-menu.open{opacity:1;visibility:visible;transform:translateY(0)}
.dropdown-menu .dm-item{display:block;padding:10px 11px;border-radius:8px;font-size:13px;color:var(--ink)}
.dropdown-menu .dm-item:hover{background:#f3f6fa}
.dropdown-menu .dm-head{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);padding:6px 11px}

/* toast stack */
.toast-stack{position:fixed;right:18px;bottom:18px;display:flex;flex-direction:column;gap:10px;z-index:9999}
.toast{background:var(--navy);color:#fff;padding:13px 16px;border-radius:12px;box-shadow:var(--shadow-lg);
  font-size:13px;min-width:230px;max-width:340px;animation:popIn .25s var(--ease-spring) both;display:flex;gap:10px;align-items:flex-start}
.toast.leaving{animation:fadeIn .2s var(--ease) reverse both}
.toast.success{background:#12744a}.toast.error{background:#9b1c1c}.toast.warn{background:#8a5b00}

/* tabs */
.tabs{display:flex;gap:6px;border-bottom:1px solid var(--line);margin-bottom:18px;flex-wrap:wrap}
.tab-btn{background:none;border:0;padding:10px 14px;font:inherit;font-weight:750;font-size:13px;color:var(--muted);
  cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color var(--dur)}
.tab-btn:hover{color:var(--ink)}
.tab-btn.active{color:var(--blue);border-color:var(--blue)}
.tab-panel{display:none;animation:fadeIn .3s var(--ease) both}
.tab-panel.active{display:block}

/* tooltip: <span data-tip="text"> */
[data-tip]{position:relative}
[data-tip]::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%) translateY(4px);
  background:var(--navy);color:#fff;font-size:11px;padding:6px 9px;border-radius:7px;white-space:nowrap;
  opacity:0;visibility:hidden;transition:opacity var(--dur),transform var(--dur);pointer-events:none;z-index:50}
[data-tip]:hover::after,[data-tip]:focus-visible::after{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}

/* avatar group / breadcrumb / pagination */
.avatar-group{display:flex}
.avatar-group .avatar{margin-left:-10px;border:2px solid #fff}
.avatar-group .avatar:first-child{margin-left:0}
.breadcrumb{display:flex;gap:6px;align-items:center;font-size:12px;color:var(--muted);margin-bottom:14px;flex-wrap:wrap}
.breadcrumb a{color:var(--muted-2)}
.breadcrumb a:hover{color:var(--blue)}
.breadcrumb .sep{opacity:.5}
.pagination{display:flex;gap:6px;justify-content:center;margin-top:18px}
.pagination button,.pagination a{min-width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:9px;background:#fff;font-size:12px;font-weight:700;cursor:pointer}
.pagination button.active,.pagination a.active{background:var(--navy);color:#fff;border-color:var(--navy)}

/* chart bars: animated grow */
.chart-bars i{transform-origin:bottom;animation:growUp .7s var(--ease-spring) both}

/* theme toggle button */
.theme-toggle{width:38px;height:38px;border-radius:10px;border:1px solid #d6dee8;background:#fff;cursor:pointer;font-size:15px}

/* misc premium touches */
.hero-card,.card.gradient-navy{position:relative;overflow:hidden}
.hero-card::before{content:"";position:absolute;inset:-40% -10% auto auto;width:220px;height:220px;
  background:radial-gradient(circle,rgba(110,231,183,.22),transparent 70%);pointer-events:none}
.section h2,.card h2,.card h3{position:relative}
.text-accent{color:var(--blue)}
.bg-light-bg{background:var(--bg)}
.section-padding{padding:75px 24px}
.m-section,.m-card{transition:box-shadow var(--dur)}

@media print{
  .topbar,.sidebar,.info-bar,footer,.appbar-actions,.toolbar,.form-actions,.toast-stack,.nav-toggle{display:none!important}
  .app-main{margin-left:0!important;width:100%!important}
  body{background:#fff}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* =====================================================================
   PATCH v4 — closes real gaps found across ALL pages (login, guard,
   admin/system-check, footer) + a bigger creative-motion pass.
   Everything above stays exactly as-is; this only adds/extends.
   ===================================================================== */

/* --- real gap fixes (classes used in markup but previously undefined) --- */
.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;margin-bottom:22px;flex-wrap:wrap}
.page-head h1{margin:0 0 4px}
.page-head p{margin:0;color:var(--muted-2)}
.narrow-card{max-width:640px;margin:0 auto}
.password-field input{transition:border-color var(--dur),box-shadow var(--dur)}
table.table{width:100%;border-collapse:collapse}
.badge{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;font-size:11px;font-weight:850;
  letter-spacing:.3px;background:#eef2f7;color:#4b5b6d}
.badge.good,.badge.pass{background:#e7f8ef;color:#17663c}
.badge.bad,.badge.fail{background:#fdecec;color:#9b1c1c}
.alert.warning,.alert.warn{background:#fff4da;color:#8a5b00}
.alert.info{background:#e8f0fe;color:#1a4fb4}
.alert{position:relative;padding-left:40px;animation:fadeInUp .35s var(--ease) both}
.alert::before{position:absolute;left:14px;top:50%;transform:translateY(-50%);font-size:15px}
.alert.success::before{content:"✓"}
.alert.error::before{content:"!"}
.alert.warning::before,.alert.warn::before{content:"⚠"}
.alert.info::before{content:"i"}
.footer-brand p{max-width:320px}
.footer-callback .footer-form button{justify-self:start}

/* =====================================================================
   CREATIVE MOTION PASS — hero energy, hover polish, entrance choreography
   ===================================================================== */

/* page-load choreography: header/hero/first sections fade up in sequence */
body{animation:pageIn .5s var(--ease) both}
@keyframes pageIn{from{opacity:0}to{opacity:1}}
.topbar,.info-bar{animation:fadeInUp .5s var(--ease) both}
.hero,.login-box,.page-head{animation:fadeInUp .6s .05s var(--ease-spring) both}
.hero-card{animation:fadeInUp .7s .12s var(--ease-spring) both}

/* staggered children — JS assigns --d per child, CSS consumes it */
.grid3>*, .grid2>*, .cards>*, .grid-kpi>*, .process-grid>*, .placeholder-grid>*,
.table-wrap tbody tr, .list-row, .faq {
  animation: fadeInUp .5s var(--ease) both;
  animation-delay: calc(var(--d, 0) * 60ms);
}

/* animated gradient accent behind hero / login for a premium feel */
.hero::before, .login-box::before{
  content:"";position:absolute;z-index:-1;width:480px;height:480px;border-radius:50%;
  background:radial-gradient(circle,rgba(47,107,255,.14),transparent 65%);
  filter:blur(10px);animation:floatGlow 9s ease-in-out infinite;
}
.hero{position:relative}
.login-box{position:relative;overflow:hidden}
.hero::before{top:-160px;right:-120px}
.login-box::before{top:-220px;left:-160px}
@keyframes floatGlow{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-16px,18px) scale(1.08)}}

/* gradient, animated headline accent */
.hero h1 span{background:linear-gradient(90deg,#2f6bff,#6ee7b7,#2f6bff);background-size:200% auto;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:sheen 5s linear infinite}
@keyframes sheen{to{background-position:200% center}}

/* button shine sweep on hover */
.btn::before{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.35),transparent);
  transform:skewX(-20deg);transition:left .5s var(--ease)}
.btn:hover::before{left:130%}
.btn.ghost::before{background:linear-gradient(120deg,transparent,rgba(18,32,51,.06),transparent)}

/* card spotlight-on-hover (cursor-tracked via JS custom props --mx/--my) */
.card.hoverable{--mx:50%;--my:50%}
.card.hoverable{position:relative}
.card.hoverable::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;
  transition:opacity var(--dur);background:radial-gradient(220px circle at var(--mx) var(--my),rgba(47,107,255,.10),transparent 60%)}
.card.hoverable:hover::after{opacity:1}

/* animated underline for text links inside prose/footer/nav (not buttons) */
.card p a,.footer-col a,.contact-meta a,footer a:not(.btn){background-image:linear-gradient(var(--blue),var(--blue));
  background-position:0 100%;background-repeat:no-repeat;background-size:0% 1.5px;transition:background-size var(--dur) var(--ease)}
.card p a:hover,.footer-col a:hover,.contact-meta a:hover{background-size:100% 1.5px}

/* FAQ: animated chevron + smoother open */
.faq{transition:box-shadow var(--dur),border-color var(--dur)}
.faq[open]{box-shadow:var(--shadow-sm);border-color:#d8e3f2}
.faq summary{list-style:none;position:relative;padding-right:26px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:0;top:0;font-size:18px;color:var(--blue);
  transition:transform var(--dur) var(--ease)}
.faq[open] summary::after{transform:rotate(45deg)}
.faq p{animation:fadeInUp .3s var(--ease) both}

/* notification bell: bounce when it has alerts */
@keyframes bellBounce{0%,100%{transform:rotate(0)}20%{transform:rotate(-12deg)}40%{transform:rotate(10deg)}60%{transform:rotate(-6deg)}80%{transform:rotate(4deg)}}
.notif-bell.has-alerts{animation:bellBounce 2.2s ease-in-out infinite}
.notif-count{animation:popIn .3s var(--ease-spring) both}

/* progress bar fill animation */
.progress span{transition:width 1s var(--ease-spring)}
.metric-row .bar span{transition:width .9s var(--ease-spring)}

/* stat/kpi hover lift + accent bar */
.kpi{position:relative;overflow:hidden}
.kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--blue);
  transform:scaleY(0);transform-origin:bottom;transition:transform var(--dur) var(--ease-spring)}
.kpi:hover::before{transform:scaleY(1)}
.kpi:hover{transform:translateY(-2px);box-shadow:var(--shadow)}

/* success checkmark burst (used by JS after successful async actions) */
.check-burst{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;
  background:#17663c;color:#fff;font-size:12px;animation:popIn .35s var(--ease-spring) both}

/* login/nav/table image & icon subtle float */
.icon{transition:transform var(--dur) var(--ease)}
.card:hover .icon{transform:translateY(-3px) scale(1.05)}

/* map placeholder shimmer to feel alive rather than static */
.map-placeholder{position:relative;overflow:hidden}
.map-placeholder::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);
  background-size:200% 100%;animation:shimmer 3.2s linear infinite}

/* mobile app cards get the same premium treatment when this stylesheet is present */
.m-card,.m-kpi{transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.m-card:hover,.m-card:active{transform:translateY(-2px)}

@media (prefers-reduced-motion:reduce){
  .hero::before,.login-box::before,.hero h1 span,.notif-bell.has-alerts,.map-placeholder::after{animation:none!important}
}

/* =========================================================================
   Website CMS premium styling — additive only, scoped to .cms-* classes.
   Nothing above this line is modified; every non-CMS admin screen (guards,
   sites, payroll, etc.) renders exactly as it did before.
   ========================================================================= */
.cms-banner{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:linear-gradient(120deg,#101c2d,#1c2b40 60%,#233350);
  color:#eaf0f6;padding:14px 18px;border-radius:14px;margin-bottom:14px;font-size:13px;box-shadow:0 10px 30px rgba(16,28,45,.18)}
.cms-banner-badge{font-weight:850;background:rgba(255,255,255,.12);padding:5px 10px;border-radius:999px;font-size:11px;letter-spacing:.3px}
.cms-preview-btn{margin-left:auto;background:rgba(255,255,255,.12)!important;color:#fff!important;border:1px solid rgba(255,255,255,.25)}
.cms-preview-btn:hover{background:rgba(255,255,255,.22)!important}
.cms-stats{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}
.cms-form-card{border-top:3px solid #2f6bff}

/* image field: URL input + upload + live thumbnail */
.cms-image-field{display:grid;gap:8px;grid-template-columns:120px 1fr;align-items:start}
.cms-image-field input[type=text],.cms-image-field small{grid-column:2}
.cms-image-field input[type=file]{grid-column:2;padding:6px 0;border:none}
.cms-image-preview{grid-row:1/4;width:120px;height:90px;border-radius:10px;overflow:hidden;background:#f3f6fa;
  border:1px solid #e5eaf0;display:flex;align-items:center;justify-content:center}
.cms-image-preview img{width:100%;height:100%;object-fit:cover}
.cms-image-preview.broken{background:#fdecec}
.cms-image-empty{font-size:11px;color:#8a97a8;text-align:center;padding:6px}
@media(max-width:620px){.cms-image-field{grid-template-columns:1fr}.cms-image-field input[type=text],.cms-image-field input[type=file],.cms-image-field small{grid-column:1}.cms-image-preview{width:100%;height:120px;grid-row:auto}}

/* icon field: live glyph preview next to the class name input */
.cms-icon-field{display:flex;align-items:center;gap:10px}
.cms-icon-live{width:38px;height:38px;flex:0 0 38px;border-radius:10px;background:#eef2f7;color:#2f6bff;
  display:flex;align-items:center;justify-content:center;font-size:16px}
.cms-icon-field input{flex:1}

/* list table: thumbnails, icon glyphs, star ratings, reorder buttons */
.cms-thumb{width:64px;height:44px;object-fit:cover;border-radius:8px;border:1px solid #e5eaf0;background:#f3f6fa}
.cms-stars{color:#d4af37;letter-spacing:1px;font-size:14px}
.cms-reorder{display:flex;flex-direction:column;gap:3px;width:1%}
.cms-reorder .btn{padding:3px 8px;line-height:1}
.cms-actions{display:flex;gap:6px;flex-wrap:wrap;align-items:center}

/* live hero-text preview box on admin/cms_content.php */
.cms-hero-preview{margin-top:16px;padding:22px;border-radius:14px;background:linear-gradient(135deg,#101c2d,#1c2b40);color:#fff}
.cms-hero-preview small{color:#8fa3bd;letter-spacing:1px;font-size:10px;font-weight:850}
.cms-hero-preview h3{margin:8px 0 6px;font-size:22px}
.cms-hero-preview p{color:#c3cfde;margin:0 0 14px;font-size:13px;line-height:1.6}
.cms-hero-preview .btn{margin-right:8px}

/* Finance module — additive, dual-colour trend chart + legend. */
.chart-bars.dual{gap:16px;align-items:end}
.chart-pair{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1}
.chart-pair>span{display:flex;gap:3px;align-items:end}
.chart-pair i{display:block;width:12px;border-radius:4px 4px 0 0;min-height:4px}
.chart-pair i.income{background:#22c55e}
.chart-pair i.expense{background:#ef4444}
.chart-pair small{font-size:9px;color:#6b7a8c;margin-top:2px;white-space:nowrap}
.chart-legend{display:flex;gap:16px;font-size:11px;color:#6b7a8c;margin-bottom:10px}
.chart-legend .dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px;vertical-align:middle}
.chart-legend .dot.income{background:#22c55e}
.chart-legend .dot.expense{background:#ef4444}
.danger-text{color:#b42318}