:root {
    --bg-1: #0b0c15;
    --bg-2: #121420;
    --bg-3: #1a1d2d;
    --surface: rgba(255, 255, 255, 0.055);
    --surface-strong: rgba(255, 255, 255, 0.1);
    --text: #f4f6ff;
    --text-muted: #9aa3b2;
    --accent: #6c63ff;
    --accent-2: #00d4ff;
    --accent-gradient: linear-gradient(135deg, #6c63ff 0%, #00d4ff 100%);
    --success: #2dd4a0;
    --danger: #ff5c8d;
    --warning: #fbbf24;
    --radius: 18px;
    --radius-sm: 12px;
    --shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
    --transition: 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
}

* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100%;
    background: var(--bg-1);
    color: var(--text);
    font-family: 'Inter', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 15px;
    line-height: 1.55;
    overflow-x: hidden;
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(circle at 10% 10%, rgba(108, 99, 255, 0.18), transparent 45%),
        radial-gradient(circle at 90% 80%, rgba(0, 212, 255, 0.12), transparent 45%),
        var(--bg-1);
}

body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.025'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    opacity: 0.5;
}

#app {
    max-width: 480px;
    margin: 0 auto;
    min-height: 100vh;
    position: relative;
}

@media (min-width: 1024px) {
    #app {
        max-width: 1200px;
        display: flex;
        flex-direction: column;
    }
}

/* Splash */
.splash {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    background: var(--bg-1);
    transition: opacity 0.6s ease, visibility 0.6s ease;
}

