/* EXTENTOOL 运营部管理系统 — 商务蓝灰主题 */
:root{
  --navy:#1e3a5f; --navy-d:#152b47; --blue:#2b6cb0; --blue-l:#4a90d9;
  --slate:#64748b; --slate-l:#94a3b8; --bg:#f4f6f9; --card:#ffffff;
  --line:#e2e8f0; --text:#1f2937; --muted:#6b7280;
  --ok:#15803d; --ok-bg:#dcfce7; --warn:#b45309; --warn-bg:#fef3c7;
  --bad:#b91c1c; --bad-bg:#fee2e2; --radius:8px;
  --shadow:0 1px 3px rgba(30,58,95,.08),0 1px 2px rgba(30,58,95,.06);
}
*{box-sizing:border-box}
.hidden{display:none !important}
body{margin:0;background:var(--bg);color:var(--text);
  font-family:"Microsoft YaHei","PingFang SC","Segoe UI",Roboto,sans-serif;font-size:14px;line-height:1.6}
h1,h2,h3{margin:0;font-weight:600}
code{background:#eef2f7;padding:1px 5px;border-radius:4px;font-size:12px;color:var(--navy)}

/* ---------- 顶栏 ---------- */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:linear-gradient(135deg,var(--navy),var(--navy-d));color:#fff;padding:12px 24px}
.brand{display:flex;align-items:center;gap:12px}
.logo{width:40px;height:40px;border-radius:var(--radius);background:rgba(255,255,255,.14);
  display:flex;align-items:center;justify-content:center;font-weight:700;letter-spacing:1px;font-size:15px}
.topbar h1{font-size:17px}
.sub{margin:0;font-size:12px;color:#b9c9de}
.topbar-right{display:flex;align-items:center;gap:10px}
.topbar-right .field span{color:#b9c9de}
.topbar-right select{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.25)}
.topbar-right select option{color:#1f2937}
.badge{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.25);
  padding:3px 10px;border-radius:20px;font-size:12px}

/* ---------- 标签导航 ---------- */
.tabs{display:flex;gap:2px;background:#fff;padding:0 24px;border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:20;overflow-x:auto}
.tab{background:none;border:none;border-bottom:3px solid transparent;padding:12px 18px;
  cursor:pointer;font-size:14px;color:var(--slate);white-space:nowrap;font-family:inherit}
.tab:hover{color:var(--blue);background:#f8fafc}
.tab.active{color:var(--navy);border-bottom-color:var(--blue);font-weight:600}
.tab.hidden{display:none}

main{padding:20px 24px 48px;max-width:1560px;margin:0 auto}
.view.hidden{display:none}

/* ---------- 卡片 / 布局 ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px;box-shadow:var(--shadow);margin-bottom:16px}
.card-head{display:flex;align-items:center;gap:10px;margin-bottom:12px;
  padding-bottom:10px;border-bottom:1px solid var(--line)}
.card-head h3{font-size:15px;color:var(--navy)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
@media(max-width:1100px){.grid-2{grid-template-columns:1fr}}
.spacer{flex:1}
.hint{font-size:12px;color:var(--muted)}
.toolbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:#fff;
  border:1px solid var(--line);border-radius:var(--radius);padding:10px 14px;margin-bottom:16px;box-shadow:var(--shadow)}

/* ---------- 表单 ---------- */
.field{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted)}
.field.inline{flex-direction:row;align-items:center;gap:6px}
.field.span2{grid-column:span 2}
input,select,textarea{font-family:inherit;font-size:13px;color:var(--text);padding:6px 9px;
  border:1px solid #cbd5e1;border-radius:6px;background:#fff;outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--blue-l);box-shadow:0 0 0 3px rgba(74,144,217,.15)}
input:disabled,select:disabled,textarea:disabled{background:#f1f5f9;color:#94a3b8;cursor:not-allowed}
textarea{width:100%;resize:vertical;font-family:Consolas,Monaco,monospace;font-size:12px}
.form-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
.mini{padding:4px 8px;font-size:12px}
.btn-row{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.btn{padding:7px 16px;border-radius:6px;border:1px solid transparent;cursor:pointer;
  font-size:13px;font-family:inherit;transition:.15s}
.btn.primary{background:var(--blue);color:#fff}
.btn.primary:hover{background:var(--navy)}
.btn.ghost{background:#fff;color:var(--navy);border-color:#cbd5e1}
.btn.ghost:hover{background:#f1f5f9;border-color:var(--blue-l)}
.btn.danger{background:#fff;color:var(--bad);border-color:#fca5a5}
.btn.danger:hover{background:var(--bad-bg)}
.btn.mini{padding:4px 10px;font-size:12px}
.icon-btn{background:none;border:none;font-size:16px;cursor:pointer;color:var(--muted)}

/* ---------- 指标卡 ---------- */
.kpi-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:16px}
.kcard{background:#fff;border:1px solid var(--line);border-left:4px solid var(--blue);
  border-radius:var(--radius);padding:14px 16px;box-shadow:var(--shadow)}
.kcard .label{font-size:12px;color:var(--muted)}
.kcard .value{font-size:24px;font-weight:600;color:var(--navy);margin:4px 0;letter-spacing:-.5px}
.kcard .delta{font-size:12px;font-weight:500}
.up{color:var(--ok)} .down{color:var(--bad)} .flat{color:var(--muted)}

/* ---------- 图表 ---------- */
.chart{width:100%;min-height:240px}
.chart svg{width:100%;height:auto;display:block}
.axis{stroke:#cbd5e1;stroke-width:1}
.gridline{stroke:#eef2f7;stroke-width:1}
.axis-text{font-size:10px;fill:var(--muted)}
.line-path{fill:none;stroke:var(--blue);stroke-width:2}
.area-path{fill:rgba(43,108,176,.10)}
.dot{fill:var(--blue)}
.bar{fill:var(--blue)}
.bar:hover{fill:var(--navy)}
.bar-label{font-size:11px;fill:#fff;font-weight:600}
.funnel-name{font-size:12px;fill:var(--text)}
.funnel-val{font-size:11px;fill:var(--muted)}

/* ---------- 表格 ---------- */
.table-wrap{overflow-x:auto;max-height:560px;overflow-y:auto}
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{padding:8px 10px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
th{background:#f8fafc;color:var(--navy);font-weight:600;font-size:12px;position:sticky;top:0;z-index:1}
tbody tr:hover{background:#f8fafc}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
table input,table select{width:100%;min-width:70px}
tfoot td{font-weight:600;background:#f8fafc;color:var(--navy)}

/* ---------- 预警 / 排行 ---------- */
.alert-list,.rank-list{display:flex;flex-direction:column;gap:8px;max-height:280px;overflow-y:auto}
.alert{display:flex;gap:10px;align-items:flex-start;padding:9px 12px;border-radius:6px;font-size:13px;border-left:3px solid}
.alert.bad{background:var(--bad-bg);border-color:var(--bad);color:#7f1d1d}
.alert.warn{background:var(--warn-bg);border-color:var(--warn);color:#78350f}
.alert.ok{background:var(--ok-bg);border-color:var(--ok);color:#14532d}
.rank-row{display:flex;align-items:center;gap:10px;font-size:13px}
.rank-no{width:22px;height:22px;border-radius:50%;background:#eef2f7;color:var(--navy);
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;flex:none}
.rank-row:nth-child(1) .rank-no{background:var(--navy);color:#fff}
.rank-name{width:74px;flex:none}
.rank-bar{flex:1;height:16px;background:#eef2f7;border-radius:8px;overflow:hidden}
.rank-fill{height:100%;background:linear-gradient(90deg,var(--blue-l),var(--blue));border-radius:8px}
.rank-val{width:96px;text-align:right;font-variant-numeric:tabular-nums;color:var(--navy);font-weight:600}

/* ---------- KPI 结果 ---------- */
.result-box{display:flex;flex-direction:column;gap:10px}
.result-row{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px dashed var(--line);font-size:13px}
.result-row b{color:var(--navy);font-variant-numeric:tabular-nums}
.score-big{text-align:center;padding:14px;background:linear-gradient(135deg,#f8fafc,#eef2f7);border-radius:var(--radius)}
.score-big .n{font-size:38px;font-weight:700;color:var(--navy);line-height:1.1}
.score-big .g{font-size:13px;margin-top:4px}
.grade{display:inline-block;padding:2px 12px;border-radius:20px;font-size:12px;font-weight:600}
.grade.A{background:var(--ok-bg);color:var(--ok)}
.grade.B{background:#dbeafe;color:var(--blue)}
.grade.C{background:var(--warn-bg);color:var(--warn)}
.grade.D{background:var(--bad-bg);color:var(--bad)}
.bonus-list{display:flex;flex-direction:column;gap:6px;max-height:260px;overflow-y:auto}
.bonus-item{display:flex;align-items:center;gap:9px;padding:7px 10px;background:#f8fafc;border-radius:6px;font-size:13px}
.bonus-item input[type=checkbox]{width:15px;height:15px;accent-color:var(--blue)}
.bonus-item .amt{margin-left:auto;color:var(--navy);font-weight:600}

/* ---------- 任务看板 ---------- */
.board{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:16px}
@media(max-width:900px){.board{grid-template-columns:1fr}}
.col{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:12px;box-shadow:var(--shadow)}
.col-head{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--navy);
  padding-bottom:9px;border-bottom:2px solid var(--line);margin-bottom:10px;font-size:14px}
.col-count{background:#eef2f7;color:var(--slate);border-radius:20px;padding:1px 9px;font-size:11px}
.col[data-s="todo"] .col-head{border-bottom-color:var(--slate-l)}
.col[data-s="doing"] .col-head{border-bottom-color:var(--blue)}
.col[data-s="done"] .col-head{border-bottom-color:var(--ok)}
.tcards{display:flex;flex-direction:column;gap:9px;min-height:80px}
.tcard{border:1px solid var(--line);border-left:3px solid var(--slate-l);border-radius:6px;
  padding:10px 12px;background:#fff;cursor:grab}
.tcard.p-high{border-left-color:var(--bad)}
.tcard.p-mid{border-left-color:var(--warn)}
.tcard.p-low{border-left-color:var(--slate-l)}
.tcard.overdue{background:var(--bad-bg)}
.tcard.duesoon{background:var(--warn-bg)}
.tcard .t{font-weight:600;font-size:13px;margin-bottom:5px;white-space:normal}
.tcard .meta{display:flex;gap:8px;flex-wrap:wrap;font-size:11px;color:var(--muted);align-items:center}
.chip{background:#eef2f7;padding:1px 7px;border-radius:4px;color:var(--navy)}
.chip.red{background:var(--bad-bg);color:var(--bad)}
.tcard .acts{display:flex;gap:6px;margin-top:8px}
.tcard .acts button{font-size:11px;padding:2px 8px}
.checklist{margin:7px 0 0;padding:0;list-style:none;font-size:12px}
.checklist li{display:flex;gap:6px;align-items:flex-start;padding:2px 0;white-space:normal}
.checklist input{width:14px;height:14px;margin-top:3px;accent-color:var(--blue);flex:none}
.checklist li.done span{text-decoration:line-through;color:var(--muted)}

/* ---------- 弹窗 / 提示 ---------- */
.modal{position:fixed;inset:0;background:rgba(21,43,71,.5);display:flex;
  align-items:center;justify-content:center;z-index:100;padding:20px}
.modal.hidden{display:none}
.modal-box{background:#fff;border-radius:var(--radius);width:min(560px,100%);max-height:88vh;
  display:flex;flex-direction:column;box-shadow:0 20px 50px rgba(21,43,71,.3)}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--line)}
.modal-head h3{font-size:15px;color:var(--navy)}
.modal-body{padding:18px;overflow-y:auto}
.modal-foot{display:flex;justify-content:flex-end;gap:8px;padding:12px 18px;border-top:1px solid var(--line);background:#f8fafc}
.toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);background:var(--navy);
  color:#fff;padding:10px 22px;border-radius:22px;font-size:13px;z-index:200;box-shadow:0 6px 20px rgba(21,43,71,.3)}
.toast.hidden{display:none}
.toast.err{background:var(--bad)}
.msg{margin-top:10px;font-size:12px;min-height:18px}
.msg.ok{color:var(--ok)} .msg.err{color:var(--bad)}
.empty{text-align:center;color:var(--muted);padding:26px;font-size:13px}
.kpi-desc{margin-top:6px;font-size:12px;color:var(--slate);line-height:1.8;white-space:pre-wrap}
.kpi-desc .kpi-line{padding:1px 0}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:5px}
::-webkit-scrollbar-thumb:hover{background:var(--slate-l)}

/* 商品表：可排序列头 */
th[data-k]{ cursor:pointer; user-select:none; white-space:nowrap; }
th[data-k]:hover{ color:var(--blue); }

/* 商品 Top 榜 */
.ptop-list{ display:flex; flex-direction:column; gap:8px; }
.ptop-row{ display:flex; align-items:center; gap:10px; padding:6px 8px; border-radius:8px; background:var(--card2, #f8fafc); }
.ptop-img{ width:44px; height:44px; border-radius:6px; object-fit:cover; flex:none; background:#eef1f4; }
.ptop-img.placeholder{ display:flex; align-items:center; justify-content:center; font-size:11px; color:#94a3b8; }
.ptop-info{ flex:1; min-width:0; }
.ptop-name{ font-size:13px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ptop-meta{ font-size:11px; color:var(--muted, #64748b); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lv-badge{ display:inline-block; padding:0 7px; border-radius:10px; font-size:10px; line-height:16px; vertical-align:1px; }
.ptop-val{ flex:none; text-align:right; font-size:13px; font-weight:600; }
.ptop-val .ptop-num{ font-size:15px; }
.ptop-unit{ font-size:11px; font-weight:400; color:var(--muted, #64748b); }
.rank-img{ width:36px; height:36px; border-radius:6px; object-fit:cover; flex:none; background:#eef1f4; }
.rank-img.placeholder{ display:flex; align-items:center; justify-content:center; font-size:10px; color:#94a3b8; }

/* 绩效面谈与改进计划 */
.review-flow{ display:inline-flex; align-items:center; gap:6px; font-size:12px; }
.rv-step{ padding:2px 10px; border-radius:12px; background:var(--card2, #f1f5f9); color:var(--muted, #64748b); border:1px solid var(--border, #e2e8f0); }
.rv-step.on{ background:var(--ok-bg, #e8f5e9); color:var(--ok, #2e7d32); border-color:var(--ok, #2e7d32); }
.rv-step.done{ font-weight:600; }
.rv-arrow{ color:var(--muted, #94a3b8); }
.rv-plan{ display:flex; flex-direction:column; gap:6px; }
.rv-plan-row{ display:flex; gap:6px; align-items:center; }
.rv-plan-row input{ flex:1; }

/* 周报月报 */
.rp-head{ margin-bottom:6px; }
.rp-title{ font-size:18px; font-weight:600; }
.rp-meta{ color:var(--muted, #64748b); font-size:12px; }
.rp-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px; margin:12px 0; }
.rp-card{ border:1px solid var(--border, #e2e8f0); border-radius:8px; padding:10px 12px; background:var(--card2, #f8fafc); }
.rp-label{ font-size:12px; color:var(--muted, #6b7280); }
.rp-value{ font-size:20px; font-weight:600; margin-top:2px; }
.rp-sub{ font-size:11px; margin-top:4px; }
.rp-delta.up{ color:var(--ok, #16a34a); }
.rp-delta.down{ color:var(--bad, #dc2626); }
.rp-section{ margin-top:14px; }
.rp-section h3{ font-size:14px; margin:0 0 8px; border-left:3px solid var(--blue, #2563eb); padding-left:8px; }
.rp-thumb{ width:30px; height:30px; object-fit:cover; border-radius:4px; vertical-align:middle; margin-right:6px; }
.rp-notes{ border-top:2px solid var(--border, #e2e8f0); margin-top:18px; padding-top:12px; }
.rp-notes textarea{ width:100%; border:1px solid var(--border, #e2e8f0); border-radius:6px; padding:8px; font-size:13px; font-family:inherit; box-sizing:border-box; }
.rp-action{ display:flex; gap:8px; align-items:center; margin:6px 0; }
.rp-action input[type=text]{ flex:1; }

/* 预警闭环 */
.alert{ display:flex; align-items:flex-start; gap:8px; }
.alert-body{ flex:1; min-width:0; }
.alert-note{ font-size:11px; color:var(--muted, #64748b); margin-top:2px; }
.alert-st{ flex:none; font-size:11px; padding:1px 8px; border-radius:10px; margin-top:2px; white-space:nowrap; }
.alert-st.open{ background:var(--bad-bg, #fee2e2); color:var(--bad, #dc2626); }
.alert-st.doing{ background:#dbeafe; color:#1d4ed8; }
.alert-st.done{ background:var(--ok-bg, #dcfce7); color:var(--ok, #16a34a); }
.alert-st.ignored{ background:#e5e7eb; color:#6b7280; }
.alert-ops{ flex:none; display:inline-flex; gap:4px; white-space:nowrap; }
.alert-hist{ margin-top:8px; font-size:12px; color:var(--muted, #64748b); }
.alert-hist summary{ cursor:pointer; padding:4px 0; }

/* ========== 登录页（商务蓝灰 · 品牌分栏） ========== */
.login-wrap{ position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center;
  padding:20px;
  background:
    radial-gradient(900px 500px at 85% -10%, rgba(74,144,217,.32), transparent 60%),
    radial-gradient(700px 420px at -10% 110%, rgba(74,144,217,.22), transparent 60%),
    linear-gradient(135deg, #0c1a30 0%, #1e3a5f 55%, #2b6cb0 130%); }
.login-card{ display:flex; width:min(940px,100%); min-height:520px; border-radius:18px; overflow:hidden;
  box-shadow:0 30px 70px rgba(4,12,28,.5); background:#fff }
.login-brand{ flex:1.2; position:relative; padding:46px 42px; color:#fff; display:flex; flex-direction:column;
  background:linear-gradient(155deg, #152b47 0%, #1e3a5f 60%, #245a8c 100%); overflow:hidden }
.login-deco{ position:absolute; right:-90px; top:-90px; width:280px; height:280px; border-radius:50%;
  border:1px solid rgba(255,255,255,.12) }
.login-deco::after{ content:""; position:absolute; inset:42px; border-radius:50%; border:1px solid rgba(255,255,255,.10) }
.login-deco::before{ content:""; position:absolute; inset:96px; border-radius:50%; background:rgba(255,255,255,.06) }
.login-logo{ display:flex; align-items:center; gap:14px; margin-bottom:38px }
.login-logo svg{ width:46px; height:46px; border-radius:12px; background:linear-gradient(135deg,#4a90d9,#2b6cb0);
  padding:9px; box-shadow:0 8px 20px rgba(0,0,0,.25) }
.login-logo-name{ font-size:20px; font-weight:700; letter-spacing:1px }
.login-logo-sub{ font-size:12px; color:#a8bfda }
.login-title{ font-size:30px; font-weight:700; letter-spacing:2px; margin-bottom:10px }
.login-slogan{ font-size:14px; color:#c3d4e8; margin-bottom:30px }
.login-points{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:14px }
.login-points li{ position:relative; padding-left:26px; font-size:13px; color:#dce8f5 }
.login-points li::before{ content:""; position:absolute; left:0; top:4px; width:14px; height:14px; border-radius:50%;
  background:rgba(74,144,217,.35); border:2px solid #4a90d9 }
.login-foot{ margin-top:auto; font-size:12px; color:#8fa9c6; padding-top:30px }
.login-form{ flex:1; padding:52px 48px; display:flex; flex-direction:column; justify-content:center; gap:18px }
.login-form-title{ font-size:24px; font-weight:700; color:var(--navy) }
.login-form-sub{ font-size:13px; color:var(--muted); margin-top:-12px }
.login-form .field span{ font-size:13px; color:var(--slate) }
.login-form input{ height:44px; border-radius:10px; border:1px solid var(--line); padding:0 14px; font-size:14px;
  transition:border-color .15s, box-shadow .15s; background:#fbfcfe }
.login-form input:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(43,108,176,.15) }
.login-btn{ height:46px; border-radius:10px; font-size:15px; letter-spacing:6px; margin-top:4px;
  background:linear-gradient(135deg,var(--blue-l),var(--blue)); border:none; color:#fff; cursor:pointer;
  box-shadow:0 6px 16px rgba(43,108,176,.35); transition:transform .12s, box-shadow .12s; font-family:inherit }
.login-btn:hover{ transform:translateY(-1px); box-shadow:0 10px 22px rgba(43,108,176,.42) }
.login-btn:active{ transform:translateY(0) }
.login-form .msg{ text-align:center; margin-top:0 }
@media(max-width:760px){ .login-brand{ display:none } }

/* ========== 千亿同盟（战队 PK 看板） ========== */
.aln-hero{ background:linear-gradient(150deg,#0f2a4a 0%, #1e3a5f 55%, #24588d 100%); color:#fff;
  border-radius:14px; padding:20px 22px 14px; margin-bottom:14px; box-shadow:0 8px 24px rgba(15,42,74,.25) }
.aln-hero-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:14px }
.aln-hero-head h3{ font-size:19px; letter-spacing:.5px; color:#fff }
.aln-hero-head p{ margin:2px 0 0; font-size:12px; color:#a9c3e0 }
.aln-hero-legend{ display:flex; gap:12px; font-size:12px; color:#c6d7ec }
.aln-hero-legend .lg{ padding:2px 10px; border-radius:12px; background:rgba(255,255,255,.08) }
.aln-hero-legend .lg-m{ background:rgba(245,166,35,.18); border:1px solid rgba(245,166,35,.5); color:#ffd489 }
.aln-team-row{ display:flex; align-items:center; gap:12px; padding:9px 14px; border-radius:10px;
  background:rgba(255,255,255,.05); margin-bottom:8px; border:1px solid rgba(255,255,255,.07) }
.aln-team-row.mine{ background:linear-gradient(90deg, rgba(245,166,35,.16), rgba(245,166,35,.05));
  border-color:rgba(245,166,35,.55); box-shadow:0 0 0 1px rgba(245,166,35,.25) inset }
.aln-medal{ display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px;
  border-radius:50%; font-size:13px; font-weight:700; flex:none }
.aln-medal.gold{ background:linear-gradient(135deg,#ffe9a8,#d4af37); color:#6b4e00 }
.aln-medal.silver{ background:linear-gradient(135deg,#eef2f6,#aab8c9); color:#3c4a5c }
.aln-medal.bronze{ background:linear-gradient(135deg,#f2cfb2,#cd7f32); color:#5b3209 }
.aln-medal.dim{ background:#2c4a70; color:#d7e5f5 }
.aln-medal.mini{ width:20px; height:20px; font-size:11px }
.aln-tag{ flex:none; font-size:12px; font-weight:700; color:#ffd489; letter-spacing:.5px }
.aln-tname{ flex:none; min-width:86px; font-size:14px; font-weight:600 }
.aln-tname em{ font-style:normal; font-size:11px; background:rgba(245,166,35,.9); color:#3a2503;
  border-radius:8px; padding:0 7px; margin-left:6px }
.aln-dchips{ flex:1; display:flex; gap:5px; min-width:120px }
.aln-dchip{ width:20px; height:20px; border-radius:6px; background:rgba(255,255,255,.12); color:#cfe1f5;
  font-size:11px; display:inline-flex; align-items:center; justify-content:center }
.aln-dchip.m{ background:rgba(245,166,35,.85); color:#3a2503; font-weight:700 }
.aln-pts{ flex:none; text-align:right }
.aln-pts b{ font-size:22px; color:#ffd489 }
.aln-pts i{ font-style:normal; font-size:12px; color:#9db8d8; margin-left:2px }
.aln-tabs{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px }
.aln-tab{ border:1px solid var(--line); background:#fff; border-radius:20px; padding:7px 14px; cursor:pointer;
  font-size:13px; color:var(--slate); font-family:inherit; display:inline-flex; align-items:center; gap:6px;
  box-shadow:var(--shadow) }
.aln-tab span{ font-size:11px; color:var(--muted) }
.aln-tab b{ color:#b45309; font-size:11px; background:var(--warn-bg); border-radius:8px; padding:0 6px }
.aln-tab.on{ background:linear-gradient(135deg,var(--blue),var(--navy)); color:#fff; border-color:transparent }
.aln-tab.on span{ color:#cfe1f5 }
.aln-tab.on.mine{ background:linear-gradient(135deg,#e6990a,#b45309); }
.aln-tab.mine:not(.on){ border-color:#f0c87a }
.aln-dim{ margin-bottom:14px }
.aln-dim-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
  padding-bottom:10px; border-bottom:1px solid var(--line); margin-bottom:12px }
.aln-dim-head h3{ font-size:15px; color:var(--navy); display:flex; align-items:center; gap:8px }
.aln-dim-head h3 .hint{ font-weight:400 }
.aln-dim-sub{ font-size:12px; color:var(--muted) }
.aln-dim-sub b{ color:#b45309; font-size:15px }
.aln-dim-grid{ display:grid; grid-template-columns:220px 1fr 1.15fr; gap:14px; align-items:stretch }
@media(max-width:1180px){ .aln-dim-grid{ grid-template-columns:1fr; } }
.aln-col{ min-width:0 }
.aln-col-title{ font-size:12px; color:var(--muted); margin-bottom:8px; font-weight:600 }
.aln-mycard{ border:1px dashed #cdd9ea; border-radius:10px; padding:12px; text-align:center; height:100%;
  background:linear-gradient(180deg,#f8fafc,#eef3f9) }
.aln-mycard-top{ display:flex; align-items:center; justify-content:center; gap:6px; font-size:12px; color:var(--slate) }
.aln-mycard-top b{ color:var(--navy) }
.aln-mycard-num{ font-size:34px; font-weight:700; color:var(--navy); margin:4px 0 2px; letter-spacing:-.5px }
.aln-mycard-foot{ font-size:11px; color:var(--muted) }
.aln-bar-row{ display:flex; align-items:center; gap:8px; margin-bottom:7px }
.aln-bar{ flex:1; height:12px; background:#edf1f6; border-radius:8px; overflow:hidden; display:block }
.aln-bar.small{ height:8px }
.aln-bar-fill{ display:block; height:100%; background:linear-gradient(90deg,var(--blue-l),var(--blue));
  border-radius:8px; transition:width .4s }
.aln-bar-fill.m{ background:linear-gradient(90deg,#f5b301,#e6990a) }
.aln-bar-name{ flex:none; width:104px; font-size:12px; color:var(--slate); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.aln-bar-name.m{ color:#b45309; font-weight:700 }
.aln-bar-val{ flex:none; width:56px; text-align:right; font-size:12px; font-weight:700; color:var(--navy);
  font-variant-numeric:tabular-nums }
.aln-comp-row{ display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:8px; margin-bottom:4px }
.aln-comp-row:hover{ background:#f6f8fb }
.aln-comp-row.me{ background:var(--warn-bg); outline:1px solid #f0c87a }
.aln-comp-rk{ flex:none; width:20px; height:20px; border-radius:50%; background:#e8eef5; color:var(--navy);
  font-size:11px; font-weight:700; display:inline-flex; align-items:center; justify-content:center }
.aln-comp-row:nth-child(2) .aln-comp-rk{ background:linear-gradient(135deg,#ffe9a8,#d4af37); color:#6b4e00 }
.aln-comp-row:nth-child(3) .aln-comp-rk{ background:linear-gradient(135deg,#eef2f6,#aab8c9); color:#3c4a5c }
.aln-comp-row:nth-child(4) .aln-comp-rk{ background:linear-gradient(135deg,#f2cfb2,#cd7f32); color:#5b3209 }
.aln-comp-row.me .aln-comp-rk{ background:linear-gradient(135deg,#f5b301,#e6990a); color:#fff }
.aln-comp-name{ flex:none; width:104px; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.aln-comp-name em{ font-style:normal; font-size:10px; color:#fff; background:#b45309; border-radius:6px;
  padding:0 5px; margin-left:4px }
.aln-empty{ padding:40px; text-align:center; color:var(--muted) }
.aln-comp-row.unset{ background:#fffaf0; outline:1px dashed #f0c87a }
.aln-comp-row.unset:hover{ background:#fff6e0 }
.aln-warn{ font-style:normal; color:#b45309; font-weight:600; font-size:11px; white-space:nowrap }
.aln-warn-tag{ font-style:normal; font-size:11px; color:#b45309; background:var(--warn-bg,#fff3d6);
  border:1px solid #f0c87a; border-radius:8px; padding:0 7px; margin-left:8px }