@import url('https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&family=Inter:wght@400;500;600&display=swap');

:root{
  --teal-900:#04342C;
  --teal-800:#085041;
  --teal-700:#0F3D3E;
  --teal-600:#0E6B57;
  --teal-100:#DCEEE8;
  --teal-50:#F1F8F5;
  --gold-600:#B8860B;
  --gold-500:#C9A227;
  --gold-100:#F5EACB;
  --ink:#1C1B18;
  --ink-soft:#5B5A54;
  --paper:#FBFAF6;
  --card:#FFFFFF;
  --line:#E6E3D8;
  --danger:#A3352B;
}
*{box-sizing:border-box;}
body{
  margin:0;
  font-family:'Inter',sans-serif;
  background:var(--paper);
  color:var(--ink);
}
.app{max-width:480px;margin:0 auto;min-height:100vh;background:var(--paper);}

header.top{
  background:var(--teal-700);
  color:#fff;
  padding:20px 20px 24px;
  position:relative;
  overflow:hidden;
}
header.top .rosette{position:absolute;right:-18px;top:-18px;width:90px;height:90px;opacity:0.15;}
header.top h1{font-family:'Amiri',serif;font-size:22px;font-weight:700;margin:0 0 2px;}
header.top .sub{font-size:13px;color:var(--teal-100);margin:0;}

nav.tabs{display:flex;background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;}
nav.tabs a{
  flex:1;text-align:center;text-decoration:none;
  padding:13px 6px;font-size:13px;font-weight:600;
  color:var(--ink-soft);border-bottom:2.5px solid transparent;
}
nav.tabs a.active{color:var(--teal-700);border-bottom-color:var(--gold-500);}

main{padding:16px 16px 32px;}

.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;margin-bottom:14px;}
.card h2{font-family:'Amiri',serif;font-size:18px;margin:0 0 4px;color:var(--teal-800);}
.card .meta{font-size:13px;color:var(--ink-soft);margin:0 0 14px;}

.seg{display:flex;background:var(--teal-50);border-radius:10px;padding:3px;margin-bottom:14px;}
.seg a{flex:1;text-align:center;text-decoration:none;padding:9px 4px;font-size:13px;font-weight:600;color:var(--teal-700);border-radius:8px;}
.seg a.active{background:var(--teal-700);color:#fff;}

.session-tabs{display:flex;gap:8px;margin-bottom:14px;}
.session-tabs a{flex:1;text-align:center;text-decoration:none;border:1px solid var(--line);background:var(--card);padding:8px;border-radius:9px;font-size:13px;font-weight:600;color:var(--ink-soft);}
.session-tabs a.active{border-color:var(--gold-500);background:var(--gold-100);color:var(--gold-600);}

.student-row{display:flex;align-items:center;justify-content:space-between;padding:12px 4px;border-bottom:1px solid var(--line);}
.student-row:last-child{border-bottom:none;}
.student-name{font-size:15px;font-weight:500;}

.pill-toggle{display:flex;border:1px solid var(--line);border-radius:20px;overflow:hidden;}
.pill-toggle a{text-decoration:none;padding:7px 14px;font-size:12px;font-weight:600;cursor:pointer;color:var(--ink-soft);}
.pill-toggle a.present.active{background:var(--teal-600);color:#fff;}
.pill-toggle a.absent.active{background:var(--danger);color:#fff;}

.empty{text-align:center;padding:32px 12px;color:var(--ink-soft);font-size:14px;}

.summary-row{display:flex;gap:10px;margin-bottom:14px;}
.summary-box{flex:1;background:var(--teal-50);border-radius:10px;padding:10px 8px;text-align:center;}
.summary-box .num{font-size:20px;font-weight:600;color:var(--teal-800);}
.summary-box .lbl{font-size:11px;color:var(--ink-soft);margin-top:2px;}

form.add-form{display:flex;flex-direction:column;gap:10px;}
form.add-form input, form.add-form select, form.plain-form input[type=date]{
  border:1px solid var(--line);border-radius:9px;padding:10px 12px;
  font-size:14px;font-family:'Inter',sans-serif;background:var(--paper);color:var(--ink);width:100%;
}
form.add-form button, .btn{
  background:var(--teal-700);color:#fff;border:none;border-radius:9px;
  padding:11px;font-size:14px;font-weight:600;cursor:pointer;text-decoration:none;display:inline-block;text-align:center;
}

.list-item{display:flex;justify-content:space-between;align-items:center;padding:11px 4px;border-bottom:1px solid var(--line);}
.list-item:last-child{border-bottom:none;}
.del-btn{border:none;background:none;color:var(--danger);font-size:12px;font-weight:600;cursor:pointer;text-decoration:none;}

.history-item{display:flex;justify-content:space-between;padding:9px 2px;font-size:13px;border-bottom:1px solid var(--line);}
.history-item:last-child{border-bottom:none;}
.status-tag{font-weight:600;font-size:12px;}
.status-tag.present{color:var(--teal-700);}
.status-tag.absent{color:var(--danger);}

.notice{background:var(--gold-100);color:var(--gold-600);padding:10px 14px;border-radius:9px;font-size:13px;margin-bottom:14px;}