/* =============================
   GLOBAL
============================= */

        *, *::before, *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        :root {
            --blue-900: #0d1b6e;
            --blue-700: #1a3bc1;
            --blue-500: #3a6ef5;
            --blue-400: #5a8eff;
            --blue-300: #7fb3ff;
            --accent: #00f5c4;
            --accent-dim: rgba(0,245,196,0.15);
            --primary: #2f6df6; /* optional, unify with blue-500 */
            --dark: #1f2d3d;
            --white: #ffffff;
            --card-bg: rgba(255,255,255,0.97);
            --text-dark: #0e1a3d;
            --text-mid: #3a4870;
            --text-muted: #7a88b8;
            --border: rgba(90,142,255,0.2);
            --shadow: 0 24px 80px rgba(13,27,110,0.35);
            --error: #ff4d6d;
            --success: #00c896;
        }

        html, body {
            height: 100%;
            font-family: 'DM Sans', sans-serif;
            /*background: linear-gradient(120deg, var(--blue-500), var(--accent));*/
            min-height: 100vh;
            overflow-x: hidden;
        }


            body::before {
                content: '';
                position: fixed;
                inset: 0;
               /* background-image: linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);*/
                background-size: 48px 48px;
                pointer-events: none;
                z-index: 0;
            }

            body::after {
                content: '';
                position: fixed;
                top: -30%;
                left: -20%;
                width: 70vw;
                height: 70vw;
                background: radial-gradient(circle, rgba(0,245,196,0.08) 0%, transparent 65%);
                pointer-events: none;
                z-index: 0;
                animation: floatOrb 12s ease-in-out infinite alternate;
            }

        @keyframes floatOrb {
            from {
                transform: translate(0,0) scale(1);
            }

            to {
                transform: translate(8vw, 5vh) scale(1.1);
            }
        }


        .screen {
            display: none;
            min-height: 100vh;
            align-items: center;
            justify-content: center;
            padding: 2rem;
            position: relative;
            z-index: 1;
        }

            .screen.active {
                display: flex;
            }

        /* ---- CARD ---- */
        .card {
            background: var(--card-bg);
            border-radius: 24px;
            box-shadow: var(--shadow);
            padding: 2.8rem 3rem;
            width: 100%;
            animation: cardIn 0.5s cubic-bezier(0.23,1,0.32,1) both;
            position: relative;
            overflow: hidden;
        }

            .card::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                height: 4px;
                background: linear-gradient(90deg, var(--blue-700), var(--accent));
                border-radius: 24px 24px 0 0;
            }

        @keyframes cardIn {
            from {
                opacity: 0;
                transform: translateY(28px) scale(0.97);
            }

            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        /* ---- HOME CARD ---- */
        #screen-home .card {
            max-width: 520px;
        }

        .brand-logo {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 0.4rem;
        }

        .brand-icon {
            width: 48px;
            height: 48px;
            background: linear-gradient(135deg, var(--blue-700), var(--accent));
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: 'DM Sans', sans-serif;
            font-weight: 700;
            color: #fff;
            font-size: 1.1rem;
            letter-spacing: -1px;
            flex-shrink: 0;
            box-shadow: 0 6px 20px rgba(58,110,245,0.4);
        }

        .brand-name {
            font-family: 'DM Sans', sans-serif;
            font-size: 1.7rem;
            font-weight: 700;
            color: var(--text-dark);
            letter-spacing: -1px;
        }

            .brand-name span {
                color: var(--blue-500);
            }

        .brand-tagline {
            font-size: 0.88rem;
            color: var(--text-muted);
            margin-bottom: 2.4rem;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            font-weight: 500;
        }

        .home-options {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        .role-btn {
            display: flex;
            align-items: center;
            gap: 1.2rem;
            padding: 1.1rem 1.4rem;
            border-radius: 14px;
            border: 2px solid var(--border);
            background: transparent;
            cursor: pointer;
            transition: all 0.22s ease;
            text-align: left;
            text-decoration: none;
            color: var(--text-dark);
            position: relative;
            overflow: hidden;
        }

            .role-btn::before {
                content: '';
                position: absolute;
                inset: 0;
                background: linear-gradient(120deg, var(--blue-500), var(--accent));
                opacity: 0;
                transition: opacity 0.22s ease;
                border-radius: 12px;
            }

            .role-btn:hover::before {
                opacity: 1;
            }

            .role-btn:hover {
                border-color: transparent;
                box-shadow: 0 8px 30px rgba(58,110,245,0.35);
            }

                .role-btn:hover .role-icon,
                .role-btn:hover .role-title,
                .role-btn:hover .role-desc {
                    color: #fff !important;
                }

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

        .role-icon {
            width: 46px;
            height: 46px;
            border-radius: 12px;
            background: #f0f4ff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.4rem;
            flex-shrink: 0;
            transition: all 0.22s;
            position: relative;
            z-index: 1;
        }

        .role-content {
            flex: 1;
            position: relative;
            z-index: 1;
        }

        .role-title {
            font-weight: 600;
            font-size: 0.97rem;
            color: var(--text-dark);
            transition: color 0.22s;
        }

        .role-desc {
            font-size: 0.78rem;
            color: var(--text-muted);
            margin-top: 2px;
            transition: color 0.22s;
        }

        .role-arrow {
            color: var(--text-muted);
            font-size: 1.2rem;
            position: relative;
            z-index: 1;
            transition: transform 0.22s, color 0.22s;
        }

        .role-btn:hover .role-arrow {
            transform: translateX(4px);
            color: #fff;
        }

        /* ---- TEACHER LOGIN CARD ---- */
        #screen-teacher .card {
            max-width: 460px;
        }

        /* ---- STUDENT SUBMIT CARD ---- */
        #screen-student .card {
            max-width: 560px;
        }

        /* ---- FORM ELEMENTS ---- */
        .form-header {
            margin-bottom: 2rem;
        }

        .back-btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 0.8rem;
            color: var(--text-muted);
            background: none;
            border: none;
            cursor: pointer;
            padding: 0 0 1.4rem 0;
            font-family: inherit;
            font-weight: 500;
            transition: color 0.18s;
            letter-spacing: 0.02em;
        }

            .back-btn:hover {
                color: var(--blue-500);
            }

            .back-btn svg {
                transition: transform 0.18s;
            }

            .back-btn:hover svg {
                transform: translateX(-3px);
            }

        .form-title {
            font-family: 'DM Sans', sans-serif;
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--text-dark);
            letter-spacing: -0.5px;
        }

        .form-subtitle {
            font-size: 0.83rem;
            color: var(--text-muted);
            margin-top: 4px;
        }

        .field {
            margin-bottom: 1.1rem;
        }

            .field label {
                display: block;
                font-size: 0.76rem;
                font-weight: 600;
                color: var(--text-mid);
                margin-bottom: 6px;
                letter-spacing: 0.06em;
                text-transform: uppercase;
            }

            .field input[type="text"],
            .field input[type="password"],
            .field input[type="email"] {
                width: 100%;
                padding: 0.85rem 1.1rem;
                border: 1.5px solid #dde3f5;
                border-radius: 10px;
                font-size: 0.93rem;
                font-family: inherit;
                color: var(--text-dark);
                background: #f7f9ff;
                transition: all 0.2s ease;
                outline: none;
            }

            .field input:focus {
                border-color: var(--blue-500);
                background: #fff;
                box-shadow: 0 0 0 4px rgba(58,110,245,0.12);
            }

            .field input::placeholder {
                color: #b0bad8;
            }

        /* Two-column grid for student form */
        .field-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1rem;
        }

        /* File Upload */
        .file-upload-area {
            border: 2px dashed #c5d0f0;
            border-radius: 12px;
            padding: 1.6rem 1.2rem;
            text-align: center;
            cursor: pointer;
            transition: all 0.22s ease;
            background: #f7f9ff;
            position: relative;
        }

            .file-upload-area:hover,
            .file-upload-area.drag-over {
                border-color: var(--blue-500);
                background: rgba(58,110,245,0.05);
            }

            .file-upload-area input[type="file"] {
                position: absolute;
                inset: 0;
                opacity: 0;
                cursor: pointer;
                width: 100%;
                height: 100%;
            }

        .file-upload-icon {
            font-size: 2rem;
            margin-bottom: 0.5rem;
        }

        .file-upload-text {
            font-size: 0.85rem;
            color: var(--text-muted);
            line-height: 1.5;
        }

            .file-upload-text strong {
                color: var(--blue-500);
            }

        .file-name-display {
            margin-top: 0.6rem;
            font-size: 0.8rem;
            color: var(--blue-700);
            font-family: 'DM Sans', sans-serif;
            font-weight: 700;
            display: none;
        }



        .lang-pill {
            padding: 0.3rem 0.9rem;
            border-radius: 99px;
            border: 1.5px solid #dde3f5;
            background: #f7f9ff;
            font-size: 0.75rem;
            font-family: 'DM Sans', sans-serif;
            font-weight: 700;
            color: var(--text-mid);
            cursor: pointer;
            transition: all 0.18s;
        }

            .lang-pill:hover,
            .lang-pill.selected {
                background: var(--blue-500);
                border-color: var(--blue-500);
                color: #fff;
            }

        /* Action buttons */
        .btn-row {
            display: flex;
            gap: 0.8rem;
            margin-top: 1.6rem;
        }

        .btn-primary {
            flex: 1;
            padding: 0.9rem 1.5rem;
            background: linear-gradient(135deg, var(--blue-700), var(--blue-500));
            color: #fff;
            border: none;
            border-radius: 10px;
            font-size: 0.9rem;
            font-weight: 700;
            font-family: inherit;
            cursor: pointer;
            letter-spacing: 0.04em;
            transition: all 0.22s ease;
            box-shadow: 0 6px 20px rgba(26,59,193,0.35);
        }

            .btn-primary:hover {
                transform: translateY(-2px);
                box-shadow: 0 10px 30px rgba(26,59,193,0.45);
            }

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

        .btn-secondary {
            padding: 0.9rem 1.4rem;
            background: transparent;
            color: var(--text-muted);
            border: 1.5px solid #dde3f5;
            border-radius: 10px;
            font-size: 0.9rem;
            font-weight: 600;
            font-family: inherit;
            cursor: pointer;
            transition: all 0.22s ease;
        }

            .btn-secondary:hover {
                border-color: var(--blue-400);
                color: var(--blue-500);
                background: rgba(58,110,245,0.05);
            }

        /* Toast notification */
        .toast {
            position: fixed;
            bottom: 2rem;
            left: 50%;
            transform: translateX(-50%) translateY(100px);
            background: var(--text-dark);
            color: #fff;
            padding: 0.8rem 1.6rem;
            border-radius: 12px;
            font-size: 0.88rem;
            font-weight: 500;
            box-shadow: 0 8px 30px rgba(0,0,0,0.3);
            z-index: 999;
            transition: transform 0.4s cubic-bezier(0.23,1,0.32,1);
            display: flex;
            align-items: center;
            gap: 8px;
        }

            .toast.show {
                transform: translateX(-50%) translateY(0);
            }

            .toast.success {
                background: linear-gradient(135deg, #0d7a5f, #00c896);
            }

            .toast.error {
                background: linear-gradient(135deg, #9b1c3a, #ff4d6d);
            }

        /* Badge */
        .badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 0.25rem 0.75rem;
            border-radius: 99px;
            font-size: 0.7rem;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            background: var(--accent-dim);
            color: #006d58;
            margin-bottom: 1rem;
        }

        .badge-dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: var(--accent);
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0%, 100% {
                opacity: 1;
                transform: scale(1);
            }

            50% {
                opacity: 0.6;
                transform: scale(0.8);
            }
        }

        /* Divider */
        .divider {
            height: 1px;

            margin: 1.6rem 0;
        }

        /* Info chips on student form */
        .info-strip {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.7rem 1rem;
            background: linear-gradient(90deg, rgba(0,245,196,0.08), rgba(58,110,245,0.08));
            border-radius: 10px;
            border-left: 3px solid var(--accent);
            font-size: 0.78rem;
            color: var(--text-mid);
            margin-bottom: 1.4rem;
        }

        @media (max-width: 500px) {
            .card {
                padding: 2rem 1.4rem;
            }

            .field-row {
                grid-template-columns: 1fr;
            }
        }


