:root{
  --retro-blue: #3399FF;   /* primary accent */
  --pixel-gold: #FFCC33;   /* secondary accent */
  --screen-green: #33CC33; /* success/gamification */
  --dark-navy: #003366;    /* base/nav */

  --bg: #f7f9ff;
  --panel: #ffffff;
  --text: #0f1537;
  --muted: #5b6699;
  --accent: var(--retro-blue);
  --accent-2: var(--pixel-gold);
  --success: var(--screen-green);
  --danger: #ff6b6b;
  --border: #e5e9f5;
  --shadow: 0 12px 32px rgba(15,21,55,0.08);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:
    radial-gradient(900px 540px at -10% -10%, rgba(89,182,255,0.18), transparent 60%),
    radial-gradient(800px 480px at 110% 10%, rgba(93,216,160,0.16), transparent 60%),
    var(--bg);
}

.container{max-width:1200px;margin:0 auto;padding:24px}
.container--wide{max-width:1200px}

.card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:14px;
  padding:20px;
  box-shadow:var(--shadow);
}

.title{font-size:28px;letter-spacing:.5px;margin:16px 0 8px}
.subtitle{color:var(--muted);margin:0 0 24px}
.arcade{font-family:'Press Start 2P', cursive}

.class-container{display:flex;gap:16px;flex-wrap:wrap}
.class-container > :first-child{flex:0 0 70%}
.class-container > :last-child{flex:1 1 0}
/* have the class edit box stack vertically. be clean. */
.class-edit-box{display:flex;gap:16px;flex-wrap:wrap;width:100%}

.col{flex:1 1 300px}

label{display:block;font-weight:600;margin:8px 0 6px}
input,select{
  width:100%;
  padding:12px 14px;
  border-radius:10px;
  border:1px solid var(--border);
  background:#ffffff;
  color:var(--text);
  outline:none;
}
input:focus{border-color:var(--accent)}

.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 14px;
  border:none;border-radius:10px;cursor:pointer;
  color:#ffffff;font-weight:700;letter-spacing:.3px;
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  transition:transform .05s ease, filter .2s ease;
}
.btn:hover{filter:brightness(1.05)}
.btn:active{transform:translateY(1px)}
.btn-secondary{
  background:#ffffff;color:var(--dark-navy);border:1px solid var(--border);
}
.btn-danger{background:linear-gradient(135deg, var(--danger), #ff8b8b);color:#1d0000}

.list{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.list-item{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:12px 14px;border:1px solid var(--border);border-radius:10px;background:#ffffff;
}
#studentList > .list-item {
  display:flex;justify-content:start;align-items:center;gap:12px;
  padding:12px 14px;border:1px solid var(--border);border-radius:10px;background:#ffffff;
}
.student-left{flex:0 0 180px;min-width:0}
.student-name-line{display:block;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.badge{padding:6px 10px;border-radius:8px;background:#fff7e0;border:1px solid var(--border);color:#7a5b00;font-weight:700;white-space:nowrap}

.header{
  display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px;
  background: var(--dark-navy);
  padding: 12px 16px;
  border-radius: 14px;
  box-shadow: var(--shadow);
}
.header-arcade{ padding:18px 22px; border-bottom:4px solid var(--pixel-gold) }
.header-arcade .nav a{ font-family:'Press Start 2P', cursive; font-size:12px }
.brand{display:flex;align-items:center;gap:10px;color:#fff}
.brand a{color:inherit;text-decoration:none}
.brand a.brand-link{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.brand a:hover{text-decoration:none}
.logo{
  width:36px;height:36px;border-radius:8px;
  background: conic-gradient(from 210deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 20px rgba(51,153,255,.35);
}
.brand h1{font-size:20px;margin:0;color:#fff}
.logo-img{height:36px;width:auto;image-rendering:pixelated}
.nav-logo{height:56px;width:auto;image-rendering:pixelated}
.app-title{font-family:'Press Start 2P', cursive; font-size:14px; letter-spacing:1px}
.nav a{color:#e6f0ff;text-decoration:none;margin-left:12px}
.nav a:hover{color:#ffffff}

.grid{display:grid;gap:16px}
@media(min-width:800px){.grid{grid-template-columns:1.1fr .9fr}}

.helper{color:var(--muted);font-size:14px}
.code{font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;letter-spacing:.3px}

.empty{padding:24px;border:1px dashed var(--border);border-radius:12px;color:var(--muted);text-align:center;background:#ffffff}

/* Homepage helpers */

/* make a .hero-row that is two columns side by side of equal lenght using a flex */
.hero-row{display:flex;gap:24px;flex-wrap:wrap;margin-top:32px}
@media(min-width:740px){.hero-row{flex-wrap:nowrap}}

.hero{padding:40px 24px}
.hero .title{font-size:36px;margin-top:0}
.hero .subtitle{max-width:720px;margin:8px 0 0}
.btn{text-decoration:none}
.btn:visited{color:#04121a}

/* Expanded hero */
.hero-xl{min-height:64vh;display:flex;align-items:center}
.hero-inner{width:100%}
.hero-logo{max-width:420px;width:100%;height:auto;image-rendering:pixelated;display:block;margin:0 auto}

/* Feature cards - arcade style */
.arcade-cards{display:grid;gap:16px;margin-top:16px}
@media(min-width:740px){.arcade-cards{grid-template-columns:repeat(3, minmax(0,1fr))}}
.arcade-card{
  background:#ffffff;
  border:4px solid var(--pixel-gold);
  border-radius:12px;
  box-shadow: 0 6px 0 #E6B800, 0 10px 20px rgba(0,0,0,.08);
  padding:18px;
  text-align:center;
}
.arcade-title{font-family:'Press Start 2P', cursive; font-size:12px; margin:8px 0 6px}
.arcade-helper{color:var(--muted); font-size:13px}
.arcade-chip{display:inline-block; padding:6px 10px; background:#fff7e0; border:2px solid var(--pixel-gold); border-radius:8px; font-family:'Press Start 2P', cursive; font-size:10px}

/* Arcade buttons (homepage) */
.btn-arcade{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:'Press Start 2P', cursive;
  font-size:12px; text-transform:uppercase; letter-spacing:.5px;
  padding:14px 18px; border-radius:10px; text-decoration:none;
  color:#ffffff; background: var(--retro-blue);
  border:3px solid var(--dark-navy);
  box-shadow: 0 4px 0 #1C6DD0, 0 8px 16px rgba(0,0,0,.15);
  transition: transform .05s ease, filter .15s ease, box-shadow .05s ease;
}
.btn-arcade:hover{ filter:brightness(1.05) }
.btn-arcade:active{ transform:translateY(2px); box-shadow: 0 2px 0 #1C6DD0, 0 4px 10px rgba(0,0,0,.15) }

.btn-arcade--secondary{
  background:#ffffff; color: var(--dark-navy);
  border:3px solid var(--pixel-gold);
  box-shadow: 0 4px 0 #E6B800, 0 8px 16px rgba(0,0,0,.08);
}
.btn-arcade--secondary:hover{ filter:brightness(1.02) }
.btn-arcade--secondary:active{ transform:translateY(2px); box-shadow: 0 2px 0 #E6B800, 0 4px 10px rgba(0,0,0,.08) }


/* Minimal icon button for inline actions */
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:1px solid var(--border);border-radius:8px;background:#fff;color:var(--muted);cursor:pointer}
.icon-btn:hover{border-color:var(--accent);color:var(--dark-navy)}
.icon-btn svg{width:16px;height:16px}