/* Web-app surfaces (auth screen + home shell). Light glassmorphism "web style",
   same tokens as the server-rendered pages: pastel aurora, grain, frosted
   cards, Fraunces display, lavender gradient. */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { color-scheme: light; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: linear-gradient(180deg, #faf8ff 0%, #f3eefc 60%, #eee7fa 100%);
  min-height: 100vh;
  color: #2a2140;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
.aurora {
  position: fixed; inset: -22%; z-index: -2; pointer-events: none;
  background:
    radial-gradient(36% 40% at 16% 18%, rgba(139,123,199,0.42) 0%, transparent 70%),
    radial-gradient(30% 34% at 86% 10%, rgba(232,121,169,0.32) 0%, transparent 70%),
    radial-gradient(40% 44% at 80% 82%, rgba(108,92,231,0.30) 0%, transparent 72%),
    radial-gradient(26% 30% at 6% 86%, rgba(64,200,224,0.24) 0%, transparent 70%);
  filter: blur(52px) saturate(115%);
  animation: aurora-drift 30s ease-in-out infinite alternate;
}
@keyframes aurora-drift {
  from { transform: translate3d(-2%, -1.5%, 0) rotate(-1.5deg) scale(1); }
  to   { transform: translate3d(2%, 2%, 0) rotate(1.5deg) scale(1.05); }
}
.grain {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  opacity: 0.4; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}
.wrap { max-width: 460px; margin: 0 auto; padding: 34px 18px 64px; }
.topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.brand {
  font-family: "Fraunces", Georgia, serif; font-size: 19px; font-weight: 600;
  color: #241b3d; text-decoration: none; letter-spacing: -0.01em;
}
.brand .spark { color: #8b7bc7; }
.card {
  background: linear-gradient(165deg, rgba(255,255,255,0.78), rgba(255,255,255,0.5));
  backdrop-filter: blur(26px) saturate(170%);
  -webkit-backdrop-filter: blur(26px) saturate(170%);
  border: 1px solid rgba(255,255,255,0.85);
  border-radius: 28px;
  padding: 30px 24px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    0 24px 60px -24px rgba(76,58,140,0.28),
    0 4px 14px -6px rgba(76,58,140,0.10);
  animation: rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .aurora, .card, .btn, .rc { animation: none; transition: none; }
}

/* ---- Auth screen ---- */
h1 {
  font-family: "Fraunces", "New York", Georgia, serif;
  font-size: 27px; font-weight: 600; letter-spacing: -0.01em;
  color: #241b3d; text-align: center;
}
.subtitle { text-align: center; color: rgba(42,33,64,0.6); font-size: 14px; margin: 6px 0 22px; }
.tabs {
  display: flex; gap: 4px; background: rgba(139,123,199,0.10);
  border-radius: 999px; padding: 4px; margin-bottom: 22px;
}
.tabs .tab {
  flex: 1; text-align: center; padding: 9px; border: none; background: transparent;
  border-radius: 999px; font-size: 14px; font-weight: 600; font-family: inherit;
  color: rgba(42,33,64,0.6); cursor: pointer; transition: background 0.2s, color 0.2s;
}
.tabs .tab.active { background: #fff; color: #5b46a8; box-shadow: 0 4px 12px -6px rgba(76,58,140,0.3); }
.field { margin-bottom: 14px; }
.field label {
  display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.02em;
  color: rgba(42,33,64,0.62); margin-bottom: 6px;
}
.field input {
  width: 100%; padding: 13px 15px; border-radius: 14px;
  border: 1px solid rgba(124,92,224,0.18); background: rgba(255,255,255,0.7);
  font-size: 15px; color: #2a2140; outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.field input:focus { border-color: rgba(124,92,224,0.55); box-shadow: 0 0 0 3px rgba(124,92,224,0.14); }
.btn {
  display: block; width: 100%; text-align: center; border: none; cursor: pointer;
  background: linear-gradient(135deg, #8b7bc7, #6c5ce7); color: #fff;
  padding: 14px; border-radius: 14px; font-size: 15px; font-weight: 650; font-family: inherit;
  box-shadow: 0 10px 26px -10px rgba(108,92,231,0.75), inset 0 1px 0 rgba(255,255,255,0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 16px 32px -10px rgba(108,92,231,0.85); }
.btn:disabled { opacity: 0.6; cursor: default; }
.divider { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: rgba(42,33,64,0.4); font-size: 12px; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: rgba(124,92,224,0.18); }
.btn-apple {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; cursor: pointer; background: #000; color: #fff;
  padding: 13px; border-radius: 14px; font-size: 15px; font-weight: 600; font-family: inherit;
  border: none; transition: opacity 0.2s;
}
.btn-apple:hover:not(:disabled) { opacity: 0.85; }
.btn-apple:disabled { opacity: 0.5; cursor: default; }
.btn-apple svg { width: 17px; height: 17px; }
.msg { margin-top: 16px; padding: 12px 14px; border-radius: 12px; font-size: 13.5px; line-height: 1.5; text-align: center; }
.msg-error { background: rgba(255,69,58,0.10); color: #c0362c; border: 1px solid rgba(255,69,58,0.2); }
.msg-info { background: rgba(64,200,224,0.12); color: #1f7d8c; border: 1px solid rgba(64,200,224,0.25); }
.foot { text-align: center; margin-top: 20px; font-size: 12.5px; color: rgba(42,33,64,0.5); }
.foot a { color: #7c5ce0; text-decoration: none; }
.legal-check { display: flex; align-items: flex-start; gap: 9px; margin: 8px 2px 2px; font-size: 12px; line-height: 1.5; color: rgba(42,33,64,0.62); text-align: left; }
.legal-check input[type="checkbox"] { flex-shrink: 0; width: 16px; height: 16px; margin-top: 1px; accent-color: #7c5ce0; cursor: pointer; }
.legal-check label { cursor: pointer; }
.legal-check a { color: #7c5ce0; text-decoration: none; }
.legal-check a:hover { text-decoration: underline; }
.hidden { display: none !important; }

/* ===== Home (Discover): app parity in web style ===== */
.wrap-home { max-width: 940px; margin: 0 auto; padding: 16px 18px 104px; }
.home-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.home-actions { display: flex; align-items: center; gap: 10px; }
.avatar-sm {
  width: 34px; height: 34px; border-radius: 50%; text-decoration: none;
  display: flex; align-items: center; justify-content: center;
  font-family: "Fraunces", Georgia, serif; font-weight: 600; font-size: 15px; color: #6c5ce7;
  border: 2px solid transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    conic-gradient(from 210deg, #8b7bc7, #e879a9, #6c5ce7, #40c8e0, #8b7bc7) border-box;
  box-shadow: 0 6px 16px -8px rgba(124,92,224,0.5);
}
.signout {
  background: none; border: 1px solid rgba(124,92,224,0.22); cursor: pointer;
  color: rgba(42,33,64,0.65); font-size: 13px; font-weight: 600; font-family: inherit;
  padding: 7px 14px; border-radius: 999px; transition: background 0.2s, color 0.2s;
}
.signout:hover { background: rgba(139,123,199,0.12); color: #5b46a8; }

.welcome { margin: 6px 2px 20px; }
.welcome h1 { text-align: left; font-size: 30px; }
.welcome .subtitle { text-align: left; margin: 3px 0 0; }

/* Search box (vibe / title / author) */
.search-box { margin-bottom: 26px; }
.search-modes { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.mode-chip {
  font-size: 13px; font-weight: 600; padding: 7px 14px; border-radius: 999px; cursor: pointer; font-family: inherit;
  background: rgba(255,255,255,0.6); border: 1px solid rgba(124,92,224,0.16); color: rgba(42,33,64,0.62);
  transition: background 0.2s, color 0.2s;
}
.mode-chip.active { background: linear-gradient(135deg, #8b7bc7, #6c5ce7); color: #fff; border-color: transparent; }
.search-bar {
  display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 16px; border-radius: 16px;
  background: rgba(255,255,255,0.72); border: 1px solid rgba(124,92,224,0.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 8px 22px -14px rgba(76,58,140,0.25);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.search-bar:focus-within {
  border-color: rgba(124,92,224,0.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 0 0 3px rgba(124,92,224,0.14);
}
.search-icon { width: 18px; height: 18px; flex-shrink: 0; color: #8b7bc7; }
.search-bar input {
  flex: 1; min-width: 0; border: none; background: none; outline: none;
  font-family: inherit; font-size: 15px; color: #2a2140; padding: 6px 0;
}
.search-bar input::placeholder { color: rgba(42,33,64,0.45); }
.search-go {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 11px; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #8b7bc7, #6c5ce7); color: #fff;
  box-shadow: 0 8px 20px -10px rgba(108,92,231,0.8);
  transition: transform 0.2s, box-shadow 0.2s;
}
.search-go:hover { transform: translateY(-1px); box-shadow: 0 12px 24px -10px rgba(108,92,231,0.9); }
.search-go svg { width: 18px; height: 18px; }
.try-vibe {
  display: inline-flex; align-items: center; gap: 4px; margin: 11px 0 0 2px; padding: 0;
  background: none; border: none; cursor: pointer; font-family: inherit;
  font-size: 12.5px; font-weight: 650; color: #7c5ce0;
}
.try-vibe svg { width: 13px; height: 13px; }
.try-vibe:hover { color: #6c5ce7; text-decoration: underline; }
.suggest-row {
  display: flex; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch;
  padding: 12px 2px 2px; scrollbar-width: none;
}
.suggest-row::-webkit-scrollbar { display: none; }
.suggest-chip {
  flex-shrink: 0; white-space: nowrap; cursor: pointer; font-family: inherit;
  font-size: 12.5px; font-weight: 600; padding: 6px 12px; border-radius: 999px;
  background: rgba(255,255,255,0.6); border: 1px solid rgba(124,92,224,0.16); color: rgba(42,33,64,0.68);
  transition: background 0.2s, color 0.2s, transform 0.2s;
}
.suggest-chip:hover { background: rgba(139,123,199,0.14); color: #5b46a8; transform: translateY(-1px); }

/* Search results (grid, shown in place of the rails) */
.results-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 4px 2px; }
.results-title {
  font-family: "Fraunces", Georgia, serif; font-size: 20px; font-weight: 600; color: #241b3d;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.results-clear {
  flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(124,92,224,0.2); background: rgba(255,255,255,0.6); color: rgba(42,33,64,0.6);
  font-size: 15px; line-height: 1; transition: background 0.2s, color 0.2s;
}
.results-clear:hover { background: rgba(139,123,199,0.14); color: #5b46a8; }
.results-status { color: rgba(42,33,64,0.55); font-size: 14px; padding: 8px 2px; display: flex; align-items: center; gap: 8px; }
.results-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 18px 14px; padding: 8px 2px 4px;
}
.results-grid .rc { width: 100%; }
.results-grid .rc-cover { width: 100%; height: auto; aspect-ratio: 2 / 3; }
.results-more { text-align: center; margin-top: 22px; }
.btn-more {
  cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 650; color: #5b46a8;
  padding: 11px 26px; border-radius: 999px; background: rgba(255,255,255,0.72);
  border: 1px solid rgba(124,92,224,0.24); transition: background 0.2s, transform 0.2s;
}
.btn-more:hover:not(:disabled) { background: rgba(139,123,199,0.14); transform: translateY(-1px); }
.btn-more:disabled { opacity: 0.6; cursor: default; }
.spinner {
  width: 15px; height: 15px; border-radius: 50%; display: inline-block; flex-shrink: 0;
  border: 2px solid rgba(124,92,224,0.25); border-top-color: #6c5ce7;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { display: none; } }

/* Rails */
.rail { margin-bottom: 26px; }
.rail-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 2px 12px; }
.rail-title { font-family: "Fraunces", Georgia, serif; font-size: 20px; font-weight: 600; color: #241b3d; }
.rail-sub { font-size: 13px; color: rgba(42,33,64,0.62); margin: -6px 2px 12px; line-height: 1.45; }
.rail-scroll {
  display: flex; gap: 14px; overflow-x: auto; -webkit-overflow-scrolling: touch;
  padding: 4px 2px 8px; scrollbar-width: none;
}
.rail-scroll::-webkit-scrollbar { display: none; }
.rc {
  width: 124px; flex-shrink: 0; text-decoration: none; color: inherit; display: block; position: relative;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
a.rc:hover { transform: translateY(-4px); }
.rc-cover {
  width: 124px; height: 186px; border-radius: 11px; object-fit: cover; display: block;
  background: rgba(139,123,199,0.12);
  box-shadow: 0 10px 24px -10px rgba(76,58,140,0.5), inset 0 0 0 1px rgba(255,255,255,0.4);
}
.rc-cover-empty { display: flex; align-items: center; justify-content: center; font-size: 34px; opacity: 0.5; }
.rc-tag {
  position: absolute; top: 8px; left: 8px; max-width: 108px;
  font-size: 10px; font-weight: 700; padding: 3px 7px; border-radius: 999px;
  background: rgba(36,27,61,0.72); color: #fff;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rc-title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 12.5px; font-weight: 600; line-height: 1.3; margin-top: 8px; color: #2a2140;
}
.rc-author {
  display: block; font-size: 11.5px; color: rgba(42,33,64,0.55); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rails-loading { text-align: center; color: rgba(42,33,64,0.45); font-size: 14px; padding: 30px 0; }

/* Week/Month segmented control */
.seg { display: flex; gap: 2px; background: rgba(139,123,199,0.10); border-radius: 999px; padding: 3px; }
.seg button {
  border: none; background: transparent; font-family: inherit; cursor: pointer;
  font-size: 12px; font-weight: 600; color: rgba(42,33,64,0.6); padding: 5px 12px; border-radius: 999px;
}
.seg button.active { background: #fff; color: #5b46a8; box-shadow: 0 3px 8px -4px rgba(76,58,140,0.35); }

/* Bottom tab bar (footer) */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: flex; justify-content: space-around; align-items: stretch;
  padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-top: 1px solid rgba(124,92,224,0.14);
  box-shadow: 0 -8px 24px -16px rgba(76,58,140,0.3);
}
.tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: none; border: none; cursor: pointer; font-family: inherit;
  color: rgba(42,33,64,0.5); text-decoration: none; padding: 2px 0;
}
.tab svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.tab-label { font-size: 10px; font-weight: 600; }
.tab.active { color: #7c5ce0; }

/* Coming-soon modal */
.cs-overlay {
  position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center;
  background: rgba(36,27,61,0.28); backdrop-filter: blur(3px); padding: 20px;
}
.cs-card {
  background: #fff; border-radius: 22px; padding: 28px 24px; max-width: 340px; width: 100%; text-align: center;
  box-shadow: 0 30px 70px -20px rgba(76,58,140,0.5);
}
.cs-emoji { font-size: 40px; }
.cs-title { font-family: "Fraunces", Georgia, serif; font-size: 21px; font-weight: 600; color: #241b3d; margin-top: 10px; }
.cs-body { font-size: 14px; color: rgba(42,33,64,0.65); margin-top: 8px; line-height: 1.5; }
.cs-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.cs-dismiss { background: none; border: none; cursor: pointer; font-family: inherit; font-size: 13.5px; font-weight: 600; color: rgba(42,33,64,0.5); }

.loader { text-align: center; color: rgba(42,33,64,0.5); font-size: 14px; padding: 60px 0; }
::selection { background: rgba(139,123,199,0.3); }
@media (min-width: 700px) {
  .card { padding: 34px 30px; }
  .rc, .rc-cover { width: 132px; }
  .rc-cover { height: 198px; }
  .rc-tag { max-width: 116px; }
}