*{margin:0;padding:0;box-sizing:border-box}
:root{
  --glass:rgba(255,255,255,0.045);
  --glass-hover:rgba(255,255,255,0.07);
  --glass-strong:rgba(255,255,255,0.09);
  --border-glass:rgba(255,255,255,0.08);
  --border-glass-bright:rgba(255,255,255,0.16);
  --text:rgba(255,255,255,0.92);
  --text2:rgba(255,255,255,0.52);
  --text3:rgba(255,255,255,0.28);
  --accent:#a78bfa;
  --accent2:#c4b5fd;
  --accent-glow:rgba(167,139,250,0.25);
  --accent-dim:rgba(167,139,250,0.12);
  --teal:#5eead4;
  --teal-dim:rgba(94,234,212,0.12);
  --red:rgba(248,113,113,0.9);
  --red-dim:rgba(248,113,113,0.12);
  --green:#4ade80;
  --green-dim:rgba(74,222,128,0.12);
  --r:14px;--r2:9px;--r3:6px;
  --bubble-ai-bg:rgba(30,10,60,0.55);
  --bubble-user-bg:rgba(255,255,255,0.14);
}
html,body{height:100%;overflow:hidden;font-family:'Sora',system-ui,sans-serif;font-size:15px;color:var(--text);background:#07050f}

/* === AMBIENT BACKGROUND === */
#scene{position:fixed;inset:0;z-index:0;background:radial-gradient(ellipse 80% 60% at 20% 10%,rgba(110,30,180,0.22) 0%,transparent 60%),radial-gradient(ellipse 60% 80% at 80% 80%,rgba(14,100,130,0.12) 0%,transparent 55%),#07050f}
#bg-layer{position:fixed;inset:0;z-index:1;background-size:cover;background-position:center;opacity:0;transition:opacity 1.4s cubic-bezier(.4,0,.2,1);pointer-events:none}
#bg-layer.visible{opacity:.43}
#bg-overlay{position:fixed;inset:0;z-index:2;background:radial-gradient(ellipse 80% 60% at 20% 10%,rgba(88,28,220,0.12) 0%,transparent 60%),radial-gradient(ellipse 60% 80% at 80% 80%,rgba(14,116,144,0.1) 0%,transparent 55%);pointer-events:none}

/* === CHARACTER LANDING === */

/* === SIDEBAR BACKDROP === */
#sidebar-backdrop{display:none;position:fixed;inset:0;z-index:59;cursor:pointer}
body.sidebar-open #sidebar-backdrop{display:block}

/* === LAYOUT === */
#app{position:relative;z-index:4;display:flex;height:100vh;overflow:hidden}

/* === SIDEBAR === */
#sidebar{
  position:fixed;left:0;top:0;bottom:0;
  width:268px;min-width:268px;
  display:flex;flex-direction:column;
  border-right:1px solid var(--border-glass);
  background:rgba(10,6,20,0.92);
  backdrop-filter:blur(40px) saturate(1.6);
  -webkit-backdrop-filter:blur(40px) saturate(1.6);
  z-index:60;
  transform:translateX(0);
  opacity:1;
  transition:transform .32s cubic-bezier(.4,0,.2,1),opacity .25s;
  overflow:hidden
}
#sidebar.collapsed{transform:translateX(-100%);opacity:0;pointer-events:none}
.sidebar-header{padding:22px 18px 16px;border-bottom:1px solid var(--border-glass);display:flex;align-items:center;gap:10px}
.logo{font-size:16px;font-weight:600;letter-spacing:-.01em;color:var(--text);white-space:nowrap}
.logo em{font-style:normal;background:linear-gradient(135deg,var(--accent2),var(--teal));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.logo-dot{width:7px;height:7px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--teal));box-shadow:0 0 10px var(--accent-glow);flex-shrink:0}
.sidebar-body{flex:1;overflow-y:auto;overflow-x:hidden}
.sidebar-body::-webkit-scrollbar{width:3px}
.sidebar-body::-webkit-scrollbar-thumb{background:var(--border-glass-bright);border-radius:2px}
.s-section{padding:16px 18px;border-bottom:1px solid var(--border-glass)}
.s-label{display:block;font-size:10px;font-family:'JetBrains Mono',monospace;color:var(--text3);letter-spacing:.12em;text-transform:uppercase;margin-bottom:9px;white-space:nowrap}
.glass-input{width:100%;background:var(--glass);border:1px solid var(--border-glass);border-radius:var(--r3);color:var(--text);font-size:13px;font-family:'Sora',sans-serif;padding:8px 11px;outline:none;transition:border-color .2s,background .2s;white-space:nowrap}
.glass-input:focus{border-color:var(--accent);background:var(--glass-hover)}
.glass-input::placeholder{color:var(--text3)}
textarea.glass-input{resize:vertical;min-height:88px;line-height:1.55;white-space:normal;font-size:12.5px}
select.glass-input option{background:#0d0b1e;color:var(--text)}
.status-row{display:flex;align-items:center;gap:7px;margin-top:8px}
.dot{width:5px;height:5px;border-radius:50%;flex-shrink:0;transition:all .3s}
.dot.online{background:var(--green);box-shadow:0 0 6px rgba(74,222,128,.5)}
.dot.offline{background:var(--red)}
.dot.checking{background:var(--accent);animation:pulse-dot 1.2s ease infinite}
@keyframes pulse-dot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.8)}}
.status-text{font-size:11px;font-family:'JetBrains Mono',monospace;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sd-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.sd-mini-label{font-size:10px;font-family:'JetBrains Mono',monospace;color:var(--text3);letter-spacing:.08em;text-transform:uppercase;display:block;margin-bottom:5px}
input[type=number].glass-input{-moz-appearance:textfield;appearance:textfield}
input[type=number].glass-input::-webkit-inner-spin-button{display:none}
.sidebar-footer{padding:14px 18px;border-top:1px solid var(--border-glass)}
.ghost-btn{width:100%;padding:8px 14px;background:transparent;border:1px solid var(--border-glass);border-radius:var(--r3);color:var(--text3);font-size:11px;font-family:'JetBrains Mono',monospace;cursor:pointer;transition:all .2s;letter-spacing:.04em;display:flex;align-items:center;justify-content:center;gap:7px}
.ghost-btn:hover{background:var(--red-dim);border-color:rgba(248,113,113,.3);color:var(--red)}

/* Sidebar character cards */
#sidebar-cards{display:flex;flex-direction:column;gap:10px;padding:14px}
.sc-card{border-radius:var(--r2);border:1px solid var(--border-glass);background:var(--glass);overflow:hidden;cursor:pointer;position:relative;display:flex;align-items:center;gap:11px;padding:10px 12px;transition:border-color .2s,background .2s;text-decoration:none}
.sc-card:hover{background:var(--glass-hover);border-color:var(--border-glass-bright)}
.sc-card.active{border-color:var(--teal);background:rgba(94,234,212,.06)}
.sc-card-bg{position:absolute;inset:0;background-size:cover;background-position:center top;filter:blur(20px) brightness(0.18) saturate(1.2);transform:scale(1.15);pointer-events:none}
.sc-card-avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--accent-dim),var(--teal-dim));border:1.5px solid var(--border-glass-bright);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;color:var(--accent2);letter-spacing:.02em;flex-shrink:0;overflow:hidden;position:relative;z-index:1}
.sc-card-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.sc-card-info{flex:1;min-width:0;position:relative;z-index:1}
.sc-card-name{font-size:13px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-card-bio{font-size:10px;color:var(--text3);font-family:'JetBrains Mono',monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.sc-new-card{border-radius:var(--r2);border:1.5px dashed rgba(167,139,250,0.22);background:rgba(167,139,250,0.04);cursor:pointer;display:flex;align-items:center;gap:11px;padding:10px 12px;transition:border-color .2s,background .2s}
.sc-new-card:hover{border-color:var(--accent);background:rgba(167,139,250,0.09)}
.sc-new-icon{width:40px;height:40px;border-radius:50%;background:var(--accent-dim);border:1.5px solid rgba(167,139,250,0.2);display:flex;align-items:center;justify-content:center;font-size:20px;color:var(--accent);flex-shrink:0}
.sc-new-label{font-size:12px;font-weight:600;color:var(--accent2)}

/* === MAIN === */
#main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0;width:100%}

/* === TOPBAR === */
#topbar-zone{
  position:fixed;top:0;left:0;right:0;
  height:44px;
  z-index:55;
}
#topbar-zone::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,transparent,rgba(167,139,250,.18),transparent);
  pointer-events:none;
}
#topbar{
  display:flex;align-items:center;gap:12px;padding:0 20px;height:44px;
  border-bottom:1px solid rgba(255,255,255,.06);
  background:rgba(7,5,15,0.78);
  backdrop-filter:blur(32px) saturate(1.6);
  -webkit-backdrop-filter:blur(32px) saturate(1.6);
  transform:translateY(-100%);
  opacity:0;
  pointer-events:none;
  transition:transform .3s cubic-bezier(.4,0,.2,1),opacity .25s;
}
#topbar-zone:hover #topbar{transform:translateY(0);opacity:1;pointer-events:all}
body.sidebar-open #topbar{transform:translateY(0);opacity:1;pointer-events:all}
#toggle-sidebar{background:var(--glass);border:1px solid var(--border-glass);border-radius:var(--r3);width:32px;height:32px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0;color:var(--text2)}
#toggle-sidebar:hover{background:var(--glass-hover);border-color:var(--border-glass-bright)}
.topbar-persona{display:flex;align-items:center;gap:9px}
.persona-avatar-sm{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,rgba(167,139,250,.25),rgba(94,234,212,.15));border:1px solid rgba(167,139,250,.3);display:flex;align-items:center;justify-content:center;font-size:9px;font-family:'JetBrains Mono',monospace;color:var(--accent2);flex-shrink:0;letter-spacing:.04em}
#persona-name-display{font-family:'Cormorant Garamond',serif;font-size:20px;font-weight:400;font-style:italic;color:var(--text);letter-spacing:.01em}
.topbar-sep{width:1px;height:16px;background:var(--border-glass);flex-shrink:0}
#model-display{font-size:10px;font-family:'JetBrains Mono',monospace;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:8px}
.status-pill{display:flex;align-items:center;gap:5px;padding:4px 10px;background:var(--glass);border:1px solid var(--border-glass);border-radius:20px;font-size:10px;font-family:'JetBrains Mono',monospace;color:var(--text3)}

