/* ===== Reset & Base ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: Tahoma, Arial, Helvetica, sans-serif; background: #f0f2f5; color: #1a1a2e; line-height: 1.6; display: flex; flex-direction: column; min-height: 100vh; font-weight: 400; }
a { text-decoration: none; color: inherit; }

/* ===== Navbar ===== */
.navbar { background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%); box-shadow: 0 4px 20px rgba(30,64,175,0.3); position: sticky; top: 0; z-index: 100; }
.nav-container { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; padding: 0 20px; height: 64px; }
.nav-brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.3rem; color: #fff; }
.nav-logo { width: 36px; height: 36px; border-radius: 8px; }
.nav-links { display: flex; gap: 6px; margin-left: 40px; }
.nav-link { padding: 8px 16px; border-radius: 8px; font-size: 0.9rem; color: rgba(255,255,255,0.85); transition: all 0.2s; display: flex; align-items: center; gap: 6px; }
.nav-link:hover { background: rgba(255,255,255,0.15); color: #fff; }
.nav-link.active { color: #fff; background: rgba(255,255,255,0.2); font-weight: 600; }
.nav-auth { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.user-badge { display: flex; align-items: center; gap: 6px; padding: 6px 14px; background: rgba(255,255,255,0.15); border-radius: 8px; font-size: 0.9rem; color: #fff; font-weight: 500; }

/* ===== Buttons ===== */
.btn { display: inline-flex; align-items: center; justify-content: center; padding: 10px 20px; border-radius: 7px; font-size: 0.9rem; font-weight: 600; border: none; cursor: pointer; transition: all 0.2s; gap: 6px; font-family: Tahoma, Arial, Helvetica, sans-serif; }
.btn:hover { opacity: 0.92; transform: translateY(-1px); }
.btn-primary { background: #28577a; color: #fff; }
.btn-success { background: #16746f; color: #fff; }
.btn-purple { background: #465a7e; color: #fff; }
.btn-secondary { background: #475569; color: #fff; }
.btn-outline { background: #fff; border: 2px solid #d1d5db; color: #4a5568; }
.btn-outline:hover { border-color: #1e40af; color: #1e40af; }
.btn-lg { padding: 14px 40px; font-size: 1rem; border-radius: 10px; }
.btn-sm { padding: 6px 14px; font-size: 0.85rem; }
.btn-block { width: 100%; }
.btn-icon { padding: 8px; width: 36px; height: 36px; }
.btn-logout { color: #fca5a5; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.3); padding: 6px 14px; border-radius: 8px; font-size: 0.85rem; }
.btn-logout:hover { background: rgba(255,255,255,0.2); color: #fff; }
/* ===== Main Content ===== */
.main-content { max-width: 1160px; margin: 0 auto; padding: 32px 20px; flex: 1; width: 100%; }
.tool-panel h2 { font-size: 1.5rem; color: #1e40af; margin-bottom: 6px; display: flex; align-items: center; gap: 10px; }
.tool-subtitle { font-size: 0.9rem; color: #64748b; margin-bottom: 24px; }
.text-primary { color: #1e40af; }
.text-success { color: #16a34a; }
.text-purple { color: #7c3aed; }

/* ===== Tool Card ===== */
.tool-card { background: #fff; border-radius: 14px; padding: 28px; box-shadow: 0 2px 12px rgba(0,0,0,0.06); margin-bottom: 24px; border: 1px solid #e2e8f0; }
.tool-card label { display: block; font-weight: 600; font-size: 0.95rem; color: #2d3748; margin-bottom: 12px; }
.tool-card textarea {
    width: 100%;
    min-height: 260px;
    padding: 16px;
    font-size: 0.95rem;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    resize: vertical;
    font-family: Consolas, "Courier New", monospace;
    line-height: 1.6;
    color: #2d3748;
}
.tool-card textarea:focus { outline: none; border-color: #1e40af; box-shadow: 0 0 0 3px rgba(30,64,175,0.1); }
.tool-card textarea::placeholder { color: #94a3b8; }
.tool-actions { display: flex; align-items: center; gap: 16px; margin-top: 16px; }
.tool-hint { font-size: 0.85rem; color: #64748b; }
.checkbox-left { display: flex; align-items: center; gap: 10px; margin: 18px 0; }
.checkbox-left input[type="checkbox"] { width: 18px; height: 18px; accent-color: #1e40af; cursor: pointer; }
.checkbox-left label { font-size: 0.95rem; color: #4a5568; cursor: pointer; }
.tool-btn-center { text-align: center; margin: 20px 0; }

/* ===== Result Area ===== */
.result-area { margin-top: 20px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 16px; }
.result-area pre { white-space: pre-wrap; word-break: break-all; font-size: 0.9rem; max-height: 400px; overflow-y: auto; margin-bottom: 12px; line-height: 1.6; }

/* ===== Info Box ===== */
.info-box { background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 14px; padding: 24px; margin-top: 24px; }
.info-box h4 { font-size: 0.95rem; color: #1e40af; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.info-box ol { padding-left: 20px; }
.info-box li { padding: 4px 0; font-size: 0.9rem; color: #3b82f6; }
.info-box code { background: #e2e8f0; padding: 2px 8px; border-radius: 4px; font-size: 0.85rem; }
.info-purple { background: #faf5ff; border-color: #e9d5ff; }
.info-purple h4 { color: #7c3aed; }
.legend-item { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 0.9rem; }
.legend-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.legend-green { background: #16a34a; }
.legend-blue { background: #1e40af; }
.legend-red { background: #dc2626; }

/* ===== Hero ===== */
.hero { text-align: center; padding: 60px 20px; background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%); color: #fff; border-radius: 16px; margin-bottom: 40px; }
.hero h1 { font-size: 2.2rem; margin-bottom: 12px; font-weight: 700; }

/* ===== Pricing ===== */
.section-title { text-align: center; font-size: 1.6rem; margin-bottom: 32px; color: #1e40af; font-weight: 700; }
.pricing-grid { display: flex; gap: 24px; justify-content: center; margin-bottom: 60px; }
.pricing-card { background: #fff; border-radius: 16px; padding: 32px 24px; flex: 1; min-width: 260px; box-shadow: 0 4px 16px rgba(0,0,0,0.08); position: relative; transition: transform 0.2s; text-align: center; }
.pricing-card:hover { transform: translateY(-4px); }
.pricing-card.featured { border: 2px solid #1e40af; }
.plan-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: #1e40af; color: #fff; padding: 4px 16px; border-radius: 12px; font-size: 0.75rem; font-weight: 700; }
.plan-header { text-align: center; margin-bottom: 20px; }
.plan-header h3 { font-size: 1.3rem; margin: 8px 0; font-weight: 700; }
.price { font-size: 2.2rem; font-weight: 800; color: #24324a; font-family: Tahoma, Arial, Helvetica, sans-serif; letter-spacing: 0; }
.price span { font-size: 0.9rem; font-weight: 400; color: #64748b; }
.plan-features { list-style: none; margin-bottom: 24px; text-align: left; padding: 0; }
.plan-features li { padding: 8px 0; font-size: 0.9rem; color: #334155; }
.pricing-btn-center { text-align: center; margin-top: 28px; }

/* ===== Features ===== */
.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 40px; }
.feature-card { background: #fff; border-radius: 12px; padding: 32px; text-align: center; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
.feature-card i { font-size: 2.5rem; color: #1e40af; margin-bottom: 16px; }
.feature-card h3 { margin-bottom: 8px; color: #1e40af; }
.feature-card p { font-size: 0.9rem; color: #64748b; }

/* ===== Auth Pages ===== */
.auth-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%); padding-top: 80px; }
.auth-container { max-width: 440px; width: 100%; padding: 20px; }
.auth-back { display: block; text-align: center; margin-bottom: 20px; color: #475569; font-size: 0.9rem; font-weight: 500; }
.auth-back:hover { color: #1e40af; }
.auth-card { background: #fff; border-radius: 20px; padding: 40px; box-shadow: 0 8px 40px rgba(0,0,0,0.1); }
.auth-card h2 { text-align: center; margin-bottom: 28px; color: #1e40af; font-size: 1.6rem; font-weight: 700; }
.form-group { margin-bottom: 16px; }
.form-group label { display: block; margin-bottom: 6px; font-weight: 600; font-size: 0.85rem; color: #475569; }
.form-group input {
    width: 100% !important;
    padding: 14px 18px !important;
    font-size: 0.95rem !important;
    border: 2px solid #e2e8f0;
    border-radius: 7px;
    font-family: Tahoma, Arial, Helvetica, sans-serif;
}
.form-group input:focus { outline: none; border-color: #1e40af; box-shadow: 0 0 0 3px rgba(30,64,175,0.1); }
.auth-btn-center { text-align: center; margin: 20px 0; }
.auth-switch { text-align: center; margin-top: 20px; font-size: 0.9rem; color: #64748b; }
.auth-link-blue { color: #1e40af; font-weight: 600; }
.auth-link-blue:hover { color: #1e3a8a; }

/* ===== Account Page ===== */
.account-page { max-width: 1160px; margin: 0 auto; padding: 32px 20px; }
.account-grid { display: flex; gap: 24px; }
.account-left { flex: 1; min-width: 0; }
.account-right { width: 480px; flex-shrink: 0; }
.card { background: #fff; border-radius: 14px; padding: 24px; box-shadow: 0 2px 12px rgba(0,0,0,0.06); margin-bottom: 24px; border: 1px solid #e2e8f0; }
.card h3 { font-size: 1.05rem; margin-bottom: 16px; color: #1e40af; display: flex; align-items: center; gap: 8px; font-weight: 700; }
.account-type-display { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.account-type-badge { padding: 6px 18px; border-radius: 20px; font-weight: 700; font-size: 0.9rem; }
.badge-free { background: #e2e8f0; color: #475569; }
.badge-vip { background: #e0f2fe; color: #075985; }
.badge-business { background: #dbeafe; color: #1e40af; }
.account-expiry { font-size: 0.85rem; color: #64748b; }
.usage-table-inner { width: 100%; border-collapse: collapse; }
.usage-table-inner th { text-align: left; font-size: 0.8rem; color: #64748b; padding: 8px 0; border-bottom: 2px solid #f1f5f9; }
.usage-table-inner td { padding: 10px 0; font-size: 0.9rem; border-bottom: 1px solid #f1f5f9; }
.text-muted { color: #94a3b8; font-size: 0.8rem; }
.upgrade-buttons { display: flex; gap: 10px; flex-wrap: wrap; }
.upgrade-buttons .btn { flex: 1; min-width: 120px; padding: 10px 14px; font-size: 0.85rem; }
.flex-1 { flex: 1; }

/* Add-On Grid */
.addon-grid { display: flex; gap: 12px; }
.addon-card { flex: 1; background: #eef3f8; border: 2px solid #b8c8d9; border-radius: 8px; padding: 16px 12px; text-align: center; cursor: pointer; transition: all 0.2s; position: relative; }
.addon-card:hover { border-color: #28577a; background: #e3edf6; transform: translateY(-2px); }
.addon-qty { font-size: 0.98rem; font-weight: 800; color: #263b56; }
.addon-label { font-size: 0.75rem; color: #64748b; margin: 4px 0; }
.addon-price { font-size: 1.1rem; font-weight: 700; color: #1e293b; }
.addon-badge { position: absolute; top: -8px; right: 8px; background: #f59e0b; color: #fff; padding: 2px 8px; border-radius: 8px; font-size: 0.65rem; font-weight: 700; }

/* Balance */
.balance-amount { font-size: 1.8rem; font-weight: 800; color: #059669; text-align: center; margin: 8px 0; }

/* Deposit Form */
.deposit-form { margin-bottom: 12px; }
.form-row { display: flex; gap: 8px; }
.form-row input { flex: 1; padding: 10px; border: 2px solid #e2e8f0; border-radius: 8px; font-size: 0.9rem; }
.deposit-result { background: #f0fdf4; border: 1px solid #86efac; border-radius: 10px; padding: 16px; margin-top: 12px; }
.deposit-warning {
    margin-top: 10px;
    padding: 9px 10px;
    border-radius: 8px;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    color: #9a3412;
    font-size: 0.78rem;
    line-height: 1.45;
}
.deposit-warning.result-warning { margin-top: 12px; }
.highlight-amount { font-size: 1.2rem; font-weight: 800; color: #059669; }
.hidden { display: none !important; }

/* Tables */
.table-responsive { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.data-table th { background: #f8fafc; padding: 10px 12px; text-align: left; font-weight: 600; color: #475569; border-bottom: 2px solid #e2e8f0; }
.data-table td { padding: 8px 12px; border-bottom: 1px solid #f1f5f9; }
.pagination { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; }
.api-key-display { display: flex; align-items: center; gap: 8px; background: #f8fafc; padding: 10px; border-radius: 8px; word-break: break-all; font-family: Consolas, "Courier New", monospace; font-size: 0.85rem; }

/* Modal */
.modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.modal-overlay.hidden { display: none; }
.modal { background: #fff; border-radius: 16px; padding: 0; width: 90%; max-width: 520px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.2); }
.modal-header { padding: 20px 24px; border-bottom: 1px solid #f1f5f9; display: flex; align-items: center; justify-content: space-between; background: #f8fafc; }
.modal-header h3 { font-size: 1.05rem; color: #1e40af; font-weight: 700; }
.modal-close { background: none; border: none; font-size: 1.5rem; cursor: pointer; color: #94a3b8; padding: 0 4px; }
.modal-close:hover { color: #1e293b; }
.modal-body { padding: 24px; font-size: 0.9rem; color: #334155; line-height: 1.7; }
.modal-footer { padding: 16px 24px; border-top: 1px solid #f1f5f9; display: flex; justify-content: flex-end; gap: 10px; background: #f8fafc; }
.loading-state { text-align: center; padding: 60px; color: #64748b; }
.footer { background: #1e293b; color: #94a3b8; text-align: center; padding: 24px; margin-top: auto; font-size: 0.85rem; }

/* Change Password smaller font */
.change-password-form { padding-top: 12px; }
.update-pwd-btn { margin-top: 20px; display: block; width: 100%; padding: 12px; }
.change-password-form input,
#oldPassword, #newPassword, #confirmNewPassword {
    font-size: 0.85rem !important;
    padding: 10px 14px !important;
}

/* ===== Responsive ===== */
@media (max-width: 1100px) {
    .account-grid { flex-direction: column; }
    .account-right { width: 100%; }
    .pricing-grid { flex-direction: column; align-items: center; }
    .features-grid { grid-template-columns: 1fr; }
    .addon-grid { flex-direction: column; }
}
@media (max-width: 768px) {
    .nav-container { padding: 0 12px; }
    .nav-links { display: none; }
    .main-content { padding: 24px 16px; }
    .tool-card { padding: 20px; }
}

/* API Docs code blocks */
.code-block { background: #1e293b; color: #4ade80; padding: 12px 18px; border-radius: 8px; font-family: 'Courier New', monospace; font-size: 0.85rem; margin-bottom: 12px; overflow-x: auto; }
.code-primary { border-left: 4px solid #1e40af; }
.code-success { border-left: 4px solid #16a34a; }
.code-purple { border-left: 4px solid #7c3aed; }

/* ===== 2026 Product Console Redesign ===== */
:root {
    --ink-950: #080d1a;
    --ink-900: #0c1426;
    --ink-850: #101a30;
    --ink-800: #14213a;
    --ink-700: #1c2e4f;
    --line-dark: rgba(148, 163, 184, 0.16);
    --line-light: #dbe4f0;
    --text-main: #e8eef8;
    --text-soft: #9aa8bc;
    --text-dark: #172033;
    --blue: #28577a;
    --blue-2: #214866;
    --green: #21d19f;
    --amber: #f7b955;
    --red: #f87171;
    --violet: #a78bfa;
    --panel: rgba(16, 26, 48, 0.92);
    --panel-2: rgba(20, 33, 58, 0.82);
    --shadow-soft: 0 18px 45px rgba(2, 6, 23, 0.18);
    --shadow-deep: 0 24px 70px rgba(2, 6, 23, 0.38);
}

body {
    background:
        radial-gradient(circle at 18% 8%, rgba(53, 184, 255, 0.12), transparent 28rem),
        radial-gradient(circle at 86% 16%, rgba(33, 209, 159, 0.10), transparent 24rem),
        linear-gradient(180deg, #eef4fb 0%, #f7f9fc 42%, #eef3f8 100%);
    color: var(--text-dark);
    letter-spacing: 0;
}

.navbar {
    background: linear-gradient(135deg, rgba(245, 250, 255, 0.96), rgba(232, 242, 255, 0.94));
    border-bottom: 1px solid rgba(148, 163, 184, 0.22);
    box-shadow: 0 10px 28px rgba(37, 99, 235, 0.10);
    backdrop-filter: blur(16px);
}
.nav-container { max-width: 1280px; height: 68px; }
.nav-brand { color: #10213d; font-size: 1.2rem; letter-spacing: 0; }
.nav-logo { width: 40px; height: 40px; border-radius: 10px; box-shadow: 0 10px 22px rgba(99, 102, 241, 0.20); }
.nav-links { gap: 4px; margin-left: 34px; }
.nav-link {
    color: #52627a;
    border-radius: 8px;
    padding: 9px 13px;
}
.nav-link:hover, .nav-link.active {
    background: rgba(37, 99, 235, 0.08);
    color: #163d83;
}
.nav-link.active { box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.18); }
.nav-auth .btn-outline,
.nav-auth .btn-primary,
.btn-logout {
    border-radius: 8px !important;
}
.nav-auth > span {
    color: #334155 !important;
}
.nav-auth .btn-outline {
    background: rgba(255,255,255,0.72) !important;
    border-color: rgba(37, 99, 235, 0.18) !important;
    color: #1e3a8a !important;
}
.nav-auth .btn-outline:hover {
    background: #ffffff !important;
    color: #1d4ed8 !important;
}
.btn-logout {
    background: rgba(255,255,255,0.58) !important;
    border-color: rgba(248, 113, 113, 0.28) !important;
    color: #b45353 !important;
}
.btn-logout:hover {
    background: #fff1f2 !important;
    color: #991b1b !important;
}

.btn { border-radius: 8px; box-shadow: none; }
.btn-primary, .btn-success, .btn-purple {
    background: #28577a;
    color: #ffffff;
    font-weight: 800;
}
.btn-success { background: #16746f; }
.btn-purple { background: #465a7e; color: #fff; }
.btn-secondary { background: #27364f; color: #dbeafe; }
.btn-outline {
    background: rgba(255,255,255,0.88);
    border: 1px solid var(--line-light);
    color: #23314a;
}
.btn:hover { opacity: 1; transform: translateY(-1px); filter: brightness(1.04); }
.btn:disabled,
.kh-action-btn:disabled,
.kh-copy-btn:disabled {
    opacity: 0.62;
    cursor: not-allowed;
    filter: none;
    transform: none;
}

.main-content { max-width: 1220px; padding: 38px 22px; }
.hero {
    min-height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 0;
    margin: -38px calc(50% - 50vw) 34px;
    padding: 46px 24px 56px;
    color: #10213d;
    background:
        radial-gradient(circle at 16% 20%, rgba(53, 184, 255, 0.26), transparent 30rem),
        radial-gradient(circle at 82% 12%, rgba(33, 209, 159, 0.18), transparent 24rem),
        linear-gradient(135deg, #f8fbff 0%, #e7f1ff 48%, #eefcf8 100%);
}
.hero h1 {
    font-size: clamp(1.9rem, 3.2vw, 3.3rem);
    font-weight: 650;
    line-height: 1.05;
    max-width: 880px;
    margin: 0 auto;
}
.hero h1::after {
    content: "Fast activation tooling, metered API access, and account controls in one console.";
    display: block;
    max-width: 680px;
    margin: 12px auto 0;
    font-size: 0.9rem;
    font-weight: 500;
    color: #5a6b84;
}
.section-title {
    color: #172033;
    font-size: 1.35rem;
    font-weight: 650;
    text-align: left;
    margin-bottom: 18px;
}
.pricing-grid { gap: 18px; margin-bottom: 32px; align-items: stretch; }
.pricing-card,
.feature-card,
.card,
.tool-card,
.auth-card {
    border-radius: 8px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    box-shadow: var(--shadow-soft);
}
.pricing-card {
    text-align: left;
    padding: 20px 22px;
}
.pricing-card.featured {
    border-color: rgba(53, 184, 255, 0.72);
    box-shadow: 0 22px 60px rgba(37, 99, 235, 0.18);
}
.plan-badge { border-radius: 8px; background: var(--blue-2); }
.plan-header { text-align: left; }
.plan-header { margin-bottom: 14px; }
.plan-header h3 { font-size: 1.12rem; font-weight: 650; margin: 6px 0; }
.plan-header i { color: var(--blue-2); }
.price { color: #0f172a; font-size: 1.9rem; font-weight: 700; }
.price span { font-size: 0.78rem; }
.plan-features { margin-bottom: 16px; }
.plan-features li { color: #334155; border-top: 1px solid #eef2f7; padding: 6px 0; font-size: 0.82rem; }
.pricing-btn-center { margin-top: 18px; }
.features-grid { gap: 18px; }
.feature-card { text-align: left; padding: 20px 22px; }
.feature-card i { font-size: 1.35rem; margin-bottom: 10px; color: var(--blue-2); }
.feature-card h3 { color: #172033; font-weight: 650; }
.desktop-download-section { margin: 2px 0 42px; scroll-margin-top: 96px; }
.desktop-download-panel {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(420px, 0.9fr);
    gap: 24px;
    align-items: center;
    padding: 26px 28px;
    border-radius: 10px;
    border: 1px solid rgba(37, 99, 235, 0.16);
    background:
        linear-gradient(135deg, rgba(255,255,255,0.96), rgba(241, 248, 255, 0.94)),
        radial-gradient(circle at 8% 12%, rgba(53, 184, 255, 0.14), transparent 18rem);
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.09);
}
.desktop-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--blue-2);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0;
    margin-bottom: 10px;
}
.desktop-download-copy h2 {
    font-size: 1.55rem;
    color: #172033;
    margin-bottom: 8px;
}
.desktop-download-copy p {
    color: #52627a;
    max-width: 540px;
    line-height: 1.6;
}
.desktop-download-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.download-option {
    display: block;
    padding: 16px 16px;
    border-radius: 8px;
    border: 1px solid rgba(148, 163, 184, 0.32);
    background: #fff;
    color: #172033;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.download-option:hover {
    transform: translateY(-2px);
    border-color: rgba(37, 99, 235, 0.34);
    box-shadow: 0 14px 34px rgba(37, 99, 235, 0.12);
}
.download-option.recommended {
    background: linear-gradient(135deg, #1f5f89, #2878a6);
    color: #fff;
    border-color: transparent;
}
.download-title {
    display: block;
    font-size: 0.96rem;
    font-weight: 750;
    margin-bottom: 6px;
}
.download-meta {
    display: block;
    font-size: 0.74rem;
    line-height: 1.4;
    color: #64748b;
}
.download-option.recommended .download-meta { color: rgba(255,255,255,0.82); }

.footer {
    background: var(--ink-950);
    border-top: 1px solid var(--line-dark);
}

.auth-page {
    background:
        radial-gradient(circle at 18% 12%, rgba(53, 184, 255, 0.18), transparent 26rem),
        radial-gradient(circle at 84% 16%, rgba(33, 209, 159, 0.14), transparent 24rem),
        linear-gradient(135deg, #f8fbff 0%, #e7f1ff 52%, #eefcf8 100%);
    padding-top: 20px;
}
.auth-card {
    background: rgba(12, 20, 38, 0.88);
    color: var(--text-main);
    border-color: var(--line-dark);
    backdrop-filter: blur(14px);
}
.auth-card h2 { color: #fff; }
.auth-back, .auth-switch { color: #cbd5e1; }
.auth-link-blue { color: var(--blue); }
.form-group label { color: #cbd5e1; }
.form-group input {
    background: rgba(15, 23, 42, 0.74);
    border: 1px solid var(--line-dark);
    color: #fff;
}
.form-group input::placeholder { color: #718096; }

.account-grid { align-items: flex-start; }
.card {
    background: rgba(255,255,255,0.92);
}
.card h3 { color: #18243a; }
.account-type-badge { border-radius: 8px; }
.balance-amount { color: #059669; }
.addon-card { border-radius: 8px; }
.api-key-display,
.data-table th {
    background: #eef4fb;
}
.modal { border-radius: 8px; }
.modal-header, .modal-footer { background: #f4f7fb; }

/* Dark tool pages inspired by the reference, adapted for KeyToolPro. */
.tools-page {
    background:
        radial-gradient(circle at 18% 4%, rgba(53, 184, 255, 0.10), transparent 28rem),
        linear-gradient(180deg, var(--ink-950) 0%, var(--ink-900) 58%, #0a1020 100%);
    color: var(--text-main);
}
.tools-page .navbar { background: linear-gradient(135deg, rgba(245, 250, 255, 0.96), rgba(232, 242, 255, 0.94)); }
.tools-page .footer { background: #080d1a; }
.tools-shell {
    max-width: 1100px;
    padding-top: 34px;
}
.tools-shell .tool-panel h2 {
    color: #fff;
    margin: 0;
}
.tools-shell .tool-subtitle { color: var(--text-soft); margin: 6px 0 0; }
.tool-hero-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 18px;
    margin-bottom: 22px;
}
.tool-usage-bar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 14px;
}
.usage-pill {
    min-width: 180px;
    padding: 4px 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    text-align: left;
    box-shadow: none;
}
.usage-pill span { color: #57708f; font-size: 0.82rem; }
.usage-pill strong {
    display: inline-flex;
    gap: 4px;
    margin-top: 4px;
    color: #fff;
    font-size: 1.15rem;
}
.usage-pill strong span {
    color: #123c7c;
    font-size: 1.15rem;
    font-weight: 850;
}
.kh-panel,
.kh-info-block {
    background: rgba(12, 20, 38, 0.78);
    border: 1px solid var(--line-dark);
    border-radius: 8px;
    padding: 22px;
    box-shadow: var(--shadow-deep);
}

.cid-entry-copy {
    color: #64748b;
    font-size: 0.88rem;
    margin-bottom: 14px;
}
.cid-entry-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
.cid-entry-meta span {
    color: #28577a;
    font-weight: 650;
    font-size: 0.9rem;
}
.cid-records-page {
    max-width: 1320px;
}
.cid-records-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    margin-bottom: 18px;
}
.cid-total-pill {
    background: #eef3ff;
    color: #2f56b3;
    padding: 7px 12px;
    border-radius: 999px;
    font-size: 0.86rem;
    font-weight: 600;
}
.cid-search-form input {
    width: 260px;
    height: 38px;
    border: 1px solid #d9e2ef;
    border-radius: 7px;
    padding: 0 12px;
    font: inherit;
    color: #172033;
    background: #fff;
}
.cid-records-table-wrap {
    background: rgba(255,255,255,0.9);
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 8px;
    overflow-x: auto;
    box-shadow: var(--shadow-soft);
}
.cid-records-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.86rem;
}
.cid-records-table th {
    text-align: left;
    padding: 14px 16px;
    color: #334155;
    background: #f7f8fa;
    border-bottom: 1px solid #e5eaf1;
    font-weight: 650;
}
.cid-records-table td {
    padding: 14px 16px;
    color: #334155;
    border-bottom: 1px solid #e8edf4;
    vertical-align: top;
}
.cid-records-table th:first-child,
.cid-records-table td:first-child {
    width: 68%;
}
.cid-empty-cell {
    text-align: center;
    color: #94a3b8 !important;
    padding: 32px !important;
}
.cid-pages {
    display: flex;
    align-items: center;
    gap: 0;
    margin-top: 14px;
}
.cid-pages a,
.cid-pages span {
    min-width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #d9e2ef;
    background: #fff;
    color: #334155;
    font-size: 0.86rem;
}
.cid-pages a.active {
    background: #2563eb;
    color: #fff;
    border-color: #2563eb;
}
.kh-section-title {
    font-weight: 800;
    color: #f8fafc;
    margin-bottom: 12px;
}
.cid-input-row,
.cid-result-row {
    display: grid;
    grid-template-columns: 1fr 162px;
    gap: 0;
    margin-bottom: 12px;
}
.cid-result-row { grid-template-columns: 1fr 78px; gap: 10px; }
.kh-input,
.kh-textarea,
.cid-group-grid input {
    width: 100%;
    background: rgba(15, 23, 42, 0.72);
    border: 1px solid var(--line-dark);
    color: var(--text-main);
    border-radius: 8px;
    font: inherit;
}
.cid-input-row .kh-input,
.cid-input-row .kh-action-btn {
    border-radius: 0;
}
.cid-input-row .kh-input { border-radius: 8px 0 0 8px; }
.cid-input-row .kh-action-btn { border-radius: 0 8px 8px 0; }
.kh-input {
    height: 48px;
    padding: 0 16px;
}
.kh-input::placeholder,
.kh-textarea::placeholder { color: #7d8ba1; }
.kh-action-btn,
.kh-copy-btn {
    min-height: 42px;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    background: #28577a;
    color: #ffffff;
    font-weight: 800;
}
.kh-copy-btn { min-width: 72px; }
.kh-link-btn {
    background: transparent;
    color: #28577a;
    border: 1px solid rgba(40, 87, 122, 0.24);
    border-radius: 8px;
    padding: 8px 12px;
    cursor: pointer;
}
.kh-options-row,
.kh-stat-row,
.pid-stat-row,
.pid-control-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.kh-secondary-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.pid-control-row {
    display: grid;
    grid-template-columns: minmax(190px, 1fr) auto minmax(190px, 1fr);
    align-items: center;
}
.pid-control-row .kh-switch-line:last-child {
    justify-self: end;
}
.pid-action-cell {
    display: flex;
    justify-content: center;
}
.pid-action-cell .kh-action-btn {
    min-width: 180px;
    padding: 0 26px;
}
.pid-control-spacer {
    min-width: 190px;
}
.kh-stat-row,
.pid-stat-row {
    color: #dbeafe;
    margin-top: 12px;
    font-size: 0.84rem;
}
.kh-stat-row strong,
.pid-stat-row strong { color: var(--blue); }
.kh-switch-line {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #e2e8f0;
    font-weight: 700;
    font-size: 0.82rem;
}
.kh-switch input { display: none; }
.kh-switch i {
    display: block;
    width: 34px;
    height: 18px;
    border-radius: 999px;
    border: 1px solid #cbd7e6;
    background: #dbe4ef;
    position: relative;
    transition: background 0.18s, border-color 0.18s, box-shadow 0.18s;
}
.kh-switch i::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #64748b;
    transition: transform 0.18s, background 0.18s;
}
.kh-switch input:checked + i {
    background: #2563eb;
    border-color: #1d4ed8;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.16);
}
.kh-switch input:checked + i::after {
    transform: translateX(16px);
    background: #ffffff;
}
.kh-divider {
    height: 1px;
    background: var(--line-dark);
    margin: 32px 0 22px;
}
.cid-group-labels,
.cid-group-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 0;
}
.cid-group-labels span {
    text-align: center;
    color: #e2e8f0;
    font-weight: 800;
    padding: 4px 0 8px;
}
.cid-group-grid { margin-bottom: 24px; }
.cid-group-grid input {
    height: 40px;
    border-radius: 0;
    text-align: center;
}
.cid-group-grid input:first-child { border-radius: 8px 0 0 8px; }
.cid-group-grid input:last-child { border-radius: 0 8px 8px 0; }
.kh-textarea {
    min-height: 190px;
    padding: 16px;
    resize: vertical;
    line-height: 1.55;
}
.pid-input { min-height: 220px; margin-bottom: 16px; }
.pid-result { min-height: 280px; margin-top: 14px; }
.kh-info-block {
    margin-top: 26px;
    box-shadow: none;
}
.kh-info-block h4 {
    color: #fff;
    margin-bottom: 16px;
}
.error-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 36px;
    color: #d5deeb;
    line-height: 1.55;
    font-size: 0.78rem;
}
.tool-notes {
    margin: 0;
    padding-left: 22px;
    line-height: 1.7;
    font-size: 0.88rem;
}
.tool-notes li { margin-bottom: 10px; }
.kh-info-block h4 { font-size: 0.95rem; }
.code-blue { color: var(--blue); }
.code-red { color: var(--red); }
.code-green { color: var(--green); }

@media (max-width: 900px) {
    .nav-container { height: auto; min-height: 68px; flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px; }
    .nav-links { order: 3; width: 100%; margin: 10px 0 0; overflow-x: auto; display: flex; }
    .nav-auth { margin-left: auto; }
    .pricing-grid, .features-grid { grid-template-columns: 1fr; flex-direction: column; }
    .desktop-download-panel { grid-template-columns: 1fr; padding: 22px; }
    .desktop-download-options { grid-template-columns: 1fr; }
    .tool-hero-row { align-items: stretch; flex-direction: column; }
    .usage-pill { text-align: left; }
    .cid-input-row { grid-template-columns: 1fr; gap: 10px; }
    .cid-input-row .kh-input,
    .cid-input-row .kh-action-btn { border-radius: 8px; border: 1px solid var(--line-dark); }
    .cid-group-labels, .cid-group-grid { grid-template-columns: repeat(4, 1fr); }
    .error-grid { grid-template-columns: 1fr; }
}

/* ===== Time Based Theme Layer ===== */
body {
    background:
        radial-gradient(circle at 18% 8%, rgba(37, 99, 235, 0.10), transparent 28rem),
        radial-gradient(circle at 86% 16%, rgba(33, 209, 159, 0.10), transparent 24rem),
        linear-gradient(180deg, #f4f8fd 0%, #eef4fb 48%, #f8fafc 100%);
    color: var(--text-dark);
}

body.tools-page {
    background:
        radial-gradient(circle at 20% 6%, rgba(37, 99, 235, 0.10), transparent 26rem),
        linear-gradient(180deg, #f7fbff 0%, #edf4fb 100%);
    color: var(--text-dark);
}
body.tools-page .tools-shell .tool-panel h2,
body.tools-page .kh-section-title,
body.tools-page .kh-info-block h4 {
    color: #14213a;
}
body.tools-page .tools-shell .tool-subtitle,
body.tools-page .kh-input::placeholder,
body.tools-page .kh-textarea::placeholder {
    color: #6b7a90;
}
body.tools-page .kh-panel,
body.tools-page .kh-info-block {
    background: rgba(255,255,255,0.88);
    border-color: rgba(148, 163, 184, 0.28);
    box-shadow: var(--shadow-soft);
}
body.tools-page .usage-pill {
    background: transparent;
    border: 0;
    box-shadow: none;
}
body.tools-page .usage-pill strong,
body.tools-page .kh-switch-line,
body.tools-page .kh-stat-row,
body.tools-page .pid-stat-row,
body.tools-page .cid-group-labels span,
body.tools-page .error-grid {
    color: #1f2d44;
}
body.tools-page .tool-notes {
    color: #1f2d44;
}
body.tools-page .kh-input,
body.tools-page .kh-textarea,
body.tools-page .cid-group-grid input {
    background: #f8fbff;
    border-color: #d8e2ef;
    color: #172033;
}
body.tools-page .kh-input:disabled,
body.tools-page .kh-textarea:disabled {
    background: #eef3f8;
    color: #64748b;
}
body.tools-page .kh-divider { background: #d8e2ef; }
body.tools-page .kh-switch i {
    background: #e7eef7;
    border-color: #d8e2ef;
}
body.tools-page .kh-switch input:checked + i {
    background: #2563eb;
    border-color: #1d4ed8;
}
body.auth-page {
    background:
        radial-gradient(circle at 18% 12%, rgba(53, 184, 255, 0.18), transparent 26rem),
        radial-gradient(circle at 84% 16%, rgba(33, 209, 159, 0.14), transparent 24rem),
        linear-gradient(135deg, #f8fbff 0%, #e7f1ff 52%, #eefcf8 100%);
}
body.auth-page .auth-card {
    background: rgba(255,255,255,0.92);
    color: #172033;
    border-color: rgba(148, 163, 184, 0.26);
}
body.auth-page .auth-card h2,
body.auth-page .form-group label {
    color: #172033;
}
body.auth-page .auth-back,
body.auth-page .auth-switch {
    color: #334155;
}
body.auth-page .form-group input {
    background: #f8fbff;
    border-color: #d8e2ef;
    color: #172033;
}
@media (max-width: 900px) {
    .pid-control-row { grid-template-columns: 1fr; justify-items: stretch; }
    .pid-control-row .kh-switch-line,
    .pid-control-row .kh-switch-line:last-child,
    .pid-action-cell {
        justify-self: stretch;
        justify-content: center;
    }
    .pid-control-spacer { display: none; }
}