/* ============================================================
   VRUSHYAM CLASSROOM — matches Vrushyam Technology brand
   ============================================================ */
:root {
  --accent:#00e5a0; --accent2:#00b8d9; --accent3:#7c3aed;
  --bg:#0a0f1e; --bg2:#0d1529; --bg3:#111d35;
  --card:#0f1b2d; --card2:#162038;
  --border:rgba(0,229,160,.15);
  --text:#e8f4f8; --text2:#8baac0; --text3:#4a6880;
  --nav-bg:rgba(10,15,30,.92);
  --shadow:0 8px 32px rgba(0,0,0,.4);
  --glow:0 0 40px rgba(0,229,160,.15);
  --danger:#ff5d7a; --warn:#ffb454;
}

/* ── LIGHT MODE OVERRIDES ── */
[data-theme="light"] {
  --bg:#f4f6fa; --bg2:#ffffff; --bg3:#e9ecef;
  --card:#ffffff; --card2:#f8f9fa;
  --border:rgba(0,180,120,.2);
  --text:#0f172a; --text2:#475569; --text3:#94a3b8;
  --nav-bg:rgba(255,255,255,.94);
  --shadow:0 8px 30px rgba(0,0,0,.08);
  --glow:0 0 30px rgba(0,180,120,.12);
}

/* ════════════════════════════════════════════════════════════
   PROFESSIONAL UNIFIED NAVBAR & GOOGLE-STYLE 3x3 APPS SWITCHER
   ════════════════════════════════════════════════════════════ */

.v-navbar {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  height: 68px;
  background: var(--nav-bg, rgba(10, 15, 30, 0.94));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border, rgba(0, 229, 160, 0.15));
  z-index: 9999;
  display: flex;
  align-items: center;
  padding: 0 4%;
  transition: all 0.3s ease;
}

