/* Aggravo UI Kit v1 — 0907L (consolidated) */ 
:root{ --brand-50:#ecfdf5; --brand-100:#d1fae5; --brand-200:#a7f3d0; --brand-300:#6ee7b7;
--brand-400:#34d399; --brand-500:#10b981; --brand-600:#059669; --brand-700:#047857; --brand-800:#065f46;
--accent-amber:#f59e0b; --ink:#0f172a; --muted:#6b7280; --ring:rgba(2,6,23,.08); }
.container-narrow{ max-width: 56rem; margin: 0 auto; padding: 1rem; } .container-wide{ max-width: 72rem; margin:0 auto; padding:1rem; }
.gradient-header{ background: linear-gradient(90deg, var(--brand-600), var(--accent-amber)); position: sticky; top:0; z-index:40; color:#fff; backdrop-filter: saturate(1.1) blur(4px); }
.card{ background:#fff; border-radius:1rem; padding:.75rem; border:1px solid var(--ring); box-shadow:0 8px 18px rgba(2,6,23,.06); transition: transform .15s ease, box-shadow .15s ease; }
.card:hover{ transform: translateY(-2px); box-shadow:0 12px 24px rgba(2,6,23,.09); } .card-ghost{ background:#fff; border:1px dashed #e5e7eb; } .card-pad{ padding:1rem; }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.4rem; padding:.6rem .95rem; border-radius:.9rem; font-weight:600; line-height:1; border:1px solid transparent; transition:.15s ease; cursor:pointer; }
.btn:focus-visible{ outline:2px solid var(--brand-500); outline-offset:2px; } .btn-primary{ background:var(--brand-600); color:#fff; } .btn-primary:hover{ background:var(--brand-700); }
.btn-secondary{ background:#eef2f7; color:#111827; border-color:#e5e7eb; } .btn-secondary:hover{ background:#e5e7eb; } .btn-danger{ background:#ef4444; color:#fff; } .btn-danger:hover{ background:#dc2626; }
.btn-ghost{ background:#fff; border-color:#e5e7eb; color:#111827; } .btn-block{ display:flex; width:100%; }
.input, .input-pill{ width:100%; padding:.8rem 1rem; border:1px solid #e5e7eb; border-radius:.9rem; } .input:focus, .input-pill:focus{ outline:none; border-color:var(--brand-500); box-shadow:0 0 0 3px rgba(16,185,129,.25); }
.text-muted{ color: var(--muted); } .badge{ display:inline-block; padding:.25rem .6rem; border-radius:999px; font-size:.72rem; font-weight:700; }
.badge-active{ background: var(--brand-100); color: var(--brand-800); border:1px solid var(--brand-200); } .chip{ background:#f3f4f6; padding:.35rem .7rem; border-radius:999px; font-weight:600; font-size:.78rem; }
.tabs{ display:flex; gap:.25rem; background:#fff; border-radius:999px; padding:.25rem; border:1px solid var(--ring); box-shadow:0 2px 8px rgba(2,6,23,.05); }
.tab{ padding:.45rem .8rem; border-radius:999px; font-weight:600; color:#374151; } .tab:hover{ background:#f3f4f6; } .tab-active{ background:#111827; color:#fff; }
.table-clean{ width:100%; border-collapse:collapse; } .table-clean th, .table-clean td{ padding:.75rem; border-bottom:1px solid #eef2f7; } .table-clean th{ text-align:left; font-weight:700; color:#374151; }
.dropdown{ position:relative; } .dropdown.open .dropdown-panel{ display:block !important; } 
.dropdown-panel{ position:absolute; right:0; top:calc(100% + .5rem); width:22rem; max-width:90vw; max-height:70vh; overflow:auto; background:#fff; border-radius:1rem; padding:.75rem; z-index:50; border:1px solid var(--ring); box-shadow:0 10px 25px rgba(0,0,0,.08); }
.thumbnail{ width:3rem; height:3rem; border-radius:.5rem; object-fit:cover; background:#eef2f7; } .total-row{ display:flex; justify-content:space-between; padding:.5rem .75rem; font-weight:700; border-top:1px dashed #e5e7eb; }
.toast{ position:fixed; bottom:1rem; right:1rem; background:#111827; color:#fff; padding:.75rem 1rem; border-radius:.75rem; box-shadow:0 10px 25px rgba(0,0,0,.15); opacity:0; transform:translateY(8px); transition:.2s ease; z-index:60; } .toast.show{ opacity:1; transform:none; }
.sheet{ position:fixed; left:0; right:0; bottom:-100%; background:#fff; border-top-left-radius:1rem; border-top-right-radius:1rem; box-shadow:0 -10px 25px rgba(0,0,0,.15); padding:1rem; z-index:60; transition: bottom .25s ease; } .sheet.on{ bottom:0; } .sheet-handle{ width:3rem; height:.35rem; border-radius:999px; background:#e5e7eb; margin:0 auto .75rem; }
.dropzone{ border:2px dashed #d1d5db; border-radius:1rem; padding:1rem; background:#fafafa; text-align:center; } .dropzone.drag{ background:#f0fdf4; border-color: var(--brand-500); }
.preview-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.5rem; } .preview-grid img, .preview-grid video{ width:100%; height:6rem; object-fit:cover; border-radius:.5rem; }