.splash.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.splash-logo {
    width: 96px;
    height: 96px;
    border-radius: 28px;
    background: var(--accent-gradient);
    display: grid;
    place-items: center;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 800;
    font-size: 34px;
    letter-spacing: -1px;
    box-shadow: 0 20px 50px rgba(108, 99, 255, 0.45);
    animation: splashLogo 1.1s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.splash-name {
    margin-top: 24px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 700;
    font-size: 28px;
    opacity: 0;
    animation: fadeUp 0.7s 0.5s forwards;
}

.splash-tagline {
    margin-top: 8px;
    color: var(--text-muted);
    font-size: 15px;
    opacity: 0;
    animation: fadeUp 0.7s 0.7s forwards;
}

@keyframes splashLogo {
    0% { transform: scale(0.4) rotate(-12deg); opacity: 0; }
    60% { transform: scale(1.08) rotate(0deg); }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes fadeUp {
    from { transform: translateY(16px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* Glass */
.glass {
    background: var(--surface);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Screens */
.screen {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    animation: screenIn 0.35s ease both;
}

.screen.hidden {
    display: none;
}

@keyframes screenIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Auth */
#auth-screen {
    justify-content: center;
    padding: 24px;
}

.auth-card {
    width: 100%;
    padding: 28px;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.auth-brand {
    text-align: center;
    margin-bottom: 28px;
}

.brand-mark {
    width: 60px;
    height: 60px;
    margin: 0 auto 14px;
    border-radius: 18px;
    background: var(--accent-gradient);
    display: grid;
    place-items: center;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 800;
    font-size: 22px;
}

.brand-mark.small {
    width: 40px;
    height: 40px;
    font-size: 14px;
    border-radius: 12px;
}

.auth-brand h1 {
    margin: 0;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 22px;
    font-weight: 700;
}

.auth-brand p {
    margin: 6px 0 0;
    color: var(--text-muted);
    font-size: 13px;
}

.auth-tabs {
    display: flex;
    gap: 8px;
    padding: 5px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 14px;
    margin-bottom: 22px;
}

.auth-tab {
    flex: 1;
    border: none;
    background: transparent;
    color: var(--text-muted);
    padding: 12px;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

.auth-tab.active {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.field span {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.field input,
.field select {
    width: 100%;
    padding: 14px 16px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.25);
    color: var(--text);
    font-size: 15px;
    outline: none;
    transition: var(--transition);
}

.field input:focus,
.field select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.2);
}

.field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.btn-primary {
    width: 100%;
    padding: 15px;
    border: none;
    border-radius: var(--radius-sm);
    background: var(--accent-gradient);
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: transform 0.15s ease, box-shadow 0.25s ease;
}

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(108, 99, 255, 0.35);
}

.btn-primary:active {
    transform: translateY(0);
}

.btn-primary:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

.spinner {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.spinner.hidden {
    display: none;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.form-hint {
    text-align: center;
    color: var(--text-muted);
    font-size: 12px;
    margin: 0;
}

.code-section {
    animation: fadeUp 0.25s ease both;
}

/* App layout */
#app-screen {
    padding-bottom: 88px;
}

.app-header {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.header-actions {
    display: flex;
    gap: 10px;
}

.icon-btn {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    border: none;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: var(--transition);
}

.icon-btn:hover {
    background: rgba(255, 255, 255, 0.12);
}

/* Banner */
.banner {
    position: relative;
    margin: 16px;
    border-radius: var(--radius);
    overflow: hidden;
    min-height: 150px;
    background: var(--bg-3);
    animation: fadeUp 0.4s ease both;
}

.banner.hidden {
    display: none;
}

.banner img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
}

.banner-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 18px;
    background: linear-gradient(to top, rgba(0,0,0,0.75), transparent 70%);
}

.banner-logo {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--accent-gradient);
    margin-bottom: 8px;
}

.banner-text {
    font-weight: 700;
    font-size: 16px;
    text-shadow: 0 2px 10px rgba(0,0,0,0.4);
}

/* Content */
.content {
    padding: 8px 16px 24px;
    flex: 1;
}

.section {
    animation: fadeUp 0.3s ease both;
}

.section-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 18px;
}

.section-subtitle {
    color: var(--text-muted);
    font-size: 13px;
    margin: -12px 0 18px;
}

/* Cards */
.card {
    background: var(--surface);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius);
    padding: 18px;
    margin-bottom: 14px;
    transition: var(--transition);
}

.card:active {
    transform: scale(0.99);
}

.card-title {
    font-weight: 700;
    margin: 0 0 6px;
}

.card-meta {
    color: var(--text-muted);
    font-size: 13px;
}

/* Profile */
.profile-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

.profile-photo {
    width: 86px;
    height: 86px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(255,255,255,0.12);
    background: var(--bg-3);
}

.profile-photo-placeholder {
    width: 86px;
    height: 86px;
    border-radius: 50%;
    background: var(--accent-gradient);
    display: grid;
    place-items: center;
    font-size: 28px;
    font-weight: 700;
    color: #fff;
}

.profile-name {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 20px;
    font-weight: 700;
    margin: 0;
}

.profile-group {
    color: var(--accent-2);
    font-weight: 600;
    font-size: 14px;
    margin-top: 4px;
}

.profile-grid {
    display: grid;
    gap: 12px;
}

.profile-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: var(--radius-sm);
}

.profile-row .label {
    color: var(--text-muted);
    font-size: 13px;
}

.profile-row .value {
    font-weight: 600;
    text-align: right;
}

.photo-upload {
    margin-top: 14px;
}

.photo-upload input {
    display: none;
}

.photo-upload label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    border-radius: var(--radius-sm);
    border: 1px dashed rgba(255, 255, 255, 0.2);
    color: var(--text-muted);
    cursor: pointer;
    transition: var(--transition);
}

.photo-upload label:hover {
    border-color: var(--accent);
    color: var(--text);
}

/* Empty state */
.empty-state {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
}

.empty-state svg {
    margin-bottom: 14px;
    opacity: 0.6;
}

/* Assignment questions */
.question-card {
    margin-bottom: 16px;
    padding: 18px;
    background: var(--surface);
    border-radius: var(--radius);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.question-number {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 20px;
    background: var(--accent-gradient);
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 10px;
}

.question-text {
    font-weight: 600;
    margin-bottom: 14px;
    line-height: 1.6;
}

.options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border-radius: var(--radius-sm);
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.06);
    cursor: pointer;
    transition: var(--transition);
}

.option:hover {
    border-color: rgba(108, 99, 255, 0.4);
}

.option input {
    accent-color: var(--accent);
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.option.selected {
    border-color: var(--accent);
    background: rgba(108, 99, 255, 0.12);
}

/* Ranking */
.ranking-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ranking-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    background: var(--surface);
    border-radius: var(--radius);
    border: 1px solid rgba(255, 255, 255, 0.08);
    animation: listReveal 0.35s ease both;
}

.ranking-item:nth-child(1) { animation-delay: 0.05s; }
.ranking-item:nth-child(2) { animation-delay: 0.1s; }
.ranking-item:nth-child(3) { animation-delay: 0.15s; }
.ranking-item:nth-child(4) { animation-delay: 0.2s; }

