/*
 * ═══════════════════════════════════════════════════════════════
 *  OUTLOOK INBOX READER — Styles
 *  Dark blue aesthetic, matching that dongvanfb vibe.
 * ═══════════════════════════════════════════════════════════════
 */

/* ─── Reset & Base ─────────────────────────────────────────── */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* Core field — ink-black gallery base (nk.studio Minimal Spark) */
    --bg-deep:      #070b0a;
    --bg-surface:   #0a0f0e;
    --bg-card:      #0c1211;
    --bg-elevated:  #121917;
    --bg-input:     #0a0f0e;

    /* Accents — reserve the neon spark for highlights only */
    --accent-mint:    #00ffc2;   /* primary spark */
    --accent-cyan:    #20e7b7;   /* secondary aqua-mint */
    --accent-green:   #00ffc2;
    --accent-teal:    #20e7b7;
    --accent-orange:  #ffb454;
    --accent-red:     #ff5a6a;
    --accent-purple:  #b388ff;

    /* Text — soft warm white */
    --text-primary:   #fdfdf9;
    --text-secondary: #a7b0ac;
    --text-muted:     #78827d;

    /* Borders — thin and quiet; depth comes from contrast, not shadow */
    --border-subtle:  rgba(253, 253, 249, 0.10);
    --border-accent:  rgba(0, 255, 194, 0.30);

    /* Gradients kept minimal (spec: avoid heavy gradients) */
    --grad-primary:   linear-gradient(90deg, #00ffc2, #20e7b7);
    --grad-card:      linear-gradient(0deg, #0c1211, #0c1211);
    --grad-header:    linear-gradient(180deg, rgba(7, 11, 10, 0.85), rgba(7, 11, 10, 0.72));

    /* Elevation is flat — no shadow stacks, only a faint spark glow */
    --shadow-sm:      none;
    --shadow-md:      none;
    --shadow-lg:      none;
    --shadow-glow:    0 0 32px rgba(0, 255, 194, 0.10);

    /* Typography */
    --font-display:   'DM Sans', 'Inter', -apple-system, sans-serif;

    /* Softly geometric — 4/7/8/12; pills reserved for chips */
    --radius-sm: 4px;
    --radius-md: 7px;
    --radius-lg: 8px;
    --radius-pill: 9999px;
    --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

html {
    font-size: 15px;
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--bg-deep);
    color: var(--text-primary);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    /* Stop the off-canvas drawer (and any wide element) from making the whole
       page scroll sideways / zoom out on phones, which made inputs tiny and
       hard to tap ("gabisa diketik di HP"). */
    overflow-x: hidden;
    max-width: 100%;
}

/* Subtle background pattern */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background:
        radial-gradient(ellipse at 20% 50%, rgba(32, 231, 183, 0.03) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 20%, rgba(0, 255, 194, 0.03) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
}

/* Comet accent layer — same stacking level as the pattern above (behind
   .main's z-index: 1, behind .header's z-index: 100), drawn by comet-bg.js. */
#bg-layer {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

#comet-canvas {
    display: block;
    width: 100%;
    height: 100%;
}

/* ─── HEADER ───────────────────────────────────────────────── */
.header {
    background: var(--grad-header);
    border-bottom: 1px solid var(--border-subtle);
    padding: 0 2rem;
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(20px);
}

.header-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.brand-icon {
    display: flex;
    align-items: center;
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

.brand-name {
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-primary);
}

.brand-accent {
    background: var(--grad-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.nav-links {
    display: flex;
    gap: 0.5rem;
}

/* ─── LANGUAGE SWITCH (ID / EN) ────────────────────────────── */
.i18n-switch {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.i18n-btn {
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--text-secondary);
    background: transparent;
    border: 1px solid var(--border-subtle);
    border-radius: 20px;
    padding: 4px 11px;
    cursor: pointer;
    transition: var(--transition);
}

.i18n-btn:hover {
    color: var(--text-primary);
    border-color: var(--border-accent);
}

.i18n-btn.active {
    background: var(--accent-green);
    color: #05100d;
    border-color: var(--accent-green);
}

.nav-link {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-sm);
    transition: var(--transition);
}

.nav-link:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.05);
}

.nav-link.active {
    color: var(--accent-cyan);
    background: rgba(32, 231, 183, 0.08);
}

/* ─── MAIN ─────────────────────────────────────────────────── */
.main {
    flex: 1;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 2rem 1.5rem;
    position: relative;
    z-index: 1;
}

/* ─── SECTION LABEL ────────────────────────────────────────── */
.section-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--accent-green);
    color: #05100d;
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 6px 14px;
    border-radius: var(--radius-sm);
    margin-bottom: 1.25rem;
    box-shadow: 0 0 15px rgba(0, 255, 194, 0.2);
}

.section-label-icon {
    font-size: 1rem;
}

/* ─── CARD ─────────────────────────────────────────────────── */
.card {
    background: var(--grad-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    transition: var(--transition);
}

.card:hover {
    border-color: var(--border-accent);
    box-shadow: var(--shadow-md), var(--shadow-glow);
}

.card-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border-subtle);
}

.card-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}

.card-title-text {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* ─── MODE TOGGLES ─────────────────────────────────────────── */
.mode-toggles {
    display: flex;
    gap: 0.5rem;
}

.toggle-label {
    cursor: pointer;
    display: inline-flex;
}

.toggle-input {
    display: none;
}

.toggle-pill {
    font-size: 0.78rem;
    font-weight: 600;
    padding: 6px 16px;
    border-radius: 20px;
    transition: var(--transition);
    user-select: none;
    letter-spacing: 0.02em;
}

.graph-pill {
    background: rgba(32, 231, 183, 0.1);
    color: var(--accent-cyan);
    border: 1px solid rgba(32, 231, 183, 0.2);
}

.graph-pill.active {
    background: var(--accent-cyan);
    color: #05100d;
    border-color: var(--accent-cyan);
    box-shadow: 0 0 12px rgba(32, 231, 183, 0.3);
}

.oauth2-pill {
    background: rgba(0, 255, 194, 0.1);
    color: var(--accent-green);
    border: 1px solid rgba(0, 255, 194, 0.2);
}

.oauth2-pill.active {
    background: var(--accent-green);
    color: #05100d;
    border-color: var(--accent-green);
    box-shadow: 0 0 12px rgba(0, 255, 194, 0.3);
}

/* ─── CARD BODY ────────────────────────────────────────────── */
.card-body {
    padding: 1.5rem;
}

.credentials-textarea {
    width: 100%;
    min-height: 200px;
    max-height: 400px;
    background: var(--bg-input);
    color: var(--text-primary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 1rem;
    font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
    font-size: 0.85rem;
    line-height: 1.7;
    resize: vertical;
    transition: var(--transition);
    outline: none;
}

.credentials-textarea::placeholder {
    color: var(--text-muted);
    font-style: italic;
}

.credentials-textarea:focus {
    border-color: var(--accent-cyan);
    box-shadow: 0 0 0 3px rgba(32, 231, 183, 0.1);
}

.card-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 1rem;
}

.input-stats {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}

.stat-badge {
    font-size: 0.75rem;
    font-weight: 500;
    padding: 4px 12px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-secondary);
    border: 1px solid var(--border-subtle);
}

