:root {
      --primary: #6d5dfc;
      --primary-hover: #5b4bea;
      --background: #f6f7fb;
      --card: #ffffff;
      --text: #18181d;
      --muted: #777782;
      --border: #e7e7ef;
      --green: #22b573;
      --green-dark: #1da366;

      --shadow:
        0 20px 60px rgba(34, 31, 70, 0.10);
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

body {
  min-height: 100vh;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  padding: 30px 20px;

  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  color: var(--text);

background: linear-gradient(118deg, #FFF5FA, #F5F8FF);
}
    .app {
      width: 100%;
      max-width: 620px;
    }

    .card {
      background: rgba(255, 255, 255, 0.97);

      border: 1px solid rgba(255, 255, 255, .8);

      border-radius: 28px;

      padding: 30px;

      box-shadow: var(--shadow);

      backdrop-filter: blur(20px);
    }

    /* HEADER */

    .header {
      display: flex;
      align-items: center;
      justify-content: space-between;

     
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 13px;
    }

    .brand-icon {
      width: 48px;
      height: 48px;

      display: grid;
      place-items: center;

      border-radius: 15px;

      font-size: 25px;

      background:
        linear-gradient(
          135deg,
          #6d5dfc,
          #958cff
        );

      box-shadow:
        0 8px 20px rgba(109, 93, 252, .25);
    }

    .brand h1 {
      font-size: 20px;
      font-weight: 800;
      letter-spacing: -.5px;
    }

    .brand p {
      margin-top: 4px;

      font-size: 12px;
      color: var(--muted);
    }

    .title-en {
      font-size: 13px;
      font-weight: 600;
      color: var(--muted);
      text-align: right;
    }

    /* RESULT */

.result {
  position: relative;

  min-height: 205px;

  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: center;

  padding: 35px 30px;

  border-radius: 22px;

  overflow: hidden;

  background: #ffffff;

  border: 1px solid #e7e7ef;
}



    .main-emoji {
      position: relative;
      z-index: 1;

      min-height: 70px;

      display: flex;
      align-items: center;
      justify-content: center;

      font-size: 64px;

      line-height: 1;

      margin-bottom: 18px;

      transition: .25s ease;
    }

    .status {
      position: relative;
      z-index: 1;

      max-width: 500px;

      font-size: 18px;
      line-height: 1.5;

      font-weight: 700;

      text-align: center;
    }

    .emoji-result {
      font-size: 34px;

      letter-spacing: 0;

      line-height: 1.5;
    }

    /* FORMAT SWITCH */

    .format {
      display: flex;

      align-items: center;
      justify-content: space-between;

      margin-top: 22px;

      padding: 16px 18px;

      border: 1px solid var(--border);

      border-radius: 17px;

      background: white;
    }

    .format-info strong {
      display: block;

      font-size: 14px;
      font-weight: 750;
    }

    .format-info span {
      display: block;

      margin-top: 4px;

      font-size: 11px;
      color: var(--muted);
    }

    /* SWITCH */

    .switch {
      position: relative;

      width: 58px;
      height: 32px;

      flex-shrink: 0;
    }

    .switch input {
      display: none;
    }

    .slider {
      position: absolute;
      inset: 0;

      cursor: pointer;

      border-radius: 50px;

      background: #dedee7;

      transition: .25s ease;
    }

    .slider::before {
      content: "";

      position: absolute;

      width: 24px;
      height: 24px;

      left: 4px;
      top: 4px;

      border-radius: 50%;

      background: white;

      box-shadow:
        0 3px 7px rgba(0,0,0,.18);

      transition: .25s ease;
    }

    .switch input:checked + .slider {
      background: var(--primary);
    }

    .switch input:checked + .slider::before {
      transform: translateX(26px);
    }

    /* CONTROLS */

    .controls {
      display: grid;

      grid-template-columns: 1fr 1fr;

      gap: 14px;

      margin-top: 18px;
    }

    .control {
      position: relative;
    }

    .control label {
      display: block;

      margin-bottom: 7px;

      font-size: 11px;

      font-weight: 750;

      color: #5f5f69;
    }

    select {
      width: 100%;

      height: 48px;

      padding: 0 14px;

      border-radius: 13px;

      border: 1px solid var(--border);

      background: white;

      color: var(--text);

      font-size: 13px;

      font-weight: 600;

      outline: none;

      cursor: pointer;

      transition: .2s ease;
    }

    select:hover,
    select:focus {
      border-color: #bdb8ff;

      box-shadow:
        0 0 0 4px rgba(109,93,252,.08);
    }

    #emojiCountBox {
      display: none;
    }

    #emojiCountBox.show {
      display: block;
    }

    /* BUTTONS */

    .buttons {
      display: grid;

      grid-template-columns: 1.5fr 1fr 1fr;

      gap: 12px;

      margin-top: 20px;
    }

    button {
      height: 48px;

      border: none;

      border-radius: 13px;

      font-size: 13px;

      font-weight: 750;

      cursor: pointer;

      transition:
        transform .15s ease,
        box-shadow .15s ease,
        background .15s ease;
    }

    button:hover {
      transform: translateY(-2px);
    }

    button:active {
      transform: scale(.97);
    }

    .generate {
      color: white;

      background:
        linear-gradient(
          135deg,
          var(--primary),
          #8a80ff
        );

      box-shadow:
        0 8px 18px rgba(109,93,252,.22);
    }

    .generate:hover {
      background:
        linear-gradient(
          135deg,
          var(--primary-hover),
          #7d73f5
        );
    }

    .copy {
      color: #33333b;
      background: #f1f1f5;
    }

    .copy:hover {
      background: #e9e9ef;
    }

    .copy.success {
      color: white;
      background: var(--green);
    }

    .share {
      color: white;
      background: var(--green);
    }

    .share:hover {
      background: var(--green-dark);
    }

    .share.success {
      background: var(--primary);
    }

    /* FOOTER */

  .footer {
  width: 100%;
  max-width: 620px;
  margin-top: 5px;
  text-align: center;
}


.footer a {
    color: #ff6aa8;
    text-decoration: none;
    margin: 0 6px;
    font-size: 12px;
}


.footer a:hover {
    text-decoration: underline;
}


.footer span {
    color: #ccc;
}
    /* MOBILE */

    @media (max-width: 560px) {

      body {
        padding: 15px;
      }

      .card {
        padding: 22px;
        border-radius: 23px;
      }

  

      .brand-icon {
        width: 43px;
        height: 43px;
        font-size: 22px;
      }

      .brand h1 {
        font-size: 18px;
      }

      .result {
        min-height: 190px;
        padding: 30px 20px;
      }

      .main-emoji {
        font-size: 56px;
      }

      .status {
        font-size: 16px;
      }

      .emoji-result {
        font-size: 29px;
      }
    }

    @media (max-width: 430px) {

      .controls {
        grid-template-columns: 1fr;
      }

      .buttons {
        grid-template-columns: 1fr 1fr;
      }

      .generate {
        grid-column: 1 / -1;
      }

      .date {
        display: none;
      }

      .card {
        padding: 18px;
      }
    }
.ai-disclaimer 
{ max-width:450px;
     
    padding: 5px 20px; border-radius: 8px; color: #666; font-size: 11px; line-height: 1.5; text-align: center;} 


    .app h2 {
  margin: 0 0 8px;

  font-size: 20px;
  line-height: 1.3;
  font-weight: 700;

  color: var(--text);
  text-align: center;
}

.app h2 + p {
  max-width: 560px;
  margin: 0 auto 24px;

  font-size: 15px;
  line-height: 1.6;

  color: var(--muted);
  text-align: center;
}