diff --git a/frontend/src/styles/account.css b/frontend/src/styles/account.css
new file mode 100644
index 0000000..52dc6ba
--- /dev/null
+++ b/frontend/src/styles/account.css
@@ -0,0 +1,348 @@
+.page {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 32px 22px 72px;
+}
+
+.hero {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 18px;
+  margin-bottom: 12px;
+}
+
+.hero-actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 28px;
+}
+
+.divider {
+  height: 1px;
+  background: rgba(255, 255, 255, 0.08);
+  margin: 18px 0;
+}
+
+.subhead h3 {
+  margin: 0;
+  font-size: 16px;
+}
+
+.eyebrow {
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--text-muted);
+  margin: 0 0 6px;
+  font-size: 13px;
+}
+
+h1 {
+  margin: 0 0 6px;
+  font-size: 32px;
+}
+
+.lede {
+  margin: 0;
+  color: var(--text-muted);
+  max-width: 640px;
+}
+
+.account-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  gap: 12px;
+  margin-top: 12px;
+  align-items: stretch;
+}
+
+.account-column,
+.account-stack {
+  display: grid;
+  gap: 12px;
+  align-content: start;
+}
+
+.account-column .module,
+.account-stack .module {
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.module {
+  padding: 18px;
+}
+
+.module-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.muted {
+  color: var(--text-muted);
+  margin: 10px 0 0;
+}
+
+.kv {
+  margin-top: 12px;
+  border: 1px solid var(--card-border);
+  border-radius: 12px;
+  overflow: hidden;
+}
+
+.row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 10px 12px;
+  background: rgba(255, 255, 255, 0.02);
+  border-top: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+.row:first-child {
+  border-top: none;
+}
+
+.k {
+  color: var(--text-muted);
+}
+
+.v {
+  color: var(--text-strong);
+}
+
+.link {
+  color: var(--accent-cyan);
+  text-decoration: none;
+}
+
+.actions {
+  margin-top: 12px;
+  display: flex;
+  gap: 10px;
+}
+
+button.primary {
+  background: linear-gradient(90deg, #4f8bff, #7dd0ff);
+  color: #0b1222;
+  padding: 10px 14px;
+  border: none;
+  border-radius: 10px;
+  cursor: pointer;
+  font-weight: 700;
+}
+
+.secret-box {
+  margin-top: 12px;
+  border-radius: 12px;
+  border: 1px solid rgba(255, 255, 255, 0.14);
+  background: rgba(255, 255, 255, 0.03);
+  padding: 12px;
+}
+
+.secret-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  margin-bottom: 8px;
+}
+
+.secret-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.secret {
+  word-break: break-word;
+  color: var(--text-strong);
+}
+
+.hint {
+  margin-top: 6px;
+  color: var(--text-muted);
+  font-size: 12px;
+}
+
+.jellyfin-detail {
+  margin-top: auto;
+}
+
+.copy {
+  background: transparent;
+  border: 1px solid rgba(255, 255, 255, 0.14);
+  color: var(--text-primary);
+  border-radius: 10px;
+  padding: 6px 10px;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.copied {
+  font-size: 12px;
+  color: rgba(120, 255, 160, 0.9);
+}
+
+.error-box {
+  margin-top: 12px;
+  border-radius: 12px;
+  border: 1px solid rgba(255, 87, 87, 0.5);
+  background: rgba(255, 87, 87, 0.06);
+  padding: 10px 12px;
+}
+
+@media (max-width: 820px) {
+  .account-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .account-stack .module {
+    flex: none;
+  }
+
+  .account-column .module {
+    flex: none;
+  }
+}
+
+@media (max-width: 720px) {
+  .page {
+    padding: 24px 16px 56px;
+  }
+
+  .hero {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .hero-actions {
+    width: 100%;
+    justify-content: flex-start;
+    gap: 12px;
+  }
+
+  .row {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .actions {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .secret-head {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .req-row {
+    grid-template-columns: 1fr;
+  }
+}
+
+.admin {
+  margin-top: 12px;
+}
+
+.requests {
+  margin-top: 12px;
+  display: grid;
+  gap: 10px;
+}
+
+.req-row {
+  display: grid;
+  grid-template-columns: minmax(220px, 1.2fr) minmax(200px, 1fr) minmax(200px, 1fr) minmax(140px, 0.6fr);
+  gap: 16px;
+  align-items: start;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  background: rgba(0, 0, 0, 0.18);
+  border-radius: 14px;
+  padding: 10px 12px;
+}
+
+.req-summary {
+  display: grid;
+  gap: 6px;
+}
+
+.req-label {
+  color: var(--text-muted);
+  font-size: 11px;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+.req-flags {
+  display: grid;
+  gap: 8px;
+  align-content: start;
+}
+
+.req-flag-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.note {
+  color: var(--text-muted);
+}
+
+.flag-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 8px;
+  border-radius: 999px;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  background: rgba(0, 0, 0, 0.2);
+  font-size: 12px;
+}
+
+.flag-pill input {
+  width: 14px;
+  height: 14px;
+}
+
+.req-note .input {
+  width: 100%;
+  border-radius: 10px;
+  border: 1px solid rgba(255, 255, 255, 0.14);
+  background: rgba(0, 0, 0, 0.22);
+  color: var(--text-primary);
+  padding: 8px 10px;
+}
+
+.req-actions {
+  display: grid;
+  gap: 8px;
+  align-content: start;
+}
+
+.req-action-stack {
+  display: grid;
+  gap: 8px;
+}
+
+@media (max-width: 900px) {
+  .req-row {
+    grid-template-columns: 1fr;
+    gap: 12px;
+    align-items: start;
+  }
+
+  .note {
+    white-space: normal;
+  }
+}
diff --git a/frontend/src/styles/onboarding.css b/frontend/src/styles/onboarding.css
new file mode 100644
index 0000000..d410d69
--- /dev/null
+++ b/frontend/src/styles/onboarding.css
@@ -0,0 +1,653 @@
+.page {
+  max-width: 1080px;
+  margin: 0 auto;
+  padding: 32px 22px 72px;
+}
+
+.hero {
+  margin-bottom: 12px;
+  padding: 18px;
+}
+
+.eyebrow {
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--text-muted);
+  margin: 0 0 6px;
+  font-size: 13px;
+}
+
+h1 {
+  margin: 0 0 6px;
+  font-size: 32px;
+}
+
+.lede {
+  margin: 0;
+  color: var(--text-muted);
+  max-width: 640px;
+}
+
+.module {
+  padding: 18px;
+}
+
+.module-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 18px;
+}
+
+.status-form {
+  display: flex;
+  gap: 10px;
+  margin-top: 12px;
+}
+
+.status-meta {
+  margin-top: 12px;
+  padding: 12px;
+  border-radius: 14px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  background: rgba(0, 0, 0, 0.18);
+}
+
+.meta-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 14px;
+}
+
+.meta-row .label {
+  color: var(--text-muted);
+}
+
+.input {
+  flex: 1;
+  padding: 10px 12px;
+  border-radius: 10px;
+  border: 1px solid rgba(255, 255, 255, 0.14);
+  background: rgba(0, 0, 0, 0.25);
+  color: var(--text-primary);
+}
+
+button.primary {
+  background: linear-gradient(90deg, #4f8bff, #7dd0ff);
+  color: #0b1222;
+  padding: 10px 14px;
+  border: none;
+  border-radius: 10px;
+  cursor: pointer;
+  font-weight: 700;
+}
+
+button.secondary {
+  background: rgba(255, 255, 255, 0.08);
+  border: 1px solid rgba(255, 255, 255, 0.16);
+  color: var(--text-primary);
+  padding: 8px 12px;
+  border-radius: 10px;
+  cursor: pointer;
+  font-weight: 600;
+}
+
+button.primary:disabled,
+button.secondary:disabled,
+button.copy:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.steps {
+  margin-top: 16px;
+}
+
+.onboarding-head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 14px;
+  margin-bottom: 8px;
+}
+
+.section-stepper {
+  margin: 16px 0 18px;
+  list-style: none;
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 10px;
+  padding: 0;
+}
+
+.stepper-item {
+  min-width: 0;
+}
+
+.stepper-card {
+  width: 100%;
+  text-align: left;
+  padding: 12px 12px 12px 36px;
+  border-radius: 12px;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  background: rgba(0, 0, 0, 0.2);
+  color: var(--text-primary);
+  display: flex;
+  gap: 8px;
+  position: relative;
+}
+
+.stepper-card::after {
+  display: none;
+}
+
+.stepper-dot {
+  position: absolute;
+  left: 12px;
+  top: 12px;
+  width: 10px;
+  height: 10px;
+  border-radius: 999px;
+  border: 2px solid rgba(255, 255, 255, 0.22);
+  background: rgba(255, 255, 255, 0.16);
+  z-index: 1;
+}
+
+.stepper-body {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  min-width: 0;
+}
+
+.stepper-title {
+  font-weight: 700;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.stepper-meta {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px 10px;
+  flex-wrap: wrap;
+  color: var(--text-muted);
+  width: 100%;
+}
+
+.stepper-meta .pill {
+  padding: 4px 6px;
+  font-size: 11px;
+  white-space: nowrap;
+}
+
+.pill-compact {
+  padding: 4px 6px;
+  font-size: 11px;
+  white-space: nowrap;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.stepper-card.active {
+  border-color: rgba(125, 208, 255, 0.5);
+  box-shadow: 0 0 0 1px rgba(79, 139, 255, 0.3);
+}
+
+.stepper-card.active .stepper-dot {
+  background: rgba(125, 208, 255, 0.8);
+  border-color: rgba(125, 208, 255, 0.85);
+}
+
+.stepper-card.done {
+  border-color: rgba(92, 214, 167, 0.35);
+  background: rgba(92, 214, 167, 0.08);
+}
+
+.stepper-card.done .stepper-dot {
+  background: rgba(92, 214, 167, 0.9);
+  border-color: rgba(92, 214, 167, 0.95);
+}
+
+.stepper-card.locked {
+  opacity: 0.6;
+}
+
+@media (max-width: 1200px) {
+  .section-stepper {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 860px) {
+  .section-stepper {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 520px) {
+  .section-stepper {
+    grid-template-columns: 1fr;
+  }
+}
+
+.credential-card {
+  margin-top: 14px;
+  padding: 14px;
+  border-radius: 14px;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  background: rgba(0, 0, 0, 0.2);
+}
+
+.credential-head {
+  margin-bottom: 10px;
+}
+
+.credential-head h4 {
+  margin: 0 0 4px;
+  font-size: 18px;
+}
+
+.credential-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 14px;
+}
+
+.credential-field .label {
+  display: block;
+  margin-bottom: 6px;
+  color: var(--text-muted);
+}
+
+.credential-field .input[readonly] {
+  opacity: 0.8;
+}
+
+.password-row {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.password-row .input {
+  flex: 1;
+}
+
+.section-shell {
+  margin-top: 16px;
+  padding-top: 12px;
+  border-top: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.section-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 12px;
+}
+
+.section-actions {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  width: 100%;
+  margin-top: 12px;
+}
+
+.step-grid {
+  display: grid;
+  gap: 12px;
+}
+
+.step-card {
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 14px;
+  padding: 12px 12px 10px;
+  background: rgba(255, 255, 255, 0.02);
+  display: flex;
+  flex-direction: column;
+}
+
+.step-note {
+  margin-top: 8px;
+  padding: 8px 10px;
+  border-radius: 10px;
+  border: 1px solid rgba(0, 229, 197, 0.35);
+  background: rgba(0, 229, 197, 0.08);
+  color: var(--text-strong);
+  font-weight: 600;
+}
+
+.step-card.blocked {
+  opacity: 0.55;
+  pointer-events: none;
+}
+
+.step-card.done {
+  border-color: rgba(92, 214, 167, 0.35);
+  background: rgba(92, 214, 167, 0.05);
+}
+
+.step-head {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.auto-pill {
+  margin-left: auto;
+  font-size: 12px;
+  padding: 3px 10px;
+  border-radius: 999px;
+}
+
+.step-title {
+  font-weight: 650;
+  color: var(--text-strong);
+}
+
+.step-label {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.step-label input {
+  width: 18px;
+  height: 18px;
+}
+
+.step-bullets {
+  margin: 8px 0 0;
+  padding-left: 18px;
+  color: var(--text-muted);
+}
+
+.step-links {
+  margin-top: 10px;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 10px;
+}
+
+.step-links a {
+  color: rgba(92, 214, 167, 0.95);
+  text-decoration: none;
+  font-weight: 600;
+  border-radius: 999px;
+  padding: 6px 14px;
+  border: 1px solid rgba(92, 214, 167, 0.35);
+  background: rgba(92, 214, 167, 0.12);
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.step-links a:hover {
+  text-decoration: none;
+  background: rgba(92, 214, 167, 0.2);
+}
+
+.step-actions {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  justify-content: flex-end;
+  margin-top: auto;
+  padding-top: 10px;
+}
+
+.recovery-verify {
+  display: flex;
+  gap: 10px;
+  margin-top: 10px;
+  align-items: stretch;
+}
+
+.recovery-verify .input {
+  flex: 1;
+}
+
+.guide-details {
+  margin-top: 10px;
+}
+
+.guide-summary {
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  padding: 6px 12px;
+  border-radius: 999px;
+  border: 1px solid rgba(92, 214, 167, 0.5);
+  background: rgba(92, 214, 167, 0.15);
+  color: var(--text-strong);
+  font-weight: 600;
+}
+
+.guide-summary::after {
+  content: "Tap to open";
+  font-size: 12px;
+  color: var(--text-muted);
+}
+
+.guide-details[open] .guide-summary::after {
+  content: "Tap to close";
+}
+
+.guide-summary::-webkit-details-marker {
+  display: none;
+}
+
+.guide-groups {
+  display: grid;
+  gap: 12px;
+  margin-top: 8px;
+}
+
+.guide-title {
+  margin: 0 0 6px;
+}
+
+.guide-images {
+  display: grid;
+  gap: 10px;
+}
+
+.guide-shot {
+  border-radius: 10px;
+  overflow: hidden;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  background: rgba(0, 0, 0, 0.2);
+  padding: 0;
+  cursor: zoom-in;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.guide-shot figcaption {
+  margin: 0;
+  padding: 10px 12px 6px;
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--text-strong);
+}
+
+.guide-shot img {
+  display: block;
+  border-radius: 10px;
+  max-width: 100%;
+  width: auto;
+  height: auto;
+  max-height: min(60vh, 520px);
+  margin: 0 auto 10px;
+}
+
+.guide-pagination {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.guide-dots {
+  display: flex;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+
+.guide-dot {
+  border: 1px solid rgba(255, 255, 255, 0.18);
+  background: rgba(0, 0, 0, 0.3);
+  color: var(--text-muted);
+  border-radius: 999px;
+  padding: 4px 8px;
+  cursor: pointer;
+  font-size: 12px;
+}
+
+.guide-dot.active {
+  border-color: rgba(120, 180, 255, 0.5);
+  color: var(--text-strong);
+}
+
+.ready-box {
+  margin-top: 18px;
+  padding: 14px;
+  border-radius: 14px;
+  border: 1px solid rgba(92, 214, 167, 0.3);
+  background: rgba(92, 214, 167, 0.08);
+}
+
+.task-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: grid;
+  gap: 8px;
+}
+
+.task-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.task-name {
+  min-width: 180px;
+}
+
+.task-detail {
+  color: var(--text-muted);
+}
+
+.error-box {
+  margin-top: 12px;
+  padding: 12px;
+  border-radius: 14px;
+  border: 1px solid rgba(255, 120, 120, 0.4);
+  background: rgba(255, 70, 70, 0.1);
+}
+
+.tooltip-wrap {
+  display: inline-flex;
+}
+
+.lightbox {
+  position: fixed;
+  inset: 0;
+  background: rgba(6, 8, 12, 0.82);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 28px;
+  z-index: 2000;
+}
+
+.lightbox-card {
+  width: min(1400px, 96vw);
+  max-height: 94vh;
+  background: rgba(10, 14, 24, 0.96);
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: 16px;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.lightbox-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.lightbox-label {
+  color: var(--text-muted);
+}
+
+.lightbox-card img {
+  width: 100%;
+  max-height: 82vh;
+  object-fit: contain;
+  border-radius: 12px;
+  background: rgba(0, 0, 0, 0.35);
+}
+
+@media (max-width: 720px) {
+  .page {
+    padding: 24px 16px 56px;
+  }
+
+  .status-form {
+    flex-direction: column;
+  }
+
+  .onboarding-head {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .credential-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .step-head {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .auto-pill {
+    margin-left: 0;
+  }
+
+  .section-actions {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .step-actions {
+    justify-content: flex-start;
+  }
+
+  .section-actions {
+    width: 100%;
+    justify-content: flex-start;
+  }
+
+  .password-row {
+    flex-direction: column;
+    align-items: stretch;
+  }
+}
diff --git a/frontend/src/styles/request-access.css b/frontend/src/styles/request-access.css
new file mode 100644
index 0000000..0e97cbf
--- /dev/null
+++ b/frontend/src/styles/request-access.css
@@ -0,0 +1,254 @@
+.page {
+  max-width: 960px;
+  margin: 0 auto;
+  padding: 32px 22px 72px;
+}
+
+.hero {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 18px;
+  margin-bottom: 12px;
+}
+
+.eyebrow {
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--text-muted);
+  margin: 0 0 6px;
+  font-size: 13px;
+}
+
+h1 {
+  margin: 0 0 6px;
+  font-size: 32px;
+}
+
+.lede {
+  margin: 0;
+  color: var(--text-muted);
+  max-width: 640px;
+}
+
+.module {
+  padding: 18px;
+}
+
+.status-module {
+  margin-top: 14px;
+}
+
+.module-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.muted {
+  color: var(--text-muted);
+  margin: 10px 0 0;
+}
+
+.mono {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+}
+
+.form {
+  margin-top: 14px;
+  display: grid;
+  gap: 12px;
+}
+
+.field {
+  display: grid;
+  gap: 6px;
+}
+
+.availability {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.label {
+  color: var(--text-muted);
+  font-size: 12px;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.input,
+.textarea {
+  width: 100%;
+  border-radius: 12px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  background: rgba(0, 0, 0, 0.22);
+  color: var(--text);
+  padding: 10px 12px;
+  outline: none;
+}
+
+.textarea {
+  resize: vertical;
+}
+
+.actions {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-top: 6px;
+}
+
+button.primary,
+a.primary {
+  background: linear-gradient(90deg, #4f8bff, #7dd0ff);
+  color: #0b1222;
+  padding: 10px 14px;
+  border: none;
+  border-radius: 10px;
+  cursor: pointer;
+  font-weight: 700;
+  text-decoration: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+button.primary:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.onboarding-actions {
+  margin-top: 18px;
+  flex-direction: column;
+  align-items: stretch;
+  padding: 14px;
+  border-radius: 14px;
+  border: 1px solid rgba(120, 180, 255, 0.2);
+  background: rgba(0, 0, 0, 0.24);
+}
+
+.onboarding-copy {
+  display: grid;
+  gap: 6px;
+}
+
+.onboarding-cta {
+  text-align: center;
+  width: 100%;
+}
+
+.status-form {
+  display: flex;
+  gap: 10px;
+  margin-top: 12px;
+}
+
+.hint {
+  color: var(--text-muted);
+  font-size: 12px;
+}
+
+.error-box {
+  margin-top: 14px;
+  border: 1px solid rgba(255, 120, 120, 0.35);
+  background: rgba(255, 64, 64, 0.12);
+  border-radius: 14px;
+  padding: 12px;
+}
+
+.success-box {
+  margin-top: 14px;
+  border: 1px solid rgba(120, 255, 160, 0.25);
+  background: rgba(48, 255, 160, 0.1);
+  border-radius: 14px;
+  padding: 12px;
+}
+
+.request-code-row {
+  margin-top: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.copy {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  border-radius: 12px;
+  border: 1px solid rgba(255, 255, 255, 0.14);
+  background: rgba(0, 0, 0, 0.22);
+  color: var(--text);
+  padding: 10px 12px;
+  cursor: pointer;
+}
+
+.copied {
+  font-size: 12px;
+  color: rgba(120, 255, 160, 0.9);
+}
+
+.pill {
+  padding: 6px 10px;
+  border-radius: 999px;
+  font-size: 12px;
+}
+
+.verify-box {
+  margin-top: 12px;
+  padding: 12px 14px;
+  border: 1px solid rgba(120, 200, 255, 0.35);
+  border-radius: 14px;
+  background: rgba(48, 120, 200, 0.16);
+  display: grid;
+  gap: 4px;
+}
+
+.verify-title {
+  font-size: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: rgba(150, 220, 255, 0.95);
+}
+
+.verify-body {
+  font-size: 13px;
+  color: var(--text);
+}
+
+.task-box {
+  margin-top: 14px;
+  padding: 14px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 14px;
+  background: rgba(0, 0, 0, 0.25);
+}
+
+.task-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: grid;
+  gap: 10px;
+}
+
+.task-row {
+  display: grid;
+  gap: 6px;
+  grid-template-columns: 1fr auto;
+  align-items: center;
+}
+
+.task-name {
+  color: var(--text);
+}
+
+.task-detail {
+  grid-column: 1 / -1;
+  color: var(--text-muted);
+  font-size: 12px;
+}
diff --git a/frontend/src/views/AccountView.vue b/frontend/src/views/AccountView.vue
index 2ab1089..0617aab 100644
--- a/frontend/src/views/AccountView.vue
+++ b/frontend/src/views/AccountView.vue
@@ -879,353 +879,4 @@ async function copy(key, text) {
 }
 </script>
 
-<style scoped>
-.page {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 32px 22px 72px;
-}
-
-.hero {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 18px;
-  margin-bottom: 12px;
-}
-
-.hero-actions {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: flex-end;
-  gap: 28px;
-}
-
-.divider {
-  height: 1px;
-  background: rgba(255, 255, 255, 0.08);
-  margin: 18px 0;
-}
-
-.subhead h3 {
-  margin: 0;
-  font-size: 16px;
-}
-
-.eyebrow {
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  color: var(--text-muted);
-  margin: 0 0 6px;
-  font-size: 13px;
-}
-
-h1 {
-  margin: 0 0 6px;
-  font-size: 32px;
-}
-
-.lede {
-  margin: 0;
-  color: var(--text-muted);
-  max-width: 640px;
-}
-
-.account-grid {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
-  gap: 12px;
-  margin-top: 12px;
-  align-items: stretch;
-}
-
-.account-column,
-.account-stack {
-  display: grid;
-  gap: 12px;
-  align-content: start;
-}
-
-.account-column .module,
-.account-stack .module {
-  min-height: 0;
-  display: flex;
-  flex-direction: column;
-}
-
-.module {
-  padding: 18px;
-}
-
-.module-head {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 10px;
-}
-
-.muted {
-  color: var(--text-muted);
-  margin: 10px 0 0;
-}
-
-.kv {
-  margin-top: 12px;
-  border: 1px solid var(--card-border);
-  border-radius: 12px;
-  overflow: hidden;
-}
-
-.row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  padding: 10px 12px;
-  background: rgba(255, 255, 255, 0.02);
-  border-top: 1px solid rgba(255, 255, 255, 0.06);
-}
-
-.row:first-child {
-  border-top: none;
-}
-
-.k {
-  color: var(--text-muted);
-}
-
-.v {
-  color: var(--text-strong);
-}
-
-.link {
-  color: var(--accent-cyan);
-  text-decoration: none;
-}
-
-.actions {
-  margin-top: 12px;
-  display: flex;
-  gap: 10px;
-}
-
-button.primary {
-  background: linear-gradient(90deg, #4f8bff, #7dd0ff);
-  color: #0b1222;
-  padding: 10px 14px;
-  border: none;
-  border-radius: 10px;
-  cursor: pointer;
-  font-weight: 700;
-}
-
-.secret-box {
-  margin-top: 12px;
-  border-radius: 12px;
-  border: 1px solid rgba(255, 255, 255, 0.14);
-  background: rgba(255, 255, 255, 0.03);
-  padding: 12px;
-}
-
-.secret-head {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 10px;
-  margin-bottom: 8px;
-}
-
-.secret-actions {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.secret {
-  word-break: break-word;
-  color: var(--text-strong);
-}
-
-.hint {
-  margin-top: 6px;
-  color: var(--text-muted);
-  font-size: 12px;
-}
-
-.jellyfin-detail {
-  margin-top: auto;
-}
-
-.copy {
-  background: transparent;
-  border: 1px solid rgba(255, 255, 255, 0.14);
-  color: var(--text-primary);
-  border-radius: 10px;
-  padding: 6px 10px;
-  cursor: pointer;
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.copied {
-  font-size: 12px;
-  color: rgba(120, 255, 160, 0.9);
-}
-
-.error-box {
-  margin-top: 12px;
-  border-radius: 12px;
-  border: 1px solid rgba(255, 87, 87, 0.5);
-  background: rgba(255, 87, 87, 0.06);
-  padding: 10px 12px;
-}
-
-@media (max-width: 820px) {
-  .account-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .account-stack .module {
-    flex: none;
-  }
-
-  .account-column .module {
-    flex: none;
-  }
-}
-
-@media (max-width: 720px) {
-  .page {
-    padding: 24px 16px 56px;
-  }
-
-  .hero {
-    flex-direction: column;
-    align-items: flex-start;
-  }
-
-  .hero-actions {
-    width: 100%;
-    justify-content: flex-start;
-    gap: 12px;
-  }
-
-  .row {
-    flex-direction: column;
-    align-items: flex-start;
-  }
-
-  .actions {
-    flex-direction: column;
-    align-items: stretch;
-  }
-
-  .secret-head {
-    flex-direction: column;
-    align-items: flex-start;
-  }
-
-  .req-row {
-    grid-template-columns: 1fr;
-  }
-}
-
-.admin {
-  margin-top: 12px;
-}
-
-.requests {
-  margin-top: 12px;
-  display: grid;
-  gap: 10px;
-}
-
-.req-row {
-  display: grid;
-  grid-template-columns: minmax(220px, 1.2fr) minmax(200px, 1fr) minmax(200px, 1fr) minmax(140px, 0.6fr);
-  gap: 16px;
-  align-items: start;
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  background: rgba(0, 0, 0, 0.18);
-  border-radius: 14px;
-  padding: 10px 12px;
-}
-
-.req-summary {
-  display: grid;
-  gap: 6px;
-}
-
-.req-label {
-  color: var(--text-muted);
-  font-size: 11px;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-}
-
-.req-flags {
-  display: grid;
-  gap: 8px;
-  align-content: start;
-}
-
-.req-flag-grid {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-}
-
-.note {
-  color: var(--text-muted);
-}
-
-.flag-pill {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  padding: 4px 8px;
-  border-radius: 999px;
-  border: 1px solid rgba(255, 255, 255, 0.12);
-  background: rgba(0, 0, 0, 0.2);
-  font-size: 12px;
-}
-
-.flag-pill input {
-  width: 14px;
-  height: 14px;
-}
-
-.req-note .input {
-  width: 100%;
-  border-radius: 10px;
-  border: 1px solid rgba(255, 255, 255, 0.14);
-  background: rgba(0, 0, 0, 0.22);
-  color: var(--text-primary);
-  padding: 8px 10px;
-}
-
-.req-actions {
-  display: grid;
-  gap: 8px;
-  align-content: start;
-}
-
-.req-action-stack {
-  display: grid;
-  gap: 8px;
-}
-
-@media (max-width: 900px) {
-  .req-row {
-    grid-template-columns: 1fr;
-    gap: 12px;
-    align-items: start;
-  }
-
-  .note {
-    white-space: normal;
-  }
-}
-</style>
+<style scoped src="../styles/account.css"></style>
diff --git a/frontend/src/views/OnboardingView.vue b/frontend/src/views/OnboardingView.vue
index 711852c..bbf20ee 100644
--- a/frontend/src/views/OnboardingView.vue
+++ b/frontend/src/views/OnboardingView.vue
@@ -1239,658 +1239,4 @@ onMounted(async () => {
 });
 </script>
 
-<style scoped>
-.page {
-  max-width: 1080px;
-  margin: 0 auto;
-  padding: 32px 22px 72px;
-}
-
-.hero {
-  margin-bottom: 12px;
-  padding: 18px;
-}
-
-.eyebrow {
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  color: var(--text-muted);
-  margin: 0 0 6px;
-  font-size: 13px;
-}
-
-h1 {
-  margin: 0 0 6px;
-  font-size: 32px;
-}
-
-.lede {
-  margin: 0;
-  color: var(--text-muted);
-  max-width: 640px;
-}
-
-.module {
-  padding: 18px;
-}
-
-.module-head {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 18px;
-}
-
-.status-form {
-  display: flex;
-  gap: 10px;
-  margin-top: 12px;
-}
-
-.status-meta {
-  margin-top: 12px;
-  padding: 12px;
-  border-radius: 14px;
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  background: rgba(0, 0, 0, 0.18);
-}
-
-.meta-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 14px;
-}
-
-.meta-row .label {
-  color: var(--text-muted);
-}
-
-.input {
-  flex: 1;
-  padding: 10px 12px;
-  border-radius: 10px;
-  border: 1px solid rgba(255, 255, 255, 0.14);
-  background: rgba(0, 0, 0, 0.25);
-  color: var(--text-primary);
-}
-
-button.primary {
-  background: linear-gradient(90deg, #4f8bff, #7dd0ff);
-  color: #0b1222;
-  padding: 10px 14px;
-  border: none;
-  border-radius: 10px;
-  cursor: pointer;
-  font-weight: 700;
-}
-
-button.secondary {
-  background: rgba(255, 255, 255, 0.08);
-  border: 1px solid rgba(255, 255, 255, 0.16);
-  color: var(--text-primary);
-  padding: 8px 12px;
-  border-radius: 10px;
-  cursor: pointer;
-  font-weight: 600;
-}
-
-button.primary:disabled,
-button.secondary:disabled,
-button.copy:disabled {
-  opacity: 0.45;
-  cursor: not-allowed;
-}
-
-.steps {
-  margin-top: 16px;
-}
-
-.onboarding-head {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 14px;
-  margin-bottom: 8px;
-}
-
-.section-stepper {
-  margin: 16px 0 18px;
-  list-style: none;
-  display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-  gap: 10px;
-  padding: 0;
-}
-
-.stepper-item {
-  min-width: 0;
-}
-
-.stepper-card {
-  width: 100%;
-  text-align: left;
-  padding: 12px 12px 12px 36px;
-  border-radius: 12px;
-  border: 1px solid rgba(255, 255, 255, 0.12);
-  background: rgba(0, 0, 0, 0.2);
-  color: var(--text-primary);
-  display: flex;
-  gap: 8px;
-  position: relative;
-}
-
-.stepper-card::after {
-  display: none;
-}
-
-.stepper-dot {
-  position: absolute;
-  left: 12px;
-  top: 12px;
-  width: 10px;
-  height: 10px;
-  border-radius: 999px;
-  border: 2px solid rgba(255, 255, 255, 0.22);
-  background: rgba(255, 255, 255, 0.16);
-  z-index: 1;
-}
-
-.stepper-body {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  min-width: 0;
-}
-
-.stepper-title {
-  font-weight: 700;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.stepper-meta {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 6px 10px;
-  flex-wrap: wrap;
-  color: var(--text-muted);
-  width: 100%;
-}
-
-.stepper-meta .pill {
-  padding: 4px 6px;
-  font-size: 11px;
-  white-space: nowrap;
-}
-
-.pill-compact {
-  padding: 4px 6px;
-  font-size: 11px;
-  white-space: nowrap;
-  max-width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.stepper-card.active {
-  border-color: rgba(125, 208, 255, 0.5);
-  box-shadow: 0 0 0 1px rgba(79, 139, 255, 0.3);
-}
-
-.stepper-card.active .stepper-dot {
-  background: rgba(125, 208, 255, 0.8);
-  border-color: rgba(125, 208, 255, 0.85);
-}
-
-.stepper-card.done {
-  border-color: rgba(92, 214, 167, 0.35);
-  background: rgba(92, 214, 167, 0.08);
-}
-
-.stepper-card.done .stepper-dot {
-  background: rgba(92, 214, 167, 0.9);
-  border-color: rgba(92, 214, 167, 0.95);
-}
-
-.stepper-card.locked {
-  opacity: 0.6;
-}
-
-@media (max-width: 1200px) {
-  .section-stepper {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-  }
-}
-
-@media (max-width: 860px) {
-  .section-stepper {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-}
-
-@media (max-width: 520px) {
-  .section-stepper {
-    grid-template-columns: 1fr;
-  }
-}
-
-.credential-card {
-  margin-top: 14px;
-  padding: 14px;
-  border-radius: 14px;
-  border: 1px solid rgba(255, 255, 255, 0.12);
-  background: rgba(0, 0, 0, 0.2);
-}
-
-.credential-head {
-  margin-bottom: 10px;
-}
-
-.credential-head h4 {
-  margin: 0 0 4px;
-  font-size: 18px;
-}
-
-.credential-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
-  gap: 14px;
-}
-
-.credential-field .label {
-  display: block;
-  margin-bottom: 6px;
-  color: var(--text-muted);
-}
-
-.credential-field .input[readonly] {
-  opacity: 0.8;
-}
-
-.password-row {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-}
-
-.password-row .input {
-  flex: 1;
-}
-
-.section-shell {
-  margin-top: 16px;
-  padding-top: 12px;
-  border-top: 1px solid rgba(255, 255, 255, 0.08);
-}
-
-.section-header {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 12px;
-  margin-bottom: 12px;
-}
-
-.section-actions {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-  width: 100%;
-  margin-top: 12px;
-}
-
-.step-grid {
-  display: grid;
-  gap: 12px;
-}
-
-.step-card {
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  border-radius: 14px;
-  padding: 12px 12px 10px;
-  background: rgba(255, 255, 255, 0.02);
-  display: flex;
-  flex-direction: column;
-}
-
-.step-note {
-  margin-top: 8px;
-  padding: 8px 10px;
-  border-radius: 10px;
-  border: 1px solid rgba(0, 229, 197, 0.35);
-  background: rgba(0, 229, 197, 0.08);
-  color: var(--text-strong);
-  font-weight: 600;
-}
-
-.step-card.blocked {
-  opacity: 0.55;
-  pointer-events: none;
-}
-
-.step-card.done {
-  border-color: rgba(92, 214, 167, 0.35);
-  background: rgba(92, 214, 167, 0.05);
-}
-
-.step-head {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-.auto-pill {
-  margin-left: auto;
-  font-size: 12px;
-  padding: 3px 10px;
-  border-radius: 999px;
-}
-
-.step-title {
-  font-weight: 650;
-  color: var(--text-strong);
-}
-
-.step-label {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
-.step-label input {
-  width: 18px;
-  height: 18px;
-}
-
-.step-bullets {
-  margin: 8px 0 0;
-  padding-left: 18px;
-  color: var(--text-muted);
-}
-
-.step-links {
-  margin-top: 10px;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  gap: 10px;
-}
-
-.step-links a {
-  color: rgba(92, 214, 167, 0.95);
-  text-decoration: none;
-  font-weight: 600;
-  border-radius: 999px;
-  padding: 6px 14px;
-  border: 1px solid rgba(92, 214, 167, 0.35);
-  background: rgba(92, 214, 167, 0.12);
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.step-links a:hover {
-  text-decoration: none;
-  background: rgba(92, 214, 167, 0.2);
-}
-
-.step-actions {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  justify-content: flex-end;
-  margin-top: auto;
-  padding-top: 10px;
-}
-
-.recovery-verify {
-  display: flex;
-  gap: 10px;
-  margin-top: 10px;
-  align-items: stretch;
-}
-
-.recovery-verify .input {
-  flex: 1;
-}
-
-.guide-details {
-  margin-top: 10px;
-}
-
-.guide-summary {
-  cursor: pointer;
-  display: inline-flex;
-  align-items: center;
-  gap: 10px;
-  padding: 6px 12px;
-  border-radius: 999px;
-  border: 1px solid rgba(92, 214, 167, 0.5);
-  background: rgba(92, 214, 167, 0.15);
-  color: var(--text-strong);
-  font-weight: 600;
-}
-
-.guide-summary::after {
-  content: "Tap to open";
-  font-size: 12px;
-  color: var(--text-muted);
-}
-
-.guide-details[open] .guide-summary::after {
-  content: "Tap to close";
-}
-
-.guide-summary::-webkit-details-marker {
-  display: none;
-}
-
-.guide-groups {
-  display: grid;
-  gap: 12px;
-  margin-top: 8px;
-}
-
-.guide-title {
-  margin: 0 0 6px;
-}
-
-.guide-images {
-  display: grid;
-  gap: 10px;
-}
-
-.guide-shot {
-  border-radius: 10px;
-  overflow: hidden;
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  background: rgba(0, 0, 0, 0.2);
-  padding: 0;
-  cursor: zoom-in;
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-
-.guide-shot figcaption {
-  margin: 0;
-  padding: 10px 12px 6px;
-  font-size: 18px;
-  font-weight: 600;
-  color: var(--text-strong);
-}
-
-.guide-shot img {
-  display: block;
-  border-radius: 10px;
-  max-width: 100%;
-  width: auto;
-  height: auto;
-  max-height: min(60vh, 520px);
-  margin: 0 auto 10px;
-}
-
-.guide-pagination {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-  flex-wrap: wrap;
-}
-
-.guide-dots {
-  display: flex;
-  gap: 6px;
-  flex-wrap: wrap;
-}
-
-.guide-dot {
-  border: 1px solid rgba(255, 255, 255, 0.18);
-  background: rgba(0, 0, 0, 0.3);
-  color: var(--text-muted);
-  border-radius: 999px;
-  padding: 4px 8px;
-  cursor: pointer;
-  font-size: 12px;
-}
-
-.guide-dot.active {
-  border-color: rgba(120, 180, 255, 0.5);
-  color: var(--text-strong);
-}
-
-.ready-box {
-  margin-top: 18px;
-  padding: 14px;
-  border-radius: 14px;
-  border: 1px solid rgba(92, 214, 167, 0.3);
-  background: rgba(92, 214, 167, 0.08);
-}
-
-.task-list {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  display: grid;
-  gap: 8px;
-}
-
-.task-row {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-.task-name {
-  min-width: 180px;
-}
-
-.task-detail {
-  color: var(--text-muted);
-}
-
-.error-box {
-  margin-top: 12px;
-  padding: 12px;
-  border-radius: 14px;
-  border: 1px solid rgba(255, 120, 120, 0.4);
-  background: rgba(255, 70, 70, 0.1);
-}
-
-.tooltip-wrap {
-  display: inline-flex;
-}
-
-.lightbox {
-  position: fixed;
-  inset: 0;
-  background: rgba(6, 8, 12, 0.82);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 28px;
-  z-index: 2000;
-}
-
-.lightbox-card {
-  width: min(1400px, 96vw);
-  max-height: 94vh;
-  background: rgba(10, 14, 24, 0.96);
-  border: 1px solid rgba(255, 255, 255, 0.12);
-  border-radius: 16px;
-  padding: 16px;
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.lightbox-head {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-}
-
-.lightbox-label {
-  color: var(--text-muted);
-}
-
-.lightbox-card img {
-  width: 100%;
-  max-height: 82vh;
-  object-fit: contain;
-  border-radius: 12px;
-  background: rgba(0, 0, 0, 0.35);
-}
-
-@media (max-width: 720px) {
-  .page {
-    padding: 24px 16px 56px;
-  }
-
-  .status-form {
-    flex-direction: column;
-  }
-
-  .onboarding-head {
-    flex-direction: column;
-    align-items: flex-start;
-  }
-
-  .credential-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .step-head {
-    flex-direction: column;
-    align-items: flex-start;
-  }
-
-  .auto-pill {
-    margin-left: 0;
-  }
-
-  .section-actions {
-    flex-direction: column;
-    align-items: stretch;
-  }
-
-  .step-actions {
-    justify-content: flex-start;
-  }
-
-  .section-actions {
-    width: 100%;
-    justify-content: flex-start;
-  }
-
-  .password-row {
-    flex-direction: column;
-    align-items: stretch;
-  }
-}
-</style>
+<style scoped src="../styles/onboarding.css"></style>
diff --git a/frontend/src/views/RequestAccessView.vue b/frontend/src/views/RequestAccessView.vue
index 8a8df12..a37fdd2 100644
--- a/frontend/src/views/RequestAccessView.vue
+++ b/frontend/src/views/RequestAccessView.vue
@@ -607,261 +607,4 @@ onMounted(async () => {
 });
 </script>
 
-<style scoped>
-.page {
-  max-width: 960px;
-  margin: 0 auto;
-  padding: 32px 22px 72px;
-}
-
-.hero {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 18px;
-  margin-bottom: 12px;
-}
-
-.eyebrow {
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  color: var(--text-muted);
-  margin: 0 0 6px;
-  font-size: 13px;
-}
-
-h1 {
-  margin: 0 0 6px;
-  font-size: 32px;
-}
-
-.lede {
-  margin: 0;
-  color: var(--text-muted);
-  max-width: 640px;
-}
-
-.module {
-  padding: 18px;
-}
-
-.status-module {
-  margin-top: 14px;
-}
-
-.module-head {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-}
-
-.muted {
-  color: var(--text-muted);
-  margin: 10px 0 0;
-}
-
-.mono {
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-}
-
-.form {
-  margin-top: 14px;
-  display: grid;
-  gap: 12px;
-}
-
-.field {
-  display: grid;
-  gap: 6px;
-}
-
-.availability {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.label {
-  color: var(--text-muted);
-  font-size: 12px;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-}
-
-.input,
-.textarea {
-  width: 100%;
-  border-radius: 12px;
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  background: rgba(0, 0, 0, 0.22);
-  color: var(--text);
-  padding: 10px 12px;
-  outline: none;
-}
-
-.textarea {
-  resize: vertical;
-}
-
-.actions {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  margin-top: 6px;
-}
-
-button.primary,
-a.primary {
-  background: linear-gradient(90deg, #4f8bff, #7dd0ff);
-  color: #0b1222;
-  padding: 10px 14px;
-  border: none;
-  border-radius: 10px;
-  cursor: pointer;
-  font-weight: 700;
-  text-decoration: none;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-
-button.primary:disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-}
-
-.onboarding-actions {
-  margin-top: 18px;
-  flex-direction: column;
-  align-items: stretch;
-  padding: 14px;
-  border-radius: 14px;
-  border: 1px solid rgba(120, 180, 255, 0.2);
-  background: rgba(0, 0, 0, 0.24);
-}
-
-.onboarding-copy {
-  display: grid;
-  gap: 6px;
-}
-
-.onboarding-cta {
-  text-align: center;
-  width: 100%;
-}
-
-.status-form {
-  display: flex;
-  gap: 10px;
-  margin-top: 12px;
-}
-
-.hint {
-  color: var(--text-muted);
-  font-size: 12px;
-}
-
-.error-box {
-  margin-top: 14px;
-  border: 1px solid rgba(255, 120, 120, 0.35);
-  background: rgba(255, 64, 64, 0.12);
-  border-radius: 14px;
-  padding: 12px;
-}
-
-.success-box {
-  margin-top: 14px;
-  border: 1px solid rgba(120, 255, 160, 0.25);
-  background: rgba(48, 255, 160, 0.1);
-  border-radius: 14px;
-  padding: 12px;
-}
-
-.request-code-row {
-  margin-top: 12px;
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-
-.copy {
-  display: inline-flex;
-  align-items: center;
-  gap: 10px;
-  border-radius: 12px;
-  border: 1px solid rgba(255, 255, 255, 0.14);
-  background: rgba(0, 0, 0, 0.22);
-  color: var(--text);
-  padding: 10px 12px;
-  cursor: pointer;
-}
-
-.copied {
-  font-size: 12px;
-  color: rgba(120, 255, 160, 0.9);
-}
-
-.pill {
-  padding: 6px 10px;
-  border-radius: 999px;
-  font-size: 12px;
-}
-</style>
-
-<style scoped>
-.verify-box {
-  margin-top: 12px;
-  padding: 12px 14px;
-  border: 1px solid rgba(120, 200, 255, 0.35);
-  border-radius: 14px;
-  background: rgba(48, 120, 200, 0.16);
-  display: grid;
-  gap: 4px;
-}
-
-.verify-title {
-  font-size: 12px;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  color: rgba(150, 220, 255, 0.95);
-}
-
-.verify-body {
-  font-size: 13px;
-  color: var(--text);
-}
-
-.task-box {
-  margin-top: 14px;
-  padding: 14px;
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  border-radius: 14px;
-  background: rgba(0, 0, 0, 0.25);
-}
-
-.task-list {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-  display: grid;
-  gap: 10px;
-}
-
-.task-row {
-  display: grid;
-  gap: 6px;
-  grid-template-columns: 1fr auto;
-  align-items: center;
-}
-
-.task-name {
-  color: var(--text);
-}
-
-.task-detail {
-  grid-column: 1 / -1;
-  color: var(--text-muted);
-  font-size: 12px;
-}
-</style>
+<style scoped src="../styles/request-access.css"></style>