/* ─── BUTTONS ──────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: inherit;
    font-weight: 600;
    font-size: 0.9rem;
    border: none;
    border-radius: var(--radius-md);
    padding: 10px 24px;
    cursor: pointer;
    transition: var(--transition);
    outline: none;
    position: relative;
    overflow: hidden;
}

.btn:focus-visible {
    outline: 2px solid var(--accent-mint);
    outline-offset: 2px;
}

.btn-primary {
    background: var(--accent-green);
    color: #05100d;
    box-shadow: 0 4px 15px rgba(0, 255, 194, 0.25);
}

.btn-primary:hover {
    background: #00c96a;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0, 255, 194, 0.35);
}

.btn-primary:active {
    transform: translateY(0);
}

.btn-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.btn-icon {
    font-size: 1.1rem;
}

/* Spinner */
.spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(11, 26, 46, 0.3);
    border-top-color: #0b1a2e;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ─── STATUS BAR ───────────────────────────────────────────── */
.status-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    border-radius: var(--radius-md);
    margin-top: 1.25rem;
    font-size: 0.85rem;
    font-weight: 500;
    animation: slideUp 0.3s ease;
}

.status-bar.success {
    background: rgba(0, 255, 194, 0.1);
    border: 1px solid rgba(0, 255, 194, 0.2);
    color: var(--accent-green);
}

.status-bar.error {
    background: rgba(255, 82, 82, 0.1);
    border: 1px solid rgba(255, 82, 82, 0.2);
    color: var(--accent-red);
}

.status-bar.loading {
    background: rgba(32, 231, 183, 0.1);
    border: 1px solid rgba(32, 231, 183, 0.2);
    color: var(--accent-cyan);
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ─── RESULTS AREA ─────────────────────────────────────────── */
.results-area {
    margin-top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Account result block */
.account-result {
    background: var(--grad-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    overflow: hidden;
    animation: fadeIn 0.4s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
}

.account-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background: rgba(0, 0, 0, 0.15);
    border-bottom: 1px solid var(--border-subtle);
}

.account-email {
    font-weight: 600;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.account-email .email-icon {
    font-size: 1.1rem;
}

.account-status {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.account-status.ok {
    background: rgba(0, 255, 194, 0.15);
    color: var(--accent-green);
}

.account-status.fail {
    background: rgba(255, 82, 82, 0.15);
    color: var(--accent-red);
}

.account-error {
    padding: 1rem 1.25rem;
    color: var(--accent-red);
    font-size: 0.85rem;
}

/* ─── INBOX TABLE (dongvanfb style) ────────────────────────── */
.inbox-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.inbox-table thead {
    background: rgba(0, 0, 0, 0.25);
}

.inbox-table th {
    text-align: left;
    padding: 12px 16px;
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    border-bottom: 2px solid var(--border-subtle);
    white-space: nowrap;
}

.inbox-table td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-subtle);
    vertical-align: top;
    color: var(--text-primary);
    line-height: 1.5;
}

.inbox-table tbody tr {
    transition: var(--transition);
}

.inbox-table tbody tr:hover {
    background: rgba(32, 231, 183, 0.04);
}

.inbox-table tbody tr:last-child td {
    border-bottom: none;
}

/* Column widths */
.col-mail { min-width: 160px; }
.col-stt { width: 50px; text-align: center; }
.col-from { min-width: 150px; }
.col-time { width: 140px; white-space: nowrap; }
.col-content { min-width: 250px; }
.col-code { width: 80px; text-align: center; }

/* Mail column */
.mail-icon {
    margin-right: 6px;
    font-size: 0.9rem;
}

.mail-icon.unread {
    filter: brightness(1.5);
}

.mail-address {
    font-size: 0.82rem;
    color: var(--text-primary);
    word-break: break-all;
}

/* From column */
.col-from small {
    color: var(--text-muted);
    font-size: 0.75rem;
    display: block;
    margin-top: 2px;
}

/* Content column */
.col-content strong {
    color: var(--accent-teal);
    font-weight: 600;
}

.detail-link {
    display: inline-block;
    margin-left: 6px;
    color: var(--accent-green);
    text-decoration: none;
    font-size: 0.78rem;
    font-weight: 600;
    transition: var(--transition);
}

.detail-link:hover {
    color: #00ffc2;
    text-decoration: underline;
}

/* Code badge */
.code-badge {
    display: inline-block;
    background: rgba(0, 255, 194, 0.15);
    color: var(--accent-green);
    padding: 3px 10px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 0.85rem;
    font-family: 'Cascadia Code', 'Fira Code', monospace;
    letter-spacing: 0.05em;
}

/* Empty row */
.empty-row {
    text-align: center;
    padding: 2rem !important;
    color: var(--text-muted);
    font-style: italic;
}

.empty-title {
    font-size: 1rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.empty-hint {
    font-style: normal;
    font-size: 0.82rem;
    line-height: 1.6;
    color: var(--text-muted);
    max-width: 560px;
    margin: 0 auto;
}

/* Check Mail legend: what LIVE / DIE / UNKNOWN actually mean */
.check-legend {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 1.1rem 1.3rem;
    margin-bottom: 2rem;
}
.check-legend-item {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.55rem 0;
    color: var(--text-secondary);
    font-size: 0.84rem;
    line-height: 1.55;
}
.check-legend-item + .check-legend-item {
    border-top: 1px solid var(--border-subtle);
}
.cl-badge {
    flex-shrink: 0;
    min-width: 74px;
    text-align: center;
    padding: 3px 8px;
    border-radius: 5px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}
.cl-live { background: rgba(0, 255, 194, 0.14); color: var(--accent-green); }
.cl-die { background: rgba(255, 90, 106, 0.14); color: var(--accent-red); }
.cl-unknown { background: rgba(255, 180, 84, 0.14); color: var(--accent-orange); }

/* API usage dashboard (Check Key Usage) */
.usage-check-row {
    display: flex;
    gap: 0.7rem;
    flex-wrap: wrap;
    margin-bottom: 0.9rem;
}
.usage-key-input {
    flex: 1;
    min-width: 220px;
    background: var(--bg-input);
    border: 1px solid var(--border-subtle);
    border-radius: 7px;
    padding: 11px 12px;
    color: var(--text-primary);
    font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
    font-size: 0.85rem;
}
.usage-key-input:focus {
    outline: none;
    border-color: var(--border-accent);
}
.usage-error {
    color: var(--accent-red);
    font-size: 0.85rem;
    margin: 0 0 0.5rem;
}
.usage-result {
    border-top: 1px solid var(--border-subtle);
    padding-top: 1rem;
}
.usage-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.8rem;
}
.usage-item {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.8rem 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
}
.usage-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}
.usage-value {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text-primary);
    word-break: break-word;
}
#usageStatus { color: var(--accent-mint); }

/* Table scroll on mobile */
.account-result {
    overflow-x: auto;
}

/* ─── MODAL ────────────────────────────────────────────────── */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(6px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    animation: fadeInFast 0.2s ease;
}

@keyframes fadeInFast {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 700px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: modalSlide 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes modalSlide {
    from { opacity: 0; transform: scale(0.95) translateY(10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border-subtle);
    gap: 1rem;
}

.modal-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--accent-teal);
    line-height: 1.4;
}

.modal-close {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    font-size: 1.4rem;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.modal-close:hover {
    background: rgba(255, 82, 82, 0.15);
    color: var(--accent-red);
    border-color: rgba(255, 82, 82, 0.3);
}

.modal-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.5rem;
    background: rgba(0, 0, 0, 0.1);
    font-size: 0.8rem;
}

.modal-from {
    color: var(--text-primary);
    font-weight: 500;
}

.modal-date {
    color: var(--text-muted);
}

.modal-body {
    padding: 1.5rem;
    overflow-y: auto;
    flex: 1;
    font-size: 0.88rem;
    line-height: 1.7;
    color: var(--text-secondary);
}

.modal-body img {
    max-width: 100%;
    height: auto;
}