@keyframes listReveal {
    from { opacity: 0; transform: translateX(-10px); }
    to { opacity: 1; transform: translateX(0); }
}

.rank-badge {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 13px;
    background: rgba(255,255,255,0.08);
    flex-shrink: 0;
}

.rank-badge.gold { background: rgba(251, 191, 36, 0.18); color: var(--warning); }
.rank-badge.silver { background: rgba(200, 200, 200, 0.15); color: #d1d5db; }
.rank-badge.bronze { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }

.ranking-photo {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--bg-3);
    flex-shrink: 0;
}

.ranking-info {
    flex: 1;
    min-width: 0;
}

.ranking-name {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ranking-count {
    font-size: 12px;
    color: var(--text-muted);
}

/* Attendance */
.attendance-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.attendance-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    background: var(--surface);
    border-radius: var(--radius-sm);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.attendance-date {
    font-weight: 600;
}

.attendance-weekday {
    font-size: 12px;
    color: var(--text-muted);
}

.attendance-status {
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.status-present { background: rgba(45, 212, 160, 0.15); color: var(--success); }
.status-absent { background: rgba(255, 92, 141, 0.15); color: var(--danger); }
.status-excused { background: rgba(251, 191, 36, 0.15); color: var(--warning); }
.status-unknown { background: rgba(255,255,255,0.08); color: var(--text-muted); }

/* Bottom nav */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    display: flex;
    justify-content: space-around;
    padding: 8px 0 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

@media (min-width: 1024px) {
    .bottom-nav {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        right: auto;
        width: 240px;
        flex-direction: column;
        justify-content: flex-start;
        padding: 24px;
        gap: 8px;
        border-top: none;
        border-right: 1px solid rgba(255, 255, 255, 0.06);
    }

    .nav-item {
        justify-content: flex-start;
        padding: 14px 16px;
        gap: 12px;
    }

    .nav-item span { display: inline; }

    #app-screen {
        padding-left: 240px;
        padding-bottom: 0;
    }

    .app-header {
        left: 240px;
    }

    .banner, .content {
        margin-left: 24px;
        margin-right: 24px;
    }
}

.nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    padding: 6px;
    cursor: pointer;
    border-radius: 14px;
    transition: var(--transition);
}

.nav-item svg {
    transition: var(--transition);
}

.nav-item.active,
.nav-item:hover {
    color: var(--text);
    background: rgba(255, 255, 255, 0.06);
}

.nav-item.active svg {
    color: var(--accent-2);
}

/* Toast */
.toast {
    position: fixed;
    bottom: 92px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1001;
    padding: 12px 20px;
    border-radius: 30px;
    background: var(--bg-3);
    color: var(--text);
    font-weight: 600;
    box-shadow: var(--shadow);
    border: 1px solid rgba(255, 255, 255, 0.08);
    opacity: 1;
    transition: opacity 0.3s ease, transform 0.3s ease;
    max-width: 90%;
    text-align: center;
}

.toast.hidden {
    opacity: 0;
    transform: translateX(-50%) translateY(10px);
    pointer-events: none;
}

.toast.error {
    background: rgba(255, 92, 141, 0.15);
    color: var(--danger);
    border-color: rgba(255, 92, 141, 0.25);
}

.toast.success {
    background: rgba(45, 212, 160, 0.15);
    color: var(--success);
    border-color: rgba(45, 212, 160, 0.25);
}

/* Utilities */
.hidden { display: none !important; }
.text-center { text-align: center; }
.mt-2 { margin-top: 12px; }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 6px; }
::-webkit-scrollbar-track { background: transparent; }

/* -----------------------------------------------------------------------
   Part 2 — Teacher / Admin panel styles.
   Scoped under .teacher-app / .admin-app / .admin-login so they never
   change the look of the existing Student SPA screens. Re-uses Part 1's
   --accent / --danger tokens instead of redefining :root or body.
   ----------------------------------------------------------------------- */
