/* =========================================================
   Coursera Theme - UX Enhancement Layer (v6.0)
   Professional theme interactions using design tokens
   ========================================================= */

/* ── Base ── */
body.theme-coursera{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  scroll-behavior:smooth;
}

/* =========================================================
   Navigation
   ========================================================= */
body.theme-coursera .topbar{transition:box-shadow var(--transition-base) cubic-bezier(.4,0,.2,1)}
body.theme-coursera .topbar.scrolled{box-shadow:var(--shadow-xs)}
body.theme-coursera .topbar nav button{position:relative;transition:color var(--transition-fast)}
body.theme-coursera .topbar nav button:after{
  content:"";position:absolute;bottom:-2px;left:50%;
  transform:translateX(-50%) scaleX(0);width:24px;height:2px;
  background:var(--color-brand-gradient);border-radius:var(--radius-xs);
  transition:transform var(--transition-base) ease;
}
body.theme-coursera .topbar nav button:hover:after,
body.theme-coursera .topbar nav button.active:after{transform:translateX(-50%) scaleX(1)}

body.theme-coursera .nav-tab{position:relative;padding:var(--space-2) var(--space-3);transition:color var(--transition-fast)}
body.theme-coursera .nav-tab:before{
  content:"";position:absolute;bottom:-2px;left:var(--space-3);right:var(--space-3);
  height:2px;background:var(--color-brand);transform:scaleX(0);transform-origin:center;
  transition:transform var(--transition-fast) cubic-bezier(.4,0,.2,1);opacity:0;border-radius:var(--radius-xs);
}
body.theme-coursera .nav-tab:hover:before{transform:scaleX(1);opacity:.5}
body.theme-coursera .nav-tab.active:before{transform:scaleX(1);opacity:1}
body.theme-coursera .nav-tab.active:hover:before{opacity:1}

body.theme-coursera .brand{transition:opacity var(--transition-fast)}
body.theme-coursera .brand:hover{opacity:.88}
body.theme-coursera .brand:active{opacity:.75}

/* =========================================================
   Buttons
   ========================================================= */
body.theme-coursera .primary-btn,
body.theme-coursera button.primary-btn,
body.theme-coursera .primary-btn.ripple{
  position:relative;overflow:hidden;background:var(--color-brand-gradient);
  color:var(--color-on-brand);border:0;border-radius:var(--radius-button);
  padding:var(--space-3) var(--space-8);font-weight:var(--weight-semibold);
  font-size:var(--font-base);cursor:pointer;transition:background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-fast);
  box-shadow:var(--shadow-button);line-height:1.4;will-change:transform;
}
body.theme-coursera .primary-btn:hover,
body.theme-coursera button.primary-btn:hover{
  background:linear-gradient(135deg,var(--color-info),var(--color-brand));
  transform:translateY(-1px);box-shadow:var(--shadow-button-hover);
}
body.theme-coursera .primary-btn:active,
body.theme-coursera button.primary-btn:active{
  background:var(--color-brand-active);transform:translateY(1px) scale(.99);
  box-shadow:var(--shadow-button);
}
body.theme-coursera .primary-btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--color-brand-ring)}
body.theme-coursera .primary-btn:disabled,
body.theme-coursera button.primary-btn:disabled{
  background:var(--color-info-soft);cursor:not-allowed;box-shadow:none;transform:none;opacity:.7;
}
body.theme-coursera .primary-btn:before{
  content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent);
  transition:left .6s ease;display:block;
}
body.theme-coursera .primary-btn:hover:before{left:100%}

body.theme-coursera .ghost-btn{
  position:relative;overflow:hidden;background:var(--color-surface);
  border:1px solid var(--color-line-strong);color:var(--color-body);
  border-radius:var(--radius-button);padding:13px 28px;
  font-weight:var(--weight-semibold);font-size:var(--font-base);
  cursor:pointer;transition:background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-fast);
}
body.theme-coursera .ghost-btn:hover{border-color:var(--color-steel);color:var(--color-ink);background:var(--color-surface-2)}
body.theme-coursera .ghost-btn:active{background:var(--color-surface-3);transform:scale(.98)}
body.theme-coursera .ghost-btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--color-brand-ring)}

body.theme-coursera .text-btn{position:relative;transition:color var(--transition-fast)}
body.theme-coursera .text-btn:after{
  content:"";position:absolute;bottom:-1px;left:0;right:0;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform var(--transition-fast);
}
body.theme-coursera .text-btn:hover:after{transform:scaleX(1)}

body.theme-coursera .outline-btn{transition:background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-fast)}
body.theme-coursera .outline-btn:hover{border-color:var(--color-brand);color:var(--color-brand);background:var(--color-brand-soft)}
body.theme-coursera .quiet-btn{transition:background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-fast)}
body.theme-coursera .quiet-btn:active{background:var(--color-surface-2)}

body.theme-coursera .icon-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;padding:0;border-radius:var(--radius-sm);transition:background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-fast);
}
body.theme-coursera .icon-btn svg{width:18px;height:18px}
body.theme-coursera .icon-btn:hover{background:var(--color-surface-2);color:var(--color-ink)}
body.theme-coursera .icon-btn:active{transform:scale(.95)}

body.theme-coursera .ripple{position:relative;overflow:hidden}