.modal-body a {
    color: var(--accent-cyan);
}

/* ─── FOOTER ───────────────────────────────────────────────── */
.footer {
    text-align: center;
    padding: 1.5rem;
    color: var(--text-muted);
    font-size: 0.78rem;
    border-top: 1px solid var(--border-subtle);
    margin-top: auto;
}

/* ─── SCROLLBAR ────────────────────────────────────────────── */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* ─── RESPONSIVE ───────────────────────────────────────────── */
@media (max-width: 640px) {
    .header-inner {
        flex-direction: column;
        height: auto;
        padding: 0.75rem 0;
        gap: 0.5rem;
    }

    .card-title {
        flex-direction: column;
        align-items: flex-start;
    }

    .card-actions {
        flex-direction: column;
        gap: 0.75rem;
        align-items: stretch;
    }

    .btn-primary {
        justify-content: center;
    }

    .email-top-row {
        flex-direction: column;
        gap: 2px;
    }

    .modal {
        max-height: 90vh;
    }
}

/* ─── APP SECTIONS ───────────────────────────────────────────── */
.app-section {
    animation: fadeIn 0.3s ease forwards;
}

/* ─── AUTO FORMAT TAB ──────────────────────────────────────── */
.format-header {
    text-align: center;
    margin-bottom: 2rem;
}

