:root{
  --navy-deep:#071527;
  --navy:#0B1F3A;
  --ink:#2B3E5C;
  --paper:#F7F8FA;
  --card:#FFFFFF;
  --gold:#FC4700;
  --gold-soft:#FF8A5C;
  --slate:#64748B;
  --line:#E4E7EC;
  --danger:#C0442F;
}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}
body{
  font-family:'Inter',sans-serif;
  background:var(--paper);
  color:var(--navy-deep);
  -webkit-font-smoothing:antialiased;
}
.view{display:none;height:100%;min-height:100vh;}
.view.active{display:block;}

/* ---------- LOADING ---------- */
#view-loading.active{
  display:flex;align-items:center;justify-content:center;
  background:var(--navy-deep);
}
.loading-logo{width:40px;height:40px;animation:spin-logo 1.8s linear infinite;}
@keyframes spin-logo{to{transform:rotate(360deg);}}

/* ---------- LOGIN ---------- */
#view-login.active{
  display:grid;grid-template-columns:1fr 1fr;
  min-height:100vh;
}
.brand-panel{
  background:var(--navy-deep);
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:56px 56px 48px;
}
.brand-panel svg{position:absolute;inset:0;width:100%;height:100%;opacity:0.9;}
.brand-mark{position:relative;z-index:2;display:flex;align-items:center;gap:12px;}
.brand-mark img{width:34px;height:34px;display:block;animation:breathe-logo 3.6s ease-in-out infinite;}
.brand-mark span{
  font-family:'Sora',sans-serif;font-weight:600;font-size:15px;
  color:#EDEFF3;letter-spacing:0.02em;
}
@keyframes breathe-logo{
  0%,100%{transform:scale(1);opacity:1;}
  50%{transform:scale(1.08);opacity:.9;}
}
.brand-copy{position:relative;z-index:2;max-width:360px;}
.brand-copy .eyebrow{
  font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:0.08em;
  color:var(--gold-soft);text-transform:uppercase;margin-bottom:18px;display:block;
}
.brand-copy h1{
  font-family:'Sora',sans-serif;font-weight:600;font-size:32px;line-height:1.25;
  color:#F7F8FA;
}
.brand-copy p{
  font-size:14px;color:#9AA6BA;margin-top:14px;line-height:1.6;
}
.brand-foot{position:relative;z-index:2;font-size:12px;color:#5B6B85;font-family:'IBM Plex Mono',monospace;}

.form-panel{
  display:flex;align-items:center;justify-content:center;
  padding:40px;background:var(--paper);
}
.form-card{width:100%;max-width:380px;}
.form-card h2{
  font-family:'Sora',sans-serif;font-size:22px;font-weight:600;color:var(--navy-deep);
}
.form-card p.sub{color:var(--slate);font-size:14px;margin-top:8px;margin-bottom:32px;line-height:1.5;}

.google-btn{
  width:100%;display:flex;align-items:center;justify-content:center;gap:12px;
  background:var(--card);border:1px solid var(--line);border-radius:10px;
  padding:13px 18px;font-family:'Inter',sans-serif;font-size:14px;font-weight:600;
  color:var(--navy-deep);cursor:pointer;transition:border-color .15s ease, box-shadow .15s ease;
}
.google-btn:hover{border-color:var(--gold);}
.google-btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
.google-btn:disabled{opacity:0.6;cursor:progress;}
.google-btn svg{width:18px;height:18px;flex-shrink:0;}

.hint{
  display:flex;align-items:center;gap:8px;margin-top:20px;
  font-size:12px;color:var(--slate);font-family:'IBM Plex Mono',monospace;
}
.hint .dot{width:6px;height:6px;border-radius:50%;background:var(--slate);flex-shrink:0;}

.alert{
  margin-top:18px;padding:12px 14px;border-radius:8px;
  background:#FBEAE6;border:1px solid #F0C7BC;color:var(--danger);
  font-size:13px;line-height:1.5;display:none;
}
.alert.show{display:block;}

/* ---------- DASHBOARD ---------- */
#view-dashboard.active{display:flex;flex-direction:column;height:100vh;}
.topbar{
  height:60px;flex-shrink:0;background:var(--navy-deep);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 24px;
}
.topbar-left{display:flex;align-items:center;gap:10px;}
.topbar-left img{width:24px;height:24px;display:block;}
.topbar-left span{
  font-family:'Sora',sans-serif;font-weight:600;font-size:14px;color:#EDEFF3;
}
.topbar-right{display:flex;align-items:center;gap:14px;}
.user-chip{display:flex;align-items:center;gap:10px;}
.avatar{
  width:28px;height:28px;border-radius:50%;
  background:var(--gold);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-family:'Sora',sans-serif;font-weight:700;font-size:12px;
}
.user-email{font-size:13px;color:#C7CEDB;font-family:'IBM Plex Mono',monospace;}
.signout-btn{
  background:transparent;border:1px solid #2A3A54;color:#C7CEDB;
  font-size:12px;font-family:'Inter',sans-serif;padding:7px 14px;border-radius:7px;
  cursor:pointer;transition:border-color .15s ease,color .15s ease;
}
.signout-btn:hover{border-color:var(--gold);color:#F7F8FA;}
.signout-btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}

.embed-wrap{flex:1;background:#E9ECF1;}
.embed-wrap iframe{width:100%;height:100%;border:0;display:block;}
.pbi-open-card{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:24px;}
.pbi-icon{width:40px;height:40px;margin-bottom:4px;}
.pbi-open-card h3{margin:0;font-family:Sora,sans-serif;font-size:20px;color:#1a1a2e;}
.pbi-open-card p{color:#666;max-width:380px;font-size:14px;line-height:1.5;margin:0 0 8px;}
.pbi-open-btn{background:#FC4700;color:#fff;text-decoration:none;font-weight:600;padding:12px 28px;border-radius:8px;transition:background .15s ease,transform .15s ease;}
.pbi-open-btn:hover{background:#e13f00;transform:translateY(-1px);}

@media (max-width:900px){
  #view-login.active{grid-template-columns:1fr;}
  .brand-panel{display:none;}
  .form-panel{padding:24px;}
}
@media (prefers-reduced-motion:reduce){
  .island{animation:none !important;}
  .loading-logo{animation:none !important;}
  .brand-mark img{animation:none !important;}
}

.island{animation:breathe-island 3.6s ease-in-out infinite;}
@keyframes breathe-island{
  0%,100%{opacity:.55;}
  50%{opacity:1;}
}