:root{
  --bg:#f6f9ff; --panel:#ffffff; --ink:#0f172a; --muted:#64748b; --accent:#2563eb;
  --accent2:#a21caf; --ring:#60a5fa; --danger:#ef4444; --ok:#059669; --border:#e2e8f0;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:system-ui,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--ink)}

.app-header{
  background: linear-gradient(90deg, #e0f2fe, #e9d5ff);
  border-bottom: 1px solid var(--border);
}
.app-header .wrap{
  display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:1200px;margin:0 auto;padding:12px 16px;
}
.app-header h1{
  margin:0;font-size:20px;font-weight:800;
  background: linear-gradient(90deg, #0284c7, #7c3aed, #db2777);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.tabs button{padding:8px 12px;border-radius:14px;border:1px solid var(--border);background:#fff;cursor:pointer}
.tabs .on{background:var(--accent);color:#fff;border-color:var(--accent)}
#tabLogout:hover { color: #f87171;} /* soft red */
.wrap{max-width:1200px;margin:0 auto;padding:16px}
.bar{display:flex;gap:8px;align-items:center;justify-content:space-between;margin:12px 0;flex-wrap:wrap}
.title{font-weight:700;font-size:20px}
.row{display:grid;grid-template-columns:1fr 3fr;gap:16px}
.card{background:var(--panel);border:1px solid var(--border);border-radius:16px;box-shadow:0 1px 1px rgba(0,0,0,.04);padding:12px}
.card.inset{background:#fafbff}
.sec-title{font-weight:600;margin:0 0 8px 0;color:var(--accent)}
.list{display:flex;flex-direction:column;gap:8px}
.student{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px;border:1px solid var(--border);border-radius:12px;background:#fff}
.student .meta{display:flex;align-items:center;gap:8px}
.dot{width:10px;height:10px;border-radius:50%}

.btn{padding:8px 10px;border-radius:10px;border:1px solid var(--border);background:#fff;cursor:pointer;transition:transform .06s ease, box-shadow .1s ease}
.btn:hover{box-shadow:0 1px 6px rgba(0,0,0,.12)}
.btn:active{transform:translateY(1px)}
.btn.weak{background:#fff}
.btn.primary{background:linear-gradient(90deg,#0284c7,#6366f1);color:#fff;border-color:#4f46e5}
.btn.ok{background:#059669;color:#fff;border-color:#059669}
.btn.danger{background:#fee2e2;color:#991b1b;border-color:#fecaca}

/* Calendar grid defaults to LTR, calendar itself is RTL via [dir="rtl"] on the element */
.grid{display:grid;border-top:1px solid var(--border);border-left:1px solid var(--border);overflow:auto}
#calendar[dir="rtl"]{direction:rtl}
.cell{min-height:56px;padding:8px;border-right:1px solid var(--border);border-bottom:1px solid var(--border);cursor:pointer;background:#fff}
.cell:hover{background:#f1f5f9}
.hdr{background:#f1f5f9;font-weight:600;text-align:center}
.time{background:#f8fafc;position:sticky;left:0}
#calendar[dir="rtl"] .time{left:auto;right:0}
.badge{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 8px;border-radius:12px;color:#fff}
.badge .name{font-size:12px}
.badge .actions{display:flex;gap:6px;align-items:center}
.tiny{font-size:12px;color:var(--muted)}
.note{font-size:12px;color:var(--muted)}

table{width:100%;border-collapse:collapse;background:#fff}
th,td{padding:8px 10px;border-bottom:1px solid var(--border);text-align:left}

.td-paid{color:#059669;font-weight:600}
.td-pending{color:#ea580c}

input[type="number"], input[type="text"]{padding:10px;border:1px solid var(--border);border-radius:10px}
.inputs{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.icon-btn{border:none;background:transparent;color:#fff;cursor:pointer;font-weight:700;line-height:1;font-size:14px}

.app-footer{border-top:1px solid var(--border);background:#fff}
.app-footer .wrap{padding:12px 16px}

@media (max-width: 990px){ .row{grid-template-columns:1fr} .wrap{padding:12px} .cell{min-height:48px} }
@media (max-width: 560px){
  .tabs button{padding:7px 10px}
  .badge{gap:6px;padding:5px 6px}
  .app-header .wrap{padding:10px 12px}
  .btn{padding:7px 9px}
}