/* Cinema OS Studio — LuarMedia house style: dark ground, Archivo for display,
   square instead of dot, one accent, hairlines instead of boxes. */

:root {
  --ground: #0A0A0A;
  --surface: #141414;
  --raised: #1B1B1B;
  --text: #F1F1F1;
  --muted: rgba(241, 241, 241, .56);
  --faint: rgba(241, 241, 241, .32);
  --line: rgba(241, 241, 241, .13);
  --accent: #E8532E;
  --ok: #7FD48A;
  --warn: #E8B44A;
  --bad: #F06B5B;
  --display: "Archivo LM Expanded", "Archivo Black", "Helvetica Neue", sans-serif;
  --body: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --side: 268px;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--ground); color: var(--text); }
body { font: 14px/1.5 var(--body); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }
::selection { background: var(--accent); color: var(--ground); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.shell { display: grid; grid-template-columns: var(--side) 1fr; height: 100vh; }

/* ---------------------------------------------------------------- sidebar */
.side { border-right: 1px solid var(--line); display: flex; flex-direction: column; overflow-y: auto; background: var(--ground); }
.mark { display: block; padding: 22px 20px 18px; text-decoration: none; font: 800 15px/1 var(--display); letter-spacing: -.02em; text-transform: uppercase; }
.mark i { display: inline-block; width: .32em; height: .32em; background: var(--accent); margin-left: .12em; }
.mark small { display: block; margin-top: 6px; font: 500 11px/1 var(--body); letter-spacing: .14em; color: var(--faint); }
.group { padding: 10px 0 6px; border-top: 1px solid var(--line); }
.group h3 { margin: 0; padding: 6px 20px 6px; font: 700 10px/1 var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--faint); display: flex; justify-content: space-between; align-items: center; }
.group h3 button { background: none; border: 0; color: var(--muted); cursor: pointer; font: 600 16px/1 var(--body); padding: 0 2px; }
.group h3 button:hover { color: var(--accent); }
.nav { display: flex; align-items: center; gap: 10px; padding: 6px 20px; text-decoration: none; color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-left: 2px solid transparent; }
.nav:hover { color: var(--text); background: var(--surface); }
.nav[aria-current="page"] { color: var(--text); border-left-color: var(--accent); background: var(--surface); }
.nav.sub { padding-left: 36px; font-size: 12.5px; }
.nav .meta { margin-left: auto; font: 11px var(--mono); color: var(--faint); }
.nav.disabled { pointer-events: none; color: var(--faint); }
.side-form { padding: 4px 20px 8px; }
.side-form input { padding: 7px 10px; font-size: 13px; }
.empty-nav { padding: 4px 20px 8px; color: var(--faint); font-size: 12px; }
.side-foot { margin-top: auto; border-top: 1px solid var(--line); padding: 14px 20px; font-size: 12px; color: var(--muted); }
.side-foot button { background: none; border: 0; padding: 0; cursor: pointer; text-align: left; width: 100%; }

/* status squares, never dots */
.sq { display: inline-block; width: 8px; height: 8px; flex: none; background: var(--faint); }
.sq.ok { background: var(--ok); } .sq.warn { background: var(--warn); } .sq.bad { background: var(--bad); } .sq.run { background: var(--accent); animation: pulse 1.2s var(--ease) infinite; }
@keyframes pulse { 50% { opacity: .35; } }

