/* ===== add-credits.html ===== */

@font-face{font-family:'Geist';src:url('../fonts/Geist-VariableFont_wght.ttf') format('truetype-variations');font-weight:100 900;font-style:normal;font-display:swap}
body.pg-add-credits{
  --bg:#070710;--sidebar:#08080f;--card:#0e0e1a;--panel:#0c0c18;
  --border:rgba(255,255,255,.06);--border-strong:rgba(255,255,255,.10);
  --text:#f4f4f6;--muted:#8b8b9a;--muted-2:#6c6c7a;
  --indigo:#4f46e5;--indigo-soft:#7c7cf0;--green:#22c55e;--blue:#60a5fa;
}
*{box-sizing:border-box;margin:0;padding:0}
.pg-add-credits a,.pg-add-credits button{transition:background-color .22s ease,border-color .22s ease,color .18s ease,box-shadow .2s ease}
.pg-add-credits .pack,.pg-add-credits .feat3,.pg-add-credits .coupon input{transition:background-color .22s ease,border-color .22s ease}
html,body.pg-add-credits{height:100%}
body.pg-add-credits{font-family:'Geist',system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;font-feature-settings:"ss01";height:100vh;overflow:hidden}
.pg-add-credits .app{display:flex;height:100vh;overflow:hidden}

.pg-add-credits /* SIDEBAR */
.sidebar{width:240px;flex-shrink:0;background:var(--sidebar);border-right:1px solid var(--border);padding:20px 22px;display:flex;flex-direction:column;overflow:hidden}
.pg-add-credits .logo{font-size:27px;font-weight:600;letter-spacing:-.5px;display:flex;align-items:center;justify-content:space-between;height:45px;margin:0 -22px 20px;padding:0 22px 0 28px;border-bottom:1px solid var(--border)}
.pg-add-credits .logo .x{background:linear-gradient(135deg,#6366f1,#a78bfa);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:700}
.pg-add-credits .logo-text{display:flex;align-items:center;gap:4px}
.pg-add-credits .logo-actions{display:flex;align-items:center;gap:10px}
.pg-add-credits .logo-actions .lbell{width:34px;height:34px;border-radius:10px;border:1px solid var(--border-strong);background:transparent;color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer}
.pg-add-credits .logo-actions .lbell svg{width:18px;height:18px}
.pg-add-credits .logo-actions .lav{width:34px;height:34px;border-radius:50%;object-fit:cover;cursor:pointer;background:#222}
.pg-add-credits .nav-label{font-size:12.5px;color:var(--muted-2);margin:0 0 12px 10px}
.pg-add-credits .nav{display:flex;flex-direction:column;gap:3px}
.pg-add-credits .nav a{display:flex;align-items:center;gap:14px;padding:10px 16px;border-radius:11px;color:var(--muted);text-decoration:none;font-size:15px;transition:.15s}
.pg-add-credits .nav a svg{width:20px;height:20px;stroke-width:1.7;flex-shrink:0}
.pg-add-credits .nav a:hover{color:var(--text);background:rgba(255,255,255,.03)}
.pg-add-credits .nav a.active{background:var(--indigo);color:#fff;font-weight:500;box-shadow:0 6px 20px rgba(79,70,229,.35)}
.pg-add-credits .upgrade-card{margin-top:auto;background:rgba(255,255,255,.02);border:1px solid var(--border);border-radius:16px;padding:16px}
.pg-add-credits .upgrade-card .head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:6px}
.pg-add-credits .upgrade-card h4{font-size:16px;font-weight:600;color:var(--indigo-soft)}
.pg-add-credits .upgrade-card .crown{width:32px;height:32px;border-radius:10px;background:radial-gradient(circle at 30% 30%,#3a2f14,#1b1607);display:flex;align-items:center;justify-content:center;font-size:16px}
.pg-add-credits .upgrade-card p{font-size:13px;color:var(--muted);line-height:1.45;margin-bottom:14px}
.pg-add-credits .upgrade-card button{background:var(--indigo);color:#fff;border:none;padding:10px 20px;border-radius:10px;font-family:inherit;font-size:14px;font-weight:500;cursor:pointer}
.pg-add-credits .side-bottom{padding-top:18px;display:flex;flex-direction:column;gap:14px}
.pg-add-credits .side-bottom a{display:flex;align-items:center;gap:14px;color:var(--muted);text-decoration:none;font-size:15px;padding-left:6px}
.pg-add-credits .side-bottom a svg{width:19px;height:19px;stroke-width:1.7}

.pg-add-credits /* MAIN */
.main{flex:1;padding:20px 26px;min-width:0;display:flex;flex-direction:column;overflow:hidden}
.pg-add-credits .page-head{flex-shrink:0;margin-bottom:12px}
.pg-add-credits .page-head h1{font-size:23px;font-weight:600}
.pg-add-credits .page-head p{color:var(--muted);font-size:13.5px;margin-top:4px}
.pg-add-credits .layout{flex:1;min-height:0;display:grid;grid-template-columns:1fr 360px;gap:20px;overflow:hidden}
.pg-add-credits .col{min-height:0;overflow:hidden;padding-right:4px}

.pg-add-credits .section{border:1px solid var(--border-strong);border-radius:18px;padding:18px;margin-bottom:14px;
  background:radial-gradient(120% 100% at 0% 0%,rgba(79,70,229,.08),rgba(79,70,229,0) 50%),var(--panel)}
.pg-add-credits .section h2{font-size:16px;font-weight:600;margin-bottom:14px}

.pg-add-credits .packs{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.pg-add-credits .pack{position:relative;border:1px solid var(--border-strong);border-radius:14px;padding:15px;cursor:pointer;background:rgba(255,255,255,.02)}
.pg-add-credits .pack:hover{background:rgba(255,255,255,.05)}
.pg-add-credits .pack.active{border-color:var(--indigo);background:rgba(79,70,229,.12);box-shadow:0 0 0 1px var(--indigo)}
.pg-add-credits .pack .top{display:flex;align-items:flex-start;gap:12px;margin-bottom:12px}
.pg-add-credits .pack .pic{width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,.05);display:flex;align-items:center;justify-content:center;color:#f0a85e;flex-shrink:0}
.pg-add-credits .pack.active .pic{background:linear-gradient(135deg,#f59e42,#d97706);color:#fff}
.pg-add-credits .pack .pic svg{width:22px;height:22px}
.pg-add-credits .pack .c{font-size:22px;font-weight:600;line-height:1}
.pg-add-credits .pack .cl{font-size:13px;color:var(--muted);margin-top:3px}
.pg-add-credits .pack .price{font-size:20px;font-weight:600}
.pg-add-credits .pack .per{font-size:12.5px;color:var(--muted);margin-left:6px}
.pg-add-credits .pack .best{position:absolute;top:-10px;left:16px;background:var(--indigo);color:#fff;font-size:11px;font-weight:600;padding:3px 10px;border-radius:20px}
.pg-add-credits .pack .chk{position:absolute;top:14px;right:14px;width:22px;height:22px;border-radius:50%;background:var(--indigo);color:#fff;display:none;align-items:center;justify-content:center}
.pg-add-credits .pack.active .chk{display:flex}
.pg-add-credits .pack .chk svg{width:13px;height:13px}

.pg-add-credits .custom{display:flex;align-items:center;gap:18px;border:1px solid var(--border);border-radius:14px;padding:18px;background:rgba(255,255,255,.02)}
.pg-add-credits .custom .pic{width:46px;height:46px;border-radius:12px;background:rgba(124,124,240,.16);color:var(--indigo-soft);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.pg-add-credits .custom .pic svg{width:22px;height:22px}
.pg-add-credits .custom .mid{flex:1;min-width:0}
.pg-add-credits .custom .lbl{font-size:13.5px;color:var(--muted);margin-bottom:10px;display:flex;justify-content:space-between;align-items:center}
.pg-add-credits .badge-green{background:rgba(34,197,94,.16);color:#5fd98a;font-size:12px;padding:4px 10px;border-radius:8px}
.pg-add-credits .stepper{display:flex;align-items:center;gap:12px}
.pg-add-credits .stepper button{width:36px;height:36px;border-radius:10px;border:1px solid var(--border-strong);background:transparent;color:#fff;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.pg-add-credits .stepper input{flex:1;min-width:0;height:40px;background:rgba(255,255,255,.03);border:1px solid var(--border-strong);border-radius:10px;text-align:center;color:#fff;font-family:inherit;font-size:16px;font-weight:600}
.pg-add-credits .custom .right{text-align:right;flex-shrink:0}
.pg-add-credits .custom .right .per{font-size:12.5px;color:var(--muted)}
.pg-add-credits .custom .right .pr{font-size:20px;font-weight:600;margin-top:8px;display:flex;align-items:center;gap:8px;justify-content:flex-end}
.pg-add-credits .tagbtn{background:rgba(124,124,240,.18);color:var(--indigo-soft);font-size:11.5px;padding:4px 9px;border-radius:7px}
.pg-add-credits .slider-wrap{margin-top:14px}
.pg-add-credits .range{width:100%;accent-color:var(--indigo);cursor:pointer}
.pg-add-credits .ticks{display:flex;justify-content:space-between;font-size:12px;color:var(--muted-2);margin-top:8px}

.pg-add-credits .feat3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;border:1px solid var(--border);border-radius:16px;padding:18px 22px;background:var(--card)}
.pg-add-credits .f3{display:flex;gap:13px;align-items:flex-start}
.pg-add-credits .f3 .ic{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.pg-add-credits .f3 .ic svg{width:18px;height:18px}
.pg-add-credits .f3 h4{font-size:14px;font-weight:600}
.pg-add-credits .f3 p{font-size:12.5px;color:var(--muted);margin-top:3px;line-height:1.45}

.pg-add-credits /* right column */
.rcard{border:1px solid var(--border);border-radius:18px;padding:16px 18px;margin-bottom:14px;background:var(--card)}
.pg-add-credits .bal{display:flex;align-items:center;gap:14px}
.pg-add-credits .bal .ic{width:48px;height:48px;border-radius:13px;background:rgba(255,255,255,.05);display:flex;align-items:center;justify-content:center;color:var(--indigo-soft)}
.pg-add-credits .bal .ic svg{width:24px;height:24px}
.pg-add-credits .bal .l{font-size:13px;color:var(--muted)}
.pg-add-credits .bal .v{font-size:22px;font-weight:600;margin-top:2px}
.pg-add-credits .os h3{font-size:18px;font-weight:600;margin-bottom:16px}
.pg-add-credits .os .line{display:flex;justify-content:space-between;font-size:14px;margin-bottom:13px}
.pg-add-credits .os .line .k{color:var(--muted);display:flex;align-items:center;gap:6px}
.pg-add-credits .os .line .k svg{width:14px;height:14px;opacity:.6}
.pg-add-credits .os .total{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--border);padding-top:14px;margin-top:4px}
.pg-add-credits .os .total .k{font-size:15px;font-weight:600}
.pg-add-credits .os .total .v{font-size:24px;font-weight:600}
.pg-add-credits .os .total .v small{font-size:13px;color:var(--muted);font-weight:400;margin-left:4px}
.pg-add-credits .coupon h4{font-size:15px;font-weight:600;margin-bottom:12px}
.pg-add-credits .coupon .row{display:flex;gap:10px}
.pg-add-credits .coupon input{flex:1;min-width:0;height:46px;background:rgba(255,255,255,.03);border:1px solid var(--border-strong);border-radius:11px;padding:0 14px;color:#fff;font-family:inherit;font-size:14px}
.pg-add-credits .coupon input::placeholder{color:var(--muted)}
.pg-add-credits .coupon .apply{height:46px;padding:0 22px;border:1px solid var(--border-strong);border-radius:11px;background:transparent;color:#fff;font-family:inherit;font-size:14px;cursor:pointer}
.pg-add-credits .pay-card{border:1px solid var(--border-strong);border-radius:18px;padding:20px;background:radial-gradient(120% 100% at 50% 0%,rgba(79,70,229,.12),rgba(79,70,229,0) 60%),var(--card)}
.pg-add-credits .btn-pay{width:100%;display:flex;align-items:center;justify-content:center;gap:9px;background:var(--indigo);color:#fff;border:none;padding:15px;border-radius:12px;font-family:inherit;font-size:15px;font-weight:600;cursor:pointer;box-shadow:0 10px 26px rgba(79,70,229,.4)}
.pg-add-credits .btn-pay svg{width:16px;height:16px}
.pg-add-credits .pay-note{display:flex;align-items:center;justify-content:center;gap:7px;color:var(--muted);font-size:13px;margin-top:14px}
.pg-add-credits .pay-note svg{width:14px;height:14px}
.pg-add-credits .pay-terms{text-align:center;color:var(--muted-2);font-size:12.5px;margin-top:14px;line-height:1.5}
.pg-add-credits .pay-terms a{color:var(--indigo-soft);text-decoration:none}

.pg-add-credits /* back link + toggle + menus */
.back-link{display:inline-flex;align-items:center;gap:8px;color:var(--muted);text-decoration:none;font-size:15px}
.pg-add-credits .back-link:hover{color:var(--text)}
.pg-add-credits .back-link svg{width:17px;height:17px}
.pg-add-credits .main-top{display:flex;align-items:center;gap:14px;flex-shrink:0;margin-bottom:12px}
.pg-add-credits .sidebar{transition:width .25s ease}
.pg-add-credits .side-handle{position:fixed;bottom:17px;left:201px;z-index:60;width:28px;height:28px;border-radius:50%;background:#15151f;border:1px solid var(--border-strong);color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:left .25s ease}
.pg-add-credits .side-handle:hover{color:#fff;background:#1d1d2a}
.pg-add-credits .side-handle svg{width:15px;height:15px}
.pg-add-credits .app.collapsed ~ .side-handle{left:61px}
.pg-add-credits .side-handle .ic-expand{display:none}
.pg-add-credits .app.collapsed ~ .side-handle .ic-collapse{display:none}
.pg-add-credits .app.collapsed ~ .side-handle .ic-expand{display:block}
.pg-add-credits .app.collapsed .sidebar{width:76px}
.pg-add-credits .app.collapsed .logo{justify-content:center;padding:0}
.pg-add-credits .app.collapsed .logo-after,.pg-add-credits .app.collapsed .logo-actions,.pg-add-credits .app.collapsed .nav-label,.pg-add-credits .app.collapsed .upgrade-card{display:none}
.pg-add-credits .app.collapsed .nav a,.pg-add-credits .app.collapsed .side-bottom a{justify-content:center;gap:0;padding-left:0;font-size:0}
.pg-add-credits .app.collapsed .nav a{padding:11px 0}
.pg-add-credits .app.collapsed .nav a svg,.pg-add-credits .app.collapsed .side-bottom a svg{font-size:initial}
.pg-add-credits .lbell,.pg-add-credits .lav{cursor:pointer}
.pg-add-credits .menu{position:fixed;z-index:200;width:300px;background:#10101c;border:1px solid var(--border-strong);border-radius:14px;box-shadow:0 24px 60px rgba(0,0,0,.55);padding:8px;display:none}
.pg-add-credits .menu.show{display:block;animation:menupop .18s ease}
@keyframes menupop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.pg-add-credits .menu-head{padding:10px 12px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;margin-bottom:6px}
.pg-add-credits .menu-head .mh-t{font-size:15px;font-weight:600}
.pg-add-credits .menu-head img{width:42px;height:42px;border-radius:50%;object-fit:cover}
.pg-add-credits .menu-head .e{font-size:12.5px;color:var(--muted);margin-top:2px}
.pg-add-credits .menu-item{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:9px;color:var(--text);font-size:14px;cursor:pointer;text-decoration:none}
.pg-add-credits .menu-item:hover{background:rgba(255,255,255,.05)}
.pg-add-credits .menu-item svg{width:17px;height:17px;color:var(--muted)}
.pg-add-credits .menu-item.danger,.pg-add-credits .menu-item.danger svg{color:#ef6b6b}
.pg-add-credits .menu-div{height:1px;background:var(--border);margin:6px 8px}
.pg-add-credits .noti{display:flex;gap:11px;padding:11px 12px;border-radius:9px;cursor:pointer}
.pg-add-credits .noti:hover{background:rgba(255,255,255,.04)}
.pg-add-credits .noti .nic{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.pg-add-credits .noti .nic svg{width:16px;height:16px}
.pg-add-credits .noti .nt{font-size:13.5px}
.pg-add-credits .noti .ntime{font-size:12px;color:var(--muted);margin-top:2px}
.pg-add-credits .menu-foot{text-align:center;padding:9px;border-top:1px solid var(--border);margin-top:4px}
.pg-add-credits .menu-foot a{color:var(--indigo-soft);font-size:13px;text-decoration:none}

@media (max-width:1250px){.pg-add-credits .layout{grid-template-columns:1fr}.pg-add-credits .col.right-col{order:-1}}
@media (max-width:1050px){.pg-add-credits .sidebar{width:240px}.pg-add-credits .packs{grid-template-columns:repeat(2,1fr)}.pg-add-credits .feat3{grid-template-columns:1fr}}

/* ===== add-patient.html ===== */

@font-face{
  font-family:'Geist';
  src:url('../fonts/Geist-VariableFont_wght.ttf') format('truetype-variations');
  font-weight:100 900;font-style:normal;font-display:swap;
}
body.pg-add-patient{
  --bg:#070710;--sidebar:#08080f;--card:#0e0e1a;--panel:#0c0c18;
  --border:rgba(255,255,255,.06);--border-strong:rgba(255,255,255,.10);
  --text:#f4f4f6;--muted:#8b8b9a;--muted-2:#6c6c7a;
  --indigo:#4f46e5;--indigo-soft:#7c7cf0;--green:#22c55e;--blue:#60a5fa;
}
*{box-sizing:border-box;margin:0;padding:0}
.pg-add-patient a,.pg-add-patient button{transition:background-color .22s ease,border-color .22s ease,color .18s ease,box-shadow .2s ease}
.pg-add-patient .pcard,.pg-add-patient .lv-row,.pg-add-patient .acard,.pg-add-patient .album-card,.pg-add-patient .pstat,.pg-add-patient .stat,.pg-add-patient .input,.pg-add-patient .cc,.pg-add-patient .icon-btn,.pg-add-patient .settings-btn,.pg-add-patient .search,.pg-add-patient .ctrl,.pg-add-patient .btn-open,.pg-add-patient .lbell,.pg-add-patient .back-link,.pg-add-patient .card{transition:background-color .22s ease,border-color .22s ease,color .18s ease}
html,body.pg-add-patient{height:100%}
body.pg-add-patient{font-family:'Geist',system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;font-feature-settings:"ss01";height:100vh;overflow:hidden}
.pg-add-patient .app{display:flex;height:100vh;overflow:hidden}

.pg-add-patient /* SIDEBAR */
.sidebar{width:240px;flex-shrink:0;background:var(--sidebar);border-right:1px solid var(--border);padding:20px 22px;display:flex;flex-direction:column;overflow:hidden}
.pg-add-patient .logo{font-size:27px;font-weight:600;letter-spacing:-.5px;display:flex;align-items:center;justify-content:space-between;height:45px;margin:0 -22px 20px;padding:0 22px 0 28px;border-bottom:1px solid var(--border)}
.pg-add-patient .logo-text{display:flex;align-items:center;gap:4px}
.pg-add-patient .logo-actions{display:flex;align-items:center;gap:10px}
.pg-add-patient .logo-actions .lbell{width:34px;height:34px;border-radius:10px;border:1px solid var(--border-strong);background:transparent;color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer}
.pg-add-patient .logo-actions .lbell svg{width:18px;height:18px}
.pg-add-patient .logo-actions .lav{width:34px;height:34px;border-radius:50%;object-fit:cover;cursor:pointer;background:#222}
.pg-add-patient .logo .x{background:linear-gradient(135deg,#6366f1,#a78bfa);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:700}
.pg-add-patient .nav-label{font-size:12.5px;color:var(--muted-2);margin:0 0 12px 10px}
.pg-add-patient .nav{display:flex;flex-direction:column;gap:3px}
.pg-add-patient .nav a{display:flex;align-items:center;gap:14px;padding:10px 16px;border-radius:11px;color:var(--muted);text-decoration:none;font-size:15px;transition:.15s}
.pg-add-patient .nav a svg{width:20px;height:20px;stroke-width:1.7;flex-shrink:0}
.pg-add-patient .nav a:hover{color:var(--text);background:rgba(255,255,255,.03)}
.pg-add-patient .nav a.active{background:var(--indigo);color:#fff;font-weight:500;box-shadow:0 6px 20px rgba(79,70,229,.35)}
.pg-add-patient .upgrade-card{margin-top:auto;background:rgba(255,255,255,.02);border:1px solid var(--border);border-radius:16px;padding:16px}
.pg-add-patient .upgrade-card .head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:6px}
.pg-add-patient .upgrade-card h4{font-size:16px;font-weight:600;color:var(--indigo-soft)}
.pg-add-patient .upgrade-card .crown{width:32px;height:32px;border-radius:10px;background:radial-gradient(circle at 30% 30%,#3a2f14,#1b1607);display:flex;align-items:center;justify-content:center;font-size:16px}
.pg-add-patient .upgrade-card p{font-size:13px;color:var(--muted);line-height:1.45;margin-bottom:14px}
.pg-add-patient .upgrade-card button{background:var(--indigo);color:#fff;border:none;padding:10px 20px;border-radius:10px;font-family:inherit;font-size:14px;font-weight:500;cursor:pointer}
.pg-add-patient .side-bottom{padding-top:18px;display:flex;flex-direction:column;gap:14px}
.pg-add-patient .side-bottom a{display:flex;align-items:center;gap:14px;color:var(--muted);text-decoration:none;font-size:15px;padding-left:6px}
.pg-add-patient .side-bottom a svg{width:19px;height:19px;stroke-width:1.7}

.pg-add-patient /* MAIN */
.main{flex:1;padding:20px 26px;min-width:0;display:flex;flex-direction:column;overflow:hidden}
.pg-add-patient .topbar{display:none}
.pg-add-patient .profile{display:flex;align-items:center;gap:13px;cursor:pointer}
.pg-add-patient .profile img{width:44px;height:44px;border-radius:50%;object-fit:cover;background:#222}
.pg-add-patient .profile .name{font-size:16px;font-weight:600;line-height:1.25}
.pg-add-patient .profile .role{font-size:13px;color:var(--muted)}
.pg-add-patient .profile .chev{color:var(--muted)}
.pg-add-patient .spacer{flex:1}
.pg-add-patient .icon-btn{width:46px;height:46px;border-radius:12px;border:1px solid var(--border-strong);background:transparent;color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer}
.pg-add-patient .search{display:flex;align-items:center;gap:12px;width:300px;height:46px;padding:0 18px;border:1px solid var(--border-strong);border-radius:12px;color:var(--muted)}
.pg-add-patient .search input{background:none;border:none;outline:none;color:var(--text);font-family:inherit;font-size:15px;width:100%}
.pg-add-patient .search input::placeholder{color:var(--muted)}
.pg-add-patient .settings-btn{display:flex;align-items:center;gap:10px;height:46px;padding:0 22px;border:1px solid var(--border-strong);border-radius:12px;background:transparent;color:var(--text);font-family:inherit;font-size:15px;cursor:pointer}
.pg-add-patient .settings-btn svg{width:18px;height:18px}

.pg-add-patient /* page head */
.back-link{display:inline-flex;align-items:center;gap:8px;color:var(--muted);text-decoration:none;font-size:15px;margin-bottom:14px;flex-shrink:0;align-self:flex-start}
.pg-add-patient .back-link:hover{color:var(--text)}
.pg-add-patient .back-link svg{width:17px;height:17px}
.pg-add-patient .title{font-size:24px;font-weight:600;flex-shrink:0}
.pg-add-patient .subtitle{color:var(--muted);font-size:14px;margin:4px 0 16px;flex-shrink:0}

.pg-add-patient /* content layout */
.content{flex:1;min-height:0;display:grid;grid-template-columns:1fr 360px;gap:22px}
.pg-add-patient .left{min-width:0;display:flex;flex-direction:column;min-height:0}
.pg-add-patient .right{display:flex;flex-direction:column;gap:16px;min-height:0;overflow:hidden}

.pg-add-patient /* stepper */
.stepper{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--border-strong);border-radius:16px;overflow:hidden;flex-shrink:0;
  background:radial-gradient(120% 200% at 0% 0%,rgba(79,70,229,.22),rgba(79,70,229,0) 55%),var(--panel)}
.pg-add-patient .step{display:flex;align-items:center;gap:14px;padding:18px 22px}
.pg-add-patient .step+.step{border-left:1px solid var(--border)}
.pg-add-patient .step .num{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;flex-shrink:0}
.pg-add-patient .step.active .num{background:var(--indigo);color:#fff}
.pg-add-patient .step .num.idle{background:rgba(255,255,255,.08);color:var(--muted)}
.pg-add-patient .step .st-title{font-size:15px;font-weight:600}
.pg-add-patient .step .st-sub{font-size:12.5px;color:var(--muted);margin-top:2px}
.pg-add-patient .step.idle .st-title{color:var(--muted)}

.pg-add-patient .section-h{font-size:20px;font-weight:600;margin:16px 0 12px;flex-shrink:0}

.pg-add-patient /* camera */
.cam-stage{flex:1;min-height:0;display:flex}
.pg-add-patient .camera{flex:1;min-width:0;position:relative;border-radius:18px;overflow:hidden;
  background:radial-gradient(120% 120% at 50% 0%,#1a1a26,#0d0d16)}
.pg-add-patient .camera .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,7,16,.1),rgba(7,7,16,.45));z-index:0}
.pg-add-patient .camera #sparkles{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.pg-add-patient /* centered preview box */
.preview-box{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);z-index:2;
  height:72%;width:auto;max-width:84%;aspect-ratio:1/1;border:2px solid rgba(140,150,255,.9);border-radius:26px;overflow:hidden;
  background:rgba(13,13,22,.55);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 34px rgba(124,124,240,.5),0 0 90px rgba(124,124,240,.25)}
.pg-add-patient .preview-box.has-img{cursor:grab;background:#0b0b14}
.pg-add-patient .preview-box.has-img.dragging{cursor:grabbing}
.pg-add-patient .preview-box img{position:absolute;top:50%;left:50%;transform-origin:center;will-change:transform;user-select:none;-webkit-user-drag:none;pointer-events:none;max-width:none}
.pg-add-patient .crop-zoom{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);z-index:4;display:none;align-items:center;gap:10px;background:rgba(15,15,24,.7);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.14);border-radius:30px;padding:8px 14px}
.pg-add-patient .preview-box.has-img .crop-zoom{display:flex}
.pg-add-patient .crop-zoom svg{width:16px;height:16px;color:#cfcfe0;flex-shrink:0}
.pg-add-patient .crop-zoom input[type=range]{width:120px;accent-color:var(--indigo);cursor:pointer}
.pg-add-patient .preview-box .ph{display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--muted)}
.pg-add-patient .preview-box .ph svg{width:54px;height:54px;stroke-width:1.4}
.pg-add-patient .preview-box .ph span{font-size:13px}
.pg-add-patient .cap{position:absolute;left:0;right:0;bottom:96px;text-align:center;color:#fff;font-size:14px;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.pg-add-patient .cam-controls{position:absolute;left:50%;transform:translateX(-50%);bottom:24px;height:48px;z-index:3}
.pg-add-patient .gallery-btn{width: 162px;position:absolute;top:0;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:9px;background:rgba(20,20,30,.6);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.18);color:#fff;padding:13px 22px;border-radius:12px;font-family:inherit;font-size:14px;cursor:pointer;transition:left .45s cubic-bezier(.4,0,.2,1),transform .45s cubic-bezier(.4,0,.2,1),background .15s}
.pg-add-patient .gallery-btn:hover{background:rgba(40,40,55,.75)}
.pg-add-patient .gallery-btn svg{width:17px;height:17px}
.pg-add-patient .continue-btn{position:absolute;top:0;right:0;display:flex;align-items:center;gap:9px;background:var(--indigo);border:none;color:#fff;padding:13px 26px;border-radius:12px;font-family:inherit;font-size:14px;font-weight:500;cursor:pointer;box-shadow:0 8px 22px rgba(79,70,229,.4);opacity:0;transform:translateX(14px);pointer-events:none;transition:opacity .45s ease,transform .45s cubic-bezier(.4,0,.2,1)}
.pg-add-patient .continue-btn svg{width:17px;height:17px}
.pg-add-patient .cam-controls.has-photo .gallery-btn{left:0;transform:translateX(0)}
.pg-add-patient .cam-controls.has-photo .continue-btn{opacity:1;transform:translateX(0);pointer-events:auto}

.pg-add-patient /* right cards */
.rcard{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:20px;flex-shrink:0}
.pg-add-patient .rcard h3{font-size:16px;font-weight:600;display:flex;align-items:center;gap:9px;margin-bottom:14px}
.pg-add-patient .rcard h3 svg{width:18px;height:18px}
.pg-add-patient .guide{list-style:none;display:flex;flex-direction:column;gap:11px}
.pg-add-patient .guide li{display:flex;align-items:center;gap:11px;font-size:14px;color:var(--muted)}
.pg-add-patient .guide li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--muted-2);flex-shrink:0}
.pg-add-patient .priv-note{display:flex;align-items:flex-start;gap:12px;background:rgba(255,255,255,.02);border:1px solid var(--border);border-radius:12px;padding:14px}
.pg-add-patient .priv-note svg{width:26px;height:26px;color:var(--indigo-soft);flex-shrink:0}
.pg-add-patient .priv-note p{font-size:13px;color:var(--muted);line-height:1.5}
.pg-add-patient .stats{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pg-add-patient .stat{border:1px solid var(--border);border-radius:13px;padding:16px}
.pg-add-patient .stat .v{font-size:26px;font-weight:600}
.pg-add-patient .stat .l{font-size:13px;color:var(--muted);margin-top:4px}
.pg-add-patient .ico-blue{color:var(--blue)}.pg-add-patient .ico-indigo{color:var(--indigo-soft)}.pg-add-patient .ico-green{color:var(--green)}

.pg-add-patient /* stepper completed */
.step.completed .num{background:var(--indigo);color:#fff}
.pg-add-patient .step .num svg{width:15px;height:15px}
.pg-add-patient .stepper .step{cursor:pointer}

.pg-add-patient /* left body wrappers */
.left-body{flex:1;min-height:0;display:flex;flex-direction:column}

.pg-add-patient /* form (step 2) */
.form-card{flex:1;min-height:0;margin-top:14px;border:1px solid var(--border-strong);border-radius:18px;padding:22px 24px;display:flex;flex-direction:column;
  background:radial-gradient(120% 90% at 0% 0%,rgba(79,70,229,.10),rgba(79,70,229,0) 45%),var(--panel)}
.pg-add-patient .fld{margin-bottom:16px}
.pg-add-patient .fld-label{display:block;font-size:14px;font-weight:500;margin-bottom:8px}
.pg-add-patient .input{display:flex;align-items:center;gap:11px;height:48px;border:1px solid var(--border-strong);border-radius:12px;padding:0 16px;background:rgba(255,255,255,.02)}
.pg-add-patient .input svg{width:18px;height:18px;color:var(--muted);flex-shrink:0}
.pg-add-patient .input input{flex:1;min-width:0;background:none;border:none;outline:none;color:var(--text);font-family:inherit;font-size:15px}
.pg-add-patient .input input::placeholder{color:var(--muted)}
.pg-add-patient .phone{display:flex;gap:12px}
.pg-add-patient .cc{display:flex;align-items:center;gap:8px;height:48px;padding:0 14px;border:1px solid var(--border-strong);border-radius:12px;background:rgba(255,255,255,.02);color:var(--text);font-size:15px;cursor:pointer;white-space:nowrap}
.pg-add-patient .cc svg{width:14px;height:14px;color:var(--muted)}
.pg-add-patient .phone .input{flex:1}
.pg-add-patient .row2{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.pg-add-patient .gender{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pg-add-patient .radio{display:flex;align-items:center;gap:12px;height:48px;border:1px solid var(--border-strong);border-radius:12px;padding:0 16px;cursor:pointer;font-size:15px;transition:.15s}
.pg-add-patient .radio.active{border-color:var(--indigo);background:rgba(79,70,229,.14)}
.pg-add-patient .radio .dot{width:18px;height:18px;border-radius:50%;border:2px solid var(--muted);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.pg-add-patient .radio.active .dot{border-color:var(--indigo)}
.pg-add-patient .radio.active .dot::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--indigo)}
.pg-add-patient .form-actions{margin-top:auto;border-top:1px solid var(--border);padding-top:18px;display:flex;align-items:center;justify-content:flex-end;gap:18px}
.pg-add-patient .btn-back{background:none;border:none;color:var(--muted);font-family:inherit;font-size:15px;cursor:pointer;padding:10px 8px}
.pg-add-patient .btn-add{background:var(--indigo);color:#fff;border:none;padding:13px 28px;border-radius:12px;font-family:inherit;font-size:15px;font-weight:500;cursor:pointer;box-shadow:0 8px 22px rgba(79,70,229,.35)}

.pg-add-patient /* right step 2 */
.pv-avatar{width:82px;height:82px;border-radius:50%;object-fit:cover;display:block;margin:4px auto 12px;background:#222}
.pg-add-patient .pv-name{text-align:center;font-size:18px;font-weight:600}
.pg-add-patient .pv-meta{text-align:center;color:var(--muted);font-size:14px;margin-top:5px}
.pg-add-patient .pv-tags{display:flex;gap:8px;justify-content:center;margin-top:14px}
.pg-add-patient .ptag{font-size:12.5px;padding:5px 14px;border-radius:14px}
.pg-add-patient .ptag.cos{background:rgba(45,212,191,.18);color:#5fd9ca}
.pg-add-patient .ptag.fac{background:rgba(34,197,94,.18);color:#5fd98a}
.pg-add-patient .lp-list{display:flex;flex-direction:column}
.pg-add-patient .lp-item{display:flex;align-items:center;gap:13px;padding:9px 0;border-bottom:1px solid var(--border)}
.pg-add-patient .lp-item:last-child{border-bottom:none}
.pg-add-patient .lp-item img{width:40px;height:40px;border-radius:50%;object-fit:cover;flex-shrink:0;background:#222}
.pg-add-patient .lp-item .n{font-size:14.5px;font-weight:500}
.pg-add-patient .lp-item .t{font-size:13px;color:var(--muted);margin-top:2px}

@media (max-width:1280px){
  .pg-add-patient .content{grid-template-columns:1fr 320px}
  .pg-add-patient .search{width:220px}
}
@media (max-width:1040px){
  .pg-add-patient .content{grid-template-columns:1fr}
  .pg-add-patient .right{flex-direction:row;flex-wrap:wrap;overflow:visible}
  .pg-add-patient .rcard{flex:1;min-width:240px}
  .pg-add-patient .sidebar{width:240px}
}
.pg-add-patient /* sidebar collapse + handle + dropdown menus */
.sidebar{transition:width .25s ease}
.pg-add-patient .app.collapsed .sidebar{width:76px}
.pg-add-patient .app.collapsed .logo{justify-content:center;padding:0}
.pg-add-patient .app.collapsed .logo-after,.pg-add-patient .app.collapsed .logo-actions,.pg-add-patient .app.collapsed .nav-label,.pg-add-patient .app.collapsed .upgrade-card{display:none}
.pg-add-patient .app.collapsed .nav a,.pg-add-patient .app.collapsed .side-bottom a{justify-content:center;gap:0;padding-left:0;font-size:0}
.pg-add-patient .app.collapsed .nav a{padding:11px 0}
.pg-add-patient .app.collapsed .nav a svg,.pg-add-patient .app.collapsed .side-bottom a svg{font-size:initial}
.pg-add-patient .side-handle{position:fixed;bottom:17px;left:201px;z-index:60;width:28px;height:28px;border-radius:50%;background:#15151f;border:1px solid var(--border-strong);color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:left .25s ease}
.pg-add-patient .side-handle:hover{color:#fff;background:#1d1d2a}
.pg-add-patient .side-handle svg{width:15px;height:15px}
.pg-add-patient .app.collapsed ~ .side-handle{left:61px}
.pg-add-patient .side-handle .ic-expand{display:none}
.pg-add-patient .app.collapsed ~ .side-handle .ic-collapse{display:none}
.pg-add-patient .app.collapsed ~ .side-handle .ic-expand{display:block}
.pg-add-patient .lbell,.pg-add-patient .lav{cursor:pointer}
.pg-add-patient .menu{position:fixed;z-index:200;width:300px;background:#10101c;border:1px solid var(--border-strong);border-radius:14px;box-shadow:0 24px 60px rgba(0,0,0,.55);padding:8px;display:none}
.pg-add-patient .menu.show{display:block;animation:menupop .18s ease}
@keyframes menupop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.pg-add-patient .menu-head{padding:10px 12px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;margin-bottom:6px}
.pg-add-patient .menu-head .mh-t{font-size:15px;font-weight:600}
.pg-add-patient .menu-head img{width:42px;height:42px;border-radius:50%;object-fit:cover}
.pg-add-patient .menu-head .e{font-size:12.5px;color:var(--muted);margin-top:2px}
.pg-add-patient .menu-item{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:9px;color:var(--text);font-size:14px;cursor:pointer;text-decoration:none}
.pg-add-patient .menu-item:hover{background:rgba(255,255,255,.05)}
.pg-add-patient .menu-item svg{width:17px;height:17px;color:var(--muted)}
.pg-add-patient .menu-item.danger,.pg-add-patient .menu-item.danger svg{color:#ef6b6b}
.pg-add-patient .menu-div{height:1px;background:var(--border);margin:6px 8px}
.pg-add-patient .noti{display:flex;gap:11px;padding:11px 12px;border-radius:9px;cursor:pointer}
.pg-add-patient .noti:hover{background:rgba(255,255,255,.04)}
.pg-add-patient .noti .nic{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.pg-add-patient .noti .nic svg{width:16px;height:16px}
.pg-add-patient .noti .nt{font-size:13.5px}
.pg-add-patient .noti .ntime{font-size:12px;color:var(--muted);margin-top:2px}
.pg-add-patient .menu-foot{text-align:center;padding:9px;border-top:1px solid var(--border);margin-top:4px}
.pg-add-patient .menu-foot a{color:var(--indigo-soft);font-size:13px;text-decoration:none}

/* ===== ai-studio.html ===== */

@font-face{font-family:'Geist';src:url('../fonts/Geist-VariableFont_wght.ttf') format('truetype-variations');font-weight:100 900;font-style:normal;font-display:swap}
body.pg-ai-studio{
  --bg:#070710;--sidebar:#08080f;--card:#0e0e1a;--panel:#0c0c18;
  --border:rgba(255,255,255,.06);--border-strong:rgba(255,255,255,.10);
  --text:#f4f4f6;--muted:#8b8b9a;--muted-2:#6c6c7a;
  --indigo:#4f46e5;--indigo-soft:#7c7cf0;--green:#22c55e;--blue:#60a5fa;
}
*{box-sizing:border-box;margin:0;padding:0}
.pg-ai-studio a,.pg-ai-studio button{transition:background-color .22s ease,border-color .22s ease,color .18s ease,box-shadow .2s ease}
.pg-ai-studio .mod-card,.pg-ai-studio .feat,.pg-ai-studio .back-link{transition:background-color .22s ease,border-color .22s ease,color .18s ease,transform .2s ease}
html,body.pg-ai-studio{height:100%}
body.pg-ai-studio{font-family:'Geist',system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;font-feature-settings:"ss01";height:100vh;overflow:hidden}
.pg-ai-studio .app{display:flex;height:100vh;overflow:hidden}

.pg-ai-studio /* SIDEBAR */
.sidebar{width:240px;flex-shrink:0;background:var(--sidebar);border-right:1px solid var(--border);padding:20px 22px;display:flex;flex-direction:column;overflow:hidden}
.pg-ai-studio .logo{font-size:27px;font-weight:600;letter-spacing:-.5px;display:flex;align-items:center;justify-content:space-between;height:45px;margin:0 -22px 20px;padding:0 22px 0 28px;border-bottom:1px solid var(--border)}
.pg-ai-studio .logo .x{background:linear-gradient(135deg,#6366f1,#a78bfa);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:700}
.pg-ai-studio .logo-text{display:flex;align-items:center;gap:4px}
.pg-ai-studio .logo-actions{display:flex;align-items:center;gap:10px}
.pg-ai-studio .logo-actions .lbell{width:34px;height:34px;border-radius:10px;border:1px solid var(--border-strong);background:transparent;color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer}
.pg-ai-studio .logo-actions .lbell svg{width:18px;height:18px}
.pg-ai-studio .logo-actions .lav{width:34px;height:34px;border-radius:50%;object-fit:cover;cursor:pointer;background:#222}
.pg-ai-studio .nav-label{font-size:12.5px;color:var(--muted-2);margin:0 0 12px 10px}
.pg-ai-studio .nav{display:flex;flex-direction:column;gap:3px}
.pg-ai-studio .nav a{display:flex;align-items:center;gap:14px;padding:10px 16px;border-radius:11px;color:var(--muted);text-decoration:none;font-size:15px;transition:.15s}
.pg-ai-studio .nav a svg{width:20px;height:20px;stroke-width:1.7;flex-shrink:0}
.pg-ai-studio .nav a:hover{color:var(--text);background:rgba(255,255,255,.03)}
.pg-ai-studio .nav a.active{background:var(--indigo);color:#fff;font-weight:500;box-shadow:0 6px 20px rgba(79,70,229,.35)}
.pg-ai-studio .upgrade-card{margin-top:auto;background:rgba(255,255,255,.02);border:1px solid var(--border);border-radius:16px;padding:16px}
.pg-ai-studio .upgrade-card .head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:6px}
.pg-ai-studio .upgrade-card h4{font-size:16px;font-weight:600;color:var(--indigo-soft)}
.pg-ai-studio .upgrade-card .crown{width:32px;height:32px;border-radius:10px;background:radial-gradient(circle at 30% 30%,#3a2f14,#1b1607);display:flex;align-items:center;justify-content:center;font-size:16px}
.pg-ai-studio .upgrade-card p{font-size:13px;color:var(--muted);line-height:1.45;margin-bottom:14px}
.pg-ai-studio .upgrade-card button{background:var(--indigo);color:#fff;border:none;padding:10px 20px;border-radius:10px;font-family:inherit;font-size:14px;font-weight:500;cursor:pointer}
.pg-ai-studio .side-bottom{padding-top:18px;display:flex;flex-direction:column;gap:14px}
.pg-ai-studio .side-bottom a{display:flex;align-items:center;gap:14px;color:var(--muted);text-decoration:none;font-size:15px;padding-left:6px}
.pg-ai-studio .side-bottom a svg{width:19px;height:19px;stroke-width:1.7}

.pg-ai-studio /* MAIN */
.main{flex:1;padding:20px 26px;min-width:0;display:flex;flex-direction:column;overflow:hidden}
.pg-ai-studio .page-head{flex-shrink:0;margin-bottom:18px}
.pg-ai-studio .page-head h1{font-size:24px;font-weight:600;display:flex;align-items:center;gap:10px}
.pg-ai-studio .page-head .spark{width:26px;height:26px;color:var(--indigo-soft)}
.pg-ai-studio .page-head p{color:var(--muted);font-size:14px;margin-top:5px}
.pg-ai-studio .back-link{display:inline-flex;align-items:center;gap:8px;color:var(--muted);text-decoration:none;font-size:15px;margin-bottom:14px;cursor:pointer;align-self:flex-start}
.pg-ai-studio .back-link:hover{color:var(--text)}
.pg-ai-studio .back-link svg{width:17px;height:17px}

.pg-ai-studio .scroll{flex:1;min-height:0;overflow:auto;padding:10px 6px 0 2px;
  -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 36px),transparent 100%);mask-image:linear-gradient(to bottom,#000 calc(100% - 36px),transparent 100%)}
.pg-ai-studio .scroll::-webkit-scrollbar{width:8px}
.pg-ai-studio .scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:8px}

.pg-ai-studio /* module grid */
.studio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-content:start}
.pg-ai-studio .mod-card{position:relative;border:1px solid var(--border);border-radius:18px;padding:22px;background:var(--card);cursor:pointer;overflow:hidden}
.pg-ai-studio .mod-card::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 120% at 100% 0%,var(--acc-soft),transparent 60%);opacity:.5;pointer-events:none}
.pg-ai-studio .mod-card:hover{border-color:var(--border-strong);transform:translateY(-3px);background:var(--mod-card-hover,#12121f)}
.pg-ai-studio .mod-icon{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;color:#fff;margin-bottom:16px}
.pg-ai-studio .mod-icon svg{width:26px;height:26px}
.pg-ai-studio .mod-card h3{font-size:17px;font-weight:600;margin-bottom:7px}
.pg-ai-studio .mod-card p{font-size:13.5px;color:var(--muted);line-height:1.5}
.pg-ai-studio .mod-foot{display:flex;align-items:center;justify-content:space-between;margin-top:18px}
.pg-ai-studio .mod-credits{font-size:12.5px;color:var(--muted-2);display:flex;align-items:center;gap:6px}
.pg-ai-studio .mod-credits svg{width:14px;height:14px;color:var(--indigo-soft)}
.pg-ai-studio .mod-badge{font-size:11.5px;font-weight:500;padding:4px 10px;border-radius:8px}
.pg-ai-studio .mod-badge.avail{background:rgba(34,197,94,.16);color:#5fd98a}
.pg-ai-studio .mod-badge.beta{background:rgba(124,124,240,.18);color:var(--indigo-soft)}
.pg-ai-studio .mod-arrow{position:absolute;right:20px;bottom:20px;color:var(--muted);opacity:0;transform:translateX(-4px);transition:.2s}
.pg-ai-studio .mod-card:hover .mod-arrow{opacity:1;transform:none}

.pg-ai-studio /* detail */
.detail-hero{display:flex;gap:22px;align-items:flex-start;border:1px solid var(--border-strong);border-radius:20px;padding:26px;margin-bottom:22px;
  background:radial-gradient(120% 160% at 100% 0%,var(--acc-soft),transparent 55%),var(--panel)}
.pg-ai-studio .detail-icon{width:72px;height:72px;border-radius:18px;display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0}
.pg-ai-studio .detail-icon svg{width:36px;height:36px}
.pg-ai-studio .detail-info{flex:1;min-width:0}
.pg-ai-studio .detail-info .badges{display:flex;gap:8px;margin-bottom:10px}
.pg-ai-studio .detail-info h2{font-size:24px;font-weight:600}
.pg-ai-studio .detail-info .tag{font-size:14px;color:var(--indigo-soft);margin-top:4px}
.pg-ai-studio .detail-info .desc{font-size:14px;color:var(--muted);line-height:1.6;margin-top:12px;max-width:680px}
.pg-ai-studio .detail-actions{display:flex;flex-direction:column;gap:10px;align-items:flex-end;flex-shrink:0}
.pg-ai-studio .btn-launch{display:flex;align-items:center;gap:9px;background:var(--indigo);color:#fff;border:none;padding:13px 24px;border-radius:12px;font-family:inherit;font-size:15px;font-weight:500;cursor:pointer;box-shadow:0 8px 22px rgba(79,70,229,.35);white-space:nowrap}
.pg-ai-studio .btn-launch svg{width:18px;height:18px}
.pg-ai-studio .credit-note{font-size:12.5px;color:var(--muted)}

.pg-ai-studio .sec-title{font-size:18px;font-weight:600;margin:4px 0 14px}
.pg-ai-studio .feat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-bottom:24px}
.pg-ai-studio .feat{display:flex;gap:13px;border:1px solid var(--border);border-radius:14px;padding:16px;background:var(--card)}
.pg-ai-studio .feat .fic{width:34px;height:34px;border-radius:10px;background:rgba(124,124,240,.14);color:var(--indigo-soft);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.pg-ai-studio .feat .fic svg{width:18px;height:18px}
.pg-ai-studio .feat h4{font-size:14.5px;font-weight:600}
.pg-ai-studio .feat p{font-size:13px;color:var(--muted);margin-top:3px;line-height:1.45}
.pg-ai-studio .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:10px}
.pg-ai-studio .step{border:1px solid var(--border);border-radius:14px;padding:16px;background:var(--card)}
.pg-ai-studio .step .n{width:28px;height:28px;border-radius:50%;background:var(--indigo);color:#fff;font-size:14px;font-weight:600;display:flex;align-items:center;justify-content:center;margin-bottom:10px}
.pg-ai-studio .step h4{font-size:14px;font-weight:600}
.pg-ai-studio .step p{font-size:12.5px;color:var(--muted);margin-top:3px;line-height:1.45}

.pg-ai-studio /* templates view */
.tpl-head{display:flex;align-items:center;justify-content:space-between;flex-shrink:0;margin-bottom:14px}
.pg-ai-studio .tpl-head h1{font-size:22px;font-weight:600}
.pg-ai-studio .btn-activity{display:flex;align-items:center;gap:8px;background:var(--indigo);color:#fff;border:none;padding:11px 18px;border-radius:11px;font-family:inherit;font-size:14px;font-weight:500;cursor:pointer;box-shadow:0 8px 20px rgba(79,70,229,.35)}
.pg-ai-studio .btn-activity svg{width:16px;height:16px}
.pg-ai-studio .tpl-panel{flex:1;min-height:0;display:flex;flex-direction:column;border:1px solid var(--border-strong);border-radius:20px;padding:20px 22px;background:radial-gradient(120% 70% at 50% 0%,rgba(79,70,229,.10),rgba(79,70,229,0) 50%),var(--panel)}
.pg-ai-studio .tpl-toolbar{display:flex;align-items:center;gap:14px;flex-shrink:0}
.pg-ai-studio .tpl-search{flex:1;display:flex;align-items:center;gap:10px;height:46px;border:1px solid var(--border-strong);border-radius:12px;padding:0 16px;color:var(--muted)}
.pg-ai-studio .tpl-search svg{width:17px;height:17px}
.pg-ai-studio .tpl-search input{flex:1;background:none;border:none;outline:none;color:var(--text);font-family:inherit;font-size:14px}
.pg-ai-studio .tpl-search input::placeholder{color:var(--muted)}
.pg-ai-studio .ctrl{display:flex;align-items:center;gap:9px;height:46px;padding:0 16px;border:1px solid var(--border-strong);border-radius:11px;background:transparent;color:var(--text);font-family:inherit;font-size:14px;cursor:pointer;white-space:nowrap}
.pg-ai-studio .ctrl svg{width:15px;height:15px;color:var(--muted)}
.pg-ai-studio .sortby{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:14px}
.pg-ai-studio .chips{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 4px;flex-shrink:0}
.pg-ai-studio .chip{padding:9px 18px;border-radius:20px;border:1px solid var(--border-strong);background:transparent;color:var(--text);font-family:inherit;font-size:13.5px;cursor:pointer}
.pg-ai-studio .chip:hover{background:rgba(255,255,255,.04)}
.pg-ai-studio .chip.active{background:var(--indigo);border-color:transparent;color:#fff}
.pg-ai-studio .tpl-scroll{flex:1;min-height:0;overflow:auto;padding:14px 4px 4px;-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 30px),transparent 100%);mask-image:linear-gradient(to bottom,#000 calc(100% - 30px),transparent 100%)}
.pg-ai-studio .tpl-scroll.scrolled{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 26px,#000 calc(100% - 30px),transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 26px,#000 calc(100% - 30px),transparent 100%)}
.pg-ai-studio .tpl-scroll::-webkit-scrollbar{width:8px}.pg-ai-studio .tpl-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:8px}
.pg-ai-studio .tpl-section-title{font-size:16px;font-weight:600;margin:6px 0 14px}
.pg-ai-studio .tpl-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;margin-bottom:22px}
.pg-ai-studio .tcard{border:1px solid var(--border);border-radius:16px;overflow:hidden;background:var(--card);cursor:pointer;transition:border-color .15s,transform .2s}
.pg-ai-studio .tcard:hover{border-color:var(--border-strong);transform:translateY(-3px)}
.pg-ai-studio .tcard .thumb{position:relative;aspect-ratio:4/3;background:#222}
.pg-ai-studio .tcard .thumb img{width:100%;height:100%;object-fit:cover}
.pg-ai-studio .tcard .kebab{position:absolute;top:10px;right:10px;width:28px;height:28px;border-radius:8px;background:rgba(20,20,30,.55);backdrop-filter:blur(4px);border:none;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer}
.pg-ai-studio .tcard .kebab svg{width:16px;height:16px}
.pg-ai-studio .tcard .tc-body{padding:14px 16px}
.pg-ai-studio .tcard h4{font-size:15px;font-weight:600;margin-bottom:10px}
.pg-ai-studio .tcard .tc-foot{display:flex;align-items:center;justify-content:space-between}
.pg-ai-studio .tc-credits{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted)}
.pg-ai-studio .tc-credits svg{width:14px;height:14px;color:#f0a85e}
.pg-ai-studio .tc-tag{font-size:12px;padding:4px 12px;border-radius:8px;background:rgba(92,200,232,.12);color:#5cc8e8}

.pg-ai-studio /* config view */
.cfg-crumb{display:flex;align-items:center;gap:9px;color:var(--muted);font-size:14px;margin-bottom:8px;flex-shrink:0}
.pg-ai-studio .cfg-crumb svg{width:14px;height:14px}.pg-ai-studio .cfg-crumb .cur{color:var(--text)}
.pg-ai-studio .cfg-title{display:flex;align-items:center;gap:12px;font-size:23px;font-weight:600;flex-shrink:0;margin-bottom:16px}
.pg-ai-studio .cfg-title .tag{font-size:12.5px;font-weight:400;padding:5px 14px;border-radius:8px;background:rgba(92,200,232,.12);color:#5cc8e8}
.pg-ai-studio .cfg-scroll{flex:1;min-height:0;overflow:auto;padding-right:4px;-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 28px),transparent 100%);mask-image:linear-gradient(to bottom,#000 calc(100% - 28px),transparent 100%)}
.pg-ai-studio .cfg-scroll::-webkit-scrollbar{width:8px}.pg-ai-studio .cfg-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:8px}
.pg-ai-studio .cfg-card{display:grid;grid-template-columns:auto 1fr 1.2fr;gap:24px;align-items:center;border:1px solid var(--border-strong);border-radius:18px;padding:20px;margin-bottom:18px;background:radial-gradient(120% 160% at 0% 0%,rgba(79,70,229,.14),rgba(79,70,229,0) 55%),var(--panel)}
.pg-ai-studio .cfg-card .cthumb{width:96px;height:96px;border-radius:14px;object-fit:cover;background:#222}
.pg-ai-studio .cfg-card .l{font-size:12.5px;color:var(--muted)}
.pg-ai-studio .cfg-card .nm{font-size:19px;font-weight:600;margin:4px 0 8px}
.pg-ai-studio .cfg-card .cr{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted)}
.pg-ai-studio .cfg-card .cr svg{width:14px;height:14px;color:#f0a85e}
.pg-ai-studio .cfg-card .wd{border-left:1px solid var(--border);padding-left:24px}
.pg-ai-studio .cfg-card .wd h4{font-size:14px;font-weight:600;margin-bottom:7px}
.pg-ai-studio .cfg-card .wd p{font-size:13px;color:var(--muted);line-height:1.5}
.pg-ai-studio .cfg-sec{border:1px solid var(--border);border-radius:18px;padding:18px;margin-bottom:18px;background:var(--card)}
.pg-ai-studio .cfg-cols{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start;margin-bottom:18px}
.pg-ai-studio .cfg-cols .cfg-sec{margin-bottom:0;height:100%}
.pg-ai-studio .cfg-cols .gen-grid{grid-template-columns:1fr;gap:13px;margin-bottom:16px}
.pg-ai-studio .cfg-cols .aspect-grid{grid-template-columns:repeat(2,1fr)}
.pg-ai-studio .cfg-sec .sec-h{display:flex;align-items:flex-start;gap:13px;margin-bottom:18px}
.pg-ai-studio .cfg-sec .num{width:30px;height:30px;border-radius:50%;background:var(--indigo);color:#fff;font-weight:600;font-size:14px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.pg-ai-studio .cfg-sec .sec-h .t{font-size:16px;font-weight:600}
.pg-ai-studio .cfg-sec .sec-h .s{font-size:13px;color:var(--muted);margin-top:2px}
.pg-ai-studio .dz-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.pg-ai-studio .dz{border:1.5px dashed var(--border-strong);border-radius:14px;padding:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;text-align:center;min-height:158px;position:relative;overflow:hidden;cursor:pointer}
.pg-ai-studio .dz .upic{width:38px;height:38px}
.pg-ai-studio .dz:hover{border-color:var(--indigo);background:rgba(79,70,229,.04)}
.pg-ai-studio .dz .upic{width:46px;height:46px;color:var(--muted)}
.pg-ai-studio .dz .t{font-size:15px;font-weight:500;margin-top:4px}
.pg-ai-studio .dz .f{font-size:12.5px;color:var(--muted)}
.pg-ai-studio .dz .browse{margin-top:10px;padding:9px 18px;border:1px solid var(--border-strong);border-radius:10px;background:transparent;color:#fff;font-family:inherit;font-size:13.5px;cursor:pointer}
.pg-ai-studio .dz img.prev{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pg-ai-studio .gen-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:18px}
.pg-ai-studio .fld label{display:block;font-size:14px;margin-bottom:8px}
.pg-ai-studio .sel{position:relative}
.pg-ai-studio .sel select{width:100%;height:48px;border:1px solid var(--border-strong);border-radius:12px;background:rgba(255,255,255,.02);color:#fff;font-family:inherit;font-size:14px;padding:0 38px 0 16px;appearance:none;-webkit-appearance:none;cursor:pointer}
.pg-ai-studio .sel svg{position:absolute;right:14px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--muted);pointer-events:none}
.pg-ai-studio .aspect-label{font-size:14px;margin-bottom:10px}
.pg-ai-studio .aspect-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.pg-ai-studio .asp{border:1px solid var(--border-strong);border-radius:12px;padding:14px;cursor:pointer;text-align:center}
.pg-ai-studio .asp .r{font-size:15px;font-weight:600}
.pg-ai-studio .asp .n{font-size:12.5px;color:var(--muted);margin-top:3px}
.pg-ai-studio .asp.active{border-color:var(--indigo);background:rgba(79,70,229,.12)}
.pg-ai-studio .cfg-foot{display:flex;align-items:center;justify-content:flex-end;gap:20px;border-top:1px solid var(--border);padding-top:18px;margin-top:4px}
.pg-ai-studio .cfg-foot .cr b{display:flex;align-items:center;gap:6px;font-size:15px;font-weight:600}
.pg-ai-studio .cfg-foot .cr b svg{width:15px;height:15px;color:#f0a85e}
.pg-ai-studio .cfg-foot .cr .s{font-size:12.5px;color:var(--muted);margin-top:2px;text-align:right}
.pg-ai-studio .btn-generate{display:flex;align-items:center;gap:9px;background:linear-gradient(135deg,#7c3aed,#4f46e5);color:#fff;border:none;padding:14px 30px;border-radius:12px;font-family:inherit;font-size:15px;font-weight:600;cursor:pointer;box-shadow:0 10px 26px rgba(79,70,229,.45)}
.pg-ai-studio .btn-generate svg{width:18px;height:18px}

.pg-ai-studio /* activity view */
.act-head-row{flex-shrink:0;margin-bottom:14px}
.pg-ai-studio .act-head-row h1{font-size:22px;font-weight:600}
.pg-ai-studio .act-panel{flex:1;min-height:0;display:flex;flex-direction:column;border:1px solid var(--border-strong);border-radius:20px;padding:20px 22px;background:radial-gradient(120% 70% at 50% 0%,rgba(79,70,229,.10),rgba(79,70,229,0) 50%),var(--panel)}
.pg-ai-studio .act-toolbar{display:flex;align-items:center;gap:12px;flex-shrink:0}
.pg-ai-studio .act-search{display:flex;align-items:center;gap:10px;width:300px;height:46px;border:1px solid var(--border-strong);border-radius:12px;padding:0 16px;color:var(--muted)}
.pg-ai-studio .act-search svg{width:17px;height:17px}
.pg-ai-studio .act-search input{flex:1;background:none;border:none;outline:none;color:var(--text);font-family:inherit;font-size:14px}
.pg-ai-studio .act-search input::placeholder{color:var(--muted)}
.pg-ai-studio .act-toolbar .right{margin-left:auto;display:flex;align-items:center;gap:12px}
.pg-ai-studio .act-lbl{color:var(--muted);font-size:14px}
.pg-ai-studio .act-table{flex:1;min-height:0;overflow:auto;margin-top:14px;-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 28px),transparent 100%);mask-image:linear-gradient(to bottom,#000 calc(100% - 28px),transparent 100%)}
.pg-ai-studio .act-table::-webkit-scrollbar{width:8px}.pg-ai-studio .act-table::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:8px}
.pg-ai-studio .act-thead,.pg-ai-studio .act-row{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr 1fr 1.2fr 90px;align-items:center;gap:14px}
.pg-ai-studio .act-thead{color:var(--muted);font-size:14px;padding:0 14px 14px;border-bottom:1px solid var(--border)}
.pg-ai-studio .act-thead .right,.pg-ai-studio .act-row .acts{justify-self:end}
.pg-ai-studio .act-row{padding:13px 14px;border-bottom:1px solid var(--border);font-size:14.5px}
.pg-ai-studio .act-row:last-child{border-bottom:none}
.pg-ai-studio .act-tpl{display:flex;align-items:center;gap:12px;min-width:0}
.pg-ai-studio .act-tpl img{width:36px;height:36px;border-radius:50%;object-fit:cover;flex-shrink:0;background:#222}
.pg-ai-studio .act-tpl span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pg-ai-studio .st{font-size:12.5px;padding:5px 13px;border-radius:14px;display:inline-block}
.pg-ai-studio .st.pending{background:rgba(245,158,66,.18);color:#f0a85e}
.pg-ai-studio .st.done{background:rgba(34,197,94,.16);color:#5fd98a}
.pg-ai-studio .act-actions{display:flex;gap:6px;justify-self:end}
.pg-ai-studio .act-actions button{width:32px;height:32px;border:none;background:none;color:var(--muted);cursor:pointer;border-radius:8px;display:flex;align-items:center;justify-content:center}
.pg-ai-studio .act-actions button:hover{color:#fff;background:rgba(255,255,255,.06)}
.pg-ai-studio .act-actions svg{width:17px;height:17px}
.pg-ai-studio .act-pager{display:flex;align-items:center;justify-content:flex-end;gap:8px;padding-top:14px;flex-shrink:0;font-size:14px}
.pg-ai-studio .act-pager button,.pg-ai-studio .act-pager .pg{background:none;border:none;color:var(--muted);font-family:inherit;font-size:14px;cursor:pointer;display:flex;align-items:center;gap:6px;padding:8px 10px;border-radius:9px}
.pg-ai-studio .act-pager .pg{min-width:34px;height:34px;justify-content:center}
.pg-ai-studio .act-pager .pg.active{background:var(--indigo);color:#fff}
.pg-ai-studio .act-pager svg{width:15px;height:15px}

@media (max-width:1400px){.pg-ai-studio .studio-grid{grid-template-columns:repeat(2,1fr)}.pg-ai-studio .tpl-grid{grid-template-columns:repeat(4,1fr)}}
@media (max-width:1050px){.pg-ai-studio .tpl-grid{grid-template-columns:repeat(3,1fr)}.pg-ai-studio .gen-grid{grid-template-columns:1fr}.pg-ai-studio .aspect-grid{grid-template-columns:repeat(2,1fr)}.pg-ai-studio .dz-grid{grid-template-columns:1fr}.pg-ai-studio .cfg-card{grid-template-columns:1fr}.pg-ai-studio .cfg-card .wd{border-left:none;padding-left:0;border-top:1px solid var(--border);padding-top:14px}.pg-ai-studio .cfg-cols{grid-template-columns:1fr}}
@media (max-width:1100px){.pg-ai-studio .sidebar{width:240px}.pg-ai-studio .feat-grid{grid-template-columns:1fr}.pg-ai-studio .steps{grid-template-columns:1fr}}
@media (max-width:780px){.pg-ai-studio .studio-grid{grid-template-columns:1fr}.pg-ai-studio .detail-hero{flex-wrap:wrap}.pg-ai-studio .detail-actions{align-items:flex-start}}
.pg-ai-studio /* sidebar collapse + handle + dropdown menus */
.sidebar{transition:width .25s ease}
.pg-ai-studio .app.collapsed .sidebar{width:76px}
.pg-ai-studio .app.collapsed .logo{justify-content:center;padding:0}
.pg-ai-studio .app.collapsed .logo-after,.pg-ai-studio .app.collapsed .logo-actions,.pg-ai-studio .app.collapsed .nav-label,.pg-ai-studio .app.collapsed .upgrade-card{display:none}
.pg-ai-studio .app.collapsed .nav a,.pg-ai-studio .app.collapsed .side-bottom a{justify-content:center;gap:0;padding-left:0;font-size:0}
.pg-ai-studio .app.collapsed .nav a{padding:11px 0}
.pg-ai-studio .app.collapsed .nav a svg,.pg-ai-studio .app.collapsed .side-bottom a svg{font-size:initial}
.pg-ai-studio .side-handle{position:fixed;bottom:17px;left:201px;z-index:60;width:28px;height:28px;border-radius:50%;background:#15151f;border:1px solid var(--border-strong);color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:left .25s ease}
.pg-ai-studio .side-handle:hover{color:#fff;background:#1d1d2a}
.pg-ai-studio .side-handle svg{width:15px;height:15px}
.pg-ai-studio .app.collapsed ~ .side-handle{left:61px}
.pg-ai-studio .side-handle .ic-expand{display:none}
.pg-ai-studio .app.collapsed ~ .side-handle .ic-collapse{display:none}
.pg-ai-studio .app.collapsed ~ .side-handle .ic-expand{display:block}
.pg-ai-studio .lbell,.pg-ai-studio .lav{cursor:pointer}
.pg-ai-studio .menu{position:fixed;z-index:200;width:300px;background:#10101c;border:1px solid var(--border-strong);border-radius:14px;box-shadow:0 24px 60px rgba(0,0,0,.55);padding:8px;display:none}
.pg-ai-studio .menu.show{display:block;animation:menupop .18s ease}
@keyframes menupop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.pg-ai-studio .menu-head{padding:10px 12px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;margin-bottom:6px}
.pg-ai-studio .menu-head .mh-t{font-size:15px;font-weight:600}
.pg-ai-studio .menu-head img{width:42px;height:42px;border-radius:50%;object-fit:cover}
.pg-ai-studio .menu-head .e{font-size:12.5px;color:var(--muted);margin-top:2px}
.pg-ai-studio .menu-item{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:9px;color:var(--text);font-size:14px;cursor:pointer;text-decoration:none}
.pg-ai-studio .menu-item:hover{background:rgba(255,255,255,.05)}
.pg-ai-studio .menu-item svg{width:17px;height:17px;color:var(--muted)}
.pg-ai-studio .menu-item.danger,.pg-ai-studio .menu-item.danger svg{color:#ef6b6b}
.pg-ai-studio .menu-div{height:1px;background:var(--border);margin:6px 8px}
.pg-ai-studio .noti{display:flex;gap:11px;padding:11px 12px;border-radius:9px;cursor:pointer}
.pg-ai-studio .noti:hover{background:rgba(255,255,255,.04)}
.pg-ai-studio .noti .nic{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.pg-ai-studio .noti .nic svg{width:16px;height:16px}
.pg-ai-studio .noti .nt{font-size:13.5px}
.pg-ai-studio .noti .ntime{font-size:12px;color:var(--muted);margin-top:2px}
.pg-ai-studio .menu-foot{text-align:center;padding:9px;border-top:1px solid var(--border);margin-top:4px}
.pg-ai-studio .menu-foot a{color:var(--indigo-soft);font-size:13px;text-decoration:none}

/* ===== album.html ===== */

@font-face{font-family:'Geist';src:url('../fonts/Geist-VariableFont_wght.ttf') format('truetype-variations');font-weight:100 900;font-style:normal;font-display:swap}
body.pg-album{
  --bg:#070710;--sidebar:#08080f;--card:#0e0e1a;--panel:#0c0c18;
  --border:rgba(255,255,255,.06);--border-strong:rgba(255,255,255,.10);
  --text:#f4f4f6;--muted:#8b8b9a;--muted-2:#6c6c7a;
  --indigo:#4f46e5;--indigo-soft:#7c7cf0;--green:#22c55e;--blue:#60a5fa;
}
*{box-sizing:border-box;margin:0;padding:0}
.pg-album a,.pg-album button{transition:background-color .22s ease,border-color .22s ease,color .18s ease,box-shadow .2s ease}
.pg-album .tab2,.pg-album .media-tile,.pg-album .ctrl,.pg-album .back-link{transition:background-color .22s ease,border-color .22s ease,color .18s ease}
html,body.pg-album{height:100%}
body.pg-album{font-family:'Geist',system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;font-feature-settings:"ss01";height:100vh;overflow:hidden}
.pg-album .app{display:flex;height:100vh;overflow:hidden}

.pg-album /* SIDEBAR */
.sidebar{width:240px;flex-shrink:0;background:var(--sidebar);border-right:1px solid var(--border);padding:20px 22px;display:flex;flex-direction:column;overflow:hidden}
.pg-album .logo{font-size:27px;font-weight:600;letter-spacing:-.5px;display:flex;align-items:center;justify-content:space-between;height:45px;margin:0 -22px 20px;padding:0 22px 0 28px;border-bottom:1px solid var(--border)}
.pg-album .logo .x{background:linear-gradient(135deg,#6366f1,#a78bfa);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:700}
.pg-album .logo-text{display:flex;align-items:center;gap:4px}
.pg-album .logo-actions{display:flex;align-items:center;gap:10px}
.pg-album .logo-actions .lbell{width:34px;height:34px;border-radius:10px;border:1px solid var(--border-strong);background:transparent;color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer}
.pg-album .logo-actions .lbell svg{width:18px;height:18px}
.pg-album .logo-actions .lav{width:34px;height:34px;border-radius:50%;object-fit:cover;cursor:pointer;background:#222}
.pg-album .nav-label{font-size:12.5px;color:var(--muted-2);margin:0 0 12px 10px}
.pg-album .nav{display:flex;flex-direction:column;gap:3px}
.pg-album .nav a{display:flex;align-items:center;gap:14px;padding:10px 16px;border-radius:11px;color:var(--muted);text-decoration:none;font-size:15px;transition:.15s}
.pg-album .nav a svg{width:20px;height:20px;stroke-width:1.7;flex-shrink:0}
.pg-album .nav a:hover{color:var(--text);background:rgba(255,255,255,.03)}
.pg-album .nav a.active{background:var(--indigo);color:#fff;font-weight:500;box-shadow:0 6px 20px rgba(79,70,229,.35)}
.pg-album .upgrade-card{margin-top:auto;background:rgba(255,255,255,.02);border:1px solid var(--border);border-radius:16px;padding:16px}
.pg-album .upgrade-card .head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:6px}
.pg-album .upgrade-card h4{font-size:16px;font-weight:600;color:var(--indigo-soft)}
.pg-album .upgrade-card .crown{width:32px;height:32px;border-radius:10px;background:radial-gradient(circle at 30% 30%,#3a2f14,#1b1607);display:flex;align-items:center;justify-content:center;font-size:16px}
.pg-album .upgrade-card p{font-size:13px;color:var(--muted);line-height:1.45;margin-bottom:14px}
.pg-album .upgrade-card button{background:var(--indigo);color:#fff;border:none;padding:10px 20px;border-radius:10px;font-family:inherit;font-size:14px;font-weight:500;cursor:pointer}
.pg-album .side-bottom{padding-top:18px;display:flex;flex-direction:column;gap:14px}
.pg-album .side-bottom a{display:flex;align-items:center;gap:14px;color:var(--muted);text-decoration:none;font-size:15px;padding-left:6px}
.pg-album .side-bottom a svg{width:19px;height:19px;stroke-width:1.7}

.pg-album /* MAIN */
.main{flex:1;padding:20px 26px;min-width:0;display:flex;flex-direction:column;overflow:hidden}
.pg-album .back-link{display:inline-flex;align-items:center;gap:8px;color:var(--muted);text-decoration:none;font-size:15px;margin-bottom:16px;flex-shrink:0;align-self:flex-start}
.pg-album .back-link:hover{color:var(--text)}
.pg-album .back-link svg{width:17px;height:17px}

.pg-album /* album header */
.album-hd{display:grid;grid-template-columns:auto 1.5fr 1fr 1.3fr;gap:26px;align-items:center;border:1px solid var(--border-strong);border-radius:20px;padding:22px 26px;flex-shrink:0;
  background:radial-gradient(120% 160% at 100% 0%,rgba(79,70,229,.26),rgba(79,70,229,0) 55%),var(--panel);
  transition:padding .3s ease,gap .3s ease}
.pg-album .ah-avatar{width:116px;height:116px;border-radius:50%;object-fit:cover;background:#222;transition:width .3s ease,height .3s ease}
.pg-album .ah-name{font-size:23px;font-weight:600;transition:font-size .3s ease}
.pg-album .ah-album{font-size:15px;margin-top:6px;transition:font-size .3s ease,margin .3s ease}
.pg-album .ah-desc{font-size:13px;color:var(--muted);line-height:1.45;margin-top:8px;overflow:hidden;transition:max-height .35s ease,opacity .3s ease,margin .3s ease;max-height:60px}
.pg-album /* compact on scroll */
.album-hd.shrink{padding:14px 26px;gap:20px}
.pg-album .album-hd.shrink .ah-avatar{width:66px;height:66px}
.pg-album .album-hd.shrink .ah-name{font-size:20px}
.pg-album .album-hd.shrink .ah-album{font-size:14px;margin-top:3px}
.pg-album .album-hd.shrink .ah-desc{max-height:0;opacity:0;margin-top:0}
.pg-album .ah-meta{border-left:1px solid var(--border);padding-left:26px;display:flex;flex-direction:column;gap:16px}
.pg-album .ah-meta .l{font-size:12.5px;color:var(--muted);margin-bottom:5px}
.pg-album .ah-meta .v{font-size:14px;font-weight:500}
.pg-album .ah-right{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.pg-album .ah-total{font-size:14px;color:var(--muted)}
.pg-album .ah-total b{font-size:20px;color:var(--text);font-weight:600;margin-left:4px}
.pg-album .ah-edit{display:inline-flex;align-items:center;gap:7px;color:var(--indigo-soft);font-size:14px;text-decoration:none}
.pg-album .ah-edit svg{width:14px;height:14px}
.pg-album .ah-tag{font-size:13px;padding:6px 16px;border-radius:8px;background:rgba(255,255,255,.06);color:var(--text)}

.pg-album /* tabs */
.tabs-row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:20px 0 16px;flex-shrink:0}
.pg-album .tabs2{display:flex;gap:8px;flex-wrap:wrap}
.pg-album .tab2{display:flex;align-items:center;gap:9px;height:44px;padding:0 18px;border:none;background:none;color:var(--muted);font-family:inherit;font-size:14.5px;border-radius:11px;cursor:pointer}
.pg-album .tab2 svg{width:17px;height:17px}
.pg-album .tab2:hover{color:var(--text);background:rgba(255,255,255,.03)}
.pg-album .tab2.active{background:var(--indigo);color:#fff;font-weight:500;box-shadow:0 6px 18px rgba(79,70,229,.32)}
.pg-album .tr-controls{display:flex;align-items:center;gap:12px}
.pg-album .ctrl{display:flex;align-items:center;gap:9px;height:44px;padding:0 16px;border:1px solid var(--border-strong);border-radius:11px;background:transparent;color:var(--text);font-family:inherit;font-size:14px;cursor:pointer;white-space:nowrap}
.pg-album .ctrl svg{width:15px;height:15px;color:var(--muted)}

.pg-album /* media grid */
.media-grid{flex:1;min-height:0;overflow:auto;display:grid;grid-template-columns:repeat(7,1fr);gap:16px;align-content:start;align-items:start;padding-right:6px;
  -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 40px),transparent 100%);mask-image:linear-gradient(to bottom,#000 calc(100% - 40px),transparent 100%)}
.pg-album .media-grid.scrolled{
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 30px,#000 calc(100% - 40px),transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 30px,#000 calc(100% - 40px),transparent 100%)}
.pg-album .media-grid::-webkit-scrollbar{width:8px}
.pg-album .media-grid::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:8px}
.pg-album .add-photo{position:relative;height:0;padding-top:100%;border:2px dashed var(--border-strong);border-radius:14px;color:var(--muted);cursor:pointer;background:transparent}
.pg-album .add-photo:hover{border-color:var(--indigo);color:var(--text);background:rgba(79,70,229,.05)}
.pg-album .ap-inner{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}
.pg-album .add-photo svg{width:28px;height:28px;stroke-width:1.6}
.pg-album .add-photo span{font-size:13.5px}
.pg-album .media-tile{position:relative;height:0;padding-top:100%;border-radius:14px;overflow:hidden;background:#222;cursor:pointer}
.pg-album .media-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.pg-album .media-tile .tile-date{position:absolute;left:8px;bottom:8px;z-index:1;background:rgba(10,10,18,.6);backdrop-filter:blur(4px);color:#fff;font-size:11px;padding:4px 9px;border-radius:7px}
.pg-album /* image viewer */
.viewer{position:fixed;inset:0;background:rgba(4,4,10,.92);backdrop-filter:blur(8px);z-index:80;display:none;flex-direction:column;animation:vfade .22s ease}
.pg-album .viewer.show{display:flex}
@keyframes vfade{from{opacity:0}to{opacity:1}}
.pg-album .viewer-top{display:flex;align-items:center;justify-content:center;position:relative;padding:22px}
.pg-album .ba-toggle{display:flex;gap:6px;background:rgba(255,255,255,.05);border:1px solid var(--border-strong);padding:5px;border-radius:13px}
.pg-album .ba-chip{display:flex;align-items:center;gap:8px;border:none;background:none;color:var(--muted);font-family:inherit;font-size:14.5px;font-weight:500;padding:10px 24px;border-radius:9px;cursor:pointer}
.pg-album .ba-chip svg{width:16px;height:16px}
.pg-album .ba-chip.active{background:var(--indigo);color:#fff;box-shadow:0 6px 18px rgba(79,70,229,.4)}
.pg-album .viewer-tools{position:absolute;left:26px;top:50%;transform:translateY(-50%);display:none;gap:10px}
.pg-album .viewer.split-mode .viewer-tools{display:flex;left:auto;right:82px}
.pg-album .vtool{width:44px;height:44px;border-radius:12px;border:1px solid var(--border-strong);background:transparent;color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center}
.pg-album .vtool:hover{color:#fff;background:rgba(255,255,255,.06)}
.pg-album .vtool.active{background:var(--indigo);color:#fff;border-color:transparent;box-shadow:0 6px 18px rgba(79,70,229,.4)}
.pg-album .vtool svg{width:20px;height:20px}
.pg-album .split-link{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:50px;height:50px;border-radius:50%;border:1px solid var(--border-strong);background:rgba(15,15,24,.85);backdrop-filter:blur(6px);color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:5;transition:background .2s,color .2s,box-shadow .2s}
.pg-album .split-link:hover{color:#fff;background:rgba(30,30,44,.9)}
.pg-album .split-link.active{background:var(--indigo);color:#fff;border-color:transparent;box-shadow:0 6px 20px rgba(79,70,229,.55)}
.pg-album .split-link svg{width:21px;height:21px}
.pg-album .viewer-close{position:absolute;right:26px;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:12px;border:1px solid var(--border-strong);background:transparent;color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center}
.pg-album .viewer-close:hover{color:#fff;background:rgba(255,255,255,.06)}
.pg-album .viewer-close svg{width:20px;height:20px}
.pg-album .viewer-body{flex:1;min-height:0;position:relative;overflow:hidden}
.pg-album .cf-stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;perspective:1600px}
.pg-album .cf-item{position:absolute;width:min(40vh,360px);height:min(52vh,470px);border-radius:18px;overflow:hidden;cursor:pointer;box-shadow:0 30px 65px rgba(0,0,0,.55);transition:transform .55s cubic-bezier(.4,0,.2,1),opacity .45s ease,filter .45s ease;transform-style:preserve-3d}
.pg-album .cf-item img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.pg-album .split{display:flex;width:100%;height:100%;position:relative}
.pg-album .split .side{flex:1;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:14px}
.pg-album .split .side+.side{border-left:2px solid rgba(255,255,255,.14)}
.pg-album .split .side img{max-width:94%;max-height:82%;object-fit:contain;border-radius:14px;box-shadow:0 22px 55px rgba(0,0,0,.55);user-select:none;-webkit-user-drag:none;touch-action:none}
.pg-album .side-nav{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:12px;background:rgba(10,10,20,.62);border:1px solid var(--border-strong);padding:7px 14px;border-radius:30px;backdrop-filter:blur(6px)}
.pg-album .side-nav .sn-label{color:#fff;font-size:13px;font-weight:600;padding-right:12px;margin-right:2px;border-right:1px solid rgba(255,255,255,.16)}
.pg-album .side-nav button{width:36px;height:36px;border-radius:50%;border:none;background:rgba(255,255,255,.08);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center}
.pg-album .side-nav button:hover{background:rgba(255,255,255,.18)}
.pg-album .side-nav svg{width:17px;height:17px}
.pg-album .side-nav .sn-count{color:#fff;font-size:13px;min-width:50px;text-align:center}
.pg-album .viewer.split-mode .viewer-nav{display:none}
.pg-album .viewer.is-fs .ba-toggle{display:none}
.pg-album .viewer.is-fs .viewer-tools{left:auto;right:82px}
.pg-album .viewer.is-fs .split .side{padding:8px}
.pg-album .viewer.is-fs .split .side img{max-width:98%;max-height:94%}
.pg-album .viewer.is-fs .split .side img{cursor:zoom-in}
.pg-album .viewer-nav{display:flex;align-items:center;justify-content:center;gap:22px;padding:18px}
.pg-album .viewer-nav button{width:46px;height:46px;border-radius:50%;border:1px solid var(--border-strong);background:rgba(255,255,255,.04);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center}
.pg-album .viewer-nav button:hover{background:rgba(255,255,255,.1)}
.pg-album .viewer-nav svg{width:20px;height:20px}
.pg-album .v-count{color:var(--muted);font-size:14px;min-width:64px;text-align:center}
.pg-album .cf-item,.pg-album .split .side img{cursor:zoom-in}

.pg-album /* zoom lightbox */
.zoom{position:fixed;inset:0;background:rgba(2,2,6,.95);z-index:90;display:none;align-items:center;justify-content:center;overflow:hidden}
.pg-album .zoom.show{display:flex}
.pg-album .zoom-stage{cursor:zoom-in;display:flex;align-items:center;justify-content:center;width:100%;height:100%;touch-action:none}
.pg-album .zoom-stage.zoomed{cursor:grab}
.pg-album .zoom-stage.drag{cursor:grabbing}
.pg-album .zoom img{transform-origin:center center;will-change:transform;user-select:none;-webkit-user-drag:none;max-width:88vw;max-height:88vh;object-fit:contain;border-radius:10px;transition:transform .28s cubic-bezier(.2,0,.2,1)}
.pg-album .zoom img.no-anim{transition:none}
.pg-album .zoom-close{position:absolute;top:22px;right:24px;width:44px;height:44px;border-radius:12px;border:1px solid var(--border-strong);background:rgba(255,255,255,.04);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:2}
.pg-album .zoom-close:hover{background:rgba(255,255,255,.12)}
.pg-album .zoom-close svg{width:20px;height:20px}
.pg-album .zoom-hint{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);color:var(--muted);font-size:13px;background:rgba(10,10,20,.5);border:1px solid var(--border);padding:7px 16px;border-radius:20px}

.pg-album /* tags dialog */
.overlay{position:fixed;inset:0;background:rgba(5,5,12,.62);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;z-index:85;animation:vfade .2s ease}
.pg-album .overlay.show{display:flex}
.pg-album .dialog{width:470px;max-width:92vw;border:1px solid var(--border-strong);border-radius:18px;padding:24px;
  background:radial-gradient(120% 90% at 50% 0%,rgba(79,70,229,.16),rgba(79,70,229,0) 50%),#0c0c17;
  box-shadow:0 30px 80px rgba(0,0,0,.55);animation:pop .22s cubic-bezier(.4,0,.2,1)}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
.pg-album .dlg-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.pg-album .dlg-head h3{font-size:20px;font-weight:600}
.pg-album .dlg-head p{font-size:13.5px;color:var(--muted);margin-top:5px}
.pg-album .dlg-close2{background:none;border:none;color:var(--muted);cursor:pointer;padding:2px;display:flex}
.pg-album .dlg-close2 svg{width:20px;height:20px}
.pg-album .dlg-close2:hover{color:var(--text)}
.pg-album .dlg-search{display:flex;align-items:center;gap:10px;height:48px;border:1px solid var(--border-strong);border-radius:12px;padding:0 16px;margin:16px 0 18px;color:var(--muted)}
.pg-album .dlg-search svg{width:18px;height:18px}
.pg-album .dlg-search input{background:none;border:none;outline:none;color:var(--text);font-family:inherit;font-size:15px;width:100%}
.pg-album .dlg-search input::placeholder{color:var(--muted)}
.pg-album .tag-wrap{display:flex;flex-wrap:wrap;gap:12px;max-height:220px;overflow-y:auto;padding-right:10px;scrollbar-width:thin;scrollbar-color:rgba(124,124,240,.5) transparent}
.pg-album .tag-wrap::-webkit-scrollbar{width:8px}
.pg-album .tag-wrap::-webkit-scrollbar-track{background:rgba(255,255,255,.04);border-radius:8px;margin:2px 0}
.pg-album .tag-wrap::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#6366f1,#4f46e5);border-radius:8px;border:2px solid transparent;background-clip:padding-box}
.pg-album .tag-wrap::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#818cf8,#6366f1);background-clip:padding-box}
.pg-album .tagchip{padding:11px 18px;border:1px solid var(--border-strong);border-radius:12px;background:rgba(255,255,255,.02);color:var(--text);font-family:inherit;font-size:14px;cursor:pointer;white-space:nowrap}
.pg-album .tagchip:hover{background:rgba(255,255,255,.05)}
.pg-album .tagchip.active{background:var(--indigo);border-color:transparent;color:#fff;box-shadow:0 6px 16px rgba(79,70,229,.35)}
.pg-album .dlg-div{border-top:1px solid var(--border);margin:18px 0}
.pg-album .dlg-foot{display:flex;justify-content:flex-end;align-items:center;gap:18px}
.pg-album .btn-cancel{background:none;border:none;color:var(--muted);font-family:inherit;font-size:15px;cursor:pointer;padding:10px 8px}
.pg-album .btn-cancel:hover{color:var(--text)}
.pg-album .btn-next{position:relative;display:inline-flex;align-items:center;justify-content:center;height:46px;background:var(--indigo);color:#fff;border:none;padding:0 30px;border-radius:11px;font-family:inherit;font-size:15px;font-weight:500;cursor:pointer;box-shadow:0 8px 22px rgba(79,70,229,.35);transition:width .3s ease,padding .3s ease,border-radius .3s ease}
.pg-album .btn-next.loading{color:transparent;pointer-events:none;width:46px;padding:0;border-radius:50%}
.pg-album .btn-next.loading::after{content:"";position:absolute;width:18px;height:18px;left:50%;top:50%;margin:-9px 0 0 -9px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.pg-album /* success toast */
.toast{position:fixed;top:24px;right:24px;z-index:120;display:flex;align-items:center;gap:13px;background:#0d150f;border:1px solid rgba(34,197,94,.35);padding:14px 18px;border-radius:13px;box-shadow:0 18px 45px rgba(0,0,0,.5);transform:translateX(140%);transition:transform .4s cubic-bezier(.34,1.3,.5,1)}
.pg-album .toast.show{transform:none}
.pg-album .toast .ic{width:32px;height:32px;border-radius:50%;background:rgba(34,197,94,.18);color:#34d399;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.pg-album .toast .ic svg{width:18px;height:18px}
.pg-album .toast .t1{font-size:14.5px;font-weight:600;color:#fff}
.pg-album .toast .t2{font-size:13px;color:var(--muted);margin-top:2px}
.pg-album .ah-tags{display:flex;flex-wrap:wrap;gap:8px}
.pg-album .ah-edit{cursor:pointer}

@media (max-width:1500px){.pg-album .media-grid{grid-template-columns:repeat(5,1fr)}}
@media (max-width:1150px){.pg-album .media-grid{grid-template-columns:repeat(4,1fr)}.pg-album .album-hd{grid-template-columns:auto 1fr}.pg-album .ah-meta,.pg-album .ah-right{grid-column:span 1}}
@media (max-width:860px){.pg-album .media-grid{grid-template-columns:repeat(3,1fr)}.pg-album .sidebar{width:240px}}
.pg-album /* sidebar collapse + handle + dropdown menus */
.sidebar{transition:width .25s ease}
.pg-album .app.collapsed .sidebar{width:76px}
.pg-album .app.collapsed .logo{justify-content:center;padding:0}
.pg-album .app.collapsed .logo-after,.pg-album .app.collapsed .logo-actions,.pg-album .app.collapsed .nav-label,.pg-album .app.collapsed .upgrade-card{display:none}
.pg-album .app.collapsed .nav a,.pg-album .app.collapsed .side-bottom a{justify-content:center;gap:0;padding-left:0;font-size:0}
.pg-album .app.collapsed .nav a{padding:11px 0}
.pg-album .app.collapsed .nav a svg,.pg-album .app.collapsed .side-bottom a svg{font-size:initial}
.pg-album .side-handle{position:fixed;bottom:17px;left:201px;z-index:60;width:28px;height:28px;border-radius:50%;background:#15151f;border:1px solid var(--border-strong);color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:left .25s ease}
.pg-album .side-handle:hover{color:#fff;background:#1d1d2a}
.pg-album .side-handle svg{width:15px;height:15px}
.pg-album .app.collapsed ~ .side-handle{left:61px}
.pg-album .side-handle .ic-expand{display:none}
.pg-album .app.collapsed ~ .side-handle .ic-collapse{display:none}
.pg-album .app.collapsed ~ .side-handle .ic-expand{display:block}
.pg-album .lbell,.pg-album .lav{cursor:pointer}
.pg-album .menu{position:fixed;z-index:200;width:300px;background:#10101c;border:1px solid var(--border-strong);border-radius:14px;box-shadow:0 24px 60px rgba(0,0,0,.55);padding:8px;display:none}
.pg-album .menu.show{display:block;animation:menupop .18s ease}
@keyframes menupop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.pg-album .menu-head{padding:10px 12px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;margin-bottom:6px}
.pg-album .menu-head .mh-t{font-size:15px;font-weight:600}
.pg-album .menu-head img{width:42px;height:42px;border-radius:50%;object-fit:cover}
.pg-album .menu-head .e{font-size:12.5px;color:var(--muted);margin-top:2px}
.pg-album .menu-item{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:9px;color:var(--text);font-size:14px;cursor:pointer;text-decoration:none}
.pg-album .menu-item:hover{background:rgba(255,255,255,.05)}
.pg-album .menu-item svg{width:17px;height:17px;color:var(--muted)}
.pg-album .menu-item.danger,.pg-album .menu-item.danger svg{color:#ef6b6b}
.pg-album .menu-div{height:1px;background:var(--border);margin:6px 8px}
.pg-album .noti{display:flex;gap:11px;padding:11px 12px;border-radius:9px;cursor:pointer}
.pg-album .noti:hover{background:rgba(255,255,255,.04)}
.pg-album .noti .nic{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.pg-album .noti .nic svg{width:16px;height:16px}
.pg-album .noti .nt{font-size:13.5px}
.pg-album .noti .ntime{font-size:12px;color:var(--muted);margin-top:2px}
.pg-album .menu-foot{text-align:center;padding:9px;border-top:1px solid var(--border);margin-top:4px}
.pg-album .menu-foot a{color:var(--indigo-soft);font-size:13px;text-decoration:none}

/* ===== billing.html ===== */

@font-face{font-family:'Geist';src:url('../fonts/Geist-VariableFont_wght.ttf') format('truetype-variations');font-weight:100 900;font-style:normal;font-display:swap}
body.pg-billing{
  --bg:#070710;--sidebar:#08080f;--card:#0e0e1a;--panel:#0c0c18;
  --border:rgba(255,255,255,.06);--border-strong:rgba(255,255,255,.10);
  --text:#f4f4f6;--muted:#8b8b9a;--muted-2:#6c6c7a;
  --indigo:#4f46e5;--indigo-soft:#7c7cf0;--green:#22c55e;--blue:#60a5fa;
}
*{box-sizing:border-box;margin:0;padding:0}
.pg-billing a,.pg-billing button{transition:background-color .22s ease,border-color .22s ease,color .18s ease,box-shadow .2s ease}
.pg-billing .bh-row,.pg-billing .ctrl,.pg-billing .card{transition:background-color .22s ease,border-color .22s ease}
html,body.pg-billing{height:100%}
body.pg-billing{font-family:'Geist',system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;font-feature-settings:"ss01";height:100vh;overflow:hidden}
.pg-billing .app{display:flex;height:100vh;overflow:hidden}

.pg-billing /* SIDEBAR */
.sidebar{width:240px;flex-shrink:0;background:var(--sidebar);border-right:1px solid var(--border);padding:20px 22px;display:flex;flex-direction:column;overflow:hidden}
.pg-billing .logo{font-size:27px;font-weight:600;letter-spacing:-.5px;display:flex;align-items:center;justify-content:space-between;height:45px;margin:0 -22px 20px;padding:0 22px 0 28px;border-bottom:1px solid var(--border)}
.pg-billing .logo .x{background:linear-gradient(135deg,#6366f1,#a78bfa);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:700}
.pg-billing .logo-text{display:flex;align-items:center;gap:4px}
.pg-billing .logo-actions{display:flex;align-items:center;gap:10px}
.pg-billing .logo-actions .lbell{width:34px;height:34px;border-radius:10px;border:1px solid var(--border-strong);background:transparent;color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer}
.pg-billing .logo-actions .lbell svg{width:18px;height:18px}
.pg-billing .logo-actions .lav{width:34px;height:34px;border-radius:50%;object-fit:cover;cursor:pointer;background:#222}
.pg-billing .nav-label{font-size:12.5px;color:var(--muted-2);margin:0 0 12px 10px}
.pg-billing .nav{display:flex;flex-direction:column;gap:3px}
.pg-billing .nav a{display:flex;align-items:center;gap:14px;padding:10px 16px;border-radius:11px;color:var(--muted);text-decoration:none;font-size:15px;transition:.15s}
.pg-billing .nav a svg{width:20px;height:20px;stroke-width:1.7;flex-shrink:0}
.pg-billing .nav a:hover{color:var(--text);background:rgba(255,255,255,.03)}
.pg-billing .nav a.active{background:var(--indigo);color:#fff;font-weight:500;box-shadow:0 6px 20px rgba(79,70,229,.35)}
.pg-billing .upgrade-card{margin-top:auto;background:rgba(255,255,255,.02);border:1px solid var(--border);border-radius:16px;padding:16px}
.pg-billing .upgrade-card .head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:6px}
.pg-billing .upgrade-card h4{font-size:16px;font-weight:600;color:var(--indigo-soft)}
.pg-billing .upgrade-card .crown{width:32px;height:32px;border-radius:10px;background:radial-gradient(circle at 30% 30%,#3a2f14,#1b1607);display:flex;align-items:center;justify-content:center;font-size:16px}
.pg-billing .upgrade-card p{font-size:13px;color:var(--muted);line-height:1.45;margin-bottom:14px}
.pg-billing .upgrade-card button{background:var(--indigo);color:#fff;border:none;padding:10px 20px;border-radius:10px;font-family:inherit;font-size:14px;font-weight:500;cursor:pointer}
.pg-billing .side-bottom{padding-top:18px;display:flex;flex-direction:column;gap:14px}
.pg-billing .side-bottom a{display:flex;align-items:center;gap:14px;color:var(--muted);text-decoration:none;font-size:15px;padding-left:6px}
.pg-billing .side-bottom a svg{width:19px;height:19px;stroke-width:1.7}

.pg-billing /* MAIN */
.main{flex:1;padding:20px 26px;min-width:0;display:flex;flex-direction:column;overflow:hidden}

.pg-billing /* top cards */
.bill-cards{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:22px;flex-shrink:0}
.pg-billing .card{border:1px solid var(--border);border-radius:22px;padding:24px 26px;background:var(--card)}
.pg-billing .card.glow{background:radial-gradient(120% 130% at 0% 0%,rgba(79,70,229,.30),rgba(79,70,229,0) 55%),linear-gradient(180deg,#13132a,#0d0d1c);border-color:var(--border-strong)}
.pg-billing .card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.pg-billing .card-head h3{font-size:20px;font-weight:600;display:flex;align-items:center;gap:9px}
.pg-billing .card-head .ic{width:30px;height:30px;border-radius:9px;background:rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;color:#cfcfe0}
.pg-billing .card-head .ic svg{width:17px;height:17px}
.pg-billing .link{display:inline-flex;align-items:center;gap:6px;color:var(--indigo-soft);text-decoration:none;font-size:14px}
.pg-billing .link svg{width:13px;height:13px}

.pg-billing .plan-name{font-size:48px;font-weight:600;letter-spacing:-1px;line-height:1}
.pg-billing .plan-exp{color:#ef5350;font-size:13.5px;margin-top:10px}
.pg-billing .plan-stats{display:flex;gap:10px;margin-top:20px;border-top:1px solid var(--border);padding-top:16px}
.pg-billing .pstat{flex:1;display:flex;align-items:center;gap:11px}
.pg-billing .pstat .pic{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.pg-billing .pstat .pic svg{width:17px;height:17px}
.pg-billing .pstat .l{font-size:12px;color:var(--muted)}
.pg-billing .pstat .v{font-size:13.5px;font-weight:500;margin-top:2px}

.pg-billing .big-num{font-size:42px;font-weight:600;letter-spacing:-1px;line-height:1}
.pg-billing .big-num .u{font-size:20px;font-weight:600;margin-left:4px}
.pg-billing .big-sub{font-size:14px;color:var(--muted);margin-left:8px}
.pg-billing .bar{height:9px;border-radius:6px;background:rgba(255,255,255,.08);overflow:hidden;margin:22px 0 12px}
.pg-billing .bar span{display:block;height:100%;border-radius:6px}
.pg-billing .bar-foot{display:flex;justify-content:space-between;font-size:13px;color:var(--muted)}

.pg-billing /* billing history */
.bh{flex:1;min-height:0;margin-top:22px;border:1px solid var(--border);border-radius:22px;padding:22px 24px;display:flex;flex-direction:column;
  background:radial-gradient(120% 80% at 50% 0%,rgba(79,70,229,.06),rgba(79,70,229,0) 45%),var(--panel)}
.pg-billing .bh-top{display:flex;align-items:center;gap:14px;flex-shrink:0;margin-bottom:8px}
.pg-billing .bh-top h2{font-size:20px;font-weight:600}
.pg-billing .bh-top .controls{margin-left:auto;display:flex;align-items:center;gap:12px}
.pg-billing .ctrl{display:flex;align-items:center;gap:10px;height:44px;padding:0 18px;border:1px solid var(--border-strong);border-radius:11px;background:transparent;color:var(--text);font-family:inherit;font-size:14px;cursor:pointer;white-space:nowrap}
.pg-billing .ctrl svg{width:15px;height:15px;color:var(--muted)}
.pg-billing .ctrl.primary{gap:9px}

.pg-billing .bh-table{flex:1;min-height:0;overflow:auto;margin-top:10px;
  -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 30px),transparent 100%);mask-image:linear-gradient(to bottom,#000 calc(100% - 30px),transparent 100%)}
.pg-billing .bh-table::-webkit-scrollbar{width:8px}.pg-billing .bh-table::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:8px}
.pg-billing .bh-head,.pg-billing .bh-row{display:grid;grid-template-columns:1.1fr 1fr 1.6fr .9fr 1fr 1.2fr 44px;align-items:center;gap:14px}
.pg-billing .bh-head{color:var(--muted);font-size:14px;padding:0 14px 14px;border-bottom:1px solid var(--border)}
.pg-billing .bh-row{padding:15px 14px;border-bottom:1px solid var(--border);font-size:14.5px}
.pg-billing .bh-row:last-child{border-bottom:none}
.pg-billing .tag{font-size:12.5px;padding:5px 13px;border-radius:14px;display:inline-flex;align-items:center;gap:6px}
.pg-billing .tag.sub{background:rgba(96,165,250,.16);color:#7cbaff}
.pg-billing .tag.paid{background:rgba(34,197,94,.16);color:#5fd98a}
.pg-billing .tag.paid svg{width:13px;height:13px}
.pg-billing .dl{width:34px;height:34px;border:none;background:none;color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:9px;justify-self:end}
.pg-billing .dl:hover{color:#fff;background:rgba(255,255,255,.06)}
.pg-billing .dl svg{width:18px;height:18px}

@media (max-width:1300px){.pg-billing .bill-cards{grid-template-columns:1fr 1fr}.pg-billing .bill-cards .card.glow{grid-column:1/-1}}
@media (max-width:1050px){.pg-billing .sidebar{width:240px}}
.pg-billing /* sidebar collapse + handle + dropdown menus */
.sidebar{transition:width .25s ease}
.pg-billing .app.collapsed .sidebar{width:76px}
.pg-billing .app.collapsed .logo{justify-content:center;padding:0}
.pg-billing .app.collapsed .logo-after,.pg-billing .app.collapsed .logo-actions,.pg-billing .app.collapsed .nav-label,.pg-billing .app.collapsed .upgrade-card{display:none}
.pg-billing .app.collapsed .nav a,.pg-billing .app.collapsed .side-bottom a{justify-content:center;gap:0;padding-left:0;font-size:0}
.pg-billing .app.collapsed .nav a{padding:11px 0}
.pg-billing .app.collapsed .nav a svg,.pg-billing .app.collapsed .side-bottom a svg{font-size:initial}
.pg-billing .side-handle{position:fixed;bottom:17px;left:201px;z-index:60;width:28px;height:28px;border-radius:50%;background:#15151f;border:1px solid var(--border-strong);color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:left .25s ease}
.pg-billing .side-handle:hover{color:#fff;background:#1d1d2a}
.pg-billing .side-handle svg{width:15px;height:15px}
.pg-billing .app.collapsed ~ .side-handle{left:61px}
.pg-billing .side-handle .ic-expand{display:none}
.pg-billing .app.collapsed ~ .side-handle .ic-collapse{display:none}
.pg-billing .app.collapsed ~ .side-handle .ic-expand{display:block}
.pg-billing .lbell,.pg-billing .lav{cursor:pointer}
.pg-billing .menu{position:fixed;z-index:200;width:300px;background:#10101c;border:1px solid var(--border-strong);border-radius:14px;box-shadow:0 24px 60px rgba(0,0,0,.55);padding:8px;display:none}
.pg-billing .menu.show{display:block;animation:menupop .18s ease}
@keyframes menupop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.pg-billing .menu-head{padding:10px 12px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;margin-bottom:6px}
.pg-billing .menu-head .mh-t{font-size:15px;font-weight:600}
.pg-billing .menu-head img{width:42px;height:124px;border-radius:50%;object-fit:cover}
.pg-billing .menu-head .e{font-size:12.5px;color:var(--muted);margin-top:2px}
.pg-billing .menu-item{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:9px;color:var(--text);font-size:14px;cursor:pointer;text-decoration:none}
.pg-billing .menu-item:hover{background:rgba(255,255,255,.05)}
.pg-billing .menu-item svg{width:17px;height:17px;color:var(--muted)}
.pg-billing .menu-item.danger,.pg-billing .menu-item.danger svg{color:#ef6b6b}
.pg-billing .menu-div{height:1px;background:var(--border);margin:6px 8px}
.pg-billing .noti{display:flex;gap:11px;padding:11px 12px;border-radius:9px;cursor:pointer}
.pg-billing .noti:hover{background:rgba(255,255,255,.04)}
.pg-billing .noti .nic{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.pg-billing .noti .nic svg{width:16px;height:16px}
.pg-billing .noti .nt{font-size:13.5px}
.pg-billing .noti .ntime{font-size:12px;color:var(--muted);margin-top:2px}
.pg-billing .menu-foot{text-align:center;padding:9px;border-top:1px solid var(--border);margin-top:4px}
.pg-billing .menu-foot a{color:var(--indigo-soft);font-size:13px;text-decoration:none}

/* ===== dashboard.html ===== */


@font-face{
  font-family:'Geist';
  src:url('../fonts/Geist-VariableFont_wght.ttf') format('truetype-variations');
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

body.pg-dashboard{
  --bg:#070710;
  --sidebar:#08080f;
  --card:#0e0e1a;
  --card-grad-1:#15152b;
  --card-grad-2:#1c1c3a;
  --border:rgba(255,255,255,.06);
  --border-strong:rgba(255,255,255,.10);
  --text:#f4f4f6;
  --muted:#8b8b9a;
  --muted-2:#6c6c7a;
  --indigo:#4f46e5;
  --indigo-bright:#6366f1;
  --indigo-soft:#7c7cf0;
  --green:#22c55e;
  --orange:#f59e42;
  --blue-line:#6aa9ff;
  --red:#ef5350;
}

*{box-sizing:border-box;margin:0;padding:0}
.pg-dashboard a,.pg-dashboard button{transition:background-color .22s ease,border-color .22s ease,color .18s ease,box-shadow .2s ease}
.pg-dashboard .pcard,.pg-dashboard .lv-row,.pg-dashboard .acard,.pg-dashboard .album-card,.pg-dashboard .pstat,.pg-dashboard .stat,.pg-dashboard .input,.pg-dashboard .cc,.pg-dashboard .icon-btn,.pg-dashboard .settings-btn,.pg-dashboard .search,.pg-dashboard .ctrl,.pg-dashboard .btn-open,.pg-dashboard .lbell,.pg-dashboard .back-link,.pg-dashboard .card{transition:background-color .22s ease,border-color .22s ease,color .18s ease}
html,body.pg-dashboard{height:100%}
body.pg-dashboard{
  font-family:'Geist',system-ui,-apple-system,sans-serif;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  font-feature-settings:"ss01";
  height:100vh;
  overflow:hidden;
}

.pg-dashboard .app{display:flex;height:100vh;overflow:hidden}

.pg-dashboard /* ---------------- SIDEBAR ---------------- */
.sidebar{
  width:240px;
  flex-shrink:0;
  background:var(--sidebar);
  border-right:1px solid var(--border);
  padding:20px 22px;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.pg-dashboard .logo{
  font-size:27px;
  font-weight:600;
  letter-spacing:-.5px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:45px;
  margin:0 -22px 20px;
  padding:0 22px 0 28px;
  border-bottom:1px solid var(--border);
}
.pg-dashboard .logo-text{display:flex;align-items:center;gap:4px}
.pg-dashboard .logo-actions{display:flex;align-items:center;gap:10px}
.pg-dashboard .logo-actions .lbell{width:34px;height:34px;border-radius:10px;border:1px solid var(--border-strong);background:transparent;color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer}
.pg-dashboard .logo-actions .lbell svg{width:18px;height:18px}
.pg-dashboard .logo-actions .lav{width:34px;height:34px;border-radius:50%;object-fit:cover;cursor:pointer;background:#222}
.pg-dashboard .logo .x{
  background:linear-gradient(135deg,#6366f1,#a78bfa);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  font-weight:700;
}
.pg-dashboard .nav-label{
  font-size:12.5px;
  color:var(--muted-2);
  margin:0 0 12px 10px;
  font-weight:400;
}
.pg-dashboard .nav{display:flex;flex-direction:column;gap:3px}
.pg-dashboard .nav a{
  display:flex;
  align-items:center;
  gap:14px;
  padding:10px 16px;
  border-radius:11px;
  color:var(--muted);
  text-decoration:none;
  font-size:15px;
  font-weight:400;
  transition:.15s;
}
.pg-dashboard .nav a svg{width:20px;height:20px;stroke-width:1.7;flex-shrink:0}
.pg-dashboard .nav a:hover{color:var(--text);background:rgba(255,255,255,.03)}
.pg-dashboard .nav a.active{
  background:var(--indigo);
  color:#fff;
  font-weight:500;
  box-shadow:0 6px 20px rgba(79,70,229,.35);
}

.pg-dashboard .upgrade-card{
  margin-top:22px;
  background:rgba(255,255,255,.02);
  border:1px solid var(--border);
  border-radius:16px;
  padding:16px;
  display: none;
}
.pg-dashboard .upgrade-card .head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:6px}
.pg-dashboard .upgrade-card h4{font-size:16px;font-weight:600;color:var(--indigo-soft)}
.pg-dashboard .upgrade-card .crown{
  width:32px;height:32px;border-radius:10px;
  background:radial-gradient(circle at 30% 30%,#3a2f14,#1b1607);
  display:flex;align-items:center;justify-content:center;font-size:16px;
}
.pg-dashboard .upgrade-card p{font-size:13px;color:var(--muted);line-height:1.45;margin-bottom:14px}
.pg-dashboard .upgrade-card button{
  background:var(--indigo);
  color:#fff;border:none;
  padding:10px 20px;border-radius:10px;
  font-family:inherit;font-size:14px;font-weight:500;cursor:pointer;
}

.pg-dashboard .side-bottom{margin-top:auto;padding-top:18px;display:flex;flex-direction:column;gap:14px}
.pg-dashboard .side-bottom a{display:flex;align-items:center;gap:14px;color:var(--muted);text-decoration:none;font-size:15px;padding-left:6px}
.pg-dashboard .side-bottom a svg{width:19px;height:19px;stroke-width:1.7}

.pg-dashboard /* ---------------- MAIN ---------------- */
.main{flex:1;padding:20px 26px;min-width:0;display:flex;flex-direction:column;overflow:hidden}

.pg-dashboard .topbar{display:none}
.pg-dashboard .profile{display:flex;align-items:center;gap:13px;cursor:pointer}
.pg-dashboard .profile img{width:46px;height:46px;border-radius:50%;object-fit:cover;background:#222}
.pg-dashboard .profile .name{font-size:17px;font-weight:600;line-height:1.25}
.pg-dashboard .profile .role{font-size:13px;color:var(--muted)}
.pg-dashboard .profile .chev{color:var(--muted);margin-left:2px}

.pg-dashboard .topbar .spacer{flex:1}
.pg-dashboard .icon-btn{
  width:48px;height:48px;border-radius:12px;
  border:1px solid var(--border-strong);
  background:transparent;color:var(--muted);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
}
.pg-dashboard .search{
  display:flex;align-items:center;gap:12px;
  width:300px;height:48px;padding:0 18px;
  border:1px solid var(--border-strong);border-radius:12px;
  color:var(--muted);
}
.pg-dashboard .search input{
  background:none;border:none;outline:none;color:var(--text);
  font-family:inherit;font-size:15px;width:100%;
}
.pg-dashboard .search input::placeholder{color:var(--muted)}
.pg-dashboard .settings-btn{
  display:flex;align-items:center;gap:10px;height:48px;padding:0 22px;
  border:1px solid var(--border-strong);border-radius:12px;
  background:transparent;color:var(--text);
  font-family:inherit;font-size:15px;cursor:pointer;
}
.pg-dashboard .settings-btn svg{width:18px;height:18px}

.pg-dashboard /* grid */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;flex-shrink:0}
.pg-dashboard .card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:20px;
  padding:20px 22px;
  min-height:0;
}
.pg-dashboard .card.glow{
  background:
    radial-gradient(120% 120% at 100% 0%,rgba(79,70,229,.28) 0%,rgba(79,70,229,0) 55%),
    linear-gradient(180deg,#101024,#0d0d1c);
}
/* the 3 top cards: purple in the top half, solid colour in the bottom half, gentle drift */
@keyframes dashCardFlow{0%{background-position:50% 0%}50%{background-position:50% 10%}100%{background-position:50% 0%}}
.pg-dashboard .grid:not(.bottom) > .card{
  background:
    linear-gradient(180deg,rgba(150,110,255,.28) 0%,rgba(150,110,255,0) 25%),
    #0d0d1c !important;
  background-size:100% 200%,100% 100% !important;
  animation:dashCardFlow 16s ease-in-out infinite;
}
@media (prefers-reduced-motion:reduce){.pg-dashboard .grid:not(.bottom) > .card{animation:none}}
.pg-dashboard .card .card-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.pg-dashboard .card .card-head h3{font-size:21px;font-weight:600;display:flex;align-items:center;gap:9px}
.pg-dashboard .dots{color:var(--muted);font-size:22px;letter-spacing:1px;cursor:pointer;line-height:0}

.pg-dashboard .link{
  color:var(--indigo-soft);text-decoration:none;font-size:14px;
  display:inline-flex;align-items:center;gap:7px;margin-top:16px;
}
.pg-dashboard .link svg{width:14px;height:14px}
.pg-dashboard .link.muted{color:var(--muted)}

.pg-dashboard /* patient count */
.count-row{display:flex;align-items:center;gap:20px}
.pg-dashboard .count-ic{
  width:62px;height:62px;border-radius:16px;
  background:rgba(255,255,255,.05);
  display:flex;align-items:center;justify-content:center;color:#cfcfe0;
}
.pg-dashboard .count-ic svg{width:30px;height:30px;stroke-width:1.6}
.pg-dashboard .count-num{font-size:48px;font-weight:600;letter-spacing:-1px;line-height:1}
.pg-dashboard .count-sub{font-size:14px;color:var(--green);margin-top:8px}

.pg-dashboard /* plan card */
.plan-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.pg-dashboard .plan-left .plan-name{font-size:50px;font-weight:600;letter-spacing:-1.5px;line-height:1}
.pg-dashboard .plan-left .expire{color:var(--red);font-size:14px;margin-top:12px}
.pg-dashboard .gauge{position:relative;width:190px;height:120px;flex-shrink:0}
.pg-dashboard .gauge .pct{
  position:absolute;left:50%;top:62%;transform:translate(-50%,-50%);
  font-size:42px;font-weight:600;letter-spacing:-1px;
}
.pg-dashboard .gauge-legend{position:absolute;left:50%;bottom:-34px;transform:translateX(-50%);white-space:nowrap;font-size:13px;color:var(--muted)}
.pg-dashboard .gauge-legend .tot{color:var(--green)}

.pg-dashboard /* credits */
.credits-row{display:flex;align-items:center;gap:20px;height: 124px;}
.pg-dashboard .credit-ic{
  width:62px;height:62px;border-radius:16px;
  background:rgba(255,255,255,.05);
  display:flex;align-items:center;justify-content:center;color:#cfcfe0;
}
.pg-dashboard .credit-ic svg{width:28px;height:28px}
.pg-dashboard .count-sub.grey{color:var(--muted)}

.pg-dashboard /* big charts row */
.grid.bottom{margin-top:18px;grid-template-columns:1.25fr 1fr 1fr;flex:1;min-height:0}
.pg-dashboard .grid.bottom .card{display:flex;flex-direction:column;overflow:hidden}

.pg-dashboard /* tabs */
.tabs{display:flex;gap:8px;background:rgba(255,255,255,.03);padding:5px;border-radius:12px}
.pg-dashboard .tabs button{
  border:none;background:none;color:var(--muted);
  font-family:inherit;font-size:15px;font-weight:500;
  padding:9px 22px;border-radius:9px;cursor:pointer;
}
.pg-dashboard .tabs button.active{background:var(--indigo);color:#fff}
.pg-dashboard .select{
  display:flex;align-items:center;gap:8px;
  border:1px solid var(--border-strong);border-radius:10px;
  padding:8px 14px;font-size:14px;color:var(--text);cursor:pointer;
}
.pg-dashboard .select svg{width:14px;height:14px;color:var(--muted)}

.pg-dashboard .note{
  display:inline-flex;align-items:center;gap:9px;align-self:flex-start;
  background:rgba(245,158,66,.10);
  color:#e8a866;
  font-size:13px;
  padding:7px 13px;border-radius:9px;margin:14px 0 0;flex-shrink:0;
}
.pg-dashboard .note .dot{width:7px;height:7px;border-radius:50%;background:#f59e42}

.pg-dashboard .chart-wrap{position:relative;width:100%;flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center}
.pg-dashboard .chart-wrap svg{flex:1;min-height:0}

.pg-dashboard /* donut */
.donut-card{display:flex;flex-direction:column}
.pg-dashboard .donut-wrap{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:4px 0}
.pg-dashboard .donut-wrap svg{height:100%;width:auto;max-height:100%}
.pg-dashboard .donut-svg .seg{fill:none;stroke-width:40;cursor:pointer;transition:stroke-width .28s cubic-bezier(.4,0,.2,1),opacity .25s ease,filter .25s ease}
.pg-dashboard .donut-svg.dim .seg{opacity:.25}
.pg-dashboard .donut-svg.dim .seg.active{opacity:1;stroke-width:48;filter:drop-shadow(0 0 8px rgba(255,255,255,.25))}
.pg-dashboard .ring-label{transition:opacity .2s ease;pointer-events:none}
.pg-dashboard .donut-svg.dim .ring-label{opacity:0}
.pg-dashboard .donut-center{opacity:0;transition:opacity .25s ease;pointer-events:none}
.pg-dashboard .donut-svg.dim .donut-center{opacity:1}
.pg-dashboard .legend span{cursor:pointer;transition:opacity .2s ease,color .2s ease}
.pg-dashboard .legend.dim span{opacity:.4}
.pg-dashboard .legend.dim span.active{opacity:1;color:var(--text)}
.pg-dashboard .legend{display:flex;gap:20px;justify-content:center;margin-top:4px;font-size:13.5px;color:var(--muted);flex-shrink:0}
.pg-dashboard .legend span{display:inline-flex;align-items:center;gap:8px}
.pg-dashboard .legend i{width:9px;height:9px;border-radius:50%;display:inline-block}

.pg-dashboard /* activity */
.activity{display:flex;flex-direction:column;margin-top:2px;flex:1;justify-content:space-around}
.pg-dashboard .activity .item{
  display:flex;align-items:center;gap:14px;
  padding:12px 4px;border-bottom:1px solid var(--border);
}
.pg-dashboard .activity .item:last-child{border-bottom:none}
.pg-dashboard .activity .dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.pg-dashboard .activity .txt{flex:1}
.pg-dashboard .activity .txt .t1{font-size:15.5px;font-weight:500}
.pg-dashboard .activity .txt .t2{font-size:13px;color:var(--muted);margin-top:3px}
.pg-dashboard .activity .arr{color:var(--muted)}
.pg-dashboard .activity .arr svg{width:18px;height:18px}
.pg-dashboard .activity a.item{text-decoration:none;color:inherit;border-radius:10px;transition:background .15s}
.pg-dashboard .activity a.item:hover{background:rgba(255,255,255,.03)}
.pg-dashboard .activity a.item:hover .arr{color:#fff}
.pg-dashboard .card-head .dash-more{display:inline-flex;align-items:center;gap:4px;font-size:13.5px;color:var(--muted);text-decoration:none;padding:5px 10px;border:1px solid var(--border);border-radius:9px;transition:color .15s,border-color .15s}
.pg-dashboard .card-head .dash-more:hover{color:#fff;border-color:var(--border-strong)}
.pg-dashboard .card-head .dash-more svg{width:15px;height:15px}
.pg-dashboard /* sidebar collapse + handle + dropdown menus */
.sidebar{transition:width .25s ease}
.pg-dashboard .app.collapsed .sidebar{width:76px}
.pg-dashboard .app.collapsed .logo{justify-content:center;padding:0}
.pg-dashboard .app.collapsed .logo-after,.pg-dashboard .app.collapsed .logo-actions,.pg-dashboard .app.collapsed .nav-label,.pg-dashboard .app.collapsed .upgrade-card{display:none}
.pg-dashboard .app.collapsed .nav a,.pg-dashboard .app.collapsed .side-bottom a{justify-content:center;gap:0;padding-left:0;font-size:0}
.pg-dashboard .app.collapsed .nav a{padding:11px 0}
.pg-dashboard .app.collapsed .nav a svg,.pg-dashboard .app.collapsed .side-bottom a svg{font-size:initial}
.pg-dashboard .side-handle{position:fixed;bottom:17px;left:201px;z-index:60;width:28px;height:28px;border-radius:50%;background:#15151f;border:1px solid var(--border-strong);color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:left .25s ease}
.pg-dashboard .side-handle:hover{color:#fff;background:#1d1d2a}
.pg-dashboard .side-handle svg{width:15px;height:15px}
.pg-dashboard .app.collapsed ~ .side-handle{left:61px}
.pg-dashboard .side-handle .ic-expand{display:none}
.pg-dashboard .app.collapsed ~ .side-handle .ic-collapse{display:none}
.pg-dashboard .app.collapsed ~ .side-handle .ic-expand{display:block}
.pg-dashboard .lbell,.pg-dashboard .lav{cursor:pointer}
.pg-dashboard .menu{position:fixed;z-index:200;width:300px;background:#10101c;border:1px solid var(--border-strong);border-radius:14px;box-shadow:0 24px 60px rgba(0,0,0,.55);padding:8px;display:none}
.pg-dashboard .menu.show{display:block;animation:menupop .18s ease}
@keyframes menupop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.pg-dashboard .menu-head{padding:10px 12px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;margin-bottom:6px}
.pg-dashboard .menu-head .mh-t{font-size:15px;font-weight:600}
.pg-dashboard .menu-head img{width:42px;height:42px;border-radius:50%;object-fit:cover}
.pg-dashboard .menu-head .e{font-size:12.5px;color:var(--muted);margin-top:2px}
.pg-dashboard .menu-item{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:9px;color:var(--text);font-size:14px;cursor:pointer;text-decoration:none}
.pg-dashboard .menu-item:hover{background:rgba(255,255,255,.05)}
.pg-dashboard .menu-item svg{width:17px;height:17px;color:var(--muted)}
.pg-dashboard .menu-item.danger,.pg-dashboard .menu-item.danger svg{color:#ef6b6b}
.pg-dashboard .menu-div{height:1px;background:var(--border);margin:6px 8px}
.pg-dashboard .noti{display:flex;gap:11px;padding:11px 12px;border-radius:9px;cursor:pointer}
.pg-dashboard .noti:hover{background:rgba(255,255,255,.04)}
.pg-dashboard .noti .nic{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.pg-dashboard .noti .nic svg{width:16px;height:16px}
.pg-dashboard .noti .nt{font-size:13.5px}
.pg-dashboard .noti .ntime{font-size:12px;color:var(--muted);margin-top:2px}
.pg-dashboard .menu-foot{text-align:center;padding:9px;border-top:1px solid var(--border);margin-top:4px}
.pg-dashboard .menu-foot a{color:var(--indigo-soft);font-size:13px;text-decoration:none}

/* ===== login.html ===== */

@font-face{font-family:'Geist';src:url('../fonts/Geist-VariableFont_wght.ttf') format('truetype-variations');font-weight:100 900;font-style:normal;font-display:swap}
body.pg-login{
  --bg:#07070e;--text:#f4f4f6;--muted:#8b8b9a;--muted-2:#6c6c7a;
  --border:rgba(255,255,255,.08);--border-strong:rgba(255,255,255,.14);
  --indigo:#6366f1;--indigo-2:#4f46e5;--purple:#a78bfa;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body.pg-login{height:100%}
body.pg-login{font-family:'Geist',system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;font-feature-settings:"ss01";height:100vh;overflow:hidden}
.pg-login .grad{background:linear-gradient(90deg,#818cf8,#a78bfa);-webkit-background-clip:text;background-clip:text;color:transparent}

.pg-login .login{display:grid;grid-template-columns:1.35fr 1fr;height:100vh}

.pg-login /* LEFT */
.left{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;padding:42px 48px;
  background:
    linear-gradient(180deg,rgba(7,7,16,.45) 0%,rgba(7,7,16,.15) 35%,rgba(7,7,16,.75) 100%),
    radial-gradient(80% 60% at 35% 30%,rgba(124,58,237,.25),transparent 60%),
    #0a0a1e url('../login-bg.jpg') center/cover no-repeat}
.pg-login .left > .login-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.pg-login .left::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(7,7,16,.45) 0%,rgba(7,7,16,.12) 35%,rgba(7,7,16,.82) 100%),
    radial-gradient(80% 60% at 35% 30%,rgba(124,58,237,.28),transparent 60%)}
.pg-login .left > .brand,.pg-login .left > .left-bottom{position:relative;z-index:2}
.pg-login .brand .logo{font-size:30px;font-weight:600;letter-spacing:-.5px;display:flex;align-items:center;gap:8px}
.pg-login .brand .logo .x{background:linear-gradient(135deg,#818cf8,#a78bfa);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:300;font-size:34px}
.pg-login .brand .tagline{font-size:14px;color:var(--muted);margin-top:4px}
.pg-login .left-bottom h1{font-size:44px;font-weight:700;line-height:1.08;letter-spacing:-1px}
.pg-login .left-bottom p{font-size:15px;color:#c9c9d6;line-height:1.6;margin-top:18px;max-width:430px}
.pg-login .features{display:flex;gap:34px;margin-top:30px}
.pg-login .feat{display:flex;gap:12px;align-items:flex-start;max-width:200px}
.pg-login .feat .ic{width:42px;height:42px;border-radius:50%;background:rgba(124,124,240,.16);border:1px solid rgba(124,124,240,.3);display:flex;align-items:center;justify-content:center;color:#a9a9f5;flex-shrink:0}
.pg-login .feat .ic svg{width:18px;height:18px}
.pg-login .feat h4{font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}
.pg-login .feat p{font-size:12.5px;color:#a7a7b5;line-height:1.45;margin-top:3px}

.pg-login /* RIGHT */
.right{display:flex;align-items:center;justify-content:center;padding:40px;background:var(--bg)}
.pg-login .login-form{width:100%;max-width:400px}
.pg-login .login-form h2{font-size:34px;font-weight:700;letter-spacing:-.5px}
.pg-login .login-form .sub{color:var(--muted);font-size:14.5px;margin-top:8px;margin-bottom:38px}
.pg-login .fld{margin-bottom:20px}
.pg-login .fld label{display:block;font-size:14.5px;font-weight:600;margin-bottom:10px}
.pg-login .pw-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.pg-login .pw-row label{margin-bottom:0}
.pg-login .forgot{color:var(--purple);font-size:13.5px;text-decoration:none}
.pg-login .forgot:hover{text-decoration:underline}
.pg-login .input{display:flex;align-items:center;gap:12px;height:54px;border:1px solid var(--border-strong);border-radius:13px;padding:0 16px;background:rgba(255,255,255,.02);transition:border-color .15s}
.pg-login .input:focus-within{border-color:var(--indigo)}
.pg-login .input>svg{width:20px;height:20px;color:var(--muted);flex-shrink:0}
.pg-login .input input{flex:1;min-width:0;background:none;border:none;outline:none;color:var(--text);font-family:inherit;font-size:15px}
.pg-login .input input::placeholder{color:var(--muted)}
.pg-login .eye{background:none;border:none;color:var(--muted);cursor:pointer;display:flex;padding:2px}
.pg-login .eye svg{width:20px;height:20px}
.pg-login .eye:hover{color:var(--text)}
.pg-login .remember{display:flex;align-items:center;gap:11px;font-size:14px;color:#cfcfe0;cursor:pointer;margin:24px 0 26px;user-select:none}
.pg-login .remember input{display:none}
.pg-login .remember .cb{width:20px;height:20px;border-radius:6px;border:1.5px solid var(--border-strong);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:.15s}
.pg-login .remember .cb svg{width:13px;height:13px;color:#fff;opacity:0;transition:.15s}
.pg-login .remember input:checked+.cb{background:var(--indigo);border-color:var(--indigo)}
.pg-login .remember input:checked+.cb svg{opacity:1}
.pg-login .btn-login{width:100%;height:56px;border:none;border-radius:13px;background:linear-gradient(135deg,#6366f1,#4f46e5);color:#fff;font-family:inherit;font-size:16px;font-weight:600;cursor:pointer;box-shadow:0 12px 30px rgba(79,70,229,.4);transition:.15s}
.pg-login .btn-login:hover{filter:brightness(1.08)}
.pg-login .btn-qr{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;background:none;border:none;color:var(--text);font-family:inherit;font-size:14.5px;cursor:pointer;margin-top:22px}
.pg-login .btn-qr svg{width:18px;height:18px;color:var(--muted)}
.pg-login .btn-qr:hover{color:var(--purple)}

/* brand block is desktop-hidden (the left hero panel carries it); shown on mobile */
.pg-login .login-brand-m{display:none}
.pg-login .login-brand-m .logo{font-size:30px;font-weight:600;letter-spacing:-.5px;display:flex;align-items:center;gap:8px}
.pg-login .login-brand-m .logo .x{background:linear-gradient(135deg,#818cf8,#a78bfa);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:300;font-size:34px}
.pg-login .login-brand-m .tagline{font-size:14px;color:var(--muted);margin-top:4px}

@media (max-width:980px){
  .pg-login .login{grid-template-columns:1fr}
  .pg-login .left{display:none}
  .pg-login .right{padding:24px}
  .pg-login .login-brand-m{display:block;margin-bottom:30px}
  /* the brand block above is the heading on mobile — hide the "Welcome back!" h2 + sub */
  .pg-login .login-form h2,
  .pg-login .login-form .sub{display:none}
}

/* ===== newalbum.html ===== */

@font-face{font-family:'Geist';src:url('../fonts/Geist-VariableFont_wght.ttf') format('truetype-variations');font-weight:100 900;font-style:normal;font-display:swap}
body.pg-newalbum{
  --bg:#070710;--sidebar:#08080f;--card:#0e0e1a;--panel:#0c0c18;
  --border:rgba(255,255,255,.06);--border-strong:rgba(255,255,255,.10);
  --text:#f4f4f6;--muted:#8b8b9a;--muted-2:#6c6c7a;
  --indigo:#4f46e5;--indigo-soft:#7c7cf0;--green:#22c55e;--blue:#60a5fa;
}
*{box-sizing:border-box;margin:0;padding:0}
.pg-newalbum a,.pg-newalbum button{transition:background-color .22s ease,border-color .22s ease,color .18s ease,box-shadow .2s ease}
.pg-newalbum .tab2,.pg-newalbum .media-tile,.pg-newalbum .ctrl,.pg-newalbum .back-link{transition:background-color .22s ease,border-color .22s ease,color .18s ease}
html,body.pg-newalbum{height:100%}
body.pg-newalbum{font-family:'Geist',system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;font-feature-settings:"ss01";height:100vh;overflow:hidden}
.pg-newalbum .app{display:flex;height:100vh;overflow:hidden}

.pg-newalbum /* SIDEBAR */
.sidebar{width:240px;flex-shrink:0;background:var(--sidebar);border-right:1px solid var(--border);padding:20px 22px;display:flex;flex-direction:column;overflow:hidden}
.pg-newalbum .logo{font-size:27px;font-weight:600;letter-spacing:-.5px;display:flex;align-items:center;justify-content:space-between;height:45px;margin:0 -22px 20px;padding:0 22px 0 28px;border-bottom:1px solid var(--border)}
.pg-newalbum .logo .x{background:linear-gradient(135deg,#6366f1,#a78bfa);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:700}
.pg-newalbum .logo-text{display:flex;align-items:center;gap:4px}
.pg-newalbum .logo-actions{display:flex;align-items:center;gap:10px}
.pg-newalbum .logo-actions .lbell{width:34px;height:34px;border-radius:10px;border:1px solid var(--border-strong);background:transparent;color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer}
.pg-newalbum .logo-actions .lbell svg{width:18px;height:18px}
.pg-newalbum .logo-actions .lav{width:34px;height:34px;border-radius:50%;object-fit:cover;cursor:pointer;background:#222}
.pg-newalbum .nav-label{font-size:12.5px;color:var(--muted-2);margin:0 0 12px 10px}
.pg-newalbum .nav{display:flex;flex-direction:column;gap:3px}
.pg-newalbum .nav a{display:flex;align-items:center;gap:14px;padding:10px 16px;border-radius:11px;color:var(--muted);text-decoration:none;font-size:15px;transition:.15s}
.pg-newalbum .nav a svg{width:20px;height:20px;stroke-width:1.7;flex-shrink:0}
.pg-newalbum .nav a:hover{color:var(--text);background:rgba(255,255,255,.03)}
.pg-newalbum .nav a.active{background:var(--indigo);color:#fff;font-weight:500;box-shadow:0 6px 20px rgba(79,70,229,.35)}
.pg-newalbum .upgrade-card{margin-top:auto;background:rgba(255,255,255,.02);border:1px solid var(--border);border-radius:16px;padding:16px}
.pg-newalbum .upgrade-card .head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:6px}
.pg-newalbum .upgrade-card h4{font-size:16px;font-weight:600;color:var(--indigo-soft)}
.pg-newalbum .upgrade-card .crown{width:32px;height:32px;border-radius:10px;background:radial-gradient(circle at 30% 30%,#3a2f14,#1b1607);display:flex;align-items:center;justify-content:center;font-size:16px}
.pg-newalbum .upgrade-card p{font-size:13px;color:var(--muted);line-height:1.45;margin-bottom:14px}
.pg-newalbum .upgrade-card button{background:var(--indigo);color:#fff;border:none;padding:10px 20px;border-radius:10px;font-family:inherit;font-size:14px;font-weight:500;cursor:pointer}
.pg-newalbum .side-bottom{padding-top:18px;display:flex;flex-direction:column;gap:14px}
.pg-newalbum .side-bottom a{display:flex;align-items:center;gap:14px;color:var(--muted);text-decoration:none;font-size:15px;padding-left:6px}
.pg-newalbum .side-bottom a svg{width:19px;height:19px;stroke-width:1.7}

.pg-newalbum /* MAIN */
.main{flex:1;padding:20px 26px;min-width:0;display:flex;flex-direction:column;overflow:hidden}
.pg-newalbum .back-link{display:inline-flex;align-items:center;gap:8px;color:var(--muted);text-decoration:none;font-size:15px;margin-bottom:16px;flex-shrink:0;align-self:flex-start}
.pg-newalbum .back-link:hover{color:var(--text)}
.pg-newalbum .back-link svg{width:17px;height:17px}

.pg-newalbum /* album header */
.album-hd{display:grid;grid-template-columns:auto 1.5fr 1fr 1.3fr;gap:26px;align-items:center;border:1px solid var(--border-strong);border-radius:20px;padding:22px 26px;flex-shrink:0;
  background:radial-gradient(120% 160% at 100% 0%,rgba(79,70,229,.26),rgba(79,70,229,0) 55%),var(--panel)}
.pg-newalbum .ah-avatar{width:116px;height:116px;border-radius:50%;object-fit:cover;background:#222}
.pg-newalbum .ah-name{font-size:23px;font-weight:600}
.pg-newalbum .ah-album{font-size:15px;margin-top:6px}
.pg-newalbum .ah-desc{font-size:13px;color:var(--muted);line-height:1.45;margin-top:8px}
.pg-newalbum .ah-meta{border-left:1px solid var(--border);padding-left:26px;display:flex;flex-direction:column;gap:16px}
.pg-newalbum .ah-meta .l{font-size:12.5px;color:var(--muted);margin-bottom:5px}
.pg-newalbum .ah-meta .v{font-size:14px;font-weight:500}
.pg-newalbum .ah-right{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.pg-newalbum .ah-total{font-size:14px;color:var(--muted)}
.pg-newalbum .ah-total b{font-size:20px;color:var(--text);font-weight:600;margin-left:4px}
.pg-newalbum .ah-edit{display:inline-flex;align-items:center;gap:7px;color:var(--indigo-soft);font-size:14px;text-decoration:none}
.pg-newalbum .ah-edit svg{width:14px;height:14px}
.pg-newalbum .ah-tag{font-size:13px;padding:6px 16px;border-radius:8px;background:rgba(255,255,255,.06);color:var(--text)}

.pg-newalbum /* tabs */
.tabs-row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:20px 0 16px;flex-shrink:0}
.pg-newalbum .tabs2{display:flex;gap:8px;flex-wrap:wrap}
.pg-newalbum .tab2{display:flex;align-items:center;gap:9px;height:44px;padding:0 18px;border:none;background:none;color:var(--muted);font-family:inherit;font-size:14.5px;border-radius:11px;cursor:pointer}
.pg-newalbum .tab2 svg{width:17px;height:17px}
.pg-newalbum .tab2:hover{color:var(--text);background:rgba(255,255,255,.03)}
.pg-newalbum .tab2.active{background:var(--indigo);color:#fff;font-weight:500;box-shadow:0 6px 18px rgba(79,70,229,.32)}
.pg-newalbum .tr-controls{display:flex;align-items:center;gap:12px}
.pg-newalbum .ctrl{display:flex;align-items:center;gap:9px;height:44px;padding:0 16px;border:1px solid var(--border-strong);border-radius:11px;background:transparent;color:var(--text);font-family:inherit;font-size:14px;cursor:pointer;white-space:nowrap}
.pg-newalbum .ctrl svg{width:15px;height:15px;color:var(--muted)}

.pg-newalbum /* media grid */
.media-grid{flex:1;min-height:0;overflow:auto;display:grid;grid-template-columns:repeat(5,1fr);gap:18px;align-content:start;padding-right:6px;
  -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 40px),transparent 100%);mask-image:linear-gradient(to bottom,#000 calc(100% - 40px),transparent 100%)}
.pg-newalbum .media-grid::-webkit-scrollbar{width:8px}
.pg-newalbum .media-grid::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:8px}
.pg-newalbum .add-photo{aspect-ratio:1/1;border:2px dashed var(--border-strong);border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:var(--muted);cursor:pointer;background:transparent}
.pg-newalbum .add-photo:hover{border-color:var(--indigo);color:var(--text);background:rgba(79,70,229,.05)}
.pg-newalbum .add-photo svg{width:30px;height:30px;stroke-width:1.6}
.pg-newalbum .add-photo span{font-size:14px}
.pg-newalbum .media-tile{aspect-ratio:1/1;border-radius:14px;object-fit:cover;background:#222;cursor:pointer}
@media (max-width:1500px){.pg-newalbum .media-grid{grid-template-columns:repeat(4,1fr)}}
@media (max-width:1150px){.pg-newalbum .media-grid{grid-template-columns:repeat(3,1fr)}.pg-newalbum .album-hd{grid-template-columns:auto 1fr}.pg-newalbum .ah-meta,.pg-newalbum .ah-right{grid-column:span 1}}
@media (max-width:860px){.pg-newalbum .media-grid{grid-template-columns:repeat(2,1fr)}.pg-newalbum .sidebar{width:240px}}
.pg-newalbum /* sidebar collapse + handle + dropdown menus */
.sidebar{transition:width .25s ease}
.pg-newalbum .app.collapsed .sidebar{width:76px}
.pg-newalbum .app.collapsed .logo{justify-content:center;padding:0}
.pg-newalbum .app.collapsed .logo-after,.pg-newalbum .app.collapsed .logo-actions,.pg-newalbum .app.collapsed .nav-label,.pg-newalbum .app.collapsed .upgrade-card{display:none}
.pg-newalbum .app.collapsed .nav a,.pg-newalbum .app.collapsed .side-bottom a{justify-content:center;gap:0;padding-left:0;font-size:0}
.pg-newalbum .app.collapsed .nav a{padding:11px 0}
.pg-newalbum .app.collapsed .nav a svg,.pg-newalbum .app.collapsed .side-bottom a svg{font-size:initial}
.pg-newalbum .side-handle{position:fixed;bottom:17px;left:201px;z-index:60;width:28px;height:28px;border-radius:50%;background:#15151f;border:1px solid var(--border-strong);color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:left .25s ease}
.pg-newalbum .side-handle:hover{color:#fff;background:#1d1d2a}
.pg-newalbum .side-handle svg{width:15px;height:15px}
.pg-newalbum .app.collapsed ~ .side-handle{left:61px}
.pg-newalbum .side-handle .ic-expand{display:none}
.pg-newalbum .app.collapsed ~ .side-handle .ic-collapse{display:none}
.pg-newalbum .app.collapsed ~ .side-handle .ic-expand{display:block}
.pg-newalbum .lbell,.pg-newalbum .lav{cursor:pointer}
.pg-newalbum .menu{position:fixed;z-index:200;width:300px;background:#10101c;border:1px solid var(--border-strong);border-radius:14px;box-shadow:0 24px 60px rgba(0,0,0,.55);padding:8px;display:none}
.pg-newalbum .menu.show{display:block;animation:menupop .18s ease}
@keyframes menupop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.pg-newalbum .menu-head{padding:10px 12px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;margin-bottom:6px}
.pg-newalbum .menu-head .mh-t{font-size:15px;font-weight:600}
.pg-newalbum .menu-head img{width:42px;height:42px;border-radius:50%;object-fit:cover}
.pg-newalbum .menu-head .e{font-size:12.5px;color:var(--muted);margin-top:2px}
.pg-newalbum .menu-item{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:9px;color:var(--text);font-size:14px;cursor:pointer;text-decoration:none}
.pg-newalbum .menu-item:hover{background:rgba(255,255,255,.05)}
.pg-newalbum .menu-item svg{width:17px;height:17px;color:var(--muted)}
.pg-newalbum .menu-item.danger,.pg-newalbum .menu-item.danger svg{color:#ef6b6b}
.pg-newalbum .menu-div{height:1px;background:var(--border);margin:6px 8px}
.pg-newalbum .noti{display:flex;gap:11px;padding:11px 12px;border-radius:9px;cursor:pointer}
.pg-newalbum .noti:hover{background:rgba(255,255,255,.04)}
.pg-newalbum .noti .nic{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.pg-newalbum .noti .nic svg{width:16px;height:16px}
.pg-newalbum .noti .nt{font-size:13.5px}
.pg-newalbum .noti .ntime{font-size:12px;color:var(--muted);margin-top:2px}
.pg-newalbum .menu-foot{text-align:center;padding:9px;border-top:1px solid var(--border);margin-top:4px}
.pg-newalbum .menu-foot a{color:var(--indigo-soft);font-size:13px;text-decoration:none}

/* ===== patient.html ===== */

@font-face{font-family:'Geist';src:url('../fonts/Geist-VariableFont_wght.ttf') format('truetype-variations');font-weight:100 900;font-style:normal;font-display:swap}
body.pg-patient{
  --bg:#070710;--sidebar:#08080f;--card:#0e0e1a;--panel:#0c0c18;
  --border:rgba(255,255,255,.06);--border-strong:rgba(255,255,255,.10);
  --text:#f4f4f6;--muted:#8b8b9a;--muted-2:#6c6c7a;
  --indigo:#4f46e5;--indigo-soft:#7c7cf0;--green:#22c55e;--blue:#60a5fa;
}
*{box-sizing:border-box;margin:0;padding:0}
.pg-patient a,.pg-patient button{transition:background-color .22s ease,border-color .22s ease,color .18s ease,box-shadow .2s ease}
.pg-patient .pcard,.pg-patient .lv-row,.pg-patient .acard,.pg-patient .album-card,.pg-patient .pstat,.pg-patient .stat,.pg-patient .input,.pg-patient .cc,.pg-patient .icon-btn,.pg-patient .settings-btn,.pg-patient .search,.pg-patient .ctrl,.pg-patient .btn-open,.pg-patient .lbell,.pg-patient .back-link,.pg-patient .card{transition:background-color .22s ease,border-color .22s ease,color .18s ease}
html,body.pg-patient{height:100%}
body.pg-patient{font-family:'Geist',system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;font-feature-settings:"ss01";height:100vh;overflow:hidden}
.pg-patient .app{display:flex;height:100vh;overflow:hidden}

.pg-patient /* SIDEBAR */
.sidebar{width:240px;flex-shrink:0;background:var(--sidebar);border-right:1px solid var(--border);padding:20px 22px;display:flex;flex-direction:column;overflow:hidden}
.pg-patient .logo{font-size:27px;font-weight:600;letter-spacing:-.5px;display:flex;align-items:center;justify-content:space-between;height:45px;margin:0 -22px 20px;padding:0 22px 0 28px;border-bottom:1px solid var(--border)}
.pg-patient .logo .x{background:linear-gradient(135deg,#6366f1,#a78bfa);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:700}
.pg-patient .logo-text{display:flex;align-items:center;gap:4px}
.pg-patient .logo-actions{display:flex;align-items:center;gap:10px}
.pg-patient .logo-actions .lbell{width:34px;height:34px;border-radius:10px;border:1px solid var(--border-strong);background:transparent;color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer}
.pg-patient .logo-actions .lbell svg{width:18px;height:18px}
.pg-patient .logo-actions .lav{width:34px;height:34px;border-radius:50%;object-fit:cover;cursor:pointer;background:#222}
.pg-patient .nav-label{font-size:12.5px;color:var(--muted-2);margin:0 0 12px 10px}
.pg-patient .nav{display:flex;flex-direction:column;gap:3px}
.pg-patient .nav a{display:flex;align-items:center;gap:14px;padding:10px 16px;border-radius:11px;color:var(--muted);text-decoration:none;font-size:15px;transition:.15s}
.pg-patient .nav a svg{width:20px;height:20px;stroke-width:1.7;flex-shrink:0}
.pg-patient .nav a:hover{color:var(--text);background:rgba(255,255,255,.03)}
.pg-patient .nav a.active{background:var(--indigo);color:#fff;font-weight:500;box-shadow:0 6px 20px rgba(79,70,229,.35)}
.pg-patient .upgrade-card{margin-top:auto;background:rgba(255,255,255,.02);border:1px solid var(--border);border-radius:16px;padding:16px}
.pg-patient .upgrade-card .head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:6px}
.pg-patient .upgrade-card h4{font-size:16px;font-weight:600;color:var(--indigo-soft)}
.pg-patient .upgrade-card .crown{width:32px;height:32px;border-radius:10px;background:radial-gradient(circle at 30% 30%,#3a2f14,#1b1607);display:flex;align-items:center;justify-content:center;font-size:16px}
.pg-patient .upgrade-card p{font-size:13px;color:var(--muted);line-height:1.45;margin-bottom:14px}
.pg-patient .upgrade-card button{background:var(--indigo);color:#fff;border:none;padding:10px 20px;border-radius:10px;font-family:inherit;font-size:14px;font-weight:500;cursor:pointer}
.pg-patient .side-bottom{padding-top:18px;display:flex;flex-direction:column;gap:14px}
.pg-patient .side-bottom a{display:flex;align-items:center;gap:14px;color:var(--muted);text-decoration:none;font-size:15px;padding-left:6px}
.pg-patient .side-bottom a svg{width:19px;height:19px;stroke-width:1.7}

.pg-patient /* MAIN */
.main{flex:1;padding:20px 26px;min-width:0;display:flex;flex-direction:column;overflow:hidden}
.pg-patient .back-link{display:inline-flex;align-items:center;gap:8px;color:var(--muted);text-decoration:none;font-size:15px;margin-bottom:16px;flex-shrink:0;align-self:flex-start}
.pg-patient .back-link:hover{color:var(--text)}
.pg-patient .back-link svg{width:17px;height:17px}

.pg-patient /* profile card */
.profile-card{display:grid;grid-template-columns:auto 1fr auto;gap:24px;align-items:start;border:1px solid var(--border-strong);border-radius:20px;padding:22px 24px;flex-shrink:0;
  background:radial-gradient(120% 160% at 100% 0%,rgba(79,70,229,.28),rgba(79,70,229,0) 55%),var(--panel);
  transition:padding .3s ease,gap .3s ease}
.pg-patient .pc-avatar{width:108px;height:108px;border-radius:50%;object-fit:cover;background:#222;transition:width .3s ease,height .3s ease}
.pg-patient .pc-name{font-size:25px;font-weight:600;transition:font-size .3s ease}
.pg-patient .pc-sub{color:var(--muted);font-size:14px;margin-top:5px;transition:font-size .3s ease,margin .3s ease}
.pg-patient .pc-stats{display:flex;gap:14px;margin-top:18px;align-items:stretch;flex-wrap:wrap;transition:margin .3s ease,max-height .35s ease,opacity .3s ease;overflow:hidden}
.pg-patient .pstat{border:1px solid var(--border-strong);border-radius:12px;padding:11px 18px;min-width:120px;transition:padding .3s ease}
.pg-patient .pstat .l{font-size:12.5px;color:var(--muted);margin-bottom:6px;transition:font-size .3s ease,margin .3s ease}
.pg-patient .pstat .v{font-size:16px;font-weight:500;transition:font-size .3s ease}

.pg-patient /* compact (on scroll) */
.profile-card.shrink{padding:14px 24px;gap:18px}
.pg-patient .profile-card.shrink .pc-avatar{width:58px;height:58px}
.pg-patient .profile-card.shrink .pc-name{font-size:20px}
.pg-patient .profile-card.shrink .pc-sub{font-size:13px;margin-top:2px}
.pg-patient .profile-card.shrink .pc-stats{margin-top:0;max-height:0;opacity:0;pointer-events:none}
.pg-patient .notes{padding:2px 4px;max-width:220px}
.pg-patient .notes .l{font-size:13.5px;font-weight:600;margin-bottom:6px}
.pg-patient .notes .t{font-size:13px;color:var(--muted);line-height:1.45}
.pg-patient .notes a{display:inline-flex;align-items:center;gap:5px;color:var(--indigo-soft);font-size:13px;text-decoration:none;margin-top:6px}
.pg-patient .notes a svg{width:13px;height:13px}
.pg-patient .btn-primary{display:flex;align-items:center;gap:9px;background:var(--indigo);color:#fff;border:none;padding:12px 20px;border-radius:12px;font-family:inherit;font-size:15px;font-weight:500;cursor:pointer;box-shadow:0 8px 22px rgba(79,70,229,.35);white-space:nowrap}
.pg-patient .btn-primary svg{width:18px;height:18px}

.pg-patient /* albums header */
.albums-head{display:flex;align-items:center;justify-content:space-between;margin:22px 0 14px;flex-shrink:0}
.pg-patient .albums-head h2{font-size:21px;font-weight:600}
.pg-patient .ah-controls{display:flex;align-items:center;gap:12px}
.pg-patient .ah-controls .lbl{color:var(--muted);font-size:14px}
.pg-patient .view-switch{display:flex;gap:4px;border:1px solid var(--border-strong);border-radius:11px;padding:4px;margin-right:4px}
.pg-patient .view-switch button{width:40px;height:34px;border:none;border-radius:8px;background:none;color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center}
.pg-patient .view-switch button.active{background:var(--indigo);color:#fff}
.pg-patient .view-switch svg{width:18px;height:18px}
.pg-patient .ctrl{display:flex;align-items:center;gap:9px;height:42px;padding:0 16px;border:1px solid var(--border-strong);border-radius:11px;background:transparent;color:var(--text);font-family:inherit;font-size:14px;cursor:pointer}
.pg-patient .ctrl svg{width:15px;height:15px;color:var(--muted)}

.pg-patient /* albums list (timeline) */
.albums-list{flex:1;min-height:0;overflow:auto;padding-right:6px;
  -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 48px),transparent 100%);
  mask-image:linear-gradient(to bottom,#000 calc(100% - 48px),transparent 100%)}
.pg-patient .album-row{display:flex;gap:18px}
.pg-patient .album-row .rail{position:relative;width:12px;flex-shrink:0;display:flex;justify-content:center}
.pg-patient .album-row .rail::before{content:"";position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);width:2px;background:var(--border)}
.pg-patient .album-row:first-child .rail::before{top:28px}
.pg-patient .album-row:last-child .rail::before{bottom:auto;height:28px}
.pg-patient .album-row .dot{width:11px;height:11px;border-radius:50%;background:var(--indigo);margin-top:24px;z-index:1;box-shadow:0 0 0 4px rgba(79,70,229,.15)}
.pg-patient .album-card{flex:1;min-width:0;margin-bottom:18px;border:1px solid var(--border);border-radius:16px;padding:18px;display:grid;grid-template-columns:auto auto 1fr auto;gap:20px;align-items:start}
.pg-patient .al-date .d{font-size:18px;font-weight:600}
.pg-patient .al-date .y{font-size:14px;color:var(--muted);margin-top:2px}
.pg-patient .thumbs{display:flex;gap:10px}
.pg-patient .thumb{width:94px;height:94px;border-radius:10px;object-fit:cover;background:#222;position:relative}
.pg-patient .thumb-wrap{position:relative}
.pg-patient .thumb-more{position:absolute;inset:0;border-radius:10px;background:rgba(8,8,16,.55);display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:600;color:#fff}
.pg-patient .al-info{min-width:0}
.pg-patient .al-tag{display:inline-block;font-size:12px;padding:5px 13px;border-radius:14px;background:rgba(124,124,240,.16);color:var(--indigo-soft);margin-bottom:10px}
.pg-patient .al-desc{font-size:13.5px;color:var(--muted);line-height:1.5;margin-bottom:14px}
.pg-patient .al-stats{display:flex;gap:18px;flex-wrap:nowrap;align-items:center}
.pg-patient .smini{display:flex;align-items:center;gap:7px;flex-shrink:0;white-space:nowrap}
.pg-patient .smini svg{width:17px;height:17px;flex-shrink:0}
.pg-patient .smini .l{font-size:13px;color:var(--muted)}
.pg-patient .smini .v{font-size:14px;font-weight:600}
.pg-patient .c-blue{color:#60a5fa}.pg-patient .c-green{color:#34d399}.pg-patient .c-amber{color:#f59e42}.pg-patient .c-cyan{color:#38bdf8}.pg-patient .c-violet{color:#a78bfa}
.pg-patient .btn-open{display:flex;align-items:center;gap:9px;height:42px;padding:0 18px;border:1px solid var(--border-strong);border-radius:11px;background:transparent;color:var(--text);font-family:inherit;font-size:14px;cursor:pointer;white-space:nowrap;transition:.15s}
.pg-patient .btn-open:hover{background:rgba(255,255,255,.04)}
.pg-patient .btn-open svg{width:16px;height:16px}
.pg-patient .albums-list.faded,.pg-patient .albums-cards.faded{
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 30px,#000 calc(100% - 48px),transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 30px,#000 calc(100% - 48px),transparent 100%)}
.pg-patient .albums-list::-webkit-scrollbar{width:8px}
.pg-patient .albums-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:8px}

.pg-patient /* cards view */
.albums-cards{flex:1;min-height:0;overflow:auto;display:grid;grid-template-columns:repeat(5,1fr);gap:16px;align-content:start;padding-right:6px;
  -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 48px),transparent 100%);
  mask-image:linear-gradient(to bottom,#000 calc(100% - 48px),transparent 100%)}
.pg-patient .albums-cards::-webkit-scrollbar{width:8px}
.pg-patient .albums-cards::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:8px}
.pg-patient .acard{border:1px solid var(--border);border-radius:16px;padding:12px;display:flex;flex-direction:column;gap:12px;background:var(--card);cursor:pointer;transition:border-color .15s,background .15s}
.pg-patient .acard:hover{border-color:var(--border-strong);background:#12121f}
.pg-patient .ac-cover{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:12px;background:#222}
.pg-patient .acard .ac-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 2px 2px}
.pg-patient .acard .ac-head .al-date{display:flex;align-items:baseline;gap:7px}
.pg-patient .acard .ac-head .al-date .d{font-size:15px}
.pg-patient .acard .ac-head .al-date .y{font-size:13px;margin-top:0}
@media (max-width:1500px){.pg-patient .albums-cards{grid-template-columns:repeat(4,1fr)}}
@media (max-width:1150px){.pg-patient .albums-cards{grid-template-columns:repeat(3,1fr)}}
@media (max-width:860px){.pg-patient .albums-cards{grid-template-columns:repeat(2,1fr)}}

.pg-patient /* dialog */
.overlay{position:fixed;inset:0;background:rgba(5,5,12,.62);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;z-index:50;animation:fade .2s ease}
.pg-patient .overlay.show{display:flex}
@keyframes fade{from{opacity:0}to{opacity:1}}
.pg-patient .dialog{width:440px;max-width:92vw;border:1px solid var(--border-strong);border-radius:18px;padding:24px;
  background:radial-gradient(120% 90% at 50% 0%,rgba(79,70,229,.16),rgba(79,70,229,0) 50%),#0c0c17;
  box-shadow:0 30px 80px rgba(0,0,0,.55);animation:pop .22s cubic-bezier(.4,0,.2,1)}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
.pg-patient .dlg-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.pg-patient .dlg-head h3{font-size:20px;font-weight:600}
.pg-patient .dlg-head p{font-size:13.5px;color:var(--muted);margin-top:5px}
.pg-patient .dlg-close{background:none;border:none;color:var(--muted);cursor:pointer;padding:2px;display:flex}
.pg-patient .dlg-close svg{width:20px;height:20px}
.pg-patient .dlg-close:hover{color:var(--text)}
.pg-patient .dlg-div{border-top:1px solid var(--border);margin:18px 0}
.pg-patient .tpl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.pg-patient .tpl{height:88px;border:1px solid var(--border-strong);border-radius:14px;background:rgba(255,255,255,.02);display:flex;align-items:center;justify-content:center;cursor:pointer;color:#dcdce6;transition:.15s}
.pg-patient .tpl:hover{background:rgba(255,255,255,.05)}
.pg-patient .tpl.active{border-color:var(--indigo);background:rgba(79,70,229,.16);color:#fff}
.pg-patient .tpl svg{width:36px;height:36px;stroke-width:1.5}
.pg-patient .dlg-foot{display:flex;justify-content:flex-end;align-items:center;gap:18px}
.pg-patient .btn-cancel{background:none;border:none;color:var(--muted);font-family:inherit;font-size:15px;cursor:pointer;padding:10px 8px}
.pg-patient .btn-cancel:hover{color:var(--text)}
.pg-patient .btn-next{background:var(--indigo);color:#fff;border:none;padding:11px 30px;border-radius:11px;font-family:inherit;font-size:15px;font-weight:500;cursor:pointer;box-shadow:0 8px 22px rgba(79,70,229,.35)}

@media (max-width:1300px){
  .pg-patient .album-card{grid-template-columns:auto 1fr auto}
  .pg-patient .album-card .thumbs{display:none}
}
@media (max-width:1100px){
  .pg-patient .sidebar{width:240px}
  .pg-patient .pc-stats .pstat{min-width:104px}
}
.pg-patient /* sidebar collapse + handle + dropdown menus */
.sidebar{transition:width .25s ease}
.pg-patient .app.collapsed .sidebar{width:76px}
.pg-patient .app.collapsed .logo{justify-content:center;padding:0}
.pg-patient .app.collapsed .logo-after,.pg-patient .app.collapsed .logo-actions,.pg-patient .app.collapsed .nav-label,.pg-patient .app.collapsed .upgrade-card{display:none}
.pg-patient .app.collapsed .nav a,.pg-patient .app.collapsed .side-bottom a{justify-content:center;gap:0;padding-left:0;font-size:0}
.pg-patient .app.collapsed .nav a{padding:11px 0}
.pg-patient .app.collapsed .nav a svg,.pg-patient .app.collapsed .side-bottom a svg{font-size:initial}
.pg-patient .side-handle{position:fixed;bottom:17px;left:201px;z-index:60;width:28px;height:28px;border-radius:50%;background:#15151f;border:1px solid var(--border-strong);color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:left .25s ease}
.pg-patient .side-handle:hover{color:#fff;background:#1d1d2a}
.pg-patient .side-handle svg{width:15px;height:15px}
.pg-patient .app.collapsed ~ .side-handle{left:61px}
.pg-patient .side-handle .ic-expand{display:none}
.pg-patient .app.collapsed ~ .side-handle .ic-collapse{display:none}
.pg-patient .app.collapsed ~ .side-handle .ic-expand{display:block}
.pg-patient .lbell,.pg-patient .lav{cursor:pointer}
.pg-patient .menu{position:fixed;z-index:200;width:300px;background:#10101c;border:1px solid var(--border-strong);border-radius:14px;box-shadow:0 24px 60px rgba(0,0,0,.55);padding:8px;display:none}
.pg-patient .menu.show{display:block;animation:menupop .18s ease}
@keyframes menupop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.pg-patient .menu-head{padding:10px 12px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;margin-bottom:6px}
.pg-patient .menu-head .mh-t{font-size:15px;font-weight:600}
.pg-patient .menu-head img{width:42px;height:42px;border-radius:50%;object-fit:cover}
.pg-patient .menu-head .e{font-size:12.5px;color:var(--muted);margin-top:2px}
.pg-patient .menu-item{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:9px;color:var(--text);font-size:14px;cursor:pointer;text-decoration:none}
.pg-patient .menu-item:hover{background:rgba(255,255,255,.05)}
.pg-patient .menu-item svg{width:17px;height:17px;color:var(--muted)}
.pg-patient .menu-item.danger,.pg-patient .menu-item.danger svg{color:#ef6b6b}
.pg-patient .menu-div{height:1px;background:var(--border);margin:6px 8px}
.pg-patient .noti{display:flex;gap:11px;padding:11px 12px;border-radius:9px;cursor:pointer}
.pg-patient .noti:hover{background:rgba(255,255,255,.04)}
.pg-patient .noti .nic{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.pg-patient .noti .nic svg{width:16px;height:16px}
.pg-patient .noti .nt{font-size:13.5px}
.pg-patient .noti .ntime{font-size:12px;color:var(--muted);margin-top:2px}
.pg-patient .menu-foot{text-align:center;padding:9px;border-top:1px solid var(--border);margin-top:4px}
.pg-patient .menu-foot a{color:var(--indigo-soft);font-size:13px;text-decoration:none}

/* ===== patients.html ===== */

@font-face{
  font-family:'Geist';
  src:url('../fonts/Geist-VariableFont_wght.ttf') format('truetype-variations');
  font-weight:100 900;font-style:normal;font-display:swap;
}
body.pg-patients{
  --bg:#070710;
  --sidebar:#08080f;
  --card:#0e0e1a;
  --panel:#0c0c18;
  --border:rgba(255,255,255,.06);
  --border-strong:rgba(255,255,255,.10);
  --text:#f4f4f6;
  --muted:#8b8b9a;
  --muted-2:#6c6c7a;
  --indigo:#4f46e5;
  --indigo-soft:#7c7cf0;
  --green:#22c55e;
  --teal:#2dd4bf;
  --orange:#f59e42;
  --blue:#60a5fa;
}
*{box-sizing:border-box;margin:0;padding:0}
.pg-patients a,.pg-patients button{transition:background-color .22s ease,border-color .22s ease,color .18s ease,box-shadow .2s ease}
.pg-patients .pcard,.pg-patients .lv-row,.pg-patients .acard,.pg-patients .album-card,.pg-patients .pstat,.pg-patients .stat,.pg-patients .input,.pg-patients .cc,.pg-patients .icon-btn,.pg-patients .settings-btn,.pg-patients .search,.pg-patients .ctrl,.pg-patients .btn-open,.pg-patients .lbell,.pg-patients .back-link,.pg-patients .card{transition:background-color .22s ease,border-color .22s ease,color .18s ease}
html,body.pg-patients{height:100%}
body.pg-patients{
  font-family:'Geist',system-ui,-apple-system,sans-serif;
  background:var(--bg);color:var(--text);
  -webkit-font-smoothing:antialiased;font-feature-settings:"ss01";
  height:100vh;overflow:hidden;
}
.pg-patients .app{display:flex;height:100vh;overflow:hidden}

.pg-patients /* ---------- SIDEBAR ---------- */
.sidebar{
  width:240px;flex-shrink:0;background:var(--sidebar);
  border-right:1px solid var(--border);
  padding:20px 22px;display:flex;flex-direction:column;overflow:hidden;
}
.pg-patients .logo{font-size:27px;font-weight:600;letter-spacing:-.5px;display:flex;align-items:center;justify-content:space-between;height:45px;margin:0 -22px 20px;padding:0 22px 0 28px;border-bottom:1px solid var(--border)}
.pg-patients .logo-text{display:flex;align-items:center;gap:4px}
.pg-patients .logo-actions{display:flex;align-items:center;gap:10px}
.pg-patients .logo-actions .lbell{width:34px;height:34px;border-radius:10px;border:1px solid var(--border-strong);background:transparent;color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer}
.pg-patients .logo-actions .lbell svg{width:18px;height:18px}
.pg-patients .logo-actions .lav{width:34px;height:34px;border-radius:50%;object-fit:cover;cursor:pointer;background:#222}
.pg-patients .logo .x{background:linear-gradient(135deg,#6366f1,#a78bfa);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:700}
.pg-patients .nav-label{font-size:12.5px;color:var(--muted-2);margin:0 0 12px 10px}
.pg-patients .nav{display:flex;flex-direction:column;gap:3px}
.pg-patients .nav a{display:flex;align-items:center;gap:14px;padding:10px 16px;border-radius:11px;color:var(--muted);text-decoration:none;font-size:15px;transition:.15s}
.pg-patients .nav a svg{width:20px;height:20px;stroke-width:1.7;flex-shrink:0}
.pg-patients .nav a:hover{color:var(--text);background:rgba(255,255,255,.03)}
.pg-patients .nav a.active{background:var(--indigo);color:#fff;font-weight:500;box-shadow:0 6px 20px rgba(79,70,229,.35)}
.pg-patients .upgrade-card{margin-top:auto;background:rgba(255,255,255,.02);border:1px solid var(--border);border-radius:16px;padding:16px}
.pg-patients .upgrade-card .head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:6px}
.pg-patients .upgrade-card h4{font-size:16px;font-weight:600;color:var(--indigo-soft)}
.pg-patients .upgrade-card .crown{width:32px;height:32px;border-radius:10px;background:radial-gradient(circle at 30% 30%,#3a2f14,#1b1607);display:flex;align-items:center;justify-content:center;font-size:16px}
.pg-patients .upgrade-card p{font-size:13px;color:var(--muted);line-height:1.45;margin-bottom:14px}
.pg-patients .upgrade-card button{background:var(--indigo);color:#fff;border:none;padding:10px 20px;border-radius:10px;font-family:inherit;font-size:14px;font-weight:500;cursor:pointer}
.pg-patients .side-bottom{padding-top:18px;display:flex;flex-direction:column;gap:14px}
.pg-patients .side-bottom a{display:flex;align-items:center;gap:14px;color:var(--muted);text-decoration:none;font-size:15px;padding-left:6px}
.pg-patients .side-bottom a svg{width:19px;height:19px;stroke-width:1.7}

.pg-patients /* ---------- MAIN ---------- */
.main{flex:1;padding:20px 26px;min-width:0;display:flex;flex-direction:column;overflow:hidden}
.pg-patients .topbar{display:none}
.pg-patients .profile{display:flex;align-items:center;gap:13px;cursor:pointer}
.pg-patients .profile img{width:44px;height:44px;border-radius:50%;object-fit:cover;background:#222}
.pg-patients .profile .name{font-size:16px;font-weight:600;line-height:1.25}
.pg-patients .profile .role{font-size:13px;color:var(--muted)}
.pg-patients .profile .chev{color:var(--muted)}
.pg-patients .spacer{flex:1}
.pg-patients .icon-btn{width:46px;height:46px;border-radius:12px;border:1px solid var(--border-strong);background:transparent;color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer}
.pg-patients .search{display:flex;align-items:center;gap:12px;width:300px;height:46px;padding:0 18px;border:1px solid var(--border-strong);border-radius:12px;color:var(--muted)}
.pg-patients .search input{background:none;border:none;outline:none;color:var(--text);font-family:inherit;font-size:15px;width:100%}
.pg-patients .search input::placeholder{color:var(--muted)}
.pg-patients .settings-btn{display:flex;align-items:center;gap:10px;height:46px;padding:0 22px;border:1px solid var(--border-strong);border-radius:12px;background:transparent;color:var(--text);font-family:inherit;font-size:15px;cursor:pointer}
.pg-patients .settings-btn svg{width:18px;height:18px}

.pg-patients /* page head */
.page-head{display:flex;align-items:center;gap:16px;margin-bottom:16px;flex-shrink:0}
.pg-patients .page-head h1{font-size:24px;font-weight:600}
.pg-patients .page-head .total{color:var(--muted);font-size:15px;border-left:1px solid var(--border-strong);padding-left:16px}
.pg-patients .btn-primary{margin-left:auto;display:flex;align-items:center;gap:9px;background:var(--indigo);color:#fff;border:none;padding:13px 22px;border-radius:12px;font-family:inherit;font-size:15px;font-weight:500;cursor:pointer;box-shadow:0 8px 22px rgba(79,70,229,.35)}
.pg-patients .btn-primary svg{width:18px;height:18px}

.pg-patients /* panel */
.panel{
  flex:1;min-height:0;display:flex;flex-direction:column;
  border:1px solid var(--border);border-radius:22px;padding:22px 24px;
  background:
    radial-gradient(120% 90% at 50% 0%,rgba(79,70,229,.10) 0%,rgba(79,70,229,0) 45%),
    var(--panel);
}
.pg-patients .panel-top{display:flex;align-items:center;gap:16px;flex-shrink:0}
.pg-patients .psearch{display:flex;align-items:center;gap:10px;width:330px;height:44px;padding:0 16px;border:1px solid var(--border-strong);border-radius:11px;color:var(--muted)}
.pg-patients .psearch input{background:none;border:none;outline:none;color:var(--text);font-family:inherit;font-size:14px;width:100%}
.pg-patients .psearch input::placeholder{color:var(--muted)}
.pg-patients .view-toggle{margin-left:auto;display:flex;gap:4px;border:1px solid var(--border-strong);border-radius:11px;padding:4px}
.pg-patients .view-toggle button{width:38px;height:34px;border:none;border-radius:8px;background:none;color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center}
.pg-patients .view-toggle button.active{background:var(--indigo);color:#fff}
.pg-patients .view-toggle svg{width:18px;height:18px}
.pg-patients .btn-ghost{display:flex;align-items:center;gap:9px;height:44px;padding:0 18px;border:1px solid var(--border-strong);border-radius:11px;background:transparent;color:var(--text);font-family:inherit;font-size:14px;cursor:pointer}
.pg-patients .btn-ghost svg{width:16px;height:16px;color:var(--muted)}
.pg-patients .sortby{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--muted)}
.pg-patients .sortby .sel{display:flex;align-items:center;gap:10px;height:44px;padding:0 16px;border:1px solid var(--border-strong);border-radius:11px;color:var(--text);cursor:pointer}
.pg-patients .sortby .sel svg{width:14px;height:14px;color:var(--muted)}

.pg-patients .badges{display:flex;gap:12px;margin:16px 0 0;flex-shrink:0}
.pg-patients .badge{font-size:13px;font-weight:500;padding:7px 16px;border-radius:20px}
.pg-patients .badge.blue{background:rgba(96,165,250,.16);color:#7cbaff}
.pg-patients .badge.orange{background:rgba(245,158,66,.16);color:#f0a85e}

.pg-patients /* cards grid */
.cards-scroll{flex:1;min-height:0;overflow-y:auto;padding:18px 8px 18px 2px;scrollbar-width:thin;scrollbar-color:rgba(124,124,240,.5) transparent;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 22px,#000 calc(100% - 28px),transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 22px,#000 calc(100% - 28px),transparent 100%)}
.pg-patients .cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;align-content:start}
.pg-patients .pcard{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:16px;min-width:0;cursor:pointer;transition:border-color .15s,background .15s}
.pg-patients .pcard:hover{border-color:var(--border-strong);background:#12121f}
.pg-patients .lv-row{cursor:pointer}
.pg-patients .lv-row:hover{background:rgba(255,255,255,.02)}
.pg-patients .pcard .top{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.pg-patients .pcard .av{width:80px;height:80px;border-radius:50%;object-fit:cover;flex-shrink:0;background:#222}
.pg-patients .pcard .nm{flex:1;min-width:0}
.pg-patients .pcard .nm .n{font-size:15px;font-weight:600;margin-bottom:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pg-patients .pcard .upd{font-size:11px;margin-bottom:11px;white-space:nowrap}
.pg-patients .pcard .upd .lbl{color:var(--muted)}
.pg-patients .pcard .upd .d{color:var(--text);font-weight:500;margin-left:7px}
.pg-patients .tags{display:flex;gap:8px}
.pg-patients .tag{font-size:12px;padding:4px 11px;border-radius:14px;border:1px solid;white-space:nowrap}
.pg-patients .tag.cos{color:#5cc8e8;border-color:rgba(92,200,232,.4);background:rgba(92,200,232,.08)}
.pg-patients .tag.fac{color:#52d486;border-color:rgba(82,212,134,.4);background:rgba(82,212,134,.08)}
.pg-patients .kebab{color:var(--muted);background:none;border:none;cursor:pointer;padding:2px;display:flex;flex-shrink:0;align-self:flex-start}
.pg-patients .kebab svg{width:18px;height:18px}
.pg-patients .pcard .row{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:14px;padding-top:14px;border-top:1px solid var(--border)}
.pg-patients .pcard .row .lbl{color:var(--muted)}
.pg-patients .pcard .row .val{white-space:nowrap;font-weight:600}
.pg-patients .pcard .row .val .tot{color:var(--muted);font-weight:400}

.pg-patients /* list view */
.cards.hide{display:none}
.pg-patients .list-view{display:none;flex-direction:column}
.pg-patients .list-view.show{display:flex}
.pg-patients .lv-head,.pg-patients .lv-row{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr 90px;align-items:center;gap:16px}
.pg-patients .lv-head{padding:0 14px 14px;color:var(--muted);font-size:14px;border-bottom:1px solid var(--border)}
.pg-patients .lv-head .right,.pg-patients .lv-row .acts{text-align:right;justify-self:end}
.pg-patients .lv-body{display:flex;flex-direction:column}
.pg-patients .lv-row{padding:13px 14px;border-bottom:1px solid var(--border);font-size:14.5px}
.pg-patients .lv-row:last-child{border-bottom:none}
.pg-patients .lv-row .pt{display:flex;align-items:center;gap:13px;min-width:0}
.pg-patients .lv-row .pt img{width:34px;height:34px;border-radius:50%;object-fit:cover;flex-shrink:0;background:#222}
.pg-patients .lv-row .pt span{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pg-patients .lv-row .tot{color:var(--muted)}
.pg-patients .lv-row .tg{display:flex;gap:8px}
.pg-patients .lv-row .acts{color:var(--muted);background:none;border:none;cursor:pointer;display:flex;justify-content:flex-end}
.pg-patients .lv-row .acts svg{width:18px;height:18px}
.pg-patients .pcard .row .lbl{color:var(--muted)}
.pg-patients .pcard .row .val{color:var(--text)}
.pg-patients .pcard .row .val .tot{color:var(--muted)}

.pg-patients /* pagination */
.pager{display:flex;align-items:center;justify-content:flex-end;gap:8px;padding-top:16px;flex-shrink:0;font-size:14px}
.pg-patients .pager button,.pg-patients .pager .pg{background:none;border:none;color:var(--muted);font-family:inherit;font-size:14px;cursor:pointer;display:flex;align-items:center;gap:6px;padding:8px 10px;border-radius:9px}
.pg-patients .pager .pg{min-width:34px;height:34px;justify-content:center}
.pg-patients .pager .pg.active{background:var(--indigo);color:#fff}
.pg-patients .pager svg{width:15px;height:15px}

.pg-patients .cards-scroll::-webkit-scrollbar{width:9px}
.pg-patients .cards-scroll::-webkit-scrollbar-track{background:rgba(255,255,255,.04);border-radius:8px;margin:4px 0}
.pg-patients .cards-scroll::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#6366f1,#4f46e5);border-radius:8px;border:2px solid transparent;background-clip:padding-box}
.pg-patients .cards-scroll::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#818cf8,#6366f1);background-clip:padding-box}

.pg-patients /* ---------- RESPONSIVE ---------- */
@media (max-width:1500px){
  .cards{grid-template-columns:repeat(3,1fr)}
  .search,.psearch{width:240px}
}
@media (max-width:1180px){
  .pg-patients .sidebar{width:240px}
  .pg-patients .cards{grid-template-columns:repeat(3,1fr)}
  .pg-patients .pcard .nm .n{font-size:13px}
  .pg-patients .search{width:200px}
  .pg-patients .sortby{display:none}
  .pg-patients .lv-head,.pg-patients .lv-row{grid-template-columns:1.6fr 1fr 1fr 70px}
  .pg-patients .lv-head .col-tag,.pg-patients .lv-row .tg{display:none}
}
@media (max-width:860px){
  .pg-patients .sidebar{width:240px}
  .pg-patients .cards{grid-template-columns:1fr}
  .pg-patients .search,.pg-patients .settings-btn span{display:none}
  .pg-patients .settings-btn{padding:0 14px}
  .pg-patients .lv-head,.pg-patients .lv-row{grid-template-columns:1.6fr 1fr 70px}
  .pg-patients .lv-head .col-alb,.pg-patients .lv-row .col-alb{display:none}
}
@media (max-height:760px){
  .pg-patients .cards{gap:12px}
  .pg-patients .pcard{padding:13px}
  .pg-patients .pcard .row{padding:9px 0}
}
/* iPad portrait (Mini 744 → Pro 1024): show 3 patient cards per row — overrides the
   2-col (≤1180) and 1-col (≤860) rules above, which are too sparse on a tablet.
   orientation:portrait keeps phones (well under 744px) on a single column. */
@media (min-width:744px) and (max-width:1200px) and (orientation:portrait){
  .pg-patients .cards{grid-template-columns:repeat(3,1fr)}
}
.pg-patients /* sidebar collapse + handle + dropdown menus */
.sidebar{transition:width .25s ease}
.pg-patients .app.collapsed .sidebar{width:76px}
.pg-patients .app.collapsed .logo{justify-content:center;padding:0}
.pg-patients .app.collapsed .logo-after,.pg-patients .app.collapsed .logo-actions,.pg-patients .app.collapsed .nav-label,.pg-patients .app.collapsed .upgrade-card{display:none}
.pg-patients .app.collapsed .nav a,.pg-patients .app.collapsed .side-bottom a{justify-content:center;gap:0;padding-left:0;font-size:0}
.pg-patients .app.collapsed .nav a{padding:11px 0}
.pg-patients .app.collapsed .nav a svg,.pg-patients .app.collapsed .side-bottom a svg{font-size:initial}
.pg-patients .side-handle{position:fixed;bottom:17px;left:201px;z-index:60;width:28px;height:28px;border-radius:50%;background:#15151f;border:1px solid var(--border-strong);color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:left .25s ease}
.pg-patients .side-handle:hover{color:#fff;background:#1d1d2a}
.pg-patients .side-handle svg{width:15px;height:15px}
.pg-patients .app.collapsed ~ .side-handle{left:61px}
.pg-patients .side-handle .ic-expand{display:none}
.pg-patients .app.collapsed ~ .side-handle .ic-collapse{display:none}
.pg-patients .app.collapsed ~ .side-handle .ic-expand{display:block}
.pg-patients .lbell,.pg-patients .lav{cursor:pointer}
.pg-patients .menu{position:fixed;z-index:200;width:300px;background:#10101c;border:1px solid var(--border-strong);border-radius:14px;box-shadow:0 24px 60px rgba(0,0,0,.55);padding:8px;display:none}
.pg-patients .menu.show{display:block;animation:menupop .18s ease}
@keyframes menupop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.pg-patients .menu-head{padding:10px 12px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;margin-bottom:6px}
.pg-patients .menu-head .mh-t{font-size:15px;font-weight:600}
.pg-patients .menu-head img{width:42px;height:42px;border-radius:50%;object-fit:cover}
.pg-patients .menu-head .e{font-size:12.5px;color:var(--muted);margin-top:2px}
.pg-patients .menu-item{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:9px;color:var(--text);font-size:14px;cursor:pointer;text-decoration:none}
.pg-patients .menu-item:hover{background:rgba(255,255,255,.05)}
.pg-patients .menu-item svg{width:17px;height:17px;color:var(--muted)}
.pg-patients .menu-item.danger,.pg-patients .menu-item.danger svg{color:#ef6b6b}
.pg-patients .menu-div{height:1px;background:var(--border);margin:6px 8px}
.pg-patients .noti{display:flex;gap:11px;padding:11px 12px;border-radius:9px;cursor:pointer}
.pg-patients .noti:hover{background:rgba(255,255,255,.04)}
.pg-patients .noti .nic{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.pg-patients .noti .nic svg{width:16px;height:16px}
.pg-patients .noti .nt{font-size:13.5px}
.pg-patients .noti .ntime{font-size:12px;color:var(--muted);margin-top:2px}
.pg-patients .menu-foot{text-align:center;padding:9px;border-top:1px solid var(--border);margin-top:4px}
.pg-patients .menu-foot a{color:var(--indigo-soft);font-size:13px;text-decoration:none}

/* ===== settings.html ===== */

@font-face{font-family:'Geist';src:url('../fonts/Geist-VariableFont_wght.ttf') format('truetype-variations');font-weight:100 900;font-style:normal;font-display:swap}
body.pg-settings{
  --bg:#070710;--sidebar:#08080f;--card:#0e0e1a;--panel:#0c0c18;
  --border:rgba(255,255,255,.06);--border-strong:rgba(255,255,255,.10);
  --text:#f4f4f6;--muted:#8b8b9a;--muted-2:#6c6c7a;
  --indigo:#4f46e5;--indigo-soft:#7c7cf0;--green:#22c55e;--blue:#60a5fa;--red:#ef5350;
}
*{box-sizing:border-box;margin:0;padding:0}
.pg-settings a,.pg-settings button{transition:background-color .22s ease,border-color .22s ease,color .18s ease,box-shadow .2s ease}
html,body.pg-settings{height:100%}
body.pg-settings{font-family:'Geist',system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;font-feature-settings:"ss01";height:100vh;overflow:hidden}
.pg-settings .app{display:flex;height:100vh;overflow:hidden}

.pg-settings /* SIDEBAR */
.sidebar{width:240px;flex-shrink:0;background:var(--sidebar);border-right:1px solid var(--border);padding:20px 22px;display:flex;flex-direction:column;overflow:hidden;transition:width .25s ease}
.pg-settings .logo{font-size:27px;font-weight:600;letter-spacing:-.5px;display:flex;align-items:center;justify-content:space-between;height:45px;margin:0 -22px 20px;padding:0 22px 0 28px;border-bottom:1px solid var(--border)}
.pg-settings .logo .x{background:linear-gradient(135deg,#6366f1,#a78bfa);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:700}
.pg-settings .logo-text{display:flex;align-items:center;gap:4px}
.pg-settings .logo-actions{display:flex;align-items:center;gap:10px}
.pg-settings .logo-actions .lbell{width:34px;height:34px;border-radius:10px;border:1px solid var(--border-strong);background:transparent;color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer}
.pg-settings .logo-actions .lbell svg{width:18px;height:18px}
.pg-settings .logo-actions .lav{width:34px;height:34px;border-radius:50%;object-fit:cover;cursor:pointer;background:#222}
.pg-settings .nav-label{font-size:12.5px;color:var(--muted-2);margin:0 0 12px 10px}
.pg-settings .nav{display:flex;flex-direction:column;gap:3px}
.pg-settings .nav a{display:flex;align-items:center;gap:14px;padding:10px 16px;border-radius:11px;color:var(--muted);text-decoration:none;font-size:15px;transition:.15s}
.pg-settings .nav a svg{width:20px;height:20px;stroke-width:1.7;flex-shrink:0}
.pg-settings .nav a:hover{color:var(--text);background:rgba(255,255,255,.03)}
.pg-settings .nav a.active{background:var(--indigo);color:#fff;font-weight:500;box-shadow:0 6px 20px rgba(79,70,229,.35)}
.pg-settings .upgrade-card{margin-top:auto;background:rgba(255,255,255,.02);border:1px solid var(--border);border-radius:16px;padding:16px}
.pg-settings .upgrade-card .head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:6px}
.pg-settings .upgrade-card h4{font-size:16px;font-weight:600;color:var(--indigo-soft)}
.pg-settings .upgrade-card .crown{width:32px;height:32px;border-radius:10px;background:radial-gradient(circle at 30% 30%,#3a2f14,#1b1607);display:flex;align-items:center;justify-content:center;font-size:16px}
.pg-settings .upgrade-card p{font-size:13px;color:var(--muted);line-height:1.45;margin-bottom:14px}
.pg-settings .upgrade-card button{background:var(--indigo);color:#fff;border:none;padding:10px 20px;border-radius:10px;font-family:inherit;font-size:14px;font-weight:500;cursor:pointer}
.pg-settings .side-bottom{padding-top:18px;display:flex;flex-direction:column;gap:14px}
.pg-settings .side-bottom a{display:flex;align-items:center;gap:14px;color:var(--muted);text-decoration:none;font-size:15px;padding-left:6px}
.pg-settings .side-bottom a svg{width:19px;height:19px;stroke-width:1.7}
.pg-settings .app.collapsed .sidebar{width:76px}
.pg-settings .app.collapsed .logo{justify-content:center;padding:0}
.pg-settings .app.collapsed .logo-after,.pg-settings .app.collapsed .logo-actions,.pg-settings .app.collapsed .nav-label,.pg-settings .app.collapsed .upgrade-card{display:none}
.pg-settings .app.collapsed .nav a,.pg-settings .app.collapsed .side-bottom a{justify-content:center;gap:0;padding-left:0;font-size:0}
.pg-settings .app.collapsed .nav a{padding:11px 0}
.pg-settings .app.collapsed .nav a svg,.pg-settings .app.collapsed .side-bottom a svg{font-size:initial}
.pg-settings .side-handle{position:fixed;bottom:17px;left:201px;z-index:60;width:28px;height:28px;border-radius:50%;background:#15151f;border:1px solid var(--border-strong);color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:left .25s ease}
.pg-settings .side-handle:hover{color:#fff;background:#1d1d2a}
.pg-settings .side-handle svg{width:15px;height:15px}
.pg-settings .app.collapsed ~ .side-handle{left:61px}
.pg-settings .side-handle .ic-expand{display:none}
.pg-settings .app.collapsed ~ .side-handle .ic-collapse{display:none}
.pg-settings .app.collapsed ~ .side-handle .ic-expand{display:block}
.pg-settings .menu{position:fixed;z-index:200;width:300px;background:#10101c;border:1px solid var(--border-strong);border-radius:14px;box-shadow:0 24px 60px rgba(0,0,0,.55);padding:8px;display:none}
.pg-settings .menu.show{display:block;animation:menupop .18s ease}
@keyframes menupop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.pg-settings .menu-head{padding:10px 12px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;margin-bottom:6px}
.pg-settings .menu-head .mh-t{font-size:15px;font-weight:600}.pg-settings .menu-head img{width:42px;height:42px;border-radius:50%;object-fit:cover}.pg-settings .menu-head .e{font-size:12.5px;color:var(--muted);margin-top:2px}
.pg-settings .menu-item{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:9px;color:var(--text);font-size:14px;cursor:pointer;text-decoration:none}
.pg-settings .menu-item:hover{background:rgba(255,255,255,.05)}.pg-settings .menu-item svg{width:17px;height:17px;color:var(--muted)}.pg-settings .menu-item.danger,.pg-settings .menu-item.danger svg{color:#ef6b6b}
.pg-settings .menu-div{height:1px;background:var(--border);margin:6px 8px}
.pg-settings .noti{display:flex;gap:11px;padding:11px 12px;border-radius:9px;cursor:pointer}.pg-settings .noti:hover{background:rgba(255,255,255,.04)}
.pg-settings .noti .nic{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.pg-settings .noti .nic svg{width:16px;height:16px}
.pg-settings .noti .nt{font-size:13.5px}.pg-settings .noti .ntime{font-size:12px;color:var(--muted);margin-top:2px}
.pg-settings .menu-foot{text-align:center;padding:9px;border-top:1px solid var(--border);margin-top:4px}.pg-settings .menu-foot a{color:var(--indigo-soft);font-size:13px;text-decoration:none}

.pg-settings /* MAIN */
.main{flex:1;padding:22px 26px;min-width:0;display:flex;flex-direction:column;overflow:hidden}
.pg-settings .settings-grid{flex:1;min-height:0;display:grid;grid-template-columns:1fr 1.15fr;grid-template-rows:1fr 1fr;gap:22px}
.pg-settings .scard{border:1px solid var(--border-strong);border-radius:20px;padding:20px;display:flex;flex-direction:column;min-height:0;overflow:hidden;
  background:radial-gradient(130% 120% at 0% 0%,rgba(79,70,229,.10),rgba(79,70,229,0) 55%),var(--panel)}
.pg-settings .scard h2{font-size:20px;font-weight:600}
.pg-settings .scard .desc{font-size:13px;color:var(--muted);margin-top:5px;margin-bottom:14px}

.pg-settings /* change password */
.field{margin-bottom:11px}
.pg-settings .field label{display:block;font-size:13px;color:var(--muted);margin-bottom:7px}
.pg-settings .pwfield{display:flex;align-items:center;gap:10px;height:44px;border:1px solid var(--border-strong);border-radius:11px;padding:0 14px;background:rgba(0,0,0,.25)}
.pg-settings .pwfield input{flex:1;min-width:0;background:none;border:none;outline:none;color:var(--text);font-family:inherit;font-size:14px;letter-spacing:1px}
.pg-settings .pwfield .eye{background:none;border:none;color:var(--muted);cursor:pointer;display:flex}
.pg-settings .pwfield .eye svg{width:18px;height:18px}
.pg-settings .strength{display:flex;align-items:center;gap:8px;margin:8px 0 2px}
.pg-settings .strength .bar{flex:1;height:5px;border-radius:4px;background:rgba(255,255,255,.08)}
.pg-settings .strength .bar.on{background:var(--green)}
.pg-settings .strength .lbl{font-size:13px;color:var(--green);font-weight:500}
.pg-settings .pw-actions{display:flex;align-items:center;gap:22px;margin-top:auto;padding-top:14px}
.pg-settings .btn-update{background:linear-gradient(135deg,#6366f1,#4f46e5);color:#fff;border:none;padding:12px 26px;border-radius:11px;font-family:inherit;font-size:14.5px;font-weight:600;cursor:pointer;box-shadow:0 8px 22px rgba(79,70,229,.35)}
/* fancy scroll + dissolve on boxes */
.pg-settings .dev-list,.pg-settings .tbl,.pg-settings .trash-table{scrollbar-width:thin;scrollbar-color:rgba(124,124,240,.5) transparent;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 14px,#000 calc(100% - 18px),transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 14px,#000 calc(100% - 18px),transparent 100%)}
.pg-settings .dev-list::-webkit-scrollbar,.pg-settings .tbl::-webkit-scrollbar,.pg-settings .trash-table::-webkit-scrollbar{width:8px}
.pg-settings .dev-list::-webkit-scrollbar-thumb,.pg-settings .tbl::-webkit-scrollbar-thumb,.pg-settings .trash-table::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#6366f1,#4f46e5);border-radius:8px;border:2px solid transparent;background-clip:padding-box}
.pg-settings .link-purple{color:var(--indigo-soft);font-size:14px;text-decoration:none;cursor:pointer}
.pg-settings .link-purple:hover{text-decoration:underline}

.pg-settings /* devices */
.dev-list{display:flex;flex-direction:column;overflow:auto}
.pg-settings .dev{display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--border)}
.pg-settings .dev:last-child{border-bottom:none}
.pg-settings .dev .di{width:42px;height:42px;border-radius:11px;background:rgba(255,255,255,.05);display:flex;align-items:center;justify-content:center;color:#cfcfe0;flex-shrink:0}
.pg-settings .dev .di svg{width:21px;height:21px}
.pg-settings .dev .info{flex:1;min-width:0}
.pg-settings .dev .nm{font-size:15px;font-weight:600;display:flex;align-items:center;gap:9px}
.pg-settings .dev .nm .tag{font-size:11.5px;font-weight:500;padding:3px 9px;border-radius:7px;background:rgba(96,165,250,.16);color:#7cbaff}
.pg-settings .dev .meta{font-size:12.5px;color:var(--muted);margin-top:3px}
.pg-settings .dev .right{text-align:right;flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.pg-settings .dev .ago{font-size:12.5px;color:var(--muted)}
.pg-settings .dev .active{font-size:13px;color:var(--green);font-weight:500}
.pg-settings .btn-logout{font-size:13px;color:#f06b6b;background:none;border:1px solid rgba(240,107,107,.4);padding:5px 14px;border-radius:8px;cursor:pointer}
.pg-settings .btn-logout:hover{background:rgba(240,107,107,.1)}

/* preferences (calendar / language / theme) */
.pg-settings .prefs{display:flex;flex-direction:column}
.pg-settings .pref{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0;border-bottom:1px solid var(--border)}
.pg-settings .pref:last-child{border-bottom:none}
.pg-settings .pref .pl{font-size:15px;font-weight:600}
.pg-settings .pref .pd{font-size:12.5px;color:var(--muted);margin-top:3px}
.pg-settings .pref select{appearance:none;-webkit-appearance:none;background:var(--panel);border:1px solid var(--border-strong);color:var(--text);font-family:inherit;font-size:14px;padding:10px 36px 10px 13px;border-radius:10px;cursor:pointer;min-width:180px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238b8b9a' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}
.pg-settings .pref select:focus{outline:none;border-color:var(--indigo-soft)}
.pg-settings .seg{display:inline-flex;background:var(--panel);border:1px solid var(--border-strong);border-radius:11px;padding:3px;gap:3px}
.pg-settings .seg button{border:none;background:transparent;color:var(--muted);font-family:inherit;font-size:13.5px;font-weight:500;padding:8px 15px;border-radius:8px;cursor:pointer;display:inline-flex;align-items:center;gap:7px}
.pg-settings .seg button svg{width:16px;height:16px}
.pg-settings .seg button.active{background:var(--indigo);color:#fff}

/* light theme — !important overrides each page's body-level vars regardless of source order */
body[data-theme="light"]{
  --bg:#eef0f6 !important;--sidebar:#ffffff !important;--card:#ffffff !important;--panel:#f4f5fa !important;
  --border:rgba(17,17,34,.10) !important;--border-strong:rgba(17,17,34,.16) !important;
  --text:#14141f !important;--muted:#5c5c6b !important;--muted-2:#7a7a88 !important;
  --mod-card-hover:#f4f5fa !important;
}

/* ===== light theme: components that HARDCODE dark colors (so they don't follow the
   variable flip above) — dropdown menus, dialogs/modals, premium "glow" cards ===== */
/* dropdown menus (notifications / account) */
body[data-theme="light"] .menu,
body[data-theme="light"] .afx-tb-menu{background:#fff !important;box-shadow:0 20px 50px rgba(17,17,34,.18) !important}
body[data-theme="light"] .menu-item:hover,
body[data-theme="light"] .afx-tb-mi:hover,
body[data-theme="light"] .noti:hover,
body[data-theme="light"] .afx-tb-noti:hover{background:rgba(17,17,34,.05) !important}

/* sidebar collapse toggle (round handle, bottom-left) hardcodes a dark fill on every page */
body[data-theme="light"] .side-handle{background:#fff !important;color:var(--muted) !important}
body[data-theme="light"] .side-handle:hover{background:#f4f5fa !important;color:var(--text) !important}

/* premium "glow" accent cards → light surface so the (now dark) text is readable */
body[data-theme="light"] .card.glow{
  background:radial-gradient(120% 130% at 100% 0%,rgba(99,102,241,.13),rgba(99,102,241,0) 55%),#fff !important;
}
/* 3 top cards: light drifting purple gradient (matches the design).
   NB: .pg-dashboard sits ON <body>, so combine the attr + class on the same element (no space). */
body[data-theme="light"].pg-dashboard .grid:not(.bottom) > .card{
  background:
    linear-gradient(180deg,rgba(167,139,250,.22) 0%,rgba(167,139,250,0) 25%),
    #ffffff !important;
  background-size:100% 200%,100% 100% !important;
}

/* dialogs / modals (each ships its own inline dark styles) */
body[data-theme="light"] .dialog,
body[data-theme="light"] .merge-card,
body[data-theme="light"] .afx-pd-card,
body[data-theme="light"] .afx-np,
body[data-theme="light"] .afx-ep,
body[data-theme="light"] .afx-del{
  background:#fff !important;color:var(--text) !important;
  border-color:var(--border-strong) !important;box-shadow:0 24px 60px rgba(17,17,34,.2) !important;
}
/* dialog inputs / selects / cropper viewport */
body[data-theme="light"] .afx-np-fld input,
body[data-theme="light"] .afx-ep-fld input,
body[data-theme="light"] .afx-np-phone select,
body[data-theme="light"] .afx-ep-phone select,
body[data-theme="light"] .afx-crop-vp{
  background:#f4f5fa !important;border-color:var(--border-strong) !important;color:var(--text) !important;
}
/* dialog close button + avatar camera badge borders */
body[data-theme="light"] .afx-pd-x{border-color:var(--border-strong) !important;color:var(--muted) !important}
body[data-theme="light"] .afx-pd-x:hover{background:rgba(17,17,34,.05) !important;color:var(--text) !important}
body[data-theme="light"] .afx-pd-cam{border-color:#fff !important}

/* ---- album / patient module: dialogs, popups, hovers, add-tiles, template icons ---- */
/* dialogs + the media "toggle" popup menu */
body[data-theme="light"] .afx-up,
body[data-theme="light"] .afx-tg,
body[data-theme="light"] .mt-menu-pop{
  background:#fff !important;color:var(--text) !important;
  border-color:var(--border-strong) !important;box-shadow:0 24px 60px rgba(17,17,34,.2) !important;
}
/* inputs / selects / upload tiles / drop zone / angle-location boxes inside them */
body[data-theme="light"] .afx-up-fld select,
body[data-theme="light"] .afx-tg-search input,
body[data-theme="light"] .afx-up-tile,
body[data-theme="light"] .afx-up-drop,
body[data-theme="light"] .afx-arg{
  background:#f4f5fa !important;border-color:var(--border-strong) !important;color:var(--text) !important;
}
body[data-theme="light"] .afx-arg-ic{color:#4f46e5 !important}
body[data-theme="light"] .afx-arg.sel{background:rgba(99,102,241,.14) !important;border-color:#6366f1 !important;color:var(--text) !important}
/* tag pills + chips */
body[data-theme="light"] .afx-tg-pill,
body[data-theme="light"] .afx-tagchip{background:#f1f1f7 !important;border-color:var(--border-strong) !important;color:var(--text) !important}
body[data-theme="light"] .afx-tg-pill.sel{background:#6366f1 !important;border-color:#6366f1 !important;color:#fff !important}
body[data-theme="light"] .afx-up-x,
body[data-theme="light"] .afx-tg-x{border-color:var(--border-strong) !important;color:var(--muted) !important}

/* (1) patient + album card hovers were a hardcoded dark fill */
body[data-theme="light"] .pcard:hover,
body[data-theme="light"] .acard:hover{background:#f4f5fa !important}

/* (2) "Add Photo" / "Add Before" tiles were transparent → give them a surface */
body[data-theme="light"] .add-photo{background:#f4f5fa !important}

/* (3) template/category picker icons: bigger, and forced to dark in light theme so the
   category is visible (the API icons bake in light stroke/fill, not currentColor) */
.pg-patient .tpl svg,.pg-patient .tpl img,.pg-patient .tpl span{width:72px !important;height:72px !important}
.pg-patient .tpl span{display:inline-flex !important;align-items:center;justify-content:center}
.pg-patient .tpl span svg{width:100% !important;height:100% !important}
.pg-patient .tpl img{object-fit:contain}
body[data-theme="light"] .tpl{background:#f4f5fa !important;color:#14141f !important}
body[data-theme="light"] .tpl:hover{background:#ecedf6 !important}
body[data-theme="light"] .tpl svg,
body[data-theme="light"] .tpl svg *{color:#14141f}
body[data-theme="light"] .tpl svg [stroke]:not([stroke="none"]),
body[data-theme="light"] .tpl svg[stroke]:not([stroke="none"]){stroke:#14141f !important}
body[data-theme="light"] .tpl svg [fill]:not([fill="none"]),
body[data-theme="light"] .tpl svg[fill]:not([fill="none"]){fill:#14141f !important}
/* image-based category icons: render them as a black silhouette */
body[data-theme="light"] .tpl img{filter:brightness(0) saturate(100%) !important}

/* Persian UI font — applied whenever the interface language is Persian (html lang="fa") */
@font-face{font-family:'YekanBakh';src:url('../fonts/YekanBakhFaNum-Regular.woff') format('woff');font-weight:100 900;font-style:normal;font-display:swap}
html[lang="fa"] body,
html[lang="fa"] input,
html[lang="fa"] button,
html[lang="fa"] select,
html[lang="fa"] textarea{font-family:'YekanBakh','Geist',system-ui,-apple-system,sans-serif !important}

/* RTL fixes — sidebar sits on the right, so its divider and the collapse handle flip sides */
html[dir="rtl"] .sidebar{border-right:none;border-left:1px solid var(--border)}
html[dir="rtl"] .side-handle{left:auto;right:201px;transition:right .25s ease}
html[dir="rtl"] .app.collapsed ~ .side-handle{left:auto;right:61px}
html[dir="rtl"] .side-handle svg{transform:scaleX(-1)}
/* keep the AfterX brand logo left-to-right ("After X") in every language */
html[dir="rtl"] .logo,html[dir="rtl"] .logo-text{direction:ltr}

/* Legacy AI tools (rhinoplasty / filler / eyebrow / hair / skin) are LTR canvas editors:
   in RTL the editor flex flips the canvas/panel and — critically — mirrors the range
   sliders (drag reversed). Force the editor + sliders LTR so the tools work correctly;
   the panel text stays RTL-aligned. */
html[dir="rtl"] .editor{direction:ltr}
html[dir="rtl"] .fpanel{direction:rtl}
html[dir="rtl"] .rng{direction:ltr}

/* "Save to album" button on the legacy AI tools (filler / rhino / eyebrow / hair).
   The body[class*="pg-"] prefix gives it enough specificity to survive each tool's
   nested `body.pg-* *{padding:0}` reset. */
body[class*="pg-"] .btn-save-album{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:12px;border-radius:10px;border:none;background:linear-gradient(135deg,#6366f1,#4f46e5);color:#fff;font-family:inherit;font-weight:600;font-size:13.5px;cursor:pointer;transition:.15s;box-shadow:0 6px 18px rgba(79,70,229,.35)}
body[class*="pg-"] .btn-save-album:hover{filter:brightness(1.1)}
body[class*="pg-"] .btn-save-album:disabled{opacity:.55;cursor:default;box-shadow:none}
body[class*="pg-"] .btn-save-album svg{width:17px;height:17px}

.pg-settings /* table (login activity) */
.tbl{flex:1;min-height:0;overflow:auto}
.pg-settings .tbl-head,.pg-settings .tbl-row{display:grid;grid-template-columns:1.3fr 1.2fr 1.2fr;gap:14px;align-items:start}
.pg-settings .tbl-head{color:var(--muted);font-size:13.5px;padding:0 0 14px}
.pg-settings .tbl-row{padding:16px 0;border-bottom:1px solid var(--border);font-size:14px}
.pg-settings .tbl-row:last-child{border-bottom:none}
.pg-settings .tbl-row .sub{font-size:12.5px;color:var(--muted);margin-top:3px}
.pg-settings .dt{display:flex;gap:10px}

.pg-settings /* trash */
.tabs{display:flex;gap:8px;background:rgba(255,255,255,.03);padding:5px;border-radius:11px;margin-bottom:14px;align-self:flex-start}
.pg-settings .tabs button{border:none;background:none;color:var(--muted);font-family:inherit;font-size:13.5px;padding:8px 16px;border-radius:8px;cursor:pointer}
.pg-settings .tabs button.active{background:var(--indigo);color:#fff}
.pg-settings .trash-table{flex:1;min-height:0;overflow:auto}
.pg-settings .tr-head,.pg-settings .tr-row{display:grid;grid-template-columns:1.4fr 1fr 1fr 80px;gap:14px;align-items:center}
.pg-settings .tr-head{color:var(--muted);font-size:13.5px;padding:0 0 12px;border-bottom:1px solid var(--border)}
.pg-settings .tr-row{padding:11px 0;border-bottom:1px solid var(--border);font-size:14px}
.pg-settings .tr-row:last-child{border-bottom:none}
.pg-settings .tr-name{display:flex;align-items:center;gap:11px}
.pg-settings .tr-name img{width:34px;height:34px;border-radius:50%;object-fit:cover;background:#222}
.pg-settings .tr-restore{width:32px;height:32px;border:none;background:none;color:var(--muted);cursor:pointer;border-radius:8px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.pg-settings .tr-restore:hover{color:var(--text);background:rgba(127,127,140,.14)}
.pg-settings .tr-restore.tr-del:hover{color:#f06b6b;background:rgba(240,107,107,.12)}
.pg-settings .tr-restore:disabled{opacity:.5;cursor:default}
.pg-settings .tr-restore svg{width:17px;height:17px}

@media (max-width:1200px){.pg-settings .settings-grid{grid-template-columns:1fr;grid-template-rows:none;overflow:auto}.pg-settings .scard{min-height:340px}.pg-settings .sidebar{}}

/* ===== upgrade-plan.html ===== */

@font-face{font-family:'Geist';src:url('../fonts/Geist-VariableFont_wght.ttf') format('truetype-variations');font-weight:100 900;font-style:normal;font-display:swap}
body.pg-upgrade-plan{
  --bg:#070710;--sidebar:#08080f;--card:#0e0e1a;--panel:#0c0c18;
  --border:rgba(255,255,255,.06);--border-strong:rgba(255,255,255,.10);
  --text:#f4f4f6;--muted:#8b8b9a;--muted-2:#6c6c7a;
  --indigo:#4f46e5;--indigo-soft:#7c7cf0;--green:#22c55e;--blue:#60a5fa;
}
*{box-sizing:border-box;margin:0;padding:0}
.pg-upgrade-plan a,.pg-upgrade-plan button{transition:background-color .22s ease,border-color .22s ease,color .18s ease,box-shadow .2s ease}
.pg-upgrade-plan .plan,.pg-upgrade-plan .coupon input{transition:background-color .22s ease,border-color .22s ease,transform .2s ease}
html,body.pg-upgrade-plan{height:100%}
body.pg-upgrade-plan{font-family:'Geist',system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;font-feature-settings:"ss01";height:100vh;overflow:hidden}
.pg-upgrade-plan .app{display:flex;height:100vh;overflow:hidden}

.pg-upgrade-plan /* SIDEBAR */
.sidebar{width:240px;flex-shrink:0;background:var(--sidebar);border-right:1px solid var(--border);padding:20px 22px;display:flex;flex-direction:column;overflow:hidden}
.pg-upgrade-plan .logo{font-size:27px;font-weight:600;letter-spacing:-.5px;display:flex;align-items:center;justify-content:space-between;height:45px;margin:0 -22px 20px;padding:0 22px 0 28px;border-bottom:1px solid var(--border)}
.pg-upgrade-plan .logo .x{background:linear-gradient(135deg,#6366f1,#a78bfa);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:700}
.pg-upgrade-plan .logo-text{display:flex;align-items:center;gap:4px}
.pg-upgrade-plan .logo-actions{display:flex;align-items:center;gap:10px}
.pg-upgrade-plan .logo-actions .lbell{width:34px;height:34px;border-radius:10px;border:1px solid var(--border-strong);background:transparent;color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer}
.pg-upgrade-plan .logo-actions .lbell svg{width:18px;height:18px}
.pg-upgrade-plan .logo-actions .lav{width:34px;height:34px;border-radius:50%;object-fit:cover;cursor:pointer;background:#222}
.pg-upgrade-plan .nav-label{font-size:12.5px;color:var(--muted-2);margin:0 0 12px 10px}
.pg-upgrade-plan .nav{display:flex;flex-direction:column;gap:3px}
.pg-upgrade-plan .nav a{display:flex;align-items:center;gap:14px;padding:10px 16px;border-radius:11px;color:var(--muted);text-decoration:none;font-size:15px;transition:.15s}
.pg-upgrade-plan .nav a svg{width:20px;height:20px;stroke-width:1.7;flex-shrink:0}
.pg-upgrade-plan .nav a:hover{color:var(--text);background:rgba(255,255,255,.03)}
.pg-upgrade-plan .nav a.active{background:var(--indigo);color:#fff;font-weight:500;box-shadow:0 6px 20px rgba(79,70,229,.35)}
.pg-upgrade-plan .upgrade-card{margin-top:auto;background:rgba(255,255,255,.02);border:1px solid var(--border);border-radius:16px;padding:16px}
.pg-upgrade-plan .upgrade-card .head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:6px}
.pg-upgrade-plan .upgrade-card h4{font-size:16px;font-weight:600;color:var(--indigo-soft)}
.pg-upgrade-plan .upgrade-card .crown{width:32px;height:32px;border-radius:10px;background:radial-gradient(circle at 30% 30%,#3a2f14,#1b1607);display:flex;align-items:center;justify-content:center;font-size:16px}
.pg-upgrade-plan .upgrade-card p{font-size:13px;color:var(--muted);line-height:1.45;margin-bottom:14px}
.pg-upgrade-plan .upgrade-card button{background:var(--indigo);color:#fff;border:none;padding:10px 20px;border-radius:10px;font-family:inherit;font-size:14px;font-weight:500;cursor:pointer}
.pg-upgrade-plan .side-bottom{padding-top:18px;display:flex;flex-direction:column;gap:14px}
.pg-upgrade-plan .side-bottom a{display:flex;align-items:center;gap:14px;color:var(--muted);text-decoration:none;font-size:15px;padding-left:6px}
.pg-upgrade-plan .side-bottom a svg{width:19px;height:19px;stroke-width:1.7}

.pg-upgrade-plan /* MAIN */
.main{flex:1;padding:20px 26px;min-width:0;display:flex;flex-direction:column;overflow:hidden}
.pg-upgrade-plan .page-head{display:flex;align-items:flex-start;gap:16px;flex-shrink:0;margin-bottom:16px}
.pg-upgrade-plan .page-head h1{font-size:24px;font-weight:600}
.pg-upgrade-plan .page-head p{color:var(--muted);font-size:14px;margin-top:5px}
.pg-upgrade-plan .ph-right{margin-left:auto;display:flex;align-items:center;gap:16px}
.pg-upgrade-plan .bill-toggle{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--muted)}
.pg-upgrade-plan .bill-toggle .on{color:var(--text);font-weight:500}
.pg-upgrade-plan .switch{width:44px;height:24px;border-radius:14px;background:rgba(255,255,255,.15);position:relative;cursor:pointer;flex-shrink:0}
.pg-upgrade-plan .switch.yr{background:var(--indigo)}
.pg-upgrade-plan .switch::after{content:"";position:absolute;width:18px;height:18px;border-radius:50%;background:#fff;top:3px;left:3px;transition:left .2s}
.pg-upgrade-plan .switch.yr::after{left:23px}
.pg-upgrade-plan .save-badge{background:rgba(34,197,94,.16);color:#5fd98a;font-size:12px;padding:4px 10px;border-radius:8px}
.pg-upgrade-plan .compare{height:42px;padding:0 18px;border:1px solid var(--border-strong);border-radius:11px;background:transparent;color:#fff;font-family:inherit;font-size:14px;cursor:pointer}

.pg-upgrade-plan .layout{flex:1;min-height:0;display:grid;grid-template-columns:1fr 360px;gap:20px;overflow:hidden}
.pg-upgrade-plan .col{min-height:0;overflow:hidden;padding:10px 4px 0 2px}

.pg-upgrade-plan .plans{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.pg-upgrade-plan .plan{position:relative;border:1px solid var(--border);border-radius:18px;padding:16px 18px;background:var(--card);display:flex;flex-direction:column;cursor:pointer}
.pg-upgrade-plan .plan.featured{border-color:var(--indigo);background:radial-gradient(120% 120% at 100% 0%,rgba(79,70,229,.22),rgba(79,70,229,0) 55%),var(--card);box-shadow:0 0 0 1px var(--indigo)}
.pg-upgrade-plan .plan .picn{width:42px;height:42px;border-radius:12px;background:rgba(255,255,255,.05);display:flex;align-items:center;justify-content:center;color:#cfcfe0;margin-bottom:12px}
.pg-upgrade-plan .plan.featured .picn{background:linear-gradient(135deg,#f59e42,#d97706);color:#fff}
.pg-upgrade-plan .plan .picn svg{width:22px;height:22px}
.pg-upgrade-plan .plan h3{font-size:18px;font-weight:600}
.pg-upgrade-plan .plan .blurb{font-size:12.5px;color:var(--muted);margin-top:4px;line-height:1.45;min-height:34px}
.pg-upgrade-plan .plan .price{font-size:28px;font-weight:600;letter-spacing:-1px;margin-top:10px}
.pg-upgrade-plan .plan .price span{font-size:14px;color:var(--muted);font-weight:400}
.pg-upgrade-plan .plan .annual{font-size:12.5px;color:var(--muted);margin-top:3px}
.pg-upgrade-plan .plan .choose{margin:12px 0;height:40px;border-radius:11px;border:1px solid var(--border-strong);background:#18183f;color:#fff;font-family:inherit;font-size:14px;font-weight:500;cursor:pointer}
.pg-upgrade-plan .plan.featured .choose{background:var(--indigo);border-color:transparent;box-shadow:0 8px 22px rgba(79,70,229,.4)}
.pg-upgrade-plan .plan .feats{display:flex;flex-direction:column;gap:8px;flex:1}
.pg-upgrade-plan .plan .feats li{display:flex;align-items:flex-start;gap:9px;font-size:13px;list-style:none}
.pg-upgrade-plan .plan .feats li svg{width:15px;height:15px;color:#5fd98a;flex-shrink:0;margin-top:1px}
.pg-upgrade-plan .plan .guarantee{display:flex;align-items:center;gap:9px;border-top:1px solid var(--border);margin-top:12px;padding-top:11px;font-size:12.5px;color:var(--muted)}
.pg-upgrade-plan .plan .guarantee svg{width:16px;height:16px}

.pg-upgrade-plan .feat3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;border:1px solid var(--border);border-radius:16px;padding:18px 22px;background:var(--card)}
.pg-upgrade-plan .f3{display:flex;gap:13px;align-items:flex-start}
.pg-upgrade-plan .f3 .ic{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.pg-upgrade-plan .f3 .ic svg{width:18px;height:18px}
.pg-upgrade-plan .f3 h4{font-size:14px;font-weight:600}
.pg-upgrade-plan .f3 p{font-size:12.5px;color:var(--muted);margin-top:3px;line-height:1.45}

.pg-upgrade-plan /* right */
.rcard{border:1px solid var(--border-strong);border-radius:18px;padding:20px;
  background:radial-gradient(120% 90% at 50% 0%,rgba(79,70,229,.10),rgba(79,70,229,0) 55%),var(--card)}
.pg-upgrade-plan .rcard h3{font-size:18px;font-weight:600;margin-bottom:16px}
.pg-upgrade-plan .sel-plan{display:flex;align-items:center;gap:13px;border:1px solid var(--border);border-radius:13px;padding:12px;margin-bottom:13px;background:rgba(255,255,255,.02)}
.pg-upgrade-plan .sel-plan .pic{width:42px;height:42px;border-radius:11px;background:linear-gradient(135deg,#f59e42,#d97706);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.pg-upgrade-plan .sel-plan .pic svg{width:20px;height:20px}
.pg-upgrade-plan .sel-plan .l{font-size:12.5px;color:var(--muted)}
.pg-upgrade-plan .sel-plan .v{font-size:16px;font-weight:600;margin-top:2px}
.pg-upgrade-plan .sel-plan .cyc{font-size:12px;color:var(--muted);margin-top:4px;display:flex;align-items:center;gap:7px}
.pg-upgrade-plan .os .line{display:flex;justify-content:space-between;font-size:14px;margin-bottom:11px}
.pg-upgrade-plan .os .line .k{color:var(--muted);display:flex;align-items:center;gap:6px}
.pg-upgrade-plan .os .line .k svg{width:14px;height:14px;opacity:.6}
.pg-upgrade-plan .os .total{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--border);padding-top:13px;margin-top:4px;margin-bottom:14px}
.pg-upgrade-plan .os .total .k{font-size:15px;font-weight:600}
.pg-upgrade-plan .os .total .v{font-size:24px;font-weight:600}
.pg-upgrade-plan .os .total .v small{font-size:13px;color:var(--muted);font-weight:400;margin-left:4px}
.pg-upgrade-plan .coupon h4{font-size:15px;font-weight:600;margin-bottom:12px}
.pg-upgrade-plan .coupon .row{display:flex;gap:10px;margin-bottom:14px}
.pg-upgrade-plan .coupon input{flex:1;min-width:0;height:46px;background:rgba(255,255,255,.03);border:1px solid var(--border-strong);border-radius:11px;padding:0 14px;color:#fff;font-family:inherit;font-size:14px}
.pg-upgrade-plan .coupon input::placeholder{color:var(--muted)}
.pg-upgrade-plan .coupon .apply{height:46px;padding:0 22px;border:1px solid var(--border-strong);border-radius:11px;background:transparent;color:#fff;font-family:inherit;font-size:14px;cursor:pointer}
.pg-upgrade-plan .autorenew{display:flex;align-items:center;justify-content:space-between;font-size:14.5px;margin-bottom:14px}
.pg-upgrade-plan .btn-pay{width:100%;display:flex;align-items:center;justify-content:center;gap:9px;background:var(--indigo);color:#fff;border:none;padding:15px;border-radius:12px;font-family:inherit;font-size:15px;font-weight:600;cursor:pointer;box-shadow:0 10px 26px rgba(79,70,229,.4)}
.pg-upgrade-plan .btn-pay svg{width:16px;height:16px}
.pg-upgrade-plan .pay-note{display:flex;align-items:center;justify-content:center;gap:7px;color:var(--muted);font-size:13px;margin-top:14px}
.pg-upgrade-plan .pay-note svg{width:14px;height:14px}
.pg-upgrade-plan .pay-terms{text-align:center;color:var(--muted-2);font-size:12.5px;margin-top:14px;line-height:1.5}
.pg-upgrade-plan .pay-terms a{color:var(--indigo-soft);text-decoration:none}

.pg-upgrade-plan /* plan hover glow */
.plan{transition:border-color .3s ease,box-shadow .35s ease,transform .25s ease,background-color .25s ease}
.pg-upgrade-plan .plan:hover{border-color:var(--indigo-soft);box-shadow:0 0 0 1px rgba(124,124,240,.55),0 0 28px rgba(124,124,240,.3);transform:translateY(-4px)}
.pg-upgrade-plan .plan.featured:hover{box-shadow:0 0 0 1px var(--indigo),0 0 34px rgba(79,70,229,.45);transform:translateY(-4px)}

.pg-upgrade-plan /* back link + toggle + menus */
.back-link{display:inline-flex;align-items:center;gap:8px;color:var(--muted);text-decoration:none;font-size:15px}
.pg-upgrade-plan .back-link:hover{color:var(--text)}
.pg-upgrade-plan .back-link svg{width:17px;height:17px}
.pg-upgrade-plan .main-top{display:flex;align-items:center;gap:14px;flex-shrink:0;margin-bottom:12px}
.pg-upgrade-plan .sidebar{transition:width .25s ease}
.pg-upgrade-plan .side-handle{position:fixed;bottom:17px;left:201px;z-index:60;width:28px;height:28px;border-radius:50%;background:#15151f;border:1px solid var(--border-strong);color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:left .25s ease}
.pg-upgrade-plan .side-handle:hover{color:#fff;background:#1d1d2a}
.pg-upgrade-plan .side-handle svg{width:15px;height:15px}
.pg-upgrade-plan .app.collapsed ~ .side-handle{left:61px}
.pg-upgrade-plan .side-handle .ic-expand{display:none}
.pg-upgrade-plan .app.collapsed ~ .side-handle .ic-collapse{display:none}
.pg-upgrade-plan .app.collapsed ~ .side-handle .ic-expand{display:block}
.pg-upgrade-plan .app.collapsed .sidebar{width:76px}
.pg-upgrade-plan .app.collapsed .logo{justify-content:center;padding:0}
.pg-upgrade-plan .app.collapsed .logo-after,.pg-upgrade-plan .app.collapsed .logo-actions,.pg-upgrade-plan .app.collapsed .nav-label,.pg-upgrade-plan .app.collapsed .upgrade-card{display:none}
.pg-upgrade-plan .app.collapsed .nav a,.pg-upgrade-plan .app.collapsed .side-bottom a{justify-content:center;gap:0;padding-left:0;font-size:0}
.pg-upgrade-plan .app.collapsed .nav a{padding:11px 0}
.pg-upgrade-plan .app.collapsed .nav a svg,.pg-upgrade-plan .app.collapsed .side-bottom a svg{font-size:initial}
.pg-upgrade-plan .lbell,.pg-upgrade-plan .lav{cursor:pointer}
.pg-upgrade-plan .menu{position:fixed;z-index:200;width:300px;background:#10101c;border:1px solid var(--border-strong);border-radius:14px;box-shadow:0 24px 60px rgba(0,0,0,.55);padding:8px;display:none}
.pg-upgrade-plan .menu.show{display:block;animation:menupop .18s ease}
@keyframes menupop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.pg-upgrade-plan .menu-head{padding:10px 12px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;margin-bottom:6px}
.pg-upgrade-plan .menu-head .mh-t{font-size:15px;font-weight:600}
.pg-upgrade-plan .menu-head img{width:42px;height:42px;border-radius:50%;object-fit:cover}
.pg-upgrade-plan .menu-head .e{font-size:12.5px;color:var(--muted);margin-top:2px}
.pg-upgrade-plan .menu-item{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:9px;color:var(--text);font-size:14px;cursor:pointer;text-decoration:none}
.pg-upgrade-plan .menu-item:hover{background:rgba(255,255,255,.05)}
.pg-upgrade-plan .menu-item svg{width:17px;height:17px;color:var(--muted)}
.pg-upgrade-plan .menu-item.danger,.pg-upgrade-plan .menu-item.danger svg{color:#ef6b6b}
.pg-upgrade-plan .menu-div{height:1px;background:var(--border);margin:6px 8px}
.pg-upgrade-plan .noti{display:flex;gap:11px;padding:11px 12px;border-radius:9px;cursor:pointer}
.pg-upgrade-plan .noti:hover{background:rgba(255,255,255,.04)}
.pg-upgrade-plan .noti .nic{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.pg-upgrade-plan .noti .nic svg{width:16px;height:16px}
.pg-upgrade-plan .noti .nt{font-size:13.5px}
.pg-upgrade-plan .noti .ntime{font-size:12px;color:var(--muted);margin-top:2px}
.pg-upgrade-plan .menu-foot{text-align:center;padding:9px;border-top:1px solid var(--border);margin-top:4px}
.pg-upgrade-plan .menu-foot a{color:var(--indigo-soft);font-size:13px;text-decoration:none}

@media (max-width:1300px){.pg-upgrade-plan .layout{grid-template-columns:1fr}.pg-upgrade-plan .col.right-col{order:-1}}
@media (max-width:1050px){.pg-upgrade-plan .sidebar{width:240px}.pg-upgrade-plan .plans{grid-template-columns:1fr}.pg-upgrade-plan .feat3{grid-template-columns:1fr}}
@media (max-width:768px){
  /* stack the header so the title + description run full-width (not word-wrapped) */
  .pg-upgrade-plan .page-head{flex-direction:column;align-items:stretch;gap:14px}
  .pg-upgrade-plan .ph-right{margin-left:0;flex-wrap:wrap}
  /* hide the Compare Plans button on mobile */
  .pg-upgrade-plan .compare{display:none}
}

/* ===== usage.html ===== */

@font-face{font-family:'Geist';src:url('../fonts/Geist-VariableFont_wght.ttf') format('truetype-variations');font-weight:100 900;font-style:normal;font-display:swap}
body.pg-usage{
  --bg:#070710;--sidebar:#08080f;--card:#0e0e1a;--panel:#0c0c18;
  --border:rgba(255,255,255,.06);--border-strong:rgba(255,255,255,.10);
  --text:#f4f4f6;--muted:#8b8b9a;--muted-2:#6c6c7a;
  --indigo:#4f46e5;--indigo-soft:#7c7cf0;--green:#22c55e;--blue:#60a5fa;--orange:#f59e42;--violet:#a78bfa;--cyan:#38bdf8;
}
*{box-sizing:border-box;margin:0;padding:0}
.pg-usage a,.pg-usage button{transition:background-color .22s ease,border-color .22s ease,color .18s ease,box-shadow .2s ease}
html,body.pg-usage{height:100%}
body.pg-usage{font-family:'Geist',system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;font-feature-settings:"ss01";height:100vh;overflow:hidden}
.pg-usage .app{display:flex;height:100vh;overflow:hidden}

.pg-usage /* SIDEBAR */
.sidebar{width:240px;flex-shrink:0;background:var(--sidebar);border-right:1px solid var(--border);padding:20px 22px;display:flex;flex-direction:column;overflow:hidden;transition:width .25s ease}
.pg-usage .logo{font-size:27px;font-weight:600;letter-spacing:-.5px;display:flex;align-items:center;justify-content:space-between;height:45px;margin:0 -22px 20px;padding:0 22px 0 28px;border-bottom:1px solid var(--border)}
.pg-usage .logo .x{background:linear-gradient(135deg,#6366f1,#a78bfa);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:700}
.pg-usage .logo-text{display:flex;align-items:center;gap:4px}
.pg-usage .logo-actions{display:flex;align-items:center;gap:10px}
.pg-usage .logo-actions .lbell{width:34px;height:34px;border-radius:10px;border:1px solid var(--border-strong);background:transparent;color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer}
.pg-usage .logo-actions .lbell svg{width:18px;height:18px}
.pg-usage .logo-actions .lav{width:34px;height:34px;border-radius:50%;object-fit:cover;cursor:pointer;background:#222}
.pg-usage .nav-label{font-size:12.5px;color:var(--muted-2);margin:0 0 12px 10px}
.pg-usage .nav{display:flex;flex-direction:column;gap:3px}
.pg-usage .nav a{display:flex;align-items:center;gap:14px;padding:10px 16px;border-radius:11px;color:var(--muted);text-decoration:none;font-size:15px;transition:.15s}
.pg-usage .nav a svg{width:20px;height:20px;stroke-width:1.7;flex-shrink:0}
.pg-usage .nav a:hover{color:var(--text);background:rgba(255,255,255,.03)}
.pg-usage .nav a.active{background:var(--indigo);color:#fff;font-weight:500;box-shadow:0 6px 20px rgba(79,70,229,.35)}
.pg-usage .upgrade-card{margin-top:auto;background:rgba(255,255,255,.02);border:1px solid var(--border);border-radius:16px;padding:16px}
.pg-usage .upgrade-card .head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:6px}
.pg-usage .upgrade-card h4{font-size:16px;font-weight:600;color:var(--indigo-soft)}
.pg-usage .upgrade-card .crown{width:32px;height:32px;border-radius:10px;background:radial-gradient(circle at 30% 30%,#3a2f14,#1b1607);display:flex;align-items:center;justify-content:center;font-size:16px}
.pg-usage .upgrade-card p{font-size:13px;color:var(--muted);line-height:1.45;margin-bottom:14px}
.pg-usage .upgrade-card button{background:var(--indigo);color:#fff;border:none;padding:10px 20px;border-radius:10px;font-family:inherit;font-size:14px;font-weight:500;cursor:pointer}
.pg-usage .side-bottom{padding-top:18px;display:flex;flex-direction:column;gap:14px}
.pg-usage .side-bottom a{display:flex;align-items:center;gap:14px;color:var(--muted);text-decoration:none;font-size:15px;padding-left:6px}
.pg-usage .side-bottom a svg{width:19px;height:19px;stroke-width:1.7}
.pg-usage .app.collapsed .sidebar{width:76px}
.pg-usage .app.collapsed .logo{justify-content:center;padding:0}
.pg-usage .app.collapsed .logo-after,.pg-usage .app.collapsed .logo-actions,.pg-usage .app.collapsed .nav-label,.pg-usage .app.collapsed .upgrade-card{display:none}
.pg-usage .app.collapsed .nav a,.pg-usage .app.collapsed .side-bottom a{justify-content:center;gap:0;padding-left:0;font-size:0}
.pg-usage .app.collapsed .nav a{padding:11px 0}
.pg-usage .app.collapsed .nav a svg,.pg-usage .app.collapsed .side-bottom a svg{font-size:initial}
.pg-usage .side-handle{position:fixed;bottom:17px;left:201px;z-index:60;width:28px;height:28px;border-radius:50%;background:#15151f;border:1px solid var(--border-strong);color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:left .25s ease}
.pg-usage .side-handle:hover{color:#fff;background:#1d1d2a}.pg-usage .side-handle svg{width:15px;height:15px}
.pg-usage .app.collapsed ~ .side-handle{left:61px}.pg-usage .side-handle .ic-expand{display:none}
.pg-usage .app.collapsed ~ .side-handle .ic-collapse{display:none}.pg-usage .app.collapsed ~ .side-handle .ic-expand{display:block}
.pg-usage .menu{position:fixed;z-index:200;width:300px;background:#10101c;border:1px solid var(--border-strong);border-radius:14px;box-shadow:0 24px 60px rgba(0,0,0,.55);padding:8px;display:none}
.pg-usage .menu.show{display:block;animation:menupop .18s ease}@keyframes menupop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.pg-usage .menu-head{padding:10px 12px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;margin-bottom:6px}
.pg-usage .menu-head .mh-t{font-size:15px;font-weight:600}.pg-usage .menu-head img{width:42px;height:42px;border-radius:50%;object-fit:cover}.pg-usage .menu-head .e{font-size:12.5px;color:var(--muted);margin-top:2px}
.pg-usage .menu-item{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:9px;color:var(--text);font-size:14px;cursor:pointer;text-decoration:none}
.pg-usage .menu-item:hover{background:rgba(255,255,255,.05)}.pg-usage .menu-item svg{width:17px;height:17px;color:var(--muted)}.pg-usage .menu-item.danger,.pg-usage .menu-item.danger svg{color:#ef6b6b}
.pg-usage .menu-div{height:1px;background:var(--border);margin:6px 8px}
.pg-usage .noti{display:flex;gap:11px;padding:11px 12px;border-radius:9px;cursor:pointer}.pg-usage .noti:hover{background:rgba(255,255,255,.04)}
.pg-usage .noti .nic{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.pg-usage .noti .nic svg{width:16px;height:16px}
.pg-usage .noti .nt{font-size:13.5px}.pg-usage .noti .ntime{font-size:12px;color:var(--muted);margin-top:2px}
.pg-usage .menu-foot{text-align:center;padding:9px;border-top:1px solid var(--border);margin-top:4px}.pg-usage .menu-foot a{color:var(--indigo-soft);font-size:13px;text-decoration:none}

.pg-usage /* MAIN */
.main{flex:1;padding:22px 26px;min-width:0;display:flex;flex-direction:column;overflow:hidden}
.pg-usage .page-head{flex-shrink:0;margin-bottom:18px;display:flex;align-items:flex-start}
.pg-usage .page-head h1{font-size:24px;font-weight:600}
.pg-usage .page-head p{color:var(--muted);font-size:14px;margin-top:5px}
.pg-usage .page-head .range{margin-left:auto;display:flex;align-items:center;gap:9px;height:42px;padding:0 16px;border:1px solid var(--border-strong);border-radius:11px;font-size:14px;cursor:pointer}
.pg-usage .page-head .range svg{width:15px;height:15px;color:var(--muted)}

.pg-usage /* stat cards */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;flex-shrink:0;margin-bottom:20px}
.pg-usage .stat{border:1px solid var(--border);border-radius:18px;padding:20px 22px;background:var(--card)}
.pg-usage .stat .top{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.pg-usage .stat .ic{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center}
.pg-usage .stat .ic svg{width:20px;height:20px}
.pg-usage .stat .lbl{font-size:13.5px;color:var(--muted)}
.pg-usage .stat .v{font-size:30px;font-weight:600;letter-spacing:-.5px}
.pg-usage .stat .v small{font-size:14px;color:var(--muted);font-weight:400}
.pg-usage .stat .bar{height:8px;border-radius:5px;background:rgba(255,255,255,.08);overflow:hidden;margin-top:14px}
.pg-usage .stat .bar span{display:block;height:100%;border-radius:5px}
.pg-usage .stat .sub{display:flex;justify-content:space-between;font-size:12.5px;color:var(--muted);margin-top:9px}

.pg-usage /* two cards */
.cols{flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr;gap:20px}
.pg-usage .ucard{border:1px solid var(--border-strong);border-radius:20px;padding:22px 24px;display:flex;flex-direction:column;min-height:0;
  background:radial-gradient(130% 110% at 0% 0%,rgba(79,70,229,.09),rgba(79,70,229,0) 55%),var(--panel)}
.pg-usage .ucard h2{font-size:19px;font-weight:600}
.pg-usage .ucard .uh-sub{font-size:13px;color:var(--muted);margin-top:5px;margin-bottom:20px}
.pg-usage .ulist{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:18px;padding-right:4px}
.pg-usage .ulist::-webkit-scrollbar{width:7px}.pg-usage .ulist::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:8px}
.pg-usage .urow .uh{display:flex;align-items:center;gap:12px;margin-bottom:9px}
.pg-usage .urow .uic{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.pg-usage .urow .uic svg{width:17px;height:17px}
.pg-usage .urow .un{font-size:14.5px;font-weight:500;flex:1}
.pg-usage .urow .uv{font-size:14px;font-weight:600}
.pg-usage .urow .uv .s{font-size:12.5px;color:var(--muted);font-weight:400;margin-left:5px}
.pg-usage .ubar{height:8px;border-radius:5px;background:rgba(255,255,255,.07);overflow:hidden}
.pg-usage .ubar span{display:block;height:100%;border-radius:5px}
.pg-usage .cap-top{border:1px solid var(--border);border-radius:14px;padding:16px 18px;margin-bottom:18px;background:rgba(255,255,255,.02)}
.pg-usage .cap-top .big{font-size:26px;font-weight:600}.pg-usage .cap-top .big small{font-size:14px;color:var(--muted);font-weight:400}
.pg-usage .cap-top .bar{height:10px;border-radius:6px;background:rgba(255,255,255,.08);overflow:hidden;margin:12px 0 9px}
.pg-usage .cap-top .bar span{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,#16a34a,#22c55e)}

/* ===== AI Studio (moved from inline) ===== */
.pg-ai-studio #gridView .scroll{
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 32px, #000 100%);
  mask-image:linear-gradient(to bottom, transparent 0, #000 32px, #000 100%);
}
/* AI Studio hub top credit nav */
.pg-ai-studio .ai-studio-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}
.pg-ai-studio .ai-studio-head .ph-titles{min-width:0}
.pg-ai-studio .credit-cluster{display:flex;align-items:center;gap:10px;flex-shrink:0}
.pg-ai-studio .credit-cluster .cc-bal{display:flex;align-items:center;gap:9px;padding:7px 14px;border:1px solid var(--border);border-radius:24px;background:rgba(18,18,28,.92);font-size:13px;color:var(--muted)}
.pg-ai-studio .credit-cluster .cc-ic{width:16px;height:16px;color:#818cf8;fill:currentColor}
.pg-ai-studio .credit-cluster b{color:#fff;font-weight:700}
.pg-ai-studio .credit-cluster .cc-btn{display:inline-flex;align-items:center;gap:5px;padding:8px 14px;border-radius:22px;border:1px solid var(--border);background:rgba(18,18,28,.92);color:#fff;font-weight:600;font-size:12.5px;text-decoration:none;cursor:pointer}
.pg-ai-studio .credit-cluster .cc-topup{background:linear-gradient(90deg,#4f46e5,#6366f1);border-color:transparent}
.pg-ai-studio .credit-cluster .cc-btn svg{width:14px;height:14px}

/* ===== Settings (moved from inline) ===== */
.pg-settings .pw-2col{display:flex;gap:14px;align-items:flex-start}
.pg-settings .pw-2col>.field{flex:1;margin-bottom:0}
.pg-settings .pw-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.pg-settings .pw-actions .pw-spacer{margin-left:auto}
.pg-settings .btn-reset{background:transparent;border:1px solid var(--border);color:var(--muted);padding:10px 20px;border-radius:10px;cursor:pointer;font-family:inherit;font-weight:600;font-size:13px}
.pg-settings .btn-reset:hover{background:rgba(255,255,255,.05);color:#fff}
.pg-settings .btn-reset:disabled,.pg-settings .btn-update:disabled{opacity:.6;cursor:default;box-shadow:none}
/* Change Password — strength meter levels, requirement checklist, result message */
.pg-settings .strength .bar.on.lv1{background:#ef4444}
.pg-settings .strength .bar.on.lv2{background:#f59e0b}
.pg-settings .strength .bar.on.lv3{background:#eab308}
.pg-settings .strength .bar.on.lv4{background:var(--green)}
.pg-settings .strength .lbl.lv1{color:#ef4444}
.pg-settings .strength .lbl.lv2{color:#f59e0b}
.pg-settings .strength .lbl.lv3{color:#eab308}
.pg-settings .strength .lbl.lv4{color:var(--green)}
.pg-settings .pw-rules{list-style:none;margin:10px 0 2px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:5px 16px}
.pg-settings .pw-rules li{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--muted)}
.pg-settings .pw-rules li.ok{color:var(--green)}
.pg-settings .pw-rules li svg{width:13px;height:13px;flex:none}
.pg-settings .pw-msg{font-size:13px;margin:10px 0 0}
.pg-settings .pw-msg.err{color:#f87171}
.pg-settings .pw-msg.ok{color:var(--green)}

/* ===== Hair Design (pg-hair) — moved from inline ===== */
body.pg-hair{
  --bg:#070710;--sidebar:#08080f;--panel:#0c0c15;--card:#12121c;
  --border:rgba(255,255,255,.07);--border-strong:rgba(255,255,255,.12);
  --text:#f4f4f6;--muted:#8b8b9a;--muted-2:#6c6c7a;--indigo:#4f46e5;--indigo-soft:#7c7cf0;
  --acc:#eab308;--acc-soft:rgba(234,179,8,.16);
  font-family:'Geist',system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;height:100vh;overflow:hidden;box-sizing:border-box;margin:0;padding:0;
  *{box-sizing:border-box;margin:0;padding:0}
  a,button{transition:background-color .22s ease,border-color .22s ease,color .18s ease,box-shadow .2s ease}
  .app{display:flex;height:100vh;overflow:hidden}
  .sidebar{width:240px;flex-shrink:0;background:var(--sidebar);border-right:1px solid var(--border);padding:20px 22px;display:flex;flex-direction:column;overflow:hidden;transition:width .25s ease}
  .logo{font-size:27px;font-weight:600;letter-spacing:-.5px;display:flex;align-items:center;justify-content:space-between;height:45px;margin:0 -22px 20px;padding:0 22px 0 28px;border-bottom:1px solid var(--border)}
  .logo .x{background:linear-gradient(135deg,#6366f1,#a78bfa);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:700}
  .logo-actions{display:flex;align-items:center;gap:10px}
  .logo-actions .lbell{width:34px;height:34px;border-radius:10px;border:1px solid var(--border-strong);background:transparent;color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer}
  .logo-actions .lbell svg{width:18px;height:18px}
  .logo-actions .lav{width:34px;height:34px;border-radius:50%;object-fit:cover;cursor:pointer;background:#222}
  .nav-label{font-size:12.5px;color:var(--muted-2);margin:0 0 12px 10px}
  .nav{display:flex;flex-direction:column;gap:3px}
  .nav a{display:flex;align-items:center;gap:14px;padding:10px 16px;border-radius:11px;color:var(--muted);text-decoration:none;font-size:15px}
  .nav a svg{width:20px;height:20px;stroke-width:1.7;flex-shrink:0}
  .nav a:hover{color:var(--text);background:rgba(255,255,255,.03)}
  .nav a.active{background:var(--indigo);color:#fff;font-weight:500;box-shadow:0 6px 20px rgba(79,70,229,.35)}
  .upgrade-card{margin-top:auto;background:rgba(255,255,255,.02);border:1px solid var(--border);border-radius:16px;padding:16px}
  .upgrade-card .head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:6px}
  .upgrade-card h4{font-size:16px;font-weight:600;color:var(--indigo-soft)}
  .upgrade-card .crown{width:32px;height:32px;border-radius:10px;background:radial-gradient(circle at 30% 30%,#3a2f14,#1b1607);display:flex;align-items:center;justify-content:center;font-size:16px}
  .upgrade-card p{font-size:13px;color:var(--muted);line-height:1.45;margin-bottom:14px}
  .upgrade-card button{background:var(--indigo);color:#fff;border:none;padding:10px 20px;border-radius:10px;font-family:inherit;font-size:14px;font-weight:500;cursor:pointer}
  .side-bottom{padding-top:18px;display:flex;flex-direction:column;gap:14px}
  .side-bottom a{display:flex;align-items:center;gap:14px;color:var(--muted);text-decoration:none;font-size:15px;padding-left:6px}
  .side-bottom a svg{width:19px;height:19px;stroke-width:1.7}
  .app.collapsed .sidebar{width:76px}
  .app.collapsed .logo{justify-content:center;padding:0}
  .app.collapsed .logo-after,.app.collapsed .logo-actions,.app.collapsed .nav-label,.app.collapsed .upgrade-card{display:none}
  .app.collapsed .nav a,.app.collapsed .side-bottom a{justify-content:center;gap:0;padding-left:0;font-size:0}
  .app.collapsed .nav a{padding:11px 0}
  .side-handle{position:fixed;bottom:17px;left:201px;z-index:60;width:28px;height:28px;border-radius:50%;background:#15151f;border:1px solid var(--border-strong);color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:left .25s ease}
  .side-handle:hover{color:#fff}.side-handle svg{width:15px;height:15px}
  .app.collapsed ~ .side-handle{left:61px}.side-handle .ic-expand{display:none}
  .app.collapsed ~ .side-handle .ic-collapse{display:none}.app.collapsed ~ .side-handle .ic-expand{display:block}
  .menu{position:fixed;z-index:200;width:262px;background:#10101c;border:1px solid var(--border-strong);border-radius:14px;box-shadow:0 24px 60px rgba(0,0,0,.55);padding:8px;display:none}
  .menu.show{display:block}
  .menu-head{padding:10px 12px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;margin-bottom:6px}
  .menu-head .mh-t{font-size:15px;font-weight:600}.menu-head img{width:42px;height:42px;border-radius:50%;object-fit:cover}.menu-head .e{font-size:12.5px;color:var(--muted);margin-top:2px}
  .menu-item{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:9px;color:var(--text);font-size:14px;cursor:pointer;text-decoration:none}
  .menu-item:hover{background:rgba(255,255,255,.05)}.menu-item svg{width:17px;height:17px;color:var(--muted)}.menu-item.danger,.menu-item.danger svg{color:#ef6b6b}
  .menu-div{height:1px;background:var(--border);margin:6px 8px}
  .main{flex:1;padding:20px 26px;min-width:0;display:flex;flex-direction:column;overflow:hidden}
  .back-link{display:inline-flex;align-items:center;gap:8px;color:var(--muted);text-decoration:none;font-size:15px;margin-bottom:0;flex-shrink:0}
  .back-link:hover{color:var(--text)}.back-link svg{width:17px;height:17px}
  .fp-topbar{display:flex;align-items:center;justify-content:space-between;gap:12px}
  .credit-cluster{display:flex;align-items:center;gap:10px}
  .credit-cluster .cc-bal{display:flex;align-items:center;gap:9px;padding:7px 14px;border:1px solid var(--border);border-radius:24px;background:rgba(18,18,28,.92);font-size:13px;color:var(--muted)}
  .credit-cluster .cc-ic{width:16px;height:16px;color:#818cf8;fill:currentColor}
  .credit-cluster b{color:#fff;font-weight:700}
  .credit-cluster .cc-btn{display:inline-flex;align-items:center;gap:5px;padding:8px 14px;border-radius:22px;border:1px solid var(--border);background:rgba(18,18,28,.92);color:#fff;font-weight:600;font-size:12.5px;text-decoration:none;cursor:pointer}
  .credit-cluster .cc-topup{background:linear-gradient(90deg,#4f46e5,#6366f1);border-color:transparent}
  .credit-cluster .cc-btn svg{width:14px;height:14px}
  .editor{flex:1;min-height:0;display:flex;border:1px solid var(--border-strong);border-radius:18px;overflow:hidden;background:var(--panel);margin-top:12px}
  .canvas{flex:1;position:relative;overflow:hidden;background:radial-gradient(70% 70% at 50% 45%,#13131f,#0a0a12 75%)}
  .sim-canvas{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:none;border-radius:10px;box-shadow:0 12px 50px rgba(0,0,0,.55);cursor:crosshair;touch-action:none;max-width:none}
  .tools-left{position:absolute;top:18px;left:18px;display:flex;flex-direction:column;gap:8px;z-index:7}
  .tbtn{width:40px;height:40px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid var(--border);color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer}
  .tbtn:hover{background:rgba(255,255,255,.08);color:#fff}.tbtn svg{width:18px;height:18px}
  .tbtn.active{background:var(--acc-soft);color:var(--acc);border-color:var(--acc)}
  .mag-lens{position:absolute;width:180px;height:180px;border-radius:50%;border:2px solid rgba(255,255,255,.92);box-shadow:0 8px 28px rgba(0,0,0,.55);pointer-events:none;z-index:8;display:none;background:#0a0a12}
  .zoom-chips{position:absolute;top:18px;right:18px;display:flex;flex-direction:column;gap:8px;align-items:flex-end;z-index:7}
  .chip{padding:8px 14px;border:1px solid var(--border);border-radius:9px;font-size:13px;color:var(--muted);background:rgba(255,255,255,.03)}
  .chip b{color:var(--text);margin-left:5px}
  .canvas-center{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:14px}
  .btn-upload{background:#fff;color:#15151c;border:none;padding:13px 24px;border-radius:11px;font-family:inherit;font-size:15px;font-weight:500;cursor:pointer}
  .btn-select{background:var(--acc);color:#2c2400;border:none;padding:13px 24px;border-radius:11px;font-family:inherit;font-size:15px;font-weight:600;cursor:pointer;box-shadow:0 8px 24px rgba(234,179,8,.4)}
  .tools-bottom{position:absolute;bottom:18px;left:18px;display:flex;gap:10px;z-index:7}
  .bbtn{width:44px;height:44px;border-radius:11px;background:rgba(255,255,255,.05);border:1px solid var(--border);color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer}
  .bbtn:hover{background:rgba(255,255,255,.09);color:#fff}.bbtn svg{width:19px;height:19px}
  .bbtn.active{background:var(--acc-soft);color:var(--acc);border-color:var(--acc)}
  .ai-overlay{position:absolute;inset:0;z-index:9;display:none;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:rgba(7,7,16,.82);text-align:center;padding:24px}
  .ai-overlay.show{display:flex}
  .ai-ring-wrap{position:relative;width:96px;height:96px;display:flex;align-items:center;justify-content:center}
  .ai-ring{width:96px;height:96px;transform:rotate(-90deg)}
  .ai-ring-bg{fill:none;stroke:rgba(255,255,255,.12);stroke-width:7}
  .ai-ring-fg{fill:none;stroke:#facc15;stroke-width:7;stroke-linecap:round;transition:stroke-dashoffset .2s linear}
  .ai-pct{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;font-size:19px}
  .ai-overlay .ai-text{color:#fff;font-size:14px;font-weight:600}
  .ai-overlay .ai-sub{color:#9aa3bd;font-size:12px;max-width:80%}
  .ai-overlay img{max-width:92%;max-height:80%;border-radius:12px}
  .ai-overlay .ai-close{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:8px;border:1px solid rgba(255,255,255,.16);background:rgba(0,0,0,.45);color:#fff;font-size:20px;line-height:1;cursor:pointer}
  .ai-overlay .ai-title{position:absolute;top:18px;left:18px;color:#fff;font-weight:600;font-size:12px;letter-spacing:.5px}
  .fpanel{width:330px;flex-shrink:0;border-left:1px solid var(--border);background:var(--panel);display:flex;flex-direction:column;overflow-y:auto}
  .fpanel::-webkit-scrollbar{width:8px}.fpanel::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:8px}
  .panel-head{padding:18px 22px 4px;font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--muted)}
  .seg{display:flex;gap:6px;margin:8px 22px 4px;background:rgba(255,255,255,.04);padding:5px;border-radius:11px}
  .seg button{flex:1;border:none;background:none;color:var(--muted);font-family:inherit;font-size:13px;font-weight:500;padding:9px 0;border-radius:8px;cursor:pointer}
  .seg button.active{background:#1c1c28;color:#fff}
  .sec{border-top:1px solid var(--border);padding:16px 22px}
  .sec-lbl{font-size:11.5px;font-weight:700;letter-spacing:.06em;color:var(--muted);margin-bottom:13px}
  .sec-lbl.icon{display:flex;align-items:center;gap:8px}.sec-lbl.icon svg{width:15px;height:15px}
  .row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .btn-ghost{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:11px;border-radius:10px;border:1px solid var(--border-strong);background:rgba(255,255,255,.03);color:var(--text);cursor:pointer;font-family:inherit;font-size:13px;font-weight:600}
  .btn-ghost:hover{background:rgba(255,255,255,.07)}.btn-ghost svg{width:16px;height:16px}
  .btn-ghost.active{border-color:var(--acc);background:var(--acc-soft);color:#fff}
  .hint{font-size:12px;color:var(--muted);line-height:1.5;margin-top:10px}
  .graft-input{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--border);border-radius:11px;padding:4px 6px 4px 14px}
  .graft-input input{flex:1;background:none;border:none;outline:none;color:#fff;font-family:inherit;font-size:18px;font-weight:700;width:100%}
  .graft-input .unit{font-size:12px;color:var(--muted);padding-right:8px}
  .chips{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
  .gchip{height:38px;border:1px solid var(--border);border-radius:10px;background:rgba(255,255,255,.02);color:var(--muted);cursor:pointer;font-family:inherit;font-size:13px}
  .gchip:hover{background:rgba(255,255,255,.05)}.gchip.active{border-color:var(--acc);background:var(--acc-soft);color:var(--acc);font-weight:600}
  .tl-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
  .tl{height:56px;border:1px solid var(--border);border-radius:11px;background:rgba(255,255,255,.02);color:var(--muted);cursor:pointer;font-family:inherit;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
  .tl b{font-size:16px;color:#fff}.tl span{font-size:10.5px}
  .tl:hover{background:rgba(255,255,255,.05)}.tl.active{border-color:var(--acc);background:var(--acc-soft)}.tl.active b{color:var(--acc)}
  .ai-recommend{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:12px;border-radius:11px;border:none;background:linear-gradient(90deg,#eab308,#f59e0b);color:#2c2400;cursor:pointer;font-family:inherit;font-size:14px;font-weight:700;box-shadow:0 8px 22px rgba(234,179,8,.32)}
  .ai-recommend:hover{filter:brightness(1.08)}.ai-recommend:disabled{opacity:.5;cursor:default;box-shadow:none}.ai-recommend svg{width:17px;height:17px}
  .ai-cost{margin-left:6px;display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px;background:rgba(0,0,0,.18)}
  .ai-cost svg{width:12px;height:12px;fill:currentColor}
  .btn-export{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:12px;border-radius:10px;border:1px solid var(--border-strong);background:rgba(255,255,255,.04);color:#fff;font-family:inherit;font-weight:600;font-size:13.5px;cursor:pointer}
  .btn-export:hover{background:rgba(255,255,255,.08)}.btn-export svg{width:17px;height:17px}
  .hist-hint{font-size:12px;color:var(--muted);margin-bottom:12px;opacity:.8}
  .hist-list{display:flex;flex-direction:column;gap:5px}
  .hist-empty{font-size:13px;color:var(--muted);opacity:.7;padding:8px 2px}
  .hist-item{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:9px;cursor:pointer;color:var(--muted);font-size:13px;border:1px solid transparent}
  .hist-item:hover{background:rgba(255,255,255,.05)}
  .hist-item.active{background:var(--acc-soft);border-color:var(--acc);color:#fff}
  .hist-item.future{opacity:.4}
  .hist-item .dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex-shrink:0;opacity:.65}
  .hist-item .lbl{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .slider .top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
  .slider .top .n{font-size:13px}.slider .top .v{font-size:13px;font-weight:600;color:var(--acc)}
  .rng{-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:3px;background:rgba(255,255,255,.12);outline:none;cursor:pointer}
  .rng::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--acc);border:3px solid #fff0c2;cursor:pointer}
  @media (max-width:1100px){.sidebar{width:240px}.fpanel{width:300px}}
}

/* ===== Rhinoplasty Preview (pg-rhino) — moved from inline ===== */
body.pg-rhino{
  --bg:#070710;--sidebar:#08080f;--panel:#0c0c15;--card:#12121c;
  --border:rgba(255,255,255,.07);--border-strong:rgba(255,255,255,.12);
  --text:#f4f4f6;--muted:#8b8b9a;--muted-2:#6c6c7a;--indigo:#4f46e5;--indigo-soft:#7c7cf0;
  --acc:#4f7cf5;--acc-soft:rgba(79,124,245,.16);
  font-family:'Geist',system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;font-feature-settings:"ss01";height:100vh;overflow:hidden;box-sizing:border-box;margin:0;padding:0;
  *{box-sizing:border-box;margin:0;padding:0}
  a,button{transition:background-color .22s ease,border-color .22s ease,color .18s ease,box-shadow .2s ease}
  .app{display:flex;height:100vh;overflow:hidden}
  .sidebar{width:240px;flex-shrink:0;background:var(--sidebar);border-right:1px solid var(--border);padding:20px 22px;display:flex;flex-direction:column;overflow:hidden;transition:width .25s ease}
  .logo{font-size:27px;font-weight:600;letter-spacing:-.5px;display:flex;align-items:center;justify-content:space-between;height:45px;margin:0 -22px 20px;padding:0 22px 0 28px;border-bottom:1px solid var(--border)}
  .logo .x{background:linear-gradient(135deg,#6366f1,#a78bfa);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:700}
  .logo-text{display:flex;align-items:center;gap:4px}
  .logo-actions{display:flex;align-items:center;gap:10px}
  .logo-actions .lbell{width:34px;height:34px;border-radius:10px;border:1px solid var(--border-strong);background:transparent;color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer}
  .logo-actions .lbell svg{width:18px;height:18px}
  .logo-actions .lav{width:34px;height:34px;border-radius:50%;object-fit:cover;cursor:pointer;background:#222}
  .nav-label{font-size:12.5px;color:var(--muted-2);margin:0 0 12px 10px}
  .nav{display:flex;flex-direction:column;gap:3px}
  .nav a{display:flex;align-items:center;gap:14px;padding:10px 16px;border-radius:11px;color:var(--muted);text-decoration:none;font-size:15px;transition:.15s}
  .nav a svg{width:20px;height:20px;stroke-width:1.7;flex-shrink:0}
  .nav a:hover{color:var(--text);background:rgba(255,255,255,.03)}
  .nav a.active{background:var(--indigo);color:#fff;font-weight:500;box-shadow:0 6px 20px rgba(79,70,229,.35)}
  .upgrade-card{margin-top:auto;background:rgba(255,255,255,.02);border:1px solid var(--border);border-radius:16px;padding:16px}
  .upgrade-card .head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:6px}
  .upgrade-card h4{font-size:16px;font-weight:600;color:var(--indigo-soft)}
  .upgrade-card .crown{width:32px;height:32px;border-radius:10px;background:radial-gradient(circle at 30% 30%,#3a2f14,#1b1607);display:flex;align-items:center;justify-content:center;font-size:16px}
  .upgrade-card p{font-size:13px;color:var(--muted);line-height:1.45;margin-bottom:14px}
  .upgrade-card button{background:var(--indigo);color:#fff;border:none;padding:10px 20px;border-radius:10px;font-family:inherit;font-size:14px;font-weight:500;cursor:pointer}
  .side-bottom{padding-top:18px;display:flex;flex-direction:column;gap:14px}
  .side-bottom a{display:flex;align-items:center;gap:14px;color:var(--muted);text-decoration:none;font-size:15px;padding-left:6px}
  .side-bottom a svg{width:19px;height:19px;stroke-width:1.7}
  .app.collapsed .sidebar{width:76px}
  .app.collapsed .logo{justify-content:center;padding:0}
  .app.collapsed .logo-after,.app.collapsed .logo-actions,.app.collapsed .nav-label,.app.collapsed .upgrade-card{display:none}
  .app.collapsed .nav a,.app.collapsed .side-bottom a{justify-content:center;gap:0;padding-left:0;font-size:0}
  .app.collapsed .nav a{padding:11px 0}
  .app.collapsed .nav a svg,.app.collapsed .side-bottom a svg{font-size:initial}
  .side-handle{position:fixed;bottom:17px;left:201px;z-index:60;width:28px;height:28px;border-radius:50%;background:#15151f;border:1px solid var(--border-strong);color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:left .25s ease}
  .side-handle:hover{color:#fff;background:#1d1d2a}.side-handle svg{width:15px;height:15px}
  .app.collapsed ~ .side-handle{left:61px}.side-handle .ic-expand{display:none}
  .app.collapsed ~ .side-handle .ic-collapse{display:none}.app.collapsed ~ .side-handle .ic-expand{display:block}
  .menu{position:fixed;z-index:200;width:300px;background:#10101c;border:1px solid var(--border-strong);border-radius:14px;box-shadow:0 24px 60px rgba(0,0,0,.55);padding:8px;display:none}
  .menu.show{display:block;animation:menupop .18s ease}
  .menu-head{padding:10px 12px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;margin-bottom:6px}
  .menu-head .mh-t{font-size:15px;font-weight:600}.menu-head img{width:42px;height:42px;border-radius:50%;object-fit:cover}.menu-head .e{font-size:12.5px;color:var(--muted);margin-top:2px}
  .menu-item{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:9px;color:var(--text);font-size:14px;cursor:pointer;text-decoration:none}
  .menu-item:hover{background:rgba(255,255,255,.05)}.menu-item svg{width:17px;height:17px;color:var(--muted)}.menu-item.danger,.menu-item.danger svg{color:#ef6b6b}
  .menu-div{height:1px;background:var(--border);margin:6px 8px}
  .noti{display:flex;gap:11px;padding:11px 12px;border-radius:9px;cursor:pointer}.noti:hover{background:rgba(255,255,255,.04)}
  .noti .nic{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.noti .nic svg{width:16px;height:16px}
  .noti .nt{font-size:13.5px}.noti .ntime{font-size:12px;color:var(--muted);margin-top:2px}
  .menu-foot{text-align:center;padding:9px;border-top:1px solid var(--border);margin-top:4px}.menu-foot a{color:var(--indigo-soft);font-size:13px;text-decoration:none}
  .main{flex:1;padding:20px 26px;min-width:0;display:flex;flex-direction:column;overflow:hidden}
  .back-link{display:inline-flex;align-items:center;gap:8px;color:var(--muted);text-decoration:none;font-size:15px;flex-shrink:0;align-self:flex-start}
  .back-link:hover{color:var(--text)}
  .back-link svg{width:17px;height:17px}
  .fp-topbar{display:flex;align-items:center;justify-content:space-between;gap:12px}
  .editor{flex:1;min-height:0;display:flex;border:1px solid var(--border-strong);border-radius:18px;overflow:hidden;background:var(--panel);margin-top:12px}
  .canvas{flex:1;position:relative;overflow:hidden;background:radial-gradient(70% 70% at 50% 45%,#13131f,#0a0a12 75%)}
  .sim-canvas{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(1);transform-origin:center;display:none;border-radius:10px;box-shadow:0 12px 50px rgba(0,0,0,.55);cursor:crosshair;touch-action:none;max-width:none}
  .tools-left{position:absolute;top:18px;left:18px;display:flex;flex-direction:column;gap:8px;z-index:7}
  .tbtn{width:40px;height:40px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid var(--border);color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.15s}
  .tbtn:hover{background:rgba(255,255,255,.08);color:#fff}.tbtn svg{width:18px;height:18px}
  .zoom-chips{position:absolute;top:18px;right:18px;display:flex;flex-direction:column;gap:8px;align-items:flex-end;z-index:7}
  .chip{padding:8px 14px;border:1px solid var(--border);border-radius:9px;font-size:13px;color:var(--muted);background:rgba(255,255,255,.03)}
  .chip b{color:var(--text);margin-left:5px}
  .canvas-center{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:14px}
  .btn-upload{background:#fff;color:#15151c;border:none;padding:13px 24px;border-radius:11px;font-family:inherit;font-size:15px;font-weight:500;cursor:pointer}
  .btn-select{background:var(--acc);color:#fff;border:none;padding:13px 24px;border-radius:11px;font-family:inherit;font-size:15px;font-weight:500;cursor:pointer;box-shadow:0 8px 24px rgba(79,124,245,.4)}
  .tools-bottom{position:absolute;bottom:18px;left:18px;display:flex;gap:10px;z-index:7}
  .bbtn{width:44px;height:44px;border-radius:11px;background:rgba(255,255,255,.05);border:1px solid var(--border);color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.15s}
  .bbtn:hover{background:rgba(255,255,255,.09);color:#fff}.bbtn svg{width:19px;height:19px}
  .bbtn.active,.tbtn.active{background:var(--acc-soft);color:var(--acc);border-color:var(--acc)}
  .fpanel{width:320px;flex-shrink:0;border-left:1px solid var(--border);background:var(--panel);display:flex;flex-direction:column;overflow-y:auto}
  .fpanel::-webkit-scrollbar{width:8px}.fpanel::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:8px}
  .panel-head{padding:20px 22px 14px;font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--muted)}
  .seg{display:flex;gap:6px;margin:0 22px 4px;background:rgba(255,255,255,.04);padding:5px;border-radius:11px}
  .seg button{flex:1;border:none;background:none;color:var(--muted);font-family:inherit;font-size:13px;font-weight:500;padding:9px 0;border-radius:8px;cursor:pointer}
  .seg button.active{background:#1c1c28;color:#fff}
  .sec{border-top:1px solid var(--border);padding:18px 22px}
  .sec-lbl{font-size:11.5px;font-weight:600;letter-spacing:.06em;color:var(--muted);margin-bottom:14px}
  .sec-lbl.icon{display:flex;align-items:center;gap:8px}.sec-lbl.icon svg{width:15px;height:15px}
  .slider{margin-bottom:18px}.slider:last-child{margin-bottom:0}
  .slider .top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
  .slider .top .n{font-size:14px}.slider .top .v{font-size:13.5px;font-weight:600;color:var(--acc)}
  .rng{-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:3px;background:rgba(255,255,255,.12);outline:none;cursor:pointer}
  .rng::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--acc);border:3px solid #cdddff;box-shadow:0 2px 8px rgba(79,124,245,.5);cursor:pointer}
  .rng::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--acc);border:3px solid #cdddff;cursor:pointer}
  .liq-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .liq{display:flex;align-items:center;justify-content:center;gap:8px;height:44px;border:1px solid var(--border);border-radius:11px;background:rgba(255,255,255,.02);color:var(--muted);cursor:pointer;font-family:inherit;font-size:14px}
  .liq svg{width:16px;height:16px}.liq.active{border-color:var(--acc);background:var(--acc-soft);color:var(--acc)}
  .zone-grid{display:grid;grid-template-columns:1fr;gap:12px}
  .zone{display:flex;align-items:center;gap:10px;height:46px;padding:0 14px;border:1px solid var(--border);border-radius:11px;background:rgba(255,255,255,.02);color:var(--muted);cursor:pointer;font-family:inherit;font-size:14px;transition:.15s}
  .zone:hover{background:rgba(255,255,255,.05)}.zone svg{width:17px;height:17px}
  .zone.active{border-color:var(--acc);background:var(--acc-soft);color:#fff}
  .hist-hint{font-size:12px;color:var(--muted);margin-bottom:12px;opacity:.8}
  .hist-list{display:flex;flex-direction:column;gap:5px}
  .hist-empty{font-size:13px;color:var(--muted);opacity:.7;padding:8px 2px}
  .hist-item{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:9px;cursor:pointer;color:var(--muted);font-size:13px;border:1px solid transparent;transition:.15s}
  .hist-item:hover{background:rgba(255,255,255,.05)}
  .hist-item.active{background:var(--acc-soft);border-color:var(--acc);color:#fff}
  .hist-item.future{opacity:.4}
  .hist-item .dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex-shrink:0;opacity:.65}
  .hist-item .lbl{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .hist-item .idx{font-size:11px;opacity:.45}
  .ai-recommend{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:11px;border-radius:10px;border:1px solid rgba(124,124,240,.5);background:linear-gradient(90deg,rgba(79,70,229,.28),rgba(129,140,248,.2));color:#e3e6ff;cursor:pointer;font-family:inherit;font-size:13px;font-weight:600;transition:.15s}
  .ai-recommend:hover{background:linear-gradient(90deg,rgba(79,70,229,.45),rgba(129,140,248,.34));box-shadow:0 0 18px rgba(99,102,241,.35)}
  .ai-recommend svg{width:16px;height:16px}
  .ai-recommend:disabled{opacity:.55;cursor:default;box-shadow:none}
  .ai-cost{margin-left:auto;display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:600;padding:3px 9px;border-radius:20px;background:rgba(255,255,255,.14);color:#eef1ff}
  .ai-cost svg{width:12px;height:12px}
  .btn-export{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:12px;border-radius:10px;border:1px solid var(--acc);background:var(--acc);color:#fff;font-family:inherit;font-weight:600;font-size:13.5px;cursor:pointer;transition:.15s}
  .btn-export:hover{filter:brightness(1.12)}
  .btn-export svg{width:17px;height:17px}
  .credit-cluster{display:flex;align-items:center;gap:10px}
  .credit-cluster .cc-bal{display:flex;align-items:center;gap:9px;padding:7px 14px;border:1px solid var(--border);border-radius:24px;background:rgba(18,18,28,.92);font-size:13px;color:var(--muted);box-shadow:0 6px 22px rgba(0,0,0,.35)}
  .credit-cluster .cc-ic{width:16px;height:16px;color:#818cf8;fill:currentColor}
  .credit-cluster b{color:#fff;font-weight:700}
  .credit-cluster .cc-btn{display:inline-flex;align-items:center;gap:5px;padding:8px 14px;border-radius:22px;border:1px solid var(--border);background:rgba(18,18,28,.92);color:#fff;font-weight:600;font-size:12.5px;text-decoration:none;cursor:pointer}
  .credit-cluster .cc-topup{background:linear-gradient(90deg,#4f46e5,#6366f1);border-color:transparent}
  .credit-cluster .cc-btn:hover{filter:brightness(1.12)}
  .credit-cluster .cc-btn svg{width:14px;height:14px}
  .ai-overlay{position:absolute;inset:0;z-index:9;display:none;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:rgba(7,7,16,.82);text-align:center;padding:24px}
  .ai-overlay.show{display:flex}
  .ai-ring-wrap{position:relative;width:96px;height:96px;display:flex;align-items:center;justify-content:center}
  .ai-ring{width:96px;height:96px;transform:rotate(-90deg)}
  .ai-ring-bg{fill:none;stroke:rgba(255,255,255,.12);stroke-width:7}
  .ai-ring-fg{fill:none;stroke:#818cf8;stroke-width:7;stroke-linecap:round;transition:stroke-dashoffset .2s linear}
  .ai-pct{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;font-size:19px}
  .ai-overlay .ai-text{color:#fff;font-size:14px;font-weight:600}
  .ai-overlay .ai-sub{color:#9aa3bd;font-size:12px;max-width:80%}
  .ai-overlay img{max-width:92%;max-height:80%;border-radius:12px;box-shadow:0 10px 40px rgba(0,0,0,.5)}
  .ai-overlay .ai-close{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:8px;border:1px solid rgba(255,255,255,.16);background:rgba(0,0,0,.45);color:#fff;font-size:20px;line-height:1;cursor:pointer}
  .ai-overlay .ai-title{position:absolute;top:18px;left:18px;color:#fff;font-weight:600;font-size:12px;letter-spacing:.5px}
  @media (max-width:1050px){.sidebar{width:240px}.fpanel{width:280px}}
}

/* ===== Filler Preview (pg-filler) — moved from inline ===== */
@keyframes aispin{to{transform:rotate(360deg)}}
/* AI "waiting" water-fill circle: an SVG wave surface sits exactly at the water level
   (level set in JS), clipped to the circle by the container's overflow:hidden. */
.ai-water{position:relative;width:104px;height:104px;border-radius:50%;overflow:hidden;border:3px solid rgba(255,255,255,.18);background:rgba(255,255,255,.04);box-shadow:inset 0 0 18px rgba(0,0,0,.35)}
.ai-water-svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.ai-wave1{fill:#5b63e6}
.ai-wave2{fill:#8b93ff;opacity:.5}
.ai-water-pct{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:20px;text-shadow:0 1px 4px rgba(0,0,0,.45)}
body.pg-filler{
  --bg:#070710;--sidebar:#08080f;--panel:#0c0c15;--card:#12121c;
  --border:rgba(255,255,255,.07);--border-strong:rgba(255,255,255,.12);
  --text:#f4f4f6;--muted:#8b8b9a;--muted-2:#6c6c7a;--indigo:#4f46e5;--indigo-soft:#7c7cf0;
  --acc:#4f7cf5;--acc-soft:rgba(79,124,245,.16);
  font-family:'Geist',system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;font-feature-settings:"ss01";height:100vh;overflow:hidden;box-sizing:border-box;margin:0;padding:0;
  *{box-sizing:border-box;margin:0;padding:0}
  a,button{transition:background-color .22s ease,border-color .22s ease,color .18s ease,box-shadow .2s ease}
  .app{display:flex;height:100vh;overflow:hidden}
  .sidebar{width:240px;flex-shrink:0;background:var(--sidebar);border-right:1px solid var(--border);padding:20px 22px;display:flex;flex-direction:column;overflow:hidden;transition:width .25s ease}
  .logo{font-size:27px;font-weight:600;letter-spacing:-.5px;display:flex;align-items:center;justify-content:space-between;height:45px;margin:0 -22px 20px;padding:0 22px 0 28px;border-bottom:1px solid var(--border)}
  .logo .x{background:linear-gradient(135deg,#6366f1,#a78bfa);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:700}
  .logo-text{display:flex;align-items:center;gap:4px}
  .logo-actions{display:flex;align-items:center;gap:10px}
  .logo-actions .lbell{width:34px;height:34px;border-radius:10px;border:1px solid var(--border-strong);background:transparent;color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer}
  .logo-actions .lbell svg{width:18px;height:18px}
  .logo-actions .lav{width:34px;height:34px;border-radius:50%;object-fit:cover;cursor:pointer;background:#222}
  .nav-label{font-size:12.5px;color:var(--muted-2);margin:0 0 12px 10px}
  .nav{display:flex;flex-direction:column;gap:3px}
  .nav a{display:flex;align-items:center;gap:14px;padding:10px 16px;border-radius:11px;color:var(--muted);text-decoration:none;font-size:15px;transition:.15s}
  .nav a svg{width:20px;height:20px;stroke-width:1.7;flex-shrink:0}
  .nav a:hover{color:var(--text);background:rgba(255,255,255,.03)}
  .nav a.active{background:var(--indigo);color:#fff;font-weight:500;box-shadow:0 6px 20px rgba(79,70,229,.35)}
  .upgrade-card{margin-top:auto;background:rgba(255,255,255,.02);border:1px solid var(--border);border-radius:16px;padding:16px}
  .upgrade-card .head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:6px}
  .upgrade-card h4{font-size:16px;font-weight:600;color:var(--indigo-soft)}
  .upgrade-card .crown{width:32px;height:32px;border-radius:10px;background:radial-gradient(circle at 30% 30%,#3a2f14,#1b1607);display:flex;align-items:center;justify-content:center;font-size:16px}
  .upgrade-card p{font-size:13px;color:var(--muted);line-height:1.45;margin-bottom:14px}
  .upgrade-card button{background:var(--indigo);color:#fff;border:none;padding:10px 20px;border-radius:10px;font-family:inherit;font-size:14px;font-weight:500;cursor:pointer}
  .side-bottom{padding-top:18px;display:flex;flex-direction:column;gap:14px}
  .side-bottom a{display:flex;align-items:center;gap:14px;color:var(--muted);text-decoration:none;font-size:15px;padding-left:6px}
  .side-bottom a svg{width:19px;height:19px;stroke-width:1.7}
  .app.collapsed .sidebar{width:76px}
  .app.collapsed .logo{justify-content:center;padding:0}
  .app.collapsed .logo-after,.app.collapsed .logo-actions,.app.collapsed .nav-label,.app.collapsed .upgrade-card{display:none}
  .app.collapsed .nav a,.app.collapsed .side-bottom a{justify-content:center;gap:0;padding-left:0;font-size:0}
  .app.collapsed .nav a{padding:11px 0}
  .app.collapsed .nav a svg,.app.collapsed .side-bottom a svg{font-size:initial}
  .side-handle{position:fixed;bottom:17px;left:201px;z-index:60;width:28px;height:28px;border-radius:50%;background:#15151f;border:1px solid var(--border-strong);color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:left .25s ease}
  .side-handle:hover{color:#fff;background:#1d1d2a}.side-handle svg{width:15px;height:15px}
  .app.collapsed ~ .side-handle{left:61px}.side-handle .ic-expand{display:none}
  .app.collapsed ~ .side-handle .ic-collapse{display:none}.app.collapsed ~ .side-handle .ic-expand{display:block}
  .menu{position:fixed;z-index:200;width:300px;background:#10101c;border:1px solid var(--border-strong);border-radius:14px;box-shadow:0 24px 60px rgba(0,0,0,.55);padding:8px;display:none}
  .menu.show{display:block;animation:menupop .18s ease}
  .menu-head{padding:10px 12px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;margin-bottom:6px}
  .menu-head .mh-t{font-size:15px;font-weight:600}.menu-head img{width:42px;height:42px;border-radius:50%;object-fit:cover}.menu-head .e{font-size:12.5px;color:var(--muted);margin-top:2px}
  .menu-item{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:9px;color:var(--text);font-size:14px;cursor:pointer;text-decoration:none}
  .menu-item:hover{background:rgba(255,255,255,.05)}.menu-item svg{width:17px;height:17px;color:var(--muted)}.menu-item.danger,.menu-item.danger svg{color:#ef6b6b}
  .menu-div{height:1px;background:var(--border);margin:6px 8px}
  .noti{display:flex;gap:11px;padding:11px 12px;border-radius:9px;cursor:pointer}.noti:hover{background:rgba(255,255,255,.04)}
  .noti .nic{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.noti .nic svg{width:16px;height:16px}
  .noti .nt{font-size:13.5px}.noti .ntime{font-size:12px;color:var(--muted);margin-top:2px}
  .menu-foot{text-align:center;padding:9px;border-top:1px solid var(--border);margin-top:4px}.menu-foot a{color:var(--indigo-soft);font-size:13px;text-decoration:none}
  .main{flex:1;padding:20px 26px;min-width:0;display:flex;flex-direction:column;overflow:hidden}
  .back-link{display:inline-flex;align-items:center;gap:8px;color:var(--muted);text-decoration:none;font-size:15px;margin-bottom:14px;flex-shrink:0;align-self:flex-start}
  .back-link:hover{color:var(--text)}
  .back-link svg{width:17px;height:17px}
  .editor{flex:1;min-height:0;display:flex;border:1px solid var(--border-strong);border-radius:18px;overflow:hidden;background:var(--panel);margin-top:12px}
  .canvas{flex:1;position:relative;overflow:hidden;background:radial-gradient(70% 70% at 50% 45%,#13131f,#0a0a12 75%)}
  .sim-canvas{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(1);transform-origin:center;display:none;border-radius:10px;box-shadow:0 12px 50px rgba(0,0,0,.55);cursor:crosshair;touch-action:none;max-width:none}
  .tools-left{position:absolute;top:18px;left:18px;display:flex;flex-direction:column;gap:8px;z-index:7}
  .tbtn{width:40px;height:40px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid var(--border);color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.15s}
  .tbtn:hover{background:rgba(255,255,255,.08);color:#fff}.tbtn svg{width:18px;height:18px}
  .zoom-chips{position:absolute;top:18px;right:18px;display:flex;flex-direction:column;gap:8px;align-items:flex-end;z-index:7}
  .chip{padding:8px 14px;border:1px solid var(--border);border-radius:9px;font-size:13px;color:var(--muted);background:rgba(255,255,255,.03)}
  .chip b{color:var(--text);margin-left:5px}
  .canvas-center{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:14px}
  .btn-upload{background:#fff;color:#15151c;border:none;padding:13px 24px;border-radius:11px;font-family:inherit;font-size:15px;font-weight:500;cursor:pointer}
  .btn-select{background:var(--acc);color:#fff;border:none;padding:13px 24px;border-radius:11px;font-family:inherit;font-size:15px;font-weight:500;cursor:pointer;box-shadow:0 8px 24px rgba(79,124,245,.4)}
  .canvas-center img{max-width:80%;max-height:84%;object-fit:contain;border-radius:14px}
  .tools-bottom{position:absolute;bottom:18px;left:18px;display:flex;gap:10px;z-index:7}
  .bbtn{width:44px;height:44px;border-radius:11px;background:rgba(255,255,255,.05);border:1px solid var(--border);color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.15s}
  .bbtn:hover{background:rgba(255,255,255,.09);color:#fff}.bbtn svg{width:19px;height:19px}
  .bbtn.active,.tbtn.active{background:var(--acc-soft);color:var(--acc);border-color:var(--acc)}
  .fpanel{width:320px;flex-shrink:0;border-left:1px solid var(--border);background:var(--panel);display:flex;flex-direction:column;overflow-y:auto}
  .fpanel::-webkit-scrollbar{width:8px}.fpanel::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:8px}
  .panel-head{padding:20px 22px 14px;font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--muted)}
  .seg{display:flex;gap:6px;margin:0 22px 4px;background:rgba(255,255,255,.04);padding:5px;border-radius:11px}
  .seg button{flex:1;border:none;background:none;color:var(--muted);font-family:inherit;font-size:13px;font-weight:500;padding:9px 0;border-radius:8px;cursor:pointer}
  .seg button.active{background:#1c1c28;color:#fff}
  .hist-hint{font-size:12px;color:var(--muted);margin-bottom:12px;opacity:.8}
  .hist-list{display:flex;flex-direction:column;gap:5px}
  .hist-empty{font-size:13px;color:var(--muted);opacity:.7;padding:8px 2px}
  .hist-item{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:9px;cursor:pointer;color:var(--muted);font-size:13px;border:1px solid transparent;transition:.15s}
  .hist-item:hover{background:rgba(255,255,255,.05)}
  .hist-item.active{background:var(--acc-soft);border-color:var(--acc);color:#fff}
  .hist-item.future{opacity:.4}
  .hist-item .dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex-shrink:0;opacity:.65}
  .hist-item .lbl{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .hist-item .idx{font-size:11px;opacity:.45}
  .ai-recommend{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-bottom:14px;padding:11px;border-radius:10px;border:1px solid rgba(124,124,240,.5);background:linear-gradient(90deg,rgba(79,70,229,.28),rgba(129,140,248,.2));color:#e3e6ff;cursor:pointer;font-family:inherit;font-size:13px;font-weight:600;transition:.15s}
  .ai-recommend:hover{background:linear-gradient(90deg,rgba(79,70,229,.45),rgba(129,140,248,.34));box-shadow:0 0 18px rgba(99,102,241,.35)}
  .ai-recommend svg{width:16px;height:16px}
  .ai-recommend:disabled{opacity:.55;cursor:default;box-shadow:none}
  .ai-cost{margin-left:auto;display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:600;padding:3px 9px;border-radius:20px;background:rgba(255,255,255,.14);color:#eef1ff}
  .ai-cost svg{width:12px;height:12px}
  .fp-topbar{display:flex;align-items:center;justify-content:space-between;gap:12px}
  .credit-cluster{display:flex;align-items:center;gap:10px}
  .credit-cluster .cc-bal{display:flex;align-items:center;gap:9px;padding:7px 14px;border:1px solid var(--border);border-radius:24px;background:rgba(18,18,28,.92);font-size:13px;color:var(--muted);box-shadow:0 6px 22px rgba(0,0,0,.35)}
  .credit-cluster .cc-ic{width:16px;height:16px;color:#818cf8;fill:currentColor}
  .credit-cluster b{color:#fff;font-weight:700}
  .credit-cluster .cc-btn{display:inline-flex;align-items:center;gap:5px;padding:8px 14px;border-radius:22px;border:1px solid var(--border);background:rgba(18,18,28,.92);color:#fff;font-weight:600;font-size:12.5px;text-decoration:none;cursor:pointer}
  .credit-cluster .cc-topup{background:linear-gradient(90deg,#4f46e5,#6366f1);border-color:transparent}
  .credit-cluster .cc-btn:hover{filter:brightness(1.12)}
  .credit-cluster .cc-btn svg{width:14px;height:14px}
  .btn-export{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:12px;border-radius:10px;border:1px solid var(--acc);background:var(--acc);color:#fff;font-family:inherit;font-weight:600;font-size:13.5px;cursor:pointer;transition:.15s}
  .btn-export:hover{filter:brightness(1.12)}
  .btn-export svg{width:17px;height:17px}
  .btn-save-album{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:12px;border-radius:10px;border:none;background:linear-gradient(135deg,#6366f1,#4f46e5);color:#fff;font-family:inherit;font-weight:600;font-size:13.5px;cursor:pointer;transition:.15s;box-shadow:0 6px 18px rgba(79,70,229,.35)}
  .btn-save-album:hover{filter:brightness(1.1)}
  .btn-save-album:disabled{opacity:.55;cursor:default;box-shadow:none}
  .btn-save-album svg{width:17px;height:17px}
  .ai-overlay{position:absolute;inset:0;z-index:9;display:none;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:rgba(7,7,16,.82);text-align:center;padding:24px}
  .ai-overlay.show{display:flex}
  .ai-spinner{width:52px;height:52px;border-radius:50%;border:4px solid rgba(255,255,255,.14);border-top-color:#818cf8;animation:aispin 1s linear infinite}
  .ai-ring-wrap{position:relative;width:96px;height:96px;display:flex;align-items:center;justify-content:center}
  .ai-ring{width:96px;height:96px;transform:rotate(-90deg)}
  .ai-ring-bg{fill:none;stroke:rgba(255,255,255,.12);stroke-width:7}
  .ai-ring-fg{fill:none;stroke:#818cf8;stroke-width:7;stroke-linecap:round;transition:stroke-dashoffset .2s linear}
  .ai-pct{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;font-size:19px}
  .ai-overlay .ai-text{color:#fff;font-size:14px;font-weight:600}
  .ai-overlay .ai-sub{color:#9aa3bd;font-size:12px;max-width:80%}
  .ai-overlay img{max-width:92%;max-height:80%;border-radius:12px;box-shadow:0 10px 40px rgba(0,0,0,.5)}
  .ai-overlay .ai-close{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:8px;border:1px solid rgba(255,255,255,.16);background:rgba(0,0,0,.45);color:#fff;font-size:20px;line-height:1;cursor:pointer}
  .ai-overlay .ai-title{position:absolute;top:18px;left:18px;color:#fff;font-weight:600;font-size:12px;letter-spacing:.5px}
  .sec{border-top:1px solid var(--border);padding:18px 22px}
  .sec-lbl{font-size:11.5px;font-weight:600;letter-spacing:.06em;color:var(--muted);margin-bottom:14px}
  .sec-lbl.icon{display:flex;align-items:center;gap:8px}.sec-lbl.icon svg{width:15px;height:15px}
  .zone-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .zone{display:flex;align-items:center;gap:10px;height:46px;padding:0 14px;border:1px solid var(--border);border-radius:11px;background:rgba(255,255,255,.02);color:var(--muted);cursor:pointer;font-size:14px;transition:.15s}
  .zone:hover{background:rgba(255,255,255,.05)}.zone svg{width:17px;height:17px}
  .zone.active{border-color:var(--acc);background:var(--acc-soft);color:#fff}
  .vol-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
  .vol{height:44px;border:1px solid var(--border);border-radius:11px;background:rgba(255,255,255,.02);color:var(--muted);cursor:pointer;font-family:inherit;font-size:14px;transition:.15s}
  .vol:hover{background:rgba(255,255,255,.05)}.vol.active{border-color:var(--acc);background:var(--acc-soft);color:var(--acc);font-weight:600}
  .slider{margin-bottom:18px}.slider:last-child{margin-bottom:0}
  .slider .top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
  .slider .top .n{font-size:14px}.slider .top .v{font-size:13.5px;font-weight:600;color:var(--acc)}
  .rng{-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:3px;background:rgba(255,255,255,.12);outline:none;cursor:pointer}
  .rng::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--acc);border:3px solid #cdddff;box-shadow:0 2px 8px rgba(79,124,245,.5);cursor:pointer}
  .rng::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--acc);border:3px solid #cdddff;cursor:pointer}
  .liq-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .liq{display:flex;align-items:center;justify-content:center;gap:8px;height:44px;border:1px solid var(--border);border-radius:11px;background:rgba(255,255,255,.02);color:var(--muted);cursor:pointer;font-family:inherit;font-size:14px}
  .liq svg{width:16px;height:16px}.liq.active{border-color:var(--acc);background:var(--acc-soft);color:var(--acc)}
  @media (max-width:1050px){.sidebar{width:240px}.fpanel{width:280px}}
}

/* ===== MD Codes Simulation (pg-mdcodes) ===== */
body.pg-mdcodes{
  --bg:#070710;--sidebar:#08080f;--panel:#0c0c15;--card:#12121c;
  --border:rgba(255,255,255,.07);--border-strong:rgba(255,255,255,.12);
  --text:#f4f4f6;--muted:#8b8b9a;--muted-2:#6c6c7a;--indigo:#4f46e5;--indigo-soft:#7c7cf0;
  --acc:#7c5cff;--acc-soft:rgba(124,92,255,.16);
  font-family:'Geist',system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;font-feature-settings:"ss01";height:100vh;overflow:hidden;box-sizing:border-box;margin:0;padding:0;
  *{box-sizing:border-box;margin:0;padding:0}
  a,button{transition:background-color .22s ease,border-color .22s ease,color .18s ease,box-shadow .2s ease}
  .app{display:flex;height:100vh;overflow:hidden}
  .sidebar{width:240px;flex-shrink:0;background:var(--sidebar);border-right:1px solid var(--border);padding:20px 22px;display:flex;flex-direction:column;overflow:hidden;transition:width .25s ease}
  .logo{font-size:27px;font-weight:600;letter-spacing:-.5px;display:flex;align-items:center;justify-content:space-between;height:45px;margin:0 -22px 20px;padding:0 22px 0 28px;border-bottom:1px solid var(--border)}
  .logo .x{background:linear-gradient(135deg,#6366f1,#a78bfa);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:700}
  .logo-text{display:flex;align-items:center;gap:4px}
  .logo-actions{display:flex;align-items:center;gap:10px}
  .logo-actions .lbell{width:34px;height:34px;border-radius:10px;border:1px solid var(--border-strong);background:transparent;color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer}
  .logo-actions .lbell svg{width:18px;height:18px}
  .logo-actions .lav{width:34px;height:34px;border-radius:50%;object-fit:cover;cursor:pointer;background:#222}
  .nav-label{font-size:12.5px;color:var(--muted-2);margin:0 0 12px 10px}
  .nav{display:flex;flex-direction:column;gap:3px}
  .nav a{display:flex;align-items:center;gap:14px;padding:10px 16px;border-radius:11px;color:var(--muted);text-decoration:none;font-size:15px;transition:.15s}
  .nav a svg{width:20px;height:20px;stroke-width:1.7;flex-shrink:0}
  .nav a:hover{color:var(--text);background:rgba(255,255,255,.03)}
  .nav a.active{background:var(--indigo);color:#fff;font-weight:500;box-shadow:0 6px 20px rgba(79,70,229,.35)}
  .upgrade-card{margin-top:auto;background:rgba(255,255,255,.02);border:1px solid var(--border);border-radius:16px;padding:16px}
  .upgrade-card .head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:6px}
  .upgrade-card h4{font-size:16px;font-weight:600;color:var(--indigo-soft)}
  .upgrade-card .crown{width:32px;height:32px;border-radius:10px;background:radial-gradient(circle at 30% 30%,#3a2f14,#1b1607);display:flex;align-items:center;justify-content:center;font-size:16px}
  .upgrade-card p{font-size:13px;color:var(--muted);line-height:1.45;margin-bottom:14px}
  .upgrade-card button{background:var(--indigo);color:#fff;border:none;padding:10px 20px;border-radius:10px;font-family:inherit;font-size:14px;font-weight:500;cursor:pointer}
  .side-bottom{padding-top:18px;display:flex;flex-direction:column;gap:14px}
  .side-bottom a{display:flex;align-items:center;gap:14px;color:var(--muted);text-decoration:none;font-size:15px;padding-left:6px}
  .side-bottom a svg{width:19px;height:19px;stroke-width:1.7}
  .app.collapsed .sidebar{width:76px}
  .app.collapsed .logo{justify-content:center;padding:0}
  .app.collapsed .logo-after,.app.collapsed .logo-actions,.app.collapsed .nav-label,.app.collapsed .upgrade-card{display:none}
  .app.collapsed .nav a,.app.collapsed .side-bottom a{justify-content:center;gap:0;padding-left:0;font-size:0}
  .app.collapsed .nav a{padding:11px 0}
  .app.collapsed .nav a svg,.app.collapsed .side-bottom a svg{font-size:initial}
  .side-handle{position:fixed;bottom:17px;left:201px;z-index:60;width:28px;height:28px;border-radius:50%;background:#15151f;border:1px solid var(--border-strong);color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:left .25s ease}
  .side-handle:hover{color:#fff;background:#1d1d2a}.side-handle svg{width:15px;height:15px}
  .app.collapsed ~ .side-handle{left:61px}.side-handle .ic-expand{display:none}
  .app.collapsed ~ .side-handle .ic-collapse{display:none}.app.collapsed ~ .side-handle .ic-expand{display:block}
  .menu{position:fixed;z-index:200;width:300px;background:#10101c;border:1px solid var(--border-strong);border-radius:14px;box-shadow:0 24px 60px rgba(0,0,0,.55);padding:8px;display:none}
  .menu.show{display:block;animation:menupop .18s ease}
  .menu-head{padding:10px 12px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;margin-bottom:6px}
  .menu-head .mh-t{font-size:15px;font-weight:600}.menu-head img{width:42px;height:42px;border-radius:50%;object-fit:cover}.menu-head .e{font-size:12.5px;color:var(--muted);margin-top:2px}
  .menu-item{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:9px;color:var(--text);font-size:14px;cursor:pointer;text-decoration:none}
  .menu-item:hover{background:rgba(255,255,255,.05)}.menu-item svg{width:17px;height:17px;color:var(--muted)}.menu-item.danger,.menu-item.danger svg{color:#ef6b6b}
  .menu-div{height:1px;background:var(--border);margin:6px 8px}
  .noti{display:flex;gap:11px;padding:11px 12px;border-radius:9px;cursor:pointer}.noti:hover{background:rgba(255,255,255,.04)}
  .noti .nic{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.noti .nic svg{width:16px;height:16px}
  .noti .nt{font-size:13.5px}.noti .ntime{font-size:12px;color:var(--muted);margin-top:2px}
  .menu-foot{text-align:center;padding:9px;border-top:1px solid var(--border);margin-top:4px}.menu-foot a{color:var(--indigo-soft);font-size:13px;text-decoration:none}
  .main{flex:1;padding:20px 26px;min-width:0;display:flex;flex-direction:column;overflow:hidden}
  .back-link{display:inline-flex;align-items:center;gap:8px;color:var(--muted);text-decoration:none;font-size:15px;flex-shrink:0;align-self:flex-start}
  .back-link:hover{color:var(--text)}
  .back-link svg{width:17px;height:17px}
  .fp-topbar{display:flex;align-items:center;justify-content:space-between;gap:12px}
  .credit-cluster{display:flex;align-items:center;gap:10px}
  .credit-cluster .cc-bal{display:flex;align-items:center;gap:9px;padding:7px 14px;border:1px solid var(--border);border-radius:24px;background:rgba(18,18,28,.92);font-size:13px;color:var(--muted);box-shadow:0 6px 22px rgba(0,0,0,.35)}
  .credit-cluster .cc-ic{width:16px;height:16px;color:#818cf8;fill:currentColor}
  .credit-cluster b{color:#fff;font-weight:700}
  .credit-cluster .cc-btn{display:inline-flex;align-items:center;gap:5px;padding:8px 14px;border-radius:22px;border:1px solid var(--border);background:rgba(18,18,28,.92);color:#fff;font-weight:600;font-size:12.5px;text-decoration:none;cursor:pointer}
  .credit-cluster .cc-topup{background:linear-gradient(90deg,#4f46e5,#6366f1);border-color:transparent}
  .credit-cluster .cc-btn:hover{filter:brightness(1.12)}
  .credit-cluster .cc-btn svg{width:14px;height:14px}
  .editor{flex:1;min-height:0;display:flex;border:1px solid var(--border-strong);border-radius:18px;overflow:hidden;background:var(--panel);margin-top:12px}
  .canvas{flex:1;position:relative;overflow:hidden;background:radial-gradient(70% 70% at 50% 45%,#13131f,#0a0a12 75%)}
  .canvas.stage-light{background:radial-gradient(70% 70% at 50% 45%,#f3f4f8,#dfe3ec 75%)}
  .canvas.stage-dark{background:radial-gradient(70% 70% at 50% 45%,#13131f,#0a0a12 75%)}
  .sim-canvas{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(1);transform-origin:center;display:none;border-radius:10px;box-shadow:0 12px 50px rgba(0,0,0,.55);cursor:default;touch-action:none;max-width:none}
  .tools-left{position:absolute;top:18px;left:18px;display:flex;flex-direction:column;gap:8px;z-index:7}
  .tbtn{width:40px;height:40px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid var(--border);color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.15s}
  .tbtn:hover{background:rgba(255,255,255,.08);color:#fff}.tbtn svg{width:18px;height:18px}
  .zoom-chips{position:absolute;top:18px;right:18px;display:flex;flex-direction:column;gap:8px;align-items:flex-end;z-index:7}
  .chip{padding:8px 14px;border:1px solid var(--border);border-radius:9px;font-size:13px;color:var(--muted);background:rgba(255,255,255,.03);max-width:240px;text-align:right}
  .chip b{color:var(--text);margin-left:5px}
  .canvas-center{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:14px}
  .btn-upload{background:#fff;color:#15151c;border:none;padding:13px 24px;border-radius:11px;font-family:inherit;font-size:15px;font-weight:500;cursor:pointer}
  .btn-select{background:var(--acc);color:#fff;border:none;padding:13px 24px;border-radius:11px;font-family:inherit;font-size:15px;font-weight:500;cursor:pointer;box-shadow:0 8px 24px rgba(124,92,255,.4)}
  .tools-bottom{position:absolute;bottom:18px;left:18px;display:flex;gap:10px;z-index:7}
  .bbtn{width:44px;height:44px;border-radius:11px;background:rgba(255,255,255,.05);border:1px solid var(--border);color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.15s}
  .bbtn:hover{background:rgba(255,255,255,.09);color:#fff}.bbtn svg{width:19px;height:19px}
  .bbtn-wide{width:auto;padding:0 14px;gap:8px;font-family:inherit;font-size:13px}
  .bbtn.active,.tbtn.active{background:var(--acc-soft);color:var(--acc);border-color:var(--acc)}
  .fpanel{width:340px;flex-shrink:0;border-left:1px solid var(--border);background:var(--panel);display:flex;flex-direction:column;overflow-y:auto}
  .fpanel::-webkit-scrollbar{width:8px}.fpanel::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:8px}
  .panel-head{padding:20px 22px 14px;font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--muted)}
  .seg{display:flex;gap:6px;margin:0 22px 4px;background:rgba(255,255,255,.04);padding:5px;border-radius:11px}
  .seg button{flex:1;border:none;background:none;color:var(--muted);font-family:inherit;font-size:13px;font-weight:500;padding:9px 0;border-radius:8px;cursor:pointer}
  .seg button.active{background:#1c1c28;color:#fff}
  .sec{border-top:1px solid var(--border);padding:18px 22px}
  .sec-lbl{font-size:11.5px;font-weight:600;letter-spacing:.06em;color:var(--muted);margin-bottom:14px}
  .hist-hint{font-size:12px;color:var(--muted);margin-bottom:12px;opacity:.8}
  .hist-list{display:flex;flex-direction:column;gap:5px}
  .hist-empty{font-size:13px;color:var(--muted);opacity:.7;padding:8px 2px}
  .hist-item{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:9px;cursor:pointer;color:var(--muted);font-size:13px;border:1px solid transparent;transition:.15s}
  .hist-item:hover{background:rgba(255,255,255,.05)}
  .hist-item.active{background:var(--acc-soft);border-color:var(--acc);color:#fff}
  .hist-item.future{opacity:.4}
  .hist-item .dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex-shrink:0;opacity:.65}
  .hist-item .lbl{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .hist-item .idx{font-size:11px;opacity:.45}
  .ai-recommend{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:12px;border-radius:10px;border:1px solid rgba(124,92,255,.5);background:linear-gradient(90deg,rgba(124,92,255,.3),rgba(167,139,250,.22));color:#ece6ff;cursor:pointer;font-family:inherit;font-size:13.5px;font-weight:600;transition:.15s}
  .ai-recommend:hover{background:linear-gradient(90deg,rgba(124,92,255,.46),rgba(167,139,250,.34));box-shadow:0 0 18px rgba(124,92,255,.4)}
  .ai-recommend svg{width:16px;height:16px}
  .ai-recommend:disabled{opacity:.55;cursor:default;box-shadow:none}
  .ai-cost{margin-left:auto;display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:600;padding:3px 9px;border-radius:20px;background:rgba(255,255,255,.14);color:#eef1ff}
  .ai-cost svg{width:12px;height:12px}
  .btn-export{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:12px;border-radius:10px;border:1px solid var(--border-strong);background:rgba(255,255,255,.04);color:var(--text);font-family:inherit;font-weight:600;font-size:13.5px;cursor:pointer;transition:.15s}
  .btn-export:hover{background:rgba(255,255,255,.08)}
  .btn-export svg{width:17px;height:17px}
  .btn-save-album{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:12px;border-radius:10px;border:none;background:linear-gradient(135deg,#6366f1,#4f46e5);color:#fff;font-family:inherit;font-weight:600;font-size:13.5px;cursor:pointer;transition:.15s;box-shadow:0 6px 18px rgba(79,70,229,.35)}
  .btn-save-album:hover{filter:brightness(1.1)}
  .btn-save-album:disabled{opacity:.55;cursor:default;box-shadow:none}
  .btn-save-album svg{width:17px;height:17px}
  /* MD-Code specific */
  .md-hint{font-size:12px;color:var(--muted);margin-top:10px;line-height:1.5;opacity:.85}
  .md-goal-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .md-goal{height:42px;border:1px solid var(--border);border-radius:11px;background:rgba(255,255,255,.02);color:var(--muted);cursor:pointer;font-family:inherit;font-size:13px;transition:.15s}
  .md-goal:hover{background:rgba(255,255,255,.05)}
  .md-goal.active{border-color:var(--acc);background:var(--acc-soft);color:#fff;font-weight:600}
  .md-region-grid{display:flex;flex-direction:column;gap:8px}
  .md-region{display:flex;align-items:center;gap:11px;height:44px;padding:0 14px;border:1px solid var(--border);border-radius:11px;background:rgba(255,255,255,.02);color:var(--muted);cursor:pointer;font-size:14px;font-family:inherit;transition:.15s}
  .md-region:hover{background:rgba(255,255,255,.05)}
  .md-region.active{border-color:var(--acc);background:var(--acc-soft);color:#fff}
  .md-region i{margin-left:auto;font-style:normal;font-size:12px;color:var(--muted-2);font-weight:600;letter-spacing:.04em}
  .md-region.active i{color:#cfc3ff}
  .md-dot{width:11px;height:11px;border-radius:50%;flex-shrink:0;box-shadow:0 0 0 2px rgba(255,255,255,.12)}
  .md-totals{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
  .md-tot{border:1px solid var(--border);border-radius:11px;padding:10px 12px;background:rgba(255,255,255,.02)}
  .md-tot .t{display:block;font-size:11.5px;color:var(--muted);margin-bottom:4px}
  .md-tot b{font-size:18px;color:#fff}
  .md-warn{display:flex;gap:9px;align-items:flex-start;padding:11px 12px;border-radius:11px;background:rgba(248,113,113,.12);border:1px solid rgba(248,113,113,.35);color:#f7a6a6;font-size:12px;line-height:1.45;margin-bottom:14px}
  .md-warn svg{width:17px;height:17px;flex-shrink:0;margin-top:1px;color:#f87171}
  .md-warn b{color:#ffd3d3}
  .md-plan-list{display:flex;flex-direction:column;gap:8px}
  .md-plan-empty{font-size:13px;color:var(--muted);opacity:.85;line-height:1.5;padding:6px 2px}
  .md-plan-row{display:flex;gap:11px;padding:11px 12px;border:1px solid var(--border);border-radius:11px;background:rgba(255,255,255,.02)}
  .md-plan-row .md-dot{margin-top:4px;box-shadow:0 0 0 2px rgba(0,0,0,.3)}
  .md-plan-main{flex:1;min-width:0}
  .md-plan-h{display:flex;align-items:center;gap:7px;font-size:13.5px;color:#fff}
  .md-plan-h b{font-weight:700}
  .md-plan-ml{margin-left:auto;font-weight:700;color:var(--acc)}
  .md-x{color:var(--muted);font-size:12px}
  .md-red{font-size:10px;font-weight:600;color:#f87171;background:rgba(248,113,113,.16);padding:2px 7px;border-radius:20px}
  .md-plan-sub{font-size:11.5px;color:var(--muted);margin-top:3px;line-height:1.4}
  .md-plan-note{font-size:11.5px;color:var(--muted-2);margin-top:2px;font-style:italic;line-height:1.4}
  .md-toast{position:absolute;left:50%;bottom:74px;transform:translateX(-50%) translateY(8px);z-index:9;padding:8px 16px;border-radius:20px;background:rgba(12,12,20,.86);border:1px solid var(--border-strong);color:#fff;font-size:12.5px;font-weight:500;box-shadow:0 8px 24px rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease}
  .md-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
  .md-local-sim{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:8px;padding:11px;border-radius:10px;border:1px solid var(--border-strong);background:var(--panel-2,rgba(255,255,255,.04));color:var(--text);cursor:pointer;font-family:inherit;font-size:13px;font-weight:600;transition:.15s}
  .md-local-sim svg{width:18px;height:18px;flex:0 0 auto}
  .md-local-sim:hover{border-color:var(--accent,#7c5cff);background:rgba(124,92,255,.12)}
  .md-local-sim.active{border-color:#22c55e;background:rgba(34,197,94,.16);color:#bbf7d0}
  .md-local-hint{margin-top:6px;font-size:11px;line-height:1.4;color:var(--text-dim,#9aa0ad);text-align:center}
  .md-points-bar{position:absolute;top:14px;left:50%;transform:translateX(-50%);z-index:7;display:flex;align-items:center;gap:8px;padding:5px 10px;border-radius:10px;background:rgba(12,12,20,.82);border:1px solid var(--border-strong)}
  .md-pb-eye{display:inline-flex;width:30px;height:26px;align-items:center;justify-content:center;border-radius:7px;border:1px solid transparent;background:transparent;color:var(--text-dim,#9aa0ad);cursor:pointer}
  .md-pb-eye svg{width:17px;height:17px}
  .md-pb-eye.active{color:#fff;background:rgba(124,92,255,.25);border-color:rgba(124,92,255,.5)}
  .md-pb-lbl{font-size:12px;color:var(--text-dim,#9aa0ad);font-weight:600}
  .md-points-bar input[type=range]{width:96px;accent-color:var(--accent,#7c5cff)}
  .md-points-bar b{font-size:11.5px;color:var(--text);min-width:34px;text-align:right}
  .md-liq-bar{position:absolute;bottom:120px;left:50%;transform:translateX(-50%);z-index:7;display:flex;align-items:center;gap:12px;padding:8px 12px;border-radius:12px;background:rgba(12,12,20,.9);border:1px solid var(--border-strong);box-shadow:0 10px 30px rgba(0,0,0,.5);flex-wrap:wrap;max-width:92%}
  .md-liq-modes{display:flex;gap:4px}
  .md-liq-m{padding:6px 11px;border-radius:8px;border:1px solid var(--border-strong);background:transparent;color:var(--text-dim,#9aa0ad);font-family:inherit;font-size:12px;font-weight:600;cursor:pointer;transition:.12s}
  .md-liq-m:hover{color:var(--text)}
  .md-liq-m.active{background:rgba(124,92,255,.28);border-color:rgba(124,92,255,.55);color:#fff}
  .md-liq-sl{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--text-dim,#9aa0ad)}
  .md-liq-sl input[type=range]{width:84px;accent-color:var(--accent,#7c5cff)}
  .md-liq-sl b{color:var(--text);min-width:24px;text-align:right}
  .md-liq-act{padding:6px 12px;border-radius:8px;border:1px solid var(--border-strong);background:transparent;color:var(--text);font-family:inherit;font-size:12px;font-weight:600;cursor:pointer}
  .md-liq-act:hover{border-color:var(--accent,#7c5cff)}
  .md-liq-act.done{background:#22c55e;border-color:#22c55e;color:#05230f}
  .md-liq-ring{position:absolute;z-index:8;border:2px solid rgba(255,255,255,.9);border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;display:none;box-shadow:0 0 0 1px rgba(0,0,0,.5),inset 0 0 0 1px rgba(0,0,0,.3)}
  .md-layer{position:absolute;inset:0;z-index:6;pointer-events:none;transition:opacity .2s ease}
  .md-pt{position:absolute;transform:translate(-50%,-50%);width:18px;height:18px;border-radius:50%;border:2px solid var(--rc);background:rgba(12,12,20,.5);cursor:pointer;pointer-events:auto;padding:0;font-family:inherit;box-shadow:0 1px 6px rgba(0,0,0,.55);transition:transform .1s ease,background .15s ease}
  .md-pt:hover{transform:translate(-50%,-50%) scale(1.22);z-index:2}
  .md-pt.on{background:var(--rc);box-shadow:0 0 0 3px rgba(255,255,255,.22),0 2px 8px rgba(0,0,0,.5)}
  .md-pt.red::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1.5px dashed rgba(248,113,113,.85);pointer-events:none}
  .md-pt-lbl{position:absolute;left:50%;top:-9px;transform:translate(-50%,-100%);background:rgba(8,8,15,.9);color:#fff;font-size:10px;font-weight:700;letter-spacing:.02em;padding:2px 6px;border-radius:6px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .12s ease;box-shadow:0 2px 8px rgba(0,0,0,.5)}
  .md-pt:hover .md-pt-lbl,.md-pt.on .md-pt-lbl{opacity:1}
  .md-ba{position:absolute;inset:0;display:none;gap:10px;align-items:center;justify-content:center;padding:18px;z-index:5;background:rgba(7,7,16,.72)}
  .md-ba-col{flex:1;height:100%;display:flex;align-items:center;justify-content:center;position:relative}
  .md-ba-col canvas{max-width:100%;max-height:100%;object-fit:contain;border-radius:8px;box-shadow:0 6px 24px rgba(0,0,0,.45)}
  .md-ba-lbl{position:absolute;top:10px;left:10px;font:600 11px sans-serif;letter-spacing:.6px;color:#fff;background:rgba(0,0,0,.55);padding:3px 9px;border-radius:6px}
  /* AI overlay (matches filler) */
  .ai-overlay{position:absolute;inset:0;z-index:9;display:none;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:rgba(7,7,16,.82);text-align:center;padding:24px}
  .ai-overlay.show{display:flex}
  .ai-ring-wrap{position:relative;width:96px;height:96px;display:flex;align-items:center;justify-content:center}
  .ai-ring{width:96px;height:96px;transform:rotate(-90deg)}
  .ai-ring-bg{fill:none;stroke:rgba(255,255,255,.12);stroke-width:7}
  .ai-ring-fg{fill:none;stroke:#a78bfa;stroke-width:7;stroke-linecap:round;transition:stroke-dashoffset .2s linear}
  .ai-pct{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;font-size:19px}
  .ai-overlay .ai-text{color:#fff;font-size:14px;font-weight:600}
  .ai-overlay .ai-sub{color:#9aa3bd;font-size:12px;max-width:80%}
  .ai-overlay img{max-width:92%;max-height:80%;border-radius:12px;box-shadow:0 10px 40px rgba(0,0,0,.5)}
  .ai-overlay .ai-close{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:8px;border:1px solid rgba(255,255,255,.16);background:rgba(0,0,0,.45);color:#fff;font-size:20px;line-height:1;cursor:pointer}
  .ai-mini-btn{margin-top:8px;padding:9px 20px;border-radius:9px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.07);color:#fff;font-family:inherit;font-size:12.5px;font-weight:600;cursor:pointer}
  .ai-mini-btn.acc{border:none;background:var(--acc);color:#fff}
  @media (max-width:1050px){.sidebar{width:240px}.fpanel{width:300px}}
}

/* ===== Eyebrow Design (pg-eyebrow) — moved from inline ===== */
@keyframes bbspin{to{transform:rotate(360deg)}}
@keyframes mmfade{from{opacity:0}to{opacity:1}}
body.pg-eyebrow{
  --bg:#070710;--sidebar:#08080f;--panel:#0c0c15;--card:#12121c;
  --border:rgba(255,255,255,.07);--border-strong:rgba(255,255,255,.12);
  --text:#f4f4f6;--muted:#8b8b9a;--muted-2:#6c6c7a;--indigo:#4f46e5;--indigo-soft:#7c7cf0;
  --acc:#4f7cf5;--acc-soft:rgba(79,124,245,.16);
  font-family:'Geist',system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;font-feature-settings:"ss01";height:100vh;overflow:hidden;box-sizing:border-box;margin:0;padding:0;
  *{box-sizing:border-box;margin:0;padding:0}
  a,button{transition:background-color .22s ease,border-color .22s ease,color .18s ease,box-shadow .2s ease}
  .app{display:flex;height:100vh;overflow:hidden}
  .sidebar{width:240px;flex-shrink:0;background:var(--sidebar);border-right:1px solid var(--border);padding:20px 22px;display:flex;flex-direction:column;overflow:hidden;transition:width .25s ease}
  .logo{font-size:27px;font-weight:600;letter-spacing:-.5px;display:flex;align-items:center;justify-content:space-between;height:45px;margin:0 -22px 20px;padding:0 22px 0 28px;border-bottom:1px solid var(--border)}
  .logo .x{background:linear-gradient(135deg,#6366f1,#a78bfa);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:700}
  .logo-text{display:flex;align-items:center;gap:4px}
  .logo-actions{display:flex;align-items:center;gap:10px}
  .logo-actions .lbell{width:34px;height:34px;border-radius:10px;border:1px solid var(--border-strong);background:transparent;color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer}
  .logo-actions .lbell svg{width:18px;height:18px}
  .logo-actions .lav{width:34px;height:34px;border-radius:50%;object-fit:cover;cursor:pointer;background:#222}
  .nav-label{font-size:12.5px;color:var(--muted-2);margin:0 0 12px 10px}
  .nav{display:flex;flex-direction:column;gap:3px}
  .nav a{display:flex;align-items:center;gap:14px;padding:10px 16px;border-radius:11px;color:var(--muted);text-decoration:none;font-size:15px;transition:.15s}
  .nav a svg{width:20px;height:20px;stroke-width:1.7;flex-shrink:0}
  .nav a:hover{color:var(--text);background:rgba(255,255,255,.03)}
  .nav a.active{background:var(--indigo);color:#fff;font-weight:500;box-shadow:0 6px 20px rgba(79,70,229,.35)}
  .upgrade-card{margin-top:auto;background:rgba(255,255,255,.02);border:1px solid var(--border);border-radius:16px;padding:16px}
  .upgrade-card .head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:6px}
  .upgrade-card h4{font-size:16px;font-weight:600;color:var(--indigo-soft)}
  .upgrade-card .crown{width:32px;height:32px;border-radius:10px;background:radial-gradient(circle at 30% 30%,#3a2f14,#1b1607);display:flex;align-items:center;justify-content:center;font-size:16px}
  .upgrade-card p{font-size:13px;color:var(--muted);line-height:1.45;margin-bottom:14px}
  .upgrade-card button{background:var(--indigo);color:#fff;border:none;padding:10px 20px;border-radius:10px;font-family:inherit;font-size:14px;font-weight:500;cursor:pointer}
  .side-bottom{padding-top:18px;display:flex;flex-direction:column;gap:14px}
  .side-bottom a{display:flex;align-items:center;gap:14px;color:var(--muted);text-decoration:none;font-size:15px;padding-left:6px}
  .side-bottom a svg{width:19px;height:19px;stroke-width:1.7}
  .app.collapsed .sidebar{width:76px}
  .app.collapsed .logo{justify-content:center;padding:0}
  .app.collapsed .logo-after,.app.collapsed .logo-actions,.app.collapsed .nav-label,.app.collapsed .upgrade-card{display:none}
  .app.collapsed .nav a,.app.collapsed .side-bottom a{justify-content:center;gap:0;padding-left:0;font-size:0}
  .app.collapsed .nav a{padding:11px 0}
  .app.collapsed .nav a svg,.app.collapsed .side-bottom a svg{font-size:initial}
  .side-handle{position:fixed;bottom:17px;left:201px;z-index:60;width:28px;height:28px;border-radius:50%;background:#15151f;border:1px solid var(--border-strong);color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:left .25s ease}
  .side-handle:hover{color:#fff;background:#1d1d2a}.side-handle svg{width:15px;height:15px}
  .app.collapsed ~ .side-handle{left:61px}.side-handle .ic-expand{display:none}
  .app.collapsed ~ .side-handle .ic-collapse{display:none}.app.collapsed ~ .side-handle .ic-expand{display:block}
  .menu{position:fixed;z-index:200;width:300px;background:#10101c;border:1px solid var(--border-strong);border-radius:14px;box-shadow:0 24px 60px rgba(0,0,0,.55);padding:8px;display:none}
  .menu.show{display:block;animation:menupop .18s ease}
  .menu-head{padding:10px 12px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;margin-bottom:6px}
  .menu-head .mh-t{font-size:15px;font-weight:600}.menu-head img{width:42px;height:42px;border-radius:50%;object-fit:cover}.menu-head .e{font-size:12.5px;color:var(--muted);margin-top:2px}
  .menu-item{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:9px;color:var(--text);font-size:14px;cursor:pointer;text-decoration:none}
  .menu-item:hover{background:rgba(255,255,255,.05)}.menu-item svg{width:17px;height:17px;color:var(--muted)}.menu-item.danger,.menu-item.danger svg{color:#ef6b6b}
  .menu-div{height:1px;background:var(--border);margin:6px 8px}
  .noti{display:flex;gap:11px;padding:11px 12px;border-radius:9px;cursor:pointer}.noti:hover{background:rgba(255,255,255,.04)}
  .noti .nic{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.noti .nic svg{width:16px;height:16px}
  .noti .nt{font-size:13.5px}.noti .ntime{font-size:12px;color:var(--muted);margin-top:2px}
  .menu-foot{text-align:center;padding:9px;border-top:1px solid var(--border);margin-top:4px}.menu-foot a{color:var(--indigo-soft);font-size:13px;text-decoration:none}
  .main{flex:1;padding:20px 26px;min-width:0;display:flex;flex-direction:column;overflow:hidden}
  .back-link{display:inline-flex;align-items:center;gap:8px;color:var(--muted);text-decoration:none;font-size:15px;flex-shrink:0;align-self:flex-start}
  .back-link:hover{color:var(--text)}
  .back-link svg{width:17px;height:17px}
  .fp-topbar{display:flex;align-items:center;justify-content:space-between;gap:12px}
  .editor{flex:1;min-height:0;display:flex;border:1px solid var(--border-strong);border-radius:18px;overflow:hidden;background:var(--panel);margin-top:12px}
  .canvas{flex:1;position:relative;overflow:hidden;background:radial-gradient(70% 70% at 50% 45%,#13131f,#0a0a12 75%)}
  .sim-canvas{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(1);transform-origin:center;display:none;border-radius:10px;box-shadow:0 12px 50px rgba(0,0,0,.55);cursor:crosshair;touch-action:none;max-width:none}
  .tools-left{position:absolute;top:18px;left:18px;display:flex;flex-direction:column;gap:8px;z-index:7}
  .tbtn{width:40px;height:40px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid var(--border);color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.15s}
  .tbtn:hover{background:rgba(255,255,255,.08);color:#fff}.tbtn svg{width:18px;height:18px}
  .zoom-chips{position:absolute;top:18px;right:18px;display:flex;flex-direction:column;gap:8px;align-items:flex-end;z-index:7}
  .chip{padding:8px 14px;border:1px solid var(--border);border-radius:9px;font-size:13px;color:var(--muted);background:rgba(255,255,255,.03)}
  .chip b{color:var(--text);margin-left:5px}
  .canvas-center{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:14px}
  .btn-upload{background:#fff;color:#15151c;border:none;padding:13px 24px;border-radius:11px;font-family:inherit;font-size:15px;font-weight:500;cursor:pointer}
  .btn-select{background:var(--acc);color:#fff;border:none;padding:13px 24px;border-radius:11px;font-family:inherit;font-size:15px;font-weight:500;cursor:pointer;box-shadow:0 8px 24px rgba(79,124,245,.4)}
  .tools-bottom{position:absolute;bottom:18px;left:18px;display:flex;gap:10px;z-index:7}
  .bbtn{width:44px;height:44px;border-radius:11px;background:rgba(255,255,255,.05);border:1px solid var(--border);color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.15s}
  .bbtn:hover{background:rgba(255,255,255,.09);color:#fff}.bbtn svg{width:19px;height:19px}
  .bbtn.active,.tbtn.active{background:var(--acc-soft);color:var(--acc);border-color:var(--acc)}
  .fpanel{width:320px;flex-shrink:0;border-left:1px solid var(--border);background:var(--panel);display:flex;flex-direction:column;overflow-y:auto}
  .fpanel::-webkit-scrollbar{width:8px}.fpanel::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:8px}
  .panel-head{padding:20px 22px 14px;font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--muted)}
  .seg{display:flex;gap:6px;margin:0 22px 4px;background:rgba(255,255,255,.04);padding:5px;border-radius:11px}
  .seg button{flex:1;border:none;background:none;color:var(--muted);font-family:inherit;font-size:13px;font-weight:500;padding:9px 0;border-radius:8px;cursor:pointer}
  .seg button.active{background:#1c1c28;color:#fff}
  .sec{border-top:1px solid var(--border);padding:18px 22px}
  .sec-lbl{font-size:11.5px;font-weight:600;letter-spacing:.06em;color:var(--muted);margin-bottom:14px}
  .sec-lbl.icon{display:flex;align-items:center;gap:8px}.sec-lbl.icon svg{width:15px;height:15px}
  .slider{margin-bottom:18px}.slider:last-child{margin-bottom:0}
  .slider .top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
  .slider .top .n{font-size:14px}.slider .top .v{font-size:13.5px;font-weight:600;color:var(--acc)}
  .rng{-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:3px;background:rgba(255,255,255,.12);outline:none;cursor:pointer}
  .rng::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--acc);border:3px solid #cdddff;box-shadow:0 2px 8px rgba(79,124,245,.5);cursor:pointer}
  .rng::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--acc);border:3px solid #cdddff;cursor:pointer}
  .liq-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .liq{display:flex;align-items:center;justify-content:center;gap:8px;height:44px;border:1px solid var(--border);border-radius:11px;background:rgba(255,255,255,.02);color:var(--muted);cursor:pointer;font-family:inherit;font-size:14px}
  .liq svg{width:16px;height:16px}.liq.active{border-color:var(--acc);background:var(--acc-soft);color:var(--acc)}
  .zone-grid{display:grid;grid-template-columns:1fr;gap:12px}
  .zone{display:flex;align-items:center;gap:10px;height:46px;padding:0 14px;border:1px solid var(--border);border-radius:11px;background:rgba(255,255,255,.02);color:var(--muted);cursor:pointer;font-family:inherit;font-size:14px;transition:.15s}
  .zone:hover{background:rgba(255,255,255,.05)}.zone svg{width:18px;height:18px}
  .zone.active{border-color:var(--acc);background:var(--acc-soft);color:#fff}
  .brow-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .brow-opt{padding:6px;border:1px solid var(--border);border-radius:10px;background:#f3f0ec;cursor:pointer;overflow:hidden;line-height:0}
  .brow-opt:hover{border-color:var(--border-strong)}
  .brow-opt.active{border-color:var(--acc);box-shadow:0 0 0 2px var(--acc-soft)}
  .brow-hint{font-size:12px;color:var(--muted);margin-bottom:12px;opacity:.8}
  .hist-hint{font-size:12px;color:var(--muted);margin-bottom:12px;opacity:.8}
  .hist-list{display:flex;flex-direction:column;gap:5px}
  .hist-empty{font-size:13px;color:var(--muted);opacity:.7;padding:8px 2px}
  .hist-item{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:9px;cursor:pointer;color:var(--muted);font-size:13px;border:1px solid transparent;transition:.15s}
  .hist-item:hover{background:rgba(255,255,255,.05)}
  .hist-item.active{background:var(--acc-soft);border-color:var(--acc);color:#fff}
  .hist-item.future{opacity:.4}
  .hist-item .dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex-shrink:0;opacity:.65}
  .hist-item .lbl{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .hist-item .idx{font-size:11px;opacity:.45}
  .ai-recommend{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:11px;border-radius:10px;border:1px solid rgba(124,124,240,.5);background:linear-gradient(90deg,rgba(79,70,229,.28),rgba(129,140,248,.2));color:#e3e6ff;cursor:pointer;font-family:inherit;font-size:13px;font-weight:600;transition:.15s}
  .ai-recommend:hover{background:linear-gradient(90deg,rgba(79,70,229,.45),rgba(129,140,248,.34));box-shadow:0 0 18px rgba(99,102,241,.35)}
  .ai-recommend svg{width:16px;height:16px}
  .ai-recommend:disabled{opacity:.55;cursor:default;box-shadow:none}
  .ai-cost{margin-left:auto;display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:600;padding:3px 9px;border-radius:20px;background:rgba(255,255,255,.14);color:#eef1ff}
  .ai-cost svg{width:12px;height:12px}
  .btn-ghost{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:10px;padding:11px;border-radius:10px;border:1px solid var(--border-strong);background:rgba(255,255,255,.03);color:var(--text);cursor:pointer;font-family:inherit;font-size:13px;font-weight:600}
  .btn-ghost:hover{background:rgba(255,255,255,.07)}.btn-ghost svg{width:16px;height:16px}.btn-ghost:disabled{opacity:.55;cursor:default}
  .btn-ghost.active{border-color:var(--acc);background:rgba(231,103,155,.16);color:#fff}
  .btn-ghost.loading svg{animation:bbspin 1s linear infinite}
  .btn-ghost .ai-cost{background:rgba(255,255,255,.1)}
  .btn-export{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:12px;border-radius:10px;border:1px solid var(--acc);background:var(--acc);color:#fff;font-family:inherit;font-weight:600;font-size:13.5px;cursor:pointer;transition:.15s}
  .btn-export:hover{filter:brightness(1.12)}
  .btn-export svg{width:17px;height:17px}
  .credit-cluster{display:flex;align-items:center;gap:10px}
  .credit-cluster .cc-bal{display:flex;align-items:center;gap:9px;padding:7px 14px;border:1px solid var(--border);border-radius:24px;background:rgba(18,18,28,.92);font-size:13px;color:var(--muted);box-shadow:0 6px 22px rgba(0,0,0,.35)}
  .credit-cluster .cc-ic{width:16px;height:16px;color:#818cf8;fill:currentColor}
  .credit-cluster b{color:#fff;font-weight:700}
  .credit-cluster .cc-btn{display:inline-flex;align-items:center;gap:5px;padding:8px 14px;border-radius:22px;border:1px solid var(--border);background:rgba(18,18,28,.92);color:#fff;font-weight:600;font-size:12.5px;text-decoration:none;cursor:pointer}
  .credit-cluster .cc-topup{background:linear-gradient(90deg,#4f46e5,#6366f1);border-color:transparent}
  .credit-cluster .cc-btn:hover{filter:brightness(1.12)}
  .credit-cluster .cc-btn svg{width:14px;height:14px}
  .ai-overlay{position:absolute;inset:0;z-index:9;display:none;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:rgba(7,7,16,.82);text-align:center;padding:24px}
  .ai-overlay.show{display:flex}
  .ai-ring-wrap{position:relative;width:96px;height:96px;display:flex;align-items:center;justify-content:center}
  .ai-ring{width:96px;height:96px;transform:rotate(-90deg)}
  .ai-ring-bg{fill:none;stroke:rgba(255,255,255,.12);stroke-width:7}
  .ai-ring-fg{fill:none;stroke:#818cf8;stroke-width:7;stroke-linecap:round;transition:stroke-dashoffset .2s linear}
  .ai-pct{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;font-size:19px}
  .ai-overlay .ai-text{color:#fff;font-size:14px;font-weight:600}
  .ai-overlay .ai-sub{color:#9aa3bd;font-size:12px;max-width:80%}
  .ai-overlay img{max-width:92%;max-height:80%;border-radius:12px;box-shadow:0 10px 40px rgba(0,0,0,.5)}
  .ai-overlay .ai-close{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:8px;border:1px solid rgba(255,255,255,.16);background:rgba(0,0,0,.45);color:#fff;font-size:20px;line-height:1;cursor:pointer}
  .ai-overlay .ai-title{position:absolute;top:18px;left:18px;color:#fff;font-weight:600;font-size:12px;letter-spacing:.5px}
  .crop-box{position:absolute;border:2px dashed #4f7cf5;background:rgba(79,124,245,.10);cursor:move;display:none;z-index:8;box-shadow:0 0 0 9999px rgba(0,0,0,.4);touch-action:none}
  .crop-box .crop-h{position:absolute;width:15px;height:15px;background:#4f7cf5;border:2px solid #fff;border-radius:50%;right:-9px;bottom:-9px;cursor:nwse-resize}
  .crop-bar{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);display:none;gap:10px;z-index:9}
  .crop-bar button{padding:9px 16px;border-radius:9px;font-family:inherit;font-weight:600;font-size:13px;cursor:pointer;border:1px solid var(--border-strong)}
  .crop-bar .cb-cancel{background:rgba(0,0,0,.6);color:#fff}
  .crop-bar .cb-save{background:var(--acc);color:#fff;border-color:transparent}
  .subtab{display:flex;gap:6px;margin-bottom:14px;background:rgba(255,255,255,.04);padding:4px;border-radius:9px}
  .subtab button{flex:1;border:none;background:none;color:var(--muted);font-family:inherit;font-size:12px;font-weight:500;padding:7px 0;border-radius:7px;cursor:pointer}
  .subtab button.active{background:#1c1c28;color:#fff}
  .aitex-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:14px}
  .aitex-opt{aspect-ratio:1;border:1px solid var(--border);border-radius:10px;background:#f3f0ec;overflow:hidden;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:0}
  .aitex-opt.loading{background:#15151f;cursor:default}
  .aitex-opt.err{background:#241313;color:#ef6b6b;font-size:11px;cursor:default}
  .aitex-opt.active{border-color:var(--acc);box-shadow:0 0 0 2px var(--acc-soft)}
  .aitex-spin{width:22px;height:22px;border-radius:50%;border:3px solid rgba(255,255,255,.15);border-top-color:#818cf8;animation:aispin 1s linear infinite}
  .gen-status{font-size:12px;color:var(--muted);margin-top:10px;min-height:14px}
  .merge-modal{position:fixed;inset:0;z-index:300;display:none;align-items:center;justify-content:center;background:rgba(5,5,12,.55);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
  .merge-modal.show{display:flex;animation:mmfade .18s ease}
  .merge-card{width:390px;max-width:90vw;background:#12121c;border:1px solid var(--border-strong);border-radius:16px;padding:26px;box-shadow:0 30px 80px rgba(0,0,0,.6);text-align:center}
  .merge-card .mc-ic{width:48px;height:48px;border-radius:13px;background:var(--acc-soft);color:var(--acc);display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
  .merge-card .mc-ic svg{width:24px;height:24px}
  .merge-card h3{font-size:17px;font-weight:600;margin-bottom:9px}
  .merge-card p{font-size:13.5px;color:var(--muted);line-height:1.55;margin-bottom:22px}
  .merge-card .mc-btns{display:flex;gap:10px}
  .merge-card button{flex:1;padding:11px;border-radius:10px;font-family:inherit;font-weight:600;font-size:13.5px;cursor:pointer;border:1px solid var(--border-strong)}
  .merge-card .mc-cancel{background:transparent;color:var(--text)}
  .merge-card .mc-cancel:hover{background:rgba(255,255,255,.05)}
  .merge-card .mc-confirm{background:var(--acc);color:#fff;border-color:transparent}
  .merge-card .mc-confirm:hover{filter:brightness(1.12)}
  @media (max-width:1050px){.sidebar{width:240px}.fpanel{width:280px}}
}

/* ===== Legacy AI tools (eyebrow / filler / hair / rhino) — stage background toggle,
   light-stage control contrast, "Select patient" button, and light-theme button fixes.
   Scoped by the .canvas.stage-* classes (set by each engine's #stageBgBtn) which only exist
   on these tool pages, so a plain (un-prefixed) selector is safe and covers all four. ===== */
/* Stage background — default follows the app theme (set on load by the engine), toggled by #stageBgBtn. */
.canvas.stage-dark{background:radial-gradient(70% 70% at 50% 45%,#13131f,#0a0a12 75%) !important}
.canvas.stage-light{background:radial-gradient(70% 70% at 50% 45%,#fcfcfe,#e7e8ef 78%) !important}
/* The floating stage controls (zoom/move column, bottom toolbar, chips) had a near-transparent
   white fill, so their icons vanished over a bright PHOTO on the default (dark) stage. Give them a
   solid dark, blurred backdrop so they're always readable. !important beats each tool's own
   `body.pg-X .tbtn` default; the higher-specificity `.canvas.stage-light` rules above still win when
   the stage is toggled light. */
.canvas .tbtn,
.canvas .bbtn{background:rgba(16,17,26,.62) !important;border-color:rgba(255,255,255,.16) !important;color:#d6d7e2 !important;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:0 2px 10px rgba(0,0,0,.32) !important}
.canvas .tbtn:hover,
.canvas .bbtn:hover{background:rgba(34,35,50,.85) !important;color:#fff !important}
.canvas .tbtn.active,
.canvas .bbtn.active{background:var(--acc-soft) !important;color:var(--acc) !important;border-color:var(--acc) !important}
.canvas .chip{background:rgba(16,17,26,.62) !important;border-color:rgba(255,255,255,.16) !important;color:#d6d7e2 !important;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
/* floating canvas controls stay legible on a light stage: solid light chips, dark icons */
.canvas.stage-light .tbtn,
.canvas.stage-light .bbtn{background:rgba(255,255,255,.92) !important;border-color:rgba(17,17,34,.18) !important;color:#1f1f2b !important;box-shadow:0 2px 8px rgba(17,17,34,.14)}
.canvas.stage-light .tbtn:hover,
.canvas.stage-light .bbtn:hover{background:#ffffff !important;color:#0e0e16 !important}
.canvas.stage-light .tbtn.active,
.canvas.stage-light .bbtn.active{background:var(--acc) !important;color:#fff !important;border-color:var(--acc) !important}
.canvas.stage-light .chip{background:rgba(255,255,255,.92) !important;border-color:rgba(17,17,34,.16) !important;color:#3a3a48 !important;box-shadow:0 2px 8px rgba(17,17,34,.12)}
.canvas.stage-light .chip b{color:#14141f !important}
/* the new wide "Select patient" button in the bottom toolbar */
.bbtn.bbtn-wide{width:auto !important;gap:8px;padding:0 16px !important;font-family:inherit;font-size:13px;font-weight:600}
.bbtn.bbtn-wide svg{width:17px;height:17px}
/* light theme: AI-recommend button + active target zone were near-invisible (light text on a light tint) */
body[data-theme="light"] .zone.active{color:var(--acc) !important}
body[data-theme="light"] .ai-recommend{background:linear-gradient(90deg,#4f46e5,#6366f1) !important;border-color:transparent !important;color:#fff !important}
body[data-theme="light"] .ai-recommend:hover{background:linear-gradient(90deg,#4338ca,#4f46e5) !important}
body[data-theme="light"] .ai-recommend .ai-cost{background:rgba(255,255,255,.22) !important;color:#fff !important}
/* light theme: panel slider tracks + section dividers hardcode near-white, so they vanish on a light panel */
body[data-theme="light"] .rng{background:rgba(17,17,34,.16) !important}
body[data-theme="light"] .sec{border-top-color:rgba(17,17,34,.12) !important}
body[data-theme="light"] .seg{background:rgba(17,17,34,.05) !important}

/* ===== Filler Preview — mobile / embedded responsive layout =====
   Full-bleed canvas pinned to the top; the panel becomes a bottom toolbar whose
   tab row is the target zones (+ History), with the selected zone's controls below. ===== */
/* History tab only exists on the mobile zone row */
body.pg-filler #zoneGrid .ztab-hist { display: none; }
@media (max-width: 820px) {
  /* (3) lock the page — no document scrolling / rubber-banding on mobile */
  body.pg-filler { overflow: hidden; overscroll-behavior: none; height: 100dvh; }

  /* hide the app nav + topbar — embedded view is just the editor */
  body.pg-filler .sidebar,
  body.pg-filler .side-handle,
  body.pg-filler .fp-topbar,
  body.pg-filler .panel-head,
  body.pg-filler .seg { display: none !important; }

  /* (2) bigger stage. smaller toolbar = taller canvas */
  body.pg-filler { --mtoolbar: 218px; }
  body.pg-filler .app { height: 100vh; height: 100dvh; }
  body.pg-filler .main { height: 100vh; height: 100dvh; padding: 0; }
  /* STAGE = full screen above the toolbar, stuck to the top. flex:0 0 auto so the explicit
     height is honoured (a plain flex:1 sets flex-basis:0% and collapses the canvas). */
  body.pg-filler .editor {
    flex: 0 0 auto; flex-direction: column; margin: 0; border: none; border-radius: 0;
    height: calc(100vh - var(--mtoolbar)); height: calc(100dvh - var(--mtoolbar));
  }
  body.pg-filler .canvas { flex: 1 1 auto; min-height: 0; touch-action: none; } /* (4) gestures, no page pan */

  /* panel → toolbar PINNED to the bottom; scrolls vertically with a sticky zone-tab row */
  body.pg-filler .fpanel {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    width: 100%; height: var(--mtoolbar);
    background: var(--panel); border-left: none; border-top: 1px solid var(--border);
    box-shadow: 0 -10px 30px rgba(0,0,0,.35); overflow-y: auto; overflow-x: hidden;
    overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  }
  body.pg-filler #paramsTab { display: block; }
  body.pg-filler #paramsTab > .sec { border-top: none; border-bottom: 1px solid var(--border); padding: 12px 14px; }
  body.pg-filler .slider { margin-bottom: 14px; }

  /* (1) TARGET ZONES as a horizontal, touch-scrolling tab row, pinned to the top of the toolbar */
  body.pg-filler .zone-sec {
    position: sticky; top: 0; z-index: 5; background: var(--panel);
    padding: 8px 10px !important; border-bottom: 1px solid var(--border);
  }
  body.pg-filler .zone-sec .sec-lbl { display: none; }
  body.pg-filler #zoneGrid {
    display: flex; flex-direction: row; gap: 8px;
    overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  body.pg-filler #zoneGrid::-webkit-scrollbar { display: none; }
  body.pg-filler #zoneGrid .zone {
    flex: 0 0 auto; height: 38px; padding: 0 14px; gap: 7px;
    white-space: nowrap; border-radius: 20px;
  }
  body.pg-filler #zoneGrid .ztab-hist { display: inline-flex; } /* the History tab, mobile only */

  /* History tab selected → swap the params content for the history list (zone row stays) */
  body.pg-filler .fpanel.mob-hist #paramsTab > .sec:not(.zone-sec) { display: none; }
  body.pg-filler .fpanel.mob-hist #historyTab { display: block !important; padding: 4px 10px 12px; }
  body.pg-filler #historyTab { padding: 0 10px; }

  /* floating canvas controls */
  body.pg-filler .tools-left { top: 12px; left: 12px; }
  body.pg-filler .zoom-chips { top: 12px; right: 12px; }
  body.pg-filler .tools-bottom { left: 12px; bottom: 12px; max-width: calc(100% - 24px); overflow-x: auto; }
  body.pg-filler .tools-bottom::-webkit-scrollbar { display: none; }
}

/* ===== AI tools — touch / iPad hardening (applies at ALL widths) =====
   iPad in landscape is ~1024–1366px wide, so it runs the DESKTOP layout and the
   ≤820px mobile rules below never fire. Without this block the stage lets Safari
   do native text/image selection, the long-press "callout" (Copy / Save Image),
   tap-highlight flashes, and page scroll/zoom — which is why images get
   "selected" and the toolbar/sliders feel dead mid-gesture. These rules route
   touch to our JS pan/pinch handlers and kill selection. Mouse is unaffected. */
:is(body.pg-filler,body.pg-eyebrow,body.pg-mdcodes,body.pg-hair,body.pg-rhino,body.pg-skin,body.pg-smile,body.pg-skin-analyzer-pro){
  -webkit-user-select:none;-moz-user-select:none;user-select:none;
  -webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;
}
/* real inputs stay selectable / typable */
:is(body.pg-filler,body.pg-eyebrow,body.pg-mdcodes,body.pg-hair,body.pg-rhino,body.pg-skin,body.pg-smile,body.pg-skin-analyzer-pro) :is(input,textarea,select,[contenteditable]){
  -webkit-user-select:text;user-select:text;
}
/* the stage owns touch: our JS handles pan + pinch, so block native gestures on it */
:is(body.pg-filler,body.pg-eyebrow,body.pg-mdcodes,body.pg-hair,body.pg-rhino,body.pg-skin,body.pg-smile,body.pg-skin-analyzer-pro) .canvas{touch-action:none}
/* stage media: never draggable or long-press-saveable */
:is(body.pg-filler,body.pg-eyebrow,body.pg-mdcodes,body.pg-hair,body.pg-rhino,body.pg-skin,body.pg-smile,body.pg-skin-analyzer-pro) :is(.canvas canvas,.canvas img,.base,.stage img){
  -webkit-user-drag:none;-webkit-touch-callout:none;
}
/* toolbar buttons / chips / tabs: instant taps, no 300ms double-tap-zoom delay */
:is(body.pg-filler,body.pg-eyebrow,body.pg-mdcodes,body.pg-hair,body.pg-rhino,body.pg-skin,body.pg-smile,body.pg-skin-analyzer-pro) :is(button,.tbtn,.chip,.zone,.layer,.seg,.seg>*){touch-action:manipulation}
/* range sliders: let the thumb capture the drag instead of the scroll container stealing it */
:is(body.pg-filler,body.pg-eyebrow,body.pg-mdcodes,body.pg-hair,body.pg-rhino,body.pg-skin,body.pg-smile,body.pg-skin-analyzer-pro) input[type=range]{touch-action:none}

/* ===== AI tools — phone (iPhone Pro / Pro Max) responsive layout =====
   Below 820px the desktop side-by-side (sidebar + canvas + ~320px panel) can't fit a
   ~390–430px screen. Full-bleed: the stage fills the top of the screen and the tool panel
   becomes a scrollable bottom sheet whose sticky header is the panel title (with a
   grab-handle) — panel-head is present in every tool, unlike the optional Parameters/History
   `seg`, so this covers tools with and without tabs (hair-design has a seg, hairline-laser
   doesn't, and both are pg-hair). Filler + skin-analyzer-pro keep their own bespoke variants.
   The !important flags override the app-wide ≤768px mobile-nav rules (.app{display:block},
   .main{padding:84px…}) that otherwise break the embedded editor. ===== */
@media (max-width:820px){
  :is(body.pg-eyebrow,body.pg-mdcodes,body.pg-hair,body.pg-rhino,body.pg-skin,body.pg-smile){overflow:hidden !important;overscroll-behavior:none;height:100dvh !important;--msheet:47dvh}
  /* embedded editor — drop the app nav + top bar to hand every pixel to the stage */
  :is(body.pg-eyebrow,body.pg-mdcodes,body.pg-hair,body.pg-rhino,body.pg-skin,body.pg-smile) .sidebar,
  :is(body.pg-eyebrow,body.pg-mdcodes,body.pg-hair,body.pg-rhino,body.pg-skin,body.pg-smile) .side-handle,
  :is(body.pg-eyebrow,body.pg-mdcodes,body.pg-hair,body.pg-rhino,body.pg-skin,body.pg-smile) .fp-topbar{display:none !important}
  :is(body.pg-eyebrow,body.pg-mdcodes,body.pg-hair,body.pg-rhino,body.pg-skin,body.pg-smile) .app{display:flex !important;height:100dvh !important;overflow:hidden !important}
  :is(body.pg-eyebrow,body.pg-mdcodes,body.pg-hair,body.pg-rhino,body.pg-skin,body.pg-smile) .main{height:100dvh !important;padding:0 !important;overflow:hidden !important;margin-left:0 !important}
  /* STAGE = everything above the sheet, stuck to the top (fixed height so it can't collapse) */
  :is(body.pg-eyebrow,body.pg-mdcodes,body.pg-hair,body.pg-rhino,body.pg-skin,body.pg-smile) .editor{flex-direction:column;margin:0;border:none;border-radius:0;flex:0 0 auto;height:calc(100dvh - var(--msheet))}
  :is(body.pg-eyebrow,body.pg-mdcodes,body.pg-hair,body.pg-rhino,body.pg-skin,body.pg-smile) .canvas{flex:1 1 auto;min-height:0;touch-action:none}

  /* tool panel → scrollable bottom sheet pinned to the bottom */
  :is(body.pg-eyebrow,body.pg-mdcodes,body.pg-hair,body.pg-rhino,body.pg-skin,body.pg-smile) .fpanel{
    position:fixed;left:0;right:0;bottom:0;z-index:60;width:100%;height:var(--msheet);
    border-left:none;border-top:1px solid var(--border-strong);border-radius:16px 16px 0 0;
    background:var(--panel);box-shadow:0 -12px 30px rgba(0,0,0,.45);
    overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
    padding-bottom:env(safe-area-inset-bottom,0);
  }
  /* panel title becomes the sticky sheet header, with a grab-handle affordance */
  :is(body.pg-eyebrow,body.pg-mdcodes,body.pg-hair,body.pg-rhino,body.pg-skin,body.pg-smile) .panel-head{position:sticky;top:0;z-index:6;margin:0;padding:15px 16px 9px;background:var(--panel);border-bottom:1px solid var(--border);border-radius:16px 16px 0 0;box-shadow:0 8px 12px -8px rgba(0,0,0,.5)}
  :is(body.pg-eyebrow,body.pg-mdcodes,body.pg-hair,body.pg-rhino,body.pg-skin,body.pg-smile) .panel-head::before{content:"";position:absolute;top:6px;left:50%;transform:translateX(-50%);width:38px;height:4px;border-radius:3px;background:rgba(255,255,255,.22)}
  :is(body.pg-eyebrow,body.pg-mdcodes,body.pg-hair,body.pg-rhino,body.pg-skin,body.pg-smile) .seg{margin:10px 14px 4px}
  :is(body.pg-eyebrow,body.pg-mdcodes,body.pg-hair,body.pg-rhino,body.pg-skin,body.pg-smile) .sec{padding:14px 16px}

  /* floating stage controls fit the smaller stage; the bottom toolbar scrolls sideways */
  :is(body.pg-eyebrow,body.pg-mdcodes,body.pg-hair,body.pg-rhino,body.pg-skin,body.pg-smile) .tools-left{top:10px;left:10px;gap:6px}
  :is(body.pg-eyebrow,body.pg-mdcodes,body.pg-hair,body.pg-rhino,body.pg-skin,body.pg-smile) .tbtn{width:36px;height:36px}
  :is(body.pg-eyebrow,body.pg-mdcodes,body.pg-hair,body.pg-rhino,body.pg-skin,body.pg-smile) .tbtn svg{width:17px;height:17px}
  :is(body.pg-eyebrow,body.pg-mdcodes,body.pg-hair,body.pg-rhino,body.pg-skin,body.pg-smile) .zoom-chips{top:10px;right:10px;gap:6px}
  :is(body.pg-eyebrow,body.pg-mdcodes,body.pg-hair,body.pg-rhino,body.pg-skin,body.pg-smile) .chip{padding:6px 10px;font-size:12px}
  :is(body.pg-eyebrow,body.pg-mdcodes,body.pg-hair,body.pg-rhino,body.pg-skin,body.pg-smile) .tools-bottom{left:10px;bottom:10px;gap:8px;max-width:calc(100% - 20px);overflow-x:auto;overflow-y:hidden;padding-bottom:2px}
  :is(body.pg-eyebrow,body.pg-mdcodes,body.pg-hair,body.pg-rhino,body.pg-skin,body.pg-smile) .tools-bottom::-webkit-scrollbar{display:none}
  :is(body.pg-eyebrow,body.pg-mdcodes,body.pg-hair,body.pg-rhino,body.pg-skin,body.pg-smile) .bbtn{flex:0 0 auto;width:40px;height:40px}
  :is(body.pg-eyebrow,body.pg-mdcodes,body.pg-hair,body.pg-rhino,body.pg-skin,body.pg-smile) .canvas-center{flex-wrap:wrap;padding:0 16px}
  /* eyebrow-only floating brush palette */
  body.pg-eyebrow .brow-palette{top:10px;left:54px;max-height:calc(100% - 20px)}
  body.pg-eyebrow .btool{width:138px;padding:8px 10px;font-size:12.5px}
}

/* AI tools (filler / rhino / hair / eyebrow) — iPad portrait rail range (821–1200px):
   the sidebar shows as a fixed 76px rail, but each tool's `*{margin:0}` reset cancels
   the global rail margin, so the editor + its bottom-left tools slid UNDER the rail.
   Clear the rail so the canvas and its tools are fully visible. */
@media (min-width:821px) and (max-width:1200px){
  body.pg-filler .main,
  body.pg-rhino .main,
  body.pg-hair .main,
  body.pg-eyebrow .main,
  body.pg-mdcodes .main,
  body.pg-skin .main,
  body.pg-smile .main{margin-left:76px}
  /* RTL: rail is on the right → clear it with a right margin instead */
  html[dir="rtl"] body.pg-filler .main,
  html[dir="rtl"] body.pg-rhino .main,
  html[dir="rtl"] body.pg-hair .main,
  html[dir="rtl"] body.pg-eyebrow .main,
  html[dir="rtl"] body.pg-mdcodes .main,
  html[dir="rtl"] body.pg-skin .main,
  html[dir="rtl"] body.pg-smile .main{margin-left:0;margin-right:76px}
}

/* ===== Skin Analyzer (pg-skin) — moved from inline ===== */
body.pg-skin{
  --bg:#070710;--sidebar:#08080f;--panel:#0c0c15;--card:#12121c;
  --border:rgba(255,255,255,.07);--border-strong:rgba(255,255,255,.12);
  --text:#f4f4f6;--muted:#8b8b9a;--muted-2:#6c6c7a;--indigo:#4f46e5;--indigo-soft:#7c7cf0;
  --acc:#4f7cf5;--acc-soft:rgba(79,124,245,.16);
  --good:#3ecf8e;--warn:#f6b73c;--bad:#ef6b6b;
  font-family:'Geist',system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;font-feature-settings:"ss01";height:100vh;overflow:hidden;box-sizing:border-box;margin:0;padding:0;
  *{box-sizing:border-box;margin:0;padding:0}
  a,button{transition:background-color .22s ease,border-color .22s ease,color .18s ease,box-shadow .2s ease}
  .app{display:flex;height:100vh;overflow:hidden}
  .sidebar{width:240px;flex-shrink:0;background:var(--sidebar);border-right:1px solid var(--border);padding:20px 22px;display:flex;flex-direction:column;overflow:hidden;transition:width .25s ease}
  .logo{font-size:27px;font-weight:600;letter-spacing:-.5px;display:flex;align-items:center;justify-content:space-between;height:45px;margin:0 -22px 20px;padding:0 22px 0 28px;border-bottom:1px solid var(--border)}
  .logo .x{background:linear-gradient(135deg,#6366f1,#a78bfa);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:700}
  .logo-text{display:flex;align-items:center;gap:4px}
  .logo-actions{display:flex;align-items:center;gap:10px}
  .logo-actions .lbell{width:34px;height:34px;border-radius:10px;border:1px solid var(--border-strong);background:transparent;color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer}
  .logo-actions .lbell svg{width:18px;height:18px}
  .logo-actions .lav{width:34px;height:34px;border-radius:50%;object-fit:cover;cursor:pointer;background:#222}
  .nav-label{font-size:12.5px;color:var(--muted-2);margin:0 0 12px 10px}
  .nav{display:flex;flex-direction:column;gap:3px}
  .nav a{display:flex;align-items:center;gap:14px;padding:10px 16px;border-radius:11px;color:var(--muted);text-decoration:none;font-size:15px;transition:.15s}
  .nav a svg{width:20px;height:20px;stroke-width:1.7;flex-shrink:0}
  .nav a:hover{color:var(--text);background:rgba(255,255,255,.03)}
  .nav a.active{background:var(--indigo);color:#fff;font-weight:500;box-shadow:0 6px 20px rgba(79,70,229,.35)}
  .upgrade-card{margin-top:auto;background:rgba(255,255,255,.02);border:1px solid var(--border);border-radius:16px;padding:16px}
  .upgrade-card .head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:6px}
  .upgrade-card h4{font-size:16px;font-weight:600;color:var(--indigo-soft)}
  .upgrade-card .crown{width:32px;height:32px;border-radius:10px;background:radial-gradient(circle at 30% 30%,#3a2f14,#1b1607);display:flex;align-items:center;justify-content:center;font-size:16px}
  .upgrade-card p{font-size:13px;color:var(--muted);line-height:1.45;margin-bottom:14px}
  .upgrade-card button{background:var(--indigo);color:#fff;border:none;padding:10px 20px;border-radius:10px;font-family:inherit;font-size:14px;font-weight:500;cursor:pointer}
  .side-bottom{padding-top:18px;display:flex;flex-direction:column;gap:14px}
  .side-bottom a{display:flex;align-items:center;gap:14px;color:var(--muted);text-decoration:none;font-size:15px;padding-left:6px}
  .side-bottom a svg{width:19px;height:19px;stroke-width:1.7}
  .app.collapsed .sidebar{width:76px}
  .app.collapsed .logo{justify-content:center;padding:0}
  .app.collapsed .logo-after,.app.collapsed .logo-actions,.app.collapsed .nav-label,.app.collapsed .upgrade-card{display:none}
  .app.collapsed .nav a,.app.collapsed .side-bottom a{justify-content:center;gap:0;padding-left:0;font-size:0}
  .app.collapsed .nav a{padding:11px 0}
  .app.collapsed .nav a svg,.app.collapsed .side-bottom a svg{font-size:initial}
  .side-handle{position:fixed;bottom:17px;left:201px;z-index:60;width:28px;height:28px;border-radius:50%;background:#15151f;border:1px solid var(--border-strong);color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:left .25s ease}
  .side-handle:hover{color:#fff;background:#1d1d2a}.side-handle svg{width:15px;height:15px}
  .app.collapsed ~ .side-handle{left:61px}.side-handle .ic-expand{display:none}
  .app.collapsed ~ .side-handle .ic-collapse{display:none}.app.collapsed ~ .side-handle .ic-expand{display:block}
  .menu{position:fixed;z-index:200;width:300px;background:#10101c;border:1px solid var(--border-strong);border-radius:14px;box-shadow:0 24px 60px rgba(0,0,0,.55);padding:8px;display:none}
  .menu.show{display:block;animation:menupop .18s ease}
  .menu-head{padding:10px 12px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;margin-bottom:6px}
  .menu-head .mh-t{font-size:15px;font-weight:600}.menu-head img{width:42px;height:42px;border-radius:50%;object-fit:cover}.menu-head .e{font-size:12.5px;color:var(--muted);margin-top:2px}
  .menu-item{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:9px;color:var(--text);font-size:14px;cursor:pointer;text-decoration:none}
  .menu-item:hover{background:rgba(255,255,255,.05)}.menu-item svg{width:17px;height:17px;color:var(--muted)}.menu-item.danger,.menu-item.danger svg{color:#ef6b6b}
  .menu-div{height:1px;background:var(--border);margin:6px 8px}
  .noti{display:flex;gap:11px;padding:11px 12px;border-radius:9px;cursor:pointer}.noti:hover{background:rgba(255,255,255,.04)}
  .noti .nic{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.noti .nic svg{width:16px;height:16px}
  .noti .nt{font-size:13.5px}.noti .ntime{font-size:12px;color:var(--muted);margin-top:2px}
  .menu-foot{text-align:center;padding:9px;border-top:1px solid var(--border);margin-top:4px}.menu-foot a{color:var(--indigo-soft);font-size:13px;text-decoration:none}
  .main{flex:1;padding:20px 26px;min-width:0;display:flex;flex-direction:column;overflow:hidden}
  .back-link{display:inline-flex;align-items:center;gap:8px;color:var(--muted);text-decoration:none;font-size:15px;margin-bottom:14px;flex-shrink:0;align-self:flex-start}
  .back-link:hover{color:var(--text)}
  .back-link svg{width:17px;height:17px}
  .fp-topbar{display:flex;align-items:center;justify-content:space-between;gap:12px}
  .credit-cluster{display:flex;align-items:center;gap:10px}
  .credit-cluster .cc-bal{display:flex;align-items:center;gap:9px;padding:7px 14px;border:1px solid var(--border);border-radius:24px;background:rgba(18,18,28,.92);font-size:13px;color:var(--muted);box-shadow:0 6px 22px rgba(0,0,0,.35)}
  .credit-cluster .cc-ic{width:16px;height:16px;color:#818cf8;fill:currentColor}
  .credit-cluster b{color:#fff;font-weight:700}
  .credit-cluster .cc-btn{display:inline-flex;align-items:center;gap:5px;padding:8px 14px;border-radius:22px;border:1px solid var(--border);background:rgba(18,18,28,.92);color:#fff;font-weight:600;font-size:12.5px;text-decoration:none;cursor:pointer}
  .credit-cluster .cc-topup{background:linear-gradient(90deg,#4f46e5,#6366f1);border-color:transparent}
  .credit-cluster .cc-btn:hover{filter:brightness(1.12)}
  .credit-cluster .cc-btn svg{width:14px;height:14px}
  .editor{flex:1;min-height:0;display:flex;border:1px solid var(--border-strong);border-radius:18px;overflow:hidden;background:var(--panel);margin-top:12px}
  .canvas{flex:1;position:relative;overflow:hidden;background:radial-gradient(70% 70% at 50% 45%,#13131f,#0a0a12 75%)}
  .sim-canvas{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);transform-origin:center;display:none;border-radius:10px;box-shadow:0 12px 50px rgba(0,0,0,.55);max-width:none}
  .tools-left{position:absolute;top:18px;left:18px;display:flex;flex-direction:column;gap:8px;z-index:7}
  .tbtn{width:40px;height:40px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid var(--border);color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.15s}
  .tbtn:hover{background:rgba(255,255,255,.08);color:#fff}.tbtn svg{width:18px;height:18px}
  .tbtn.active{background:var(--acc-soft);color:var(--acc);border-color:var(--acc)}
  .mag-lens{position:absolute;width:180px;height:180px;border-radius:50%;border:2px solid rgba(255,255,255,.92);box-shadow:0 8px 28px rgba(0,0,0,.55);pointer-events:none;z-index:8;display:none;background:#0a0a12}
  .zoom-chips{position:absolute;top:18px;right:18px;display:flex;flex-direction:column;gap:8px;align-items:flex-end;z-index:7}
  .chip{padding:8px 14px;border:1px solid var(--border);border-radius:9px;font-size:13px;color:var(--muted);background:rgba(255,255,255,.03)}
  .chip b{color:var(--text);margin-left:5px}
  .canvas-center{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:14px}
  .btn-upload{background:#fff;color:#15151c;border:none;padding:13px 24px;border-radius:11px;font-family:inherit;font-size:15px;font-weight:500;cursor:pointer}
  .btn-select{background:var(--acc);color:#fff;border:none;padding:13px 24px;border-radius:11px;font-family:inherit;font-size:15px;font-weight:500;cursor:pointer;box-shadow:0 8px 24px rgba(79,124,245,.4)}
  .ai-overlay{position:absolute;inset:0;z-index:9;display:none;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:rgba(7,7,16,.82);text-align:center;padding:24px}
  .ai-overlay.show{display:flex}
  .ai-ring-wrap{position:relative;width:96px;height:96px;display:flex;align-items:center;justify-content:center}
  .ai-ring{width:96px;height:96px;transform:rotate(-90deg)}
  .ai-ring-bg{fill:none;stroke:rgba(255,255,255,.12);stroke-width:7}
  .ai-ring-fg{fill:none;stroke:#818cf8;stroke-width:7;stroke-linecap:round;transition:stroke-dashoffset .2s linear}
  .ai-pct{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;font-size:19px}
  .ai-overlay .ai-text{color:#fff;font-size:14px;font-weight:600}
  .ai-overlay .ai-sub{color:#9aa3bd;font-size:12px;max-width:80%}
  .ai-overlay .ai-close{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:8px;border:1px solid rgba(255,255,255,.16);background:rgba(0,0,0,.45);color:#fff;font-size:20px;line-height:1;cursor:pointer}
  .fpanel{width:360px;flex-shrink:0;border-left:1px solid var(--border);background:var(--panel);display:flex;flex-direction:column;overflow-y:auto}
  .fpanel::-webkit-scrollbar{width:8px}.fpanel::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:8px}
  .panel-head{padding:20px 22px 4px;font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--muted)}
  .sec{border-top:1px solid var(--border);padding:18px 22px}
  .sec:first-of-type{border-top:none}
  .sec-lbl{font-size:11.5px;font-weight:600;letter-spacing:.06em;color:var(--muted);margin-bottom:14px}
  .btn-analyze{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:13px;border-radius:11px;border:none;background:linear-gradient(90deg,#4f46e5,#6366f1);color:#fff;font-family:inherit;font-weight:600;font-size:14px;cursor:pointer;box-shadow:0 8px 22px rgba(79,70,229,.4)}
  .btn-analyze:hover{filter:brightness(1.1)}
  .btn-analyze:disabled{opacity:.5;cursor:default;box-shadow:none}
  .btn-analyze svg{width:18px;height:18px}
  .hint{font-size:12.5px;color:var(--muted);line-height:1.5}
  .empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:50px 24px;text-align:center;color:var(--muted)}
  .empty svg{width:46px;height:46px;opacity:.5}
  .empty .t{font-size:14px;font-weight:600;color:var(--text)}
  .empty .s{font-size:12.5px;line-height:1.5}
  .stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .stat{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:12px 13px}
  .stat .k{font-size:11px;color:var(--muted);margin-bottom:5px;letter-spacing:.02em}
  .stat .v{font-size:17px;font-weight:700;color:#fff}
  .stat .v small{font-size:12px;font-weight:600;color:var(--muted)}
  .metric{margin-bottom:13px}
  .metric:last-child{margin-bottom:0}
  .metric .row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
  .metric .name{font-size:13px;color:var(--text)}
  .metric .badge{font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px}
  .badge.good{background:rgba(62,207,142,.16);color:var(--good)}
  .badge.warn{background:rgba(246,183,60,.16);color:var(--warn)}
  .badge.bad{background:rgba(239,107,107,.16);color:var(--bad)}
  .bar{height:5px;border-radius:4px;background:rgba(255,255,255,.08);overflow:hidden}
  .bar > i{display:block;height:100%;border-radius:4px;background:var(--acc)}
  .metric .conf{font-size:10.5px;color:var(--muted-2);margin-top:4px}
  .count-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .count{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:11px 12px;cursor:pointer;user-select:none}
  .count.off{opacity:.45}
  .count .sw{width:12px;height:12px;border-radius:4px;flex-shrink:0}
  .count .cn{font-size:18px;font-weight:700;color:#fff;line-height:1}
  .count .cl{font-size:11px;color:var(--muted)}
  .toggle-hint{font-size:11px;color:var(--muted-2);margin-top:10px}
  @media (max-width:1050px){.sidebar{width:240px}.fpanel{width:300px}}
}

/* ===== AI 3D Viewer (pg-viewer3d) ===== */
body.pg-viewer3d{
  --bg:#070710;--sidebar:#08080f;--panel:#0c0c15;--card:#12121c;
  --border:rgba(255,255,255,.07);--border-strong:rgba(255,255,255,.12);
  --text:#f4f4f6;--muted:#8b8b9a;--muted-2:#6c6c7a;--indigo:#4f46e5;--indigo-soft:#7c7cf0;
  --acc:#7c7cf0;--acc-soft:rgba(124,124,240,.18);
  font-family:'Geist',system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;font-feature-settings:"ss01";height:100vh;overflow:hidden;box-sizing:border-box;margin:0;padding:0;
  *{box-sizing:border-box;margin:0;padding:0}
  a,button{transition:background-color .22s ease,border-color .22s ease,color .18s ease,box-shadow .2s ease}
  .app{display:flex;height:100vh;overflow:hidden}
  .sidebar{width:240px;flex-shrink:0;background:var(--sidebar);border-right:1px solid var(--border);padding:20px 22px;display:flex;flex-direction:column;overflow:hidden;transition:width .25s ease}
  .logo{font-size:27px;font-weight:600;letter-spacing:-.5px;display:flex;align-items:center;justify-content:space-between;height:45px;margin:0 -22px 20px;padding:0 22px 0 28px;border-bottom:1px solid var(--border)}
  .logo .x{background:linear-gradient(135deg,#6366f1,#a78bfa);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:700}
  .logo-text{display:flex;align-items:center;gap:4px}
  .logo-actions{display:flex;align-items:center;gap:10px}
  .logo-actions .lbell{width:34px;height:34px;border-radius:10px;border:1px solid var(--border-strong);background:transparent;color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer}
  .logo-actions .lbell svg{width:18px;height:18px}
  .logo-actions .lav{width:34px;height:34px;border-radius:50%;object-fit:cover;cursor:pointer;background:#222}
  .nav-label{font-size:12.5px;color:var(--muted-2);margin:0 0 12px 10px}
  .nav{display:flex;flex-direction:column;gap:3px}
  .nav a{display:flex;align-items:center;gap:14px;padding:10px 16px;border-radius:11px;color:var(--muted);text-decoration:none;font-size:15px;transition:.15s}
  .nav a svg{width:20px;height:20px;stroke-width:1.7;flex-shrink:0}
  .nav a:hover{color:var(--text);background:rgba(255,255,255,.03)}
  .nav a.active{background:var(--indigo);color:#fff;font-weight:500;box-shadow:0 6px 20px rgba(79,70,229,.35)}
  .upgrade-card{margin-top:auto;background:rgba(255,255,255,.02);border:1px solid var(--border);border-radius:16px;padding:16px}
  .upgrade-card .head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:6px}
  .upgrade-card h4{font-size:16px;font-weight:600;color:var(--indigo-soft)}
  .upgrade-card .crown{width:32px;height:32px;border-radius:10px;background:radial-gradient(circle at 30% 30%,#3a2f14,#1b1607);display:flex;align-items:center;justify-content:center;font-size:16px}
  .upgrade-card p{font-size:13px;color:var(--muted);line-height:1.45;margin-bottom:14px}
  .upgrade-card button{background:var(--indigo);color:#fff;border:none;padding:10px 20px;border-radius:10px;font-family:inherit;font-size:14px;font-weight:500;cursor:pointer}
  .side-bottom{padding-top:18px;display:flex;flex-direction:column;gap:14px}
  .side-bottom a{display:flex;align-items:center;gap:14px;color:var(--muted);text-decoration:none;font-size:15px;padding-left:6px}
  .side-bottom a svg{width:19px;height:19px;stroke-width:1.7}
  .app.collapsed .sidebar{width:76px}
  .app.collapsed .logo{justify-content:center;padding:0}
  .app.collapsed .logo-after,.app.collapsed .logo-actions,.app.collapsed .nav-label,.app.collapsed .upgrade-card{display:none}
  .app.collapsed .nav a,.app.collapsed .side-bottom a{justify-content:center;gap:0;padding-left:0;font-size:0}
  .app.collapsed .nav a{padding:11px 0}
  .app.collapsed .nav a svg,.app.collapsed .side-bottom a svg{font-size:initial}
  .side-handle{position:fixed;bottom:17px;left:201px;z-index:60;width:28px;height:28px;border-radius:50%;background:#15151f;border:1px solid var(--border-strong);color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:left .25s ease}
  .side-handle:hover{color:#fff;background:#1d1d2a}.side-handle svg{width:15px;height:15px}
  .app.collapsed ~ .side-handle{left:61px}.side-handle .ic-expand{display:none}
  .app.collapsed ~ .side-handle .ic-collapse{display:none}.app.collapsed ~ .side-handle .ic-expand{display:block}
  .menu{position:fixed;z-index:200;width:300px;background:#10101c;border:1px solid var(--border-strong);border-radius:14px;box-shadow:0 24px 60px rgba(0,0,0,.55);padding:8px;display:none}
  .menu.show{display:block;animation:menupop .18s ease}
  .menu-head{padding:10px 12px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;margin-bottom:6px}
  .menu-head .mh-t{font-size:15px;font-weight:600}.menu-head img{width:42px;height:42px;border-radius:50%;object-fit:cover}.menu-head .e{font-size:12.5px;color:var(--muted);margin-top:2px}
  .menu-item{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:9px;color:var(--text);font-size:14px;cursor:pointer;text-decoration:none}
  .menu-item:hover{background:rgba(255,255,255,.05)}.menu-item svg{width:17px;height:17px;color:var(--muted)}.menu-item.danger,.menu-item.danger svg{color:#ef6b6b}
  .menu-div{height:1px;background:var(--border);margin:6px 8px}
  .menu-foot{text-align:center;padding:9px;border-top:1px solid var(--border);margin-top:4px}.menu-foot a{color:var(--indigo-soft);font-size:13px;text-decoration:none}
  .main{flex:1;padding:20px 26px;min-width:0;display:flex;flex-direction:column;overflow:hidden}
  .back-link{display:inline-flex;align-items:center;gap:8px;color:var(--muted);text-decoration:none;font-size:15px;flex-shrink:0;align-self:flex-start}
  .back-link:hover{color:var(--text)}.back-link svg{width:17px;height:17px}
  .fp-topbar{display:flex;align-items:center;justify-content:space-between;gap:12px}
  .credit-cluster{display:flex;align-items:center;gap:10px}
  .credit-cluster .cc-bal{display:flex;align-items:center;gap:9px;padding:7px 14px;border:1px solid var(--border);border-radius:24px;background:rgba(18,18,28,.92);font-size:13px;color:var(--muted);box-shadow:0 6px 22px rgba(0,0,0,.35)}
  .credit-cluster .cc-ic{width:16px;height:16px;color:#818cf8;fill:currentColor}
  .credit-cluster b{color:#fff;font-weight:700}
  .credit-cluster .cc-btn{display:inline-flex;align-items:center;gap:5px;padding:8px 14px;border-radius:22px;border:1px solid var(--border);background:rgba(18,18,28,.92);color:#fff;font-weight:600;font-size:12.5px;text-decoration:none;cursor:pointer}
  .credit-cluster .cc-topup{background:linear-gradient(90deg,#4f46e5,#6366f1);border-color:transparent}
  .credit-cluster .cc-btn:hover{filter:brightness(1.12)}.credit-cluster .cc-btn svg{width:14px;height:14px}
  .editor{flex:1;min-height:0;display:flex;border:1px solid var(--border-strong);border-radius:18px;overflow:hidden;background:var(--panel);margin-top:12px}
  .canvas{flex:1;position:relative;overflow:hidden;background:radial-gradient(70% 70% at 50% 45%,#13131f,#0a0a12 75%)}
  .gl-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab;touch-action:none}
  .zoom-chips{position:absolute;top:18px;right:18px;display:flex;flex-direction:column;gap:8px;align-items:flex-end;z-index:7}
  .chip{padding:8px 14px;border:1px solid var(--border);border-radius:9px;font-size:13px;color:var(--muted);background:rgba(255,255,255,.03)}
  .chip b{color:var(--text);margin-left:5px}
  .view-overlay{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:rgba(7,7,16,.55)}
  .view-overlay .vo-text{color:#fff;font-size:14px;font-weight:600;text-align:center}
  .view-overlay .ai-ring-wrap{width:64px;height:64px}
  .view-overlay .ai-ring{width:64px;height:64px;animation:aispin .9s linear infinite}
  .view-overlay .ai-ring-bg{fill:none;stroke:#818cf8;stroke-width:8;stroke-linecap:round;stroke-dasharray:150 80}
  .fpanel{width:320px;flex-shrink:0;border-left:1px solid var(--border);background:var(--panel);display:flex;flex-direction:column;overflow-y:auto}
  .fpanel::-webkit-scrollbar{width:8px}.fpanel::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:8px}
  .panel-head{padding:18px 22px 4px;font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--muted)}
  .sec{border-top:1px solid var(--border);padding:16px 22px}
  .sec-lbl{font-size:11.5px;font-weight:700;letter-spacing:.06em;color:var(--muted);margin-bottom:13px}
  .sec-lbl.icon{display:flex;align-items:center;gap:8px}.sec-lbl.icon svg{width:15px;height:15px}
  .row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .btn-ghost{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:10px;padding:11px;border-radius:10px;border:1px solid var(--border-strong);background:rgba(255,255,255,.03);color:var(--text);cursor:pointer;font-family:inherit;font-size:13px;font-weight:600}
  .row2 .btn-ghost{margin-top:0}
  .btn-ghost:hover{background:rgba(255,255,255,.07)}.btn-ghost svg{width:16px;height:16px}
  .btn-ghost.active{border-color:var(--acc);background:var(--acc-soft);color:#fff}
  .hint{font-size:12px;color:var(--muted);line-height:1.5;margin-top:12px}
  .slider{margin-top:14px}
  .slider .top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
  .slider .top .n{font-size:13px}.slider .top .v{font-size:13px;font-weight:600;color:var(--acc)}
  .rng{-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:3px;background:rgba(255,255,255,.12);outline:none;cursor:pointer}
  .rng::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--acc);border:3px solid #d6d6ff;cursor:pointer}
  .btn-export{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:12px;border-radius:10px;border:1px solid var(--acc);background:var(--acc);color:#fff;font-family:inherit;font-weight:600;font-size:13.5px;cursor:pointer}
  .btn-export:hover{filter:brightness(1.12)}.btn-export svg{width:17px;height:17px}
  .canvas-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;z-index:6}
  .canvas-center .uc-title{font-size:14px;font-weight:600;color:#fff}
  .canvas-center .uc-sub{font-size:12.5px;color:var(--muted);max-width:300px;text-align:center;margin-bottom:4px}
  .btn-upload{background:#fff;color:#15151c;border:none;padding:13px 24px;border-radius:11px;font-family:inherit;font-size:15px;font-weight:500;cursor:pointer}
  .btn-select{background:var(--acc);color:#15151c;border:none;padding:13px 24px;border-radius:11px;font-family:inherit;font-size:15px;font-weight:600;cursor:pointer;box-shadow:0 8px 24px rgba(124,124,240,.4)}
  .uc-row{display:flex;gap:12px}
  .btn-enhance{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:12px;border-radius:10px;border:none;background:linear-gradient(100deg,#6366f1,#8b5cf6 55%,#a855f7);background-size:160% 100%;color:#fff;font-family:inherit;font-weight:600;font-size:13.5px;cursor:pointer;box-shadow:0 6px 20px rgba(124,92,246,.32);transition:.2s}
  .btn-enhance:hover{background-position:100% 0;box-shadow:0 8px 26px rgba(124,92,246,.5)}
  .btn-enhance:disabled{opacity:.55;cursor:default;box-shadow:none}
  .btn-enhance svg{width:17px;height:17px}
  .enh-overlay{position:absolute;inset:0;z-index:14;display:none;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:rgba(6,6,14,.74);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px)}
  .enh-overlay.show{display:flex;animation:mmfade .25s ease}
  .enh-ring-wrap{position:relative;width:118px;height:118px;display:flex;align-items:center;justify-content:center}
  .enh-ring{width:118px;height:118px;transform:rotate(-90deg);filter:drop-shadow(0 0 12px rgba(139,92,246,.6))}
  .enh-bg{fill:none;stroke:rgba(255,255,255,.10);stroke-width:7}
  .enh-fg{fill:none;stroke:#a78bfa;stroke-width:7;stroke-linecap:round;transition:stroke-dashoffset .25s ease}
  .enh-pct{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:21px}
  .enh-spark{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
  .enh-spark svg{width:38px;height:38px;color:#c4b5fd;opacity:.0;animation:enhpulse 1.6s ease-in-out infinite}
  .enh-text{color:#fff;font-size:15px;font-weight:700;letter-spacing:.2px}
  .enh-sub{color:#9aa3bd;font-size:12.5px;max-width:78%;text-align:center;line-height:1.5}
  .enh-cancel{margin-top:4px;padding:9px 22px;border-radius:9px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06);color:#fff;font-family:inherit;font-size:12.5px;font-weight:600;cursor:pointer;transition:.15s}
  .enh-cancel:hover{background:rgba(255,255,255,.12)}
  @keyframes enhpulse{0%,100%{opacity:0;transform:scale(.8)}50%{opacity:.85;transform:scale(1.05)}}
  .ptabs{display:flex;gap:6px;padding:0 16px 12px;border-bottom:1px solid var(--border)}
  .ptab{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:9px;border-radius:9px;border:1px solid transparent;background:transparent;color:var(--muted);font-family:inherit;font-size:12.5px;font-weight:600;cursor:pointer;transition:.15s}
  .ptab:hover{color:#fff;background:rgba(255,255,255,.04)}
  .ptab.active{color:#fff;background:rgba(124,124,240,.14);border-color:rgba(124,124,240,.35)}
  .ptab-count{min-width:18px;padding:0 5px;height:18px;line-height:18px;border-radius:9px;background:rgba(255,255,255,.12);color:#fff;font-size:11px}
  .hist-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 8px;font-size:11px;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);font-weight:600}
  .hist-clear{background:none;border:none;color:#8a8aff;font-family:inherit;font-size:11.5px;font-weight:600;cursor:pointer;text-transform:none;letter-spacing:0}
  .hist-clear:hover{text-decoration:underline}
  .hist-list{display:flex;flex-direction:column;gap:8px;padding:0 16px 16px}
  .hist-item{display:flex;gap:11px;align-items:flex-start;padding:10px 11px;border-radius:10px;border:1px solid var(--border);background:rgba(255,255,255,.025)}
  .hist-ic{flex:none;width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:rgba(124,124,240,.14);color:#a9a9f5}
  .hist-ic svg{width:16px;height:16px}
  .hist-ic.thumb{padding:0;overflow:hidden;background:#000}
  .hist-ic.thumb img{width:100%;height:100%;object-fit:cover}
  .hist-body{flex:1;min-width:0}
  .hist-title{font-size:12.5px;font-weight:600;color:#fff}
  .hist-meta{font-size:11px;color:var(--muted);margin-top:2px}
  .hist-revert{margin-top:6px;padding:4px 10px;border-radius:7px;border:1px solid var(--border-strong);background:rgba(255,255,255,.05);color:#fff;font-family:inherit;font-size:11px;font-weight:600;cursor:pointer}
  .hist-revert:hover{background:rgba(255,255,255,.1)}
  .hist-empty{padding:18px 16px;color:var(--muted);font-size:12.5px;line-height:1.55;text-align:center}
  .hist-item{cursor:pointer;transition:.12s}
  .hist-item:hover{border-color:var(--border-strong);background:rgba(255,255,255,.05)}
  .hist-item.current{border-color:rgba(124,124,240,.6);background:rgba(124,124,240,.12)}
  .hist-item.future{opacity:.45}
  .ur-bar{position:absolute;left:14px;bottom:14px;z-index:7;display:flex;align-items:center;gap:7px;padding:6px;border-radius:12px;background:rgba(12,12,18,.72);border:1px solid rgba(255,255,255,.10);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
  .ur-btn{display:flex;align-items:center;gap:6px;padding:7px 12px;border-radius:8px;border:1px solid transparent;background:rgba(255,255,255,.06);color:#fff;font-family:inherit;font-size:12px;font-weight:600;cursor:pointer;transition:.13s}
  .ur-btn:hover:not(:disabled){background:rgba(124,124,240,.22);border-color:rgba(124,124,240,.4)}
  .ur-btn:disabled{opacity:.4;cursor:default}
  .ur-btn svg{width:15px;height:15px}
  .ur-step{padding:0 8px;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
  @media (max-width:1050px){.sidebar{width:240px}.fpanel{width:280px}}
}
.pg-usage .cap-top .row{display:flex;justify-content:space-between;font-size:12.5px;color:var(--muted)}
.pg-usage .note{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--muted);margin-top:14px;border-top:1px solid var(--border);padding-top:14px}
.pg-usage .note svg{width:15px;height:15px;color:var(--indigo-soft)}
@media (max-width:1150px){.pg-usage .stats{grid-template-columns:1fr}.pg-usage .cols{grid-template-columns:1fr;overflow:auto}.pg-usage .main{overflow:auto}.pg-usage .sidebar{width:240px}}

/* ===== Shared app topbar (self-contained: works on every page) ===== */
.afx-tb{display:flex;align-items:center;gap:14px;margin-bottom:22px;flex-shrink:0;position:relative;z-index:6}
.afx-tb-profile{display:flex;align-items:center;gap:12px;cursor:pointer;background:none;border:none;color:var(--text);font-family:inherit;padding:4px 8px 4px 4px;border-radius:12px}
.afx-tb-profile:hover{background:rgba(255,255,255,.05)}
.afx-tb-profile img{width:44px;height:44px;border-radius:50%;object-fit:cover;background:#222;flex:0 0 auto}
.afx-tb-nm{font-size:15px;font-weight:600;line-height:1.2;text-align:start}
.afx-tb-role{font-size:12.5px;color:var(--muted);text-align:start}
.afx-tb-chev{color:var(--muted);flex:0 0 auto}
.afx-tb-sp{flex:1}
.afx-tb-icon{width:46px;height:46px;border-radius:12px;border:1px solid var(--border-strong);background:transparent;color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer;flex:0 0 auto}
.afx-tb-icon:hover{color:var(--text);background:rgba(255,255,255,.05)}
.afx-tb-search{display:flex;align-items:center;gap:9px;height:46px;padding:0 14px;border:1px solid var(--border-strong);border-radius:12px;color:var(--muted);min-width:230px}
.afx-tb-search:focus-within{border-color:var(--indigo-soft)}
.afx-tb-search svg{flex:0 0 auto}
.afx-tb-search input{flex:1;min-width:0;background:none;border:none;outline:none;color:var(--text);font-family:inherit;font-size:14px}
.afx-tb-settings{display:flex;align-items:center;gap:10px;height:46px;padding:0 18px;border:1px solid var(--border-strong);border-radius:12px;background:transparent;color:var(--text);font-family:inherit;font-size:14.5px;cursor:pointer;flex:0 0 auto;text-decoration:none}
.afx-tb-settings:hover{background:rgba(255,255,255,.05)}
.afx-tb-settings svg{width:18px;height:18px}
/* dropdown menus */
.afx-tb-menu{position:fixed;z-index:200;width:300px;max-width:92vw;background:#10101c;border:1px solid var(--border-strong);border-radius:14px;box-shadow:0 24px 60px rgba(0,0,0,.55);padding:8px}
.afx-tb-menu-head{padding:10px 12px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;margin-bottom:6px}
.afx-tb-menu-head img{width:42px;height:42px;border-radius:50%;object-fit:cover}
.afx-tb-menu-head .t{font-size:15px;font-weight:600}
.afx-tb-menu-head .e{font-size:12.5px;color:var(--muted);margin-top:2px;word-break:break-all}
.afx-tb-mi{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:9px;color:var(--text);font-size:14px;cursor:pointer;text-decoration:none;width:100%;border:none;background:none;font-family:inherit;text-align:start}
.afx-tb-mi:hover{background:rgba(255,255,255,.05)}
.afx-tb-mi svg{width:17px;height:17px;color:var(--muted);flex:0 0 auto}
.afx-tb-mi.danger,.afx-tb-mi.danger svg{color:#ef6b6b}
.afx-tb-div{height:1px;background:var(--border);margin:6px 8px}
.afx-tb-noti{display:flex;gap:11px;padding:11px 12px;border-radius:9px}
.afx-tb-noti .nic{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.afx-tb-noti .nic svg{width:18px;height:18px}
.afx-tb-noti .nt{font-size:13.5px;line-height:1.35}
.afx-tb-noti .ntime{font-size:12px;color:var(--muted);margin-top:2px}
.afx-tb-foot{text-align:center;padding:9px;border-top:1px solid var(--border);margin-top:4px}
.afx-tb-foot a{color:var(--indigo-soft);font-size:13px;text-decoration:none;cursor:pointer}
@media (max-width:760px){.afx-tb-search{min-width:0;width:46px;padding:0;justify-content:center}.afx-tb-search input{display:none}.afx-tb-settings span{display:none}}

/* ===== Sidebar brand logo (image, swaps with theme) ===== */
.logo-img{height:22px;width:auto;max-width:100%;display:block;object-fit:contain}
.logo-x{height:24px;width:auto;display:none;object-fit:contain}
.logo-light{display:none}                              /* default = dark theme → white logo */
body[data-theme="light"] .logo-dark{display:none}
body[data-theme="light"] .logo-light{display:block}    /* light theme → dark logo */
/* desktop collapsed rail: swap the wordmark for the compact X mark */
.app.collapsed .logo-img{display:none !important}
.app.collapsed .logo-x{display:block}

/* ===== Sidebar profile cluster + hide the old topbar ===== */
.afx-tb{display:none !important}
.sb-profile{display:flex;align-items:center;gap:11px;width:calc(100% + 0px);margin:0 0 18px !important;padding:9px 10px !important;background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:13px;cursor:pointer;color:var(--text);font-family:inherit;text-align:start}
.sb-profile:hover{background:rgba(255,255,255,.06);border-color:var(--border-strong)}
.sb-profile .sb-av{width:38px;height:38px;border-radius:50%;object-fit:cover;background:#222;flex:0 0 auto}
.sb-profile .sb-meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.sb-profile .sb-nm{font-size:14px;font-weight:600;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-profile .sb-role{font-size:12px;color:var(--muted);line-height:1.2}
.sb-profile .sb-chev{width:16px;height:16px;color:var(--muted);flex:0 0 auto}
/* collapsed sidebar: show only the avatar, centered */
.app.collapsed .sb-profile{justify-content:center;padding:9px 0;gap:0}
.app.collapsed .sb-profile .sb-meta,.app.collapsed .sb-profile .sb-chev{display:none}

/* ===== Global dropdown menu styles (so legacy tool pages get a correctly sized
   notification / profile menu — their page scope lacks these rules) ===== */
@keyframes afxMenuPop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.menu{position:fixed;z-index:200;width:300px;max-width:92vw;background:#10101c;border:1px solid var(--border-strong);border-radius:14px;box-shadow:0 24px 60px rgba(0,0,0,.55);padding:8px;display:none}
.menu.show{display:block;animation:afxMenuPop .18s ease}
.menu-head{padding:10px 12px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;margin-bottom:6px}
.menu-head .mh-t{font-size:15px;font-weight:600}
.menu-head img{width:42px;height:42px;border-radius:50%;object-fit:cover}
.menu-head .e{font-size:12.5px;color:var(--muted);margin-top:2px;word-break:break-all}
.menu-item{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:9px;color:var(--text);font-size:14px;cursor:pointer;text-decoration:none}
.menu-item:hover{background:rgba(255,255,255,.05)}
.menu-item svg{width:17px;height:17px;color:var(--muted)}
.menu-item.danger,.menu-item.danger svg{color:#ef6b6b}
.menu-div{height:1px;background:var(--border);margin:6px 8px}
.menu-foot{text-align:center;padding:9px;border-top:1px solid var(--border);margin-top:4px}
.menu-foot a{color:var(--indigo-soft);font-size:13px;text-decoration:none;cursor:pointer}
.noti{display:flex;gap:11px;padding:11px 12px;border-radius:9px;cursor:pointer}
.noti:hover{background:rgba(255,255,255,.04)}
.noti .nic{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.noti .nic svg{width:16px;height:16px}
.noti .nt{font-size:13.5px}
.noti .ntime{font-size:12px;color:var(--muted);margin-top:2px}

/* ============================================================
   MOBILE — hamburger drawer navigation + responsive layouts
   (applies app-wide; Patients & Ai Studio are hidden from the
   mobile nav and intentionally not given a mobile layout)
   ============================================================ */
.afx-burger{display:none}
.afx-backdrop{display:none}
.afx-mtop{display:none}
.afx-mbar{display:none}

@media (max-width:768px){
  /* let the document scroll naturally on mobile (the desktop layout pins
     everything to 100vh with internal overflow, which traps scrolling) */
  html,body{height:auto !important;min-height:100% !important;overflow-x:hidden !important;overflow-y:auto !important}
  .app{display:block !important;height:auto !important;min-height:100vh;overflow:visible !important}
  .main{height:auto !important;overflow:visible !important;padding:84px 16px 24px !important}

  /* fixed top nav bar with its own background + a dissolve fade beneath, so
     content scrolls cleanly under it instead of showing through */
  .afx-mbar{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    position:fixed;top:0;left:0;right:0;z-index:320;
    height:58px;padding:0 12px;
    background:var(--bg);
  }
  /* the dissolve: fade from the bar's background to transparent */
  .afx-mbar::after{
    content:"";position:absolute;left:0;right:0;top:100%;height:22px;
    background:linear-gradient(to bottom,var(--bg),transparent);
    pointer-events:none;
  }
  .afx-mbar-l{display:flex;align-items:center;gap:12px;min-width:0}
  .afx-mbar-logo{font-size:21px;font-weight:600;letter-spacing:-.4px;white-space:nowrap}
  .afx-mbar-logo .logo-after{color:var(--text)}
  .afx-mbar-logo .x{color:var(--indigo-soft)}

  /* hamburger toggle */
  .afx-burger{
    display:flex;align-items:center;justify-content:center;
    width:42px;height:42px;border-radius:11px;flex:0 0 auto;
    background:var(--sidebar);border:1px solid var(--border-strong);
    color:var(--text);cursor:pointer;padding:0;
  }
  .afx-burger svg{width:22px;height:22px}

  /* right cluster: notifications + avatar */
  .afx-mtop{display:flex;align-items:center;gap:10px;flex:0 0 auto}
  .afx-mtop-bell{
    display:flex;align-items:center;justify-content:center;
    width:42px;height:42px;border-radius:11px;padding:0;
    background:var(--sidebar);border:1px solid var(--border-strong);
    color:var(--text);cursor:pointer;
  }
  .afx-mtop-bell svg{width:21px;height:21px}
  .afx-mtop-av{
    width:42px;height:42px;border-radius:50%;padding:0;cursor:pointer;
    background:none;border:1px solid var(--border-strong);overflow:hidden;flex:0 0 auto;
  }
  .afx-mtop-av img{width:100%;height:100%;object-fit:cover;display:block;background:#222}

  /* slide-out drawer: hide the logo + avatar cluster + bell (they all live in the top bar) */
  .sidebar .logo,
  .sidebar .sb-profile{display:none !important}

  /* dropdown menus must sit above the top bar (and its dissolve overlay);
     !important beats the page-scoped `.pg-* .menu` z-index rules */
  .menu{z-index:340 !important}

  /* sidebar becomes an off-canvas drawer */
  .sidebar{
    position:fixed;top:0;left:0;height:100vh;height:100dvh;
    width:280px !important;max-width:84vw;z-index:330;
    overflow-y:auto;
    transform:translateX(-100%);
    transition:transform .28s ease;
    box-shadow:0 0 40px rgba(0,0,0,.5);
  }
  .app.nav-open .sidebar{transform:translateX(0)}
  /* RTL languages (ar/fa/he/ur): drawer is anchored right and slides in from the right */
  html[dir="rtl"] .sidebar{left:auto;right:0;transform:translateX(100%)}
  html[dir="rtl"] .app.nav-open .sidebar{transform:translateX(0)}
  /* the desktop "collapsed" rail must not shrink the mobile drawer */
  .app.collapsed .sidebar{width:280px !important}
  .app.collapsed .logo-after,
  .app.collapsed .logo-actions,
  .app.collapsed .nav-label,
  .app.collapsed .upgrade-card,
  .app.collapsed .sb-profile .sb-meta,
  .app.collapsed .sb-profile .sb-chev{display:flex}
  .app.collapsed .nav a{justify-content:flex-start;gap:13px;padding:11px 12px;font-size:14.5px}

  /* dim backdrop behind the open drawer */
  .afx-backdrop{
    display:block;position:fixed;inset:0;z-index:310;
    background:rgba(0,0,0,.55);opacity:0;pointer-events:none;
    transition:opacity .28s ease;
  }
  .afx-backdrop.show{opacity:1;pointer-events:auto}

  /* the desktop collapse handle is replaced by the hamburger */
  .side-handle{display:none !important}

  /* hide Patients + Ai Studio in the mobile nav */
  .nav a.m-hide{display:none !important}

  /* unlock scrolling on pages whose desktop layout traps it inside fixed-height,
     internally-scrolling panels (settings/usage cards, dashboard chart row) */
  .settings-grid,.pg-settings .scard,
  .pg-usage .cols,.pg-usage .main,.cards-scroll{
    height:auto !important;min-height:0 !important;overflow:visible !important;
  }
  .pg-settings .settings-grid{grid-template-rows:none !important}

  /* settings: stack the inner two-up / label-control rows so nothing overflows
     the narrow card width */
  .pg-settings .pw-2col{flex-direction:column;gap:0}
  .pg-settings .pw-2col>.field{margin-bottom:11px}
  .pg-settings .pw-actions{flex-wrap:wrap;gap:12px}
  .pg-settings .pw-actions .pw-spacer{margin-left:0}
  .pg-settings .pref{flex-direction:column;align-items:stretch;gap:10px}
  .pg-settings .pref select{min-width:0;width:100%}
  .pg-settings .seg{align-self:flex-start}
  /* keep cards from inflating the single grid column; let tables scroll within */
  .pg-settings .scard{min-width:0}
  .pg-settings .tbl,.pg-settings .trash-table{height:auto !important;min-height:0 !important;overflow-x:auto;min-width:0}

  /* stack the dashboard cards; minmax(0,1fr) + min-width:0 stop a card's wide
     content (gauge, big numbers, chart) from inflating the column past the screen */
  .pg-dashboard .grid,
  .pg-dashboard .grid.bottom{grid-template-columns:minmax(0,1fr);gap:14px}
  .pg-dashboard .grid.bottom{flex:none;margin-top:14px}
  .pg-dashboard .card{min-width:0}
  .pg-dashboard .grid.bottom .card{overflow:visible}

  /* billing / add-credits / upgrade card grids → single column */
  .pg-billing .bill-cards{grid-template-columns:1fr !important}
  .pg-add-credits .packs,
  .pg-upgrade-plan .plans{grid-template-columns:1fr !important}
}

/* small phones: shrink the oversized dashboard type + gauge so the plan name and
   storage gauge/legend sit comfortably inside the card */
@media (max-width:400px){
  .pg-dashboard .count-num{font-size:40px}
  .pg-dashboard .plan-left .plan-name{font-size:38px}
  .pg-dashboard .plan-row{gap:8px}
  .pg-dashboard .gauge{width:160px;height:104px}
  .pg-dashboard .gauge .pct{font-size:34px}
  .pg-dashboard .gauge-legend{font-size:12px}
}

/* ============================================================
   iPad (mini / air) range — sidebar is a fixed collapsed rail by
   default; tapping the handle slides it open as an overlay over
   the content (instead of pushing the layout). Collapse state is
   reset per page in Shell.jsx so it stays a rail on navigation.
   ============================================================ */
/* suppress sidebar animation on first paint (set by Shell until after mount) so the
   default-collapsed state never animates open→closed on load or navigation */
@media (min-width:769px) and (max-width:1200px){
  .app{display:block;height:100vh;overflow:hidden}
  /* The sidebar is a fixed collapsed RAIL by default — this is pure CSS, driven by
     `:not(.rail-open)`, NOT React state, so it is NEVER rendered open on load or
     navigation (no open→close flash). It only opens when the user taps the handle. */
  .sidebar{
    position:fixed;left:0;top:0;height:100vh;height:100dvh;width:76px !important;z-index:320;
    overflow-y:auto;transition:width .22s ease,box-shadow .22s ease;
  }
  .main{margin-left:76px;height:100vh}

  /* collapsed-rail visuals (icons only) — applied unless the overlay is open */
  .app:not(.rail-open) .sidebar .logo{justify-content:center;padding:0}
  .app:not(.rail-open) .sidebar .logo-after,
  .app:not(.rail-open) .sidebar .logo-actions,
  .app:not(.rail-open) .sidebar .logo-img,
  .app:not(.rail-open) .sidebar .nav-label,
  .app:not(.rail-open) .sidebar .upgrade-card{display:none}
  .app:not(.rail-open) .sidebar .logo-x{display:block}
  .app:not(.rail-open) .sidebar .nav a,
  .app:not(.rail-open) .sidebar .side-bottom a{justify-content:center;gap:0;padding-left:0;font-size:0}
  .app:not(.rail-open) .sidebar .nav a{padding:11px 0}
  .app:not(.rail-open) .sidebar .nav a svg,
  .app:not(.rail-open) .sidebar .side-bottom a svg{font-size:initial}
  /* collapsed rail: show the avatar bare (no cluster border/background ring around it) */
  .app:not(.rail-open) .sidebar .sb-profile{justify-content:center;padding:9px 0;gap:0;border:none;background:none}
  .app:not(.rail-open) .sidebar .sb-profile:hover{background:none;border:none}
  .app:not(.rail-open) .sidebar .sb-profile .sb-meta,
  .app:not(.rail-open) .sidebar .sb-profile .sb-chev{display:none}

  /* user tapped the handle → slide open as a 240px overlay (full sidebar restores
     naturally because the rail rules above stop matching) */
  .app.rail-open .sidebar{width:240px !important;box-shadow:0 0 44px rgba(0,0,0,.55)}

  /* dim backdrop behind the overlay */
  .afx-backdrop{
    display:block;position:fixed;inset:0;z-index:300;
    background:rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity .25s ease;
  }
  .afx-backdrop.show{opacity:1;pointer-events:auto}

  /* handle: above the overlay; shows "expand" (›) by default, "collapse" (‹) when open */
  .side-handle{z-index:340 !important;left:61px !important}
  .side-handle .ic-collapse{display:none !important}
  .side-handle .ic-expand{display:block !important}
  .app.rail-open ~ .side-handle{left:228px !important}
  .app.rail-open ~ .side-handle .ic-collapse{display:block !important}
  .app.rail-open ~ .side-handle .ic-expand{display:none !important}

  /* ===== RTL: the rail lives on the RIGHT, so mirror the fixed rail, the content
     margin and the handle to the right edge (the LTR rules above all use `left`) ===== */
  html[dir="rtl"] .sidebar{left:auto;right:0}
  html[dir="rtl"] .main{margin-left:0;margin-right:76px}
  html[dir="rtl"] .side-handle{left:auto !important;right:61px !important}
  html[dir="rtl"] .app.rail-open ~ .side-handle{left:auto !important;right:228px !important}

  .menu{z-index:340 !important}

  /* iPad: the 76px rail narrows the content, so shrink the dashboard cards' big
     content to keep the three top boxes on one row (no horizontal scroll) */
  .pg-dashboard .grid,
  .pg-dashboard .grid.bottom{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pg-dashboard .card{min-width:0;overflow:hidden}
  .pg-dashboard .count-num{font-size:30px}
  .pg-dashboard .count-ic,.pg-dashboard .credit-ic{width:48px;height:48px}
  .pg-dashboard .count-ic svg,.pg-dashboard .credit-ic svg{width:24px;height:24px}
  .pg-dashboard .count-row,.pg-dashboard .credits-row{gap:12px}
  .pg-dashboard .plan-left .plan-name{font-size:26px}
  .pg-dashboard .plan-row{gap:6px}
  .pg-dashboard .gauge{width:118px;height:78px;flex-shrink:0}
  .pg-dashboard .gauge svg{width:100%;height:100%}
  .pg-dashboard .gauge .pct{font-size:21px;top:66%}
  .pg-dashboard .gauge-legend{font-size:10px;bottom:-26px}
}

/* ============================================================================
   MIXED THEME (Style-Guide design system) — 2026-07-08
   "Mixed" = the light theme (all its component overrides apply) + a dark navy
   sidebar, vibrant purple accent and Helvetica Neue. Matches the cloudboard
   mockup: dark chrome, light content. Applied via body.theme-mixed (set by
   applyTheme in app/lib/prefs.js, together with data-theme="light").
   Palette: bg #17122a navy · accent #7c3aed / #8b5cf6 · lavender/blue tints.
   ============================================================================ */
body.theme-mixed{
  --sidebar:#17122a !important;
  --indigo:#7c3aed !important;--indigo-soft:#a78bfa !important;
  --bg:#eceaf4 !important;--panel:#f5f3fc !important;
  --mod-card-hover:#f1eefb !important;
  font-family:'Helvetica Neue',Helvetica,Arial,'Geist',system-ui,sans-serif !important;
}
/* dark navy sidebar needs LIGHT text (the light theme made these dark) */
body.theme-mixed .sidebar{border-right:1px solid rgba(255,255,255,.07) !important}
body.theme-mixed .logo{border-bottom:1px solid rgba(255,255,255,.09) !important;color:#f4f4f6 !important}
body.theme-mixed .logo-dark{display:block !important}   /* show the WHITE logo on the dark sidebar */
body.theme-mixed .logo-light{display:none !important}
body.theme-mixed .nav-label{color:#8480a0 !important}
body.theme-mixed .nav a,body.theme-mixed .side-bottom a{color:#b9b5cf !important}
body.theme-mixed .nav a svg,body.theme-mixed .side-bottom a svg{color:inherit !important}
body.theme-mixed .nav a:hover,body.theme-mixed .side-bottom a:hover{color:#fff !important;background:rgba(255,255,255,.07) !important}
body.theme-mixed .nav a.active{background:var(--indigo) !important;color:#fff !important;box-shadow:0 6px 20px rgba(124,58,237,.45) !important}
body.theme-mixed .nav a.active svg{color:#fff !important}
/* sidebar profile chip on the dark navy */
body.theme-mixed .sb-profile{background:rgba(255,255,255,.05) !important;border-color:rgba(255,255,255,.09) !important;color:#f4f4f6 !important}
body.theme-mixed .sb-profile:hover{background:rgba(255,255,255,.09) !important;border-color:rgba(255,255,255,.15) !important}
body.theme-mixed .sb-profile .sb-nm{color:#f4f4f6 !important}
body.theme-mixed .sb-profile .sb-role,body.theme-mixed .sb-profile .sb-chev{color:#9a96b4 !important}
body.theme-mixed .logo-actions .lbell{border-color:rgba(255,255,255,.14) !important;color:#b9b5cf !important}
/* upgrade card in the sidebar */
body.theme-mixed .upgrade-card{background:linear-gradient(160deg,rgba(124,58,237,.22),rgba(124,58,237,.04)) !important;border-color:rgba(255,255,255,.10) !important}
body.theme-mixed .upgrade-card h4{color:#c4b5fd !important}
body.theme-mixed .upgrade-card p{color:#a7a2c0 !important}
body.theme-mixed .side-handle{background:var(--sidebar) !important;color:#b9b5cf !important;border-color:rgba(255,255,255,.10) !important}
/* accent-follows-purple touches on the light content side */
body.theme-mixed .nav a.active,body.theme-mixed .seg button.active{background:var(--indigo) !important}