:root{
  --bg:#0d1117; --panel:#151b24; --panel-2:#1b222d; --line:#262e3a;
  --txt:#e6edf3; --mut:#8b97a7; --dim:#5f6b7d;
  --acc:#f6821f; --acc-2:#ffa94d; --ok:#2ea043; --err:#f85149;
  --r:12px; --fs:14px;
}
*{box-sizing:border-box}
/* Author styles must not override the native hidden attribute. */
[hidden]{display:none !important}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--txt); font-size:var(--fs);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  line-height:1.55; -webkit-font-smoothing:antialiased;
}

/* ---------- top bar ---------- */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 22px; border-bottom:1px solid var(--line);
  background:rgba(13,17,23,.85); backdrop-filter:blur(10px);
  position:sticky; top:0; z-index:20;
}
.brand{display:flex; align-items:center; gap:12px}
.logo{
  font-size:22px; color:var(--acc); background:var(--panel-2);
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center;
  border:1px solid var(--line);
}
.topbar h1{font-size:16px; margin:0; letter-spacing:-.01em}
.topbar p{margin:0; font-size:12px; color:var(--mut)}
.ghost-link{color:var(--mut); text-decoration:none; font-size:13px; border:1px solid var(--line); padding:6px 12px; border-radius:8px}
.ghost-link:hover{color:var(--txt); border-color:var(--acc)}

/* ---------- layout ---------- */
.shell{
  display:grid; grid-template-columns:minmax(330px,390px) 1fr;
  gap:18px; padding:18px 22px 60px; max-width:1500px; margin:0 auto;
  align-items:start;
}
@media(max-width:1000px){ .shell{grid-template-columns:1fr} }

.panel{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:18px}
#inputPanel{position:sticky; top:84px}
@media(max-width:1000px){ #inputPanel{position:static} }

.panel-title{font-size:12px; text-transform:uppercase; letter-spacing:.07em; color:var(--mut); margin:18px 0 10px; font-weight:600}
.panel-title:first-of-type{margin-top:0}
.panel-title.flush{margin:0}
.panel-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; flex-wrap:wrap}

