openship 0.1.1 → 0.1.7

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

@@ -1,1139 +0,0 @@
-/* ═══════════════════════════════════════════════════════════════════════════
-   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;
-}