/* === CHAT === */
#chat-area{flex:1;overflow-y:auto;padding:28px 0 12px;scroll-behavior:smooth}
#chat-area::-webkit-scrollbar{width:3px}
#chat-area::-webkit-scrollbar-track{background:transparent}
#chat-area::-webkit-scrollbar-thumb{background:var(--border-glass);border-radius:2px}

/* === WELCOME === */
#welcome{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;flex:1;min-height:60vh;text-align:center;padding:40px 24px 60px;gap:14px}
.welcome-ring{width:72px;height:72px;border-radius:50%;background:radial-gradient(circle at 35% 35%,rgba(167,139,250,.18),rgba(94,234,212,.07));border:1px solid rgba(167,139,250,.2);display:flex;align-items:center;justify-content:center;margin-bottom:6px;box-shadow:0 0 40px rgba(167,139,250,.08),inset 0 1px 0 rgba(255,255,255,.06)}
#welcome h2{font-family:'Cormorant Garamond',serif;font-size:42px;font-weight:300;color:var(--text);letter-spacing:-.01em;font-style:italic}
#welcome p{font-size:13px;color:var(--text3);max-width:320px;line-height:1.75}
.welcome-chips{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:6px}
.chip{padding:5px 13px;background:var(--glass);border:1px solid var(--border-glass);border-radius:20px;font-size:11px;color:var(--text3);cursor:pointer;transition:all .2s}
.chip:hover{background:var(--accent-dim);border-color:rgba(167,139,250,.3);color:var(--accent2)}

