/* ===================== STAGE / DEVICE ===================== */
.stage{
  min-height:100dvh;
  display:flex;justify-content:center;align-items:flex-start;
  padding:28px;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(232,184,75,.06), transparent 60%),
    var(--bg);
  position:relative;
}
.stage-login,.stage-student,.stage-admin{align-items:center;padding-top:40px;padding-bottom:40px}

.phone{
  width:430px;max-width:100%;
  height:min(908px,calc(100dvh - 80px));
  background:var(--bg-2);
  border-radius:46px;
  border:1px solid rgba(255,255,255,.09);
  box-shadow:0 50px 120px -40px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.05);
  overflow:hidden;display:flex;flex-direction:column;position:relative;
}
.phone-status{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 26px 6px;font-size:13px;font-weight:600;color:var(--text);
  flex-shrink:0;z-index:5;
}
.phone-status-r{display:flex;align-items:center;gap:7px}
.sig{width:17px;height:11px;border-radius:2px;background:
  linear-gradient(90deg,var(--text) 70%,rgba(255,255,255,.3) 70%)}
.phone-scroll{flex:1;overflow-y:auto;overflow-x:hidden;position:relative}
.phone-scroll::-webkit-scrollbar{width:0}

/* ===================== MOBILE FULL-BLEED =====================
   On a real phone the simulated-device frame ("phone inside a phone")
   is redundant: hide the fake 9:41 status bar, drop the bezel
   (no radius/border/shadow/max-width), and remove the .stage mockup
   padding so every screen fills the real viewport edge-to-edge.
   Desktop (>600px) keeps the phone-preview mockup for the operator. */
@media(max-width:600px){
  .stage,
  .stage-login,.stage-student,.stage-admin{
    padding:0;align-items:stretch;justify-content:stretch;min-height:100dvh;
  }
  .phone{
    width:100%;max-width:none;height:100dvh;
    border:none;border-radius:0;box-shadow:none;
  }
  .phone-status{display:none}
  /* push content below the OS status bar / notch */
  .phone-scroll{padding-top:env(safe-area-inset-top,0)}
}

/* review switcher */
.switcher{
  position:fixed;left:50%;bottom:18px;transform:translateX(-50%);
  display:flex;align-items:center;gap:4px;z-index:60;
  background:rgba(20,19,18,.82);backdrop-filter:blur(14px);
  border:1px solid var(--hair-gold);border-radius:999px;
  padding:5px 6px 5px 14px;box-shadow:var(--shadow);
}
.sw-label{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-2);font-weight:700;margin-right:4px}
.switcher button{
  font-size:12.5px;font-weight:600;color:var(--muted);
  padding:7px 14px;border-radius:999px;transition:.15s;
}
.switcher button:hover{color:var(--text)}
.switcher button.on{background:var(--gold-grad);color:#1a1305;font-weight:700}

.toast{
  position:fixed;left:50%;bottom:78px;transform:translateX(-50%);
  background:rgba(28,26,23,.95);border:1px solid var(--hair-gold);
  color:var(--text);font-size:13px;font-weight:600;
  padding:11px 18px;border-radius:12px;z-index:70;
  box-shadow:var(--shadow);animation:rmIn .25s ease both;
}

/* shared section header */
.sec-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px}
.sec-head.mt{margin-top:26px}
.sec-head.bare{margin-bottom:16px}
.sec-title{font-family:var(--ff-display);font-weight:700;font-size:16px;letter-spacing:-.01em}
.link-gold{font-size:13px;font-weight:600;color:var(--gold)}
.link-gold:hover{color:var(--gold-hi)}

.icon-btn{
  position:relative;width:44px;height:44px;border-radius:13px;
  display:grid;place-items:center;color:var(--text);
  background:rgba(255,255,255,.04);border:1px solid var(--hair);transition:.15s;
}
.icon-btn:hover{background:rgba(232,184,75,.1);border-color:var(--hair-gold)}
.icon-btn.lg{width:46px;height:46px}
.dot-badge{position:absolute;top:9px;right:10px;width:8px;height:8px;border-radius:50%;
  background:var(--gold);box-shadow:0 0 0 2px var(--surface-2)}