*{
  box-sizing:border-box;
}

body{
  margin:0;
  font-family: 'DM Sans', sans-serif;
  background:var(--bg);
  color:var(--text);
}

h1,h2,h3,h4{
  margin:0 0 14px;
}


/* =============================
   NAVBAR
============================= */
@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=DM+Sans:wght@300;400;500;600;700&display=swap');

.topbar, nav{
  /*background: linear-gradient(90deg, #0d1b6e 0%, #1a3bc1 60%, #1f2d3d 100%);*/
    color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    height: 64px;
    box-shadow: 0 2px 12px rgba(13,27,110,0.45);
    position: relative;
    z-index: 100;
}

nav::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--blue-700), var(--accent));
}

.nav-center {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.75);
  font-weight: 500;
  letter-spacing: 0.02em;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  cursor: pointer;
}

.nav-brand-icon {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, var(--blue-700), var(--accent));
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 0.75rem;
  color: #fff;
  letter-spacing: -1px;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(58,110,245,0.45);
}

.nav-brand-name {
  font-family: 'DM Sans', sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-dark);
  letter-spacing: -0.5px;
}

.nav-brand-name span {
  color: var(--blue-500);
}
.brand{
  font-family: 'DM Sans', sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.5px;
}


button{
  background:var(--primary);
  color:white;
  border:none;
  padding:8px 16px;
  border-radius:8px;
  cursor:pointer;
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  font-size: 0.85rem;
  transition:.15s;
}

