/* =========================================================
   School Management System — Admin Dashboard theme
   ========================================================= */
:root{
  --navy:#21456e; --navy-d:#1b3a5d;
  --blue:#2f74c0; --blue-d:#27619f; --blue-soft:#eaf2fb;
  --active:#2c6aa6;
  --bg:#eceff3; --surface:#ffffff; --surface-2:#f7f9fb;
  --text:#33414e; --text-2:#52616e; --muted:#7c8896; --muted-2:#9aa6b2;
  --line:#e2e8ee; --line-2:#eef2f6;
  --c-red:#ec6453; --c-green:#37b27a; --c-cyan:#2aabd8; --c-amber:#f0a431;
  --green:#3a9d5d; --green-soft:#e7f4ec;
  --red:#d9534f; --red-soft:#fbe9e8;
  --gold:#c8923a; --gold-soft:#f7eed9;
  --ink-badge:#41546a; --ink-soft:#e9edf2;
  --radius:7px; --shadow:0 1px 3px rgba(33,52,76,.08), 0 1px 2px rgba(33,52,76,.04);
  --nav-w:230px; --nav-w-collapsed:62px; --navbar-h:54px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  background:var(--bg); color:var(--text); font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
.ic{vertical-align:middle;flex-shrink:0}

/* ---------------- Top navbar ---------------- */
.navbar{
  position:fixed; top:0; left:0; right:0; height:var(--navbar-h); z-index:60;
  background:var(--navy); color:#fff; display:flex; align-items:center; gap:6px;
  padding:0 18px; box-shadow:0 2px 6px rgba(0,0,0,.12);
}
.navbar-toggle{
  display:none; background:transparent; border:0; color:#fff; cursor:pointer;
  width:38px; height:38px; border-radius:7px; align-items:center; justify-content:center;
}
.navbar-toggle:hover{background:rgba(255,255,255,.12)}
.navbar-brand{display:flex; align-items:center; gap:11px; color:#fff}
.navbar-home{
  width:30px; height:30px; border-radius:7px; background:rgba(255,255,255,.14);
  display:grid; place-items:center;
}
.navbar-title{font-size:17px; font-weight:600; letter-spacing:.2px}
.navbar-right{margin-left:auto; display:flex; align-items:center; gap:10px}
.navbar-chip{
  display:inline-flex; align-items:center; gap:7px; font-size:13px; color:#dce7f2;
  background:rgba(255,255,255,.10); padding:7px 12px; border-radius:20px;
}
.navbar-user{display:flex; align-items:center; gap:9px; color:#fff; padding:4px 8px; border-radius:9px; transition:.15s}
.navbar-user:hover{background:rgba(255,255,255,.12)}
.navbar-ava{width:32px; height:32px; border-radius:50%; background:var(--blue); display:grid; place-items:center; font-weight:700; font-size:13px; flex-shrink:0}
.navbar-uname{display:flex; flex-direction:column; line-height:1.15; font-size:13.5px; font-weight:600}
.navbar-uname small{font-size:11px; color:#bcd0e4; font-weight:500}
.navbar-logout{width:38px; height:38px; border-radius:8px; display:grid; place-items:center; color:#fff; transition:.15s}
.navbar-logout:hover{background:rgba(255,255,255,.12); color:#fff}

/* ---------------- Shell + sidebar ---------------- */
.shell{padding-top:var(--navbar-h)}
.sidebar{
  position:fixed; top:var(--navbar-h); left:0; bottom:0; width:var(--nav-w); z-index:45;
  background:var(--surface); border-right:1px solid var(--line);
  display:flex; flex-direction:column; overflow-y:auto; transition:width .18s ease, transform .2s ease;
}
.side-collapse{
  align-self:flex-end; margin:10px 12px 2px; background:var(--surface-2); border:1px solid var(--line);
  color:var(--muted); width:30px; height:30px; border-radius:50%; cursor:pointer;
  display:grid; place-items:center; transition:.15s;
}
.side-collapse:hover{color:var(--blue); border-color:var(--blue)}
.side-collapse .ic{transform:rotate(180deg)}
.nav{padding:6px 10px 10px; display:flex; flex-direction:column; gap:2px}
.nav-link{
  display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:7px;
  color:var(--text-2); font-size:14px; font-weight:500; white-space:nowrap; position:relative;
  transition:background .14s, color .14s;
}
.nav-link .nav-ic{color:var(--muted); display:inline-flex; transition:color .14s}
.nav-link:hover{background:var(--surface-2); color:var(--text)}
.nav-link:hover .nav-ic{color:var(--blue)}
.nav-link.active{background:var(--active); color:#fff; box-shadow:0 2px 6px rgba(44,106,166,.3)}
.nav-link.active .nav-ic{color:#fff}
.nav-badge{
  margin-left:auto; background:var(--red); color:#fff; font-size:10.5px; font-weight:700;
  padding:3px 8px; border-radius:20px; white-space:nowrap;
}
.nav-link.active .nav-badge{background:rgba(255,255,255,.25)}
.side-foot{margin-top:auto; padding:12px}
.side-foot-card{
  background:var(--surface-2); border:1px solid var(--line); border-radius:8px; padding:11px 13px;
  display:flex; flex-direction:column; gap:2px;
}
.sf-label{font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em}
.sf-value{font-size:13.5px; font-weight:600; color:var(--text)}

.backdrop{
  position:fixed; inset:var(--navbar-h) 0 0 0; background:rgba(20,33,49,.45); z-index:44;
  opacity:0; visibility:hidden; transition:.2s;
}
.backdrop.show{opacity:1; visibility:visible}

/* collapsed (desktop) */
body.nav-collapsed .sidebar{width:var(--nav-w-collapsed)}
body.nav-collapsed .nav-label,
body.nav-collapsed .nav-badge,
body.nav-collapsed .side-foot{display:none}
body.nav-collapsed .nav-link{justify-content:center; padding:11px 0}
body.nav-collapsed .side-collapse .ic{transform:rotate(0deg)}
body.nav-collapsed .main{margin-left:var(--nav-w-collapsed)}

/* ---------------- Main ---------------- */
.main{margin-left:var(--nav-w); padding:22px 26px 60px; min-height:calc(100vh - var(--navbar-h)); transition:margin-left .18s ease}
.content{max-width:1240px}
.page-head{display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:18px; flex-wrap:wrap}
.page-head h2{font-size:21px; font-weight:700; color:#26323d}
.page-head p{color:var(--muted); font-size:13.5px; margin-top:2px}
.page-head-actions{display:flex; gap:9px; flex-wrap:wrap}

/* ---------------- Flash ---------------- */
.flash-wrap{display:flex; flex-direction:column; gap:8px; margin-bottom:16px}
.flash{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 15px; border-radius:7px; font-size:14px; font-weight:500;
  background:var(--green-soft); color:#236a3d; border:1px solid #bfe2cb;
}
.flash-error{background:var(--red-soft); color:#9b2f2c; border-color:#f0c4c2}
.flash-x{background:transparent; border:0; color:inherit; cursor:pointer; opacity:.6; display:inline-flex}
.flash-x:hover{opacity:1}

/* ---------------- Buttons ---------------- */
.btn{
  display:inline-flex; align-items:center; gap:8px; padding:9px 15px; border-radius:7px;
  font-size:13.5px; font-weight:600; font-family:inherit; cursor:pointer; border:1px solid transparent;
  transition:.15s; line-height:1; text-decoration:none;
}
.btn.primary{background:var(--blue); color:#fff}
.btn.primary:hover{background:var(--blue-d)}
.btn.ghost{background:var(--surface); color:var(--text); border-color:var(--line)}
.btn.ghost:hover{border-color:var(--blue); color:var(--blue); background:var(--blue-soft)}
.btn.danger{background:var(--red); color:#fff}
.btn.danger:hover{filter:brightness(.93)}
.btn:disabled{opacity:.5; cursor:not-allowed}
.icon-btn{
  display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px;
  border-radius:6px; border:1px solid var(--line); background:var(--surface); color:var(--text-2);
  cursor:pointer; transition:.15s; text-decoration:none;
}
.icon-btn:hover{border-color:var(--blue); color:var(--blue); background:var(--blue-soft)}
.icon-btn.danger:hover{border-color:var(--red); color:var(--red); background:var(--red-soft)}
.menu-btn{display:none}
.link-btn{background:transparent; border:0; color:var(--blue); font-weight:600; font-size:13px; cursor:pointer; display:inline-flex; align-items:center; gap:5px; font-family:inherit}
.link-btn:hover{text-decoration:underline}

/* ---------------- Stat cards (bright flat) ---------------- */
.stat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:22px}
.stat-card{
  border-radius:var(--radius); padding:17px 19px; color:#fff;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  box-shadow:var(--shadow); position:relative; overflow:hidden;
}
.stat-meta{display:flex; flex-direction:column}
.stat-value{font-size:30px; font-weight:800; line-height:1.05}
.stat-label{font-size:13px; font-weight:600; opacity:.96; margin-top:6px; display:flex; align-items:center; gap:7px}
.stat-sub{font-size:11px; opacity:.85; margin-top:3px}
.stat-icon{opacity:.5}
.stat-icon .ic{width:46px; height:46px}
.stat-card.tone-ink{background:var(--c-red)}
.stat-card.tone-gold{background:var(--c-green)}
.stat-card.tone-green{background:var(--c-cyan)}
.stat-card.tone-accent{background:var(--c-amber)}

/* ---------------- Quick icon grid ---------------- */
.quick-heading{font-size:15px; font-weight:700; color:#2b3742; margin:4px 0 13px}
.quick-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin-bottom:24px}
.quick-tile{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:20px 12px; display:flex; flex-direction:column; align-items:center; gap:11px;
  color:var(--text); transition:.16s; text-align:center;
}
.quick-tile:hover{border-color:var(--blue); box-shadow:0 4px 14px rgba(47,116,192,.16); transform:translateY(-2px)}
.quick-ic{
  width:50px; height:50px; border-radius:12px; background:var(--blue-soft); color:var(--blue);
  display:grid; place-items:center;
}
.quick-ic .ic{width:24px; height:24px}
.quick-tile:hover .quick-ic{background:var(--blue); color:#fff}
.quick-label{font-size:13px; font-weight:600; color:var(--text-2)}

/* ---------------- Cards ---------------- */
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px; box-shadow:var(--shadow); margin-bottom:18px}
.card-head{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px}
.card-head h3{font-size:15px; font-weight:700; color:#2b3742; display:flex; align-items:center; gap:8px}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:18px}

/* ---------------- Badges ---------------- */
.badge{display:inline-flex; align-items:center; padding:4px 10px; border-radius:20px; font-size:12px; font-weight:600; line-height:1.4}
.badge-green{background:var(--green-soft); color:#23703f}
.badge-red{background:var(--red-soft); color:#a8332f}
.badge-gold{background:var(--gold-soft); color:#8c6321}
.badge-ink{background:var(--ink-soft); color:var(--ink-badge)}
.badge-neutral{background:var(--surface-2); color:var(--muted); border:1px solid var(--line)}

/* ---------------- Toolbar / search / select ---------------- */
.toolbar{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:16px}
.search{
  display:flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--line);
  border-radius:7px; padding:0 12px; flex:1; min-width:200px; color:var(--muted); height:40px;
}
.search.no-grow{flex:0 0 auto; min-width:0}
.search input{border:0; outline:0; background:transparent; font-family:inherit; font-size:14px; color:var(--text); width:100%; height:100%}
.select{
  height:40px; border:1px solid var(--line); border-radius:7px; background:var(--surface);
  padding:0 12px; font-family:inherit; font-size:13.5px; color:var(--text); cursor:pointer; outline:0;
}
.select:focus{border-color:var(--blue)}
.select.compact{min-width:130px}
.count-pill{display:inline-flex; align-items:center; padding:0 14px; height:40px; border-radius:7px; background:var(--ink-soft); color:var(--ink-badge); font-size:13px; font-weight:600; white-space:nowrap}
.count-pill.green{background:var(--green-soft); color:#23703f}
.count-pill.gold{background:var(--gold-soft); color:#8c6321}
.count-pill.red-pill{background:var(--red-soft); color:#a8332f}

/* ---------------- Tables ---------------- */
.table-wrap{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow)}
.table{width:100%; border-collapse:collapse; font-size:13.5px}
.table thead th{
  background:var(--surface-2); color:var(--text-2); text-align:left; font-weight:600; font-size:12px;
  text-transform:uppercase; letter-spacing:.03em; padding:12px 16px; border-bottom:1px solid var(--line);
}
.table th.right,.table td.right{text-align:right}
.table tbody td{padding:12px 16px; border-bottom:1px solid var(--line-2); color:var(--text)}
.table tbody tr:last-child td{border-bottom:0}
.table tbody tr:hover{background:var(--surface-2)}
.table small{display:block; color:var(--muted); font-size:11.5px; margin-top:2px}
.mono{font-variant-numeric:tabular-nums; font-feature-settings:"tnum"}
.right{text-align:right}.block{display:block}
.cell-name{display:flex; align-items:center; gap:11px}
.cell-name b{font-weight:600; color:var(--text)}
.cell-name small{color:var(--muted)}
.avatar{
  width:36px; height:36px; border-radius:50%; display:grid; place-items:center;
  font-size:14px; font-weight:700; color:#fff; flex-shrink:0; background:var(--blue);
}
.avatar.sm{width:30px; height:30px; font-size:12px}
.avatar.dark{background:var(--navy)}
.avatar.female{background:#d56a9c}
.avatar.male{background:#3f86c4}
.actions-cell{display:inline-flex; gap:6px; justify-content:flex-end}
.green-txt{color:var(--green)} .red-txt{color:var(--red)}

/* ---------------- Empty state ---------------- */
.empty{
  background:var(--surface); border:1px dashed var(--line); border-radius:var(--radius);
  padding:50px 20px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:8px;
}
.empty-icon{width:60px; height:60px; border-radius:50%; background:var(--blue-soft); color:var(--blue); display:grid; place-items:center; margin-bottom:4px}
.empty h4{font-size:16px; color:#2b3742}
.empty p{color:var(--muted); font-size:13.5px; max-width:380px}
.empty .btn{margin-top:8px}

/* ---------------- Modal ---------------- */
.modal-overlay{
  position:fixed; inset:0; background:rgba(20,33,49,.5); z-index:100;
  display:none; align-items:flex-start; justify-content:center; padding:40px 16px; overflow-y:auto;
}
.modal-overlay.show{display:flex}
.modal{background:var(--surface); border-radius:10px; width:100%; max-width:560px; box-shadow:0 24px 60px rgba(0,0,0,.28); animation:pop .16s ease}
.modal.wide{max-width:720px}
@keyframes pop{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.modal-head{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 20px; border-bottom:1px solid var(--line)}
.modal-title{display:flex; align-items:center; gap:12px}
.modal-title-icon{width:38px; height:38px; border-radius:9px; background:var(--blue-soft); color:var(--blue); display:grid; place-items:center}
.modal-title h3{font-size:16px; font-weight:700; color:#2b3742}
.modal-title p{font-size:12.5px; color:var(--muted)}
.modal-body{padding:18px 20px}
.modal-foot{display:flex; justify-content:flex-end; gap:9px; padding:15px 20px; border-top:1px solid var(--line); background:var(--surface-2); border-radius:0 0 10px 10px}

/* ---------------- Forms ---------------- */
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.field{display:flex; flex-direction:column; gap:6px}
.field.span2{grid-column:1 / -1}
.field-label{font-size:12.5px; font-weight:600; color:var(--text-2)}
.field-hint{font-size:11px; color:var(--muted)}
.req{color:var(--red); margin-left:2px; font-style:normal}
.input{
  height:40px; border:1px solid var(--line); border-radius:7px; padding:0 12px; font-family:inherit;
  font-size:14px; color:var(--text); background:var(--surface); outline:0; width:100%;
}
.input:focus,.select:focus,.search:focus-within{border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-soft)}
.input.num{text-align:right}
.input-prefix{display:flex; align-items:center; border:1px solid var(--line); border-radius:7px; overflow:hidden; background:var(--surface)}
.input-prefix span{padding:0 11px; background:var(--surface-2); color:var(--muted); font-size:13px; font-weight:600; align-self:stretch; display:flex; align-items:center; border-right:1px solid var(--line)}
.input-prefix .input{border:0; border-radius:0}
.input-prefix.sm{max-width:160px}
.input-prefix:focus-within{border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-soft)}
.sub-label{font-size:12.5px; font-weight:700; color:var(--text-2); text-transform:uppercase; letter-spacing:.03em; margin:18px 0 10px}
.sub-label.between{display:flex; align-items:center; justify-content:space-between; text-transform:none; letter-spacing:0; font-size:13.5px}
.form-total{margin-top:14px; padding:12px 15px; background:var(--surface-2); border:1px solid var(--line); border-radius:8px; display:flex; align-items:center; justify-content:space-between; font-size:13.5px; font-weight:600; color:var(--text-2)}
.form-total b{font-size:18px; color:#2b3742}
.form-total.big b{font-size:20px; color:var(--blue)}

/* fee-edit rows */
.fee-edit{display:flex; flex-direction:column; gap:9px}
.fee-edit-row{display:flex; align-items:center; justify-content:space-between; gap:12px}
.fee-edit-row > span{font-size:13.5px; color:var(--text-2)}
.pay-cols{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:6px}
.pay-col{display:flex; flex-direction:column; gap:9px}
.col-total{margin-top:6px; font-size:13px; font-weight:700; text-align:right}

/* ---------------- Segmented tabs ---------------- */
.seg-tabs{display:inline-flex; background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:4px; gap:4px; margin-bottom:16px}
.seg-tabs a{display:inline-flex; align-items:center; gap:8px; padding:8px 16px; border-radius:6px; font-size:13.5px; font-weight:600; color:var(--text-2)}
.seg-tabs a:hover{background:var(--surface-2)}
.seg-tabs a.active{background:var(--blue); color:#fff}

/* ---------------- Attendance ---------------- */
.att-quick{display:flex; gap:8px}
.chip-btn{padding:9px 13px; border-radius:7px; border:1px solid var(--line); background:var(--surface); font-family:inherit; font-size:13px; font-weight:600; cursor:pointer; color:var(--text-2)}
.chip-btn.green:hover{border-color:var(--green); color:var(--green); background:var(--green-soft)}
.chip-btn.red:hover{border-color:var(--red); color:var(--red); background:var(--red-soft)}
.att-stat{display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600; color:var(--text-2); margin-left:auto}
.att-stat .dot{width:10px; height:10px; border-radius:50%}
.dot{display:inline-block; width:10px; height:10px; border-radius:50%}
.dot.green{background:var(--c-green)} .dot.red{background:var(--c-red)} .dot.amber{background:var(--c-amber)}
.att-list{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow)}
.att-row{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 16px; border-bottom:1px solid var(--line-2)}
.att-row:last-child{border-bottom:0}
.att-row .cell-name small{color:var(--muted)}
.att-toggle{display:inline-flex; gap:5px}
.att-opt{width:38px; height:34px; border-radius:6px; border:1px solid var(--line); background:var(--surface); font-weight:700; font-size:13px; cursor:pointer; color:var(--muted); font-family:inherit; transition:.12s}
.att-opt.green.on{background:var(--c-green); border-color:var(--c-green); color:#fff}
.att-opt.red.on{background:var(--c-red); border-color:var(--c-red); color:#fff}
.att-opt.amber.on{background:var(--c-amber); border-color:var(--c-amber); color:#fff}
.sticky-save{position:sticky; bottom:0; margin-top:14px; display:flex; align-items:center; justify-content:space-between; gap:12px; background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:12px 16px; box-shadow:0 -2px 10px rgba(0,0,0,.05)}

/* ---------------- Results subjects ---------------- */
.subj-table{border:1px solid var(--line); border-radius:8px; overflow:hidden}
.subj-head,.subj-row{display:grid; grid-template-columns:2fr 1fr 1fr .8fr 40px; gap:10px; align-items:center; padding:9px 12px}
.subj-head{background:var(--surface-2); font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--muted)}
.subj-row{border-top:1px solid var(--line-2)}
.subj-grade{font-weight:700; color:var(--blue); text-align:center}
.result-summary{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:16px}
.result-summary > div{background:var(--surface-2); border:1px solid var(--line); border-radius:8px; padding:11px 13px; display:flex; flex-direction:column; gap:3px}
.result-summary span{font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.03em}
.result-summary b{font-size:17px; font-weight:700; color:#2b3742}

/* ---------------- Class cards ---------------- */
.class-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:16px}
.class-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; box-shadow:var(--shadow); display:flex; flex-direction:column}
.class-card-top{display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:12px}
.class-card-top h3{font-size:16px; font-weight:700; color:#2b3742}
.muted-sm{font-size:12.5px; color:var(--muted)}
.muted-sm em{font-style:normal; background:var(--blue-soft); color:var(--blue); padding:1px 7px; border-radius:5px; font-weight:600; margin-right:3px}
.class-actions{display:inline-flex; gap:6px}
.fee-lines{display:flex; flex-direction:column; gap:7px; padding:12px 0; border-top:1px solid var(--line-2)}
.fee-line{display:flex; align-items:center; justify-content:space-between; font-size:13px}
.fee-line span{color:var(--text-2)} .fee-line b{font-weight:600; color:var(--text)}
.class-total{display:flex; align-items:center; justify-content:space-between; padding-top:11px; border-top:2px solid var(--line); margin-top:auto}
.class-total span{font-size:12.5px; color:var(--muted); font-weight:600}
.class-total b{font-size:17px; font-weight:800; color:var(--blue)}
.head-add{display:flex; gap:9px; margin-bottom:14px}
.head-add .input{flex:1}
.head-list{display:flex; flex-wrap:wrap; gap:9px}
.head-chip{display:inline-flex; align-items:center; gap:8px; background:var(--surface-2); border:1px solid var(--line); border-radius:20px; padding:6px 8px 6px 14px; font-size:13px; font-weight:600; color:var(--text-2)}
.head-chip form{display:inline-flex}
.head-chip button{width:22px; height:22px; border-radius:50%; border:0; background:var(--ink-soft); color:var(--muted); cursor:pointer; display:grid; place-items:center}
.head-chip button:hover{background:var(--red); color:#fff}

/* ---------------- Charts ---------------- */
.barchart{display:flex; align-items:flex-end; gap:8px; height:180px; padding-top:10px}
.bar-col{flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; height:100%; justify-content:flex-end}
.bar-val{font-size:12px; font-weight:700; color:var(--text-2)}
.bar{width:100%; max-width:34px; background:linear-gradient(180deg,var(--blue),var(--blue-d)); border-radius:5px 5px 0 0; min-height:3px; transition:.2s}
.bar-col:hover .bar{filter:brightness(1.1)}
.bar-lbl{font-size:11px; color:var(--muted); font-weight:600}
.att-summary{display:flex; align-items:center; gap:24px}
.ring{
  --pct:0; width:128px; height:128px; border-radius:50%; flex-shrink:0; display:grid; place-items:center; position:relative;
  background:conic-gradient(var(--c-green) calc(var(--pct)*1%), var(--line) 0);
}
.ring::after{content:""; position:absolute; inset:14px; background:var(--surface); border-radius:50%}
.ring-num{position:relative; z-index:1; font-size:28px; font-weight:800; color:#2b3742}
.ring-num i{font-size:15px; font-style:normal; color:var(--muted)}
.ring-label{position:relative; z-index:1; font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; margin-top:-4px}
.att-legend{display:flex; flex-direction:column; gap:12px}
.att-legend > div{display:flex; flex-direction:column}
.att-legend b{font-size:20px; font-weight:800; color:#2b3742}
.att-legend span{font-size:12px; color:var(--muted)}
.composition{display:flex; align-items:center; gap:26px}
.comp-ring{width:120px; height:120px; border-radius:50%; flex-shrink:0; position:relative}
.comp-ring::after{content:""; position:absolute; inset:18px; background:var(--surface); border-radius:50%}
.pie-legend{display:flex; flex-direction:column; gap:11px}
.pie-legend > div{display:flex; align-items:center; gap:9px; font-size:14px; color:var(--text-2)}
.pie-legend b{font-weight:700; color:#2b3742}

/* ---------------- Settings ---------------- */
.settings-actions{display:flex; flex-wrap:wrap; gap:10px; margin-top:16px}
.data-counts{display:flex; flex-wrap:wrap; gap:9px; margin-top:16px}
.data-counts span{background:var(--surface-2); border:1px solid var(--line); border-radius:20px; padding:6px 13px; font-size:12.5px; font-weight:600; color:var(--text-2)}
.credits{text-align:center; color:var(--muted); font-size:12.5px}

/* ---------------- Responsive ---------------- */
@media (max-width:1080px){
  .stat-grid{grid-template-columns:repeat(2,1fr)}
  .quick-grid{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:860px){
  .navbar-toggle{display:inline-flex}
  .navbar-chip{display:none}
  .navbar-uname{display:none}
  .sidebar{transform:translateX(-100%); box-shadow:6px 0 24px rgba(0,0,0,.18)}
  .sidebar.open{transform:translateX(0)}
  .side-collapse{display:none}
  .main{margin-left:0}
  body.nav-collapsed .main{margin-left:0}
  .grid-2{grid-template-columns:1fr}
  .pay-cols{grid-template-columns:1fr}
}
@media (max-width:620px){
  .main{padding:16px}
  .stat-grid{grid-template-columns:1fr 1fr; gap:11px}
  .quick-grid{grid-template-columns:repeat(3,1fr)}
  .form-grid{grid-template-columns:1fr}
  .result-summary{grid-template-columns:1fr 1fr}
  .subj-head,.subj-row{grid-template-columns:1.6fr 1fr 1fr .7fr 34px; gap:6px; font-size:12px}
  .att-summary,.composition{flex-direction:column; align-items:flex-start; gap:16px}
  .navbar-title{font-size:15px}
}
@media (max-width:430px){
  .stat-grid{grid-template-columns:1fr}
  .quick-grid{grid-template-columns:repeat(2,1fr)}
}