:root {
        --paper: #fbfaf7;
        --card: #fffefa;
        --ink: #222522;
        --muted: #74786f;
        --line: rgba(82, 107, 95, 0.14);
        --green: #7d9487;
        --green-deep: #526b5f;
        --green-soft: #e8efe9;
        --sage: #b6c7bd;
        --gold: #b68a4b;
        --danger: #b97870;
        --shadow: 0 22px 60px rgba(82, 107, 95, 0.14);
        --soft-shadow: 0 12px 32px rgba(82, 107, 95, 0.08);
        font-family: Onest, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      }

      * { box-sizing: border-box; }

      html, body { min-height: 100%; overflow: hidden; }

      body {
        margin: 0;
        background:
          radial-gradient(circle at 18% 10%, rgba(182, 199, 189, 0.34), transparent 28%),
          linear-gradient(135deg, #f7f4ee 0%, #fffefa 46%, #eef3ee 100%);
        color: var(--ink);
      }

      button, input, textarea { font: inherit; }
      button { border: 0; cursor: pointer; color: inherit; }
      input, textarea { width: 100%; border: 0; outline: 0; color: var(--ink); background: transparent; }

      .app {
        min-height: 100dvh;
        display: grid;
        place-items: center;
        padding: max(14px, env(safe-area-inset-top)) 14px max(14px, env(safe-area-inset-bottom));
      }

      .desktop-app {
        width: min(1360px, calc(100vw - 40px));
        height: min(860px, calc(100dvh - 40px));
        min-height: 700px;
        display: none;
        grid-template-columns: 250px minmax(0, 1fr) 330px;
        gap: 18px;
        padding: 18px;
        border: 1px solid rgba(82, 107, 95, 0.16);
        border-radius: 34px;
        background:
          radial-gradient(circle at 48% 5%, rgba(232, 239, 233, 0.82), transparent 34%),
          linear-gradient(145deg, #fbfaf7, #fffefa 58%, #eef3ee);
        box-shadow: var(--shadow);
        overflow: hidden;
      }

      .desktop-rail,
      .desktop-main,
      .desktop-side {
        min-height: 0;
        border: 1px solid var(--line);
        background: rgba(255, 254, 250, 0.72);
        box-shadow: var(--soft-shadow);
      }

      .desktop-rail {
        display: grid;
        grid-template-rows: auto 1fr auto;
        gap: 20px;
        padding: 18px;
        border-radius: 26px;
      }

      .desktop-logo {
        display: flex;
        gap: 10px;
        align-items: center;
        font-size: 20px;
        font-weight: 820;
      }

      .desktop-nav {
        display: grid;
        gap: 8px;
        align-content: start;
      }

      .desktop-nav button {
        min-height: 46px;
        display: grid;
        grid-template-columns: 24px 1fr;
        gap: 10px;
        align-items: center;
        padding: 0 12px;
        border-radius: 16px;
        background: transparent;
        color: var(--muted);
        text-align: left;
        font-weight: 760;
      }

      .desktop-nav button.active {
        background: var(--green-soft);
        color: var(--green-deep);
      }

      .desktop-profile-mini {
        display: flex;
        gap: 10px;
        align-items: center;
        padding: 12px;
        border-radius: 18px;
        background: rgba(232, 239, 233, 0.62);
      }

      .desktop-avatar {
        width: 42px;
        height: 42px;
        flex: 0 0 auto;
        border-radius: 50%;
        background:
          linear-gradient(180deg, rgba(255, 254, 250, 0.05), rgba(30, 38, 34, 0.16)),
          url("https://images.unsplash.com/photo-1534528741775-53994a69daeb?auto=format&fit=crop&w=220&q=82");
        background-position: center;
        background-size: cover;
      }

      .desktop-profile-mini strong,
      .desktop-side-card strong {
        display: block;
      }

      .desktop-profile-mini span,
      .desktop-side-card span,
      .desktop-top span,
      .desktop-wish-meta {
        color: var(--muted);
        font-size: 12px;
        line-height: 1.35;
        font-weight: 620;
      }

      .desktop-main {
        display: grid;
        grid-template-rows: auto auto minmax(0, 1fr);
        gap: 14px;
        padding: 20px;
        border-radius: 30px;
        overflow: hidden;
      }

      .desktop-top {
        display: flex;
        justify-content: space-between;
        gap: 18px;
        align-items: center;
      }

      .desktop-top h1 {
        max-width: 680px;
        font-size: clamp(34px, 4vw, 54px);
        line-height: 1;
      }

      .desktop-search {
        width: min(320px, 38%);
        min-height: 44px;
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 0 14px;
        border: 1px solid var(--line);
        border-radius: 999px;
        background: rgba(255, 254, 250, 0.82);
        color: var(--muted);
        font-size: 13px;
        font-weight: 700;
      }

      .desktop-stats {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
      }

      .desktop-stat {
        min-height: 88px;
        display: grid;
        align-content: center;
        gap: 4px;
        padding: 14px;
        border: 1px solid var(--line);
        border-radius: 20px;
        background: rgba(255, 254, 250, 0.72);
      }

      .desktop-stat strong {
        color: var(--green-deep);
        font-size: 30px;
        line-height: 1;
      }

      .desktop-stat span {
        color: var(--muted);
        font-size: 12px;
        font-weight: 720;
      }

      .desktop-board {
        min-height: 0;
        display: grid;
        grid-template-columns: 1.05fr 0.9fr 0.75fr;
        grid-template-rows: repeat(3, minmax(120px, 1fr));
        gap: 12px;
        overflow: hidden;
      }

      .desktop-wish {
        position: relative;
        display: grid;
        align-content: end;
        overflow: hidden;
        padding: 16px;
        border: 1px solid rgba(82, 107, 95, 0.14);
        border-radius: 26px;
        background-image:
          linear-gradient(180deg, rgba(20, 24, 22, 0.02), rgba(20, 24, 22, 0.62)),
          var(--photo);
        background-position: center;
        background-size: cover;
        color: #fffefa;
        box-shadow: var(--soft-shadow);
      }

      .desktop-wish.large { grid-row: span 2; }
      .desktop-wish.wide { grid-column: span 2; }

      .desktop-wish strong {
        max-width: 320px;
        font-size: 22px;
        line-height: 1.06;
      }

      .desktop-wish small {
        width: fit-content;
        margin-top: 8px;
        padding: 5px 9px;
        border-radius: 999px;
        background: rgba(255, 254, 250, 0.82);
        color: var(--green-deep);
        font-size: 11px;
        font-weight: 820;
      }

      .desktop-side {
        display: grid;
        gap: 12px;
        align-content: start;
        padding: 18px;
        border-radius: 26px;
        overflow-y: auto;
        scrollbar-width: none;
      }

      .desktop-side::-webkit-scrollbar { display: none; }

      .desktop-side-card {
        display: grid;
        gap: 8px;
        padding: 14px;
        border: 1px solid var(--line);
        border-radius: 20px;
        background: rgba(255, 254, 250, 0.74);
      }

      .desktop-side-card.featured {
        background: linear-gradient(145deg, rgba(82, 107, 95, 0.96), rgba(64, 88, 78, 0.94));
        color: #fffefa;
      }

      .desktop-side-card.featured span {
        color: rgba(255, 254, 250, 0.82);
      }

      .desktop-action {
        min-height: 46px;
        border-radius: 999px;
        background: var(--green-deep);
        color: #fffefa;
        font-size: 13px;
        font-weight: 820;
      }

      .phone {
        width: min(100%, 430px);
        max-width: calc(100vw - 28px);
        height: min(920px, calc(100dvh - 28px));
        min-height: 720px;
        position: relative;
        overflow: hidden;
        overscroll-behavior-x: none;
        touch-action: pan-y;
        border: 1px solid rgba(82, 107, 95, 0.16);
        border-radius: 34px;
        background:
          radial-gradient(circle at 52% 10%, rgba(232, 239, 233, 0.82), transparent 30%),
          linear-gradient(145deg, #fbfaf7, #fffefa 58%, #eef3ee);
        box-shadow: var(--shadow);
      }

      .screen {
        position: absolute;
        inset: 0;
        width: 100%;
        max-width: 100%;
        display: none;
        grid-template-rows: auto minmax(0, 1fr) auto;
        padding: 18px 18px max(14px, env(safe-area-inset-bottom));
        overflow-x: hidden;
        overflow-y: hidden;
        overscroll-behavior-x: none;
        touch-action: pan-y;
      }

      .screen.active { display: grid; }

      .screen[data-screen="board"] {
        grid-template-rows: auto minmax(0, 1fr) auto;
        padding: 14px 18px max(14px, env(safe-area-inset-bottom));
        overflow: hidden;
        scrollbar-width: none;
      }

      .screen[data-screen="board"]::-webkit-scrollbar { display: none; }

      .screen[data-screen="board"] .content {
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        padding-top: 2px;
        padding-bottom: 0;
      }

      .screen[data-screen="board"] .lead {
        font-size: 13px;
        line-height: 1.35;
      }

      .screen.auth {
        grid-template-rows: auto 1fr auto;
        padding-bottom: 22px;
      }

      .screen::before {
        content: "";
        position: fixed;
        inset: 0;
        pointer-events: none;
        background:
          linear-gradient(180deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0) 18%),
          radial-gradient(circle at 84% 18%, rgba(182, 138, 75, 0.12), transparent 24%);
      }

      .topbar {
        position: sticky;
        top: 0;
        z-index: 4;
        display: grid;
        grid-template-columns: 44px 1fr 44px;
        gap: 10px;
        align-items: center;
        padding: 2px 0 10px;
      }

      .icon-btn, .chip, .primary, .secondary, .tab-btn, .floating-add {
        transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
      }

      .icon-btn:active, .chip:active, .primary:active, .secondary:active, .tab-btn:active, .floating-add:active {
        transform: scale(0.97);
      }

      .icon-btn {
        width: 44px;
        height: 44px;
        display: grid;
        place-items: center;
        border: 1px solid var(--line);
        border-radius: 50%;
        background: rgba(255, 254, 250, 0.82);
        color: var(--green-deep);
        box-shadow: var(--soft-shadow);
      }

      .icon-btn svg, .nav-btn svg, .mini-icon svg { width: 20px; height: 20px; }

      .icon-btn svg {
        width: 21px;
        height: 21px;
        stroke-width: 2;
      }

      .profile-thumb {
        width: 34px;
        height: 34px;
        display: block;
        border-radius: 50%;
        background:
          linear-gradient(180deg, rgba(255, 254, 250, 0.05), rgba(30, 38, 34, 0.16)),
          url("https://images.unsplash.com/photo-1534528741775-53994a69daeb?auto=format&fit=crop&w=220&q=82");
        background-position: center;
        background-size: cover;
        box-shadow: inset 0 0 0 1px rgba(255, 254, 250, 0.58);
      }

      .brand {
        display: grid;
        justify-items: center;
        gap: 3px;
        line-height: 1;
        font-weight: 760;
      }

      .spark {
        width: 30px;
        height: 30px;
        display: grid;
        place-items: center;
        border: 1px solid rgba(82, 107, 95, 0.22);
        border-radius: 50%;
        background: rgba(255, 254, 250, 0.66);
        color: var(--green-deep);
      }

      .brand .spark {
        background: var(--green-deep);
        color: #fffefa;
        border-color: rgba(255, 254, 250, 0.36);
        box-shadow: inset 0 0 0 1px rgba(255, 254, 250, 0.18), 0 10px 20px rgba(82, 107, 95, 0.18);
      }

      .spark svg { width: 22px; height: 22px; }

      .brand span { font-size: 17px; }

      .content {
        position: relative;
        z-index: 1;
        min-height: 0;
        min-width: 0;
        max-width: 100%;
        width: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        padding: 8px 0 18px;
        scrollbar-width: none;
        overscroll-behavior-x: none;
        touch-action: pan-y;
      }

      .content::-webkit-scrollbar { display: none; }

      .eyebrow {
        margin: 0 0 8px;
        color: var(--green-deep);
        font-size: 12px;
        font-weight: 760;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

      h1, h2, p { margin: 0; }

      h1 {
        max-width: 340px;
        font-size: 29px;
        line-height: 1.08;
        font-weight: 700;
        letter-spacing: 0;
      }

      .screen[data-screen="board"] h1 {
        font-size: clamp(24px, 6.6vw, 27px);
      }

      h2 {
        font-size: 22px;
        line-height: 1.12;
        font-weight: 700;
      }

      .lead {
        margin-top: 12px;
        max-width: 340px;
        color: var(--muted);
        font-size: 14px;
        line-height: 1.45;
      }

      .auth-art {
        min-height: 388px;
        position: relative;
        margin: 10px -18px 0;
        overflow: hidden;
      }

      .auth-art svg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
      }

      .path-main {
        fill: none;
        stroke: var(--green);
        stroke-width: 6;
        stroke-linecap: round;
        opacity: 0.86;
      }

      .path-gold {
        fill: none;
        stroke: var(--gold);
        stroke-width: 3;
        stroke-linecap: round;
        opacity: 0.72;
      }

      .mini-card {
        position: absolute;
        overflow: hidden;
        border: 1px solid rgba(82, 107, 95, 0.13);
        border-radius: 24px;
        background: rgba(255, 254, 250, 0.78);
        box-shadow: 0 18px 42px rgba(82, 107, 95, 0.12);
      }

      .mini-card::before {
        content: "";
        display: block;
        height: calc(100% - 16px);
        margin: 8px;
        border-radius: 16px;
        background: linear-gradient(135deg, var(--sage), #f5f2ea 55%, var(--green));
      }

      .mini-card::after {
        content: none;
      }

      .mini-card.photo::before {
        height: calc(100% - 16px);
        background:
          linear-gradient(180deg, transparent 28%, rgba(30, 38, 34, 0.58)),
          var(--photo);
        background-position: center;
        background-size: cover;
      }

      .mini-card.photo::after {
        color: #fffefa;
        text-shadow: 0 2px 10px rgba(25, 31, 28, 0.38);
      }

      .mini-card.one { width: 110px; height: 142px; left: 38px; top: 86px; transform: rotate(-8deg); }
      .mini-card.two { width: 158px; height: 118px; right: 24px; top: 48px; transform: rotate(7deg); }
      .mini-card.three { width: 94px; height: 96px; left: 154px; top: 204px; transform: rotate(2deg); }

      .auth-panel {
        position: relative;
        z-index: 2;
        padding: 18px;
        border: 1px solid var(--line);
        border-radius: 28px;
        background: rgba(255, 254, 250, 0.82);
        box-shadow: var(--soft-shadow);
      }

      .field {
        margin-top: 12px;
        padding: 12px 14px;
        border: 1px solid var(--line);
        border-radius: 18px;
        background: rgba(255, 254, 250, 0.72);
      }

      .field label {
        display: block;
        margin-bottom: 6px;
        color: var(--muted);
        font-size: 12px;
        font-weight: 650;
      }

      .field input, .field textarea { font-size: 15px; }
      .field textarea { min-height: 76px; resize: none; line-height: 1.4; }

      .actions { display: grid; gap: 10px; margin-top: 14px; }

      .primary, .secondary {
        min-height: 52px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        border-radius: 999px;
        font-size: 15px;
        font-weight: 760;
      }

      .primary {
        background: var(--green-deep);
        color: #fffefa;
        box-shadow: 0 14px 34px rgba(82, 107, 95, 0.22);
      }

      .secondary {
        border: 1px solid var(--line);
        background: rgba(255, 254, 250, 0.76);
        color: var(--green-deep);
      }

      .otp {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
        margin: 16px 0 4px;
      }

      .otp div {
        height: 58px;
        display: grid;
        place-items: center;
        border: 1px solid var(--line);
        border-radius: 18px;
        background: rgba(255, 254, 250, 0.82);
        font-size: 22px;
        font-weight: 760;
      }

      .summary {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
        margin: 16px 0 14px;
      }

      .screen[data-screen="board"] .summary {
        gap: 6px;
        margin: 8px 0 7px;
      }

      .summary > div,
      .summary > button {
        min-height: 76px;
        position: relative;
        overflow: hidden;
        padding: 12px 10px 11px;
        border: 1px solid rgba(82, 107, 95, 0.13);
        border-radius: 16px;
        background:
          linear-gradient(180deg, rgba(255, 254, 250, 0.9), rgba(248, 250, 246, 0.74));
        box-shadow: 0 10px 24px rgba(82, 107, 95, 0.08);
        text-align: left;
      }

      .summary > button {
        cursor: pointer;
      }

      .summary > button:active {
        transform: translateY(1px);
      }

      .screen[data-screen="board"] .summary > div,
      .screen[data-screen="board"] .summary > button {
        min-height: 48px;
        display: grid;
        grid-template-columns: 24px 1fr;
        grid-template-rows: auto auto;
        column-gap: 6px;
        align-items: center;
        padding: 7px 8px;
        border-radius: 14px;
      }

      .screen[data-screen="board"] .summary-icon {
        grid-row: 1 / 3;
        width: 24px;
        height: 24px;
        margin-bottom: 0;
        border-radius: 9px;
      }

      .screen[data-screen="board"] .summary strong {
        font-size: 18px;
        line-height: 0.95;
      }

      .screen[data-screen="board"] .summary span:not(.summary-icon) {
        margin-top: 0;
        font-size: 9.5px;
        line-height: 1.1;
      }

      .screen[data-screen="board"] .summary small {
        top: 7px;
        right: 8px;
        font-size: 8.5px;
      }

      .summary-icon {
        width: 26px;
        height: 26px;
        display: grid;
        place-items: center;
        margin-bottom: 8px;
        border-radius: 9px;
        background: rgba(232, 239, 233, 0.92);
        color: var(--green-deep);
      }

      .summary-icon svg {
        width: 18px;
        height: 18px;
      }

      .summary strong {
        display: block;
        font-size: 22px;
        color: var(--green-deep);
      }

      .summary span {
        display: block;
        margin-top: 3px;
        color: var(--muted);
        font-size: 11px;
        line-height: 1.25;
      }

      .summary small {
        position: absolute;
        right: 10px;
        top: 12px;
        color: rgba(82, 107, 95, 0.42);
        font-size: 10px;
        font-weight: 780;
      }

      .board {
        display: grid;
        grid-template-columns: 1fr 0.88fr 1fr;
        grid-auto-rows: 68px;
        gap: 8px;
        min-height: 390px;
        padding: 14px;
        overflow: hidden;
        border: 1px solid var(--line);
        border-radius: 28px;
        background:
          linear-gradient(145deg, rgba(232, 239, 233, 0.78), rgba(255, 254, 250, 0.88) 54%, rgba(251, 250, 247, 0.94));
        box-shadow: var(--soft-shadow);
      }

      .screen[data-screen="board"] .board {
        flex: 1 1 auto;
        min-height: 0;
        grid-auto-rows: minmax(42px, 1fr);
        gap: 9px;
        padding: 12px;
        border-radius: 24px;
      }

      .done-board {
        min-height: 420px;
        margin: 14px 0 92px;
      }

      .empty-state {
        grid-column: 1 / -1;
        display: grid;
        align-content: center;
        gap: 8px;
        min-height: 220px;
        padding: 26px;
        border-radius: 22px;
        background: rgba(255, 254, 250, 0.72);
        color: var(--green-deep);
        text-align: center;
      }

      .empty-state strong {
        font-size: 20px;
      }

      .empty-state span {
        color: var(--muted);
        line-height: 1.35;
      }

      .wish-tile {
        position: relative;
        overflow: hidden;
        min-width: 0;
        border: 1px solid rgba(82, 107, 95, 0.12);
        border-radius: 18px;
        background: var(--green-soft);
        box-shadow: 0 10px 24px rgba(82, 107, 95, 0.1);
      }

      .wish-tile.large { grid-row: span 2; }
      .wish-tile.wide { grid-column: span 2; }
      .wish-tile.tall { grid-row: span 3; }

      .wish-tile::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
          linear-gradient(180deg, transparent 30%, rgba(30, 38, 34, 0.64)),
          radial-gradient(circle at 78% 18%, rgba(255, 254, 250, 0.42), transparent 22%),
          var(--photo);
        background-position: center;
        background-size: cover;
      }

      .wish-tile::after {
        content: none;
      }

      .wish-tile.done { opacity: 0.72; }

      .wish-tile.done::after {
        content: none;
      }

      .wish-tile.done .done-mark {
        position: absolute;
        left: 12px;
        bottom: 13px;
        z-index: 2;
        width: 14px;
        height: 14px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        background: var(--green-deep);
        color: #fffefa;
        font-size: 9px;
        font-weight: 820;
      }

      .wish-tile.just-added {
        outline: 2px solid rgba(82, 107, 95, 0.24);
        outline-offset: 2px;
      }

      .section-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 18px 0 10px;
      }

      .screen[data-screen="board"] .section-title {
        margin: 8px 0 7px;
      }

      .section-title span { color: var(--muted); font-size: 12px; }

      .chips {
        display: flex;
        gap: 14px;
        overflow-x: auto;
        max-width: 100%;
        margin-right: 0;
        padding: 0 0 7px 0;
        scrollbar-width: none;
        overscroll-behavior-x: contain;
      }

      .screen[data-screen="board"] .chips {
        flex: 0 0 auto;
        gap: 13px;
        padding-bottom: 4px;
      }

      .chips::-webkit-scrollbar { display: none; }

      .chip {
        flex: 0 0 auto;
        position: relative;
        padding: 0 0 7px;
        border: 0;
        border-radius: 0;
        background: transparent;
        color: var(--muted);
        font-size: 12.5px;
        font-weight: 760;
        white-space: nowrap;
      }

      .chip.active { color: var(--green-deep); }

      .chip.active::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 2px;
        border-radius: 999px;
        background: var(--green-deep);
      }

      .bottom-nav {
        position: relative;
        align-self: end;
        z-index: 8;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 5px;
        margin-top: 10px;
        padding: 9px 8px;
        border: 1px solid rgba(82, 107, 95, 0.14);
        border-radius: 24px;
        background: rgba(255, 254, 250, 0.92);
        box-shadow: 0 20px 44px rgba(82, 107, 95, 0.16);
        backdrop-filter: blur(16px);
      }

      .nav-btn {
        min-height: 52px;
        position: relative;
        display: grid;
        place-items: center;
        border-radius: 19px;
        background: transparent;
        color: var(--muted);
      }

      .nav-icon {
        width: 32px;
        height: 32px;
        display: grid;
        place-items: center;
        border-radius: 12px;
      }

      .nav-icon svg {
        width: 24px;
        height: 24px;
      }

      .nav-label {
        display: none;
      }

      .nav-btn.active {
        background: transparent;
        color: var(--green-deep);
      }

      .nav-btn.active::before {
        content: "";
        position: absolute;
        top: -10px;
        width: 34px;
        height: 3px;
        border-radius: 999px;
        background: var(--green-deep);
        box-shadow: 0 8px 18px rgba(82, 107, 95, 0.18);
      }

      .nav-btn.active .nav-icon {
        width: 40px;
        height: 40px;
        border-radius: 14px;
        background: var(--green-soft);
        box-shadow: inset 0 0 0 1px rgba(82, 107, 95, 0.08);
      }

      .nav-btn.add-wish {
        color: var(--green-deep);
      }

      .nav-btn.add-wish .nav-icon {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: var(--green-deep);
        color: #fffefa;
        box-shadow: 0 12px 24px rgba(82, 107, 95, 0.24);
      }

      .nav-btn.add-wish .nav-icon svg {
        width: 24px;
        height: 24px;
      }

      .nav-btn[data-go="social"] .nav-icon svg,
      .nav-btn[data-go="friends"] .nav-icon svg {
        width: 27px;
        height: 27px;
      }

      .nav-btn svg path, .nav-btn svg circle {
        stroke-width: 2.2;
        vector-effect: non-scaling-stroke;
      }

      .floating-add {
        position: absolute;
        right: 24px;
        bottom: calc(92px + env(safe-area-inset-bottom));
        z-index: 7;
        width: 58px;
        height: 58px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        background: var(--green-deep);
        color: #fffefa;
        box-shadow: 0 16px 34px rgba(82, 107, 95, 0.28);
      }

      .screen[data-screen="board"] .floating-add {
        display: none;
      }

      .wish-hero {
        min-height: 276px;
        position: relative;
        overflow: hidden;
        border: 1px solid var(--line);
        border-radius: 30px;
        background: var(--wish-photo, linear-gradient(135deg, #b6c7bd, #fffefa 54%, #b68a4b));
        background-position: center;
        background-size: cover;
        box-shadow: var(--soft-shadow);
      }

      .wish-hero::after {
        content: "";
        position: absolute;
        inset: auto 14px 14px;
        height: 90px;
        border-radius: 22px;
        background: rgba(255, 254, 250, 0.72);
        backdrop-filter: blur(12px);
      }

      .wish-caption {
        position: absolute;
        left: 32px;
        right: 32px;
        bottom: 32px;
        z-index: 1;
      }

      .wish-caption strong {
        display: block;
        font-size: 20px;
        line-height: 1.1;
      }

      .wish-caption span {
        display: block;
        margin-top: 6px;
        color: var(--muted);
        font-size: 13px;
      }

      .info-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-top: 14px;
      }

      .info {
        min-height: 96px;
        padding: 14px;
        border: 1px solid var(--line);
        border-radius: 22px;
        background: rgba(255, 254, 250, 0.72);
        box-shadow: var(--soft-shadow);
      }

      .mini-icon {
        width: 34px;
        height: 34px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        background: var(--green-soft);
        color: var(--green-deep);
        margin-bottom: 10px;
      }

      .info strong { display: block; font-size: 14px; }
      .info span { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; line-height: 1.3; }

      .sheet {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 20;
        display: none;
        padding: 14px 18px max(18px, env(safe-area-inset-bottom));
        border-radius: 30px 30px 0 0;
        background: rgba(255, 254, 250, 0.96);
        box-shadow: 0 -20px 60px rgba(82, 107, 95, 0.18);
      }

      .sheet.active { display: block; }

      .sheet-handle {
        width: 48px;
        height: 5px;
        margin: 0 auto 14px;
        border-radius: 99px;
        background: rgba(82, 107, 95, 0.22);
      }

      .sheet-action {
        width: 100%;
        min-height: 54px;
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 0 4px;
        border-bottom: 1px solid rgba(82, 107, 95, 0.1);
        background: transparent;
        text-align: left;
        font-weight: 720;
      }

      .sheet-action.danger { color: var(--danger); }

      .photo-upload {
        min-height: 176px;
        display: grid;
        grid-template-columns: 1fr;
        align-content: center;
        justify-items: center;
        gap: 10px;
        margin-bottom: 10px;
        border: 1px dashed rgba(82, 107, 95, 0.28);
        border-radius: 28px;
        background: rgba(232, 239, 233, 0.62);
        color: var(--green-deep);
        font-weight: 760;
      }

      .photo-upload.selected {
        border-style: solid;
        background:
          linear-gradient(180deg, rgba(255, 254, 250, 0.26), rgba(30, 38, 34, 0.36)),
          var(--selected-photo, linear-gradient(135deg, #d8ceb9, #fffefa 48%, #8fa296));
        background-position: center;
        background-size: cover;
        color: #fffefa;
        text-shadow: 0 2px 10px rgba(25, 31, 28, 0.34);
      }

      .photo-upload svg {
        width: 36px;
        height: 36px;
      }

      .photo-upload span {
        max-width: 230px;
        color: var(--muted);
        font-size: 12px;
        font-weight: 650;
        line-height: 1.35;
      }

      .photo-upload.selected span { color: rgba(255, 254, 250, 0.86); }

      .create-preview-card {
        min-height: 132px;
        position: relative;
        overflow: hidden;
        margin: 12px 0;
        padding: 16px;
        display: grid;
        align-content: end;
        border: 1px solid var(--line);
        border-radius: 26px;
        background:
          linear-gradient(180deg, transparent 18%, rgba(30, 38, 34, 0.52)),
          var(--selected-photo, url("https://images.unsplash.com/photo-1600585154340-be6161a56a0c?auto=format&fit=crop&w=900&q=82"));
        background-position: center;
        background-size: cover;
        box-shadow: var(--soft-shadow);
        color: #fffefa;
      }

      .create-preview-card strong {
        display: block;
        font-size: 17px;
        line-height: 1.1;
        text-shadow: 0 2px 12px rgba(25, 31, 28, 0.32);
      }

      .create-preview-card span {
        display: block;
        margin-top: 5px;
        color: rgba(255, 254, 250, 0.84);
        font-size: 12px;
        font-weight: 700;
      }

      .picker {
        margin-top: 12px;
      }

      .picker label {
        display: block;
        margin-bottom: 8px;
        color: var(--muted);
        font-size: 12px;
        font-weight: 700;
      }

      .pill-row {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        margin-right: -18px;
        padding-right: 18px;
        scrollbar-width: none;
      }

      .pill-row::-webkit-scrollbar { display: none; }

      .pill {
        flex: 0 0 auto;
        min-height: 38px;
        padding: 0 13px;
        border: 1px solid rgba(82, 107, 95, 0.14);
        border-radius: 999px;
        background: rgba(255, 254, 250, 0.76);
        color: var(--muted);
        font-size: 12px;
        font-weight: 780;
      }

      .pill.active {
        background: var(--green-deep);
        color: #fffefa;
        border-color: transparent;
        box-shadow: 0 10px 22px rgba(82, 107, 95, 0.2);
      }

      .privacy-card {
        margin-top: 12px;
        padding: 13px 14px;
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 14px;
        align-items: center;
        border: 1px solid var(--line);
        border-radius: 22px;
        background: rgba(255, 254, 250, 0.76);
        box-shadow: var(--soft-shadow);
      }

      .privacy-card strong {
        display: block;
        font-size: 14px;
      }

      .privacy-card span {
        display: block;
        margin-top: 4px;
        color: var(--muted);
        font-size: 12px;
        line-height: 1.3;
      }

      .create-steps {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
        margin: 0 0 14px;
      }

      .create-steps span {
        height: 4px;
        border-radius: 999px;
        background: rgba(82, 107, 95, 0.12);
      }

      .create-steps span.active { background: var(--green-deep); }

      .photo-preview {
        min-height: 210px;
        position: relative;
        overflow: hidden;
        margin: 12px 0;
        border: 1px solid var(--line);
        border-radius: 30px;
        background:
          linear-gradient(135deg, rgba(82, 107, 95, 0.18), transparent 42%),
          linear-gradient(145deg, #d8ceb9, #fffefa 48%, #8fa296);
        box-shadow: var(--soft-shadow);
      }

      .photo-preview.selected {
        background:
          linear-gradient(180deg, transparent 18%, rgba(30, 38, 34, 0.46)),
          var(--selected-photo, linear-gradient(135deg, #d8ceb9, #fffefa 48%, #8fa296));
        background-position: center;
        background-size: cover;
      }

      .photo-preview::after {
        content: "Дом с большим светом";
        position: absolute;
        left: 14px;
        right: 14px;
        bottom: 14px;
        padding: 12px;
        border-radius: 18px;
        background: rgba(255, 254, 250, 0.82);
        color: var(--green-deep);
        font-size: 14px;
        font-weight: 760;
      }

      .source-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin: 16px 0;
      }

      .source-card {
        min-height: 132px;
        overflow: hidden;
        position: relative;
        display: grid;
        align-content: center;
        justify-items: center;
        gap: 9px;
        padding: 14px;
        border: 1px solid var(--line);
        border-radius: 24px;
        background: rgba(255, 254, 250, 0.72);
        box-shadow: var(--soft-shadow);
        text-align: center;
        font-weight: 760;
      }

      .source-card[data-photo] {
        background:
          linear-gradient(180deg, rgba(255, 254, 250, 0.2), rgba(255, 254, 250, 0.82)),
          var(--source-photo);
        background-position: center;
        background-size: cover;
      }

      .source-card[data-photo="home"] {
        --source-photo: url("https://images.unsplash.com/photo-1600585154340-be6161a56a0c?auto=format&fit=crop&w=700&q=82");
      }

      .source-card[data-photo="studio"] {
        --source-photo: url("https://images.unsplash.com/photo-1497366754035-f200968a6e72?auto=format&fit=crop&w=700&q=82");
      }

      .source-card[data-photo="travel"] {
        --source-photo: url("https://images.unsplash.com/photo-1502602898657-3e91760cbb34?auto=format&fit=crop&w=900&q=82");
      }

      .source-card span {
        color: var(--muted);
        font-size: 12px;
        font-weight: 650;
        line-height: 1.25;
      }

      .create-progress {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
        margin: 4px 0 14px;
      }

      .create-progress span {
        height: 4px;
        border-radius: 999px;
        background: rgba(82, 107, 95, 0.12);
      }

      .create-progress span:first-child,
      .create-progress span:nth-child(2) {
        background: var(--green-deep);
      }

      .create-stage {
        display: grid;
        gap: 10px;
        margin: 12px 0 14px;
      }

      .create-stage-card {
        display: grid;
        grid-template-columns: 34px 1fr;
        gap: 10px;
        align-items: start;
        padding: 12px;
        border: 1px solid rgba(82, 107, 95, 0.12);
        border-radius: 22px;
        background: rgba(255, 254, 250, 0.68);
        box-shadow: 0 12px 28px rgba(82, 107, 95, 0.06);
      }

      .create-stage-card b {
        width: 34px;
        height: 34px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        background: var(--green-soft);
        color: var(--green-deep);
        font-size: 12px;
      }

      .create-stage-card strong {
        display: block;
        font-size: 14px;
      }

      .create-stage-card span {
        display: block;
        margin-top: 4px;
        color: var(--muted);
        font-size: 12px;
        line-height: 1.32;
        font-weight: 650;
      }

      .create-section-label {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        align-items: center;
        margin: 16px 0 8px;
        color: var(--green-deep);
        font-size: 12px;
        font-weight: 820;
        letter-spacing: 0.04em;
        text-transform: uppercase;
      }

      .create-section-label span {
        color: var(--muted);
        font-size: 11px;
        font-weight: 720;
        letter-spacing: 0;
        text-transform: none;
      }

      .choice-row,
      .privacy-grid {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        margin: 12px -18px 0 0;
        padding: 0 18px 4px 0;
        scrollbar-width: none;
      }

      .choice-row::-webkit-scrollbar,
      .privacy-grid::-webkit-scrollbar { display: none; }

      .choice-pill,
      .privacy-pill {
        flex: 0 0 auto;
        min-height: 38px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        padding: 0 13px;
        border: 1px solid var(--line);
        border-radius: 999px;
        background: rgba(255, 254, 250, 0.74);
        color: var(--muted);
        font-size: 12px;
        font-weight: 760;
      }

      .choice-pill.active,
      .privacy-pill.active {
        background: var(--green-deep);
        color: #fffefa;
        border-color: var(--green-deep);
        box-shadow: 0 12px 24px rgba(82, 107, 95, 0.14);
      }

      .create-preview-card {
        min-height: 188px;
        position: relative;
        overflow: hidden;
        margin-top: 10px;
        border: 1px solid rgba(82, 107, 95, 0.12);
        border-radius: 30px;
        background:
          linear-gradient(180deg, transparent 20%, rgba(30, 38, 34, 0.62)),
          var(--selected-photo, url("https://images.unsplash.com/photo-1600585154340-be6161a56a0c?auto=format&fit=crop&w=900&q=82"));
        background-position: center;
        background-size: cover;
        box-shadow: var(--soft-shadow);
      }

      .create-preview-card strong {
        position: absolute;
        left: 14px;
        right: 14px;
        bottom: 34px;
        overflow: hidden;
        color: #fffefa;
        font-size: 17px;
        line-height: 1.12;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .create-preview-card span {
        position: absolute;
        left: 14px;
        bottom: 14px;
        color: rgba(255, 254, 250, 0.82);
        font-size: 12px;
        font-weight: 720;
      }

      .create-preview-card::before {
        content: "предпросмотр на доске";
        position: absolute;
        top: 12px;
        left: 12px;
        padding: 7px 10px;
        border-radius: 999px;
        background: rgba(255, 254, 250, 0.82);
        color: var(--green-deep);
        font-size: 10px;
        font-weight: 820;
        text-transform: uppercase;
        letter-spacing: 0.04em;
      }

      .create-preview-card::after {
        content: attr(data-step);
        position: absolute;
        right: 12px;
        bottom: 12px;
        max-width: 44%;
        padding: 8px 10px;
        border-radius: 16px;
        background: rgba(255, 254, 250, 0.86);
        color: var(--green-deep);
        font-size: 11px;
        font-weight: 760;
        line-height: 1.22;
      }

      .create-rhythm {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
        margin-top: 12px;
      }

      .create-rhythm button {
        min-height: 52px;
        padding: 10px 12px;
        border: 1px solid var(--line);
        border-radius: 19px;
        background: rgba(255, 254, 250, 0.72);
        color: var(--green-deep);
        font-size: 12px;
        font-weight: 780;
        text-align: left;
      }

      .create-success {
        min-height: 224px;
        position: relative;
        display: grid;
        place-items: center;
        overflow: hidden;
        margin: 14px 0;
        border: 1px solid var(--line);
        border-radius: 32px;
        background:
          radial-gradient(circle at 22% 22%, rgba(182, 138, 75, 0.28), transparent 28%),
          radial-gradient(circle at 78% 30%, rgba(82, 107, 95, 0.24), transparent 30%),
          linear-gradient(145deg, #fffefa, #e8efe9 62%, #d8ceb9);
        box-shadow: var(--soft-shadow);
      }

      .create-success .spark {
        width: 74px;
        height: 74px;
        color: #fffefa;
        background: var(--green-deep);
        border-color: rgba(255, 254, 250, 0.34);
      }

      .create-success .spark svg {
        width: 48px;
        height: 48px;
      }

      .premium-visual {
        min-height: 188px;
        display: grid;
        place-items: center;
        margin: 10px 0 18px;
        border-radius: 32px;
        border: 1px solid var(--line);
        background:
          linear-gradient(135deg, rgba(82, 107, 95, 0.14), transparent 38%),
          linear-gradient(145deg, #fffefa, #e8efe9 60%, #d8ceb9);
        box-shadow: var(--soft-shadow);
      }

      .premium-visual .spark {
        width: 82px;
        height: 82px;
        background: rgba(255, 254, 250, 0.82);
      }

      .premium-hero {
        position: relative;
        overflow: hidden;
        min-height: 190px;
        display: grid;
        align-content: end;
        gap: 8px;
        margin: 10px 0 16px;
        padding: 18px;
        border: 1px solid var(--line);
        border-radius: 32px;
        background:
          linear-gradient(180deg, rgba(30, 38, 34, 0.02), rgba(30, 38, 34, 0.56)),
          url("https://images.unsplash.com/photo-1506126613408-eca07ce68773?auto=format&fit=crop&w=900&q=82");
        background-position: center;
        background-size: cover;
        box-shadow: var(--soft-shadow);
      }

      .premium-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
          radial-gradient(circle at 18% 18%, rgba(255, 254, 250, 0.2), transparent 24%),
          linear-gradient(125deg, transparent 0 36%, rgba(255, 254, 250, 0.18) 48%, transparent 62%);
        mix-blend-mode: screen;
      }

      .premium-hero > * {
        position: relative;
        z-index: 1;
      }

      .premium-hero h2 {
        max-width: 280px;
        color: #fffefa;
        font-size: 28px;
        line-height: 1.04;
        text-shadow: 0 2px 14px rgba(0, 0, 0, 0.26);
      }

      .premium-hero p {
        max-width: 300px;
        color: rgba(255, 254, 250, 0.82);
        font-size: 13px;
        line-height: 1.35;
        font-weight: 650;
      }

      .premium-modules {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
        margin: 14px 0;
      }

      .module-card {
        min-height: 118px;
        display: grid;
        align-content: space-between;
        gap: 10px;
        padding: 14px;
        border: 1px solid var(--line);
        border-radius: 22px;
        background: rgba(255, 254, 250, 0.74);
        box-shadow: 0 12px 28px rgba(82, 107, 95, 0.07);
        text-align: left;
      }

      .module-card.wide {
        grid-column: 1 / -1;
        min-height: 112px;
      }

      .module-card strong {
        display: block;
        margin-top: 8px;
        color: var(--ink);
        font-size: 15px;
        line-height: 1.12;
      }

      .module-card span:last-child {
        display: block;
        color: var(--muted);
        font-size: 12px;
        line-height: 1.34;
        font-weight: 650;
      }

      .premium-icon {
        width: 34px;
        height: 34px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        background: var(--green-soft);
        color: var(--green-deep);
      }

      .premium-icon svg {
        width: 21px;
        height: 21px;
        stroke-width: 1.8;
      }

      .price-card {
        display: grid;
        gap: 10px;
        margin: 14px 0;
        padding: 14px;
        border: 1px solid rgba(82, 107, 95, 0.2);
        border-radius: 24px;
        background: rgba(255, 254, 250, 0.82);
        box-shadow: var(--soft-shadow);
      }

      .price-card strong {
        font-size: 30px;
        line-height: 1;
      }

      .price-card span {
        color: var(--muted);
        font-size: 13px;
        line-height: 1.38;
        font-weight: 650;
      }

      .content-tabs {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        margin: 12px -4px 10px;
        padding: 0 4px;
        scrollbar-width: none;
      }

      .content-tabs button {
        flex: 0 0 auto;
        min-height: 36px;
        padding: 0 13px;
        border: 1px solid var(--line);
        border-radius: 999px;
        background: rgba(255, 254, 250, 0.7);
        color: var(--muted);
        font-size: 12px;
        font-weight: 780;
      }

      .content-tabs .active {
        background: var(--green);
        color: #fffefa;
      }

      .lesson-list {
        display: grid;
        gap: 10px;
        margin: 12px 0 92px;
      }

      .lesson-card {
        display: grid;
        grid-template-columns: 78px 1fr auto;
        gap: 12px;
        align-items: center;
        padding: 10px;
        border: 1px solid var(--line);
        border-radius: 22px;
        background: rgba(255, 254, 250, 0.74);
        box-shadow: 0 12px 28px rgba(82, 107, 95, 0.07);
        text-align: left;
      }

      .lesson-cover {
        height: 72px;
        border-radius: 17px;
        background:
          linear-gradient(180deg, rgba(30, 38, 34, 0.02), rgba(30, 38, 34, 0.38)),
          var(--lesson-photo);
        background-position: center;
        background-size: cover;
      }

      .lesson-card strong {
        display: block;
        font-size: 14px;
        line-height: 1.15;
      }

      .lesson-card span {
        display: block;
        margin-top: 4px;
        color: var(--muted);
        font-size: 12px;
        line-height: 1.32;
        font-weight: 650;
      }

      .lesson-arrow {
        color: var(--green);
        font-size: 22px;
        font-weight: 500;
      }

      .lesson-actions {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        margin-top: 9px;
      }

      .lesson-actions button,
      .lesson-actions span {
        min-height: 30px;
        display: inline-flex;
        align-items: center;
        padding: 0 10px;
        border: 1px solid rgba(82, 107, 95, 0.14);
        border-radius: 999px;
        background: rgba(255, 254, 250, 0.72);
        color: var(--green-deep);
        font-size: 11px;
        font-weight: 780;
      }

      .lesson-actions button.saved,
      .lesson-actions button.done {
        background: var(--green-soft);
      }

      .favorite-strip {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 10px;
        align-items: center;
        margin: 10px 0 12px;
        padding: 12px;
        border: 1px solid rgba(82, 107, 95, 0.14);
        border-radius: 22px;
        background: rgba(255, 254, 250, 0.72);
      }

      .favorite-strip strong {
        display: block;
        font-size: 14px;
      }

      .favorite-strip span {
        display: block;
        margin-top: 3px;
        color: var(--muted);
        font-size: 12px;
        line-height: 1.32;
        font-weight: 650;
      }

      .lesson-hero {
        position: relative;
        overflow: hidden;
        min-height: 260px;
        display: grid;
        align-content: end;
        gap: 8px;
        margin: 10px 0 16px;
        padding: 18px;
        border-radius: 32px;
        background:
          linear-gradient(180deg, rgba(30, 38, 34, 0.02), rgba(30, 38, 34, 0.58)),
          var(--lesson-photo);
        background-position: center;
        background-size: cover;
        box-shadow: var(--soft-shadow);
      }

      .lesson-hero h1,
      .lesson-hero p,
      .lesson-hero .eyebrow {
        position: relative;
        z-index: 1;
        color: #fffefa;
        text-shadow: 0 2px 14px rgba(0, 0, 0, 0.28);
      }

      .lesson-hero p {
        color: rgba(255, 254, 250, 0.84);
        font-size: 14px;
        line-height: 1.38;
        font-weight: 650;
      }

      .lesson-meta {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
        margin: 12px 0;
      }

      .lesson-meta div {
        min-height: 70px;
        display: grid;
        gap: 4px;
        align-content: center;
        padding: 10px;
        border: 1px solid var(--line);
        border-radius: 20px;
        background: rgba(255, 254, 250, 0.72);
      }

      .lesson-meta strong {
        font-size: 18px;
        color: var(--green-deep);
      }

      .lesson-meta span {
        color: var(--muted);
        font-size: 11px;
        font-weight: 700;
      }

      .pay-methods {
        display: grid;
        gap: 9px;
        margin: 14px 0;
      }

      .pay-method {
        display: grid;
        grid-template-columns: 38px 1fr auto;
        gap: 11px;
        align-items: center;
        min-height: 62px;
        padding: 10px 12px;
        border: 1px solid var(--line);
        border-radius: 21px;
        background: rgba(255, 254, 250, 0.74);
      }

      .pay-method.active {
        border-color: rgba(82, 107, 95, 0.34);
        background: rgba(232, 239, 233, 0.76);
      }

      .pay-method strong {
        display: block;
        font-size: 14px;
      }

      .pay-method span {
        display: block;
        margin-top: 3px;
        color: var(--muted);
        font-size: 12px;
        font-weight: 650;
      }

      .pay-dot {
        width: 18px;
        height: 18px;
        border: 2px solid rgba(82, 107, 95, 0.32);
        border-radius: 50%;
      }

      .pay-method.active .pay-dot {
        border-color: var(--green);
        box-shadow: inset 0 0 0 4px #fffefa;
        background: var(--green);
      }

      .feature-list {
        display: grid;
        gap: 9px;
        margin: 14px 0;
      }

      .feature {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px;
        border: 1px solid var(--line);
        border-radius: 18px;
        background: rgba(255, 254, 250, 0.68);
        font-size: 14px;
        font-weight: 650;
      }

      .trend-board {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: 128px;
        gap: 9px;
        margin: 14px 0 92px;
      }

      .trend-card {
        position: relative;
        overflow: hidden;
        min-width: 0;
        border: 1px solid rgba(82, 107, 95, 0.13);
        border-radius: 22px;
        background: var(--photo);
        box-shadow: var(--soft-shadow);
      }

      .trend-card.large { grid-row: span 2; }
      .trend-card.wide { grid-column: span 2; }

      .trend-card.is-hidden {
        display: none;
      }

      .trend-card::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
          linear-gradient(180deg, transparent 32%, rgba(37, 45, 41, 0.5)),
          radial-gradient(circle at 78% 18%, rgba(255, 254, 250, 0.58), transparent 23%);
      }

      .trend-info {
        position: absolute;
        left: 10px;
        right: 10px;
        bottom: 10px;
        z-index: 1;
        color: #fffefa;
      }

      .trend-info strong {
        display: block;
        font-size: 14px;
        line-height: 1.15;
      }

      .trend-info span {
        display: block;
        margin-top: 3px;
        color: rgba(255, 254, 250, 0.82);
        font-size: 11px;
        font-weight: 650;
      }

      .trend-save {
        position: absolute;
        right: 9px;
        top: 9px;
        z-index: 2;
        width: 34px;
        height: 34px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        background: rgba(255, 254, 250, 0.86);
        color: var(--green-deep);
        font-size: 20px;
        font-weight: 720;
        box-shadow: 0 8px 18px rgba(40, 48, 44, 0.16);
      }

      .social-search {
        margin: 14px 0 4px;
      }

      .social-search input {
        font-size: 15px;
      }

      .author-pill {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        width: fit-content;
        min-height: 36px;
        margin-top: 10px;
        padding: 6px 10px 6px 6px;
        border-radius: 999px;
        background: rgba(255, 254, 250, 0.78);
        color: var(--green-deep);
        font-size: 12px;
        font-weight: 780;
      }

      .author-avatar {
        width: 26px;
        height: 26px;
        flex: 0 0 auto;
        border-radius: 50%;
        background: var(--avatar);
        background-position: center;
        background-size: cover;
        border: 1px solid rgba(82, 107, 95, 0.16);
      }

      .public-hero {
        min-height: 310px;
        position: relative;
        overflow: hidden;
        border: 1px solid var(--line);
        border-radius: 30px;
        background: var(--public-photo);
        background-position: center;
        background-size: cover;
        box-shadow: var(--soft-shadow);
      }

      .public-hero::after {
        content: "";
        position: absolute;
        inset: 0;
        background:
          linear-gradient(180deg, transparent 34%, rgba(28, 34, 31, 0.62)),
          radial-gradient(circle at 76% 12%, rgba(255, 254, 250, 0.46), transparent 24%);
      }

      .public-hero-copy {
        position: absolute;
        left: 18px;
        right: 18px;
        bottom: 18px;
        z-index: 1;
        color: #fffefa;
      }

      .public-hero-copy h1 {
        color: #fffefa;
        font-size: 30px;
      }

      .public-hero-copy p {
        margin: 8px 0 0;
        color: rgba(255, 254, 250, 0.84);
        font-size: 13px;
        line-height: 1.35;
      }

      .author-card {
        display: grid;
        grid-template-columns: 56px 1fr auto;
        align-items: center;
        gap: 12px;
        margin: 12px 0;
        padding: 12px;
        border: 1px solid var(--line);
        border-radius: 22px;
        background: rgba(255, 254, 250, 0.78);
        box-shadow: var(--soft-shadow);
        text-align: left;
      }

      .author-card .author-avatar {
        width: 56px;
        height: 56px;
      }

      .author-card strong,
      .public-profile-title strong {
        display: block;
        color: var(--ink);
        font-size: 15px;
      }

      .author-card span,
      .public-profile-title span {
        display: block;
        margin-top: 3px;
        color: var(--muted);
        font-size: 11.5px;
        line-height: 1.3;
      }

      .author-arrow {
        color: var(--green-deep);
        font-size: 22px;
        font-weight: 560;
      }

      .public-profile-cover {
        display: grid;
        gap: 12px;
        padding: 16px;
        border: 1px solid var(--line);
        border-radius: 30px;
        background:
          radial-gradient(circle at 82% 12%, rgba(182, 138, 75, 0.16), transparent 28%),
          linear-gradient(135deg, rgba(232, 239, 233, 0.88), rgba(255, 254, 250, 0.78));
        box-shadow: var(--soft-shadow);
      }

      .public-profile-title {
        display: grid;
        grid-template-columns: 74px 1fr;
        gap: 12px;
        align-items: center;
      }

      .public-profile-title .author-avatar {
        width: 74px;
        height: 74px;
      }

      .friend-list {
        display: grid;
        gap: 10px;
        margin: 14px 0 92px;
      }

      .friend-card {
        display: grid;
        grid-template-columns: 54px 1fr auto;
        gap: 12px;
        align-items: center;
        padding: 12px;
        border: 1px solid rgba(82, 107, 95, 0.13);
        border-radius: 22px;
        background: rgba(255, 254, 250, 0.74);
        box-shadow: var(--soft-shadow);
      }

      .friend-avatar {
        width: 54px;
        height: 54px;
        border-radius: 50%;
        background:
          radial-gradient(circle at 50% 35%, #fffefa 0 18%, transparent 19%),
          radial-gradient(circle at 50% 84%, rgba(255, 254, 250, 0.92) 0 29%, transparent 30%),
          linear-gradient(135deg, var(--sage), #fffefa 62%, var(--gold));
        background-position: center;
        background-size: cover;
        border: 1px solid rgba(82, 107, 95, 0.14);
      }

      .friend-copy {
        min-width: 0;
      }

      .friend-copy strong {
        display: block;
        font-size: 15px;
      }

      .friend-copy span {
        display: block;
        margin-top: 3px;
        color: var(--muted);
        font-size: 12px;
        line-height: 1.3;
      }

      .friend-action {
        padding: 9px 11px;
        border-radius: 999px;
        background: var(--green-soft);
        color: var(--green-deep);
        font-size: 11px;
        font-weight: 820;
      }

      .connection-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        margin: 14px 0;
      }

      .connection-card {
        display: grid;
        gap: 7px;
        min-height: 96px;
        padding: 12px;
        border: 1px solid rgba(82, 107, 95, 0.13);
        border-radius: 22px;
        background: rgba(255, 254, 250, 0.74);
        box-shadow: 0 12px 28px rgba(82, 107, 95, 0.07);
        text-align: left;
      }

      .connection-card strong {
        color: var(--green-deep);
        font-size: 22px;
        line-height: 1;
      }

      .connection-card span {
        color: var(--muted);
        font-size: 11px;
        line-height: 1.28;
        font-weight: 700;
      }

      .profile-people {
        display: grid;
        gap: 10px;
        margin: 12px 0 16px;
      }

      .profile-people .friend-card {
        min-height: 68px;
      }

      .invite-panel {
        display: grid;
        gap: 10px;
        padding: 14px;
        border: 1px solid rgba(82, 107, 95, 0.13);
        border-radius: 24px;
        background:
          linear-gradient(135deg, rgba(232, 239, 233, 0.84), rgba(255, 254, 250, 0.76));
        box-shadow: var(--soft-shadow);
      }

      .invite-panel h2 {
        font-size: 19px;
      }

      .social-tabs {
        display: flex;
        gap: 14px;
        overflow-x: auto;
        max-width: 100%;
        margin: 14px 0 12px 0;
        padding: 0 0 7px 0;
        scrollbar-width: none;
        overscroll-behavior-x: contain;
      }

      .social-tabs::-webkit-scrollbar { display: none; }

      .social-tabs button {
        position: relative;
        flex: 0 0 auto;
        padding: 0 0 7px;
        color: var(--muted);
        background: transparent;
        font-size: 12.5px;
        font-weight: 780;
      }

      .social-tabs .active {
        color: var(--green-deep);
      }

      .social-tabs .active::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 2px;
        border-radius: 999px;
        background: var(--green-deep);
      }

      .celebration {
        overflow: hidden;
        background:
          radial-gradient(circle at 50% 22%, rgba(255, 254, 250, 0.96), transparent 28%),
          radial-gradient(circle at 80% 12%, rgba(182, 138, 75, 0.18), transparent 24%),
          linear-gradient(145deg, #fbfaf7, #eef3ee 62%, #d8ceb9);
      }

      .fireworks {
        position: relative;
        min-height: 228px;
        display: grid;
        place-items: center;
        margin: 4px 0 12px;
        isolation: isolate;
      }

      .burst {
        position: absolute;
        width: var(--size);
        height: var(--size);
        left: var(--x);
        top: var(--y);
        border-radius: 50%;
        background:
          radial-gradient(circle, rgba(255, 254, 250, 0.95) 0 7%, transparent 8%),
          conic-gradient(from 0deg, transparent 0 8%, var(--color) 9% 11%, transparent 12% 22%, var(--color) 23% 25%, transparent 26% 36%, var(--color) 37% 39%, transparent 40% 100%);
        filter: drop-shadow(0 0 18px rgba(255, 254, 250, 0.7));
        opacity: 0.54;
        animation: nobleBurst 3.8s ease-in-out infinite;
      }

      .burst:nth-child(2) { animation-delay: 0.45s; }
      .burst:nth-child(3) { animation-delay: 0.9s; }
      .burst:nth-child(4) { animation-delay: 1.35s; }

      .lens-flare,
      .aura-ring,
      .spark-ray {
        position: absolute;
        pointer-events: none;
      }

      .lens-flare {
        inset: 24px 0 auto;
        height: 150px;
        z-index: 2;
        mix-blend-mode: screen;
        background:
          linear-gradient(105deg, transparent 12%, rgba(255, 254, 250, 0.72) 31%, rgba(182, 138, 75, 0.28) 39%, rgba(151, 191, 189, 0.34) 48%, rgba(238, 190, 204, 0.24) 56%, transparent 72%),
          radial-gradient(circle at 66% 42%, rgba(255, 254, 250, 0.96) 0 3%, rgba(182, 138, 75, 0.22) 4% 12%, transparent 18%);
        opacity: 0.72;
        transform: translateX(-32%) rotate(-7deg);
        animation: lensWalk 4.6s ease-in-out infinite;
      }

      .aura-ring {
        width: 174px;
        height: 174px;
        border-radius: 50%;
        z-index: 0;
        border: 1px solid rgba(255, 254, 250, 0.68);
        background:
          conic-gradient(from 12deg, rgba(255, 254, 250, 0), rgba(182, 138, 75, 0.26), rgba(132, 168, 157, 0.34), rgba(210, 174, 192, 0.22), rgba(255, 254, 250, 0));
        filter: blur(0.3px);
        opacity: 0.72;
        animation: auraPulse 4.8s ease-in-out infinite;
      }

      .aura-ring.two {
        width: 218px;
        height: 218px;
        opacity: 0.38;
        animation-delay: 0.6s;
        animation-duration: 6.2s;
      }

      .spark-ray {
        width: 7px;
        height: 7px;
        left: var(--x);
        top: var(--y);
        z-index: 3;
        border-radius: 50%;
        background: rgba(255, 254, 250, 0.92);
        box-shadow:
          0 0 0 1px rgba(255, 254, 250, 0.42),
          0 0 18px rgba(182, 138, 75, 0.55),
          0 0 36px rgba(126, 165, 151, 0.38);
        animation: shimmerDot 3.4s ease-in-out infinite;
      }

      .spark-ray::before,
      .spark-ray::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        border-radius: 999px;
        background: currentColor;
        color: rgba(255, 254, 250, 0.82);
        transform: translate(-50%, -50%) rotate(var(--r, 0deg));
      }

      .spark-ray::before { width: 32px; height: 1px; }
      .spark-ray::after { width: 1px; height: 32px; }

      .spark-ray:nth-of-type(7) { animation-delay: 0.4s; }
      .spark-ray:nth-of-type(8) { animation-delay: 0.9s; }
      .spark-ray:nth-of-type(9) { animation-delay: 1.3s; }
      .spark-ray:nth-of-type(10) { animation-delay: 1.8s; }
      .spark-ray:nth-of-type(11) { animation-delay: 2.2s; }

      .celebration-mark {
        position: relative;
        z-index: 4;
        width: 132px;
        height: 132px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        background:
          radial-gradient(circle at 38% 28%, rgba(255, 254, 250, 0.98), rgba(255, 254, 250, 0.74) 38%, rgba(232, 239, 233, 0.74) 72%),
          linear-gradient(145deg, rgba(255, 254, 250, 0.78), rgba(182, 199, 189, 0.34));
        color: var(--green-deep);
        box-shadow:
          0 24px 70px rgba(82, 107, 95, 0.2),
          0 0 0 1px rgba(255, 254, 250, 0.66),
          0 0 44px rgba(182, 138, 75, 0.28);
      }

      .fulfilled-check-wrap {
        position: relative;
        z-index: 4;
        display: grid;
        place-items: center;
      }

      .fulfilled-check {
        position: relative;
        isolation: isolate;
        width: 132px;
        height: 132px;
        display: grid;
        place-items: center;
        overflow: hidden;
        border-radius: 50%;
        background:
          radial-gradient(circle at 38% 26%, rgba(255, 254, 250, 0.58) 0 10%, transparent 11%),
          linear-gradient(145deg, #6e8479, #40584e);
        color: #fffefa;
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.34),
          0 24px 70px rgba(82, 107, 95, 0.22),
          0 0 0 1px rgba(255, 254, 250, 0.48);
      }

      .fulfilled-check::before {
        content: "";
        position: absolute;
        z-index: 0;
        inset: -24px auto auto -64px;
        width: 52px;
        height: 176px;
        transform: rotate(28deg);
        background: linear-gradient(90deg, transparent, rgba(255, 254, 250, 0.9), rgba(181, 216, 227, 0.7), rgba(231, 187, 204, 0.54), transparent);
        filter: blur(1px);
        animation: fulfilledCheckGlint 2.6s ease-in-out infinite;
      }

      .fulfilled-check svg {
        position: relative;
        z-index: 2;
        width: 78px;
        height: 78px;
        filter: drop-shadow(0 8px 18px rgba(41, 58, 49, 0.18));
      }

      .fulfilled-glint-ray {
        position: absolute;
        left: 50%;
        top: 50%;
        z-index: -1;
        width: 58px;
        height: 1.8px;
        border-radius: 999px;
        background: linear-gradient(90deg, rgba(255, 254, 250, 0), rgba(218, 191, 133, 0.78), rgba(210, 229, 235, 0));
        transform: rotate(var(--r)) translateX(74px);
        transform-origin: 0 50%;
        animation: fulfilledRayOut 2.5s ease-in-out infinite;
      }

      .fulfilled-mini-spark {
        position: absolute;
        right: -8px;
        bottom: 5px;
        z-index: 5;
        width: 44px;
        height: 44px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        background: rgba(255, 254, 250, 0.88);
        color: var(--green-deep);
        box-shadow:
          inset 0 0 0 1px rgba(82, 107, 95, 0.12),
          0 14px 28px rgba(82, 107, 95, 0.16);
      }

      .fulfilled-mini-spark svg {
        width: 27px;
        height: 27px;
        filter: none;
      }

      .celebration-mark::before {
        content: "";
        position: absolute;
        inset: -2px;
        border-radius: inherit;
        padding: 1px;
        background: conic-gradient(from 120deg, rgba(255, 254, 250, 0), rgba(182, 138, 75, 0.42), rgba(126, 165, 151, 0.34), rgba(231, 197, 211, 0.3), rgba(255, 254, 250, 0));
        mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        mask-composite: exclude;
        animation: starRim 5.6s linear infinite;
      }

      .celebration-mark::after {
        content: "";
        position: absolute;
        inset: 16px;
        border-radius: 50%;
        background: linear-gradient(110deg, transparent 20%, rgba(255, 254, 250, 0.72), transparent 52%);
        transform: translateX(-42%) rotate(-18deg);
        animation: markGlimmer 3.6s ease-in-out infinite;
      }

      .celebration-mark svg {
        position: relative;
        z-index: 1;
        width: 78px;
        height: 78px;
        filter: drop-shadow(0 8px 18px rgba(82, 107, 95, 0.18));
      }

      @keyframes nobleBurst {
        0%, 100% { transform: scale(0.92) rotate(0deg); opacity: 0.28; }
        42% { transform: scale(1.04) rotate(12deg); opacity: 0.68; }
        70% { transform: scale(1) rotate(18deg); opacity: 0.42; }
      }

      @keyframes lensWalk {
        0%, 100% { transform: translateX(-34%) rotate(-7deg); opacity: 0.18; }
        42% { transform: translateX(12%) rotate(-7deg); opacity: 0.78; }
        68% { transform: translateX(26%) rotate(-7deg); opacity: 0.26; }
      }

      @keyframes auraPulse {
        0%, 100% { transform: scale(0.92) rotate(0deg); opacity: 0.34; }
        52% { transform: scale(1.06) rotate(38deg); opacity: 0.76; }
      }

      @keyframes shimmerDot {
        0%, 100% { transform: scale(0.62) rotate(0deg); opacity: 0; }
        35% { transform: scale(1.08) rotate(22deg); opacity: 0.95; }
        62% { transform: scale(0.86) rotate(44deg); opacity: 0.38; }
      }

      @keyframes starRim {
        to { transform: rotate(360deg); }
      }

      @keyframes markGlimmer {
        0%, 100% { transform: translateX(-44%) rotate(-18deg); opacity: 0; }
        48% { transform: translateX(34%) rotate(-18deg); opacity: 0.84; }
      }

      @keyframes fulfilledCheckGlint {
        0%, 24% { transform: translateX(0) rotate(28deg); opacity: 0; }
        44%, 58% { opacity: 0.95; }
        78%, 100% { transform: translateX(210px) rotate(28deg); opacity: 0; }
      }

      @keyframes fulfilledRayOut {
        0%, 100% { opacity: 0; transform: rotate(var(--r)) translateX(42px) scaleX(0.62); }
        42%, 58% { opacity: 0.85; transform: rotate(var(--r)) translateX(76px) scaleX(1); }
      }

      .thanks-card {
        display: grid;
        gap: 10px;
        padding: 14px;
        border: 1px solid rgba(82, 107, 95, 0.13);
        border-radius: 24px;
        background: rgba(255, 254, 250, 0.76);
        box-shadow: var(--soft-shadow);
      }

      .gratitude-list {
        display: grid;
        gap: 8px;
      }

      .gratitude-list button {
        min-height: 44px;
        padding: 0 12px;
        border-radius: 16px;
        background: var(--green-soft);
        color: var(--green-deep);
        text-align: left;
        font-weight: 760;
      }

      .profile-head {
        display: grid;
        grid-template-columns: 136px 1fr;
        align-items: center;
        gap: 18px;
        padding: 18px;
        border: 1px solid var(--line);
        border-radius: 28px;
        background:
          radial-gradient(circle at 14% 18%, rgba(182, 199, 189, 0.28), transparent 34%),
          rgba(255, 254, 250, 0.72);
        box-shadow: var(--soft-shadow);
      }

      .avatar {
        width: 136px;
        height: 148px;
        position: relative;
        display: grid;
        place-items: end center;
        overflow: hidden;
        border-radius: 30px;
        background:
          linear-gradient(180deg, rgba(255, 254, 250, 0.05), rgba(30, 38, 34, 0.18)),
          url("https://images.unsplash.com/photo-1534528741775-53994a69daeb?auto=format&fit=crop&w=360&q=82");
        background-position: center;
        background-size: cover;
        color: var(--green-deep);
        border: 1px solid rgba(82, 107, 95, 0.16);
        box-shadow: 0 16px 34px rgba(82, 107, 95, 0.13);
      }

      .avatar::after {
        content: "+";
        position: absolute;
        right: 8px;
        bottom: 8px;
        width: 30px;
        height: 30px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        background: var(--green-deep);
        color: #fffefa;
        font-size: 17px;
        font-weight: 760;
      }

      .profile-meta {
        display: grid;
        gap: 6px;
      }

      .profile-meta h2 {
        font-size: 25px;
      }

      .profile-meta .lead {
        margin: 0;
      }

      .privacy-status {
        display: grid;
        gap: 10px;
        margin-top: 14px;
        padding: 14px;
        border: 1px solid var(--line);
        border-radius: 24px;
        background: rgba(255, 254, 250, 0.74);
        box-shadow: var(--soft-shadow);
      }

      .privacy-status strong {
        color: var(--green-deep);
      }

      .privacy-status span {
        color: var(--muted);
        font-size: 12px;
        line-height: 1.35;
      }

      .stat-card {
        padding: 14px;
        border: 1px solid var(--line);
        border-radius: 22px;
        background: rgba(255, 254, 250, 0.72);
        box-shadow: var(--soft-shadow);
      }

      .meter {
        height: 9px;
        overflow: hidden;
        margin-top: 10px;
        border-radius: 999px;
        background: rgba(82, 107, 95, 0.11);
      }

      .meter span {
        display: block;
        height: 100%;
        border-radius: inherit;
        background: linear-gradient(90deg, var(--green-deep), var(--gold));
      }

      .settings-row {
        min-height: 58px;
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 14px;
        align-items: center;
        padding: 13px 0;
        border-bottom: 1px solid rgba(82, 107, 95, 0.1);
      }

      .settings-section {
        display: block;
        margin: 18px 0 8px;
        color: var(--green-deep);
        font-size: 12px;
        font-weight: 800;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

      .settings-row strong {
        display: block;
        font-size: 14px;
      }

      .settings-row span {
        display: block;
        margin-top: 3px;
        color: var(--muted);
        font-size: 12px;
        line-height: 1.25;
      }

      .toggle {
        width: 48px;
        height: 28px;
        position: relative;
        border-radius: 999px;
        background: var(--green-soft);
      }

      .toggle::after {
        content: "";
        position: absolute;
        top: 4px;
        right: 4px;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: var(--green-deep);
      }

      .state-bars {
        display: grid;
        gap: 12px;
        margin-top: 14px;
      }

      .state-bar {
        display: grid;
        grid-template-columns: 92px 1fr 32px;
        gap: 10px;
        align-items: center;
        color: var(--muted);
        font-size: 12px;
        font-weight: 650;
      }

      .state-bar i {
        height: 10px;
        overflow: hidden;
        border-radius: 999px;
        background: rgba(82, 107, 95, 0.11);
      }

      .state-bar i::before {
        content: "";
        display: block;
        width: var(--value);
        height: 100%;
        border-radius: inherit;
        background: var(--green-deep);
      }

      .toast {
        position: absolute;
        left: 18px;
        right: 18px;
        top: 76px;
        z-index: 30;
        display: none;
        padding: 12px 14px;
        border: 1px solid rgba(82, 107, 95, 0.14);
        border-radius: 18px;
        background: rgba(255, 254, 250, 0.94);
        color: var(--green-deep);
        box-shadow: var(--soft-shadow);
        font-size: 13px;
        font-weight: 720;
      }

      .toast.active { display: block; }

      @media (max-width: 560px) {
        .app { padding: 0; }
        .phone {
          width: 100%;
          height: 100dvh;
          min-height: 100dvh;
          border: 0;
          border-radius: 0;
          box-shadow: none;
        }
        .screen { padding-top: max(14px, env(safe-area-inset-top)); }
        .screen.auth { padding-bottom: max(18px, env(safe-area-inset-bottom)); }
      }

      @media (min-width: 900px) and (min-height: 680px) {
        .desktop-app { display: grid; }
        .phone { display: none; }
      }

      @media (max-width: 1180px) and (min-width: 900px) {
        .desktop-app {
          grid-template-columns: 210px minmax(0, 1fr);
        }

        .desktop-side {
          display: none;
        }

        .desktop-board {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
      }