/* ═══════════════════════════════════════════════════════════
   EduForge — Global Styles
   ═══════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --primary:   #4f46e5;
  --primary-l: #eff0ff;
  --secondary: #818cf8;
  --accent:    #f59e0b;
  --text:      #1e293b;
  --text-muted:#64748b;
  --border:    #e2e8f0;
  --bg:        #f8fafc;
  --surface:   #ffffff;
  --radius:    10px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.08);
  --shadow:    0 4px 16px rgba(0,0,0,.1);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.14);
  --transition:.2s ease;
}

html, body { height: 100%; font-family: 'Inter', -apple-system, sans-serif; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; }

a { color: inherit; }
input, textarea, select { font-family: inherit; font-size: .875rem; color: var(--text); }

/* ── Typography ────────────────────────────────────────────── */
h1 { font-size: 1.75rem; font-weight: 700; letter-spacing: -.02em; }
h2 { font-size: 1.25rem; font-weight: 600; }
h3 { font-size: 1rem; font-weight: 600; }
p  { line-height: 1.6; }
.text-muted { color: var(--text-muted); font-size: .875rem; }

/* ── Buttons ───────────────────────────────────────────────── */
button { cursor: pointer; border: none; font-family: inherit; font-size: .875rem; transition: var(--transition); border-radius: 8px; }

