/* =========================================================================
   Prompt Studio — shared design system
   Identity: a production office for AI prompts — slates, contact sheets,
   log sheets, and tally lights borrowed from film/photo production, applied
   to the disciplined work of briefing a model. Shared by Builder, Templates
   and Users. Page-specific layout stays in each view's own <style> block.
   ========================================================================= */

@font-face{
  font-family:"PS Display";
  src:url("/assets/fonts/anton-400.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"PS Label";
  src:url("/assets/fonts/oswald-variable.woff2") format("woff2-variations"), url("/assets/fonts/oswald-variable.woff2") format("woff2");
  font-weight:500 700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"PS Body";
  src:url("/assets/fonts/plexsans-variable.woff2") format("woff2-variations"), url("/assets/fonts/plexsans-variable.woff2") format("woff2");
  font-weight:400 700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"PS Mono";
  src:url("/assets/fonts/plexmono-400.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"PS Mono";
  src:url("/assets/fonts/plexmono-500.woff2") format("woff2");
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"PS Mono";
  src:url("/assets/fonts/plexmono-600.woff2") format("woff2");
  font-weight:600; font-style:normal; font-display:swap;
}

:root{
  /* -- Contact Sheet (light) -- */
  --bg:#e7e6e0;
  --panel:#fbfaf7;
  --panel-2:#f1f0ea;
  --border:#d6d4c9;
  --border-strong:#b9b7ab;
  --text:#191a1d;
  --muted:#5f5e56;

  /* -- Signature duo — constant across themes, like real lamps -- */
  --accent:#d6273a;          /* tally red — primary actions */
  --accent-hover:#b81f30;
  --accent-text:#ffffff;
  --accent-ink:#b81f30;      /* red used as text/link */
  --cue:#2fa84f;             /* leader-cue green — decorative dot/border use */
  --success:#1b6130;         /* text-safe green */
  --warn:#8a5e12;            /* text-safe amber */
  --warn-dot:#e2a63b;

  --stage:#15161b;           /* constant ink-black — slate, output, footer stripe */
  --stage-text:#ece9df;

  --focus:#d6273a;
  --radius:5px;
  --radius-lg:10px;
  --shadow:0 1px 2px rgba(25,20,10,.07), 0 10px 28px rgba(25,20,10,.08);
  --stripe:repeating-linear-gradient(135deg,#15161b 0 10px,#232329 10px 20px);
}
:root[data-theme="dark"]{
  /* -- Soundstage (dark) -- */
  --bg:#131316;
  --panel:#1b1b21;
  --panel-2:#212128;
  --border:#302f38;
  --border-strong:#413f4c;
  --text:#ece9e2;
  --muted:#9c9aa6;

  --accent:#d6273a;
  --accent-hover:#c22736;
  --accent-text:#ffffff;
  --accent-ink:#ff6b75;
  --cue:#2fa84f;
  --success:#4ade80;
  --warn:#e2a63b;
  --warn-dot:#e2a63b;

  --stage:#0b0b0e;
  --stage-text:#ece9df;

  --focus:#ff6b75;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.45);
  --stripe:repeating-linear-gradient(135deg,#0b0b0e 0 10px,#1c1c22 10px 20px);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:"PS Body",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  line-height:1.5;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent-ink);}
code,.mono{font-family:"PS Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;}

::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:8px;}
::-webkit-scrollbar-track{background:transparent;}

:focus-visible{outline:2px solid var(--focus);outline-offset:2px;}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
}

/* ---------- Top stripe: the leader ---------- */
.ps-topstripe{height:5px;width:100%;background:var(--stripe);}

/* ---------- Slate header ---------- */
.ps-header{
  background:var(--stage);
  color:var(--stage-text);
  border-bottom:1px solid #000;
}
.ps-header__inner{
  max-width:1320px;margin:0 auto;padding:14px 24px;
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:12px;
}
.ps-brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;}
.ps-logo{
  width:38px;height:38px;flex:none;border-radius:4px;
  background:var(--accent);
  display:flex;align-items:center;justify-content:center;
  font-family:"PS Display";font-size:16px;letter-spacing:.02em;color:#fff;
  position:relative;
}
.ps-logo::after{
  content:"";position:absolute;right:-3px;bottom:-3px;width:8px;height:8px;
  border-radius:50%;background:var(--cue);box-shadow:0 0 0 2px var(--stage);
}
.ps-brand__text{display:flex;flex-direction:column;gap:1px;}
.ps-brand__title{
  font-family:"PS Label";font-weight:600;font-size:16px;letter-spacing:.02em;
  text-transform:uppercase;line-height:1.1;
}
.ps-brand__meta{
  font-family:"PS Mono";font-size:11px;color:#9c9aa6;letter-spacing:.03em;
}
.ps-brand__meta b{color:var(--stage-text);font-weight:600;}

.ps-header__actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.ps-nav{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.ps-nav a{
  color:#c8c6cf;text-decoration:none;font-family:"PS Label";font-weight:500;
  font-size:12.5px;text-transform:uppercase;letter-spacing:.05em;
  border-bottom:2px solid transparent;padding-bottom:2px;
}
.ps-nav a:hover,.ps-nav a.is-active{color:#fff;border-bottom-color:var(--accent);}
.ps-nav .sep{color:#4a4a55;}

.toggle-theme{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid #3a3a44;border-radius:999px;
  padding:5px 12px 5px 10px;background:#1e1e25;cursor:pointer;
  font-family:"PS Mono";font-size:11px;font-weight:600;letter-spacing:.03em;
  color:#c8c6cf;
}
.toggle-theme::before{
  content:"";width:7px;height:7px;border-radius:50%;background:var(--warn-dot);
  box-shadow:0 0 6px var(--warn-dot);
}

/* ---------- Panels ---------- */
.panel{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:18px;
  box-shadow:var(--shadow);
  margin-bottom:20px;
  position:relative;
}
.panel__head{display:flex;align-items:baseline;gap:9px;margin:0 0 4px;}
.panel__index{
  font-family:"PS Mono";font-size:11px;font-weight:600;color:var(--muted);
  border:1px solid var(--border-strong);border-radius:3px;padding:1px 5px;flex:none;
}
.panel h2{
  font-family:"PS Label";font-weight:600;text-transform:uppercase;letter-spacing:.03em;
  font-size:14.5px;margin:0;line-height:1.2;
}
.panel .panel-desc{font-size:12.5px;color:var(--muted);margin:0 0 14px;}

/* ---------- Forms ---------- */
label{display:block;font-size:12.5px;font-weight:600;margin-bottom:5px;color:var(--text);}
.field{margin-bottom:14px;}
.field .hint{font-size:11.5px;color:var(--muted);margin-top:4px;}
.field-label-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px;}
.field-label-row label{margin-bottom:0;display:flex;align-items:center;gap:7px;}
.field-index{
  font-family:"PS Mono";font-size:10.5px;font-weight:600;color:var(--accent-ink);
  border:1px solid currentColor;border-radius:3px;padding:0 4px;line-height:1.5;
}
.field-reset{
  background:transparent;border:none;color:var(--muted);
  font-size:11px;font-weight:600;padding:2px 4px;gap:3px;
}
.field-reset:hover{color:var(--accent);border-color:transparent;}
.hint-block{font-size:11.5px;color:var(--muted);margin-top:10px;}
.hint-block .hint-line{margin-top:4px;}
.hint-block .hint-line:first-child{margin-top:0;}

input[type="text"],input[type="email"],input[type="password"],
textarea,select{
  width:100%;
  background:var(--panel-2);
  border:1px solid var(--border);
  color:var(--text);
  border-radius:var(--radius);
  padding:9px 11px;
  font-size:13.5px;
  font-family:inherit;
  resize:vertical;
  transition:border-color .12s ease, box-shadow .12s ease;
}
textarea{min-height:64px;}
input:focus,textarea:focus,select:focus{
  outline:none;
  border-color:var(--focus);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--focus) 22%, transparent);
}

.row{display:flex;gap:10px;flex-wrap:wrap;}
.row > *{flex:1;min-width:160px;}

/* ---------- Buttons ---------- */
button{
  font-family:"PS Label";font-size:12.5px;font-weight:600;
  text-transform:uppercase;letter-spacing:.03em;
  border-radius:var(--radius);border:1px solid var(--border-strong);
  background:var(--panel-2);color:var(--text);
  padding:10px 15px;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;
  transition:background .12s ease, border-color .12s ease, transform .04s ease;
}
button:hover{border-color:var(--accent);}
button:active{transform:translateY(1px);}
button.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-text);}
button.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);}
button.danger{color:var(--accent-ink);}
button.danger:hover{border-color:var(--accent);background:color-mix(in srgb, var(--accent) 10%, transparent);}
button.ghost{background:transparent;}
button.icon-btn{padding:9px 11px;}
button:disabled{opacity:.45;cursor:not-allowed;}
button.small{padding:7px 11px;font-size:11.5px;}

