:root {
    --ink:#111827; --muted:#667085; --line:#dfe3f0; --soft:#f7f8ff; --brand:#7c5cff; --blue:#18a0fb; --dark:#0c1224; --green:#25c28a; --danger:#d92d20;
}
* { box-sizing:border-box; }
body { margin:0; font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; color:var(--ink); background:#f5f6fb; }
a { color:inherit; text-decoration:none; }
.admin-layout { display:grid; grid-template-columns:280px 1fr; min-height:100vh; }
.sidebar { background:#0c1224; color:#d7ddf0; padding:24px 18px; }
.admin-brand { display:block; padding:8px 8px 26px; border-bottom:1px solid rgba(255,255,255,.1); margin-bottom:22px; }
.admin-brand img { max-width:220px; background:white; border-radius:18px; padding:8px; }
.sidebar nav { display:grid; gap:8px; }
.sidebar a:not(.admin-brand) { padding:13px 14px; border-radius:14px; font-weight:800; color:#cdd3e5; }
.sidebar a:hover, .sidebar a.active { background:#1d2152; color:white; }
.admin-main { min-width:0; }
.admin-topbar { height:72px; display:flex; justify-content:space-between; align-items:center; padding:0 28px; background:white; border-bottom:1px solid var(--line); color:#667085; }
.admin-topbar strong { font-size:22px; color:var(--ink); }
.admin-content { width:min(1120px, calc(100% - 36px)); margin:28px auto 64px; }
.card { background:white; border:1px solid var(--line); border-radius:24px; box-shadow:0 18px 50px rgba(16,20,35,.07); padding:24px; margin-bottom:20px; }
.card-header { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:16px; }
h1,h2,h3 { margin:0 0 12px; line-height:1.15; letter-spacing:-.03em; }
p { color:var(--muted); margin:0 0 14px; }
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.grid-3 { display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; }
.stat { padding:22px; border-radius:20px; background:#f8f9ff; border:1px solid #e7e9f4; }
.stat strong { display:block; font-size:34px; letter-spacing:-.04em; }
label { display:block; font-weight:850; margin-bottom:8px; }
input, textarea, select { width:100%; border:1px solid #d8deea; border-radius:14px; padding:12px 13px; font:inherit; background:white; color:var(--ink); }
textarea { min-height:110px; resize:vertical; }
.form-row { margin-bottom:16px; }
.btn, button { display:inline-flex; align-items:center; justify-content:center; gap:8px; border:0; border-radius:999px; padding:12px 18px; font-weight:900; cursor:pointer; font:inherit; }
.btn-primary { color:white; background:linear-gradient(135deg, var(--brand), var(--blue)); box-shadow:0 12px 28px rgba(124,92,255,.22); }
.btn-secondary { color:var(--ink); background:#eef1f7; }
.btn-danger { color:white; background:var(--danger); }
.btn-small { padding:8px 12px; font-size:14px; }
.notice { padding:14px 16px; border-radius:14px; margin-bottom:18px; font-weight:800; }
.notice.success { color:#126949; background:#edfff7; border:1px solid #baf0d6; }
.notice.error { color:#8a1d1d; background:#fff2f2; border:1px solid #f2c2c2; }
.notice.info { color:#204066; background:#eef7ff; border:1px solid #c6e4ff; }
.table-wrap { overflow:auto; border:1px solid var(--line); border-radius:18px; }
table { width:100%; border-collapse:collapse; min-width:880px; }
th, td { padding:14px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
th { font-size:12px; text-transform:uppercase; color:#667085; background:#f8f9ff; letter-spacing:.05em; }
tr:last-child td { border-bottom:0; }
.package-row textarea { min-height:74px; }
.image-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.image-card { border:1px solid var(--line); border-radius:20px; padding:18px; background:#fff; }
.image-preview { height:170px; display:grid; place-items:center; background:#f6f8ff; border:1px dashed #cad1e0; border-radius:16px; margin:12px 0; overflow:hidden; }
.image-preview img { max-width:100%; max-height:100%; object-fit:contain; }
.small { font-size:13px; color:#667085; }
.login-page { min-height:100vh; display:grid; place-items:center; background:linear-gradient(135deg,#0c1224,#28205f 58%,#125f91); padding:24px; }
.login-card { width:min(460px, 100%); background:white; border-radius:28px; padding:32px; box-shadow:0 26px 80px rgba(0,0,0,.25); }
.login-card img { width:230px; margin-bottom:22px; }
@media(max-width:900px){ .admin-layout{grid-template-columns:1fr}.sidebar{position:relative}.grid-2,.grid-3,.image-grid{grid-template-columns:1fr}.admin-topbar{height:auto;padding:18px}.admin-content{margin-top:18px} }