/* ═══════════════════════════════════════════════════
   CREALEA — Lyra design language · compact pro scale
   ═══════════════════════════════════════════════════ */

:root{
  --bg:        #FBFBFD;
  --bg-soft:   #F4F5F9;
  --ink:       #0B0F1C;
  --ink-2:     #3A4155;
  --muted:     #6B7288;
  --faint:     #9CA3B8;
  --line:      #E7E9F0;
  --cobalt:    #E8442E;
  --cobalt-2:  #FF6B3D;
  --violet:    #F5920B;
  --mint:     #FFEFC4;
  --sky:      #FFD9C4;
  --lilac:    #FFE4BE;
  --peach:     #FFE3D0;
  --green:     #0E9F6E;
  --red:       #E0524D;
  --gold:      #F5B300;
  --card:      #FFFFFF;
  --radius:    14px;
  --display: "Bricolage Grotesque", "Arial Black", sans-serif;
  --body:    "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --mono:    "Spline Sans Mono", "SFMono-Regular", Consolas, monospace;
  --shadow-sm: 0 1px 2px rgba(11,15,28,.05), 0 3px 10px rgba(11,15,28,.05);
  --shadow-md: 0 2px 4px rgba(11,15,28,.04), 0 10px 28px rgba(11,15,28,.09);
  --shadow-lg: 0 4px 8px rgba(11,15,28,.04), 0 20px 56px -12px rgba(11,15,28,.16);
  --ease: cubic-bezier(.22,.9,.24,1);
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 13.5px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  min-height: 100vh;
}
::selection{ background: rgba(232,68,46,.15); }
a{ color:inherit; text-decoration:none; }
button{ font-family: inherit; }
a:focus-visible, button:focus-visible{ outline: 2px solid var(--cobalt); outline-offset: 2px; border-radius: 6px; }
img, svg, canvas{ max-width:100%; }
::-webkit-scrollbar{ width: 8px; height: 8px; }
::-webkit-scrollbar-thumb{ background: #D5D9E5; border-radius: 100px; border: 2px solid var(--bg); }
::-webkit-scrollbar-track{ background: transparent; }

.wrap{ max-width: 1320px; margin: 0 auto; padding: 0 22px; }

/* ───────── aurora backdrop ───────── */
.aurora{ position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden; }
.blob{
  position:absolute; border-radius: 50%;
  filter: blur(90px);
  opacity:.42;
  animation: blob-drift 20s ease-in-out infinite alternate;
}
.blob.b1{ width:520px; height:520px; background: var(--sky);   top:-200px; left:-100px; }
.blob.b2{ width:440px; height:440px; background: var(--lilac); top:-80px;  right:-60px; animation-delay:-6s; }
.blob.b3{ width:380px; height:380px; background: var(--mint);  bottom:-140px; left:30%; animation-delay:-12s; opacity:.28; }
.blob.b4{ width:320px; height:320px; background: var(--peach); top:40%; right:8%; animation-delay:-3s; opacity:.2; }
@keyframes blob-drift{
  0%  { transform: translate(0,0) scale(1); }
  100%{ transform: translate(60px, 40px) scale(1.12); }
}
.grid-lines{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(11,15,28,.028) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(11,15,28,.028) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(70% 50% at 50% 0%, #000 20%, transparent 100%);
  -webkit-mask-image: radial-gradient(70% 50% at 50% 0%, #000 20%, transparent 100%);
}

#app{ position:relative; z-index:1; padding: 104px 0 90px; }

/* ───────── nav ───────── */
.nav-shell{
  position: fixed; top: 26px; left: 0; right: 0; z-index: 100;
  display:flex; justify-content:center;
  pointer-events:none;
  padding: 0 14px;
}
.nav{
  pointer-events:auto;
  position: relative;
  display:flex; align-items:center; gap: 6px;
  width: 100%; max-width: 1280px;
  padding: 10px 12px 10px 18px;
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  border: 1px solid rgba(231,233,240,.9);
  border-radius: 100px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .4s var(--ease);
}
.nav.scrolled{ box-shadow: var(--shadow-md); }
.logo{ display:flex; align-items:center; gap:9px; margin-right: 10px; cursor:pointer; background:none; border:none; }
.logo-mark{
  width: 28px; height: 28px; border-radius: 9px;
  background: conic-gradient(from 210deg, #E8442E, #F5920B, #F5B300, #E8442E);
  position: relative;
  box-shadow: 0 3px 10px rgba(232,68,46,.35);
  flex-shrink: 0;
}
.logo-mark::after{
  content:""; position:absolute; inset: 7.5px;
  background:#fff; border-radius: 50% 50% 50% 3px;
}
.logo-name{
  font-family: var(--display);
  font-weight: 700; font-size: 16.5px; letter-spacing:-.02em;
}
.nav-center{
  position:absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display:flex; align-items:center; gap: 8px;
  pointer-events: auto;
  white-space: nowrap;
}
.nav-center:empty{ display:none; }
.nc-item{
  display:inline-flex; align-items:center; gap: 6px;
  font-size: 12px; font-weight: 600; color: var(--muted);
}
.nc-item b{ color: var(--ink); font-weight: 700; }
.nc-item .mono{ font-size: 11px; }
.nc-sep{ width: 3px; height: 3px; border-radius: 50%; background: var(--faint); opacity: .6; }
.nc-date{
  font-family: var(--display); font-size: 12.5px; font-weight: 600; color: var(--ink);
  letter-spacing: -.01em;
}
@media (max-width: 900px){ .nav-center{ display:none; } }
.crumbs{ display:flex; align-items:center; gap:2px; min-width:0; flex:1; }
.crumb{
  font-size: 12.5px; font-weight: 600; color: var(--muted);
  background:none; border:none; cursor:pointer; padding: 4px 8px; border-radius: 100px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width: 200px;
  transition: background .25s, color .25s;
}
.crumb:hover{ background: var(--bg-soft); color: var(--ink); }
.crumb.here{ color: var(--ink); cursor: default; }
.crumb.here:hover{ background: none; }
.crumb-sep{ color: var(--faint); font-size: 11px; }
.nav-right{ display:flex; align-items:center; gap:5px; margin-left:auto; }

/* ───────── pod shell (sidebar layout) ───────── */
.pod-shell{
  display:grid; grid-template-columns: 184px minmax(0,1fr); gap: 26px;
  align-items:start;
  margin-top: 14px;
}
@media (max-width: 860px){ .pod-shell{ grid-template-columns: 1fr; } .side-nav{ position:static !important; display:flex; flex-direction:row !important; flex-wrap:wrap; } }
.side-nav{
  position: sticky; top: 92px;
  display:flex; flex-direction:column; gap: 2px;
}
.side-pod{
  display:flex; align-items:center; gap: 9px;
  padding: 8px 10px; margin-bottom: 10px;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  cursor:pointer; text-align:left;
  transition: box-shadow .2s, transform .2s;
  width: 100%;
}
.side-pod:hover{ box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.side-pod .sp-avatar{
  width: 26px; height: 26px; border-radius: 8px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-family: var(--display); font-weight:700; font-size: 11px; color:#fff;
  background: linear-gradient(135deg, var(--pod-c1, #E8442E), var(--pod-c2, #F5920B));
  overflow:hidden;
}
.side-pod .sp-avatar img{ width:100%; height:100%; object-fit:cover; }
.side-pod .sp-name{ font-weight: 700; font-size: 12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; }
.side-pod .sp-sw{ color: var(--faint); font-size: 10px; }
.side-label{
  font-family: var(--mono); font-size: 9.5px; letter-spacing:.09em; text-transform:uppercase;
  color: var(--faint); font-weight: 500;
  padding: 8px 10px 3px;
}
.side-card{
  background: rgba(255,255,255,.82);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 8px;
  box-shadow: var(--shadow-sm);
}
/* tinted icon chip (used by the intake head and other section headers) */
.sg-ic{
  width: 22px; height: 22px; border-radius: 7px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-2);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.04);
}
.sc-label{
  font-family: var(--mono); font-size: 8.5px; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--faint);
  padding: 3px 11px 4px;
}
.sc-div{ height: 1px; background: var(--line); margin: 7px 3px; }
.side-item{
  position: relative;
  display:flex; align-items:center; gap: 9px;
  font-size: 12.5px; font-weight: 600; color: var(--muted);
  padding: 7px 9px 7px 11px; border-radius: 9px;
  background:none; border:none; cursor:pointer; text-align:left;
  transition: background .2s, color .2s, transform .18s var(--ease);
  width: 100%;
}
.side-item:hover{ background: var(--bg-soft); color: var(--ink); transform: translateX(2px); }
.side-item.on{
  background: linear-gradient(110deg, rgba(232,68,46,.09), rgba(245,146,11,.07) 70%, transparent);
  color: var(--ink);
}
.side-item.on::before{
  content:""; position:absolute; left: 0; top: 7px; bottom: 7px; width: 3px;
  border-radius: 100px;
  background: linear-gradient(180deg, var(--cobalt), var(--violet));
}
.side-item .si-ic{ width: 16px; display:inline-flex; justify-content:center; flex-shrink:0; color: currentColor; opacity:.85; }
.side-item.on .si-ic{ color: #D3641B; opacity: 1; }
.side-item .si-n{
  margin-left:auto; flex-shrink:0;
  font-family: var(--mono); font-size: 9.5px; font-weight: 600;
  color: var(--muted);
  background: var(--bg-soft);
  border-radius: 100px; padding: 2px 7px;
  min-width: 22px; text-align: center;
}
.side-item.on .si-n{ background: #fff; color: var(--ink); box-shadow: var(--shadow-sm); }
.side-item .si-ring{ margin-left:auto; flex-shrink:0; display:inline-flex; }
.side-item.sub{ padding-left: 30px; font-weight: 500; font-size: 12px; }
.side-solo{
  margin-bottom: 8px;
  background: rgba(255,255,255,.72);
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 3px;
  box-shadow: var(--shadow-sm);
}
/* pod header living inside the top side-group card */
.side-pod.sp-flat{
  position: relative;
  background: none; border: none; border-radius: 10px;
  margin-bottom: 0; padding: 7px 8px;
  gap: 10px;
  box-shadow: none;
}
.side-pod.sp-flat:hover{ background: var(--bg-soft); transform: none; box-shadow: none; }
.side-pod .sp-col{ display:flex; flex-direction:column; min-width:0; flex:1; text-align:left; }
.side-pod .sp-col .sp-name{ flex:none; font-size: 13px; letter-spacing: -.01em; }
.side-pod .sp-meta{
  font-family: var(--mono); font-size: 8.5px; font-weight: 500;
  color: var(--faint); letter-spacing: .04em; margin-top: 1.5px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.side-pod .sp-go{
  position: absolute; right: 9px; top: 50%;
  color: var(--faint); display:inline-flex;
  opacity: 0; transform: translate(-3px, -50%);
  transition: opacity .18s var(--ease), transform .18s var(--ease);
}
.side-pod.sp-flat:hover .sp-go{ opacity: 1; transform: translate(0, -50%); }
.sp-div{ height: 1px; background: var(--line); margin: 5px 6px 3px; }
.si-done{
  margin-left: auto; flex-shrink: 0;
  width: 18px; height: 18px; border-radius: 100px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(14,159,110,.12); color: var(--green);
}

/* ───────── buttons ───────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  font-size: 12.5px; font-weight: 600;
  padding: 7px 14px;
  border-radius: 100px;
  border: none; cursor: pointer;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), background .22s, opacity .22s;
  will-change: transform;
  white-space: nowrap;
}
.btn:disabled{ opacity:.45; cursor: not-allowed; transform:none !important; }
.btn-primary{
  background: var(--ink); color:#fff;
  box-shadow: 0 6px 16px -6px rgba(11,15,28,.4);
}
.btn-primary:hover:not(:disabled){ transform: translateY(-1px); box-shadow: 0 10px 22px -6px rgba(11,15,28,.45); background:#1B2340; }
.btn-cobalt{
  background: linear-gradient(135deg, var(--cobalt) 0%, var(--cobalt-2) 100%);
  color:#fff;
  box-shadow: 0 7px 20px -6px rgba(232,68,46,.55);
}
.btn-cobalt:hover:not(:disabled){ transform: translateY(-1px); box-shadow: 0 12px 28px -8px rgba(232,68,46,.6); }
.btn-ghost{
  background: rgba(255,255,255,.75); color: var(--ink);
  border: 1px solid var(--line);
}
.btn-ghost:hover:not(:disabled){ transform: translateY(-1px); border-color: var(--faint); background:#fff; box-shadow: var(--shadow-sm); }
.btn-danger{ background: rgba(224,82,77,.08); color: var(--red); border: 1px solid rgba(224,82,77,.25); }
.btn-danger:hover:not(:disabled){ background: rgba(224,82,77,.15); transform: translateY(-1px); }
.btn-sm{ padding: 5px 11px; font-size: 12px; }
.btn-xs{ padding: 3px 9px; font-size: 11px; gap: 4px; }
.btn .arr{ transition: transform .22s var(--ease); }
.btn:hover .arr{ transform: translateX(3px); }
.btn.working{ pointer-events:none; opacity:.7; }

.ibtn{
  width: 26px; height: 26px; border-radius: 8px; cursor: pointer;
  display:inline-flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,.88); color: var(--ink-2);
  border: 1px solid var(--line); font-size: 12px;
  transition: transform .2s var(--ease), background .2s, color .2s;
}
.ibtn:hover{ transform: translateY(-1px); background:#fff; color: var(--ink); box-shadow: var(--shadow-sm); }
.ibtn.danger:hover{ color: var(--red); border-color: rgba(224,82,77,.4); }

/* ───────── typography ───────── */
h1.page-title{
  font-family: var(--display);
  font-size: 22px;
  font-weight: 700; line-height: 1.1; letter-spacing: -.02em;
  text-wrap: balance;
}
h1.page-title.big{ font-size: clamp(26px, 3.4vw, 36px); letter-spacing:-.03em; }
h1 .grad, .grad{
  background: linear-gradient(100deg, #E8442E 10%, #F5920B 55%, #F5B300 95%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
h2.sec-title{
  font-family: var(--display);
  font-size: 15px; font-weight: 600; letter-spacing:-.01em;
}
.lede{ font-size: 13px; color: var(--muted); max-width: 62ch; }
.kicker{
  display:inline-flex; align-items:center; gap:6px;
  font-size: 10px; font-weight: 700;
  color: var(--cobalt);
  background: rgba(232,68,46,.07);
  border-radius: 100px;
  padding: 3px 10px;
  letter-spacing:.05em; text-transform: uppercase;
}
.micro{ font-family: var(--mono); font-size: 10px; letter-spacing:.05em; text-transform: uppercase; color: var(--faint); font-weight: 500; }
.mono{ font-family: var(--mono); }

/* ───────── cards ───────── */
.card{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
  position:relative;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.card.hover:hover{ transform: translateY(-3px); box-shadow: var(--shadow-md); border-color:#DDE1EC; cursor:pointer; }
.card h3{
  font-family: var(--display);
  font-size: 14px; font-weight: 600; letter-spacing:-.01em;
  margin-bottom: 4px;
}
.card p.desc{ font-size: 12px; color: var(--muted); }

/* ───────── pods grid (home) ───────── */
.pods{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px;
  margin-top: 26px;
}
.pod{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 18px;
  cursor:pointer;
  position:relative; overflow:hidden;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
  text-align:left;
  min-height: 158px;
  display:flex; flex-direction:column;
}
.pod:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); border-color:#DDE1EC; }
.pod::before{
  content:""; position:absolute; top:-60px; right:-60px;
  width: 160px; height: 160px; border-radius:50%;
  background: var(--pod-tint, var(--sky));
  filter: blur(50px); opacity:.5;
  transition: opacity .3s;
}
.pod:hover::before{ opacity:.8; }
.pod-avatar{
  width: 38px; height: 38px; border-radius: 12px;
  display:flex; align-items:center; justify-content:center;
  font-family: var(--display); font-weight: 700; font-size: 15px; color:#fff;
  background: linear-gradient(135deg, var(--pod-c1, #E8442E), var(--pod-c2, #F5920B));
  box-shadow: 0 8px 18px -8px rgba(232,68,46,.5);
  margin-bottom: 12px;
  position:relative; z-index:1;
  overflow:hidden;
}
.pod-avatar img{ width:100%; height:100%; object-fit:cover; }
.pod h3{
  font-family: var(--display); font-size: 15.5px; font-weight: 700; letter-spacing:-.01em;
  position:relative; z-index:1;
}
.pod .pod-meta{
  margin-top: auto; padding-top: 12px;
  display:flex; gap: 12px; flex-wrap:wrap;
  position:relative; z-index:1;
}
.pod .pm{ display:flex; flex-direction:column; }
.pod .pm b{ font-family: var(--mono); font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pod .pm span{ font-size: 9px; color: var(--faint); font-weight: 600; letter-spacing:.04em; text-transform:uppercase; }
.pod-new{
  border-style: dashed; border-width: 1.5px;
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap: 8px;
  color: var(--muted); background: rgba(255,255,255,.5);
}
.pod-new:hover{ color: var(--cobalt); border-color: var(--cobalt); }
.pod-new .plus{
  width: 34px; height: 34px; border-radius: 50%;
  border: 1.5px dashed currentColor;
  display:flex; align-items:center; justify-content:center;
  font-size: 17px; font-weight: 300;
}
.pod-new span{ font-weight: 600; font-size: 12.5px; }

/* ───────── creative type tiles ───────── */
.types{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}
.type-tile{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  cursor:pointer; text-align:left;
  position:relative; overflow:hidden;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
  min-height: 104px;
  display:flex; flex-direction:column; gap:3px;
}
.type-tile:hover{ transform: translateY(-3px); box-shadow: var(--shadow-md); }
.type-tile .t-ic{
  width: 28px; height: 28px; border-radius: 9px;
  display:flex; align-items:center; justify-content:center;
  font-size: 14px; margin-bottom: 6px;
  background: var(--bg-soft);
}
.type-tile h3{ font-family: var(--display); font-size: 13px; font-weight: 600; letter-spacing:-.01em; }
.type-tile p{ font-size: 11px; color: var(--muted); line-height: 1.4; }
.type-tile .t-count{
  position:absolute; top: 12px; right: 12px;
  font-family: var(--mono); font-size: 10.5px; font-weight: 600; color: var(--ink-2);
  background: var(--bg-soft); border-radius: 100px; padding: 2px 8px;
}
.type-tile.locked{ cursor: default; }
.type-tile.locked:hover{ transform:none; box-shadow:none; }
.type-tile.locked > *:not(.t-soon){ opacity:.42; }
.type-tile .t-soon{
  position:absolute; top: 12px; right: 12px;
  font-size: 8.5px; font-weight: 700; letter-spacing:.07em; text-transform:uppercase;
  color: var(--violet);
  background: rgba(245,146,11,.1); border-radius: 100px; padding: 3px 8px;
}

/* ───────── chips & pills ───────── */
.chips{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.chip{
  display:inline-flex; align-items:center; gap:5px;
  font-size: 11.5px; font-weight: 600; color: var(--ink-2);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 4px 10px;
  cursor:pointer;
  transition: all .18s var(--ease);
  user-select: none;
}
.chip:hover{ border-color: var(--faint); transform: translateY(-1px); }
.chip.on{
  background: var(--ink); color:#fff; border-color: var(--ink);
  box-shadow: 0 4px 12px -5px rgba(11,15,28,.4);
}
.chip.on-cobalt{
  background: linear-gradient(135deg, var(--cobalt), var(--cobalt-2)); color:#fff; border-color: transparent;
  box-shadow: 0 4px 12px -5px rgba(232,68,46,.55);
}
.chip .n{ font-family: var(--mono); font-size: 9.5px; opacity:.65; }
.chip-sm{ padding: 3px 8px; font-size: 11px; }

.dot-live{
  width:6px; height:6px; border-radius:50%;
  background:#4ADE80; display:inline-block;
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{ opacity:1; transform:scale(1);} 50%{ opacity:.4; transform:scale(.75);} }

/* ───────── forms ───────── */
label.f-label{
  display:block;
  font-size: 10px; font-weight: 700; letter-spacing:.05em; text-transform: uppercase;
  color: var(--faint);
  margin: 0 0 4px 2px;
}
input:not([type]), input[type=text], input[type=password], input[type=number], input[type=search], textarea, select{
  width: 100%;
  font-family: inherit; font-size: 12.5px; color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 7px 10px;
  transition: border-color .2s, box-shadow .2s;
  outline: none;
}
input:focus, textarea:focus, select:focus{
  border-color: var(--cobalt);
  box-shadow: 0 0 0 3px rgba(232,68,46,.11);
}
textarea{ resize: vertical; min-height: 34px; line-height: 1.45; }
select{ cursor: pointer; appearance:none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6'%3E%3Cpath d='M1 1l3.5 3.5L8 1' stroke='%236B7288' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position: right 10px center; padding-right: 28px; }
select.sel-inline{ width:auto; }
.f-row{ margin-bottom: 12px; }
.f-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.f-grid .full{ grid-column: 1 / -1; }
.f-hint{ font-size: 11px; color: var(--faint); margin-top: 3px; }

.search-box{ position:relative; }
.search-box input{ padding-left: 30px; border-radius: 100px; }
.search-box::before{
  content:""; position:absolute; left: 11px; top:50%; transform: translateY(-50%);
  width: 13px; height: 13px; pointer-events:none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239CA3B8' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ───────── page sections ───────── */
.page-head{ display:flex; align-items:center; justify-content:space-between; gap: 14px; flex-wrap:wrap; margin-bottom: 18px; }
.page-head .ph-left{ display:flex; flex-direction:column; gap: 6px; align-items:flex-start; }
.page-head .ph-actions{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.sec{ margin-top: 28px; }
.sec-head{ display:flex; align-items:center; justify-content:space-between; gap: 12px; margin-bottom: 12px; flex-wrap:wrap; }

/* ───────── reveal animations ───────── */
@keyframes fade-up{ from{ opacity:0; transform:translateY(14px);} to{ opacity:1; transform:none;} }
@keyframes fade-up-sm{ from{ opacity:.35; transform:translateY(5px);} to{ opacity:1; transform:none;} }
.view-enter{ animation: fade-up-sm .22s var(--ease); }

/* thin top loading bar — only shows when a view takes a moment to build */
.route-bar{
  position: fixed; top: 0; left: 0; right: 0; height: 2.5px;
  z-index: 400; pointer-events: none;
  opacity: 0; transition: opacity .18s var(--ease);
  overflow: hidden;
}
.route-bar.on{ opacity: 1; }
.route-bar::before{
  content: ""; position: absolute; top: 0; height: 100%; width: 38%;
  border-radius: 100px;
  background: linear-gradient(90deg, var(--cobalt), var(--violet));
  animation: route-slide 1.1s var(--ease) infinite;
}
@keyframes route-slide{ 0%{ left: -38%; } 100%{ left: 100%; } }
.stagger > *{ opacity:0; animation: fade-up .5s var(--ease) forwards; }
.stagger > *:nth-child(1){ animation-delay:.02s; }
.stagger > *:nth-child(2){ animation-delay:.06s; }
.stagger > *:nth-child(3){ animation-delay:.1s; }
.stagger > *:nth-child(4){ animation-delay:.14s; }
.stagger > *:nth-child(5){ animation-delay:.18s; }
.stagger > *:nth-child(6){ animation-delay:.22s; }
.stagger > *:nth-child(7){ animation-delay:.26s; }
.stagger > *:nth-child(8){ animation-delay:.3s; }
.stagger > *:nth-child(n+9){ animation-delay:.34s; }

/* ───────── modals ───────── */
.modal-veil{
  position:fixed; inset:0; z-index: 300;
  background: rgba(11,15,28,.38);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  display:flex; align-items:center; justify-content:center;
  padding: 20px;
  animation: veil-in .25s var(--ease);
}
@keyframes veil-in{ from{ opacity:0; } to{ opacity:1; } }
.modal{
  background: var(--card);
  border-radius: 18px;
  box-shadow: var(--shadow-lg);
  width: 100%; max-width: 460px;
  max-height: 88vh;
  display:flex; flex-direction:column;
  overflow:hidden;
  animation: modal-in .32s var(--ease);
}
.modal.wide{ max-width: 680px; }
.modal.xwide{ max-width: 960px; }
@keyframes modal-in{ from{ opacity:0; transform: translateY(18px) scale(.98);} to{ opacity:1; transform:none;} }
.modal-head{
  display:flex; align-items:center; gap: 10px;
  padding: 16px 20px 0;
}
.modal-head h3{ font-family: var(--display); font-size: 15px; font-weight: 700; letter-spacing:-.01em; flex:1; }
.modal-body{ padding: 12px 20px; overflow-y:auto; flex:1; }
.modal-foot{
  display:flex; gap:8px; justify-content:flex-end; align-items:center;
  padding: 12px 20px 16px;
  border-top: 1px solid var(--line);
}
.modal-x{
  width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--line); background:#fff; cursor:pointer;
  font-size: 11px; color: var(--muted);
  display:flex; align-items:center; justify-content:center;
  transition: all .2s;
  flex-shrink:0;
}
.modal-x:hover{ color: var(--ink); transform: rotate(90deg); }

/* ───────── toasts ───────── */
#toasts{
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  z-index: 500; display:flex; flex-direction:column; gap: 8px; align-items:center;
  pointer-events:none;
}
.toast{
  background: var(--ink); color:#fff;
  font-size: 12px; font-weight: 600;
  padding: 9px 18px; border-radius: 100px;
  box-shadow: 0 12px 32px -8px rgba(11,15,28,.5);
  animation: toast-in .35s var(--ease);
  max-width: 580px; text-align:center;
  pointer-events:auto;
}
.toast.err{ background: #7C1D1A; }
.toast.out{ opacity:0; transform: translateY(8px); transition: all .35s var(--ease); }
@keyframes toast-in{ from{ opacity:0; transform: translateY(12px) scale(.96);} to{ opacity:1; transform:none;} }

/* ───────── reference grid (masonry) ───────── */
.ref-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(142px, 1fr));
  grid-auto-rows: 8px;
  column-gap: 10px;
  row-gap: 0; /* vertical spacing lives in the span formula — a row-gap multiplies across every 8px track */
  margin-top: 12px;
}
.ref-card{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow:hidden;
  cursor:pointer;
  position:relative;
  align-self: start;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .15s, opacity .3s;
}
.ref-card:hover{ transform: translateY(-2px); box-shadow: var(--shadow-md); }
.ref-card.sel{ border-color: var(--cobalt); box-shadow: 0 0 0 2.5px rgba(232,68,46,.2), var(--shadow-md); }
.ref-card.done-dim{ opacity:.45; }
.ref-card img{ width:100%; display:block; background: var(--bg-soft); min-height: 50px; }
.ref-card .rc-check{
  position:absolute; top:7px; left:7px; z-index:2;
  width: 19px; height: 19px; border-radius: 50%;
  background: rgba(255,255,255,.92); border: 1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  font-size: 10px; color: transparent;
  transition: all .18s;
  box-shadow: var(--shadow-sm);
}
.ref-card.sel .rc-check{ background: var(--cobalt); border-color: var(--cobalt); color:#fff; }
.ref-card .rc-tools{
  position:absolute; top:6px; right:6px; z-index:2;
  display:flex; gap:4px;
  opacity:0; transition: opacity .18s;
}
.ref-card:hover .rc-tools{ opacity:1; }
.ref-card .rc-tools .ibtn{ width: 22px; height: 22px; font-size: 10px; border-radius: 7px; }
.ref-card .rc-tag{
  position:absolute; bottom:6px; left:6px; z-index:2;
  font-size: 9px; font-weight: 700; color: var(--ink-2);
  background: rgba(255,255,255,.92); backdrop-filter: blur(6px);
  padding: 2px 7px; border-radius: 100px;
  box-shadow: var(--shadow-sm);
  max-width: calc(100% - 12px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ref-card .rc-done{
  position:absolute; bottom:6px; right:6px; z-index:2;
  font-size: 9px; font-weight:700; color: var(--green);
  background: rgba(230,250,242,.95);
  padding: 2px 7px; border-radius: 100px;
}
.ref-card .rc-copy{
  padding: 7px 9px;
  font-size: 10px; color: var(--muted); line-height: 1.4;
  display:-webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow:hidden;
  border-top: 1px solid var(--line);
}

/* natives reference feed — card grid */
.nat-grid{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 12px; align-items: start;
}
.nat-card{
  display:flex; flex-direction:column;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
  overflow: hidden;
}
.nat-card:hover{ transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: rgba(232,68,46,.25); }
.nat-card .nc-head{ display:flex; align-items:center; gap: 10px; padding: 12px 12px 9px; }
.nat-card .nc-thumb{
  width: 40px; height: 40px; border-radius: 10px; object-fit: cover;
  background: var(--bg-soft); cursor: pointer; flex-shrink:0;
  border: 1px solid var(--line);
}
.nat-card .nc-id{ flex:1; min-width:0; }
.nat-card .nc-brand{
  font-weight: 700; font-size: 12.5px; letter-spacing: -.01em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.nat-card .nc-stats{ display:flex; gap:5px; align-items:center; margin-top: 3px; flex-wrap:wrap; }
.nat-card .nc-chip{
  display:inline-flex; align-items:center; gap:3px;
  font-family: var(--mono); font-size: 9px; font-weight:600; letter-spacing:.02em;
  padding: 1.5px 7px; border-radius: 100px;
  background: var(--bg-soft); color: var(--ink-2);
}
.nat-card .nc-chip.is-map{ background: rgba(14,159,110,.09); color: var(--green); }
.nat-card .nc-chip.is-written{ background: rgba(232,68,46,.08); color: var(--cobalt); }
.nat-card .nc-del{ opacity:0; transition: opacity .15s var(--ease); flex-shrink:0; }
.nat-card:hover .nc-del{ opacity:1; }
.nat-card.sel{
  border-color: var(--cobalt);
  box-shadow: 0 0 0 1px var(--cobalt), var(--shadow-sm);
}
.nat-card .nc-snippet{
  padding: 0 12px; cursor: pointer;
  font-size: 11.5px; color: var(--ink-2); line-height: 1.55;
  display:-webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow:hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
  min-height: 3.1em;
}
.nat-card .nc-foot{
  display:flex; align-items:center; gap: 6px;
  padding: 10px 12px 12px; margin-top: 6px;
  border-top: 1px solid var(--line);
}

/* the dossier agent bar */
.agent-bar{
  display:flex; align-items:center; gap: 10px;
  background: var(--card); border: 1px solid var(--line); border-radius: 13px;
  padding: 9px 12px; margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
}
.agent-bar .ab-ic{
  width: 26px; height: 26px; border-radius: 8px; flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center;
  color: #fff;
  background: linear-gradient(135deg, var(--cobalt), var(--violet));
}
.agent-bar input{
  flex: 1; min-width: 0;
  border: none; background: none; outline: none;
  font: inherit; font-size: 12.5px; color: var(--ink);
}
.agent-bar input::placeholder{ color: var(--faint); }

/* natives results — saved natives list */
.natr-card{
  display:flex; align-items:center; gap: 13px;
  background: var(--card); border: 1px solid var(--line); border-radius: 13px;
  padding: 12px 14px; margin-bottom: 9px; cursor: pointer;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.natr-card:hover{ transform: translateY(-1px); box-shadow: var(--shadow-md); }
.natr-card .nr-dot{ width: 8px; height: 8px; border-radius: 100px; flex-shrink:0; background: var(--muted); }
.natr-card .nr-dot.s-ready{ background: var(--green); }
.natr-card .nr-dot.s-used{ background: var(--violet); }
.natr-card .nr-main{ flex:1; min-width:0; }
.natr-card .nr-title{
  font-weight: 700; font-size: 13px; letter-spacing:-.01em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.natr-card .nr-meta{ font-family: var(--mono); font-size: 9.5px; color: var(--muted); margin: 2px 0 4px; letter-spacing:.02em; }
.natr-card .nr-snippet{
  font-size: 11px; color: var(--ink-2); line-height: 1.45;
  display:-webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow:hidden;
}
.natr-card .nr-side{ display:flex; align-items:center; gap: 9px; flex-shrink:0; }
.natr-card .nr-ref{
  width: 38px; height: 46px; border-radius: 9px; object-fit: cover; flex-shrink:0;
  border: 1px solid var(--line); background: var(--bg-soft); cursor: pointer;
}
.natr-card .nr-ref.ph{ display:inline-flex; align-items:center; justify-content:center; color: var(--faint); cursor: default; }
.natr-card .nr-imgs{ display:flex; align-items:center; gap: 3px; }
.natr-card .nr-imgs img{
  width: 24px; height: 24px; border-radius: 6px; object-fit: cover;
  border: 1px solid var(--line); background: var(--bg-soft);
}
.natr-card .nr-more{ font-family: var(--mono); font-size: 9px; font-weight: 700; color: var(--muted); padding-left: 2px; }

/* writer panel control rows — compact labeled fields on one line */
.fp-controls{ align-items: flex-end !important; gap: 10px !important; }
.fp-controls .pf{ display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fp-controls .pf-l{
  font-family: var(--mono); font-size: 8.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--faint);
  padding-left: 2px;
}
.fp-controls select{ width: auto; min-width: 118px; max-width: 220px; }
.fp-controls .pf.grow{ flex: 1; }
.fp-controls .pf.grow input{ width: 100%; }

/* month-grid calendar (Google Calendar style) */
.cal{ padding: 12px 14px 14px; margin-bottom: 18px; }
.cal-head{ display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.cal-head b{ font-family: var(--display); font-size: 14.5px; letter-spacing: -.01em; min-width: 130px; text-align: center; }
.cal-dow{
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
  margin-bottom: 4px;
}
.cal-dow span{
  font-family: var(--mono); font-size: 8.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--faint); text-align: center;
}
.cal-grid{ display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-cell{
  position: relative;
  min-height: 86px; padding: 5px 5px 4px;
  background: var(--bg-soft); border: 1px solid transparent; border-radius: 10px;
  display: flex; flex-direction: column; gap: 3px; align-items: stretch;
  text-align: left; cursor: default; overflow: hidden;
  transition: border-color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
}
.cal-cell.out{ opacity: .38; }
.cal-cell.has{ background: var(--card); border-color: var(--line); cursor: pointer; }
.cal-cell.has:hover{ transform: translateY(-1px); box-shadow: var(--shadow-md); border-color: rgba(232,68,46,.3); }
.cal-cell.today .cc-n{ background: var(--cobalt); color: #fff; }
.cal-cell .cc-n{
  align-self: flex-start;
  font-size: 10.5px; font-weight: 700;
  width: 20px; height: 20px; border-radius: 100px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-2);
}
.cal-pill{
  display: block;
  font-size: 9.5px; font-weight: 700; color: #fff;
  background: var(--violet);
  border-radius: 5px; padding: 2.5px 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  line-height: 1.3;
}
.cal-more{ font-family: var(--mono); font-size: 8.5px; font-weight: 700; color: var(--muted); padding-left: 2px; }
.cal-views{
  display: inline-flex; gap: 2px;
  background: var(--bg-soft); border: 1px solid var(--line);
  border-radius: 9px; padding: 2px;
}
.cal-vbtn{
  font-size: 11px; font-weight: 700; color: var(--muted);
  padding: 3px 10px; border-radius: 7px;
  background: none; border: none; cursor: pointer;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.cal-vbtn.on{ background: var(--card); color: var(--ink); box-shadow: var(--shadow-sm); }
.cal-cell.wk{ min-height: 220px; }
@media (max-width: 760px){ .cal-cell{ min-height: 64px; } .cal-pill{ font-size: 8px; padding: 2px 4px; } }

/* results timeline — days → batches → concepts */
.res-timeline{ display: block; }
.day-strip{
  display: flex; gap: 7px; overflow-x: auto; padding: 2px 2px 12px;
  scrollbar-width: thin;
}
.day-chip{
  display: flex; flex-direction: column; align-items: center; gap: 0;
  min-width: 54px; padding: 6px 10px 7px;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  cursor: pointer; flex-shrink: 0;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.day-chip:hover{ transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.day-chip b{ font-size: 15px; line-height: 1.1; }
.day-chip span{ font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.day-chip .dc-n{
  margin-top: 3px; font-family: var(--mono); font-size: 8.5px; font-weight: 700;
  background: var(--bg-soft); border-radius: 100px; padding: 1px 6px; color: var(--ink-2);
}
.day-sec{ margin-bottom: 26px; scroll-margin-top: 90px; }
.day-head{
  display: flex; align-items: center; gap: 10px;
  padding: 4px 2px 10px;
}
.day-head h3{ font-family: var(--display); font-size: 16px; letter-spacing: -.01em; }
.batch-sec{
  background: rgba(255,255,255,.6);
  border: 1px solid var(--line); border-radius: 16px;
  padding: 10px 12px 12px; margin-bottom: 12px;
  transition: border-color .2s var(--ease);
}
.batch-sec.done{ border-color: rgba(14,159,110,.35); }
.batch-head{
  display: flex; align-items: center; gap: 8px;
  padding: 2px 2px 10px;
  font-size: 12.5px;
}
.batch-head .bh-ic{
  width: 22px; height: 22px; border-radius: 7px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-soft); color: var(--ink-2);
}
.del-chip{ border-color: rgba(14,159,110,.4) !important; color: var(--green) !important; cursor: default; }
.ibtn.on-green{ background: rgba(14,159,110,.12); color: var(--green); }
.fc-del{
  position: absolute; bottom: 8px; right: 8px;
  width: 22px; height: 22px; border-radius: 100px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--green); color: #fff;
  box-shadow: var(--shadow-sm);
}

/* dossier inline edit controls — appear on hover */
.di-act{ display:none; gap: 2px; flex-shrink: 0; margin-left: 4px; align-items: center; }
.d-item:hover .di-act{ display: inline-flex; }
.d-text .di-act{ display: none; margin-left: 8px; vertical-align: middle; }
.d-text:hover .di-act{ display: inline-flex; }
.d-obj{ position: relative; }
.d-obj .di-act{ position: absolute; top: 6px; right: 6px; z-index: 2; }
.d-obj:hover .di-act{ display: inline-flex; }
.di-act .ibtn{ background: var(--card); box-shadow: var(--shadow-sm); }

/* intelligence intake — compact & collapsible */
.card.intake{ margin-bottom: 16px; padding: 12px 14px; }
.intake-head{ display: flex; align-items: center; gap: 11px; cursor: pointer; }
.intake-head .f-hint{ margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.intake-chev{ color: var(--faint); display: inline-flex; transition: transform .2s var(--ease); flex-shrink: 0; }
.intake-body{
  display: grid; grid-template-columns: minmax(220px, 1fr) 1.35fr;
  gap: 14px; margin-top: 13px; padding-top: 13px;
  border-top: 1px solid var(--line);
}
.intake-body .dropzone{ height: 100%; min-height: 150px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.intake-body .f-row textarea{ min-height: 30px; }
@media (max-width: 760px){ .intake-body{ grid-template-columns: 1fr; } }

/* user-defined angles in Intelligence */
.angle-row{
  display:flex; align-items:center; gap: 10px;
  padding: 8px 11px; margin-bottom: 6px;
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: 11px;
}
.angle-row .nr-dot{ width: 8px; height: 8px; border-radius: 100px; background: var(--muted); flex-shrink: 0; }
.angle-row .nr-dot.s-ready{ background: var(--green); }

/* chats studio — preview + editable message list */
.chat-wrap{ display:flex; gap: 16px; align-items: flex-start; min-height: 0; }
.chat-prev{
  flex-shrink: 0; width: 320px;
  border-radius: 18px; overflow: hidden;
  border: 1px solid var(--line); box-shadow: var(--shadow-md);
  background: #fff;
}
.chat-prev canvas.chat-canvas{ display:block; width: 100%; height: auto; }
.cmsg-list{ flex: 1; min-width: 0; max-height: 640px; overflow-y: auto; padding-right: 4px; }
.cmsg{ display:flex; align-items:flex-start; gap: 6px; margin-bottom: 5px; }
.cmsg.mine{ flex-direction: row-reverse; }
.cmsg .cmsg-b{
  position: relative;
  max-width: 78%;
  font-size: 12px; line-height: 1.4;
  padding: 6px 11px; border-radius: 14px;
  background: var(--bg-soft); color: var(--ink);
  cursor: pointer;
  transition: filter .15s var(--ease);
}
.cmsg .cmsg-b:hover{ filter: brightness(.96); }
.cmsg.mine .cmsg-b{ background: #007AFF; color: #fff; }
.cmsg .cmsg-b.is-photo{
  background: var(--card); color: var(--ink-2);
  border: 1.5px dashed rgba(60,60,67,.35);
}
.cmsg.mine .cmsg-b.is-photo{ background: rgba(0,122,255,.08); color: var(--ink-2); }
.cmsg .cmsg-r{
  position: absolute; top: -9px; right: -6px;
  font-size: 11px;
  background: #fff; border: 1px solid var(--line); border-radius: 100px;
  padding: 1px 4px;
}
.cmsg .cmsg-x{ opacity: 0; transition: opacity .15s; flex-shrink: 0; margin-top: 3px; }
.cmsg:hover .cmsg-x{ opacity: 1; }

/* native images grid inside the writer panel */
.ni-grid{
  display:grid; grid-template-columns: repeat(5, 1fr); gap: 8px;
}
.ni-grid .ni-img{
  width: 100%; aspect-ratio: 1; object-fit: cover;
  border-radius: 10px; border: 1px solid var(--line);
  background: var(--bg-soft); cursor: pointer;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.ni-grid .ni-img:hover{ transform: scale(1.03); box-shadow: var(--shadow-md); }
@media (max-width: 700px){ .ni-grid{ grid-template-columns: repeat(3, 1fr); } }

.chip .chip-n{
  font-family: var(--mono); font-size: 9px; font-weight: 700;
  background: var(--bg-soft); border-radius: 100px; padding: 0 5px; margin-left: 4px;
}
.chip.on .chip-n{ background: rgba(255,255,255,.22); }

/* ───────── bottom generate dock ───────── */
.gen-dock{
  position: fixed; bottom: 14px; left: 50%; transform: translateX(-50%);
  z-index: 240;
  width: min(960px, calc(100vw - 24px));
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 10px 14px;
  box-shadow: var(--shadow-lg);
  animation: dock-in .3s var(--ease);
}
@keyframes dock-in{ from{ opacity:0; transform: translate(-50%, 14px);} to{ opacity:1; transform: translate(-50%, 0);} }
.gen-dock .gd-row{ display:flex; gap: 8px; align-items:center; flex-wrap:wrap; }
.gen-dock .gd-count{
  font-family: var(--mono); font-size: 11px; font-weight: 600; color:#fff;
  background: var(--ink); border-radius: 100px; padding: 4px 10px;
  white-space:nowrap;
}
.gen-dock select{ width:auto; font-size: 11.5px; padding: 5px 24px 5px 8px; border-radius: 8px; }
.gen-dock .gd-cost{
  font-family: var(--mono); font-size: 11.5px; font-weight: 600;
  background: linear-gradient(120deg, var(--cobalt), #F5920B);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  margin-left:auto;
  white-space:nowrap;
}
.gen-dock .gd-prods{ display:flex; gap:4px; flex-wrap:wrap; }

/* popover (advanced settings) */
.popover{
  position: fixed; z-index: 350;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 14px; box-shadow: var(--shadow-lg);
  padding: 14px; width: 300px;
  animation: modal-in .2s var(--ease);
}

/* ───────── creative families (results) ───────── */
.fam-toolbar{
  display:flex; gap:8px; align-items:center; flex-wrap:wrap;
  margin-bottom: 14px;
}
.fam-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 12px;
}
.fam-card{
  background: var(--card); border: 1px solid var(--line); border-radius: 13px;
  overflow:hidden; cursor:pointer; position:relative;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .15s;
}
.fam-card:hover{ transform: translateY(-3px); box-shadow: var(--shadow-md); }
.fam-card.sel{ border-color: var(--cobalt); box-shadow: 0 0 0 2.5px rgba(232,68,46,.2); }
.fam-card .fc-img{ position:relative; background: var(--bg-soft); }
.fam-card .fc-img img{ width:100%; display:block; aspect-ratio: 1/1; object-fit: cover; }
.fam-card .fc-stack{
  position:absolute; inset: 0;
  border-radius: inherit;
  pointer-events:none;
}
.fam-card .fc-count{
  position:absolute; top:7px; right:7px;
  font-family: var(--mono); font-size: 10px; font-weight: 600; color: var(--ink);
  background: rgba(255,255,255,.94); backdrop-filter: blur(6px);
  border-radius: 100px; padding: 2px 8px;
  box-shadow: var(--shadow-sm);
}
.fam-card .fc-star{
  position:absolute; top:7px; left:7px;
  color: var(--gold); font-size: 13px;
  text-shadow: 0 1px 4px rgba(0,0,0,.25);
}
.fam-card .fc-check{
  position:absolute; bottom:7px; right:7px; z-index:2;
  width: 20px; height: 20px; border-radius: 50%;
  background: rgba(255,255,255,.94); border: 1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  font-size: 10px; color: transparent;
  cursor:pointer; box-shadow: var(--shadow-sm);
  opacity:0; transition: all .18s;
}
.fam-card:hover .fc-check, .fam-card.sel .fc-check{ opacity:1; }
.fam-card.sel .fc-check{ background: var(--cobalt); border-color: var(--cobalt); color:#fff; }
.fam-card .fc-foot{
  display:flex; align-items:center; gap: 6px;
  padding: 7px 9px;
}
.fam-card .fc-ref{
  width: 22px; height: 22px; border-radius: 6px; object-fit: cover;
  border: 1px solid var(--line); flex-shrink:0; background: var(--bg-soft);
}
.fam-card .fc-meta{ min-width:0; flex:1; }
.fam-card .fc-prod{ font-size: 11px; font-weight: 700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fam-card .fc-fmts{ display:flex; gap:3px; margin-top: 1px; }
.fam-card .fc-fmt{
  font-family: var(--mono); font-size: 8.5px; font-weight: 600; color: var(--muted);
  background: var(--bg-soft); border-radius: 4px; padding: 1px 4px;
}
.fam-card.busy .fc-img::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(100deg, rgba(238,240,246,.7) 40%, rgba(248,249,252,.7) 50%, rgba(238,240,246,.7) 60%);
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
}

/* family detail panel */
.fam-veil{
  position: fixed; inset: 0; z-index: 280;
  background: rgba(11,15,28,.32);
  backdrop-filter: blur(5px);
  animation: veil-in .22s var(--ease);
}
.fam-panel{
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 281;
  width: min(1080px, 96vw);
  background: var(--bg);
  box-shadow: -24px 0 60px rgba(11,15,28,.25);
  display:flex; flex-direction:column;
  animation: panel-in .32s var(--ease);
}
.fp-stage{
  flex: 1; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 18px 22px 10px;
  position: relative;
}
.fp-stage img{
  max-width: 100%; max-height: 100%;
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  cursor: zoom-in;
}
.fp-stage .fs-nav{
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,.92); border: 1px solid var(--line);
  color: var(--ink-2); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-md);
  transition: transform .2s var(--ease);
}
.fp-stage .fs-nav:hover{ transform: translateY(-50%) scale(1.08); }
.fp-stage .fs-prev{ left: 10px; } .fp-stage .fs-next{ right: 10px; }
.fp-actions{
  display: flex; gap: 6px; align-items: center; justify-content: center; flex-wrap: wrap;
  padding: 8px 16px;
}
.fp-strip{
  display: flex; gap: 8px; align-items: flex-end;
  overflow-x: auto; flex-shrink: 0;
  padding: 10px 16px 14px;
  border-top: 1px solid var(--line);
  background: rgba(255,255,255,.7);
}
.fp-thumb{
  position: relative; flex-shrink: 0; cursor: pointer;
  border-radius: 10px; padding: 2px;
  border: 2px solid transparent;
  transition: border-color .15s, transform .18s var(--ease);
}
.fp-thumb:hover{ transform: translateY(-2px); }
.fp-thumb.on{ border-color: var(--cobalt); }
.fp-thumb img{ height: 76px; width: auto; border-radius: 7px; display: block; background: var(--bg-soft); }
.fp-thumb .ft-badge{
  position: absolute; bottom: 5px; left: 5px;
  font-family: var(--mono); font-size: 8px; font-weight: 600;
  background: rgba(255,255,255,.92); color: var(--ink-2);
  border-radius: 5px; padding: 1px 4px;
  box-shadow: var(--shadow-sm);
}
.fp-thumb .ft-star{
  position: absolute; top: 4px; right: 4px; color: var(--gold); font-size: 10px;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
}
.fp-thumb.skel-thumb{ width: 60px; height: 80px; }
@keyframes panel-in{ from{ transform: translateX(40px); opacity:.4; } to{ transform:none; opacity:1; } }
.fam-panel .fp-head{
  display:flex; align-items:center; gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.8);
  backdrop-filter: blur(10px);
}
.fam-panel .fp-ref{
  width: 40px; height: 40px; border-radius: 9px; object-fit: cover;
  border: 1px solid var(--line); cursor: zoom-in; background: var(--bg-soft);
}
.fam-panel .fp-title{ min-width:0; flex:1; }
.fam-panel .fp-title b{ font-family: var(--display); font-size: 14px; display:block; }
.fam-panel .fp-title span{ font-size: 11px; color: var(--faint); }
.fam-panel .fp-body{ flex:1; overflow-y:auto; padding: 18px 20px 30px; }
.fp-sec{ margin-bottom: 20px; }
.fp-sec > .micro{ display:block; margin-bottom: 8px; }
.fp-grid{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
.fp-item{
  background: var(--card); border: 1px solid var(--line); border-radius: 11px;
  overflow:hidden; position:relative;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.fp-item:hover{ transform: translateY(-2px); box-shadow: var(--shadow-md); }
.fp-item img{ width:100%; display:block; cursor: zoom-in; background: var(--bg-soft); }
.fp-item .fi-foot{
  display:flex; align-items:center; gap: 5px;
  padding: 5px 8px;
}
.fp-item .fi-badge{
  font-family: var(--mono); font-size: 9px; font-weight: 600; color: var(--ink-2);
  background: var(--bg-soft); border-radius: 100px; padding: 1px 6px;
}
.fp-item .fi-kind{ font-size: 10px; color: var(--faint); flex:1; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.fp-item .rs-star{ background:none; border:none; cursor:pointer; font-size: 12px; color:#D5D9E5; padding:0; transition: color .2s, transform .2s; }
.fp-item .rs-star.on{ color: var(--gold); }
.fp-item .rs-star:hover{ transform: scale(1.2); }
.fp-item .fi-menu{
  position:absolute; top:6px; right:6px;
  opacity:0; transition:opacity .18s;
}
.fp-item:hover .fi-menu{ opacity:1; }

/* skeleton */
.skel{
  border-radius: 11px;
  background: linear-gradient(100deg, #EEF0F6 40%, #F8F9FC 50%, #EEF0F6 60%);
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
  border: 1px solid var(--line);
  position:relative;
  overflow:hidden;
}
@keyframes shimmer{ to{ background-position: -200% 0; } }
.skel .sk-label{
  position:absolute; inset:auto 0 8px 0; text-align:center;
  font-size: 10px; font-weight: 700; color: var(--faint);
}
.skel.failed{ background: rgba(224,82,77,.06); animation:none; border-color: rgba(224,82,77,.3); }
.skel.failed .sk-label{ color: var(--red); }
.skel.cloud{ background: linear-gradient(100deg, #EEF3FF 40%, #F7FAFF 50%, #EEF3FF 60%); background-size: 200% 100%; }

/* activity dock (bottom-right stack of background work) */
.activity-dock{
  position: fixed; bottom: 16px; right: 16px; z-index: 250;
  display: flex; flex-direction: column; gap: 10px;
  width: 290px;
}
.activity-dock:empty{ display: none; }

/* job card */
.job-card{
  position: fixed; bottom: 16px; right: 16px; z-index: 250;
  width: 280px;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow-lg);
  padding: 12px 14px;
  animation: modal-in .3s var(--ease);
}
.job-card .jc-head{ display:flex; align-items:center; gap:8px; margin-bottom: 6px; }
.job-card .jc-title{ font-weight: 700; font-size: 12px; flex:1; }
.job-card .jc-sub{ font-size: 11px; color: var(--muted); margin-bottom: 7px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.job-card .jc-bar{
  height: 5px; border-radius: 100px; background: var(--bg-soft); overflow:hidden; margin-bottom: 7px;
}
.job-card .jc-fill{
  height:100%; border-radius:100px;
  background: linear-gradient(90deg, var(--cobalt), var(--violet));
  transition: width .5s var(--ease);
}
.job-card .jc-fill.ind{
  width: 40%;
  animation: ind-slide 1.3s var(--ease) infinite;
}
@keyframes ind-slide{
  0%{ margin-left: -40%; }
  100%{ margin-left: 100%; }
}
.job-card .jc-chips{ display:flex; gap:5px; flex-wrap:wrap; margin-bottom: 4px; }
.job-card .jc-chip{ font-family: var(--mono); font-size: 9.5px; font-weight:600; border-radius:100px; padding: 2px 7px; background: var(--bg-soft); color: var(--ink-2); }
.job-card .jc-chip.ok{ background: rgba(14,159,110,.1); color: var(--green); }
.job-card .jc-chip.bad{ background: rgba(224,82,77,.08); color: var(--red); }
.job-card .jc-fails{ max-height: 74px; overflow-y:auto; font-size: 10px; color: var(--red); line-height: 1.45; }
.spinner{
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid rgba(232,68,46,.2); border-top-color: var(--cobalt);
  animation: spin .8s linear infinite;
  flex-shrink: 0;
}
@keyframes spin{ to{ transform: rotate(360deg); } }

/* floating bulk bar */
.bulk-bar{
  position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%);
  z-index: 260;
  display:flex; gap: 6px; align-items:center; flex-wrap:wrap; justify-content:center;
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(20px) saturate(1.6);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 7px 11px;
  box-shadow: var(--shadow-lg);
  animation: bulk-in .3s var(--ease);
  max-width: calc(100vw - 24px);
}
@keyframes bulk-in{ from{ opacity:0; transform: translate(-50%, 12px);} to{ opacity:1; transform: translate(-50%, 0);} }
.bulk-bar .bb-count{
  font-family: var(--mono); font-size: 11px; font-weight: 600; color:#fff;
  background: var(--ink); border-radius: 100px; padding: 4px 10px;
}

/* ───────── image viewer ───────── */
.viewer{
  position:fixed; inset:0; z-index: 400;
  background: rgba(11,15,28,.9);
  backdrop-filter: blur(12px);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  animation: veil-in .22s var(--ease);
}
.viewer img.v-main{
  max-width: min(92vw, 1000px); max-height: 76vh;
  border-radius: 12px;
  box-shadow: 0 32px 80px -20px rgba(0,0,0,.6);
}
.viewer .v-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18);
  color:#fff; font-size: 18px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition: background .2s;
}
.viewer .v-nav:hover{ background: rgba(255,255,255,.22); }
.viewer .v-prev{ left: 20px; } .viewer .v-next{ right: 20px; }
.viewer .v-x{
  position:absolute; top: 16px; right: 18px;
  width: 32px; height: 32px; border-radius:50%;
  background: rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18);
  color:#fff; font-size: 13px; cursor:pointer;
}
.viewer .v-bar{
  display:flex; gap: 6px; align-items:center; flex-wrap:wrap; justify-content:center;
  margin-top: 14px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 100px;
  padding: 6px 10px;
  max-width: 92vw;
}
.viewer .v-bar .btn-ghost{
  background: rgba(255,255,255,.1); color:#fff; border-color: rgba(255,255,255,.2);
}
.viewer .v-bar .btn-ghost:hover{ background: rgba(255,255,255,.22); box-shadow:none; }
.viewer .v-meta{ color: rgba(255,255,255,.6); font-size: 10.5px; font-family: var(--mono); padding: 0 6px; }
.viewer .v-ref{
  position:absolute; left: 18px; bottom: 18px;
  width: 72px; border-radius: 9px; cursor: pointer;
  border: 2px solid rgba(255,255,255,.3);
  transition: width .3s var(--ease);
}
.viewer .v-ref.big{ width: 34vw; }
.viewer .v-reflabel{
  position:absolute; left: 20px; bottom: 20px;
  font-size: 8px; font-weight: 800; letter-spacing:.1em; color:#fff;
  background: rgba(11,15,28,.75); padding: 2px 6px; border-radius: 4px;
  pointer-events:none;
}
.viewer .v-copy{
  position:absolute; right: 0; top: 0; bottom: 0;
  width: min(380px, 90vw);
  background: var(--card);
  padding: 20px;
  overflow-y: auto;
  box-shadow: -16px 0 48px rgba(0,0,0,.3);
}

/* ───────── research dossier ───────── */
.research-steps{ display:flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.rstep{
  display:flex; align-items:center; gap: 6px;
  font-size: 11px; font-weight: 700;
  border-radius: 100px; padding: 5px 11px;
  border: 1px solid var(--line); background:#fff; color: var(--muted);
  transition: all .2s;
  cursor: pointer;
}
.rstep .r-dot{ width: 6px; height: 6px; border-radius: 50%; background: var(--line); }
.rstep.done{ color: var(--ink); border-color: rgba(14,159,110,.4); }
.rstep.done .r-dot{ background: var(--green); }
.rstep.running{ color: var(--cobalt); border-color: rgba(232,68,46,.4); }
.rstep.running .r-dot{ background: var(--cobalt); animation: pulse 1.2s ease-in-out infinite; }
.rstep.on{ background: var(--ink); color: #fff; border-color: var(--ink); }
.dossier-wrap{
  columns: 2 380px;
  column-gap: 12px;
}
@media (max-width: 900px){ .dossier-wrap{ columns: 1; } }
.dossier-card{
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px; margin-bottom: 12px;
  break-inside: avoid;
}
.dossier-card h4{
  font-family: var(--display); font-size: 12.5px; font-weight: 700; letter-spacing:-.01em;
  margin-bottom: 9px;
  display:flex; align-items:center; gap: 7px;
}
.dossier-card h4 .n{ font-family: var(--mono); font-size: 9.5px; color: var(--faint); font-weight: 500; }
.dh-ic{
  width: 22px; height: 22px; border-radius: 7px; flex-shrink: 0;
  background: linear-gradient(135deg, rgba(232,68,46,.12), rgba(245,146,11,.14));
  color: #D3641B;
  display: inline-flex; align-items: center; justify-content: center;
}
.dh-ic-sm{ color: #D3641B; margin-right: 4px; vertical-align: -1px; display: inline-flex; }
.dh-act{ margin-left: auto; display: inline-flex; gap: 3px; align-items: center; }
.dh-copy{ width: 22px; height: 22px; opacity: 0; transition: opacity .15s; }
.dossier-card:hover .dh-copy{ opacity: 1; }
.d-num{
  font-family: var(--mono); font-size: 9px; font-weight: 600; color: var(--faint);
  min-width: 16px; flex-shrink: 0; padding-top: 1px;
}
.d-obj{
  background: var(--bg-soft); border-radius: 10px; padding: 9px 12px;
  cursor: pointer; transition: background .2s;
}
.d-obj:hover{ background: #F3ECE2; }
.do-title{ font-weight: 700; font-size: 12.5px; margin-bottom: 3px; }
.do-row{ display: flex; gap: 8px; font-size: 11.5px; line-height: 1.45; margin-top: 2px; }
.do-k{
  flex-shrink: 0; min-width: 74px; max-width: 110px;
  font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--faint); padding-top: 2px;
}
.do-v{ color: var(--ink-2); }
.d-list{ display:flex; flex-direction:column; gap: 5px; }
.d-item{
  font-size: 12px; color: var(--ink-2); line-height: 1.45;
  padding: 6px 10px;
  background: var(--bg-soft); border-radius: 8px;
  position: relative;
  cursor: pointer;
  transition: background .2s;
  display: flex; gap: 6px; align-items: flex-start;
}
.d-item:hover{ background: #F3ECE2; }
.d-item.copied{ background: rgba(14,159,110,.12); }
.d-cols{ display:grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px; }
.d-kv{ display:flex; flex-direction:column; gap:1px; margin-bottom: 9px; }
.d-kv b{ font-size: 10px; text-transform: uppercase; letter-spacing:.04em; color: var(--faint); }
.d-kv span{ font-size: 12px; color: var(--ink-2); white-space: pre-wrap; }
.d-text{ font-size: 12px; color: var(--ink-2); white-space: pre-wrap; line-height: 1.55; }

/* upload dropzone */
.dropzone{
  border: 1.5px dashed var(--line);
  border-radius: 12px;
  padding: 18px 14px;
  text-align: center;
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
  transition: all .2s;
  background: rgba(255,255,255,.55);
}
.dropzone:hover, .dropzone.over{
  border-color: var(--cobalt);
  background: rgba(232,68,46,.04);
  color: var(--cobalt);
}
.dropzone b{ font-weight: 700; }
.dz-files{ display:flex; gap: 6px; flex-wrap:wrap; margin-top: 8px; }
.dz-file{
  display:flex; align-items:center; gap: 6px;
  font-size: 11px; font-weight: 600;
  background: #fff; border: 1px solid var(--line);
  border-radius: 100px; padding: 3px 6px 3px 9px;
}
.dz-file img{ width: 20px; height: 20px; border-radius: 5px; object-fit:cover; }
.dz-file .x{ cursor:pointer; color: var(--faint); font-size: 11px; padding: 0 4px; }
.dz-file .x:hover{ color: var(--red); }

/* asset thumbs */
.asset-grid{ display:flex; gap: 9px; flex-wrap:wrap; }
.asset-thumb{ position:relative; width: 74px; }
.asset-thumb img{
  width: 74px; height: 74px; object-fit: cover; border-radius: 11px;
  border: 1px solid var(--line);
  display:block;
}
.asset-thumb .at-role{
  position:absolute; bottom: 4px; left: 4px;
  font-size: 8px; font-weight: 800; letter-spacing:.04em; text-transform:uppercase;
  background: rgba(255,255,255,.92); color: var(--ink-2);
  border-radius: 100px; padding: 1px 6px; cursor:pointer;
  box-shadow: var(--shadow-sm);
  border:none;
}
.asset-thumb .at-role.avatar{ color: var(--violet); }
.asset-thumb .at-x{
  position:absolute; top: -5px; right: -5px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; border: 1px solid var(--line);
  color: var(--muted); font-size: 9px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow: var(--shadow-sm);
  opacity:0; transition: opacity .18s;
}
.asset-thumb:hover .at-x{ opacity:1; }
.asset-thumb .at-x:hover{ color: var(--red); }
.asset-add{
  width: 74px; height: 74px; border-radius: 11px;
  border: 1.5px dashed var(--line); background: none;
  color: var(--faint); font-size: 17px; cursor: pointer;
  transition: all .2s;
}
.asset-add:hover{ border-color: var(--cobalt); color: var(--cobalt); }

/* dark stat band */
.stat-band{
  background: var(--ink);
  color: #fff;
  border-radius: 16px;
  position: relative; overflow: hidden;
  padding: 14px 20px;
  display: flex; gap: 26px; flex-wrap: wrap;
}
.stat-band::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(60% 90% at 15% 0%, rgba(255,107,61,.35), transparent 60%),
    radial-gradient(50% 80% at 90% 100%, rgba(245,179,0,.25), transparent 60%);
}
.stat-band > *{ position: relative; }
.stat-band .sb-item .num{
  font-family: var(--display); font-size: 19px; font-weight: 700; letter-spacing:-.01em;
  font-variant-numeric: tabular-nums;
}
.stat-band .sb-item .lbl{ font-size: 9.5px; color: rgba(255,255,255,.55); font-weight: 500; text-transform: uppercase; letter-spacing:.04em; }

/* ───────── dashboard: stat tiles, chart cards, hbars, tooltip ───────── */
.dash{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 4px 0 26px;
}
@media (max-width: 980px){ .dash{ grid-template-columns: repeat(2, 1fr); } }
.dash .span2{ grid-column: span 2; }
@media (max-width: 980px){ .dash .span2{ grid-column: span 2; } }
.stat-tile{
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 13px 16px;
  display:flex; flex-direction:column; gap: 2px;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.stat-tile:hover{ transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.st-label{ font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--faint); }
.st-row{ display:flex; align-items:flex-end; justify-content:space-between; gap: 10px; }
.st-value{
  font-family: var(--display); font-size: 26px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1;
}
.st-spark{ flex-shrink: 0; margin-bottom: 3px; }
.st-sub{ font-size: 11px; color: var(--muted); }
.chart-card{
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 13px 16px 10px;
  display:flex; flex-direction:column;
}
.chart-card .cc-head{ display:flex; align-items:baseline; justify-content:space-between; gap: 8px; margin-bottom: 8px; }
.chart-card .cc-title{ font-size: 10.5px; font-weight: 700; letter-spacing:.04em; text-transform: uppercase; color: var(--faint); }
.chart-card .cc-meta{ font-family: var(--mono); font-size: 10px; color: var(--faint); }
.chart-card .cc-body{ flex: 1; display:flex; flex-direction:column; justify-content:flex-end; }

.hbars{ display:flex; flex-direction:column; gap: 7px; }
.hbar-row{ display:flex; align-items:center; gap: 8px; cursor: default; }
.hb-label{
  width: 74px; flex-shrink: 0; font-size: 11px; font-weight: 600; color: var(--ink-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right;
}
.hb-track{ flex: 1; height: 10px; border-radius: 0 4px 4px 0; background: transparent; }
.hb-fill{ height: 100%; border-radius: 0 4px 4px 0; background: #F5920B; min-width: 2px; transition: width .5s var(--ease); }
.hb-val{ font-size: 10.5px; color: var(--ink-2); font-weight: 600; min-width: 22px; }

.tipbox{
  position: fixed; z-index: 600; display: none; pointer-events: none;
  background: var(--ink); color: #fff;
  border-radius: 9px; padding: 6px 10px;
  font-size: 11.5px; font-weight: 600; line-height: 1.35;
  box-shadow: 0 10px 26px -8px rgba(11,15,28,.5);
  text-align: center;
}
.tipbox span{ display:block; font-weight: 500; font-size: 10px; color: rgba(255,255,255,.6); }

.recent-strip{ display:flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.recent-strip img{
  height: 74px; width: auto; border-radius: 9px; border: 1px solid var(--line);
  cursor: pointer; flex-shrink: 0; background: var(--bg-soft);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.recent-strip img:hover{ transform: translateY(-2px); box-shadow: var(--shadow-md); }

/* ───────── fetch-dialog sections ───────── */
.hk-sec{
  border: 1px solid var(--line); border-radius: 13px;
  padding: 12px 14px 13px; margin-bottom: 10px;
  background: rgba(255,255,255,.6);
}
.hk-sec-h{
  display: flex; align-items: center; gap: 7px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-2); margin-bottom: 10px;
}
.hk-sec-h .hs-ic{
  width: 20px; height: 20px; border-radius: 6px; flex-shrink: 0;
  background: linear-gradient(135deg, rgba(232,68,46,.12), rgba(245,146,11,.14));
  color: #D3641B; display: inline-flex; align-items: center; justify-content: center;
}
.hk-sec-h .hs-n{ font-family: var(--mono); font-size: 9px; color: var(--cobalt); font-weight: 600; text-transform: none; letter-spacing: 0; }
.hk-chips-scroll{ max-height: 100px; overflow-y: auto; padding: 2px; }

/* dropdown menu */
.menu{
  position: fixed; z-index: 350;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 11px; box-shadow: var(--shadow-lg);
  padding: 4px; min-width: 168px;
  animation: modal-in .18s var(--ease);
}
.menu button{
  display:flex; width: 100%; align-items:center; gap: 8px;
  background:none; border:none; cursor:pointer; text-align:left;
  font-size: 12px; font-weight: 600; color: var(--ink-2);
  padding: 7px 10px; border-radius: 8px;
  transition: background .13s;
}
.menu button:hover{ background: var(--bg-soft); color: var(--ink); }
.menu button.danger{ color: var(--red); }
.menu .menu-sep{ height: 1px; background: var(--line); margin: 4px 6px; }

/* empty states */
.empty{ text-align:center; padding: 44px 20px; color: var(--muted); }
.empty .e-ic{
  width: 46px; height: 46px; margin: 0 auto 12px;
  border-radius: 14px; background: var(--bg-soft);
  display:flex; align-items:center; justify-content:center; font-size: 19px;
}
.empty h3{ font-family: var(--display); font-size: 14.5px; color: var(--ink); margin-bottom: 4px; }
.empty p{ font-size: 12px; max-width: 46ch; margin: 0 auto 14px; }

/* settings key rows */
.key-row{ display:flex; gap: 8px; align-items:center; }
.key-row input{ flex: 1; }
.key-status{
  font-family: var(--mono); font-size: 10px; font-weight:600;
  padding: 3px 8px; border-radius: 100px; white-space:nowrap;
}
.key-status.ok{ background: rgba(14,159,110,.1); color: var(--green); }
.key-status.none{ background: var(--bg-soft); color: var(--faint); }

/* eraser */
.erase-wrap{ position: relative; display:flex; justify-content:center; }
.erase-wrap canvas{ max-width: 100%; max-height: 58vh; border-radius: 10px; cursor: crosshair; touch-action: none; }

/* utility */
.row{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.spread{ justify-content: space-between; }
.grow{ flex:1; }
.mt-8{ margin-top:8px; } .mt-16{ margin-top:16px; } .mt-24{ margin-top:24px; } .mb-16{ margin-bottom:16px; }
.hidden{ display:none !important; }
.clickable{ cursor:pointer; }

@media (max-width: 720px){
  .wrap{ padding: 0 12px; }
  #app{ padding-top: 62px; }
  .f-grid{ grid-template-columns: 1fr; }
  .crumb{ max-width: 100px; }
}
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .stagger > *{ opacity:1; }
}