/* OpenPath Unified Design System
   Shared foundation for Public, Enrollment, LMS, Admin and future Mobile shells. */
:root {
  --op-bg: #050816;
  --op-bg-elevated: #0b1020;
  --op-panel: rgba(14, 21, 48, .76);
  --op-panel-strong: #10172f;
  --op-surface: #ffffff;
  --op-surface-soft: #f5f7fc;
  --op-line: rgba(148, 177, 255, .18);
  --op-line-light: #e6e9f2;
  --op-text: #f5f7ff;
  --op-text-dark: #15182a;
  --op-muted: #aeb9d9;
  --op-muted-dark: #68708a;
  --op-blue: #4ea1ff;
  --op-blue-strong: #347cff;
  --op-cyan: #41e7ff;
  --op-violet: #8f83ff;
  --op-gold: #ffcc67;
  --op-success: #18b981;
  --op-warning: #ff9f43;
  --op-danger: #ef476f;
  --op-radius-sm: 12px;
  --op-radius: 18px;
  --op-radius-lg: 24px;
  --op-shadow: 0 18px 45px rgba(0, 0, 0, .24);
  --op-shadow-light: 0 18px 45px rgba(24, 31, 61, .09);
  --op-gradient: linear-gradient(135deg, #347cff, #755bff);
  --op-gradient-text: linear-gradient(110deg, var(--op-blue), var(--op-violet) 52%, var(--op-cyan));
  --op-font: Manrope, Inter, "Segoe UI", system-ui, sans-serif;
  --op-transition: 220ms ease;
}

.op-brand-shell {
  color: var(--op-text);
  background:
    radial-gradient(circle at 80% 15%, rgba(78, 161, 255, .14), transparent 32%),
    radial-gradient(circle at 15% 85%, rgba(117, 91, 255, .12), transparent 35%),
    var(--op-bg);
  font-family: var(--op-font);
}

.op-glass {
  border: 1px solid var(--op-line);
  background: var(--op-panel);
  backdrop-filter: blur(18px);
  box-shadow: var(--op-shadow);
}

.op-card {
  border: 1px solid var(--op-line);
  border-radius: var(--op-radius-lg);
  background: linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
}

.op-button-primary {
  color: #fff;
  border: 0;
  border-radius: 14px;
  background: var(--op-gradient);
  box-shadow: 0 15px 45px rgba(61, 108, 255, .30);
  font-weight: 800;
  transition: transform var(--op-transition), box-shadow var(--op-transition);
}
.op-button-primary:hover { transform: translateY(-2px); }

.op-button-secondary {
  color: var(--op-text);
  border: 1px solid var(--op-line);
  border-radius: 14px;
  background: rgba(255,255,255,.035);
}

.op-heading-gradient {
  background: var(--op-gradient-text);
  background-clip: text;
  color: transparent;
}

.op-app-shell {
  min-height: 100vh;
  color: var(--op-text-dark);
  background: var(--op-surface-soft);
  font-family: var(--op-font);
}

.op-sidebar {
  color: var(--op-text);
  border-right: 1px solid var(--op-line);
  background:
    linear-gradient(180deg, rgba(11,16,32,.98), rgba(5,8,22,.98));
}

.op-workspace-card {
  border: 1px solid var(--op-line-light);
  border-radius: var(--op-radius);
  background: var(--op-surface);
  box-shadow: var(--op-shadow-light);
}

.op-input {
  min-height: 54px;
  color: var(--op-text-dark);
  background: var(--op-surface);
  border: 1px solid var(--op-line-light);
  border-radius: 14px;
  outline: none;
  transition: border-color var(--op-transition), box-shadow var(--op-transition);
}
.op-input:focus {
  border-color: var(--op-violet);
  box-shadow: 0 0 0 4px rgba(143,131,255,.14);
}

.op-badge {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .4rem .7rem;
  border-radius: 999px;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .04em;
}

.op-department-languages { --op-department-accent: var(--op-blue); }
.op-department-skills { --op-department-accent: var(--op-violet); }

.op-ad-slot {
  width: 100%;
  min-height: 90px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: var(--op-radius);
}

.op-course-card__visual{display:block;margin:-8px -8px 16px;overflow:hidden;border-radius:17px;aspect-ratio:16/9;background:#090f25}.op-course-card__visual img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}.op-course-card__visual:hover img{transform:scale(1.035)}
.op-showcase{padding:68px 0}.op-showcase__head{max-width:720px;margin-bottom:24px}.op-showcase__head h2{font-size:clamp(2.2rem,5vw,4rem);margin:8px 0}.op-showcase__head p{color:var(--op-muted);line-height:1.7}.op-showcase__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px}.op-showcase__card{overflow:hidden;border-radius:24px}.op-showcase__card>img,.op-video{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;background:#080d20}.op-video iframe{width:100%;height:100%;border:0}.op-showcase__copy{padding:20px}.op-showcase__copy span{color:var(--op-cyan);font-size:.74rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.op-showcase__copy h3{font-size:1.35rem;margin:9px 0}.op-showcase__copy p{color:var(--op-muted);line-height:1.6}.op-showcase__copy a{color:var(--op-cyan);font-weight:800;text-decoration:none}
.op-course-card__visual{border:0;color:#fff;padding:0;position:relative;cursor:zoom-in}.op-course-card__visual span{position:absolute;right:10px;bottom:10px;padding:7px 10px;border-radius:999px;background:rgba(5,8,22,.82);font-size:.72rem;font-weight:800;backdrop-filter:blur(8px)}.op-showcase__actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.op-showcase__actions button{border:1px solid var(--op-line);border-radius:10px;padding:8px 10px;background:rgba(65,231,255,.08);color:var(--op-cyan);font:800 .78rem var(--op-font);cursor:zoom-in}.op-media-viewer[hidden]{display:none}.op-media-viewer{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;padding:22px;background:rgba(1,4,14,.9);backdrop-filter:blur(16px)}.op-media-viewer__dialog{width:min(1180px,100%);max-height:calc(100vh - 44px);display:grid;grid-template-rows:auto minmax(0,1fr);overflow:hidden;border:1px solid rgba(148,177,255,.25);border-radius:22px;background:#070b1b;box-shadow:0 35px 120px rgba(0,0,0,.6)}.op-media-viewer__dialog header{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:14px 18px;color:#fff}.op-media-viewer__dialog h2{margin:0;font-size:1rem}.op-media-viewer__dialog header button{border:1px solid rgba(255,255,255,.2);border-radius:10px;background:transparent;color:#fff;padding:8px 11px;cursor:pointer}.op-media-viewer__stage{display:grid;place-items:center;min-height:260px;overflow:auto;background:#02040c}.op-media-viewer__stage img{display:block;width:auto;height:auto;max-width:100%;max-height:calc(100vh - 125px);object-fit:contain}.op-media-viewer__stage iframe{width:min(100%,1120px);aspect-ratio:16/9;border:0}

.op-news-feed{padding:68px 0}.op-news-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px}.op-news-card{overflow:hidden;border-radius:24px}.op-feed-media{display:block;width:100%;padding:0;border:0;position:relative;aspect-ratio:16/9;background:#081027;cursor:zoom-in;overflow:hidden}.op-feed-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}.op-feed-media:hover img{transform:scale(1.035)}.op-feed-media span{position:absolute;right:12px;bottom:12px;padding:8px 11px;border-radius:999px;background:rgba(5,8,22,.85);color:#fff;font:800 .72rem var(--op-font)}.op-news-copy{padding:20px}.op-news-copy small{color:var(--op-cyan);font-weight:800}.op-news-copy h3{font-size:1.35rem;margin:9px 0}.op-news-copy p{color:var(--op-muted);line-height:1.65}.op-news-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.op-news-actions a,.op-news-actions button{border:1px solid var(--op-line);border-radius:10px;padding:9px 11px;background:rgba(65,231,255,.08);color:var(--op-cyan);font:800 .78rem var(--op-font);text-decoration:none;cursor:pointer}.op-comments[hidden]{display:none}.op-comments{position:fixed;inset:0;z-index:10020;display:grid;place-items:center;padding:20px;background:rgba(1,4,14,.9);backdrop-filter:blur(14px)}.op-comments__dialog{width:min(680px,100%);max-height:calc(100vh - 40px);display:grid;grid-template-rows:auto minmax(150px,1fr) auto;overflow:hidden;border:1px solid var(--op-line);border-radius:22px;background:#070b1b;color:#fff}.op-comments__dialog header{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;border-bottom:1px solid var(--op-line)}.op-comments__dialog h2{margin:0;font-size:1.05rem}.op-comments__dialog header button{border:1px solid var(--op-line);border-radius:10px;background:transparent;color:#fff;padding:8px 11px;cursor:pointer}.op-comment-list{overflow:auto;padding:18px}.op-comment-list article{padding:12px 0;border-bottom:1px solid var(--op-line)}.op-comment-list article p{margin:5px 0;color:var(--op-muted);line-height:1.55}.op-comments form{padding:16px 18px;border-top:1px solid var(--op-line)}.op-comments textarea{width:100%;border:1px solid var(--op-line);border-radius:12px;background:#0b1228;color:#fff;padding:11px;font:inherit}.op-comments form button{margin-top:9px;border:0;border-radius:11px;background:var(--op-gradient);color:#fff;padding:10px 14px;font-weight:800;cursor:pointer}.op-comments form p{min-height:1.2em;color:var(--op-cyan);font-size:.82rem}.op-comments form a{color:var(--op-cyan)}

/* Ads never appear inside authentication, payment or staff administration shells. */
.op-auth-shell .op-ad-slot,
.op-payment-shell .op-ad-slot,
.op-admin-shell .op-ad-slot { display: none !important; }

@media (max-width: 760px) {
  :root { --op-radius-lg: 20px; }
  .op-ad-slot { min-height: 60px; }
}