:root { --brand: #dc2626; --brand-2: #ef4444; --bg: #f7f9fc; --card: #ffffff; --text: #0f172a; --sub: #64748b; --border: #e5e7eb; --border-strong: #cbd5e1; --head-bg: #fef2f2; --head-text: #991b1b; --red: #E53935; --red-700: #C62828; --radius: 16px; --shadow: 0 8px 28px rgba(2,6,23,.06); --ring: 0 0 0 3px rgba(239, 68, 68, .4); --container: 1120px; }
*{ box-sizing:border-box; font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial; } body{ margin:0; background:var(--bg); color:var(--text); font-size:14px; overflow-x:hidden; } .topbar{ background:rgba(255,255,255,.8); backdrop-filter:saturate(180%) blur(8px); -webkit-backdrop-filter:saturate(180%) blur(8px); color:var(--text); padding:8px 0; border-bottom:1px solid var(--border); position: sticky; top: 0; z-index: 100; } .topbar .inner{ max-width:var(--container); margin:0 auto; padding:0 16px; display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; } .brand{ display:flex; align-items:center; gap:12px; min-width:0; } .brand img{ width:64px; height:64px; border-radius:10px; object-fit:contain; border:1px solid var(--border); background:#fff; box-shadow:var(--shadow); } .brand h1{ margin:0; font-size:18px; letter-spacing:.2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .userbar{ display:flex; align-items:center; gap:8px; } .wrap{ max-width:var(--container); margin:24px auto 60px; padding:0 16px; display:grid; gap:20px; grid-template-columns:1fr; } .card{ background:var(--card); border-radius:var(--radius); border:1px solid var(--border); box-shadow:var(--shadow); padding:20px; } .title{ display:flex; align-items:center; justify-content:space-between; gap:12px; } .title h2{ margin:0; font-size:18px; color:var(--text); } .muted{ color:var(--sub); } .badge{ font-size:12px; padding:4px 10px; border-radius:999px; font-weight:600; background:var(--head-bg); color:var(--head-text); border:1px solid #fecaca; } label{ font-size:12px; color:var(--sub); font-weight:600; margin-bottom:6px; display:block; } input,select,button,textarea{ width:100%; padding:10px 12px; border-radius:12px; border:1px solid var(--border-strong); background:#fff; color:var(--text); font-size:14px; outline:none; min-height:44px; } input:focus,select:focus,textarea:focus{ box-shadow:var(--ring); border-color:var(--brand); } input[readonly]{ background:#fafafa; color:var(--sub); } input[type=number]{ text-align:right; } .btn{ display:inline-flex; align-items:center; justify-content:center; padding:10px 14px; border-radius:12px; cursor:pointer; font-weight:600; gap:8px; user-select:none; transition:transform .02s ease-in; white-space:nowrap; border:none; } .btn:active{ transform:translateY(1px); } .btn.primary{ background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:#fff; } .btn.primary:hover{ filter:brightness(1.05); } .btn.ghost{ background:#fff; color:var(--text); border:1px solid var(--border-strong); } .btn.ghost:hover{ background:#fcfcfd; } .btn.danger{ background:var(--red); color:#fff; } .btn.danger:hover{ background:var(--red-700); } .grid4{ display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:16px; } .lineGrid{ display:grid; grid-template-columns:5fr 2.2fr 1.2fr 1.4fr 48px; gap:8px; align-items:center; padding: 8px 0; } .resultsHead,.catHead{ display:grid; grid-template-columns:3.2fr .9fr .9fr 1fr 1fr 120px; gap:10px; padding:8px 10px; color:var(--head-text); background: var(--head-bg); font-size:12px; text-transform:uppercase; letter-spacing:.4px; border-bottom:1px solid var(--border); } .resultsRow,.catRow{ display:grid; grid-template-columns:3.2fr .9fr .9fr 1fr 1fr 120px; gap:10px; padding:10px; align-items:center; border-bottom:1px dashed var(--border); } .right{ text-align:right; } .collHead{ display:flex; align-items:center; gap:10px; cursor:pointer; user-select:none; } .chev{ font-size:16px; line-height:1; width:20px; text-align:center; transition: transform 0.2s; } .chev.open{ transform: rotate(90deg); } .collBox{ overflow:hidden; transition:grid-template-rows .25s ease, opacity .25s ease; display:grid; grid-template-rows:0fr; opacity:.0; } .collBox.open{ grid-template-rows:1fr; opacity:1; } .collInner{ min-height:0; } .list{ border:1px solid var(--border); border-radius:12px; background:#fff; } .listHead,.listRow{ display:grid; grid-template-columns: 2fr 1fr 1fr; gap:10px; padding:10px 12px; } .listHead{ color:var(--head-text); background: var(--head-bg); border-bottom:1px solid var(--border); font-size:12px; text-transform:uppercase; letter-spacing:.4px; } .listBody{ max-height:320px; overflow:auto; } .listRow{ border-bottom:1px dashed var(--border); cursor:pointer; } .listRow:hover{ background:var(--head-bg); } .rel{ position:relative; } .suggest{ position:absolute; z-index:50; width:100%; background:#fff; border:1px solid var(--border-strong); border-radius:12px; margin-top:6px; max-height:280px; overflow:auto; box-shadow:var(--shadow); } .s-row{ padding:10px 12px; cursor:pointer; display:grid; grid-template-columns:1fr auto; gap:10px; align-items:center; } .s-row:hover{ background:var(--head-bg); } .pill{ font-size:11px; color:var(--sub); border:1px solid var(--border); padding:2px 8px; border-radius:999px; background:#fafafa; } .gridTotals{ display:grid; grid-template-columns: 1fr 1fr 1fr 2fr; gap:16px; } .totalRow{ display:grid; grid-template-columns: 1fr auto; gap:8px; align-items:center; } .bigTotal #total{ font-size:20px; padding:14px 16px; font-variant-numeric: tabular-nums; } .modal{ position:fixed; inset:0; z-index:9999; display:none; align-items:center; justify-content:center; background:rgba(11,11,12,.35); backdrop-filter:blur(2px); } .modal .box{ background:#fff; border:1px solid var(--border); border-radius:16px; width:min(520px,92vw); padding:24px; box-shadow:var(--shadow); } .info{ font-size:12px; color:var(--sub); } .divider{ height:1px; background:var(--border); margin:16px 0; } .small{ font-size:12px; }
@media (max-width: 980px){ .resultsHead,.resultsRow,.catHead,.catRow{ grid-template-columns:2.6fr .9fr 1fr 1fr 120px; } .resultsHead > :nth-child(2), .resultsRow > :nth-child(2), .catHead > :nth-child(2), .catRow > :nth-child(2){ display:none; } } @media (max-width: 860px){ .lineGrid{ grid-template-columns:1fr; gap:10px; } .lineGrid > div:last-child{ justify-self:end; } } @media (max-width: 780px){ .resultsHead,.resultsRow,.catHead,.catRow{ grid-template-columns:2.4fr 1fr 1fr 120px; } .resultsHead > :nth-child(3), .resultsRow > :nth-child(3), .catHead > :nth-child(3), .catRow > :nth-child(3){ display:none; } } @media (max-width: 760px){ .brand img{ width:48px; height:48px; } .userbar{ width:100%; justify-content:space-between; } .gridTotals{ grid-template-columns:1fr 1fr; } .bigTotal #total{ font-size:18px; } }