.admin-login, .admin-app, .teacher-app { color: var(--text-primary, #eaf0ff); }
.admin-login { max-width: 380px; margin: 80px auto; padding: 28px; }
.admin-app, .teacher-app { max-width: 1100px; margin: 24px auto; padding: 0 16px; }

.admin-login .glass-sm,
.admin-app .glass-sm,
.teacher-app .glass-sm { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 14px; padding: 12px; margin: 8px 0; }

.admin-app .topbar,
.teacher-app .topbar { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid rgba(255,255,255,.1); }

.admin-app .tabs,
.teacher-app .tabs { display: flex; gap: 8px; flex-wrap: wrap; padding: 12px; border-bottom: 1px solid rgba(255,255,255,.08); }
.admin-app .tabs button,
.teacher-app .tabs button { background: transparent; border: 1px solid rgba(255,255,255,.15); color: inherit; padding: 8px 12px; border-radius: 999px; cursor: pointer; transition: .2s; }
.admin-app .tabs button:hover,
.teacher-app .tabs button:hover { background: rgba(255,255,255,.12); }

.admin-app .panel-main,
.teacher-app .panel-main { padding: 18px; min-height: 60vh; }

.admin-login input, .admin-login select, .admin-login textarea,
.admin-app input, .admin-app select, .admin-app textarea,
.teacher-app input, .teacher-app select, .teacher-app textarea {
  background: rgba(0,0,0,.25); color: inherit; border: 1px solid rgba(255,255,255,.18);
  border-radius: 12px; padding: 10px 12px; margin: 6px 6px 6px 0; min-width: 220px;
}
.admin-app textarea, .teacher-app textarea { min-height: 90px; width: 100%; max-width: 720px; }

.admin-login .btn, .admin-app .btn, .teacher-app .btn {
  background: var(--accent); color: white; border: none; padding: 10px 16px;
  border-radius: 12px; cursor: pointer; font-weight: 600; margin: 4px;
}
.admin-app .btn.secondary, .teacher-app .btn.secondary { background: #2a375f; }
.admin-app .btn.ghost, .teacher-app .btn.ghost { background: transparent; border: 1px solid rgba(255,255,255,.2); }
.admin-app .btn.danger, .teacher-app .btn.danger { background: var(--danger, #ff5c6c); }

.admin-app .row, .teacher-app .row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.admin-app .group-list, .teacher-app .group-list { list-style: none; padding: 0; }
.admin-app .group-list li, .teacher-app .group-list li { padding: 10px; background: rgba(255,255,255,.05); border-radius: 12px; margin: 6px 0; }

.admin-app .att-table, .admin-app .res-table,
.teacher-app .att-table, .teacher-app .res-table { border-collapse: collapse; width: 100%; margin-top: 12px; }
.admin-app .att-table th, .admin-app .att-table td, .admin-app .res-table th, .admin-app .res-table td,
.teacher-app .att-table th, .teacher-app .att-table td, .teacher-app .res-table th, .teacher-app .res-table td {
  border: 1px solid rgba(255,255,255,.12); padding: 6px 8px; text-align: center;
}
.admin-app .att-table td:first-child, .admin-app .res-table td:first-child,
.teacher-app .att-table td:first-child, .teacher-app .res-table td:first-child { text-align: left; }

/* Teacher home has no ad banner */
.teacher-app .ad-banner { display: none !important; }

@media (max-width: 720px) {
  .admin-app .tabs, .teacher-app .tabs { overflow-x: auto; }
  .admin-login input, .admin-login select,
  .admin-app input, .admin-app select,
  .teacher-app input, .teacher-app select { min-width: unset; width: 100%; }
}

/* ---------------------------------------------------------------------- */
/* Part 2 — Teacher / Admin panels                                         */
/* Scoped under .teacher-app / .admin-app / .admin-login so it can't touch */
/* the Student SPA's own input/button styling from Part 1.                 */
/* ---------------------------------------------------------------------- */
.admin-login{max-width:380px; margin:80px auto; padding:28px;}
.admin-app, .teacher-app{max-width:1100px; margin:24px auto;}
.admin-app .glass-sm, .teacher-app .glass-sm, .admin-login.glass-sm{
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:14px; padding:12px; margin:8px 0;
}
.admin-app .topbar, .teacher-app .topbar{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.1);}
.admin-app .tabs, .teacher-app .tabs{display:flex;gap:8px;flex-wrap:wrap;padding:12px;border-bottom:1px solid rgba(255,255,255,.08);}
.admin-app .tabs button, .teacher-app .tabs button{background:transparent;border:1px solid rgba(255,255,255,.15); color:var(--text-primary,#eaf0ff); padding:8px 12px; border-radius:999px; cursor:pointer; transition:.2s;}
.admin-app .tabs button:hover, .teacher-app .tabs button:hover{background:rgba(255,255,255,.12);}
.admin-app .panel-main, .teacher-app .panel-main{padding:18px; min-height:60vh;}
.admin-app input, .admin-app select, .admin-app textarea,
.teacher-app input, .teacher-app select, .teacher-app textarea,
.admin-login input, .admin-login select, .admin-login textarea{
  background:rgba(0,0,0,.25); color:var(--text-primary,#eaf0ff); border:1px solid rgba(255,255,255,.18); border-radius:12px; padding:10px 12px; margin:6px 6px 6px 0; min-width:220px;
}
.admin-app textarea, .teacher-app textarea{min-height:90px; width:100%; max-width:720px;}
.admin-app .btn, .teacher-app .btn, .admin-login .btn{background:var(--accent); color:white; border:none; padding:10px 16px; border-radius:12px; cursor:pointer; font-weight:600; margin:4px;}
.admin-app .btn.secondary, .teacher-app .btn.secondary{background:#2a375f;}
.admin-app .btn.ghost, .teacher-app .btn.ghost{background:transparent; border:1px solid rgba(255,255,255,.2);}
.admin-app .btn.danger, .teacher-app .btn.danger{background:#ff5c6c;}
.admin-app .row, .teacher-app .row{display:flex; gap:10px; align-items:center; flex-wrap:wrap;}
.admin-app .group-list, .teacher-app .group-list{list-style:none; padding:0;}
.admin-app .group-list li, .teacher-app .group-list li{padding:10px; background:rgba(255,255,255,.05); border-radius:12px; margin:6px 0;}
.admin-app .att-table, .admin-app .res-table, .teacher-app .att-table, .teacher-app .res-table{border-collapse:collapse; width:100%; margin-top:12px;}
.admin-app .att-table th, .admin-app .att-table td, .admin-app .res-table th, .admin-app .res-table td,
.teacher-app .att-table th, .teacher-app .att-table td, .teacher-app .res-table th, .teacher-app .res-table td{border:1px solid rgba(255,255,255,.12); padding:6px 8px; text-align:center;}
.admin-app .att-table td:first-child, .admin-app .res-table td:first-child,
.teacher-app .att-table td:first-child, .teacher-app .res-table td:first-child{text-align:left;}
/* Teacher home has no ad banner */
.teacher-app .ad-banner{display:none !important;}
@media (max-width:720px){
  .admin-app .tabs, .teacher-app .tabs{overflow-x:auto;}
  .admin-app input, .admin-app select, .teacher-app input, .teacher-app select{min-width:unset; width:100%;}
}

/* Premium Auth Screen redesign (Part 3) */
#auth-screen { position: relative; overflow: hidden; isolation: isolate; padding: 24px; }
.auth-orb { position: absolute; z-index: -1; border-radius: 50%; filter: blur(60px); opacity: 0.55; pointer-events: none; will-change: transform; }
.auth-orb-1 { width: 320px; height: 320px; top: -120px; left: -100px; background: radial-gradient(circle at 30% 30%, rgba(108, 99, 255, 0.55), transparent 70%); animation: orbFloat1 14s ease-in-out infinite; }
.auth-orb-2 { width: 300px; height: 300px; bottom: -140px; right: -110px; background: radial-gradient(circle at 60% 60%, rgba(0, 212, 255, 0.45), transparent 70%); animation: orbFloat2 16s ease-in-out infinite; }
@keyframes orbFloat1 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(30px, 40px) scale(1.12); } }
@keyframes orbFloat2 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-25px, -30px) scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .auth-orb { animation: none; } }

#auth-screen .auth-card { position: relative; width: 100%; max-width: 400px; margin: 0 auto; padding: 34px 28px; border-radius: 26px; background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.03)); border: 1px solid transparent; background-clip: padding-box; box-shadow: 0 30px 80px rgba(0,0,0,0.45), 0 1px 0 rgba(255,255,255,0.06) inset, 0 0 0 1px rgba(255,255,255,0.06); animation: cardRise 0.6s cubic-bezier(0.22,0.61,0.36,1) both; }
#auth-screen .auth-card::before { content: ''; position: absolute; inset: -1px; z-index: -1; border-radius: 27px; padding: 1px; background: linear-gradient(140deg, rgba(108,99,255,0.55), rgba(255,255,255,0.04) 35%, rgba(0,212,255,0.35) 100%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0.9; }
@keyframes cardRise { from { opacity: 0; transform: translateY(22px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }

#auth-screen .auth-brand { margin-bottom: 30px; }
#auth-screen .brand-mark { position: relative; width: 72px; height: 72px; border-radius: 22px; margin: 0 auto 18px; background: var(--accent-gradient); box-shadow: 0 18px 40px rgba(108,99,255,0.5), 0 0 0 6px rgba(108,99,255,0.08); overflow: hidden; animation: brandBreathe 4.5s ease-in-out infinite, splashLogo 0.9s cubic-bezier(0.22,0.61,0.36,1) both; }
#auth-screen .brand-mark span { position: relative; z-index: 1; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 24px; letter-spacing: -0.5px; }
#auth-screen .brand-mark::after { content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(120deg, transparent, rgba(255,255,255,0.55), transparent); transform: skewX(-20deg); animation: brandShine 3.6s ease-in-out infinite; }
@keyframes brandShine { 0% { left: -60%; } 35%, 100% { left: 140%; } }
@keyframes brandBreathe { 0%, 100% { box-shadow: 0 18px 40px rgba(108,99,255,0.5), 0 0 0 6px rgba(108,99,255,0.08); } 50% { box-shadow: 0 22px 48px rgba(0,212,255,0.5), 0 0 0 10px rgba(0,212,255,0.1); } }
#auth-screen .auth-brand h1 { font-size: 24px; background: linear-gradient(135deg, #ffffff 0%, #b9c2ff 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
#auth-screen .auth-brand p { font-size: 13.5px; opacity: 0; animation: fadeUp 0.6s 0.15s ease both; }

#auth-screen .auth-tabs { position: relative; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06); padding: 4px; border-radius: 16px; }
#auth-screen .auth-tab { position: relative; z-index: 1; padding: 11px; border-radius: 12px; transition: color 0.35s ease; }
#auth-screen .auth-tab.active { background: var(--accent-gradient); color: #fff; box-shadow: 0 8px 20px rgba(108,99,255,0.35); }

#auth-screen .auth-form:not(.hidden) .field { animation: fadeUp 0.45s ease both; }
#auth-screen .auth-form:not(.hidden) .field:nth-child(1) { animation-delay: 0.05s; }
#auth-screen .auth-form:not(.hidden) .field:nth-child(2) { animation-delay: 0.1s; }
#auth-screen .auth-form:not(.hidden) .field:nth-child(3) { animation-delay: 0.15s; }
#auth-screen .auth-form:not(.hidden) .field:nth-child(4) { animation-delay: 0.2s; }

#auth-screen .field input, #auth-screen .field select { padding: 13px 15px; border-radius: 13px; background: rgba(0,0,0,0.3); transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease; }
#auth-screen .field input:hover, #auth-screen .field select:hover { border-color: rgba(255,255,255,0.18); }
#auth-screen .field input:focus, #auth-screen .field select:focus { background: rgba(0,0,0,0.4); box-shadow: 0 0 0 4px rgba(108,99,255,0.18), 0 0 20px rgba(0,212,255,0.12); }

#auth-screen .btn-primary { padding: 16px; border-radius: 14px; letter-spacing: 0.2px; background: linear-gradient(120deg, #6c63ff 0%, #7d6bff 30%, #00d4ff 100%); background-size: 200% 100%; box-shadow: 0 14px 32px rgba(108,99,255,0.4); transition: transform 0.18s ease, box-shadow 0.25s ease, background-position 0.6s ease; }
#auth-screen .btn-primary:hover { transform: translateY(-2px); background-position: 100% 0; box-shadow: 0 18px 40px rgba(0,212,255,0.4); }
#auth-screen .btn-primary:active { transform: translateY(0) scale(0.99); }
#auth-screen .btn-primary .btn-ripple { position: absolute; border-radius: 50%; transform: scale(0); background: rgba(255,255,255,0.45); pointer-events: none; animation: btnRipple 0.6s ease-out forwards; }
@keyframes btnRipple { to { transform: scale(2.6); opacity: 0; } }

#auth-screen .form-hint { opacity: 0; animation: fadeUp 0.5s 0.25s ease both; }

@media (max-width: 380px) { #auth-screen .auth-card { padding: 28px 20px; } }

/* Splash polish to match premium brand mark */
.splash-logo { position: relative; overflow: hidden; box-shadow: 0 20px 50px rgba(108,99,255,0.45), 0 0 0 6px rgba(108,99,255,0.08); }
.splash-logo::after { content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(120deg, transparent, rgba(255,255,255,0.55), transparent); transform: skewX(-20deg); animation: brandShine 3.6s ease-in-out infinite; }