:root { --ink:#1d2633; --muted:#6d7786; --line:#e5e9ef; --surface:#fff; --wash:#f5f7fa; --saffron:#b45f22; --saffron-dark:#874313; --green:#21835b; --red:#b74646; --blue:#2866a4; --shadow:0 16px 40px rgba(25,38,55,.08); }
* { box-sizing:border-box; }
body { margin:0; font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color:var(--ink); background:var(--wash); }
button, input, select, textarea { font:inherit; }
button { cursor:pointer; }
.hidden { display:none !important; }
.login-screen { min-height:100vh; display:grid; place-items:center; background:radial-gradient(circle at 15% 15%, #fff5e8, transparent 38%), linear-gradient(135deg,#fff,#f6f2eb); }
.login-card { width:min(420px,calc(100% - 32px)); background:var(--surface); border:1px solid var(--line); border-radius:24px; padding:40px; box-shadow:var(--shadow); }
.brand-mark { width:52px; height:52px; display:grid; place-items:center; color:#fff; background:linear-gradient(145deg,var(--saffron),#d68c43); border-radius:16px; font-size:30px; box-shadow:0 8px 20px rgba(180,95,34,.25); }
.brand-mark.small { width:34px; height:34px; border-radius:10px; font-size:20px; flex:none; }
.eyebrow { color:var(--saffron); font-size:11px; font-weight:800; letter-spacing:.16em; margin:20px 0 8px; }
h1,h2,h3,p { margin-top:0; }
h1 { font-size:32px; margin-bottom:8px; } h2 { margin:0; font-size:28px; } h3 { font-size:17px; margin-bottom:14px; }
.muted { color:var(--muted); line-height:1.55; }
label { display:grid; gap:7px; font-size:13px; font-weight:700; margin:18px 0; }
input, select, textarea { width:100%; border:1px solid #d9dee7; border-radius:10px; padding:11px 12px; background:#fff; color:var(--ink); outline:none; }
input:focus, select:focus, textarea:focus { border-color:var(--saffron); box-shadow:0 0 0 3px rgba(180,95,34,.12); }
.primary, .secondary, .danger, .ghost, .logout { border:0; border-radius:10px; padding:10px 14px; font-weight:750; }
.primary { color:#fff; background:var(--saffron); } .primary:hover { background:var(--saffron-dark); }
.secondary { color:var(--blue); background:#eaf2fb; } .danger { color:#fff; background:var(--red); } .ghost { color:var(--ink); background:#eef1f5; }
.wide { width:100%; margin-top:10px; } .error { color:var(--red); min-height:20px; font-size:13px; }
.success { color:var(--green); min-height:20px; font-size:13px; }
.auth-link { display:block; margin-top:14px; color:var(--saffron-dark); font-size:13px; font-weight:750; text-align:center; text-decoration:none; }
.auth-link:hover { text-decoration:underline; }
.app-shell { min-height:100vh; display:flex; }
.sidebar { width:250px; flex:none; background:#202936; color:#e8edf4; display:flex; flex-direction:column; padding:22px 14px; }
.brand { display:flex; gap:11px; align-items:center; font-size:12px; line-height:1.25; padding:0 10px 24px; } .brand b { color:#fff; font-size:15px; }
.nav-group { margin:15px 0 7px 12px; color:#8c98a9; font-size:10px; letter-spacing:.14em; font-weight:800; }
.nav-link { display:block; width:100%; border:0; text-align:left; color:#cbd3df; background:transparent; padding:10px 12px; border-radius:9px; margin:2px 0; font-size:13px; }
.nav-link:hover, .nav-link.active { background:#303d4e; color:#fff; } .nav-link.active { box-shadow:inset 3px 0 var(--saffron); }
.logout { margin-top:auto; color:#f6c7bb; background:#3a2d31; }
.main-area { flex:1; min-width:0; }
.topbar { min-height:92px; display:flex; justify-content:space-between; align-items:center; gap:20px; padding:22px 34px; background:#fff; border-bottom:1px solid var(--line); }
.topbar .eyebrow { margin:0 0 5px; } .top-actions { display:flex; gap:12px; align-items:center; } .top-actions input { width:250px; }
.admin-pill { color:var(--muted); background:var(--wash); padding:10px 12px; border-radius:10px; font-size:12px; }
.content { padding:30px 34px 48px; max-width:1600px; } .notice { margin:20px 34px -10px; padding:12px 15px; border-radius:10px; background:#fff4dc; color:#76561e; font-size:13px; }
.card-grid { display:grid; grid-template-columns:repeat(4,minmax(150px,1fr)); gap:14px; margin-bottom:24px; }
.metric, .panel { background:var(--surface); border:1px solid var(--line); border-radius:15px; box-shadow:0 5px 20px rgba(25,38,55,.03); }
.metric { padding:18px; } .metric-label { color:var(--muted); font-size:12px; } .metric-value { font-size:25px; font-weight:800; margin-top:10px; }
.panel { padding:20px; margin-bottom:20px; overflow:hidden; } .panel-header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.panel-header h3 { margin:0; } .table-wrap { overflow:auto; } table { width:100%; border-collapse:collapse; min-width:680px; } th,td { text-align:left; padding:12px 10px; border-bottom:1px solid var(--line); font-size:12px; vertical-align:top; } th { color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.06em; } td strong { font-size:13px; }
.status { display:inline-flex; border-radius:999px; padding:4px 8px; background:#eef1f5; font-size:10px; font-weight:800; text-transform:uppercase; } .status.green { background:#e6f5ed; color:var(--green); } .status.red { background:#faeaea; color:var(--red); } .status.blue { background:#e8f1fb; color:var(--blue); }
.row-actions { display:flex; gap:6px; flex-wrap:wrap; } .row-actions button { border:0; border-radius:7px; padding:6px 8px; font-size:11px; font-weight:750; background:#eef1f5; color:var(--ink); } .row-actions button:hover { background:#dde4ed; }
.empty { padding:30px; color:var(--muted); text-align:center; } .split { display:grid; grid-template-columns:1fr 1fr; gap:20px; } .toolbar { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:16px; } .toolbar input { max-width:300px; }
@media (max-width:900px) { .sidebar { width:205px; } .topbar { padding:18px; } .content { padding:20px 18px; } .top-actions input { width:150px; } .card-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px) { .app-shell { display:block; } .sidebar { width:100%; min-height:0; } .sidebar nav { max-height:220px; overflow:auto; } .logout { margin-top:15px; } .topbar { display:block; } .top-actions { margin-top:15px; } .top-actions input { width:100%; } .card-grid, .split { grid-template-columns:1fr; } }
.catalog-dialog { border:1px solid #d9dee7; border-radius:15px; width:min(560px,90vw); max-height:85vh; overflow:auto; padding:24px; }
.catalog-dialog::backdrop { background:rgba(0,0,0,.35); }
.catalog-dialog input[type=checkbox] { width:auto; justify-self:start; }
.split > * { min-width:0; }
.toolbar select { max-width:220px; }
.detail-dialog { width:min(850px,92vw); background:#fffaf3; color:var(--ink); }
.detail-fields { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:16px; }
.detail-fields dt { font-weight:700; color:var(--muted); font-size:12px; }
.detail-fields dd { margin:5px 0 0; overflow-wrap:anywhere; }