:root {
  --bg: #090b0f;
  --panel: #11151c;
  --panel-2: #171c25;
  --panel-3: #202733;
  --yellow: #f1a60c;
  --yellow-2: #ffc531;
  --navy: #1c2e44;
  --navy-2: #304254;
  --text: #f7f5ef;
  --muted: #a7b0bd;
  --muted-2: #77808d;
  --border: rgba(255,255,255,.08);
  --success: #53d18a;
  --danger: #ff6b6b;
  --warning: #ffca55;
  --radius: 22px;
  --radius-sm: 14px;
  --shadow: 0 20px 60px rgba(0,0,0,.35);
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background:
    radial-gradient(circle at 90% -10%, rgba(241,166,12,.15), transparent 32%),
    linear-gradient(160deg, #080a0e 0%, #0c1118 45%, #0b0f15 100%);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
img { max-width: 100%; display: block; }

.app-shell { min-height: 100vh; }

/* LOGIN */
.login-screen {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  overflow: hidden;
}
.login-brand {
  position: relative;
  padding: 52px clamp(30px, 6vw, 90px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100vh;
  background:
    linear-gradient(rgba(9,11,15,.70), rgba(9,11,15,.90)),
    url('/assets/poster-reference.png') center/cover no-repeat;
}
.login-brand::after {
  content: "";
  position: absolute;
  width: 320px;
  height: 520px;
  background: var(--yellow);
  right: -160px;
  bottom: -120px;
  transform: rotate(17deg);
  opacity: .9;
}
.brand-lockup { position: relative; z-index: 1; max-width: 620px; }
.mc-logo-wrap {
  width: min(470px, 76vw);
  padding: 18px 22px;
  background: rgba(0,0,0,.34);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 24px;
  backdrop-filter: blur(12px);
}
.mc-logo { width: 100%; filter: drop-shadow(0 12px 18px rgba(0,0,0,.35)); }
.login-kicker {
  margin: 32px 0 10px;
  color: var(--yellow-2);
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: 12px;
}
.login-title {
  margin: 0;
  font-family: Montserrat, Inter, sans-serif;
  font-size: clamp(34px, 4.7vw, 74px);
  line-height: .98;
  max-width: 760px;
  letter-spacing: -.04em;
}
.login-sub { color: #d9dde3; max-width: 620px; line-height: 1.6; font-size: 16px; }
.cpo-signature { position: relative; z-index: 1; display: flex; align-items: center; gap: 14px; }
.cpo-signature img { width: 64px; max-height: 64px; object-fit: contain; }
.cpo-signature span { color: rgba(255,255,255,.72); font-size: 12px; letter-spacing: .05em; text-transform: uppercase; }

.login-panel {
  background: #0d1117;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 42px;
  position: relative;
}
.login-panel::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 7px;
  height: 100%;
  background: var(--yellow);
}
.login-card { width: min(450px, 100%); }
.login-card h2 { font-size: 32px; margin: 0 0 8px; font-family: Montserrat, Inter, sans-serif; }
.login-card p { margin: 0 0 28px; color: var(--muted); line-height: 1.55; }
.form-group { display: grid; gap: 8px; margin-bottom: 16px; }
.form-group label { font-size: 12px; color: #dce0e6; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.field, select.field, textarea.field {
  width: 100%;
  border: 1px solid var(--border);
  color: var(--text);
  background: #131820;
  border-radius: 14px;
  padding: 14px 15px;
  outline: none;
}
.field:focus { border-color: rgba(241,166,12,.8); box-shadow: 0 0 0 3px rgba(241,166,12,.12); }
.primary-btn, .secondary-btn, .ghost-btn, .danger-btn {
  border: 0;
  border-radius: 14px;
  padding: 13px 16px;
  font-weight: 800;
  transition: .2s ease;
}
.primary-btn { background: var(--yellow); color: #15110a; }
.primary-btn:hover { transform: translateY(-1px); background: var(--yellow-2); }
.secondary-btn { background: #202733; color: var(--text); border: 1px solid var(--border); }
.ghost-btn { background: transparent; color: var(--text); border: 1px solid var(--border); }
.danger-btn { background: rgba(255,107,107,.12); color: #ff9c9c; border: 1px solid rgba(255,107,107,.24); }
.full { width: 100%; }
.demo-area { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--border); }
.demo-area small { color: var(--muted-2); display: block; margin-bottom: 12px; }
.demo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.demo-btn { border: 1px solid var(--border); background: #151a22; color: var(--text); border-radius: 12px; padding: 11px 7px; font-size: 12px; font-weight: 700; }
.demo-btn:hover { border-color: rgba(241,166,12,.5); }

/* APP LAYOUT */
.dashboard-layout { min-height: 100vh; display: grid; grid-template-columns: 260px 1fr; }
.sidebar {
  position: sticky; top: 0; height: 100vh;
  border-right: 1px solid var(--border);
  background: rgba(11,14,19,.94);
  backdrop-filter: blur(16px);
  padding: 24px 18px;
  display: flex; flex-direction: column;
  z-index: 20;
}
.sidebar-brand { display: flex; align-items: center; gap: 11px; padding: 4px 6px 24px; }
.sidebar-logo-box { width: 54px; height: 54px; border-radius: 16px; background: var(--yellow); display: grid; place-items: center; overflow: hidden; }
.sidebar-logo-box img { width: 76%; filter: brightness(0); }
.sidebar-brand strong { font-family: Montserrat, Inter, sans-serif; font-size: 14px; line-height: 1.1; }
.sidebar-brand span { display: block; color: var(--muted); font-size: 10px; margin-top: 3px; }
.nav-list { display: grid; gap: 7px; }
.nav-btn {
  display: flex; align-items: center; gap: 12px;
  border: 0; background: transparent; color: #c8ced6;
  padding: 12px 13px; border-radius: 13px; text-align: left; font-weight: 700;
}
.nav-btn:hover { background: rgba(255,255,255,.04); color: #fff; }
.nav-btn.active { background: var(--yellow); color: #16120a; }
.nav-icon { width: 21px; text-align: center; font-size: 16px; }
.sidebar-foot { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--border); }
.user-chip { display: flex; gap: 10px; align-items: center; padding: 8px; }
.avatar { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: #27303c; color: var(--yellow); font-weight: 900; }
.user-chip strong { font-size: 13px; display: block; }
.user-chip span { color: var(--muted); font-size: 11px; }
.logout-btn { width: 100%; margin-top: 10px; }

.main { min-width: 0; }
.topbar {
  height: 78px; position: sticky; top: 0; z-index: 15;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 clamp(18px, 3vw, 38px);
  border-bottom: 1px solid var(--border);
  background: rgba(9,11,15,.84); backdrop-filter: blur(14px);
}
.topbar-title strong { font-size: 16px; }
.topbar-title span { display: block; color: var(--muted); font-size: 12px; margin-top: 4px; }
.topbar-right { display: flex; gap: 10px; align-items: center; }
.day-pill { background: rgba(241,166,12,.12); color: var(--yellow-2); border: 1px solid rgba(241,166,12,.25); padding: 9px 12px; border-radius: 999px; font-size: 12px; font-weight: 800; }
.content { padding: 30px clamp(18px, 3vw, 38px) 110px; max-width: 1500px; margin: 0 auto; }

.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 26px; }
.page-head h1 { margin: 0; font-size: clamp(28px, 3vw, 42px); font-family: Montserrat, Inter, sans-serif; letter-spacing: -.035em; }
.page-head p { margin: 8px 0 0; color: var(--muted); }
.page-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.hero-card {
  position: relative; overflow: hidden;
  border: 1px solid rgba(241,166,12,.18);
  background: linear-gradient(135deg, #151b24 0%, #1c2e44 68%, #213653 100%);
  border-radius: 28px;
  padding: clamp(24px, 4vw, 46px);
  box-shadow: var(--shadow);
}
.hero-card::after {
  content: ""; position: absolute; right: -95px; top: -120px; width: 300px; height: 430px;
  background: var(--yellow); transform: rotate(21deg); opacity: .97;
}
.hero-card::before {
  content: "MUSICAMPEGGIO"; position: absolute; right: 16px; bottom: -8px;
  font-family: Montserrat, Inter, sans-serif; font-weight: 900; font-size: clamp(46px, 8vw, 110px);
  color: rgba(255,255,255,.035); letter-spacing: -.05em; white-space: nowrap;
}
.hero-inner { position: relative; z-index: 2; max-width: 760px; }
.eyebrow { color: var(--yellow-2); font-size: 11px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.hero-card h2 { font-family: Montserrat, Inter, sans-serif; font-size: clamp(28px, 4vw, 54px); margin: 10px 0 10px; line-height: 1.03; letter-spacing: -.04em; }
.hero-card p { color: #d2d7de; max-width: 680px; line-height: 1.55; }
.next-event { margin-top: 28px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.time-block { font-size: 42px; font-weight: 900; line-height: 1; color: var(--yellow-2); }
.event-meta strong { display: block; font-size: 18px; }
.event-meta span { color: #d0d6df; font-size: 13px; display: block; margin-top: 4px; }
.countdown { margin-left: auto; background: rgba(0,0,0,.26); border: 1px solid rgba(255,255,255,.12); border-radius: 999px; padding: 10px 14px; font-weight: 800; font-size: 12px; }

.grid { display: grid; gap: 18px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.section-gap { margin-top: 24px; }
.card { background: rgba(17,21,28,.95); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; }
.card h3 { margin: 0 0 16px; font-size: 16px; }
.card-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.card-title-row h3 { margin: 0; }
.card-title-row a, .link-btn { color: var(--yellow-2); font-size: 12px; text-decoration: none; font-weight: 800; background: none; border: 0; padding: 0; }

.stat-card { background: linear-gradient(180deg, #151a22, #10141a); border: 1px solid var(--border); border-radius: 18px; padding: 18px; }
.stat-card .stat-label { color: var(--muted); font-size: 12px; }
.stat-card .stat-value { font-size: 30px; font-weight: 900; margin-top: 8px; font-family: Montserrat, Inter, sans-serif; }
.stat-card .stat-sub { font-size: 11px; color: var(--muted-2); margin-top: 6px; }

.timeline { display: grid; gap: 10px; }
.timeline-item { display: grid; grid-template-columns: 70px 1fr auto; gap: 12px; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--border); }
.timeline-item:last-child { border-bottom: 0; }
.timeline-time { font-size: 14px; font-weight: 900; color: var(--yellow-2); }
.timeline-main strong { display: block; font-size: 14px; }
.timeline-main span { display: block; color: var(--muted); font-size: 11px; margin-top: 4px; }
.badge { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 7px 9px; font-size: 10px; font-weight: 800; white-space: nowrap; }
.badge-yellow { background: rgba(241,166,12,.12); color: var(--yellow-2); border: 1px solid rgba(241,166,12,.2); }
.badge-green { background: rgba(83,209,138,.1); color: #75e9a8; border: 1px solid rgba(83,209,138,.2); }
.badge-blue { background: rgba(91,156,255,.1); color: #8cb9ff; border: 1px solid rgba(91,156,255,.2); }
.badge-red { background: rgba(255,107,107,.1); color: #ff9d9d; border: 1px solid rgba(255,107,107,.2); }

.progress-wrap { margin-top: 10px; }
.progress-track { height: 8px; background: #252c36; border-radius: 999px; overflow: hidden; }
.progress-bar { height: 100%; background: linear-gradient(90deg, var(--yellow), var(--yellow-2)); border-radius: inherit; }
.progress-meta { display: flex; justify-content: space-between; gap: 10px; margin-top: 8px; color: var(--muted); font-size: 11px; }

.notice { border-left: 4px solid var(--yellow); background: linear-gradient(90deg, rgba(241,166,12,.08), rgba(241,166,12,0)); padding: 14px 15px; border-radius: 0 12px 12px 0; margin-bottom: 10px; }
.notice strong { font-size: 13px; display: block; }
.notice span { color: var(--muted); font-size: 11px; line-height: 1.5; display: block; margin-top: 4px; }
.notice time { font-size: 10px; color: var(--muted-2); display: block; margin-top: 7px; }

.table-wrap { overflow-x: auto; border-radius: 16px; border: 1px solid var(--border); }
table { width: 100%; border-collapse: collapse; min-width: 760px; background: #11151c; }
th, td { padding: 13px 14px; border-bottom: 1px solid var(--border); text-align: left; font-size: 12px; }
th { color: var(--muted); background: #151a22; font-size: 10px; text-transform: uppercase; letter-spacing: .07em; }
tr:last-child td { border-bottom: 0; }

.person-row, .file-row, .song-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.person-row:last-child, .file-row:last-child, .song-row:last-child { border-bottom: 0; }
.person-main, .file-main, .song-main { min-width: 0; flex: 1; }
.person-main strong, .file-main strong, .song-main strong { display: block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.person-main span, .file-main span, .song-main span { color: var(--muted); font-size: 11px; display: block; margin-top: 3px; }
.file-icon { width: 38px; height: 38px; display: grid; place-items: center; background: rgba(241,166,12,.10); color: var(--yellow-2); border-radius: 11px; font-size: 17px; }

.planning-grid { display: grid; grid-template-columns: 78px repeat(var(--room-count, 3), minmax(180px, 1fr)); border: 1px solid var(--border); border-radius: 18px; overflow: auto; min-width: 760px; }
.plan-cell { min-height: 70px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 10px; background: #11151c; }
.plan-cell.head { min-height: auto; background: #171c25; color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.plan-cell.time { color: var(--yellow-2); font-weight: 900; font-size: 12px; background: #0f1319; }
.plan-event { background: rgba(241,166,12,.10); border: 1px solid rgba(241,166,12,.24); border-radius: 10px; padding: 8px; font-size: 11px; }
.plan-event strong { display: block; margin-bottom: 3px; }
.plan-event span { color: var(--muted); font-size: 10px; }

.tabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 20px; }
.tab-btn { border: 1px solid var(--border); background: #131820; color: #d3d8df; padding: 10px 12px; border-radius: 999px; white-space: nowrap; font-weight: 700; font-size: 12px; }
.tab-btn.active { background: var(--yellow); color: #15110a; border-color: var(--yellow); }

.empty { color: var(--muted); padding: 26px 0; text-align: center; }
.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.toolbar .field { width: auto; min-width: 180px; }

.modal-backdrop { position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,.66); display: grid; place-items: center; padding: 20px; backdrop-filter: blur(8px); }
.modal { width: min(650px, 100%); max-height: 90vh; overflow-y: auto; background: #11161e; border: 1px solid var(--border); border-radius: 24px; padding: 24px; box-shadow: var(--shadow); }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.modal-head h3 { margin: 0; font-size: 20px; }
.close-btn { width: 38px; height: 38px; border-radius: 12px; border: 1px solid var(--border); background: #171c25; color: #fff; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.form-grid .wide { grid-column: 1 / -1; }
.form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }

.toast { position: fixed; z-index: 120; right: 24px; bottom: 24px; background: #161c24; border: 1px solid var(--border); border-left: 4px solid var(--yellow); color: #fff; padding: 13px 16px; border-radius: 14px; box-shadow: var(--shadow); font-size: 12px; animation: slidein .22s ease; }
@keyframes slidein { from { transform: translateY(10px); opacity: 0; } }

.mobile-nav { display: none; }
.mobile-top-brand { display: none; }

@media (max-width: 1100px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 860px) {
  .login-screen { grid-template-columns: 1fr; }
  .login-brand { min-height: 44vh; padding: 30px 24px; }
  .login-brand::after { width: 180px; height: 280px; right: -100px; bottom: -120px; }
  .login-sub { display: none; }
  .cpo-signature { margin-top: 34px; }
  .login-panel { padding: 34px 22px 48px; }
  .login-panel::before { width: 100%; height: 5px; }
  .dashboard-layout { display: block; }
  .sidebar { display: none; }
  .topbar { height: 66px; padding: 0 16px; }
  .topbar-title { display: none; }
  .mobile-top-brand { display: flex; align-items: center; gap: 9px; }
  .mobile-top-brand .mini-logo { width: 37px; height: 37px; border-radius: 10px; background: var(--yellow); display: grid; place-items: center; overflow: hidden; }
  .mobile-top-brand img { width: 75%; filter: brightness(0); }
  .mobile-top-brand strong { font-size: 12px; font-family: Montserrat, Inter, sans-serif; }
  .content { padding: 22px 16px 94px; }
  .mobile-nav {
    display: grid; grid-template-columns: repeat(5, 1fr);
    position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 50;
    background: rgba(17,21,28,.94); border: 1px solid var(--border); border-radius: 18px;
    padding: 7px; backdrop-filter: blur(18px); box-shadow: 0 16px 50px rgba(0,0,0,.5);
  }
  .mobile-nav button { background: transparent; border: 0; color: var(--muted); display: grid; place-items: center; gap: 3px; padding: 7px 3px; border-radius: 12px; font-size: 9px; font-weight: 700; }
  .mobile-nav button span:first-child { font-size: 16px; }
  .mobile-nav button.active { background: var(--yellow); color: #15110a; }
  .page-head { align-items: flex-start; flex-direction: column; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .hero-card::after { width: 190px; height: 300px; right: -125px; top: -90px; }
  .countdown { margin-left: 0; }
}

@media (max-width: 560px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
  .stat-card { padding: 14px; }
  .stat-card .stat-value { font-size: 24px; }
  .hero-card { border-radius: 22px; padding: 22px; }
  .timeline-item { grid-template-columns: 55px 1fr; }
  .timeline-item > .badge { grid-column: 2; width: fit-content; }
  .demo-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .wide { grid-column: auto; }
}

/* ===== V0.2 — MOBILE-FIRST, REGISTRATION, MESSAGING, VECTOR LANGUAGE ===== */
.vicon { flex: 0 0 auto; }
.body-muted { color: var(--muted); line-height: 1.65; }
.muted-inline { color: var(--muted); font-size: 11px; }
.small-btn { padding: 10px 13px; }
.optional { color: var(--muted-2); font-weight: 500; text-transform: none; letter-spacing: 0; }
.field-help { color: var(--muted-2); font-size: 11px; margin-top: 4px; }
.modal-note { color: var(--muted); font-size: 11px; line-height: 1.65; }
.card-symbol { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; background: rgba(241,166,12,.12); color: var(--yellow-2); border: 1px solid rgba(241,166,12,.2); }

/* richer login composition */
.auth-screen .login-brand { isolation: isolate; overflow: hidden; }
.auth-screen .login-brand::before {
  content:""; position:absolute; inset:0; z-index:0;
  background: linear-gradient(120deg, rgba(5,7,11,.28), rgba(9,11,15,.72) 52%, rgba(9,11,15,.92));
}
.auth-vector { position: absolute; pointer-events: none; z-index: 0; }
.auth-vector-one { width: min(820px, 80vw); left: -80px; bottom: 13%; opacity: .8; }
.auth-vector-two { width: 380px; right: -105px; top: 15%; opacity: .42; transform: rotate(11deg); }
.auth-mini-icon { width: 50px; height: 50px; border-radius: 17px; display: grid; place-items: center; color: #16120a; background: var(--yellow); box-shadow: 0 12px 30px rgba(241,166,12,.2); margin-bottom: 20px; }
.registration-link { width: 100%; border: 1px solid rgba(241,166,12,.26); background: rgba(241,166,12,.06); color: var(--yellow-2); border-radius: 14px; padding: 13px 14px; display: flex; align-items: center; justify-content: center; gap: 9px; font-weight: 800; margin-top: 12px; }
.registration-link:hover { background: rgba(241,166,12,.11); }

/* REGISTRATION FLOW */
.registration-screen { min-height: 100vh; background: radial-gradient(circle at 12% 15%, rgba(241,166,12,.10), transparent 28%), linear-gradient(160deg,#080a0e,#0c1118 55%,#0a0d12); }
.registration-top { height: 82px; display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(18px,4vw,54px); border-bottom: 1px solid var(--border); background: rgba(9,11,15,.78); backdrop-filter: blur(18px); position: sticky; top: 0; z-index: 15; }
.registration-brand { display:flex; align-items:center; gap:11px; }
.registration-brand .sidebar-logo-box { width:46px; height:46px; border-radius:14px; }
.registration-brand strong { display:block; font-family:Montserrat,Inter,sans-serif; font-size:13px; letter-spacing:.02em; }
.registration-brand span { display:block; color:var(--muted); font-size:10px; margin-top:2px; }
.registration-main { min-height: calc(100vh - 82px); display:grid; grid-template-columns:minmax(0,760px) 300px; align-items:center; justify-content:center; gap:28px; padding:40px clamp(18px,4vw,48px); position:relative; overflow:hidden; }
.registration-deco { position:absolute; width:520px; right:-180px; bottom:-180px; opacity:.22; pointer-events:none; }
.registration-card { position:relative; z-index:2; width:100%; background:rgba(16,20,27,.94); border:1px solid rgba(255,255,255,.09); border-top:3px solid var(--yellow); border-radius:28px; padding:clamp(22px,4vw,46px); box-shadow:var(--shadow); backdrop-filter:blur(18px); }
.registration-card h1 { margin:7px 0 8px; font-family:Montserrat,Inter,sans-serif; font-size:clamp(30px,5vw,48px); line-height:1; letter-spacing:-.045em; }
.reg-intro { color:var(--muted); line-height:1.6; max-width:640px; margin:0 0 26px; }
.reg-step-label { color:var(--yellow-2); font-size:10px; font-weight:900; letter-spacing:.16em; margin-top:24px; }
.reg-progress { display:grid; grid-template-columns:repeat(4,1fr); gap:0; align-items:center; }
.reg-progress-item { display:flex; align-items:center; }
.reg-progress-item span { width:31px; height:31px; border-radius:50%; display:grid; place-items:center; border:1px solid var(--border); background:#171c25; color:var(--muted); font-size:11px; font-weight:900; position:relative; z-index:2; }
.reg-progress-item i { height:2px; flex:1; background:#262d37; }
.reg-progress-item:last-child i { display:none; }
.reg-progress-item.active span { background:var(--yellow); border-color:var(--yellow); color:#15110a; }
.reg-progress-item.active i { background:linear-gradient(90deg,var(--yellow),rgba(241,166,12,.25)); }
.reg-form { margin-top:18px; }
.reg-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:26px; }
.reg-actions .primary-btn, .reg-actions .secondary-btn { display:flex; align-items:center; gap:8px; }
.assignment-card { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:14px; }
.assignment-visual, .teacher-chip { border:1px solid var(--border); border-radius:20px; padding:17px; background:linear-gradient(145deg,#171d26,#11161d); display:flex; align-items:center; gap:13px; min-height:112px; }
.assignment-note { width:54px; height:54px; border-radius:18px; display:grid; place-items:center; background:var(--yellow); color:#15110a; transform:rotate(-4deg); box-shadow:0 12px 24px rgba(241,166,12,.16); }
.assignment-visual span, .teacher-chip span { display:block; color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.08em; }
.assignment-visual strong, .teacher-chip strong { display:block; margin-top:5px; font-size:15px; }
.assignment-visual small { color:var(--yellow-2); display:block; margin-top:5px; font-size:11px; }
.micro-note { color:var(--muted-2); font-size:11px; line-height:1.55; margin-top:13px; }
.password-tip, .reg-confirm, .info-banner, .privacy-note { display:flex; align-items:flex-start; gap:10px; border-radius:15px; padding:13px 14px; font-size:11px; line-height:1.55; }
.password-tip { color:#cbd2dc; background:rgba(48,66,84,.2); border:1px solid rgba(107,135,164,.18); margin-top:12px; }
.reg-confirm { background:rgba(83,209,138,.08); border:1px solid rgba(83,209,138,.18); color:#bcebd1; margin-top:16px; }
.summary-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.summary-item { background:#141922; border:1px solid var(--border); border-radius:15px; padding:14px; }
.summary-item span { display:block; color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.08em; }
.summary-item strong { display:block; margin-top:5px; font-size:13px; }
.registration-aside { position:relative; z-index:2; min-height:430px; border-radius:28px; padding:28px; background:linear-gradient(165deg,var(--yellow) 0 56%,#14253b 56% 100%); color:#14110a; display:flex; flex-direction:column; overflow:hidden; box-shadow:var(--shadow); }
.registration-aside::before { content:""; position:absolute; width:220px; height:420px; right:-150px; top:-60px; background:#fff; opacity:.13; transform:rotate(24deg); }
.aside-logo { width:88px; height:88px; border-radius:22px; background:#101319; display:grid; place-items:center; padding:13px; margin-bottom:auto; }
.aside-logo img { width:100%; height:100%; object-fit:contain; }
.registration-aside > span { font-weight:900; font-size:11px; text-transform:uppercase; letter-spacing:.1em; }
.registration-aside > strong { font-family:Montserrat,Inter,sans-serif; font-size:28px; line-height:1.04; margin-top:8px; }
.aside-wave { position:absolute; width:420px; left:-70px; bottom:-80px; opacity:.65; }
.status-panel { text-align:center; padding:20px 0 8px; }
.status-icon { width:68px; height:68px; border-radius:22px; background:rgba(241,166,12,.12); color:var(--yellow-2); display:grid; place-items:center; margin:0 auto 15px; }
.status-panel h3 { margin:0 0 8px; }
.status-panel p { color:var(--muted); }

/* finish registration */
.finish-screen { min-height:100vh; display:grid; place-items:center; padding:28px; position:relative; overflow:hidden; background:radial-gradient(circle at 80% 10%,rgba(241,166,12,.18),transparent 28%),#090b0f; }
.finish-vector { position:absolute; width:1000px; bottom:-220px; left:-220px; opacity:.4; }
.finish-card { position:relative; z-index:2; width:min(760px,100%); background:rgba(16,20,27,.96); border:1px solid var(--border); border-radius:30px; padding:clamp(24px,5vw,50px); box-shadow:var(--shadow); }
.finish-check { width:76px; height:76px; border-radius:24px; display:grid; place-items:center; color:#15110a; background:var(--yellow); margin-bottom:22px; transform:rotate(-4deg); }
.finish-card h1 { font-family:Montserrat,Inter,sans-serif; font-size:clamp(30px,5vw,52px); line-height:1; letter-spacing:-.045em; margin:10px 0; }
.finish-card > p { color:var(--muted); line-height:1.65; }
.finish-assignment { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:24px 0; }
.finish-assignment div { padding:14px; background:#141922; border:1px solid var(--border); border-radius:16px; }
.finish-assignment span { color:var(--muted); display:block; font-size:10px; text-transform:uppercase; letter-spacing:.06em; }
.finish-assignment strong { display:block; margin-top:4px; font-size:12px; }
.install-panel { display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:center; border-radius:20px; padding:16px; background:linear-gradient(135deg,rgba(241,166,12,.13),rgba(28,46,68,.28)); border:1px solid rgba(241,166,12,.18); margin-bottom:12px; }
.install-icon { width:48px; height:48px; border-radius:15px; display:grid; place-items:center; background:var(--yellow); color:#15110a; }
.install-panel strong { display:block; font-size:13px; }
.install-panel span { display:block; color:var(--muted); font-size:11px; line-height:1.5; margin-top:3px; }
.finish-cpo { margin-top:25px; padding-top:20px; border-top:1px solid var(--border); }

/* app vector treatment */
.nav-icon { display:grid; place-items:center; }
.nav-count { margin-left:auto; min-width:22px; height:22px; border-radius:999px; display:grid; place-items:center; font-size:10px; background:#fff; color:#15110a; }
.nav-btn:not(.active) .nav-count { background:var(--yellow); }
.sidebar-project { margin-top:18px; border:1px solid var(--border); border-radius:18px; padding:14px; position:relative; overflow:hidden; background:#121a25; }
.sidebar-project img { position:absolute; inset:auto -70px -25px -20px; opacity:.5; }
.sidebar-project span, .sidebar-project strong { position:relative; z-index:2; display:block; }
.sidebar-project span { color:var(--yellow-2); font-size:9px; letter-spacing:.12em; font-weight:900; }
.sidebar-project strong { margin-top:5px; font-size:11px; line-height:1.25; }
.notification-btn { width:40px; height:40px; border-radius:13px; border:1px solid var(--border); background:#151a22; color:var(--text); display:grid; place-items:center; position:relative; }
.notification-btn b { position:absolute; right:-5px; top:-5px; min-width:18px; height:18px; border-radius:999px; padding:0 4px; display:grid; place-items:center; background:var(--yellow); color:#16120a; font-size:9px; border:2px solid var(--bg); }
.hero-card { min-height:280px; isolation:isolate; }
.hero-card::after { background:linear-gradient(170deg,var(--yellow),#ffbd22); width:260px; height:520px; right:-150px; top:-130px; opacity:.98; }
.hero-card::before { opacity:.7; }
.hero-staff { position:absolute; z-index:0; width:min(870px,78%); left:-90px; bottom:-110px; opacity:.95; }
.hero-rings { position:absolute; z-index:0; width:650px; right:-180px; bottom:-60px; opacity:.45; }
.hero-note-mark { position:absolute; z-index:2; right:38px; top:36px; width:102px; height:102px; display:grid; place-items:center; border-radius:32px; background:#0d1117; color:var(--yellow); box-shadow:0 18px 40px rgba(0,0,0,.32); transform:rotate(8deg); border:1px solid rgba(255,255,255,.08); }
.stat-card { position:relative; overflow:hidden; }
.stat-card::after { content:""; position:absolute; width:90px; height:90px; border:1px solid rgba(241,166,12,.12); border-radius:50%; right:-34px; top:-36px; }
.stat-symbol { width:32px; height:32px; border-radius:11px; display:grid; place-items:center; color:var(--yellow-2); background:rgba(241,166,12,.09); margin-bottom:11px; }
.notice { display:grid; grid-template-columns:auto 1fr; gap:12px; }
.notice-symbol { width:36px; height:36px; border-radius:12px; display:grid; place-items:center; background:rgba(241,166,12,.09); color:var(--yellow-2); }
.song-row { display:grid; grid-template-columns:auto 1fr; gap:12px; }
.song-symbol { width:40px; height:40px; border-radius:13px; display:grid; place-items:center; color:#17120a; background:var(--yellow); }
.student-class-strip { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:14px; padding:14px 16px; border-radius:20px; background:linear-gradient(100deg,rgba(241,166,12,.10),rgba(28,46,68,.20)); border:1px solid rgba(241,166,12,.16); }
.class-symbol { width:48px; height:48px; border-radius:16px; display:grid; place-items:center; color:#15110a; background:var(--yellow); transform:rotate(-4deg); }
.student-class-strip span { display:block; color:var(--yellow-2); font-size:10px; text-transform:uppercase; letter-spacing:.08em; font-weight:900; }
.student-class-strip strong { display:block; margin-top:4px; font-size:13px; }

/* admin quick actions */
.admin-quick { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.admin-quick button { border:1px solid var(--border); background:linear-gradient(145deg,#151b24,#10151c); color:var(--text); border-radius:18px; padding:16px; display:flex; align-items:center; gap:12px; text-align:left; }
.admin-quick button > .vicon { color:var(--yellow-2); }
.admin-quick span { min-width:0; }
.admin-quick strong { display:block; font-size:12px; }
.admin-quick small { display:block; color:var(--muted); font-size:10px; margin-top:3px; }
.admin-quick button:hover { border-color:rgba(241,166,12,.35); transform:translateY(-1px); }

/* Registration admin + QR */
.registration-admin-grid { grid-template-columns:340px 1fr; }
.qr-card { display:flex; flex-direction:column; align-items:center; justify-content:center; background:linear-gradient(160deg,#f2a90d,#ffc437); color:#15110a; min-height:430px; position:relative; overflow:hidden; }
.qr-card::before { content:""; position:absolute; width:240px; height:500px; background:rgba(255,255,255,.18); right:-170px; top:-80px; transform:rotate(24deg); }
.qr-frame { position:relative; width:min(270px,100%); aspect-ratio:1; background:#fff; padding:12px; border-radius:18px; box-shadow:0 18px 45px rgba(56,35,0,.18); }
.qr-frame img { width:100%; height:100%; object-fit:cover; border-radius:8px; }
.qr-corner { position:absolute; width:31px; height:31px; border-color:#121212; border-style:solid; }
.qr-corner.c1 { left:-7px; top:-7px; border-width:3px 0 0 3px; border-radius:8px 0 0 0; }
.qr-corner.c2 { right:-7px; top:-7px; border-width:3px 3px 0 0; border-radius:0 8px 0 0; }
.qr-corner.c3 { left:-7px; bottom:-7px; border-width:0 0 3px 3px; border-radius:0 0 0 8px; }
.qr-corner.c4 { right:-7px; bottom:-7px; border-width:0 3px 3px 0; border-radius:0 0 8px 0; }
.qr-brand { margin-top:21px; font-family:Montserrat,Inter,sans-serif; font-weight:900; letter-spacing:-.025em; }
.qr-brand b { background:#121212; color:var(--yellow); padding:3px 6px; border-radius:6px; }
.link-box { display:grid; grid-template-columns:1fr auto; gap:8px; background:#0e1218; border:1px solid var(--border); border-radius:15px; padding:8px 8px 8px 13px; align-items:center; }
.link-box span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#cbd1d9; font-size:11px; }
.link-box button { border:0; border-radius:10px; padding:9px 11px; background:var(--yellow); color:#15110a; font-weight:800; display:flex; align-items:center; gap:6px; }
.invite-row { margin-top:20px; padding:14px; border:1px solid var(--border); border-radius:16px; display:flex; justify-content:space-between; align-items:center; gap:12px; }
.invite-row span { display:block; color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.08em; }
.invite-row strong { display:block; margin-top:4px; letter-spacing:.14em; color:var(--yellow-2); }
.switch-row { margin-top:12px; padding:14px; border:1px solid var(--border); border-radius:16px; display:flex; justify-content:space-between; align-items:center; gap:14px; cursor:pointer; }
.switch-row strong, .switch-row small { display:block; }
.switch-row small { color:var(--muted); margin-top:3px; font-size:10px; }
.switch-row input { width:44px; height:24px; accent-color:var(--yellow); }

/* classes */
.class-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.class-card { background:linear-gradient(145deg,#151b24,#10151c); border:1px solid var(--border); border-radius:20px; padding:18px; position:relative; overflow:hidden; min-height:210px; }
.class-card::after { content:""; position:absolute; width:130px; height:130px; border:1px solid rgba(241,166,12,.1); border-radius:50%; right:-60px; top:-55px; }
.class-card-symbol { width:48px; height:48px; border-radius:15px; display:grid; place-items:center; background:var(--yellow); color:#15110a; margin-bottom:15px; transform:rotate(-4deg); }
.class-card > div:nth-child(2) > span { color:var(--yellow-2); text-transform:uppercase; font-size:9px; letter-spacing:.1em; font-weight:900; }
.class-card h3 { font-family:Montserrat,Inter,sans-serif; font-size:22px; margin:4px 0 2px; }
.class-card p { color:var(--muted); margin:0; font-size:11px; }
.class-teacher { display:flex; align-items:center; gap:9px; margin-top:18px; padding-top:14px; border-top:1px solid var(--border); }
.class-teacher span { display:block; color:var(--muted); font-size:9px; text-transform:uppercase; }
.class-teacher strong { display:block; font-size:11px; margin-top:2px; }
.info-banner { background:rgba(48,66,84,.18); border:1px solid rgba(107,135,164,.16); color:#cbd4df; }

/* more page */
.more-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.more-card { border:1px solid var(--border); background:linear-gradient(145deg,#151b24,#10151c); color:var(--text); border-radius:20px; padding:18px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:14px; text-align:left; }
.more-card > span { width:50px; height:50px; border-radius:16px; display:grid; place-items:center; background:rgba(241,166,12,.1); color:var(--yellow-2); }
.more-card strong { display:block; font-size:13px; }
.more-card small { display:block; color:var(--muted); margin-top:4px; }

/* MESSAGING */
.messaging-layout { display:grid; grid-template-columns:310px minmax(0,1fr); min-height:650px; border:1px solid var(--border); border-radius:24px; overflow:hidden; background:#10151c; box-shadow:var(--shadow); }
.messaging-layout.single-contact { grid-template-columns:1fr; }
.conversation-list { border-right:1px solid var(--border); background:#0e1319; }
.conversation-list-head { padding:18px; border-bottom:1px solid var(--border); font-size:12px; font-weight:800; display:flex; align-items:center; justify-content:space-between; }
.conversation-list-head span { min-width:25px; height:25px; border-radius:999px; display:grid; place-items:center; background:rgba(241,166,12,.1); color:var(--yellow-2); font-size:10px; }
.conversation-person, .thread-preview { width:100%; border:0; border-bottom:1px solid var(--border); background:transparent; color:var(--text); display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:center; text-align:left; padding:13px 15px; }
.conversation-person:hover, .conversation-person.active { background:rgba(241,166,12,.07); }
.conversation-person.active { box-shadow:inset 3px 0 0 var(--yellow); }
.conversation-person strong, .thread-preview strong { display:block; font-size:12px; }
.conversation-person span, .thread-preview span { display:block; color:var(--muted); font-size:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:3px; }
.thread-preview { grid-template-columns:auto 1fr auto; border:1px solid var(--border); border-radius:14px; margin-bottom:8px; }
.thread-preview time { color:var(--muted-2); font-size:9px; }
.chat-panel { min-width:0; display:flex; flex-direction:column; min-height:650px; background:linear-gradient(180deg,#111820,#0f141b); }
.chat-head { min-height:76px; padding:13px 16px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:10px; background:rgba(14,18,24,.88); }
.chat-head > div:nth-child(2) { min-width:0; }
.chat-head span { display:block; color:var(--yellow-2); font-size:9px; font-weight:900; letter-spacing:.08em; }
.chat-head strong { display:block; font-size:13px; margin-top:2px; }
.chat-head small { color:var(--muted); font-size:10px; }
.secure-chat { margin-left:auto; display:flex; align-items:center; gap:5px; border:1px solid var(--border); border-radius:999px; padding:7px 9px; color:var(--muted); font-size:9px; }
.chat-messages { flex:1; padding:22px; overflow:auto; display:flex; flex-direction:column; gap:9px; background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.035) 1px,transparent 0); background-size:24px 24px; }
.message-bubble { max-width:min(76%,560px); padding:11px 13px 8px; border-radius:17px; display:grid; gap:5px; line-height:1.45; font-size:12px; }
.message-bubble.mine { align-self:flex-end; background:var(--yellow); color:#17120a; border-bottom-right-radius:5px; }
.message-bubble.theirs { align-self:flex-start; background:#202936; color:#f2f4f7; border-bottom-left-radius:5px; }
.message-bubble time { font-size:8px; opacity:.65; justify-self:end; }
.message-bubble small { font-size:8px; opacity:.7; }
.message-composer { display:grid; grid-template-columns:1fr auto; gap:9px; padding:13px; border-top:1px solid var(--border); background:#0d1218; }
.message-composer textarea { resize:none; min-height:46px; max-height:120px; border:1px solid var(--border); border-radius:15px; padding:13px 14px; background:#151b24; color:var(--text); outline:none; }
.message-composer textarea:focus { border-color:rgba(241,166,12,.5); }
.message-composer button { width:46px; height:46px; border:0; border-radius:15px; background:var(--yellow); color:#15110a; display:grid; place-items:center; }
.chat-empty { flex:1; min-height:260px; display:flex; flex-direction:column; align-items:center; justify-content:center; color:var(--muted); text-align:center; gap:7px; padding:25px; }
.chat-empty .vicon { color:var(--yellow-2); }
.chat-empty strong { color:var(--text); }
.chat-empty span { font-size:10px; }
.empty.compact { padding:25px 14px; }
.row-actions { display:flex; align-items:center; gap:8px; }
.icon-action { width:35px; height:35px; border-radius:11px; display:grid; place-items:center; border:1px solid var(--border); background:#151b24; color:var(--yellow-2); }

/* notifications */
.notifications-list { display:grid; gap:8px; max-height:60vh; overflow:auto; }
.notification-row { display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:start; padding:12px; border-radius:14px; border:1px solid rgba(241,166,12,.13); background:rgba(241,166,12,.045); }
.notification-row.read { opacity:.65; border-color:var(--border); background:#12171f; }
.notification-symbol { width:35px; height:35px; border-radius:11px; display:grid; place-items:center; color:var(--yellow-2); background:rgba(241,166,12,.09); }
.notification-row strong { display:block; font-size:11px; }
.notification-row span { display:block; color:var(--muted); font-size:10px; line-height:1.5; margin-top:3px; }
.notification-row time { display:block; color:var(--muted-2); font-size:8px; margin-top:5px; }
.notification-row > i { width:7px; height:7px; border-radius:50%; background:var(--yellow); margin-top:5px; }

/* profile */
.profile-avatar { width:62px; height:62px; border-radius:20px; font-size:23px; }
.profile-name { font-size:20px !important; }
.profile-data { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:20px; }
.profile-data div { border:1px solid var(--border); border-radius:14px; padding:12px; background:#141922; }
.profile-data span { display:block; color:var(--muted); font-size:9px; text-transform:uppercase; letter-spacing:.07em; }
.profile-data strong { display:block; margin-top:4px; font-size:11px; }
.profile-actions { display:flex; gap:9px; flex-wrap:wrap; }
.profile-actions button, .profile-card > button { display:flex; align-items:center; justify-content:center; gap:7px; }
.privacy-note { margin-top:18px; background:rgba(48,66,84,.18); border:1px solid rgba(107,135,164,.15); color:#c3cbd5; }

/* install helper + audit */
.install-help { text-align:center; }
.install-help-icon { width:62px; height:62px; border-radius:20px; display:grid; place-items:center; background:var(--yellow); color:#15110a; margin:0 auto 14px; }
.install-help h4 { margin:0 0 6px; }
.install-help p { color:var(--muted); line-height:1.6; }
.audit-list { display:grid; gap:8px; max-height:55vh; overflow:auto; }
.audit-row { padding:12px; border:1px solid var(--border); border-radius:13px; background:#121820; }
.audit-row span, .audit-row strong, .audit-row time { display:block; }
.audit-row span { color:var(--yellow-2); font-size:9px; font-weight:800; }
.audit-row strong { font-size:11px; margin-top:4px; line-height:1.45; }
.audit-row time { color:var(--muted-2); font-size:8px; margin-top:5px; }

/* planning detail */
.planning-scroll { overflow:auto; border-radius:20px; }
.plan-note { width:28px; height:28px; border-radius:9px; display:grid; place-items:center; background:rgba(241,166,12,.12); color:var(--yellow-2); margin-bottom:7px; }

/* mobile nav badge */
.mobile-nav-icon { position:relative; display:grid; place-items:center; }
.mobile-nav-icon b { position:absolute; right:-8px; top:-7px; min-width:16px; height:16px; border-radius:999px; display:grid; place-items:center; padding:0 3px; background:var(--yellow); color:#16120a; font-size:8px; border:2px solid #11151c; }
.mobile-nav button.active .mobile-nav-icon b { background:#15110a; color:var(--yellow); border-color:var(--yellow); }

@media (max-width: 1100px) {
  .registration-main { grid-template-columns:minmax(0,760px) 240px; }
  .admin-quick { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .class-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width: 860px) {
  .registration-top { height:68px; }
  .registration-main { min-height:calc(100vh - 68px); grid-template-columns:1fr; padding:22px 16px 36px; align-items:start; }
  .registration-aside { display:none; }
  .registration-card { border-radius:23px; padding:23px 18px; }
  .registration-deco { width:390px; right:-200px; bottom:-120px; }
  .auth-vector-two { width:270px; right:-120px; top:6%; }
  .hero-note-mark { width:72px; height:72px; border-radius:23px; right:18px; top:18px; }
  .hero-note-mark .vicon { width:42px; height:42px; }
  .hero-card { min-height:0; }
  .hero-staff { width:760px; left:-240px; bottom:-170px; }
  .student-class-strip { grid-template-columns:auto 1fr; }
  .student-class-strip button { grid-column:1 / -1; width:100%; }
  .registration-admin-grid { grid-template-columns:1fr; }
  .qr-card { min-height:auto; padding:28px; }
  .qr-frame { width:230px; }
  .class-grid { grid-template-columns:1fr 1fr; }
  .more-grid { grid-template-columns:1fr; }
  .messaging-layout { grid-template-columns:250px minmax(0,1fr); min-height:calc(100vh - 200px); }
  .chat-panel { min-height:calc(100vh - 200px); }
}

@media (max-width: 680px) {
  .assignment-card { grid-template-columns:1fr; }
  .summary-grid { grid-template-columns:1fr; }
  .finish-assignment { grid-template-columns:1fr; }
  .install-panel { grid-template-columns:auto 1fr; }
  .install-panel button { grid-column:1 / -1; width:100%; }
  .class-grid { grid-template-columns:1fr; }
  .messaging-layout { display:block; min-height:0; border-radius:19px; }
  .conversation-list { border-right:0; border-bottom:1px solid var(--border); max-height:210px; overflow:auto; }
  .chat-panel { min-height:540px; }
  .chat-messages { padding:15px 12px; }
  .message-bubble { max-width:86%; }
  .page-head h1 { font-size:30px; }
}

@media (max-width: 560px) {
  .login-brand { min-height:37vh; padding:22px 18px 26px; }
  .mc-logo-wrap { width:min(330px,78vw); padding:13px 15px; border-radius:18px; }
  .login-kicker { margin-top:18px; font-size:9px; }
  .login-title { font-size:34px; max-width:320px; }
  .cpo-signature { margin-top:22px; }
  .cpo-signature img { width:48px; max-height:48px; }
  .cpo-signature span { font-size:9px; max-width:180px; }
  .login-panel { padding:28px 18px 42px; }
  .login-card h2 { font-size:28px; }
  .auth-mini-icon { width:44px; height:44px; border-radius:14px; }
  .demo-grid { grid-template-columns:repeat(3,1fr); }
  .registration-brand span { display:none; }
  .registration-brand strong { font-size:11px; }
  .registration-top { padding:0 14px; }
  .reg-progress-item span { width:27px; height:27px; }
  .reg-step-label { margin-top:19px; }
  .reg-actions { gap:8px; }
  .reg-actions button { flex:1; justify-content:center; }
  .reg-actions > span { display:none; }
  .finish-screen { padding:14px; }
  .finish-card { border-radius:23px; padding:24px 18px; }
  .finish-check { width:62px; height:62px; border-radius:20px; }
  .admin-quick { grid-template-columns:1fr 1fr; gap:9px; }
  .admin-quick button { padding:12px; align-items:flex-start; flex-direction:column; }
  .admin-quick small { line-height:1.3; }
  .topbar-right .day-pill { display:none; }
  .hero-note-mark { display:none; }
  .hero-card::after { width:150px; height:310px; right:-110px; top:-90px; }
  .hero-card h2 { padding-right:20px; }
  .student-class-strip { padding:13px; }
  .class-symbol { width:44px; height:44px; }
  .profile-data { grid-template-columns:1fr; }
  .profile-actions { display:grid; grid-template-columns:1fr; }
  .qr-card { border-radius:20px; }
  .qr-frame { width:210px; }
  .link-box { grid-template-columns:1fr; }
  .link-box button { justify-content:center; }
  .invite-row { align-items:flex-start; flex-direction:column; }
  .invite-row button { width:100%; }
  .more-card { padding:14px; }
  .message-composer { padding:9px; }
  .chat-head { padding:10px 11px; }
  .secure-chat { font-size:8px; }
}

/* ===== V0.3 — EXPERIENCE, MUSICAL VECTOR SYSTEM, JOURNEY & EVALUATIONS ===== */
:root {
  --yellow-soft: rgba(241,166,12,.10);
  --blue-soft: rgba(72,116,158,.15);
}

/* icon-led headings */
.card-title-row h3 { display:flex; align-items:center; gap:8px; }
.card-title-row h3 .vicon { color:var(--yellow-2); }
.primary-btn, .secondary-btn, .ghost-btn, .danger-btn { display:inline-flex; align-items:center; justify-content:center; gap:7px; }

/* redesigned login */
.login-v03 .login-brand {
  isolation:isolate;
  overflow:hidden;
  background:
    linear-gradient(145deg, rgba(7,9,13,.78), rgba(7,9,13,.96)),
    url('/assets/poster-reference.png') center/cover no-repeat;
  padding:clamp(30px,5vw,64px) clamp(30px,6vw,84px);
}
.login-v03 .login-brand::before {
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(circle at 22% 22%, rgba(241,166,12,.13), transparent 27%),
    linear-gradient(90deg, transparent 0 68%, rgba(28,46,68,.23));
}
.login-v03 .login-brand::after { display:none; }
.auth-landscape {
  position:absolute; z-index:0; width:min(980px,92%); right:-20%; bottom:-7%;
  opacity:.58; pointer-events:none; filter:drop-shadow(0 30px 40px rgba(0,0,0,.28));
}
.auth-topline { position:relative; z-index:2; display:flex; align-items:center; gap:16px; }
.auth-logo-mark {
  width:72px; height:72px; border-radius:22px; display:grid; place-items:center; overflow:hidden;
  border:1px solid rgba(255,255,255,.12); background:rgba(8,10,14,.70); backdrop-filter:blur(12px);
  box-shadow:0 18px 50px rgba(0,0,0,.30);
}
.auth-logo-mark img { width:82%; height:82%; object-fit:contain; }
.auth-topline > span { color:var(--yellow-2); font-size:10px; letter-spacing:.14em; font-weight:900; }
.login-v03 .brand-lockup { max-width:680px; }
.login-v03 .login-title { font-size:clamp(42px,5.2vw,76px); max-width:760px; }
.login-v03 .login-title em { color:var(--yellow-2); font-style:normal; }
.login-v03 .login-sub { font-size:15px; max-width:620px; }
.auth-feature-row { display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; }
.auth-feature-row span {
  display:inline-flex; align-items:center; gap:7px; border:1px solid rgba(255,255,255,.09);
  background:rgba(8,10,14,.42); border-radius:999px; padding:8px 11px; color:#d9dee5; font-size:10px; font-weight:700;
}
.auth-feature-row .vicon { color:var(--yellow-2); }
.auth-cpo { position:relative; z-index:2; }
.login-v03 .login-panel { background:linear-gradient(180deg,#0c1016,#0b0f15); }
.login-v03 .login-panel::before { background:linear-gradient(180deg,var(--yellow),#ffd45a); }
.login-card-head { display:flex; align-items:center; gap:14px; margin-bottom:10px; }
.login-card-head .auth-mini-icon { margin:0; }
.login-card-head span { display:block; color:var(--yellow-2); font-size:9px; font-weight:900; letter-spacing:.13em; }
.login-card-head h2 { margin:2px 0 0; }
.login-submit { min-height:50px; margin-top:5px; }
.install-login-link {
  width:100%; border:0; color:var(--muted); background:transparent; padding:12px 8px 4px;
  display:flex; align-items:center; justify-content:center; gap:8px; font-size:11px; font-weight:700;
}
.install-login-link:hover { color:var(--text); }
.demo-btn { display:flex; align-items:center; justify-content:center; gap:6px; }
.demo-btn .vicon { color:var(--yellow-2); }

/* Shell & account */
.mobile-top-brand > div:last-child span { display:none; }
.account-btn {
  width:38px; height:38px; padding:0; border-radius:12px; border:1px solid rgba(241,166,12,.22);
  background:rgba(241,166,12,.10); color:var(--yellow-2); display:grid; place-items:center; font-weight:900;
}
.account-btn span { display:grid; place-items:center; width:100%; height:100%; }
.logout-btn { display:flex; align-items:center; justify-content:center; gap:7px; }
.sidebar-project { overflow:hidden; }
.sidebar-project img { width:190px; opacity:.22; margin:-12px 0 -6px -40px; }

/* Richer hero vector composition */
.hero-card {
  background:linear-gradient(135deg,#111720 0%,#17283d 58%,#1c2e44 100%);
  min-height:300px;
}
.hero-card::after {
  content:""; display:block; width:170px; height:500px; right:-95px; top:-120px;
  background:linear-gradient(180deg,var(--yellow-2),var(--yellow)); opacity:.92; transform:rotate(15deg);
  clip-path:polygon(30% 0,100% 8%,71% 100%,0 93%);
}
.hero-landscape { position:absolute; z-index:1; width:min(800px,70%); right:-80px; bottom:-140px; opacity:.38; pointer-events:none; }
.hero-context-icon {
  position:absolute; z-index:3; right:34px; top:34px; width:86px; height:86px; border-radius:26px;
  display:grid; place-items:center; background:rgba(8,11,16,.80); color:var(--yellow-2); border:1px solid rgba(255,255,255,.08);
  box-shadow:0 20px 45px rgba(0,0,0,.28); transform:rotate(5deg);
}
.hero-context-icon::after { content:""; position:absolute; inset:8px; border-radius:20px; border:1px dashed rgba(241,166,12,.22); }
.hero-context-icon .vicon { position:relative; z-index:2; }

/* contextual icon surfaces */
.instrument-avatar {
  width:46px; height:46px; flex:0 0 auto; display:grid; place-items:center; border-radius:15px;
  color:#181207; background:linear-gradient(145deg,var(--yellow-2),var(--yellow));
  box-shadow:0 10px 26px rgba(241,166,12,.13);
}
.stat-card { min-height:132px; }
.stat-symbol { width:38px; height:38px; border-radius:12px; display:grid; place-items:center; color:var(--yellow-2); background:rgba(241,166,12,.08); border:1px solid rgba(241,166,12,.13); margin-bottom:10px; }
.stat-card::after { border-radius:42% 58% 61% 39% / 50% 40% 60% 50%; transform:rotate(18deg); }
.student-overview .stat-sub { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.class-symbol { border-radius:15px 22px 14px 23px; transform:rotate(-5deg); }
.teacher-quick { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.teacher-quick button {
  border:1px solid var(--border); color:var(--text); border-radius:18px; padding:16px; text-align:left;
  display:flex; align-items:center; gap:12px; background:linear-gradient(145deg,#151b24,#10151c);
}
.teacher-quick button > .vicon { color:var(--yellow-2); }
.teacher-quick strong, .teacher-quick small { display:block; }
.teacher-quick strong { font-size:12px; }
.teacher-quick small { color:var(--muted); margin-top:3px; font-size:10px; }

/* classes get actual musical line art */
.class-card { isolation:isolate; }
.class-card-symbol { border-radius:15px 21px 14px 22px; position:relative; z-index:2; }
.class-vector { position:absolute; width:260px; right:-90px; top:-20px; opacity:.23; z-index:0; pointer-events:none; }
.class-card > div { position:relative; z-index:2; }

/* evaluation & journey */
.score-stars { display:inline-flex; gap:4px; }
.score-stars i { width:8px; height:8px; border-radius:50% 50% 50% 0; transform:rotate(-45deg); background:#323a45; }
.score-stars i.on { background:var(--yellow); box-shadow:0 0 10px rgba(241,166,12,.22); }
.score-pill { display:flex; align-items:baseline; gap:2px; min-width:54px; justify-content:flex-end; color:var(--yellow-2); }
.score-pill strong { font-size:20px; font-family:Montserrat,Inter,sans-serif; }
.score-pill span { font-size:9px; color:var(--muted); }
.evaluation-person-row small { display:block; margin-top:4px; color:var(--muted-2); font-size:9px; }
.student-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.student-progress-card {
  border:1px solid var(--border); background:linear-gradient(155deg,#151b24,#10151c); border-radius:21px; padding:17px; overflow:hidden; position:relative;
}
.student-progress-card::after { content:""; position:absolute; width:150px; height:95px; right:-55px; top:-45px; border:1px solid rgba(241,166,12,.10); border-radius:50%; transform:rotate(-20deg); }
.student-progress-top { display:grid; grid-template-columns:auto 1fr auto; gap:11px; align-items:center; position:relative; z-index:2; }
.student-progress-top h3 { margin:0; font-size:14px; }
.student-progress-top span { color:var(--muted); font-size:9px; display:block; margin-top:3px; }
.score-ring { width:54px; height:54px; border-radius:50%; display:grid; place-items:center; align-content:center; border:3px solid rgba(241,166,12,.25); background:rgba(241,166,12,.055); }
.score-ring strong { font-size:17px; line-height:1; color:var(--yellow-2); }
.score-ring small { color:var(--muted); font-size:8px; }
.score-ring.large { width:68px; height:68px; }
.student-progress-meta { display:flex; justify-content:space-between; gap:10px; margin-top:15px; padding-top:12px; border-top:1px solid var(--border); font-size:9px; color:var(--muted); }
.student-progress-meta b { color:var(--yellow-2); }
.last-feedback { min-height:46px; margin:12px 0; color:#c9d0d9; font-size:10px; line-height:1.5; }
.student-card-actions { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.student-card-actions button { padding:10px 8px; font-size:10px; }
.evaluation-intro { border:1px solid rgba(241,166,12,.17); background:linear-gradient(110deg,rgba(241,166,12,.08),rgba(28,46,68,.18)); border-radius:18px; padding:14px 16px; display:flex; gap:12px; align-items:center; }
.evaluation-intro-icon { width:46px; height:46px; border-radius:15px; display:grid; place-items:center; color:#171209; background:var(--yellow); }
.evaluation-intro strong, .evaluation-intro span { display:block; }
.evaluation-intro strong { font-size:12px; }
.evaluation-intro span { color:var(--muted); font-size:10px; line-height:1.5; margin-top:3px; }
.evaluation-card-last { min-height:58px; display:flex; justify-content:space-between; gap:10px; align-items:center; border-top:1px solid var(--border); margin:14px 0 12px; padding-top:12px; }
.evaluation-card-last > span { color:var(--muted); font-size:9px; line-height:1.4; }

.evaluation-modal-head { display:flex; align-items:center; gap:11px; padding:12px; border-radius:16px; background:rgba(241,166,12,.055); border:1px solid rgba(241,166,12,.12); margin-bottom:17px; }
.evaluation-modal-head strong, .evaluation-modal-head span { display:block; }
.evaluation-modal-head strong { font-size:12px; }
.evaluation-modal-head span { color:var(--muted); font-size:9px; margin-top:2px; }
.score-form-grid { display:grid; gap:8px; margin:14px 0; }
.score-field { display:grid; grid-template-columns:minmax(0,1fr) 180px; gap:12px; align-items:center; border:1px solid var(--border); background:#121820; border-radius:14px; padding:10px 12px; }
.score-field label { display:block; font-size:11px; font-weight:800; }
.score-field small { display:block; color:var(--muted-2); font-size:8px; margin-top:2px; }
.score-field .field { padding:10px 11px; }
.evaluation-scale-note { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:9px; }
.evaluation-scale-note .vicon { color:var(--yellow-2); }

.journey-head h1 { max-width:720px; }
.journey-hero {
  min-height:210px; border:1px solid rgba(241,166,12,.18); border-radius:25px; padding:26px; position:relative; overflow:hidden;
  display:flex; align-items:center; gap:28px; background:linear-gradient(120deg,#141b25,#1b3047);
}
.journey-hero > img { position:absolute; width:640px; right:-130px; bottom:-85px; opacity:.3; pointer-events:none; }
.journey-hero > div { position:relative; z-index:2; }
.journey-hero > div:first-of-type span { display:block; color:var(--yellow-2); font-size:9px; font-weight:900; letter-spacing:.13em; }
.journey-hero > div:first-of-type > strong { display:block; font-size:58px; line-height:1; font-family:Montserrat,Inter,sans-serif; margin-top:8px; }
.journey-hero strong small { font-size:18px; color:var(--muted); }
.journey-hero > div:first-of-type b { display:block; color:#dce2e8; font-size:12px; margin-top:6px; }
.journey-teacher { margin-left:auto; min-width:240px; border:1px solid rgba(255,255,255,.08); background:rgba(7,10,15,.36); border-radius:18px; padding:14px; display:flex; align-items:center; gap:11px; }
.journey-teacher .vicon { color:var(--yellow-2); }
.journey-teacher span, .journey-teacher strong { display:block; }
.journey-teacher span { color:var(--muted); font-size:9px; }
.journey-teacher strong { color:var(--text); font-size:11px; margin-top:3px; }
.metrics-list { display:grid; gap:12px; }
.metric-row { display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:center; }
.metric-icon { width:34px; height:34px; border-radius:11px; display:grid; place-items:center; color:var(--yellow-2); background:rgba(241,166,12,.08); }
.metric-main > div:first-child { display:flex; justify-content:space-between; gap:10px; font-size:10px; }
.metric-main > div:first-child span { color:#d6dce4; }
.metric-main > div:first-child strong { color:var(--yellow-2); }
.metric-track { height:6px; border-radius:999px; background:#262e39; margin-top:5px; overflow:hidden; }
.metric-track i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--yellow),var(--yellow-2)); }
.latest-feedback-card blockquote { margin:18px 0 10px; padding:0; font-size:15px; line-height:1.6; color:#e5e8ec; font-weight:600; }
.latest-feedback-card > small { color:var(--muted-2); font-size:9px; }
.feedback-score { display:flex; align-items:center; gap:10px; }
.feedback-score strong { color:var(--yellow-2); font-size:12px; }
.journey-timeline { display:grid; }
.journey-timeline article { display:grid; grid-template-columns:40px 1fr; gap:12px; position:relative; padding:6px 0 20px; }
.journey-timeline article:not(:last-child)::before { content:""; position:absolute; left:17px; top:34px; bottom:-2px; width:1px; background:linear-gradient(var(--yellow),rgba(241,166,12,.08)); }
.journey-dot { width:35px; height:35px; border-radius:12px; display:grid; place-items:center; background:rgba(241,166,12,.09); color:var(--yellow-2); border:1px solid rgba(241,166,12,.14); }
.journey-timeline time { color:var(--yellow-2); font-size:8px; font-weight:800; text-transform:uppercase; }
.journey-timeline h4 { margin:3px 0 5px; font-size:12px; }
.journey-score { display:flex; align-items:center; gap:8px; }
.journey-score strong { font-size:9px; color:var(--muted); }
.journey-timeline p { color:var(--muted); font-size:10px; line-height:1.55; margin:6px 0 0; }
.report-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.admin-report-card .mini-metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin:14px 0; }
.mini-metrics span { border:1px solid var(--border); background:#121820; border-radius:11px; padding:9px; color:var(--muted); font-size:8px; }
.mini-metrics b { display:block; color:var(--text); font-size:12px; margin-top:2px; }
.table-score { color:var(--yellow-2); font-weight:800; }
.report-modal-head { display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; margin-bottom:20px; }
.report-modal-head span, .report-modal-head strong { display:block; }
.report-modal-head span { color:var(--muted); font-size:9px; }
.report-modal-head strong { font-size:13px; margin-top:3px; }
.report-metrics { padding:15px; border-radius:16px; border:1px solid var(--border); background:#11171f; }
.report-history { margin-top:20px; }
.report-history h4 { display:flex; align-items:center; gap:7px; }
.report-history article { display:grid; grid-template-columns:1fr auto; gap:8px; padding:12px 0; border-bottom:1px solid var(--border); }
.report-history article > div:first-child span, .report-history time { display:block; color:var(--muted-2); font-size:8px; }
.report-history article > div:first-child strong { display:block; font-size:11px; margin:2px 0; }
.report-history article > div:nth-child(2) { text-align:right; }
.report-history article > div:nth-child(2) b { display:block; color:var(--yellow-2); font-size:10px; margin-top:4px; }
.report-history article p { grid-column:1/-1; color:var(--muted); font-size:9px; line-height:1.5; margin:0; }

/* Account modal */
.account-panel { display:grid; gap:14px; }
.account-hero { display:flex; align-items:center; gap:12px; padding:14px; border-radius:18px; background:linear-gradient(120deg,rgba(241,166,12,.09),rgba(28,46,68,.18)); border:1px solid rgba(241,166,12,.13); }
.account-avatar { width:58px; height:58px; border-radius:19px; display:grid; place-items:center; background:var(--yellow); color:#15110a; font-size:22px; font-weight:900; }
.account-hero span, .account-hero strong, .account-hero small { display:block; }
.account-hero span { color:var(--yellow-2); font-size:8px; font-weight:900; letter-spacing:.12em; }
.account-hero strong { font-size:15px; margin-top:3px; }
.account-hero small { color:var(--muted); font-size:9px; margin-top:2px; }
.account-actions { display:grid; gap:7px; }
.account-action { display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center; width:100%; text-align:left; color:var(--text); background:#131922; border:1px solid var(--border); border-radius:14px; padding:12px; }
.account-action > .vicon:first-child { color:var(--yellow-2); }
.account-action strong, .account-action small { display:block; }
.account-action strong { font-size:11px; }
.account-action small { color:var(--muted); font-size:8px; margin-top:2px; }
.account-logout { margin-top:2px; }

@media (max-width:1100px) {
  .student-cards { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:860px) {
  .topbar-right { gap:7px; }
  .account-btn { display:grid; }
  .hero-card { min-height:260px; }
  .hero-landscape { width:680px; right:-250px; bottom:-150px; }
  .hero-context-icon { width:68px; height:68px; right:18px; top:18px; border-radius:21px; }
  .hero-context-icon .vicon { width:34px; height:34px; }
  .teacher-quick { grid-template-columns:1fr 1fr 1fr; }
  .report-summary { grid-template-columns:repeat(3,1fr); }
}

@media (max-width:680px) {
  .student-cards { grid-template-columns:1fr; }
  .teacher-quick { grid-template-columns:1fr; }
  .journey-hero { display:grid; gap:18px; }
  .journey-teacher { margin-left:0; min-width:0; }
  .report-summary { grid-template-columns:1fr 1fr; }
  .score-field { grid-template-columns:1fr; gap:8px; }
}

@media (max-width:560px) {
  /* compact first screen: brand no longer dominates the phone */
  .login-screen.login-v03 { display:block; }
  .login-v03 .login-brand {
    min-height:330px; height:auto; padding:18px 18px 24px; justify-content:flex-start; gap:18px;
    background:linear-gradient(155deg,rgba(7,9,13,.82),rgba(7,9,13,.98)),url('/assets/poster-reference.png') 42% center/cover no-repeat;
  }
  .auth-landscape { width:540px; max-width:none; right:-250px; bottom:-90px; opacity:.58; }
  .auth-topline { gap:11px; }
  .auth-logo-mark { width:54px; height:54px; border-radius:17px; }
  .auth-topline > span { font-size:8px; letter-spacing:.11em; }
  .login-v03 .brand-lockup { margin-top:5px; }
  .login-v03 .login-kicker { margin:0 0 7px; font-size:8px; }
  .login-v03 .login-title { font-size:34px; line-height:.98; max-width:330px; }
  .login-v03 .login-sub { display:block; max-width:330px; font-size:11px; line-height:1.45; margin:11px 0 0; color:#ccd2d9; }
  .auth-feature-row { gap:5px; margin-top:13px; max-width:340px; }
  .auth-feature-row span { font-size:8px; padding:6px 8px; }
  .auth-feature-row .vicon { width:13px; height:13px; }
  .auth-cpo { margin-top:auto; }
  .auth-cpo .cpo-signature { margin-top:0; gap:8px; }
  .auth-cpo .cpo-signature img { width:36px; max-height:36px; }
  .auth-cpo .cpo-signature span { font-size:7px; max-width:160px; }
  .login-v03 .login-panel { padding:22px 18px calc(32px + env(safe-area-inset-bottom)); align-items:flex-start; }
  .login-v03 .login-panel::before { width:100%; height:3px; }
  .login-card-head { margin-bottom:8px; }
  .login-card-head .auth-mini-icon { width:42px; height:42px; border-radius:13px; }
  .login-card-head h2 { font-size:27px; }
  .login-card > p { margin-bottom:18px; font-size:11px; }
  .login-v03 .field { padding:12px 13px; }
  .login-v03 .form-group { margin-bottom:12px; }
  .login-submit { min-height:46px; }
  .registration-link { padding:11px; font-size:10px; }
  .install-login-link { font-size:9px; }
  .demo-area { margin-top:18px; padding-top:15px; }
  .demo-grid { grid-template-columns:repeat(3,1fr); gap:6px; }
  .demo-btn { font-size:8px; padding:9px 5px; }
  .demo-btn .vicon { width:13px; height:13px; }

  .mobile-top-brand > div:last-child span { display:block; color:var(--muted); font-size:8px; margin-top:1px; }
  .mobile-top-brand strong { font-size:10px !important; }
  .topbar { padding:0 12px; }
  .notification-btn, .account-btn { width:36px; height:36px; }
  .content { padding:16px 13px 94px; }
  .page-head { margin-bottom:18px; }
  .page-head h1 { font-size:27px; }
  .page-head p { font-size:10px; line-height:1.5; }
  .hero-card { min-height:245px; padding:20px 18px; border-radius:21px; }
  .hero-card::after { width:120px; height:300px; right:-80px; top:-80px; }
  .hero-landscape { width:520px; right:-250px; bottom:-130px; opacity:.31; }
  .hero-context-icon { width:52px; height:52px; right:14px; top:14px; border-radius:17px; }
  .hero-context-icon .vicon { width:26px; height:26px; }
  .hero-card h2 { font-size:29px; max-width:270px; padding-right:28px; }
  .hero-card p { font-size:10px; max-width:280px; }
  .next-event { margin-top:20px; display:grid; grid-template-columns:auto 1fr; gap:9px 12px; }
  .time-block { font-size:31px; }
  .event-meta strong { font-size:12px; }
  .event-meta span { font-size:9px; }
  .countdown { grid-column:1/-1; width:max-content; font-size:8px; padding:7px 9px; }
  .student-class-strip { grid-template-columns:auto 1fr; gap:9px; }
  .student-class-strip button { grid-column:1/-1; }
  .grid-4, .student-overview { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .stat-card { min-height:118px; padding:13px; }
  .stat-symbol { width:34px; height:34px; }
  .stat-card .stat-label { font-size:9px; }
  .stat-card .stat-value { font-size:21px; }
  .stat-card .stat-sub { font-size:8px; line-height:1.35; }
  .student-progress-card { padding:14px; }
  .student-progress-top { grid-template-columns:auto 1fr auto; }
  .report-summary { grid-template-columns:1fr; }
  .journey-hero { min-height:190px; padding:20px; }
  .journey-hero > div:first-of-type > strong { font-size:48px; }
  .journey-hero > img { width:500px; right:-210px; bottom:-80px; }
  .latest-feedback-card blockquote { font-size:13px; }
  .evaluation-intro { align-items:flex-start; }
  .score-field { padding:9px; }
  .modal { padding:18px; border-radius:20px; }
  .modal-head { margin-bottom:14px; }
  .modal-head h3 { font-size:17px; }
}

/* =========================
   V04 — Mobile-first identity
   ========================= */
.login-v04 { min-height:100dvh; }
.login-v04 .login-brand {
  position:relative; min-height:100dvh; padding:52px clamp(28px,6vw,90px); display:flex; flex-direction:column;
  justify-content:center; align-items:center; text-align:center; overflow:hidden;
  background:
    radial-gradient(circle at 50% 32%, rgba(241,166,12,.10), transparent 31%),
    linear-gradient(160deg, rgba(6,8,12,.76), rgba(6,8,12,.98)),
    url('/assets/poster-reference.png') center/cover no-repeat;
}
.login-v04 .login-brand::before { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(6,8,12,.04),rgba(6,8,12,.52)); pointer-events:none; }
.login-v04 .login-brand::after { content:""; position:absolute; left:0; right:0; bottom:0; height:5px; background:linear-gradient(90deg,var(--yellow),#ffd35a,var(--yellow)); }
.login-brand-art { position:absolute; inset:0; pointer-events:none; opacity:.9; }
.login-brand-art svg { width:100%; height:100%; object-fit:cover; }
.minimal-lockup { position:relative; z-index:2; width:min(540px,82%); display:grid; justify-items:center; }
.minimal-logo { width:min(430px,100%); height:auto; object-fit:contain; filter:drop-shadow(0 18px 42px rgba(0,0,0,.34)); }
.minimal-place { margin-top:26px; color:#fff; font-family:Montserrat,Inter,sans-serif; font-size:clamp(18px,2vw,28px); font-weight:600; letter-spacing:.20em; }
.minimal-place strong { color:var(--yellow-2); font-weight:900; }
.minimal-date { margin-top:10px; color:var(--yellow-2); font-size:11px; letter-spacing:.27em; font-weight:900; }
.minimal-cpo { position:absolute; z-index:2; left:clamp(26px,5vw,72px); bottom:34px; }
.minimal-cpo .cpo-signature { margin:0; text-align:left; }
.login-v04 .login-panel { min-height:100dvh; }
.student-registration-note { display:flex; gap:9px; align-items:flex-start; margin:12px 0 4px; padding:11px 12px; border-radius:14px; border:1px solid rgba(241,166,12,.12); background:rgba(241,166,12,.04); color:var(--muted); font-size:9px; line-height:1.45; }
.student-registration-note .vicon { flex:0 0 auto; color:var(--yellow-2); }

/* Dedicated, instrument-shaped pictograms */
.class-card-symbol .vicon, .instrument-avatar .vicon, .class-symbol .vicon { stroke-width:1.45; }
.class-card-symbol { background:linear-gradient(145deg,#ffc232,#e99b00); box-shadow:0 12px 28px rgba(241,166,12,.16); }
.instrument-avatar { background:linear-gradient(145deg,rgba(241,166,12,.13),rgba(241,166,12,.04)); border:1px solid rgba(241,166,12,.20); }

.page-head-actions { display:flex; gap:9px; flex-wrap:wrap; justify-content:flex-end; }
.page-head-actions button { white-space:nowrap; }
.account-state { display:inline-flex; align-items:center; padding:5px 8px; border-radius:999px; background:rgba(83,210,141,.09); color:#a9f0c7; border:1px solid rgba(83,210,141,.17); font-size:8px; font-weight:800; }
.account-state.pending { background:rgba(241,166,12,.08); color:var(--yellow-2); border-color:rgba(241,166,12,.18); }
.admin-create-note { display:flex; align-items:flex-start; gap:9px; margin-top:10px; padding:11px 12px; border-radius:14px; background:rgba(28,46,68,.28); border:1px solid rgba(117,150,187,.15); color:#cbd5df; font-size:9px; line-height:1.5; }
.admin-create-note .vicon { flex:0 0 auto; color:var(--yellow-2); }
.admin-create-note.warning { background:rgba(241,166,12,.06); border-color:rgba(241,166,12,.16); }
.credentials-card { text-align:center; }
.credentials-card h4 { font-family:Montserrat,Inter,sans-serif; font-size:20px; margin:12px 0 4px; }
.credentials-card > p { color:var(--muted); font-size:10px; }
.credential-row { display:flex; justify-content:space-between; align-items:center; gap:14px; margin-top:9px; padding:12px 13px; border-radius:13px; background:#111820; border:1px solid var(--border); text-align:left; }
.credential-row span { color:var(--muted); font-size:9px; }
.credential-row strong { color:var(--yellow-2); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11px; overflow-wrap:anywhere; }

.forced-password-screen { min-height:100dvh; display:grid; grid-template-columns:minmax(320px,1fr) minmax(360px,520px); background:#080b10; }
.forced-password-brand { position:relative; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:18px; padding:48px; background:linear-gradient(160deg,rgba(5,8,12,.72),rgba(5,8,12,.96)),url('/assets/poster-reference.png') center/cover no-repeat; border-right:1px solid rgba(255,255,255,.06); }
.forced-password-brand > img { width:min(430px,74%); }
.forced-password-brand > span { color:var(--yellow-2); font-family:Montserrat,Inter,sans-serif; font-weight:900; letter-spacing:.22em; font-size:12px; }
.forced-password-brand .cpo-signature { margin-top:26px; }
.forced-password-card { align-self:center; margin:36px; padding:34px; border-radius:26px; border:1px solid var(--border); background:linear-gradient(155deg,#111720,#0c1117); box-shadow:0 28px 90px rgba(0,0,0,.35); }
.forced-password-card h1 { font-family:Montserrat,Inter,sans-serif; font-size:34px; line-height:1.06; margin:8px 0 10px; }
.forced-password-card > p { color:var(--muted); line-height:1.55; font-size:11px; margin-bottom:22px; }
.force-logout { margin-top:10px; }

@media (max-width:860px) {
  .login-v04 { display:block; }
  .login-v04 .login-brand {
    min-height:360px; height:42dvh; max-height:460px; padding:28px 22px 34px;
    justify-content:center; background:radial-gradient(circle at 50% 34%,rgba(241,166,12,.09),transparent 31%),linear-gradient(160deg,rgba(5,8,12,.78),rgba(5,8,12,.97)),url('/assets/poster-reference.png') center/cover no-repeat;
  }
  .minimal-lockup { width:min(330px,78vw); }
  .minimal-logo { width:100%; }
  .minimal-place { margin-top:15px; font-size:15px; letter-spacing:.18em; }
  .minimal-date { margin-top:7px; font-size:8px; letter-spacing:.22em; }
  .minimal-cpo { left:50%; bottom:16px; transform:translateX(-50%); width:max-content; max-width:90%; }
  .minimal-cpo .cpo-signature { justify-content:center; text-align:left; gap:8px; }
  .minimal-cpo .cpo-signature img { width:38px; max-height:34px; }
  .minimal-cpo .cpo-signature span { font-size:7px; max-width:165px; }
  .login-v04 .login-panel { min-height:auto; padding:26px 20px calc(34px + env(safe-area-inset-bottom)); border-top:0; }
  .login-v04 .login-panel::before { width:100%; height:4px; }
  .login-v04 .login-card { margin:0 auto; }
  .forced-password-screen { grid-template-columns:1fr; }
  .forced-password-brand { min-height:250px; padding:28px 20px; border-right:0; border-bottom:3px solid var(--yellow); }
  .forced-password-brand > img { width:min(300px,72vw); }
  .forced-password-brand .cpo-signature { margin-top:6px; }
  .forced-password-card { margin:20px; padding:24px; }
}

@media (max-width:560px) {
  .login-v04 .login-brand { min-height:320px; height:37dvh; max-height:390px; padding:20px 16px 28px; }
  .login-brand-art svg { transform:scale(1.15); }
  .minimal-lockup { width:min(292px,77vw); }
  .minimal-place { margin-top:12px; font-size:13px; letter-spacing:.17em; }
  .minimal-date { font-size:7.5px; }
  .minimal-cpo { bottom:13px; }
  .login-v04 .login-panel { padding:21px 18px calc(32px + env(safe-area-inset-bottom)); }
  .login-v04 .login-card-head { margin-bottom:7px; }
  .login-v04 .login-card-head h2 { font-size:28px; }
  .login-v04 .login-card > p { font-size:10px; margin-bottom:16px; }
  .login-v04 .field { padding:12px 13px; }
  .login-v04 .form-group { margin-bottom:12px; }
  .page-head-actions { width:100%; display:grid; grid-template-columns:1fr 1fr; }
  .page-head-actions button { justify-content:center; }
  .forced-password-brand { min-height:210px; }
  .forced-password-card { margin:14px; padding:21px; border-radius:20px; }
  .forced-password-card h1 { font-size:28px; }
}
.file-open-btn{display:inline-flex;align-items:center;gap:6px;border:1px solid rgba(241,166,12,.2);background:rgba(241,166,12,.07);color:var(--yellow-2);border-radius:10px;padding:7px 10px;font-size:9px;font-weight:800;cursor:pointer}.file-open-btn:hover{background:rgba(241,166,12,.13)}
@media(max-width:560px){.file-row{grid-template-columns:auto minmax(0,1fr) auto}.file-row .file-open-btn{grid-column:2/-1;justify-self:end}}

/* =========================
   V1.2 — mobile login & public registration fixes
   ========================= */
.table-danger-btn{display:inline-flex;align-items:center;gap:6px;border:1px solid rgba(255,92,92,.22);background:rgba(255,92,92,.07);color:#ffaaaa;border-radius:10px;padding:7px 9px;font-size:9px;font-weight:800;cursor:pointer;white-space:nowrap}
.table-danger-btn:hover{background:rgba(255,92,92,.13)}
.table-danger-btn:disabled{opacity:.45;cursor:wait}
.protected-profile{display:inline-flex;padding:5px 8px;border-radius:999px;background:rgba(255,255,255,.04);border:1px solid var(--border);color:var(--muted);font-size:8px;font-weight:800}
.registration-error{margin:0 0 16px;padding:11px 12px;border-radius:13px;background:rgba(255,80,80,.08);border:1px solid rgba(255,80,80,.2);color:#ffc4c4;font-size:10px;line-height:1.45}
.public-login-link,.public-login-button{text-decoration:none}
.public-credentials{margin:15px 0}
.registration-complete h3{font-family:Montserrat,Inter,sans-serif;font-size:24px;margin:12px 0 6px}.registration-complete>p{color:var(--muted)}

@media(max-width:860px){
  .login-v04 .login-brand{
    min-height:0;height:auto;max-height:none;padding:24px 20px 20px;
    justify-content:flex-start;gap:12px;
  }
  .minimal-lockup{width:min(280px,70vw);margin:0 auto}
  .minimal-logo{width:100%;max-height:235px;object-fit:contain}
  .minimal-place{margin-top:8px;font-size:12px;line-height:1.2;letter-spacing:.15em;white-space:nowrap}
  .minimal-cpo{position:relative;left:auto;bottom:auto;transform:none;width:auto;max-width:100%;margin-top:4px}
  .minimal-cpo .cpo-signature{justify-content:center;gap:8px}
  .minimal-cpo .cpo-signature img{width:34px;max-height:32px}
  .minimal-cpo .cpo-signature span{font-size:7px;line-height:1.25;max-width:180px;text-align:left}
  .login-v04 .login-panel{padding-top:22px}
}
@media(max-width:560px){
  .login-v04 .login-brand{min-height:0;height:auto;max-height:none;padding:18px 16px 17px}
  .minimal-lockup{width:min(250px,66vw)}
  .minimal-logo{max-height:215px}
  .minimal-place{font-size:11px;letter-spacing:.14em;margin-top:5px}
  .minimal-cpo{margin-top:2px}
  .minimal-cpo .cpo-signature img{width:30px;max-height:29px}
  .minimal-cpo .cpo-signature span{font-size:6.5px;max-width:165px}
  .login-brand-art svg{transform:none}
  .registration-top{height:64px}
  .registration-main{min-height:calc(100dvh - 64px);padding:16px 12px 28px}
  .registration-card{padding:20px 15px;border-radius:20px}
  .registration-card h1{font-size:30px}
  .registration-brand .sidebar-logo-box{width:36px;height:36px;border-radius:10px}
  .registration-brand strong{font-size:10px}
  .public-login-link{padding:8px 10px}
}
.class-assign-btn{position:relative;z-index:2;margin-top:12px;width:100%;display:flex;align-items:center;justify-content:center;gap:6px;border:1px solid rgba(241,166,12,.18);background:rgba(241,166,12,.06);color:var(--yellow-2);border-radius:11px;padding:8px 10px;font-size:9px;font-weight:800;cursor:pointer}.class-assign-btn:hover{background:rgba(241,166,12,.12)}
.warning-banner{margin-bottom:0;background:rgba(241,166,12,.07);border-color:rgba(241,166,12,.2)}.warning-banner strong{color:var(--yellow-2)}

/* V1.3 — definitive mobile cover layout: no absolute overlap */
@media (max-width:860px){
  .login-v04 .login-brand{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:flex-start!important;
    min-height:0!important;
    height:auto!important;
    max-height:none!important;
    padding:18px 16px 16px!important;
    gap:8px!important;
    overflow:hidden;
  }
  .login-v04 .minimal-lockup{position:relative!important;z-index:2;width:min(300px,72vw)!important;margin:0 auto!important;flex:0 0 auto}
  .login-v04 .minimal-logo{width:100%!important;height:auto!important;max-height:230px!important;object-fit:contain!important}
  .login-v04 .minimal-place{position:relative!important;margin:5px 0 0!important;text-align:center!important;line-height:1.2!important;white-space:nowrap!important;font-size:12px!important;letter-spacing:.14em!important}
  .login-v04 .minimal-cpo{position:relative!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;transform:none!important;width:100%!important;max-width:310px!important;margin:0 auto!important;z-index:2!important}
  .login-v04 .minimal-cpo .cpo-signature{display:flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;margin:0!important;min-height:34px!important}
  .login-v04 .minimal-cpo .cpo-signature img{width:32px!important;height:30px!important;max-height:30px!important;object-fit:contain!important;flex:0 0 auto!important}
  .login-v04 .minimal-cpo .cpo-signature span{display:block!important;font-size:7px!important;line-height:1.25!important;max-width:180px!important;text-align:left!important;white-space:normal!important}
  .login-v04 .login-panel{padding-top:20px!important}
}
@media (max-width:430px){
  .login-v04 .minimal-lockup{width:min(265px,70vw)!important}
  .login-v04 .minimal-logo{max-height:205px!important}
  .login-v04 .minimal-place{font-size:11px!important;letter-spacing:.13em!important}
  .login-v04 .minimal-cpo{max-width:270px!important}
  .login-v04 .minimal-cpo .cpo-signature img{width:29px!important;height:27px!important}
  .login-v04 .minimal-cpo .cpo-signature span{font-size:6.5px!important;max-width:165px!important}
}

.mc-static-loader{min-height:100vh;display:flex;flex-direction:column;gap:8px;align-items:center;justify-content:center;color:#f7f5ef}.mc-static-loader strong{font-family:Montserrat,Inter,system-ui;font-size:24px}.mc-static-loader span{color:#a7b0bd;font-size:14px}

/* v1.8 admin CRUD */
.timeline-side{display:flex;align-items:center;gap:9px;justify-content:flex-end;flex-wrap:wrap}.timeline-admin{grid-template-columns:70px minmax(0,1fr) auto}.timeline-admin .row-actions{margin-left:2px}.table-danger-btn.compact{padding:7px;width:34px;height:34px;justify-content:center}.notice-manage{grid-template-columns:auto minmax(0,1fr) auto}.notice-actions{align-self:center}.managed-file-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto}.file-actions{justify-content:flex-end;flex-wrap:wrap}.admin-notification-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:13px 0;border-bottom:1px solid var(--border)}.admin-notification-row:last-child{border-bottom:0}.admin-notification-main strong,.admin-notification-main span,.admin-notification-main time{display:block}.admin-notification-main span{color:var(--muted);font-size:11px;margin-top:4px}.admin-notification-main time{color:var(--muted-2);font-size:9px;margin-top:7px}
@media(max-width:680px){.timeline-admin{grid-template-columns:55px minmax(0,1fr)}.timeline-admin .timeline-side{grid-column:2;justify-content:flex-start}.notice-manage{grid-template-columns:auto minmax(0,1fr)}.notice-actions{grid-column:2;justify-content:flex-end}.managed-file-row{grid-template-columns:auto minmax(0,1fr) auto}.managed-file-row .file-actions{grid-column:2/-1}.admin-notification-row{grid-template-columns:auto minmax(0,1fr)}.admin-notification-row>.row-actions{grid-column:2;justify-content:flex-end}}


/* configurable planning spaces */
.space-list { display:grid; gap:12px; margin-top:14px; }
.space-row { display:grid; grid-template-columns:52px minmax(0,1fr) auto auto; gap:14px; align-items:center; padding:15px; border:1px solid var(--border); border-radius:16px; background:rgba(255,255,255,.018); }
.space-order { width:42px; height:42px; border-radius:13px; display:grid; place-items:center; background:rgba(241,166,12,.12); color:var(--yellow); font-weight:800; }
.space-main { min-width:0; display:grid; gap:4px; }
.space-main strong { font-size:15px; }
.space-main span { color:var(--muted); font-size:13px; white-space:normal; }
@media (max-width:720px){
  .space-row { grid-template-columns:44px minmax(0,1fr); }
  .space-row > .badge { justify-self:start; grid-column:2; }
  .space-row > .row-actions { grid-column:1 / -1; width:100%; }
  .space-row > .row-actions button { flex:1; justify-content:center; }
  .planning-grid { min-width:max(760px, calc(78px + var(--room-count, 3) * 180px)); }
}