/* =====================================================================
   Blue accent theme + interactive effects (loaded after styles.css)
   ===================================================================== */
:root{
  --green:#2563eb; --green-d:#1d4ed8; --green-t:#eaf1ff; --green-b:#bcd0fb; --mint:#eef4ff; --greet:#1d4ed8;
  --blue:#2563eb; --blue-t:#eef4ff; --blue-b:#a9c3f7; --acc2:#0ea5e9;
}
/* accent replacements for former green UI (success/pass colours stay green) */
.btn.out-green{border-color:#2563eb;color:#1d4ed8}
.btn.soft-green{background:#e8f0ff;border-color:#b6cbf5;color:#1d4ed8}
.lnk.green{color:#1d4ed8}.lnk.blue{color:#0284c7}
input[type=search],input.search{border-color:#93b4f5}
table.t.mint th{background:#eef4ff}
.auth-body{background:radial-gradient(1200px 600px at 10% 10%,#dbe7ff 0,transparent 60%),radial-gradient(900px 500px at 90% 90%,#e0f2fe 0,transparent 60%),#f5f8ff}
.roles a.on{background:linear-gradient(135deg,#3b82f6,#1d4ed8);box-shadow:0 10px 24px rgba(37,99,235,.35)}
.hero h1 span{background:linear-gradient(90deg,#2563eb,#0ea5e9);-webkit-background-clip:text;background-clip:text;color:transparent}
.btn.primary{background:linear-gradient(135deg,#3b82f6,#1d4ed8);border-color:#1d4ed8}
.btn.primary:hover{background:linear-gradient(135deg,#2563eb,#1e40af)}
.toast.ok{background:#1d4ed8}
.tabs a.active{background:linear-gradient(135deg,#3b82f6,#1d4ed8);border-color:#1d4ed8}
.nav a.active .tile{background:linear-gradient(135deg,#3b82f6,#1d4ed8)}
.side-head b{color:#0f1f3d}
.avatar{background:linear-gradient(135deg,#93c5fd,#3b82f6)}
.serif{color:#1e3a8a}

/* ---------- motion ---------- */
@keyframes hsmIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes hsmPop{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
@keyframes hsmFade{from{opacity:0}to{opacity:1}}
@keyframes hsmSlide{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:none}}
@keyframes hsmBar{0%{left:-35%;width:35%}60%{left:100%;width:20%}100%{left:100%;width:0}}
@keyframes hsmGrow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes hsmDraw{from{stroke-dashoffset:2000}to{stroke-dashoffset:0}}
@keyframes hsmRipple{to{transform:scale(4);opacity:0}}
@media (prefers-reduced-motion: no-preference){
  .page.enter>*{animation:hsmIn .35s ease both}
  .page.enter>*:nth-child(2){animation-delay:.04s}.page.enter>*:nth-child(3){animation-delay:.08s}
  .page.enter>*:nth-child(4){animation-delay:.12s}.page.enter>*:nth-child(5){animation-delay:.16s}
  .page.enter>*:nth-child(n+6){animation-delay:.2s}
  .overlay{animation:hsmFade .18s ease both}.overlay .modal{animation:hsmPop .22s cubic-bezier(.2,.9,.3,1.2) both}
  .toast{animation:hsmSlide .25s ease both}
  .dd{animation:hsmPop .14s ease both;transform-origin:top right}
  svg .gbar{transform-box:fill-box;transform-origin:bottom;animation:hsmGrow .7s cubic-bezier(.2,.8,.2,1) both}
  svg .gline{stroke-dasharray:2000;animation:hsmDraw 1.2s ease both}
  .abox{animation:hsmPop .4s ease both}.hero{animation:hsmIn .5s ease both}
}
/* hover / press */
.btn{transition:transform .08s,box-shadow .15s,background .15s,border-color .15s;position:relative;overflow:hidden}
.btn:active{transform:scale(.97)}
.btn .rip{position:absolute;border-radius:50%;background:currentColor;opacity:.25;transform:scale(0);animation:hsmRipple .5s linear;pointer-events:none}
.card,.stat{transition:transform .18s,box-shadow .18s}
.card:hover{box-shadow:0 10px 30px rgba(16,24,40,.09)}
.stat:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(37,99,235,.14)}
.stat.link{cursor:pointer}
.nav a{transition:background .15s,transform .15s}
.nav a:hover{transform:translateX(3px)}
.rec,.item{transition:background .15s;border-radius:12px}
.rec:hover,.item:hover{background:#f5f8ff}
table.t tr{transition:background .12s}
table.t tr:hover td{background:#f3f7ff}
.att-btns button{transition:transform .1s}
.att-btns button.on{animation:hsmPop .2s ease}
.iconbtn{transition:transform .12s,background .15s}.iconbtn:hover{transform:translateY(-2px)}
.subrow{transition:background .15s}.subrow:hover{background:#f5f8ff}
input,select,textarea{transition:border-color .15s,box-shadow .15s}
a.lnk:hover,.lnk:hover{text-decoration:underline}

/* sync progress bar */
#hsm-bar{position:fixed;top:0;left:0;right:0;height:3px;z-index:90;overflow:hidden;pointer-events:none;opacity:0;transition:opacity .2s}
#hsm-bar i{position:absolute;top:0;height:100%;background:linear-gradient(90deg,#60a5fa,#2563eb,#0ea5e9);animation:hsmBar 1.2s ease-in-out infinite}
body.is-syncing #hsm-bar{opacity:1}

/* quick actions */
.qa{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:4px 0 22px}
.qa button{border:1px solid #e3e9f6;background:#fff;border-radius:16px;padding:16px 12px;display:flex;flex-direction:column;align-items:center;gap:10px;cursor:pointer;font-weight:500;color:#1f2937;box-shadow:0 4px 14px rgba(16,24,40,.05);transition:transform .15s,box-shadow .15s}
.qa button:hover{transform:translateY(-3px);box-shadow:0 14px 28px rgba(37,99,235,.15)}
.qa .t{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,#60a5fa,#1d4ed8)}
.qa button:nth-child(2) .t{background:linear-gradient(135deg,#38bdf8,#0369a1)}
.qa button:nth-child(3) .t{background:linear-gradient(135deg,#818cf8,#4338ca)}
.qa button:nth-child(4) .t{background:linear-gradient(135deg,#22d3ee,#0e7490)}

/* chart tooltip */
#hsm-tip{position:fixed;z-index:95;background:#0f172a;color:#fff;font-size:12.5px;padding:6px 10px;border-radius:8px;pointer-events:none;opacity:0;transform:translateY(4px);transition:opacity .1s,transform .1s;white-space:nowrap;box-shadow:0 8px 20px rgba(0,0,0,.25)}
#hsm-tip.on{opacity:1;transform:none}
svg [data-tip]{cursor:pointer}
svg rect[data-tip]:hover{filter:brightness(1.12)}
svg circle[data-tip]:hover{r:7}

/* quick search (Ctrl+K) */
.qs-btn{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:#fff;border-radius:24px;padding:8px 14px;color:var(--muted);cursor:pointer;font-size:13px;transition:box-shadow .15s}
.qs-btn:hover{box-shadow:0 6px 16px rgba(37,99,235,.12);color:#1d4ed8}
.qs-btn kbd{font:inherit;font-size:11px;border:1px solid var(--line);border-radius:6px;padding:1px 6px;background:#f8fafc}
.qs{position:fixed;inset:0;z-index:85;background:rgba(15,23,42,.45);display:flex;justify-content:center;align-items:flex-start;padding-top:12vh;animation:hsmFade .15s both}
.qs .box{width:min(620px,94vw);background:#fff;border-radius:18px;box-shadow:0 30px 70px rgba(0,0,0,.3);overflow:hidden;animation:hsmPop .2s both}
.qs .in{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line);color:#64748b}
.qs .in input{flex:1;outline:none;border:none!important;box-shadow:none!important;font-size:17px;padding:6px 0}
.qs .res{max-height:52vh;overflow:auto;padding:8px}
.qs .res .grp{font-size:11px;font-weight:700;color:#94a3b8;text-transform:uppercase;letter-spacing:.05em;padding:10px 12px 4px}
.qs .res a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;color:#1f2937}
.qs .res a .ic{width:32px;height:32px;border-radius:9px;background:#eef4ff;color:#1d4ed8;display:grid;place-items:center;flex-shrink:0}
.qs .res a small{color:#94a3b8;margin-left:auto}
.qs .res a.sel{background:#eef4ff}
.qs .foot{padding:8px 16px;font-size:12px;color:#94a3b8;border-top:1px solid var(--line)}
@media (max-width:860px){ .qs-btn span,.qs-btn kbd{display:none} .qs-btn{padding:10px} .qa{grid-template-columns:1fr 1fr} }

/* ---------- compact, refined typography ---------- */
html,body{font-size:13px;line-height:1.45;-webkit-font-smoothing:antialiased;letter-spacing:.005em}
h1,h2,h3{letter-spacing:-.01em}
.top{padding:12px 26px 6px}.top .hi{font-size:18px;font-weight:600}
.iconbtn{width:40px;height:38px;border-radius:10px}.iconbtn svg{width:19px;height:19px}
.sync,.qs-btn{font-size:12px;padding:6px 12px}
.content{padding:10px 26px 34px}
.side{width:236px}.side-head{padding:20px 18px 14px}.side-head b{font-size:17px}.side-head small{font-size:11px}
.nav{padding:10px 12px 16px}.nav .sec{font-size:10.5px;padding:14px 10px 6px}
.nav a{font-size:13.5px;padding:5px 8px;gap:11px;border-radius:12px;margin-bottom:2px}
.nav a .tile{width:30px;height:30px;border-radius:9px}.nav a .tile svg{width:15px;height:15px}
.phead{gap:16px;margin:6px 0 18px}.phead .tile{width:48px;height:48px;border-radius:14px}.phead .tile svg{width:24px;height:24px}
.phead h2{font-size:21px}.phead p{font-size:13px;margin-top:2px}
.page>h2[style],h2.ctitle{font-size:21px!important;margin:8px 0 14px!important}
h3.sub{font-size:15px;margin:20px 0 10px}.card h3{font-size:14.5px}
.card{padding:18px;border-radius:16px;margin-bottom:16px}
.stat{padding:14px;gap:12px;border-radius:14px}.stat .tile{width:42px;height:42px;border-radius:12px}.stat .tile svg{width:20px;height:20px}
.stat .v{font-size:19px}.stat .l{font-size:11.5px}
.btn{font-size:13px;padding:7px 13px;border-radius:9px;gap:6px}.btn.sm{font-size:12px;padding:4px 10px}.btn.big{font-size:14.5px;padding:12px}
.lnk{font-size:13px}.lnks{gap:20px;margin-top:10px}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],input[type=search],select,textarea{font-size:13px;padding:8px 11px;border-radius:9px}
label.f{font-size:12px}
table.t th{font-size:12px;font-weight:600;padding:9px 10px}table.t td{padding:8px 10px}
.rec{gap:16px;padding:16px 6px}.rec .ph{width:70px;height:70px;font-size:21px;border-radius:10px}
.rec .nm{font-size:14.5px;gap:12px}.rec .meta{font-size:13px;margin-top:4px}.rec .acts{gap:8px;margin-top:10px}
.item{padding:16px 6px}.item .tt{font-size:14.5px}.item .meta{font-size:13px;margin-top:5px}
.tag{font-size:10.5px;padding:3px 14px}.pill{font-size:11.5px;padding:4px 9px}.chip{font-size:11.5px;padding:4px 9px}
.prof{padding:6px 0 18px}.avatar{width:88px;height:88px;font-size:28px}.prof .nm{font-size:17px;margin-top:10px}.prof .nm span{font-size:13px}
.prof .contact{font-size:13px;margin:8px 0 12px}
.qa{gap:12px}.qa button{padding:13px 10px;font-size:13px;border-radius:14px;gap:8px}.qa .t{width:40px;height:40px;border-radius:12px}.qa .t svg{width:19px;height:19px}
.serif{font-size:15.5px}.kv{font-size:13.5px;line-height:1.9}
.subrow{padding:12px 6px}.subrow .s b{font-size:13px}.subrow .s span{font-size:12.5px}
.empty{font-size:14.5px;padding:36px 16px}.empty svg{width:160px;height:120px}
.netline{font-size:13.5px;margin:14px 0}
.tabs a{font-size:13px;padding:6px 15px}
.legend span{font-size:13.5px}.sq{width:24px;height:24px;font-size:12px}
.cal h4{font-size:16px}.cal .d{height:25px;font-size:12px}.cal .g .h{font-size:11.5px}
.dd a{font-size:13.5px;padding:9px 18px}.dd{min-width:200px}
.modal header{font-size:15.5px;padding:15px 20px}.modal .body{padding:16px 20px}
.att-btns button{min-width:30px;height:28px;font-size:12px}
.pager button{min-width:38px;height:38px;font-size:14px}
.auth-top{padding:16px 40px}.auth-top b{font-size:25px}.auth-top small{font-size:13px}
.hero h1{font-size:40px}.hero p{font-size:15px}
.abox{padding:32px 36px;width:430px}.abox h2{font-size:27px}.abox .lead{font-size:14.5px;margin:6px 0 20px}
.roles a{width:104px;font-size:12.5px;padding:12px 6px}.roles a svg{width:26px;height:26px}
.ifield{margin-bottom:14px}.ifield input,.ifield textarea{font-size:14px;padding:12px 44px 12px 44px;border-radius:12px}
.ifield>svg:first-child{left:14px;width:19px;height:19px}
.qs .in input{font-size:15px}.qs .res a{font-size:13.5px;padding:8px 10px}
.toast{font-size:13px;padding:10px 14px}
#toasts{right:18px;bottom:18px}
.slipwrap{padding:22px}
@media (max-width:860px){ html,body{font-size:13px} .top .hi{font-size:17px} .content{padding:6px 12px 30px} .abox{width:100%} .hero h1{font-size:30px} }