/* =====================================================================
   КОМПОНЕНТЫ — Слой 2/3 дизайн-системы платформы гостя.
   Извлечено из index.html без изменений правил. Все цвета/отступы
   тут и в новых экранах берутся из tokens.css через var(--…).
   Новый компонент добавляй СЮДА, не в разметку экрана.
   Гайд: design/DESIGN_SYSTEM.md · Каталог: /static/design-system.html
   ===================================================================== */

    * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
    html, body { margin: 0; height: 100%; }
    body {
      background: var(--bg);
      color: var(--ink);
      font-family: 'Nunito', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
      display: flex; flex-direction: column; min-height: 100vh;
      position: relative;
    }
    /* войлочная фактура фоном, приглушена кремовой вуалью */
    body::before {
      content: ""; position: fixed; inset: 0; z-index: 0;
      background: url(/static/plush/bg.jpg) center / cover no-repeat;
      opacity: .45; pointer-events: none;
    }
    .appbar, main, .tabbar, .toast-pop { position: relative; z-index: 1; }

    .appbar {
      padding: calc(16px + env(safe-area-inset-top)) 18px 12px;
      display: flex; align-items: center; gap: 12px;
    }
    .appbar .logo {
      width: 46px; height: 46px; object-fit: contain; flex: none;
      filter: drop-shadow(0 4px 8px rgba(101, 78, 53, .2));
    }
    .brand .name {
      font-family: 'Comfortaa', sans-serif; font-size: 17px;
      font-weight: 700; letter-spacing: .03em; color: var(--ink);
    }
    .brand .sub { margin-top: 2px; font-size: 12px; color: var(--pink-deep); letter-spacing: .04em; }

    main { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
    .panel { display: none; padding: 8px 16px 28px; animation: fade .22s ease; }
    .panel.active { display: block; }
    @keyframes fade { from { opacity: 0; transform: translateY(6px);} to { opacity: 1; transform: none; } }
    @media (prefers-reduced-motion: reduce){ .panel { animation: none; } }

    .icon { width: 24px; height: 24px; stroke: currentColor; fill: none;
      stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
    .screen-icon {
      display: block; width: 92px; height: 92px; object-fit: contain; margin: 6px auto 42px;
      filter: drop-shadow(0 8px 14px rgba(101, 78, 53, .2));
    }

    /* ---- приветственный экран ---- */
    .hello-title {
      font-family: 'Comfortaa', sans-serif; font-size: 24px; margin: 10px 0 4px; text-align: center;
    }
    .hello-sub { text-align: center; font-size: 12.5px; color: var(--ink-soft); margin: 0 0 18px; }
    .hello-list { display: grid; gap: 11px; }
    .hello-item {
      display: flex; align-items: center; gap: 14px; text-align: left;
      background: var(--card); border: 1px solid var(--line);
      border-radius: var(--radius); padding: 11px 14px;
      color: var(--ink); font-family: inherit; font-size: 13.5px; line-height: 1.4;
      cursor: pointer; width: 100%; box-shadow: var(--shadow);
      transition: transform .12s ease;
    }
    .hello-item:active { transform: scale(.98); }
    .hello-item img {
      flex: none; width: 58px; height: 58px; object-fit: contain;
      filter: drop-shadow(0 5px 9px rgba(101, 78, 53, .18));
    }
    .hello-item b { display: block; font-size: 15px; margin-bottom: 2px; }
    .hello-item span { color: var(--ink-soft); font-size: 12.5px; }

    .h2 { font-family: 'Comfortaa', sans-serif; font-size: 21px; margin: 8px 0 4px; }
    .sub { font-size: 12.5px; color: var(--ink-soft); margin: 0 0 16px; line-height: 1.5; }

    .label {
      font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
      color: var(--pink-deep); font-weight: 800; margin: 0 0 10px;
    }
    .about { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 9px; }
    .about li { position: relative; padding-left: 20px; font-size: 13.5px; line-height: 1.45; }
    .about li::before {
      content: ""; position: absolute; left: 3px; top: 7px; width: 7px; height: 7px;
      border-radius: 50%; background: var(--pink);
    }

    .social { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-bottom: 18px; }
    .soc {
      display: flex; align-items: center; justify-content: center;
      padding: 14px 6px 16px; border-radius: 999px;
      background: url(/static/plush/soc.webp) center / 100% 100% no-repeat;
      color: #A34A62; font-size: 13px; font-weight: 800;
      text-decoration: none; text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
      filter: drop-shadow(0 6px 10px rgba(101, 78, 53, .18));
      transition: transform .1s ease;
    }
    .soc:active { transform: scale(.96); }

    .btn {
      display: block; width: 100%; border: none; cursor: pointer;
      padding: 17px 16px 19px; border-radius: 999px;
      font-family: inherit; font-size: 14.5px; font-weight: 800;
      background: url(/static/plush/btn.webp) center / 100% 100% no-repeat;
      color: #FFFFFF; text-shadow: 0 1px 3px rgba(31, 58, 71, .5);
      filter: drop-shadow(0 9px 14px rgba(78, 146, 172, .32));
      transition: transform .1s ease;
    }
    .btn:active { transform: scale(.97); }
    .btn:disabled { opacity: .65; }

    /* обычная информационная плашка (результаты, статусы) */
    .gift {
      margin-top: 10px; padding: 12px 15px; border-radius: 18px;
      background: var(--card-soft);
      border: 1px solid var(--line);
      font-size: 12px; line-height: 1.5; color: var(--ink-soft);
      box-shadow: var(--shadow);
    }
    .gift b { color: var(--ink); font-size: 12.5px; }

    /* розовая войлочная подушка «Подарок гостю» */
    .gift-plush {
      margin-top: 14px; padding: 18px 26px 22px; border-radius: 999px;
      background: url(/static/plush/gift.webp) center / 100% 100% no-repeat;
      font-size: 12.5px; font-weight: 800; line-height: 1.5; color: #542C39;
      text-align: center;
      filter: drop-shadow(0 8px 12px rgba(160, 100, 120, .22));
    }
    .gift-plush b { color: #542C39; }

    /* корпоративный режим: обратная связь заказчику */
    /* иконка мельче обычной: форма длинная, всё должно помещаться в экран */
    #rvIcon.screen-icon { width: 64px; height: 64px; margin: 2px auto 16px; }
    .corp .field { min-height: 66px; }
    .anon-row { display: flex; align-items: center; gap: 10px; margin: 2px 0 14px;
      font-size: 13.5px; color: var(--ink-soft); cursor: pointer; }
    .anon-row input { width: 19px; height: 19px; accent-color: var(--accent-deep);
      flex: none; margin: 0; }
    .host-mini { display: flex; align-items: center; gap: 10px; margin-top: 16px;
      padding: 10px 13px; background: #fff; border: 1px solid #EFE3D0;
      border-radius: 18px; }
    .host-mini img { width: 36px; height: 36px; object-fit: contain; }
    .hm-txt { display: flex; flex-direction: column; line-height: 1.25; }
    .hm-txt b { font-size: 11px; color: #A08F7A; font-weight: 700; }
    .hm-txt span { font-size: 14px; color: var(--ink); font-weight: 800;
      font-family: 'Comfortaa', sans-serif; }
    .hm-soc { margin-left: auto; display: flex; gap: 6px; flex: none; }
    .hm-soc .soc { padding: 8px 13px 9px; font-size: 11.5px; }

    /* ---- формы ---- */
    .field {
      width: 100%; padding: 13px 15px; border-radius: 18px;
      border: 1px solid var(--line); background: var(--card);
      color: var(--ink); font-size: 14px; font-family: inherit;
      margin-bottom: 10px;
      box-shadow: inset 0 2px 5px rgba(101, 78, 53, .06);
    }
    .field::placeholder { color: #9C8768; }
    textarea.field { resize: none; min-height: 84px; }
    .score-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
    .score {
      width: calc((100% - 6px * 10) / 11); min-width: 26px; aspect-ratio: 1;
      border-radius: 10px; border: 1px solid var(--line);
      background: var(--card); color: var(--ink); font-family: inherit;
      font-size: 12.5px; font-weight: 700; cursor: pointer;
    }
    .score.active { background: var(--accent); color: var(--btn-ink); border-color: transparent; }
    .form-err { color: var(--pink-deep); font-size: 12px; margin: 0 0 10px; display: none; }
    .gift-done {
      text-align: center; padding: 28px 18px;
      background: linear-gradient(160deg, #FDF1F4, #F9E5EB);
      border: 1px solid #F0CDD8;
      border-radius: var(--radius); box-shadow: var(--shadow);
    }
    .gift-done h2 { font-family: 'Comfortaa', sans-serif; font-size: 20px; margin: 0 0 8px; color: var(--ink); }
    .gift-done p { margin: 0; font-size: 13.5px; color: var(--ink-soft); line-height: 1.55; }
    .gift-done b { color: var(--ink); }

    /* ---- квиз ---- */
    .qz-item {
      background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
      padding: 13px 14px 14px; margin-bottom: 12px; box-shadow: var(--shadow);
    }
    .qz-q { font-size: 14px; font-weight: 700; margin: 0 0 9px; }
    .qz-q em { font-style: normal; color: var(--pink-deep); margin-right: 7px; font-weight: 800; }
    .qz-item .field { margin-bottom: 0; background: var(--card-soft); }

    /* ---- стеклянная рамка-плеер (музыка) ---- */
    .player {
      border-radius: 28px; padding: 20px 18px 16px; margin: 6px 0 14px;
      background: rgba(255, 253, 246, .48);
      border: 1px solid rgba(255, 255, 255, .75);
      box-shadow: 0 14px 30px rgba(101, 78, 53, .16), inset 0 1px 0 rgba(255, 255, 255, .8);
      backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    }
    .player-head { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 14px; }
    .player-head img { width: 40px; height: 40px; object-fit: contain; }
    .player-head b { font-family: 'Comfortaa', sans-serif; font-size: 17px; }
    .player .field { background: rgba(255, 255, 255, .65); border-color: rgba(255, 255, 255, .9); }
    .pbar { height: 6px; border-radius: 99px; background: rgba(74, 58, 46, .14); margin: 14px 4px 6px; overflow: hidden; }
    .pfill { width: 34%; height: 100%; border-radius: 99px;
      background: linear-gradient(90deg, var(--accent), var(--pink)); }
    .ptimes { display: flex; justify-content: space-between; font-size: 11px; color: var(--ink-soft);
      padding: 0 4px; font-variant-numeric: tabular-nums; }
    .pctrl { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px 4px; }
    .pctrl .icon { width: 22px; height: 22px; stroke: var(--ink-soft); }
    .pplay { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
      background: linear-gradient(180deg, var(--accent-2), var(--accent));
      box-shadow: 0 8px 16px rgba(78, 146, 172, .3); }
    .pplay .icon { width: 22px; height: 22px; stroke: var(--btn-ink); fill: var(--btn-ink); }

    /* ---- заглушки ---- */
    .soon { text-align: center; padding: 40px 20px; color: var(--ink-soft); }
    .soon img { width: 84px; height: 84px; object-fit: contain; margin: 0 auto;
      filter: drop-shadow(0 8px 14px rgba(101, 78, 53, .2)); }
    .soon b { display: block; margin: 14px 0 4px; color: var(--ink); font-size: 15px; }
    .soon span { font-size: 12.5px; line-height: 1.5; }

    /* ---- нижние вкладки ---- */
    .tabbar {
      flex: none; display: grid; grid-template-columns: repeat(5, 1fr);
      background: rgba(255, 253, 246, .92); border-top: 1px solid var(--line);
      padding: 8px 6px calc(10px + env(safe-area-inset-bottom));
      backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    }
    .tab {
      background: none; border: none; cursor: pointer; font-family: inherit;
      display: flex; flex-direction: column; align-items: center; gap: 3px;
      color: var(--ink-soft); padding: 3px 2px;
    }
    .tab img { width: 34px; height: 34px; object-fit: contain; transition: transform .15s ease;
      filter: saturate(.55) opacity(.75); }
    .tab span { font-size: 9.5px; font-weight: 700; }
    .tab.active { color: var(--accent-deep); }
    .tab.active img { transform: scale(1.18); filter: none; }

    .toast-pop {
      position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%) translateY(16px);
      background: var(--ink); color: var(--bg); padding: 10px 18px; border-radius: 999px;
      font-size: 13px; font-weight: 700; opacity: 0; pointer-events: none;
      transition: all .25s ease; z-index: 30;
    }
    .toast-pop.show { opacity: 1; transform: translateX(-50%) translateY(0); }

    /* ---- skeleton-загрузка (мерцающие заглушки, пока грузятся данные) ---- */
    .skeleton { position: relative; overflow: hidden;
      background: var(--card-soft); border: 1px solid var(--line); border-radius: 14px; }
    .skeleton::after {
      content: ""; position: absolute; inset: 0; transform: translateX(-100%);
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
      animation: shimmer 1.2s ease infinite;
    }
    @keyframes shimmer { 100% { transform: translateX(100%); } }
    .skel-line { height: 16px; margin: 10px 0; }
    .skel-card { height: 64px; margin-bottom: 10px; }
    @media (prefers-reduced-motion: reduce){ .skeleton::after { animation: none; } }

    /* ---- мягкий пульс главного действия (медленный, деликатный) ---- */
    /* пульс на ::after, чтобы не конфликтовать с каскадом появления кнопки */
    .pulse-soft { position: relative; }
    .pulse-soft::after {
      content: ""; position: absolute; inset: 0; border-radius: inherit;
      pointer-events: none;
      animation: pulseSoft 3.6s ease-in-out infinite;
    }
    @keyframes pulseSoft {
      0%, 100% { box-shadow: 0 0 0 0 rgba(133, 199, 222, 0); }
      50%      { box-shadow: 0 0 0 7px rgba(133, 199, 222, .1); }
    }
    @media (prefers-reduced-motion: reduce){ .pulse-soft::after { animation: none; } }