/* === MESSAGES === */
#messages{display:none;padding-bottom:8px}
.message{display:flex;gap:12px;padding:6px 28px;max-width:820px;margin:0 auto;width:100%;animation:msg-in .25s cubic-bezier(.4,0,.2,1)}
.message.expanded-img{display:block;max-width:100%;width:100%;padding:6px 0;text-align:center}.message.expanded-img .msg-avatar{display:none}.message.expanded-img .msg-content{display:block;width:100%;text-align:center}
@keyframes msg-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.message.user{flex-direction:row-reverse}
.msg-avatar{width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-family:'JetBrains Mono',monospace;flex-shrink:0;margin-top:4px;letter-spacing:.04em;overflow:hidden}
.msg-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.message.user .msg-avatar{background:var(--glass-strong);border:1px solid var(--border-glass);color:var(--text3)}
.message.ai .msg-avatar{background:linear-gradient(135deg,rgba(167,139,250,.18),rgba(94,234,212,.1));border:1px solid rgba(167,139,250,.28);color:var(--accent2);box-shadow:0 0 12px rgba(167,139,250,.1)}
.msg-content{flex:1;min-width:0}
.msg-bubble{font-size:14.5px;line-height:1.7;border-radius:var(--r);padding:11px 15px}
.message.user .msg-bubble{background:var(--bubble-user-bg);border:1px solid rgba(255,255,255,0.12);color:var(--text);border-radius:var(--r) var(--r) 4px var(--r);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.message.ai .msg-bubble{background:var(--bubble-ai-bg);border:1px solid rgba(167,139,250,0.15);padding:12px 16px;color:rgba(255,255,255,.92);font-size:15px;line-height:1.85;border-radius:4px var(--r) var(--r) var(--r);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.message.ai .msg-bubble em{color:var(--accent2);font-style:italic;opacity:1}
.msg-image{position:relative;margin-top:10px;border-radius:var(--r);overflow:hidden;border:1px solid var(--border-glass);max-width:400px;box-shadow:0 8px 40px rgba(0,0,0,.5);transition:max-width .3s cubic-bezier(.4,0,.2,1),border-radius .3s}
.msg-image.expanded{width:47.5vw;max-width:47.5vw;margin:0 auto;display:block;border-radius:var(--r)}
.msg-image.expanded .img-overlay{opacity:1}
.msg-image img{width:100%;display:block}
.img-overlay{position:absolute;top:8px;right:8px;display:flex;gap:5px;opacity:0;transition:opacity .2s}
.msg-image:hover .img-overlay{opacity:1}
.img-action-btn{width:30px;height:30px;border-radius:var(--r3);background:rgba(4,4,10,.75);border:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.8);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.img-action-btn:hover{background:var(--accent-dim);border-color:rgba(167,139,250,.4);color:var(--accent2)}
a.img-action-btn{text-decoration:none}
.msg-image-loading{padding:13px 15px;background:var(--glass);border-radius:var(--r);border:1px solid var(--border-glass);display:flex;align-items:center;gap:10px;font-size:12px;font-family:'JetBrains Mono',monospace;color:var(--text3);max-width:400px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.gen-spinner{width:14px;height:14px;border-radius:50%;border:1.5px solid rgba(167,139,250,.2);border-top-color:var(--accent);animation:spin .7s linear infinite;flex-shrink:0}
@keyframes spin{to{transform:rotate(360deg)}}
.visualize-btn{display:inline-flex;align-items:center;gap:5px;margin-top:9px;padding:5px 11px;background:transparent;border:1px solid var(--border-glass);border-radius:20px;color:var(--text3);font-size:11px;font-family:'JetBrains Mono',monospace;cursor:pointer;transition:all .2s}
.visualize-btn:hover{background:var(--accent-dim);border-color:rgba(167,139,250,.35);color:var(--accent2)}
.regen-btn{display:inline-flex;align-items:center;gap:5px;margin-top:7px;padding:5px 11px;background:transparent;border:1px solid var(--border-glass);border-radius:20px;color:var(--text3);font-size:11px;font-family:'JetBrains Mono',monospace;cursor:pointer;transition:all .2s}
.regen-btn:hover{background:var(--teal-dim);border-color:rgba(94,234,212,.35);color:var(--teal)}
.regen-btn:disabled{opacity:.4;cursor:not-allowed}

/* Typing */
#typing-indicator{display:none;padding:6px 28px;max-width:820px;margin:0 auto;width:100%}
#typing-indicator.visible{display:flex;gap:12px;align-items:center}
.typing-wrap{display:flex;align-items:center;gap:5px;padding:10px 14px;background:var(--glass);border:1px solid var(--border-glass);border-radius:20px;backdrop-filter:blur(10px)}
.typing-dot{width:5px;height:5px;border-radius:50%;background:var(--accent);opacity:.4}
.typing-dot:nth-child(1){animation:t-bounce .9s infinite}
.typing-dot:nth-child(2){animation:t-bounce .9s .2s infinite}
.typing-dot:nth-child(3){animation:t-bounce .9s .4s infinite}
@keyframes t-bounce{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}

/* === INPUT === */
#input-area{padding:14px 20px 18px;background:rgba(7,5,15,0.48);border-top:1px solid rgba(255,255,255,.05);backdrop-filter:blur(32px);-webkit-backdrop-filter:blur(32px);flex-shrink:0}
#input-wrap{display:flex;gap:8px;max-width:820px;margin:0 auto;align-items:flex-end}
#user-input{flex:1;background:var(--glass);border:1px solid var(--border-glass);border-radius:var(--r);color:var(--text);font-size:14px;font-family:'Sora',sans-serif;padding:11px 15px;outline:none;resize:none;min-height:46px;max-height:160px;line-height:1.55;transition:border-color .2s,background .2s;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
#user-input:focus{border-color:rgba(167,139,250,.4);background:var(--glass-hover)}
#user-input::placeholder{color:var(--text3)}
.icon-btn{width:44px;height:44px;border-radius:var(--r2);border:1px solid var(--border-glass);background:var(--glass);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0;margin-bottom:1px}
.icon-btn:hover{background:var(--glass-hover);border-color:var(--border-glass-bright)}
.icon-btn:disabled{opacity:.35;cursor:not-allowed}
#gen-img-btn{color:var(--text3)}
#gen-img-btn:hover:not(:disabled){border-color:rgba(94,234,212,.4);color:var(--teal);background:var(--teal-dim)}
#send-btn{background:linear-gradient(135deg,rgba(167,139,250,.3),rgba(94,234,212,.15));border-color:rgba(167,139,250,.35);color:var(--accent2)}
#send-btn:hover:not(:disabled){background:linear-gradient(135deg,rgba(167,139,250,.45),rgba(94,234,212,.25));border-color:rgba(167,139,250,.55);box-shadow:0 0 20px rgba(167,139,250,.18)}
.input-hint{font-size:10px;font-family:'JetBrains Mono',monospace;color:var(--text3);text-align:center;margin-top:9px;max-width:820px;margin-left:auto;margin-right:auto}

/* === FLOATING IMAGE PANEL === */
#img-panel{
  position:fixed;
  top:54px;right:18px;bottom:18px;
  width:640px;
  min-width:380px;
  background:rgba(10,8,22,.95);
  border:1px solid var(--border-glass-bright);
  border-radius:var(--r);
  backdrop-filter:blur(36px) saturate(1.6);
  -webkit-backdrop-filter:blur(36px) saturate(1.6);
  box-shadow:0 16px 60px rgba(0,0,0,.6);
  z-index:50;
  transition:opacity .2s,transform .2s cubic-bezier(.4,0,.2,1);
  user-select:none;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
#img-panel.hidden{opacity:0;pointer-events:none;transform:translateY(10px) scale(.97)}

/* Resize handles */
.ip-rz{position:absolute;z-index:20}
#ip-rz-e{right:0;top:10px;bottom:10px;width:4px;cursor:ew-resize}
#ip-rz-s{left:10px;right:10px;bottom:0;height:4px;cursor:ns-resize}
#ip-rz-se{right:0;bottom:0;width:12px;height:12px;cursor:nwse-resize}
.ip-rz:hover{background:rgba(167,139,250,.3)}

/* Header */
#img-panel-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 14px 9px;
  border-bottom:1px solid var(--border-glass);
  cursor:move;
  flex-shrink:0;
  background:rgba(255,255,255,.02);
}
#img-panel-title{font-size:11px;font-family:'JetBrains Mono',monospace;color:var(--text2);letter-spacing:.1em;text-transform:uppercase;display:flex;align-items:center;gap:7px}
.img-panel-btns{display:flex;gap:4px}
.img-panel-btn{background:transparent;border:none;color:var(--text3);cursor:pointer;padding:3px 6px;border-radius:4px;line-height:1;font-size:14px;transition:color .15s}
.img-panel-btn:hover{color:var(--text)}

/* Tab layout — the key is table-like layout so columns don't fight */
#img-panel-tabs{
  display:flex;
  flex:1;
  overflow:hidden;
  min-height:0;
}
.ip-tab-bar{
  width:76px;
  min-width:76px;
  max-width:76px;
  flex-shrink:0;
  flex-grow:0;
  display:flex;
  flex-direction:column;
  padding:4px 0;
  border-right:1px solid var(--border-glass);
  overflow-y:auto;
  overflow-x:hidden;
}
.ip-tab-bar::-webkit-scrollbar{width:0}
.ip-tab{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;padding:10px 4px;
  cursor:pointer;
  border-left:2px solid transparent;
  color:var(--text3);
  font-size:9px;font-family:'JetBrains Mono',monospace;
  letter-spacing:.05em;text-transform:uppercase;text-align:center;line-height:1.2;
  transition:all .15s;
}
.ip-tab:hover{color:var(--text2);background:var(--glass)}
.ip-tab.active{color:var(--teal);border-left-color:var(--teal);background:rgba(94,234,212,.06)}
.ip-tab svg{flex-shrink:0}

/* Content area — shrinks to fill remaining space, never overflows */
.ip-tab-content{
  flex:1;
  min-width:0;
  overflow-y:auto;
  overflow-x:hidden;
  padding:14px;
}
.ip-tab-content::-webkit-scrollbar{width:3px}
.ip-tab-content::-webkit-scrollbar-thumb{background:var(--border-glass);border-radius:2px}
.ip-pane{display:none;flex-direction:column;gap:11px}
.ip-pane.active{display:flex}

/* Form elements */
.ip-label{font-size:10px;font-family:'JetBrains Mono',monospace;color:var(--text3);letter-spacing:.1em;text-transform:uppercase;margin-bottom:5px;display:block}
.ip-label-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px}
.ip-label-row .ip-label{margin:0}
.ip-refresh{background:transparent;border:none;color:var(--text3);cursor:pointer;font-size:10px;font-family:'JetBrains Mono',monospace;padding:0;transition:color .15s}
.ip-refresh:hover{color:var(--teal)}
.ip-input{
  display:block;
  width:100%;
  background:var(--glass);
  border:1px solid var(--border-glass);
  border-radius:var(--r3);
  color:var(--text);
  font-size:12px;font-family:'Sora',sans-serif;
  padding:7px 10px;
  outline:none;
  transition:border-color .2s,background .2s;
  color-scheme:dark;
  box-sizing:border-box;
}
.ip-input:focus{border-color:var(--accent);background:var(--glass-hover)}
.ip-input::placeholder{color:var(--text3)}
.ip-input option{background:#0d0b1e;color:rgba(255,255,255,.9)}
select.ip-input{cursor:pointer}
input[type=number].ip-input{-moz-appearance:textfield;appearance:textfield}
input[type=number].ip-input::-webkit-inner-spin-button{display:none}
.ip-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ip-slider-row{display:flex;align-items:center;gap:8px;margin-top:4px}
.ip-slider-row input[type=range]{flex:1;accent-color:var(--accent);min-width:0}
.ip-slider-val{font-size:11px;font-family:'JetBrains Mono',monospace;color:var(--accent2);min-width:36px;text-align:right;flex-shrink:0}
.ip-check-row{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--text2);cursor:pointer}
.ip-check-row input[type=checkbox]{accent-color:var(--teal);width:13px;height:13px;cursor:pointer;flex-shrink:0}
.ip-section{font-size:10px;color:var(--teal);font-family:'JetBrains Mono',monospace;letter-spacing:.1em;text-transform:uppercase;padding-bottom:6px;border-bottom:1px solid var(--border-glass);margin-bottom:2px}
.ip-status{font-size:11px;font-family:'JetBrains Mono',monospace;color:var(--text3);margin-top:5px}

