/* ── HEADER ── */
.hdr{background:var(--bg);border-bottom:1px solid var(--border);
  height:52px;padding:0 1.5rem;display:flex;align-items:center;justify-content:space-between;
  position:sticky;top:0;z-index:200}
.hdr-left{display:flex;align-items:center;gap:.9rem}
.hdr-left .logo-img{height:28px;width:auto;display:block}
.hdr-bc{font-family:var(--font);font-size:.68rem;font-weight:700;color:#999;
  letter-spacing:1.5px;text-transform:uppercase}
.hdr-right{display:flex;align-items:center;gap:1rem}
.hdr-meta{font-size:.68rem;color:#aaa;text-align:right}
.hdr-meta strong{display:block;color:#fff;font-size:.78rem}
.hdr-clock-wrap{display:flex;align-items:center;gap:.6rem}
.hdr-clock{font-family:var(--font);font-size:.68rem;color:#bbb;letter-spacing:.5px;white-space:nowrap}
.sync{padding:.24rem .65rem;background:rgba(59,165,221,.1);border:1px solid rgba(59,165,221,.2);
  border-radius:4px;color:var(--blue);font-family:var(--font);font-size:.62rem;font-weight:700;
  cursor:pointer;transition:all .2s;letter-spacing:.5px;text-transform:uppercase}
.sync:hover{background:rgba(59,165,221,.22)}
.hdr-user{display:flex;align-items:center;gap:.4rem}
.hdr-user-name{font-size:.62rem;color:#999;font-family:var(--font);font-weight:600;white-space:nowrap}
.hdr-logout{background:none;border:1px solid rgba(255,107,107,.2);border-radius:4px;
  color:#FF6B6B;font-size:.7rem;cursor:pointer;padding:.15rem .4rem;line-height:1;
  transition:all .15s;font-family:var(--font)}
.hdr-logout:hover{background:rgba(255,107,107,.1);border-color:rgba(255,107,107,.4)}
.hdr-sync-wrap{display:flex;align-items:center;gap:.5rem}
.hdr-sync-ts{font-size:.58rem;color:#999;font-family:var(--font);white-space:nowrap}
.hdr-sync-spinner{display:none;width:14px;height:14px;border:2px solid rgba(59,165,221,.2);
  border-top-color:var(--blue);border-radius:50%}
.hdr-sync-spinner.spinning{display:inline-block;animation:syncSpin .8s linear infinite}
@keyframes syncSpin{to{transform:rotate(360deg)}}
.hdr-refresh{background:none;border:none;color:#444;font-size:.9rem;cursor:pointer;
  padding:.1rem .3rem;line-height:1;transition:all .2s;opacity:.5}
.hdr-refresh:hover{color:#fff;opacity:1;transform:rotate(180deg)}

/* ── SIDEBAR — off-canvas, toggle via .sb-open ── */
.sidebar{position:fixed;top:0;left:0;width:220px;height:100vh;background:var(--bg);
  border-right:1px solid var(--border);display:flex;flex-direction:column;z-index:300;
  overflow-y:auto;scrollbar-width:none;
  transform:translateX(-100%);transition:transform .25s ease}
.sidebar.sb-open{transform:translateX(0)}
.sidebar::-webkit-scrollbar{display:none}
.sb-logo{padding:1.2rem 1rem .8rem;border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between}
.sb-logo-img{height:30px;width:auto;display:block;opacity:.85}
.sb-close{background:none;border:none;color:#999;font-size:1.1rem;cursor:pointer;
  padding:.2rem .4rem;line-height:1;transition:color .15s}
.sb-close:hover{color:#fff}
.sb-nav{flex:1;padding:.5rem 0;display:flex;flex-direction:column;gap:0}
.sb-item{display:flex;align-items:center;gap:.65rem;padding:.65rem 1.1rem;border:none;
  background:transparent;color:#999;font-family:var(--font);font-size:.72rem;font-weight:600;
  cursor:pointer;transition:all .15s;text-align:left;border-left:3px solid transparent;
  letter-spacing:.3px}
.sb-item:hover{color:#ddd;background:rgba(255,255,255,.03)}
.sb-item.on{color:#fff;border-left-color:var(--blue);background:rgba(59,165,221,.08)}
.sb-num{font-family:var(--font);font-size:.6rem;font-weight:700;color:#666;
  min-width:18px;letter-spacing:1px}
.sb-item.on .sb-num{color:var(--blue)}
.sb-footer{padding:.8rem 1.1rem;border-top:1px solid var(--border);font-family:var(--font);
  font-size:.58rem;color:#666;letter-spacing:.5px}
/* Overlay when sidebar open */
.sb-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:290;cursor:pointer}
.sb-overlay.sb-open{display:block}
/* Toggle button (hamburger) — always visible in header */
.sb-toggle{background:none;border:1px solid var(--border);border-radius:4px;color:#bbb;
  font-size:.9rem;cursor:pointer;padding:.2rem .45rem;line-height:1;transition:all .15s;margin-right:.6rem}
.sb-toggle:hover{color:#fff;border-color:#555}

/* ── LAYOUT ── */
.wrap{padding:2rem 4rem;max-width:1440px;margin:0 auto}
.page{display:none;padding:0 .5rem}.page.on{display:block}
.pg-h{font-family:var(--font);font-size:1.15rem;font-weight:800;letter-spacing:.5px;
  text-transform:uppercase;color:#eee;margin-bottom:.25rem;display:flex;align-items:center;gap:.6rem}
.pg-s{color:#999;font-size:.72rem;margin-bottom:1.4rem;letter-spacing:.2px}
.pg-back{background:none;border:1px solid var(--border);border-radius:4px;color:#888;
  font-size:.68rem;font-weight:700;padding:.2rem .5rem;cursor:pointer;transition:all .15s;
  font-family:var(--font);line-height:1;flex:0 0 auto}
.pg-back:hover{color:#fff;border-color:#555}

/* ── PERIOD BAR ── */
.pbar{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-bottom:1.1rem;
  background:var(--card);border:1px solid var(--border);border-radius:6px;padding:.5rem .9rem}
.pbar-lbl{font-size:.6rem;font-weight:700;color:#999;text-transform:uppercase;letter-spacing:.4px}
.pbtn{padding:.22rem .6rem;border:1px solid var(--border);border-radius:4px;background:transparent;
  color:#bbb;font-family:var(--font);font-size:.66rem;font-weight:700;cursor:pointer;transition:all .15s}
.pbtn.on,.pbtn:hover{background:var(--blue);color:#fff;border-color:var(--blue)}
.psel{background:var(--bg);border:1px solid var(--border);border-radius:4px;padding:.22rem .5rem;
  color:#ddd;font-family:var(--font);font-size:.68rem;outline:none;cursor:pointer}
.psel option{background:var(--bg)}
.pdiv{width:1px;height:16px;background:var(--border);margin:0 .2rem}

/* ── LOGIN SCREEN ── */
.login-screen{position:fixed;inset:0;background:var(--bg);display:flex;
  align-items:center;justify-content:center;z-index:10000}
.login-screen.h{display:none}
.login-box{display:flex;flex-direction:column;align-items:center;gap:.8rem;
  width:320px;padding:2.5rem 2rem;background:var(--card);border:1px solid var(--border);border-radius:10px}
.login-logo{height:70px;width:auto;opacity:.9;margin-bottom:.5rem}
.login-title{font-family:var(--font);font-size:1.6rem;font-weight:900;color:#fff;letter-spacing:2px}
.login-sub{font-size:.72rem;color:#888;margin-bottom:.8rem;letter-spacing:.5px}
.login-inp{width:100%;padding:.6rem .8rem;background:#0c1a26;border:1px solid var(--border);
  border-radius:5px;color:#eee;font-family:var(--font);font-size:.82rem;outline:none;
  transition:border-color .2s}
.login-inp:focus{border-color:var(--blue)}
.login-btn{width:100%;padding:.65rem;background:var(--blue);border:none;border-radius:5px;
  color:#fff;font-family:var(--font);font-size:.82rem;font-weight:800;letter-spacing:1px;
  cursor:pointer;transition:all .2s;margin-top:.3rem}
.login-btn:hover{background:#2b8ec5}
.login-btn:active{transform:scale(.98)}
.login-err{font-size:.7rem;color:#FF6B6B;min-height:1em;text-align:center}

/* ── OVERLAY (first load) ── */
.ov{position:fixed;inset:0;background:var(--bg);display:flex;
  align-items:center;justify-content:center;z-index:9999;transition:opacity .4s}
.ov.h{opacity:0;pointer-events:none}
.ov-inner{display:flex;flex-direction:column;align-items:center;gap:1.2rem;width:300px}
.ov-logo{height:80px;width:auto;opacity:.9;animation:ovPulse 2s ease-in-out infinite}
.ov-bar-wrap{width:100%;height:6px;background:var(--border);border-radius:3px;overflow:hidden;position:relative}
.ov-bar{height:100%;width:0%;background:var(--blue);border-radius:3px;transition:width .4s ease;
  position:relative;overflow:hidden}
.ov-bar::after{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);
  animation:ovShimmer 1.2s ease-in-out infinite}
@keyframes ovShimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.ov-pct{font-size:.85rem;font-weight:800;color:#fff;letter-spacing:1px;font-family:var(--font)}
.ov-status{font-size:.72rem;color:#888;font-family:var(--font);text-align:center;min-height:1.2em}
@keyframes ovPulse{0%,100%{opacity:.9;transform:scale(1)}50%{opacity:.45;transform:scale(.97)}}

/* ── CFG ── */
.cfg{max-width:420px;margin:3rem auto;text-align:center}
.cfg-logo{height:160px;width:auto;display:block;margin:0 auto 2rem}
.cfg-t{font-size:1.6rem;font-weight:800;margin-bottom:.4rem;color:#eee}
.cfg-s{color:#aaa;font-size:.78rem;margin-bottom:1.75rem;line-height:1.6}
.cfg-card{background:var(--card);border:1px solid var(--border);border-radius:6px;padding:1.3rem;text-align:left;margin-bottom:.8rem}
.cfg-lbl{font-family:var(--font);font-size:.6rem;font-weight:700;color:#bbb;text-transform:uppercase;letter-spacing:1px;margin-bottom:.3rem}
.cfg-inp{background:#0c1a26;border:1px solid var(--border);border-radius:4px;padding:.45rem .65rem;
  color:#eee;font-family:var(--font);font-size:.76rem;outline:none;width:100%;margin-bottom:.65rem;transition:border-color .15s}
.cfg-inp:focus{border-color:var(--blue)}
.cfg-btn{width:100%;padding:.65rem;background:var(--blue);color:#fff;border:none;border-radius:4px;
  font-family:var(--font);font-size:.82rem;font-weight:700;cursor:pointer;transition:background .15s}
.cfg-btn:hover{background:var(--blue-d)}.cfg-btn:disabled{background:#1a3a55;color:#555;cursor:not-allowed}
.cfg-or{text-align:center;color:#aaa;font-size:.68rem;margin:.65rem 0;position:relative}
.cfg-or::before,.cfg-or::after{content:'';position:absolute;top:50%;width:43%;height:1px;background:var(--border)}
.cfg-or::before{left:0}.cfg-or::after{right:0}
.cfg-up{width:100%;padding:.55rem;background:transparent;color:#bbb;
  border:1px dashed var(--border);border-radius:4px;font-family:var(--font);
  font-size:.76rem;cursor:pointer;transition:all .15s;display:block;text-align:center}
.cfg-up:hover{border-color:var(--blue);color:#ccc}
#fi{display:none}
.cfg-note{background:rgba(59,165,221,.04);border:1px solid rgba(59,165,221,.12);
  border-radius:4px;padding:.55rem .8rem;font-size:.68rem;color:#bbb;line-height:1.6;margin-top:.6rem}
.cfg-note strong{color:var(--blue)}