button:hover{
  transform:translateY(-1px);
  opacity:.9;
}


/* =============================
   LAYOUT
============================= */

.layout{
  display:flex;
  height:calc(100vh - 64px);
}

.main{
  flex:1;
  padding:30px;
  overflow:auto;
  background: #f7f9ff;
}


/* =============================
   SIDEBAR
============================= */

.sidebar{
  width:200px;
  background: linear-gradient(180deg, #0d1b6e 0%, #1a2a4a 100%);
  padding: 20px 0 18px;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}
.sidebar::before {
  content: '';
  display: block;
  height: 3px;
  margin: 0 16px 16px;
  background: linear-gradient(90deg, var(--blue-500), var(--accent));
  border-radius: 2px;
}

.sidebar a{
  display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 20px;
    color: rgba(255,255,255,0.72);
    text-decoration: none;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.88rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    transition: all 0.18s ease;
    border-left: 3px solid transparent;
    margin: 2px 0;
}

.sidebar a .s-icon {
  font-size: 1rem;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}

.sidebar a:hover {
  background: rgba(255,255,255,0.08);
  color: #fff;
  border-left-color: rgba(0,245,196,0.5);
}
.sidebar a.active {
  background: rgba(0,245,196,0.12);
  color: var(--accent);
  border-left-color: var(--accent);
  font-weight: 600;
}


/* =============================
   CARDS
============================= */

.card{
  background:var(--card);
  padding:26px;
  border-radius:12px;
  box-shadow:0 8px 20px rgba(0,0,0,.08);
}

.center{
  display:flex;
  justify-content:center;
  align-items:center;
  height:100vh;
}


/* =============================
   LOGIN PAGE
============================= */

body.center{
  background:linear-gradient(135deg,#2f6df6,#5a8bff);
}

.center .card{
  width:380px;
  backdrop-filter: blur(8px);
  box-shadow:0 20px 40px rgba(0,0,0,.25);
}

.center input{
  margin-bottom:12px;
}


/* =============================
   DASHBOARD GRID
============================= */

.grid{
  display:grid;
  grid-template-columns: repeat(auto-fill,minmax(260px,1fr));

  gap:20px;
}

.card-bubble{
  background:white;
  padding:20px;
  border-radius:14px;
  box-shadow:0 6px 18px rgba(0,0,0,.08);
  cursor:pointer;
  transition:.2s;
}

.card-bubble:hover{
  transform:translateY(-4px);
  box-shadow:0 10px 24px rgba(0,0,0,.12);
}

.card-title{
  font-weight:600;
  font-size:18px;
}

.meta{
  color:#666;
  font-size:14px;
}

.add{
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--primary);
  color:white;
  font-size:20px;
}


/* =============================
   TABLES
============================= */

table{
  width:100%;
  border-collapse:collapse;
  background:white;
  border-radius:12px;
  overflow:hidden;
}

th{
  background:#edf2f7;
  padding:12px;
  text-align:left;
  font-weight:600;
}

td{
  padding:12px;
}

tr:nth-child(even){
  background:#fafafa;
}

tr:hover{
  background:#eef2ff;
}


/* =============================
   INPUTS
============================= */

input{
  width:100%;
  padding:10px;
  border-radius:6px;
  border:1px solid #ddd;
}

.search{
  width:320px;
  margin-bottom:14px;
}


/* =============================
   CODE VIEW
============================= */

.code {
    max-height: 90vh;
    overflow-y: auto;
    overflow-x: auto;
    background: #f5f5f5;
    padding: 0;
    border-radius: 8px;
    font-family: 'Fira Code', monospace;
    font-size: 14px;
    line-height: 1.3em;
    display: flex;
    flex-direction: column;
}

.line {
    display: flex;
    white-space: pre;
    padding: 0 8px;
}

.ln {
    width: 40px;
    text-align: right;
    margin-right: 12px;
    color: #555;
    flex-shrink: 0;
    user-select: none;
}

.line span.code-text {
    flex: 1;
    color: #000;
}

.highlight {
    border-radius: 3px;
}


/* =============================
   REPORT PAGE
============================= */

.report-layout{
  display:flex;
  height:calc(100vh - 60px);
}

.matches-panel{
  width:220px;
  background:white;
  border-right:1px solid #ddd;
  padding:16px;
}

.matches-panel li{
  padding:6px;
  border-radius:6px;
  cursor:pointer;
}

.matches-panel li:hover{
  background:#eef2ff;
}

.progress-bar{
  height:8px;
  background:#ddd;
  border-radius:6px;
  overflow:hidden;
  margin-bottom:10px;
}

#progressFill{
  height:100%;
  background:#e53935;
  width:0%;
  transition:width .6s;
}

