/* ===== DESIGN TOKENS (same as approved Homepage + Artist Profile) ===== */
:root{--bg:#0c0c0d;--surface:#151516;--surface2:#1d1d1f;--line:#2a2a2d;--text:#f3efe8;--mute:#a09c94;--accent:#d96b7c;--accent-h:#e6808f;--ok:#43d38a;--gold:#d6b46a;--err:#ff6161;--r-s:8px;--r-m:14px;--r-l:20px;--shadow:0 18px 40px rgba(0,0,0,.45);--ui:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;--display:Georgia,"Times New Roman",serif;--pad:clamp(16px,4vw,36px)}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--text);font:15px/1.55 var(--ui);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}button,input,textarea,select{font:inherit;color:inherit}button{cursor:pointer;border:0;background:none}
img{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--accent-h);outline-offset:3px}
h1,h2,h3{font-family:var(--display);font-weight:500;line-height:1.15}
[hidden]{display:none!important}
.logo{font:600 22px var(--display)}.logo i{color:var(--accent);font-style:normal}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 24px;border-radius:99px;font-weight:600;font-size:14px;transition:.25s}
.btn-p{background:var(--accent);color:#170a0d}.btn-p:hover{background:var(--accent-h)}.btn-p:disabled{opacity:.4;cursor:not-allowed}
.btn-g{border:1px solid #4a4a4e}.btn-g:hover{border-color:var(--text)}.btn-d{border:1px solid rgba(255,97,97,.5);color:var(--err)}
.btn-sm{padding:8px 16px;font-size:13px}.btn-w{width:100%}
.lnk{color:var(--accent-h);font-size:14px}.lnk:hover{text-decoration:underline}
/* form */
.fld{margin-bottom:16px}.fld>label{display:flex;justify-content:space-between;color:var(--mute);font-size:12px;margin-bottom:6px}
input[type=text],input[type=password],input[type=tel],input[type=number],textarea,select{width:100%;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-s);padding:12px 14px;outline:0;transition:.2s}
input:focus,textarea:focus,select:focus{border-color:var(--accent)}textarea{resize:vertical;min-height:110px}
.inv{border-color:var(--err)!important}.hint{font-size:12px;margin-top:6px;min-height:18px;color:var(--mute)}.hint.ok{color:var(--ok)}.hint.no{color:var(--err)}
.ro{background:var(--surface2);border:1px dashed var(--line);border-radius:var(--r-s);padding:12px 14px;display:flex;justify-content:space-between;gap:10px;align-items:center}
.ro em{font-style:normal;color:var(--mute);font-size:11px;white-space:nowrap}
.pw{position:relative}.pw button{position:absolute;right:6px;top:6px;padding:7px 10px;color:var(--mute);font-size:12px}
/* auth */
.auth{min-height:100vh;display:grid;grid-template-columns:1fr 1fr}
.auth-art{background:#1a1a1c center/cover;position:relative}.auth-art:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(12,12,13,.9),rgba(12,12,13,.2) 60%)}
.auth-art div{position:absolute;z-index:1;bottom:48px;left:48px;right:48px}.auth-art h2{font-size:38px;max-width:14ch}.auth-art p{color:#d3cfc7;margin-top:10px;max-width:34ch}
.auth-box{display:flex;flex-direction:column;justify-content:center;padding:40px var(--pad);max-width:480px;width:100%;margin:0 auto}
.auth-box h1{font-size:34px;margin:28px 0 6px}.auth-box .sub{color:var(--mute);margin-bottom:26px}
.auth-box .alt{text-align:center;margin-top:20px;color:var(--mute);font-size:14px}
@media(max-width:820px){.auth{grid-template-columns:1fr}.auth-art{display:none}}
/* status */
.stat{display:inline-flex;align-items:center;gap:7px;font:600 12px var(--ui);padding:6px 12px;border-radius:99px;border:1px solid var(--line)}
.stat:before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.s-pending{color:var(--gold);border-color:rgba(214,180,106,.4)}.s-approved,.s-on{color:var(--ok);border-color:rgba(67,211,138,.4)}.s-rejected,.s-suspended{color:var(--err);border-color:rgba(255,97,97,.4)}.s-off{color:var(--mute)}
.badge{display:inline-flex;font:600 11px/1 var(--ui);padding:5px 9px;border-radius:99px;border:1px solid rgba(255,255,255,.18)}
.badge.verified{background:var(--accent);border-color:transparent;color:#170a0d}.badge.premium,.badge.vip{color:var(--gold);border-color:rgba(214,180,106,.5)}.badge.new{color:var(--ok);border-color:rgba(67,211,138,.5)}
/* center screens */
.center{min-height:100vh;display:grid;place-items:center;padding:32px var(--pad)}
.pcard{max-width:520px;width:100%;text-align:center}
.pcard h1{font-size:36px;margin:22px 0 10px}.pcard>p{color:var(--mute)}
.ring{width:72px;height:72px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;margin:0 auto;font-size:28px}
.facts{margin:26px 0;text-align:left;border-top:1px solid var(--line)}.facts div{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-bottom:1px solid var(--line);font-size:14px}.facts span{color:var(--mute)}
.steps{display:flex;gap:6px;margin:24px 0}.steps i{flex:1;height:3px;border-radius:3px;background:var(--line)}.steps i.on{background:var(--gold)}
/* app shell */
.app{display:grid;grid-template-columns:250px 1fr;min-height:100vh}
.side{border-right:1px solid var(--line);padding:24px 16px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:4px}
.side .logo{padding:0 12px 20px}
.nv{display:flex;gap:12px;align-items:center;padding:11px 12px;border-radius:var(--r-s);color:var(--mute);font-size:14px;text-align:left;width:100%;transition:.2s}
.nv:hover{color:var(--text);background:var(--surface)}.nv.on{color:var(--text);background:var(--surface2);box-shadow:inset 2px 0 0 var(--accent)}
.side .me{margin-top:auto;padding:12px;border-top:1px solid var(--line);font-size:13px;color:var(--mute)}
.main{padding:clamp(20px,4vw,44px) var(--pad) 100px;max-width:980px;width:100%}
.head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:28px}
.head h1{font-size:clamp(28px,4vw,38px)}.head p{color:var(--mute);margin-top:4px}
.bnav{display:none}.topm{display:none}
@media(max-width:820px){
  .app{grid-template-columns:1fr}.side{display:none}
  .topm{display:flex;justify-content:space-between;align-items:center;padding:14px var(--pad);border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(12,12,13,.9);backdrop-filter:blur(12px);z-index:30}
  .bnav{display:grid;grid-template-columns:repeat(6,1fr);position:fixed;bottom:0;left:0;right:0;z-index:40;background:rgba(12,12,13,.95);backdrop-filter:blur(14px);border-top:1px solid var(--line);padding:6px 4px calc(6px + env(safe-area-inset-bottom,0))}
  .bnav button{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 0;font-size:10px;color:var(--mute)}.bnav button b{font-size:17px;font-weight:400}.bnav button.on{color:var(--accent-h)}
}
/* panels */
.state{border:1px solid var(--line);border-radius:var(--r-m);padding:16px 18px;margin-bottom:24px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.state p{flex:1;min-width:200px;font-size:14px;color:var(--mute)}.state b{color:var(--text)}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:28px}
@media(max-width:820px){.cards{grid-template-columns:1fr 1fr}}
.kc{background:var(--surface);border-radius:var(--r-m);padding:18px}.kc span{font-size:12px;color:var(--mute);display:flex;justify-content:space-between}.kc b{display:block;font:500 28px var(--display);margin-top:10px}
.panel{background:var(--surface);border-radius:var(--r-m);padding:clamp(18px,3vw,28px);margin-bottom:22px}
.panel h3{font-size:20px;margin-bottom:4px}.panel .sub{color:var(--mute);font-size:13px;margin-bottom:20px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}@media(max-width:640px){.row2{grid-template-columns:1fr}}
.split{display:grid;grid-template-columns:1.4fr 1fr;gap:22px;align-items:start}@media(max-width:900px){.split{grid-template-columns:1fr}}
.tgl{width:46px;height:26px;border-radius:99px;background:var(--line);position:relative;transition:.2s;flex:none}
.tgl:after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:.2s}
.tgl[aria-checked=true]{background:var(--ok)}.tgl[aria-checked=true]:after{left:23px}
.line{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 0;border-top:1px solid var(--line)}.line:first-of-type{border-top:0}
/* preview */
.pv-cover{aspect-ratio:16/6;background:var(--surface2) center/cover;border-radius:var(--r-m) var(--r-m) 0 0}
.pv-photo{width:84px;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r-s);border:3px solid var(--surface);margin:-42px 0 0 16px;background:var(--surface2)}
.pv-body{padding:10px 16px 18px}.pv-body h4{font:500 20px var(--display)}.pv-body small{color:var(--mute)}.pv-body p{font-size:13px;color:#d3cfc7;margin-top:8px}
.pvbox{border:1px solid var(--line);border-radius:var(--r-m);background:var(--bg);overflow:hidden}
.imgs{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:6px}
.imgs .ph{width:80px;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r-s);background:var(--surface2)}.imgs .cv{width:180px;aspect-ratio:16/6;object-fit:cover;border-radius:var(--r-s);background:var(--surface2)}
/* gallery: strict 4:5 */
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}@media(max-width:820px){.gal{grid-template-columns:repeat(2,1fr);gap:10px}}
.gi{position:relative;aspect-ratio:4/5;border-radius:var(--r-m);overflow:hidden;background:var(--surface2)}
.gi img{width:100%;height:100%;object-fit:cover;cursor:zoom-in}
.gi .ac{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;padding:8px;background:linear-gradient(0deg,rgba(0,0,0,.85),transparent)}
.gi .ac button{width:32px;height:32px;border-radius:50%;background:rgba(0,0,0,.55);font-size:14px}.gi .no{position:absolute;top:8px;left:8px;font-size:11px;background:rgba(0,0,0,.6);padding:3px 8px;border-radius:99px}
.add{aspect-ratio:4/5;border:1px dashed #55555a;border-radius:var(--r-m);display:grid;place-items:center;text-align:center;color:var(--mute);font-size:13px;cursor:pointer;transition:.2s;padding:10px}.add:hover{border-color:var(--accent);color:var(--text)}.add b{display:block;font-size:26px;font-weight:300}
.empty{text-align:center;padding:38px 16px;color:var(--mute);border:1px dashed var(--line);border-radius:var(--r-m)}.empty h3{color:var(--text);margin-bottom:6px}
/* misc */
.dur{display:flex;align-items:center;gap:14px;padding:16px 0;border-top:1px solid var(--line)}.dur b{font:500 26px var(--display);min-width:56px}.dur span{flex:1;color:var(--mute);font-size:13px}
.day{display:grid;grid-template-columns:110px 46px 1fr;gap:14px;align-items:center;padding:12px 0;border-top:1px solid var(--line)}
.day .t{display:flex;gap:8px;align-items:center;font-size:13px}.day .t input{width:110px;padding:8px 10px}.day .t.dis{opacity:.35;pointer-events:none}
@media(max-width:520px){.day{grid-template-columns:80px 46px 1fr}.day .t input{width:88px}}
.savebar{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:60;background:var(--surface2);border:1px solid var(--line);border-radius:99px;padding:8px 8px 8px 20px;display:flex;gap:14px;align-items:center;box-shadow:var(--shadow);font-size:13px;animation:up .25s}
@media(max-width:820px){.savebar{bottom:76px;width:calc(100% - 24px)}}
@keyframes up{from{transform:translate(-50%,14px);opacity:0}}
.toast{position:fixed;top:18px;left:50%;transform:translateX(-50%);z-index:120;background:var(--surface2);border:1px solid var(--line);padding:12px 20px;border-radius:99px;font-size:14px;box-shadow:var(--shadow);animation:dn .25s}
@keyframes dn{from{transform:translate(-50%,-14px);opacity:0}}
.mod{position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:100;display:grid;place-items:center;padding:16px}.mod .sh{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);padding:26px;max-width:400px;width:100%}.mod h3{font-size:22px;margin-bottom:6px}.mod p{color:var(--mute);font-size:14px;margin-bottom:20px}.mod .b{display:flex;gap:10px;justify-content:flex-end}
.lb{position:fixed;inset:0;background:rgba(0,0,0,.95);z-index:110;display:grid;place-items:center}.lb img{max-height:86vh;max-width:92vw;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r-m)}
.demo{position:fixed;left:12px;bottom:12px;z-index:130;background:var(--surface2);border:1px solid var(--line);border-radius:var(--r-m);padding:8px 10px;font-size:11px;color:var(--mute);display:flex;gap:6px;align-items:center;flex-wrap:wrap;max-width:calc(100% - 24px)}
.demo select{width:auto;padding:4px 8px;font-size:11px}
@media(max-width:820px){.demo{bottom:auto;top:auto;left:auto;right:8px;bottom:70px;opacity:.9}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