.format-title {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.format-icon {
    color: var(--accent-cyan);
}

.format-subtitle {
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin-bottom: 1rem;
}

.format-badges {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.badge {
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
}

.badge-cyan {
    background: rgba(32, 231, 183, 0.15);
    color: var(--accent-cyan);
    border: 1px solid rgba(32, 231, 183, 0.3);
}

/* Dropzone */
.dropzone {
    position: relative;
    border: 2px dashed rgba(32, 231, 183, 0.4);
    border-radius: var(--radius-lg);
    background: rgba(0, 0, 0, 0.2);
    padding: 1.4rem 1.5rem;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
    margin-bottom: 2rem;
}

.dropzone:hover, .dropzone.dragover {
    background: rgba(32, 231, 183, 0.05);
    border-color: var(--accent-cyan);
}

.file-input-hidden {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.dropzone-content {
    pointer-events: none;
}

/* Slim inline dropzone: a single compact strip under the paste textarea,
   instead of the tall standalone box. Scoped so the base .dropzone is intact. */
.dropzone-slim {
    padding: 0.6rem 1rem;
    margin: 0.85rem 0;
    border-width: 1.5px;
}
.dropzone-slim .dropzone-content {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.2rem 0.55rem;
}
.dropzone-slim .folder-icon {
    display: inline;
    font-size: 1.1rem;
    margin: 0;
}
.dropzone-slim .dropzone-content h3 {
    font-size: 0.88rem;
    margin: 0;
}
.dropzone-slim .dropzone-content p {
    font-size: 0.8rem;
    margin: 0;
}

.folder-icon {
    font-size: 1.8rem;
    display: block;
    margin-bottom: 0.4rem;
}

.dropzone-content h3 {
    font-size: 0.98rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
    color: var(--text-primary);
}

.dropzone-content p {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* Stat Cards */
.format-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-shadow: var(--shadow-sm);
}

.stat-val {
    font-size: 1.8rem;
    font-weight: 800;
    font-family: 'Cascadia Code', 'Fira Code', monospace;
}

.val-cyan { color: var(--accent-cyan); }
.val-green { color: var(--accent-green); }
.val-red { color: var(--accent-red); }

.stat-lbl {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-secondary);
    letter-spacing: 0.05em;
}

/* Output Area */
.format-output-area {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    overflow: hidden;
    animation: slideUp 0.3s ease forwards;
}

.output-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    background: rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid var(--border-subtle);
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.output-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

.format-sep-control {
    display: flex;
    align-items: center;
    gap: 8px;
}

.format-sep-label {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-secondary);
}

/* Separator picker: two clickable glyph pills (| and :) instead of a dropdown,
   so the choice is visible at a glance. Active pill goes mint. */
.format-sep-group {
    display: inline-flex;
    gap: 6px;
}

.format-sep-pill {
    min-width: 38px;
    padding: 6px 10px;
    border-radius: 6px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.format-sep-pill:hover {
    border-color: var(--border-accent);
    color: var(--text-primary);
}

.format-sep-pill.active {
    border-color: var(--accent-mint);
    background: rgba(0, 255, 194, 0.08);
    color: var(--accent-mint);
}

.format-sep-pill:focus-visible {
    outline: none;
    border-color: var(--accent-mint);
}

/* Auto Format action stack: the two mode blocks on top, then the separator +
   Format button row below. */
.format-actions-col {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Mode picker as two side-by-side selectable blocks (clearer than a dropdown
   the user barely notices). Collapses to one column on narrow screens. */
.format-mode-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* Each mode is a card in the same visual language as the Check Mail
   LIVE/DIE/UNKNOWN boxes: a top accent bar, a bold title, a one-line sub. The
   accent bar and title go mint when the card is the active choice. */
.format-mode-block {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    min-height: 78px;
    text-align: left;
    padding: 14px 16px;
    border-radius: var(--radius-md);
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-top: 3px solid var(--border-subtle);
    cursor: pointer;
    font-family: inherit;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.format-mode-block:hover {
    border-color: var(--border-accent);
    border-top-color: var(--border-accent);
}

.format-mode-block.active {
    border-color: var(--accent-mint);
    border-top-color: var(--accent-mint);
    background: rgba(0, 255, 194, 0.05);
}

.format-mode-block:focus-visible {
    outline: none;
    border-color: var(--accent-mint);
    border-top-color: var(--accent-mint);
}

/* Radio dot in the top-right corner; fills mint on the active card. */
.format-mode-block::after {
    content: "";
    position: absolute;
    top: 14px;
    right: 14px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid var(--border-subtle);
    background: transparent;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.format-mode-block.active::after {
    border-color: var(--accent-mint);
    background: var(--accent-mint);
    box-shadow: inset 0 0 0 2px var(--bg-card);
}

.fmb-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    padding-right: 22px; /* clear the radio dot */
}

.format-mode-block.active .fmb-title {
    color: var(--accent-mint);
}

.fmb-sub {
    font-size: 0.78rem;
    line-height: 1.35;
    color: var(--text-secondary);
}

@media (max-width: 520px) {
    .format-mode-group { grid-template-columns: 1fr; }
}

.btn-sm {
    padding: 6px 12px;
    font-size: 0.8rem;
}

.format-textarea {
    border: none;
    border-radius: 0;
    height: 300px;
    resize: vertical;
}
.format-textarea:focus {
    box-shadow: none;
}

/* ─── CHECK MAIL TAB ─────────────────────────────────────────── */
.check-results-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: 1rem;
}

.check-box {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.check-box-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid var(--border-subtle);
}

.check-box-title {
    font-weight: 700;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.check-count {
    background: rgba(255, 255, 255, 0.1);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
}

.check-box-actions {
    display: flex;
    gap: 6px;
    align-items: center;
}

/* Download button is icon-only, keep it square and compact next to Copy */
#btnDownloadLive, #btnDownloadDie, #btnDownloadError {
    padding: 4px 9px;
    font-size: 0.9rem;
    line-height: 1;
}

/* ─── CHECK MAIL: last-result history banner ───────────────── */
.check-history {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-left: 3px solid var(--accent-cyan);
    border-radius: var(--radius-md);
    padding: 0.7rem 1rem;
    margin-bottom: 1.5rem;
    font-size: 0.86rem;
    color: var(--text-secondary);
}

.check-history-info {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.check-history-info strong { color: var(--text-primary); }

.check-history-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.check-history-diff {
    display: inline-block;
    margin-left: 6px;
    font-size: 0.8rem;
    color: var(--accent-red);
}

/* Colors for specific boxes */
.live-box { border-top: 3px solid var(--accent-green); }
.live-box .check-box-title { color: var(--accent-green); }
.live-box .check-count { background: rgba(0, 255, 194, 0.15); }

.die-box { border-top: 3px solid var(--accent-red); }
.die-box .check-box-title { color: var(--accent-red); }
.die-box .check-count { background: rgba(255, 90, 106, 0.15); }

.error-box { border-top: 3px solid var(--accent-cyan); }
.error-box .check-box-title { color: var(--accent-cyan); }
.error-box .check-count { background: rgba(32, 231, 183, 0.15); }

.check-textarea {
    flex-grow: 1;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    padding: 1rem;
    font-family: 'Cascadia Code', 'Fira Code', monospace;
    font-size: 0.85rem;
    line-height: 1.6;
    resize: none;
    min-height: 300px;
}
.check-textarea:focus {
    outline: none;
}

.check-textarea:focus-visible {
    outline: 2px solid var(--accent-mint);
    outline-offset: -2px;
}

/* ─── PROXY SETTINGS ─────────────────────────────────────────── */
.proxy-settings {
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    background: rgba(0, 0, 0, 0.15);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.proxy-settings summary {
    padding: 0.75rem 1rem;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-secondary);
    user-select: none;
    transition: all 0.2s ease;
}

.proxy-settings summary:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
}

.proxy-textarea {
    width: 100%;
    min-height: 80px;
    height: 100px;
    background: transparent;
    border: none;
    border-top: 1px solid var(--border-subtle);
    padding: 0.75rem 1rem;
    color: var(--text-secondary);
    font-family: 'Cascadia Code', 'Fira Code', monospace;
    font-size: 0.8rem;
    resize: vertical;
}

.proxy-textarea:focus {
    outline: none;
    color: var(--text-primary);
}

/* ─── UTILITY ──────────────────────────────────────────────── */
.hidden { display: none !important; }

/* ─── RESPONSIVE DESIGN (MOBILE) ───────────────────────────── */
@media (max-width: 992px) {
    .check-results-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        padding: 1rem;
    }
    
    .header-right {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0.6rem;
    }

    /* All tabs wrap onto as many rows as needed and stay visible at once,
       no horizontal scroll, people were missing tabs that scrolled off. */
    .nav-links {
        flex-wrap: wrap;
        row-gap: 0.4rem;
    }

    .nav-link {
        white-space: nowrap;
    }

    .i18n-switch {
        align-self: flex-end;
    }

    .card-header, .card-actions, .card-footer {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }

    .mode-toggles, .auto-refresh-controls, .action-buttons {
        width: 100%;
        justify-content: space-between;
    }

    /* Only the big CTAs go full-width. Small utility buttons (Copy, the ⬇
       download icon, the history Muat/Hapus) must stay inline — otherwise
       the global width:100% below stacks them into huge full-width bars. */
    .btn:not(.btn-sm) {
        width: 100%;
        justify-content: center;
    }

    /* Let each result box's header wrap its title + action buttons instead
       of squeezing them onto one overflowing row on narrow phones. */
    .check-box-header {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .result-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .result-status {
        align-self: flex-start;
    }

    .email-subject {
        max-width: 100%;
        white-space: normal;
    }
    
    .stats-container {
        flex-direction: column;
    }
}

/* ─── AUTO REFRESH CONTROLS ────────────────────────────────── */
.auto-refresh-controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
}
.auto-refresh-group {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.auto-refresh-toggle {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
    cursor: pointer;
    flex-shrink: 0;
}

.auto-refresh-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.auto-refresh-slider {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    transition: var(--transition);
    border: 1px solid var(--border-subtle);
}

.auto-refresh-slider::before {
    content: '';
    position: absolute;
    left: 2px;
    top: 2px;
    width: 14px;
    height: 14px;
    background: var(--text-secondary);
    border-radius: 50%;
    transition: var(--transition);
}

.auto-refresh-toggle input:checked + .auto-refresh-slider {
    background: rgba(0, 255, 194, 0.2);
    border-color: var(--accent-green);
}

.auto-refresh-toggle input:checked + .auto-refresh-slider::before {
    transform: translateX(16px);
    background: var(--accent-green);
    box-shadow: 0 0 6px rgba(0, 255, 194, 0.4);
}

.auto-refresh-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.auto-refresh-select {
    background: var(--bg-input);
    color: var(--text-primary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: 3px 8px;
    font-size: 0.75rem;
    font-family: inherit;
    cursor: pointer;
    outline: none;
    transition: var(--transition);
}

.auto-refresh-select:focus {
    border-color: var(--accent-cyan);
}

.auto-refresh-countdown {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--accent-cyan);
    font-family: 'Cascadia Code', 'Fira Code', monospace;
    min-width: 28px;
    text-align: center;
    animation: pulse 1s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ─── ACTION BUTTONS ───────────────────────────────────────── */
.action-buttons {
    display: flex;
    gap: 0.5rem;
}

.btn-secondary {
    background: rgba(32, 231, 183, 0.12);
    color: var(--accent-cyan);
    border: 1px solid rgba(32, 231, 183, 0.25);
}

.btn-secondary:hover {
    background: rgba(32, 231, 183, 0.2);
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(32, 231, 183, 0.15);
}

.btn-secondary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.btn-secondary .spinner {
    border: 2px solid rgba(32, 231, 183, 0.3);
    border-top-color: var(--accent-cyan);
}

/* ─── COPY CODE BUTTON ─────────────────────────────────────── */
.code-cell {
    display: flex;
    align-items: center;
    gap: 6px;
}

.copy-code-btn {
    background: rgba(32, 231, 183, 0.1);
    border: 1px solid rgba(32, 231, 183, 0.2);
    color: var(--accent-cyan);
    font-size: 0.7rem;
    padding: 2px 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: var(--transition);
    font-family: inherit;
    font-weight: 600;
    white-space: nowrap;
}

.copy-code-btn:hover {
    background: rgba(32, 231, 183, 0.2);
    border-color: var(--accent-cyan);
}

.copy-code-btn.copied {
    background: rgba(0, 255, 194, 0.15);
    border-color: var(--accent-green);
    color: var(--accent-green);
}

/* ─── TOAST NOTIFICATIONS ──────────────────────────────────── */
.toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.toast {
    background: var(--bg-elevated);
    color: var(--text-primary);
    padding: 10px 20px;
    border-radius: var(--radius-md);
    font-size: 0.82rem;
    font-weight: 500;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border-subtle);
    animation: toastIn 0.3s ease, toastOut 0.3s ease 2.2s forwards;
    display: flex;
    align-items: center;
    gap: 8px;
}

.toast.success {
    border-color: rgba(0, 255, 194, 0.3);
}

@keyframes toastIn {
    from { opacity: 0; transform: translateX(30px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes toastOut {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(30px); }
}

/* ─── CHECK MAIL RESULTS ───────────────────────────────────── */
.check-results-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.check-results-table thead {
    background: rgba(0, 0, 0, 0.25);
}

.check-results-table th {
    text-align: left;
    padding: 12px 16px;
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    border-bottom: 2px solid var(--border-subtle);
}

.check-results-table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text-primary);
}

.check-results-table tbody tr:last-child td {
    border-bottom: none;
}

.live-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 700;
    font-size: 0.8rem;
    padding: 3px 12px;
    border-radius: 20px;
}

.live-badge.live {
    background: rgba(0, 255, 194, 0.15);
    color: var(--accent-green);
}

.live-badge.dead {
    background: rgba(255, 82, 82, 0.15);
    color: var(--accent-red);
}

.response-time {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-family: 'Cascadia Code', 'Fira Code', monospace;
}

/* ─── Section Description ──────────────────────────────────── */
.section-desc {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.7;
    margin: 0.5rem 0 1.5rem 0;
    padding: 0.75rem 1rem;
    background: rgba(32, 231, 183, 0.04);
    border-left: 3px solid var(--accent-cyan);
    border-radius: 0 8px 8px 0;
}

.section-desc code {
    background: rgba(32, 231, 183, 0.12);
    color: var(--accent-cyan);
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    font-size: 0.85rem;
    font-family: 'Cascadia Code', 'Fira Code', monospace;
}

/*
 * ═══════════════════════════════════════════════════════════════
 *  TIDY-UP — moves scattered inline styles into the design system
 * ═══════════════════════════════════════════════════════════════
 */

/* ─── Card footer + line count (Check Mail) ───────────────────── */
.card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}

.line-count {
    font-size: 0.75rem;
    font-weight: 500;
    padding: 4px 12px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-secondary);
    border: 1px solid var(--border-subtle);
    white-space: nowrap;
}

