/* TFC Admin — clean dashboard UI */
:root {
    --bg: #0e0c18; --panel: #17142a; --panel-2: #1f1b38; --line: rgba(255,255,255,.09);
    --text: #eee9ff; --muted: #9a92bd; --violet: #8b5cf6; --pink: #f0438c; --lime: #c8ff3d;
    --cyan: #2dd4ff; --green:#22c55e; --amber:#f59e0b; --red:#ef4444;
    --grad: linear-gradient(120deg,#8b5cf6,#f0438c);
    --radius: 16px; --font: 'Inter', system-ui, sans-serif; --head:'Space Grotesk',system-ui,sans-serif;
}
* { box-sizing: border-box; }
body { margin:0; background: var(--bg); color: var(--text); font-family: var(--font); font-size:15px; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* ---- login ---- */
.login-wrap { min-height:100vh; display:grid; place-items:center; padding:24px;
    background: radial-gradient(circle at 30% 20%, rgba(139,92,246,.25), transparent 40%),
                radial-gradient(circle at 80% 70%, rgba(240,67,140,.2), transparent 40%), var(--bg); }
.login-card { width:100%; max-width:400px; background: var(--panel); border:1px solid var(--line);
    border-radius:22px; padding:38px 34px; box-shadow:0 30px 70px -20px rgba(0,0,0,.7); }
.login-card .lc-brand { display:flex; align-items:center; gap:10px; font-family:var(--head); font-weight:700; font-size:20px; margin-bottom:6px; }
.login-card .admin-mark { display:grid; place-items:center; width:42px; height:42px; background:var(--grad); border-radius:12px; color:#fff; font-size:15px; }
.login-card h1 { font-family:var(--head); font-size:22px; margin:18px 0 4px; }
.login-card p.sub { color:var(--muted); margin:0 0 22px; font-size:14px; }

/* ---- shell ---- */
.admin-shell { display:grid; grid-template-columns:248px 1fr; min-height:100vh; }
.admin-side { background:var(--panel); border-right:1px solid var(--line); padding:22px 16px; display:flex; flex-direction:column; position:sticky; top:0; height:100vh; }
.admin-brand { display:flex; align-items:center; gap:10px; font-family:var(--head); font-weight:700; font-size:19px; padding:6px 10px 20px; }
.admin-mark { display:grid; place-items:center; width:40px; height:40px; background:var(--grad); border-radius:11px; color:#fff; font-size:14px; }
.admin-nav { display:flex; flex-direction:column; gap:4px; }
.admin-nav a { display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:12px; color:var(--muted); font-weight:500; transition:.15s; }
.admin-nav a:hover { background:var(--panel-2); color:var(--text); }
.admin-nav a.is-active { background:var(--grad); color:#fff; }
.admin-nav .ni { font-size:17px; }
.admin-side-foot { margin-top:auto; display:flex; flex-direction:column; gap:4px; padding-top:18px; border-top:1px solid var(--line); }
.admin-side-foot a { padding:10px 14px; border-radius:10px; color:var(--muted); font-size:14px; }
.admin-side-foot a:hover { background:var(--panel-2); color:var(--text); }

.admin-body { display:flex; flex-direction:column; min-width:0; }
.admin-top { display:flex; align-items:center; justify-content:space-between; padding:20px 30px; border-bottom:1px solid var(--line); position:sticky; top:0; background:rgba(14,12,24,.85); backdrop-filter:blur(10px); z-index:5; }
.admin-top h1 { font-family:var(--head); font-size:22px; margin:0; }
.admin-who { color:var(--muted); font-size:13px; }
.admin-main { padding:28px 30px 60px; max-width:1200px; width:100%; }

/* ---- alerts ---- */
.alert { padding:13px 18px; border-radius:12px; margin-bottom:18px; font-size:14px; border:1px solid; }
.alert--success { background:rgba(34,197,94,.12); border-color:rgba(34,197,94,.4); color:#86efac; }
.alert--error { background:rgba(239,68,68,.12); border-color:rgba(239,68,68,.4); color:#fca5a5; }
.alert--info { background:rgba(45,212,255,.12); border-color:rgba(45,212,255,.4); color:#7dd3fc; }

/* ---- stat cards ---- */
.stat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-bottom:28px; }
.stat-box { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:22px; }
.stat-box .sv { font-family:var(--head); font-size:32px; font-weight:700; line-height:1; }
.stat-box .sl { color:var(--muted); font-size:13px; margin-top:6px; }
.stat-box .si { font-size:22px; float:right; opacity:.8; }
.stat-box.hot .sv { color:var(--pink); }

/* ---- panels & tables ---- */
.panel { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:22px; margin-bottom:22px; }
.panel-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; gap:12px; flex-wrap:wrap; }
.panel-head h2 { font-family:var(--head); font-size:18px; margin:0; }
.table-wrap { overflow-x:auto; }
table.data { width:100%; border-collapse:collapse; font-size:14px; }
table.data th, table.data td { text-align:left; padding:12px 14px; border-bottom:1px solid var(--line); vertical-align:middle; }
table.data th { color:var(--muted); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.5px; }
table.data tr:hover td { background:rgba(255,255,255,.02); }
table.data td.actions { white-space:nowrap; text-align:right; }

/* ---- badges ---- */
.tag { display:inline-block; padding:4px 10px; border-radius:999px; font-size:12px; font-weight:600; }
.tag--new { background:rgba(45,212,255,.15); color:#7dd3fc; }
.tag--duplicate { background:rgba(245,158,11,.15); color:#fcd34d; }
.tag--hot_duplicate { background:rgba(240,67,140,.18); color:#ff9ec4; }
.tag--published { background:rgba(34,197,94,.15); color:#86efac; }
.tag--draft { background:rgba(154,146,189,.15); color:var(--muted); }
.tag--step { background:rgba(139,92,246,.15); color:#c4b5fd; }

/* ---- buttons ---- */
.btn { display:inline-flex; align-items:center; gap:7px; border:1px solid var(--line); background:var(--panel-2); color:var(--text); font-family:var(--head); font-weight:600; font-size:14px; padding:10px 18px; border-radius:10px; transition:.15s; }
.btn:hover { transform:translateY(-1px); }
.btn--primary { background:var(--grad); border-color:transparent; color:#fff; }
.btn--sm { padding:7px 13px; font-size:13px; }
.btn--danger { background:rgba(239,68,68,.14); border-color:rgba(239,68,68,.4); color:#fca5a5; }
.btn--ghost { background:transparent; }
.btn-row { display:flex; gap:10px; flex-wrap:wrap; }

/* ---- forms ---- */
.form-grid { display:grid; gap:16px; }
.form-grid.cols-2 { grid-template-columns:1fr 1fr; }
.fld { display:flex; flex-direction:column; gap:6px; }
.fld > label { font-size:13px; color:var(--muted); font-weight:600; }
.fld input, .fld select, .fld textarea { width:100%; padding:11px 13px; border-radius:10px; border:1px solid var(--line); background:var(--bg); color:var(--text); font-family:var(--font); font-size:14px; }
.fld input:focus, .fld select:focus, .fld textarea:focus { outline:none; border-color:var(--violet); box-shadow:0 0 0 3px rgba(139,92,246,.3); }
.fld textarea { resize:vertical; min-height:90px; }
.fld .hint { font-size:12px; color:var(--muted); }
.full { grid-column:1 / -1; }

/* ---- filters ---- */
.filters { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.filters a { padding:8px 14px; border-radius:999px; border:1px solid var(--line); font-size:13px; color:var(--muted); }
.filters a.is-active { background:var(--grad); color:#fff; border-color:transparent; }

/* ---- misc ---- */
.muted { color:var(--muted); }
.empty { text-align:center; padding:50px 20px; color:var(--muted); }
.inline-form { display:inline; }
.week-block { border:1px solid var(--line); border-radius:12px; padding:16px; margin-bottom:14px; background:var(--bg); }
.lesson-row { display:grid; grid-template-columns:1fr 2fr auto; gap:10px; margin-bottom:8px; }
.thumb { width:54px; height:40px; object-fit:cover; border-radius:8px; border:1px solid var(--line); }
details.sub-detail summary { cursor:pointer; color:var(--cyan); font-size:13px; }
.kv { font-size:13px; color:var(--muted); }
.kv b { color:var(--text); }

@media (max-width: 900px) {
    .admin-shell { grid-template-columns:1fr; }
    .admin-side { position:static; height:auto; flex-direction:row; flex-wrap:wrap; align-items:center; }
    .admin-nav { flex-direction:row; flex-wrap:wrap; }
    .admin-side-foot { flex-direction:row; margin:0 0 0 auto; border:0; padding:0; }
    .stat-grid { grid-template-columns:repeat(2,1fr); }
    .form-grid.cols-2 { grid-template-columns:1fr; }
    .lesson-row { grid-template-columns:1fr; }
}