:root {
    --bg-dark: #0d0f12;
    --card-bg: #161a22;
    --text-primary: #ffffff;
    --text-secondary: #94a3b8;
    
    --color-gold: radial-gradient(circle, #ffe066 0%, #f59e0b 50%, #78350f 100%);
    --color-crimson: radial-gradient(circle, #ff6b6b 0%, #dc2626 50%, #450a0a 100%);
    --color-blue: radial-gradient(circle, #38bdf8 0%, #0284c7 50%, #0c4a6e 100%);
    --color-grey: radial-gradient(circle, #cbd5e1 0%, #475569 50%, #0f172a 100%);
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Plus Jakarta Sans', sans-serif; }

body {
    background-color: var(--bg-dark); color: var(--text-primary);
    display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 20px;
}

.app-container {
    width: 100%; max-width: 450px; background: var(--card-bg);
    border-radius: 28px; padding: 30px 24px; display: flex; flex-direction: column; gap: 28px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); border: 1px solid rgba(255, 255, 255, 0.05);
}

header { text-align: center; }
.logo { font-size: 28px; font-weight: 800; letter-spacing: -0.5px; }
.logo span { color: #f59e0b; }
.tagline { font-size: 13px; color: var(--text-secondary); margin-top: 4px; }

.orb-container { display: flex; flex-direction: column; align-items: center; margin: 10px 0; }
.mitram-orb {
    width: 160px; height: 160px; border-radius: 50%; filter: blur(1px);
    animation: breathe 4s ease-in-out infinite alternate, morph 6s ease-in-out infinite alternate;
    transition: background 1s ease-in-out, box-shadow 1s ease-in-out;
}

.state-gold { background: var(--color-gold); box-shadow: 0 0 50px rgba(245, 158, 11, 0.4); }
.state-crimson { background: var(--color-crimson); box-shadow: 0 0 50px rgba(220, 38, 38, 0.4); }
.state-blue { background: var(--color-blue); box-shadow: 0 0 50px rgba(2, 132, 199, 0.4); }
.state-grey { background: var(--color-grey); box-shadow: 0 0 50px rgba(71, 85, 105, 0.3); }

.orb-vibe-text { margin-top: 16px; font-size: 14px; font-weight: 600; color: var(--text-secondary); }

.output-container { min-height: 120px; display: flex; flex-direction: column; gap: 16px; }
.free-text { font-size: 15px; line-height: 1.5; text-align: center; }
.gated-container { position: relative; background: rgba(0, 0, 0, 0.2); padding: 16px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.03); }
.lock-overlay { text-align: center; display: flex; flex-direction: column; gap: 12px; font-size: 14px; color: var(--text-secondary); }
.blurred-content { filter: blur(8px); user-select: none; pointer-events: none; }
.hidden { display: none !important; }

.input-container { display: flex; flex-direction: column; gap: 12px; }
textarea { width: 100%; height: 90px; background: #0d0f12; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 16px; padding: 14px; color: white; resize: none; font-size: 14px; outline: none; transition: border 0.2s; }
textarea:focus { border-color: #f59e0b; }
.cta-button { width: 100%; padding: 14px; border-radius: 14px; border: none; font-weight: 600; font-size: 15px; cursor: pointer; transition: transform 0.1s; }
.cta-button:active { transform: scale(0.98); }
.submit-btn { background: #f59e0b; color: #000; }
.primary-btn { background: #ffffff; color: #000; margin-top: 4px; }

@keyframes breathe { 0% { transform: scale(1); } 100% { transform: scale(1.06); } }
@keyframes morph { 0% { border-radius: 50% 50% 50% 50%; } 50% { border-radius: 45% 55% 48% 52%; } 100% { border-radius: 53% 47% 55% 45%; } }

/* SEO Footer & Legal Links */
.seo-footer {
    margin-top: 30px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center; font-size: 11px; color: var(--text-secondary); line-height: 1.6;
}
.legal-link {
    background: none; border: none; color: var(--text-secondary); text-decoration: underline;
    cursor: pointer; font-size: 11px; font-family: inherit; padding: 0 4px;
}
.legal-link:hover { color: var(--text-primary); }

/* Modal Pop-up Layout */
.modal {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(5px);
    display: flex; justify-content: center; align-items: center; z-index: 1000;
}
.modal-content {
    background: var(--card-bg); width: 90%; max-width: 500px; max-height: 80vh;
    padding: 30px; border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.1);
    overflow-y: auto; position: relative; color: var(--text-secondary); font-size: 13px; line-height: 1.6;
}
.modal-content h2 { color: var(--text-primary); margin-bottom: 15px; font-size: 20px; }
.modal-content p { margin-bottom: 12px; }
.modal-content strong { color: #f59e0b; }
.close-btn {
    position: absolute; top: 15px; right: 20px; font-size: 28px;
    color: var(--text-secondary); cursor: pointer;
}
.close-btn:hover { color: var(--text-primary); }