:root{color-scheme:dark;--cyan:#00e5ff;--blue:#168cff;--purple:#9b4dff;--glass:rgba(4,16,43,.88);--border:rgba(100,160,255,.38)}
*{box-sizing:border-box}
html,body{margin:0;min-width:320px;min-height:100%;background:#01040d;font-family:Inter,Manrope,"Segoe UI",sans-serif;color:#f5f7ff}
body{overflow:hidden}
button,input{font:inherit}
button{color:inherit}
.assistant-app{position:relative;width:100vw;height:100vh;min-height:520px;overflow:hidden;background:#020817}
.reference-stage{position:absolute;inset:0;background:url("assets/ai-assistant-reference.png") center/100% 100% no-repeat}
.semantic-header,.semantic-content{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.hotspots{position:absolute;inset:0}
.hotspot,.quick-actions button{position:absolute;border:0;padding:0;background:transparent;cursor:pointer;border-radius:999px;outline:none}
.hotspot:focus-visible,.quick-actions button:focus-visible{box-shadow:0 0 0 2px #fff,0 0 0 6px rgba(0,200,255,.6)}
.profile-control{left:82.7%;top:2.2%;width:15.9%;height:7.3%}
.notification-control{left:72.9%;top:4.1%;width:3.1%;height:4.2%}
.language-control{left:77.5%;top:4.2%;width:3.1%;height:4.1%}
.keyboard-control{left:18.2%;top:66.4%;width:4.7%;height:7.5%}
.microphone-control{left:50%;top:61.25%;width:136px;height:136px;transform:translateX(-50%);overflow:visible}
.settings-control{left:76.8%;top:66.2%;width:5.1%;height:7.8%}
.active-ring{display:none;position:absolute;left:50%;top:50%;width:146px;height:146px;transform:translate(-50%,-50%);border:2px solid var(--cyan);border-radius:50%;box-shadow:0 0 24px var(--cyan),inset 0 0 20px var(--purple);animation:micPulse 1.1s ease-in-out infinite;pointer-events:none}
.microphone-control.listening .active-ring{display:block}
.quick-actions{position:absolute;left:11.55%;top:81.15%;width:77%;height:9.1%;display:grid;grid-template-columns:1.08fr .97fr .95fr .93fr .9fr;gap:1%}
.quick-actions button{position:relative;width:100%;height:100%;border-radius:22px;transition:transform .2s,box-shadow .2s,background .2s}
.quick-actions button:hover{transform:translateY(-4px);background:rgba(30,80,180,.08);box-shadow:0 10px 28px rgba(0,105,255,.2)}
.popover,.keyboard-panel{position:absolute;z-index:10;background:rgba(2,10,28,.94);border:1px solid var(--border);box-shadow:0 18px 50px #000,0 0 25px rgba(33,110,255,.2);backdrop-filter:blur(18px);opacity:0;visibility:hidden;transform:translateY(-8px);transition:.2s}
.popover.open,.keyboard-panel.open{opacity:1;visibility:visible;transform:none}
.profile-menu{right:2.8%;top:10%;width:205px;padding:16px;border-radius:18px;display:grid;gap:10px}
.profile-menu small{color:#00e5b0}.profile-menu button{background:rgba(40,90,170,.14);border:1px solid rgba(100,160,255,.16);padding:9px;border-radius:10px;text-align:left}
.settings-menu{right:17%;bottom:20%;width:260px;padding:17px;border-radius:18px;display:grid;gap:13px;font-size:13px}.settings-menu label{display:grid;gap:8px}
.settings-menu .open-gemini-key-modal{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  background:linear-gradient(135deg,rgba(0,229,255,0.12),rgba(155,77,255,0.18));
  border:1px solid rgba(0,229,255,0.35);
  color:#f0f7ff;
  font-weight:600;
  padding:10px 14px;
  border-radius:12px;
  cursor:pointer;
  transition:all .2s ease;
}
.settings-menu .open-gemini-key-modal:hover{
  background:linear-gradient(135deg,rgba(0,229,255,0.22),rgba(155,77,255,0.3));
  border-color:#00e5ff;
  box-shadow:0 0 15px rgba(0,229,255,0.25);
  transform:translateY(-1px);
}
.settings-key-badge{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#ffaa00;
  box-shadow:0 0 8px #ffaa00;
  flex-shrink:0;
}
.settings-key-badge.active{
  background:#00e5b0;
  box-shadow:0 0 10px #00e5b0;
}
.keyboard-panel{left:50%;bottom:22%;width:min(600px,80vw);padding:18px;border-radius:22px;transform:translate(-50%,10px)}
.keyboard-panel.open{transform:translate(-50%,0)}.keyboard-panel label{display:block;margin-bottom:10px;font-weight:600}.keyboard-panel div{display:flex;gap:8px}.keyboard-panel input{flex:1;min-width:0;border:1px solid var(--border);background:#061126;color:white;border-radius:13px;padding:13px 15px;outline:none}.keyboard-panel button{border:0;border-radius:13px;padding:0 22px;background:linear-gradient(135deg,#168cff,#7c3cff);cursor:pointer}
.toast{position:absolute;z-index:20;left:50%;bottom:4%;padding:12px 20px;background:rgba(3,13,34,.92);border:1px solid var(--border);border-radius:999px;box-shadow:0 8px 30px #000;opacity:0;transform:translate(-50%,15px);pointer-events:none;transition:.25s}.toast.show{opacity:1;transform:translate(-50%,0)}
.mobile-ui{display:none}
@keyframes pulse{50%{transform:scale(1.09);opacity:.65}}
@keyframes micPulse{0%,100%{transform:translate(-50%,-50%) scale(1);opacity:1}50%{transform:translate(-50%,-50%) scale(1.08);opacity:.65}}

@media (max-width:800px),(max-aspect-ratio:1/1){
 body{overflow:auto}.assistant-app{height:auto;min-height:100vh;overflow:hidden;background:radial-gradient(circle at 50% 22%,#102d79 0,#071633 29%,#020817 64%)}
 .reference-stage,.hotspots{display:none}.mobile-ui{display:block;position:relative;min-height:100vh;padding:20px 18px 28px;background:radial-gradient(circle at 65% 22%,rgba(32,89,196,.42),transparent 32%),radial-gradient(circle at 20% 48%,rgba(104,42,196,.18),transparent 25%),linear-gradient(#030918,#06132d 52%,#020817)}
 .mobile-header{display:flex;justify-content:space-between;align-items:center}.brand{display:flex;align-items:center;gap:10px;font-size:20px}.spark{font-size:30px;color:#42cfff;text-shadow:0 0 16px #7c3cff}.avatar{width:42px;height:42px;border-radius:50%;border:1px solid var(--border);background:#0c2453}
 .mobile-hero{margin-top:56px;max-width:410px}.mobile-hero>p:first-child{color:#cbd4e9}.mobile-hero h2{font-size:clamp(42px,12vw,64px);line-height:1.05;margin:10px 0;background:linear-gradient(110deg,#27c4ff,#8d55ff);background-clip:text;color:transparent}.muted{color:#b5bfd4;line-height:1.6}.ready{display:inline-flex;align-items:center;gap:9px;margin-top:10px;padding:11px 16px;background:rgba(8,32,70,.65);border:1px solid rgba(100,160,255,.18);border-radius:30px}.ready i{width:9px;height:9px;background:#00e5b0;border-radius:50%;box-shadow:0 0 12px #00e5b0}
 .mobile-orb{width:210px;height:210px;margin:24px auto;border:2px solid #18a8ff;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle,#391786 0 18%,#08163d 45%,#020817 70%);box-shadow:0 0 20px #00c8ff,inset 0 0 35px #7c3cff,0 0 70px rgba(32,97,255,.65);animation:pulse 3s ease-in-out infinite}.mobile-orb:before,.mobile-orb:after{content:"";position:absolute;width:260px;height:95px;border:1px solid #6f71ff;border-radius:50%;transform:rotate(18deg)}.mobile-orb:after{transform:rotate(-25deg)}.mobile-orb span{font-size:80px;text-shadow:0 0 18px white,0 0 35px #8d4dff}
 .mobile-summary,.mobile-voice{background:linear-gradient(135deg,rgba(10,34,76,.88),rgba(5,16,47,.88));border:1px solid var(--border);border-radius:24px;box-shadow:0 18px 45px rgba(0,0,0,.35);backdrop-filter:blur(14px)}.mobile-summary{padding:18px}.mobile-summary h3{margin:0 0 14px}.stats{display:grid;grid-template-columns:1fr 1fr;gap:12px}.stats article{min-height:100px;padding:13px;border:1px solid rgba(92,140,235,.14);border-radius:15px;background:rgba(6,21,51,.7);display:flex;flex-direction:column}.stats strong{font-size:27px;margin-top:5px}.stats i{height:3px;margin-top:auto;border-radius:5px;box-shadow:0 0 8px currentColor}.blue{background:#168cff;color:#168cff}.purple{background:#9b4dff;color:#9b4dff}.green{background:#00e5b0;color:#00e5b0}.orange{background:#ff9d00;color:#ff9d00}
 .mobile-voice{position:relative;margin-top:18px;height:180px;display:grid;place-items:center}.mobile-mic{z-index:1;width:90px;height:90px;border-radius:50%;border:2px solid #39dfff;background:#081635;font-size:38px;box-shadow:0 0 18px #00c8ff,0 0 25px #8e3fff,inset 0 0 20px #283a88}.mobile-voice p{position:absolute;bottom:7px;margin:0;color:#dae2f5;font-size:14px}.mobile-wave{position:absolute;left:8%;right:8%;height:55px;background:repeating-linear-gradient(90deg,transparent 0 5px,#2caaff 6px 8px,transparent 9px 12px);mask:linear-gradient(transparent,#000 35% 65%,transparent);animation:wave .8s linear infinite}
 .mobile-actions{display:flex;gap:12px;overflow-x:auto;padding:18px 1px 8px;scrollbar-width:none}.mobile-actions button{flex:0 0 190px;height:82px;border:1px solid rgba(86,143,240,.28);border-radius:18px;background:rgba(7,25,60,.82);display:flex;align-items:center;gap:14px;text-align:left;font-size:25px;padding:14px;color:#33adff}.mobile-actions span{color:white;font-size:14px;line-height:1.4}.mobile-ui footer{text-align:center;color:#99a6c2;font-size:12px;margin-top:24px}
 .profile-menu{top:70px}.keyboard-panel{position:fixed;bottom:20px}.settings-menu{position:fixed;right:20px;bottom:20px}.toast{position:fixed;bottom:18px;white-space:nowrap}
}
@keyframes wave{50%{transform:scaleY(.55)}}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* Live functional overlays retain the reference artwork while replacing its demo data. */
.reference-stage{z-index:0}.hotspots{z-index:4}.dynamic-overlay,.live-state-label,.live-waveform{position:absolute;z-index:2;pointer-events:none}
.dynamic-time{left:675px;top:25px;width:190px;text-align:center;background:#020714;font-size:20px;font-weight:650;line-height:1.25}
.dynamic-time small{display:block;color:#a9b4ce;font-size:14px;font-weight:400}
.dynamic-greeting{left:62px;top:151px;width:390px;height:48px;padding:8px;background:linear-gradient(90deg,#071021 88%,transparent);font-size:20px;color:#dce3f3}
.dynamic-profile-pill{
  left:1270px;
  top:22px;
  width:244px;
  height:75px;
  background:linear-gradient(135deg,rgba(6,18,48,0.96) 0%,rgba(2,8,24,0.98) 100%);
  border:1px solid rgba(80,150,255,0.35);
  border-radius:40px;
  box-shadow:0 4px 20px rgba(0,0,0,0.7),inset 0 1px 0 rgba(255,255,255,0.15);
  display:flex;
  align-items:center;
  gap:12px;
  padding:0 16px;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.dynamic-profile-pill .dynamic-avatar{
  position:relative;
  left:auto;
  top:auto;
  width:48px;
  height:48px;
  min-width:48px;
  border-radius:50%;
  overflow:hidden;
  background:linear-gradient(135deg,#0a224f,#153e85);
  display:grid;
  place-items:center;
  border:2px solid #00e5ff;
  box-shadow:0 0 14px rgba(0,229,255,0.4);
  font-weight:700;
  font-size:19px;
  color:#fff;
}
.dynamic-profile-pill .dynamic-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:50%;
}
.dynamic-profile-info{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.dynamic-profile-info strong{
  font-size:15px;
  font-weight:700;
  color:#f5f8ff;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  line-height:1.2;
}
.dynamic-profile-info small{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:3px;
  color:#00e5b0;
  font-size:12px;
  font-weight:500;
}
.online-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#00e5b0;
  box-shadow:0 0 8px #00e5b0;
  display:inline-block;
}
.dynamic-stats{position:absolute;left:1107px;top:234px;width:378px;height:260px;pointer-events:none}
.dynamic-stats strong{position:absolute;display:block;width:75px;height:38px;padding:3px;background:#0a1838;font-size:27px;font-weight:500}
.dynamic-stats strong:nth-child(1){left:26px;top:44px}.dynamic-stats strong:nth-child(2){left:204px;top:44px}.dynamic-stats strong:nth-child(3){left:26px;top:171px}.dynamic-stats strong:nth-child(4){left:204px;top:171px}
.dynamic-stats span{position:absolute;left:204px;top:143px;width:105px;padding:1px 3px;background:#0a1838;font-size:14px}
.notification-control:after{content:"";position:absolute;right:5px;top:-7px;width:19px;height:19px;border-radius:50%;background:#020714}
.live-waveform{left:345px;top:652px;width:846px;height:92px;opacity:.92}
.live-state-label{left:615px;top:761px;width:310px;margin:0;padding:3px;text-align:center;background:#0a1533;color:#edf2ff;font-size:16px}
.assistant-app[data-assistant-state="error"] .active-ring{display:block;border-color:#ff4f6d;box-shadow:0 0 24px #ff4f6d}
.assistant-app[data-assistant-state="speaking"] .active-ring,.assistant-app[data-assistant-state="thinking"] .active-ring{display:block}
.profile-menu a,.settings-menu button{color:#fff;text-decoration:none;background:rgba(40,90,170,.14);border:1px solid rgba(100,160,255,.16);padding:9px;border-radius:10px;text-align:left}
.settings-menu p{margin:0;color:#aebbd3;font-size:13px;line-height:1.45}
.keyboard-panel{max-height:440px}.keyboard-panel>label{font-size:16px}.keyboard-row{display:flex;gap:8px}
.transcript-messages{display:block!important;max-height:260px;margin-bottom:12px;overflow:auto;scrollbar-width:thin}
.transcript-messages p{margin:8px 0;padding:10px 12px;border-radius:12px;line-height:1.4;white-space:pre-wrap}
.transcript-messages strong{display:block;margin-bottom:3px;color:#5ad7ff;font-size:11px;text-transform:uppercase;letter-spacing:.08em}
.transcript-user{margin-left:15%!important;background:#15346c}.transcript-assistant{margin-right:15%!important;background:#081a3b}

/* Gemini API Key Card Modal Overlay */
.gemini-modal-overlay{
  position:fixed;
  inset:0;
  z-index:999;
  background:rgba(1,4,14,0.82);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  visibility:hidden;
  transition:opacity .25s cubic-bezier(0.16,1,0.3,1),visibility .25s cubic-bezier(0.16,1,0.3,1);
}
.gemini-modal-overlay.open{opacity:1;visibility:visible}

.gemini-card-modal{
  position:relative;
  width:min(520px,92vw);
  background:linear-gradient(150deg,#091a3e 0%,#040e24 55%,#020817 100%);
  border:1px solid rgba(90,170,255,0.4);
  border-radius:24px;
  box-shadow:0 30px 80px rgba(0,0,0,0.95),0 0 45px rgba(0,180,255,0.2),inset 0 1px 0 rgba(255,255,255,0.18);
  padding:28px;
  overflow:hidden;
  transform:scale(0.92) translateY(16px);
  transition:transform .25s cubic-bezier(0.16,1,0.3,1);
}
.gemini-modal-overlay.open .gemini-card-modal{transform:scale(1) translateY(0)}

.modal-glow-bg{
  position:absolute;
  top:-60px;
  left:50%;
  transform:translateX(-50%);
  width:320px;
  height:120px;
  background:radial-gradient(ellipse,rgba(0,229,255,0.22) 0%,rgba(155,77,255,0.15) 50%,transparent 70%);
  filter:blur(30px);
  pointer-events:none;
}

.modal-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:20px}
.modal-title-group{display:flex;align-items:center;gap:14px}
.gemini-icon-badge{
  width:46px;
  height:46px;
  border-radius:14px;
  background:linear-gradient(135deg,rgba(0,229,255,0.15),rgba(155,77,255,0.25));
  border:1px solid rgba(100,180,255,0.4);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 0 16px rgba(0,229,255,0.25);
  flex-shrink:0;
}
.modal-title-group h2{margin:0 0 4px;font-size:20px;font-weight:700;color:#f5f8ff;letter-spacing:-0.01em}
.modal-subtitle{margin:0;font-size:12.5px;color:#a1b2d4;line-height:1.45}
.modal-close-btn{
  background:rgba(20,45,95,0.4);
  border:1px solid rgba(100,160,255,0.2);
  color:#9eb0d2;
  width:34px;
  height:34px;
  border-radius:50%;
  font-size:22px;
  line-height:1;
  display:grid;
  place-items:center;
  cursor:pointer;
  transition:all .18s ease;
  flex-shrink:0;
}
.modal-close-btn:hover{
  color:#fff;
  background:rgba(255,60,90,0.25);
  border-color:rgba(255,80,110,0.5);
  transform:rotate(90deg);
}

.modal-body{display:grid;gap:18px}

.key-status-card{
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px 16px;
  background:rgba(6,18,46,0.7);
  border:1px solid rgba(80,150,255,0.2);
  border-radius:16px;
  transition:all .2s ease;
}
.key-status-card.active{
  background:rgba(0,229,176,0.08);
  border-color:rgba(0,229,176,0.35);
}
.status-icon-wrap{position:relative;width:14px;height:14px;display:grid;place-items:center;flex-shrink:0}
.status-circle{width:10px;height:10px;border-radius:50%;background:#ffaa00;box-shadow:0 0 8px #ffaa00}
.key-status-card.active .status-circle{background:#00e5b0;box-shadow:0 0 10px #00e5b0}
.status-ping{
  position:absolute;
  width:18px;
  height:18px;
  border-radius:50%;
  border:1px solid #ffaa00;
  opacity:0.6;
  animation:statusPing 2s cubic-bezier(0,0,0.2,1) infinite;
}
.key-status-card.active .status-ping{border-color:#00e5b0}
@keyframes statusPing{
  75%,100%{transform:scale(1.8);opacity:0}
}
.status-info{flex:1;min-width:0}
.status-info strong{display:block;font-size:13.5px;font-weight:600;color:#f0f5ff;margin-bottom:2px}
.status-info p{margin:0;font-size:12px;color:#94a6cb;line-height:1.4}

.modal-field{display:grid;gap:8px}
.field-label-row{display:flex;justify-content:space-between;align-items:center;gap:10px}
.field-label-row label{font-size:13px;font-weight:600;color:#d5e2fc}
.get-key-link{
  font-size:12px;
  color:#00e5ff;
  text-decoration:none;
  transition:color .18s ease;
}
.get-key-link:hover{color:#7ce9ff;text-decoration:underline}

.key-input-container{
  position:relative;
  display:flex;
  align-items:center;
}
.key-input-container input{
  width:100%;
  background:#040d22;
  border:1px solid rgba(90,160,255,0.32);
  border-radius:14px;
  padding:13px 44px 13px 15px;
  color:#fff;
  font-size:14px;
  letter-spacing:0.02em;
  outline:none;
  transition:border-color .2s,box-shadow .2s,background .2s;
}
.key-input-container input:focus{
  border-color:#00e5ff;
  background:#061330;
  box-shadow:0 0 0 3px rgba(0,229,255,0.18),0 0 20px rgba(0,229,255,0.2);
}
.btn-toggle-eye{
  position:absolute;
  right:10px;
  background:transparent;
  border:0;
  color:#8297bf;
  cursor:pointer;
  padding:6px;
  display:grid;
  place-items:center;
  border-radius:8px;
  transition:color .18s;
}
.btn-toggle-eye:hover{color:#fff}

.key-validation-feedback{
  padding:10px 14px;
  border-radius:12px;
  font-size:12.5px;
  line-height:1.45;
  display:none;
  animation:fadeSlideDown .2s ease;
}
.key-validation-feedback.success{
  display:block;
  background:rgba(0,229,176,0.12);
  border:1px solid rgba(0,229,176,0.35);
  color:#00f2bb;
}
.key-validation-feedback.error{
  display:block;
  background:rgba(255,75,95,0.12);
  border:1px solid rgba(255,75,95,0.35);
  color:#ff788c;
}
@keyframes fadeSlideDown{
  from{opacity:0;transform:translateY(-6px)}
  to{opacity:1;transform:translateY(0)}
}

.modal-footer-actions{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-top:8px;
  padding-top:14px;
  border-top:1px solid rgba(80,140,255,0.15);
}
.modal-footer-right{display:flex;gap:10px;align-items:center}

.modal-btn{
  border:0;
  border-radius:14px;
  padding:11px 20px;
  font-size:13.5px;
  font-weight:600;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:8px;
  outline:none;
  transition:all .18s cubic-bezier(0.16,1,0.3,1);
}
.btn-test{
  background:rgba(20,50,110,0.5);
  border:1px solid rgba(100,165,255,0.3);
  color:#dbe6fd;
}
.btn-test:hover{
  background:rgba(30,70,150,0.7);
  border-color:rgba(100,180,255,0.6);
  color:#fff;
}
.btn-danger{
  background:rgba(255,60,90,0.15);
  border:1px solid rgba(255,80,110,0.4);
  color:#ff8597;
}
.btn-danger:hover{
  background:rgba(255,60,90,0.3);
  border-color:#ff4f6d;
  color:#fff;
}
.btn-save{
  background:linear-gradient(135deg,#00b8ff 0%,#7c3cff 100%);
  color:#fff;
  box-shadow:0 4px 18px rgba(0,184,255,0.35);
}
.btn-save:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 24px rgba(0,184,255,0.5),0 0 16px rgba(124,60,255,0.4);
}
.btn-save:active{transform:scale(0.98)}

.btn-spinner{
  width:14px;
  height:14px;
  border:2px solid rgba(255,255,255,0.3);
  border-top-color:#00e5ff;
  border-radius:50%;
  animation:btnSpin .7s linear infinite;
  display:inline-block;
}
@keyframes btnSpin{to{transform:rotate(360deg)}}

/* Preserve the original reference canvas instead of stretching it to the viewport. */
html,body{width:100%;height:100%;overflow:hidden;background:#01040d}
body{position:relative}
.assistant-app{
 position:absolute;
 left:var(--canvas-left,0px);
 top:var(--canvas-top,0px);
 width:1536px;
 height:1024px;
 min-height:0;
 transform:scale(var(--canvas-scale,1));
 transform-origin:top left;
}
@media (max-width:800px),(max-aspect-ratio:1/1){
 body{overflow:hidden}
 .assistant-app{width:1536px;height:1024px;min-height:0;background:#020817}
 .reference-stage,.hotspots{display:block!important}
 .mobile-ui{display:none!important}
 .profile-menu{position:absolute;top:10%;right:2.8%}
 .settings-menu{position:absolute;right:17%;bottom:20%}
 .keyboard-panel{position:absolute;bottom:22%}
 .toast{position:absolute;bottom:4%}
}

/* ====================================================
   Cyber Glassmorphism Authentication Portal (Sign In / Sign Up)
   ==================================================== */
.auth-page-body{
  overflow-y:auto;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#020716;
  font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;
  color:#f0f5ff;
  padding:32px 16px;
}

.auth-cosmic-bg{
  position:fixed;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:0;
}
.auth-glow-orb{
  position:absolute;
  border-radius:50%;
  filter:blur(80px);
  opacity:0.35;
  animation:authOrbFloat 14s infinite alternate ease-in-out;
}
.orb-1{width:420px;height:420px;top:-100px;left:10%;background:radial-gradient(circle,#00e5ff 0%,#168cff 60%,transparent 100%)}
.orb-2{width:480px;height:480px;bottom:-150px;right:8%;background:radial-gradient(circle,#9b4dff 0%,#ef4dff 60%,transparent 100%);animation-duration:18s}
.orb-3{width:300px;height:300px;top:40%;left:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,#0055ff 0%,transparent 70%);opacity:0.25}

@keyframes authOrbFloat{
  0%{transform:translate(0,0) scale(1)}
  100%{transform:translate(40px,30px) scale(1.15)}
}

.auth-container{
  position:relative;
  z-index:1;
  width:100%;
  max-width:470px;
  margin:auto;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.auth-brand-header{
  text-align:center;
  margin-bottom:24px;
}
.auth-brand-badge{
  width:58px;
  height:58px;
  border-radius:18px;
  background:linear-gradient(135deg,rgba(0,229,255,0.18),rgba(155,77,255,0.25));
  border:1px solid rgba(100,180,255,0.45);
  box-shadow:0 0 24px rgba(0,229,255,0.35);
  display:grid;
  place-items:center;
  margin:0 auto 16px;
}
.auth-brand-title{
  font-family:Outfit,Inter,sans-serif;
  font-size:26px;
  font-weight:700;
  letter-spacing:-0.02em;
  margin:0 0 6px;
  background:linear-gradient(110deg,#ffffff 20%,#a8d8ff 60%,#cba2ff 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}
.auth-brand-subtitle{
  margin:0;
  font-size:13.5px;
  color:#9eb0d3;
  line-height:1.5;
}

.auth-glass-card{
  width:100%;
  background:linear-gradient(155deg,rgba(10,25,58,0.85) 0%,rgba(4,14,38,0.92) 100%);
  border:1px solid rgba(100,175,255,0.32);
  border-radius:26px;
  box-shadow:0 30px 80px rgba(0,0,0,0.8),0 0 40px rgba(0,180,255,0.18),inset 0 1px 0 rgba(255,255,255,0.15);
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
  padding:30px 28px;
}

.auth-tabs{
  display:grid;
  grid-template-columns:1fr 1fr;
  background:rgba(4,12,32,0.85);
  border:1px solid rgba(80,150,255,0.2);
  border-radius:14px;
  padding:4px;
  margin-bottom:22px;
}
.auth-tab-btn{
  border:0;
  background:transparent;
  color:#9cb0d4;
  font-size:14px;
  font-weight:600;
  padding:10px 0;
  border-radius:10px;
  cursor:pointer;
  transition:all .2s ease;
}
.auth-tab-btn.active{
  background:linear-gradient(135deg,#168cff,#7c3cff);
  color:#ffffff;
  box-shadow:0 4px 16px rgba(22,140,255,0.35);
}

.auth-alert{
  margin-bottom:16px;
  animation:authFade .25s ease;
}
.alert-msg{
  padding:11px 15px;
  border-radius:12px;
  font-size:13px;
  line-height:1.45;
}
.alert-msg.status{
  background:rgba(0,229,176,0.12);
  border:1px solid rgba(0,229,176,0.35);
  color:#00f2bb;
}
.alert-msg.error{
  background:rgba(255,60,90,0.12);
  border:1px solid rgba(255,80,110,0.35);
  color:#ff7c92;
}
@keyframes authFade{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}

.auth-form{
  display:grid;
  gap:16px;
}
.auth-form.hidden{display:none}

.auth-form-group{
  display:grid;
  gap:7px;
}
.auth-form-group label{
  font-size:12.5px;
  font-weight:600;
  color:#d0dff8;
  letter-spacing:0.01em;
}
.auth-input-wrapper{
  position:relative;
  display:flex;
  align-items:center;
}
.auth-input-icon{
  position:absolute;
  left:14px;
  color:#6982b2;
  display:grid;
  place-items:center;
  pointer-events:none;
}
.auth-input-wrapper input{
  width:100%;
  background:#05112a;
  border:1px solid rgba(90,160,255,0.28);
  border-radius:13px;
  padding:12px 42px 12px 42px;
  color:#ffffff;
  font-size:14px;
  outline:none;
  transition:border-color .2s,box-shadow .2s,background .2s;
}
.auth-input-wrapper input:focus{
  border-color:#00e5ff;
  background:#07183d;
  box-shadow:0 0 0 3px rgba(0,229,255,0.16),0 0 16px rgba(0,229,255,0.15);
}
.auth-eye-toggle{
  position:absolute;
  right:10px;
  background:transparent;
  border:0;
  color:#738bb8;
  cursor:pointer;
  padding:6px;
  display:grid;
  place-items:center;
  transition:color .18s;
}
.auth-eye-toggle:hover{color:#fff}

.auth-submit-btn{
  margin-top:8px;
  width:100%;
  border:0;
  border-radius:13px;
  padding:13px;
  font-size:14.5px;
  font-weight:700;
  letter-spacing:0.01em;
  color:#fff;
  background:linear-gradient(135deg,#00b8ff 0%,#7c3cff 100%);
  box-shadow:0 6px 20px rgba(0,184,255,0.35);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  transition:transform .18s ease,box-shadow .18s ease;
}
.auth-submit-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 28px rgba(0,184,255,0.5),0 0 20px rgba(124,60,255,0.4);
}
.auth-submit-btn:active{transform:scale(0.98)}

.signup-btn{
  background:linear-gradient(135deg,#00e5b0 0%,#168cff 60%,#9b4dff 100%);
  box-shadow:0 6px 20px rgba(0,229,176,0.3);
}
.signup-btn:hover{
  box-shadow:0 8px 28px rgba(0,229,176,0.45),0 0 20px rgba(22,140,255,0.35);
}

.auth-card-footer{
  margin-top:20px;
  padding-top:16px;
  border-top:1px solid rgba(80,140,255,0.14);
  text-align:center;
}
.auth-card-footer p{
  margin:0;
  font-size:12px;
  color:#8297bf;
}

/* ====================================================
   Profile Edit Modal & Avatar Upload Styles
   ==================================================== */
.profile-card-modal{
  max-width:480px;
}
.profile-avatar-picker-section{
  display:flex;
  justify-content:center;
  margin-bottom:8px;
}
.avatar-picker-wrapper{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}
.avatar-preview-circle{
  position:relative;
  width:86px;
  height:86px;
  border-radius:50%;
  background:linear-gradient(135deg,#0a224f,#103473);
  border:2px solid #00e5ff;
  box-shadow:0 0 20px rgba(0,229,255,0.35),inset 0 0 15px rgba(155,77,255,0.3);
  display:grid;
  place-items:center;
  font-size:32px;
  font-weight:700;
  color:#ffffff;
  overflow:hidden;
  cursor:pointer;
}
.avatar-preview-circle img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:50%;
}
.avatar-camera-badge{
  position:absolute;
  bottom:0;
  right:0;
  left:0;
  height:28px;
  background:rgba(2,8,23,0.75);
  backdrop-filter:blur(4px);
  display:grid;
  place-items:center;
  color:#00e5ff;
  transition:background .2s;
}
.avatar-preview-circle:hover .avatar-camera-badge{
  background:rgba(0,229,255,0.85);
  color:#020817;
}

.btn-choose-photo{
  background:rgba(20,50,110,0.4);
  border:1px solid rgba(100,160,255,0.3);
  color:#b8ccf2;
  font-size:12px;
  font-weight:600;
  padding:6px 14px;
  border-radius:20px;
  cursor:pointer;
  transition:all .18s ease;
}
.btn-choose-photo:hover{
  background:rgba(30,70,150,0.6);
  border-color:#00e5ff;
  color:#fff;
}

.profile-fields-grid{
  display:grid;
  gap:12px;
}
.profile-fields-grid .modal-field label{
  font-size:12.5px;
  font-weight:600;
  color:#c8d9f7;
  margin-bottom:3px;
  display:block;
}

.creator-credit-note{
  font-size:12px;
  color:#8fa5ce;
}
.creator-credit-note strong{
  color:#00e5ff;
}

.profile-menu-action{
  width:100%;
  display:flex;
  align-items:center;
  gap:8px;
  background:rgba(0,229,255,0.08)!important;
  border:1px solid rgba(0,229,255,0.3)!important;
  color:#dbe9ff!important;
  font-weight:600;
  padding:10px 12px!important;
  border-radius:10px;
  cursor:pointer;
  transition:all .18s;
  text-align:left;
}
.profile-menu-action:hover{
  background:rgba(0,229,255,0.18)!important;
  border-color:#00e5ff!important;
  color:#fff!important;
}

.creator-badge-dropdown{
  padding:6px 8px;
  font-size:11px;
  color:#94a6c8;
  border-top:1px solid rgba(80,140,255,0.15);
  border-bottom:1px solid rgba(80,140,255,0.15);
}
.creator-badge-dropdown strong{
  color:#00e5ff;
}

.dynamic-creator-badge{
  left:50%;
  bottom:26px;
  transform:translateX(-50%);
  padding:4px 14px;
  background:rgba(2,8,23,0.85);
  border:1px solid rgba(0,229,255,0.25);
  border-radius:999px;
  font-size:12px;
  font-weight:600;
  color:#00e5ff;
  letter-spacing:0.02em;
  box-shadow:0 0 14px rgba(0,229,255,0.2);
}