/* Topbar toggle button */
#img-settings-btn{display:flex;align-items:center;gap:5px;padding:4px 10px;background:var(--glass);border:1px solid var(--border-glass);border-radius:20px;font-size:10px;font-family:'JetBrains Mono',monospace;color:var(--text3);cursor:pointer;transition:all .2s}
#img-settings-btn:hover{background:var(--teal-dim);border-color:rgba(94,234,212,.35);color:var(--teal)}
#img-settings-btn.active{background:var(--teal-dim);border-color:rgba(94,234,212,.4);color:var(--teal)}

/* Settings panel layout */
#settings-layout{display:flex;flex:1;min-height:0;overflow:hidden}
#settings-nav{width:90px;min-width:90px;border-right:1px solid var(--border-glass);display:flex;flex-direction:column;gap:2px;padding:8px 6px;background:rgba(255,255,255,.01)}
.sn-tab{display:flex;flex-direction:column;align-items:center;gap:5px;padding:10px 6px;border-radius:var(--r3);border:none;background:transparent;color:var(--text3);cursor:pointer;font-size:10px;font-family:'JetBrains Mono',monospace;letter-spacing:.04em;transition:all .15s;width:100%;text-align:center}
.sn-tab:hover{color:var(--text2);background:var(--glass)}
.sn-tab.active{color:var(--teal);background:rgba(94,234,212,.07);border:1px solid rgba(94,234,212,.15)}
.sn-tab svg{flex-shrink:0}
#settings-content{flex:1;min-width:0;display:flex;overflow:hidden}
.sp-pane{display:none;flex-direction:column;flex:1;min-height:0;overflow:hidden}
.sp-pane.active{display:flex}
/* Character pane */
#sp-char-topbar{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--border-glass);flex-shrink:0;background:rgba(255,255,255,.02)}
#sp-char-topbar-info{display:flex;align-items:center;gap:9px}
.sp-char-action-btn{display:flex;align-items:center;gap:5px;padding:5px 10px;background:var(--glass);border:1px solid var(--border-glass);border-radius:var(--r3);color:var(--text3);font-size:10px;font-family:'JetBrains Mono',monospace;cursor:pointer;transition:all .15s}
.sp-char-action-btn:hover{color:var(--accent2);border-color:rgba(167,139,250,.3)}
.sp-char-body{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:0}
.sp-char-body::-webkit-scrollbar{width:3px}
.sp-char-body::-webkit-scrollbar-thumb{background:var(--border-glass);border-radius:2px}
.sp-char-footer{padding:12px 14px;border-top:1px solid var(--border-glass);display:flex;gap:8px;justify-content:flex-end;flex-shrink:0;background:rgba(255,255,255,.02)}
/* Images pane reuses #img-panel-tabs styles but needs flex adjustment */
#sp-images{overflow:hidden}
#sp-images #img-panel-tabs{display:flex;flex:1;min-height:0;overflow:hidden}