.btn-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px;}

/* ---------- Frame toggles (technique chips) ----------
   Reuses the existing .chip / .checked classes the JS already toggles;
   restyled as contact-sheet frame marks rather than pills. */
.chips{display:flex;flex-wrap:wrap;gap:8px;}
.chip{
  display:flex;align-items:center;gap:8px;
  background:var(--panel-2);border:1px solid var(--border);
  border-radius:4px;padding:8px 12px 8px 10px;font-size:12.5px;cursor:pointer;user-select:none;
  color:var(--text);position:relative;
}
.chip::before{
  content:"";width:11px;height:11px;flex:none;border-radius:2px;
  border:1.5px solid var(--border-strong);background:var(--panel);
}
.chip input{position:absolute;opacity:0;width:0;height:0;}
.chip.checked{border-color:var(--accent);background:color-mix(in srgb, var(--accent) 9%, var(--panel-2));}
.chip.checked::before{
  background:var(--accent);border-color:var(--accent);
  box-shadow:inset 0 0 0 2px var(--panel-2);
}

/* ---------- Output / the exposed frame ---------- */
.output-wrap{position:relative;overflow:hidden;border-radius:var(--radius-lg);}
#output{
  background:var(--stage);
  color:var(--stage-text);
  border-radius:var(--radius-lg);
  padding:16px 16px 16px 22px;
  font-family:"PS Mono";
  font-size:12.8px;
  white-space:pre-wrap;
  word-break:break-word;
  min-height:220px;
  max-height:520px;
  overflow:auto;
  border:1px solid #000;
  background-image:radial-gradient(circle,#000 1.5px,transparent 1.6px);
  background-size:10px 10px;
  background-position:5px 5px;
  background-repeat:repeat-y;
  background-origin:content-box;
}
#output:empty::before{
  content:"Your generated prompt will appear here. Fill in the builder fields and click Generate Prompt.";
  color:#8a889a;
}
.clap-bar{
  position:absolute;left:0;right:0;top:0;height:100%;
  background:var(--stripe);
  transform:scaleY(0);transform-origin:top;
  pointer-events:none;z-index:2;border-radius:var(--radius-lg);
}
.clap-bar.snap{animation:ps-clap .38s cubic-bezier(.65,0,.35,1);}
@keyframes ps-clap{
  0%{transform:scaleY(0);}
  35%{transform:scaleY(1);}
  70%{transform:scaleY(1);}
  100%{transform:scaleY(0);}
}
@media (prefers-reduced-motion:reduce){
  .clap-bar.snap{animation:none;display:none;}
}

