:root{--bg:#0D1B2A;--app-bg:#0D1B2A;--bg2:#1B263B;--card:#1B263B;--card2:#243247;--line:#415A77;--line2:#778DA9;--text:#E0E1DD;--muted:#aab5c4;--ok:#22c55e;--warn:#f59e0b;--bad:#ef4444;--shadow:0 16px 40px rgba(0,0,0,.28);--radius:18px;--radius-sm:12px;--radius-lg:24px}body.light{--bg:#e8edf2;--bg2:#ffffff;--card:#ffffff;--card2:#f4f6f9;--line:#c8d2dd;--line2:#778DA9;--text:#0D1B2A;--muted:#546173;--shadow:0 14px 34px rgba(13,27,42,.12)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,system-ui,sans-serif;background:var(--app-bg);color:var(--text);line-height:1.5;-webkit-font-smoothing:antialiased;transition:.25s;background-size:cover;background-attachment:fixed}a{text-decoration:none;color:inherit}button,input,select,textarea{font:inherit}button{cursor:pointer}img{max-width:100%}.container{width:min(1180px,92%);margin:auto}.muted{color:var(--muted)}.small{font-size:.85rem}.glass,.panel,.auth-card,.hero-panel,.sidebar,.quote-bar,.stat-card,.notice-card,.info-card,.faq-item,.modal-card{background:rgba(27,38,59,.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(119,141,169,.25);box-shadow:var(--shadow)}body.light .glass,body.light .panel,body.light .auth-card,body.light .hero-panel,body.light .sidebar,body.light .quote-bar,body.light .stat-card,body.light .notice-card,body.light .info-card,body.light .faq-item,body.light .modal-card{background:rgba(255,255,255,.84)}.site-header{position:sticky;top:0;z-index:50;background:rgba(13,27,42,.84);backdrop-filter:blur(10px);border-bottom:1px solid rgba(119,141,169,.18)}body.light .site-header{background:rgba(255,255,255,.88)}.topbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 0}.brand{display:flex;align-items:center;gap:.7rem;font-weight:800;font-size:1.15rem}.brand-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:14px;background:linear-gradient(135deg,#415A77,#778DA9);color:#E0E1DD}.desktop-nav{display:flex;gap:.35rem;flex-wrap:wrap}.desktop-nav a,.mobile-menu a,.side-links a,.ghost,.primary{transition:.2s}.desktop-nav a,.mobile-menu a,.side-links a,.ghost{padding:.7rem .95rem;border-radius:12px;color:var(--muted)}.desktop-nav a:hover,.mobile-menu a:hover,.side-links a:hover,.ghost:hover{background:rgba(119,141,169,.12);color:var(--text)}.top-actions,.header-tools,.panel-head,.quick-buttons,.calendar-controls,.filters-row,.cta-row,.metric-grid,.cards,.grid,.grid-2,.stats-grid,.footer-grid,.password-row,.modal-actions,.legend-row,.timeline .step,.mini-card,.feature-stack{display:flex;gap:1rem}.top-actions,.header-tools{align-items:center}.mobile-menu-btn,.side-close{display:none}.mobile-menu{display:none;flex-direction:column;padding:0 4% 1rem}.mobile-menu.open{display:flex}.hero-section{padding:5rem 0;background:radial-gradient(circle at top left,rgba(119,141,169,.22),transparent 30%),radial-gradient(circle at bottom right,rgba(65,90,119,.22),transparent 35%)}.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:2rem;align-items:center}.eyebrow{display:inline-block;padding:.4rem .8rem;border-radius:999px;background:rgba(119,141,169,.14);color:#E0E1DD;font-size:.82rem;margin-bottom:1rem}.hero-section h1,.auth-card h1,.dash-header h1{margin:.2rem 0 1rem;font-size:clamp(2.2rem,5vw,4rem);line-height:1.02}.hero-copy{font-size:1.05rem;max-width:58ch;color:var(--muted)}.quote-card,.quote-bar{padding:1rem 1.2rem;border-radius:var(--radius);margin:1.2rem 0}.quote-card.compact{margin:.7rem 0}.rotating-quote{font-weight:700;opacity:0;transform:translateY(10px);transition:.3s}.rotating-quote.show{opacity:1;transform:translateY(0)}.primary,.ghost{border:1px solid rgba(119,141,169,.24);background:var(--card2);color:var(--text);padding:.85rem 1.15rem;border-radius:14px}.primary{background:linear-gradient(135deg,#415A77,#778DA9);color:#E0E1DD;font-weight:700}.primary:hover{transform:translateY(-1px)}.full{width:100%;justify-content:center;display:inline-flex;align-items:center}.center-link{text-align:center;display:block}.hero-panel{padding:1.4rem;border-radius:var(--radius-lg)}.metric-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.metric,.mini-card,.stat-card,.info-card,.notice-card{padding:1rem;border-radius:var(--radius)}.metric{background:rgba(119,141,169,.12)}.metric span{display:block;color:var(--muted);font-size:.85rem}.metric strong{font-size:1.1rem}.feature-stack{display:grid;margin-top:1rem}.mini-card{display:grid;grid-template-columns:44px 1fr;gap:.9rem;align-items:start;background:rgba(119,141,169,.08)}.mini-card i,.info-card i{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:linear-gradient(135deg,#415A77,#778DA9)}.section{padding:4.4rem 0}.section.alt{background:linear-gradient(180deg,transparent,rgba(65,90,119,.08),transparent)}.section-head{text-align:center;margin-bottom:2rem}.section-head h2{margin:.2rem 0 .5rem;font-size:clamp(1.8rem,4vw,2.8rem)}.cards.three{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}.cards.two{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}.info-card h3,.panel h2,.notice-card h4,.auth-card h1{margin:.5rem 0}.timeline{padding:1.2rem;border-radius:var(--radius-lg);display:grid;gap:1rem}.timeline .step{align-items:flex-start}.timeline .step span{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#415A77,#778DA9);font-weight:800}.notice-card p,.info-card p{margin:.45rem 0;color:var(--muted)}.faq-list{display:grid;gap:.9rem;max-width:880px;margin:auto}.faq-item{padding:0 1rem;border-radius:16px}.faq-item summary{cursor:pointer;padding:1rem 0;font-weight:700}.faq-item p{margin:0 0 1rem;color:var(--muted)}.site-footer{padding:2rem 0;border-top:1px solid rgba(119,141,169,.2)}.footer-grid{display:grid;grid-template-columns:2fr repeat(5,1fr);gap:1rem;align-items:center}.footer-bottom{text-align:center;color:var(--muted);margin-top:1rem}.auth-body{min-height:100vh}.auth-main{min-height:calc(100vh - 76px);display:grid;place-items:center;padding:2rem 1rem}.auth-card{width:min(520px,100%);padding:1.5rem;border-radius:var(--radius-lg)}.form-stack{display:grid;gap:1rem}.form-stack label{display:grid;gap:.45rem;font-weight:600}.form-stack input,.form-stack select,.filters-row input,.filters-row select,textarea{width:100%;padding:.85rem 1rem;border-radius:14px;border:1px solid rgba(119,141,169,.28);background:var(--card2);color:var(--text);outline:none}.form-stack input:focus,.form-stack select:focus,.filters-row input:focus,.filters-row select:focus,textarea:focus{border-color:#778DA9;box-shadow:0 0 0 3px rgba(119,141,169,.15)}.password-row{display:grid;grid-template-columns:1fr auto;gap:.5rem}.small-btn{padding:.85rem 1rem}.form-msg{min-height:1.3rem;color:var(--muted);font-size:.92rem}.form-msg.error{color:var(--bad)}.form-msg.success{color:var(--ok)}.dashboard-shell{display:grid;grid-template-columns:280px 1fr;min-height:100vh}.sidebar{padding:1.3rem;display:flex;flex-direction:column;gap:1rem;border-right:1px solid rgba(119,141,169,.18)}.side-links{display:grid;gap:.25rem}.main-area{padding:1.2rem}.dash-header{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem}.dash-header h1{font-size:clamp(1.5rem,3vw,2.2rem);margin:0}.status-chip{padding:.45rem .8rem;border-radius:999px;background:rgba(119,141,169,.15);color:var(--text);font-size:.86rem}.status-chip.ok{color:var(--ok)}.status-chip.bad{color:var(--bad)}.view{display:none}.view.active{display:block}.stats-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:1rem;margin-bottom:1rem}.stat-card{padding:1rem;border-radius:var(--radius)}.stat-card span{display:block;color:var(--muted);font-size:.86rem}.stat-card strong{display:block;font-size:1.35rem;margin-top:.35rem;word-break:break-word}.panel{padding:1.2rem;border-radius:var(--radius-lg)}.panel-head{justify-content:space-between;align-items:center;margin-bottom:1rem}.narrow{max-width:640px}.table-wrap{overflow:auto;border:1px solid rgba(119,141,169,.2);border-radius:16px}.table{width:100%;border-collapse:collapse}.table th,.table td{padding:.8rem .9rem;border-bottom:1px solid rgba(119,141,169,.16);text-align:left;white-space:nowrap}.table th{background:rgba(119,141,169,.14);position:sticky;top:0}.badge{display:inline-flex;align-items:center;padding:.25rem .6rem;border-radius:999px;font-size:.8rem}.badge.ok{background:rgba(34,197,94,.12);color:var(--ok)}.badge.bad{background:rgba(239,68,68,.12);color:var(--bad)}.badge.warn{background:rgba(245,158,11,.12);color:var(--warn)}.divider{text-align:center;margin:.7rem 0;color:var(--muted)}.qr-reader{width:100%;min-height:220px;border:1px dashed rgba(119,141,169,.35);border-radius:18px;overflow:hidden}.stack-list{display:grid;gap:.9rem}.list-card{padding:1rem;border-radius:16px;background:rgba(119,141,169,.08);border:1px solid rgba(119,141,169,.16)}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:.55rem}.day-head,.day-cell{padding:.75rem;border-radius:14px;min-height:82px;background:rgba(119,141,169,.08);border:1px solid rgba(119,141,169,.12)}.day-head{font-weight:700;min-height:auto;text-align:center}.day-cell button{width:100%;height:100%;text-align:left;color:inherit}.day-cell.present{background:rgba(34,197,94,.12);border-color:rgba(34,197,94,.22)}.day-cell.absent{background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.22)}.day-cell.neutral{background:rgba(119,141,169,.08)}.legend-row{align-items:center;flex-wrap:wrap;margin:1rem 0}.legend{display:inline-block;width:16px;height:16px;border-radius:6px;margin:0 .3rem 0 1rem}.legend.present{background:rgba(34,197,94,.45)}.legend.absent{background:rgba(239,68,68,.45)}.legend.neutral{background:rgba(119,141,169,.32)}.info-box{padding:1rem;border-radius:16px;background:rgba(119,141,169,.08)}.filters-row{display:grid;grid-template-columns:repeat(12,1fr);gap:.7rem;margin-bottom:1rem}.filters-row input,.filters-row select,.filters-row button{grid-column:span 2}.filters-row input:first-child{grid-column:span 6}.quick-buttons{display:flex;gap:.5rem;flex-wrap:wrap}.report-filters{display:flex;gap:.8rem;flex-wrap:wrap}.spinner{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite;margin-right:.5rem;vertical-align:-2px}@keyframes spin{to{transform:rotate(360deg)}}.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);display:grid;place-items:center;padding:1rem;z-index:100}.modal-card{width:min(760px,100%);padding:1rem;border-radius:24px}.modal-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.5rem}.modal-head h3{margin:.3rem 0}.modal-body{max-height:68vh;overflow:auto}.modal-actions{justify-content:flex-end;flex-wrap:wrap;margin-top:1rem}.danger{background:#5f1f29;color:#ffd7db;border:1px solid rgba(239,68,68,.3);padding:.8rem 1rem;border-radius:14px}.danger:hover{filter:brightness(1.08)}.notice-card,.info-card{position:relative;overflow:hidden}.toast-box{position:fixed;right:1rem;bottom:1rem;display:grid;gap:.6rem;z-index:120}.toast{padding:.85rem 1rem;border-radius:14px;background:var(--card);border:1px solid rgba(119,141,169,.28);box-shadow:var(--shadow);transition:.3s}.toast.success{border-left:4px solid var(--ok)}.toast.error{border-left:4px solid var(--bad)}.empty{padding:1rem;border-radius:16px;border:1px dashed rgba(119,141,169,.25);color:var(--muted)}.pill{display:inline-flex;padding:.25rem .55rem;border-radius:999px;font-size:.8rem;margin-bottom:.45rem}.pill.blue{background:rgba(119,141,169,.14)}.pill.warn{background:rgba(245,158,11,.14);color:var(--warn)}.subject-picks{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem}.subject-pill{padding:.7rem .8rem;border-radius:14px;border:1px solid rgba(119,141,169,.22);background:rgba(119,141,169,.08);cursor:pointer}.subject-pill.active{background:rgba(119,141,169,.22);outline:2px solid #778DA9}.chart-wrap{max-width:100%;overflow:auto;margin-bottom:1rem}.table-actions{display:flex;gap:.5rem;flex-wrap:wrap}.action-btn{padding:.45rem .7rem;border-radius:10px;border:1px solid rgba(119,141,169,.18);background:rgba(119,141,169,.08);color:var(--text)}.action-btn:hover{background:rgba(119,141,169,.18)}@media (max-width:1100px){.stats-grid{grid-template-columns:repeat(3,1fr)}.cards.two,.cards.three,.hero-grid,.footer-grid,.dashboard-shell{grid-template-columns:1fr}.filters-row{grid-template-columns:repeat(2,1fr)}.filters-row input,.filters-row select,.filters-row button,.filters-row input:first-child{grid-column:span 1}.subject-picks{grid-template-columns:repeat(2,1fr)}.sidebar{position:fixed;left:0;top:0;bottom:0;width:280px;transform:translateX(-102%);z-index:90;transition:.25s}.sidebar.open{transform:translateX(0)}.mobile-menu-btn,.side-close{display:inline-flex;align-items:center;justify-content:center}.side-close{align-self:flex-end}.desktop-nav{display:none}.mobile-menu{display:none}.topbar{padding:1rem 0}.main-area{padding:1rem}.dash-header{position:sticky;top:0;background:rgba(13,27,42,.9);backdrop-filter:blur(10px);padding:.8rem 0;z-index:30}body.light .dash-header{background:rgba(255,255,255,.92)}}@media (max-width:720px){.stats-grid{grid-template-columns:repeat(2,1fr)}.metric-grid,.cards.two,.cards.three,.subject-picks{grid-template-columns:1fr}.calendar-grid{grid-template-columns:repeat(7,minmax(42px,1fr));gap:.35rem}.day-head,.day-cell{padding:.45rem;min-height:64px;font-size:.84rem}.hero-section{padding:4rem 0 3rem}.panel,.auth-card,.quote-bar,.hero-panel{padding:1rem}.brand{font-size:1rem}.cta-row{flex-direction:column}}.background-preview-card{display:flex;align-items:center;gap:14px;padding:12px;border:1px solid rgba(255,255,255,.12);border-radius:14px;margin:14px 0 18px;background:rgba(255,255,255,.03)}
.background-preview{width:72px;height:52px;border-radius:10px;border:1px solid rgba(255,255,255,.16);background:#050505;flex:none;background-position:center;background-size:cover}
.subject-pick-help{font-size:.84rem;opacity:.72;margin:8px 0}

.force-password-backdrop{background:rgba(0,0,0,.78);backdrop-filter:blur(10px);padding:16px}
.force-password-card{width:min(430px,100%);padding:22px;border:1px solid rgba(119,141,169,.28);box-shadow:0 24px 80px rgba(0,0,0,.45);background:linear-gradient(180deg,rgba(18,18,20,.98),rgba(8,8,10,.98))}
.force-password-icon{width:56px;height:56px;border-radius:18px;display:grid;place-items:center;background:rgba(119,141,169,.15);font-size:26px;margin-bottom:12px}
.force-password-head{margin-bottom:8px}.force-password-head h3{font-size:1.45rem;margin:.25rem 0}.force-password-intro{color:var(--muted);line-height:1.55;margin:.5rem 0 1.1rem}.force-password-fields{display:grid;gap:12px}.force-password-fields label{display:grid;gap:7px;font-weight:600;font-size:.9rem}.force-password-fields input{width:100%;padding:13px 14px;border-radius:14px;border:1px solid rgba(119,141,169,.28);background:rgba(255,255,255,.055);color:var(--text);font-size:16px}.force-password-fields input:focus{border-color:#778DA9;outline:none;box-shadow:0 0 0 3px rgba(119,141,169,.12)}.force-password-tip{font-size:.78rem;color:var(--muted);padding:10px 12px;border-radius:12px;background:rgba(119,141,169,.08);margin-top:12px}.force-password-actions{margin-top:14px}.force-password-actions button{min-height:48px;font-size:1rem}@media(max-width:480px){.force-password-backdrop{padding:12px;align-items:end}.force-password-card{width:100%;border-radius:24px 24px 18px 18px;padding:20px 16px;max-height:92vh;overflow:auto}.force-password-icon{width:48px;height:48px;font-size:22px}.force-password-head h3{font-size:1.25rem}.force-password-intro{font-size:.9rem}.force-password-actions{position:sticky;bottom:0;background:linear-gradient(180deg,transparent,var(--card) 25%);padding-top:10px}}


/* AttendX teacher QR */
.active-session-card { text-align:center; }
.qr-wrap { display:flex; justify-content:center; align-items:center; margin:18px auto 8px; padding:14px; background:#fff; border-radius:16px; width:min(328px, 100%); box-sizing:border-box; }
.qr-canvas { display:block; width:300px; height:300px; max-width:100%; background:#fff; border-radius:8px; }
.qr-status { margin:6px 0 14px; font-size:13px; }
.qr-status.form-msg.error { margin:8px auto 14px; max-width:420px; }

.qr-wrap{display:flex;justify-content:center;align-items:center;background:#fff;border-radius:14px;padding:14px;margin:14px auto;max-width:330px;overflow:auto}.qr-canvas{display:block;width:300px;height:300px;image-rendering:auto}.qr-status{text-align:center;margin:8px 0}.qr-status.error{color:#ff6b6b}

/* Student dashboard: compact, readable charts and attractive attendance calendar */
.student-graphs .chart-wrap{overflow:hidden;margin:0 0 1rem;padding:.75rem;border:1px solid rgba(119,141,169,.14);border-radius:18px;background:rgba(0,0,0,.12)}
.student-graphs .overall-chart{height:220px;max-width:360px;margin-left:auto;margin-right:auto}
.student-graphs .subject-chart{height:230px}
.student-graphs canvas{display:block;max-width:100%}
.calendar-controls{display:flex;align-items:center;gap:.55rem}
.calendar-controls button{min-width:40px;min-height:40px}
#calendarTitle{font-weight:800;min-width:150px;text-align:center}
.calendar-grid{background:rgba(0,0,0,.12);padding:.65rem;border-radius:20px}
.day-head{background:transparent!important;border:0!important;color:var(--muted);font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;padding:.55rem .25rem!important;min-height:auto!important}
.day-cell{min-height:76px!important;padding:.35rem!important;background:rgba(119,141,169,.06);border:1px solid rgba(119,141,169,.12);transition:transform .18s,box-shadow .18s}
.day-cell button{border:0;background:transparent;padding:.55rem;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:.25rem;border-radius:12px}
.day-cell:not(.neutral):hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(0,0,0,.18)}
.day-cell.present{background:#16a34a!important;border-color:#16a34a!important;color:#fff!important}
.day-cell.absent{background:#dc2626!important;border-color:#dc2626!important;color:#fff!important}
.day-cell.neutral{background:rgba(119,141,169,.055)}
.day-number{font-size:1.05rem;font-weight:800;line-height:1}
.day-status{font-size:.68rem;font-weight:700;opacity:.96}
.day-count{font-size:.62rem;opacity:.82}
.day-cell.today{outline:2px solid #fff;outline-offset:2px}
.day-cell.today button:after{content:'TODAY';font-size:.52rem;font-weight:800;letter-spacing:.06em;opacity:.85}
.legend-row{padding:.25rem .1rem}
.legend.present{background:#16a34a!important}.legend.absent{background:#dc2626!important}.legend.neutral{background:#64748b!important}
@media (max-width:720px){.student-graphs .overall-chart{height:190px;max-width:300px}.student-graphs .subject-chart{height:210px}.calendar-grid{padding:.35rem;gap:.3rem}.day-cell{min-height:62px!important}.day-cell button{padding:.4rem}.day-status{font-size:.58rem}.day-count{font-size:.52rem}.day-number{font-size:.95rem}#calendarTitle{min-width:120px;font-size:.9rem}}

/* AttendX Student Profile Card — responsive/mobile alignment */
.profile-box{
  display:grid;
  grid-template-columns:76px 1fr;
  gap:1rem;
  align-items:start;
  padding:1rem;
  border:1px solid rgba(119,141,169,.18);
  border-radius:20px;
  background:rgba(0,0,0,.12);
  min-width:0;
}
.profile-box .avatar-lg{
  width:64px;
  height:64px;
  border-radius:18px;
  display:grid;
  place-items:center;
  flex:none;
  font-size:1.55rem;
  font-weight:800;
  color:#fff;
  background:linear-gradient(135deg,#415A77,#778DA9);
  box-shadow:0 10px 25px rgba(0,0,0,.2);
}
.profile-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.65rem;
  min-width:0;
}
.profile-grid>div{
  min-width:0;
  padding:.7rem .75rem;
  border:1px solid rgba(119,141,169,.13);
  border-radius:13px;
  background:rgba(119,141,169,.055);
}
.profile-grid small{
  display:block;
  margin-bottom:.2rem;
  font-size:.68rem;
  line-height:1.2;
  text-transform:uppercase;
  letter-spacing:.045em;
  font-weight:700;
}
.profile-grid strong{
  display:block;
  min-width:0;
  font-size:.88rem;
  line-height:1.35;
  font-weight:700;
  overflow-wrap:anywhere;
  word-break:break-word;
}
@media(max-width:720px){
  .profile-box{
    grid-template-columns:1fr;
    gap:.85rem;
    padding:.85rem;
  }
  .profile-box .avatar-lg{
    width:58px;
    height:58px;
    border-radius:16px;
    font-size:1.35rem;
  }
  .profile-grid{
    grid-template-columns:1fr 1fr;
    gap:.5rem;
    width:100%;
  }
  .profile-grid>div{
    padding:.65rem .6rem;
    min-height:62px;
  }
  .profile-grid small{font-size:.62rem}
  .profile-grid strong{font-size:.78rem}
}
@media(max-width:380px){
  .profile-grid{grid-template-columns:1fr}
  .profile-grid>div{min-height:auto}
}
/* AttendX Student Profile — mobile-first card */
.profile-box{grid-template-columns:1fr;gap:1rem;padding:1rem;overflow:hidden}
.profile-box .avatar-lg{margin:0 auto;width:68px;height:68px;border-radius:50%;font-size:1.5rem}
.profile-grid{grid-template-columns:1fr;gap:.55rem;width:100%}
.profile-grid>div{display:grid;grid-template-columns:minmax(90px,36%) 1fr;align-items:center;gap:.65rem;min-height:48px;padding:.65rem .7rem}
.profile-grid small{margin:0;font-size:.67rem;white-space:nowrap}
.profile-grid strong{font-size:.84rem;text-align:right;overflow-wrap:anywhere;word-break:break-word}
@media(min-width:721px){.profile-box{grid-template-columns:76px 1fr}.profile-box .avatar-lg{margin:0}.profile-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.profile-grid>div{display:block}.profile-grid strong{text-align:left}}
@media(max-width:380px){.profile-box{padding:.75rem}.profile-grid>div{grid-template-columns:1fr;gap:.2rem;min-height:auto}.profile-grid strong{text-align:left}.profile-grid small{font-size:.62rem}}

/* Subject picker search (Student/Teacher add & edit) */
.subject-picker-search{width:100%;margin:10px 0;padding:11px 13px;border:1px solid rgba(255,255,255,.14);border-radius:10px;background:rgba(255,255,255,.05);color:inherit;outline:none;box-sizing:border-box}
.subject-picker-search:focus{border-color:rgba(255,255,255,.35)}
.subject-picks{max-height:280px;overflow:auto;padding:4px 2px;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.subject-pill[style*="display: none"]{display:none!important}

/* ===== AttendX Logo =====
   To use your own logo, replace the filename below.
   Example: src="assets/my-logo.png"
*/
.brand-logo{width:38px;height:38px;object-fit:contain;border-radius:10px;display:block;flex:0 0 auto;}
.site-header .brand-logo{width:36px;height:36px;}