.gauge{
  width:60px;
  height:60px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  color:white;
}


/* =============================
   SPINNER
============================= */

.spinner{
  border:4px solid #eee;
  border-top:4px solid var(--primary);
  border-radius:50%;
  width:40px;
  height:40px;
  animation:spin 1s linear infinite;
  margin:30px auto;
}

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

/* =============================
   MODAL (create assignment)
============================= */

.modal-overlay {
  opacity: 0;
  pointer-events: none;
  display: flex;
}

.modal-overlay.active {
  opacity: 1;
  pointer-events: all;
}

.modal-card {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  width: 90%;
  max-width: 420px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  text-align: center;
  animation: cardIn 0.35s ease;
}

.modal-card .btn-row {
  display: flex;
  justify-content: space-around;
  margin-top: 15px;
}

.btn-success {
  background: #28a745;
  color: white;
}

.btn-danger {
  background: #dc3545;
  color: white;
}

/* =============================
   MODAL (delete, rename assignment)
============================= */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;

  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.modal-overlay.show {
  opacity: 1;
  pointer-events: all;
}

.modal-card {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  width: 90%;
  max-width: 420px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  text-align: center;
  animation: cardIn 0.35s ease;
}

.modal-card .btn-row {
  display: flex;
  justify-content: space-around;
  margin-top: 15px;
}

/* =============================
   Assignment Stats Bar
============================= */
.assignment-stats {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.assign-info {
  font-family: 'DM Sans', sans-serif;
  font-size: 1.05rem;
  line-height: 1.6;
}

.assign-info strong {
  color: var(--blue-500);
}

.clickable-code {
  cursor: pointer;
  color: var(--blue-700);
  text-decoration: underline;
}

.clickable-code:hover {
  opacity: 0.8;
}

.submission-info canvas {
  display: block;
  width: 120px;
  height: 120px;
}

/*disable button (assignmnets)*/
button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}