:root{
  --navy:#061827;
  --navy2:#0b293b;
  --navy3:#10374c;
  --mint:#35d6b2;
  --mint-strong:#20bd99;
  --mint2:#c9fff1;
  --cyan:#55dcec;
  --bg:#f2f6f7;
  --white:#fff;
  --text:#112b38;
  --muted:#657985;
  --line:#dce7e9;
  --shadow:0 16px 45px rgba(8,35,51,.08);
  --shadow-strong:0 24px 70px rgba(3,24,38,.18);
}

html{scroll-behavior:smooth}
body{
  background:
    radial-gradient(circle at 85% 5%,rgba(53,214,178,.09),transparent 26rem),
    linear-gradient(180deg,#f6f9fa 0%,var(--bg) 60%);
  font-feature-settings:"ss01" 1,"cv11" 1;
  -webkit-font-smoothing:antialiased;
}
button,a,select,input,summary{outline-offset:3px}
button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid rgba(53,214,178,.48)}

.sidebar{
  width:272px;
  padding:26px 20px 22px;
  background:
    radial-gradient(circle at 20% -5%,rgba(85,220,236,.13),transparent 15rem),
    linear-gradient(180deg,#061827 0%,#071d2d 58%,#061521 100%);
  border-right:1px solid rgba(255,255,255,.06);
  box-shadow:18px 0 60px rgba(3,18,29,.08);
}
.brand{gap:12px;min-width:0}
.brand .tooth{
  flex:0 0 auto;
  width:47px;
  height:47px;
  border-radius:15px;
  overflow:hidden;
  background:linear-gradient(145deg,#f7fffd,#d8fff4);
  border:1px solid rgba(121,241,217,.48);
  box-shadow:0 10px 28px rgba(18,208,169,.16),inset 0 1px 0 rgba(255,255,255,.12);
}
.tooth img{display:block;width:100%;height:100%;object-fit:contain}
.brand b{font-size:1.08rem;letter-spacing:-.035em;line-height:1.05;color:#fff}
.brand b span{color:var(--mint)}
.brand small{font-size:9px;letter-spacing:.07em;text-transform:uppercase;color:#8da8b4;opacity:1;margin-top:5px;white-space:nowrap}
.sidebar nav{gap:6px;margin-top:35px}
.nav{
  min-height:48px;
  display:flex;
  align-items:center;
  gap:11px;
  padding:9px 11px;
  border:1px solid transparent;
  color:#97acb7;
  border-radius:13px;
  transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease;
}
.nav:hover{transform:translateX(2px)}
.nav.active,.nav:hover{background:rgba(255,255,255,.07);color:#fff;border-color:rgba(255,255,255,.06)}
.nav.active{box-shadow:inset 3px 0 0 var(--mint)}
.nav-glyph{
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border-radius:9px;
  background:rgba(255,255,255,.045);
  color:#8bcbbf;
  font-size:15px;
  font-weight:900;
}
.nav.active .nav-glyph{color:var(--navy);background:var(--mint);box-shadow:0 7px 16px rgba(53,214,178,.2)}
.goal{
  padding:16px;
  border:1px solid rgba(111,236,211,.12);
  background:linear-gradient(155deg,rgba(25,66,84,.88),rgba(12,39,55,.92));
  border-radius:17px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.goal-head{height:auto!important;background:none!important;display:flex;align-items:center;justify-content:space-between}
.goal-head span{font-size:8px;color:var(--mint);font-weight:900;letter-spacing:.08em}
.goal b{font-size:1.02rem;color:#fff;font-variant-numeric:tabular-nums}
.goal .goal-track{height:7px;background:#264759;border-radius:999px;overflow:hidden}
.goal .goal-track i{background:linear-gradient(90deg,var(--mint-strong),var(--cyan));box-shadow:0 0 12px rgba(53,214,178,.45)}

main{margin-left:272px;padding:34px clamp(24px,4vw,62px) 80px;max-width:1800px}
.view.active{animation:viewIn .28s ease-out both}
@keyframes viewIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

.welcome{
  min-height:448px;
  padding:58px clamp(28px,5vw,66px);
  display:block;
  border-radius:34px;
  background:#061827;
  border:1px solid rgba(129,239,217,.15);
  box-shadow:var(--shadow-strong);
  isolation:isolate;
}
.welcome:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(90deg,rgba(3,19,31,.99) 0%,rgba(4,22,35,.92) 42%,rgba(5,25,39,.35) 69%,rgba(5,25,39,.06) 100%);
}
.welcome:after{
  content:"";
  z-index:1;
  width:520px;
  height:520px;
  right:-180px;
  top:-250px;
  border-color:rgba(85,220,236,.15);
  box-shadow:0 0 0 70px rgba(53,214,178,.025),0 0 0 140px rgba(53,214,178,.018);
}
.welcome-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center right;z-index:0}
.welcome-copy{position:relative;z-index:2;max-width:720px}
.welcome .kicker{display:inline-flex;align-items:center;gap:9px;color:#9ff4df;font-size:10px}
.welcome .kicker i{width:7px;height:7px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 5px rgba(53,214,178,.13),0 0 18px var(--mint)}
.welcome h1{font-size:clamp(2.55rem,4.2vw,4.55rem);max-width:700px;margin:18px 0 19px;line-height:.98;letter-spacing:-.06em;text-wrap:balance}
.welcome h1 em{display:inline-block;background:linear-gradient(90deg,var(--mint2),var(--mint),var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent}
.welcome p{max-width:610px;margin:0;font-size:1.08rem;color:#b8ccd5}
.hero-actions{gap:11px;margin-top:28px}
.primary,.ghost,.pager button,.link,.danger,#install{
  min-height:45px;
  border-radius:12px;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease;
}
.primary{background:linear-gradient(135deg,#4fe4c2,var(--mint));box-shadow:0 10px 26px rgba(24,196,159,.2)}
.primary:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(24,196,159,.28)}
.primary span{margin-left:8px}
.ghost:hover{transform:translateY(-2px);background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.24)}
.hero-proof{display:flex;flex-wrap:wrap;gap:18px;margin-top:26px;color:#9eb5c0;font-size:11px;font-weight:750}
.hero-proof span::first-letter{color:var(--mint)}
.hero-metric{
  position:absolute;
  z-index:3;
  right:34px;
  bottom:30px;
  width:205px;
  padding:17px 18px;
  border-radius:17px;
  background:rgba(6,28,42,.74);
  border:1px solid rgba(128,240,218,.22);
  box-shadow:0 18px 45px rgba(0,13,22,.28),inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(14px);
}
.hero-metric small{display:block;color:#8fa8b3;font-size:9px;font-weight:900;letter-spacing:.12em}
.hero-metric strong{display:block;margin:5px 0 2px;color:var(--mint);font-size:2.3rem;line-height:1;font-variant-numeric:tabular-nums}
.hero-metric span{font-size:10px;color:#aac0c9}

.cards{gap:15px;margin:21px 0}
.cards article{
  position:relative;
  min-height:145px;
  padding:22px;
  overflow:hidden;
  background:rgba(255,255,255,.94);
  border-color:#dce7e9;
  border-radius:20px;
  box-shadow:0 12px 35px rgba(11,43,58,.055);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.cards article:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:#b9ddd6}
.cards article:after{content:"";position:absolute;width:84px;height:84px;border-radius:50%;right:-32px;bottom:-38px;background:rgba(53,214,178,.08)}
.cards article span{display:block;max-width:calc(100% - 44px);color:#607681;font-size:10px}
.cards strong{margin:10px 0 5px;font-size:2.25rem;color:#0b2a3b;letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.stat-icon{position:absolute;right:18px;top:18px;width:34px;height:34px;display:grid;place-items:center;border-radius:11px;background:#e8faf5;color:#11856d;font-style:normal;font-weight:950}
.box,.qcard,.buco-school,.exam-card,.exam-paper,.exam-sheet,.exam-result{border-color:var(--line);box-shadow:0 14px 42px rgba(9,42,57,.065)}
.box{border-radius:21px;padding:26px}
.home-grid{gap:17px}
.boxhead h2{margin-top:7px}
.link{color:#0e876f}
.area-card{
  position:relative;
  min-height:88px;
  padding:17px;
  background:linear-gradient(145deg,#fbfdfd,#f5f9fa);
  border-radius:15px;
  border-color:#dde7e9;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.area-card:hover{transform:translateY(-2px);border-color:#91d9ca;box-shadow:0 12px 25px rgba(9,63,64,.08)}
.area-card:after{content:"→";position:absolute;right:15px;top:15px;color:#18a486;font-weight:900}
.area-card b{max-width:85%;color:#153546}
.daily b{color:#0f3545;letter-spacing:-.05em}
.daily .primary{justify-self:start}

.home-buco{
  padding:31px;
  border:1px solid rgba(102,234,208,.17);
  border-radius:24px;
  background:
    radial-gradient(circle at 88% 28%,rgba(85,220,236,.13),transparent 16rem),
    linear-gradient(125deg,#071c2c 0%,#0c3344 60%,#0c4a4e 100%);
  box-shadow:0 18px 50px rgba(4,28,42,.15);
}
.home-buco:after{content:"OP";position:absolute;right:4%;top:50%;transform:translateY(-50%);font-size:7rem;font-weight:950;letter-spacing:-.12em;color:rgba(255,255,255,.035)}
.home-buco>*{position:relative;z-index:1}

.pagehead{align-items:center;margin-bottom:4px}
.pagehead h1{font-size:clamp(2.3rem,4vw,3.6rem);margin:7px 0 16px;color:#0b2a3b}
.filters{gap:11px;margin:3px 0 16px}
.filters select,.filters input,.simulator select{
  min-height:48px;
  padding:13px 15px;
  border-radius:13px;
  border-color:#d6e3e6;
  box-shadow:0 5px 16px rgba(8,39,53,.035);
}
.filters select:hover,.filters input:hover,.simulator select:hover{border-color:#9ccfc5}
.qcard{min-height:440px;padding:clamp(22px,3vw,34px);border-radius:22px;background:rgba(255,255,255,.97)}
.meta{gap:8px}
.pill{padding:7px 10px;background:#e8faf5;color:#13745f;border:1px solid #d3f2ea}
.qcard h2{margin:20px 0 0;font-size:clamp(1.12rem,1.65vw,1.35rem);color:#163340}
.answers{counter-reset:answer;gap:10px;margin-top:24px}
.answer{
  counter-increment:answer;
  display:grid;
  grid-template-columns:34px 1fr;
  gap:12px;
  align-items:center;
  min-height:54px;
  padding:10px 14px 10px 11px;
  border-radius:14px;
  background:#f9fbfc;
  color:#243e4a;
  line-height:1.45;
  transition:transform .15s ease,border-color .15s ease,background .15s ease;
}
.answer:before{content:counter(answer,upper-alpha);display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:#e9f0f2;color:#49616c;font-size:12px;font-weight:950}
.answer:hover{transform:translateX(3px);background:#f3fbf8;border-color:#66cbb7}
.answer.correct:before{background:#26ae84;color:#fff}
.answer.wrong:before{background:#d85b67;color:#fff}
.explain{border:1px solid #ccece4;border-left:4px solid var(--mint);background:linear-gradient(135deg,#effbf7,#f7fcfb);border-radius:12px}
.pager{margin-top:15px}
.pager button{background:#e5edf0}

.buco-hero,.exam-hero,.treino-ufrgs-hero{
  border-radius:30px;
  padding:46px;
  border:1px solid rgba(114,235,212,.16);
  background:
    radial-gradient(circle at 90% 10%,rgba(85,220,236,.13),transparent 20rem),
    linear-gradient(135deg,#061827 0%,#0c3447 62%,#10605e 100%);
  box-shadow:0 22px 60px rgba(5,30,44,.17);
}
.buco-hero:after,.exam-hero:after{border-color:rgba(110,239,214,.18);box-shadow:0 0 0 65px rgba(53,214,178,.022)}
.buco-badges span,.exam-badges span{border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.075);backdrop-filter:blur(5px)}
.buco-school,.exam-card{border-radius:20px;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.buco-school:hover,.exam-card:not(.unavailable):hover{transform:translateY(-3px);border-color:#a6d9cf;box-shadow:0 20px 48px rgba(8,44,57,.1)}
.buco-school .school-mark,.exam-year{background:linear-gradient(145deg,#071c2c,#113b4e);box-shadow:0 10px 22px rgba(7,27,43,.16)}
.buco-note,.exam-legal{border-color:#bde6dd;background:linear-gradient(135deg,#eefaf7,#f7fcfb)}
.discursive-details{background:#f8fbfb;border-color:#dce7e9}
.discursive-details[open]{border-color:#a7d9cf;box-shadow:0 10px 25px rgba(11,61,66,.055)}
.discursive-details summary{color:#0e826c}

.simulator{max-width:680px;padding:30px}
.simulator label{color:#233f4c}
.progress{height:14px;background:#e0eaec}
.progress i{background:linear-gradient(90deg,var(--mint-strong),var(--cyan));box-shadow:0 0 16px rgba(53,214,178,.35)}
.error-item{border-radius:17px;box-shadow:0 12px 32px rgba(9,42,57,.055)}

.mobile-head{box-shadow:0 8px 30px rgba(7,27,43,.08)}
#install{display:none;background:#e8faf5;color:#08745f;padding:9px 12px;min-height:38px}
.bottom-nav{padding-bottom:env(safe-area-inset-bottom);box-shadow:0 -10px 30px rgba(7,27,43,.08)}
.bottom-nav button{font-weight:850}

@media(max-width:1250px){
  .hero-metric{display:none}
  .welcome-copy{max-width:650px}
  .welcome:before{background:linear-gradient(90deg,rgba(3,19,31,.99),rgba(4,22,35,.9) 52%,rgba(5,25,39,.25) 100%)}
  .cards article{padding:19px}
}

@media(max-width:900px){
  main{margin:0;max-width:none;padding:79px 14px 94px}
  .mobile-head{height:65px;padding:9px 14px;background:rgba(255,255,255,.94);backdrop-filter:blur(15px)}
  .mobile-head .brand{gap:9px}
  .mobile-head .brand .tooth{width:39px;height:39px;border-radius:12px;background:linear-gradient(145deg,#f7fffd,#d8fff4)}
  .mobile-head .brand b{color:var(--navy);font-size:1rem}
  .welcome{min-height:520px;padding:33px 24px 30px;border-radius:25px;display:flex;align-items:flex-end}
  .welcome-art{object-position:68% center;opacity:.72}
  .welcome:before{background:linear-gradient(0deg,rgba(3,19,31,.99) 3%,rgba(3,19,31,.88) 48%,rgba(3,19,31,.32) 100%)}
  .welcome:after{display:none}
  .welcome h1{font-size:clamp(2.35rem,11vw,3.4rem)}
  .welcome p{font-size:.98rem;line-height:1.55}
  .hero-proof{gap:9px 14px;margin-top:20px}
  .cards{gap:10px}
  .cards article{min-height:138px;padding:17px}
  .cards strong{font-size:1.9rem}
  .stat-icon{width:30px;height:30px;right:13px;top:13px}
  .home-grid{gap:12px}
  .box{padding:20px;border-radius:18px}
  .home-buco{padding:25px 21px;border-radius:20px}
  .areas{grid-template-columns:1fr}
  .pagehead h1{font-size:2.35rem}
  .qcard{padding:19px;border-radius:18px}
  .answer{grid-template-columns:31px 1fr;padding:9px 11px 9px 9px}
  .answer:before{width:30px;height:30px}
  .buco-hero,.exam-hero,.treino-ufrgs-hero{padding:29px 22px;border-radius:24px}
  .bottom-nav{grid-template-columns:repeat(5,1fr);background:rgba(255,255,255,.96);backdrop-filter:blur(14px)}
  .bottom-nav button{padding:9px 2px 8px;color:#173848}
}

@media(max-width:560px){
  .cards{grid-template-columns:1fr 1fr}
  .cards article span{font-size:9px}
  .cards article small{font-size:10px;line-height:1.25;display:block}
  .hero-actions .primary,.hero-actions .ghost{flex:1;min-width:150px}
  .hero-proof{font-size:10px}
  .home-buco:after{display:none}
  .boxhead{align-items:flex-start;gap:7px}
  .boxhead h2{font-size:1.3rem}
  .link{padding:8px}
}

@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}