/* === NOTIFICATION === */
#notif{position:fixed;top:18px;right:18px;padding:10px 16px;border-radius:var(--r2);background:rgba(10,8,24,.9);border:1px solid var(--border-glass);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);font-size:11px;font-family:'JetBrains Mono',monospace;color:var(--text2);transform:translateY(-70px) scale(.96);opacity:0;transition:all .3s cubic-bezier(.4,0,.2,1);z-index:999;display:flex;align-items:center;gap:8px;box-shadow:0 4px 24px rgba(0,0,0,.4)}
#notif.show{transform:translateY(0) scale(1);opacity:1}
#notif.error{border-color:rgba(248,113,113,.3);color:var(--red)}
#notif.success{border-color:rgba(74,222,128,.3);color:var(--green)}
.notif-dot{width:5px;height:5px;border-radius:50%;background:currentColor;flex-shrink:0}

/* === CHARACTER SELECTOR === */
.char-select-row{display:flex;gap:6px;align-items:center}
.char-select-row select{flex:1}
.char-icon-btn{width:30px;height:30px;flex-shrink:0;background:var(--glass);border:1px solid var(--border-glass);border-radius:var(--r3);color:var(--text3);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}
.char-icon-btn:hover{background:var(--glass-hover);border-color:var(--border-glass-bright);color:var(--text)}
.char-icon-btn.accent:hover{background:var(--accent-dim);border-color:rgba(167,139,250,.35);color:var(--accent2)}
.char-icon-btn.danger:hover{background:var(--red-dim);border-color:rgba(248,113,113,.3);color:var(--red)}