.btn-primary {
  background: var(--primary); color: #fff; padding: 10px 20px; font-weight: 500;
  display: inline-flex; align-items: center; gap: 6px;
}
.btn-primary:hover { background: #4338ca; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(79,70,229,.3); }
.btn-primary:active { transform: none; }
.btn-primary:disabled { opacity: .6; cursor: default; transform: none; }

.btn-ghost {
  background: transparent; color: var(--text-muted); padding: 10px 20px;
  border: 1px solid var(--border);
}
.btn-ghost:hover { background: var(--bg); color: var(--text); }

.btn-outline-primary {
  background: transparent; color: var(--primary); padding: 10px 20px; font-weight: 500;
  border: 1px solid var(--primary);
  display: inline-flex; align-items: center; gap: 6px;
}
.btn-outline-primary:hover { background: var(--primary-l); }

.btn-danger { background: #ef4444; color: #fff; padding: 10px 20px; font-weight: 500; }
.btn-danger:hover { background: #dc2626; }

.btn-danger-ghost { background: transparent; color: #ef4444; padding: 4px 8px; font-size: .8rem; }
.btn-danger-ghost:hover { background: #fef2f2; }

.btn-ai {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff; padding: 8px 16px; font-weight: 500;
  display: inline-flex; align-items: center; gap: 6px;
}
.btn-ai:hover { opacity: .9; transform: translateY(-1px); }

.btn-export {
  background: var(--surface); border: 1px solid var(--border);
  color: var(--text); padding: 8px 16px; font-weight: 500;
  display: inline-flex; align-items: center; gap: 6px;
}
.btn-export:hover { background: var(--bg); }

.btn-sm   { padding: 6px 12px; font-size: .8rem; }
.btn-full { width: 100%; justify-content: center; padding: 12px 20px; font-size: .9rem; }
.btn-icon { padding: 8px; border-radius: 8px; aspect-ratio: 1; }
.btn-icon-sm { padding: 4px 6px; border-radius: 6px; background: transparent; color: var(--text-muted); border: 1px solid var(--border); }
.btn-icon-sm:hover { background: var(--bg); color: var(--text); }

/* ── Forms ─────────────────────────────────────────────────── */
.form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.form-group label { font-size: .8rem; font-weight: 500; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; }

input[type="text"], input[type="email"], input[type="password"], input[type="url"], input[type="number"],
textarea, select {
  border: 1.5px solid var(--border); border-radius: 8px; padding: 10px 12px;
  background: var(--surface); transition: border-color var(--transition);
  width: 100%;
}
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(79,70,229,.12); }

.input-sm  { padding: 7px 10px; font-size: .8rem; }
.input-lg  { font-size: 1rem; padding: 12px 16px; }

.form-error { color: #ef4444; font-size: .8rem; padding: 8px 12px; background: #fef2f2; border-radius: 6px; border: 1px solid #fecaca; }

textarea { resize: vertical; min-height: 80px; }

/* ── Spinner ───────────────────────────────────────────────── */
@keyframes spin { to { transform: rotate(360deg); } }
.spinner {
  display: inline-block; width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,.4); border-top-color: #fff;
  border-radius: 50%; animation: spin .7s linear infinite;
}

/* ── Modals ────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(15,23,42,.5); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 24px;
}
.modal {
  background: var(--surface); border-radius: 16px; width: 100%; max-width: 560px;
  box-shadow: var(--shadow-lg); display: flex; flex-direction: column; max-height: 90vh;
}
.modal-sm  { max-width: 400px; }
.modal-lg  { max-width: 780px; }
.modal-header { padding: 24px 24px 16px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border); }
.modal-header h2 { font-size: 1.1rem; }
.modal-close { background: none; border: none; color: var(--text-muted); font-size: 1rem; padding: 4px 8px; border-radius: 6px; }
.modal-close:hover { background: var(--bg); }
.modal-body { padding: 24px; overflow-y: auto; flex: 1; }
.modal-footer { padding: 16px 24px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 10px; }

/* ── Top Nav ───────────────────────────────────────────────── */
.topnav {
  height: 60px; background: var(--surface); border-bottom: 1px solid var(--border);
  display: flex; align-items: center; padding: 0 24px; gap: 16px;
  position: sticky; top: 0; z-index: 100; box-shadow: var(--shadow-sm);
}
.topnav-brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.1rem; flex: 1; }
.topnav-actions { display: flex; align-items: center; gap: 12px; }
.nav-link { color: var(--text-muted); text-decoration: none; font-size: .875rem; display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 6px; }
.nav-link:hover { color: var(--text); background: var(--bg); }
.user-chip { display: flex; align-items: center; gap: 8px; padding: 4px 12px; background: var(--bg); border-radius: 20px; font-size: .875rem; }
.user-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 600; }

/* ── Auth Page ─────────────────────────────────────────────── */
/* Soft cyan→indigo wash + fine dot pattern lifted onto the page itself
   so it spans the WHOLE auth screen (not just the left brand panel).
   The form panel sits on top transparently so the same backdrop reads
   continuously across both columns. */
.auth-page {
  min-height: 100vh;
  background-color: #f0f9ff;
  background-image:
    radial-gradient(ellipse 60% 60% at 12% 12%, rgba(125, 211, 252, .55), transparent 70%),
    radial-gradient(ellipse 60% 60% at 88% 92%, rgba(196, 181, 253, .40), transparent 70%),
    radial-gradient(ellipse 50% 40% at 60% 50%, rgba(147, 197, 253, .25), transparent 70%),
    radial-gradient(circle, rgba(15, 23, 42, .07) 1px, transparent 1px);
  background-size: auto, auto, auto, 22px 22px;
  background-attachment: fixed;
}
/* Split 60 % brand / 40 % form. Using fr units (3fr 2fr) so it keeps the
   ratio at any width while the inner content fluid-scales via clamp(). */
.auth-layout { display: grid; grid-template-columns: 3fr 2fr; min-height: 100vh; }

/* Brand panel — content only; backdrop is on .auth-page so the
   gradient is continuous across both columns. */
.auth-brand {
  position: relative;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  /* Fluid padding — shrinks from 64 px on big screens down to 28 px on
     narrow viewports so the brand content doesn't crash into the edges. */
  padding: clamp(28px, 5vw, 64px);
  background: transparent;
}
.auth-brand-inner { color: #0f172a; max-width: 480px; position: relative; z-index: 1; }

.brand-logo { display: flex; align-items: center; margin-bottom: 56px; }
.brand-logo img { height: 56px !important; width: auto; display: block; }

.auth-brand h1 {
  font-family: 'Playfair Display', Georgia, serif;
  /* Fluid headline — fluid-scales from 2.4 rem on small screens to 4 rem
     on big ones so it never wraps to 3 lines or overflows the panel. */
  font-size: clamp(2.4rem, 4.4vw, 4rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.015em;
  color: #2563eb;        /* brinx blue */
  margin-bottom: 22px;
}
/* Underline under "e-learning in minutes."  `nowrap` keeps the line
   (and its trailing period) on a single row so the H1 stays exactly two
   lines. The line itself is an animated brinx-gradient loading-bar
   (cyan → blue, same stops as the logo star) that loops left → right —
   draws the eye without being noisy. The static layer = subtle white
   wash so the bar reads on any background; the moving layer is the
   gradient + glow on top. */
.auth-brand h1 .hl-underline {
  display: inline-block;
  white-space: nowrap;
  position: relative;
  padding-bottom: 12px;
}
.auth-brand h1 .hl-underline::before {
  /* Static translucent-white track that sits behind the loading bar so
     the underline still reads when the bar is at 0 % width or after the
     animation finishes. */
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 6px; border-radius: 3px;
  background: rgba(255, 255, 255, .55);
  pointer-events: none;
}
.auth-brand h1 .hl-underline::after {
  /* Loading bar that fills 0 → 100 % once on page load and STAYS at
     100 %. Single play, no looping (the previous infinite sweep snapped
     at the loop boundary, hence the jump). Each fresh page visit
     replays it. No box-shadow / drop-shadow / glow — keeps the line
     crisp and avoids any luminous halo at the right edge. */
  content: '';
  position: absolute; left: 0; bottom: 0;
  width: 0%;
  height: 6px; border-radius: 3px;
  background: linear-gradient(90deg, #22d3ff 0%, #1e40ff 100%);
  animation: brinx-fill-h1 2s ease-out 0.15s 1 forwards;
  pointer-events: none;
}
@keyframes brinx-fill-h1 {
  0%   { width: 0%; }
  100% { width: 100%; }
}
/* Period that pops in AFTER the loading bar finishes — feels like a
   completion mark. Bar = 2 s with 0.15 s delay → finishes at 2.15 s.
   Period kicks in 50 ms later so the eye sees the bar settle first. */
.auth-brand h1 .hl-period {
  display: inline-block;
  opacity: 0;
  transform: translateY(-2px) scale(.5);
  transform-origin: center bottom;
  animation: brinx-period-pop 0.45s cubic-bezier(.34, 1.56, .64, 1) 2.2s 1 forwards;
}
@keyframes brinx-period-pop {
  0%   { opacity: 0; transform: translateY(-4px) scale(.5); }
  60%  { opacity: 1; transform: translateY(0)    scale(1.15); }
  100% { opacity: 1; transform: translateY(0)    scale(1); }
}
.auth-brand p {
  font-size: 1.05rem; line-height: 1.6; color: #475569;
  opacity: 1; margin-bottom: 36px;
}
.feature-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 14px;
}
.feature-list li {
  font-size: .95rem; color: #334155; opacity: 1;
  display: flex; align-items: center; gap: 12px;
}
/* Tiny brinx 4-point star bullet — the same star used everywhere
   across the project (favicon, AI Generate button, etc.). Embedded
   as an SVG data-URI so each li gets a crisp brand mark without an
   extra HTTP request. */
.feature-list li::before {
  content: "";
  flex-shrink: 0;
  width: 16px; height: 16px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232563eb'><path d='M12 0C13 8 16 11 24 12C16 13 13 16 12 24C11 16 8 13 0 12C8 11 11 8 12 0Z'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.auth-form-wrap {
  display: flex; align-items: center; justify-content: center;
  /* Same fluid padding rhythm as the brand panel for visual harmony.
     Transparent so the page-level cyan/indigo backdrop shows through —
     the form-card itself stays white for legibility. */
  padding: clamp(24px, 4vw, 48px);
  background: transparent;
}
.auth-form-card { width: 100%; max-width: 420px; }

/* Auth tabs render as a pair of independent blue buttons — active one
   is filled, inactive one is the same size with a blue outline only.
   Gives them visible weight on the translucent gradient backdrop where
   the old "wrapped border, transparent inactive tab" pattern almost
   disappeared. */
.auth-tabs   { display: flex; gap: 8px; margin-bottom: 32px; }
.auth-tab    {
  flex: 1; padding: 10px;
  background: transparent;
  border: 1.5px solid var(--primary);
  border-radius: 10px;
  font-size: .875rem; font-weight: 500;
  color: var(--primary);
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.auth-tab.active                  { background: var(--primary); color: #fff; }
.auth-tab:hover:not(.active)      { background: rgba(79, 70, 229, .08); }

.auth-form { display: flex; flex-direction: column; gap: 0; }

/* Tablet: keep both panels but ease the split so the form column has
   enough room for inputs at this viewport. Logo + headline shrink via
   the clamp()s above. */
@media (max-width: 1100px) {
  .auth-layout { grid-template-columns: 1fr 1fr; }
}
/* Phones / narrow windows: collapse to a single column and hide the
   brand panel — login form gets full width. */
@media (max-width: 768px) {
  .auth-layout { grid-template-columns: 1fr; }
  .auth-brand  { display: none; }
}

/* ── Dashboard ─────────────────────────────────────────────── */
.app-page { min-height: 100vh; }
.dashboard-layout { max-width: 1200px; margin: 0 auto; padding: 40px 24px; }
.dashboard-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 32px; }
.dashboard-header h1 { margin-bottom: 4px; }

.projects-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }

.project-card {
  background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius);
  overflow: hidden; transition: box-shadow var(--transition), transform var(--transition);
  cursor: pointer;
  /* Flex column so the info area can grow and pin .project-actions to the
     bottom — with the grid stretching every card to the row's tallest
     sibling, actions line up in a single horizontal band across cards. */
  display: flex; flex-direction: column;
}
.project-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); border-color: transparent; }
/* 16:9 thumbnail. Hosts a 1280x720 inner stage that's scaled down to the
   card width by JS — see fitThumbnails(). Keeps every slide element's
   relative sizing (incl. font-size) intact. */
.project-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #f1f5f9;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  color: #4f46e5;
}
.project-thumb-empty { font-size: 2.5rem; }
.project-thumb img { width: 100%; height: 100%; object-fit: cover; }
.slide-thumb-stage {
  position: absolute; top: 0; left: 0;
  width: 1280px; height: 720px;
  transform-origin: top left;
  pointer-events: none;
  /* Match the editor canvas's font defaults so text elements that rely on
     `font-size: inherit` end up the right size in the thumbnail too. */
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  line-height: 1.4;
  color: #1a1a2e;
}
/* One layer = one slide composited onto the stage. Used to stack a
   bg-stencil slide UNDER the picked content slide, mirroring runtime.
   `inset:0` covers the full 1280×720 stage; an explicit `z-index`
   makes each layer its own stacking context so element z-indexes
   inside one layer can't paint through to the other. */
