:root{
  --bg:#09090b; --panel:#101013; --panel-2:#17171b; --panel-3:#1f1f25; --panel-4:#2a2a31;
  --line:rgba(255,255,255,.07); --line-2:rgba(255,255,255,.13);
  --fg:#f4f4f5; --fg-2:#b4b4bc; --fg-3:#7c7c86;
  --accent:#d4ff3a; --accent-ink:#0b0d02; --accent-dim:rgba(212,255,58,.14);
  --ok:#4ade80; --warn:#fbbf24; --err:#f87171; --info:#7cc4ff;
  --r-sm:8px; --r:12px; --r-lg:16px;
  --row:220px;
  --font:"Pretendard Variable",Pretendard,ui-sans-serif,system-ui,-apple-system,"Noto Sans KR",sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:14px/1.5 var(--font);
  -webkit-font-smoothing:antialiased;overflow:hidden}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
[hidden]{display:none!important}
::selection{background:var(--accent);color:var(--accent-ink)}
.ic{width:18px;height:18px;flex:none;display:block}
[data-icon]{display:inline-flex;align-items:center}
.muted{color:var(--fg-3)}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:var(--panel-4);border-radius:10px;border:3px solid transparent;background-clip:padding-box}
*::-webkit-scrollbar-track{background:transparent}

.app{display:grid;grid-template-columns:72px 388px minmax(0,1fr);height:100vh}

/* ------------------------------------------------------------ rail */
.rail{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 0;min-height:0;
  overflow-x:hidden;overflow-y:auto;scrollbar-width:none;
  background:var(--bg);border-right:1px solid var(--line)}
.rail::-webkit-scrollbar{display:none}
.logo{width:40px;height:40px;display:block;margin-bottom:12px;flex:none}
.logo img{width:100%;height:100%;display:block}
.rail-btn{width:58px;padding:9px 0 7px;border:0;border-radius:12px;background:none;color:var(--fg-3);
  display:flex;flex-direction:column;align-items:center;gap:4px;font-size:11px;text-decoration:none;transition:.15s}
.rail-btn .ic{width:22px;height:22px}
.rail-btn:hover{color:var(--fg);background:var(--panel-2)}
.rail-btn.active{color:var(--fg);background:var(--panel-3)}
.rail-btn.active .ic{color:var(--accent)}
.rail-btn.small .ic{width:19px;height:19px}
.rail-btn.live .ic{color:var(--ok)}
.rail-spacer{flex:1 1 0;min-height:0}
.rail-btn{position:relative}
.rail-dot{display:none;position:absolute;top:7px;right:12px;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.rail-btn.has-project .rail-dot{display:block}

/* language switcher: the rail button opens this list to its right */
.rail-btn[aria-expanded=true]{color:var(--fg);background:var(--panel-3)}
.rail-btn[aria-expanded=true] .ic{color:var(--accent)}
.rail-btn.small span#lang-code{font-size:10.5px;font-weight:650;letter-spacing:.4px}
.lang-menu{position:fixed;z-index:50;min-width:156px;padding:6px;display:flex;flex-direction:column;gap:2px;
  background:var(--panel-3);border:1px solid var(--line-2);border-radius:var(--r);box-shadow:0 18px 50px rgba(0,0,0,.55);
  max-height:calc(100vh - 16px);overflow:auto}
.lang-item{width:100%;display:flex;align-items:center;gap:10px;padding:8px 10px;border:0;background:none;
  border-radius:9px;text-align:left;color:var(--fg-2);font-size:13px;white-space:nowrap}
.lang-item:hover,.lang-item:focus-visible{background:var(--panel-4);color:var(--fg);outline:none}
.lang-item.sel{color:var(--fg);background:var(--panel-4)}
.lang-item .check{margin-left:auto;padding-left:10px;color:var(--accent);display:inline-flex}
.lang-item .check .ic{width:15px;height:15px}

/* ------------------------------------------------------------ edit pane */
/* Laid out even while hidden, so the editor in it keeps working (imports
   and auto-adds land while the composer is on screen). */
.edit-pane{position:fixed;top:0;right:0;bottom:0;left:72px;background:var(--bg);z-index:5;
  visibility:hidden;pointer-events:none}
.edit-pane iframe{display:block;width:100%;height:100%;border:0}
body[data-pane=edit] .edit-pane{visibility:visible;pointer-events:auto}
body[data-pane=edit] .composer,body[data-pane=edit] .feed{display:none}
.edit-link{display:flex;align-items:center;gap:10px;padding:10px 10px 10px 12px;border-radius:12px;
  background:var(--accent-dim);border:1px solid rgba(212,255,58,.28)}
.edit-link>.ic{color:var(--accent)}
.edit-link .el-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;font-size:11.5px;color:var(--fg-2);line-height:1.45}
.edit-link b{color:var(--fg);font-size:12.5px;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.edit-link .btn{padding:5px 9px}
.edit-link .x{background:none;border:0;color:var(--fg-3);padding:4px;display:grid;place-items:center}
.edit-link .x:hover{color:var(--fg)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--err);display:inline-block;flex:none}
.on .dot,.dot.on{background:var(--ok);box-shadow:0 0 0 3px rgba(74,222,128,.15)}

