/* Root colors (matching previous Tailwind theme) */
:root {
    --bg: #0f0c10;
    --card: #1a1620;
    --muted: #9aa0a6;
    --primary-50: #f2e7fe;
    --primary-100:#e5d0fc;
    --primary-200:#d2a9fa;
    --primary-300:#b97df8;
    --primary-400:#a050f6;
    --primary-500:#8013ec;
    --primary-600:#7411d7;
    --primary-700:#620fba;
    --primary-800:#510d99;
    --primary-900:#420a7d;
    --primary-color:#7f13ec;
}

/* Basic resets */
* {
    box-sizing:border-box;
}

html,body {
    height:100%;
    margin:0;
    font-family:"Be Vietnam Pro","Noto Sans",sans-serif;
    background:linear-gradient(180deg,#0b0710 0%, #141118 100%);
    color:#ffffff;
}

a {
    color:var(--primary-500);
    text-decoration:none;
}

/* Utility classes from original app used by JS */
.view {
    display:none;
}

.view.active {
    display:block;
}

/* Layout */
#app {
    min-height:100vh;
    display:flex;
    flex-direction:column;
}

header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:16px 40px;
    border-bottom:1px solid rgba(255,255,255,0.04);
}

.logo {
    display:flex;
    align-items:center;
    gap:12px;
}

.logo h2 {
    margin:0;
    font-size:18px;
}

/* Login view */
#loginView .container {
    min-height:calc(100vh - 80px);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:40px;
}

.panel {
    width:100%;
    max-width:480px;
    background:rgba(26,22,32,0.85);
    border:1px solid rgba(255,255,255,0.06);
    border-radius:20px;
    padding:28px;
    box-shadow:0 8px 30px rgba(127,19,236,0.08);
}

.panel h2 {
    font-size:28px;
    margin:0 0 6px;
}

.panel p {
    color:#bfc3c8;
    margin:0 0 18px;
}

form .field {
    position:relative;
    margin-bottom:14px;
}

.material-symbols-outlined {
    font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 48;
    vertical-align:middle;
}

.field input.form-input {
    width:100%;
    height:56px;
    padding:0 14px 0 44px;
    border-radius:10px;
    border:1px solid transparent;
    background:#302839;
    color:#fff;
    font-size:16px;
}

input.form-input::placeholder {
    color:#7a7080;
}

input.form-input:focus {
    outline:none;
    border-color:var(--primary-500);
    box-shadow:0 0 0 4px rgba(128,19,236,0.08);
}

.left-icon {
    position:absolute;
    left:12px;
    top:50%;
    transform:translateY(-50%);
    color:#9aa0a6;
}

.btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:12px 18px;
    border-radius:10px;
    border:0;
    cursor:pointer;
}

.btn-primary {
    background:var(--primary-500);
    color:white;
    font-weight:700;
    box-shadow:0 10px 30px rgba(127,19,236,0.12);
}

.btn-ghost {
    background:#3a3640;
    color:white;
}

.muted {
    color:var(--muted);
}

/* Dashboard */
#dashboardView {
    background:#0f0c10;
    padding-bottom:40px;
}

a {
    color:white;
    font-weight:600;
    cursor:pointer;
}

a:hover {
    color: #7411d7;
}

#navClassesLink {
    color: #7411d7;
}

.dashboard-main {
    padding:100px 40px;
}

.title-row {
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:24px;
}

.title-row h2 {
    margin:0;
    font-size:32px;
}

.controls {
    display:flex;
    gap:10px;
}

/* Cards grid */
#cardsGrid {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
    gap:18px;
}

.card {
    background:#141218;
    border-radius:12px;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    box-shadow:0 6px 18px rgba(0,0,0,0.6);
    transition:box-shadow .2s;
}

.card:hover {
    box-shadow:0 12px 30px rgba(0,0,0,0.8);
}

.card .thumb {
    height:160px;
    background-size:cover;
    background-position:center;
}

.card .body {
    padding:12px;
    display:flex;
    flex-direction:column;
    flex:1;
}

.card h3 {
    margin:0 0 6px;
    font-size:16px;
}

.card p {
    margin:0;
    color:#a8aab0;
    font-size:13px;
}

.card .meta {
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-top:12px;
}

.avatars img {
    width:28px;
    height:28px;
    border-radius:50%;
    border:2px solid #141218;
    margin-left:-8px;
}

.deleteBtn {
    background:#d9534f;
    color:white;
    padding:6px 10px;
    border-radius:6px;
    border:0;
    cursor:pointer;
}

/* Classroom form view */
#classroomView .container {
    padding:40px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.form-card {
    width:100%;
    max-width:720px;
    background:#1c1822;
    padding:28px;
    border-radius:16px;
}

.form-card h1 {
    font-size:30px;
    margin:0 0 6px;
}

.form-row {
    margin-bottom:14px;
}

label {
    display:block;
    color:#c6c8cc;
    margin-bottom:8px;
    font-size:13px;
}

input[type="url"],input[type="text"] {
    width:100%;
    height:48px;
    padding:10px;
    border-radius:8px;
    border:1px solid transparent;
    background:#2b2533;
    color:#fff;
}

.form-actions {
    display:flex;
    justify-content:flex-end;
    gap:10px;
    margin-top:8px;
}

/* Responsive */
@media (max-width:600px){
    header {
        padding:12px;
    }
    .panel {
        padding:18px;
    }
    .form-card {
        padding:18px;
    }
    #cardsGrid {
        grid-template-columns:repeat(1,1fr);
    }
}