:root {
    --hub-background: #696969;
    --hub-panel: #7b7b7b;
    --hub-text: #e0e0e0;
    --hub-shadow: rgba(0, 0, 0, 0.28);
    --hub-accent: #ffffff;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    min-height: 100vh;
    color: var(--hub-text);
    background: var(--hub-background);
    font: 16px/1.55 Verdana, Tahoma, Arial, sans-serif;
}
a { color: inherit; }
.container { max-width: 1120px; margin: 0 auto; padding: 30px 20px 48px; }
.topbar { display: flex; align-items: center; gap: 20px; margin-bottom: 28px; }
.topbar img { width: 48px; height: auto; }
.topbar h1 { margin: 0; color: #fff; font-size: clamp(24px, 4vw, 34px); }
.topbar-actions { display: flex; gap: 10px; margin-left: auto; }
.button, button {
    display: inline-block;
    padding: 9px 12px;
    border: 0;
    border-radius: 6px;
    color: var(--hub-text);
    background: rgba(255,255,255,.12);
    cursor: pointer;
    font: inherit;
    text-decoration: none;
}
.button:hover, .button:focus-visible, button:hover, button:focus-visible { color: #fff; background: rgba(255,255,255,.22); }
.card { margin-bottom: 26px; padding: 26px; border-radius: 14px; background: var(--hub-panel); box-shadow: 0 16px 30px var(--hub-shadow); }
.card h2 { margin: 0 0 16px; color: #fff; font-size: 24px; }
.card p:last-child { margin-bottom: 0; }
.table-wrap { overflow-x: auto; }
table { width: 100%; min-width: 620px; border-collapse: collapse; }
th, td { padding: 10px; text-align: center; border: 1px solid rgba(255,255,255,.2); }
th { color: #fff; background: rgba(0,0,0,.12); }
td:first-child, th:first-child { text-align: left; }
.attendance-table { min-width: 420px; font-size: 11px; }
.attendance-table th, .attendance-table td { padding: 4px 6px; }
.payment-table { min-width: 600px; font-size: 10px; }
.payment-table th, .payment-table td { padding: 5px 3px; white-space: nowrap; }
.payment-table th:first-child, .payment-table td:first-child { min-width: 64px; }
.payment-table input { min-width: 44px; padding: 4px; font-size: 10px; }
.payment-account { margin: -6px 0 12px; font-size: 12px; }
.course-frame-wrap {
    width: 100vw;
    height: calc(100vh - 20px);
    min-height: 700px;
    margin-left: calc(50% - 50vw);
    overflow: hidden;
    background: #fff;
}
.course-frame-wrap + .course-frame-wrap { margin-top: 26px; }
.course-frame {
    display: block;
    width: 111.112%;
    height: 111.112%;
    border: 0;
    transform: scale(0.9);
    transform-origin: top left;
}
.course-options { display: flex; flex-wrap: wrap; gap: 14px 20px; margin: 12px 0; }
.course-options label { display: flex; align-items: center; gap: 7px; margin: 0; }
.course-options input { width: auto; }
.balance-negative { color: #ffd1d1; font-weight: bold; }
.balance-zero { color: #e5ffe5; font-weight: bold; }
.notice { margin-bottom: 20px; padding: 12px 14px; border-radius: 8px; color: #fff; background: rgba(42, 91, 45, .62); }
.login { max-width: 430px; margin: 8vh auto; }
label { display: block; margin: 14px 0 6px; color: #fff; }
input, textarea, select {
    width: 100%; padding: 10px; border: 1px solid rgba(255,255,255,.35); border-radius: 6px;
    color: #222; background: #f4f4f4; font: inherit;
}
textarea { min-height: 120px; resize: vertical; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.admin-user { padding: 18px 0; border-top: 1px solid rgba(255,255,255,.2); }
.admin-user:first-of-type { border-top: 0; }
.muted { color: #ececec; font-size: 13px; }
@media (max-width: 650px) {
    .container { padding: 20px 14px 32px; }
    .topbar { align-items: flex-start; }
    .topbar-actions { flex-direction: column; }
    .card { padding: 20px; }
    .form-grid { grid-template-columns: 1fr; }
}