/* ─── About tab ───────────────────────────────────────────────── */
.about-card {
    max-width: 620px;
    margin: 2rem auto;
    padding: 3rem 2.5rem;
    text-align: center;
}

.about-title {
    color: var(--text-primary);
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.about-text {
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.about-badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent-mint);
    border: 1px solid var(--border-accent);
    border-radius: var(--radius-pill);
    padding: 4px 12px;
    margin-bottom: 1.25rem;
}

/* Feature list — explains what the tool does */
.about-features {
    list-style: none;
    text-align: left;
    margin: 1.75rem 0 0.5rem;
}

.about-features li {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    padding: 0.9rem 0;
    border-bottom: 1px solid var(--border-subtle);
}

.about-features li:last-child {
    border-bottom: none;
}

.feat-icon {
    font-size: 1.15rem;
    line-height: 1.35;
}

.feat-text {
    display: flex;
    flex-direction: column;
}

.feat-text strong {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.95rem;
}

.feat-text span {
    color: var(--text-secondary);
    font-size: 0.85rem;
    line-height: 1.5;
    margin-top: 2px;
}

/* Contact */
/* ─── About FAQ (SEO content, native details accordion) ────── */
.about-faq {
    margin-top: 2rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--border-subtle);
}

.about-faq-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 1rem;
}

.faq-item {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    margin-bottom: 0.6rem;
    background: var(--bg-card);
    overflow: hidden;
}

.faq-item summary {
    cursor: pointer;
    padding: 0.85rem 1rem;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-primary);
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
    content: '+';
    color: var(--accent-mint);
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 1;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.faq-item[open] summary::after { transform: rotate(45deg); }

.faq-item summary:hover { color: var(--accent-mint); }

.faq-item p {
    margin: 0;
    padding: 0 1rem 1rem;
    color: var(--text-secondary);
    font-size: 0.88rem;
    line-height: 1.65;
}

.faq-item p code {
    background: var(--bg-input);
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 0.82em;
    color: var(--accent-mint);
}

.about-contact {
    margin-top: 2rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--border-subtle);
}

.contact-label {
    display: block;
    color: var(--text-muted);
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 0.85rem;
}

.contact-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 10px 20px;
    border: 1px solid var(--accent-mint);
    border-radius: var(--radius-md);
    color: var(--accent-mint);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    transition: var(--transition);
}

.contact-link:hover {
    background: rgba(0, 255, 194, 0.10);
}

.tg-icon {
    flex-shrink: 0;
}

/*
 * ═══════════════════════════════════════════════════════════════
 *  NK.STUDIO — Minimal Spark
 *  Ink-black gallery field · warm-white type · neon spark used sparingly
 *  DM Sans everywhere · flat depth (borders, not shadows) · 4–8px radii
 * ═══════════════════════════════════════════════════════════════
 */

html { font-size: 16px; }

body { font-family: 'DM Sans', 'Inter', -apple-system, sans-serif; }

/* Quiet, gallery-like field — a single faint spark of glow, nothing heavy */
body::before {
    background:
        radial-gradient(46% 40% at 84% -8%, rgba(0, 255, 194, 0.06) 0%, transparent 62%);
}

::selection { background: var(--accent-mint); color: #05100d; }
::-webkit-scrollbar-thumb { background: rgba(253, 253, 249, 0.14); }
::-webkit-scrollbar-thumb:hover { background: rgba(0, 255, 194, 0.30); }

/* ─── Type — DM Sans, light headlines, tight tracking ─────────── */
.brand-name,
.format-title,
.card-title-text,
.modal-title,
.about-title,
.about-panel-title,
.dropzone-content h3 {
    font-family: var(--font-display);
    font-weight: 500;
    letter-spacing: -0.02em;
}

.brand-name { font-size: 1.45rem; letter-spacing: -0.03em; }

.format-title {
    font-size: 2.4rem;
    font-weight: 500;
    letter-spacing: -0.035em;
}

.format-subtitle { font-size: 1.05rem; }

/* ─── Airier canvas ───────────────────────────────────────────── */
.main { padding: 3rem 2rem 4rem; }
.section-desc { font-size: 0.95rem; }

/* ─── Header — flat glass, animated mint underline on nav ─────── */
.header {
    background: var(--grad-header);
    border-bottom: 1px solid var(--border-subtle);
    backdrop-filter: blur(16px) saturate(130%);
}

.header-inner { height: 72px; }

.nav-link { position: relative; }

.nav-link::after {
    content: '';
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: 5px;
    height: 2px;
    border-radius: 2px;
    background: var(--accent-mint);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-link:hover::after,
.nav-link.active::after { transform: scaleX(1); }

.nav-link.active {
    background: transparent;
    color: var(--accent-mint);
}

/* ─── Desktop nav polish: calmer, tighter, more elegant top bar. The mint
       underline carries the state, so the boxy hover background is dropped. ── */
.nav-links { gap: 0.2rem; }
.nav-link {
    letter-spacing: 0.01em;
    transition: color 0.18s ease;
}
.nav-link:hover {
    background: transparent;
    color: var(--text-primary);
}
@media (min-width: 769px) {
    /* a hairline divider sets the tabs apart from the ID/EN switch */
    #i18nSwitch {
        margin-left: 0.4rem;
        padding-left: 1rem;
        border-left: 1px solid var(--border-subtle);
    }
}

/* ─── Section label → quiet overline chip ─────────────────────── */
.section-label {
    background: transparent;
    color: var(--accent-mint);
    border: 1px solid var(--border-accent);
    box-shadow: none;
    letter-spacing: 0.12em;
    border-radius: var(--radius-pill);
    padding: 6px 14px;
}

/* ─── Cards — clean flat containers, not raised panels ────────── */
.card,
.account-result,
.format-output-area,
.stat-card,
.check-box {
    background: var(--bg-card);
    box-shadow: none;
}

.card:hover {
    transform: none;
    border-color: var(--border-accent);
    box-shadow: none;
}

/* ─── Buttons — text-first, 7px, no pills, spark used as accent ── */
.btn {
    border-radius: var(--radius-md);
    padding: 12px 22px;
    font-weight: 600;
    letter-spacing: 0;
}

.btn-primary {
    background: transparent;
    color: var(--accent-mint);
    border: 1px solid var(--accent-mint);
    box-shadow: none;
}

.btn-primary:hover {
    background: rgba(0, 255, 194, 0.10);
    box-shadow: none;
    transform: none;
}

.btn-primary:active { transform: none; }

.btn-secondary {
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--border-subtle);
}

