body { 
    font-family: Arial, sans-serif; 
    max-width: 800px; 
    margin: 50px auto; 
    padding: 20px; 
    min-height: 100vh;
    background: white;
    background-image: 
        radial-gradient(circle 600px at 0% 200px, #c7d2fe, transparent),
        radial-gradient(circle 600px at 100% 200px, #c7d2fe, transparent);
    position: relative;
}

h1 { text-align: center; margin-bottom: 30px; }

.logo { text-align: center; margin-bottom: 20px; }
.logo img { max-width: 200px; height: auto; }

.form-container { 
    border: 2px solid #ccc; 
    padding: 30px; 
    background: white; 
    border-radius: 8px;
    margin-bottom: 20px;
}

.form-group { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    gap: 15px;
}

.form-group label { 
    font-weight: bold; 
    white-space: nowrap;
}

input[type="text"] { 
    width: 200px; 
    padding: 8px; 
    border: 2px solid #333; 
    border-radius: 4px; 
}

button { 
    padding: 10px 30px; 
    background: #2563eb; 
    color: white; 
    border: none; 
    border-radius: 4px; 
    cursor: pointer; 
    font-weight: bold;
}

button:hover { background: #1d4ed8; }

.result { 
    border: 2px solid #ccc; 
    padding: 20px; 
    background: #e5e7eb; 
    border-radius: 8px; 
}

.error { color: red; margin-top: 15px; text-align: center; }

.status-active { color: green; font-weight: bold; }
.status-inactive { color: red; font-weight: bold; }

.copy-icon { 
    cursor: pointer; 
    margin-left: 8px; 
    color: #666; 
    user-select: none;
    position: relative;
    display: inline-flex;
    align-items: center;
}

.copy-icon:hover { opacity: 0.7; }
.copy-icon svg { width: 16px; height: 16px; }

.field-with-copy { display: flex; align-items: center; }

.tooltip { 
    position: absolute; 
    background: #333; 
    color: white; 
    padding: 4px 8px; 
    border-radius: 4px; 
    font-size: 12px; 
    top: -30px; 
    left: 50%; 
    transform: translateX(-50%); 
    opacity: 0; 
    transition: opacity 0.3s;
    pointer-events: none;
}

.tooltip.show { opacity: 1; }

.footer {
    text-align: center;
    margin-top: 40px;
    font-size: 14px;
    color: #000;
    font-weight: 500;
}

.footer a {
    color: #000;
    text-decoration: none;
    font-weight: 600;
}

.footer a:hover {
    color: #2563eb;
    text-decoration: underline;
}