/* =========================================================
   Cards
   ========================================================= */
body.theme-coursera .feature-card{transition:transform var(--transition-fast) cubic-bezier(.4,0,.2,1), box-shadow var(--transition-fast) cubic-bezier(.4,0,.2,1), border-color var(--transition-fast) cubic-bezier(.4,0,.2,1);will-change:transform}
body.theme-coursera .feature-card:hover{border-color:var(--color-line-strong);transform:translateY(-2px);box-shadow:var(--shadow-lg)}
body.theme-coursera .feature-card:active{transform:translateY(0);box-shadow:var(--shadow-sm)}

body.theme-coursera .course-item{
  position:relative;overflow:hidden;cursor:pointer;
  transition:transform var(--transition-base) cubic-bezier(.4,0,.2,1), box-shadow var(--transition-base) cubic-bezier(.4,0,.2,1), border-color var(--transition-base) cubic-bezier(.4,0,.2,1);
  animation:cardFadeInUp .5s cubic-bezier(.4,0,.2,1) backwards;
}
body.theme-coursera .course-item:before{
  content:"";position:absolute;top:0;left:0;width:3px;height:0;
  background:linear-gradient(180deg,var(--color-brand),var(--color-info));
  transition:height var(--transition-base) ease;z-index:2;
}
body.theme-coursera .course-item:hover{border-color:var(--color-brand-soft);transform:translateY(-2px);box-shadow:var(--shadow-lg)}
body.theme-coursera .course-item:hover:before{height:100%}
body.theme-coursera .course-item:hover h3{color:var(--color-brand)}
body.theme-coursera .course-item:active{transform:translateY(0);box-shadow:var(--shadow-xs)}
body.theme-coursera .course-item:nth-child(1){animation-delay:.05s}
body.theme-coursera .course-item:nth-child(2){animation-delay:.1s}
body.theme-coursera .course-item:nth-child(3){animation-delay:.15s}
body.theme-coursera .course-item:nth-child(4){animation-delay:.2s}
body.theme-coursera .course-item:nth-child(5){animation-delay:.25s}
body.theme-coursera .course-item:nth-child(6){animation-delay:.3s}

body.theme-coursera .source-book{
  position:relative;transition:transform var(--transition-base) cubic-bezier(.4,0,.2,1), box-shadow var(--transition-base) cubic-bezier(.4,0,.2,1), border-color var(--transition-base) cubic-bezier(.4,0,.2,1);
  animation:cardFadeInUp .5s cubic-bezier(.4,0,.2,1) backwards;
}
body.theme-coursera .source-book:hover{transform:translateY(-4px);box-shadow:var(--shadow-xl);border-color:var(--color-line-strong)}
body.theme-coursera .source-book:hover h2{color:var(--color-brand);transition:color var(--transition-fast)}
body.theme-coursera .source-book:hover .book-cover{transform:scale(1.02)}
body.theme-coursera .source-book .book-cover{transition:transform var(--transition-base) ease}
body.theme-coursera .source-book small{font-weight:var(--weight-semibold);transition:background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-fast)}
body.theme-coursera .source-book:hover small{letter-spacing:.02em}

body.theme-coursera .price-card{transition:transform var(--transition-base) cubic-bezier(.4,0,.2,1), box-shadow var(--transition-base) cubic-bezier(.4,0,.2,1), border-color var(--transition-base) cubic-bezier(.4,0,.2,1)}
body.theme-coursera .price-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-xl)}
body.theme-coursera .price-card.featured:hover{box-shadow:0 12px 32px color-mix(in srgb,var(--color-brand) 15%,transparent)}

body.theme-coursera .metric-card{transition:transform var(--transition-fast) cubic-bezier(.4,0,.2,1), box-shadow var(--transition-fast) cubic-bezier(.4,0,.2,1), border-color var(--transition-fast) cubic-bezier(.4,0,.2,1)}
body.theme-coursera .metric-card:hover{border-color:var(--color-line-strong);transform:translateY(-1px);box-shadow:var(--shadow-md)}
body.theme-coursera .metric-card b{transition:color var(--transition-fast)}
body.theme-coursera .metric-card:hover b{color:var(--color-brand)}

body.theme-coursera .auth-card{box-shadow:var(--shadow-xl);transition:box-shadow var(--transition-base)}

body.theme-coursera .cert-preview-card{
  position:relative;border:1px solid var(--color-line);
  transition:transform var(--transition-base) cubic-bezier(.4,0,.2,1), box-shadow var(--transition-base) cubic-bezier(.4,0,.2,1), border-color var(--transition-base) cubic-bezier(.4,0,.2,1);
}
body.theme-coursera .cert-preview-card:hover{
  transform:translateY(-4px);box-shadow:0 16px 48px color-mix(in srgb,var(--color-ink) 12%,transparent);
  border-color:var(--color-brand-soft);
}

/* =========================================================
   Forms
   ========================================================= */
