:root{
  --paper:#F3F1E8;
  --paper-deep:#E9E5D5;
  --line:#D6CFB6;
  --ink:#1C1B18;
  --ink-soft:#5B564C;
  --navy:#182A4D;
  --navy-soft:#2C4270;
  --gold:#C6901E;
  --white:#FFFEFA;
  --gk:#C97F1E;
  --ma:#1C7A69;
  --co:#5B44A0;
  --lr:#B8394A;
  --danger:#B8394A;
  --success:#1C7A69;
  --radius:4px;
}
*{ box-sizing:border-box; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'Segoe UI', 'IBM Plex Sans', Arial, sans-serif;
  line-height:1.5;
}
h1,h2,h3{ margin:0 0 8px; color:var(--navy); font-weight:700; }
a{ color:var(--navy); text-decoration:none; }
.wrap{ max-width:1100px; margin:0 auto; padding:0 24px; }

/* ---- header ---- */
header.site{
  background:var(--navy); color:var(--white);
  padding:16px 0;
}
header.site .wrap{ display:flex; justify-content:space-between; align-items:center; }
header.site .brand{ font-size:20px; font-weight:700; color:var(--white); display:flex; align-items:center; gap:8px;}
header.site .brand span.tag{ font-size:11px; background:var(--gold); color:var(--navy); padding:2px 8px; border-radius:12px; font-weight:700; }
header.site nav a{ color:var(--white); margin-left:20px; font-size:14px; opacity:0.9; }
header.site nav a:hover{ opacity:1; text-decoration:underline; }
.btn{
  display:inline-block; font-weight:600; font-size:14px;
  padding:10px 18px; border-radius:var(--radius); border:1px solid var(--navy);
  cursor:pointer; background:transparent; color:var(--navy);
}
.btn-primary{ background:var(--navy); color:var(--white); }
.btn-primary:hover{ background:var(--navy-soft); }
.btn-gold{ background:var(--gold); color:var(--navy); border-color:var(--gold); }
.btn-gold:hover{ filter:brightness(1.05); }
.btn-outline-light{ border-color:var(--white); color:var(--white); }
.btn-outline-light:hover{ background:rgba(255,255,255,0.12); }
.btn-danger{ background:var(--danger); color:#fff; border-color:var(--danger); }
.btn-small{ padding:6px 12px; font-size:12.5px; }

/* ---- hero ---- */
.hero{ padding:70px 0; border-bottom:1px solid var(--line); }
.hero h1{ font-size:40px; max-width:640px; }
.hero p{ max-width:520px; color:var(--ink-soft); font-size:16px; margin-top:14px; }
.hero .actions{ margin-top:26px; display:flex; gap:14px; flex-wrap:wrap; }

/* ---- category strip ---- */
.cat-strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:50px;}
@media(max-width:760px){ .cat-strip{ grid-template-columns:repeat(2,1fr);} }
.cat-strip .c{ background:var(--white); padding:22px; }
.cat-strip .c b{ display:block; color:var(--navy); font-size:15px; }
.cat-strip .c small{ color:var(--ink-soft); font-size:12.5px; }
.cat-strip .c .dot{ width:10px; height:10px; border-radius:50%; display:inline-block; margin-right:8px; }

