*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,sans-serif;background:#f5f0e8;color:#2a2218;direction:rtl;min-height:100vh}
button,input,select{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.hidden{display:none!important}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

/* ── AUTH ── */
#AUTH{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#ede4d0,#f5f0e8)}
.card{background:#fff;border:1px solid #d8d0c0;border-radius:20px;padding:40px;width:100%;max-width:380px;box-shadow:0 4px 24px rgba(0,0,0,.08)}
.card h1{font-family:Georgia,serif;font-size:28px;font-weight:400;color:#8a6a3a;margin-bottom:4px}
.card h1 small{font-size:14px;font-weight:400;color:#a89070}
.tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:20px 0}
.tab{padding:10px;border:1px solid #d8d0c0;border-radius:8px;color:#a89070;font-size:13px;transition:all .2s}
.tab.on{background:#8a6a3a;color:#fff;border-color:#8a6a3a;font-weight:700}
.err{background:#fff0f0;border:1px solid #f0c0c0;color:#c04040;padding:10px;border-radius:8px;font-size:13px;margin-bottom:12px}
.f{margin-bottom:12px}
.f label{display:block;font-size:11px;color:#a89070;font-weight:700;letter-spacing:.5px;margin-bottom:4px}
.f input{width:100%;background:#f5f0e8;border:1px solid #d8d0c0;border-radius:8px;padding:11px 14px;font-size:14px;color:#2a2218;outline:0}
.f select{width:100%;background:#f5f0e8;border:1px solid #d8d0c0;border-radius:8px;padding:11px 14px;font-size:14px;color:#2a2218;outline:0}
.f input:focus{border-color:#8a6a3a}
.f select:focus{border-color:#8a6a3a}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.measure-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.btnp{width:100%;padding:13px;background:#8a6a3a;color:#fff;border-radius:8px;font-weight:700;font-size:14px;margin-top:6px;transition:all .2s}
.btnp:hover{background:#7a5a2a}

/* ── APP ── */
#APP{min-height:100vh;display:grid;grid-template-columns:68px 1fr 300px}
.nav{background:#ede8de;border-left:1px solid #d0c8b8;display:flex;flex-direction:column;align-items:center;padding:14px 0;gap:4px}
.nl{width:42px;height:42px;background:#8a6a3a;border-radius:9px;display:grid;place-items:center;font-weight:800;font-size:12px;color:#fff;margin-bottom:16px}
.ni{width:44px;height:44px;border-radius:9px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:#a89070;transition:all .2s}
.ni:hover{background:rgba(0,0,0,.06);color:#2a2218}
.ni.on{background:rgba(138,106,58,.15);color:#8a6a3a}
.ni span{font-size:19px}
.ni small{font-size:7.5px;font-weight:600}
.ni.adm{margin-top:8px;border:1px solid rgba(138,106,58,.3)}

/* ── STAGE ── */
.stage{background:linear-gradient(180deg,#e8e0d0,#f0ebe0);position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;overflow:hidden}
.live{position:absolute;top:14px;left:14px;background:rgba(200,50,50,.1);border:1px solid rgba(200,50,50,.3);padding:4px 11px;border-radius:20px;font-size:10px;color:#c04040;font-weight:700;letter-spacing:1.5px;display:flex;align-items:center;gap:5px}
.ldot{width:5px;height:5px;border-radius:50%;background:#e05050;animation:pulse 1.4s infinite}
.worn-top{position:absolute;top:14px;right:14px;display:flex;flex-wrap:wrap;gap:4px;max-width:320px;justify-content:flex-end}
.wch{background:rgba(138,106,58,.12);border:1px solid rgba(138,106,58,.3);border-radius:20px;padding:4px 10px;font-size:10px;color:#8a6a3a;cursor:pointer;font-weight:500}
.wch:hover{background:rgba(138,106,58,.22)}
.sfoot{position:absolute;bottom:12px;display:flex;gap:10px;align-items:center}
.pill{background:rgba(0,0,0,.07);border:1px solid #d0c8b8;border-radius:20px;padding:5px 14px;font-size:10px;color:#a89070}
.sbtn{background:#8a6a3a;color:#fff;border-radius:20px;padding:8px 20px;font-size:12px;font-weight:700;transition:all .2s}
.sbtn:hover{background:#7a5a2a}
.face-btn{position:absolute;bottom:58px;background:rgba(138,106,58,.15);border:1px solid rgba(138,106,58,.35);border-radius:20px;padding:6px 16px;font-size:11px;color:#8a6a3a;font-weight:600}
.face-btn:hover{background:rgba(138,106,58,.25)}

/* ── RIGHT PANEL ── */
.rp{background:#fff;border-right:1px solid #d8d0c0;display:flex;flex-direction:column;overflow:hidden}
.rph{padding:16px;border-bottom:1px solid #e8e0d0;flex-shrink:0}
.rph h3{font-size:14px;font-weight:700;margin-bottom:2px}
.rph p{font-size:11px;color:#a89070}
.look-presets{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:12px}
.look-presets button{background:#f5f0e8;border:1px solid #d8d0c0;border-radius:18px;padding:7px 4px;font-size:10px;color:#8a6a3a;font-weight:800;white-space:nowrap}
.look-presets button:hover,.look-presets button.on{background:#8a6a3a;color:#fff;border-color:#8a6a3a}
.cats{display:flex;gap:6px;padding:12px;overflow-x:auto;border-bottom:1px solid #e8e0d0;flex-shrink:0}
.cats::-webkit-scrollbar{display:none}
.cb{flex-shrink:0;width:58px;height:58px;border-radius:12px;background:#f5f0e8;border:1.5px solid #d8d0c0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;cursor:pointer;transition:all .2s}
.cb:hover{border-color:#8a6a3a}
.cb.on{border-color:#8a6a3a;background:rgba(138,106,58,.08)}
.cb span{font-size:22px}
.cb small{font-size:9px;color:#a89070;font-weight:600}
.cb.on small{color:#8a6a3a}
.igw{flex:1;overflow-y:auto;padding:12px}
.igw::-webkit-scrollbar{width:3px}
.igw::-webkit-scrollbar-thumb{background:#d8d0c0}
.ig{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.ic{background:#f5f0e8;border:2px solid #d8d0c0;border-radius:12px;overflow:hidden;cursor:pointer;transition:all .2s}
.ic:hover{border-color:#8a6a3a;transform:translateY(-2px)}
.ic.on{border-color:#8a6a3a;background:rgba(138,106,58,.07)}
.it{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:30px;position:relative}
.ick{position:absolute;top:4px;right:4px;width:16px;height:16px;border-radius:50%;background:#8a6a3a;display:none;align-items:center;justify-content:center;font-size:9px;color:#fff;font-weight:700}
.ic.on .ick{display:flex}
.in{padding:6px;font-size:11px;color:#a89070;text-align:center;font-weight:500}
.ic.on .in{color:#8a6a3a}
.lb{padding:10px;border-top:1px solid #e8e0d0;display:grid;grid-template-columns:1fr auto;gap:8px;flex-shrink:0}
.li{background:#f5f0e8;border:1px solid #d8d0c0;border-radius:8px;padding:9px 11px;font-size:11px;color:#2a2218;outline:0}
.li:focus{border-color:#8a6a3a}
.li::placeholder{color:#c0b8a8}
.lsb{padding:9px 14px;background:#8a6a3a;color:#fff;border-radius:8px;font-size:11px;font-weight:700;white-space:nowrap}

/* ── FULL VIEWS ── */
.fv{grid-column:2/4;padding:28px;overflow-y:auto;background:#f5f0e8}
.vh{margin-bottom:20px}
.vh h2{font-family:Georgia,serif;font-size:24px;font-weight:400;margin-bottom:4px}
.vh p{color:#a89070;font-size:13px}
.wl{display:grid;grid-template-columns:1fr 260px;gap:18px;align-items:start}
.fb{display:flex;gap:8px;flex-wrap:wrap;background:#fff;border:1px solid #d8d0c0;border-radius:10px;padding:12px;margin-bottom:12px}
.fs{flex:1;min-width:120px;background:#f5f0e8;border:1px solid #d8d0c0;border-radius:7px;padding:7px 10px;font-size:12px;color:#2a2218;outline:0}
.fs::placeholder{color:#c0b8a8}
.fs:focus,.fb select:focus{border-color:#8a6a3a}
.fb select{background:#f5f0e8;border:1px solid #d8d0c0;border-radius:7px;padding:7px 9px;font-size:11px;color:#2a2218;outline:0}
.wh{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.wh h3{font-family:Georgia,serif;font-size:18px;font-weight:400}
.bg{padding:7px 13px;border:1px solid #d0c8b8;border-radius:7px;color:#a89070;font-size:11px;background:#fff}
.bg:hover{border-color:#8a6a3a;color:#8a6a3a}
.cs{margin-bottom:22px}
.csh{display:flex;align-items:center;gap:8px;margin-bottom:10px;padding-bottom:7px;border-bottom:1px solid #e0d8c8;font-size:13px;font-weight:700}
.wg{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.wc{background:#fff;border:1px solid #d8d0c0;border-radius:10px;overflow:hidden;transition:all .2s}
.wc:hover{border-color:rgba(138,106,58,.5)}
.wm{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:36px;position:relative}
.wm img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.wd{position:absolute;bottom:5px;right:5px;width:14px;height:14px;border-radius:50%;border:2px solid rgba(255,255,255,.7)}
.wb{padding:8px 10px}
.wn{font-size:12px;font-weight:600;margin-bottom:2px}
.wmt{font-size:10px;color:#a89070}
.wa{display:flex;gap:5px;padding:0 10px 8px}
.wat{flex:1;padding:5px;border:1px solid #d8d0c0;border-radius:5px;font-size:10px;color:#a89070;text-align:center;background:#f5f0e8}
.wat:hover{border-color:#c04040;color:#c04040}
.wat.w:hover{border-color:#8a6a3a;color:#8a6a3a}
.ap{background:#fff;border:1px solid #d0c8b8;border-radius:14px;padding:20px;position:sticky;top:0}
.ap h3{font-family:Georgia,serif;font-size:16px;font-weight:400;margin-bottom:14px}
.sw-row{display:flex;gap:6px;flex-wrap:wrap}
.sw{width:26px;height:26px;border-radius:50%;border:3px solid transparent;transition:all .2s}
.sw.on{border-color:#8a6a3a;transform:scale(1.2)}
.lg{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
.lc{background:#fff;border:1px solid #d8d0c0;border-radius:12px;overflow:hidden;transition:all .2s}
.lc:hover{border-color:rgba(138,106,58,.5);transform:translateY(-2px)}
.lp{height:140px;background:#f5f0e8;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:5px;padding:10px}
.lpi{width:42px;height:42px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:20px;background:#fff;border:1px solid #d8d0c0}
.lbd{padding:12px}
.ln{font-size:13px;font-weight:700;margin-bottom:2px}
.lm{font-size:10px;color:#a89070}
.la{display:flex;gap:5px;margin-top:8px}
.lat{flex:1;padding:5px;border:1px solid #d8d0c0;border-radius:6px;font-size:10px;color:#a89070;text-align:center;background:#f5f0e8}
.lat.w:hover{border-color:#8a6a3a;color:#8a6a3a}
.lat.d:hover{border-color:#c04040;color:#c04040}
.sr{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px}
.sc{background:#fff;border:1px solid #d8d0c0;border-radius:10px;padding:16px;text-align:center}
.sc strong{display:block;font-family:Georgia,serif;font-size:30px;color:#8a6a3a;margin-bottom:4px}
.sc span{font-size:11px;color:#a89070}
.cg{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cc{background:#fff;border:1px solid #d8d0c0;border-radius:10px;padding:16px}
.cc h4{font-size:11px;color:#a89070;margin-bottom:10px;font-weight:700;letter-spacing:.5px}
.br{display:grid;grid-template-columns:90px 1fr 28px;gap:8px;align-items:center;margin-bottom:6px;font-size:11px;color:#a89070}
.bt{height:6px;background:#f0ebe0;border-radius:3px;overflow:hidden}
.bf{height:100%;background:#8a6a3a;border-radius:3px}
.adc{background:#fff;border:1px solid #d0c8b8;border-radius:10px;padding:14px;display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;margin-bottom:8px}
.adc strong{display:block;font-size:13px;margin-bottom:2px}
.adm{font-size:11px;color:#a89070}
.badge{padding:3px 8px;border-radius:20px;font-size:9px;font-weight:700}
.ba{background:rgba(138,106,58,.12);color:#8a6a3a}
.bu{background:rgba(0,0,0,.06);color:#a89070}
.bb{background:rgba(200,50,50,.1);color:#c04040}
.abtn{padding:5px 10px;border:1px solid #d8d0c0;border-radius:5px;font-size:10px;color:#a89070;background:#f5f0e8}
.abtn:hover{border-color:#c04040;color:#c04040}
.abtn.unb:hover{border-color:#4a9a6a;color:#4a9a6a}
.empty{text-align:center;padding:40px;color:#a89070;font-size:13px}
.face-opt{border:2px solid #d8d0c0;border-radius:10px;cursor:pointer;background:#f5f0e8;display:block;transition:all .2s}
.face-opt:hover{border-color:#8a6a3a;transform:scale(1.05)}
.face-opt.on{border-color:#8a6a3a;background:rgba(138,106,58,.08)}
.face-opt + .fol{font-size:9px;color:#a89070;text-align:center;margin-top:2px}
.fmc{background:#fff;border-radius:20px;padding:28px;max-width:600px;width:93%;max-height:90vh;overflow-y:auto}
.fsl{font-size:10px;font-weight:700;letter-spacing:1px;color:#a89070;display:block;margin-bottom:8px;margin-top:14px;text-transform:uppercase}
.eg-row{display:flex;gap:7px;flex-wrap:wrap;align-items:flex-end}
.sk-row{display:flex;gap:8px;flex-wrap:wrap}
.sk{width:32px;height:32px;border-radius:50%;border:3px solid transparent;transition:all .2s;cursor:pointer}
.sk.on{border-color:#8a6a3a;transform:scale(1.15)}
/* FACE MODAL */
.fm{position:fixed;inset:0;background:rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;z-index:100}
.fmc{background:#fff;border-radius:20px;padding:28px;max-width:460px;width:90%;max-height:85vh;overflow-y:auto}
.fmc h3{font-family:Georgia,serif;font-size:20px;font-weight:400;color:#8a6a3a;margin-bottom:4px}
.fmc p{color:#a89070;font-size:12px;margin-bottom:16px}
.fsl{font-size:10px;font-weight:700;letter-spacing:1px;color:#a89070;display:block;margin-bottom:8px;margin-top:14px;text-transform:uppercase}
.eg-row{display:flex;gap:7px;flex-wrap:wrap}
.eg{width:52px;height:52px;border-radius:10px;background:#f5f0e8;border:2px solid #d8d0c0;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:20px;cursor:pointer;transition:all .2s}
.eg:hover{border-color:#8a6a3a;transform:scale(1.05)}
.eg.on{border-color:#8a6a3a;background:rgba(138,106,58,.1)}
.eg small{font-size:8px;color:#a89070;margin-top:1px}
.eg.on small{color:#8a6a3a}
.sk-row{display:flex;gap:8px;flex-wrap:wrap}
.sk{width:32px;height:32px;border-radius:50%;border:3px solid transparent;transition:all .2s}
.sk.on{border-color:#8a6a3a;transform:scale(1.15)}
.fc-prev{display:flex;justify-content:center;margin-bottom:14px}
.fc-prev canvas{border-radius:50%;border:3px solid #8a6a3a}
.reg-avatar{margin:14px 0 16px;padding:13px;border:1px solid #d8d0c0;border-radius:16px;background:#fbf7ef;display:grid;grid-template-columns:92px 1fr;gap:12px;align-items:center}
.reg-avatar canvas{width:88px;height:104px;border-radius:18px;background:#f5f0e8;border:2px solid #d8d0c0}
.reg-avatar h3{font-size:14px;color:#8a6a3a;margin-bottom:4px}.reg-avatar p{font-size:11px;color:#a89070;line-height:1.35;margin-bottom:9px}.reg-avatar button,.photo-action{background:#8a6a3a;color:#fff;border-radius:10px;padding:9px 12px;font-size:12px;font-weight:800;display:inline-block;text-align:center}.reg-avatar button.done{background:#6f8a3a}.reg-photo-tools{display:flex;flex-wrap:wrap;gap:7px;margin-top:8px}.reg-photo-tools input{display:none}.photo-action.secondary{background:#eadfce;color:#76583a;border:1px solid #d5c7b5}.reg-photo-preview{margin-top:8px;display:none;align-items:center;gap:8px}.reg-photo-preview.on{display:flex}.reg-photo-preview img{width:46px;height:46px;border-radius:12px;object-fit:cover;border:2px solid #d8d0c0}.reg-photo-status{font-size:10px;color:#8a6a3a;font-weight:700}
.logout-label{font-size:8px!important}
@media(max-width:860px){#APP{grid-template-columns:1fr}.nav{flex-direction:row;height:56px;width:100%}.wl{grid-template-columns:1fr}.measure-grid{grid-template-columns:1fr}}

/* Personal AI-generated avatar */
.av-wrap{height:calc(100vh - 76px);display:flex;align-items:center;justify-content:center;position:relative;padding:0 24px 42px}
.avatarAi{width:min(68vw,760px);height:calc(100vh - 92px);min-height:560px;max-height:940px;object-fit:contain;display:block;filter:drop-shadow(0 24px 28px rgba(58,42,25,.16))}
.avatarPlaceholder{width:min(62vw,680px);max-height:calc(100vh - 86px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:40px;border:2px dashed #d8d0c0;border-radius:24px;background:#fbf7ef}
.avatarPlaceholderIcon{font-size:40px;color:#8a6a3a}
.avatarPlaceholder p{color:#a89070;font-size:14px;line-height:1.6}
@media(max-width:860px){.av-wrap{padding:0 10px 60px}.avatarAi{width:min(98vw,590px);height:calc(100vh - 126px);min-height:460px}.avatarPlaceholder{width:min(96vw,560px);max-height:calc(100vh - 126px)}}