:root {
  --bg: #0a0a0f;
  --surface: #12121a;
  --surface2: #1a1a2e;
  --border: #2a2a3e;
  --text: #e4e4ef;
  --text2: #8888a0;
  --accent: #7c5cfc;
  --accent2: #a78bfa;
  --accent-glow: rgba(124,92,252,0.15);
  --green: #22c55e;
  --red: #ef4444;
  --radius: 12px;
  --font: 'Inter', -apple-system, sans-serif;
}

* { margin:0; padding:0; box-sizing:border-box; }
body { background:var(--bg); color:var(--text); font-family:var(--font); min-height:100vh; }

.hidden { display:none !important; }

/* Login */
.view { min-height:100vh; }
#login-view {
  display:flex; align-items:center; justify-content:center;
  background: radial-gradient(ellipse at 50% 0%, var(--accent-glow) 0%, transparent 70%);
}
.login-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:20px; padding:48px; text-align:center;
  width:100%; max-width:380px;
  box-shadow: 0 25px 50px rgba(0,0,0,0.5);
}
.login-logo { font-size:48px; margin-bottom:16px; }
.login-card h1 { font-size:28px; font-weight:700; margin-bottom:4px; }
.subtitle { color:var(--text2); margin-bottom:32px; font-size:14px; }
.login-card input {
  width:100%; padding:14px 18px; background:var(--surface2);
  border:1px solid var(--border); border-radius:var(--radius);
  color:var(--text); font-size:15px; margin-bottom:16px;
  outline:none; transition:border 0.2s;
}
.login-card input:focus { border-color:var(--accent); }
.login-card button {
  width:100%; padding:14px; background:var(--accent);
  border:none; border-radius:var(--radius); color:#fff;
  font-size:15px; font-weight:600; cursor:pointer;
  transition: transform 0.1s, box-shadow 0.2s;
}
.login-card button:hover { transform:translateY(-1px); box-shadow:0 8px 24px var(--accent-glow); }
.error { color:var(--red); font-size:13px; margin-top:12px; }

/* Nav */
nav {
  background:var(--surface); border-bottom:1px solid var(--border);
  padding:0 24px; height:60px; display:flex; align-items:center; gap:24px;
  position:sticky; top:0; z-index:100; backdrop-filter:blur(12px);
}
.nav-brand { display:flex; align-items:center; gap:10px; }
.brand-icon { font-size:24px; }
.brand-text { font-size:18px; font-weight:700; }
.nav-tabs { display:flex; gap:4px; margin-left:32px; }
.tab {
  padding:8px 18px; background:none; border:none; color:var(--text2);
  font-size:14px; font-weight:500; cursor:pointer; border-radius:8px;
  transition: all 0.2s;
}
.tab:hover { color:var(--text); background:var(--surface2); }
.tab.active { color:var(--accent); background:var(--accent-glow); }
.logout-btn {
  margin-left:auto; padding:8px 16px; background:var(--surface2);
  border:1px solid var(--border); border-radius:8px; color:var(--text2);
  font-size:13px; cursor:pointer; transition:all 0.2s;
}
.logout-btn:hover { color:var(--red); border-color:var(--red); }

/* Main */
main { max-width:1000px; margin:0 auto; padding:24px; }
.tab-content { display:none; animation: fadeIn 0.3s ease; }
.tab-content.active { display:block; }
@keyframes fadeIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }

/* Stats Grid */
.stats-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:24px; }
.stat-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:24px; text-align:center;
  transition: transform 0.2s;
}
.stat-card:hover { transform:translateY(-2px); }
.stat-card.accent { border-color:var(--accent); background:linear-gradient(135deg,var(--surface),var(--accent-glow)); }
.stat-value { font-size:36px; font-weight:700; margin-bottom:4px; }
.stat-card.accent .stat-value { color:var(--accent2); }
.stat-label { color:var(--text2); font-size:13px; text-transform:uppercase; letter-spacing:1px; }

/* Cards */
.card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:24px; margin-bottom:24px;
}
.card h3 { font-size:16px; font-weight:600; margin-bottom:16px; color:var(--text2); }

