.page{display:none;flex-direction:column;height:100%;background:var(--bg2);overflow:hidden}
.page.active{display:flex}

/* HOME PAGE */
.home-header{
  padding:14px 18px 10px;border-bottom:1px solid var(--border);flex-shrink:0;
  display:flex;align-items:center;gap:10px;
  background:linear-gradient(90deg,rgba(124,58,237,.08),transparent);
}
.home-header-icon{
  width:36px;height:36px;border-radius:10px;
  background:linear-gradient(135deg,var(--acc),var(--logo));
  display:flex;align-items:center;justify-content:center;font-size:18px;color:#fff;
  box-shadow:0 4px 12px var(--glow);flex-shrink:0;
  animation:iconGlow 2s ease-in-out infinite alternate;
}
@keyframes iconGlow{0%{box-shadow:0 4px 12px var(--glow)}100%{box-shadow:0 4px 24px rgba(192,38,211,.5)}}
.home-header-info h1{font-size:15px;font-weight:700;color:var(--tx);margin:0}
.home-header-info p{font-size:10px;color:var(--tx4);margin-top:1px}

.home-body{flex:1;display:flex;flex-direction:column;overflow:hidden}
.home-textarea-wrap{flex:1;padding:14px 18px;display:flex;flex-direction:column;min-height:0;position:relative}
#hta{
  flex:1;background:transparent;border:none;outline:none;resize:none;
  font-size:13.5px;color:var(--tx3);line-height:1.85;font-family:var(--font);width:100%;
  caret-color:var(--acc2);
}
#hta::placeholder{color:var(--tx5)}
#hta:focus~.textarea-glow{opacity:1}
.textarea-glow{
  position:absolute;bottom:0;left:18px;right:18px;height:2px;
  background:linear-gradient(90deg,transparent,var(--acc),transparent);
  border-radius:2px;opacity:0;transition:opacity .3s;pointer-events:none;
}
.home-charcount{
  font-size:9px;color:var(--tx5);text-align:right;margin-top:6px;flex-shrink:0;
  display:flex;align-items:center;justify-content:flex-end;gap:4px;
}
.char-bar{
  width:60px;height:3px;background:var(--border);border-radius:2px;overflow:hidden;
}
.char-fill{height:100%;background:linear-gradient(90deg,var(--grn),var(--acc));border-radius:2px;transition:width .2s}
.home-toolbar{
  background:var(--bg3);border-top:1.5px solid var(--border);
  padding:10px 14px;display:flex;align-items:center;gap:9px;flex-shrink:0;
}
.watch-btn{
  background:linear-gradient(135deg,var(--adbg),#2d4abf);
  color:#fff;font-size:9px;font-weight:600;padding:7px 11px;
  border-radius:8px;border:none;cursor:pointer;line-height:1.5;
  text-align:center;transition:transform .2s,box-shadow .2s;
  box-shadow:0 2px 10px rgba(59,91,219,.3);
}
.watch-btn:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(59,91,219,.5)}
.credit-info{font-size:11px;color:var(--tx4);margin:0 auto;display:flex;align-items:center;gap:4px}
.credit-count{color:var(--acc2);font-weight:700;font-size:13px}
.gen-btn{
  background:linear-gradient(135deg,#c026d3,#e91e8c);
  color:#fff;font-size:11px;font-weight:700;padding:9px 20px;
  border-radius:8px;border:none;cursor:pointer;display:flex;align-items:center;gap:7px;
  transition:transform .2s,box-shadow .2s;letter-spacing:.3px;
  box-shadow:0 4px 16px rgba(233,30,140,.35);
}
.gen-btn:hover{transform:translateY(-1px);box-shadow:0 6px 24px rgba(233,30,140,.55)}
.gen-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.gen-btn:active{transform:translateY(1px)}

.wave{display:flex;gap:2px;align-items:center;height:14px}
.wave span{width:2px;border-radius:2px;background:#fff;animation:wv .65s ease-in-out infinite}
.wave span:nth-child(1){height:4px;animation-delay:0s}
.wave span:nth-child(2){height:10px;animation-delay:.1s}
.wave span:nth-child(3){height:7px;animation-delay:.2s}
.wave span:nth-child(4){height:12px;animation-delay:.3s}
.wave span:nth-child(5){height:5px;animation-delay:.4s}
@keyframes wv{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.9)}}

