/* Deye Sizer v5.2 — Deye-like UI */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
:root{--deye-blue:#1f5fbf;--deye-blue-700:#16458a;--deye-red:#d81f26;--bg:#f7f9fc;--card:#ffffff;--text:#0f172a;--muted:#64748b;--border:#e5e7eb;}
html,body{height:100%;overflow-x:hidden}
body{font-family:Inter,"Google Sans",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--text)}
.navbar{background:#fff !important;border-bottom:1px solid var(--border);box-shadow:0 6px 18px rgba(2,6,23,.04)}
.brand-logo{height:40px;width:auto}.brand-text{font-weight:900;letter-spacing:-0.02em;color:var(--deye-blue);font-size:22px}
.card{border:1px solid var(--border);border-radius:18px;background:var(--card);box-shadow:0 10px 28px rgba(2,6,23,.06)}
.form-control,.form-select{min-height:44px;font-size:16px;border-radius:12px;border-color:var(--border)}
.btn{border-radius:12px;font-weight:700}
.btn-primary{background:var(--deye-blue);border-color:var(--deye-blue)}
.btn-primary:hover{background:var(--deye-blue-700);border-color:var(--deye-blue-700)}
.btn-outline-primary{border-color:var(--deye-blue);color:var(--deye-blue)}
.btn-outline-primary:hover{background:var(--deye-blue);border-color:var(--deye-blue);color:#fff}
.small-muted{color:var(--muted);font-size:13px}
.big-number{font-size:28px;font-weight:900;letter-spacing:-0.02em}
.kpi{background:#fff;border:1px solid var(--border);border-radius:16px;padding:14px}
.badge-soft{background:rgba(31,95,191,.08);color:var(--deye-blue);border:1px solid rgba(31,95,191,.18)}
.category-pill{border:1px solid var(--border);border-radius:999px;padding:6px 12px;background:#fff;color:#111827;font-size:14px;cursor:pointer;user-select:none}
.category-pill.active{border-color:rgba(31,95,191,.45);background:rgba(31,95,191,.08);color:var(--deye-blue);font-weight:800}
.catalog-item{border:1px solid var(--border);border-radius:14px;padding:10px 12px;background:#fff}
.catalog-item:hover{border-color:rgba(31,95,191,.35)}
.catalog-item .meta{color:var(--muted);font-size:13px}
.tip-icon{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border:1px solid var(--border);border-radius:999px;font-size:12px;line-height:1;color:var(--muted);background:#fff}
.just-added{outline:2px solid rgba(31,95,191,.35);box-shadow:0 0 0 4px rgba(31,95,191,.12);border-radius:10px}
.mobile-cta{position:sticky;bottom:0;z-index:1020;background:rgba(247,249,252,.92);backdrop-filter:blur(8px);padding:10px 0;border-top:1px solid var(--border)}
.table-responsive{overflow-x:auto;-webkit-overflow-scrolling:touch}
.table{min-width:500px}
@media (max-width:575.98px){.brand-text{font-size:16px}.card .card-body{padding:16px !important}}
@media (max-width:575.98px){
  .form-label,
  .small-muted,
  label {
    white-space: normal !important;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
  table th,table thead th,table td{white-space:nowrap!important}
  table td select,.table-responsive .btn{white-space:nowrap}
}