/* ---------- dropzone ---------- */
.dropzone{
  border:1.5px dashed var(--line); border-radius:var(--r); background:var(--panel-2);
  min-height:180px; display:grid; place-items:center; cursor:pointer;
  transition:border-color .15s, background .15s; overflow:hidden; padding:14px;
}
.dropzone:hover,.dropzone:focus-visible{border-color:var(--acc); background:#1d2531; outline:none}
.dropzone.drag{border-color:var(--acc); background:#222a1c}
.dz-empty{display:grid; justify-items:center; gap:5px; text-align:center; color:var(--mut)}
.dz-icon{font-size:26px; color:var(--acc)}
.dz-empty strong{color:var(--txt); font-weight:600; font-size:14px}
.dz-sub{font-size:12px; color:var(--dim)}
#preview{max-width:100%; max-height:300px; border-radius:8px; display:block}
.link-btn{background:none; border:none; color:var(--mut); font-size:12px; cursor:pointer; padding:7px 0; text-decoration:underline}
.link-btn:hover{color:var(--err)}

/* ---------- models ---------- */
.model-list{display:grid; gap:7px}
.model{
  display:flex; gap:10px; align-items:flex-start; padding:10px 12px;
  border:1px solid var(--line); border-radius:9px; background:var(--panel-2);
  cursor:pointer; transition:border-color .15s, background .15s;
}
.model:hover{border-color:#3a4555}
.model.on{border-color:var(--acc); background:#211d16}
.model input{margin:3px 0 0; accent-color:var(--acc); flex:none}
.model-name{font-weight:600; font-size:13px; display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.model-blurb{font-size:11.5px; color:var(--mut); line-height:1.4}
.pill{font-size:9.5px; text-transform:uppercase; letter-spacing:.05em; background:var(--acc); color:#1b1206; padding:2px 6px; border-radius:20px; font-weight:700}

/* ---------- segmented ---------- */
.seg{display:flex; gap:5px; background:var(--panel-2); padding:4px; border-radius:9px; border:1px solid var(--line)}
.seg button{
  flex:1; background:none; border:none; color:var(--mut); padding:7px 10px;
  border-radius:6px; cursor:pointer; font-size:12.5px; font-family:inherit; transition:all .15s;
}
.seg button:hover{color:var(--txt)}
.seg button.on{background:var(--acc); color:#1b1206; font-weight:600}
.seg.small button{padding:5px 11px; font-size:11.5px}

/* ---------- advanced ---------- */
.advanced{margin:16px 0; border:1px solid var(--line); border-radius:9px; background:var(--panel-2); overflow:hidden}
.advanced summary{padding:11px 13px; cursor:pointer; font-size:12.5px; color:var(--mut); user-select:none}
.advanced summary:hover{color:var(--txt)}
.advanced[open] summary{border-bottom:1px solid var(--line); color:var(--txt)}
.layer-toggles{display:grid; grid-template-columns:1fr 1fr; gap:6px; padding:13px}
@media(max-width:560px){ .layer-toggles{grid-template-columns:1fr} }
.lt{display:flex; align-items:center; gap:7px; font-size:12px; color:var(--mut); cursor:pointer}
.lt input{accent-color:var(--acc); flex:none}
.lt:hover{color:var(--txt)}
.field{display:block; padding:0 13px 13px}
.field span{display:block; font-size:12px; color:var(--mut); margin-bottom:6px}
.field em{color:var(--dim); font-style:normal}

/* ---------- inputs ---------- */
textarea{
  width:100%; background:#0f141b; color:var(--txt); border:1px solid var(--line);
  border-radius:8px; padding:10px 12px; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12.5px; line-height:1.6; resize:vertical;
}
textarea:focus{outline:none; border-color:var(--acc)}

/* ---------- buttons ---------- */
.primary{
  width:100%; background:var(--acc); color:#1b1206; border:none; border-radius:9px;
  padding:12px; font-size:14px; font-weight:700; cursor:pointer; font-family:inherit; transition:background .15s;
}
.primary:hover:not(:disabled){background:var(--acc-2)}
.primary:disabled{background:#39414f; color:var(--dim); cursor:not-allowed}
.primary.sm,.ghost.sm{width:auto; padding:8px 15px; font-size:12.5px}
.ghost{background:var(--panel-2); color:var(--txt); border:1px solid var(--line); border-radius:9px; cursor:pointer; font-family:inherit}
.ghost:hover{border-color:var(--acc)}
.btn-row{display:flex; gap:8px; flex-wrap:wrap}

/* ---------- status ---------- */
.status{font-size:12.5px; color:var(--mut); min-height:18px; margin:10px 0 0; text-align:center}
.status.err{color:var(--err)}
.status.ok{color:var(--ok)}
.spin{display:inline-block; width:11px; height:11px; border:2px solid var(--line); border-top-color:var(--acc); border-radius:50%; animation:sp .7s linear infinite; vertical-align:-1px; margin-right:6px}
@keyframes sp{to{transform:rotate(360deg)}}

/* ---------- empty ---------- */
.empty{text-align:center; padding:72px 20px; color:var(--dim)}
.empty-icon{font-size:36px; color:#2d3542; display:block; margin-bottom:12px}
.empty p{margin:0 0 5px; color:var(--mut); font-size:14px}
.empty small{font-size:12px}

/* ---------- badges ---------- */
.badges{display:flex; gap:6px; flex-wrap:wrap}
.badge{font-size:11px; background:var(--panel-2); border:1px solid var(--line); color:var(--mut); padding:3px 9px; border-radius:20px}
.badge.warn{border-color:#7a5d1a; color:var(--acc-2); background:#1f1a0e}

/* ---------- layer cards ---------- */
.layer{border:1px solid var(--line); border-radius:10px; margin-bottom:9px; background:var(--panel-2); overflow:hidden; transition:opacity .15s}
.layer.off{opacity:.45}
.layer-head{display:flex; align-items:center; gap:9px; padding:9px 12px; border-bottom:1px solid var(--line); flex-wrap:wrap}
.layer-head input[type=checkbox]{accent-color:var(--acc); flex:none; cursor:pointer}
.layer-title{font-size:12.5px; font-weight:600; flex:1; min-width:110px}
.layer-hint{font-size:11px; color:var(--dim); width:100%; margin-top:-2px}
.acts{display:flex; gap:4px; flex-wrap:wrap}
.act{
  background:#232b37; border:1px solid var(--line); color:var(--mut); font-size:10.5px;
  padding:3px 8px; border-radius:6px; cursor:pointer; font-family:inherit; transition:all .13s;
}
.act:hover:not(:disabled){color:var(--txt); border-color:var(--acc)}
.act:disabled{opacity:.45; cursor:wait}
.layer textarea{border:none; border-radius:0; background:#0f141b; min-height:72px}
.layer textarea:focus{outline:1px solid var(--acc); outline-offset:-1px}

/* ---------- compose ---------- */
.compose{margin-top:18px; padding-top:16px; border-top:1px solid var(--line)}
.compose-head{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; flex-wrap:wrap}
.compose-head h3{font-size:13px; margin:0}
#finalPrompt{font-size:13px; line-height:1.65}
.neg-label{display:block; font-size:11.5px; color:var(--mut); margin:10px 0 5px}
.compose-foot{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:11px; flex-wrap:wrap}
.counts{font-size:11.5px; color:var(--dim)}

/* ---------- toast ---------- */
.toast{
  position:fixed; bottom:22px; left:50%; transform:translateX(-50%);
  background:var(--panel-2); border:1px solid var(--acc); color:var(--txt);
  padding:10px 20px; border-radius:9px; font-size:13px; z-index:100;
  box-shadow:0 8px 28px rgba(0,0,0,.5); animation:rise .2s ease;
}
@keyframes rise{from{opacity:0; transform:translate(-50%,10px)}}

/* ---------- safety mode ---------- */
.safety-option{display:flex;align-items:flex-start;gap:9px;padding-top:12px}
.safety-option input{accent-color:var(--ok);margin-top:3px;flex:none}
.safety-option span{margin:0;line-height:1.35}
.safety-option strong{display:block;color:var(--txt);font-size:12px;font-weight:600}
.safety-option em{display:block;margin-top:2px;font-size:10.5px}
.safety-note{font-size:10.5px;color:var(--dim);margin:-4px 13px 13px;line-height:1.45}
.badge.safe{border-color:#2c6e3c;color:#69c97a;background:#101c14}

.safety-note a{color:var(--mut);text-decoration:underline}.safety-note a:hover{color:var(--acc)}


/* ---------- media tools ---------- */
.media-studio{max-width:1500px;margin:0 auto 60px;padding:0 22px}.media-tabs{display:flex;gap:6px;margin:4px 0 14px;border-bottom:1px solid var(--line)}.media-tab{background:none;border:0;border-bottom:2px solid transparent;color:var(--mut);font:inherit;font-weight:600;padding:11px 16px;cursor:pointer}.media-tab.on{color:var(--txt);border-bottom-color:var(--acc)}.tool-panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:18px}.tool-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;margin-bottom:16px}.tool-head h2{font-size:20px;letter-spacing:-.02em;margin:2px 0 3px}.tool-head p{color:var(--mut);margin:0}.eyebrow{font-size:11px!important;text-transform:uppercase;letter-spacing:.1em;color:var(--acc)!important;font-weight:700}.altered-label{font-size:11px;color:#f0bb78;border:1px solid #7a5d1a;background:#1f1a0e;border-radius:20px;padding:4px 9px;white-space:nowrap}.tool-grid{display:grid;grid-template-columns:minmax(360px,1fr) minmax(420px,1.1fr);gap:18px}.tool-controls,.tool-result{background:#111720;border:1px solid var(--line);border-radius:10px;padding:16px}.tool-label{font-size:12px;color:var(--mut);display:block;margin-bottom:6px}.tool-drop{background:var(--panel-2);border:1.5px dashed var(--line);border-radius:9px;width:100%;height:220px;padding:8px;color:var(--mut);cursor:pointer;overflow:hidden;display:grid;place-items:center}.tool-drop:hover,.tool-drop:focus-visible{border-color:var(--acc);outline:none}.tool-drop.drag{border-color:var(--acc);background:#222a1c}.tool-drop img{width:100%;height:100%;object-fit:contain;border-radius:6px}.tool-setting{margin:13px 0}.tool-model-list{display:grid;grid-template-columns:1fr 1fr;gap:6px}.tool-model{display:flex;gap:8px;align-items:flex-start;border:1px solid var(--line);border-radius:8px;padding:8px 10px;background:var(--panel-2);cursor:pointer}.tool-model.on{border-color:var(--acc);background:#211d16}.tool-model input{margin-top:3px;accent-color:var(--acc)}.tool-model strong{display:block;font-size:12px}.tool-model small{display:block;color:var(--mut);font-size:10.5px;line-height:1.3}.compact-field{padding:0;margin-top:10px}.compact-field select{width:100%;background:#0f141b;color:var(--txt);border:1px solid var(--line);border-radius:8px;padding:8px;font:inherit;font-size:12px}.split-setting,.video-options{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.video-options{grid-template-columns:repeat(3,1fr)}.tool-note{font-size:10.5px;color:var(--dim);line-height:1.45;margin:10px 0 0}.tool-result{min-height:520px;display:grid;place-items:center}.tool-result>div{width:100%}.tool-result img,.tool-result video{display:block;width:100%;max-height:700px;object-fit:contain;border-radius:8px;background:#0a0e13}.result-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:10px;flex-wrap:wrap}.result-foot .primary{display:inline-flex;text-decoration:none;align-items:center}.tool-result .empty{padding:30px}
@media(max-width:1000px){.tool-grid{grid-template-columns:1fr}.tool-result{min-height:300px}}@media(max-width:680px){.tool-model-list{grid-template-columns:1fr}.video-options{grid-template-columns:1fr 1fr}.tool-head{display:block}.altered-label{display:inline-block;margin-top:10px}}
.layer.wardrobe-primary{border-color:#8a5a20;box-shadow:0 0 0 1px rgba(246,130,31,.12)}
.layer.wardrobe-primary .layer-head{background:#211d16}.layer.wardrobe-primary textarea{min-height:150px}
.tool-model.credit-required{border-style:dashed}.credit-pill{display:inline-block;font-size:9px;text-transform:uppercase;letter-spacing:.04em;color:#f0bb78;border:1px solid #7a5d1a;background:#1f1a0e;border-radius:12px;padding:1px 5px;margin-left:4px}.status.warn{color:var(--acc-2)}.status a{color:inherit;text-decoration:underline}
/* ---------- protected media tools ---------- */
.media-auth-gate{min-height:430px;display:grid;place-items:center;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:24px}.auth-card{width:min(420px,100%);text-align:center;background:#111720;border:1px solid var(--line);border-radius:12px;padding:28px}.auth-lock{display:grid;place-items:center;width:48px;height:48px;margin:0 auto 12px;border:1px solid #7a5d1a;background:#1f1a0e;color:var(--acc-2);border-radius:50%;font-size:23px}.auth-card h2{font-size:21px;margin:4px 0}.auth-card>p:not(.eyebrow){color:var(--mut);font-size:13px;margin:0 auto 18px}.auth-field{display:block;text-align:left;margin:0 0 12px}.auth-field span{display:block;color:var(--mut);font-size:12px;margin-bottom:6px}.auth-field input{width:100%;background:#0f141b;color:var(--txt);border:1px solid var(--line);border-radius:8px;padding:11px 12px;font:inherit}.auth-field input:focus{outline:none;border-color:var(--acc)}.media-session-bar{display:flex;justify-content:flex-end;align-items:center;gap:10px;margin-bottom:8px;color:var(--dim);font-size:11px}.media-session-bar .ghost{padding:5px 9px}