/* avatars */
.avatar{border-radius:13px;display:grid;place-items:center;font-family:var(--ff-display);
  font-weight:700;color:#1a1305;flex-shrink:0;letter-spacing:.01em}
.avatar-gold{background:var(--gold-grad)}
.avatar-danger{background:linear-gradient(135deg,#E89A86,#C25C46);color:#2a0f08}
.avatar-red{background:linear-gradient(135deg,#E89A86,#C25C46);color:#2a0f08}
.avatar-warm{background:linear-gradient(135deg,#F0C277,#C99437);color:#2a1c05}
.avatar-dim{background:rgba(255,255,255,.08);color:var(--text)}

/* ===================== LOGIN ===================== */
.login{min-height:100%;display:flex;flex-direction:column;position:relative;overflow:hidden}
.login-bg{position:absolute;inset:0;z-index:0}
.login-glow{position:absolute;top:-12%;left:50%;transform:translateX(-50%);
  width:130%;height:55%;
  background:radial-gradient(50% 60% at 50% 40%, rgba(232,184,75,.20), transparent 70%);
  filter:blur(6px)}
.login-grid{position:absolute;inset:0;opacity:.5;
  background:
   linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px) 0 0/100% 56px,
   radial-gradient(120% 90% at 50% 110%, rgba(0,0,0,.6), transparent 60%)}
.login-inner{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;
  padding:30px 26px 30px;}
.login-brand{display:flex;flex-direction:column;align-items:center;text-align:center;margin-top:24px}
.login-shieldwrap{position:relative;margin-bottom:18px}
.login-shieldwrap::after{content:"";position:absolute;inset:-30%;
  background:radial-gradient(50% 50% at 50% 50%,rgba(232,184,75,.32),transparent 70%);z-index:-1}
.login-shield{width:92px;height:auto}
.login-word{font-size:30px;letter-spacing:.04em;line-height:1}
.login-sub{margin-top:9px;color:var(--gold);font-size:11px}
.login-tag{text-align:center;margin:26px 4px 24px;font-family:var(--ff-display);
  font-weight:600;font-size:19px;line-height:1.4}
.login-card{padding:22px 20px;display:flex;flex-direction:column;gap:16px;
  box-shadow:var(--shadow)}
.seg{display:flex;gap:5px;background:rgba(0,0,0,.35);border:1px solid var(--hair);
  padding:5px;border-radius:14px}
.seg button{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;
  padding:11px;border-radius:10px;font-weight:600;font-size:13.5px;color:var(--muted);transition:.18s}
.seg button.seg-on{background:var(--gold-grad-soft);color:var(--gold-hi);
  box-shadow:inset 0 0 0 1px var(--hair-gold)}
.field{display:flex;flex-direction:column;gap:8px}
.field-top{display:flex;align-items:center;justify-content:space-between}
.field-label{font-size:12.5px;font-weight:600;color:var(--muted);letter-spacing:.01em}
.forgot{font-size:12.5px;color:var(--gold);font-weight:600}
.forgot:hover{color:var(--gold-hi)}
.field-box{display:flex;align-items:center;gap:10px;
  background:rgba(0,0,0,.32);border:1px solid var(--hair);border-radius:13px;
  padding:0 14px;transition:.15s}
.field-box:focus-within{border-color:var(--gold);box-shadow:0 0 0 3px rgba(232,184,75,.12)}
.field-ic{color:var(--muted-2);flex-shrink:0}
.field-box input{flex:1;background:none;border:none;outline:none;color:var(--text);
  font-size:15px;padding:15px 0;font-weight:500}
.field-box input::placeholder{color:var(--muted-2)}
.field-eye{color:var(--muted);min-width:44px;min-height:44px;display:grid;place-items:center;margin-right:-8px}
.field-eye:hover{color:var(--text)}
.login-btn{margin-top:4px}
.login-hint{text-align:center;font-size:12px}
.login-foot{margin-top:auto;padding-top:26px;text-align:center;font-size:13.5px}
.login-foot a{color:var(--gold);font-weight:600}

/* ===================== STUDENT ===================== */
.stu{padding:8px 18px 0;display:flex;flex-direction:column;gap:20px;min-height:100%}
.stu-head{display:flex;align-items:center;justify-content:space-between;padding-top:8px}
.stu-head-l{display:flex;align-items:center;gap:13px}
.stu-shield{width:44px;height:52px;object-fit:contain}
.stu-hi{font-size:13px}
.stu-name{font-size:23px;line-height:1.05;margin-top:1px}

.stu-hero{position:relative;overflow:hidden;padding:22px 20px;
  background:
    radial-gradient(120% 90% at 85% -10%, rgba(232,184,75,.16), transparent 55%),
    linear-gradient(165deg,var(--surface-3),var(--surface));
  border-color:var(--hair-gold)}
.stu-hero-glow{position:absolute;right:-40px;top:-40px;width:180px;height:180px;
  background:radial-gradient(circle,rgba(232,184,75,.18),transparent 70%)}
.stu-hero-top{display:flex;align-items:center;justify-content:space-between;position:relative}
.stu-hero-day{font-size:12px}
.stu-hero-title{font-size:30px;line-height:1.04;margin:16px 0 14px;letter-spacing:-.015em}
.stu-hero-meta{display:flex;flex-wrap:wrap;gap:8px 16px;margin-bottom:20px}
.stu-hero-meta span{display:inline-flex;align-items:center;gap:7px;font-size:13px;
  color:var(--muted);font-weight:600}
.stu-hero-meta svg{color:var(--gold)}
.stu-start{margin-bottom:14px}
.stu-hero-note{font-size:12.5px;line-height:1.5;font-style:italic;
  padding-left:11px;border-left:2px solid var(--hair-gold)}

.stu-week{display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:10px}
.wk-ring{display:flex;align-items:center;gap:11px;padding:14px}
.wk-ring strong{font-family:var(--ff-display);font-size:19px;display:block;line-height:1}
.wk-ring strong span{font-size:14px;color:var(--muted)}
.wk-ring .muted{font-size:11.5px}
.wk-stat{padding:14px;display:flex;flex-direction:column;gap:5px}
.wk-stat strong{font-family:var(--ff-display);font-size:21px;line-height:1}
.wk-stat .muted{font-size:11.5px}
.wk-stat .ok-t{font-size:16px;color:var(--ok)}
.wk-ic{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;margin-bottom:3px}
.wk-ic.flame{background:rgba(232,184,75,.14);color:var(--gold)}
.wk-ic.ok{background:rgba(121,194,154,.14);color:var(--ok)}

.stu-achv{display:flex;gap:15px;padding:18px;align-items:center;
  background:linear-gradient(120deg,rgba(232,184,75,.12),var(--surface));
  border-color:var(--hair-gold)}
.achv-medal{width:54px;height:54px;border-radius:16px;flex-shrink:0;display:grid;place-items:center;
  background:var(--gold-grad);color:#1a1305;box-shadow:var(--shadow-gold)}
.achv-body .eyebrow{font-size:10px}
.achv-title{font-size:18px;margin:3px 0 5px}
.achv-body p{font-size:12.5px;line-height:1.45}

.stu-checkin{display:flex;align-items:center;gap:14px;padding:16px;width:100%;text-align:left;
  transition:.15s}
.stu-checkin:hover{border-color:var(--hair-gold)}
.ci-ic{width:46px;height:46px;border-radius:13px;flex-shrink:0;display:grid;place-items:center;
  background:rgba(232,184,75,.12);color:var(--gold)}
.ci-body{flex:1;display:flex;flex-direction:column;gap:2px}
.ci-label{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);font-weight:700}
.ci-body strong{font-family:var(--ff-display);font-size:16px}
.ci-body .muted{font-size:12px}

.stu-prog{padding:18px}
.prog-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.prog-top .muted{font-size:12px}
.prog-val{font-size:34px;line-height:1;margin:5px 0 9px}
.prog-unit{font-size:16px;color:var(--muted);margin-left:4px;font-weight:600}
.prog-foot{display:flex;gap:10px;margin-top:18px;padding-top:16px;border-top:1px solid var(--hair)}
.prog-foot div{flex:1;display:flex;flex-direction:column;gap:3px}
.prog-foot strong{font-family:var(--ff-display);font-size:17px}
.prog-foot .muted{font-size:11px}

.stu-chat{display:flex;align-items:center;gap:13px;padding:15px;width:100%;text-align:left;transition:.15s}
.stu-chat:hover{border-color:var(--hair-gold)}
.chat-av{width:46px;height:46px;border-radius:14px;flex-shrink:0;display:grid;place-items:center;
  background:var(--gold-grad);color:#1a1305;font-family:var(--ff-display);font-weight:800;font-size:19px}
.chat-body{flex:1;min-width:0}
.chat-row{display:flex;align-items:center;justify-content:space-between}
.chat-row strong{font-size:14.5px}
.chat-time{font-size:11.5px}
.chat-prev{font-size:13px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-badge{flex-shrink:0;min-width:22px;height:22px;border-radius:11px;background:var(--gold);
  color:#1a1305;font-size:12px;font-weight:800;display:grid;place-items:center;padding:0 6px}

.stu-spacer{height:96px}

/* bottom tab bar — sticky to the phone viewport bottom. margin-top:auto pins
   it to the bottom when content is short; position:sticky keeps it visible
   while taller content scrolls under it. (The screen roots set min-height:100%
   so the flex column always fills the scroll area.) */
.tabbar{position:sticky;bottom:0;margin-top:auto;z-index:20;
  display:flex;justify-content:space-around;
  padding:11px 8px calc(env(safe-area-inset-bottom,0) + 16px);
  background:linear-gradient(180deg,rgba(13,12,13,.55),rgba(13,12,13,.97) 45%);
  backdrop-filter:blur(16px);border-top:1px solid var(--hair)}
.tab{display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--muted-2);
  font-size:10.5px;font-weight:600;position:relative;padding:4px 10px;transition:.15s}
.tab span{letter-spacing:.01em}
.tab:hover{color:var(--muted)}
.tab-on{color:var(--gold)}
.tab-badge{position:absolute;top:-2px;right:4px;min-width:16px;height:16px;border-radius:8px;
  background:var(--danger);color:#fff;font-size:10px;font-weight:800;display:grid;place-items:center;padding:0 4px}

/* On full-bleed mobile the demo "Telas" switcher would collide with the
   app's own bottom tabbar — float it just above the nav (and lift the
   toast clear of it). Desktop keeps it pinned to the very bottom. */
@media(max-width:600px){
  .switcher{bottom:calc(env(safe-area-inset-bottom,0) + 84px)}
  .toast{bottom:calc(env(safe-area-inset-bottom,0) + 148px)}
}