/* reports/brand.css
   Shared LUXXY design-system styling for the Market Reports front-end (list, viewer chrome,
   admin). Tuned for quick, light loading: a STATIC baked-in background (no animation, no blur
   layers), translucent panels with hairline borders instead of GPU-heavy backdrop-filter, and
   a trimmed font set. Visual language per DESIGN-SYSTEM.md — navy ground, rose accents,
   Montserrat/Poppins, eyebrows + trailing-period titles. Load this first, then page CSS. */

:root{
  --navy:#0c233e; --navy-deep:#081a2f; --electric:#1a3a6e;
  --bronze:#b88560; --rose:#e3a48a; --rose-soft:#f4d5bf; --rose-dark:#a06a4e;
  --ink:#fff; --ink-90:rgba(255,255,255,.92); --ink-70:rgba(255,255,255,.72);
  --ink-60:rgba(255,255,255,.6); --ink-40:rgba(255,255,255,.4); --ink-20:rgba(255,255,255,.2);
  --glass-bg:rgba(255,255,255,.055); --glass-bg-strong:rgba(255,255,255,.1);
  --danger:#e07b6a; --ok:#7fd1a8;
  --radius-sm:6px; --radius-md:14px; --radius-lg:22px;
  --shadow-glass:0 18px 40px -24px rgba(0,0,0,.5);
  --inset-top:inset 0 1px 0 rgba(255,255,255,.16);
  --t-fast:160ms ease; --t-med:280ms ease;
}

*{box-sizing:border-box;margin:0;padding:0}
body{
  background:#06182f; color:var(--ink-90); min-height:100vh;
  font-family:'Poppins',system-ui,Arial,sans-serif; line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
/* Static atmospheric background — two baked radial glows on a fixed layer. Painted once;
   no animation, no blur filters, no extra DOM. */
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(55vw 55vw at 10% -8%, rgba(227,164,138,.13), transparent 60%),
    radial-gradient(65vw 65vw at 105% 108%, rgba(26,58,110,.4), transparent 62%);
}

/* ---- Layout ---- */
.wrap{max-width:1040px;margin:0 auto;padding:0 24px}
@media (max-width:480px){.wrap{padding:0 18px}}

/* ---- Typography (DESIGN-SYSTEM §3) ---- */
.rule{width:24px;height:2px;background:var(--rose);margin-bottom:18px}
.eyebrow{font:500 11px/1 'Montserrat',sans-serif;letter-spacing:.32em;text-transform:uppercase;color:var(--rose)}
h1,.page-title{font:300 clamp(30px,4.4vw,46px)/1.05 'Montserrat',sans-serif;letter-spacing:-.01em;color:var(--ink);margin-top:10px}
.sub{color:var(--ink-60);font-size:13.5px;margin-top:8px}
.section-eyebrow{font:500 11px/1 'Montserrat',sans-serif;letter-spacing:.32em;text-transform:uppercase;color:var(--rose);margin:40px 0 14px}

/* ---- Panel surface: translucent fill + gradient hairline border (no backdrop blur) ---- */
.glass{position:relative;background:var(--glass-bg);border-radius:var(--radius-md);border:1px solid transparent;background-clip:padding-box;box-shadow:var(--shadow-glass),var(--inset-top)}
.glass::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(135deg,rgba(255,255,255,.38) 0%,rgba(255,255,255,.12) 35%,rgba(255,255,255,.04) 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.glass.accent::before{background:linear-gradient(135deg,rgba(255,255,255,.38) 0%,rgba(255,255,255,.1) 55%,rgba(227,164,138,.22) 100%)}

/* ---- Buttons + pills ---- */
.btn-primary{background:linear-gradient(135deg,var(--rose-dark),var(--rose-soft) 50%,var(--rose-dark));border:none;color:var(--navy);font:600 12.5px 'Montserrat',sans-serif;letter-spacing:.07em;text-transform:uppercase;padding:11px 18px;border-radius:999px;cursor:pointer;transition:filter var(--t-fast),transform var(--t-fast)}
.btn-primary:hover{filter:brightness(1.06)}
.btn-primary:active{transform:translateY(1px)}
.btn-primary:disabled{opacity:.5;cursor:not-allowed;filter:none}
.btn-ghost{background:var(--glass-bg);border:1px solid var(--ink-20);color:var(--ink-90);font:600 12px 'Montserrat',sans-serif;letter-spacing:.06em;text-transform:uppercase;padding:10px 16px;border-radius:999px;cursor:pointer;transition:border-color var(--t-fast),color var(--t-fast),background var(--t-fast)}
.btn-ghost:hover{border-color:var(--rose);color:var(--rose-soft)}
.btn-ghost:disabled{opacity:.45;cursor:not-allowed}
.badge{font:500 9.5px 'Montserrat',sans-serif;letter-spacing:.22em;text-transform:uppercase;color:var(--rose-soft);border:1px solid rgba(244,213,191,.3);border-radius:999px;padding:3px 9px;margin-left:8px;vertical-align:middle}

/* ---- Form fields ---- */
label{display:block;font:500 10.5px 'Montserrat',sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-60);margin:14px 0 6px}
input,select{width:100%;background:rgba(8,26,47,.6);border:1px solid var(--ink-20);border-radius:var(--radius-sm);color:var(--ink);padding:11px 13px;font:400 14px 'Poppins',sans-serif;transition:border-color var(--t-fast)}
input:focus,select:focus{outline:none;border-color:var(--rose)}

/* ---- States ---- */
.empty{color:var(--ink-60);font-size:13.5px}
.status{margin-top:12px;font-size:13px;min-height:18px}
.status.ok{color:var(--ok)} .status.err{color:var(--danger)}