.btn-secondary:hover {
    background: rgba(253, 253, 249, 0.06);
    border-color: var(--border-accent);
    box-shadow: none;
    transform: none;
}

/* Spinner must stay visible on the now-transparent buttons */
.spinner,
.btn-secondary .spinner {
    border: 2px solid rgba(0, 255, 194, 0.28);
    border-top-color: var(--accent-mint);
}

/* ─── Inputs — light-touch, mint focus, no heavy outline ──────── */
.credentials-textarea:focus,
.proxy-textarea:focus {
    border-color: var(--accent-mint);
    box-shadow: 0 0 0 3px rgba(0, 255, 194, 0.12);
}

/* ─── Motion — the per-element cascade lives in the MOTION block below ── */

/* ─── Mobile ──────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .main { padding: 2rem 1.25rem 3rem; }
    .format-title { font-size: 1.9rem; }
    .header-inner { height: auto; }

    /* Keep the 3 stat cards side by side but tighten spacing so they don't
       overflow on narrow phones (the 1.5rem padding/gap is too much at 320px). */
    .format-stats { gap: 0.6rem; }
    .stat-card { padding: 1rem 0.5rem; }
}
.results-icon-btn:hover { border-color: var(--border-accent); background: rgba(255, 255, 255, 0.04); }
.results-search-input {
    width: 0;
    padding: 0;
    margin: 0;
    border: 1px solid transparent;
    opacity: 0;
    background: var(--bg-input);
    color: var(--text-primary);
    border-radius: var(--radius-md);
    font-size: 0.85rem;
    transition: width 0.25s ease, opacity 0.2s ease, padding 0.2s ease, margin 0.2s ease;
}
.results-search.open .results-search-input {
    width: min(260px, 58vw);
    padding: 9px 12px;
    margin-left: 8px;
    opacity: 1;
    border-color: var(--border-subtle);
}
.results-search-input:focus { outline: none; border-color: var(--accent-mint); }
.results-menu { position: relative; }
.results-menu-dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    min-width: 180px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.5);
    padding: 6px;
    display: none;
    z-index: 60;
}

@keyframes auroraDrift {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(-4%, 3%, 0) scale(1.18); }
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-100%); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes shimmer {
    to { background-position: 220% center; }
}

@keyframes revealUp {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}

/*
 * ═══════════════════════════════════════════════════════════════
 *  ADVANCED MOTION — intro curtain · scroll reveal · custom cursor
 *  Driven by animations.js; JS only wires these when the device has a
 *  fine pointer and the user hasn't asked to reduce motion.
 * ═══════════════════════════════════════════════════════════════
 */

/* ─── Intro curtain (once per session) ────────────────────────── */
.intro-curtain {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: var(--bg-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    will-change: transform;
}

.intro-mark {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 6vw, 2.6rem);
    font-weight: 600;
    letter-spacing: -0.03em;
    color: var(--text-primary);
    opacity: 0;
    animation: introMarkIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.intro-mark span {
    color: var(--accent-mint);
    margin-left: 0.4rem;
    text-shadow: 0 0 30px rgba(0, 255, 194, 0.45);
}

.intro-curtain.intro-exit {
    animation: curtainUp 0.7s cubic-bezier(0.7, 0, 0.2, 1) forwards;
}

@keyframes introMarkIn {
    from { opacity: 0; transform: translateY(12px) scale(0.98); }
    to   { opacity: 1; transform: none; }
}

@keyframes curtainUp {
    from { transform: translateY(0); }
    to   { transform: translateY(-100%); }
}

/* ─── Scroll reveal for injected inbox results ────────────────── */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

.reveal-on-scroll.is-revealed {
    opacity: 1;
    transform: none;
}

/* ─── Custom cursor (mint dot + trailing glow ring) ───────────── */
.has-cursor,
.has-cursor * { cursor: none !important; }

.has-cursor textarea { cursor: text !important; }

.cursor-dot,
.cursor-ring {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
    pointer-events: none;
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.has-cursor.cursor-active .cursor-dot,
.has-cursor.cursor-active .cursor-ring { opacity: 1; }

.cursor-dot {
    width: 7px;
    height: 7px;
    background: var(--accent-mint);
    box-shadow: 0 0 12px rgba(0, 255, 194, 0.8);
}

.cursor-ring {
    width: 34px;
    height: 34px;
    border: 1px solid rgba(0, 255, 194, 0.5);
    transition: opacity 0.3s ease, width 0.2s ease, height 0.2s ease,
                background 0.2s ease, border-color 0.2s ease;
}

.has-cursor.cursor-hover .cursor-ring {
    width: 52px;
    height: 52px;
    background: rgba(0, 255, 194, 0.08);
    border-color: var(--accent-mint);
}

/*
 * ═══════════════════════════════════════════════════════════════
 *  API TAB — Telegram-bot key issuance + quick start
 * ═══════════════════════════════════════════════════════════════
 */
.api-quickstart-desc {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.api-quickstart-desc code {
    background: rgba(0, 255, 194, 0.12);
    color: var(--accent-mint);
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    font-size: 0.85rem;
    font-family: 'Cascadia Code', 'Fira Code', monospace;
}

.code-block {
    background: var(--bg-input);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 1rem 1.1rem;
    color: var(--text-primary);
    font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
    font-size: 0.82rem;
    line-height: 1.6;
    overflow-x: auto;
    white-space: pre;
}
/* ─── Read Inbox results toolbar: expandable 🔍 search + ⋮ menu ─────────── */
.results-toolbar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5rem;
    margin: 0.25rem 0 0.75rem;
}
.results-search { display: flex; align-items: center; }
.results-icon-btn {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
    background: transparent;
    color: var(--text-primary);
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    transition: var(--transition);
}
.results-menu.open .results-menu-dropdown { display: block; }
.results-menu-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 9px 12px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-size: 0.85rem;
    cursor: pointer;
}
.results-menu-item:hover { background: rgba(255, 255, 255, 0.06); }

/* Verify-link badge in the Code column (emails that use a click-to-verify
   link instead of an OTP code). */
.verify-link-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(0, 255, 194, 0.1);
    border: 1px solid var(--border-accent);
    color: var(--accent-mint);
    font-size: 0.74rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.verify-link-badge:hover { background: rgba(0, 255, 194, 0.2); }

/* --- SIDEBAR & LAYOUT --- */
.app-layout {
    display: flex;
    flex: 1;
    width: 100%;
    max-width: 100%;
}
.sidebar {
    width: 280px;
    border-right: 1px solid var(--border-subtle);
    background: var(--bg-surface);
    display: flex;
    flex-direction: column;
    height: calc(100vh - 70px);
    position: sticky;
    top: 70px;
    overflow: hidden;
    flex-shrink: 0;
    transition: width 0.3s ease;
}
.sidebar-header {
    padding: 1.25rem 1.25rem;
    border-bottom: 1px solid var(--border-subtle);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(0,0,0,0.2);
}
.sidebar-header h2 {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.sidebar-header h2::before {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    background: var(--accent-mint);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--accent-mint);
}
.sidebar-actions {
    display: flex;
    gap: 0.4rem;
}
.sidebar-actions .btn {
    padding: 4px 8px;
    font-size: 0.9rem;
    border-radius: var(--radius-sm);
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-secondary);
}
.sidebar-actions .btn:hover {
    background: rgba(255,255,255,0.08);
    color: var(--text-primary);
    border-color: var(--border-subtle);
}
.sidebar-hint {
    margin: 0;
    padding: 0.6rem 1.25rem;
    font-size: 0.72rem;
    line-height: 1.4;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-subtle);
    background: rgba(0, 255, 194, 0.03);
}
.sidebar-list {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem 0;
}
.sidebar-empty {
    padding: 2rem 1.25rem;
    text-align: center;
    color: var(--text-muted);
}
.sidebar-empty-icon {
    font-size: 2.2rem;
    margin-bottom: 0.6rem;
    opacity: 0.45;
}
.sidebar-empty-title {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text-secondary);
    margin-bottom: 0.45rem;
}
.sidebar-empty-hint {
    font-size: 0.82rem;
    line-height: 1.55;
}
.sidebar-empty-hint code {
    font-size: 0.76rem;
    background: rgba(255, 255, 255, 0.06);
    padding: 1px 5px;
    border-radius: 4px;
}
.sidebar-list::-webkit-scrollbar {
    width: 6px;
}
.sidebar-list::-webkit-scrollbar-thumb {
    background: rgba(253, 253, 249, 0.08);
    border-radius: 10px;
}
.sidebar-list::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 255, 194, 0.2);
}
.sidebar-item {
    display: flex;
    align-items: center;
    padding: 0.85rem 1.25rem;
    cursor: pointer;
    border-left: 3px solid transparent;
    transition: background 0.2s ease, border-color 0.2s ease;
    gap: 0.75rem;
    position: relative;
    border-bottom: 1px solid rgba(255,255,255,0.02);
}
.sidebar-item:hover {
    background: rgba(255,255,255,0.03);
}
.sidebar-item.active {
    background: rgba(0, 255, 194, 0.06);
    border-left-color: var(--accent-mint);
}
.si-indicator {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--text-muted);
    transition: all 0.2s ease;
}
.sidebar-item:hover .si-indicator, .sidebar-item.active .si-indicator {
    background: var(--accent-cyan);
    box-shadow: 0 0 8px var(--accent-cyan);
}
.si-email {
    font-size: 0.85rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    font-family: 'Cascadia Code', 'Fira Code', monospace;
}
.si-delete-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 1rem;
    display: none; 
    opacity: 0.5;
    transition: all 0.2s ease;
}
.si-delete-btn:hover {
    opacity: 1;
    transform: scale(1.1);
}
.sidebar.delete-mode .si-delete-btn {
    display: block;
}
.sidebar.delete-mode .sidebar-item:hover {
    background: rgba(255, 90, 106, 0.08);
    border-left-color: var(--accent-red);
}
.sidebar.delete-mode .si-indicator {
    background: var(--accent-red) !important;
    box-shadow: 0 0 8px var(--accent-red) !important;
}

