.apply-body { min-height: 100vh; background: var(--paper-cream); }
.apply-shell { padding: var(--space-xl) 0 var(--space-2xl); }
.apply-container { max-width: 720px; }

.apply-progress { margin-left: auto; display: flex; gap: 6px; }
.apply-progress .dot-step { width: 26px; height: 4px; border-radius: 2px; background: var(--paper-line-strong); transition: background var(--dur-fast); }
.apply-progress .dot-step.active { background: var(--sky-peach-deep); }
.apply-progress .dot-step.done { background: var(--ink-navy); }

.apply-card { background: var(--bg-card); border: 1px solid var(--paper-line); border-radius: var(--radius-lg); padding: var(--space-lg); margin-bottom: 1.25rem; }
.apply-card h1 { font-family: var(--font-display); font-size: var(--fs-h1); font-weight: 600; margin-top: 0.5rem; }
.apply-sub { color: var(--text-muted); margin-top: 0.6rem; }
.welcome-body p { margin-bottom: 1rem; color: var(--text-primary); }
.welcome-body strong { color: var(--sky-peach-deep); }
.apply-note { font-size: var(--fs-small); background: var(--paper-yellow); border-left: 3px solid var(--sky-peach-deep); padding: 0.9rem 1rem; border-radius: 6px; }

.time-pill {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-mono); font-size: var(--fs-tiny);
  background: var(--paper-yellow); border: 1px solid var(--paper-line-strong);
  padding: 0.5rem 1rem; border-radius: var(--radius-pill); margin-top: 0.75rem;
}

/* Auth (sign in / sign up) */
.auth-tabs { display: flex; gap: 0.5rem; margin-bottom: 1.2rem; }
.auth-tab { flex: 1; padding: 0.7rem; border-radius: var(--radius-sm); border: 1.5px solid var(--paper-line-strong); font-weight: 600; font-size: var(--fs-small); background: var(--paper-cream); }
.auth-tab.active { background: var(--ink-navy); color: #fff; border-color: var(--ink-navy); }
.oauth-btn {
  display: flex; align-items: center; justify-content: center; gap: 0.6rem;
  width: 100%; padding: 0.75rem; border: 1.5px solid var(--paper-line-strong);
  border-radius: var(--radius-sm); font-weight: 600; font-size: var(--fs-small);
  background: var(--bg-card); margin-bottom: 0.7rem; transition: background var(--dur-fast);
}
.oauth-btn:hover { background: var(--paper-cream); }
.oauth-btn svg { width: 18px; height: 18px; }
.auth-divider { display: flex; align-items: center; gap: 0.8rem; margin: 1.1rem 0; color: var(--text-muted); font-size: var(--fs-tiny); }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--paper-line-strong); }
.auth-error { color: #C0392B; font-size: var(--fs-small); margin-top: 0.6rem; display: none; }
.auth-error.show { display: block; }
.auth-switch { text-align: center; margin-top: 1rem; font-size: var(--fs-small); color: var(--text-muted); }
.auth-switch button { color: var(--accent-blue); font-weight: 600; text-decoration: underline; }

/* Live project cards (replace old language cards) */
.lang-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: var(--space-md); }
.lang-card { position: relative; border: 1.5px solid var(--paper-line-strong); border-radius: var(--radius-md); padding: var(--space-lg) var(--space-md); display: flex; flex-direction: column; align-items: center; gap: 0.3rem; transition: all var(--dur-fast) var(--ease-out); background: var(--paper-cream); }
.lang-card:hover { border-color: var(--ink-navy); transform: translateY(-3px); background: var(--bg-card); }
.live-badge { position: absolute; top: 12px; right: 12px; font-family: var(--font-mono); font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.05em; background: var(--sky-peach-deep); color: #fff; padding: 0.2rem 0.55rem; border-radius: var(--radius-pill); }
.lang-script { font-family: var(--font-display); font-size: 1.8rem; font-weight: 600; }
.lang-name { font-weight: 600; }
.lang-desc { font-size: var(--fs-tiny); color: var(--text-muted); text-align: center; }

@media (max-width: 560px) { .lang-grid { grid-template-columns: 1fr; } }

.radio-group { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.4rem; }
.radio-pill { display: flex; align-items: center; gap: 0.4rem; padding: 0.55rem 0.9rem; border: 1.5px solid var(--paper-line-strong); border-radius: var(--radius-pill); font-size: var(--fs-small); cursor: pointer; background: var(--paper-cream); transition: all var(--dur-fast); }
.radio-pill:has(input:checked) { background: var(--ink-navy); color: #fff; border-color: var(--ink-navy); }
.radio-pill input { accent-color: var(--ink-navy); }

.optional-tag { font-size: var(--fs-tiny); color: var(--text-muted); font-weight: 400; text-transform: none; letter-spacing: 0; }
.no-paste-tag { display: inline-block; font-family: var(--font-mono); font-size: 0.65rem; text-transform: uppercase; background: rgba(232,147,95,0.15); color: var(--sky-peach-deep); padding: 0.15rem 0.5rem; border-radius: var(--radius-pill); font-weight: 600; letter-spacing: 0.04em; }

.q-head { font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; margin-bottom: 1rem; }

.task-prompt { background: var(--paper-yellow); border-radius: var(--radius-sm); padding: 0.9rem 1rem; font-size: 0.95rem; margin-bottom: 1rem; }
.task-prompt em { color: var(--navy-soft); }

.response-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.1rem; }
.response-box { border: 1px solid var(--paper-line); border-radius: var(--radius-sm); padding: 1rem; font-size: 0.9rem; }
.response-box .tag { display: inline-block; font-family: var(--font-mono); font-size: var(--fs-tiny); text-transform: uppercase; color: var(--sky-peach-deep); margin-bottom: 0.5rem; }
@media (max-width: 640px) { .response-pair { grid-template-columns: 1fr; } }

textarea.no-paste { border-color: var(--sky-peach-deep); }
textarea.paste-blocked-flash { animation: paste-shake 0.35s; border-color: #C0392B !important; }
@keyframes paste-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

/* Video widget */
.video-widget { border: 1px solid var(--paper-line); border-radius: var(--radius-md); overflow: hidden; }
.video-tabs { display: flex; border-bottom: 1px solid var(--paper-line); }
.video-tab { flex: 1; padding: 0.8rem; font-size: var(--fs-small); font-weight: 600; color: var(--text-muted); background: var(--paper-cream); }
.video-tab.active { background: var(--bg-card); color: var(--ink-navy); }
.video-pane { padding: var(--space-md); }
#video-preview, #video-final { width: 100%; max-height: 320px; border-radius: var(--radius-sm); background: #000; }
.video-controls { display: flex; align-items: center; gap: 1rem; margin-top: 1rem; flex-wrap: wrap; }
.video-timer { font-family: var(--font-mono); font-size: var(--fs-small); color: var(--text-muted); }
.video-result { padding: var(--space-md); display: flex; flex-direction: column; gap: 0.8rem; }
#video-file-input { width: 100%; }