openship 0.1.0 → 0.1.1

package/apps/desktop/src/renderer/styles.css

@@ -0,0 +1,1139 @@
+/* ═══════════════════════════════════════════════════════════════════════════
+   Openship Desktop — Onboarding styles
+   Aligned with dashboard & web design language
+   ═══════════════════════════════════════════════════════════════════════════ */
+/* ── Fonts (same as dashboard: individual woff2 per weight) ── */
+@font-face {
+  font-family: 'Gellix';
+  src: url('https://cdn.oblien.com/fonts/Gellix-Regular.woff2') format('woff2');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Gellix';
+  src: url('https://cdn.oblien.com/fonts/Gellix-Medium.woff2') format('woff2');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Gellix';
+  src: url('https://cdn.oblien.com/fonts/Gellix-SemiBold.woff2') format('woff2');
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'SF Arabic';
+  src: local('SF Arabic'), local('SFArabic-Regular'),
+    url('https://cdn.oblien.com/fonts/SFArabic-Regular.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+:root {
+  /* ─ Theme tokens (light) ─ */
+  --th-bg-page: #ffffff;
+  --th-bg-card: #fafafa;
+  --th-card-bg: #ffffff;
+  --th-text-heading: rgba(0,0,0,1);
+  --th-text-body: rgba(0,0,0,.60);
+  --th-text-muted: rgba(0,0,0,.42);
+  --th-btn-bg: rgba(0,0,0,.92);
+  --th-btn-text: #ffffff;
+  --th-card-bd: #efefef;
+  --th-bd-default: #e8e8e8;
+
+  /* Foreground opacity scale */
+  --th-on-05: rgba(0,0,0,.05);
+  --th-on-06: rgba(0,0,0,.06);
+  --th-on-08: rgba(0,0,0,.08);
+  --th-on-10: rgba(0,0,0,.10);
+  --th-on-12: rgba(0,0,0,.12);
+  --th-on-14: rgba(0,0,0,.14);
+  --th-on-16: rgba(0,0,0,.16);
+  --th-on-20: rgba(0,0,0,.20);
+  --th-on-40: rgba(0,0,0,.40);
+
+  /* Surface fills */
+  --th-sf-03: rgba(0,0,0,.03);
+  --th-sf-04: rgba(0,0,0,.04);
+  --th-sf-05: rgba(0,0,0,.05);
+
+  /* Accent */
+  --accent: #7c3aed;
+  --accent-hover: #6d28d9;
+  --accent-soft: rgba(124, 58, 237, 0.08);
+  --accent-glow: rgba(124, 58, 237, 0.12);
+
+  /* Named accents for blobs */
+  --th-clr-plum: rgba(108,92,231,.07);
+  --th-clr-sea: rgba(0,184,148,.07);
+  --th-clr-terra: rgba(224,88,116,.06);
+
+  /* Status */
+  --danger: #ef4444;
+  --success: #22c55e;
+
+  /* Layout */
+  --font: 'Gellix', 'SF Arabic', system-ui, -apple-system, sans-serif;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html, body {
+  height: 100%;
+  font-family: var(--font);
+  background: var(--th-bg-page);
+  color: var(--th-text-body);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* ─── Aurora background ─── */
+.aurora {
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: 0;
+  overflow: hidden;
+}
+
+.aurora-blob {
+  position: absolute;
+  border-radius: 50%;
+}
+
+.aurora-core {
+  width: 420px;
+  height: 420px;
+  bottom: -120px;
+  left: 50%;
+  transform: translateX(-50%);
+  background: radial-gradient(circle, rgba(139,92,246,.18) 0%, rgba(124,58,237,.08) 50%, transparent 70%);
+  filter: blur(45px);
+  animation: aurora-breathe 16s ease-in-out infinite;
+}
+
+.aurora-left {
+  width: 320px;
+  height: 320px;
+  bottom: -80px;
+  left: 10%;
+  background: radial-gradient(circle, rgba(245,158,11,.12) 0%, rgba(251,146,60,.06) 60%, transparent 70%);
+  filter: blur(55px);
+  animation: aurora-sway-left 20s ease-in-out infinite;
+}
+
+.aurora-right {
+  width: 320px;
+  height: 320px;
+  bottom: -80px;
+  right: 10%;
+  background: radial-gradient(circle, rgba(251,191,36,.10) 0%, rgba(196,181,253,.06) 60%, transparent 70%);
+  filter: blur(55px);
+  animation: aurora-sway-right 22s ease-in-out infinite;
+}
+
+@keyframes aurora-breathe {
+  0%, 100% { transform: translateX(-50%) scale(1); }
+  50%      { transform: translateX(-50%) scale(1.12); }
+}
+
+@keyframes aurora-sway-left {
+  0%, 100% { transform: translate(0, 0) scale(1); }
+  50%      { transform: translate(30px, -20px) scale(1.08); }
+}
+
+@keyframes aurora-sway-right {
+  0%, 100% { transform: translate(0, 0) scale(1); }
+  50%      { transform: translate(-25px, -15px) scale(1.06); }
+}
+
+/* ─── Top bar ─── */
+.top-bar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 100;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 14px 24px 0;
+  -webkit-app-region: drag;
+}
+
+.top-bar-links {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  -webkit-app-region: no-drag;
+}
+
+.top-bar-link {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 34px;
+  height: 34px;
+  border-radius: 10px;
+  border: none;
+  background: transparent;
+  color: var(--th-text-muted);
+  cursor: pointer;
+  transition: color 0.15s, background 0.15s;
+}
+
+.top-bar-link:hover {
+  color: var(--th-text-heading);
+  background: var(--th-sf-05);
+}
+
+/* ─── App container ─── */
+#app {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  padding: 48px 32px;
+}
+
+/* ─── Screen management ─── */
+.screen {
+  display: none;
+  width: 100%;
+  max-width: 480px;
+}
+
+.screen.active {
+  display: block;
+}
+
+.screen-inner {
+  position: relative;
+  text-align: center;
+}
+
+.screen-inner--wide {
+  max-width: 820px;
+  margin: 0 auto;
+}
+
+#screen-choose {
+  max-width: 860px;
+}
+
+/* ─── Staggered fade-in ─── */
+.anim-fade {
+  opacity: 0;
+  transform: translateY(12px);
+  animation: fadeInUp 0.65s cubic-bezier(.16,1,.3,1) forwards;
+}
+
+.anim-d1 { animation-delay: 0s; }
+.anim-d2 { animation-delay: 0.1s; }
+.anim-d3 { animation-delay: 0.2s; }
+
+@keyframes fadeInUp {
+  to { opacity: 1; transform: translateY(0); }
+}
+
+/* ─── Choose header ─── */
+.choose-header {
+  margin-bottom: 8px;
+}
+
+.logo {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.logo-circle {
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  border: 2.5px solid var(--th-text-heading);
+  flex-shrink: 0;
+}
+
+.logo-text {
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--th-text-heading);
+  letter-spacing: -0.3px;
+}
+
+/* ─── Typography ─── */
+h1 {
+  font-size: 26px;
+  font-weight: 600;
+  color: var(--th-text-heading);
+  letter-spacing: -0.3px;
+  line-height: 1.2;
+}
+
+h2 {
+  font-size: 21px;
+  font-weight: 600;
+  color: var(--th-text-heading);
+  letter-spacing: -0.2px;
+  line-height: 1.2;
+  margin-bottom: 4px;
+}
+
+h3 {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--th-text-heading);
+  margin-bottom: 6px;
+}
+
+.subtitle {
+  margin-top: 10px;
+  font-size: 15px;
+  line-height: 1.65;
+  color: var(--th-text-muted);
+}
+
+.version-text {
+  margin-top: 16px;
+  font-size: 11px;
+  color: var(--th-text-muted);
+  opacity: .7;
+}
+
+/* ─── Cards row ─── */
+.cards-row {
+  display: flex;
+  align-items: stretch;
+  gap: 0;
+  margin-top: 28px;
+}
+
+.choice-card {
+  flex: 1;
+  position: relative;
+  overflow: hidden;
+  background: var(--th-card-bg);
+  border: 1px solid var(--th-card-bd);
+  border-radius: 24px;
+  padding: 28px 28px 24px;
+  text-align: left;
+  display: flex;
+  flex-direction: column;
+  transition: border-color 0.25s, box-shadow 0.25s;
+}
+
+.choice-card:hover {
+  border-color: rgba(124, 58, 237, .25);
+  box-shadow: 0 8px 40px rgba(124, 58, 237, .08), 0 1px 3px rgba(0,0,0,.04);
+}
+
+/* Card icon badge */
+.card-icon {
+  width: 44px;
+  height: 44px;
+  background: var(--accent-soft);
+  border-radius: 14px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 14px;
+  color: var(--accent);
+  position: relative;
+}
+
+.card-icon--center {
+  margin: 0 auto 16px;
+}
+
+.card-desc {
+  font-size: 13.5px;
+  line-height: 1.6;
+  color: var(--th-text-body);
+  margin-bottom: 18px;
+}
+
+.card-perks {
+  list-style: none;
+  margin: 0 0 20px;
+  padding: 0;
+  flex: 1;
+}
+
+.card-perks li {
+  font-size: 13px;
+  color: var(--th-text-body);
+  padding: 4px 0 4px 20px;
+  position: relative;
+  line-height: 1.5;
+}
+
+.card-perks li::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 10px;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--accent);
+  opacity: .6;
+}
+
+/* Card button — shared base */
+.btn-card {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  width: 100%;
+  padding: 12px 20px;
+  font-size: 14px;
+  font-weight: 600;
+  font-family: var(--font);
+  border: none;
+  border-radius: 14px;
+  cursor: pointer;
+  transition: background 0.2s, transform 0.1s, box-shadow 0.25s, border-color 0.2s;
+  margin-top: auto;
+  position: relative;
+  overflow: hidden;
+}
+
+.btn-card:active {
+  transform: scale(0.97);
+}
+
+.choice-card .btn-card svg {
+  transition: transform 0.2s;
+}
+
+.choice-card:hover .btn-card svg {
+  transform: translateX(3px);
+}
+
+/* Accent variant — gradient, glow */
+.btn-card--accent {
+  color: #fff;
+  background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 50%, #5b21b6 100%);
+  box-shadow: 0 2px 12px rgba(124, 58, 237, .25);
+}
+
+.btn-card--accent:hover {
+  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 50%, #6d28d9 100%);
+  box-shadow: 0 4px 24px rgba(124, 58, 237, .35);
+}
+
+/* Outline variant — ghost, border */
+.btn-card--outline {
+  color: var(--th-text-heading);
+  background: transparent;
+  border: 1.5px solid var(--th-card-bd);
+}
+
+.btn-card--outline:hover {
+  border-color: var(--th-on-20);
+  background: var(--th-sf-03);
+  box-shadow: 0 2px 12px rgba(0,0,0,.04);
+}
+
+/* ─── Vertical divider ─── */
+.cards-divider {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 0 20px;
+  flex-shrink: 0;
+}
+
+.divider-line {
+  width: 1px;
+  flex: 1;
+  background: var(--th-bd-default);
+}
+
+.divider-label {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--th-text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  padding: 10px 0;
+}
+
+/* ─── Migration note ─── */
+.migrate-note {
+  margin-top: 24px;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+  color: var(--th-text-muted);
+  background: var(--accent-soft);
+  padding: 10px 20px;
+  border-radius: 999px;
+}
+
+.migrate-note svg {
+  flex-shrink: 0;
+  color: var(--accent);
+}
+
+/* ─── Auth toggle tabs ─── */
+.auth-toggle {
+  display: flex;
+  gap: 4px;
+  margin-top: 18px;
+  background: var(--th-sf-04);
+  border-radius: 10px;
+  padding: 3px;
+}
+
+.auth-tab {
+  flex: 1;
+  padding: 8px 12px;
+  font-size: 13px;
+  font-weight: 500;
+  font-family: var(--font);
+  color: var(--th-text-muted);
+  background: transparent;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: color 0.15s, background 0.15s, box-shadow 0.15s;
+}
+
+.auth-tab.active {
+  color: var(--th-text-heading);
+  background: var(--th-card-bg);
+  box-shadow: 0 1px 3px rgba(0,0,0,.06);
+}
+
+.auth-tab:hover:not(.active) {
+  color: var(--th-text-body);
+}
+
+.auth-panel {
+  display: none;
+}
+
+.auth-panel.active {
+  display: block;
+}
+
+/* Input with inline button */
+.input-with-btn {
+  display: flex;
+  gap: 6px;
+}
+
+.input-with-btn input {
+  flex: 1;
+}
+
+.btn-browse {
+  padding: 0 14px;
+  font-size: 13px;
+  font-weight: 500;
+  font-family: var(--font);
+  color: var(--th-text-body);
+  background: var(--th-sf-04);
+  border: 1px solid var(--th-card-bd);
+  border-radius: 12px;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: border-color 0.15s, background 0.15s;
+}
+
+.btn-browse:hover {
+  border-color: var(--accent);
+  background: var(--accent-soft);
+  color: var(--accent);
+}
+
+.label-hint {
+  font-weight: 400;
+  color: var(--th-text-muted);
+  font-size: 12px;
+}
+
+/* ─── Advanced toggle ─── */
+.btn-advanced {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  margin-top: 18px;
+  padding: 6px 0;
+  font-size: 13px;
+  font-weight: 500;
+  font-family: var(--font);
+  color: var(--th-text-muted);
+  background: none;
+  border: none;
+  cursor: pointer;
+  transition: color 0.15s;
+}
+
+.btn-advanced:hover {
+  color: var(--th-text-body);
+}
+
+.btn-advanced .chevron {
+  transition: transform 0.2s ease;
+}
+
+.btn-advanced.open .chevron {
+  transform: rotate(180deg);
+}
+
+.advanced-panel {
+  display: none;
+  margin-top: 4px;
+  padding: 16px;
+  background: var(--th-sf-03);
+  border: 1px solid var(--th-card-bd);
+  border-radius: 14px;
+}
+
+.advanced-panel.open {
+  display: block;
+}
+
+.advanced-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+}
+
+.advanced-grid .form-group {
+  margin-top: 0;
+}
+
+.advanced-panel > .form-group {
+  margin-top: 12px;
+}
+
+/* ─── Buttons ─── */
+.btn-primary {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 24px;
+  width: 100%;
+  padding: 13px 24px;
+  font-size: 14px;
+  font-weight: 600;
+  font-family: var(--font);
+  color: var(--th-btn-text);
+  background: var(--th-btn-bg);
+  border: none;
+  border-radius: 14px;
+  cursor: pointer;
+  transition: background 0.15s, transform 0.1s;
+}
+
+.btn-primary:hover {
+  background: var(--th-text-heading);
+}
+
+.btn-primary:active {
+  transform: scale(0.98);
+}
+
+.btn-back {
+  position: absolute;
+  top: 2px;
+  left: -52px;
+  width: 38px;
+  height: 38px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 14px;
+  border: 1px solid var(--th-card-bd);
+  background: var(--th-card-bg);
+  color: var(--th-text-body);
+  cursor: pointer;
+  transition: border-color 0.15s, color 0.15s;
+}
+
+.btn-back:hover {
+  border-color: var(--accent);
+  color: var(--accent);
+}
+
+/* ─── Form ─── */
+.form-group {
+  text-align: left;
+  margin-top: 18px;
+}
+
+.form-group label {
+  display: block;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--th-text-heading);
+  margin-bottom: 6px;
+}
+
+.form-group input {
+  width: 100%;
+  padding: 11px 14px;
+  font-size: 14px;
+  font-family: var(--font);
+  color: var(--th-text-heading);
+  background: var(--th-card-bg);
+  border: 1px solid var(--th-card-bd);
+  border-radius: 12px;
+  outline: none;
+  transition: border-color 0.15s, box-shadow 0.15s;
+}
+
+.form-group input:focus {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 3px var(--accent-soft);
+}
+
+.form-group input::placeholder {
+  color: var(--th-text-muted);
+}
+
+/* ─── Status messages ─── */
+.status-message {
+  display: none;
+  margin-top: 14px;
+  padding: 10px 14px;
+  font-size: 13px;
+  font-weight: 500;
+  border-radius: 12px;
+  text-align: left;
+}
+
+.status-message.error {
+  color: var(--danger);
+  background: rgba(239, 68, 68, 0.06);
+  border: 1px solid rgba(239, 68, 68, 0.12);
+}
+
+.status-message.success {
+  color: var(--success);
+  background: rgba(34, 197, 94, 0.06);
+  border: 1px solid rgba(34, 197, 94, 0.12);
+}
+
+/* ─── Tutorial link ─── */
+.tutorial-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  margin-top: 20px;
+  font-size: 13px;
+  color: var(--accent);
+  text-decoration: none;
+  transition: opacity 0.15s;
+}
+
+.tutorial-link:hover {
+  opacity: .75;
+}
+
+/* ─── Spinner ─── */
+.spinner {
+  width: 36px;
+  height: 36px;
+  margin: 0 auto 20px;
+  border: 3px solid var(--th-on-10);
+  border-top-color: var(--accent);
+  border-radius: 50%;
+  animation: spin 0.7s linear infinite;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+/* ─── Loading screen action buttons ─── */
+.loading-actions {
+  display: none;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  margin-top: 24px;
+}
+
+.loading-actions.visible {
+  display: flex;
+}
+
+.loading-btn {
+  display: none;
+  align-items: center;
+  justify-content: center;
+  min-width: 220px;
+  padding: 12px 24px;
+  font-size: 14px;
+  font-weight: 600;
+  font-family: var(--font);
+  border: none;
+  border-radius: 14px;
+  cursor: pointer;
+  transition: background 0.2s, transform 0.1s, box-shadow 0.25s, border-color 0.2s;
+}
+
+.loading-btn.visible {
+  display: inline-flex;
+}
+
+.loading-btn:active {
+  transform: scale(0.97);
+}
+
+.loading-btn--accent {
+  color: #fff;
+  background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 50%, #5b21b6 100%);
+  box-shadow: 0 2px 12px rgba(124, 58, 237, .25);
+}
+
+.loading-btn--accent:hover {
+  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 50%, #6d28d9 100%);
+  box-shadow: 0 4px 24px rgba(124, 58, 237, .35);
+}
+
+.loading-btn--outline {
+  color: var(--th-text-heading);
+  background: transparent;
+  border: 1.5px solid var(--th-card-bd);
+}
+
+.loading-btn--outline:hover {
+  border-color: var(--th-on-20);
+  background: var(--th-sf-03);
+  box-shadow: 0 2px 12px rgba(0,0,0,.04);
+}
+
+.loading-btn--text {
+  color: var(--th-text-muted);
+  background: transparent;
+  min-width: auto;
+  padding: 8px 16px;
+  font-weight: 500;
+}
+
+.loading-btn--text:hover {
+  color: var(--th-text-body);
+}
+
+/* ─── Self-host sub-choice screen ─── */
+.selfhost-choices {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin: 24px 0 8px;
+}
+
+.selfhost-choice-card {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 18px 20px;
+  background: var(--th-card-bg);
+  border: 1.5px solid var(--th-card-bd);
+  border-radius: 14px;
+  cursor: pointer;
+  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
+  text-align: left;
+  font-family: inherit;
+  color: inherit;
+  font-size: inherit;
+}
+
+.selfhost-choice-card:hover {
+  border-color: var(--accent);
+  background: var(--accent-soft);
+  box-shadow: 0 0 0 3px var(--accent-glow);
+}
+
+.selfhost-choice-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
+  border-radius: 12px;
+  background: var(--th-sf-05);
+  color: var(--th-text-heading);
+  flex-shrink: 0;
+}
+
+.selfhost-choice-card:hover .selfhost-choice-icon {
+  background: var(--accent-soft);
+  color: var(--accent);
+}
+
+.selfhost-choice-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+}
+
+.selfhost-choice-title {
+  font-weight: 600;
+  font-size: 14.5px;
+  color: var(--th-text-heading);
+}
+
+.badge-beta {
+  font-size: 10.5px;
+  font-weight: 600;
+  color: var(--accent);
+  background: var(--accent-soft);
+  padding: 2px 8px;
+  border-radius: 999px;
+  letter-spacing: 0.02em;
+  vertical-align: middle;
+  margin-left: 4px;
+}
+
+.selfhost-choice-desc {
+  font-size: 12.5px;
+  color: var(--th-text-muted);
+  line-height: 1.45;
+}
+
+.selfhost-choice-arrow {
+  flex-shrink: 0;
+  color: var(--th-on-20);
+  transition: color 0.15s, transform 0.15s;
+}
+
+.selfhost-choice-card:hover .selfhost-choice-arrow {
+  color: var(--accent);
+  transform: translateX(2px);
+}
+
+/* ─── Preferences screen ─── */
+.pref-cards {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin: 24px 0 28px;
+}
+
+.pref-card {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  padding: 16px 18px;
+  background: var(--th-card-bg);
+  border: 1.5px solid var(--th-card-bd);
+  border-radius: 14px;
+  cursor: pointer;
+  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
+  text-align: left;
+  font-family: inherit;
+  color: inherit;
+  font-size: inherit;
+}
+
+.pref-card:hover {
+  border-color: var(--th-on-16);
+  background: var(--th-sf-03);
+}
+
+.pref-card.active {
+  border-color: var(--accent);
+  background: var(--accent-soft);
+  box-shadow: 0 0 0 3px var(--accent-glow);
+}
+
+.pref-card-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border-radius: 10px;
+  background: var(--th-sf-05);
+  color: var(--th-text-heading);
+  flex-shrink: 0;
+}
+
+.pref-card.active .pref-card-icon {
+  background: var(--accent-soft);
+  color: var(--accent);
+}
+
+.pref-card-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.pref-card-title {
+  font-weight: 600;
+  font-size: 14px;
+  color: var(--th-text-heading);
+}
+
+.pref-card-desc {
+  font-size: 12.5px;
+  color: var(--th-text-muted);
+  line-height: 1.4;
+}
+
+.pref-card-check {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  border: 1.5px solid var(--th-on-14);
+  flex-shrink: 0;
+  color: transparent;
+  transition: all 0.15s;
+}
+
+.pref-card.active .pref-card-check {
+  background: var(--accent);
+  border-color: var(--accent);
+  color: #fff;
+}
+
+.pref-hint {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  font-size: 12.5px;
+  color: var(--th-text-muted);
+  margin: 16px 0 0;
+  opacity: 0.7;
+}
+
+.pref-hint svg {
+  flex-shrink: 0;
+}
+
+/* ─── Tunnel choice screen ─── */
+.tunnel-choices {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin: 24px 0 0;
+}
+
+.tunnel-card {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  padding: 16px 18px;
+  background: var(--th-card-bg);
+  border: 1.5px solid var(--th-card-bd);
+  border-radius: 14px;
+  cursor: pointer;
+  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
+  text-align: left;
+  font-family: inherit;
+  color: inherit;
+  font-size: inherit;
+}
+
+.tunnel-card:hover {
+  border-color: var(--th-on-16);
+  background: var(--th-sf-03);
+}
+
+.tunnel-card.active {
+  border-color: var(--accent);
+  background: var(--accent-soft);
+  box-shadow: 0 0 0 3px var(--accent-glow);
+}
+
+.tunnel-card-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border-radius: 10px;
+  background: var(--th-sf-05);
+  color: var(--th-text-heading);
+  flex-shrink: 0;
+}
+
+.tunnel-card.active .tunnel-card-icon {
+  background: var(--accent-soft);
+  color: var(--accent);
+}
+
+.tunnel-card-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+}
+
+.tunnel-card-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.tunnel-card-title {
+  font-weight: 600;
+  font-size: 14px;
+  color: var(--th-text-heading);
+}
+
+.tunnel-card-badge {
+  font-size: 10.5px;
+  font-weight: 600;
+  color: var(--accent);
+  background: var(--accent-soft);
+  padding: 2px 8px;
+  border-radius: 999px;
+  letter-spacing: 0.02em;
+}
+
+.tunnel-card-desc {
+  font-size: 12.5px;
+  color: var(--th-text-muted);
+  line-height: 1.45;
+}
+
+.tunnel-card-check {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  border: 1.5px solid var(--th-on-14);
+  flex-shrink: 0;
+  color: transparent;
+  transition: all 0.15s;
+}
+
+.tunnel-card.active .tunnel-card-check {
+  background: var(--accent);
+  border-color: var(--accent);
+  color: #fff;
+}