:root {
      --sky: #0f66d0;
      --pool: #15b7ee;
      --pool-soft: #b8efff;
      --leaf: #2f9e44;
      --palm: #70bf44;
      --flower: #d93a78;
      --sun: #f0b34a;
      --stone: #f5ede1;
      --sand: #e8dcc8;
      --text: #17324d;
      --muted: #4e6980;
      --card: rgba(255, 255, 255, 0.9);
      --border: rgba(255,255,255,0.65);
      --shadow: 0 18px 45px rgba(15, 102, 208, 0.18);
    }

    * { box-sizing: border-box; }

    body {
      margin: 0;
      font-family: Arial, Helvetica, sans-serif;
      color: var(--text);
      min-height: 100vh;
      background:
        radial-gradient(circle at top left, rgba(240, 179, 74, 0.30), transparent 24%),
        radial-gradient(circle at top center, rgba(217, 58, 120, 0.18), transparent 26%),
        radial-gradient(circle at top right, rgba(47, 158, 68, 0.18), transparent 24%),
        linear-gradient(180deg, #0d67d1 0%, #1db9ef 42%, #dff7ff 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
      overflow-x: hidden;
    }

    .floating-shape {
      position: fixed;
      border-radius: 999px;
      filter: blur(8px);
      opacity: 0.5;
      animation: float 7s ease-in-out infinite;
      pointer-events: none;
      z-index: 0;
    }

    .shape-1 { width:130px;height:130px;background:rgba(217,58,120,.22);top:40px;left:40px; }
    .shape-2 { width:180px;height:180px;background:rgba(47,158,68,.20);right:35px;top:100px;animation-delay:1.5s; }
    .shape-3 { width:160px;height:160px;background:rgba(240,179,74,.20);left:10%;bottom:40px;animation-delay:.8s; }

    @keyframes float {
      0%,100%{transform:translateY(0) translateX(0)}
      50%{transform:translateY(-18px) translateX(8px)}
    }

    .card {
      position: relative;
      z-index: 1;
      width: 100%;
      max-width: 780px;
      background: var(--card);
      border-radius: 34px;
      padding: 34px;
      box-shadow: var(--shadow);
      border: 1px solid var(--border);
      backdrop-filter: blur(14px);
      text-align: center;
      overflow: hidden;
    }

    .card::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0));
      pointer-events: none;
    }

    .logo-wrap {
      position: relative;
      z-index: 1;
      margin: 0 auto 14px;
      width: fit-content;
      border-radius: 26px;
      padding: 10px 14px;
    }

    .logo-wrap img {
      width: min(100%, 300px);
      height: auto;
      border-radius: 18px;
    }

    .badge {
      display:inline-block;
      margin-bottom:14px;
      padding:10px 18px;
      border-radius:999px;
      font-size:.9rem;
      font-weight:bold;
      color:#fff;
      background:linear-gradient(90deg,var(--leaf),var(--sky),var(--pool));
      box-shadow:0 10px 20px rgba(15,102,208,.22);
      animation:pulseBadge 2s infinite;
      position: relative;
      z-index: 1;
    }

    @keyframes pulseBadge {
      0%,100%{transform:scale(1)}
      50%{transform:scale(1.03)}
    }

    h1 {
      margin: 0 0 10px;
      font-size: 2.2rem;
      color: #10375f;
      position: relative;
      z-index: 1;
    }

    .subtitle {
      margin: 0 auto 26px;
      max-width: 620px;
      color: var(--muted);
      font-size: 1.04rem;
      line-height: 1.6;
      position: relative;
      z-index: 1;
    }

    .panel {
      position: relative;
      z-index: 1;
      background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(240,250,255,.84));
      border: 1px solid rgba(255,255,255,.85);
      border-radius: 28px;
      padding: 24px;
      box-shadow: 0 14px 30px rgba(15,23,42,.06);
    }

    .panel-title {
      margin: 0 0 16px;
      font-size: 1.14rem;
      font-weight: bold;
      text-align: left;
      color: #14466e;
    }

    .faces {
      display: grid;
      grid-template-columns: repeat(5, minmax(80px,1fr));
      gap: 14px;
      margin-bottom: 24px;
    }

    .face-btn {
      border: none;
      border-radius: 24px;
      padding: 16px 10px;
      cursor: pointer;
      box-shadow: 0 10px 22px rgba(15,23,42,.08);
      transition: transform .2s ease, box-shadow .2s ease, outline .2s ease;
      position: relative;
      overflow: hidden;
    }

    .face-btn::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(255,255,255,.25), rgba(255,255,255,0));
      pointer-events: none;
    }

    .face-btn:hover { transform: translateY(-6px) scale(1.03); box-shadow: 0 16px 26px rgba(15,23,42,.14); }
    .face-btn.active { transform: translateY(-4px) scale(1.04); outline: 4px solid rgba(16, 178, 233, 0.959); }

    .excellent { background: linear-gradient(180deg, #dff7e7, #a8ebba); }
    .good { background: linear-gradient(180deg, #e9f9d8, #c9ef98); }
    .regular { background: linear-gradient(180deg, #fff1c9, #ffd77d); }
    .bad { background: linear-gradient(180deg, #ffdbe8, #f7a5c2); }
    .terrible { background: linear-gradient(180deg, #ffe5dc, #ffc3a7); }

    .emoji { font-size: 2.5rem; display: block; margin-bottom: 6px; animation: bounceEmoji 2.6s infinite; }
    .face-btn:nth-child(2) .emoji { animation-delay: .12s; }
    .face-btn:nth-child(3) .emoji { animation-delay: .24s; }
    .face-btn:nth-child(4) .emoji { animation-delay: .36s; }
    .face-btn:nth-child(5) .emoji { animation-delay: .48s; }

    @keyframes bounceEmoji {
      0%,100%{transform:translateY(0)}
      20%{transform:translateY(-4px)}
      40%{transform:translateY(0)}
    }

    .label { font-size: .95rem; font-weight: bold; color: #153656; }

    form { margin-top: 10px; }

    .field { text-align: left; margin-bottom: 14px; }

    .field label {
      display: block;
      margin-bottom: 7px;
      font-weight: bold;
      font-size: .95rem;
      color: #14466e;
    }

    .field input,
    .field textarea {
      width: 100%;
      border: 2px solid rgba(132, 194, 231, 0.55);
      border-radius: 18px;
      padding: 13px 14px;
      font-size: .96rem;
      outline: none;
      background: rgba(255,255,255,.98);
      transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
    }

    .field input:focus,
    .field textarea:focus {
      border-color: var(--sky);
      box-shadow: 0 0 0 5px rgba(21,183,238,.15);
      transform: scale(1.01);
    }

    .field textarea { min-height: 118px; resize: vertical; }

    .actions { display: flex; justify-content: center; margin-top: 18px; }

    .btn-primary {
      border: none;
      border-radius: 20px;
      padding: 14px 26px;
      cursor: pointer;
      font-weight: bold;
      font-size: 1rem;
      color: #fff;
      background: linear-gradient(90deg, var(--leaf), var(--sky), var(--pool));
      box-shadow: 0 12px 26px rgba(15,102,208,.28);
      transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
    }

    .btn-primary:hover {
      transform: translateY(-3px) scale(1.02);
      box-shadow: 0 18px 32px rgba(15,102,208,.34);
    }

    .btn-primary:disabled {
      opacity: .6;
      cursor: not-allowed;
      transform: none;
      box-shadow: 0 12px 26px rgba(15,102,208,.18);
    }

    .overlay {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.45);
      backdrop-filter: blur(2px);
      opacity: 0;
      pointer-events: none;
      transition: opacity .25s ease;
      z-index: 9998;
    }

    .overlay.show {
      opacity: 1;
      pointer-events: all;
    }

    .popup-success {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(0.9);
      background: linear-gradient(90deg, var(--leaf), var(--sky));
      color: #fff;
      padding: 26px 40px;
      border-radius: 20px;
      font-size: 1.3rem;
      font-weight: bold;
      box-shadow: 0 25px 60px rgba(0,0,0,0.35);
      z-index: 9999;
      opacity: 0;
      pointer-events: none;
      transition: all .35s ease;
      text-align: center;
      width: calc(100% - 32px);
      max-width: 420px;
    }

    .popup-success.show {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1);
    }

    .captcha-popup {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(0.9);
      width: calc(100% - 32px);
      max-width: 430px;
      background: #fff;
      border-radius: 24px;
      padding: 26px 22px 22px;
      box-shadow: 0 25px 60px rgba(0,0,0,0.35);
      z-index: 10000;
      opacity: 0;
      pointer-events: none;
      transition: all .35s ease;
      text-align: center;
    }

    .captcha-popup.show {
      opacity: 1;
      pointer-events: all;
      transform: translate(-50%, -50%) scale(1);
    }

    .captcha-popup h3 {
      margin: 0 0 10px;
      color: #14466e;
      font-size: 1.3rem;
    }

    .captcha-popup p {
      margin: 0 0 18px;
      color: var(--muted);
      line-height: 1.5;
      font-size: .98rem;
    }

    .captcha-box {
      display: flex;
      justify-content: center;
      margin-bottom: 16px;
      min-height: 70px;
    }

    .captcha-close {
      border: none;
      border-radius: 14px;
      padding: 10px 18px;
      cursor: pointer;
      font-weight: bold;
      color: #14466e;
      background: rgba(21,183,238,.12);
    }

    .list {
      margin-top: 18px;
      text-align: left;
      background: rgba(255,255,255,.72);
      border: 1px dashed rgba(15,102,208,.28);
      border-radius: 18px;
      padding: 14px;
      font-size: .93rem;
      display: none;
      animation: fadeInUp .35s ease;
      position: relative;
      z-index: 1;
    }

    .list pre { margin: 8px 0 0; white-space: pre-wrap; font-family: Consolas, monospace; font-size: .85rem; }

    @keyframes fadeInUp {
      from { opacity: 0; transform: translateY(12px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @media (max-width: 640px) {
      .faces { grid-template-columns: repeat(2, minmax(120px,1fr)); }
      h1 { font-size: 1.8rem; }
      .card { padding: 22px 16px; }
      .logo-wrap img { width: 240px; }
      .popup-success,
      .captcha-popup { max-width: calc(100% - 24px); }
    }