:root { --navy:#17284b; --blue:#0ea5e9; --red:#e63346; --line:#e7ebf3; --muted:#667085; }
* { box-sizing: border-box; }
body { margin:0; font-family:"Segoe UI", Arial, sans-serif; background:#f5f7fb; color:#101828; }
a { color:inherit; text-decoration:none; }
.admin-side { position:fixed; inset:0 auto 0 0; width:245px; height:100vh; max-height:100vh; padding:24px 18px 34px; background:linear-gradient(180deg,#17284b,#293b5d); color:#fff; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; scrollbar-width:thin; }
.admin-menu-toggle { display:none; position:fixed; top:14px; left:14px; width:44px; height:44px; border:0; border-radius:8px; color:#fff; background:var(--navy); z-index:30; }
.admin-side h1 { margin:0 0 24px; font-size:24px; }
.admin-side a { display:block; padding:12px 14px; margin:7px 0; border-radius:8px; font-weight:700; transition:background .2s ease, transform .2s ease; }
.admin-side a:hover, .admin-side a.active { background:rgba(255,255,255,.14); transform:translateX(5px); }
.admin-main { margin-left:245px; padding:24px; }
.admin-top { display:flex; justify-content:space-between; align-items:center; background:#fff; border:1px solid var(--line); border-radius:8px; padding:18px 20px; box-shadow:0 12px 30px rgba(23,40,75,.08); }
.admin-top h2 { margin:0; color:var(--navy); }
.panel, .table-wrap { margin-top:18px; background:#fff; border:1px solid var(--line); border-radius:8px; padding:20px; box-shadow:0 12px 30px rgba(23,40,75,.08); }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; }
.stat { padding:20px; border-radius:8px; background:linear-gradient(135deg,#fff,#edf7ff); border:1px solid var(--line); }
.stat strong { display:block; font-size:34px; color:var(--navy); }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.form-row { display:grid; gap:7px; margin-bottom:14px; }
.full { grid-column:1 / -1; }
input, textarea, select { width:100%; border:1px solid #d9e0ec; border-radius:8px; padding:11px 12px; font:inherit; }
textarea { min-height:130px; resize:vertical; }
.btn { display:inline-flex; align-items:center; justify-content:center; min-height:40px; padding:0 15px; border:0; border-radius:8px; color:#fff; font-weight:800; background:linear-gradient(135deg,var(--blue),var(--red)); cursor:pointer; }
.btn.danger { background:linear-gradient(135deg,#ef4444,#991b1b); }
table { width:100%; border-collapse:collapse; }
th, td { padding:12px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
th { color:var(--muted); font-size:13px; text-transform:uppercase; }
.thumb { width:80px; height:54px; object-fit:cover; border-radius:8px; }
.thumb.large { width:150px; height:100px; display:block; margin-bottom:8px; }
.header-preview { width:100%; max-width:760px; aspect-ratio:16 / 4; object-fit:cover; border:1px solid var(--line); border-radius:8px; margin-bottom:8px; background:#fff; }
.login-page { min-height:100vh; display:grid; place-items:center; background:linear-gradient(135deg,#17284b,#0ea5e9); }
.login-card { width:min(420px,92vw); background:#fff; border-radius:8px; padding:28px; box-shadow:0 24px 70px rgba(0,0,0,.25); }
.notice { padding:12px 14px; border-radius:8px; margin-bottom:14px; background:#ecfdf3; color:#027a48; }
.notice.error { background:#fff1f2; color:#be123c; }
@media (max-width:850px){
    .admin-menu-toggle{display:grid;place-items:center}
    .admin-side{position:fixed;transform:translateX(-100%);transition:transform .25s ease;width:245px;height:100vh;max-height:100vh;z-index:25;padding-top:72px;padding-bottom:34px;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}
    .admin-side.open{transform:translateX(0)}
    .admin-main{margin-left:0;padding:76px 16px 20px}
    .admin-top{align-items:flex-start;gap:10px;flex-direction:column}
    .form-grid{grid-template-columns:1fr}
    .table-wrap{overflow-x:auto}
    table{min-width:720px}
}