/* ---- modal (popups) ---- */
.modal-overlay{
  display:none; position:fixed; inset:0; background:rgba(20,20,15,0.55);
  z-index:100; align-items:center; justify-content:center; padding:20px;
}
.modal-overlay.open{ display:flex; }
.modal-box{
  background:var(--white); border-radius:8px; width:100%; max-width:460px;
  max-height:90vh; overflow-y:auto; padding:0; position:relative;
}
.modal-head{ display:flex; justify-content:space-between; align-items:center; padding:20px 24px; border-bottom:1px solid var(--line); }
.modal-head h3{ font-size:18px; margin:0; }
.modal-close{ background:none; border:none; font-size:22px; cursor:pointer; color:var(--ink-soft); line-height:1;}
.modal-tabs{ display:flex; border-bottom:1px solid var(--line); }
.modal-tab{ flex:1; padding:14px; text-align:center; font-weight:600; font-size:13.5px; background:var(--paper-deep); cursor:pointer; border:none; color:var(--ink-soft);}
.modal-tab.active{ background:var(--white); color:var(--navy); }
.modal-body{ padding:22px 24px 26px; }
.field{ margin-bottom:14px; }
.field label{ display:block; font-size:12.5px; font-weight:600; color:var(--ink-soft); margin-bottom:5px; text-transform:uppercase; letter-spacing:0.03em;}
.field input, .field select{
  width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:var(--radius);
  background:var(--paper); font-size:14.5px; color:var(--ink);
}
.field input:focus, .field select:focus{ outline:2px solid var(--navy); background:var(--white); }
.form-msg{ font-size:13px; padding:10px 12px; border-radius:var(--radius); margin-bottom:14px; }
.form-msg.error{ background:#FBEAEC; color:var(--danger); border:1px solid #EFC6CC; }
.form-msg.success{ background:#E7F3EF; color:var(--success); border:1px solid #C6E2D8; }
.switch-line{ text-align:center; margin-top:14px; font-size:13px; color:var(--ink-soft); }

/* ---- panel layout (student/admin) ---- */
.panel{ display:flex; min-height:calc(100vh - 64px); }
.sidebar{ width:230px; background:var(--navy); color:var(--white); padding:24px 0; flex-shrink:0; }
.sidebar a{ display:block; color:rgba(255,255,255,0.85); padding:12px 24px; font-size:14px; }
.sidebar a:hover, .sidebar a.active{ background:var(--navy-soft); color:#fff; }
.content{ flex-grow:1; padding:32px; }
.content h2{ margin-bottom:4px; }
.content .sub{ color:var(--ink-soft); font-size:14px; margin-bottom:26px; }

.card{ background:var(--white); border:1px solid var(--line); border-radius:6px; padding:22px; margin-bottom:20px; }
.card h3{ font-size:16px; margin-bottom:12px; }

table.data{ width:100%; border-collapse:collapse; font-size:14px; }
table.data th, table.data td{ text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); }
table.data th{ background:var(--paper-deep); font-size:12px; text-transform:uppercase; letter-spacing:0.03em; color:var(--ink-soft); }
.badge{ display:inline-block; padding:3px 10px; border-radius:20px; font-size:11.5px; font-weight:700; }
.badge.paid{ background:#E7F3EF; color:var(--success); }
.badge.unpaid{ background:#FBEAEC; color:var(--danger); }
.badge.pending{ background:#FDF2DE; color:var(--gold); }
.badge.blocked{ background:#FBEAEC; color:var(--danger); }
.badge.active{ background:#E7F3EF; color:var(--success); }

.course-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
@media(max-width:680px){ .course-grid{ grid-template-columns:1fr; } }
.course-opt{ border:1px solid var(--line); border-radius:6px; padding:16px; display:flex; gap:14px; align-items:flex-start; cursor:pointer; background:var(--white); }
.course-opt input{ margin-top:4px; }
.course-opt .ring{ width:30px; height:30px; border-radius:50%; border:2px solid; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; flex-shrink:0;}
.course-opt.gk .ring{ border-color:var(--gk); color:var(--gk);}
.course-opt.ma .ring{ border-color:var(--ma); color:var(--ma);}
.course-opt.co .ring{ border-color:var(--co); color:var(--co);}
.course-opt.lr .ring{ border-color:var(--lr); color:var(--lr);}
.course-opt small{ color:var(--ink-soft); display:block; margin-top:2px;}

footer.site{ padding:28px 0; text-align:center; color:var(--ink-soft); font-size:13px; border-top:1px solid var(--line); }