/* ---------------------------------------------------------------- main */
.main { overflow-y: auto; outline: none; }
.page { max-width: 1180px; padding: 34px clamp(20px, 4vw, 56px) 80px; }
.crumb { font-size: 12px; color: var(--faint); letter-spacing: .04em; }
.crumb a { text-decoration: none; color: var(--muted); }
.crumb a:hover { color: var(--text); }
h1 { margin: 8px 0 0; font: 800 clamp(30px, 4.2vw, 52px)/.92 var(--display); letter-spacing: -.04em; text-transform: uppercase; text-wrap: balance; }
h1 i { display: inline-block; width: .2em; height: .2em; background: var(--accent); margin-left: .06em; }
h2 { margin: 0 0 14px; font: 700 12px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.lede { color: var(--muted); max-width: 64ch; margin: 12px 0 0; }
.head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.fav { background: none; border: 1px solid var(--line); width: 34px; height: 34px; cursor: pointer; display: grid; place-items: center; }
.fav .sq { width: 10px; height: 10px; background: transparent; outline: 1.5px solid var(--muted); }
.fav[aria-pressed="true"] .sq { background: var(--accent); outline-color: var(--accent); }

/* steps */
.steps { display: flex; gap: 0; margin: 30px 0 28px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.steps a { text-decoration: none; padding: 12px 18px 13px; color: var(--muted); font-size: 13px; display: flex; gap: 10px; align-items: baseline; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.steps a b { font: 700 11px var(--mono); color: var(--faint); }
.steps a:hover { color: var(--text); }
.steps a[aria-current="page"] { color: var(--text); border-bottom-color: var(--accent); }
.steps a[aria-current="page"] b { color: var(--accent); }
.steps a .sq { align-self: center; }

/* surfaces */
.panel { background: var(--surface); border: 1px solid var(--line); padding: 22px; }
.grid2 { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 28px; align-items: start; }
.stack > * + * { margin-top: 18px; }
.rule { border: 0; border-top: 1px solid var(--line); margin: 26px 0; }

/* forms */
label.f { display: block; }
label.f > span, .f-label { display: block; font: 700 10px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--faint); margin-bottom: 8px; }
input[type=text], input[type=number], select, textarea { width: 100%; background: var(--ground); border: 1px solid var(--line); padding: 10px 12px; border-radius: 0; transition: border-color .28s var(--ease); }
input:hover, select:hover, textarea:hover { border-color: rgba(241,241,241,.28); }
input:focus, select:focus, textarea:focus { border-color: var(--accent); outline: none; }
textarea { min-height: 84px; resize: vertical; }
.row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; }
.seg { display: inline-flex; border: 1px solid var(--line); }
.seg button { background: none; border: 0; padding: 9px 16px; cursor: pointer; color: var(--muted); font: 600 12px var(--mono); }
.seg button + button { border-left: 1px solid var(--line); }
.seg button[aria-pressed="true"] { background: var(--text); color: var(--ground); }
.toggle { display: flex; align-items: center; gap: 12px; cursor: pointer; user-select: none; }
.toggle input { appearance: none; width: 38px; height: 20px; border: 1px solid var(--line); background: var(--ground); position: relative; cursor: pointer; margin: 0; }
.toggle input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; background: var(--muted); transition: transform .28s var(--ease), background .28s var(--ease); }
.toggle input:checked::after { transform: translateX(18px); background: var(--accent); }
.colors { display: flex; gap: 14px; flex-wrap: wrap; }
.colors label { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }
input[type=color] { width: 34px; height: 34px; border: 1px solid var(--line); background: none; padding: 2px; cursor: pointer; }