body.theme-coursera .form-field{position:relative}
body.theme-coursera .form-field label{
  display:block;font-size:var(--font-md);font-weight:var(--weight-medium);
  margin-bottom:var(--space-1);transition:color var(--transition-fast);
}
body.theme-coursera .form-field input,
body.theme-coursera .form-field select,
body.theme-coursera .form-field textarea{transition:border-color var(--transition-fast) cubic-bezier(.4,0,.2,1),box-shadow var(--transition-fast) cubic-bezier(.4,0,.2,1)}
body.theme-coursera .form-field input:hover,
body.theme-coursera .form-field select:hover{border-color:var(--color-subtle)}
body.theme-coursera .form-field input:focus,
body.theme-coursera .form-field select:focus,
body.theme-coursera .form-field textarea:focus{
  outline:none;border-color:var(--color-brand);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--color-brand) 15%,transparent);
}

body.theme-coursera .search-box{display:flex;align-items:center;gap:var(--space-2);transition:border-color var(--transition-fast) cubic-bezier(.4,0,.2,1), box-shadow var(--transition-fast) cubic-bezier(.4,0,.2,1), background-color var(--transition-fast) cubic-bezier(.4,0,.2,1)}
body.theme-coursera .search-box:hover{border-color:var(--color-subtle)}
body.theme-coursera .search-box input{flex:1;border:none;outline:none;background:transparent;font-size:var(--font-base)}
body.theme-coursera .search-box input:focus{outline:none}
body.theme-coursera .search-box:focus-within{border-color:var(--color-brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-brand) 10%,transparent)}

body.theme-coursera input::placeholder,
body.theme-coursera textarea::placeholder{color:var(--color-subtle);transition:color var(--transition-fast)}
body.theme-coursera input:focus::placeholder,
body.theme-coursera textarea:focus::placeholder{color:var(--color-muted)}

body.theme-coursera input[type="checkbox"],
body.theme-coursera input[type="radio"]{accent-color:var(--color-brand);cursor:pointer}

/* =========================================================
   Typography
   ========================================================= */
body.theme-coursera .hero-copy h1{position:relative;font-weight:var(--weight-bold);letter-spacing:-.022em}
body.theme-coursera .hero-copy h1:before{
  content:"";display:block;width:48px;height:4px;
  background:linear-gradient(90deg,var(--color-brand),var(--color-info));
  border-radius:var(--radius-xs);margin-bottom:var(--space-5);
}
body.theme-coursera .hero-copy > p{font-size:var(--font-lg);line-height:1.65;color:var(--color-body)}
body.theme-coursera h2{letter-spacing:-.01em}
body.theme-coursera p{line-height:1.6}
body.theme-coursera a{transition:color var(--transition-fast)}
body.theme-coursera a:hover{color:var(--color-brand-hover)}
body.theme-coursera .card-label{letter-spacing:.08em;font-size:var(--font-xs);font-weight:var(--weight-semibold);text-transform:uppercase}
body.theme-coursera .outcome-strip h2{font-size:var(--font-2xl);line-height:1.4}
body.theme-coursera .method-steps b{font-size:var(--font-3xl);font-weight:var(--weight-bold);line-height:1}
body.theme-coursera .admin-stat-card b{font-size:var(--font-3xl);font-weight:var(--weight-bold);margin-top:var(--space-2)}
body.theme-coursera .admin-stat-card:hover b{color:var(--color-brand);transition:color var(--transition-fast)}
body.theme-coursera .admin-table th{background:var(--color-surface-2);font-size:var(--font-xs);font-weight:var(--weight-semibold);letter-spacing:.05em}
body.theme-coursera .notes-drawer h2,
body.theme-coursera .detail-drawer h2{font-size:var(--font-xl);font-weight:var(--weight-semibold)}
body.theme-coursera .price-card li:before{color:var(--color-success);font-size:var(--font-sm);font-weight:var(--weight-bold)}
body.theme-coursera .recommend-badge{top:-10px;font-size:var(--font-xs);font-weight:var(--weight-semibold);letter-spacing:.02em}

/* =========================================================
   Hero art & nodes
   ========================================================= */
body.theme-coursera .hero-art{animation:heroFloat 6s ease-in-out infinite}
body.theme-coursera .metal-disc{transition:transform var(--transition-base) cubic-bezier(.4,0,.2,1),box-shadow var(--transition-base)}
body.theme-coursera .metal-orbit:hover .metal-disc{transform:scale(1.03);box-shadow:0 8px 32px color-mix(in srgb,var(--color-brand) 18%,transparent)}
body.theme-coursera .node{transition:background-color var(--transition-fast) cubic-bezier(.4,0,.2,1), color var(--transition-fast) cubic-bezier(.4,0,.2,1), border-color var(--transition-fast) cubic-bezier(.4,0,.2,1), transform var(--transition-fast) cubic-bezier(.4,0,.2,1), box-shadow var(--transition-fast) cubic-bezier(.4,0,.2,1), opacity var(--transition-fast) cubic-bezier(.4,0,.2,1)}
body.theme-coursera .node:hover{transform:translateY(-2px);box-shadow:0 4px 12px color-mix(in srgb,var(--color-brand) 15%,transparent);border-color:var(--color-brand);color:var(--color-brand)}

/* =========================================================
   Progress
   ========================================================= */
