:root{
  --app-bg:#f4f6f8;
  --app-ink:#111827;
  --app-sub:#6b7280;
  --app-card:#ffffff;
}

html,body{min-height:100%}
body.app-home{
  margin:0;
  background:
    radial-gradient(circle at 100% 0, rgba(79,70,229,.10), transparent 28rem),
    radial-gradient(circle at 0 32%, rgba(5,150,105,.08), transparent 25rem),
    var(--app-bg);
  color:var(--app-ink);
  -webkit-tap-highlight-color:transparent;
}

.app-shell{
  min-height:100dvh;
  max-width:720px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  padding:
    max(18px, env(safe-area-inset-top))
    max(18px, env(safe-area-inset-right))
    max(18px, env(safe-area-inset-bottom))
    max(18px, env(safe-area-inset-left));
}

.app-header{
  display:flex;
  align-items:center;
  gap:12px;
  padding:4px 2px 16px;
}

.brand-mark{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border-radius:15px;
  background:#111827;
  color:white;
  font-size:25px;
  box-shadow:0 8px 22px rgba(17,24,39,.16);
}

.brand-title{font-size:21px;font-weight:950;letter-spacing:-.4px}
.brand-sub{font-size:12px;color:var(--app-sub);margin-top:2px}

.home-main{flex:1}
.home-hero{
  padding:24px 4px 22px;
}
.hero-badge{
  display:inline-block;
  padding:5px 9px;
  border-radius:999px;
  background:#e0e7ff;
  color:#3730a3;
  font-size:11px;
  font-weight:950;
  letter-spacing:.8px;
  margin-bottom:12px;
}
.home-hero h1{
  font-size:clamp(37px,9vw,58px);
  line-height:1.02;
  letter-spacing:-2.2px;
  margin:0 0 16px;
}
.home-hero p{
  color:var(--app-sub);
  line-height:1.7;
  font-size:16px;
  margin:0;
}

.role-grid{
  display:grid;
  gap:12px;
  margin-top:10px;
}
.role-card{
  display:grid;
  grid-template-columns:58px 1fr 24px;
  gap:13px;
  align-items:center;
  min-height:96px;
  padding:17px;
  border-radius:22px;
  text-decoration:none;
  color:inherit;
  background:var(--app-card);
  box-shadow:0 10px 32px rgba(15,23,42,.08);
  border:1px solid rgba(255,255,255,.85);
}
.role-card:active{transform:scale(.985)}
.role-icon{
  width:58px;height:58px;
  border-radius:17px;
  display:grid;place-items:center;
  font-size:29px;
}
.student-card .role-icon{background:#dcfce7}
.teacher-card .role-icon{background:#e0e7ff}
.role-text{display:flex;flex-direction:column;gap:5px}
.role-text strong{font-size:19px;font-weight:950}
.role-text small{font-size:13px;color:var(--app-sub)}
.role-arrow{font-size:34px;color:#9ca3af;font-weight:300}

.quick-info{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin:14px 0;
}
.quick-info div{
  background:rgba(255,255,255,.72);
  border:1px solid rgba(226,232,240,.95);
  border-radius:15px;
  padding:11px 8px;
  text-align:center;
}
.quick-info b{display:block;font-size:13px;margin-bottom:3px}
.quick-info span{display:block;font-size:10px;color:var(--app-sub)}

.install-btn{
  width:100%;
  border:1px solid #c7d2fe;
  background:#eef2ff;
  color:#312e81;
  border-radius:18px;
  padding:14px 16px;
  display:grid;
  grid-template-columns:34px 1fr;
  text-align:left;
  align-items:center;
  gap:7px;
  cursor:pointer;
  margin-top:2px;
}
.install-btn span:first-child{font-size:25px}
.install-btn b{display:block;font-size:15px}
.install-btn small{display:block;font-size:11px;opacity:.72;margin-top:2px}

.ios-guide{
  margin-top:10px;
  border-radius:18px;
  padding:16px;
  background:white;
  box-shadow:0 8px 24px rgba(15,23,42,.08);
  text-align:center;
}
.ios-guide p{font-size:13px;color:var(--app-sub);line-height:1.6}
.ios-guide button{
  border:0;
  border-radius:11px;
  background:#111827;
  color:#fff;
  padding:9px 20px;
  font-weight:900;
}

.join-sub{
  text-align:center;
  color:var(--app-sub);
  font-size:13px;
  margin:17px 0 0;
}
.join-sub a{color:#3730a3;font-weight:900}

.app-footer{
  text-align:center;
  color:#9ca3af;
  font-size:10px;
  padding:18px 0 2px;
  letter-spacing:.4px;
}

.standalone-mode .app-header{
  padding-top:6px;
}

@media(min-width:640px){
  .role-grid{grid-template-columns:1fr 1fr}
  .role-card{
    grid-template-columns:58px 1fr;
    min-height:130px;
  }
  .role-arrow{display:none}
}