.stats-bar{font-size:11.5px;color:var(--muted);margin-top:8px;min-height:14px;font-family:"PS Mono";}

/* ---------- Toast (tally readout) ---------- */
.toast{
  position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(20px);
  background:var(--stage);color:var(--stage-text);border:1px solid #000;
  padding:10px 16px 10px 14px;border-radius:var(--radius);box-shadow:var(--shadow);
  font-family:"PS Mono";font-size:12.5px;font-weight:500;opacity:0;pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
  z-index:100;display:flex;align-items:center;gap:9px;border-left:3px solid var(--muted);
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.toast::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--muted);flex:none;}
.toast.success{border-left-color:var(--cue);}
.toast.success::before{background:var(--cue);box-shadow:0 0 6px var(--cue);}
.toast.error{border-left-color:var(--accent);}
.toast.error::before{background:var(--accent);box-shadow:0 0 6px var(--accent);}

/* ---------- History ---------- */
.history-list{display:flex;flex-direction:column;gap:8px;max-height:400px;overflow:auto;}
.history-item{
  border:1px solid var(--border);border-radius:var(--radius);padding:10px 12px;
  background:var(--panel-2);display:flex;justify-content:space-between;align-items:center;gap:10px;
}
.history-item .meta{min-width:0;}
.history-item .name{font-size:13px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.history-item .time{font-size:11px;color:var(--muted);margin-top:2px;font-family:"PS Mono";}
.history-item .tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px;}
.tag-badge{
  font-family:"PS Mono";font-size:10px;font-weight:600;color:var(--accent-ink);
  background:var(--panel);border:1px solid var(--border);
  border-radius:3px;padding:2px 7px;
}
.history-item .actions{display:flex;gap:6px;flex:none;flex-wrap:wrap;justify-content:flex-end;max-width:150px;}
.empty-state{font-size:12.5px;color:var(--muted);padding:14px 4px;text-align:center;}