body.theme-coursera .mini-ability i b{transition:width .6s cubic-bezier(.4,0,.2,1)}
body.theme-coursera .studio-progress{height:3px;background:var(--color-surface-3);border-radius:0;overflow:hidden}
body.theme-coursera .studio-progress i{
  position:relative;overflow:hidden;
  background:linear-gradient(90deg,var(--color-brand-hover) 0%,var(--color-brand) 50%,var(--color-info) 100%);
  transition:width var(--transition-slow) cubic-bezier(.4,0,.2,1);
}
body.theme-coursera .studio-progress i:after{
  content:"";position:absolute;top:0;left:-50%;width:50%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);
  animation:progressShine 2.5s ease-in-out infinite;
}

/* =========================================================
   Pills, tabs & segmented controls
   ========================================================= */
body.theme-coursera .role-pills button,
body.theme-coursera .auth-tabs button,
body.theme-coursera .theme-switcher button,
body.theme-coursera .admin-actions button{transition:background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-fast)}
body.theme-coursera .role-pills button:hover{border-color:var(--color-brand);color:var(--color-brand)}
body.theme-coursera .role-pills button:active,
body.theme-coursera .auth-tabs button:active{transform:scale(.97)}
body.theme-coursera .theme-switcher button:active,
body.theme-coursera .admin-actions button:active{transform:scale(.95)}
body.theme-coursera .theme-switcher button:hover,
body.theme-coursera .auth-tabs button:hover{color:var(--color-ink)}

body.theme-coursera .segmented button{position:relative;transition:background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-fast)}
body.theme-coursera .segmented button:hover{color:var(--color-ink)}
body.theme-coursera .segmented button:active{transform:scale(.97)}
body.theme-coursera .segmented button.active{color:var(--color-on-brand);background:var(--color-brand-gradient);box-shadow:var(--shadow-button)}

body.theme-coursera .ranking-tabs{padding:var(--space-05);border-radius:var(--radius-xs)}
body.theme-coursera .ranking-tabs button{transition:color var(--transition-fast), background-color var(--transition-fast)}
body.theme-coursera .ranking-tabs button:hover{color:var(--color-ink)}
body.theme-coursera .ranking-tabs button.active{box-shadow:var(--shadow-xs)}

body.theme-coursera .module-tabs button{position:relative;transition:color var(--transition-fast), background-color var(--transition-fast)}
body.theme-coursera .module-tabs button.active{color:var(--color-brand);font-weight:var(--weight-semibold)}
body.theme-coursera .module-tabs button.active:after{
  content:"";position:absolute;bottom:-2px;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--color-brand),var(--color-info));border-radius:var(--radius-xs);
}

body.theme-coursera .status-pill{transition:background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-fast)}
body.theme-coursera .status-pill:hover{opacity:.85;transform:translateY(-1px)}
body.theme-coursera .course-badge{transition:background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-fast)}

body.theme-coursera .path-focus span{transition:background-color var(--transition-fast) cubic-bezier(.4,0,.2,1), color var(--transition-fast) cubic-bezier(.4,0,.2,1), border-color var(--transition-fast) cubic-bezier(.4,0,.2,1), transform var(--transition-fast) cubic-bezier(.4,0,.2,1), box-shadow var(--transition-fast) cubic-bezier(.4,0,.2,1), opacity var(--transition-fast) cubic-bezier(.4,0,.2,1);cursor:default}
body.theme-coursera .path-focus span:hover{background:var(--color-brand);color:var(--color-on-brand);transform:translateY(-1px)}

body.theme-coursera .course-meta span,
body.theme-coursera .tag{transition:background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-fast)}
body.theme-coursera .course-item:hover .course-meta span{background:var(--color-brand-soft);color:var(--color-brand);opacity:1}

/* =========================================================
   Tables & lists
   ========================================================= */
body.theme-coursera .ranking-row,
body.theme-coursera .admin-table tr{transition:background-color var(--transition-fast)}
body.theme-coursera .ranking-row:hover{background:var(--color-surface-2)}
body.theme-coursera .admin-table tr:hover td{background:var(--color-surface-2)}
body.theme-coursera .current-rank{background:var(--color-brand-soft);border-left:3px solid var(--color-brand)}
body.theme-coursera .ranking-item{transition:transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast)}
body.theme-coursera .ranking-item:hover{background:var(--color-brand-soft);transform:translateX(4px)}
body.theme-coursera .ranking-item .rank-badge{transition:background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-fast)}
body.theme-coursera .ranking-item:hover .rank-badge{transform:scale(1.1)}

/* =========================================================
   Modal / Studio
   ========================================================= */
body.theme-coursera .studio{
  background:var(--color-scrim);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:opacity var(--transition-fast);
}
body.theme-coursera .studio.open .studio-body{animation:studioFadeInUp .4s cubic-bezier(.4,0,.2,1)}
body.theme-coursera .studio-body{
  background:var(--color-surface);min-height:calc(100vh - 68px);
  padding:56px 0 96px;width:min(1280px,calc(100% - 64px));
  margin:0 auto;border-radius:var(--radius-lg);overflow:visible;
  box-shadow:var(--shadow-modal);transition:transform var(--transition-base) cubic-bezier(.4,0,.2,1);
}
body.theme-coursera .studio-head{
  border-bottom:1px solid var(--color-line);background:var(--color-surface);
  padding:0 var(--space-8);height:68px;box-shadow:var(--shadow-xs);
}
body.theme-coursera .studio-head .icon-btn{
  width:40px;height:40px;border-radius:var(--radius-md);
  font-size:var(--font-base);font-weight:var(--weight-medium);
  transition:background-color var(--transition-fast) cubic-bezier(.4,0,.2,1), color var(--transition-fast) cubic-bezier(.4,0,.2,1), border-color var(--transition-fast) cubic-bezier(.4,0,.2,1), transform var(--transition-fast) cubic-bezier(.4,0,.2,1), box-shadow var(--transition-fast) cubic-bezier(.4,0,.2,1), opacity var(--transition-fast) cubic-bezier(.4,0,.2,1);
}
body.theme-coursera .studio-head .icon-btn:hover{
  background:var(--color-surface-3);color:var(--color-ink);transform:rotate(90deg);
}
body.theme-coursera .studio-head .icon-btn:active{transform:rotate(90deg) scale(.9)}