/* ------------------------------------------------------------ composer */
.composer{display:flex;flex-direction:column;min-height:0;background:var(--panel);border-right:1px solid var(--line)}
.cmp-head{padding:16px 20px 6px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.cmp-head h1{margin:0;font-size:16px;font-weight:650;letter-spacing:-.2px;white-space:nowrap}
#inputs,#settings{display:flex;flex-direction:column;gap:18px}
#model-card:empty,#vmode-wrap:empty,#inputs:empty,#settings:empty{display:none}
.cmp-body{flex:1;overflow-y:auto;padding:10px 20px 24px;display:flex;flex-direction:column;gap:18px}
.cmp-foot{padding:12px 20px 18px;border-top:1px solid var(--line);background:var(--panel);display:flex;flex-direction:column;gap:9px}

.field{display:flex;flex-direction:column;gap:8px}
.field-head{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:22px}
.field-head label,.field-head .lbl{font-size:12.5px;font-weight:600;color:var(--fg-2)}
.field-head .val{font-size:12px;color:var(--fg-3);font-variant-numeric:tabular-nums}
.field-tools{display:flex;gap:4px}
.hint{font-size:11.5px;color:var(--fg-3);margin:0;line-height:1.55}
.hint b{color:var(--fg-2);font-weight:600}
.warnbox{font-size:12px;line-height:1.5;padding:10px 12px;border-radius:var(--r-sm);
  background:rgba(251,191,36,.08);border:1px solid rgba(251,191,36,.25);color:#fcd77a}

.tool{border:1px solid var(--line);background:var(--panel-2);color:var(--fg-2);border-radius:7px;
  padding:3px 8px;font-size:11.5px;display:inline-flex;align-items:center;gap:5px}
.tool .ic{width:13px;height:13px}
.tool:hover{color:var(--fg);border-color:var(--line-2)}

/* model card */
.model{position:relative}
.model-btn{width:100%;display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:var(--r);
  background:var(--panel-2);border:1px solid var(--line);text-align:left;transition:.15s}
.model-btn:hover{border-color:var(--line-2)}
.model-btn.static{cursor:default}
.model-art{width:40px;height:40px;border-radius:10px;flex:none;display:grid;place-items:center;
  background:linear-gradient(135deg,#2c3a0c,#14261f 55%,#221535);color:var(--accent)}
.model-art .ic{width:20px;height:20px}
.model-txt{flex:1;min-width:0}
.model-name{font-weight:650;font-size:13.5px;display:flex;align-items:center;gap:7px}
.model-desc{font-size:11.5px;color:var(--fg-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tag{font-size:10px;font-weight:650;padding:1px 6px;border-radius:5px;background:var(--accent-dim);color:var(--accent);letter-spacing:.2px}
.tag.gray{background:var(--panel-4);color:var(--fg-2)}
.model-btn .chev{color:var(--fg-3)}
.menu{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:30;background:var(--panel-3);
  border:1px solid var(--line-2);border-radius:var(--r);padding:6px;box-shadow:0 18px 50px rgba(0,0,0,.55)}
.menu-item{width:100%;display:flex;align-items:center;gap:11px;padding:9px 10px;border:0;background:none;
  border-radius:9px;text-align:left}
.menu-item:hover{background:var(--panel-4)}
.menu-item.sel{background:var(--panel-4)}
.menu-item .check{margin-left:auto;color:var(--accent)}

/* segmented controls */
.seg{display:flex;padding:3px;gap:3px;background:var(--panel-2);border:1px solid var(--line);border-radius:10px}
.seg button{flex:1;border:0;background:none;color:var(--fg-3);border-radius:7px;padding:6px 8px;font-size:12.5px;
  display:flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap;transition:.12s}
.seg button:hover{color:var(--fg)}
.seg button.on{background:var(--panel-4);color:var(--fg);font-weight:600;box-shadow:0 1px 0 rgba(255,255,255,.05) inset}
.seg button:disabled{opacity:.35;cursor:not-allowed}
.seg button .ic{width:15px;height:15px}
.seg button small{font-size:10.5px;color:var(--fg-3);font-weight:500}
.seg.mode-seg button{padding:8px 6px}

/* aspect chips */
.aspects{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.aspect{border:1px solid var(--line);background:var(--panel-2);border-radius:9px;padding:8px 2px 6px;
  display:flex;flex-direction:column;align-items:center;gap:5px;color:var(--fg-3);font-size:11px;transition:.12s}
.aspect:hover{color:var(--fg);border-color:var(--line-2)}
.aspect.on{border-color:var(--accent);color:var(--fg);background:var(--accent-dim)}
.aspect .shape{height:20px;display:flex;align-items:center;justify-content:center}
.aspect .shape i{display:block;border:1.6px solid currentColor;border-radius:3px}
.aspect.on .shape i{border-color:var(--accent)}
.dims{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:center}
.dims span{color:var(--fg-3)}

/* inputs */
.inp,.cmp-body textarea.small{width:100%;background:var(--panel-2);border:1px solid var(--line);border-radius:9px;
  padding:8px 10px;color:var(--fg);outline:none;transition:border-color .12s}
.inp:focus,.cmp-body textarea.small:focus{border-color:var(--line-2)}
.inp::placeholder,textarea::placeholder{color:var(--fg-3)}
.cmp-body textarea.small{resize:vertical;min-height:58px}
.icon-btn{border:1px solid var(--line);background:var(--panel-2);color:var(--fg-2);border-radius:9px;
  width:36px;height:36px;display:grid;place-items:center;flex:none}
.icon-btn:hover{color:var(--fg);border-color:var(--line-2)}
.icon-btn.on{color:var(--accent);border-color:var(--accent)}

/* prompt */
.prompt-wrap{background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r);transition:border-color .15s}
.prompt-wrap:focus-within{border-color:rgba(212,255,58,.45)}
#prompt{display:block;width:100%;min-height:132px;max-height:55vh;resize:vertical;border:0;outline:none;background:none;
  padding:12px 13px 8px;color:var(--fg);font-size:13.5px;line-height:1.6}
#prompt-ko{display:block;width:100%;min-height:112px;max-height:45vh;resize:vertical;border:0;outline:none;background:none;
  padding:12px 13px 8px;color:var(--fg);font-size:14px;line-height:1.65}
.dt-prompt.ko{font-size:13.5px;color:var(--fg)}
.tokens{display:flex;flex-wrap:wrap;gap:5px;padding:0 10px 10px}
.tokens:empty{display:none}
.token{border:1px solid var(--line-2);background:var(--panel-3);color:var(--fg-2);border-radius:6px;padding:1px 7px;
  font-size:11px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.token:hover{color:var(--accent);border-color:var(--accent)}

/* asset slots */
.slots{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.slot{position:relative;aspect-ratio:1;border-radius:10px;overflow:hidden;background:var(--panel-2);border:1px solid var(--line)}
.slot img,.slot video{width:100%;height:100%;object-fit:cover;display:block}
.slot.add{border:1.5px dashed var(--line-2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  color:var(--fg-3);font-size:10.5px;background:transparent}
.slot.add:hover,.drop-on .slot.add,.frame.drop-on{color:var(--accent);border-color:var(--accent);background:var(--accent-dim)}
.slot .x,.frame .x{position:absolute;top:4px;right:4px;width:20px;height:20px;border-radius:50%;border:0;
  background:rgba(0,0,0,.65);color:#fff;display:grid;place-items:center;opacity:0;transition:.12s}
.slot .x .ic,.frame .x .ic{width:12px;height:12px}
.slot:hover .x,.frame:hover .x{opacity:1}
.tok{position:absolute;left:4px;bottom:4px;font-size:9.5px;padding:1px 5px;border-radius:5px;background:rgba(0,0,0,.7);
  color:#fff;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;max-width:calc(100% - 8px);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.slot .aud{position:absolute;top:4px;left:4px;width:22px;height:22px;border-radius:6px;border:0;background:rgba(0,0,0,.65);
  color:var(--fg-3);display:grid;place-items:center}
.slot .aud.on{color:var(--accent)}
.slot .aud .ic{width:13px;height:13px}
.noprev{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--fg-3);
  font-size:10px;padding:6px;text-align:center;word-break:break-all}
.noprev .ic{width:20px;height:20px}
.uploading::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.55)}
.spin{position:absolute;left:50%;top:50%;width:20px;height:20px;margin:-10px;border-radius:50%;z-index:2;
  border:2px solid rgba(255,255,255,.25);border-top-color:var(--accent);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.frames{display:grid;grid-template-columns:1fr 28px 1fr;align-items:center;gap:6px}
.frames.single{grid-template-columns:1fr}
.frame{position:relative;aspect-ratio:16/10;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:var(--panel-2)}
.frame img,.frame video{width:100%;height:100%;object-fit:cover;display:block}
.frame.empty{border:1.5px dashed var(--line-2);background:transparent;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:4px;color:var(--fg-3);font-size:12px;text-align:center;padding:8px}
.frame.empty .ic{width:20px;height:20px}
.frame.empty small{font-size:10.5px;color:var(--fg-3);opacity:.8}
.frame.empty:hover{color:var(--accent);border-color:var(--accent);background:var(--accent-dim)}
.frame .flabel{position:absolute;left:6px;top:6px;font-size:10.5px;padding:2px 7px;border-radius:6px;background:rgba(0,0,0,.65)}
.swap{width:28px;height:28px;border-radius:50%;border:1px solid var(--line);background:var(--panel-2);color:var(--fg-3);display:grid;place-items:center}
.swap:hover{color:var(--fg)}
.swap .ic{width:14px;height:14px}
.sub-head{font-size:11.5px;color:var(--fg-3);display:flex;justify-content:space-between;margin-top:2px}

/* range */
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:22px;background:none;margin:0}
input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:4px;background:var(--panel-4)}
input[type=range]::-moz-range-track{height:4px;border-radius:4px;background:var(--panel-4)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;margin-top:-6px;
  background:var(--fg);border:3px solid var(--panel);box-shadow:0 0 0 1px var(--line-2)}
input[type=range]::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--fg);border:3px solid var(--panel)}
.range-ends{display:flex;justify-content:space-between;font-size:10.5px;color:var(--fg-3);margin-top:-2px}

/* generate */
.foot-info{display:flex;justify-content:space-between;gap:8px;font-size:11.5px;color:var(--fg-3);min-height:17px}
.foot-info .why{color:var(--warn)}
.foot-info .why.soft{color:var(--fg-3)}
.foot-info kbd{font:10.5px ui-monospace,monospace;border:1px solid var(--line-2);border-radius:4px;padding:0 4px;color:var(--fg-2)}
.gen{position:relative;width:100%;height:50px;border:0;border-radius:13px;background:var(--accent);color:var(--accent-ink);
  font-size:15px;font-weight:750;display:flex;align-items:center;justify-content:center;gap:9px;transition:.15s;letter-spacing:-.2px}
.gen:hover:not(:disabled){filter:brightness(1.06);box-shadow:0 8px 30px rgba(212,255,58,.22)}
.gen:active:not(:disabled){transform:translateY(1px)}
.gen:disabled{background:var(--panel-3);color:var(--fg-3);cursor:not-allowed}
.gen .ic{width:19px;height:19px}
.gen-count{font-size:12px;font-weight:700;padding:2px 8px;border-radius:7px;background:rgba(0,0,0,.12)}
.gen-count:empty{display:none}
.gen.busy .gen-ic{animation:spin 1s linear infinite}

/* ------------------------------------------------------------ feed */
.feed{overflow-y:auto;min-width:0;position:relative}
.feed-bar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;padding:12px 22px;flex-wrap:wrap;
  background:rgba(9,9,11,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.chips{display:flex;gap:5px;flex-wrap:wrap}
.chip{border:1px solid transparent;background:none;color:var(--fg-3);border-radius:999px;padding:5px 12px;font-size:12.5px;transition:.12s}
.chip:hover{color:var(--fg)}
.chip.active{background:var(--panel-3);color:var(--fg);border-color:var(--line)}
.chip .n{font-size:10.5px;color:var(--fg-3);margin-left:4px}
.search{display:flex;align-items:center;gap:7px;background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:0 10px;height:34px;flex:1;min-width:140px;max-width:260px}
.search .ic{width:15px;height:15px;color:var(--fg-3)}
.search input{background:none;border:0;outline:none;width:100%;font-size:13px}
.bar-right{display:flex;align-items:center;gap:12px;margin-left:auto}
.seg-view{padding:2px}
.seg-view button{padding:5px 8px}
#zoom{width:92px}
.status{display:flex;gap:5px;align-items:center;min-width:0}
.stat{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--fg-2);padding:3px 8px;border-radius:999px;
  background:var(--panel-2);border:1px solid var(--line);white-space:nowrap;font-variant-numeric:tabular-nums;cursor:default}
.stat .ic{width:13px;height:13px;color:var(--fg-3)}
.stat.warn{color:var(--warn);border-color:rgba(251,191,36,.3)}
.stat b{color:var(--fg);font-weight:600}

.feed-body{padding:18px 22px 60px}
.day{font-size:12px;font-weight:650;color:var(--fg-3);margin:26px 0 12px;letter-spacing:.2px}
.day:first-child{margin-top:4px}
.grp{margin-bottom:26px}
.grp-head{display:flex;align-items:flex-start;gap:14px;margin-bottom:10px}
.grp-txt{flex:1;min-width:0}
.grp-prompt{font-size:13.5px;line-height:1.5;color:var(--fg);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;cursor:pointer}
.grp-prompt:hover{color:#fff}
.grp-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;align-items:center}
.pill{font-size:11px;color:var(--fg-2);padding:2px 8px;border-radius:6px;background:var(--panel-2);border:1px solid var(--line);
  display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.pill .ic{width:12px;height:12px;color:var(--fg-3)}
.pill.lbl{color:var(--info)}
.grp-meta .time{font-size:11px;color:var(--fg-3);margin-left:2px}
.grp-acts{display:flex;gap:6px;opacity:.0;transition:.15s}
.grp:hover .grp-acts{opacity:1}
.btn{border:1px solid var(--line-2);background:var(--panel-2);color:var(--fg-2);border-radius:9px;padding:6px 11px;font-size:12.5px;
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;transition:.12s;text-decoration:none}
.btn:hover{color:var(--fg);border-color:rgba(255,255,255,.22);background:var(--panel-3)}
.btn .ic{width:15px;height:15px}
.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:650}
.btn.primary:hover{filter:brightness(1.06);background:var(--accent)}
.btn.ghost{background:none}
.btn.danger:hover{color:var(--err);border-color:rgba(248,113,113,.4)}

/* justified rows: every tile in a row gets the same height */
.justified{display:flex;flex-wrap:wrap;gap:8px}
.justified::after{content:"";flex-grow:999999}
.tile{position:relative;flex:calc(var(--ar) * 100) 1 calc(var(--ar) * var(--row));aspect-ratio:var(--ar);
  max-width:min(100%,calc(var(--ar) * var(--row) * 1.4));
  border-radius:var(--r);overflow:hidden;background:var(--panel-2);cursor:zoom-in;isolation:isolate}
.tile>img,.tile>video{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.tile:hover>img,.tile:hover>video{transform:scale(1.015)}
.tile-ov{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:8px;opacity:0;transition:opacity .15s;
  background:linear-gradient(to bottom,rgba(0,0,0,.45),transparent 30%,transparent 62%,rgba(0,0,0,.6))}
.tile:hover .tile-ov,.tile:focus-within .tile-ov{opacity:1}
.ov-top,.ov-bot{display:flex;align-items:center;gap:5px}
.ov-top{justify-content:space-between}
.ov-bot{justify-content:flex-end}
.ov-btn{width:30px;height:30px;border-radius:9px;border:0;display:grid;place-items:center;color:#fff;
  background:rgba(20,20,24,.62);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:.12s}
.ov-btn:hover{background:rgba(255,255,255,.92);color:#000}
.ov-btn .ic{width:15px;height:15px}
.ov-btn.fav.on{color:#ff6b8b}
.ov-btn.fav.on .ic{fill:currentColor}
.badges{display:flex;gap:4px}
.badge{font-size:10.5px;font-weight:600;padding:2px 6px;border-radius:6px;background:rgba(0,0,0,.6);color:#fff;
  display:inline-flex;align-items:center;gap:4px;backdrop-filter:blur(6px)}
.badge .ic{width:11px;height:11px}
.tile .fav-mark{position:absolute;top:8px;right:8px;color:#ff6b8b;z-index:1;transition:opacity .15s}
.tile .fav-mark .ic{width:15px;height:15px;fill:currentColor;filter:drop-shadow(0 1px 3px rgba(0,0,0,.6))}
.tile:hover .fav-mark{opacity:0}
.tile .vid-mark{position:absolute;left:8px;bottom:8px;z-index:1;transition:opacity .15s}
.tile:hover .vid-mark{opacity:0}

/* generation state */
.gen-state{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  padding:10px;text-align:center;overflow:hidden;cursor:default}
.gen-state>*{position:relative}
.aurora{position:absolute!important;inset:-50%;opacity:.9;filter:blur(36px);
  background:conic-gradient(from 0deg,#24340a,#0c2430,#24123a,#1a3510,#24340a);animation:spin 9s linear infinite}
.st-queued .aurora,.st-waiting .aurora{opacity:.35;filter:blur(40px) grayscale(.6)}
.shimmer{position:absolute!important;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.05) 50%,transparent 65%);
  background-size:250% 100%;animation:shimmer 2.2s linear infinite}
@keyframes shimmer{from{background-position:130% 0}to{background-position:-130% 0}}
.ring{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;
  background:conic-gradient(var(--accent) calc(var(--p,0) * 1%),rgba(255,255,255,.12) 0)}
.ring::before{content:"";position:absolute;inset:4px;border-radius:50%;background:rgba(12,12,15,.86)}
.ring .pct{position:relative;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}
.gs-title{font-size:12.5px;font-weight:600;color:var(--fg)}
.gs-sub{font-size:11px;color:var(--fg-2);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums}
.gs-err{font-size:11px;color:#fca5a5;max-height:3.2em;overflow:hidden;line-height:1.45;word-break:break-word;max-width:100%}
.gs-acts{display:flex;gap:6px;margin-top:2px}
.gs-acts .btn{padding:4px 9px;font-size:11.5px}
.st-failed .gen-state{background:linear-gradient(160deg,rgba(248,113,113,.12),transparent 60%)}
.gs-ic{color:var(--fg-3)}
.gs-ic .ic{width:22px;height:22px}
.st-failed .gs-ic{color:var(--err)}
.cancel{position:absolute;top:8px;right:8px;z-index:2}
.tile .cancel{opacity:0}
.dt-state .cancel{display:none}
.tile:hover .cancel{opacity:1}
.tile.st-running{box-shadow:0 0 0 1px rgba(212,255,58,.35)}

/* empty */
.empty{display:flex;flex-direction:column;align-items:center;text-align:center;padding:12vh 20px 40px;color:var(--fg-2)}
.empty-art{width:64px;height:64px;border-radius:20px;display:grid;place-items:center;color:var(--accent);margin-bottom:18px;
  background:linear-gradient(135deg,#2c3a0c,#14261f 55%,#221535)}
.empty-art .ic{width:28px;height:28px}
.empty h2{margin:0 0 6px;font-size:20px;color:var(--fg);letter-spacing:-.3px}
.empty p{margin:0 0 22px;font-size:13.5px;color:var(--fg-3)}
.ideas{display:grid;grid-template-columns:repeat(2,minmax(0,250px));gap:10px}
.idea{text-align:left;border:1px solid var(--line);background:var(--panel);border-radius:var(--r);padding:12px 14px;transition:.15s}
.idea:hover{border-color:var(--line-2);background:var(--panel-2)}
.idea b{display:block;font-size:13px;color:var(--fg);margin-bottom:3px}
.idea span{font-size:11.5px;color:var(--fg-3);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ------------------------------------------------------------ detail */
.detail{position:fixed;inset:0;z-index:60;display:grid;grid-template-columns:minmax(0,1fr) 400px;
  background:rgba(5,5,7,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);animation:fade .15s ease}
@keyframes fade{from{opacity:0}}
.dt-stage{position:relative;display:flex;align-items:center;justify-content:center;padding:32px 72px;min-width:0;min-height:0}
.dt-media{display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-height:0}
.dt-media img,.dt-media video{max-width:100%;max-height:calc(100vh - 64px);min-height:min(60vh,100%);border-radius:10px;display:block;box-shadow:0 30px 80px rgba(0,0,0,.6);object-fit:contain}
.dt-media .dt-state{position:relative;width:min(100%,760px);aspect-ratio:var(--ar,1.6);border-radius:var(--r-lg);overflow:hidden;background:var(--panel-2)}
.dt-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:1px solid var(--line);
  background:rgba(20,20,24,.7);color:var(--fg);display:grid;place-items:center}
.dt-nav:hover{background:var(--panel-4)}
.dt-nav:disabled{opacity:.25;cursor:default}
.dt-nav.prev{left:16px}.dt-nav.next{right:16px}
.dt-side{background:var(--panel);border-left:1px solid var(--line);display:flex;flex-direction:column;min-height:0}
.dt-head{display:flex;align-items:center;gap:8px;padding:16px 18px;border-bottom:1px solid var(--line)}
.dt-head .grow{flex:1;min-width:0;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dt-body{flex:1;overflow-y:auto;padding:16px 18px;display:flex;flex-direction:column;gap:18px}
.dt-lbl{display:flex;align-items:center;justify-content:space-between;font-size:11.5px;font-weight:650;color:var(--fg-3);
  letter-spacing:.3px;margin-bottom:7px}
.dt-prompt{font-size:13px;line-height:1.6;white-space:pre-wrap;word-break:break-word;color:var(--fg);max-height:38vh;overflow:auto;
  background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:11px 12px}
.dt-inputs{display:flex;gap:6px;flex-wrap:wrap}
.dt-inputs .slot{width:74px}
.dt-meta{display:grid;grid-template-columns:86px 1fr;gap:7px 10px;margin:0;font-size:12.5px}
.dt-meta dt{color:var(--fg-3)}
.dt-meta dd{margin:0;color:var(--fg);word-break:break-all;display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-variant-numeric:tabular-nums}
.dt-meta dd .tool{padding:1px 6px}
.dt-error{font-size:12px;color:#fca5a5;background:rgba(248,113,113,.08);border:1px solid rgba(248,113,113,.25);border-radius:10px;
  padding:10px 12px;white-space:pre-wrap;word-break:break-word;max-height:30vh;overflow:auto}
.dt-acts{padding:14px 18px 18px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.dt-acts .row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.dt-acts .btn{justify-content:center;padding:9px 10px}
.st-badge{font-size:11px;font-weight:650;padding:2px 8px;border-radius:6px;background:var(--panel-3);color:var(--fg-2)}
.st-badge.done{background:rgba(74,222,128,.12);color:var(--ok)}
.st-badge.running{background:var(--accent-dim);color:var(--accent)}
.st-badge.failed{background:rgba(248,113,113,.12);color:var(--err)}
.st-badge.waiting,.st-badge.queued{background:rgba(124,196,255,.1);color:var(--info)}

/* ------------------------------------------------------------ dialogs, toasts */
.dialog-back{position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.6);display:grid;place-items:center;padding:16px}
.dialog{width:min(400px,100%);background:var(--panel-2);border:1px solid var(--line-2);border-radius:var(--r-lg);padding:20px;
  display:flex;flex-direction:column;gap:12px;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.dialog h3{margin:0;font-size:16px}
.dialog p{margin:0;font-size:13px;color:var(--fg-2)}
.dialog input{background:var(--panel);border:1px solid var(--line-2);border-radius:10px;padding:10px 12px;outline:none;color:var(--fg)}
.dialog input:focus{border-color:var(--accent)}
.dialog-acts{display:flex;justify-content:flex-end;gap:8px}
/* nobody logged in: the generate panes are replaced by this card */
.guest-gate{display:none;position:fixed;top:0;right:0;bottom:0;left:72px;z-index:35;padding:24px;
  place-items:center;overflow:auto;
  background:radial-gradient(900px 500px at 30% -10%,rgba(212,255,58,.09),transparent 60%),var(--bg)}
body[data-guest="1"]:not([data-pane=edit]) .guest-gate{display:grid}
/* until /api/auth/me, /api/health and the job list have answered the page only knows
   the saved English prompt (the Korean box needs health.prompt_helper) and an empty
   feed ("무엇을 만들어 볼까요?"): keep both out of sight instead of flashing them */
body[data-boot] #ko-field,body[data-boot] #en-field,body[data-boot] .feed-body{visibility:hidden}
/* a non-Korean page stays hidden until i18n.js has translated the markup (the server sets the
   attribute); the animation is the safety net so it can never stay hidden */
html[data-i18n-pending] body{visibility:hidden;animation:iv-reveal 0s 2s forwards}
@keyframes iv-reveal{to{visibility:visible}}
.gate-card{width:min(400px,100%);display:flex;flex-direction:column;align-items:stretch;gap:12px;text-align:center;
  background:var(--panel-2);border:1px solid var(--line-2);border-radius:var(--r-lg);padding:30px 26px 24px;
  box-shadow:0 30px 80px rgba(0,0,0,.5)}
.gate-ic{width:48px;height:48px;border-radius:14px;margin:0 auto 2px;display:grid;place-items:center;
  background:var(--accent-dim);color:var(--accent);border:1px solid rgba(212,255,58,.28)}
.gate-ic .ic{width:22px;height:22px}
.gate-card h2{margin:2px 0 0;font-size:18px;letter-spacing:-.3px}
.gate-card p{margin:0;font-size:13px;color:var(--fg-3);line-height:1.6}
.gate-go{justify-content:center;padding:11px;font-size:14px;margin-top:6px}
.gate-or{display:flex;align-items:center;gap:10px;color:var(--fg-3);font-size:11.5px}
.gate-or::before,.gate-or::after{content:"";flex:1;height:1px;background:var(--line)}
.gate-edit{justify-content:center;padding:10px;font-size:13.5px}
.gate-edit .ic{width:16px;height:16px}
.gate-note{font-size:12px!important}
/* login / sign-up: a card over the page, closed with ✕ / Esc / a click outside */
.auth-back{position:fixed;inset:0;z-index:85;display:grid;place-items:center;padding:16px;
  background:radial-gradient(1200px 600px at 20% -10%,rgba(212,255,58,.10),transparent 60%),rgba(9,9,11,.92);
  backdrop-filter:blur(6px)}
.auth{width:min(380px,100%);background:var(--panel-2);border:1px solid var(--line-2);border-radius:var(--r-lg);
  padding:28px 24px 20px;display:flex;flex-direction:column;gap:14px;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.auth{position:relative}
.auth-x{position:absolute;top:12px;right:12px;width:30px;height:30px;display:grid;place-items:center;
  background:none;border:0;border-radius:8px;color:var(--fg-3)}
.auth-x:hover{background:var(--panel-3);color:var(--fg)}
.auth-x .ic{width:16px;height:16px}
.auth-logo{height:38px;width:auto;align-self:flex-start}
.auth h2{margin:4px 0 0;font-size:19px;letter-spacing:-.3px}
.auth-sub{margin:-6px 0 4px;font-size:12.5px;color:var(--fg-3);line-height:1.55}
.auth-field{display:flex;flex-direction:column;gap:6px;font-size:12.5px;font-weight:600;color:var(--fg-2)}
.auth-field input{background:var(--panel);border:1px solid var(--line-2);border-radius:10px;padding:10px 12px;
  outline:none;color:var(--fg);font-weight:400;font-size:14px}
.auth-field input:focus{border-color:var(--accent)}
.auth-err{min-height:18px;font-size:12.5px;color:var(--err)}
.auth-err:empty{min-height:0}
.auth-go{justify-content:center;padding:11px;font-size:14px}
.auth-go:disabled{opacity:.6;cursor:wait}
.auth-switch{background:none;border:0;color:var(--fg-3);font-size:12.5px;padding:2px}
.auth-switch b{color:var(--fg-2)}
.auth-switch:hover b{color:var(--accent)}
.toasts{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:90;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{pointer-events:auto;background:var(--panel-3);border:1px solid var(--line-2);color:var(--fg);border-radius:11px;padding:10px 14px;
  font-size:13px;box-shadow:0 14px 40px rgba(0,0,0,.5);display:flex;align-items:center;gap:9px;max-width:min(560px,92vw);animation:rise .18s ease}
.toast .ic{width:16px;height:16px;flex:none}
.toast .t-act{margin-left:4px;flex:none;background:var(--panel-4);border:1px solid var(--line-2);border-radius:7px;
  padding:3px 10px;font-size:12px;font-weight:600;color:var(--fg)}
.toast .t-act:hover{border-color:var(--accent);color:var(--accent)}
.toast.ok .ic{color:var(--ok)}.toast.err .ic{color:var(--err)}.toast.err{border-color:rgba(248,113,113,.35)}
@keyframes rise{from{opacity:0;transform:translateY(8px)}}
.drop-hint{position:fixed;z-index:70;pointer-events:none;display:none;border:2px dashed var(--accent);border-radius:var(--r-lg);
  background:rgba(212,255,58,.06);align-items:flex-end;justify-content:center;padding:16px}
.drop-hint div{background:var(--accent);color:var(--accent-ink);font-weight:650;font-size:12.5px;padding:6px 12px;border-radius:8px}
.drop-hint.on{display:flex}

/* ------------------------------------------------------------ narrow screens */
@media (max-height:520px) and (min-width:861px){
  .rail{gap:2px;padding:8px 0}
  .logo{width:32px;height:32px;margin-bottom:6px}
  .rail-btn{padding:6px 0 4px;gap:2px}
  .rail-btn .ic{width:20px;height:20px}
  .rail-btn.small .ic{width:17px;height:17px}
}
@media (max-width:1100px){
  .app{grid-template-columns:64px 340px minmax(0,1fr)}
  .edit-pane,.guest-gate{left:64px}
  #zoom{display:none}
}
@media (max-width:860px){
  body{overflow:auto}
  .app{display:flex;flex-direction:column;height:auto;min-height:100vh}
  .rail{flex-direction:row;padding:8px 12px;gap:4px;position:sticky;top:0;z-index:40;border-right:0;border-bottom:1px solid var(--line);
    overflow:visible}
  .logo{margin:0 6px 0 0;width:34px;height:34px}
  .rail-btn{width:auto;flex-direction:row;padding:7px 10px;font-size:12.5px;gap:6px}
  .rail-btn .ic{width:18px;height:18px}
  .rail-btn.small span:last-child{display:none}
  .edit-pane{left:0;top:51px}
  .guest-gate{left:0;top:51px}
  .composer{border-right:0;border-bottom:1px solid var(--line)}
  .cmp-body{overflow:visible;padding:8px 16px 18px}
  .cmp-head{padding:16px 16px 4px}
  .cmp-foot{position:sticky;bottom:0;z-index:30;padding:10px 16px 14px}
  .feed{overflow:visible}
  .feed-bar{position:static;padding:12px 16px;gap:8px}
  .bar-right{margin-left:0;width:100%;justify-content:space-between}
  .search{max-width:none}
  .feed-body{padding:14px 16px 40px}
  .grp-acts{opacity:1}
  .tile{flex-basis:calc(var(--ar) * 150px)}
  .ideas{grid-template-columns:1fr}
  .detail{grid-template-columns:1fr;grid-template-rows:minmax(0,55vh) minmax(0,1fr)}
  .dt-stage{padding:12px 52px}
  .dt-media img,.dt-media video{max-height:calc(55vh - 24px)}
  .dt-side{border-left:0;border-top:1px solid var(--line)}
  .dt-nav{width:36px;height:36px}
  .dt-nav.prev{left:8px}.dt-nav.next{right:8px}
}