.btn { display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--line); background: none; padding: 10px 16px; cursor: pointer; font-weight: 600; font-size: 13px; text-decoration: none; transition: border-color .28s var(--ease), background .28s var(--ease); }
.btn:hover { border-color: var(--text); }
.btn.primary { background: var(--text); color: var(--ground); border-color: var(--text); }
.btn.primary:hover { background: var(--accent); border-color: var(--accent); color: var(--ground); }
.btn.danger:hover { border-color: var(--bad); color: var(--bad); }
.btn[disabled] { opacity: .35; pointer-events: none; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.hint { color: var(--faint); font-size: 12px; }
.path-input { max-width: 520px; }
.interp { margin-bottom: 28px; }
.logo-preview { display: block; max-width: 260px; padding: 14px; border: 1px solid var(--line); margin-top: 8px; }
.logo-preview.light { background: #14100C; }
.logo-preview.dark { background: #E8E2D4; }
.sketch .t img { display: block; margin: 0 auto; height: auto; }
.payload { max-height: 260px; overflow: auto; white-space: pre-wrap; font: 12px/1.5 var(--mono); color: var(--muted); background: var(--ground); border: 1px solid var(--line); padding: 12px; margin: 10px 0 0; }
details summary { cursor: pointer; color: var(--muted); font-size: 13px; }
.facts dd.unknown { color: var(--faint); font-weight: 400; }
.err { color: var(--bad); font-size: 13px; }

/* format sketch */
.sketch { background: var(--raised); border: 1px solid var(--line); display: grid; place-items: center; position: relative; overflow: hidden; margin: 0 auto; }
.sketch .safe { position: absolute; inset: 10%; border: 1px dashed rgba(241,241,241,.16); }
.sketch .lock { text-align: center; line-height: .9; }
.sketch .t { font-weight: 900; letter-spacing: -.04em; white-space: nowrap; }
.sketch .t i { display: inline-block; width: .2em; height: .2em; margin-left: .08em; }
.sketch .s { font-weight: 800; letter-spacing: .6em; margin-top: .9em; white-space: nowrap; }
.sketch figcaption { position: absolute; left: 10px; bottom: 8px; font: 10px var(--mono); color: var(--faint); }

/* tables & facts */
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { text-align: left; font: 700 10px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); padding: 0 12px 10px 0; border-bottom: 1px solid var(--line); }
td { padding: 9px 12px 9px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
td code, .mono { font: 12px var(--mono); color: var(--muted); }
.facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.facts div { background: var(--surface); padding: 14px 16px; }
.facts dt { font: 700 10px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.facts dd { margin: 8px 0 0; font: 600 15px var(--mono); }
.pill { display: inline-flex; align-items: center; gap: 7px; font: 600 11px var(--mono); letter-spacing: .04em; padding: 3px 8px; border: 1px solid var(--line); white-space: nowrap; }

/* media */
.assets { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.asset { background: var(--surface); border: 1px solid var(--line); display: flex; flex-direction: column; }
.asset .thumb { aspect-ratio: 16/9; background: var(--raised) center/cover no-repeat; display: grid; place-items: center; color: var(--faint); font: 11px var(--mono); border: 0; cursor: pointer; width: 100%; padding: 0; }
.asset .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.asset .body { padding: 12px 14px 14px; display: grid; gap: 6px; font-size: 12px; }
.asset .name { font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asset select { padding: 6px 8px; font-size: 12px; }

/* preview */
.player { background: #000; border: 1px solid var(--line); width: 100%; display: block; max-height: 62vh; }
.versions { display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0; }
.versions button { background: none; border: 1px solid var(--line); padding: 8px 12px; cursor: pointer; font: 600 12px var(--mono); display: flex; gap: 8px; align-items: center; color: var(--muted); }
.versions button[aria-pressed="true"] { border-color: var(--text); color: var(--text); }
.stills { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.stills figure { margin: 0; }
.stills img, .sheet { width: 100%; display: block; border: 1px solid var(--line); }
.stills figcaption { font: 11px var(--mono); color: var(--faint); margin-top: 4px; }
.finding { border-left: 2px solid var(--warn); padding: 8px 0 8px 14px; }
.finding.major { border-color: var(--bad); }
.finding b { font: 600 12px var(--mono); }
.finding p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }

/* job progress */
.timeline { list-style: none; padding: 0; margin: 0; font-size: 13px; max-height: 360px; overflow-y: auto; border: 1px solid var(--line); }
.timeline li { display: grid; grid-template-columns: 70px 14px 1fr auto; gap: 10px; align-items: center; padding: 7px 14px; border-bottom: 1px solid var(--line); }
.timeline li:last-child { border-bottom: 0; }
.timeline time, .timeline .ms { font: 11px var(--mono); color: var(--faint); }
.progress { height: 2px; background: var(--line); margin: 18px 0; position: relative; overflow: hidden; }
.progress i { position: absolute; inset: 0 auto 0 0; background: var(--accent); transition: width .55s var(--ease); }

.toast { position: fixed; right: 20px; bottom: 20px; background: var(--text); color: var(--ground); padding: 12px 16px; font-weight: 600; font-size: 13px; transform: translateY(140%); transition: transform .55s var(--ease); max-width: 420px; }
.toast.on { transform: none; }
.toast.bad { background: var(--bad); }

.kbd { font: 11px var(--mono); border: 1px solid var(--line); padding: 1px 5px; color: var(--muted); }

@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .side { display: none; }
  .grid2 { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Ideen-Chat */
.chat-log { display: flex; flex-direction: column; gap: 10px; max-height: 380px; overflow-y: auto; padding-right: 4px; }
.msg { max-width: 82%; padding: 10px 13px; background: var(--raised); }
.msg p { margin: 0; white-space: pre-wrap; }
.msg.user { align-self: flex-end; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.msg.pending p { color: var(--muted); }
.msg .proposal { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 13px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.msg .proposal .btn { margin-left: auto; }