/* Paramount E-Course — responsive visual system v1.0 */
:root {
  --content-max: 1320px;
  --gutter: clamp(16px, 3vw, 40px);
  --surface-elevated: color-mix(in srgb, var(--sf) 86%, var(--g) 14%);
  --focus-ring: 0 0 0 4px color-mix(in srgb, var(--g) 22%, transparent);
}

html { scroll-behavior: smooth; }
body { min-width: 320px; text-rendering: optimizeLegibility; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; z-index:-1; background:radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--g) 5%, transparent), transparent 34%), radial-gradient(circle at 92% 12%, color-mix(in srgb, var(--blue) 4%, transparent), transparent 28%); }
:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.container, .lp-section-inner, .trust-inner { width:min(100% - (var(--gutter) * 2), var(--content-max)); padding-left:0; padding-right:0; }
.page { padding-top:calc(var(--nav-h) + clamp(24px, 5vw, 56px)); }
.page > .container > h1, .page-title, .section-title { letter-spacing:-.03em; }

/* Navigation */
.navbar { height:clamp(62px, 5vw, 74px); }
.nav-inner { width:min(100% - (var(--gutter) * 2), 1440px); padding:0; }
.nav-logo { min-width:0; }
.nav-logo-text { font-size:clamp(14px, 1.5vw, 18px); white-space:nowrap; }
.nav-actions { min-width:0; }
.hamburger { display:none; width:42px; height:42px; border:1px solid var(--bd2); border-radius:12px; background:var(--sf2); padding:10px; }
.hamburger span { display:block; height:2px; margin:4px 0; border-radius:2px; background:var(--t); transition:.2s; }
.mobile-nav { top:clamp(62px, 5vw, 74px); padding:18px var(--gutter) calc(24px + env(safe-area-inset-bottom)); border-left:1px solid var(--bd2); border-bottom:1px solid var(--bd2); border-radius:0 0 18px 18px; box-shadow:0 24px 60px rgba(0,0,0,.38); }
.mobile-nav-links { display:grid; gap:6px; }
.mobile-nav-link { padding:14px 15px; border:1px solid transparent; border-radius:12px; color:var(--t2); }
.mobile-nav-link:hover, .mobile-nav-link.active { color:var(--t); background:var(--gg); border-color:var(--bd2); }

/* Reusable surfaces */
.card, .db-card, .td-card, .db-stat, .td-stat { box-shadow:0 10px 28px rgba(0,0,0,.10); }
.illusion-mark { width:38px; height:38px; max-width:100%; object-fit:contain; flex:0 0 38px; }
[data-theme="dark"] .illusion-mark { filter:invert(1); }
[data-theme="light"] .illusion-mark { filter:none; }
.brand-mark-adaptive { max-width:100%; object-fit:contain; }
[data-theme="dark"] .brand-mark-adaptive { filter:invert(1); }
[data-theme="light"] .brand-mark-adaptive { filter:none; }
.mobile-nav-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; align-items:stretch; }
.mobile-nav-actions > .theme-toggle { grid-column:1 / -1; width:100% !important; min-height:44px; justify-content:center; margin:0 !important; }
.mobile-nav-actions > .btn { width:100%; min-width:0; min-height:44px; justify-content:center; margin:0; }
.mobile-nav-actions > .btn[style*="flex:1"] { flex:initial !important; }
.card:hover, .db-stat:hover, .td-stat:hover { box-shadow:0 16px 34px rgba(0,0,0,.18); }
.card-body, .db-card, .td-card { padding:clamp(16px, 2vw, 24px); }
.btn { min-height:40px; }
.btn-lg { min-height:48px; }
.form-input { min-height:44px; }
textarea.form-input { min-height:110px; }

/* Landing page */
.lp-hero { min-height:max(680px, 100svh); }
.lp-inner-full { width:min(100% - (var(--gutter) * 2), 900px); padding-left:0; padding-right:0; }
.lp-title { max-width:900px; }
.lp-actions .btn { min-width:150px; }
.lp-section { padding:clamp(52px, 8vw, 96px) 0; }
.lp-section-hd { max-width:700px; margin-left:auto; margin-right:auto; }

