:root{--petrol:#0C3B38;--teal:#2C6E66;--pale:#DCE8E2;--paper:#F7F6F2;--amber:#E3B45C;--ink:#1E2A28;--muted:#62706B;--line:#d9ded9;--yellow:#FFE600;--pink:#FFB3E6;--cream:#FFF9E6;--r:12px}
*{box-sizing:border-box}
html,body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
a{color:var(--teal)}
button{font:inherit;cursor:pointer;border:1px solid var(--line);background:#fff;color:var(--ink);padding:8px 14px;border-radius:999px;transition:background .15s}
button:hover{background:var(--pale)}
button:focus-visible,[contenteditable]:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
button.primary{background:var(--petrol);color:#fff;border-color:var(--petrol)}
button.primary:hover{background:var(--teal)}
button.danger{color:#a12}
button.ai{background:var(--cream);border-color:#e8d98a}
button.ai:hover{background:var(--yellow)}
button:disabled{opacity:.5;cursor:default}
input,textarea{font:inherit;border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;background:#fff;width:100%}
textarea{min-height:120px;resize:vertical}
.top{display:flex;align-items:center;gap:16px;padding:12px 20px;background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.brand{font-weight:700;color:var(--petrol);text-decoration:none;display:flex;align-items:center;gap:8px}
.brand .dot{width:14px;height:14px;border-radius:50%;background:var(--petrol);box-shadow:inset 0 0 0 4px var(--yellow)}
#crumbs a{color:var(--muted);text-decoration:none}#crumbs a:hover{text-decoration:underline}
#crumbs span{color:var(--muted);margin:0 6px}
.spacer{flex:1}
.savestate{font-size:13px;color:var(--muted)}
.who{font-size:13px;color:var(--muted)}
main{max-width:1200px;margin:0 auto;padding:24px 20px 80px}
h1{font-size:26px;margin:0 0 4px}h2{font-size:18px;margin:24px 0 10px}
.sub{color:var(--muted);margin:0 0 20px}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;text-decoration:none;color:inherit;display:block;transition:transform .12s,box-shadow .12s}
.card:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(12,59,56,.08)}
.card .thumb{aspect-ratio:4/5;background:var(--pale) center/cover no-repeat;display:flex;align-items:center;justify-content:center;color:var(--muted)}
.card .body{padding:12px 14px}
.card .title{font-weight:600;display:block;margin-bottom:4px}
.card .meta{font-size:13px;color:var(--muted);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pill{display:inline-block;font-size:12px;padding:2px 9px;border-radius:999px;background:var(--pale);color:var(--petrol)}
.pill.approved{background:#dff3d8;color:#1f5a2b}.pill.posted{background:#e6e0f7;color:#3f2d7a}.pill.stale{background:#fdecc8;color:#7a4b00}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;background:#fff;padding:3px}
.seg button{border:0;background:transparent;padding:6px 14px;border-radius:999px}
.seg button[aria-pressed="true"]{background:var(--petrol);color:#fff}
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:18px;margin-bottom:20px}
.panel h3{margin:0 0 10px;font-size:15px}
.pills{display:flex;gap:8px;flex-wrap:wrap}
.pills button[aria-pressed="true"]{background:var(--petrol);color:#fff;border-color:var(--petrol)}
.empty{padding:40px;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:var(--r)}
.dropzone{border:2px dashed var(--line);border-radius:var(--r);padding:26px;text-align:center;color:var(--muted);background:#fff}
.dropzone.over{border-color:var(--teal);background:var(--pale)}
.photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px;margin-top:14px}
.photos .ph{position:relative;aspect-ratio:1;border-radius:8px;background:var(--pale) center/cover;border:2px solid transparent;cursor:pointer}
.photos .ph[aria-pressed="true"]{border-color:var(--amber);box-shadow:0 0 0 2px var(--amber)}
.photos .ph .x{position:absolute;top:4px;right:4px;background:rgba(0,0,0,.6);color:#fff;border:0;width:24px;height:24px;padding:0;border-radius:50%;font-size:14px;display:none}
.photos .ph:hover .x{display:block}
/* editor */
.editor{display:grid;grid-template-columns:120px minmax(0,1fr) 320px;gap:20px;align-items:start}
@media (max-width:980px){.editor{grid-template-columns:1fr}.strip{display:flex!important;overflow-x:auto}.strip .mini{flex:0 0 72px}}
.strip{display:grid;gap:10px;position:sticky;top:70px}
.strip .mini{border:2px solid transparent;border-radius:8px;overflow:hidden;cursor:pointer;background:none;padding:0;aspect-ratio:4/5;position:relative}
.strip .mini[aria-pressed="true"]{border-color:var(--amber)}
.strip .mini .n{position:absolute;left:4px;top:4px;background:rgba(0,0,0,.55);color:#fff;font-size:11px;padding:1px 6px;border-radius:999px}
.stage{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:16px}
.frame{position:relative;width:100%;overflow:hidden;border-radius:8px;background:#000}
.frame .slide{position:absolute;left:0;top:0;transform-origin:0 0}
.mini .frame{border-radius:0}
.slide [contenteditable]{cursor:text}
.slide [contenteditable]:hover{box-shadow:0 0 0 4px rgba(227,180,92,.6)}
.slide [contenteditable]:focus{outline:4px solid var(--amber);outline-offset:0}
.stage .tools{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;align-items:center}
.stage .tools .hint{font-size:13px;color:var(--muted)}
.side{display:grid;gap:14px;position:sticky;top:70px}
.side label{display:block;font-size:13px;color:var(--muted);margin-bottom:6px}
.side .status{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.output{margin-top:28px}
.output .grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.output img{width:100%;border-radius:8px;border:1px solid var(--line);display:block}
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:10px 18px;border-radius:999px;font-size:14px;z-index:20;box-shadow:0 6px 20px rgba(0,0,0,.2)}
.toast button{background:transparent;color:var(--yellow);border:0;padding:0 0 0 12px;font-weight:600}
.login{max-width:420px;margin:80px auto;text-align:center}
.login .g{display:inline-flex;align-items:center;gap:10px;padding:12px 22px;font-size:16px}
.instr{display:flex;gap:8px;margin-top:8px}
.instr input{flex:1}
.busy{opacity:.6;pointer-events:none}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}