[data-theme="light"] .v-navbar {
  background: rgba(255, 255, 255, 0.95);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.v-navbar-inner {
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Brand */
.v-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none !important;
}

.v-brand-logo {
  height: 36px !important;
  max-height: 36px !important;
  width: auto !important;
  object-fit: contain !important;
  display: block;
}

.v-brand-badge {
  font-family: 'Space Mono', monospace;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--accent, #00e5a0);
  border-left: 1.5px solid var(--border, rgba(0, 229, 160, 0.3));
  padding-left: 12px;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Nav Links */
.v-nav-menu {
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.v-nav-link {
  color: var(--text2, #8baac0);
  font-size: 0.88rem;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: 10px;
  text-decoration: none !important;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 6px;
}

[data-theme="light"] .v-nav-link {
  color: #475569;
}

.v-nav-link:hover,
.v-nav-link.active {
  color: var(--accent, #00e5a0) !important;
  background: rgba(0, 229, 160, 0.1);
}

/* Right Corner Controls (Google-style) */
.v-nav-right {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
}

.v-icon-btn {
  background: var(--card, #0f1b2d);
  border: 1px solid var(--border, rgba(0, 229, 160, 0.2));
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text, #e8f4f8);
  font-size: 1.2rem;
  cursor: pointer;
  transition: all 0.25s ease;
  outline: none;
}

[data-theme="light"] .v-icon-btn {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #1e293b;
}

.v-icon-btn:hover,
.v-icon-btn.active {
  border-color: var(--accent, #00e5a0);
  color: var(--accent, #00e5a0);
  background: rgba(0, 229, 160, 0.12);
  transform: scale(1.05);
}

[data-theme="dark"] .theme-icon-sun { display: inline-block; color: #f59e0b; }
[data-theme="dark"] .theme-icon-moon { display: none; }
[data-theme="light"] .theme-icon-sun { display: none; }
[data-theme="light"] .theme-icon-moon { display: inline-block; color: #6366f1; }

.v-btn-primary {
  background: linear-gradient(135deg, #00e5a0, #00b8d9);
  color: #04160f !important;
  font-weight: 700;
  font-size: 0.82rem;
  padding: 8px 20px;
  border-radius: 50px;
  border: none;
  text-decoration: none !important;
  transition: all 0.25s ease;
  white-space: nowrap;
}

.v-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(0, 229, 160, 0.4);
}

/* ════════════════════════════════════════════════════════════
   GOOGLE-STYLE 3x3 APPS POPOVER MODAL
   ════════════════════════════════════════════════════════════ */
.v-apps-popover {
  display: none !important;
  position: absolute;
  top: calc(100% + 14px);
  right: 0;
  width: 320px;
  background: #141c2e;
  border: 1px solid rgba(0, 229, 160, 0.25);
  border-radius: 24px;
  padding: 20px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  z-index: 99999;
}

[data-theme="light"] .v-apps-popover {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
}

.v-apps-popover.open {
  display: block !important;
  animation: vPopIn 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes vPopIn {
  from { opacity: 0; transform: translateY(-8px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.v-popover-header {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--text2, #8baac0);
  text-transform: uppercase;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

[data-theme="light"] .v-popover-header {
  color: #64748b;
  border-bottom-color: #f1f5f9;
}

.v-apps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px 8px;
}

.v-app-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 4px;
  border-radius: 16px;
  text-decoration: none !important;
  transition: all 0.2s ease;
}

.v-app-tile:hover {
  background: rgba(0, 229, 160, 0.1);
  transform: translateY(-2px);
}

.v-app-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  margin-bottom: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.v-app-icon.main {
  background: linear-gradient(135deg, #00e5a0, #00b8d9);
  color: #04160f;
}

.v-app-icon.classroom {
  background: linear-gradient(135deg, #7c3aed, #a78bfa);
  color: #ffffff;
}

.v-app-icon.games {
  background: linear-gradient(135deg, #ec4899, #f59e0b);
  color: #ffffff;
}

.v-app-icon.projects {
  background: linear-gradient(135deg, #3b82f6, #06b6d4);
  color: #ffffff;
}

.v-app-icon.services {
  background: linear-gradient(135deg, #f59e0b, #10b981);
  color: #ffffff;
}

.v-app-icon.contact {
  background: linear-gradient(135deg, #14b8a6, #6366f1);
  color: #ffffff;
}

.v-app-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text, #e8f4f8);
  text-align: center;
  line-height: 1.2;
}

[data-theme="light"] .v-app-label {
  color: #1e293b;
}

/* Mobile Responsive Navbar */
.v-hamburger {
  display: none;
  background: none;
  border: none;
  color: var(--text, #e8f4f8);
  font-size: 1.4rem;
  cursor: pointer;
}

@media (max-width: 991px) {
  .v-hamburger { display: block; }
  .v-nav-menu {
    display: none;
    position: absolute;
    top: 68px;
    left: 0;
    right: 0;
    background: var(--nav-bg, #0a0f1e);
    border-bottom: 2px solid var(--accent, #00e5a0);
    padding: 16px 5%;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  }
  .v-nav-menu.mobile-open { display: flex; }
}

.btn-accent-custom {
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  color: #04160f !important;
  font-weight: 700;
  border: none;
  transition: all 0.25s ease;
}

.btn-accent-custom:hover {
  transform: translateY(-1px);
  box-shadow: var(--glow);
}

.btn-outline-custom {
  border: 1px solid var(--border);
  color: var(--text);
  background: transparent;
  transition: all 0.25s ease;
}

.btn-outline-custom:hover {
  border-color: var(--accent);
  color: var(--accent);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Poppins',sans-serif;background:var(--bg);color:var(--text);font-size:14px;min-height:100vh}
a{color:var(--accent);text-decoration:none}
img{max-width:100%}

/* ── NAV ── */
.vc-nav{position:sticky;top:0;z-index:100;background:var(--nav-bg);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
.vc-nav-inner{max-width:1200px;margin:auto;display:flex;align-items:center;gap:22px;padding:12px 20px}
.vc-brand{display:flex;align-items:center;gap:10px}
.vc-brand img{height:38px}
.vc-brand .sub{font-family:'Space Mono',monospace;font-size:15px;letter-spacing:2px;color:var(--accent);border-left:1px solid var(--border);padding-left:10px;text-transform:uppercase}
.vc-links{display:flex;gap:6px;margin-left:auto;align-items:center;flex-wrap:wrap}
.vc-links a{color:var(--text2);padding:8px 12px;border-radius:8px;font-weight:500;font-size:13px}
.vc-links a:hover,.vc-links a.active{color:var(--accent);background:rgba(0,229,160,.08)}
.hamb{display:none;margin-left:auto;background:none;border:1px solid var(--border);color:var(--text);border-radius:8px;padding:6px 10px;font-size:18px;cursor:pointer}

/* ── layout ── */
.container{max-width:1200px;margin:auto;padding:28px 20px}
.page-title{font-size:26px;font-weight:700;margin-bottom:4px}
.page-sub{color:var(--text2);margin-bottom:24px}
.grid{display:grid;gap:18px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}

/* ── cards ── */
.card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:20px;box-shadow:var(--shadow)}
.course-card{background:var(--card);border:1px solid var(--border);border-radius:14px;overflow:hidden;transition:.25s;display:flex;flex-direction:column}
.course-card:hover{transform:translateY(-4px);box-shadow:var(--glow);border-color:rgba(0,229,160,.4)}
.course-card .thumb{height:150px;background:linear-gradient(120deg,var(--bg3),var(--card2));display:flex;align-items:center;justify-content:center;font-size:40px;color:var(--accent)}
.course-card .thumb img{width:100%;height:100%;object-fit:cover}
.course-card .body{padding:16px;display:flex;flex-direction:column;gap:8px;flex:1}
.course-card h3{font-size:16px}
.course-card p{color:var(--text2);font-size:12.5px;flex:1}
.price{font-family:'Space Mono',monospace;color:var(--accent);font-weight:700;font-size:16px}
.badge{display:inline-block;font-size:11px;padding:3px 10px;border-radius:20px;background:rgba(0,229,160,.12);color:var(--accent);border:1px solid var(--border);font-weight:600}
.badge.purple{background:rgba(124,58,237,.15);color:#b794f6;border-color:rgba(124,58,237,.3)}
.badge.warn{background:rgba(255,180,84,.12);color:var(--warn);border-color:rgba(255,180,84,.3)}
.badge.danger{background:rgba(255,93,122,.12);color:var(--danger);border-color:rgba(255,93,122,.3)}

/* ── buttons & forms ── */
.btn{display:inline-block;background:linear-gradient(90deg,var(--accent),var(--accent2));color:#04160f;font-weight:700;border:none;border-radius:10px;padding:11px 22px;cursor:pointer;font-size:13.5px;font-family:'Poppins';transition:.2s;text-align:center}
.btn:hover{filter:brightness(1.1);transform:translateY(-1px)}
.btn.ghost{background:transparent;color:var(--accent);border:1px solid var(--border)}
.btn.danger{background:linear-gradient(90deg,#ff5d7a,#ff8a5c);color:#fff}
.btn.small{padding:7px 14px;font-size:12px}
.btn.block{display:block;width:100%}
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none}
label{display:block;font-size:12.5px;color:var(--text2);margin:14px 0 6px;font-weight:500}
input,select,textarea{width:100%;background:var(--bg2);border:1px solid var(--border);color:var(--text);border-radius:10px;padding:11px 14px;font-family:'Poppins';font-size:13.5px;outline:none;transition:.2s}
input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(0,229,160,.12)}
.auth-wrap{max-width:440px;margin:6vh auto;padding:0 20px}
.auth-card{background:var(--card);border:1px solid var(--border);border-radius:18px;padding:34px;box-shadow:var(--glow)}
.auth-card h1{font-size:22px;margin-bottom:4px}
.auth-card .sub{color:var(--text2);font-size:13px;margin-bottom:10px}
.otp-input{letter-spacing:14px;font-size:24px;text-align:center;font-family:'Space Mono',monospace}

/* ── alerts ── */
.alert{border-radius:10px;padding:12px 16px;margin:0 0 16px;font-size:13px;border:1px solid}
.alert-success{background:rgba(0,229,160,.1);border-color:rgba(0,229,160,.35);color:var(--accent)}
.alert-error{background:rgba(255,93,122,.1);border-color:rgba(255,93,122,.35);color:var(--danger)}
.alert-info{background:rgba(0,184,217,.1);border-color:rgba(0,184,217,.35);color:var(--accent2)}

/* ── tables ── */
.table-wrap{overflow-x:auto}
table.vc{width:100%;border-collapse:collapse;font-size:13px}
table.vc th{text-align:left;color:var(--text3);font-size:11px;text-transform:uppercase;letter-spacing:1px;padding:10px 12px;border-bottom:1px solid var(--border)}
table.vc td{padding:12px;border-bottom:1px solid rgba(255,255,255,.04)}
table.vc tr:hover td{background:rgba(0,229,160,.03)}

/* ── progress ── */
.progress{height:8px;background:var(--bg3);border-radius:20px;overflow:hidden}
.progress span{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:20px;transition:width .6s}

/* ── SKELETON LOADING ── */
@keyframes shimmer{0%{background-position:-450px 0}100%{background-position:450px 0}}
.skel{position:relative;color:transparent!important;pointer-events:none;border-radius:8px;background:linear-gradient(90deg,var(--card2) 25%,#1c2a45 37%,var(--card2) 63%);background-size:900px 100%;animation:shimmer 1.3s linear infinite}
.skel *{visibility:hidden}
.skel-line{height:14px;border-radius:6px;margin-bottom:10px;background:linear-gradient(90deg,var(--card2) 25%,#1c2a45 37%,var(--card2) 63%);background-size:900px 100%;animation:shimmer 1.3s linear infinite}
.skel-thumb{height:150px;border-radius:0}
[data-skeleton]{opacity:0;transition:opacity .35s}
[data-skeleton].loaded{opacity:1}

/* ── admin shell ── */
.admin-shell{display:grid;grid-template-columns:240px 1fr;min-height:100vh}
.admin-side{background:var(--bg2);border-right:1px solid var(--border);padding:20px 14px;position:sticky;top:0;height:100vh;overflow-y:auto}
.admin-side .vc-brand{margin-bottom:24px;padding:0 8px}
.admin-side a{display:flex;gap:10px;align-items:center;color:var(--text2);padding:10px 12px;border-radius:10px;font-size:13px;margin-bottom:3px}
.admin-side a:hover,.admin-side a.active{background:rgba(0,229,160,.1);color:var(--accent)}
.admin-main{padding:26px 30px;min-width:0}
.stat-card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:18px}
.stat-card .num{font-family:'Space Mono',monospace;font-size:26px;color:var(--accent);font-weight:700}
.stat-card .lbl{color:var(--text2);font-size:12px;margin-top:2px}

/* ── footer ── */
.vc-footer{border-top:1px solid var(--border);padding:22px;text-align:center;color:var(--text3);font-size:12px;margin-top:40px}

/* ── certificate ── */
.cert{max-width:900px;margin:30px auto;background:#fdfcf7;color:#12203a;border:12px solid #0a0f1e;outline:3px solid #00e5a0;outline-offset:-22px;padding:70px 60px;text-align:center;font-family:'Poppins',serif;position:relative}
.cert h1{font-size:34px;letter-spacing:3px;text-transform:uppercase;color:#0a0f1e}
.cert .name{font-size:38px;font-weight:700;color:#0a7a58;margin:18px 0;border-bottom:2px solid #00e5a0;display:inline-block;padding:0 30px 8px}
.cert .code{font-family:'Space Mono',monospace;font-size:12px;color:#5a6b85;position:absolute;bottom:26px;left:0;right:0}
@media print{body *{visibility:hidden}.cert,.cert *{visibility:visible}.cert{position:absolute;inset:0;margin:0}}

@media(max-width:900px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}.admin-shell{grid-template-columns:1fr}.admin-side{position:relative;height:auto}}
@media(max-width:640px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}.vc-links{display:none;width:100%;flex-direction:column;align-items:stretch}.vc-links.open{display:flex}.vc-nav-inner{flex-wrap:wrap}.hamb{display:block}}