:root{
  --green:#c72f3d;
  --green2:#fff0f1;
  --ink:#20232d;
  --muted:#6d7180;
  --line:#ebe8e1;
  --bg:#faf9f6;
  --gold:#b98524;
  --blue:#4c4a87;
  --red:#c72f3d;
  --shadow:0 12px 34px rgba(51,42,44,.07)
}

.student-profile-hero{display:flex;align-items:center;gap:18px;padding:22px;border-radius:22px;background:linear-gradient(135deg,#fff7f2,#fff);border:1px solid #eee4dc;margin-bottom:18px}.student-profile-hero img,.student-profile-hero>span{width:88px;height:88px;border-radius:24px;object-fit:cover;display:grid;place-items:center;background:#bd2838;color:#fff;font-size:34px;font-weight:700}.student-profile-hero h2{margin:4px 0}.student-profile-hero p{margin:3px 0}.profile-section-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.profile-data{margin:0}.profile-data div{display:grid;grid-template-columns:minmax(120px,.8fr) minmax(0,1.2fr);gap:12px;padding:11px 0;border-bottom:1px solid #eee}.profile-data dt{color:#756b65}.profile-data dd{margin:0;font-weight:600;overflow-wrap:anywhere}@media(max-width:760px){.profile-section-grid{grid-template-columns:1fr}.student-profile-hero{align-items:flex-start}.student-profile-hero img,.student-profile-hero>span{width:72px;height:72px;border-radius:20px}.profile-data div{grid-template-columns:1fr;gap:3px}}
.role-siswa .note-form,.role-siswa .note-actions{display:none!important}
body{font-family:Inter,Arial,sans-serif;background:var(--bg)}
h1,h2,.hero-card h2,.login-card h1,.install-card h1{font-family:"DM Serif Display",Georgia,serif;font-weight:400;letter-spacing:.01em}
.logo>span,.brand-mark{background:var(--red);border-radius:13px}
.btn.primary{background:var(--red);border-color:var(--red)}
.eyebrow{color:var(--red)}
nav a:hover,nav a.active{background:#fff0f1;color:var(--red)}
.hero-card{background:linear-gradient(125deg,#fff,#fff8f1);color:var(--ink);border:1px solid var(--line);box-shadow:var(--shadow)}
.hero-card .eyebrow{color:var(--red)}
.hero-card p:last-child{color:var(--muted);opacity:1}
.hero-icon{color:var(--red)}
.panel,.stats a{box-shadow:none}
.stats a{transition:transform .16s ease,border-color .16s ease}
.stats a:hover{transform:translateY(-2px);border-color:#e5c7ca}
.green,.record-icon.karakter{background:#edf7f1;color:#27745a}
.gold,.record-icon.tahfidz{background:#fff8e9;color:#9a6b13}
.blue,.record-icon.kesehatan{background:#edf5fb;color:#4c4a87}
.purple{background:#fff0f1;color:#c72f3d}
input:focus,select:focus,textarea:focus{border-color:var(--red);box-shadow:0 0 0 3px rgba(199,47,61,.1)}
.account-menu>summary{background:#fff0f1;color:var(--red);border-color:#f0cfd2}
.account-identity>span{background:var(--red)}
.server-school-context{background:#fff8e9;color:#6f5725;border-color:#efe2bf}
.sync-result{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0 0 18px}
.sync-result>div{background:#fff;border:1px solid var(--line);border-radius:15px;padding:16px}
.sync-result b,.sync-result small{display:block}.sync-result b{font-size:24px;color:var(--red)}.sync-result small{margin-top:4px;color:var(--muted)}
.sync-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:end;margin-top:18px;padding:16px;border-radius:14px;background:#fff8e9}
.sync-form small{display:block;margin-top:6px;color:var(--muted);font-weight:400}
.student-photo{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.student-hero-photo{width:64px;height:64px;flex:0 0 64px;overflow:hidden;border-radius:20px;border:3px solid #fff;box-shadow:0 7px 20px rgba(51,42,44,.12)}
.construction-page{margin:0;min-height:100vh;display:grid;place-items:center;padding:24px;background:linear-gradient(150deg,#faf9f6,#fff4f3);color:#20232d;font-family:Inter,Arial,sans-serif}
.construction-box{width:min(520px,100%);background:#fff;border:1px solid #ebe8e1;border-radius:26px;padding:36px;box-shadow:0 20px 60px rgba(65,39,43,.09)}
.construction-mark{width:52px;height:52px;display:grid;place-items:center;border-radius:16px;background:#c72f3d;color:#fff;font-family:Georgia,serif;font-size:27px}
.construction-kicker{margin:24px 0 7px;color:#c72f3d;font-size:11px;font-weight:500;letter-spacing:1.5px}
.construction-box h1{margin:0 0 12px;font-family:"DM Serif Display",Georgia,serif;font-size:34px;font-weight:400}
.construction-box>p:not(.construction-kicker){margin:0;color:#6d7180;line-height:1.7}
.construction-status{display:flex;gap:12px;margin-top:26px;padding:16px;border-radius:16px;background:#fff8e9}
.construction-status>span{width:10px;height:10px;margin-top:5px;border-radius:50%;background:#c72f3d;box-shadow:0 0 0 6px rgba(199,47,61,.11)}
.construction-status div{min-width:0}.construction-status b,.construction-status small{display:block}.construction-status small{margin-top:5px;color:#6d7180;line-height:1.55}
.construction-foot{display:block;margin-top:24px;color:#6d7180}
.minsani-login{background:linear-gradient(150deg,#faf9f6,#fff4f3)}
.minsani-login .login-card{border:1px solid var(--line);box-shadow:0 20px 60px rgba(65,39,43,.09)}
@media(max-width:620px){
  body{font-size:14px}
  .app-shell>main{padding:17px 13px 92px}
  aside{height:72px;padding:7px 6px;background:#fff}
  aside nav{grid-template-columns:repeat(5,minmax(0,1fr));gap:2px}
  aside nav a{min-width:0;min-height:56px;border-radius:12px;color:#777b88}
  aside nav a.active{background:#fff0f1;color:var(--red)}
  header{margin-bottom:17px}
  header h1{font-size:22px}
  .server-school-context{border-radius:15px}
  .hero-card{padding:18px;border-radius:19px}
  .student-hero-photo{width:54px;height:54px;flex-basis:54px;border-radius:17px}
  .stats{gap:8px;margin:12px 0}
  .stats a{min-height:92px;display:block;padding:13px;border-radius:17px}
  .stats span{width:34px;height:34px;margin-bottom:9px;border-radius:11px}
  .stats b{font-size:16px}.stats small{line-height:1.35}
  .panel{padding:15px;border-radius:18px}
  .cards-list>article{border-radius:15px}
  .btn{min-height:44px}
  input,select,textarea{min-height:44px;font-size:16px}
  .account-dropdown{border-radius:22px}
  .sync-result{grid-template-columns:1fr 1fr}
  .sync-form{grid-template-columns:1fr;padding:14px}
  .sync-form .btn{width:100%}
  .construction-page{padding:15px}.construction-box{padding:26px 21px;border-radius:22px}.construction-box h1{font-size:29px}
}