.section-title{
  font-family:"PS Label";font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);
  font-weight:600;margin:18px 0 8px;
}
.section-title:first-child{margin-top:0;}

.template-row{display:flex;gap:8px;}
.template-row select{flex:1;}

.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);}

/* ---------- Log sheet (data tables — Templates, Users) ---------- */
.log-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--panel);}
table.log{width:100%;border-collapse:collapse;font-size:13px;min-width:640px;}
table.log thead th{
  font-family:"PS Label";font-weight:600;text-transform:uppercase;letter-spacing:.05em;font-size:11px;
  color:var(--muted);text-align:left;padding:11px 14px;
  background:var(--panel-2);border-bottom:2px solid var(--border-strong);
  position:sticky;top:0;
}
table.log tbody td{padding:10px 14px;border-bottom:1px solid var(--border);vertical-align:top;}
table.log tbody tr:hover{background:color-mix(in srgb, var(--accent) 5%, transparent);}
table.log tbody tr:last-child td{border-bottom:none;}
table.log .cell-mono{font-family:"PS Mono";font-size:12px;color:var(--muted);}
table.log code{
  font-family:"PS Mono";font-size:11.5px;background:var(--panel-2);
  border:1px solid var(--border);border-radius:3px;padding:1px 6px;
}
form.inline{display:inline-flex;gap:6px;align-items:center;}

.role-pill{
  font-family:"PS Mono";font-size:10.5px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;
  border-radius:3px;padding:2px 7px;border:1px solid var(--border-strong);color:var(--muted);
}
.role-pill.is-admin{color:var(--accent-ink);border-color:var(--accent);}
.status-dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px;background:var(--muted);}
.status-dot.on{background:var(--cue);box-shadow:0 0 5px var(--cue);}
.status-dot.off{background:var(--accent);}

/* ---------- Page shell shared by admin (Templates/Users) screens ---------- */
.ps-page{max-width:1100px;margin:0 auto;padding:24px 24px 60px;}
.ps-page h1{
  font-family:"PS Label";text-transform:uppercase;letter-spacing:.03em;font-size:20px;margin:0 0 4px;
}
.ps-page .ps-page-desc{color:var(--muted);font-size:13px;margin:0 0 22px;}

/* ---------- Home hub: the call sheet cover ---------- */
.ps-hub-head{margin-bottom:28px;}
.ps-hub-eyebrow{
  font-family:"PS Mono";font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent-ink);margin:0 0 8px;
}
.ps-hub-head h1{
  font-family:"PS Label";font-weight:600;font-size:26px;letter-spacing:.01em;
  text-transform:none;margin:0 0 8px;
}
.ps-hub-meta{
  font-family:"PS Mono";font-size:12px;color:var(--muted);letter-spacing:.02em;
}
.ps-hub-meta b{color:var(--text);font-weight:600;}

.ps-tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}
@media (max-width:700px){.ps-tiles{grid-template-columns:1fr;}}

