@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root{
  --bg:#f0f2f5;
  --bg-card:#fff;
  --bg-sidebar:#0f1419;
  --bg-sidebar-hover:#1a2332;
  --text:#1a1a2e;
  --text-muted:#88929e;
  --text-sidebar:#88929e;
  --text-sidebar-active:#fff;
  --accent:#00d4aa;
  --accent2:#6c5ce7;
  --accent-glow:rgba(0,212,170,.25);
  --border:#e8ecf1;
  --radius:4px;
  --radius-lg:6px;
  --font:'Inter',-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--font);background:var(--bg);color:var(--text);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--accent2);text-decoration:none;transition:color .2s}
a:hover{color:var(--accent)}

/* ====== LOGIN / REGISTER ====== */
.page-login{
  display:flex;align-items:center;justify-content:center;
  min-height:100vh;
  background:linear-gradient(135deg,#0f1419 0%,#1a1a2e 50%,#16213e 100%);
  position:relative;overflow:hidden;
}
.page-login::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 30% 20%,rgba(0,212,170,.08) 0%,transparent 60%),
             radial-gradient(ellipse at 70% 80%,rgba(108,92,231,.08) 0%,transparent 60%);
}
.page-login .card{
  width:400px;padding:44px 36px;position:relative;z-index:1;
  background:rgba(255,255,255,.03);
  backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius-lg);
}
.page-login .card h2{text-align:center;font-size:20px;font-weight:700;color:#fff;letter-spacing:-.5px}
.page-login .card .sub{text-align:center;color:var(--text-sidebar);font-size:13px;margin:4px 0 32px}
.page-login .form-group{margin-bottom:20px}
.page-login .form-group label{display:block;margin-bottom:6px;font-size:12px;color:var(--text-sidebar);text-transform:uppercase;letter-spacing:1px;font-weight:500}
.page-login .form-group input{
  width:100%;padding:10px 14px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1);
  border-radius:var(--radius);
  font-size:14px;color:#fff;outline:none;font-family:var(--font);
  transition:border-color .2s,box-shadow .2s;
}
.page-login .form-group input:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-glow);
}
.page-login .btn{
  width:100%;padding:11px;border:none;border-radius:var(--radius);
  font-size:14px;cursor:pointer;font-weight:600;font-family:var(--font);
  letter-spacing:.5px;transition:all .2s;
}
.page-login .btn-primary{
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:#fff;
}
.page-login .btn-primary:hover{filter:brightness(1.15);transform:translateY(-1px)}
.page-login .btn-primary:disabled{opacity:.5;transform:none;cursor:not-allowed}
.page-login .footer-text{text-align:center;margin-top:20px;font-size:13px;color:var(--text-sidebar)}
.err-msg{color:#ff6b6b;font-size:12px;margin-top:4px}

/* ====== APP LAYOUT ====== */
.app-layout{display:flex;min-height:100vh}
.sidebar{
  width:230px;background:var(--bg-sidebar);
  display:flex;flex-direction:column;flex-shrink:0;
  border-right:1px solid rgba(255,255,255,.06);
}
.sidebar .logo{
  padding:20px 22px;font-size:15px;font-weight:700;color:#fff;
  letter-spacing:-.3px;border-bottom:1px solid rgba(255,255,255,.06);
}
.sidebar nav{flex:1;padding:14px 0}
.sidebar nav a{
  display:flex;align-items:center;gap:10px;
  padding:10px 22px;color:var(--text-sidebar);font-size:13px;
  font-weight:500;transition:all .2s;border-left:2px solid transparent;
}
.sidebar nav a:hover{background:var(--bg-sidebar-hover);color:#d0d4da}
.sidebar nav a.active{
  background:rgba(0,212,170,.08);
  color:var(--accent);border-left-color:var(--accent);font-weight:600;
}
.sidebar .user-area{
  padding:16px 22px;border-top:1px solid rgba(255,255,255,.06);
  display:flex;align-items:center;justify-content:space-between;
  font-size:13px;color:var(--text-sidebar);
}
.main-area{flex:1;display:flex;flex-direction:column}
.topbar{
  height:48px;background:var(--bg-card);border-bottom:1px solid var(--border);
  display:flex;align-items:center;padding:0 28px;
  justify-content:space-between;font-size:13px;
}
.content{padding:28px;flex:1;overflow-y:auto}

/* ====== CARDS ====== */
.card{
  border-radius:var(--radius-lg);background:var(--bg-card);
  border:1px solid var(--border);overflow:hidden;
}
.card+.card{margin-top:16px}
.card-header{
  padding:14px 20px;border-bottom:1px solid var(--border);
  font-weight:600;font-size:14px;color:var(--text);
  display:flex;align-items:center;justify-content:space-between;
}
.card-body{padding:20px}

/* ====== STATS ====== */
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px}
.stat-card{
  padding:20px 22px;background:var(--bg-card);
  border:1px solid var(--border);border-radius:var(--radius-lg);
  position:relative;overflow:hidden;
}
.stat-card::after{
  content:'';position:absolute;top:0;left:0;width:3px;height:100%;
  background:linear-gradient(to bottom,var(--accent),var(--accent2));
}
.stat-card .num{font-size:32px;font-weight:700;color:var(--text);letter-spacing:-1px}
.stat-card .lbl{font-size:12px;color:var(--text-muted);margin-top:4px;text-transform:uppercase;letter-spacing:.5px}

/* ====== TABLES ====== */
table{width:100%;border-collapse:collapse}
table th,table td{padding:9px 14px;text-align:left;font-size:13px;border-bottom:1px solid var(--border)}
table th{
  background:#fafbfc;font-weight:600;color:var(--text-muted);
  font-size:11px;text-transform:uppercase;letter-spacing:.5px;
}
table tr:hover td{background:#f8f9fb}
table td{color:var(--text)}

/* ====== BADGES ====== */
.badge{display:inline-block;padding:2px 8px;border-radius:3px;font-size:11px;font-weight:500;letter-spacing:.3px}
.badge-default{background:#f0f1f3;color:#6b7280}
.badge-success{background:#e6faf3;color:#00b894}
.badge-warning{background:#fff8ed;color:#e67e22}
.badge-info{background:#edf2ff;color:var(--accent2)}
.badge-error{background:#fff0f0;color:#e74c3c}

/* ====== BUTTONS ====== */
.btn-sm{
  padding:5px 14px;font-size:12px;font-weight:500;font-family:var(--font);
  border-radius:var(--radius);border:1px solid var(--border);
  background:var(--bg-card);cursor:pointer;color:var(--text);
  transition:all .2s;letter-spacing:.3px;
}
.btn-sm:hover{border-color:var(--accent2);color:var(--accent2)}
.btn-sm.primary{
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:#fff;border-color:transparent;
}
.btn-sm.primary:hover{filter:brightness(1.1)}
.btn-sm.danger{color:#e74c3c;border-color:#fecaca}
.btn-sm.danger:hover{background:#e74c3c;color:#fff;border-color:#e74c3c}
.btn-sm:disabled{opacity:.4;cursor:not-allowed;pointer-events:none}
.btn{margin-right:6px}

/* ====== MODAL ====== */
.modal-overlay{
  position:fixed;inset:0;background:rgba(15,20,25,.6);
  backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;z-index:1000;
}
.modal-box{
  background:var(--bg-card);border-radius:var(--radius-lg);
  padding:28px;min-width:420px;max-width:600px;
  border:1px solid var(--border);
}
.modal-box h3{margin-bottom:16px;font-size:15px;font-weight:600}
.modal-box .form-group{margin-bottom:16px}
.modal-box .form-group label{display:block;margin-bottom:5px;font-size:12px;color:var(--text-muted);font-weight:500}
.modal-box .form-group input{
  width:100%;padding:8px 12px;border:1px solid var(--border);
  border-radius:var(--radius);font-size:14px;outline:none;font-family:var(--font);
  transition:border-color .2s;
}
.modal-box .form-group input:focus{border-color:var(--accent2)}
.modal-box .actions{margin-top:20px;display:flex;justify-content:flex-end;gap:8px}

/* ====== UPLOAD AREA ====== */
.upload-area{
  border:2px dashed var(--border);border-radius:var(--radius-lg);
  padding:36px;text-align:center;cursor:pointer;transition:all .2s;
}
.upload-area:hover{border-color:var(--accent);background:rgba(0,212,170,.03)}
.upload-area input[type=file]{display:none}

/* ====== TABS ====== */
.tab-nav{display:flex;gap:0;margin-bottom:20px}
.tab-nav span{
  padding:10px 22px;cursor:pointer;font-size:13px;font-weight:500;
  color:var(--text-muted);border-bottom:2px solid transparent;
  transition:all .2s;
}
.tab-nav span:hover{color:var(--text)}
.tab-nav span.active{color:var(--accent2);border-bottom-color:var(--accent2)}

/* ====== MISC ====== */
.loading{text-align:center;padding:48px;color:var(--text-muted);font-size:14px}
.empty-state{text-align:center;padding:64px 20px;color:#c0c6ce}
.empty-state svg{width:48px;height:48px;margin-bottom:12px;opacity:.3}
.empty-state p{font-size:13px}

.search-input{
  padding:8px 14px;border:1px solid var(--border);
  border-radius:var(--radius);font-size:13px;width:260px;outline:none;
  font-family:var(--font);transition:border-color .2s;
}
.search-input:focus{border-color:var(--accent2)}
.toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}

.pagination{display:flex;justify-content:center;gap:6px;margin-top:20px}
.pagination button{
  padding:6px 14px;border:1px solid var(--border);border-radius:var(--radius);
  background:var(--bg-card);cursor:pointer;font-size:13px;font-family:var(--font);
  transition:all .2s;
}
.pagination button:hover{border-color:var(--accent2);color:var(--accent2)}
.pagination button:disabled{opacity:.4;cursor:not-allowed}

.group-card{margin-bottom:12px;border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}
.group-card .group-header{
  padding:10px 16px;background:#fafbfc;
  font-weight:600;font-size:12px;color:var(--text-muted);
  text-transform:uppercase;letter-spacing:.5px;
  border-bottom:1px solid var(--border);
}
.group-card table th,.group-card table td{padding:7px 14px;font-size:12px}

.price-total{
  margin-top:16px;padding:18px 22px;
  background:linear-gradient(135deg,rgba(0,212,170,.06),rgba(108,92,231,.06));
  border:1px solid var(--border);border-radius:var(--radius-lg);
  display:flex;align-items:center;gap:16px;
}
.price-total .big-num{font-size:36px;font-weight:700;color:var(--accent);letter-spacing:-1px}
.price-total .big-label{font-size:14px;color:var(--text-muted)}

.summary-bar{
  display:flex;gap:24px;padding:16px 20px;
  background:linear-gradient(135deg,rgba(0,212,170,.04),rgba(108,92,231,.04));
  border:1px solid var(--border);border-radius:var(--radius-lg);margin-top:16px;
}

.inline-actions{display:flex;gap:6px}
.sidebar nav a svg{width:18px;height:18px;flex-shrink:0}
.file-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.file-card{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:16px;transition:all .2s;
}
.file-card:hover{border-color:var(--accent2)}
.file-card h4{font-size:14px;margin-bottom:6px;font-weight:600}
.file-card .meta{font-size:12px;color:var(--text-muted);margin-bottom:10px}

/* ====== SCROLLBAR ====== */
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#d0d5dd;border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:#b0b5bd}

/* ====== ANIMATIONS ====== */
.stat-card,.card{animation:fadeUp .4s ease}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}