@keyframes nav-in{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:translateX(0)}}
.nav button{position:relative;overflow:hidden;transition:background .2s ease,color .2s ease,transform .2s ease;animation:nav-in .4s both;animation-delay:calc(var(--nav-index) * 22ms)}
.nav button::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:#74d5b5;transform:translateX(-6px);transition:transform .2s ease}
.nav button:hover,.nav button.active{transform:translateX(3px)}
.nav button:hover::before,.nav button.active::before{transform:translateX(0)}
.nav-icon{font-size:15px;transition:transform .25s ease,color .25s ease}
.nav button:hover .nav-icon,.nav button.active .nav-icon{color:#74d5b5;transform:scale(1.14) rotate(-4deg)}
.nav-arrow{font-size:9px;margin-left:auto;opacity:0;transform:translateX(-5px);transition:opacity .2s ease,transform .2s ease}
.nav button:hover .nav-arrow,.nav button.active .nav-arrow{opacity:.65;transform:translateX(0)}
.search>i{font-size:13px;color:var(--brand)}
.mobile-nav .nav-icon{transition:transform .2s ease}
.mobile-nav button.active .nav-icon,.mobile-nav button:hover .nav-icon{transform:translateY(-2px) scale(1.1)}
@media (prefers-reduced-motion:reduce){.nav button,.nav-icon,.nav-arrow{animation:none!important;transition:none!important}}
.nav-groups{display:grid;gap:5px;align-content:start;margin-bottom:14px}
.nav-group{display:grid;gap:4px}
.nav-submenu{display:grid;gap:3px;max-height:0;overflow:hidden;opacity:0;transform:translateY(-5px);transition:max-height .28s ease,opacity .2s ease,transform .28s ease}
/* Expanded: animate open only — never scroll here. Sole sidebar scroll is `.sidebar > .nav-groups`. */
.nav-group.expanded .nav-submenu{max-height:2000px;overflow:hidden;opacity:1;transform:translateY(0)}
.nav-submenu-item{display:flex;align-items:center;gap:2px;position:relative;border-radius:9px}
.nav-submenu-item>a{flex:1;min-width:0;background:transparent;color:#b5d0e8;text-align:left;text-decoration:none;padding:9px 8px 9px 24px;border-radius:9px;display:flex;gap:10px;align-items:center;position:relative;overflow:hidden;transition:background .2s ease,color .2s ease,transform .2s ease;animation:nav-in .3s both;animation-delay:calc(var(--nav-index) * 24ms)}
.nav-submenu-item>a:hover,.nav-submenu-item>a:focus-visible,.nav-submenu-item>a.active{background:rgba(255,255,255,.1);color:#fff;transform:translateX(3px);outline:0}
.nav-submenu-item>a .nav-icon{width:20px;font-size:13px}
.nav-submenu-item>a.active .nav-icon,.nav-submenu-item>a:hover .nav-icon,.nav-submenu-item>a:focus-visible .nav-icon{color:#72a9dc}
.nav-submenu-item.is-nav-pin-slot{padding-left:2px}
.nav-submenu-item.is-nav-pin-slot>a{padding-left:8px}
.nav-submenu-item.is-dragging{opacity:.55}
.nav-submenu-item.is-drag-over{box-shadow:inset 0 0 0 1px rgba(114,169,220,.55);background:rgba(114,169,220,.12)}
.nav-pin-drag,.nav-pin-toggle{flex:0 0 auto;display:inline-grid;place-items:center;width:32px;height:32px;margin:0;padding:0;border:0;border-radius:8px;background:transparent;color:#8fb4d4;cursor:pointer;opacity:0;transform:scale(.92);transition:opacity .18s ease,transform .18s ease,background .18s ease,color .18s ease;position:relative}
.nav-pin-drag > i,
.nav-pin-toggle > i,
.nav-pin-toggle .table-identity-view-tip > i,
.nav-submenu-item .nav-icon > i,
.nav-group-tab .nav-icon > i{
  font-family:"Font Awesome 6 Free"!important;
  font-weight:900!important;
  font-style:normal!important;
  font-variant:normal!important;
  text-rendering:auto;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1;
  display:inline-block;
}
.nav-submenu-item:hover .nav-pin-drag,
.nav-submenu-item:hover .nav-pin-toggle,
.nav-submenu-item:focus-within .nav-pin-drag,
.nav-submenu-item:focus-within .nav-pin-toggle,
.nav-pin-toggle.is-pinned,
.nav-pin-toggle.is-tip-open,
.nav-submenu-item.is-pinned .nav-pin-toggle{opacity:1;transform:scale(1)}
.nav-pin-drag:hover,.nav-pin-drag:focus-visible,
.nav-pin-toggle:hover,.nav-pin-toggle:focus-visible{background:rgba(255,255,255,.12);color:#fff;outline:0}
.nav-pin-toggle > i{opacity:.72;transform:rotate(28deg)}
.nav-pin-toggle.is-pinned > i{opacity:1;transform:rotate(0);color:#9fd0ff}
.nav-pin-toggle.is-pinned{color:#9fd0ff}
.nav-pin-drag{cursor:grab}
.nav-pin-drag:active{cursor:grabbing}
.nav-pin-toggle .table-identity-view-tip{left:auto;right:0}
.nav-pin-toggle .table-identity-view-tip::after{left:auto;right:12px}
@media (hover:none),(max-width:800px){
  .nav-pin-drag,.nav-pin-toggle{opacity:.85;transform:scale(1)}
  .nav-pin-drag,.nav-pin-toggle{width:48px;height:48px}
}
@media (prefers-reduced-motion:reduce){.nav-pin-drag,.nav-pin-toggle{transition:none!important}}
.nav-submenu a{background:transparent;color:#a9cec5;text-align:left;text-decoration:none;padding:9px 10px 9px 24px;border-radius:9px;display:flex;gap:10px;align-items:center;position:relative;overflow:hidden;transition:background .2s ease,color .2s ease,transform .2s ease;animation:nav-in .3s both;animation-delay:calc(var(--nav-index) * 24ms)}
.nav-submenu a:hover,.nav-submenu a:focus-visible,.nav-submenu a.active{background:rgba(255,255,255,.1);color:#fff;transform:translateX(3px);outline:0}
.nav-submenu a .nav-icon{width:20px;font-size:13px}
.nav-submenu a.active .nav-icon,.nav-submenu a:hover .nav-icon,.nav-submenu a:focus-visible .nav-icon{color:#72a9dc}
.nav-group-tab{width:100%;display:flex;align-items:center;gap:9px;padding:10px 11px;border:1px solid transparent;border-radius:11px;background:transparent;color:#9fc9bf;text-align:left;font-size:12px;font-weight:700;transition:all .2s ease}
.nav-group-tab:hover{background:rgba(255,255,255,.07);color:#fff;transform:translateX(2px)}
.nav-group-tab.active{background:rgba(84,198,161,.16);border-color:rgba(116,213,181,.25);color:#fff}
.nav-group-tab .nav-icon{width:20px;color:#74d5b5}
.group-chevron{font-size:9px;margin-left:auto;transition:transform .25s ease}
.nav-group-tab.active .group-chevron{transform:rotate(180deg)}
.nav-label-sub{padding-top:4px;border-top:1px solid rgba(255,255,255,.1);margin-top:3px}
.mobile-groups{display:grid;gap:8px}
.mobile-group-option{display:flex;align-items:center;gap:12px;width:100%;padding:14px;background:#f6faf8;border:1px solid var(--line);border-radius:12px;color:var(--ink);text-align:left;transition:all .2s ease}
.mobile-group-option.active{background:var(--mint);border-color:#a8ddcd;color:var(--brand)}
.mobile-group-option .nav-icon{width:24px;color:var(--brand);font-size:17px}
.mobile-group-option span:nth-child(2){display:grid;gap:3px;flex:1}
.mobile-group-option small{color:var(--muted)}
@media (prefers-reduced-motion:reduce){.nav-submenu{transition:none!important}.nav-submenu a{animation:none!important}}
.nav button::before{background:#72a9dc}.nav button:hover .nav-icon,.nav button.active .nav-icon{color:#72a9dc}.nav-group-tab .nav-icon{color:#72a9dc}.nav-group-tab.active{background:rgba(89,151,211,.18);border-color:rgba(114,169,220,.3)}.nav-submenu a{color:#b5d0e8}.nav-group-tab{color:#a8c8e3}.mobile-group-option.active{background:var(--mint);border-color:#a9cce9;color:var(--brand)}

/* Shared action and topbar states restored for the PHP shell. */
.btn,.icon-btn,.profile-trigger{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background-color .18s ease,color .18s ease}.btn{text-decoration:none}
.btn:hover,.icon-btn:hover,.profile-trigger:hover{transform:translateY(-1px)}
.btn:focus-visible,.icon-btn:focus-visible,.profile-trigger:focus-visible{outline:3px solid rgba(61,139,210,.3);outline-offset:2px}
.btn-primary:hover{background:var(--brand-primary-dark);color:#fff;box-shadow:0 6px 14px rgba(36,99,168,.2)}
.btn-soft{border:1px solid transparent}.btn-soft:hover{background:#d7eafb;color:var(--brand-primary);border-color:#b7d6ef}
.btn-ghost:hover{background:var(--brand-soft);color:var(--brand-primary);border-color:#b7d6ef}
.btn-danger:hover{background:#ffe3e6;color:#a83b47;border-color:#e8aeb6}
.btn-dismiss:hover{background:#e3e7eb;color:#46515b;border-color:#aeb8c2}
.btn-success:hover{background:color-mix(in srgb,var(--success,#2e9b70) 86%,#000);color:#fff}
.profile-menu>button,.profile-menu>a{display:flex;align-items:center;gap:10px;width:100%;padding:10px;border:0;border-radius:9px;background:transparent;color:var(--ink);text-align:left;font-size:13px;text-decoration:none}
.profile-menu>button:hover,.profile-menu>a:hover{background:var(--mint);color:var(--brand-primary)}
.profile-menu-logout:hover{background:#fff0f1!important;color:#b63e4a!important}
.profile-menu--accounts{width:min(320px,calc(100vw - 24px))}
.profile-menu-accounts{display:grid;gap:4px;padding:4px 0 8px;margin-bottom:6px;border-bottom:1px solid var(--line)}
.profile-menu-section-label{margin:0 10px 4px;font-size:11px;font-weight:700;letter-spacing:.02em;color:var(--muted);text-transform:none}
.profile-menu-empty{margin:0 10px 6px;font-size:12px}
.profile-menu-account-row{display:flex;align-items:stretch;gap:2px}
.profile-menu-account{display:flex;align-items:center;gap:10px;width:100%;padding:10px;border:0;border-radius:9px;background:transparent;color:var(--ink);text-align:left;cursor:pointer}
.profile-menu-account-row .profile-menu-account{min-width:0}
.profile-menu-account:hover,.profile-menu-account:focus-visible{background:var(--mint);color:var(--brand-primary);outline:0}
.profile-menu-account--needs-pin .profile-menu-account-icon{color:#c27a12}
.profile-menu-account-avatar{display:grid;place-items:center;width:32px;height:32px;flex:0 0 auto;border-radius:50%;background:var(--mint);color:var(--brand);font-size:12px;font-weight:800}
.profile-menu-account-meta{display:grid;gap:2px;min-width:0;flex:1 1 auto}
.profile-menu-account-meta strong,.profile-menu-account-meta small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.profile-menu-account-meta small{font-size:11px;color:var(--muted)}
.profile-menu-account-pin-hint{color:#c27a12!important;font-weight:700}
.profile-menu-account-icon{flex:0 0 auto;opacity:.7}
.profile-menu-account-remove-form{display:flex;align-items:center}
.profile-menu-account-remove{display:grid;place-items:center;width:36px;min-height:36px;padding:0;border:1px solid transparent;border-radius:9px;background:transparent;color:var(--red);cursor:pointer}
.profile-menu-account-remove:hover,.profile-menu-account-remove:focus-visible{background:#fff0f1;border-color:#f2c3c3;outline:0}
.profile-menu-add-account{display:flex;align-items:center;gap:10px;width:100%;padding:10px;border:0;border-radius:9px;background:transparent;color:var(--brand-primary);text-align:left;font-size:13px;font-weight:700;cursor:pointer}
.profile-menu-add-account:hover,.profile-menu-add-account:focus-visible{background:var(--mint);outline:0}
.login-link-device{display:grid;gap:6px}
.login-link-device-hint{margin:0;font-size:12px;line-height:1.45}
.profile-pin-actions{margin-top:4px}
.profile-device-account-list{display:grid;gap:10px}
.profile-device-account-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:14px;padding:12px 0;border-top:1px solid var(--line)}
.profile-device-account-identity{display:flex;align-items:center;gap:10px;min-width:0}
.profile-device-account-identity>span:last-child{display:grid;gap:2px;min-width:0}
.profile-device-account-identity strong,.profile-device-account-identity small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.profile-device-account-identity small,.profile-device-account-meta small{font-size:11px;color:var(--muted)}
.profile-device-account-meta{display:grid;justify-items:end;gap:4px;white-space:nowrap}
.profile-device-account-remove-form{margin:0}
.profile-device-account-remove-form .btn{white-space:nowrap}
@media(max-width:800px){.profile-device-account-row{grid-template-columns:minmax(0,1fr) auto;align-items:start}.profile-device-account-meta{justify-items:start;grid-column:1}.profile-device-account-remove-form{grid-column:2;grid-row:1 / span 2}.profile-device-account-remove-form .btn{min-height:48px}.profile-menu-account-remove{min-width:40px;min-height:40px}}
.profile-pin-clear-form{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.device-account-switch-modal .form-grid,.device-account-add-modal .form-grid{grid-template-columns:1fr}
.device-idle-pin-lock{position:fixed;inset:0;z-index:12000;display:grid;place-items:center;padding:24px;background:rgba(15,28,42,.72);backdrop-filter:blur(4px)}
.device-idle-pin-lock[hidden]{display:none!important}
body.device-idle-locked{overflow:hidden}
.device-idle-pin-card{width:min(420px,100%);padding:28px 24px;border-radius:18px;background:#fff;border:1px solid var(--line);box-shadow:0 24px 60px rgba(15,28,42,.35);display:grid;gap:12px;text-align:center}
.device-idle-pin-icon{display:grid;place-items:center;width:52px;height:52px;margin:0 auto;border-radius:50%;background:var(--mint);color:var(--brand-primary);font-size:22px}
.device-idle-pin-card h2{margin:0;font-size:20px}
.device-idle-pin-card .form-grid{text-align:left;grid-template-columns:1fr}
.device-idle-pin-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.device-idle-pin-error{margin:0;color:#b63e4a;font-size:13px}
.profile-trigger{min-height:44px}
.profile-trigger .avatar{display:grid;place-items:center}
.profile-identity-card,.profile-password-card,.profile-security-card{display:grid;gap:var(--layout-gap,22px)}.profile-identity-summary{display:flex;align-items:center;gap:16px}.profile-page-avatar{display:grid;place-items:center;width:72px;height:72px;flex:0 0 auto;border-radius:22px;background:var(--brand-soft);color:var(--brand-primary);font-size:24px;font-weight:800}.profile-identity-summary h2{margin:0 0 4px;font-size:20px}.profile-identity-summary p{margin:0 0 10px}.profile-divider{border-top:1px solid var(--line)}.profile-page-form.form-grid{grid-template-columns:minmax(0,1fr);width:100%}.profile-page-form .field,.profile-page-form .field-control,.profile-page-form .input{width:100%;min-width:0;max-width:100%;box-sizing:border-box}.profile-page-form .panel-head{margin:0;display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.profile-page-form .panel-head p{margin:5px 0 0}.profile-form-actions{display:flex;justify-content:flex-end}.profile-info-card{display:grid;gap:16px}.profile-info-card .panel-head{align-items:flex-start;margin:0}.profile-section-icon{color:var(--brand-primary);font-size:20px}.profile-info-row{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-top:1px solid var(--line);font-size:12px}.profile-info-row strong{text-align:right;word-break:break-word}.profile-logout-button{width:100%;margin-top:2px}@media(max-width:800px){.profile-identity-card,.profile-password-card,.profile-security-card,.profile-info-card,.profile-page-form,.profile-identity-summary{min-width:0;max-width:100%}.profile-identity-summary{align-items:flex-start}.profile-identity-summary>div:last-child,.profile-identity-summary h2,.profile-identity-summary p{min-width:0;overflow-wrap:anywhere;word-break:break-word}.profile-info-row{flex-wrap:wrap;align-items:flex-start;gap:6px 12px}.profile-info-row>span,.profile-info-row strong{min-width:0;overflow-wrap:anywhere;word-break:break-word}.profile-info-row strong{flex:1 1 auto;text-align:right}.profile-form-actions{justify-content:stretch}.profile-form-actions .btn{width:100%}.profile-page-avatar{width:60px;height:60px;border-radius:18px;font-size:20px}}

@media(max-width:800px){.topbar{gap:10px}.topbar .search{min-width:0;flex:1}.top-actions{gap:6px}.profile-trigger{padding:3px 5px}.topbar .icon-btn{display:none!important}}

/* Stat-card alert icons reuse the existing trend tone without changing the metric hierarchy. */
.stat-icon--alert{background:#fde8e8;color:var(--red)}

/* Informational stat cards get a restrained hover zoom; actionable cards retain their stronger lift rule. */
.stat-card{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.stat-card:hover{transform:scale(1.025);border-color:#b7d6ef;box-shadow:0 14px 30px rgba(36,99,168,.14)}
.stat-card .stat-icon{transition:transform .18s ease,background-color .18s ease}
.stat-card:hover .stat-icon{transform:scale(1.08)}
@media (prefers-reduced-motion:reduce){.stat-card,.stat-card:hover,.stat-card .stat-icon,.stat-card:hover .stat-icon{transform:none;transition:none}}