/* ─── Mobile drawer controls for Saved Accounts (shown only via the
       max-width:900px block below; hidden/no-op on desktop). ─────────────── */
.sidebar-fab {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 18px;
    z-index: 1100;
    height: 48px;
    padding: 0 16px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 24px;
    border: none;
    background: var(--accent-mint);
    color: #05100d;
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(0, 255, 194, 0.4);
    animation: fabPulse 2.4s ease-in-out infinite;
}
.sidebar-fab:active { transform: scale(0.95); }
.sidebar-fab-icon { font-size: 1.2rem; }
.sidebar-fab-label { white-space: nowrap; }
.sidebar-fab-badge {
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #05100d;
    color: var(--accent-mint);
    font-size: 0.72rem;
    font-weight: 700;
}
.sidebar-fab-badge[hidden] { display: none; }
@keyframes fabPulse {
    0%, 100% { box-shadow: 0 6px 18px rgba(0, 255, 194, 0.4); }
    50% { box-shadow: 0 8px 30px rgba(0, 255, 194, 0.75); }
}
@media (prefers-reduced-motion: reduce) {
    .sidebar-fab { animation: none; }
}
.sidebar-backdrop { display: none; }
.sidebar-close { display: none; }
/* Keep bulk controls in sync even when deleting the last saved account. */
.sidebar:not(.delete-mode) #btnCancelDelete { display: none !important; }
.sidebar:not(.delete-mode) #btnCopyAllLinks { display: inline-block !important; }
.sidebar.delete-mode #btnCancelDelete { display: inline-block !important; }
.sidebar.delete-mode #btnCopyAllLinks { display: none !important; }

@media (max-width: 900px) {
    .sidebar-header { flex-wrap: wrap; gap: 0.5rem; }
    .sidebar-header h2 { flex: 1; }
    .sidebar-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-sm);
        background: transparent;
        color: var(--text-primary);
        font-size: 1.5rem;
        cursor: pointer;
    }
    .sidebar-actions { flex-basis: 100%; }
    .sidebar-actions .btn { min-width: 44px; min-height: 44px; }
    .app-layout {
        flex-direction: column;
    }
    /* Saved Accounts becomes a slide-in drawer opened by the ☰ button, so the
       tool gets the whole screen and the list is out of the page flow until the
       user asks for it. Only HOW it shows changes; the feature is untouched. */
    .sidebar {
        position: fixed;
        top: 0;
        right: 0;
        width: 86vw;
        max-width: 320px;
        height: 100vh;
        max-height: none;
        z-index: 1300;
        border-right: none;
        border-left: 1px solid var(--border-subtle);
        box-shadow: -12px 0 40px rgba(0, 0, 0, 0.5);
        /* Slide via transform (box stays anchored at right:0) so the off-screen
           drawer never widens the page / triggers horizontal scroll on mobile. */
        transform: translateX(110%);
        transition: transform 0.28s ease;
        will-change: transform;
    }
    body.drawer-open .sidebar { transform: translateX(0); }

    .sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.55);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.28s ease, visibility 0.28s ease;
        z-index: 1200;
    }
    body.drawer-open .sidebar-backdrop { opacity: 1; visibility: visible; }

    .sidebar-fab { display: inline-flex; }
}

/* ─── Mobile nav: collapse the top tabs into a ☰ dropdown so the header stays
       one tidy row on phones instead of wrapping to several rows. The tabs
       themselves are unchanged; only how they're shown. ───────────────────── */
.nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
    background: transparent;
    color: var(--text-primary);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
}
.nav-toggle:active { transform: scale(0.94); }

@media (max-width: 768px) {
    .header-inner {
        position: relative;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
    }
    .header-right {
        width: auto;
        flex-direction: row;
        align-items: center;
        gap: 0.5rem;
    }
    .nav-toggle { display: inline-flex; }

    /* Tabs become a dropdown panel anchored under the header bar, shown on tap. */
    .nav-links {
        position: absolute;
        top: calc(100% + 1px);
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 0.4rem 0;
        background: var(--bg-surface);
        border-top: 1px solid var(--border-subtle);
        border-bottom: 1px solid var(--border-subtle);
        box-shadow: 0 16px 34px rgba(0, 0, 0, 0.5);
        display: none;
        z-index: 1250;
    }
    body.nav-open .nav-links { display: flex; }
    .nav-links .nav-link {
        width: 100%;
        padding: 0.85rem 1.4rem;
        border-radius: 0;
    }
}