/* Course/catalog and general grids */
.grid-2, .grid-3, .grid-auto, .cc-grid { align-items:stretch; }
.grid-auto { grid-template-columns:repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.course-grid, .courses-grid { grid-template-columns:repeat(auto-fit, minmax(min(100%, 270px), 1fr)); }
.course-thumb, .cc-thumb { aspect-ratio:16/9; height:auto; min-height:120px; }

/* Student and tutor workspaces */
.db-main, .td-main { width:min(calc(100% - 240px), 1180px); max-width:none; }
.db-shell, .td-shell { background:transparent; }
.db-overview-grid { grid-template-columns:minmax(0,1fr) minmax(0,300px); }
.db-overview-grid > * { min-width:0; }
.db-sidebar, .td-sidebar { background:color-mix(in srgb, var(--sf) 92%, transparent); backdrop-filter:blur(16px); }
.db-topbar, .td-main > div:first-child { padding-bottom:18px; border-bottom:1px solid var(--bd); }
.db-stats, .td-stats { grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); }
.db-stat, .td-stat { min-height:104px; }
.cc-grid { grid-template-columns:repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.cm-row { min-width:0; }
.cm-row > *:nth-child(2), .file-row > *:nth-child(2) { min-width:0; }
.td-table-wrap, .table-wrap, .admin-table-wrap { width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:12px; }
.td-table { min-width:640px; }

/* Admin */
.admin-layout { width:100%; }
.admin-main { min-width:0; }
.ap-page, .ap-card, .ap-stat, .ap-panel { border-radius:16px; }
.ap-grid, .ap-stats, .admin-grid { grid-template-columns:repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.ap-wrap, .ap-main { min-width:0; }
.ap-stat-row { grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); }
.ap-card { box-shadow:0 10px 28px rgba(0,0,0,.12); }

/* Live room */
.live-layout { min-height:calc(100svh - var(--nav-h)); height:auto; }
.live-stage, .live-chat { min-width:0; }
.live-stage video, .participant-video { max-width:100%; }

/* Consistent empty/loading/error states */
.empty-state, .db-empty, .td-empty { border:1px dashed var(--bd2); border-radius:16px; background:color-mix(in srgb, var(--sf) 72%, transparent); }
.loading, .skeleton { background:linear-gradient(90deg,var(--sf2),var(--sf3),var(--sf2)); background-size:200% 100%; animation:shimmerWhite 1.5s linear infinite; }

@media (max-width: 1100px) {
  .nav-links { gap:0; }
  .nav-link { padding-inline:9px; font-size:13px; }
  .db-main, .td-main { width:calc(100% - 240px); padding-inline:24px; }
  .lp-inner-full { padding-top:calc(var(--nav-h) + 34px); }
}

@media (max-width: 900px) {
  :root { --nav-h:64px; }
  .nav-links, .nav-actions > .nav-user, .nav-actions > .btn { display:none; }
  .nav-actions { margin-left:auto; }
  .theme-toggle-desktop { display:flex !important; }
  .hamburger { display:block; }
  .nav-inner { gap:12px; }
  .db-main, .td-main { width:100%; margin-left:0; padding:24px var(--gutter) 80px; }
  .db-overview-grid { grid-template-columns:minmax(0,1fr); gap:18px !important; }
  .db-sidebar, .td-sidebar, .sb-toggle-btn, .td-sb-toggle { display:none; }
  .db-mobile-nav { display:flex; }
  .live-layout { grid-template-columns:1fr; }
  .live-chat { min-height:360px; max-height:55svh; }
  .admin-layout { grid-template-columns:1fr; }
  .admin-sidebar { position:relative; top:0; height:auto; }
  .admin-main { padding:24px var(--gutter) 60px; }
  .ap-wrap { display:block; }
  .ap-sidebar { width:100%; height:auto; min-height:0; position:sticky; top:var(--nav-h); z-index:500; overflow:visible; border-right:0; border-bottom:1px solid var(--bd); }
  .ap-sidebar-logo { display:none; }
  .ap-nav { display:flex; gap:8px; padding:10px var(--gutter); overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .ap-nav::-webkit-scrollbar { display:none; }
  .ap-nav-group { display:contents; }
  .ap-nav-group-lbl { display:none; }
  .ap-nav-item { flex:0 0 auto; width:auto; white-space:nowrap; padding:9px 12px; border:1px solid var(--bd); background:var(--sf2); }
  .ap-nav-item.active { border-color:var(--g); }
  .ap-sidebar-footer { display:none; }
  .ap-main { padding:24px var(--gutter) 60px; }
}

@media (max-width: 640px) {
  :root { --gutter:16px; }
  .nav-inner { padding-inline:0; }
  .nav-logo-sub { display:none; }
  .nav-logo-text { font-size:14px; letter-spacing:1px; }
  .theme-toggle-desktop { display:none !important; }
  .navbar { height:60px; }
  .mobile-nav { top:60px; }
  .page { padding-top:calc(60px + 28px); }
  h1 { font-size:clamp(26px, 8vw, 40px); line-height:1.12; }
  h2 { font-size:clamp(20px, 6vw, 30px); }
  .lp-hero { min-height:680px; }
  .lp-inner-full { padding-top:100px; padding-bottom:42px; }
  .lp-title { font-size:clamp(32px, 11vw, 52px); }
  .lp-actions { width:100%; gap:10px; }
  .lp-actions .btn { flex:1 1 140px; min-width:0; }
  .lp-stats { width:100%; gap:10px; justify-content:space-between; }
  .lp-stat-num { font-size:22px; }
  .lp-stat-lbl { font-size:9px; }
  .slide-caption-bar { max-width:100%; }
  .trust-logos { gap:16px; }
  .grid-2, .grid-3 { grid-template-columns:1fr; }
  .db-topbar { align-items:flex-start; }
  .db-topbar > div:last-child { width:100%; display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px !important; }
  .db-topbar > div:last-child .btn { width:100%; min-width:0; padding-inline:10px; }
  .db-greeting { font-size:20px; }
  .db-stats, .td-stats { grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
  .db-stat, .td-stat { padding:14px; min-height:92px; }
  .db-stat-val, .td-stat-val { font-size:22px; }
  .cl-banner { padding:14px; gap:10px; }
  .cl-icon { width:42px; height:42px; }
  .cl-pct { font-size:18px; }
  .cc-grid { grid-template-columns:1fr; }
  .db-card, .td-card { padding:20px; }
  .db-overview-grid .db-card { margin-bottom:0; }
  .db-card-h { min-width:0; gap:8px; }
  .db-card-h > span { min-width:0; overflow-wrap:anywhere; }
  .db-card-h .btn { flex:0 0 auto; padding-inline:10px; }
  .db-empty { max-width:100%; overflow-wrap:anywhere; }
  .form-row, .form-grid, .input-row { grid-template-columns:1fr !important; }
  .btn { white-space:normal; text-align:center; }
  .modal-overlay { padding:10px; align-items:flex-end; }
  .modal { max-height:92svh; border-radius:20px 20px 0 0; }
  .toast, .toast-item { min-width:0; max-width:calc(100vw - 32px) !important; }
  #toast-container, #ec-toasts { right:16px !important; left:16px; bottom:calc(16px + env(safe-area-inset-bottom)); }
  .live-controls { flex-wrap:wrap; }
  .live-controls .btn { flex:1 1 42%; }
  .participant-grid { grid-template-columns:repeat(2, minmax(0,1fr)); }
}

@media (max-width:420px) {
  .db-main { padding-inline:18px; }
  .db-stats { gap:12px; }
  .db-stat { padding:16px; min-height:102px; }
  .db-overview-grid { gap:20px !important; }
  .db-card { padding:20px; }
}

/* Certificate canvas and actions remain visually balanced on small screens. */
.cert-page { width:min(100% - 32px, 1000px); padding-inline:0; }
.cert-wrap { background:var(--sf); }
.cert-actions .btn { min-width:190px; justify-content:center; }
@media (max-width:640px) {
  .cert-page { width:min(100% - 28px, 1000px); padding-top:84px; }
  .cert-header { margin-bottom:24px; }
  .cert-wrap { margin-inline:-2px; border-radius:12px; }
  .cert-actions { display:grid; grid-template-columns:1fr; gap:10px; }
  .cert-actions .btn { width:100%; min-width:0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.01ms !important; }
}

/* Overflow-safe framed controls and tab rails */
html, body { max-width:100%; overflow-x:hidden; }
main, section, article, .page, .container, .db-main, .td-main, .ap-main { min-width:0; max-width:100%; }
img, video, iframe, svg, canvas { max-width:100%; }
button, a, input, select, textarea { max-width:100%; }

.tabs, .profile-tabs, .sa-tabs, .filter-bar, .mu-type-tabs, .chat-tabs,
.td-tabs, .tab-list, .tabs-list, .category-tabs, .segment-tabs, .pill-tabs {
  min-width:0; max-width:100%;
}
.tabs, .profile-tabs, .sa-tabs, .mu-type-tabs, .td-tabs, .tab-list, .tabs-list,
.category-tabs, .segment-tabs, .pill-tabs { display:flex; align-items:stretch; }
.tabs > *, .profile-tabs > *, .sa-tabs > *, .mu-type-tabs > *, .td-tabs > *,
.tab-list > *, .tabs-list > *, .category-tabs > *, .segment-tabs > *, .pill-tabs > * {
  min-width:0;
}
.filter-chip, .ptab, .sa-tab, .mu-tab, .tab-btn, .chat-tab, .admin-nav-item, .ap-nav-item {
  max-width:100%; overflow:hidden; text-overflow:ellipsis;
}
.search-wrap, .search-input, .form-input, .ap-input { min-width:0; max-width:100%; }
.ap-table { min-width:640px; }
.ap-card:has(.ap-table), .ap-card:has(table) { overflow-x:auto; }

@media (max-width:1080px) and (min-width:901px) {
  .nav-links { display:none !important; }
  .hamburger { display:flex; }
  .nav-actions .nav-user, .nav-actions > .btn { display:none; }
}

@media (max-width:640px) {
  .tabs, .profile-tabs, .sa-tabs, .mu-type-tabs, .td-tabs, .tab-list, .tabs-list,
  .category-tabs, .segment-tabs, .pill-tabs {
    width:100%; overflow-x:auto; overflow-y:hidden; flex-wrap:nowrap;
    scrollbar-width:none; -webkit-overflow-scrolling:touch;
    overscroll-behavior-inline:contain; padding-bottom:2px;
  }
  .tabs::-webkit-scrollbar, .profile-tabs::-webkit-scrollbar, .sa-tabs::-webkit-scrollbar,
  .mu-type-tabs::-webkit-scrollbar, .td-tabs::-webkit-scrollbar, .tab-list::-webkit-scrollbar,
  .tabs-list::-webkit-scrollbar, .category-tabs::-webkit-scrollbar, .segment-tabs::-webkit-scrollbar,
  .pill-tabs::-webkit-scrollbar { display:none; }
  .tabs > *, .profile-tabs > *, .sa-tabs > *, .mu-type-tabs > *, .td-tabs > *,
  .tab-list > *, .tabs-list > *, .category-tabs > *, .segment-tabs > *, .pill-tabs > * {
    flex:0 0 auto; white-space:nowrap;
  }
  .tabs .tab-btn, .profile-tabs .ptab, .sa-tabs .sa-tab, .mu-type-tabs .mu-tab {
    min-width:max-content; padding-inline:13px;
  }
  .filter-bar {
    display:grid !important; grid-template-columns:repeat(2, minmax(0,1fr));
    align-items:stretch; gap:8px; width:100%;
  }
  .filter-bar .filter-chip { min-width:0; width:100%; padding-inline:8px; white-space:normal; line-height:1.25; }
  .filter-bar .search-wrap { grid-column:1/-1; width:100%; max-width:none; margin:2px 0 0; }
  .chat-tabs { min-width:0; flex:0 1 auto; overflow-x:auto; }
  .chat-tab { flex:0 0 auto; white-space:nowrap; }
  .live-controls, .db-topbar, .td-topbar, .ap-page-hd { min-width:0; max-width:100%; }
  .live-controls > *, .db-topbar > *, .td-topbar > *, .ap-page-hd > * { min-width:0; max-width:100%; }
  .ap-page-hd { align-items:flex-start; }
  .ap-page-hd .ap-btn, .ap-page-hd select, .ap-page-hd input { width:100% !important; }
  .ap-stat-row { grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
  .ap-stat { min-width:0; padding:14px; }
  .ap-stat-num { font-size:22px; overflow-wrap:anywhere; }
  .ap-form-grid, .course-form-grid { grid-template-columns:minmax(0,1fr) !important; }
  .ap-card { padding:16px; }
  .ap-table { min-width:600px; }
  .td-table { min-width:600px; }
  .cm-row, .file-row, .activity-item, .tx-row { min-width:0; flex-wrap:wrap; }
  .activity-time { margin-left:auto; }
}