:root{
  /* Paleta NETÁ — navy / cream / gold */
  --navy:#0e1f3a; --navy-2:#132a4c; --cream:#f7eed3; --gold:#c9a449;
  --primary:var(--gold); --accent:var(--gold);
  --bg:#0b1830; --ink:var(--cream); --ink-soft:rgba(247,238,211,.72);
  --card:#122444; --card-2:#16294e; --line:rgba(247,238,211,.12);
  --muted:rgba(247,238,211,.5);
  --font:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --shadow:0 10px 34px rgba(3,10,24,.5);
  --shadow-lg:0 26px 70px rgba(3,10,24,.65);
  --r:16px; --r-sm:11px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--font);color:var(--ink);background:
  radial-gradient(1100px 560px at 82% -12%, rgba(201,164,73,.14), transparent 60%),
  radial-gradient(900px 520px at -12% 112%, rgba(247,238,211,.06), transparent 55%),
  var(--bg);
  -webkit-font-smoothing:antialiased;min-height:100dvh}
img{max-width:100%;display:block}
button{font-family:inherit}

.btn{font:inherit;font-weight:650;font-size:.92rem;border:0;border-radius:999px;padding:.64rem 1.2rem;
  cursor:pointer;background:var(--gold);color:#0b1830;transition:filter .15s, transform .1s;box-shadow:var(--shadow)}
.btn:hover{filter:brightness(1.08)}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:color-mix(in srgb, #fff 6%, transparent);color:var(--ink);
  border:1px solid var(--line);box-shadow:none;backdrop-filter:blur(8px)}
.btn.ghost:hover{background:color-mix(in srgb, #fff 12%, transparent);filter:none}

/* Topbar */
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:1rem;padding:.9rem 1.6rem;
  background:color-mix(in srgb, var(--bg) 72%, transparent);backdrop-filter:saturate(1.3) blur(16px);
  border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:.6rem}
.brand img{height:30px;width:auto}
.brand .bname{font-weight:750;font-size:1.15rem;letter-spacing:-.02em;color:var(--ink)}
.spacer{flex:1}

/* Layout */
.layout{display:grid;grid-template-columns:266px 1fr;min-height:calc(100dvh - 64px)}
.side{border-right:1px solid var(--line);padding:1.3rem .8rem;display:flex;flex-direction:column;gap:.3rem}
.side-title{font-size:.66rem;text-transform:uppercase;letter-spacing:.16em;color:var(--muted);
  font-weight:700;padding:.5rem .8rem .4rem}
.side-title.hist{margin-top:1rem;border-top:1px solid var(--line);padding-top:1rem}
.boards{display:flex;flex-direction:column;gap:.22rem}
.board-item{display:flex;justify-content:space-between;align-items:center;gap:.6rem;padding:.72rem .85rem;
  border-radius:12px;cursor:pointer;color:var(--ink-soft);border:1px solid transparent;font-weight:600;
  font-size:.93rem;transition:background .14s, color .14s}
.board-item:hover{background:var(--card)}
.board-item.active{background:var(--card-2);color:var(--ink);border-color:var(--line);box-shadow:var(--shadow)}
.board-item .count{font-size:.72rem;font-weight:700;color:var(--muted);background:#00000030;border:1px solid var(--line);
  border-radius:999px;padding:.12rem .5rem;min-width:24px;text-align:center}
.board-item.active .count{background:var(--primary);color:#0e0d0c;border-color:transparent}
.board-item.arch{color:var(--muted);font-weight:550}
.board-item.arch::before{content:"✓";color:#4bbf82;font-size:.8rem;margin-right:.1rem}

.content{padding:1.9rem 2.2rem 4rem;max-width:1600px}
.content-head{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:1rem;margin-bottom:1.7rem}
.content-head h1{font-size:1.75rem;margin:0 0 .3rem;letter-spacing:-.025em}
.content-head .sub{color:var(--muted);font-size:.92rem}
.legend{display:flex;gap:.45rem;flex-wrap:wrap}
.chip{font-size:.72rem;font-weight:700;padding:.3rem .66rem;border-radius:999px;border:1px solid var(--line);
  display:inline-flex;align-items:center;gap:.38rem;white-space:nowrap;background:#00000020}
.chip::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.s-approved{color:#54d08b;border-color:#2f6b4c}
.s-in_review{color:#f0b64a;border-color:#6b5321}
.s-changes_requested{color:#f0685e;border-color:#6b342f}
.s-pending{color:#a49c92;border-color:#3a3733}

/* Grid moderno */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1.6rem}
.card{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--card);
  box-shadow:var(--shadow);transition:transform .16s ease, box-shadow .16s ease, border-color .16s;cursor:pointer}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:color-mix(in srgb,var(--primary) 40%, var(--line))}
.card .thumb{aspect-ratio:4/5;background:#000;overflow:hidden;position:relative}
.card .thumb img{width:100%;height:100%;object-fit:cover}
.card .thumb .badges{position:absolute;top:.6rem;left:.6rem;display:flex;gap:.35rem}
.tag{font-size:.66rem;font-weight:800;letter-spacing:.03em;padding:.2rem .5rem;border-radius:7px;
  background:rgba(0,0,0,.55);color:#fff;backdrop-filter:blur(6px);text-transform:uppercase}
.tag.reel{background:color-mix(in srgb, var(--primary) 85%, #000);color:#0e0d0c}
.thumb .status-dot{position:absolute;top:.6rem;right:.6rem;width:12px;height:12px;border-radius:50%;
  box-shadow:0 0 0 3px rgba(0,0,0,.35)}
.dot-approved{background:#3fce7f}.dot-in_review{background:#f0b64a}
.dot-changes_requested{background:#f0685e}.dot-pending{background:#8f887e}
.thumb .play{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.thumb .play span{width:52px;height:52px;border-radius:50%;background:rgba(0,0,0,.4);border:2px solid #fff;
  display:grid;place-items:center;color:#fff;font-size:1.1rem;backdrop-filter:blur(4px)}
.card .meta{padding:.85rem .95rem 1rem;display:flex;align-items:center;justify-content:space-between;gap:.6rem}
.card .meta .name{font-weight:700;font-size:.95rem;line-height:1.25;letter-spacing:-.01em}
.card .meta .v{font-size:.74rem;color:var(--muted);font-weight:600;margin-top:.18rem}

.empty{padding:4rem 1rem;text-align:center;color:var(--muted)}

/* Tablet */
@media (max-width:920px){
  .layout{grid-template-columns:1fr}
  .side{border-right:0;border-bottom:1px solid var(--line);padding:.9rem 1rem;flex-direction:row;gap:.5rem;overflow-x:auto}
  .side-title{display:none}
  .boards{flex-direction:row;gap:.5rem}
  .board-item{white-space:nowrap;border-color:var(--line);background:var(--card)}
  .content{padding:1.4rem 1.2rem 4rem}
  .grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1.1rem}
}
/* Mobile */
@media (max-width:560px){
  .topbar{padding:.75rem 1rem}
  .content{padding:1.1rem 1rem 4rem}
  .grid{grid-template-columns:repeat(2,1fr);gap:.9rem}
  .content-head h1{font-size:1.3rem}
  .brand .btag{display:none}
}