.magic-link-btn {
    display: inline-flex;
    align-items: center;
    background: rgba(0, 255, 194, 0.1);
    color: var(--accent-mint);
    border: 1px solid rgba(0, 255, 194, 0.3);
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition);
    white-space: nowrap;
}
.magic-link-btn:hover {
    background: var(--accent-mint);
    color: #05100d;
    text-decoration: none;
    border-color: var(--accent-mint);
}
@media (max-width: 768px) { .inbox-table, .inbox-table tbody, .inbox-table tr, .inbox-table td { display: block; width: 100%; } .inbox-table thead { display: none; } .inbox-table tr { margin-bottom: 1rem; background: rgba(255,255,255,0.02); border: 1px solid var(--border-subtle); border-radius: 8px; padding: 0.5rem; } .inbox-table td { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 0.5rem; border: none; border-bottom: 1px solid rgba(255,255,255,0.05); text-align: right; } .inbox-table td:last-child { border-bottom: none; } .inbox-table td::before { content: attr(data-label); font-weight: 600; color: var(--text-muted); text-transform: uppercase; font-size: 0.7rem; margin-right: 1rem; flex-shrink: 0; } .inbox-table td > * { text-align: right; display: flex; justify-content: flex-end; } .inbox-table .col-content { flex-direction: column; align-items: flex-start; text-align: left; } .inbox-table .col-content::before { margin-bottom: 0.5rem; } .inbox-table .col-content > * { text-align: left; justify-content: flex-start; } .inbox-table .col-code .code-cell { align-items: flex-end !important; } }

.check-box {
    min-width: 0 !important;
}
.check-textarea {
    white-space: pre-wrap !important;
    word-break: break-all !important;
}

.col-code { white-space: nowrap !important; }
.code-badge { white-space: nowrap !important; }
.col-mail { word-break: break-all !important; }
.col-from { word-break: break-word !important; }

/* ─── Mobile: keep floating buttons from blocking the Read Inbox button ────
   The feedback widget (chat circle) + the 📂 Akun FAB stack in the bottom-right
   corner on phones and were overlapping the full-width Read Inbox button. Give
   the content extra bottom room so that button (and any bottom control) can be
   scrolled clear of them instead of sitting permanently underneath. Appended at
   end of file so it wins over the earlier .main padding shorthands. */
@media (max-width: 900px) {
    .main { padding-bottom: 150px; }
}

/* "BETA" badge, used on the Get Token nav link + section heading. */
.nav-beta {
    display: inline-block;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #ffb454;
    background: rgba(255, 180, 84, 0.12);
    border: 1px solid rgba(255, 180, 84, 0.4);
    border-radius: 999px;
    padding: 1px 6px;
    margin-left: 5px;
    vertical-align: middle;
    line-height: 1.4;
}

/* "Akun tanpa token" hint banner under the credential textareas (account-hint.js). */
.token-hint {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin-top: 10px;
    padding: 10px 14px;
    border: 1px solid rgba(255, 180, 84, 0.4);
    background: rgba(255, 180, 84, 0.08);
    border-radius: 10px;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--text-main, #fdfdf9);
}
/* The .token-hint display:flex above would override the [hidden] attribute
   (equal specificity, later rule wins), so re-assert hidden explicitly. */
.token-hint[hidden] { display: none; }
.token-hint::before { content: "⚠️"; flex-shrink: 0; }
.token-hint-text { flex: 1; min-width: 180px; }
.token-hint-btn {
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 700;
    color: #05100d;
    background: #ffb454;
    border: none;
    border-radius: 7px;
    padding: 7px 14px;
    cursor: pointer;
    white-space: nowrap;
}
.token-hint-btn:hover { filter: brightness(1.08); }
.token-hint-btn:focus-visible { outline: 2px solid #ffb454; outline-offset: 2px; }

/* Brand logo acts as a "home" button (switches to Read Inbox). */
.brand[role="button"] { cursor: pointer; border-radius: 8px; transition: opacity 0.15s ease; }
.brand[role="button"]:hover { opacity: 0.85; }
.brand[role="button"]:focus-visible { outline: 2px solid var(--accent-mint, #00ffc2); outline-offset: 4px; }

/* ═══ Home landing (card-grid tool picker) ═══ */
.home-wrap { max-width: 1040px; margin: 0 auto; padding: 0.5rem 0 1.5rem; }
.home-hero { margin-bottom: 2.25rem; }
.home-eyebrow {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--accent-mint, #00ffc2);
    background: rgba(0,255,194,0.08); border: 1px solid rgba(0,255,194,0.22);
    padding: 5px 12px; border-radius: 999px;
}
.home-eyebrow svg { width: 13px; height: 13px; }
.home-hero h1 {
    font-family: var(--font-display, 'DM Sans', sans-serif);
    font-weight: 600; letter-spacing: -0.02em;
    font-size: clamp(1.8rem, 4.5vw, 2.8rem); line-height: 1.1;
    margin: 1rem 0 0.75rem; color: var(--text-primary, #fdfdf9);
}
.home-hero h1 .accent { color: var(--accent-mint, #00ffc2); }
.home-hero p { color: var(--text-secondary, #b9c2bd); font-size: 1rem; line-height: 1.6; max-width: 620px; margin: 0; }
.home-stats { display: flex; flex-wrap: wrap; gap: 2.2rem; margin-top: 1.75rem; }
.home-stat .n { font-size: 1.15rem; font-weight: 800; color: var(--text-primary, #fdfdf9); }
.home-stat .l { font-size: 0.78rem; color: var(--text-dim, #78827d); margin-top: 2px; }
.tool-grid-label {
    font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--text-dim, #78827d); margin: 0 0 1rem; display: flex; align-items: center; gap: 12px;
}
.tool-grid-label::after { content: ""; flex: 1; height: 1px; background: rgba(255,255,255,0.07); }
.tool-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.tool-card {
    display: flex; align-items: flex-start; gap: 14px;
    background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.07);
    border-radius: var(--radius-lg, 16px); padding: 1.1rem 1.15rem;
    text-decoration: none; position: relative; cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.tool-card:hover { transform: translateY(-3px); border-color: rgba(0,255,194,0.4); background: rgba(0,255,194,0.04); }
.tool-card .tc-ico {
    flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
    color: var(--accent-mint, #00ffc2);
    background: linear-gradient(135deg, rgba(0,255,194,0.16), rgba(32,231,183,0.06));
    border: 1px solid rgba(0,255,194,0.28);
}
.tool-card .tc-ico svg { width: 22px; height: 22px; display: block; }
.tool-card .tc-body { min-width: 0; }
.tool-card .tc-title { font-weight: 700; font-size: 0.98rem; color: var(--text-primary, #fdfdf9); display: flex; align-items: center; gap: 7px; margin-bottom: 4px; }
.tool-card .tc-desc { font-size: 0.83rem; color: var(--text-secondary, #b9c2bd); line-height: 1.45; }
.tool-card .tc-arrow { position: absolute; top: 1.1rem; right: 1.1rem; color: var(--text-dim, #78827d); font-size: 1rem; transition: transform 0.18s ease, color 0.18s ease; }
.tool-card:hover .tc-arrow { color: var(--accent-mint, #00ffc2); transform: translateX(3px); }
.tc-badge { font-size: 0.6rem; font-weight: 800; letter-spacing: 0.04em; color: #1a1200; background: var(--accent-amber, #ffcf5c); padding: 2px 7px; border-radius: 999px; }
@media (max-width: 860px) { .tool-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .tool-grid { grid-template-columns: 1fr; } }

/* Saved Accounts sidebar (+ mobile FAB/backdrop) only on the Read Inbox tab. */
body:not(:has(#section-reader.active)) .sidebar,
body:not(:has(#section-reader.active)) .sidebar-fab,
body:not(:has(#section-reader.active)) #sidebarBackdrop {
    display: none !important;
}

/* Minimal top nav (mailgen-style): tool tabs live in the home card grid, not the
   header. They stay in the DOM (just hidden) so app.js still registers them and the
   home cards (href="#reader" etc.) can switch to them. Visible nav = Dashboard, Docs, Blog. */
.nav-links .nav-link[data-section] { display: none !important; }