body.theme-coursera .lesson-body{width:min(1280px,calc(100% - 64px));margin:0 auto}
body.theme-coursera .lesson-screen{max-width:1180px;margin:0 auto}
body.theme-coursera .diag-shell{max-width:1080px;margin:0 auto}

body.theme-coursera .lesson-screen h1,
body.theme-coursera .diag-shell h1{
  font:var(--weight-bold) clamp(36px,4.5vw,52px)/1.15 var(--font-body);
  letter-spacing:-.03em;margin:var(--space-5) 0 var(--space-4);
}
body.theme-coursera .lesson-screen > .lead,
body.theme-coursera .diag-shell > .lead{font-size:var(--font-xl);line-height:1.7;color:var(--color-muted);max-width:820px}

body.theme-coursera .step-kicker{
  color:var(--color-muted);font-size:var(--font-md);font-weight:var(--weight-medium);
  display:flex;align-items:center;justify-content:space-between;
}
body.theme-coursera .step-kicker b{
  display:inline-flex;align-items:center;gap:var(--space-1);
  color:var(--color-brand);font-weight:var(--weight-bold);letter-spacing:.14em;
  font-size:var(--font-xs);text-transform:uppercase;
}
body.theme-coursera .step-kicker b:before{
  content:"";width:6px;height:6px;border-radius:var(--radius-round);
  background:var(--color-brand);animation:pulse 2s ease-in-out infinite;
}

body.theme-coursera .mini-seal{
  width:38px;height:38px;background:var(--color-brand-gradient);color:var(--color-on-brand);
  border-radius:var(--radius-md);border:0;font-size:var(--font-lg);font-weight:var(--weight-bold);
  box-shadow:var(--shadow-button);transition:background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-fast);
}

body.theme-coursera .studio-brand b{font-size:var(--font-base);font-weight:var(--weight-semibold);letter-spacing:-.01em}
body.theme-coursera .studio-brand small{font-size:var(--font-xs);color:var(--color-muted);margin-top:var(--space-05)}

body.theme-coursera .instruction{
  position:relative;overflow:hidden;display:flex;align-items:center;gap:var(--space-3);
  background:var(--color-brand-soft);border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);
  margin:var(--space-6) 0;font-size:var(--font-base);border-left:4px solid var(--color-brand);line-height:1.5;
}
body.theme-coursera .instruction:before{
  content:"";position:absolute;top:0;right:0;width:120px;height:120px;
  background:radial-gradient(circle at top right,color-mix(in srgb,var(--color-brand) 6%,transparent),transparent 70%);pointer-events:none;
}
body.theme-coursera .instruction b{
  width:28px;height:28px;border-radius:var(--radius-sm);background:var(--color-brand-gradient);
  color:var(--color-on-brand);display:grid;place-items:center;font-weight:var(--weight-bold);
  font-size:var(--font-base);flex-shrink:0;box-shadow:var(--shadow-button);
}

body.theme-coursera .lesson-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-8);margin-top:36px}

body.theme-coursera .scenario-card{
  position:relative;overflow:hidden;border:1px solid var(--color-line);
  border-radius:var(--radius-lg);padding:var(--space-8);box-shadow:var(--shadow-xs);
  transition:transform var(--transition-base) cubic-bezier(.4,0,.2,1), box-shadow var(--transition-base) cubic-bezier(.4,0,.2,1), border-color var(--transition-base) cubic-bezier(.4,0,.2,1);
}
body.theme-coursera .scenario-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}

body.theme-coursera .scenario-card.quote{
  min-height:280px;background:linear-gradient(145deg,var(--color-brand-soft) 0%,var(--color-info-soft) 50%,var(--color-steel-soft) 100%);
  color:var(--color-brand-active);border:1px solid var(--color-steel-soft);border-left:6px solid var(--color-brand);
  border-radius:0 var(--radius-lg) var(--radius-lg) 0;
  box-shadow:0 8px 32px color-mix(in srgb,var(--color-brand) 10%,transparent);display:flex;flex-direction:column;gap:var(--space-5);
}
body.theme-coursera .scenario-card.quote:before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--color-brand),var(--color-brand-soft),var(--color-steel));z-index:1;
}
body.theme-coursera .scenario-card.quote span{
  font-size:var(--font-xs);font-weight:var(--weight-bold);letter-spacing:.14em;
  color:var(--color-white);text-transform:uppercase;position:relative;z-index:2;
  padding:var(--space-1) var(--space-2);background:var(--color-brand);
  border-radius:var(--radius-xs);width:fit-content;
}
body.theme-coursera .scenario-card.quote p{
  font:var(--weight-semibold) var(--font-2xl)/1.7 var(--font-body);margin:0;
  color:var(--color-brand-active);letter-spacing:-.01em;position:relative;z-index:2;
}
body.theme-coursera .scenario-card.quote:after{
  content:"\201C";position:absolute;top:var(--space-4);right:var(--space-6);
  font-size:120px;font-family:var(--font-serif);color:color-mix(in srgb,var(--color-brand) 8%,transparent);
  line-height:1;z-index:1;font-weight:var(--weight-bold);
}