.slide-thumb-layer { position: absolute; inset: 0; }
.slide-thumb-layer-bg      { z-index: 0; }
.slide-thumb-layer-content { z-index: 1; }
.thumb-el { position: absolute; overflow: hidden; box-sizing: border-box; }
.thumb-el img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb-el.thumb-text {
  display: flex; align-items: center;
  word-wrap: break-word; overflow-wrap: break-word;
}
/* Mirror the editor's .el-text rule: every wrapped tag inherits font sizing
   from the styled parent. Without this, browser default h1=2em / h2=1.5em
   overrides the slide's intended size — e.g. a 3rem styled h1 ends up
   rendered at 6rem and overflows the stage. */
.thumb-el.thumb-text > * {
  margin: 0;
  width: 100%;
  font-size: inherit;
  font-family: inherit;
  font-weight: inherit;
  font-style: inherit;
  line-height: inherit;
  color: inherit;
  white-space: pre-line;
}
/* List markup inside a thumbnail text element — keep bullets visible at
   thumbnail scale.  `white-space: normal` overrides the pre-line rule
   above so the AI's pretty-printed list HTML doesn't render as a tower
   of blank lines between items. */
.thumb-el.thumb-text ul, .thumb-el.thumb-text ol {
  margin: 0.15em 0;
  padding-left: 1.2em;
  white-space: normal;
  list-style-position: outside;
}
.thumb-el.thumb-text ul { list-style-type: disc; }
.thumb-el.thumb-text ol { list-style-type: decimal; }
.thumb-el.thumb-text li {
  margin: 0;
  width: auto;
  white-space: normal;
}
.thumb-el.thumb-btn {
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-primary, #4f46e5);
  color: #fff; border-radius: 8px; font-weight: 600;
  text-align: center; padding: 0 16px;
}
.thumb-el.thumb-other {
  background: rgba(148, 163, 184, .15);
  border: 1px dashed rgba(148, 163, 184, .4);
}

