:root {
    --ink: #2b2530;
    --ink-soft: #6b6172;
    --paper: #fbf6f0;
    --panel: #ffffff;
    --rose: #c9526b;
    --rose-deep: #a23b52;
    --gold: #d9a441;
    --line: #e7ddd2;
    --radius: 14px;
    --shadow: 0 10px 30px rgba(43, 37, 48, 0.08)
  }
  
  * {
    box-sizing: border-box
  }
  
  html,
  body {
    margin: 0;
    padding: 0
  }
  
  body {
    background: var(--ink);
    color: var(--ink);
    font-family: "Iowan Old Style", "Palatino Linotype", "Georgia", serif;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
    position: relative;
    overflow-x: hidden
  }
  
  .bg-scene {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden
  }
  
  .bg-scene video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    object-fit: cover;
    filter: saturate(1.05) brightness(0.75)
  }
  
  .bg-scene .fallback {
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, #241b28, #3a2233 35%, #5a2c3d 65%, #241b28);
    background-size: 300% 300%;
    animation: drift 22s ease-in-out infinite
  }
  
  @keyframes drift {
    0% {
      background-position: 0% 50%
    }
  
    50% {
      background-position: 100% 50%
    }
  
    100% {
      background-position: 0% 50%
    }
  }
  
  .bg-scene::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 40%, rgba(0, 0, 0, 0) 0%, rgba(20, 14, 20, 0.55) 75%)
  }
  
  .frame {
    width: 100%;
    max-width: 520px;
    position: relative;
    z-index: 1
  }

    .frame{
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .6s ease, transform .6s ease;
  }
  .frame.reveal{
    opacity: 1;
    transform: translateY(0);
  }
  
  .tagline {
    text-align: center;
    color: #f3e6ea;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 0.85rem;
    letter-spacing: 0.3px;
    margin: 16px 0 0;
    opacity: 0.85
  }
  
  .progress {
    display: flex;
    gap: 6px;
    margin-bottom: 28px
  }
  
  .progress span {
    flex: 1;
    height: 3px;
    background: var(--line);
    border-radius: 2px;
    overflow: hidden;
    position: relative
  }
  
  .progress span::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--rose);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s ease
  }
  
  .progress span.done::after {
    transform: scaleX(1)
  }
  
  .card {
    background: var(--panel);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    border: 1px solid var(--line);
    padding: 36px 30px;
    position: relative;
    overflow: hidden
  }
  
  .screen {
    display: none
  }
  
  .screen.active {
    display: block;
    animation: rise 0.45s ease
  }
  
  @keyframes rise {
    from {
      opacity: 0;
      transform: translateY(10px)
    }
  
    to {
      opacity: 1;
      transform: translateY(0)
    }
  }
  
  .visual {
    width: 100%;
    height: 250px;
    border-radius: 10px;
    margin-bottom: 22px;
    background: linear-gradient(135deg, #f1cdd6, #e8b6c2 40%, #d9a441 130%);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden
  }
  
  .visual::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.5), transparent 45%), radial-gradient(circle at 75% 70%, rgba(162, 59, 82, 0.35), transparent 50%)
  }
  
  .visual .glyph {
    position: absolute;
    right: 18px;
    bottom: 14px;
    font-size: 38px;
    opacity: 0.85
  }
  
  h1 {
    font-size: 1.5rem;
    line-height: 1.3;
    margin: 0 0 6px;
    font-weight: 600;
    letter-spacing: 0.2px
  }
  
  .sub {
    color: var(--ink-soft);
    font-size: 0.95rem;
    margin: 0 0 22px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif
  }
  
  .options {
    display: flex;
    flex-direction: column;
    gap: 10px
  }
  
  .opt {
    text-align: left;
    padding: 14px 16px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: #fffdfb;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 0.98rem;
    color: var(--ink);
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.1s ease
  }
  
  .opt:hover {
    border-color: var(--rose);
    background: #fff7f8
  }
  
  .opt:active {
    transform: scale(0.99)
  }
  
  .opt.picked {
    border-color: var(--rose-deep);
    background: #fbe9ec
  }
  
  .photo-cards {
    display: flex;
    flex-direction: column;
    gap: 14px
  }
  
  .photo-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 0;
    background: #fffdfb;
    cursor: pointer;
    text-align: left;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    overflow: hidden;
    transition: border-color 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease
  }
  
  .photo-card:hover {
    border-color: var(--rose);
    box-shadow: 0 6px 16px rgba(43, 37, 48, 0.08)
  }
  
  .photo-card:active {
    transform: scale(0.99)
  }
  
  .photo-card.picked {
    border-color: var(--rose-deep);
    box-shadow: 0 0 0 2px rgba(162, 59, 82, 0.15)
  }
  
  .photo-card .thumb {
    width: 100%;
    height: 250px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    color: #fff;
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  
  .photo-card .thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.28) 100%)
  }
  
  .photo-card .info {
    display: flex;
    flex-direction: column;
    padding: 12px 16px 14px
  }
  
  .photo-card .label {
    font-weight: 600;
    font-size: 1.02rem;
    color: var(--ink)
  }
  
  .photo-card .desc {
    font-size: 0.82rem;
    color: var(--ink-soft);
    margin-top: 3px
  }
  
  .mock-chat{
    border:1px solid var(--line);
    border-radius:12px;
    padding:16px;
    margin-bottom:20px;
    background:#fffefc;
    min-height:140px;
  }
  .chat-state{
    display:none;
    opacity:0;
    transition:opacity .4s ease;
  }
  .chat-state.show{
    display:block;
    opacity:1;
  }
  .profile-state.hide{
    display:none;
  }
  .like-btn{
    margin-top:14px;
    width:100%;
    padding:12px;
    border:1px solid var(--rose-deep);
    border-radius:10px;
    background:#fff;
    color:var(--rose-deep);
    font-family:-apple-system,BlinkMacSystemFont,sans-serif;
    font-size:.95rem;
    font-weight:600;
    cursor:pointer;
    transition:background .2s ease, color .2s ease;
  }
  .like-btn:hover{
    background:var(--rose-deep);
    color:#fff;
  }
  
  .mock-profile {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px
  }
  
  .mock-avatar {
    width:46px; 
    height:46px; 
    border-radius:50%;
    background:linear-gradient(135deg,var(--gold),var(--rose));
    background-size:cover;
    background-position:center;
    flex-shrink:0;
  }
  
  .mock-name {
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 600;
    font-size: 0.95rem
  }
  
  .mock-tag {
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.8rem;
    color: var(--ink-soft)
  }
  
  .mock-bubble {
    background: #f4e9dc;
    border-radius: 12px 12px 12px 2px;
    padding: 10px 14px;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.88rem;
    max-width: 80%;
    display: inline-block
  }
  
  .reaction {
    margin-top: 18px;
    padding: 14px 16px;
    border-radius: 10px;
    background: #f6efe6;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.92rem;
    color: var(--ink);
    display: none
  }
  
  .reaction.show {
    display: block;
    animation: rise 0.35s ease
  }

  .anketa-photo{
    width:100%;
    height:250px;
    border-radius:10px;
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
  }
  .hide-initial{
    display:none;
  }
  .hide-initial.show{
    display:flex;
  }
  
  .summary {
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 16px 18px;
    margin-bottom: 20px;
    background: #fffdfb;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.9rem;
    min-height: 118px
  }
  
  .summary div {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px dashed var(--line);
    opacity: 0;
    transform: translateX(-8px);
    transition: opacity 0.4s ease, transform 0.4s ease
  }
  
  .summary div.revealed {
    opacity: 1;
    transform: translateX(0)
  }
  
  .summary div:last-child {
    border-bottom: none
  }
  
  .summary .label {
    color: var(--ink-soft)
  }
  
  .summary .value {
    font-weight: 600
  }
  
  .assembling {
    text-align: center;
    color: var(--ink-soft);
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.85rem;
    margin: -8px 0 18px;
    min-height: 1.2em
  }
  
  .locked-row {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.5s ease, transform 0.5s ease
  }
  
  .locked-row.show {
    opacity: 1;
    transform: translateY(0)
  }
  
  .locked-card{
    flex:1;
    height:90px;
    border-radius:10px;
    background:linear-gradient(135deg,#e9c6ce,#d9a441);
    background-size:cover;
    background-position:center;
    position:relative;
    overflow:hidden;
    filter:blur(3px) brightness(.9);
  }
  
  .locked-card .lock {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #fff;
    background: rgba(30, 20, 25, 0.25);
    filter: none
  }
  
  .cta {
    width: 100%;
    padding: 15px 18px;
    border: none;
    border-radius: 10px;
    background: var(--rose-deep);
    color: #fff;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, opacity 0.3s ease
  }
  
  .cta:hover {
    background: #8c2f44
  }
  
  .cta[disabled] {
    opacity: 0.4;
    cursor: default;
    pointer-events: none
  }
  
  .cta-note {
    text-align: center;
    color: var(--ink-soft);
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.78rem;
    margin-top: 10px
  }
  
  .back {
    background: none;
    border: none;
    color: var(--ink-soft);
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.82rem;
    cursor: pointer;
    margin-top: 18px;
    padding: 0
  }
  
  .back:hover {
    color: var(--rose-deep)
  }
  
  @media (prefers-reduced-motion: reduce) {
    .screen.active {
      animation: none
    }
  
    .reaction.show {
      animation: none
    }
  
    .bg-scene .fallback {
      animation: none
    }
  }