body.theme-coursera .decision-options{display:grid;gap:var(--space-3);counter-reset:decision-counter}
body.theme-coursera .decision-option{
  position:relative;overflow:hidden;border:1px solid var(--color-line);
  border-radius:var(--radius-md);padding:var(--space-5) var(--space-6) var(--space-5) 56px;
  text-align:left;cursor:pointer;transition:background-color var(--transition-fast) cubic-bezier(.4,0,.2,1), color var(--transition-fast) cubic-bezier(.4,0,.2,1), border-color var(--transition-fast) cubic-bezier(.4,0,.2,1), transform var(--transition-fast) cubic-bezier(.4,0,.2,1), box-shadow var(--transition-fast) cubic-bezier(.4,0,.2,1), opacity var(--transition-fast) cubic-bezier(.4,0,.2,1);
  box-shadow:0 1px 2px color-mix(in srgb,var(--color-ink) 3%,transparent);counter-increment:decision-counter;
}
body.theme-coursera .decision-option:hover{
  background:linear-gradient(var(--color-surface),var(--color-surface)) padding-box,
             linear-gradient(135deg,var(--color-brand),var(--color-info)) border-box;
  border:1px solid transparent;transform:translateX(6px);
  box-shadow:0 4px 16px color-mix(in srgb,var(--color-brand) 12%,transparent);
}
body.theme-coursera .decision-option:before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--color-brand),var(--color-info));
  transform:scaleY(0);transition:transform var(--transition-fast);transform-origin:bottom;
}
body.theme-coursera .decision-option:hover:before{transform:scaleY(1)}
body.theme-coursera .decision-option b{
  display:block;font-size:var(--font-lg);font-weight:var(--weight-semibold);
  margin-bottom:var(--space-2);transition:color var(--transition-fast);
}
body.theme-coursera .decision-option:hover b{color:var(--color-brand)}
body.theme-coursera .decision-option small{color:var(--color-muted);font-size:var(--font-md);line-height:1.6;display:block;transition:color var(--transition-fast)}
body.theme-coursera .decision-option:after{
  content:counter(decision-counter);position:absolute;left:20px;top:50%;
  transform:translateY(-50%);width:28px;height:28px;border-radius:var(--radius-md);
  background:var(--color-surface-3);color:var(--color-muted);display:grid;place-items:center;
  font-weight:var(--weight-bold);font-size:var(--font-md);transition:background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-fast);
}
body.theme-coursera .decision-option:hover:after{
  background:var(--color-brand-gradient);color:var(--color-on-brand);
  transform:translateY(-50%) scale(1.1);
}

body.theme-coursera .decision-option.correct{
  border-color:var(--color-success);background:var(--color-success-soft);
  transform:translateX(6px);box-shadow:0 4px 16px rgba(24,128,56,.15);
}
body.theme-coursera .decision-option.correct:before{width:4px;background:linear-gradient(180deg,var(--color-success),var(--color-success));transform:scaleY(1)}
body.theme-coursera .decision-option.correct b{color:var(--color-success)}
body.theme-coursera .decision-option.correct small{color:var(--color-success)}
body.theme-coursera .decision-option.correct:after{
  background:var(--color-success) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 12 10 16 18 8'/%3E%3C/svg%3E") center/60% no-repeat;
  color:transparent;
}

body.theme-coursera .decision-option.wrong{
  border-color:var(--color-error);background:var(--color-error-soft);
  transform:translateX(6px);box-shadow:0 4px 16px rgba(209,50,18,.12);
}
body.theme-coursera .decision-option.wrong:before{width:4px;background:linear-gradient(180deg,var(--color-error),var(--color-error));transform:scaleY(1)}
body.theme-coursera .decision-option.wrong b{color:var(--color-error)}
body.theme-coursera .decision-option.wrong small{color:var(--color-brand)}
body.theme-coursera .decision-option.wrong:after{
  background:var(--color-error) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3C/svg%3E") center/55% no-repeat;
  color:transparent;
}

body.theme-coursera .lesson-actions,
body.theme-coursera .diag-actions{
  display:flex;align-items:center;justify-content:space-between;
  position:sticky;bottom:0;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.95) 20%);
  padding:var(--space-6) 0 0;margin-top:var(--space-8);
  border-top:1px solid var(--color-line);gap:var(--space-4);z-index:3;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
body.theme-coursera .lesson-actions small,
body.theme-coursera .diag-actions small{color:var(--color-muted);font-size:var(--font-md)}

