/* (abbreviated header) */ 
:root{--bg:#f7f8fb;--panel:#fff;--panel-muted:#f2f4f8;--text:#0f172a;--text-muted:#475569;--border:#e5e7eb;--brand:#2563eb;--brand-600:#1d4ed8;--brand-700:#1e40af;--success:#16a34a;--warning:#d97706;--danger:#dc2626;--radius:14px;--shadow:0 8px 24px rgba(2,6,23,.07);--focus:0 0 0 3px rgba(37,99,235,.25);--bp-sm:480px;--bp-md:768px;--bp-lg:1024px}
*{box-sizing:border-box}html,body{height:100%}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,Roboto,"Segoe UI",system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;line-height:1.45}
.app{min-height:100dvh;display:grid;grid-template-rows:auto 1fr auto;grid-template-columns:1fr}
.topbar{position:sticky;top:0;z-index:50;background:var(--panel);box-shadow:var(--shadow);padding:12px clamp(12px,3vw,20px);display:flex;gap:12px;align-items:center;justify-content:space-between}
.topbar .brand{font-weight:700;letter-spacing:.2px}.topbar .brand small{color:var(--text-muted);font-weight:500;margin-left:6px}
.navbar{position:sticky;bottom:0;z-index:40;background:var(--panel);border-top:1px solid var(--border);display:grid;grid-template-columns:repeat(4,1fr)}
.nav-item{padding:10px 6px;text-align:center;color:var(--text-muted);font-size:12px;line-height:1.1}.nav-item.active{color:var(--brand);font-weight:600}.nav-item i{display:block;font-style:normal;font-size:18px;margin-bottom:4px}
.sidebar{display:none}
@media (min-width:768px){.app{grid-template-columns:260px 1fr;grid-template-rows:auto 1fr}.sidebar{display:block;grid-row:1 / span 2;background:#0b1220;color:#cbd5e1;padding:16px 10px}.sidebar .nav-group{display:flex;flex-direction:column;gap:6px;margin-top:8px}.sidebar .nav-link{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;color:#cbd5e1;text-decoration:none}.sidebar .nav-link.active{background:#1f2a44;color:#fff;font-weight:600}.navbar{display:none}}
.container{padding:14px clamp(12px,4vw,28px);display:grid;gap:14px}
@media (min-width:768px){.container{gap:18px;padding:18px 24px}}
.card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
.card-body{padding:14px}.card-header{padding:14px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:10px}
.card-title{font-size:16px;font-weight:700}.card-subtle{color:var(--text-muted);font-size:13px}
.input,.select,.button,.upload{font:inherit;border-radius:12px;border:1px solid var(--border);background:#fff;padding:12px 12px;min-height:44px}
.input,.select{width:100%}.input::placeholder{color:#9aa4b2}
.button{display:inline-flex;align-items:center;justify-content:center;gap:10px;text-decoration:none;cursor:pointer;user-select:none;font-weight:600;transition:transform .04s ease,box-shadow .2s ease,background .2s ease,color .2s ease}
.button:active{transform:translateY(1px)}.button:focus-visible{outline:none;box-shadow:var(--focus)}
.button.primary{background:var(--brand);color:#fff;border-color:transparent}.button.primary:hover{background:var(--brand-600)}.button.primary:active{background:var(--brand-700)}
.button.ghost{background:#fff;color:var(--brand);border-color:var(--brand)}.button.ghost:hover{background:#f0f5ff}
.button.mono{background:#0b1220;color:#fff;border-color:#0b1220}
.input-row{display:grid;gap:10px;grid-template-columns:1fr}
@media (min-width:480px){.input-row{grid-template-columns:1fr auto}}
@media (min-width:768px){.input-row{grid-template-columns:minmax(220px,1.2fr)160px 150px}}
.upload{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px}
.upload.drag{border-style:dashed;background:var(--panel-muted)}
.pill{display:inline-flex;align-items:center;gap:8px;background:var(--panel-muted);border:1px dashed var(--border);padding:8px 10px;border-radius:999px;font-size:13px;color:var(--text-muted)}
.table{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.table thead{display:none}
.table tr{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:12px;border-bottom:1px solid var(--border)}
.table tr:last-child{border-bottom:none}
.table td{font-size:13px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.table td::before{content:attr(data-label);color:var(--text-muted);font-weight:600;margin-right:10px}
@media (min-width:768px){.table thead{display:table-header-group;background:var(--panel-muted)}.table tr{display:table-row}.table th,.table td{display:table-cell;padding:12px 14px;border-bottom:1px solid var(--border);font-size:14px}.table th{text-align:left;font-weight:700;color:var(--text)}.table td::before{content:none}.table tbody tr:nth-child(even){background:#fbfdff}}
@media (min-width:768px){.table thead th{position:sticky;top:0;z-index:1}}
.row-actions{display:flex;gap:8px;align-items:center}
.icon-btn{width:36px;height:36px;display:grid;place-items:center;border-radius:10px;border:1px solid var(--border);background:#fff;cursor:pointer}
.icon-btn:focus-visible{outline:none;box-shadow:var(--focus)}.icon-btn.danger{border-color:#fecaca;background:#fff1f2;color:#b91c1c}
.badge{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;font-size:12px;font-weight:600}
.badge.success{background:#eaf8ef;color:#0f6d2d;border:1px solid #c7f0d1}.badge.warn{background:#fff7ed;color:#9a3412;border:1px solid #fed7aa}.badge.info{background:#eef2ff;color:#3730a3;border:1px solid #c7d2fe}
.h-section{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:6px 2px}
.h-section h2{font-size:clamp(16px,2.6vw,20px);margin:0}.h-section .meta{color:var(--text-muted);font-size:12px}
.mt-2{margin-top:8px}.mt-3{margin-top:12px}.mt-4{margin-top:16px}
.grid{display:grid;gap:12px}.grid-2{grid-template-columns:1fr 1fr}
@media (min-width:768px){.grid-2{gap:14px}}
.hidden-sm{display:none}@media (min-width:768px){.hidden-sm{display:initial}}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:16px;z-index:60;display:grid;gap:8px;width:min(92vw,520px)}
.toast .item{background:#0b1220;color:#fff;padding:12px 14px;border-radius:12px;box-shadow:var(--shadow)}
:focus-visible{outline:none;box-shadow:var(--focus)}@media (prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important}}