/* ============================================================
   FAL STUDIO — Mooke editorial monochrome
   Wit / zwart / grijs · Inter (system fallback, geen externe load)
   ============================================================ */

:root{
  --bg:#ffffff;
  --ink:#111111;
  --ink-soft:#6b6b6b;
  --line:#e6e6e6;
  --line-strong:#d2d2d2;
  --hover:#f6f6f6;
  --black:#000000;
  --radius:0px;
  --pad:24px;
  --font:'Inter','Inter var',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--ink);
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.85em;background:var(--hover);padding:1px 5px;border:1px solid var(--line)}
u{text-underline-offset:2px}

/* ---- labels (ALL CAPS, letter-spacing) ---- */
.field-label,.block-head,.cat-tab,.feed-head,.dz-text,.field-row label,
.btn-primary,.btn-generate,.logout{
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:600;
  font-size:11px;
}

/* ============================ TOPBAR ============================ */
.topbar{
  display:flex;align-items:center;gap:24px;
  padding:0 var(--pad);height:60px;
  border-bottom:1px solid var(--line);
}
.brand{font-weight:800;font-size:15px;letter-spacing:.14em}
.brand span{color:var(--ink-soft);font-weight:500}
.cat-tabs{display:flex;gap:4px;margin-left:8px}
.cat-tab{
  background:none;border:1px solid var(--line);
  padding:8px 16px;cursor:pointer;color:var(--ink-soft);
}
.cat-tab.is-active{background:var(--black);border-color:var(--black);color:#fff}
.logout{
  margin-left:auto;text-decoration:none;color:var(--ink-soft);
  border:1px solid var(--line);padding:8px 14px;
}
.logout:hover{color:var(--ink);border-color:var(--line-strong)}

/* ============================ LAYOUT ============================ */
.layout{
  display:grid;
  grid-template-columns:360px 1fr;
  min-height:calc(100vh - 60px);
}
.panel{
  border-right:1px solid var(--line);
  padding:var(--pad);
  display:flex;flex-direction:column;gap:22px;
}

/* ---- blocks met vierkant sectienummer ---- */
.block-head{
  display:flex;align-items:center;gap:10px;
  margin-bottom:12px;color:var(--ink);
}
.num{
  display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;background:var(--black);color:#fff;
  font-size:11px;font-weight:700;letter-spacing:0;
}
.block-sub{margin-left:auto;color:var(--ink-soft);letter-spacing:.04em}

/* ---- inputs ---- */
.select,.textarea,.field input,.login-form input{
  width:100%;font-family:var(--font);font-size:13px;color:var(--ink);
  background:#fff;border:1px solid var(--line-strong);
  padding:10px 12px;outline:none;border-radius:var(--radius);
}
.select:focus,.textarea:focus,.field input:focus,.login-form input:focus{
  border-color:var(--black);
}
.textarea{resize:vertical;min-height:120px;line-height:1.55}
.select-wrap{position:relative}
.select{appearance:none;cursor:pointer;padding-right:34px}
.select-wrap::after{
  content:"";position:absolute;right:14px;top:50%;
  width:7px;height:7px;border-right:1.5px solid var(--ink);
  border-bottom:1.5px solid var(--ink);transform:translateY(-65%) rotate(45deg);
  pointer-events:none;
}
.hint{margin-top:8px;color:var(--ink-soft);font-size:12px}

/* ---- model zoeken + lijst ---- */
.search{
  width:100%;font-family:var(--font);font-size:13px;color:var(--ink);
  background:#fff;border:1px solid var(--line-strong);padding:10px 12px;outline:none;margin-bottom:8px;
}
.search:focus{border-color:var(--black)}
.model-list{border:1px solid var(--line);max-height:240px;overflow:auto}
.model-loading{padding:14px;color:var(--ink-soft);font-size:12px}
.model-item{
  display:flex;align-items:flex-start;gap:8px;
  border-bottom:1px solid var(--line);padding:9px 12px;color:var(--ink);
}
.model-item:last-child{border-bottom:none}
.model-item:hover{background:var(--hover)}
.model-item.is-active{background:var(--black)}
.model-item.is-active .mi-name,.model-item.is-active .mi-id{color:#fff}
.star{
  background:none;border:none;cursor:pointer;padding:0;flex:none;
  font-size:14px;line-height:1.3;color:var(--line-strong);
}
.star.on{color:var(--ink)}
.star:hover{color:var(--ink)}
.model-item.is-active .star,.model-item.is-active .star.on{color:#fff}
.mi-body{cursor:pointer;flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.mi-name{font-weight:600;font-size:13px}
.mi-id{font-size:10px;color:var(--ink-soft);font-family:ui-monospace,Menlo,monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---- vrije invoer (number/text) ---- */
.field-input{
  width:150px;font-family:var(--font);font-size:12px;color:var(--ink);
  background:#fff;border:1px solid var(--line-strong);padding:8px 10px;outline:none;
}
.field-input:focus{border-color:var(--black)}

/* ---- dropzone ---- */
.dropzone{
  border:1px dashed var(--line-strong);
  padding:22px 16px;text-align:center;cursor:pointer;
  color:var(--ink-soft);transition:.12s;
}
.dropzone:hover,.dropzone:focus{border-color:var(--ink);color:var(--ink);background:var(--hover)}
.dropzone.is-drag{border-color:var(--black);background:var(--hover);color:var(--ink)}
.dz-text{pointer-events:none}
.thumbs{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.thumb{
  position:relative;width:54px;height:54px;border:1px solid var(--line-strong);
  background-size:cover;background-position:center;
}
.thumb .tag{
  position:absolute;left:0;bottom:0;background:var(--black);color:#fff;
  font-size:9px;font-weight:700;padding:1px 4px;letter-spacing:.04em;
}
.thumb .rm{
  position:absolute;top:-7px;right:-7px;width:18px;height:18px;
  background:#fff;border:1px solid var(--line-strong);border-radius:50%;
  font-size:12px;line-height:1;cursor:pointer;display:flex;
  align-items:center;justify-content:center;color:var(--ink);
}
.thumb .rm:hover{background:var(--black);color:#fff;border-color:var(--black)}

/* ---- fields ---- */
.fields{display:flex;flex-direction:column;gap:12px}
.field-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.field-row label{color:var(--ink-soft)}
.field-row .select-wrap{width:150px;flex:none}
.field-row .select{padding:8px 30px 8px 10px;font-size:12px}

/* pill toggle */
.toggle{
  width:46px;height:24px;border:1px solid var(--line-strong);
  border-radius:999px;position:relative;cursor:pointer;background:#fff;flex:none;transition:.12s;
}
.toggle::after{
  content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;
  border-radius:50%;background:var(--ink-soft);transition:.12s;
}
.toggle.on{background:var(--black);border-color:var(--black)}
.toggle.on::after{left:24px;background:#fff}

/* ---- buttons ---- */
.btn-generate{
  margin-top:4px;width:100%;padding:15px;cursor:pointer;
  background:var(--black);color:#fff;border:1px solid var(--black);
  border-radius:var(--radius);transition:.12s;
}
.btn-generate:hover{background:#1c1c1c}
.btn-generate:disabled{opacity:.5;cursor:default}
.btn-primary{
  width:100%;padding:13px;background:var(--black);color:#fff;
  border:1px solid var(--black);cursor:pointer;
}
.btn-primary:hover{background:#1c1c1c}
.gen-error,.login-error{
  margin-top:10px;border:1px solid #d8b4b4;background:#fbf3f3;color:#8a3a3a;
  padding:9px 12px;font-size:12px;
}

/* ---- kostenraming ---- */
.cost-bar{
  border:1px solid var(--line);padding:12px 14px;margin-top:2px;background:#fafafa;
}
.cost-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.cost-label{color:var(--ink-soft);text-transform:uppercase;letter-spacing:.08em;font-size:11px;font-weight:600}
.cost-value{font-weight:700;font-size:15px;color:var(--ink);font-variant-numeric:tabular-nums}
.cost-sub{margin-top:5px;color:var(--ink-soft);font-size:11px;letter-spacing:.01em}
.pill.cost{border-color:var(--line-strong);color:var(--ink);font-variant-numeric:tabular-nums}

/* ============================ FEED ============================ */
.feed{padding:var(--pad);overflow:auto}
.feed-head{
  display:flex;align-items:center;gap:10px;margin-bottom:18px;
  padding-bottom:12px;border-bottom:1px solid var(--line);color:var(--ink);
}
.feed-refresh{
  margin-left:auto;border:1px solid var(--line);background:#fff;
  width:30px;height:30px;cursor:pointer;font-size:14px;color:var(--ink);
}
.feed-refresh:hover{border-color:var(--line-strong);background:var(--hover)}
.feed-list{display:flex;flex-direction:column;gap:18px;max-width:760px}
.feed-empty{color:var(--ink-soft);font-size:13px}

.card{border:1px solid var(--line);background:#fff}
.card-media{background:#fafafa;border-bottom:1px solid var(--line);display:grid;gap:1px}
.card-media video,.card-media img{width:100%;display:block;background:#000}
.card-media.cols-2{grid-template-columns:1fr 1fr}
.card-media.cols-3{grid-template-columns:1fr 1fr 1fr}
.card-media.cols-4{grid-template-columns:1fr 1fr}
.card-media.audio{padding:18px 16px;background:#fff}
.card-media.audio audio{width:100%;display:block}
.card-media .file-link{
  display:inline-block;padding:14px 16px;color:var(--ink);text-decoration:underline;font-size:13px;
}
.card-body{padding:14px 16px;display:flex;flex-direction:column;gap:8px}
.card-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pill{
  border:1px solid var(--line-strong);padding:3px 8px;font-size:10px;
  text-transform:uppercase;letter-spacing:.06em;font-weight:600;color:var(--ink-soft);
}
.pill.live{border-color:var(--black);color:#fff;background:var(--black)}
.pill.fail{border-color:#d8b4b4;color:#8a3a3a;background:#fbf3f3}
.card-prompt{font-size:13px;color:var(--ink);line-height:1.5}
.card-actions{display:flex;gap:8px;margin-top:2px}
.card-actions a,.card-actions button{
  border:1px solid var(--line-strong);background:#fff;color:var(--ink);
  text-decoration:none;padding:6px 12px;font-size:11px;cursor:pointer;
  text-transform:uppercase;letter-spacing:.06em;font-weight:600;
}
.card-actions a:hover,.card-actions button:hover{background:var(--black);color:#fff;border-color:var(--black)}

/* working state */
.card.working .card-media{
  min-height:120px;display:flex;align-items:center;justify-content:center;
  color:var(--ink-soft);font-size:11px;text-transform:uppercase;letter-spacing:.1em;
}
.spinner{
  width:16px;height:16px;border:2px solid var(--line-strong);border-top-color:var(--black);
  border-radius:50%;animation:spin .7s linear infinite;margin-right:8px;display:inline-block;vertical-align:middle;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ============================ LOGIN ============================ */
.login-body{display:flex;align-items:center;justify-content:center;min-height:100vh;background:#fafafa}
.login-card{width:320px;background:#fff;border:1px solid var(--line);padding:32px}
.login-mark{font-weight:800;font-size:18px;letter-spacing:.14em;text-align:center;margin-bottom:24px}
.login-mark span{color:var(--ink-soft);font-weight:500}
.login-form{display:flex;flex-direction:column;gap:16px}
.field{display:flex;flex-direction:column;gap:6px}
.field-label{color:var(--ink-soft)}

/* ============================ RESPONSIVE ============================ */
@media(max-width:880px){
  .layout{grid-template-columns:1fr}
  .panel{border-right:none;border-bottom:1px solid var(--line)}
}