.ps-tile{
  display:block;background:var(--panel);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:20px;box-shadow:var(--shadow);
  text-decoration:none;color:var(--text);
  transition:border-color .12s ease, transform .08s ease;
  position:relative;overflow:hidden;
}
.ps-tile::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--stripe);}
.ps-tile:hover{border-color:var(--accent);transform:translateY(-1px);}
.ps-tile__unit{
  font-family:"PS Mono";font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--accent-ink);margin:0 0 6px;
}
.ps-tile__title{
  font-family:"PS Label";font-weight:600;font-size:17px;letter-spacing:.01em;margin:0 0 6px;
}
.ps-tile__desc{color:var(--muted);font-size:12.5px;line-height:1.5;margin:0 0 14px;}
.ps-tile__go{
  font-family:"PS Mono";font-size:11px;font-weight:600;color:var(--text);
  display:inline-flex;align-items:center;gap:5px;
}
.ps-tile:hover .ps-tile__go{color:var(--accent-ink);}
.ps-error{
  background:color-mix(in srgb, var(--accent) 10%, var(--panel));
  border:1px solid var(--accent);color:var(--accent-ink);
  border-radius:var(--radius);padding:9px 13px;font-size:13px;margin:0 0 16px;
}
.ps-notice-success{
  background:color-mix(in srgb, var(--cue) 12%, var(--panel));
  border:1px solid var(--cue);color:var(--success);
  border-radius:var(--radius);padding:9px 13px;font-size:13px;margin:0 0 16px;
}

/* ---------- Auth shell: the darkened stage before the shoot ---------- */
.ps-auth-shell{
  min-height:100vh;
  background:var(--stage);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;
  padding:32px 20px;
  position:relative;
}
.ps-auth-shell::before,.ps-auth-shell::after{
  content:"";position:fixed;top:0;bottom:0;width:18px;
  background-image:radial-gradient(circle,#ffffff14 1.5px,transparent 1.6px);
  background-size:14px 14px;background-position:6px 6px;
  pointer-events:none;
}
.ps-auth-shell::before{left:0;}
.ps-auth-shell::after{right:0;}
.ps-auth-card{
  width:100%;max-width:392px;
  background:var(--panel);color:var(--text);
  border-radius:var(--radius-lg);
  box-shadow:0 30px 80px rgba(0,0,0,.5);
  overflow:hidden;
  position:relative;
}
.ps-auth-card__stripe{height:4px;background:var(--stripe);}
.ps-auth-card__body{padding:30px 30px 26px;}
.ps-auth-brand{display:flex;align-items:center;gap:12px;margin-bottom:22px;}
.ps-auth-brand .ps-logo{width:40px;height:40px;font-size:17px;}
.ps-auth-brand__title{
  font-family:"PS Label";font-weight:600;font-size:15px;text-transform:uppercase;letter-spacing:.03em;
  color:var(--text);line-height:1.2;
}
.ps-auth-brand__tag{font-family:"PS Mono";font-size:11px;color:var(--muted);letter-spacing:.03em;margin-top:1px;}
.ps-auth-card h1{
  font-family:"PS Label";font-weight:600;font-size:19px;letter-spacing:.01em;
  margin:0 0 6px;text-transform:none;
}
.ps-auth-card p.lede{color:var(--muted);font-size:13px;margin:0 0 20px;line-height:1.5;}
.ps-auth-card .btn-row{margin-top:4px;}
.ps-auth-card button.primary{width:100%;justify-content:center;padding:11px 15px;}
.ps-auth-links{margin-top:18px;text-align:center;font-size:12.5px;color:var(--muted);}
.ps-auth-links a{color:var(--accent-ink);font-weight:600;text-decoration:none;}
.ps-auth-links a:hover{text-decoration:underline;}
.ps-auth-foot{
  text-align:center;font-family:"PS Mono";font-size:10.5px;
  color:#8a889a;letter-spacing:.03em;
}

footer.ps-footer{
  text-align:center;font-size:11.5px;color:var(--muted);padding:24px;
  font-family:"PS Mono";
}