.project-info { padding: 16px 16px 8px; }
.project-info h3 {
  font-size: .95rem;
  margin-bottom: 4px;
  /* Two-line clamp — long titles get an ellipsis instead of pushing
     the rest of the card down, so all cards stay the same height. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
  /* Reserve a stable two-line slot so cards with a 1-line title don't
     squeeze upward — keeps the rest of the metadata vertically aligned. */
  min-height: calc(.95rem * 1.4 * 2);
  line-height: 1.4;
}
.project-info p { font-size: .8rem; }
.project-date { color: var(--text-muted); font-size: .75rem; margin-top: 4px; }

/* Action row: Edit stretches, secondary actions stay tight on the right,
   Delete sits at the far edge with a soft red tint so destructive intent
   reads at a glance. The row is pinned to the bottom of the card by the
   .project-info flex:1 above. */
.project-actions {
  display: flex; gap: 8px; padding: 8px 16px 16px;
  align-items: center;
  margin-top: auto;
}
/* Match the ghost-button height so Edit doesn't loom over its neighbours.
   .btn-ghost has a 1px border that adds 2px to its outer height; the
   transparent border here keeps Edit at the same outer height. Edit hugs
   its content (no flex:1) — the user wants it sized to its label. */
.project-actions .btn-primary {
  justify-content: center;
  border: 1px solid transparent;
}
.project-actions .btn-primary:hover {
  transform: none; box-shadow: none; background: #4338ca;
}
.project-actions .btn-delete {
  margin-left: 4px;
  color: #dc2626;
  border-color: #fecaca;
  background: #fff;
}
.project-actions .btn-delete:hover {
  background: #fef2f2;
  color: #b91c1c;
  border-color: #fca5a5;
}

