:root {
      --accent: #dc3545;
      --muted: #6c757d;
    }

    body {
      font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
      background: linear-gradient(180deg, #f8fbff 0%, #eeeeee 100%);
      min-height: 100vh;
      display: flex;
      flex-direction: column;
    }
    
    .bg-watermark {
       position: fixed;
       top: 120px;
       right: 0;
       width: 100%;
       height: 400px;
       opacity: 0.4;
       pointer-events: none;
       background: url("https://res.cloudinary.com/tignetwork/image/upload/v1756797609/theindiangeographer/azadi-ka-amrit-mahotsav-seeklogo.svg") no-repeat;
       background-size: contain;
       background-position: center;
       z-index: -1;
    }

    header, footer {
      background: #fff;
      box-shadow: 0 2px 10px rgba(16,24,40,0.06);
      padding: .75rem 1rem;
    }

    .brand {
      height: 38px;
      width: auto;
    }

    main {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 2rem;
    }

    .card {
      border: 0;
      border-radius: 1rem;
      box-shadow: 0 10px 25px rgba(0,0,0,0.05);
      background: rgba(255,255,255,0.8);
      transition: transform .3s ease;
    }

    .card:hover {
      transform: translateY(-3px);
    }

    .hero {
      width: 150px;
      height: 150px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: linear-gradient(135deg, rgba(13,110,253,.15), rgba(13,110,253,.05));
      border: 2px solid var(--accent);
      transition: transform .3s ease;
    }

    .hero:hover {
      border: 2px dotted var(--accent);
    }

    .code {
      font-weight: 700;
      font-size: 3.25rem;
      letter-spacing: -0.02em;
      color: var(--accent);
    }

    .msg {
      font-size: 1.05rem;
      color: var(--muted);
    }

    .urlview {
      border: 2px dotted var(--accent);
      padding: 0.4rem;
      display: flex;             
      align-items: center;        
      justify-content: space-between;
    }

    .url-text {
      flex: 1;                  
      overflow-x: auto;          
      white-space: nowrap;       
      margin-right: 0.5rem;     
    }

    .copy-btn {
      background: transparent;
      cursor: pointer;
      transition: background-color 0.3s ease;
      border: none;
      outline: none;
    }

    .copy-btn:hover {
      background-color: var(--muted);
      color: #fff;
    }

    .copy-btn:active {
      background-color: #eeeeee;
      transform: translateY(1px);
    }

    .btn-ghost {
      border: 1px solid rgba(16,24,40,0.1);
      background: transparent;
    }

    .anime{
      animation: popIn .6s ease-out;
    }

    @keyframes popIn {
      from {transform: scale(0.8); opacity: 0;}
      to {transform: scale(1); opacity: 1;}
    }

    @media(max-width:540px){
      .code { font-size: 2.4rem; }
      .hero { width: 110px; height: 110px; }
    }

    /* Footer Info */
    .card-footer {
      border-top: 1px solid rgba(0,0,0,.05);
    }

    .info-block {
      transition: background .3s ease, transform .2s ease;
      padding: .35rem .5rem;
      border-radius: .5rem;
    }

    .info-block:hover {
      background: rgba(13,110,253,.05);
      transform: translateY(-2px);
    }