:root{
  --bg: #ffffff;
  --text: #0f172a;
  --muted: #6b7280;
  --border: #e5e7eb;
  --card: #ffffff;
  --badge-bg: #f3f4f6;
  --primary: #2563eb; /* blue-600 */
  --primary-dark: #1e40af;
  --shadow: 0 1px 2px rgba(0,0,0,0.06), 0 6px 24px rgba(0,0,0,0.08);
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji';
  color: var(--text);
  background: var(--bg);
  line-height: 1.5;
}

.container{ max-width: 1080px; margin: 0 auto; padding: 0 24px; }

.site-header{
  position: sticky; top:0; background: rgba(255,255,255,0.85);
  backdrop-filter: saturate(1.1) blur(6px);
  border-bottom: 1px solid var(--border);
  z-index: 40;
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; height:64px; }
.brand{ display:flex; gap:10px; align-items:center; font-weight:700; text-decoration:none; color:var(--text); }
.brand-logo{ display:block; height:40px; width:auto; object-fit:contain; border-radius:12px; }
.brand .star{ color:#f59e0b; font-size:22px; }
.brand-name{ font-size:18px; }

.nav{ display:flex; align-items:center; gap:16px; }
.nav-link{ color:#1f2937; text-decoration:none; font-weight:500; }
.nav-link:hover{ text-decoration:underline; }
.user-email{
  display:inline-flex;
  align-items:center;
  padding:6px 12px;
  border-radius:999px;
  background: var(--badge-bg);
  color: var(--muted);
  font-size:14px;
  font-weight:600;
}

.main{ min-height: calc(100vh - 128px); }

/* Hero */
.hero{ text-align:center; padding: 96px 16px 88px; position:relative;}
.hero-title{
  font-weight:900; letter-spacing:-0.02em; line-height:1.1;
  font-size: clamp(40px, 6.2vw, 76px);
  margin: 0 0 16px;
}
.hero-subtitle{ max-width: 720px; margin: 0 auto 28px; color: var(--muted); font-size: 20px;}
.hero-cta{ font-size:18px; padding: 14px 22px; }
.hero-stars{ position:absolute; font-size:44px; color:#f59e0b; user-select:none;}
.hero-star-left{ left: 22%; top: 30%; transform: rotate(-12deg); }
.hero-star-right{ right: 22%; top: 48%; transform: rotate(10deg); }

/* Footer */
.site-footer{ border-top:1px solid var(--border); padding: 24px 0; color: var(--muted); font-size:14px; }
.footer-link{ margin-left: 12px; color: inherit; text-decoration: none; }
.footer-link:hover{ text-decoration: underline; }

/* Cards */
.card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 20px;
  margin: 24px 0;
}
.card h2{ margin: 4px 0 4px; font-size: 22px; }
.card .muted{ color: var(--muted); margin-top: 2px; }

/* Form */
.label{ display:block; font-size: 14px; font-weight:600; margin-bottom: 8px; }
.input{
  width:100%; border:1px solid var(--border); border-radius: 10px;
  padding: 12px 14px; font-size: 16px;
  outline:none; transition: border .15s ease, box-shadow .15s ease;
  background:#fff;
}
.input:focus{ border-color:#93c5fd; box-shadow: 0 0 0 4px rgba(37,99,235,0.12); }
.input.no-margin{ margin:0; }
.create-form .input{ margin-bottom: 16px; }

.segmented{
  display:grid; grid-template-columns: 1fr 1fr;
  margin: 8px 0 8px; border:1px solid var(--border);
  border-radius: 12px; overflow:hidden;
}
.segmented input{ display:none; }
.seg-item{
  padding: 12px 16px; display:flex; align-items:center; justify-content:center; gap:8px;
  cursor:pointer; background:#f9fafb; color:#111827; font-weight:600;
}
#mode-random:checked + label{ background:#fff; }
#mode-custom:checked + label{ background:#fff; }
.seg-item + input + label{ border-left:1px solid var(--border); }
.icon{ width:18px; height:18px; }

.custom-row{ margin-top:6px; }
.hidden{ display:none; }
.custom-input-wrap{ display:flex; align-items:center; gap:8px; }
.prefix{ font-size:14px; color: var(--muted); }

.tip{ display:flex; align-items:flex-start; gap:8px; margin: 6px 0 0; color: var(--muted); }
.star-bullet{ color:#f59e0b; }

.actions{ display:flex; justify-content:flex-end; margin-top: 12px; }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--border); background:#fff; padding:10px 16px;
  border-radius:10px; font-weight:600; text-decoration:none; cursor:pointer;
}
.btn.primary{ background: var(--primary); color:#fff; border-color: var(--primary); }
.btn.primary:hover{ background: var(--primary-dark); border-color: var(--primary-dark); }

/* Table */
.table-wrap{ overflow:auto; }
.table{ width:100%; border-collapse:separate; border-spacing:0; }
.table th, .table td{ padding: 14px 12px; border-bottom:1px solid var(--border); text-align:left; }
.table th{ font-size: 13px; color: #4b5563; font-weight:600; }
.table .actions{ width:90px; white-space:nowrap; }
.table .actions .icon-btn + .icon-btn{ margin-left:4px; }
.badge{ display:inline-block; padding: 6px 10px; border-radius: 999px; background: var(--badge-bg); font-weight:700; }
.shortcut{ font-weight:600; text-decoration:none; color:#1f2937; }
.shortcut:hover{ text-decoration:underline; }
.truncate{ max-width: 440px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.center{ text-align:center; }
.icon-btn{ display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border:1px solid var(--border); background:#fff; border-radius:10px; cursor:pointer; }
.icon-btn:hover{ background:#f9fafb; }
.icon-btn svg{ width:18px; height:18px; fill:#111827; stroke:#111827; stroke-width:1.5; }

.alert.error{ background:#fef2f2; border:1px solid #fecaca; color:#991b1b; padding: 12px 14px; border-radius: 10px; margin: 12px 0; }

/* Utility */
.create-card{ margin-top: 28px; }
.links-card{ margin-top: 16px; }

/* Search */
.home-search{ margin: -24px auto 72px; }
.home-search-card{ padding: 32px; display:flex; flex-direction:column; gap: 16px; }
.search-form{ width:100%; }
.search-form-row{ display:flex; gap: 12px; flex-wrap:wrap; }
.search-input{ flex:1; min-width: 220px; }
.search-btn{ padding: 12px 20px; }
.search-hint{ margin-top: 10px; font-size: 14px; }
.page-title{ font-size: 36px; margin: 32px 0 12px; font-weight: 800; }
.search-page{ padding-bottom: 80px; }
.search-results{ margin-top: 24px; }
.search-results h2{ margin-top: 0; }
.search-results-table td{ vertical-align: top; }
.search-result-target{ word-break: break-word; }
.destination-link{ color: var(--text); text-decoration:none; }
.destination-link:hover{ text-decoration:underline; }
.search-intro{ margin-top: 32px; }

/* Privacy policy */
.policy-page{ padding: 48px 0 80px; }
.policy-page .card{ line-height: 1.7; }
.policy-page h2{ margin-top: 20px; margin-bottom: 6px; font-size: 20px; }
.policy-page ul{ padding-left: 20px; margin: 8px 0 12px; }
.policy-page li{ margin-bottom: 6px; }