/* === MODAL === */
#modal-overlay{position:fixed;inset:0;z-index:100;background:rgba(4,4,10,.75);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:none;align-items:center;justify-content:center;padding:20px}
#modal-overlay.open{display:flex;animation:fade-in .2s ease}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
#modal{
  width:100%;max-width:480px;
  background:rgba(12,10,26,.95);
  border:1px solid var(--border-glass-bright);
  border-radius:var(--r);
  backdrop-filter:blur(40px);
  -webkit-backdrop-filter:blur(40px);
  box-shadow:0 24px 80px rgba(0,0,0,.6),0 0 0 1px rgba(167,139,250,.06);
  animation:modal-in .25s cubic-bezier(.4,0,.2,1)
}
@keyframes modal-in{from{opacity:0;transform:scale(.95) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)}}
.modal-header{padding:20px 22px 16px;border-bottom:1px solid var(--border-glass);display:flex;align-items:center;justify-content:space-between}
.modal-title{font-size:14px;font-weight:500;color:var(--text);letter-spacing:-.01em}
.modal-close{background:transparent;border:none;color:var(--text3);cursor:pointer;font-size:18px;line-height:1;padding:2px 4px;border-radius:4px;transition:color .15s}
.modal-close:hover{color:var(--text)}
.modal-body{padding:20px 22px;display:flex;flex-direction:column;gap:14px}
.modal-field label{display:block;font-size:10px;font-family:'JetBrains Mono',monospace;color:var(--text3);letter-spacing:.1em;text-transform:uppercase;margin-bottom:7px}
.modal-field input,.modal-field textarea{width:100%;background:var(--glass);border:1px solid var(--border-glass);border-radius:var(--r3);color:var(--text);font-size:13px;font-family:'Sora',sans-serif;padding:9px 12px;outline:none;transition:border-color .2s,background .2s}
.modal-field input:focus,.modal-field textarea:focus{border-color:var(--accent);background:var(--glass-hover)}
.modal-field input::placeholder,.modal-field textarea::placeholder{color:var(--text3)}
.modal-field textarea{resize:vertical;line-height:1.55;font-size:12.5px}
.modal-hint{font-size:11px;color:var(--text3);font-family:'JetBrains Mono',monospace;margin-top:4px;line-height:1.5}
.modal-footer{padding:14px 22px 18px;border-top:1px solid var(--border-glass);display:flex;gap:8px;justify-content:flex-end}
.modal-btn{padding:8px 18px;border-radius:var(--r3);font-size:12px;font-family:'JetBrains Mono',monospace;cursor:pointer;transition:all .2s;letter-spacing:.03em}
.modal-btn.cancel{background:transparent;border:1px solid var(--border-glass);color:var(--text3)}
.modal-btn.cancel:hover{background:var(--glass);color:var(--text)}
.modal-btn.save{background:linear-gradient(135deg,rgba(167,139,250,.35),rgba(94,234,212,.2));border:1px solid rgba(167,139,250,.4);color:var(--accent2)}
.modal-btn.save:hover{background:linear-gradient(135deg,rgba(167,139,250,.5),rgba(94,234,212,.3));box-shadow:0 0 16px rgba(167,139,250,.15)}
.modal-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.modal-row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.modal-section{font-size:10px;color:var(--teal);font-family:'JetBrains Mono',monospace;letter-spacing:.1em;text-transform:uppercase;padding-bottom:7px;border-bottom:1px solid var(--border-glass);margin-bottom:2px}
.format-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.format-card{background:var(--glass);border:1px solid var(--border-glass);border-radius:var(--r3);padding:10px 12px}
.format-card label.fc-title{display:block;font-size:10px;font-family:'JetBrains Mono',monospace;color:var(--text2);letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px}
.format-toggle{display:flex;gap:6px}
.format-toggle label{flex:1;display:flex;align-items:center;justify-content:center;padding:5px 4px;border:1px solid var(--border-glass);border-radius:var(--r3);font-size:11px;font-family:'JetBrains Mono',monospace;color:var(--text3);cursor:pointer;transition:all .15s;text-align:center}
.format-toggle input[type=radio]{display:none}
.format-toggle input[type=radio]:checked + label{background:var(--accent-dim);border-color:rgba(167,139,250,.4);color:var(--accent2)}
.hardcoded-rules{background:rgba(94,234,212,.04);border:1px solid rgba(94,234,212,.15);border-radius:var(--r3);padding:11px 13px;display:flex;flex-direction:column;gap:6px}
.hardcoded-rule{display:flex;align-items:flex-start;gap:8px;font-size:12px;color:var(--text3);line-height:1.5}
.hardcoded-rule-dot{width:4px;height:4px;border-radius:50%;background:var(--teal);flex-shrink:0;margin-top:6px}
.bubble-color-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:2px}
.bubble-color-card{background:var(--glass);border:1px solid var(--border-glass);border-radius:var(--r3);padding:10px 12px;display:flex;flex-direction:column;gap:8px}
.bubble-color-card label.fc-title{display:block;font-size:10px;font-family:'JetBrains Mono',monospace;color:var(--text2);letter-spacing:.08em;text-transform:uppercase}
.bubble-color-row{display:flex;align-items:center;gap:8px}
.bubble-color-row input[type=color]{width:28px;height:28px;border:1px solid var(--border-glass);border-radius:var(--r3);background:transparent;cursor:pointer;padding:2px;flex-shrink:0}
.bubble-color-row input[type=range]{flex:1;accent-color:var(--accent);min-width:0}
.bubble-alpha-val{font-size:11px;font-family:'JetBrains Mono',monospace;color:var(--accent2);min-width:30px;text-align:right;flex-shrink:0}
.bubble-preview{border-radius:4px var(--r3) var(--r3) var(--r3);padding:8px 11px;font-size:12px;color:rgba(255,255,255,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,0.08);font-family:'Sora',sans-serif;line-height:1.5}
.bubble-preview.user-preview{border-radius:var(--r3) var(--r3) 4px var(--r3)}
.char-avatar-upload{width:64px;height:64px;border-radius:50%;border:1.5px dashed var(--border-glass-bright);background:var(--glass);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text3);flex-shrink:0;overflow:hidden;transition:border-color .2s,box-shadow .2s}
.char-avatar-upload:hover{border-color:var(--accent);box-shadow:0 0 10px rgba(167,139,250,.2)}
.char-avatar-upload img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.persona-avatar-sm{overflow:hidden}