body.theme-coursera .feedback-panel{
  margin-top:var(--space-5);border:1px solid var(--color-line);
  border-left:4px solid var(--color-brand);border-radius:0 var(--radius-md) var(--radius-md) 0;
  padding:var(--space-5) var(--space-6);box-shadow:var(--shadow-sm);
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;animation:feedbackSlideIn .4s cubic-bezier(.4,0,.2,1);
}
body.theme-coursera .feedback-panel h3{
  margin:0 0 var(--space-2);font:var(--weight-semibold) var(--font-xl)/1.4 var(--font-body);
  letter-spacing:-.01em;
}
body.theme-coursera .feedback-panel p{color:var(--color-muted);margin:0;font-size:var(--font-base);line-height:1.6}

/* =========================================================
   Drawers
   ========================================================= */
body.theme-coursera .notes-drawer,
body.theme-coursera .detail-drawer{transition:transform .3s cubic-bezier(.4,0,.2,1)}

/* =========================================================
   Toast
   ========================================================= */
body.theme-coursera .toast{
  box-shadow:var(--shadow-xl);border-radius:var(--radius-md);
  font-weight:var(--weight-medium);padding:var(--space-3) var(--space-5);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  animation:toastSlideUp .3s cubic-bezier(.4,0,.2,1);
}

/* =========================================================
   Payment & exam options
   ========================================================= */
body.theme-coursera .payment-method{position:relative;transition:transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast)}
body.theme-coursera .payment-method:hover{border-color:var(--color-brand);background:var(--color-brand-soft)}
body.theme-coursera .payment-method:active{transform:scale(.99)}
body.theme-coursera .payment-method.selected:after{
  content:"";position:absolute;right:var(--space-3);top:50%;transform:translateY(-50%);
  width:20px;height:20px;background:var(--color-brand);
  border-radius:var(--radius-round);
}
body.theme-coursera .payment-method.selected:before{
  content:"";position:absolute;right:calc(var(--space-3) + 5px);top:50%;
  width:6px;height:10px;border:solid var(--color-on-brand);
  border-width:0 2px 2px 0;transform:translateY(-60%) rotate(45deg);z-index:1;
}
body.theme-coursera .exam-option{transition:background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-fast)}
body.theme-coursera .exam-option:hover{border-color:var(--color-brand);background:var(--color-brand-soft)}
body.theme-coursera .exam-option:active{transform:scale(.995)}
body.theme-coursera .exam-option.selected{border-color:var(--color-brand);background:var(--color-brand-soft);font-weight:var(--weight-medium)}

/* =========================================================
   Misc interactions
   ========================================================= */
body.theme-coursera .micro-flow i{position:relative;overflow:visible}
body.theme-coursera .micro-flow i:after{transition:background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-fast)}
body.theme-coursera .feature-card:hover .micro-flow i:after{transform:scale(1.2)}

body.theme-coursera .continue-card .text-btn{display:inline-flex;align-items:center;gap:var(--space-1)}
body.theme-coursera .continue-card .text-btn:after{display:none}
body.theme-coursera .continue-card .text-btn span{display:inline-block;transition:transform var(--transition-fast) cubic-bezier(.4,0,.2,1)}
body.theme-coursera .continue-card:hover .text-btn span{transform:translateX(4px)}

body.theme-coursera .outcome-list span{transition:background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-fast)}
body.theme-coursera .outcome-list span:hover{background:rgba(255,255,255,.1);transform:translateY(-1px)}
body.theme-coursera .method-steps article{transition:background-color var(--transition-fast) cubic-bezier(.4,0,.2,1), color var(--transition-fast) cubic-bezier(.4,0,.2,1), border-color var(--transition-fast) cubic-bezier(.4,0,.2,1), transform var(--transition-fast) cubic-bezier(.4,0,.2,1), box-shadow var(--transition-fast) cubic-bezier(.4,0,.2,1), opacity var(--transition-fast) cubic-bezier(.4,0,.2,1)}
body.theme-coursera .method-steps article:hover{transform:translateY(-2px);box-shadow:0 4px 12px color-mix(in srgb,var(--color-brand) 8%,transparent)}
body.theme-coursera .source-principle div{transition:background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-fast)}
body.theme-coursera .source-principle div:hover{border-color:var(--color-line-strong);transform:translateY(-1px)}
body.theme-coursera .record-btn{transition:background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-fast)}
body.theme-coursera .record-btn:hover{background:var(--color-surface-2)}
body.theme-coursera .record-dot{transition:transform var(--transition-base) ease}
body.theme-coursera .record-btn:hover .record-dot{transform:scale(1.2)}
body.theme-coursera .hero-proof{position:relative}
body.theme-coursera .hero-proof span{position:relative}
body.theme-coursera .hero-proof b{transition:color var(--transition-fast)}
body.theme-coursera .hero-proof span:hover b{color:var(--color-brand)}
body.theme-coursera .icon{display:inline-block;vertical-align:middle;flex-shrink:0}
body.theme-coursera .diag-entry-icon .icon{color:var(--color-brand)}

body.theme-coursera .dashboard-head{position:relative;margin-top:56px;margin-bottom:var(--space-5)}
body.theme-coursera .dashboard-head span{font-size:var(--font-base);font-weight:var(--weight-semibold)}
body.theme-coursera .dashboard-head:after{
  content:"";display:block;width:40px;height:3px;
  background:linear-gradient(90deg,var(--color-brand),transparent);
  border-radius:var(--radius-xs);margin-top:var(--space-3);
}

