:root {
    --ink: #18202a;
    --muted: #647084;
    --line: #d9e0ea;
    --panel: #fff;
    --surface: #f5f7fb;
    --nav: #172033;
    --primary: #1167b1;
    --accent: #0f9f6e;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--surface); color: var(--ink); font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif; }
a { text-decoration: none; }
.app-shell { display: flex; min-height: 100vh; }
.sidebar { width: 260px; background: var(--nav); color: #fff; padding: 22px; display: flex; flex-direction: column; gap: 24px; position: sticky; top: 0; height: 100vh; }
.brand { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 18px; }
.brand-mark { display: inline-flex; width: 42px; height: 42px; border-radius: 8px; background: var(--accent); color: #fff; align-items: center; justify-content: center; font-weight: 800; }
.sidebar .nav-link { color: #cdd6e4; border-radius: 8px; padding: 11px 12px; display: flex; gap: 10px; align-items: center; }
.sidebar .nav-link.active, .sidebar .nav-link:hover { background: rgba(255,255,255,.1); color: #fff; }
.content { flex: 1; padding: 28px; min-width: 0; }
.topbar { display: flex; justify-content: space-between; gap: 20px; align-items: center; margin-bottom: 24px; }
.topbar h1 { font-size: 28px; margin: 0; }
.topbar p { margin: 4px 0 0; color: var(--muted); }
.admin-chip { background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 20px; box-shadow: 0 8px 24px rgba(24, 32, 42, .05); }
.panel h2 { font-size: 18px; margin: 0 0 16px; }
.metric-card { background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--primary); border-radius: 8px; padding: 16px; min-height: 112px; display: flex; flex-direction: column; justify-content: space-between; }
.metric-card span { color: var(--muted); font-size: 13px; }
.metric-card strong { font-size: 30px; }
.toolbar { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 18px; align-items: center; }
.toolbar form { flex: 1; max-width: 720px; }
.quick-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.action-buttons { white-space: nowrap; }
.table th { color: #475569; font-size: 13px; }
.activity-list { display: grid; gap: 12px; }
.activity-list div { border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.activity-list span, .activity-list small { display: block; color: var(--muted); }
.template-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.template-tile { border: 1px solid var(--line); border-radius: 8px; padding: 14px; color: var(--ink); background: #fff; min-height: 118px; display: grid; gap: 6px; }
.template-tile:hover { border-color: var(--primary); box-shadow: 0 10px 24px rgba(17, 103, 177, .12); }
.template-tile strong { color: var(--primary); font-size: 18px; }
.template-tile span, .template-tile small { color: var(--muted); }
.sticky-panel { position: sticky; top: 20px; }
.metadata-list dt { color: var(--muted); font-size: 12px; text-transform: uppercase; }
.metadata-list dd { margin: 0 0 12px; font-weight: 600; }
.login-screen { min-height: 100vh; display: grid; place-items: center; background: linear-gradient(135deg, #eef5f9, #ffffff 45%, #edf8f3); }
.login-panel { width: min(440px, calc(100vw - 32px)); background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 32px; box-shadow: 0 22px 60px rgba(24, 32, 42, .14); }
.login-panel h1 { margin: 0; font-size: 28px; }
.login-panel p { color: var(--muted); }
.item-table input { min-width: 110px; }
.hindi-textarea { line-height: 1.6; }

@media (max-width: 900px) {
    .app-shell { display: block; }
    .sidebar { width: 100%; height: auto; position: static; }
    .content { padding: 18px; }
    .topbar, .toolbar { align-items: stretch; flex-direction: column; }
    .toolbar form { max-width: none; flex-direction: column; }
}