/* === WARDROBE ZONE === */
#wardrobe-zone{position:fixed;pointer-events:none;z-index:46}

#wardrobe-tab{
  position:fixed;right:0;top:50%;
  transform:translateY(-50%);
  width:28px;height:130px;
  background:rgba(10,8,22,0.72);
  border:1px solid rgba(167,139,250,.18);
  border-right:none;
  border-radius:8px 0 0 8px;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  cursor:default;
  color:rgba(255,255,255,.22);
  font-size:7px;font-family:'JetBrains Mono',monospace;
  letter-spacing:.15em;text-transform:uppercase;
  writing-mode:vertical-rl;text-orientation:mixed;
  user-select:none;
  pointer-events:all;
  z-index:47;
  opacity:1;
  transition:opacity .25s ease,transform .25s ease;
}
#wardrobe-tab.wz-open{opacity:0;pointer-events:none;transform:translateY(-50%) translateX(8px)}

/* === WARDROBE PANEL === */
#wardrobe-panel{
  position:fixed;top:0;right:0;bottom:0;
  width:300px;
  background:rgba(9,7,20,0.97);
  border-left:1px solid var(--border-glass-bright);
  border-radius:0;
  backdrop-filter:blur(40px) saturate(1.6);
  -webkit-backdrop-filter:blur(40px) saturate(1.6);
  box-shadow:-12px 0 60px rgba(0,0,0,.6);
  z-index:48;
  transform:translateX(110%);
  opacity:0;
  pointer-events:none;
  transition:transform .32s cubic-bezier(.4,0,.2,1),opacity .28s ease;
  user-select:none;
  display:flex;flex-direction:column;
  overflow:hidden;
}
#wardrobe-panel.wz-open{transform:translateX(0);opacity:1;pointer-events:all}


/* Wardrobe resize handles — hidden in new edge-panel layout */
.wp-rz{display:none}

#wardrobe-panel-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 14px 9px;
  border-bottom:1px solid var(--border-glass);
  cursor:default;
  flex-shrink:0;
  background:rgba(255,255,255,.02);
}
#wardrobe-panel-title{font-size:11px;font-family:"JetBrains Mono",monospace;color:var(--text2);letter-spacing:.1em;text-transform:uppercase;display:flex;align-items:center;gap:8px}
#wardrobe-panel-body{flex:1;min-height:0;overflow-y:auto;padding:10px}
#wardrobe-panel-body::-webkit-scrollbar{width:3px}
#wardrobe-panel-body::-webkit-scrollbar-thumb{background:var(--border-glass);border-radius:2px}
#wardrobe-panel-footer{flex-shrink:0;padding:10px;border-top:1px solid var(--border-glass);display:flex;gap:6px}

/* Active outfit bar */
#wardrobe-active-bar{
  display:flex;align-items:center;gap:8px;
  padding:7px 10px;
  background:rgba(94,234,212,.07);
  border:1px solid rgba(94,234,212,.2);
  border-radius:var(--r3);
  margin-bottom:10px;
  font-size:11px;font-family:"JetBrains Mono",monospace;
}
#wardrobe-active-thumb{width:28px;height:36px;border-radius:3px;object-fit:cover;border:1px solid rgba(94,234,212,.3);flex-shrink:0}
#wardrobe-active-name{flex:1;color:var(--teal)}
#wardrobe-active-clear{background:transparent;border:none;color:var(--text3);cursor:pointer;padding:2px 4px;font-size:12px;transition:color .15s}
#wardrobe-active-clear:hover{color:var(--red)}

/* Category */
.wcat{border:1px solid var(--border-glass);border-radius:var(--r3);margin-bottom:8px;overflow:hidden}
.wcat-header{display:flex;align-items:center;gap:8px;padding:8px 10px;cursor:pointer;user-select:none;background:var(--glass);transition:background .15s}
.wcat-header:hover{background:var(--glass-hover)}
.wcat-arrow{font-size:9px;color:var(--text3);transition:transform .2s;flex-shrink:0}
.wcat-arrow.open{transform:rotate(90deg)}
.wcat-name{flex:1;font-size:11px;font-family:"JetBrains Mono",monospace;color:var(--text2);letter-spacing:.05em}
.wcat-count{font-size:9px;font-family:"JetBrains Mono",monospace;color:var(--text3);background:var(--glass);padding:2px 6px;border-radius:10px}
.wcat-edit-btns{display:none;gap:3px}
.wardrobe-edit-mode .wcat-edit-btns{display:flex}
.wcat-btn{background:transparent;border:none;color:var(--text3);cursor:pointer;padding:2px 5px;border-radius:3px;font-size:10px;transition:color .15s}
.wcat-btn:hover{color:var(--accent2)}
.wcat-btn.danger:hover{color:var(--red)}
.wcat-body{display:none;padding:8px;background:rgba(0,0,0,.2)}
.wcat-body.open{display:block}
.wcat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}

