:root{
  --purple: #6E4FE8;
  --purple-dark: #4A32A8;
  --purple-light: #F1EDFE;
  --ink: #1C1B29;
  --ink-soft: #5B5872;
  --line: #E4E1F5;
  --paper: #FFFFFF;
  --bg: #F6F5FB;
  --coral: #D85A30;
  --green: #1D9E75;
}
*{ box-sizing: border-box; }
body{
  margin:0; font-family: -apple-system, 'Inter', 'Helvetica Neue', Arial, sans-serif;
  background: var(--bg); color: var(--ink);
}
a{ color: var(--purple-dark); }

.shell{ display:flex; min-height:100vh; }
.sidebar{
  width: 220px; background: var(--paper); border-right: 1px solid var(--line);
  padding: 24px 18px; flex-shrink:0;
}
.sidebar .brand{ font-weight:700; font-size:15px; margin-bottom:28px; color: var(--purple-dark); }
.sidebar nav a{
  display:block; padding:9px 12px; margin-bottom:4px; border-radius:8px;
  color: var(--ink-soft); text-decoration:none; font-size:14px; font-weight:500;
}
.sidebar nav a.active, .sidebar nav a:hover{ background: var(--purple-light); color: var(--purple-dark); }
.sidebar .logout{ margin-top: 40px; font-size:12.5px; color: var(--ink-soft); }

.main{ flex:1; padding: 32px 40px; max-width: 1000px; }
h1{ font-size:22px; margin:0 0 6px; }
.sub{ color: var(--ink-soft); font-size:13.5px; margin-bottom:28px; }

.card{ background: var(--paper); border:1px solid var(--line); border-radius:12px; padding:20px; }
.grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap:14px; margin-bottom:28px; }
.stat .num{ font-size:26px; font-weight:700; color: var(--purple-dark); }
.stat .label{ font-size:12px; color: var(--ink-soft); margin-top:2px; }

table{ width:100%; border-collapse:collapse; font-size:13.5px; }
th{ text-align:left; color: var(--ink-soft); font-weight:600; font-size:11.5px; text-transform:uppercase; letter-spacing:0.04em; padding: 8px 10px; border-bottom:1px solid var(--line); }
td{ padding: 10px; border-bottom:1px solid var(--line); }
tr:last-child td{ border-bottom:none; }

.btn{
  display:inline-block; background: var(--purple); color:#fff; border:none;
  padding:9px 16px; border-radius:8px; font-weight:600; font-size:13.5px;
  cursor:pointer; text-decoration:none;
}
.btn.secondary{ background: var(--purple-light); color: var(--purple-dark); }
.btn.coral{ background: var(--coral); }

input[type=text], input[type=email], input[type=password], input[type=number], textarea, select{
  width:100%; padding:9px 11px; border:1px solid var(--line); border-radius:8px; font-size:13.5px;
  font-family: inherit; margin-bottom:14px;
}
label{ font-size:12.5px; font-weight:600; color: var(--ink-soft); display:block; margin-bottom:5px; }
textarea{ min-height:160px; font-family: monospace; }

.badge{ font-size:11px; padding:2px 8px; border-radius:20px; font-weight:600; }
.badge.active{ background:#E7F8F1; color: var(--green); }
.badge.done{ background: var(--purple-light); color: var(--purple-dark); }
.badge.opened{ color: var(--green); }
.badge.clicked{ color: var(--purple-dark); }
.badge.pending{ color: #B4B0C4; }

.error{ background:#FBEDE7; color:#993C1D; padding:10px 14px; border-radius:8px; font-size:13px; margin-bottom:16px; }
.notice{ background:#E7F8F1; color: var(--green); padding:10px 14px; border-radius:8px; font-size:13px; margin-bottom:16px; }

.login-wrap{ display:flex; align-items:center; justify-content:center; min-height:100vh; }
.login-box{ width:340px; background:var(--paper); padding:32px; border-radius:14px; border:1px solid var(--line); }