/* ===== Base ===== */
*{box-sizing:border-box;margin:0;padding:0}
html{font-family:Arial,"Microsoft YaHei",sans-serif;color:#0f172a;background:#f8fafc;-webkit-text-size-adjust:100%}
body{max-width:760px;margin:0 auto;padding:12px 12px 60px 12px}
a{color:#2563eb;text-decoration:none}
h2{font-size:20px;font-weight:800;margin-bottom:12px}

/* ===== Layout ===== */
.container{max-width:760px;margin:0 auto;padding:0 12px}
.card{border:1px solid #e2e8f0;border-radius:14px;background:#fff;padding:14px;margin:10px 0;box-shadow:0 2px 8px rgba(15,23,42,.04)}
.row{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;align-items:center}
.kpi{text-align:center;padding:8px;border:1px solid #e2e8f0;border-radius:12px;background:linear-gradient(180deg,#fff,#f8fafc)}
.kpi .k{font-size:11px;color:#64748b;font-weight:700}
.kpi .v{font-size:20px;font-weight:800;color:#1e293b}

/* ===== Components ===== */
button,.btn{display:inline-block;width:100%;padding:12px;border:none;border-radius:12px;background:linear-gradient(135deg,#2563eb,#1d4ed8);color:#fff;font-weight:700;font-size:15px;cursor:pointer;box-shadow:0 6px 16px rgba(37,99,235,.18);transition:opacity .15s}
button:active,.btn:active{opacity:.85}
button.sec,.btn.sec{background:#f1f5f9;color:#334155;border:1px solid #e2e8f0;box-shadow:none;width:auto;padding:8px 14px;font-size:13px}
button.warn{background:#dc2626;color:#fff;box-shadow:0 4px 12px rgba(220,38,38,.18)}
input,select,textarea{width:100%;padding:12px;border:1px solid #e2e8f0;border-radius:12px;font-size:15px;background:#fff;color:#0f172a;transition:border .2s}
input:focus,select:focus,textarea:focus{border-color:#2563eb;outline:none;box-shadow:0 0 0 3px rgba(37,99,235,.1)}

/* ===== Tags ===== */
.tag{display:inline-block;padding:3px 10px;border-radius:999px;font-size:11px;font-weight:700;background:#e0f2fe;color:#0369a1}
.tag.pending{background:#fef3c7;color:#92400e}
.tag.done{background:#dcfce7;color:#166534}
.tag.danger{background:#fee2e2;color:#991b1b}

/* ===== Utility ===== */
.muted{color:#64748b;font-size:12px}
.title{font-size:16px;font-weight:800;margin:10px 0 6px 0}
.mono{font-family:Consolas,monospace;font-size:12px;white-space:pre-wrap;word-break:break-all;background:#f1f5f9;padding:8px;border-radius:8px}
.bad{color:#dc2626;font-weight:700}
.ok{color:#16a34a;font-weight:700}
.foot{text-align:center;color:#94a3b8;font-size:12px;margin-top:30px;padding-top:16px;border-top:1px solid #f1f5f9}

/* ===== Tabs ===== */
.tabs{display:flex;gap:0;border-bottom:2px solid #e2e8f0;margin:10px 0}
.tab-btn{padding:10px 16px;border:none;background:none;color:#64748b;font-weight:700;font-size:13px;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;transition:all .2s}
.tab-btn.active{color:#2563eb;border-bottom-color:#2563eb}
.tab-panel{display:none}
.tab-panel.active{display:block}

/* ===== Loading & Toast ===== */
.loading{display:inline-block;width:18px;height:18px;border:2.5px solid #e2e8f0;border-top-color:#2563eb;border-radius:50%;animation:spin .6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);padding:12px 24px;border-radius:12px;font-weight:700;font-size:14px;z-index:9999;box-shadow:0 8px 24px rgba(0,0,0,.15);transition:opacity .3s;pointer-events:none}
.toast.success{background:#16a34a;color:#fff}
.toast.error{background:#dc2626;color:#fff}
.toast.info{background:#2563eb;color:#fff}
.toast.hide{opacity:0}

/* ===== Responsive ===== */
@media(max-width:480px){
  body{padding:8px 8px 50px 8px}
  .row3{grid-template-columns:1fr 1fr}
  button,.btn{padding:10px;font-size:14px}
  .kpi .v{font-size:16px}
}

/* ===== Tables ===== */
table{width:100%;border-collapse:collapse;font-size:12px}
th,td{padding:6px 8px;text-align:left;border-bottom:1px solid #f1f5f9}
th{background:#f8fafc;font-weight:700;color:#64748b;font-size:11px;text-transform:uppercase}
tr:hover{background:#f8fafc}