/* Chart */
.chart { display:flex; align-items:flex-end; gap:8px; height:120px; padding-top:8px; }
.chart-bar {
  flex:1; background:linear-gradient(to top,var(--accent),var(--accent2));
  border-radius:6px 6px 0 0; min-height:4px; position:relative;
  transition: height 0.5s ease;
}
.chart-bar:hover { opacity:0.8; }
.chart-bar .tooltip {
  position:absolute; top:-28px; left:50%; transform:translateX(-50%);
  background:var(--surface2); color:var(--text); padding:4px 8px;
  border-radius:6px; font-size:11px; white-space:nowrap; display:none;
  border:1px solid var(--border);
}
.chart-bar:hover .tooltip { display:block; }
.chart-label { text-align:center; font-size:10px; color:var(--text2); margin-top:6px; }

/* Create Form */
.create-form { display:flex; flex-wrap:wrap; gap:12px; }
.create-form input {
  flex:1; min-width:200px; padding:12px 16px; background:var(--surface2);
  border:1px solid var(--border); border-radius:var(--radius);
  color:var(--text); font-size:14px; outline:none; transition:border 0.2s;
}
.create-form input:focus { border-color:var(--accent); }
.btn-create {
  padding:12px 28px; background:var(--accent); border:none;
  border-radius:var(--radius); color:#fff; font-weight:600;
  cursor:pointer; transition:all 0.2s; font-size:14px;
}
.btn-create:hover { box-shadow:0 4px 16px var(--accent-glow); }
.create-result {
  margin-top:16px; padding:14px 18px; background:var(--surface2);
  border:1px solid var(--green); border-radius:var(--radius);
  display:flex; align-items:center; justify-content:space-between;
}
.create-result a { color:var(--accent2); text-decoration:none; font-weight:600; font-size:15px; }
.copy-btn {
  padding:6px 14px; background:var(--accent-glow); border:1px solid var(--accent);
  border-radius:8px; color:var(--accent2); cursor:pointer; font-size:13px;
  transition:all 0.2s;
}
.copy-btn:hover { background:var(--accent); color:#fff; }

/* Links Table */
.links-table { overflow-x:auto; }
.links-table table { width:100%; border-collapse:collapse; }
.links-table th {
  text-align:left; padding:12px; color:var(--text2); font-size:12px;
  text-transform:uppercase; letter-spacing:1px; border-bottom:1px solid var(--border);
}
.links-table td { padding:12px; border-bottom:1px solid var(--border); font-size:14px; }
.links-table tr:hover { background:var(--surface2); }
.link-code {
  color:var(--accent2); font-weight:600; font-family:'JetBrains Mono',monospace;
  cursor:pointer; transition:color 0.2s;
}
.link-code:hover { color:var(--accent); }
.link-url { color:var(--text2); max-width:300px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.link-clicks { color:var(--green); font-weight:600; cursor:pointer; }
.link-clicks:hover { text-decoration:underline; }
.btn-delete {
  padding:4px 10px; background:none; border:1px solid var(--border);
  border-radius:6px; color:var(--text2); cursor:pointer; font-size:12px;
  transition:all 0.2s;
}
.btn-delete:hover { border-color:var(--red); color:var(--red); }

/* Recent */
.recent-list { display:flex; flex-direction:column; gap:8px; }
.recent-item {
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 14px; background:var(--surface2); border-radius:8px;
  font-size:13px;
}
.recent-item .code { color:var(--accent2); font-weight:600; font-family:monospace; }
.recent-item .time { color:var(--text2); }

/* Modal */
.modal {
  position:fixed; inset:0; background:rgba(0,0,0,0.7); z-index:200;
  display:flex; align-items:center; justify-content:center;
  backdrop-filter:blur(4px);
}
.modal-content {
  background:var(--surface); border:1px solid var(--border);
  border-radius:16px; padding:32px; width:90%; max-width:600px;
  max-height:80vh; overflow-y:auto; position:relative;
}
.modal-close {
  position:absolute; top:16px; right:16px; background:none;
  border:none; color:var(--text2); font-size:24px; cursor:pointer;
}
.modal-close:hover { color:var(--text); }

/* Mobile */
@media (max-width:640px) {
  .stats-grid { grid-template-columns:1fr; }
  nav { padding:0 16px; }
  .nav-tabs { margin-left:8px; }
  main { padding:16px; }
  .create-form { flex-direction:column; }
  .create-form input { min-width:auto; }
}