:root {
        --color-bg-start: #E0F2F7;
        --color-bg-end: #CCEEF0;
        --color-primary: #38A3A5;
        --color-secondary: #8BCBCB;
        --color-accent: #FFC0CB;
        --color-text-dark: #2C3E50;
        --color-text-light: #5B7F8D;
        --color-text-subtle: #9BAAB5;
        --color-border: rgba(56, 163, 165, 0.3);
      }

      body {
        font-family: 'Montserrat', sans-serif;
        background: linear-gradient(135deg, var(--color-bg-start) 0%, var(--color-bg-end) 100%);
        background-attachment: fixed;
        color: var(--color-text-dark);
        margin: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        padding: 20px;
        box-sizing: border-box;
        overflow: hidden;
      }
      .container {
        background-color: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(15px);
        padding: 45px 55px;
        border-radius: 25px;
        box-shadow: 0 18px 40px rgba(0, 0, 0, 0.1);
        text-align: center;
        max-width: 750px;
        width: 100%;
        border: 1px solid var(--color-border);
        animation: slideInUp 0.8s ease-out forwards;
        position: relative;
        overflow: hidden;
      }
      .container::before {
          content: '';
          position: absolute;
          top: -20px; left: -20px;
          width: 80px; height: 80px;
          background-color: var(--color-accent);
          border-radius: 50%;
          opacity: 0.1;
          filter: blur(20px);
          animation: float1 8s infinite ease-in-out;
      }
      .container::after {
          content: '';
          position: absolute;
          bottom: -30px; right: -30px;
          width: 100px; height: 100px;
          background-color: var(--color-secondary);
          border-radius: 50%;
          opacity: 0.15;
          filter: blur(25px);
          animation: float2 10s infinite ease-in-out reverse;
      }

      @keyframes slideInUp {
        from { opacity: 0; transform: translateY(50px); }
        to { opacity: 1; transform: translateY(0); }
      }
      @keyframes float1 {
          0%, 100% { transform: translate(0, 0); }
          50% { transform: translate(30px, 30px); }
      }
      @keyframes float2 {
          0%, 100% { transform: translate(0, 0); }
          50% { transform: translate(-40px, -40px); }
      }

      h1 {
        font-size: 2.8em;
        margin-bottom: 30px;
        font-weight: 700;
        text-shadow: 1px 1px 3px rgba(0,0,0,0.08);
        background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        animation: gradientText 3s ease-in-out infinite alternate;
      }
      @keyframes gradientText {
          0% { background-position: 0% 50%; }
          100% { background-position: 100% 50%; }
      }

      p {
        font-size: 1.15em;
        line-height: 1.7;
        margin-bottom: 20px;
        color: var(--color-text-light);
      }
      .ip-address-display {
        background-color: rgba(255, 255, 255, 0.7);
        border-radius: 20px;
        padding: 25px 40px;
        margin: 35px auto;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 15px;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
        border: 1px solid rgba(var(--color-primary), 0.2);
        transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s ease;
        position: relative;
      }
      .ip-address-display:hover {
        transform: translateY(-8px);
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
      }
      @keyframes pulse {
          0% { transform: scale(1); }
          50% { transform: scale(1.02); }
          100% { transform: scale(1); }
      }
      .animated-pulse {
          animation: pulse 2s infinite ease-in-out;
      }

      .label {
        font-size: 1em;
        display: block;
        margin-bottom: 10px;
        font-weight: 400;
        color: var(--color-text-light);
        white-space: nowrap;
      }
      .ip-value {
        font-size: 3.5em;
        font-weight: 700;
        color: var(--color-primary);
        letter-spacing: 2px;
        text-shadow: 2px 2px 5px rgba(0,0,0,0.1);
      }

      /* --- Copy Button Styles --- */
      .copy-button {
          background-color: var(--color-primary);
          color: white;
          border: none;
          border-radius: 10px;
          padding: 12px 18px;
          cursor: pointer;
          display: flex;
          align-items: center;
          gap: 8px;
          font-family: 'Montserrat', sans-serif;
          font-weight: 600;
          font-size: 0.9em;
          transition: background-color 0.3s ease, transform 0.2s ease;
          position: relative;
          overflow: hidden;
          flex-shrink: 0;
      }
      .copy-button:hover {
          background-color: #2a7e80;
          transform: translateY(-2px);
      }
      .copy-button:active {
          transform: translateY(0);
      }
      .copy-icon {
          width: 20px;
          height: 20px;
      }
      .copied-feedback {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: var(--color-secondary);
          color: white;
          display: flex;
          align-items: center;
          justify-content: center;
          opacity: 0;
          transition: opacity 0.3s ease, transform 0.3s ease;
          transform: translateY(100%);
      }
      .copy-button.copied .copied-feedback {
          opacity: 1;
          transform: translateY(0);
      }
      .copy-button.copied .copy-icon,
      .copy-button.copied .copy-text {
          opacity: 0;
      }

      .user-agent-display {
        background-color: rgba(255, 255, 255, 0.6);
        border-radius: 15px;
        padding: 18px 30px;
        margin: 30px auto;
        font-size: 0.95em;
        color: var(--color-text-dark);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
        border: 1px solid rgba(var(--color-secondary), 0.2);
        transition: background-color 0.3s ease;
      }
      .user-agent-display:hover {
          background-color: rgba(255, 255, 255, 0.8);
      }
      .user-agent-value {
        font-weight: 600;
        display: block;
        margin-top: 8px;
        font-size: 1.05em;
        color: var(--color-secondary);
      }

      /* Animations Fade In with Delay */
      @keyframes fadeIn {
        from { opacity: 0; transform: translateY(20px); }
        to { opacity: 1; transform: translateY(0); }
      }
      .animated-fade-in {
        opacity: 0;
        animation: fadeIn 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
      }
      .delay-1 { animation-delay: 0.4s; }

      /* --- Media Queries for Responsive (Smaller Font Sizes) --- */
      @media (max-width: 768px) {
        .container {
          padding: 30px 25px;
          border-radius: 20px;
          max-width: 90%;
        }
        h1 {
          font-size: 1.6em;
          margin-bottom: 20px;
        }
        .ip-value {
          font-size: 1.8em;
          letter-spacing: 0.5px;
        }
        .ip-address-display {
          padding: 18px 25px;
          margin: 20px auto;
          flex-direction: column;
          gap: 10px;
        }
        .label {
          font-size: 0.75em;
          margin-bottom: 5px;
        }
        .copy-button {
          padding: 10px 15px;
          font-size: 0.8em;
        }
        .copy-icon {
          width: 18px;
          height: 18px;
        }
        .user-agent-display {
          padding: 12px 20px;
          margin: 20px auto;
          font-size: 0.7em;
        }
        .user-agent-value {
          font-size: 0.85em;
        }
        .container::before,
        .container::after {
          display: none;
        }
      }

      @media (max-width: 480px) {
        .container {
          padding: 20px 15px;
          border-radius: 15px;
        }
        h1 {
          font-size: 1.3em;
          margin-bottom: 15px;
        }
        .ip-value {
          font-size: 1.5em;
          letter-spacing: 0;
        }
        .ip-address-display {
          padding: 15px 15px;
          margin: 15px auto;
        }
        .label {
          font-size: 0.7em;
        }
        .copy-button {
          padding: 8px 12px;
          font-size: 0.75em;
        }
        .copy-icon {
          width: 16px;
          height: 16px;
        }
        .user-agent-display {
          padding: 10px 15px;
          font-size: 0.65em;
        }
        .user-agent-value {
          font-size: 0.8em;
        }
      }