body.theme-coursera .lesson-index{transition:transform var(--transition-base) cubic-bezier(.4,0,.2,1), box-shadow var(--transition-base) cubic-bezier(.4,0,.2,1), border-color var(--transition-base) cubic-bezier(.4,0,.2,1)}
body.theme-coursera .feature-card:hover .lesson-index{transform:scale(1.05)}

body.theme-coursera .auth-aside{position:relative;overflow:hidden}
body.theme-coursera .auth-aside:before{
  content:"";position:absolute;top:-50%;right:-30%;width:300px;height:300px;
  background:radial-gradient(circle,rgba(255,255,255,.15),transparent 60%);border-radius:var(--radius-round);
}

body.theme-coursera .cert-showcase{position:relative;overflow:hidden}
body.theme-coursera .cert-showcase:before{
  content:"";position:absolute;top:0;left:0;width:6px;height:100%;
  background:var(--color-brand-gradient);z-index:2;
}
body.theme-coursera .cert-showcase .hero-actions{margin-top:var(--space-6)}

body.theme-coursera .account-menu button{transition:background-color .12s ease, color .12s ease, border-color .12s ease, transform .12s ease, box-shadow .12s ease, opacity .12s ease;position:relative}
body.theme-coursera .account-menu button:before{
  content:"";position:absolute;left:0;top:50%;width:3px;height:0;
  background:var(--color-brand);border-radius:0 var(--radius-xs) var(--radius-xs) 0;
  transition:height .2s ease,top .2s ease;transform:translateY(-50%);
}
body.theme-coursera .account-menu button.active:before{height:60%}
body.theme-coursera .profile-avatar{transition:background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease, opacity .25s ease}
body.theme-coursera .account-sidebar:hover .profile-avatar{transform:scale(1.05)}

body.theme-coursera .module-intro h2{font-weight:var(--weight-semibold)}
body.theme-coursera .module-intro p{opacity:.9}
body.theme-coursera .mobile-nav{box-shadow:var(--shadow-lg);border-radius:var(--radius-md)}

body.theme-coursera ::selection{background:color-mix(in srgb,var(--color-brand) 15%,transparent);color:var(--color-brand-hover)}

/* =========================================================
   Scrollbar
   ========================================================= */
body.theme-coursera ::-webkit-scrollbar{width:8px;height:8px}
body.theme-coursera ::-webkit-scrollbar-track{background:var(--color-surface-3)}
body.theme-coursera ::-webkit-scrollbar-thumb{background:var(--color-line-strong);border-radius:var(--radius-xs);transition:background .2s ease}
body.theme-coursera ::-webkit-scrollbar-thumb:hover{background:var(--color-brand)}

/* =========================================================
   View transitions
   ========================================================= */
body.theme-coursera .view{animation:viewFadeIn .35s cubic-bezier(.4,0,.2,1)}

/* =========================================================
   Shared hover border glow
   ========================================================= */
body.theme-coursera .feature-card:hover,
body.theme-coursera .course-item:hover,
body.theme-coursera .source-book:hover{border-color:var(--color-brand)}

/* =========================================================
   Keyframes
   ========================================================= */
@keyframes toastSlideUp{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes viewFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes viewFadeIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes studioFadeInUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes feedbackSlideIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes progressShine{0%{left:-50%}100%{left:150%}}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(1.3)}}
@keyframes cardFadeInUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes heroFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* =========================================================
   Responsive
   ========================================================= */
@media(max-width:768px){
  body.theme-coursera .hero-proof{grid-template-columns:repeat(4,1fr);gap:var(--space-3);padding:var(--space-4)}
  body.theme-coursera .hero-proof b{font-size:var(--font-xl)}
  body.theme-coursera .hero-proof small{font-size:var(--font-xs)}
}
@media(max-width:640px){
  body.theme-coursera .hero-proof{grid-template-columns:repeat(2,1fr)}
  body.theme-coursera .cert-showcase-inner{grid-template-columns:1fr;gap:var(--space-6)}
  body.theme-coursera .cert-showcase{padding:var(--space-6)}
  body.theme-coursera .outcome-strip{padding:var(--space-5);gap:var(--space-4)}
  body.theme-coursera .outcome-strip h2{font-size:var(--font-xl)}
  body.theme-coursera .evidence-method{padding:var(--space-5);gap:var(--space-6)}
  body.theme-coursera .admin-stats{grid-template-columns:1fr 1fr;gap:var(--space-3)}
  body.theme-coursera .admin-stat-card{padding:var(--space-4)}
  body.theme-coursera .admin-stat-card b{font-size:var(--font-2xl)}
}
@media(max-width:480px){
  body.theme-coursera .hero-copy h1{font-size:clamp(22px,7vw,28px);line-height:1.35}
  body.theme-coursera .hero-copy > p{font-size:var(--font-base);line-height:1.7}
  body.theme-coursera .primary-btn,
  body.theme-coursera .ghost-btn{padding:var(--space-2) var(--space-4);font-size:var(--font-base)}
  body.theme-coursera .cert-showcase-copy h2{font-size:var(--font-2xl)}
}
@media(min-width:1024px){
  body.theme-coursera .lesson-grid{gap:var(--space-10)}
}