.skeleton-card { background: var(--border); border-radius: var(--radius); height: 220px; animation: pulse 1.5s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .5; } }

.empty-state { flex-direction: column; align-items: center; justify-content: center; padding: 80px 40px; text-align: center; }
.empty-icon { font-size: 3rem; margin-bottom: 16px; }
.empty-state h3 { margin-bottom: 8px; }
.empty-state p { color: var(--text-muted); margin-bottom: 24px; }

/* ── Settings Page ─────────────────────────────────────────── */
.settings-layout { max-width: 1100px; margin: 0 auto; padding: 40px 24px; }
.settings-header { margin-bottom: 32px; }
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.settings-card { background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius); padding: 24px; }
.settings-card h3 { margin-bottom: 20px; font-size: .95rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .07em; }
.settings-preview-card { grid-column: 1 / -1; }
.settings-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 24px; }
.settings-msg { font-size: .875rem; padding: 10px 16px; border-radius: 8px; margin-right: auto; }
.settings-msg.success { background: #f0fdf4; color: #15803d; }
.settings-msg.error { background: #fef2f2; color: #b91c1c; }

.color-row { display: flex; gap: 8px; align-items: center; }
.color-picker-full { width: 100%; height: 40px; padding: 2px; border: 1.5px solid var(--border); border-radius: 8px; cursor: pointer; }
.hex-input { flex: 1; font-family: 'Courier New', monospace; }

.logo-preview { min-height: 80px; border: 1.5px dashed var(--border); border-radius: 8px; display: flex; align-items: center; justify-content: center; background: var(--bg); padding: 12px; }

/* Brand preview */
.brand-preview { padding: 24px; background: var(--bg); border-radius: 8px; }
.preview-slide { background: #fff; border-radius: 12px; padding: 24px; box-shadow: var(--shadow); font-family: Inter, sans-serif; }
.preview-header { padding-bottom: 16px; margin-bottom: 16px; border-bottom: 2px solid #f1f5f9; display: flex; align-items: center; gap: 12px; }
.preview-body h2 { margin-bottom: 8px; }
.preview-body p { color: #64748b; font-size: .875rem; margin-bottom: 16px; }
.preview-btns { display: flex; gap: 8px; margin-bottom: 16px; }
.preview-btn { padding: 8px 20px; border-radius: 8px; border: none; color: #fff; font-weight: 500; cursor: default; font-size: .875rem; }
.preview-answer { padding: 10px 14px; border: 2px solid; border-radius: 8px; font-size: .875rem; display: inline-block; }

/* Misc helpers */
.link { color: var(--primary); cursor: pointer; text-decoration: underline; }
@media (max-width: 900px) { .settings-grid { grid-template-columns: 1fr; } }