:root { --navy:#071a2f; --navy2:#0c2944; --teal:#22cdbc; --ink:#13283a; --muted:#6d7e8c; --line:#dfe7ec; --soft:#f3f6f8; --danger:#c63d4a; --warning:#c77c12; --success:#19866f; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; line-height:1.45; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
button,input,textarea,select { font:inherit; }
button { cursor:pointer; }
.admin-body { min-height:100vh; background:var(--soft); }
.admin-sidebar { position:fixed; inset:0 auto 0 0; z-index:50; width:250px; display:flex; flex-direction:column; padding:23px 15px; color:#b9cad6; background:var(--navy); }
.admin-brand { display:flex; align-items:center; gap:11px; padding:0 10px 27px; color:#fff; }
.admin-brand-mark { width:40px; height:40px; display:grid; place-items:center; padding-left:2px; color:var(--navy); background:var(--teal); border-radius:12px; }
.admin-brand > span:last-child { display:grid; line-height:1; }
.admin-brand strong { letter-spacing:.15em; }
.admin-brand small { margin-top:5px; color:#8fa8b7; font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; }
.admin-nav { display:grid; gap:5px; }
.admin-nav a { display:flex; align-items:center; gap:12px; padding:11px 13px; font-size:.85rem; font-weight:650; border-radius:9px; transition:.18s; }
.admin-nav a span { width:19px; color:#8ea8b8; text-align:center; font-size:1rem; }
.admin-nav a:hover { color:#fff; background:rgba(255,255,255,.055); }
.admin-nav a.is-active { color:#fff; background:#113b55; box-shadow:inset 3px 0 var(--teal); }
.admin-nav a.is-active span { color:var(--teal); }
.sidebar-bottom { display:grid; gap:7px; margin-top:auto; padding:18px 12px 0; border-top:1px solid rgba(255,255,255,.08); }
.sidebar-bottom a { font-size:.78rem; }
.sidebar-bottom a:hover { color:#fff; }
.admin-frame { min-height:100vh; margin-left:250px; }
.admin-topbar { height:74px; display:flex; align-items:center; gap:16px; padding:0 34px; background:#fff; border-bottom:1px solid var(--line); }
.admin-topbar > div:first-of-type { display:grid; line-height:1.2; }
.admin-topbar p { margin:0 0 3px; color:var(--muted); font-size:.7rem; text-transform:uppercase; letter-spacing:.1em; }
.admin-topbar > div:first-of-type strong { font-size:.95rem; }
.sidebar-toggle { display:none; padding:8px; color:var(--ink); border:0; background:transparent; }
.admin-user { display:flex; align-items:center; gap:10px; margin-left:auto; }
.admin-user > span { width:37px; height:37px; display:grid; place-items:center; color:var(--navy); font-weight:800; background:var(--teal); border-radius:50%; }
.admin-user > div { display:grid; line-height:1.25; }
.admin-user strong { font-size:.78rem; }
.admin-user small { color:var(--muted); font-size:.66rem; }
.admin-main { max-width:1480px; margin:0 auto; padding:31px 34px 60px; }
.page-actions { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:23px; }
.page-actions h1 { margin:0; font-size:1.45rem; letter-spacing:-.025em; }
.page-actions p { margin:5px 0 0; color:var(--muted); font-size:.83rem; }
.button { min-height:40px; display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:9px 15px; color:var(--navy); font-weight:750; font-size:.8rem; border:1px solid transparent; border-radius:9px; background:var(--teal); }
.button:hover { filter:brightness(.96); }
.button-secondary { color:var(--ink); border-color:var(--line); background:#fff; }
.button-danger { color:#fff; background:var(--danger); }
.button-small { min-height:32px; padding:6px 10px; font-size:.7rem; }
.stats-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; margin-bottom:25px; }
.stat-card { padding:20px; background:#fff; border:1px solid var(--line); border-radius:13px; box-shadow:0 3px 14px rgba(15,36,53,.04); }
.stat-card > span { color:var(--muted); font-size:.73rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
.stat-card strong { display:block; margin-top:8px; font-size:1.8rem; line-height:1; letter-spacing:-.035em; }
.stat-card small { display:block; margin-top:9px; color:#81919e; font-size:.7rem; }
.admin-grid { display:grid; grid-template-columns:1.5fr 1fr; gap:20px; }
.panel { min-width:0; background:#fff; border:1px solid var(--line); border-radius:13px; box-shadow:0 3px 14px rgba(15,36,53,.035); }
.panel-heading { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:18px 20px; border-bottom:1px solid var(--line); }
.panel-heading h2 { margin:0; font-size:.92rem; }
.panel-heading a { color:#087c75; font-size:.72rem; font-weight:750; }
.panel-body { padding:20px; }
.table-wrap { width:100%; overflow-x:auto; }
.admin-table { width:100%; border-collapse:collapse; font-size:.77rem; }
.admin-table th { padding:11px 13px; color:#758692; text-align:left; font-size:.67rem; text-transform:uppercase; letter-spacing:.07em; background:#f8fafb; border-bottom:1px solid var(--line); white-space:nowrap; }
.admin-table td { padding:13px; vertical-align:middle; border-bottom:1px solid #edf1f4; }
.admin-table tr:last-child td { border-bottom:0; }
.admin-table tbody tr:hover { background:#fbfcfd; }
.table-video { min-width:240px; display:flex; align-items:center; gap:11px; }
.table-video img { width:76px; aspect-ratio:16/9; object-fit:cover; background:var(--navy2); border-radius:7px; }
.table-video > div { min-width:0; }
.table-video strong { display:block; max-width:260px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.table-video small { display:block; margin-top:3px; color:var(--muted); }
.publish-yes { color:#15725d; }
.publish-no { color:#8997a2; }
.row-actions { display:flex; gap:6px; align-items:center; }
.row-actions form { margin:0; }
.icon-button { width:32px; height:32px; display:grid; place-items:center; padding:0; color:#496072; border:1px solid var(--line); background:#fff; border-radius:7px; }
.icon-button:hover { color:var(--navy); border-color:#b8c7d0; }
.icon-button.danger:hover { color:var(--danger); border-color:#e6aeb4; }
.filter-bar { display:flex; flex-wrap:wrap; gap:9px; margin-bottom:18px; padding:14px; background:#fff; border:1px solid var(--line); border-radius:12px; }
.filter-bar input,.filter-bar select { min-height:39px; padding:8px 11px; color:var(--ink); border:1px solid #ced9df; background:#fff; border-radius:8px; outline:0; }
.filter-bar input { min-width:270px; flex:1; }
.filter-bar input:focus,.filter-bar select:focus,.field input:focus,.field textarea:focus,.field select:focus { border-color:#3ebcaf; box-shadow:0 0 0 3px rgba(34,205,188,.12); }
.form-card { max-width:960px; background:#fff; border:1px solid var(--line); border-radius:14px; }
.form-section { padding:25px; border-bottom:1px solid var(--line); }
.form-section:last-child { border-bottom:0; }
.form-section-title { margin:0 0 18px; font-size:.95rem; }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.field { min-width:0; display:grid; gap:7px; }
.field-full { grid-column:1/-1; }
.field label { font-size:.73rem; font-weight:750; }
.field label span { color:var(--danger); }
.field input,.field textarea,.field select { width:100%; padding:10px 11px; color:var(--ink); border:1px solid #ccd8de; background:#fff; border-radius:8px; outline:0; }
.field textarea { min-height:135px; resize:vertical; }
.field small { color:var(--muted); font-size:.68rem; }
.field-error { color:var(--danger)!important; }
.radio-tabs { display:flex; gap:8px; }
.radio-tabs label { position:relative; }
.radio-tabs input { position:absolute; opacity:0; }
.radio-tabs span { display:block; padding:9px 13px; color:#596d7c; font-size:.75rem; font-weight:700; border:1px solid var(--line); border-radius:8px; cursor:pointer; }
.radio-tabs input:checked + span { color:#065e59; border-color:#75d5ca; background:#e4f8f5; }
.upload-box { padding:18px; border:1px dashed #b8c8d1; background:#f9fbfc; border-radius:10px; }
.upload-box input { border:0; padding:0; background:transparent; }
.thumbnail-preview { width:220px; aspect-ratio:16/9; object-fit:cover; margin-bottom:10px; background:var(--navy2); border-radius:9px; }
.checkbox { display:flex; align-items:flex-start; gap:9px; }
.checkbox input { width:17px; height:17px; margin-top:2px; accent-color:var(--teal); }
.checkbox label { font-size:.78rem; }
.form-actions { display:flex; gap:9px; padding:20px 25px; background:#fbfcfd; border-radius:0 0 14px 14px; }
.alert { margin-bottom:18px; padding:12px 15px; font-size:.78rem; border:1px solid; border-radius:9px; }
.alert-success { color:#126c58; border-color:#a7ded1; background:#e7f7f2; }
.alert-error { color:#9f2d39; border-color:#efb6bc; background:#fff0f1; }
.alert-warning { color:#8b5b0b; border-color:#efd69d; background:#fff8e8; }
.error-list { margin:0; padding-left:18px; }
.error-box { max-height:170px; overflow:auto; margin-top:7px; padding:10px; color:#942c38; font:11px/1.45 ui-monospace,monospace; white-space:pre-wrap; background:#fff2f3; border-radius:7px; }
.system-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.system-item { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:14px 15px; border:1px solid var(--line); border-radius:9px; }
.system-item span { color:var(--muted); font-size:.75rem; }
.system-item strong { font-size:.75rem; text-align:right; }
.check { color:var(--success); }.cross { color:var(--danger); }
.empty-admin { padding:35px; color:var(--muted); text-align:center; font-size:.8rem; }

.login-page { min-height:100vh; display:grid; grid-template-columns:1.05fr .95fr; background:var(--navy); }
.login-visual { position:relative; display:flex; align-items:flex-end; padding:70px; color:#fff; overflow:hidden; background:radial-gradient(circle at 75% 22%,rgba(34,205,188,.35),transparent 28%),linear-gradient(145deg,#071a2f,#0c4560); }
.login-visual::before { content:""; position:absolute; inset:0; opacity:.08; background-image:linear-gradient(30deg,transparent 48%,#fff 49%,#fff 51%,transparent 52%); background-size:52px 52px; }
.login-message { position:relative; max-width:560px; }
.login-message .admin-brand { padding:0 0 35px; }
.login-message h1 { margin:0; font-size:clamp(2.2rem,5vw,4rem); line-height:1.08; letter-spacing:-.045em; }
.login-message p { max-width:520px; color:#c1d5e0; }
.login-panel { display:grid; place-items:center; padding:40px; background:#fff; }
.login-card { width:min(100%,420px); }
.login-card h2 { margin:0; font-size:1.7rem; letter-spacing:-.03em; }
.login-card > p { margin:8px 0 27px; color:var(--muted); font-size:.85rem; }
.login-card .field { margin-bottom:16px; }
.login-card .button { width:100%; margin-top:7px; min-height:45px; }
.login-foot { margin-top:25px; color:#8795a0; text-align:center; font-size:.7rem; }

@media(max-width:1100px){.stats-grid{grid-template-columns:repeat(2,1fr)}.admin-grid{grid-template-columns:1fr}.login-visual{padding:45px}}
@media(max-width:920px){.admin-sidebar{transform:translateX(-100%);box-shadow:15px 0 35px rgba(0,0,0,.2);transition:.25s}.admin-sidebar.is-open{transform:none}.admin-frame{margin-left:0}.sidebar-toggle{display:block}.admin-topbar{padding-inline:20px}.admin-main{padding:25px 20px 50px}.login-page{grid-template-columns:1fr}.login-visual{display:none}}
@media(max-width:640px){.admin-main{padding-inline:13px}.admin-user>div{display:none}.page-actions{align-items:flex-start;flex-direction:column}.stats-grid{grid-template-columns:1fr 1fr;gap:10px}.stat-card{padding:15px}.stat-card strong{font-size:1.45rem}.form-grid,.system-grid{grid-template-columns:1fr}.field-full{grid-column:auto}.form-section{padding:19px 15px}.form-actions{padding:16px 15px}.filter-bar input{min-width:100%}.login-panel{padding:24px}.radio-tabs{flex-direction:column}.admin-table{min-width:720px}}