/* ── Reset & Base ─────────────────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:system-ui,sans-serif;background:#f4f5f7;color:#1a1a1a;font-size:14px;}

/* ── Header ─────────────────────────────────────────────── */
.header{background:#1e3a5f;color:#fff;padding:12px 16px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;position:sticky;top:0;z-index:100;}
.header h1{font-size:17px;font-weight:600;display:flex;align-items:center;gap:8px;}
.header-right{display:flex;align-items:center;gap:10px;}
.nav-links{display:flex;gap:4px;}
.nav-link{padding:5px 12px;border-radius:6px;font-size:12px;font-weight:500;color:rgba(255,255,255,0.75);text-decoration:none;transition:background 0.15s;}
.nav-link:hover{background:rgba(255,255,255,0.12);}
.nav-link.active{background:rgba(255,255,255,0.2);color:#fff;}
.api-status{font-size:11px;padding:4px 10px;border-radius:12px;font-weight:500;white-space:nowrap;}
.api-status.ok{background:#1D9E75;color:#fff;}
.api-status.err{background:#D85A30;color:#fff;}
.api-status.loading{background:#888;color:#fff;}
.btn-logout{padding:5px 10px;border-radius:6px;font-size:11px;border:1px solid rgba(255,255,255,0.3);background:transparent;color:rgba(255,255,255,0.8);cursor:pointer;}
.btn-logout:hover{background:rgba(255,255,255,0.1);}

/* ── Login Card ─────────────────────────────────────────── */
.login-wrap{display:flex;align-items:center;justify-content:center;min-height:calc(100vh - 56px);padding:20px;}
.login-card{width:100%;max-width:380px;background:#fff;border-radius:12px;border:1px solid #e8e8e8;padding:28px;}
.login-card h2{font-size:16px;font-weight:600;margin-bottom:6px;color:#1e3a5f;}
.login-card p{font-size:12px;color:#888;margin-bottom:20px;}
.form-group{margin-bottom:12px;}
.form-group label{display:block;font-size:11px;color:#888;margin-bottom:4px;font-weight:500;text-transform:uppercase;letter-spacing:0.5px;}
.form-group input{width:100%;padding:9px 12px;border:1px solid #ddd;border-radius:8px;font-size:13px;background:#fff;color:#111;transition:border-color 0.15s;}
.form-group input:focus{outline:none;border-color:#1e3a5f;box-shadow:0 0 0 3px rgba(30,58,95,0.08);}
.error-box{background:#fee2e2;color:#991b1b;border:1px solid #fca5a5;border-radius:7px;padding:8px 12px;font-size:12px;margin-top:10px;}

/* ── Buttons ─────────────────────────────────────────────── */
.btn{padding:9px 16px;border:1px solid #ddd;border-radius:8px;background:#fff;color:#111;cursor:pointer;font-size:13px;font-weight:500;transition:all 0.15s;}
.btn:hover{background:#f5f5f5;}
.btn:active{opacity:0.75;transform:scale(0.98);}
.btn-primary{background:#1e3a5f;color:#fff;border-color:#1e3a5f;width:100%;padding:11px;}
.btn-primary:hover{background:#16304f;}
.btn-sm{padding:5px 10px;font-size:11px;}
.btn-outline{background:transparent;border:1px solid #ddd;color:#555;}
.btn-outline:hover{background:#f5f5f5;}

/* ── App Container ──────────────────────────────────────── */
.app{max-width:1100px;margin:0 auto;padding:12px;}

/* ── Filter Card ────────────────────────────────────────── */
.filter-card{background:#fff;border-radius:10px;border:1px solid #e8e8e8;margin-bottom:14px;overflow:hidden;}
.filter-toggle{display:flex;align-items:center;justify-content:space-between;padding:11px 14px;cursor:pointer;user-select:none;touch-action:manipulation;}
.filter-toggle span.filter-title{font-size:13px;font-weight:600;color:#1e3a5f;}
.filter-arrow{font-size:11px;color:#888;transition:transform 0.2s;}
.filter-arrow.open{transform:rotate(180deg);}
.filter-body{display:none;padding:12px 14px 14px;border-top:1px solid #f0f0f0;}
.filter-body.open{display:block;}
.filter-row{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:10px;align-items:center;}
.filter-label{font-size:11px;color:#888;font-weight:500;min-width:64px;}
.chip-group{display:flex;flex-wrap:wrap;gap:5px;}
.chip{padding:5px 11px;border-radius:16px;border:1px solid #ddd;background:#fff;font-size:12px;cursor:pointer;user-select:none;touch-action:manipulation;transition:all 0.12s;}
.chip:hover{border-color:#aaa;}
.chip.active{background:#1e3a5f;color:#fff;border-color:#1e3a5f;}
.chip.active-w{background:#9d174d;color:#fff;border-color:#9d174d;}
.chip.active-m{background:#1e40af;color:#fff;border-color:#1e40af;}
.chip.new{background:#d97706;color:#fff;border-color:#d97706;}
.search-row{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:8px;}
.search-row input,.points-row input{flex:1;min-width:130px;padding:7px 10px;border:1px solid #ddd;border-radius:7px;font-size:12px;background:#fff;color:#111;transition:border-color 0.15s;}
.search-row input:focus,.points-row input:focus{outline:none;border-color:#1e3a5f;}
.points-row{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:8px;}
.points-row input{min-width:130px;flex:1;}
.filter-actions{display:flex;gap:8px;margin-top:10px;align-items:center;flex-wrap:wrap;}

/* ── Stats Bar ─────────────────────────────────────────── */
.stats-bar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px;}
.stat{background:#fff;border-radius:8px;border:1px solid #e8e8e8;padding:8px 12px;font-size:12px;color:#888;}
.stat strong{color:#1e3a5f;font-size:15px;display:block;}

/* ── Loading / Empty ───────────────────────────────────── */
.loading-msg{text-align:center;padding:40px;color:#888;font-size:13px;}
.no-data{text-align:center;padding:24px;color:#aaa;font-size:13px;}
.spinner{display:inline-block;width:18px;height:18px;border:2px solid #ddd;border-top-color:#1e3a5f;border-radius:50%;animation:spin 0.7s linear infinite;vertical-align:middle;margin-right:8px;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ── Badges ─────────────────────────────────────────────── */
.badge{display:inline-block;font-size:10px;padding:1px 6px;border-radius:8px;font-weight:500;vertical-align:middle;}
.badge-m{background:#dbeafe;color:#1e40af;}
.badge-w{background:#fce7f3;color:#9d174d;}
.badge-dsq{background:#fee2e2;color:#991b1b;}
.badge-scm{background:#e0f2fe;color:#0369a1;}
.badge-lcm{background:#dcfce7;color:#166534;}
.badge-new{background:#fef3c7;color:#92400e;}

/* ── Tooltip ────────────────────────────────────────────── */
.tip{position:relative;cursor:help;border-bottom:1px dashed #aaa;}
.tip::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 5px);left:50%;transform:translateX(-50%);background:#1a1a1a;color:#fff;font-size:11px;padding:5px 9px;border-radius:6px;white-space:nowrap;z-index:200;pointer-events:none;opacity:0;transition:opacity 0.15s;line-height:1.4;}
.tip:hover::after{opacity:1;}

/* ── Scrollbar ─────────────────────────────────────────── */
::-webkit-scrollbar{height:4px;width:4px;}
::-webkit-scrollbar-track{background:#f0f0f0;}
::-webkit-scrollbar-thumb{background:#ccc;border-radius:2px;}

/* ── Responsive ─────────────────────────────────────────── */
@media(max-width:480px){
  .header{padding:10px 12px;}
  .nav-link span{display:none;}
  .app{padding:8px;}
}