:root{color-scheme:dark;--bg:#101211;--card:#191d1a;--border:#353d36;--text:#f2f5ef;--muted:#a6afa7;--lime:#b8f63b;font:16px/1.5 system-ui,sans-serif}
*{box-sizing:border-box}
body{margin:0;color:var(--text);background:var(--bg)}
[hidden]{display:none!important}
button,input,textarea{font:inherit;color:inherit}
button{border:1px solid var(--border);background:#242a25;border-radius:10px;padding:.65rem .95rem;cursor:pointer;font-weight:650}
button:hover{border-color:var(--lime)}
button:disabled{opacity:.55;cursor:wait}
button.primary{background:var(--lime);color:#151d0b;border-color:transparent}
:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
.masthead{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem max(1rem,calc((100vw - 1320px)/2));border-bottom:1px solid var(--border)}
.masthead>div,.actions,.dialog-bar{display:flex;align-items:center;flex-wrap:wrap;gap:.75rem}
.mark{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--lime);color:#151d0b;font-weight:900}
.divider{height:20px;width:1px;background:var(--border)}
main{max-width:1360px;margin:auto;padding:clamp(1rem,4vw,2.5rem)}
.card{border:1px solid var(--border);border-radius:16px;background:var(--card);padding:clamp(1rem,2vw,1.5rem);min-width:0}
.login{max-width:440px;margin:clamp(2rem,10vh,7rem) auto}
.eyebrow{color:var(--lime);letter-spacing:.15em;font-size:.76rem;font-weight:750;margin:0}
h1,h2{margin:.25rem 0;line-height:1.15}
h1{font-size:clamp(2rem,5vw,3rem);letter-spacing:-.04em}
h2{font-size:1.1rem}
.muted{color:var(--muted);font-size:.9rem}
.title{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;flex-wrap:wrap}
.layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,320px);gap:1rem;align-items:start}
aside,form,label{display:grid;gap:.75rem}
label{gap:.3rem;font-size:.9rem}
input,textarea{width:100%;min-width:0;background:#111412;border:1px solid var(--border);border-radius:8px;padding:.6rem .75rem}
textarea{resize:vertical}
.editor textarea{font:14px/1.6 ui-monospace,monospace;min-height:350px;white-space:pre;overflow:auto}
#status,#login-status{color:var(--lime);min-height:1.5em}
#status[data-error],#login-status[data-error]{color:#ff9c93}
#media-result{margin-top:.75rem}
#history{padding:0;list-style:none}
#history li{display:flex;justify-content:space-between;align-items:center;gap:.5rem;margin:.5rem 0;font-size:.85rem}
dialog{width:min(96vw,1200px);height:min(90vh,900px);padding:.75rem;border:1px solid var(--border);border-radius:16px;background:var(--card);color:var(--text)}
dialog::backdrop{background:#000b}
.dialog-bar{justify-content:space-between;margin-bottom:.5rem}
iframe{width:100%;height:calc(100% - 60px);background:#0b0c0c;border:0;border-radius:8px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
@media(max-width:760px){.layout{grid-template-columns:1fr}.divider{display:none}}