/* Shared GPT recharge layout with a scoped green theme for Grok. */
body.grok-page {
    --primary: #15803d;
    --primary-hover: #166534;
    --primary-soft: #f0fdf4;
    --primary-glow: rgba(21, 128, 61, 0.18);
    --accent: #15803d;
    --accent-soft: #f0fdf4;
    --accent-glow: rgba(21, 128, 61, 0.18);
    --bg-page: #f4f8f5;
    --bg-dark: #f4f8f5;
    --glass-border: #e1e9e3;
    --border-strong: #c6d7ca;
    --divider: #edf3ee;
    --shadow-focus: 0 0 0 4px rgba(21, 128, 61, 0.14);
    background:
        radial-gradient(at 10% 0%, rgba(34, 197, 94, 0.12) 0, transparent 42%),
        radial-gradient(at 90% 8%, rgba(16, 185, 129, 0.09) 0, transparent 40%),
        linear-gradient(180deg, #edf8f0 0%, var(--bg-page) 38%, #f8fbf9 100%);
}
.grok-page .hero-eyebrow { background: rgba(21, 128, 61, 0.10); }
.grok-page .btn-primary { box-shadow: 0 1px 2px rgba(21, 128, 61, 0.12); }
.grok-page .tab-btn:not(.active):hover { background: rgba(21, 128, 61, 0.06); }
.grok-page .plan-card.highlight {
    border-color: #86efac;
    background: linear-gradient(180deg, #f0fdf4 0%, #ffffff 100%);
}
.grok-page .plan-confirmed {
    background: var(--primary-soft);
    border-color: #bbf7d0;
    color: #166534;
}
.grok-page .flow-badge.cdk_ok,
.grok-page .flow-badge.running {
    background: var(--primary-soft);
    border-color: #bbf7d0;
    color: var(--primary);
}
.grok-page .task-progress-bar { background: linear-gradient(90deg, var(--primary), #4ade80); }
.grok-page .task-progress-bar.error { background: linear-gradient(90deg, var(--error), #fb923c); }
.grok-page .feature-badge.feature-link:hover { border-color: #86efac; }
.grok-page .session-get-guide {
    color: #166534;
    background: #f0fdf4;
    border-color: #86efac;
    box-shadow: 0 3px 12px rgba(21, 128, 61, 0.10);
}
.grok-page .session-guide-copy span { color: #3f6e4d; }
.grok-page .session-guide-step,
.grok-page .session-get-action {
    background: var(--primary);
    border-color: var(--primary);
}
.grok-page .session-get-action:hover {
    background: var(--primary-hover);
    box-shadow: 0 4px 10px var(--primary-glow);
}
.grok-page .session-get-action:focus-visible { outline-color: rgba(21, 128, 61, 0.24); }
.grok-page [hidden] { display: none !important; }

.grok-page .status-message:not([hidden]) { display: block; }
.grok-page .status-message {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.grok-page .status-message.status-info {
    color: var(--text-secondary);
    background: var(--surface-soft);
    border: 1px solid var(--glass-border);
}
.grok-page .plan-showcase:empty { display: none; }
.grok-page .plan-tag { flex-shrink: 0; white-space: nowrap; }
.grok-page .grok-cookie-guide {
    padding: 12px 14px;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    color: var(--text-dim);
    font-size: 13px;
    line-height: 1.7;
}
.grok-page .grok-cookie-guide summary {
    color: var(--primary);
    cursor: pointer;
    font-weight: 600;
}
.grok-page .grok-cookie-guide p { margin: 10px 0 0; }
.grok-page .grok-query-result { margin-top: 16px; }
.grok-page .grok-query-result p {
    padding: 10px 0;
    color: var(--text-secondary);
    line-height: 1.6;
}