/* AUDIO PLAYER */
#player{
  background:linear-gradient(90deg,rgba(26,23,56,.98),rgba(18,16,42,.98));
  border-top:1.5px solid var(--brd2);padding:10px 16px;
  display:flex;align-items:center;gap:10px;flex-shrink:0;
  backdrop-filter:blur(10px);
}
.p-thumb{
  width:36px;height:36px;border-radius:9px;flex-shrink:0;
  background:linear-gradient(135deg,var(--acc),var(--logo));
  display:flex;align-items:center;justify-content:center;font-size:16px;color:#fff;
  box-shadow:0 2px 10px var(--glow);position:relative;overflow:hidden;
}
.p-thumb.playing::after{
  content:'';position:absolute;inset:0;border-radius:9px;
  border:2px solid rgba(255,255,255,.3);
  animation:playerPulse 1s ease-in-out infinite;
}
@keyframes playerPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.12);opacity:.5}}
.p-info{min-width:0;flex:0 0 110px}
.p-name{font-size:10px;color:var(--tx);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.p-subtitle{font-size:8px;color:var(--tx4);margin-top:1px}
.p-ctrls{display:flex;align-items:center;gap:6px}
.p-btn{
  background:none;border:none;cursor:pointer;color:var(--tx3);
  font-size:16px;padding:3px;display:flex;align-items:center;
  transition:color .15s,transform .15s;border-radius:50%;
}
.p-btn:hover{color:var(--acc2);transform:scale(1.15)}
.p-playbtn{
  width:34px;height:34px;border-radius:50%;
  background:linear-gradient(135deg,var(--acc),var(--logo));
  border:none;display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 10px var(--glow);transition:transform .2s,box-shadow .2s;
}
.p-playbtn:hover{transform:scale(1.1);box-shadow:0 4px 18px var(--glow)}
.p-playbtn i{font-size:13px;color:#fff}
.p-playbtn.playing{background:linear-gradient(135deg,#e11d48,var(--gen))}
.p-prog-wrap{flex:1;cursor:pointer;user-select:none}
.p-prog{height:4px;background:var(--border);border-radius:4px;position:relative;transition:height .15s}
.p-prog:hover{height:6px}
.p-fill{height:100%;background:linear-gradient(90deg,var(--acc),var(--acc2));border-radius:4px;width:0%;position:relative;transition:width .1s linear}
.p-fill::after{content:'';position:absolute;right:-6px;top:-4px;width:12px;height:12px;border-radius:50%;background:var(--acc2);box-shadow:0 0 8px var(--acc2);opacity:0;transition:opacity .2s}
.p-prog-wrap:hover .p-fill::after{opacity:1}
.p-times{display:flex;justify-content:space-between;font-size:8px;color:var(--tx4);margin-top:4px}
.p-dl{
  font-size:17px;color:var(--tx3);cursor:pointer;transition:color .15s,transform .15s;
  padding:4px;display:flex;align-items:center;border:none;background:none;border-radius:6px;
}
.p-dl:hover{color:var(--acc2);transform:scale(1.1)}
.p-vol{display:flex;align-items:center;gap:5px;font-size:14px;color:var(--tx4)}
.p-vol input{width:50px;height:3px;accent-color:var(--acc);cursor:pointer;background:var(--border);border-radius:2px;outline:none;border:none}

/* VOICE LIBRARY PAGE */
.vl-top{
  padding:12px 16px;border-bottom:1px solid var(--border);flex-shrink:0;
  background:linear-gradient(90deg,rgba(14,148,136,.06),transparent);
}
.vl-page-header{display:flex;align-items:center;gap:9px;margin-bottom:10px}
.vl-page-icon{
  width:34px;height:34px;border-radius:9px;
  background:linear-gradient(135deg,#0e9488,#0d6e88);
  display:flex;align-items:center;justify-content:center;font-size:17px;color:#fff;
  box-shadow:0 4px 12px rgba(14,148,136,.35);
}
.vl-page-title{font-size:15px;font-weight:700;color:var(--tx)}
.vl-page-sub{font-size:10px;color:var(--tx4)}
.vl-search-row{display:flex;gap:8px;align-items:center}
.vl-searchbox{
  flex:1;background:var(--bg4);border:1px solid var(--brd2);border-radius:9px;
  padding:8px 13px;display:flex;align-items:center;gap:9px;
  transition:border-color .2s,box-shadow .2s;
}
.vl-searchbox:focus-within{border-color:var(--acc);box-shadow:0 0 0 3px var(--acc3)}
.vl-searchbox i{font-size:16px;color:var(--tx4)}
.vl-searchbox input{background:transparent;border:none;outline:none;color:var(--tx);font-size:12px;width:100%;font-family:var(--font)}
.vl-searchbox input::placeholder{color:var(--tx5)}
.vl-filter-btn{
  width:38px;height:38px;background:var(--bg4);border:1px solid var(--brd2);
  border-radius:9px;display:flex;align-items:center;justify-content:center;
  cursor:pointer;flex-shrink:0;transition:all .2s;
}
.vl-filter-btn:hover{border-color:var(--acc);box-shadow:0 0 0 3px var(--acc3);color:var(--acc2)}
.vl-filter-btn i{font-size:18px;color:var(--tx3)}
#vl-list{flex:1;overflow-y:auto;padding:10px 16px}
.vl-section{
  font-size:9px;font-weight:700;color:var(--tx4);text-transform:uppercase;letter-spacing:.09em;
  margin-bottom:8px;margin-top:14px;display:flex;align-items:center;gap:7px;
}
.vl-section:first-child{margin-top:0}
.vl-section .cnt{font-size:8px;padding:1px 7px;border-radius:5px;background:var(--bg3);color:var(--tx3);margin-left:3px;font-weight:500}
.v-row{
  display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:9px;
  cursor:pointer;margin-bottom:4px;border:1px solid transparent;transition:all .18s;
}
.v-row:hover{background:var(--bg4);border-color:var(--border);transform:translateX(2px)}
.v-row.sel{background:#1a1640;border-color:var(--acc);box-shadow:0 0 0 2px var(--acc3)}
.v-av{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff;flex-shrink:0;box-shadow:0 2px 8px rgba(0,0,0,.3)}
.v-info{flex:1;min-width:0}
.v-name{font-size:12px;color:var(--tx);font-weight:600}
.v-meta{font-size:9px;color:var(--tx4);margin-top:2px}
.v-badges{display:flex;gap:4px;align-items:center;flex-shrink:0;flex-wrap:wrap}
.badge{font-size:8px;padding:2px 7px;border-radius:5px;font-weight:600}
.b-ms{background:#1e3a5f;color:#60a5fa}
.b-neural{background:#3b0764;color:#c4b5fd}
.b-free{background:#14532d;color:#4ade80}
.b-hi{background:#3d1a00;color:#fb923c}
.v-play{
  width:28px;height:28px;border-radius:50%;
  background:linear-gradient(135deg,var(--acc),var(--logo));
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;cursor:pointer;border:none;transition:transform .15s,box-shadow .15s;
  box-shadow:0 2px 8px var(--glow);
}
.v-play:hover{transform:scale(1.15);box-shadow:0 4px 14px var(--glow)}
.v-play i{font-size:11px;color:#fff}
.no-result{text-align:center;padding:40px 20px;color:var(--tx4)}
.no-result i{font-size:44px;display:block;margin-bottom:12px;color:var(--border)}

/* HISTORY PAGE */
.hist-top{
  padding:14px 18px;border-bottom:1px solid var(--border);flex-shrink:0;
  display:flex;align-items:center;gap:12px;
  background:linear-gradient(90deg,rgba(233,30,140,.06),transparent);
}
.hist-page-icon{
  width:38px;height:38px;border-radius:10px;
  background:linear-gradient(135deg,#be185d,#e11d48);
  display:flex;align-items:center;justify-content:center;font-size:18px;color:#fff;
  box-shadow:0 4px 14px rgba(225,29,72,.4);flex-shrink:0;
}
.hist-title-block h2{font-size:18px;font-weight:700;color:var(--tx);line-height:1}
.hist-title-block p{font-size:10px;color:var(--tx4);margin-top:2px}
.guest-warn{
  background:#1c1200;border:1px solid #92400e;border-radius:9px;
  margin:10px 16px;padding:10px 13px;font-size:11px;color:#fbbf24;
  display:none;align-items:center;gap:10px;flex-shrink:0;
}
.guest-warn i{font-size:18px;flex-shrink:0}
#hist-list{flex:1;overflow-y:auto;padding:10px 16px}
.h-row{
  display:flex;align-items:center;gap:9px;padding:10px 12px;
  background:var(--bg4);border-radius:9px;margin-bottom:6px;
  cursor:pointer;border:1px solid transparent;transition:all .18s;
}
.h-row:hover{border-color:var(--brd2);transform:translateX(2px);box-shadow:0 2px 12px rgba(0,0,0,.2)}
.h-av{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff;flex-shrink:0;box-shadow:0 2px 8px rgba(0,0,0,.3)}
.h-vchip{background:linear-gradient(135deg,var(--acc),var(--logo));color:#ede9fe;font-size:9px;padding:3px 9px;border-radius:5px;font-weight:700;white-space:nowrap;max-width:85px;overflow:hidden;text-overflow:ellipsis;flex-shrink:0}
.h-mp3{font-size:10px;color:var(--tx3);white-space:nowrap;flex-shrink:0;max-width:90px;overflow:hidden;text-overflow:ellipsis}
.h-prev{font-size:10px;color:var(--grn);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-style:italic}
.h-date{font-size:9px;color:var(--tx4);text-align:right;line-height:1.5;flex-shrink:0;white-space:nowrap}
.h-play{
  width:26px;height:26px;border-radius:50%;
  background:linear-gradient(135deg,var(--gen),#c026d3);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;cursor:pointer;border:none;
  transition:transform .15s,box-shadow .15s;
  box-shadow:0 2px 8px rgba(233,30,140,.3);
}
.h-play:hover{transform:scale(1.15);box-shadow:0 4px 14px rgba(233,30,140,.5)}
.h-play i{font-size:10px;color:#fff}
.empty{text-align:center;padding:50px 20px;color:var(--tx4)}
.empty-icon{
  width:70px;height:70px;border-radius:50%;background:var(--bg3);
  display:flex;align-items:center;justify-content:center;margin:0 auto 16px;
  border:2px solid var(--border);
}
.empty-icon i{font-size:32px;color:var(--border)}
.empty p{font-size:12px;line-height:1.8;color:var(--tx4)}

/* ADMIN PAGE */
.adm-top{padding:12px 16px;border-bottom:1px solid var(--border);flex-shrink:0;display:flex;align-items:center;justify-content:space-between}
.adm-title{font-size:16px;font-weight:700;color:#f59e0b;display:flex;align-items:center;gap:8px}
.adm-stats{display:flex;gap:10px;padding:10px 16px;border-bottom:1px solid var(--border);flex-shrink:0}
.adm-stat{background:var(--bg4);border-radius:9px;padding:10px 14px;flex:1;text-align:center;border:1px solid var(--border)}
.adm-stat-n{font-size:22px;font-weight:800;color:var(--acc2)}
.adm-stat-l{font-size:9px;color:var(--tx4);text-transform:uppercase;letter-spacing:.07em;margin-top:2px}
.adm-filters{display:flex;gap:8px;padding:8px 16px;border-bottom:1px solid var(--border);flex-shrink:0}
.adm-fb{font-size:10px;padding:5px 13px;border-radius:6px;border:1px solid var(--brd2);background:transparent;color:var(--tx3);cursor:pointer;transition:all .15s;font-family:var(--font)}
.adm-fb.on{background:var(--acc);color:#fff;border-color:var(--acc)}
.adm-export{margin-left:auto;font-size:10px;padding:5px 13px;border-radius:6px;border:1px solid var(--grn);background:transparent;color:#4ade80;cursor:pointer;display:flex;align-items:center;gap:5px;font-family:var(--font)}
.adm-export:hover{background:#0f2d1a}
#adm-table-wrap{flex:1;overflow-y:auto;padding:10px 16px}
.adm-table{width:100%;border-collapse:collapse;font-size:11px}
.adm-table th{text-align:left;padding:7px 9px;font-size:9px;color:var(--tx4);text-transform:uppercase;letter-spacing:.07em;border-bottom:1px solid var(--border);font-weight:600;white-space:nowrap}
.adm-table td{padding:7px 9px;border-bottom:1px solid var(--border);color:var(--tx3);vertical-align:middle}
.adm-table tr:hover td{background:var(--bg4)}
.utype{font-size:8px;padding:2px 8px;border-radius:5px;font-weight:700}
.t-guest{background:#1a1505;color:#f59e0b}
.t-user{background:#0a2010;color:#4ade80}