/* Outfit card */
.wo-card{position:relative;border-radius:var(--r3);overflow:hidden;border:1px solid var(--border-glass);cursor:pointer;aspect-ratio:3/4;background:var(--glass);transition:border-color .15s,transform .15s}
.wo-card:hover{border-color:var(--accent2);transform:translateY(-1px)}
.wo-card.active{border-color:var(--teal);box-shadow:0 0 0 2px rgba(94,234,212,.3)}
.wo-card img{width:100%;height:100%;object-fit:cover;display:block}
.wo-card-empty{height:100%;display:flex;align-items:center;justify-content:center;padding:6px;text-align:center;font-size:8px;font-family:"JetBrains Mono",monospace;color:var(--text3)}
.wo-card-label{position:absolute;bottom:0;left:0;right:0;padding:3px 5px;font-size:8px;font-family:"JetBrains Mono",monospace;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.85));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wo-card-active-dot{position:absolute;top:4px;left:4px;width:8px;height:8px;border-radius:50%;background:var(--teal);display:none}
.wo-card.active .wo-card-active-dot{display:block}
.wo-card-del{position:absolute;top:3px;right:3px;background:rgba(0,0,0,.7);border:none;border-radius:50%;width:18px;height:18px;color:var(--red);cursor:pointer;font-size:10px;display:none;align-items:center;justify-content:center;line-height:1}
.wardrobe-edit-mode .wo-card-del{display:flex}
.wo-card-add{border:1px dashed var(--border-glass);border-radius:var(--r3);aspect-ratio:3/4;flex-direction:column;align-items:center;justify-content:center;gap:3px;cursor:pointer;color:var(--text3);font-size:8px;font-family:"JetBrains Mono",monospace;transition:border-color .2s,color .2s;text-align:center;padding:5px;display:none}
.wardrobe-edit-mode .wo-card-add{display:flex}
.wo-card-add:hover{border-color:var(--accent);color:var(--accent2)}
.wcat-add-row{display:none;align-items:center;justify-content:center;gap:7px;padding:8px;border:1px dashed var(--border-glass);border-radius:var(--r3);cursor:pointer;color:var(--text3);font-size:10px;font-family:"JetBrains Mono",monospace;transition:border-color .2s,color .2s;margin-top:4px}
.wardrobe-edit-mode .wcat-add-row{display:flex}
.wcat-add-row:hover{border-color:var(--accent);color:var(--accent2)}

/* Outfit editor modal */
#outfit-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(8px);z-index:210;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .2s}
#outfit-modal-overlay.open{opacity:1;pointer-events:all}
#outfit-modal{background:rgba(12,10,26,.97);border:1px solid var(--border-glass-bright);border-radius:var(--r);padding:0;width:440px;max-width:95vw;max-height:90vh;overflow-y:auto;box-shadow:0 24px 80px rgba(0,0,0,.8)}
.outfit-thumb-preview{width:100%;aspect-ratio:3/4;border-radius:var(--r3);border:1px solid var(--border-glass);background:var(--glass);display:flex;align-items:center;justify-content:center;color:var(--text3);font-size:10px;font-family:"JetBrains Mono",monospace;overflow:hidden;cursor:pointer}
.outfit-thumb-preview img{width:100%;height:100%;object-fit:cover}

/* Gallery overlay */
#gallery-overlay{position:fixed;inset:0;z-index:200;background:rgba(4,4,10,.8);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:none;align-items:center;justify-content:center;padding:20px}
#gallery-overlay.open{display:flex;animation:fade-in .2s ease}
#gallery-panel{background:var(--surface,#0d0d18);border:1px solid var(--border-glass-bright);border-radius:var(--r);width:min(860px,100%);max-height:85vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 24px 80px rgba(0,0,0,.6)}
#gallery-header{padding:16px 20px;border-bottom:1px solid var(--border-glass);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
#gallery-title{font-size:13px;font-weight:500;color:var(--text);letter-spacing:-.01em}
#gallery-grid{padding:16px;overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.gallery-item{position:relative;border-radius:var(--r2);overflow:hidden;aspect-ratio:1/1;cursor:pointer;border:1px solid var(--border-glass);transition:border-color .2s,transform .15s}
.gallery-item:hover{border-color:var(--teal);transform:scale(1.02)}
.gallery-item img{width:100%;height:100%;object-fit:cover;display:block}
.gallery-item-overlay{position:absolute;inset:0;background:rgba(0,0,0,.55);opacity:0;transition:opacity .2s;display:flex;align-items:flex-end;padding:8px;gap:5px;pointer-events:none}
.gallery-item:hover .gallery-item-overlay{opacity:1;pointer-events:auto}
.gallery-item-btn{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);border-radius:var(--r3);color:#fff;font-size:10px;font-family:'JetBrains Mono',monospace;cursor:pointer;padding:4px 8px;transition:background .15s;white-space:nowrap}
.gallery-item-btn:hover{background:rgba(255,255,255,.22)}
.gallery-empty{grid-column:1/-1;text-align:center;padding:60px 20px;color:var(--text3);font-size:12px;font-family:'JetBrains Mono',monospace;line-height:2}
#gallery-lightbox{position:fixed;inset:0;z-index:210;background:rgba(0,0,0,.9);display:none;align-items:center;justify-content:center;cursor:zoom-out}
#gallery-lightbox.open{display:flex;animation:fade-in .15s ease}
#gallery-lightbox-img{max-width:90vw;max-height:90vh;object-fit:contain;border-radius:var(--r);box-shadow:0 24px 80px rgba(0,0,0,.8);pointer-events:none}
#gallery-lightbox-close{position:fixed;top:18px;right:22px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:50%;color:#fff;font-size:14px;width:32px;height:32px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s}
#gallery-lightbox-close:hover{background:rgba(255,255,255,.22)}

/* Wardrobe topbar button */
.topbar-btn{display:flex;align-items:center;gap:5px;padding:4px 10px;background:var(--glass);border:1px solid var(--border-glass);border-radius:20px;font-size:10px;font-family:'JetBrains Mono',monospace;color:var(--text3);cursor:pointer;transition:all .2s}
.topbar-btn:hover{background:var(--teal-dim);border-color:rgba(94,234,212,.35);color:var(--teal)}
.topbar-btn.wardrobe-active{background:var(--teal-dim);border-color:rgba(94,234,212,.4);color:var(--teal)}