:root{
  --orange:#f49a20;
  --orange2:#ffad49;
  --orange-dark:#c96b00;
  --brown:#6b3714;
  --ink:#202938;
  --muted:#697386;
  --line:#e7e9ee;
  --bg:#f5f6f8;
  --green:#176b35;
  --green-bg:#eafaf0;
  --red:#a32121;
  --red-bg:#fff0f0;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif}
body{padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}
.app{width:min(100%,760px);min-height:100vh;margin:0 auto;background:#fff}
.header{display:flex;align-items:center;gap:28px;padding:25px 26px 22px;border-bottom:1px solid var(--line)}
.brand-logo{width:150px;height:auto;display:block;object-fit:contain}
.header-copy h1{margin:0;font-size:31px;line-height:1.05;letter-spacing:.01em}
.header-copy p{margin:7px 0 0;color:var(--muted);font-size:16px}
main{padding:24px 22px 10px}
.search-card{border:1px solid var(--line);border-radius:19px;padding:18px;box-shadow:0 10px 28px rgba(27,31,39,.06)}
.search-card label{display:block;font-weight:800;font-size:18px;margin-bottom:10px}
.search-row{display:grid;grid-template-columns:1fr auto;gap:10px}
input{min-width:0;width:100%;border:1.5px solid #d5d9e0;border-radius:13px;padding:15px;font-size:19px;outline:none}
input:focus{border-color:var(--orange);box-shadow:0 0 0 4px rgba(244,154,32,.12)}
button{font:inherit;cursor:pointer}
#searchBtn{border:0;border-radius:13px;background:var(--orange);color:#fff;font-weight:800;padding:0 22px;min-height:52px;font-size:16px}
#searchBtn:disabled{opacity:.55;cursor:not-allowed}
#status{min-height:20px;margin-top:10px;font-size:14px}
.error{color:var(--red)} .ok{color:var(--green)}
.hidden{display:none!important}
.section-label{margin:25px 2px 10px;color:var(--muted);font-size:13px;font-weight:900;letter-spacing:.08em}
.student-card{border:1px solid var(--line);border-radius:18px;padding:18px;margin-bottom:12px;box-shadow:0 8px 23px rgba(27,31,39,.05)}
.student-name{font-weight:900;font-size:23px}
.student-code{margin-top:4px;color:var(--muted);font-size:13px}
.subject-title{margin:16px 0 9px;font-weight:800}
.subjects{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.subject-btn{border:1px solid #ffd5a4;border-radius:14px;background:#fff4e5;color:#934a00;font-weight:850;text-align:left;padding:14px 13px}
.back-btn{border:0;background:transparent;color:var(--orange-dark);font-weight:800;padding:7px 0;margin-bottom:10px}
.course-card{border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:0 10px 28px rgba(27,31,39,.07)}
.course-head{padding:19px 20px;background:linear-gradient(135deg,var(--orange),var(--orange2));color:#fff}
.course-head .student{font-size:15px}
.course-head h2{margin:5px 0 4px;font-size:30px;line-height:1.05}
.course-head .teacher{font-size:15px}
.meta{padding:16px 20px;background:#fff}
.meta-row{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:10px 0;border-bottom:1px dashed var(--line)}
.meta-row:last-child{border-bottom:0}
.meta-label{color:var(--muted)}
.meta-value{font-weight:800;text-align:right}
.payment-paid{color:var(--green)}
.payment-unpaid{color:var(--red)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);background:#fff}
.stat{padding:15px 7px;text-align:center}
.stat+.stat{border-left:1px solid var(--line)}
.stat b{display:block;color:var(--orange-dark);font-size:25px}
.stat small{color:var(--muted);font-size:12px}
.notice{margin-top:13px;padding:13px 15px;border-radius:13px;font-weight:750;font-size:14px}
.notice.good{background:var(--green-bg);color:var(--green)}
.notice.warn{background:var(--red-bg);color:var(--red)}
.history-label{margin-top:28px}
.att-item{display:grid;grid-template-columns:1fr auto;gap:12px;padding:14px 1px;border-bottom:1px solid var(--line)}
.att-time{font-weight:900}
.att-teacher{margin-top:3px;color:var(--muted);font-size:14px}
.remain{align-self:center;border-radius:999px;background:#fff3df;color:#a44e00;padding:7px 10px;font-weight:800;font-size:12px;white-space:nowrap}
.empty{padding:24px 14px;border:1px dashed var(--line);border-radius:14px;text-align:center;color:var(--muted)}
footer{text-align:center;padding:34px 20px 42px;color:var(--orange-dark);font-size:12px;font-weight:900}
@media(max-width:560px){
  .header{padding:20px 16px 16px;gap:16px;align-items:center}
  .brand-logo{width:112px}
  .header-copy h1{font-size:23px}
  .header-copy p{font-size:13px;margin-top:4px}
  main{padding:15px 14px 8px}
  .search-row{grid-template-columns:1fr}
  #searchBtn{width:100%}
  .subjects{grid-template-columns:1fr}
  .course-head h2{font-size:27px}
}