/* ─── Design Tokens ─── */
    :root {
      --primary: #5a26e8;
      --violet-100: #ede9fe;
      --violet-200: #ddd6fe;
      --violet-300: #c4b5fd;
      --violet-400: #a78bfa;
      --violet-500: #8b5cf6;
      --violet-600: #7c3aed;
      --violet-700: #6d28d9;
      --gray-50:  #fcfcfd;
      --gray-100: #f1f3f6;
      --gray-200: #e0e4ea;
      --gray-300: #c8ced9;
      --gray-500: #8292aa;
      --gray-900: #191d24;
      --text-primary:   #25292f;
      --text-secondary: #5c687b;
      --text-muted:     #71717a;
      --border:         #e4e4e7;
      --white:          #ffffff;
    }

    /* ─── Reset ─── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
    body {
      font-family: 'Inter', -apple-system, sans-serif;
      color: var(--text-primary);
      background: var(--white);
      line-height: 1.6;
    }

    /* ─── Nav ─── */
    nav {
      position: sticky;
      top: 0;
      z-index: 10;
      background: rgba(255,255,255,0.92);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-bottom: 1px solid var(--gray-200);
      padding: 16px 0;
    }
    .nav-inner {
      max-width: 1140px;
      margin: 0 auto;
      padding: 0 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .logo {
      font-size: 22px;
      font-weight: 800;
      color: var(--text-primary);
      text-decoration: none;
      letter-spacing: -0.03em;
    }
    .logo span { color: var(--primary); }
    .nav-right {
      display: flex;
      align-items: center;
      gap: 32px;
      list-style: none;
      margin: 0;
      padding: 0;
    }
    .nav-right li {
      list-style: none;
    }
    .nav-lang {
      color: var(--text-primary);
      font-size: 16px;
      font-weight: 400;
      line-height: 1.6;
      white-space: nowrap;
    }
    .nav-lang a,
    .nav-lang a:visited,
    .nav-lang a[aria-current="page"] {
      text-decoration: none;
      color: var(--text-secondary);
      font-size: 14px;
      font-weight: 500;
      transition: color 0.2s;
    }
    .nav-lang a:hover { color: var(--primary); }
    .nav-back {
      display: flex;
      align-items: center;
      gap: 6px;
      color: var(--text-secondary);
      text-decoration: none;
      font-size: 14px;
      font-weight: 500;
      transition: color 0.2s;
    }
    .nav-back:hover { color: var(--primary); }
    .nav-back svg { width: 16px; height: 16px; }

    /* ─── Page Header ─── */
    .page-header {
      text-align: center;
      padding: 56px 24px 40px;
    }
    .page-header h1 {
      font-size: clamp(28px, 4vw, 40px);
      font-weight: 800;
      letter-spacing: -0.03em;
      margin-bottom: 12px;
    }
    .page-header p {
      font-size: 16px;
      color: var(--text-secondary);
      max-width: 480px;
      margin: 0 auto;
    }

    /* ─── Screens Grid ─── */
    .screens-grid {
      max-width: 1080px;
      margin: 0 auto;
      padding: 0 24px 96px;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 48px 28px;
      justify-items: center;
    }

    .screen-item { text-align: center; }

    .screen-label {
      font-size: 15px;
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 4px;
    }
    .screen-desc {
      font-size: 13px;
      color: var(--text-secondary);
      margin-bottom: 18px;
      min-height: 36px;
    }

    /* ─── Phone Frame ─── */
    .phone {
      width: 240px;
      height: 480px;
      background: var(--gray-900);
      border-radius: 36px;
      padding: 10px;
      box-shadow: 0 20px 56px rgba(36,43,53,0.22);
      margin: 0 auto;
      transition: transform 0.3s, box-shadow 0.3s;
    }
    .phone:hover {
      transform: translateY(-4px);
      box-shadow: 0 28px 72px rgba(36,43,53,0.28);
    }
    .phone-screen {
      width: 100%;
      height: 100%;
      border-radius: 28px;
      overflow: hidden;
      position: relative;
      background: var(--white);
    }
    .phone-screen-shot {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center top;
      display: block;
    }
    /* Dynamic Island notch */
    .phone-screen::after {
      content: '';
      position: absolute;
      top: 8px;
      left: 50%;
      transform: translateX(-50%);
      width: 58px;
      height: 18px;
      background: var(--gray-900);
      border-radius: 10px;
      z-index: 10;
    }

    /* ════════════════════════════════════════
       SCREEN 1 — Splash
       ════════════════════════════════════════ */
    .s-splash {
      background: linear-gradient(180deg, var(--violet-500), var(--violet-700));
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .s-splash .content {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
    }
    .s-splash .logo-box {
      width: 100px;
      height: 100px;
      background: rgba(255,255,255,0.15);
      border-radius: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .s-splash .logo-box svg { width: 48px; height: 48px; }
    .s-splash .name {
      font-size: 30px;
      font-weight: 700;
      color: white;
      letter-spacing: -0.02em;
    }
    .s-splash .tag {
      font-size: 14px;
      color: rgba(255,255,255,0.8);
    }

    /* ════════════════════════════════════════
       SCREEN 2 — Login
       ════════════════════════════════════════ */
    .s-login {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    .s-login .top {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 12px;
    }
    .s-login .logo-box {
      width: 100px;
      height: 100px;
      background: var(--violet-100);
      border-radius: 22px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .s-login .logo-box svg { width: 42px; height: 42px; color: var(--violet-600); }
    .s-login .name {
      font-size: 28px;
      font-weight: 700;
      color: var(--text-primary);
    }
    .s-login .tag {
      font-size: 13px;
      color: var(--text-muted);
    }
    .s-login .btns {
      padding: 0 18px 40px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .s-login .btn {
      height: 46px;
      border: 1.5px solid var(--violet-600);
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-size: 15px;
      font-weight: 600;
      color: var(--violet-600);
    }
    .s-login .btn svg { width: 20px; height: 20px; }
    .s-login .btn.apple svg { color: var(--violet-600); }

    /* ════════════════════════════════════════
       SCREEN 3 — Home / Map
       ════════════════════════════════════════ */
    .s-home {
      display: flex;
      flex-direction: column;
    }
    /* search row */
    .s-home .search-row {
      padding: 30px 14px 8px;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .s-home .search-bar {
      flex: 1;
      height: 36px;
      background: var(--gray-100);
      border-radius: 18px;
      display: flex;
      align-items: center;
      padding: 0 12px;
      gap: 6px;
    }
    .s-home .search-bar svg { width: 14px; height: 14px; color: var(--text-muted); }
    .s-home .search-bar span { font-size: 12px; color: var(--text-muted); }
    /* bell */
    .s-home .bell {
      width: 36px;
      height: 36px;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .s-home .bell svg { width: 18px; height: 18px; color: var(--text-primary); }
    .s-home .bell-dot {
      position: absolute;
      top: 5px; right: 5px;
      width: 8px; height: 8px;
      background: #ef4444;
      border-radius: 50%;
      border: 1.5px solid white;
    }
    /* filter tabs */
    .s-home .filters {
      display: flex;
      gap: 6px;
      padding: 4px 14px 10px;
    }
    .s-home .ftab {
      height: 30px;
      padding: 0 12px;
      border-radius: 15px;
      font-size: 11px;
      font-weight: 600;
      display: flex;
      align-items: center;
      background: var(--gray-100);
      color: var(--text-secondary);
    }
    .s-home .ftab.active {
      background: var(--violet-600);
      color: white;
    }
    /* map */
    .s-home .map {
      flex: 1;
      background: #eceef2;
      position: relative;
      overflow: hidden;
    }
    .s-home .road {
      position: absolute;
      background: white;
    }
    .s-home .road.rh1 { top: 33%; left: 0; right: 0; height: 3px; }
    .s-home .road.rh2 { top: 60%; left: 0; right: 0; height: 2px; }
    .s-home .road.rv1 { left: 28%; top: 0; bottom: 0; width: 3px; }
    .s-home .road.rv2 { left: 64%; top: 0; bottom: 0; width: 2px; }
    .s-home .block {
      position: absolute;
      background: var(--violet-200);
      border-radius: 3px;
      opacity: 0.55;
    }
    .s-home .block.b1 { top: 8%;  left: 4%;  width: 20%; height: 20%; }
    .s-home .block.b2 { top: 38%; left: 34%; width: 26%; height: 18%; }
    .s-home .block.b3 { top: 64%; left: 6%;  width: 19%; height: 24%; }
    .s-home .block.b4 { top: 40%; left: 68%; width: 22%; height: 15%; }
    /* cluster pins */
    .s-home .pin {
      position: absolute;
      min-width: 34px;
      height: 26px;
      background: var(--violet-600);
      border-radius: 13px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      font-weight: 700;
      color: white;
      padding: 0 10px;
      box-shadow: 0 3px 8px rgba(124,58,237,0.45);
    }
    .s-home .pin::after {
      content: '';
      position: absolute;
      bottom: -5px;
      left: 50%;
      transform: translateX(-50%);
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      border-top: 5px solid var(--violet-600);
    }
    .s-home .pin.p1 { top: 18%; left: 8%; }
    .s-home .pin.p2 { top: 46%; left: 52%; }
    .s-home .pin.p3 { top: 72%; left: 28%; }
    /* location button */
    .s-home .loc-btn {
      position: absolute;
      bottom: 18px;
      right: 18px;
      width: 40px; height: 40px;
      background: white;
      border-radius: 10px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.14);
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .s-home .loc-btn svg { width: 18px; height: 18px; color: var(--violet-600); }

    /* ════════════════════════════════════════
       SCREEN 4 — Search
       ════════════════════════════════════════ */
    .s-search {
      padding: 30px 14px 0;
      display: flex;
      flex-direction: column;
    }
    .s-search .search-input {
      height: 38px;
      border: 1.5px solid var(--violet-600);
      border-radius: 19px;
      display: flex;
      align-items: center;
      padding: 0 14px;
      gap: 8px;
      margin-bottom: 22px;
    }
    .s-search .search-input svg { width: 16px; height: 16px; color: var(--violet-600); }
    .s-search .search-input span { font-size: 13px; color: var(--text-muted); }
    .s-search .sec-title {
      font-size: 13px;
      font-weight: 600;
      color: var(--text-secondary);
      margin-bottom: 10px;
    }
    .s-search .tags {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-bottom: 22px;
    }
    .s-search .tag-pill {
      height: 30px;
      padding: 0 12px;
      background: var(--violet-100);
      border-radius: 15px;
      font-size: 12px;
      font-weight: 600;
      color: var(--violet-600);
      display: flex;
      align-items: center;
    }
    .s-search .recents { display: flex; flex-direction: column; }
    .s-search .recent-row {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 9px 0;
      font-size: 13px;
      color: var(--text-primary);
    }
    .s-search .recent-row svg { width: 14px; height: 14px; color: var(--text-muted); flex-shrink: 0; }

    /* ════════════════════════════════════════
       SCREEN 5 — Create Tale
       ════════════════════════════════════════ */
    .s-create {
      display: flex;
      flex-direction: column;
    }
    .s-create .nb {
      padding: 28px 14px 6px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .s-create .nb svg { width: 20px; height: 20px; color: var(--text-primary); }
    .s-create .nb .nb-title {
      font-size: 15px;
      font-weight: 600;
      color: var(--text-primary);
    }
    .s-create .nb .nb-space { width: 20px; }
    .s-create .body {
      flex: 1;
      padding: 14px 14px 16px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .s-create .group label {
      display: block;
      font-size: 12px;
      font-weight: 600;
      color: var(--text-muted);
      margin-bottom: 6px;
    }
    .s-create .field {
      width: 100%;
      height: 38px;
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 0 12px;
      font-size: 13px;
      color: var(--text-primary);
      display: flex;
      align-items: center;
    }
    .s-create .field.desc {
      height: 56px;
      align-items: flex-start;
      padding-top: 10px;
    }
    .s-create .photo-drop {
      border: 1.5px dashed var(--border);
      border-radius: 10px;
      height: 86px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 4px;
    }
    .s-create .photo-drop svg { width: 22px; height: 22px; color: var(--text-muted); }
    .s-create .photo-drop span { font-size: 11px; color: var(--text-muted); }
    .s-create .btn-create {
      margin-top: auto;
      height: 42px;
      background: var(--violet-600);
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-weight: 600;
      color: white;
    }

    /* ════════════════════════════════════════
       SCREEN 6 — Tale Detail
       ════════════════════════════════════════ */
    .s-detail {
      display: flex;
      flex-direction: column;
    }
    .s-detail .nb {
      padding: 28px 14px 4px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .s-detail .nb svg { width: 18px; height: 18px; color: var(--text-primary); }
    .s-detail .nb .nb-title {
      font-size: 15px;
      font-weight: 700;
      color: var(--text-primary);
    }
    .s-detail .body {
      flex: 1;
      padding: 10px 14px 50px;
      overflow: hidden;
    }
    .s-detail .author {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 10px;
    }
    .s-detail .avatar {
      width: 28px; height: 28px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--violet-400), var(--violet-600));
    }
    .s-detail .author-name { font-size: 12px; font-weight: 600; color: var(--text-primary); }
    .s-detail .author-date { font-size: 11px; color: var(--text-muted); }
    .s-detail .title {
      font-size: 17px;
      font-weight: 700;
      color: var(--text-primary);
      margin-bottom: 6px;
    }
    .s-detail .desc {
      font-size: 12px;
      color: var(--text-secondary);
      line-height: 1.55;
      margin-bottom: 12px;
    }
    .s-detail .divider {
      height: 1px;
      background: var(--border);
      margin-bottom: 10px;
    }
    .s-detail .photos-label {
      font-size: 12px;
      font-weight: 600;
      color: var(--text-secondary);
      margin-bottom: 8px;
    }
    .s-detail .photos {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 4px;
      margin-bottom: 12px;
    }
    .s-detail .thumb {
      aspect-ratio: 1;
      border-radius: 6px;
    }
    .s-detail .comments-label {
      font-size: 12px;
      font-weight: 600;
      color: var(--text-secondary);
      margin-bottom: 6px;
    }
    .s-detail .comment {
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .s-detail .comment-avatar {
      width: 22px; height: 22px;
      border-radius: 50%;
      background: var(--violet-200);
    }
    .s-detail .comment-text { font-size: 11px; color: var(--text-secondary); }
    /* action bar */
    .s-detail .actions {
      position: absolute;
      bottom: 0; left: 0; right: 0;
      height: 44px;
      background: white;
      border-top: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 14px;
      border-radius: 0 0 28px 28px;
    }
    .s-detail .actions .reaction {
      font-size: 13px;
      color: var(--text-muted);
    }
    .s-detail .actions .icons {
      display: flex;
      gap: 14px;
    }
    .s-detail .actions .icons svg { width: 18px; height: 18px; color: var(--text-muted); }

    /* ─── Responsive ─── */
    @media (max-width: 900px) {
      .screens-grid { grid-template-columns: repeat(2, 1fr); gap: 40px 24px; }
    }
    @media (max-width: 640px) {
      .nav-inner { padding: 0 18px; }
      .nav-right { gap: 20px; }
    }
    @media (max-width: 560px) {
      .nav-right { gap: 12px; }
      .nav-lang { font-size: 14px; }
      .screens-grid { grid-template-columns: 1fr; gap: 44px; }
      .phone { width: 220px; height: 440px; }
    }