/* ═══════════════════════════════════════════════════════════════
   WHOIS.CX — DOMAIN INTELLIGENCE
   Bold. Gradient. Animated.
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@800;900&family=Noto+Sans+SC:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
    --bg: #030305;
    --surface: #0a0a0f;
    --surface-2: #12121a;
    --border: #1a1a25;
    --text: #ffffff;
    --text-dim: #888899;
    --text-muted: #555566;
    --blue: #3b82f6;
    --purple: #8b5cf6;
    --cyan: #06b6d4;
    --pink: #ec4899;
    --green: #10b981;
    --red: #ef4444;
    --yellow: #fbbf24;
    --gradient-main: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 50%, #ec4899 100%);
    --gradient-subtle: linear-gradient(135deg, rgba(59,130,246,0.15) 0%, rgba(139,92,246,0.15) 100%);
    --gradient-border: linear-gradient(135deg, #3b82f6, #8b5cf6, #ec4899);
    --mono: 'JetBrains Mono', 'Noto Sans SC', monospace;
    --sans: 'Space Grotesk', 'Noto Sans SC', system-ui, sans-serif;
    /* Theme-specific */
    --header-bg: rgba(3, 3, 5, 0.8);
    --overlay-bg: rgba(3, 3, 5, 0.9);
    --nav-bg: rgba(8, 8, 12, 0.97);
    --code-bg: #0a0a0f;
    --badge-bg: rgba(0, 0, 0, 0.2);
    --hover-bg: rgba(255, 255, 255, 0.05);
}

/* ── Light mode ── */
.light-mode {
    --bg: #f5f6f8;
    --surface: #ffffff;
    --surface-2: #ebedf0;
    --border: #d5d8de;
    --text: #1a1a2e;
    --text-dim: #5a5a72;
    --text-muted: #8a8aa0;
    --header-bg: rgba(255, 255, 255, 0.85);
    --overlay-bg: rgba(0, 0, 0, 0.4);
    --nav-bg: rgba(255, 255, 255, 0.97);
    --code-bg: #f0f1f3;
    --badge-bg: rgba(0, 0, 0, 0.06);
    --hover-bg: rgba(0, 0, 0, 0.04);
    --gradient-subtle: linear-gradient(135deg, rgba(59,130,246,0.08) 0%, rgba(139,92,246,0.08) 100%);
}
.light-mode::before { display: none; }
.light-mode ::selection { background: var(--blue); color: #fff; }

/* Light mode: component overrides for hardcoded rgba values */
.light-mode header { border-bottom-color: var(--border); }
.light-mode .dropdown-menu {
    background: rgba(255, 255, 255, 0.98);
    border-color: var(--border);
    box-shadow: 0 4px 6px rgba(0,0,0,0.04), 0 10px 40px rgba(0,0,0,0.1);
}
.light-mode .dropdown-menu::before {
    background: rgba(255, 255, 255, 0.98);
    border-color: var(--border);
}
.light-mode .dropdown-item { color: var(--text-dim); }
.light-mode .dropdown-item:hover { background: var(--hover-bg); color: var(--text); }
.light-mode .toast {
    box-shadow: 0 8px 32px rgba(0,0,0,0.1);
}
.light-mode .toast.success {
    background: linear-gradient(135deg, rgba(16,185,129,0.1) 0%, rgba(6,182,212,0.06) 100%);
    border-color: rgba(16,185,129,0.25);
}
.light-mode .toast.error {
    background: linear-gradient(135deg, rgba(239,68,68,0.1) 0%, rgba(236,72,153,0.06) 100%);
    border-color: rgba(239,68,68,0.25);
}
.light-mode .toast.warning {
    background: linear-gradient(135deg, rgba(245,158,11,0.1) 0%, rgba(251,191,36,0.06) 100%);
    border-color: rgba(245,158,11,0.25);
}
.light-mode .modal-box {
    box-shadow: 0 20px 40px rgba(0,0,0,0.1), 0 0 0 1px var(--border);
}
.light-mode .search-input input { border-color: var(--border); }
.light-mode .btn-main { background: #1a1a2e; color: #fff; }
.light-mode .btn-main:hover { color: #fff; }

/* Light mode: logo */
.light-mode .logo-text { color: #1a1a2e; }
.light-mode .logo-text span {
    background: var(--gradient-main);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Light mode: spinners */
.light-mode .spinner-sm {
    border-color: rgba(0, 0, 0, 0.15);
    border-top-color: var(--blue);
}

/* Light mode: box-mode nav — moved into @media (min-width: 769px) box-mode block */

/* Light mode: result sections borders */
.light-mode .domain-masthead,
.light-mode .date-row,
.light-mode .date-cell,
.light-mode .data-section,
.light-mode .raw-area {
    border-color: var(--border);
}

/* Light mode: status/NS tags */
.light-mode .ns-tag {
    background: var(--surface);
    border-color: var(--border);
}
.light-mode .status-tag {
    border-color: var(--border);
}

/* Light mode: DNS table */
.light-mode .dns-record-table th {
    border-bottom-color: var(--border);
}

/* Light mode: tag creator */
.light-mode .tag-creator-section {
    border-top-color: var(--border);
}

/* Light mode: notification items */
.light-mode .notification-item-title { color: var(--text); }
.light-mode .notification-item-body { color: var(--text-dim); }
.light-mode .notification-item-time { color: var(--text-muted); }

/* Light mode: domain cards */
.light-mode .domain-card {
    background: var(--surface);
    border-color: var(--border);
}

/* Theme toggle button */
.theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}
.theme-toggle:hover {
    border-color: var(--blue);
    color: var(--text);
    background: var(--surface);
}
.theme-toggle:active { transform: scale(0.92); }
.theme-icon-dark { display: none; }
.light-mode .theme-icon-light { display: none; }
.light-mode .theme-icon-dark { display: block; }
.light-mode .theme-toggle { border-color: var(--yellow); color: var(--yellow); }

/* Fixed bottom-right corner actions */
.page-corner-actions {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 1000;
}
.lang-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 700;
    font-family: var(--mono);
    letter-spacing: 0.5px;
}
.lang-toggle:hover {
    border-color: var(--blue);
    color: var(--text);
    background: var(--surface);
}
.lang-toggle:active { transform: scale(0.92); }

.light-mode select,
.light-mode input[type="checkbox"] { color-scheme: light; }
.light-mode .user-protocol select {
    color-scheme: light;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235a5a72' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 15px; }
html[lang="zh"] { font-size: 16px; }
body {
    font-family: var(--sans);
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    overflow-x: hidden;
}

/* Animated background */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(ellipse 80% 50% at 20% 40%, rgba(59,130,246,0.08) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 80% 60%, rgba(139,92,246,0.06) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

/* Hide background gradient during screenshot capture */
body.screenshot-mode::before {
    display: none !important;
}

::selection { background: var(--blue); color: white; }
.hidden { display: none !important; }

/* ─────────────────────────────────────────────────────────────────
   HEADER
   ───────────────────────────────────────────────────────────────── */
header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    padding: 0 24px;
    height: 56px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--header-bg);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.logo svg {
    height: 28px;
    width: 28px;
}

.logo-text {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #fff;
}

.logo-text span {
    background: var(--gradient-main);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

nav {
    display: flex;
    gap: 4px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.nav-utilities {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.auth-area {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: 8px;
}

.auth-logged-in {
    display: flex;
    align-items: center;
    gap: 12px;
}

.user-email {
    font-family: var(--mono);
    font-size: 0.7rem;
    color: var(--text-dim);
}

.user-protocol select {
    appearance: none;
    -webkit-appearance: none;
    padding: 6px 28px 6px 10px;
    font-size: 0.7rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0;
    color: var(--text);
    cursor: pointer;
    transition: all 0.2s;
    background-image: url("data:image/svg+xml,%3Csvg width='8' height='5' viewBox='0 0 8 5' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l3 3 3-3' stroke='%23888' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    color-scheme: dark;
}

.user-protocol select option {
    background: var(--bg);
    color: var(--text);
    padding: 8px;
}

.user-protocol select:hover {
    border-color: var(--blue);
    background-color: rgba(59, 130, 246, 0.1);
}

.user-protocol select:focus {
    outline: none;
    border-color: var(--blue);
}

.user-protocol {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cache-toggle {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    font-size: 0.65rem;
    color: var(--muted);
    padding: 4px 8px;
    border: 1px solid var(--border);
    background: var(--surface);
    transition: all 0.2s;
}

.cache-toggle:hover {
    border-color: var(--orange);
    color: var(--orange);
}

.cache-toggle input {
    width: 12px;
    height: 12px;
    margin: 0;
    cursor: pointer;
    accent-color: var(--orange);
}

.cache-toggle input:checked + .cache-toggle-label {
    color: var(--orange);
}

.form-error {
    margin-top: 12px;
    padding: 10px 14px;
    background: rgba(239,68,68,0.1);
    border: 1px solid rgba(239,68,68,0.3);
    color: var(--red);
    font-family: var(--mono);
    font-size: 0.75rem;
}

.role-badge {
    display: inline-block;
    padding: 4px 10px;
    font-family: var(--mono);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.role-badge.admin {
    background: linear-gradient(135deg, rgba(139,92,246,0.2) 0%, rgba(236,72,153,0.2) 100%);
    border: 1px solid rgba(139,92,246,0.3);
    color: var(--purple);
}

.role-badge.user {
    background: rgba(59,130,246,0.1);
    border: 1px solid rgba(59,130,246,0.2);
    color: var(--blue);
}

.tier-badge {
    display: inline-block;
    padding: 4px 10px;
    font-family: var(--mono);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.tier-badge.free {
    background: rgba(107,114,128,0.1);
    border: 1px solid rgba(107,114,128,0.2);
    color: var(--text-dim);
}

.tier-badge.premium {
    background: linear-gradient(135deg, rgba(251,191,36,0.2) 0%, rgba(245,158,11,0.2) 100%);
    border: 1px solid rgba(251,191,36,0.3);
    color: #f59e0b;
}

.tier-badge.enterprise {
    background: linear-gradient(135deg, rgba(16,185,129,0.2) 0%, rgba(5,150,105,0.2) 100%);
    border: 1px solid rgba(16,185,129,0.3);
    color: var(--green);
}

/* ─────────────────────────────────────────────────────────────────
   PLANS PAGE
   ───────────────────────────────────────────────────────────────── */

.plans-hero {
    text-align: center;
    margin-bottom: 40px;
}

.plans-hero h2 {
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.plans-hero h2 span {
    background: var(--gradient-main);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.plans-subtitle {
    color: var(--text-dim);
    font-size: 0.95rem;
    margin-top: 8px;
}

.billing-toggle {
    display: inline-flex;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 3px;
    margin-top: 20px;
    gap: 2px;
}

.billing-opt {
    padding: 8px 20px;
    border: none;
    background: transparent;
    color: var(--text-dim);
    cursor: pointer;
    border-radius: 6px;
    font-weight: 500;
    font-size: 0.85rem;
    transition: all 0.2s;
}

.billing-opt.active {
    background: var(--gradient-main);
    color: #fff;
}

.save-badge {
    font-size: 0.65rem;
    background: rgba(16,185,129,0.2);
    color: var(--green);
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 4px;
    font-weight: 600;
}

.plans-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 1100px;
    margin: 0 auto;
}

.plan-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 32px 28px;
    position: relative;
    display: flex;
    flex-direction: column;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.plan-card:hover {
    border-color: var(--text-muted);
}

.plan-card.featured {
    border-color: var(--blue);
    box-shadow: 0 0 0 1px var(--blue), 0 8px 32px rgba(59,130,246,0.1);
}

.plan-card.featured::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--gradient-main);
    border-radius: 12px 12px 0 0;
}

.plan-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--gradient-main);
    color: #fff;
    padding: 4px 16px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
}

.plan-name {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 4px;
}

.plan-price {
    font-size: 2.5rem;
    font-weight: 800;
    margin: 16px 0;
    line-height: 1;
}

.plan-price .currency {
    font-size: 1.2rem;
    vertical-align: super;
    font-weight: 600;
}

.plan-period {
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--text-dim);
}

.plan-desc {
    font-size: 0.8rem;
    color: var(--text-dim);
    margin-bottom: 20px;
}

.plan-features {
    list-style: none;
    padding: 0;
    margin: 0;
    flex: 1;
}

.plan-features li {
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--text);
}

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

.plan-features .feat-icon {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
}

.plan-features .feat-icon.check {
    color: var(--green);
}

.plan-features .feat-icon.cross {
    color: var(--text-muted);
    opacity: 0.4;
}

.plan-features .feat-disabled {
    color: var(--text-muted);
    opacity: 0.5;
}

.plan-cta {
    margin-top: 24px;
}

.plan-cta .btn {
    width: 100%;
    padding: 12px;
    font-size: 0.9rem;
    font-weight: 600;
    justify-content: center;
}

.plan-current-label {
    width: 100%;
    padding: 12px;
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-dim);
    font-weight: 500;
    border: 1px solid var(--border);
    border-radius: 8px;
}

@media (max-width: 900px) {
    .plans-grid {
        grid-template-columns: 1fr;
        max-width: 420px;
    }
    .plan-card.featured {
        order: -1;
    }
}

@media (min-width: 901px) and (max-width: 1100px) {
    .plans-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Tier badge in my-settings */
.tier-info {
    display: flex;
    align-items: center;
    gap: 8px;
}
.tier-badge {
    display: inline-block;
    padding: 3px 10px;
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--border);
}
.tier-badge.tier-free { color: var(--text-dim); }
.tier-badge.tier-premium { color: #f59e0b; background: rgba(245, 158, 11, 0.12); border-color: rgba(245, 158, 11, 0.3); }
.tier-badge.tier-enterprise { color: #8b5cf6; background: rgba(139, 92, 246, 0.12); border-color: rgba(139, 92, 246, 0.3); }
.tier-status { font-size: 0.8rem; color: var(--text-dim); }
.tier-status.active { color: #22c55e; }
.tier-status.canceled { color: #ef4444; }
.tier-actions { display: flex; gap: 8px; }

.badge-default {
    display: inline-block;
    padding: 2px 8px;
    font-size: 0.75rem;
    font-weight: 600;
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: var(--green);
    border-radius: 4px;
}

/* Notification Logs */
.notification-logs-stats {
    margin-bottom: 16px;
}

.notification-logs-stats .stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.notification-logs-stats .stat-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.notification-logs-stats .stat-icon {
    font-size: 1.5rem;
}

.notification-logs-stats .stat-content {
    flex: 1;
}

.notification-logs-stats .stat-title {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text);
    margin-bottom: 4px;
}

.notification-logs-stats .stat-values {
    display: flex;
    gap: 12px;
    font-size: 0.75rem;
    font-family: var(--mono);
}

.notification-logs-stats .stat-sent {
    color: var(--green);
}

.notification-logs-stats .stat-pending {
    color: var(--orange);
}

.notification-logs-stats .stat-failed {
    color: var(--red);
}

.channel-badge {
    display: inline-block;
    padding: 2px 8px;
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: 4px;
    text-transform: uppercase;
}

.channel-badge.email {
    background: rgba(59, 130, 246, 0.15);
    border: 1px solid rgba(59, 130, 246, 0.3);
    color: #3b82f6;
}

.channel-badge.telegram {
    background: rgba(34, 211, 238, 0.15);
    border: 1px solid rgba(34, 211, 238, 0.3);
    color: #22d3ee;
}

.status-badge {
    display: inline-block;
    padding: 2px 8px;
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: 4px;
    text-transform: uppercase;
}

.status-badge.sent {
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: var(--green);
}

.status-badge.pending {
    background: rgba(251, 191, 36, 0.15);
    border: 1px solid rgba(251, 191, 36, 0.3);
    color: var(--orange);
}

.status-badge.failed {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: var(--red);
}

.time-cell {
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.recipient-cell {
    font-size: 0.75rem;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
}

.error-text {
    color: var(--red);
    font-size: 0.75rem;
    cursor: help;
}

.pagination-controls {
    margin-top: 16px;
}

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.page-info {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.btn-sm {
    padding: 4px 12px;
    font-size: 0.75rem;
}

/* Hamburger — hidden on desktop */
.hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    padding: 8px 6px;
    background: none;
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
    z-index: 1001;
    transition: all 0.2s;
}
.hamburger span {
    display: block;
    height: 2px;
    background: var(--text-muted);
    border-radius: 1px;
    transition: all 0.3s ease;
}
.hamburger:hover { border-color: var(--blue); }
.hamburger:hover span { background: var(--text); }
/* X state when menu open */
.hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-btn {
    font-family: var(--mono);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    text-decoration: none;
    padding: 8px 14px;
    transition: all 0.2s;
}

.nav-btn:hover { color: var(--text-dim); }
.nav-btn.active {
    color: var(--text);
    background: var(--gradient-subtle);
}

/* ─────────────────────────────────────────────────────────────────
   HERO — Gradient title
   ───────────────────────────────────────────────────────────────── */
main { position: relative; z-index: 1; padding-top: 56px; }

.hero {
    padding: 0;
    border-bottom: 1px solid var(--border);
    display: none;
}

.hero h1 {
    font-size: clamp(3.5rem, 12vw, 7rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1;
    padding: 24px 32px 0;
}

.hero h1 span {
    background: var(--gradient-main);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-sub {
    padding: 8px 32px 16px;
    font-family: var(--mono);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    color: var(--text-muted);
}

/* ─────────────────────────────────────────────────────────────────
   SEARCH — Glowing input
   ───────────────────────────────────────────────────────────────── */
.search-area {
    padding: 0;
    border-bottom: 1px solid var(--border);
}

.search-box {
    display: flex;
}

.search-prefix {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    background: var(--gradient-main);
    font-size: 1.2rem;
    color: white;
    opacity: 0.9;
}

.search-input {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
}

.search-input input {
    width: 100%;
    padding: 24px 48px 24px 28px;
    font-family: var(--mono);
    font-size: 1.1rem;
    background: var(--surface);
    border: none;
    color: var(--text);
    outline: none;
    transition: all 0.2s;
}

.search-input input::placeholder { color: var(--text-muted); }
.search-input input:focus { background: var(--surface-2); }

.clear-btn {
    position: absolute;
    right: 12px;
    width: 28px;
    height: 28px;
    border: none;
    background: var(--surface-2);
    color: var(--text-muted);
    font-size: 1.2rem;
    line-height: 1;
    border-radius: 50%;
    cursor: pointer;
    opacity: 0;
    transition: all 0.2s;
}

.clear-btn:hover {
    background: var(--border);
    color: var(--text);
}

.search-input input:not(:placeholder-shown) ~ .clear-btn {
    opacity: 1;
}

.btn {
    font-family: var(--mono);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    padding: 24px 40px;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-main {
    background: var(--text);
    color: var(--bg);
}

.btn-main:hover {
    background: var(--gradient-main);
    color: white;
}

.btn-sec {
    background: var(--surface);
    color: var(--text-dim);
    border: 1px solid var(--border);
    padding: 10px 18px;
}

.btn-sec:hover {
    border-color: var(--blue);
    color: var(--text);
}

.btn-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: btn-spin 0.6s linear infinite;
    vertical-align: middle;
}

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

.btn-secondary {
    background: var(--surface-2);
    color: var(--text-dim);
    border: 1px solid var(--border);
}

.btn-secondary:hover {
    border-color: var(--blue);
    color: var(--text);
}

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

.btn-ghost {
    background: none;
    border: none;
    color: var(--text-muted);
    padding: 6px 12px;
    font-size: 0.65rem;
}

.btn-ghost:hover { color: var(--text); }
.btn-ghost.bad:hover { color: var(--red); }

.btn.btn-icon {
    padding: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn.btn-icon svg {
    width: 18px;
    height: 18px;
}

/* ─────────────────────────────────────────────────────────────────
   LOADING & ERROR
   ───────────────────────────────────────────────────────────────── */
.loading {
    padding: 80px 32px;
    text-align: center;
    border-bottom: 1px solid var(--border);
}

.loader {
    width: 40px;
    height: 40px;
    margin: 0 auto 16px;
    background: conic-gradient(from 0deg, transparent, var(--blue), var(--purple), var(--pink), transparent);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    position: relative;
}

.loader::after {
    content: '';
    position: absolute;
    inset: 3px;
    background: var(--bg);
    border-radius: 50%;
}

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

.loading span {
    font-family: var(--mono);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    color: var(--text-muted);
}

/* Error Card */
.error-card {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 32px;
    background: linear-gradient(135deg, rgba(239,68,68,0.08) 0%, rgba(239,68,68,0.02) 100%);
    border: 1px solid rgba(239,68,68,0.2);
    border-radius: 12px;
    margin: 20px 0;
}

.result-error-banner {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 24px 32px;
    background: linear-gradient(135deg, rgba(239,68,68,0.08) 0%, rgba(239,68,68,0.02) 100%);
    border-bottom: 1px solid rgba(239,68,68,0.2);
}

.error-icon {
    color: var(--red);
    opacity: 0.8;
    flex-shrink: 0;
}

.error-content {
    flex: 1;
}

.error-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--red);
    margin-bottom: 8px;
}

.error-message {
    font-family: var(--mono);
    font-size: 0.9rem;
    color: var(--text);
    margin-bottom: 12px;
    line-height: 1.5;
}

.error-hint {
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.6;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.error-hint code {
    background: var(--surface-2);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: var(--mono);
    font-size: 0.75rem;
}

/* ─────────────────────────────────────────────────────────────────
   RESULTS
   ───────────────────────────────────────────────────────────────── */
.result {
    animation: fadeIn 0.4s ease;
}

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

/* Domain Masthead */
.domain-masthead {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 32px;
    position: relative;
    overflow: hidden;
}

.domain-masthead::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--gradient-main);
}

.domain-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
}

.domain-big {
    font-size: clamp(2rem, 6vw, 3.5rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
    word-break: break-all;
}

.domain-big .tld {
    background: var(--gradient-main);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.idn-punycode {
    font-family: var(--mono);
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--text-dim);
    cursor: pointer;
    transition: color 0.2s;
    padding: 2px 8px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 4px;
}

.idn-punycode:hover {
    color: var(--text);
}

.idn-punycode.copied {
    color: var(--green);
}

.lookup-meta-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
    flex-wrap: wrap;
}

.lookup-info {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    color: var(--text-dim);
    margin-left: auto;
}

.domain-meta {
    display: flex;
    gap: 32px;
    flex-shrink: 0;
}

.meta-item { text-align: right; }

.meta-label {
    font-family: var(--mono);
    font-size: 0.6rem;
    letter-spacing: 0.12em;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.meta-value {
    font-family: var(--mono);
    font-size: 1.4rem;
    font-weight: 700;
}

.meta-value.good { color: var(--green); }
.meta-value.warn { color: #f59e0b; }
.meta-value.bad { color: var(--red); }

/* Timeline */
.timeline-row {
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.timeline-label {
    font-family: var(--mono);
    font-size: 0.65rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.timeline-label span {
    color: var(--text-dim);
    font-weight: 500;
}

.timeline-bar {
    flex: 1;
    height: 6px;
    background: var(--border);
    position: relative;
    overflow: hidden;
}

.timeline-progress {
    height: 100%;
    background: var(--gradient-main);
    position: relative;
    animation: progressGlow 2s ease infinite;
}

@keyframes progressGlow {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.3); }
}

.timeline-progress::after {
    content: '';
    position: absolute;
    right: 0;
    top: -3px;
    width: 12px;
    height: 12px;
    background: var(--purple);
    box-shadow: 0 0 12px var(--purple);
}

/* Date Row */
.date-row {
    display: flex;
    background: var(--border);
    gap: 1px;
}

.date-cell {
    flex: 1;
    padding: 24px 32px;
    background: var(--surface);
    transition: all 0.2s;
}

.date-cell:hover {
    background: var(--surface-2);
}

.date-cell-label {
    font-family: var(--mono);
    font-size: 0.6rem;
    letter-spacing: 0.1em;
    color: var(--text-dim);
    margin-bottom: 8px;
}

.date-cell-value {
    font-family: var(--mono);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text);
    transition: opacity 0.2s;
}

.date-cell-value:hover {
    opacity: 0.8;
}

.date-cell-value.copied {
    color: var(--green);
}

.date-cell-value .date-time {
    display: inline;
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--text-dim);
    margin-left: 6px;
}

/* Data Sections */
.data-row-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.data-row-2col .data-section:first-child {
    border-right: 1px solid var(--border);
}

.data-section {
    display: flex;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    transition: all 0.2s;
}

.data-section:hover { background: var(--surface-2); }

.data-label {
    width: 160px;
    flex-shrink: 0;
    padding: 24px 32px;
    background: linear-gradient(135deg, var(--surface-2) 0%, var(--surface) 100%);
    border-right: 1px solid var(--border);
    font-family: var(--mono);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--text-dim);
    display: flex;
    align-items: center;
}

.data-content {
    flex: 1;
    padding: 24px 32px;
}

/* Registrar */
.registrar-grid { display: flex; flex-direction: column; gap: 10px; }

.registrar-item {
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.registrar-key {
    font-family: var(--mono);
    font-size: 0.7rem;
    color: var(--text-dim);
    white-space: nowrap;
    min-width: 100px;
}

.registrar-val {
    font-family: var(--mono);
    font-size: 0.8rem;
    color: var(--text);
}

.registrar-val.clickable-link {
    color: var(--blue);
    cursor: pointer;
    border-bottom: 1px dashed var(--blue);
    transition: all 0.2s;
}

.registrar-val.clickable-link:hover {
    color: var(--cyan);
    border-bottom-color: var(--cyan);
}

.domain-tools {
    display: flex;
    flex-direction: row;
    gap: 0;
    border-bottom: 1px solid var(--border);
}

.tool-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 16px;
    background: var(--surface);
    border: none;
    border-right: 1px solid var(--border);
    color: var(--text-dim);
    font-family: var(--mono);
    font-size: 0.72rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}

.tool-btn:last-child {
    border-right: none;
}

.tool-btn:hover {
    background: var(--surface-2);
    color: var(--text);
}

.tool-btn svg {
    flex-shrink: 0;
    opacity: 0.7;
}

.tool-btn:hover svg {
    opacity: 1;
}

.tool-btn.tool-disabled,
.tool-btn:disabled {
    opacity: 0.35;
    pointer-events: none;
    cursor: not-allowed;
}

#dns-check-btn { color: var(--cyan); }
#dns-check-btn:hover { background: rgba(6,182,212,0.06); color: var(--cyan); }
#wayback-btn:hover { background: rgba(139,92,246,0.06); color: var(--purple); }
#screenshot-btn:hover { background: rgba(236,72,153,0.06); color: var(--pink); }
#download-raw-btn:hover { background: rgba(16,185,129,0.06); color: var(--green); }

.tool-btn.has-history {
    color: var(--green);
}
.tool-btn.has-history:hover {
    background: rgba(16,185,129,0.06);
}

.tool-btn.no-history {
    opacity: 0.4;
    pointer-events: none;
}

/* Wayback Modal */
.wayback-domain {
    font-family: var(--mono);
    font-size: 0.9rem;
    color: var(--blue);
    margin-bottom: 16px;
}

.wayback-loading {
    text-align: center;
    padding: 24px;
    color: var(--text-muted);
    font-size: 0.8rem;
}

.wayback-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 300px;
    overflow-y: auto;
}

.wayback-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background: var(--bg);
    border: 1px solid var(--border);
    cursor: pointer;
    transition: all 0.2s;
}

.wayback-item:hover {
    border-color: var(--blue);
    background: var(--surface-2);
}

.wayback-date {
    font-family: var(--mono);
    font-size: 0.8rem;
    color: var(--text);
}

.wayback-time {
    font-family: var(--mono);
    font-size: 0.7rem;
    color: var(--text-muted);
}

.wayback-empty {
    text-align: center;
    padding: 24px;
    color: var(--text-muted);
    font-size: 0.8rem;
}

/* DNS Records Modal */
.dns-domain {
    font-family: var(--mono);
    font-size: 1rem;
    color: var(--blue);
    margin-bottom: 16px;
    text-align: center;
}

.dns-loading {
    text-align: center;
    padding: 24px;
    color: var(--text-muted);
    font-size: 0.8rem;
}

.dns-records {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    max-height: 60vh;
    overflow-y: auto;
}

.dns-type-section {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px;
}

.dns-type-header {
    margin-bottom: 8px;
}

.dns-type-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 4px;
    font-family: var(--mono);
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--bg);
}

.dns-record-row {
    padding: 8px 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 4px;
    margin-bottom: 4px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.dns-record-row:hover {
    border-color: var(--blue);
}

.dns-record-row:last-child {
    margin-bottom: 0;
}

.dns-value {
    font-family: var(--mono);
    font-size: 0.75rem;
    color: var(--text);
    word-break: break-all;
    flex: 1;
}

.dns-priority {
    font-family: var(--mono);
    font-size: 0.7rem;
    color: var(--pink);
    background: rgba(236, 72, 153, 0.1);
    padding: 2px 6px;
    border-radius: 3px;
}

.dns-ttl {
    font-family: var(--mono);
    font-size: 0.65rem;
    color: var(--text-muted);
    margin-left: auto;
}

.dns-empty {
    text-align: center;
    padding: 24px;
    color: var(--text-muted);
    font-size: 0.8rem;
}

/* DNS Server Selector */
.dns-server-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}

.dns-server-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 500;
}

.dns-server-btns {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.dns-server-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 14px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    min-width: 80px;
}

.dns-server-btn:hover {
    background: var(--surface);
}

.dns-server-btn.active {
    background: rgba(16, 185, 129, 0.15);
}

.dns-server-name {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text);
}

.dns-server-ip {
    font-family: var(--mono);
    font-size: 0.6rem;
    color: var(--text-muted);
}

/* NS Tags */
.ns-list { display: flex; flex-wrap: wrap; gap: 8px; }

.ns-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    font-family: var(--mono);
    font-size: 0.8rem;
    color: var(--text-dim);
    transition: all 0.2s;
    cursor: pointer;
    user-select: none;
}

.ns-tag::before {
    content: '';
    width: 6px;
    height: 6px;
    background: var(--gradient-main);
    animation: pulse 2s ease infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.2); }
}

.ns-tag:hover {
    border-color: var(--blue);
    background: var(--gradient-subtle);
    transform: translateY(-2px);
}

.ns-tag.copied {
    border-color: var(--green);
    background: rgba(16,185,129,0.15);
    color: var(--green);
}

.ns-tag:active {
    transform: scale(0.97);
}

/* Status Tags */
.status-list { display: flex; flex-wrap: wrap; gap: 8px; }

.status-tag {
    padding: 8px 14px;
    background: linear-gradient(135deg, rgba(16,185,129,0.1) 0%, rgba(6,182,212,0.1) 100%);
    border: 1px solid rgba(16,185,129,0.2);
    font-family: var(--mono);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--green);
    cursor: pointer;
    user-select: none;
    transition: all 0.2s;
}

.status-tag:hover {
    background: linear-gradient(135deg, rgba(16,185,129,0.2) 0%, rgba(6,182,212,0.2) 100%);
    border-color: rgba(16,185,129,0.4);
    transform: translateY(-2px);
}

.status-tag.copied {
    background: rgba(16,185,129,0.25);
    border-color: var(--green);
}

.status-tag:active {
    transform: scale(0.97);
}

.status-tag.clickable-link::after {
    content: '\2197';
    margin-left: 4px;
    font-size: 0.6em;
    opacity: 0.5;
}

.status-tag.clickable-link:hover::after {
    opacity: 1;
}

/* Client status - green (default) */
.status-tag.status-client,
.status-item.status-client {
    background: linear-gradient(135deg, rgba(16,185,129,0.15) 0%, rgba(6,182,212,0.1) 100%);
    border-color: rgba(16,185,129,0.3);
    color: #10b981;
}

.status-tag.status-client:hover,
.status-item.status-client:hover {
    background: linear-gradient(135deg, rgba(16,185,129,0.25) 0%, rgba(6,182,212,0.2) 100%);
    border-color: rgba(16,185,129,0.5);
}

/* Server status - red (restricted/hold) */
.status-tag.status-server,
.status-item.status-server {
    background: linear-gradient(135deg, rgba(239,68,68,0.15) 0%, rgba(249,115,22,0.1) 100%);
    border-color: rgba(239,68,68,0.3);
    color: #ef4444;
}

.status-tag.status-server:hover,
.status-item.status-server:hover {
    background: linear-gradient(135deg, rgba(239,68,68,0.25) 0%, rgba(249,115,22,0.2) 100%);
    border-color: rgba(239,68,68,0.5);
}

/* Raw Section */
.raw-area {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    overflow: hidden;
}

.raw-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.raw-header .btn {
    display: flex;
    align-items: center;
    gap: 6px;
}

.raw-toggle {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 20px 32px;
    background: none;
    border: none;
    font-family: var(--mono);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s;
}

.raw-toggle:hover {
    color: var(--text);
    background: var(--surface-2);
}

.raw-toggle svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    margin-left: auto;
    transition: transform 0.3s;
}

.raw-area.open .raw-toggle {
    background: var(--gradient-main);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.raw-area.open .raw-toggle svg {
    transform: rotate(180deg);
    stroke: var(--blue);
}

.raw-content {
    display: none;
    border-top: 1px solid var(--border);
}

.raw-area.open .raw-content { display: block; }

/* Raw Tabs */
.raw-tabs {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 0 24px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
}

.raw-tab {
    padding: 12px 20px;
    background: none;
    border: none;
    font-family: var(--mono);
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: all 0.2s;
}

.raw-tab:hover {
    color: var(--text);
}

.raw-tab.active {
    color: var(--blue);
    border-bottom-color: var(--blue);
}

.raw-tab-actions {
    margin-left: auto;
}

.raw-tab-content {
    display: none;
}

.raw-tab-content.active {
    display: block;
}

.raw-code {
    padding: 24px 32px;
    background: var(--bg);
    max-height: 400px;
    overflow: auto;
}

.raw-code pre {
    font-family: var(--mono);
    font-size: 0.75rem;
    line-height: 1.7;
    color: var(--text-muted);
    white-space: pre-wrap;
    word-break: break-all;
}

/* Raw Response Section Headers (Registry vs Registrar) */
.raw-section-header {
    font-family: var(--mono);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 8px 12px;
    margin: 16px 0 8px 0;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(139, 92, 246, 0.05));
    border-left: 3px solid var(--purple);
    border-radius: 0 4px 4px 0;
    color: var(--purple);
}

.raw-section-header:first-child {
    margin-top: 0;
}

.raw-section-header.registrar {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(16, 185, 129, 0.05));
    border-left-color: var(--green);
    color: var(--green);
}

.raw-registry,
.raw-registrar {
    margin: 0 0 16px 0;
    padding: 12px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    font-family: var(--mono);
    font-size: 0.7rem;
    line-height: 1.6;
    color: var(--text-muted);
    white-space: pre-wrap;
    word-break: break-all;
}

.raw-registry {
    border-left: 2px solid var(--purple);
}

.raw-registrar {
    border-left: 2px solid var(--green);
}

/* RDAP JSON Syntax Highlighting */
.rdap-json {
    color: var(--text);
}

/* Chain Tree View */
.chain-tree {
    padding: 24px 32px;
    background: var(--bg);
    max-height: 500px;
    overflow: auto;
}

.tree-node {
    margin-left: 0;
}

.tree-node .tree-node {
    margin-left: 24px;
    border-left: 1px solid var(--border);
    padding-left: 16px;
}

.tree-item {
    padding: 8px 0;
}

.tree-header {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 6px;
    transition: background 0.15s;
}

.tree-header:hover {
    background: var(--surface-2);
}

.tree-icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    font-size: 0.7rem;
    flex-shrink: 0;
}

.tree-icon.registry {
    background: rgba(139, 92, 246, 0.15);
    color: var(--purple);
}

.tree-icon.registrar {
    background: rgba(16, 185, 129, 0.15);
    color: var(--green);
}

.tree-icon.registrant {
    background: rgba(59, 130, 246, 0.15);
    color: var(--blue);
}

.tree-icon.domain {
    background: rgba(251, 191, 36, 0.15);
    color: var(--yellow);
}

.tree-icon.nameserver {
    background: rgba(100, 116, 139, 0.15);
    color: var(--text-muted);
}

.tree-label {
    font-family: var(--mono);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text);
}

.tree-value {
    font-family: var(--mono);
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-left: auto;
}

.tree-children {
    margin-top: 4px;
}

.tree-field {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 4px 12px 4px 42px;
    font-family: var(--mono);
    font-size: 0.7rem;
}

.tree-field-key {
    color: var(--text-muted);
    min-width: 120px;
}

.tree-field-value {
    color: var(--text);
    word-break: break-all;
}

.tree-field-value.muted {
    color: var(--text-muted);
    font-style: italic;
}

.tree-section {
    margin-bottom: 16px;
}

.tree-section-title {
    font-family: var(--mono);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    text-transform: uppercase;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 8px;
}

/* Hierarchy Tree (Chain of Trust) */
.hierarchy-tree {
    padding: 20px 24px;
}

.hierarchy-node {
    position: relative;
    margin-bottom: 0;
}

.hierarchy-connector {
    display: flex;
    align-items: center;
    padding-left: 24px;
    height: 32px;
}

.hierarchy-node.level-0 .hierarchy-connector {
    display: none;
}

.connector-line {
    width: 2px;
    height: 100%;
    background: linear-gradient(180deg, var(--border) 0%, var(--purple) 100%);
    margin-right: 12px;
}

.hierarchy-node.level-1 .connector-line { background: linear-gradient(180deg, var(--purple) 0%, var(--green) 100%); }
.hierarchy-node.level-2 .connector-line { background: linear-gradient(180deg, var(--green) 0%, var(--blue) 100%); }
.hierarchy-node.level-3 .connector-line { background: linear-gradient(180deg, var(--blue) 0%, var(--yellow) 100%); }
.hierarchy-node.level-4 .connector-line { background: linear-gradient(180deg, var(--yellow) 0%, var(--text-muted) 100%); }

.connector-label {
    font-family: var(--mono);
    font-size: 0.6rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--bg);
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px dashed var(--border);
}

.hierarchy-content {
    margin-left: 24px;
    padding: 12px 16px;
    background: var(--surface);
    border-radius: 8px;
    border: 1px solid var(--border);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.hierarchy-content:hover {
    border-color: var(--text-muted);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.hierarchy-node.level-0 .hierarchy-content { border-left: 3px solid var(--purple); margin-left: 0; }
.hierarchy-node.level-1 .hierarchy-content { border-left: 3px solid var(--green); }
.hierarchy-node.level-2 .hierarchy-content { border-left: 3px solid var(--blue); }
.hierarchy-node.level-3 .hierarchy-content { border-left: 3px solid var(--yellow); }
.hierarchy-node.level-4 .hierarchy-content { border-left: 3px solid var(--text-muted); }

.hierarchy-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.hierarchy-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-size: 0.8rem;
    flex-shrink: 0;
}

.hierarchy-icon.registry { background: rgba(139, 92, 246, 0.15); color: var(--purple); }
.hierarchy-icon.registrar { background: rgba(16, 185, 129, 0.15); color: var(--green); }
.hierarchy-icon.registrant { background: rgba(59, 130, 246, 0.15); color: var(--blue); }
.hierarchy-icon.domain { background: rgba(251, 191, 36, 0.15); color: var(--yellow); }
.hierarchy-icon.nameserver { background: rgba(100, 116, 139, 0.15); color: var(--text-muted); }
.hierarchy-icon.status { background: rgba(100, 116, 139, 0.1); color: var(--text-muted); }

.hierarchy-title {
    font-family: var(--mono);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text);
}

.hierarchy-badge {
    font-family: var(--mono);
    font-size: 0.6rem;
    padding: 2px 8px;
    border-radius: 4px;
    background: rgba(139, 92, 246, 0.15);
    color: var(--purple);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.hierarchy-badge.secondary {
    background: rgba(100, 116, 139, 0.15);
    color: var(--text-muted);
}

.hierarchy-details {
    padding-left: 34px;
}

.hierarchy-field {
    font-family: var(--mono);
    font-size: 0.7rem;
    padding: 3px 0;
    display: flex;
    gap: 8px;
}

.hierarchy-field .field-label {
    color: var(--text-muted);
    min-width: 100px;
}

.hierarchy-field .field-value {
    color: var(--text);
    word-break: break-all;
}

.nameserver-list,
.status-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.nameserver-item,
.status-item {
    font-family: var(--mono);
    font-size: 0.65rem;
    padding: 4px 10px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    color: var(--text-muted);
}

.nameserver-item:hover,
.status-item:hover {
    background: rgba(0, 0, 0, 0.3);
    color: var(--text);
}

/* ─────────────────────────────────────────────────────────────────
   BOX MODE — Compact result view (desktop toggle)
   ───────────────────────────────────────────────────────────────── */

/* Toggle button — in header auth-area */
.view-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}
.view-toggle:hover {
    border-color: var(--blue);
    color: var(--text);
    background: var(--surface);
}
.view-toggle:active { transform: scale(0.92); }
.view-toggle .view-icon-expand { display: none; }
body.box-mode .view-toggle .view-icon-compact { display: none; }
body.box-mode .view-toggle .view-icon-expand { display: block; }
body.box-mode .view-toggle { border-color: var(--blue); color: var(--blue); }

/* === Box mode overrides (desktop only) === */
@media (min-width: 769px) {
    body.box-mode main {
        max-width: 580px;
        margin: 0 auto;
    }
    /* Header — compact, centered in box */
    body.box-mode header {
        max-width: 580px;
        margin: 0 auto;
        height: 44px;
        padding: 0 12px;
        flex-wrap: nowrap;
        z-index: 10001;
        overflow: visible;
    }
    body.box-mode .hamburger {
        display: flex;
        order: 3;
        margin-left: 8px;
    }
    body.box-mode .nav-utilities {
        gap: 6px;
        order: 2;
        margin-left: auto;
    }
    body.box-mode header > .auth-area { display: none; }
    /* Nav — compact dropdown anchored to right, below hamburger */
    body.box-mode nav {
        position: absolute;
        top: 100%;
        right: 0;
        left: auto;
        transform: none;
        width: 220px;
        max-height: 0;
        overflow: hidden;
        z-index: 1000;
        background: var(--nav-bg);
        backdrop-filter: blur(24px);
        -webkit-backdrop-filter: blur(24px);
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 0;
        transition: max-height 0.3s ease, padding 0.3s ease;
        border-radius: 0 0 10px 10px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-top: none;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    }
    body.box-mode nav.menu-open {
        max-height: calc(100vh - 60px);
        padding: 6px 0;
        overflow-y: auto;
    }
    body.box-mode .nav-btn {
        display: flex;
        align-items: center;
        padding: 8px 14px;
        font-size: 0.75rem;
        color: var(--text-dim);
        border-bottom: none;
        white-space: nowrap;
    }
    body.box-mode .nav-btn:hover {
        color: var(--text);
        background: rgba(255, 255, 255, 0.05);
    }
    body.box-mode .nav-btn.active {
        color: var(--blue);
        border-left: 2px solid var(--blue);
        padding-left: 12px;
    }
    body.box-mode .nav-dropdown { width: 100%; }
    body.box-mode .dropdown-toggle { width: 100%; justify-content: space-between; }
    body.box-mode .nav-dropdown .dropdown-menu {
        position: static;
        transform: none;
        opacity: 1;
        visibility: visible;
        background: rgba(0, 0, 0, 0.15);
        backdrop-filter: none;
        border: none;
        border-radius: 0;
        box-shadow: none;
        min-width: 0;
        padding: 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
        display: flex;
        flex-wrap: wrap;
    }
    body.box-mode .dropdown-menu::before { display: none; }
    body.box-mode .nav-dropdown:hover .dropdown-menu { max-height: 0; transform: none; }
    body.box-mode .nav-dropdown.open .dropdown-menu { max-height: 500px; transform: none; }
    body.box-mode .dropdown-item {
        width: 50%;
        padding: 7px 10px;
        font-size: 0.7rem;
        color: var(--text-dim);
        border-radius: 0;
        box-sizing: border-box;
    }
    body.box-mode .dropdown-item:hover {
        color: var(--text);
        background: rgba(255, 255, 255, 0.05);
        transform: none;
    }
    body.box-mode .nav-dropdown.open::before { display: none; }
    /* Separator between main items and auth */
    body.box-mode nav .auth-area {
        padding: 4px 0;
        margin-top: 2px;
        border-top: 1px solid rgba(255, 255, 255, 0.06);
    }
    body.box-mode nav .auth-area .auth-logged-in {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 8px;
        padding: 4px 8px 4px 0;
    }
    body.box-mode nav .auth-area .user-email {
        font-size: 0.65rem;
        color: var(--text-muted);
        margin-right: auto;
    }
    /* view-toggle no longer in nav .auth-area, it's in .nav-utilities */
    body.box-mode nav .auth-area .btn {
        font-size: 0.65rem;
        padding: 4px 10px;
    }
    /* Light mode overrides for box-mode nav */
    body.light-mode.box-mode nav {
        border-color: var(--border);
        background: var(--nav-bg);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    }
    body.light-mode.box-mode .nav-btn { color: var(--text-dim); }
    body.light-mode.box-mode .nav-btn:hover { background: var(--hover-bg); color: var(--text); }
    body.light-mode.box-mode .nav-dropdown .dropdown-menu { background: rgba(0, 0, 0, 0.05); }
    body.light-mode.box-mode .dropdown-item { color: var(--text-dim); }
    body.light-mode.box-mode .dropdown-item:hover { background: var(--hover-bg); color: var(--text); }
    body.light-mode.box-mode nav .auth-area { border-top-color: var(--border); }

    body.box-mode main { padding-top: 44px; }

    /* Masthead */
    body.box-mode .domain-masthead { padding: 12px 16px; }
    body.box-mode .domain-big { font-size: clamp(1.2rem, 3.5vw, 1.8rem); }
    body.box-mode .domain-top { gap: 8px; }
    body.box-mode .domain-meta { gap: 12px; }
    body.box-mode .meta-label { font-size: 0.48rem; }
    body.box-mode .meta-value { font-size: 0.9rem; }
    body.box-mode .lookup-meta-row { margin-top: 6px; gap: 4px; }
    body.box-mode .timeline-row { padding: 6px 0 0; gap: 6px; }
    body.box-mode .timeline-label { font-size: 0.5rem; }
    body.box-mode .pricing-row { padding: 3px 6px; margin-top: 4px; }

    /* Dates */
    body.box-mode .date-cell { padding: 10px 12px; }
    body.box-mode .date-cell-label { font-size: 0.48rem; margin-bottom: 2px; }
    body.box-mode .date-cell-value { font-size: 0.75rem; }
    body.box-mode .date-cell-value .date-time {
        font-size: 0.6rem;
    }

    /* Data sections */
    body.box-mode .data-label { width: 80px; padding: 8px 10px; font-size: 0.52rem; }
    body.box-mode .data-content { padding: 8px 10px; }

    /* Registrar */
    body.box-mode .registrar-grid { gap: 2px; }
    body.box-mode .registrar-key { min-width: 60px; font-size: 0.58rem; }
    body.box-mode .registrar-val { font-size: 0.65rem; }

    /* Tools */
    body.box-mode .tool-btn {
        padding: 7px 4px;
        font-size: 0.55rem;
        gap: 3px;
    }
    body.box-mode .tool-btn svg { width: 11px; height: 11px; }

    /* NS + Status tags */
    body.box-mode .ns-list { gap: 3px; }
    body.box-mode .ns-tag { padding: 4px 8px; font-size: 0.65rem; gap: 4px; }
    body.box-mode .ns-tag::before { width: 3px; height: 3px; }
    body.box-mode .status-list { gap: 3px; }
    body.box-mode .status-tag { padding: 3px 6px; font-size: 0.55rem; }

    /* Raw */
    body.box-mode .raw-toggle { padding: 8px 12px; font-size: 0.55rem; }
    body.box-mode .raw-code { padding: 8px 12px; }
    body.box-mode .raw-code pre { font-size: 0.6rem; line-height: 1.4; }

    /* Tags */
    body.box-mode .result-tags { margin-left: 8px; gap: 3px; }
    body.box-mode .result-tags .tag-badge { font-size: 0.6rem; padding: 3px 8px; }

    /* ── My Domains / Monitors compact ── */

    /* Page header */
    body.box-mode .my-domains-header {
        padding: 14px 16px;
        gap: 12px;
        margin-bottom: 16px;
        border-radius: 12px;
    }
    body.box-mode .my-domains-title { gap: 10px; }
    body.box-mode .my-domains-title .title-icon {
        width: 36px; height: 36px;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
    }
    body.box-mode .my-domains-title .title-icon svg { width: 18px; height: 18px; }
    body.box-mode .my-domains-title h2 { font-size: 1.1rem; }
    body.box-mode .my-domains-title .subtitle { font-size: 0.75rem; margin-top: 2px; }
    body.box-mode .my-domains-actions { gap: 8px; }
    body.box-mode .action-btn {
        padding: 7px 12px;
        font-size: 0.78rem;
        border-radius: 8px;
        gap: 6px;
    }
    body.box-mode .action-btn svg { width: 14px; height: 14px; }
    body.box-mode .action-btn.large { padding: 10px 20px; font-size: 0.85rem; border-radius: 10px; }
    body.box-mode .filter-select {
        padding: 7px 32px 7px 12px;
        font-size: 0.78rem;
        border-radius: 8px;
        min-width: 120px;
        background-position: right 10px center;
    }

    /* Stats bar */
    body.box-mode .my-domains-stats { gap: 8px; margin-bottom: 16px; }
    body.box-mode .stat-item {
        padding: 10px 8px;
        border-radius: 10px;
        gap: 3px;
    }
    body.box-mode .stat-item:hover { transform: none; }
    body.box-mode .stat-value { font-size: 1.3rem; }
    body.box-mode .stat-label { font-size: 0.65rem; }

    /* Domain grid */
    body.box-mode .domains-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    /* Domain card */
    body.box-mode .domain-card {
        border-radius: 12px;
    }
    body.box-mode .domain-card::before { border-radius: 12px; }
    body.box-mode .domain-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(59, 130, 246, 0.2);
    }
    body.box-mode .domain-card-header {
        padding: 12px 12px 8px;
        gap: 8px;
    }
    body.box-mode .domain-card-name { font-size: 0.9rem; line-height: 1.2; }
    body.box-mode .domain-card-tld { font-size: 0.6rem; padding: 3px 8px; border-radius: 6px; }
    body.box-mode .domain-card-tags {
        padding: 0 12px 8px;
        gap: 4px;
        min-height: 0;
    }
    body.box-mode .domain-card-tags .tag-badge { font-size: 0.6rem; padding: 3px 8px; }
    body.box-mode .domain-card-info-item {
        padding: 8px 12px;
        gap: 3px;
    }
    body.box-mode .domain-card-info-label { font-size: 0.58rem; }
    body.box-mode .domain-card-info-value { font-size: 0.78rem; }
    body.box-mode .verification-badge { font-size: 0.55rem; padding: 2px 7px; }

    /* Empty state */
    body.box-mode .domains-empty {
        padding: 40px 20px;
        border-radius: 16px;
    }
    body.box-mode .domains-empty .empty-illustration { margin-bottom: 16px; }
    body.box-mode .domains-empty .empty-illustration svg { width: 72px; height: 72px; }
    body.box-mode .domains-empty h3 { font-size: 1.1rem; }
    body.box-mode .domains-empty p { font-size: 0.85rem; margin-bottom: 20px; }

    /* Monitors compact */
    body.box-mode .monitors-container { padding: 20px 16px; }
    body.box-mode .monitors-header { margin-bottom: 16px; gap: 10px; }
    body.box-mode .monitors-title { gap: 10px; }
    body.box-mode .monitors-title .title-icon {
        width: 36px; height: 36px;
        border-radius: 8px;
    }
    body.box-mode .monitors-title .title-icon svg { width: 18px; height: 18px; }
    body.box-mode .monitors-title h2 { font-size: 1.1rem; }
    body.box-mode .monitors-title .subtitle { font-size: 0.75rem; margin-top: 2px; }
    body.box-mode .monitors-stats { gap: 8px; margin-bottom: 12px; }
    body.box-mode .monitors-stats .stat-item { padding: 10px 8px; border-radius: 10px; gap: 3px; }
    body.box-mode .monitors-stats .stat-value { font-size: 1.3rem; }
    body.box-mode .monitors-stats .stat-label { font-size: 0.65rem; }
    body.box-mode .monitors-tier-bar { padding: 8px 14px; border-radius: 8px; font-size: 0.8rem; }
    body.box-mode .monitor-card {
        border-radius: 12px;
        padding: 12px;
    }
    body.box-mode .monitor-card-header { margin-bottom: 8px; }
    body.box-mode .monitor-domain { font-size: 0.9rem; }
    body.box-mode .monitor-status { font-size: 0.65rem; padding: 3px 8px; }
    body.box-mode .monitor-meta { gap: 8px; margin-bottom: 8px; font-size: 0.78rem; }
    body.box-mode .monitor-types { gap: 4px; margin-bottom: 8px; }
    body.box-mode .monitor-type-badge { font-size: 0.62rem; padding: 2px 6px; border-radius: 6px; }
    body.box-mode .monitor-card-actions { margin-top: 8px; padding-top: 8px; gap: 4px; }
    body.box-mode .monitor-card-actions .icon-btn { width: 28px; height: 28px; }
    body.box-mode .monitor-card-actions .icon-btn svg { width: 14px; height: 14px; }

    /* ── Admin table sections compact ── */
    body.box-mode .section { padding: 14px 12px; }
    body.box-mode .section-bar { margin-bottom: 12px; padding-bottom: 8px; }
    body.box-mode .section-bar h3 { font-size: 0.9rem; }
    body.box-mode .search-input-sm { padding: 6px 8px; width: 120px; font-size: 0.72rem; }
    body.box-mode .pagesize-sel { padding: 6px 24px 6px 8px; font-size: 0.72rem; }

    /* ── Tables in compact mode ── */
    body.box-mode .tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    body.box-mode th { padding: 7px 8px; font-size: 0.5rem; white-space: nowrap; }
    body.box-mode td { padding: 7px 8px; font-size: 0.72rem; }
    body.box-mode .tbl-actions { white-space: nowrap; }
    body.box-mode .tbl-actions .btn { padding: 3px 6px; font-size: 0.62rem; }

    /* ── Settings pages compact ── */
    body.box-mode .settings-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    body.box-mode .settings-card {
        padding: 12px;
    }
    body.box-mode .settings-card h4 { font-size: 0.82rem; margin-bottom: 3px; }
    body.box-mode .card-desc {
        font-size: 0.6rem;
        margin-bottom: 10px;
        padding-bottom: 8px;
    }
    body.box-mode .settings-actions { margin-top: 12px; }
    body.box-mode .section h3 { font-size: 0.95rem; }

    /* Form fields */
    body.box-mode .field { margin-bottom: 8px; }
    body.box-mode .field label { font-size: 0.52rem; margin-bottom: 4px; }
    body.box-mode .field input,
    body.box-mode .field select,
    body.box-mode .field textarea {
        padding: 7px 10px;
        font-size: 0.75rem;
        border-radius: 5px;
    }
    body.box-mode .field-hint { font-size: 0.58rem; margin-top: 3px; }
    body.box-mode .field-check { gap: 6px; margin-top: 8px; }
    body.box-mode .field-check input { width: 14px; height: 14px; }
    body.box-mode .field-check label { font-size: 0.75rem; }
    body.box-mode .field-check-group { gap: 3px; }
    body.box-mode .field-check-group .field-hint { padding-left: 20px; }
    body.box-mode .field-code { font-size: 0.78rem; padding: 6px 10px; }
    body.box-mode .checkbox-group { gap: 8px; }
    body.box-mode .checkbox-inline { font-size: 0.72rem; gap: 4px; }
    body.box-mode .checkbox-inline input { width: 13px; height: 13px; }

    /* Notification channels (my-settings) */
    body.box-mode .notification-channel { padding: 10px; border-radius: 8px; }
    body.box-mode .notification-channel-name { font-size: 0.82rem; gap: 8px; }
    body.box-mode .notification-channel-name svg { width: 15px; height: 15px; }
    body.box-mode .notification-channel-hint { font-size: 0.72rem; }
    body.box-mode .toggle-switch { width: 38px; height: 20px; }
    body.box-mode .toggle-slider:before { width: 16px; height: 16px; }
    body.box-mode .toggle-switch input:checked + .toggle-slider:before { transform: translateX(18px); }
    body.box-mode .telegram-connect-steps { font-size: 0.78rem; }
    body.box-mode .telegram-connect-steps ol { gap: 4px; padding-left: 18px; }
    body.box-mode .telegram-code-value { font-size: 1.1rem; }

    /* IP restriction */
    body.box-mode .ip-restriction-fields { grid-template-columns: 1fr; gap: 10px; padding-top: 10px; margin-top: 10px; }
    body.box-mode .ip-restriction-info { padding: 8px 12px; gap: 8px; font-size: 0.78rem; }

    /* Test email row */
    body.box-mode .test-email-row { gap: 8px; }
    body.box-mode .test-email-row input { font-size: 0.82rem; }
}

/* ─────────────────────────────────────────────────────────────────
   TABLES
   ───────────────────────────────────────────────────────────────── */
.section {
    padding: 48px 32px;
}

.section-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 32px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border);
}

.section-bar h3 {
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    text-transform: uppercase;
}

.table-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.checkbox-inline {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.75rem;
    color: var(--text-dim);
    cursor: pointer;
    white-space: nowrap;
}

.checkbox-inline input[type="checkbox"] {
    width: 14px;
    height: 14px;
    accent-color: var(--blue);
    cursor: pointer;
}

.search-input-sm {
    padding: 10px 14px;
    font-family: var(--mono);
    font-size: 0.75rem;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
    width: 200px;
    transition: all 0.2s;
}

.search-input-sm:focus {
    outline: none;
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(59,130,246,0.1);
}

.search-input-sm::placeholder {
    color: var(--text-muted);
}

.pagesize-sel {
    padding: 10px 32px 10px 14px;
    font-family: var(--mono);
    font-size: 0.7rem;
    background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center;
    border: 1px solid var(--border);
    color: var(--text-dim);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

.pagesize-sel:focus {
    outline: none;
    border-color: var(--blue);
}

.table-info {
    font-family: var(--mono);
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-bottom: 12px;
    padding: 8px 0;
}

.table-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px;
    border-top: 1px solid var(--border);
    background: var(--surface);
}

.table-pagination button {
    padding: 8px 14px;
    font-family: var(--mono);
    font-size: 0.7rem;
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text-dim);
    cursor: pointer;
    transition: all 0.2s;
}

.table-pagination button:hover:not(:disabled) {
    border-color: var(--blue);
    color: var(--blue);
}

.table-pagination button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.table-pagination .page-info {
    font-family: var(--mono);
    font-size: 0.7rem;
    color: var(--text-muted);
    padding: 0 12px;
}

.tbl-wrap {
    border: 1px solid var(--border);
    overflow: hidden;
}

table { width: 100%; border-collapse: collapse; }

th {
    padding: 14px 18px;
    font-family: var(--mono);
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    text-align: left;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

td {
    padding: 16px 18px;
    font-size: 0.9rem;
    color: var(--text-dim);
    border-bottom: 1px solid var(--border);
    transition: all 0.15s;
}

tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--surface); }

td code {
    font-family: var(--mono);
    font-size: 0.8rem;
    background: var(--gradient-main);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.tbl-actions { display: flex; gap: 6px; justify-content: flex-end; }

.filter-sel {
    padding: 10px 32px 10px 14px;
    font-family: var(--mono);
    font-size: 0.7rem;
    color: var(--text-dim);
    background: var(--surface);
    border: 1px solid var(--border);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23555566' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    cursor: pointer;
    transition: all 0.2s;
}

.filter-sel:focus {
    outline: none;
    border-color: var(--blue);
}

/* ─────────────────────────────────────────────────────────────────
   MODALS
   ───────────────────────────────────────────────────────────────── */
.modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: var(--overlay-bg);
    backdrop-filter: blur(8px);
}

.modal.hidden { display: none; }

.modal-box {
    width: 100%;
    max-width: 440px;
    max-height: calc(100vh - 48px);
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    position: relative;
    animation: modalIn 0.3s ease;
}

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

.modal-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--gradient-main);
}

.modal-top {
    padding: 20px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.modal-top h2 {
    font-size: 1rem;
    font-weight: 600;
}

.modal-body {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
    -webkit-overflow-scrolling: touch;
}

.modal-foot {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 20px;
    background: var(--surface-2);
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}

.modal-link {
    text-align: center;
    padding: 12px 20px;
    font-size: 0.75rem;
    color: var(--text-muted);
    border-top: 1px solid var(--border);
}

.modal-link a {
    color: var(--purple);
    text-decoration: none;
    font-weight: 500;
}

.modal-link a:hover {
    text-decoration: underline;
}

/* Wide modal for TLD rules */
.modal-wide {
    max-width: 700px;
}

.tld-rules-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

.rule-row {
    display: grid;
    grid-template-columns: 140px 1fr 100px 60px 40px;
    gap: 8px;
    align-items: center;
    padding: 12px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 4px;
}

.rule-row select,
.rule-row input {
    padding: 8px 10px;
    font-family: var(--mono);
    font-size: 0.75rem;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border);
    outline: none;
}

.rule-row select:focus,
.rule-row input:focus {
    border-color: var(--blue);
}

.rule-row input.pattern-input {
    font-size: 0.7rem;
}

.rule-row .btn-icon {
    padding: 6px;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rule-row .btn-icon:hover {
    border-color: var(--red);
    color: var(--red);
}

.rule-row-header {
    display: grid;
    grid-template-columns: 140px 1fr 100px 60px 40px;
    gap: 8px;
    padding: 0 12px 8px;
    font-family: var(--mono);
    font-size: 0.55rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    text-transform: uppercase;
}

.btn-sm {
    padding: 8px 12px;
    font-size: 0.7rem;
}

.field { margin-bottom: 16px; }
.field:last-of-type { margin-bottom: 0; }

.field label {
    display: block;
    font-family: var(--mono);
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.field input,
.field select,
.field textarea {
    width: 100%;
    padding: 14px 16px;
    font-family: var(--mono);
    font-size: 0.9rem;
    color: var(--text);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    outline: none;
    transition: all 0.2s;
}

.field textarea {
    resize: vertical;
    min-height: 80px;
    line-height: 1.5;
}

.field input::placeholder,
.field textarea::placeholder { color: var(--text-muted); }

.field input:focus,
.field select:focus,
.field textarea:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(59,130,246,0.1);
}

.field-hint {
    display: block;
    margin-top: 6px;
    font-size: 0.7rem;
    color: var(--text-muted);
}

.field-check {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
}

.field-check input {
    width: 18px;
    height: 18px;
    accent-color: var(--blue);
}

.field-check label {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text);
    letter-spacing: 0;
}

.status-badge { font-size: 0.8em; font-weight: 600; }
.status-ok { color: #4caf50; }
.status-err { color: #f44336; }

.field-check-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.field-check-group .field-hint {
    margin: 0;
    padding-left: 28px;
}

.checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 20px;
    margin-top: 6px;
}

.checkbox-inline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--text);
}

.checkbox-inline input {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Test Email Section */
.field-test-email {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.field-test-email > label {
    display: block;
    margin-bottom: 10px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-dim);
}

.test-email-row {
    display: flex;
    gap: 10px;
}

.test-email-row input {
    flex: 1;
    padding: 10px 14px;
    font-size: 0.9rem;
    font-family: var(--mono);
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.test-email-row input:focus {
    outline: none;
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(59,130,246,0.1);
}

.test-email-row button {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.field-test-email .field-hint {
    min-height: 1.2em;
}

.field-test-email .field-hint.success {
    color: var(--green);
}

.field-test-email .field-hint.error {
    color: var(--red);
}

/* ─────────────────────────────────────────────────────────────────
   COMPARE MODE
   ───────────────────────────────────────────────────────────────── */

/* Compare toggle (in page-corner-actions) */
.compare-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}
.compare-toggle:hover { border-color: var(--blue); color: var(--text); background: var(--surface); }
.compare-toggle:active { transform: scale(0.92); }
.compare-toggle.active { border-color: var(--purple); color: var(--purple); background: rgba(139, 92, 246, 0.08); }

/* "Add to Compare" button on result card */
.btn-add-compare {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    font-family: var(--mono);
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-dim);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    flex-shrink: 0;
}
.btn-add-compare:hover { color: var(--blue); border-color: var(--blue); }
.btn-add-compare.added {
    color: var(--green);
    border-color: var(--green);
    pointer-events: none;
}

/* Drag affordance on masthead */
.domain-masthead.compare-draggable { cursor: grab; }
.domain-masthead.compare-draggable:active { cursor: grabbing; }
.domain-masthead.dragging { opacity: 0.5; transform: scale(0.98); transition: all 0.2s; }

/* ── Compare Tray (sticky bottom bar) ── */
.compare-tray {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 200;
    background: var(--surface);
    border-top: 1px solid var(--border);
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.2);
    padding: 10px 24px;
    transform: translateY(0);
    transition: transform 0.3s ease, opacity 0.3s ease;
}
.compare-tray.compare-tray--empty {
    transform: translateY(100%);
    pointer-events: none;
    opacity: 0;
}
.compare-tray-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 1200px;
    margin: 0 auto;
    flex-wrap: wrap;
}
.compare-tray-label {
    font-family: var(--mono);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--text-dim);
    text-transform: uppercase;
    white-space: nowrap;
    flex-shrink: 0;
}
.compare-tray-chips {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    flex-wrap: wrap;
    min-height: 32px;
    padding: 4px;
    border-radius: 8px;
    transition: all 0.2s;
}
.compare-tray.drag-over .compare-tray-chips {
    background: rgba(59, 130, 246, 0.08);
    outline: 2px dashed var(--blue);
    outline-offset: -2px;
}
.compare-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 20px;
    font-family: var(--mono);
    font-size: 0.75rem;
    color: var(--text);
    border-left: 3px solid var(--chip-color, var(--blue));
    animation: chipIn 0.2s ease;
}
@keyframes chipIn {
    from { transform: scale(0.8); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}
.chip-remove {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-dim);
    font-size: 0.9rem;
    line-height: 1;
    padding: 0 2px;
    transition: color 0.2s;
}
.chip-remove:hover { color: var(--red, #ef4444); }
.compare-tray-add {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-shrink: 0;
}
.compare-tray-add input {
    padding: 6px 12px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font-family: var(--mono);
    font-size: 0.8rem;
    width: 160px;
    transition: border-color 0.2s;
}
.compare-tray-add input:focus { border-color: var(--blue); outline: none; }

/* ── Compare Result Area ── */
.compare-result-area { animation: fadeIn 0.4s ease; }
.compare-result-back {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}
.compare-title {
    font-family: var(--mono);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--text-dim);
}

/* ── Card Row Layout ── */
.compare-cards-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 8px;
    padding-bottom: 80px;
}
.compare-cards-scroll::-webkit-scrollbar { height: 6px; }
.compare-cards-scroll::-webkit-scrollbar-track { background: transparent; }
.compare-cards-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.compare-cards-row {
    display: inline-flex;
    gap: 1px;
    background: var(--border);
    border-radius: 12px;
    overflow: hidden;
    min-width: 100%;
}
.compare-card {
    width: clamp(280px, 30vw, 400px);
    flex-shrink: 0;
    scroll-snap-align: start;
    background: var(--surface);
    display: flex;
    flex-direction: column;
    position: relative;
}
.compare-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--card-color, var(--blue));
}
.compare-card-header {
    padding: 20px 24px 16px;
    position: relative;
}
.compare-card-remove {
    position: absolute;
    top: 10px; right: 10px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-dim);
    font-size: 1.1rem;
    opacity: 0.4;
    transition: opacity 0.2s, color 0.2s;
    line-height: 1;
}
.compare-card-remove:hover { opacity: 1; color: var(--red, #ef4444); }

.compare-domain-name {
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    word-break: break-all;
}
.compare-domain-name .tld {
    background: var(--gradient-main);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.compare-protocol {
    display: inline-block;
    font-family: var(--mono);
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    padding: 2px 8px;
    border-radius: 4px;
    margin-top: 8px;
}
.compare-protocol.rdap { color: var(--green); border: 1px solid rgba(16, 185, 129, 0.3); }
.compare-protocol.whois { color: var(--purple); border: 1px solid rgba(139, 92, 246, 0.3); }
.compare-protocol.hybrid { color: var(--pink); border: 1px solid rgba(236, 72, 153, 0.3); }

.compare-section-label {
    font-family: var(--mono);
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--text-dim);
    padding: 8px 24px;
    background: var(--surface-2);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

/* Card fields (vertical stacked) */
.compare-field {
    padding: 12px 24px;
    border-bottom: 1px solid var(--border);
    font-family: var(--mono);
    font-size: 0.85rem;
    color: var(--text);
    transition: background 0.2s;
}
.compare-field:last-child { border-bottom: none; }
.compare-field:hover { background: var(--surface-2); }
.compare-field .cell-label {
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin-bottom: 4px;
}
.compare-field .cell-value { word-break: break-all; }
.compare-field .cell-sub {
    font-size: 0.7rem;
    color: var(--text-dim);
    margin-top: 2px;
}

/* Diff highlighting */
.compare-field.diff { background: rgba(139, 92, 246, 0.05); }
.compare-field.diff-better { background: rgba(16, 185, 129, 0.06); }
.compare-field.diff-worse { background: rgba(239, 68, 68, 0.05); }

.compare-card-error {
    color: var(--text-dim);
    font-style: italic;
    text-align: center;
    padding: 48px 24px;
    font-family: var(--mono);
    font-size: 0.85rem;
}

/* Array diffs (tags) */
.compare-tag {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 4px;
    margin: 2px;
    font-size: 0.7rem;
    font-weight: 500;
}
.compare-tag.shared { background: var(--surface-2); color: var(--text-dim); }
.compare-tag.unique { background: rgba(139, 92, 246, 0.1); color: var(--purple); border: 1px solid rgba(139, 92, 246, 0.25); }

/* ─────────────────────────────────────────────────────────────────
   RESPONSIVE
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    header {
        padding: 0 16px;
        height: 48px;
        flex-wrap: nowrap;
        gap: 0;
        z-index: 10001;
        overflow: visible;
    }
    .logo-text { font-size: 1rem; }

    /* Hamburger visible on mobile, stays above overlay */
    .hamburger {
        display: flex;
        position: relative;
        z-index: 10001;
    }

    /* Auth area inside nav on mobile (moved by JS) */
    nav .auth-area {
        margin-top: auto;
        padding-top: 16px;
        border-top: 1px solid var(--border);
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    nav .auth-area .auth-logged-in {
        flex-direction: row;
        align-items: center;
        gap: 12px;
        padding: 0 16px;
    }
    nav .auth-area .user-email {
        font-family: var(--mono);
        font-size: 0.75rem;
        color: var(--text-muted);
        margin-right: auto;
    }
    .view-toggle { display: none; }
    nav .auth-area .btn {
        text-align: center;
    }

    /* Nav utilities — always visible in header bar on mobile */
    .nav-utilities {
        gap: 4px;
        margin-left: auto;
        order: 2;
    }
    .hamburger { order: 3; margin-left: 8px; }
    header > .auth-area { display: none; }
    .user-protocol select { font-size: 0.7rem; padding: 2px 4px; }
    .cache-toggle-label { font-size: 0.65rem; }
    .notifications-dropdown .btn-icon { padding: 4px; }
    .notifications-panel { width: calc(100vw - 32px); right: -40px; z-index: 10002; }

    /* Nav becomes slide-in menu */
    nav {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        height: 100dvh;
        transform: translateX(100%);
        z-index: 1000;
        background: var(--nav-bg);
        backdrop-filter: blur(24px);
        -webkit-backdrop-filter: blur(24px);
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 60px 24px 24px;
        overflow-y: auto;
        transition: transform 0.3s ease;
    }
    nav.menu-open {
        transform: translateX(0);
    }

    /* Nav items — full width vertical list */
    .nav-btn {
        display: flex;
        align-items: center;
        padding: 14px 16px;
        font-size: 0.85rem;
        border-bottom: 1px solid var(--border);
        white-space: nowrap;
    }
    .nav-btn.active {
        border-left: 3px solid var(--blue);
        padding-left: 13px;
    }

    /* Dropdowns inline in mobile menu */
    .nav-dropdown { width: 100%; }
    .dropdown-toggle {
        width: 100%;
        justify-content: space-between;
    }

    main { padding-top: 48px; }

    /* Compact hero */
    .hero h1 { font-size: 2.2rem; padding: 16px 16px 0; }
    .hero-sub { padding: 6px 16px 12px; font-size: 0.7rem; }

    /* Search */
    .search-box { flex-direction: row; }
    .search-prefix { display: none; }
    .search-input { flex: 1; }
    .search-input input { padding: 14px 40px 14px 16px; font-size: 16px; }
    .search-box .btn-main { width: auto; padding: 14px 20px; }
    .clear-btn { right: 8px; width: 24px; height: 24px; font-size: 1rem; }

    /* Compare mode mobile */
    .compare-tray { padding: 8px 12px; }
    .compare-tray-inner { gap: 8px; }
    .compare-tray-add input { width: 110px; }
    .compare-card { width: clamp(240px, 85vw, 340px); }
    .compare-domain-name { font-size: 1.2rem; }
    .compare-section-label { padding: 8px 16px; }
    .compare-field { padding: 10px 16px; }
    .btn-add-compare span { display: none; }

    /* Compact masthead */
    .domain-masthead { padding: 16px; }
    .domain-top { flex-direction: row; align-items: center; gap: 12px; flex-wrap: wrap; }
    .domain-big { font-size: 1.5rem; flex: 1; }
    .idn-punycode { font-size: 0.6rem; }
    .domain-meta { gap: 16px; }
    .meta-item { text-align: right; }
    .meta-label { font-size: 0.55rem; margin-bottom: 2px; }
    .meta-value { font-size: 1rem; }
    .timeline-row { padding: 12px 0 0; gap: 8px; }
    .timeline-label { font-size: 0.6rem; }
    .lookup-meta-row { margin-top: 12px; gap: 8px; }
    .lookup-info { margin-left: auto; }

    /* Date row - keep horizontal, compact */
    .date-row { flex-direction: row; gap: 1px; }
    .date-cell { padding: 12px 8px; text-align: center; }
    .date-cell-label { font-size: 0.5rem; margin-bottom: 4px; letter-spacing: 0.05em; }
    .date-cell-value { font-size: 0.7rem; }
    .date-cell-value .date-time {
        display: block;
        font-size: 0.65rem;
        margin-left: 0;
        margin-top: 2px;
        color: var(--text-dim);
    }

    /* Compact data sections */
    .data-section { flex-direction: row; }
    .data-label {
        width: 90px;
        padding: 12px;
        font-size: 0.55rem;
        border-right: 1px solid var(--border);
        border-bottom: none;
    }
    .data-content { padding: 12px; }
    /* 2-col stacks on mobile */
    .data-row-2col {
        grid-template-columns: 1fr;
    }
    .data-row-2col .data-section:first-child {
        border-right: none;
    }

    .registrar-grid { gap: 6px; }
    .registrar-item { gap: 8px; }
    .registrar-key { min-width: 80px; font-size: 0.65rem; }
    .registrar-val { font-size: 0.7rem; }
    .tool-btn {
        padding: 10px 8px;
        font-size: 0.62rem;
        gap: 5px;
    }
    .tool-btn span {
        display: none;
    }
    .ns-list { gap: 6px; }
    .ns-tag { padding: 6px 10px; font-size: 0.7rem; }
    .status-list { gap: 4px; }
    .status-tag { padding: 4px 8px; font-size: 0.6rem; }

    /* Raw */
    .raw-toggle { padding: 12px 16px; font-size: 0.65rem; }
    .raw-code { padding: 12px 16px; }
    .raw-code pre { font-size: 0.65rem; line-height: 1.5; }

    /* Tables */
    .section { padding: 24px 16px; }
    .section-bar { flex-direction: column; align-items: flex-start; gap: 12px; }
    .section-bar h3 { font-size: 1.1rem; }
    .table-controls {
        width: 100%;
        gap: 8px;
    }
    .table-controls .search-input-sm {
        flex: 1;
        min-width: 120px;
        width: auto;
    }
    .table-controls .btn {
        width: 100%;
        order: 10;
        margin-top: 4px;
    }
    .tbl-wrap { overflow-x: auto; }
    table { min-width: 480px; }

    /* Mobile modals - ensure proper spacing from nav and bottom */
    .modal {
        padding: 16px;
        padding-top: 76px; /* Account for nav (~60px) + spacing */
        padding-bottom: 24px;
        align-items: flex-start;
    }
    .modal-box {
        max-width: 100%;
        max-height: calc(100vh - 100px); /* 76px top + 24px bottom */
        margin: 0 auto;
    }
    .modal-content {
        max-height: calc(100vh - 100px);
    }
    .modal-wide { max-width: 100%; }

    /* TLD Rules modal mobile */
    .rule-row {
        grid-template-columns: 1fr;
        gap: 6px;
    }
    .rule-row-header { display: none; }
    .rule-row select,
    .rule-row input {
        width: 100%;
    }
    .rule-row .btn-icon {
        justify-self: end;
    }
    .modal-top { padding: 16px; }
    .modal-top h2 { font-size: 0.9rem; }
    .modal-body { padding: 16px; }
    .modal-foot { padding: 12px 16px; }
    .field { margin-bottom: 12px; }
    .field label { font-size: 0.55rem; margin-bottom: 6px; }
    .field input,
    .field select { padding: 12px 14px; font-size: 0.85rem; }
}

@media (max-width: 480px) {
    .logo svg { height: 24px; width: 24px; }
    .logo-text { font-size: 0.85rem; }
    .logo { gap: 8px; }

    .hero h1 { font-size: 1.8rem; padding: 12px 12px 0; }
    .hero-sub { padding: 4px 12px 10px; }

    .domain-masthead { padding: 12px; }
    .domain-big { font-size: 1.3rem; }
    .meta-value { font-size: 0.9rem; }
    .domain-meta { gap: 12px; }

    .date-cell { padding: 10px 6px; }
    .date-cell-value { font-size: 0.65rem; }
    .date-cell-value .date-time { font-size: 0.6rem; }

    .data-label { width: 70px; padding: 10px 8px; font-size: 0.5rem; }
    .data-content { padding: 10px; }

    /* Smaller mobile modals - keep spacing from nav and bottom */
    .modal {
        padding: 12px;
        padding-top: 72px; /* Account for nav + spacing */
        padding-bottom: 20px;
    }
    .modal-box { max-height: calc(100vh - 92px); }
    .modal-content { max-height: calc(100vh - 92px); }
    .modal-top { padding: 12px; }
    .modal-top h2 { font-size: 0.85rem; }
    .modal-body { padding: 12px; }
    .modal-foot { padding: 10px 12px; gap: 8px; }
    .modal-foot .btn { padding: 10px 16px; font-size: 0.7rem; }
    .field { margin-bottom: 10px; }
    .field input,
    .field select { padding: 10px 12px; font-size: 0.8rem; }
}

/* ─────────────────────────────────────────────────────────────────
   SETTINGS PAGE
   ───────────────────────────────────────────────────────────────── */
.section-desc {
    font-family: var(--mono);
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 24px;
}

.settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 24px;
}

.settings-card {
    background: var(--surface);
    border: 1px solid var(--border);
    padding: 24px;
    position: relative;
}

.settings-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--gradient-main);
}

.settings-card h4 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 8px;
}

.card-desc {
    font-family: var(--mono);
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}

.settings-actions {
    margin-top: 32px;
    display: flex;
    justify-content: flex-end;
}

/* API Keys */
.api-keys-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.api-key-item {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 14px; background: var(--surface-2); border: 1px solid var(--border);
    border-radius: 8px; font-family: var(--mono); font-size: 0.75rem;
}
.api-key-item .api-key-info { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.api-key-item .api-key-name { color: var(--text); font-weight: 500; }
.api-key-item .api-key-prefix { color: var(--text-muted); font-size: 0.7rem; }
.api-key-item .api-key-stats { color: var(--text-dim); font-size: 0.65rem; }
.api-key-item.inactive { opacity: 0.4; }
.api-key-create { display: flex; align-items: flex-end; gap: 8px; margin-bottom: 12px; }
.api-key-reveal {
    padding: 12px 16px; background: rgba(34,197,94,0.08); border: 1px solid rgba(34,197,94,0.2);
    border-radius: 8px; margin-bottom: 12px;
}
.api-key-value-row { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.api-key-value {
    flex: 1; padding: 8px 12px; background: var(--surface-2); border-radius: 6px;
    font-family: var(--mono); font-size: 0.75rem; word-break: break-all; color: var(--green);
}

.field-group {
    margin-bottom: 16px;
}

.field-group-label {
    display: block;
    font-family: var(--mono);
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.field-row {
    display: flex;
    gap: 12px;
}

.field-row .field {
    flex: 1;
    margin-bottom: 12px;
}

.field-row .field:last-child {
    margin-bottom: 12px;
}

/* Settings card wide variant */
.settings-card.settings-card-wide {
    grid-column: 1 / -1;
}

/* IP Restriction Settings */
.ip-restriction-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.ip-restriction-fields .field:has(textarea) {
    grid-column: 1 / -1;
}

.ip-restriction-fields textarea {
    font-family: var(--mono);
    font-size: 0.85rem;
    resize: vertical;
    min-height: 120px;
}

.ip-restriction-info {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--surface-2);
    border-radius: 8px;
    border: 1px solid var(--border);
}

.ip-restriction-info .info-label {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.ip-restriction-info code {
    font-family: var(--mono);
    font-size: 0.9rem;
    color: var(--blue);
    background: rgba(59, 130, 246, 0.1);
    padding: 4px 8px;
    border-radius: 4px;
}

@media (max-width: 768px) {
    .ip-restriction-fields {
        grid-template-columns: 1fr;
    }
}

/* ─────────────────────────────────────────────────────────────────
   PROTOCOL BADGE
   ───────────────────────────────────────────────────────────────── */
.protocol-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 4px;
    font-family: var(--mono);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    cursor: help;
    transition: all 0.2s;
}

.protocol-badge.rdap {
    background: linear-gradient(135deg, rgba(16,185,129,0.15) 0%, rgba(6,182,212,0.15) 100%);
    border: 1px solid rgba(16,185,129,0.3);
    color: var(--green);
}

.protocol-badge.whois {
    background: linear-gradient(135deg, rgba(139,92,246,0.15) 0%, rgba(59,130,246,0.15) 100%);
    border: 1px solid rgba(139,92,246,0.3);
    color: var(--purple);
}

.protocol-badge.hybrid {
    background: linear-gradient(135deg, rgba(16,185,129,0.1) 0%, rgba(139,92,246,0.1) 50%, rgba(236,72,153,0.1) 100%);
    border: 1px solid rgba(236,72,153,0.3);
    color: var(--pink);
}

.protocol-badge.whois_registrar {
    background: linear-gradient(135deg, rgba(139,92,246,0.1) 0%, rgba(59,130,246,0.1) 100%);
    border: 1px dashed rgba(139,92,246,0.4);
    color: var(--purple);
}

.protocol-badge.rdap_registrar {
    background: linear-gradient(135deg, rgba(16,185,129,0.1) 0%, rgba(6,182,212,0.1) 100%);
    border: 1px dashed rgba(16,185,129,0.4);
    color: var(--green);
}

.protocol-badge:hover {
    transform: none;
}

.protocol-badge.rdap:hover {
    border-color: var(--green);
    box-shadow: 0 4px 12px rgba(16,185,129,0.2);
}

.protocol-badge.whois:hover {
    border-color: var(--purple);
    box-shadow: 0 4px 12px rgba(139,92,246,0.2);
}

.protocol-badge.hybrid:hover {
    border-color: var(--pink);
    box-shadow: 0 4px 12px rgba(236,72,153,0.2);
}

.protocol-badge.whois_registrar:hover {
    border-color: var(--purple);
    box-shadow: 0 4px 12px rgba(139,92,246,0.15);
}

.protocol-badge.rdap_registrar:hover {
    border-color: var(--green);
    box-shadow: 0 4px 12px rgba(16,185,129,0.15);
}

.protocol-badge.ip {
    background: linear-gradient(135deg, rgba(251,191,36,0.15) 0%, rgba(245,158,11,0.15) 100%);
    border: 1px solid rgba(251,191,36,0.3);
    color: var(--yellow);
}

.protocol-badge.ip:hover {
    border-color: var(--yellow);
    box-shadow: 0 4px 12px rgba(251,191,36,0.2);
}

/* IP WHOIS specific styles */
.ip-description {
    font-family: var(--mono);
    font-size: 0.8rem;
    color: var(--text-dim);
    line-height: 1.5;
}

.ip-netrange {
    font-family: var(--mono);
    font-size: 0.85rem;
    color: var(--text);
    padding: 8px 12px;
    background: var(--surface-2);
    border-radius: 4px;
    display: inline-block;
}

.protocol-icon {
    display: flex;
    align-items: center;
}

.protocol-name {
    text-transform: uppercase;
    white-space: nowrap;
    line-height: 1;
}

.protocol-note {
    display: none;
}

/* Cache Badge */
.cache-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 6px;
    font-family: var(--mono);
    font-size: 0.75rem;
    font-weight: 500;
    background: rgba(251,191,36,0.1);
    border: 1px solid rgba(251,191,36,0.25);
    color: var(--yellow);
    transition: all 0.2s;
}

.cache-badge:hover {
    background: rgba(251,191,36,0.15);
    border-color: rgba(251,191,36,0.4);
}

.cache-icon {
    display: flex;
    align-items: center;
}

.cache-icon svg {
    width: 14px;
    height: 14px;
}

.cache-ttl {
    font-weight: 600;
}

.cache-refresh {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    margin-left: 4px;
    background: rgba(251,191,36,0.15);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    color: var(--yellow);
    transition: all 0.2s;
}

.cache-refresh svg {
    width: 12px;
    height: 12px;
}

.cache-refresh:hover {
    background: rgba(251,191,36,0.3);
    transform: rotate(180deg);
}

/* Lookup Info (time and duration) */
.lookup-info {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
    font-family: var(--mono);
    font-size: 0.7rem;
    color: var(--text-muted);
}

.lookup-time {
    color: var(--text-dim);
}

.lookup-duration {
    padding: 4px 8px;
    background: rgba(16,185,129,0.1);
    border: 1px solid rgba(16,185,129,0.2);
    border-radius: 4px;
    color: var(--green);
    font-weight: 500;
}

/* Tab visibility */
.tab { display: block; }
.tab.hidden { display: none; }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ═══════════════════════════════════════════════════════════════
   Toast Notifications
   ═══════════════════════════════════════════════════════════════ */
.toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

.toast {
    min-width: 300px;
    max-width: 450px;
    padding: 16px 20px;
    border-radius: 12px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: flex-start;
    gap: 12px;
    pointer-events: auto;
    animation: toastSlideIn 0.3s ease-out;
    transition: all 0.3s ease;
}

.toast.hiding {
    animation: toastSlideOut 0.3s ease-out forwards;
}

@keyframes toastSlideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes toastSlideOut {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

.toast-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.toast-icon svg {
    width: 20px;
    height: 20px;
}

.toast-content {
    flex: 1;
    min-width: 0;
}

.toast-title {
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 4px;
}

.toast-message {
    font-size: 0.85rem;
    opacity: 0.9;
    word-wrap: break-word;
}

.toast-close {
    flex-shrink: 0;
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.2s;
    color: inherit;
}

.toast-close:hover {
    opacity: 1;
}

.toast-close svg {
    width: 16px;
    height: 16px;
}

/* Toast Types */
.toast.success {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(6, 182, 212, 0.1) 100%);
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: var(--green);
}

.toast.error {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(236, 72, 153, 0.1) 100%);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: var(--red);
}

.toast.warning {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(251, 191, 36, 0.1) 100%);
    border: 1px solid rgba(245, 158, 11, 0.3);
    color: var(--yellow);
}

.toast.info {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(139, 92, 246, 0.1) 100%);
    border: 1px solid rgba(59, 130, 246, 0.3);
    color: var(--blue);
}

/* Progress bar for auto-dismiss */
.toast-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: currentColor;
    opacity: 0.5;
    border-radius: 0 0 12px 12px;
    animation: toastProgress linear forwards;
}

@keyframes toastProgress {
    from { width: 100%; }
    to { width: 0%; }
}

/* ═══════════════════════════════════════════════════════════════
   Confirm Modal
   ═══════════════════════════════════════════════════════════════ */
.confirm-box {
    max-width: 400px;
    text-align: center;
    padding: 30px;
}

.confirm-box h2 {
    margin: 0 0 10px 0;
    font-size: 1.3rem;
}

.confirm-box p {
    color: var(--text-muted);
    margin: 0 0 25px 0;
    font-size: 0.95rem;
}

.confirm-box .modal-foot {
    justify-content: center;
    gap: 12px;
    border: none;
    padding-top: 0;
}

.confirm-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.confirm-icon svg {
    width: 30px;
    height: 30px;
}

.confirm-icon.danger {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(236, 72, 153, 0.1) 100%);
    border: 2px solid rgba(239, 68, 68, 0.3);
    color: var(--red);
}

.confirm-icon.warning {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(251, 191, 36, 0.1) 100%);
    border: 2px solid rgba(245, 158, 11, 0.3);
    color: var(--yellow);
}

.btn-danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: #fff;
    border: none;
}

.btn-danger:hover {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

/* Extra small button */
.btn-xs {
    padding: 4px 10px;
    font-size: 0.7rem;
    border-radius: 4px;
}

/* ─────────────────────────────────────────────────────────────────
   RAW LOGS - Stats Cards
   ───────────────────────────────────────────────────────────────── */
.stats-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.stat-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
}

.stat-value {
    font-family: var(--mono);
    font-size: 1.8rem;
    font-weight: 700;
    background: var(--gradient-main);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 6px;
}

.stat-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ─────────────────────────────────────────────────────────────────
   RAW LOGS - Fullscreen Modal
   ───────────────────────────────────────────────────────────────── */
.modal-fullscreen {
    max-width: 100%;
    width: 100%;
    height: 100%;
    max-height: 100%;
    border-radius: 0;
    display: flex;
    flex-direction: column;
}

.raw-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.raw-modal-title h2 {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
}

.raw-response-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 6px;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.raw-response-meta .badge {
    font-size: 0.65rem;
    padding: 3px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    font-weight: 600;
}

.raw-response-meta .badge.whois {
    background: rgba(139, 92, 246, 0.15);
    color: var(--purple);
    border: 1px solid rgba(139, 92, 246, 0.3);
}

.raw-response-meta .badge.rdap {
    background: rgba(16, 185, 129, 0.15);
    color: var(--green);
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.raw-response-meta .badge.whois_registrar {
    background: rgba(139, 92, 246, 0.1);
    color: var(--purple);
    border: 1px dashed rgba(139, 92, 246, 0.4);
}

.raw-response-meta .badge.rdap_registrar {
    background: rgba(16, 185, 129, 0.1);
    color: var(--green);
    border: 1px dashed rgba(16, 185, 129, 0.4);
}

.modal-close-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 8px;
    border-radius: 6px;
    transition: all 0.2s;
}

.modal-close-btn:hover {
    background: var(--surface-2);
    color: var(--text);
}

.modal-close-btn svg {
    width: 20px;
    height: 20px;
    display: block;
}

/* Raw Modal Toolbar */
.raw-modal-toolbar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 20px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    flex-wrap: wrap;
}

.raw-view-tabs {
    display: flex;
    background: var(--bg);
    border-radius: 6px;
    padding: 3px;
    border: 1px solid var(--border);
}

.raw-tab {
    padding: 6px 14px;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-muted);
    background: none;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.raw-tab:hover {
    color: var(--text);
}

.raw-tab.active {
    background: var(--surface);
    color: var(--text);
}

.raw-nav-btns {
    display: flex;
    gap: 6px;
    flex: 1;
    flex-wrap: wrap;
}

.raw-nav-btn {
    padding: 5px 10px;
    font-size: 0.7rem;
    font-weight: 500;
    font-family: var(--mono);
    color: var(--text-dim);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.raw-nav-btn:hover {
    border-color: var(--blue);
    color: var(--text);
}

.raw-nav-btn.rdap {
    border-color: rgba(16, 185, 129, 0.3);
}

.raw-nav-btn.rdap:hover {
    border-color: var(--green);
}

.raw-actions {
    margin-left: auto;
}

.raw-actions .btn-sm {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: 0.7rem;
}

/* Raw Modal Body */
.raw-modal-body {
    flex: 1;
    overflow: hidden;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.raw-response-content,
.parsed-response-content {
    flex: 1;
    overflow: auto;
    background: var(--bg);
}

.raw-response-content pre {
    padding: 20px;
    font-family: var(--mono);
    font-size: 0.8rem;
    line-height: 1.7;
    color: var(--text-dim);
    white-space: pre-wrap;
    word-break: break-word;
    margin: 0;
}

/* JSON Syntax Highlighting */
.json-key { color: #ec4899; }
.json-string { color: #10b981; }
.json-number { color: #f59e0b; }
.json-boolean { color: #3b82f6; }
.json-null { color: #6b7280; font-style: italic; }
.json-bracket { color: #8b5cf6; }

/* WHOIS Field Highlighting */
.whois-field { color: #ec4899; font-weight: 500; }
.whois-value { color: var(--text); }
.whois-section { color: var(--blue); font-weight: 600; margin-top: 12px; display: inline-block; }

/* Parsed View */
.parsed-response-content {
    padding: 20px;
}

.parsed-section {
    margin-bottom: 16px;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}

.parsed-section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--surface-2);
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
}

.parsed-section-header:hover {
    background: var(--surface);
}

.parsed-section-toggle {
    width: 16px;
    height: 16px;
    color: var(--text-muted);
    transition: transform 0.2s;
}

.parsed-section.collapsed .parsed-section-toggle {
    transform: rotate(-90deg);
}

.parsed-section-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text);
}

.parsed-section-count {
    font-size: 0.7rem;
    color: var(--text-muted);
    font-family: var(--mono);
    background: var(--bg);
    padding: 2px 8px;
    border-radius: 10px;
}

.parsed-section-body {
    padding: 12px 16px;
    background: var(--surface);
}

.parsed-section.collapsed .parsed-section-body {
    display: none;
}

.parsed-field {
    display: flex;
    padding: 6px 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.8rem;
}

.parsed-field:last-child {
    border-bottom: none;
}

.parsed-field-key {
    flex: 0 0 160px;
    color: var(--text-muted);
    font-family: var(--mono);
    font-size: 0.75rem;
}

.parsed-field-value {
    flex: 1;
    color: var(--text);
    font-family: var(--mono);
    word-break: break-word;
}

.parsed-field-value.array {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.parsed-field-value .array-item {
    padding: 4px 8px;
    background: var(--bg);
    border-radius: 4px;
    font-size: 0.75rem;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .modal-fullscreen {
        border-radius: 0;
    }

    .raw-modal-header {
        padding: 12px 16px;
    }

    .raw-modal-title h2 {
        font-size: 1rem;
    }

    .raw-response-meta {
        flex-wrap: wrap;
        gap: 8px;
    }

    .raw-modal-toolbar {
        padding: 8px 12px;
        gap: 8px;
    }

    .raw-nav-btns {
        order: 3;
        width: 100%;
    }

    .raw-actions {
        order: 2;
        margin-left: 0;
    }

    .raw-response-content pre {
        padding: 12px;
        font-size: 0.7rem;
        line-height: 1.5;
    }

    .parsed-response-content {
        padding: 12px;
    }

    .parsed-field {
        flex-direction: column;
        gap: 4px;
    }

    .parsed-field-key {
        flex: none;
    }
}

/* Query Chain Display */
.query-chain {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--mono);
    font-size: 0.7rem;
    color: var(--text-muted);
}

.chain-step {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 8px;
    border-radius: 4px;
    font-weight: 500;
    transition: all 0.2s;
    max-width: 100px;
}

.chain-step .chain-source {
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chain-arrow {
    font-size: 0.65rem;
    opacity: 0.5;
    margin: 0 2px;
}

.chain-step.referred {
    background: rgba(139, 92, 246, 0.1);
    border: 1px solid rgba(139, 92, 246, 0.2);
    color: var(--purple);
    opacity: 0.7;
}

.chain-step.authoritative {
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: var(--green);
}

.chain-step.initial {
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.2);
    color: var(--blue);
}

.chain-step-icon {
    display: flex;
    align-items: center;
    font-size: 0.7rem;
}

.chain-step-icon.referred::before {
    content: '\25CB'; /* White circle */
}

.chain-step-icon.authoritative::before {
    content: '\25CF'; /* Black circle */
}

.chain-arrow {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin: 0 2px;
}

.chain-step:hover {
    transform: translateY(-1px);
}

.chain-step.loading {
    background: rgba(251, 191, 36, 0.1);
    border: 1px solid rgba(251, 191, 36, 0.3);
    color: var(--yellow);
    animation: chainPulse 1.5s infinite;
}

.chain-step.loading .chain-step-icon::before {
    content: '\25CB'; /* Empty circle for loading */
    animation: spin 1s linear infinite;
    display: inline-block;
}

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

.chain-step .chain-server {
    font-size: 0.6rem;
    color: var(--text-muted);
    margin-left: 4px;
}

/* Protocol badge in table (more specific to not override main badge) */
.admin-table .protocol-badge,
.monitor-events-table .protocol-badge,
td .protocol-badge {
    display: inline-block;
    font-size: 0.65rem;
    padding: 3px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    font-weight: 600;
    font-family: var(--mono);
}

td .protocol-badge.whois {
    background: rgba(139, 92, 246, 0.15);
    color: var(--purple);
    border: 1px solid rgba(139, 92, 246, 0.3);
}

td .protocol-badge.rdap {
    background: rgba(16, 185, 129, 0.15);
    color: var(--green);
    border: 1px solid rgba(16, 185, 129, 0.3);
}

/* ─────────────────────────────────────────────────────────────────
   NAVIGATION DROPDOWNS - Premium Design
   ───────────────────────────────────────────────────────────────── */

.nav-dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    background: none;
    border: none;
    transition: color 0.2s;
}

.dropdown-toggle:hover {
    color: var(--text-dim);
}

.dropdown-toggle svg {
    transition: transform 0.25s ease;
    opacity: 0.6;
}

.nav-dropdown:hover .dropdown-toggle svg,
.nav-dropdown.open .dropdown-toggle svg {
    transform: rotate(180deg);
    opacity: 1;
}

.dropdown-menu {
    position: absolute;
    top: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(180deg, rgba(30, 30, 45, 0.98), rgba(20, 20, 35, 0.98));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    min-width: 200px;
    padding: 8px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s, transform 0.2s ease;
    transform: translateX(-50%) translateY(-8px) scale(0.95);
    z-index: 1000;
    box-shadow:
        0 4px 6px rgba(0, 0, 0, 0.1),
        0 10px 40px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.dropdown-menu::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 12px;
    height: 12px;
    background: rgba(30, 30, 45, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-right: none;
    border-bottom: none;
}

.nav-dropdown:hover .dropdown-menu,
.nav-dropdown.open .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0) scale(1);
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    color: var(--text-dim);
    text-decoration: none;
    font-size: 0.9rem;
    border-radius: 8px;
    transition: all 0.15s ease;
    position: relative;
}

.dropdown-item:hover {
    background: rgba(59, 130, 246, 0.15);
    color: var(--text);
    transform: translateX(4px);
}

.dropdown-item.active {
    color: var(--blue);
    background: rgba(59, 130, 246, 0.2);
}

.dropdown-item.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 60%;
    background: var(--blue);
    border-radius: 0 2px 2px 0;
}

/* Auth-only visibility */
.auth-only {
    display: none !important;
}
body.logged-in .auth-only {
    display: inline-flex !important;
}

/* ═══════════════════════════════════════════════════════════════
   MY DOMAINS PAGE - Premium Design
   ═══════════════════════════════════════════════════════════════ */

.my-domains-container {
    max-width: 1400px;
    margin: 0 auto;
}

/* Header */
.my-domains-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 24px;
    margin-bottom: 32px;
    padding: 24px 28px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.08), rgba(139, 92, 246, 0.05));
    border: 1px solid rgba(59, 130, 246, 0.15);
    border-radius: 20px;
}

.my-domains-title {
    display: flex;
    align-items: center;
    gap: 16px;
}

.my-domains-title .title-icon {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--blue), var(--purple));
    border-radius: 14px;
    color: #fff;
    box-shadow: 0 8px 24px rgba(59, 130, 246, 0.3);
}

.my-domains-title h2 {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.02em;
}

.my-domains-title .subtitle {
    margin: 4px 0 0;
    font-size: 0.85rem;
    color: var(--text-dim);
}

.my-domains-actions {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

/* Filter Select */
.filter-select {
    appearance: none;
    -webkit-appearance: none;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 44px 12px 16px;
    color: var(--text);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888899' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    min-width: 160px;
    color-scheme: dark;
}

.filter-select:hover {
    border-color: var(--blue);
    background-color: rgba(59, 130, 246, 0.05);
}

.filter-select:focus {
    outline: none;
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

/* Action Buttons */
.action-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    border: none;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    white-space: nowrap;
}

.action-btn.primary {
    background: linear-gradient(135deg, var(--blue), #6366f1);
    color: #fff;
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.35);
}

.action-btn.primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(59, 130, 246, 0.45);
}

.action-btn.secondary {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
}

.action-btn.secondary:hover {
    border-color: var(--blue);
    background: rgba(59, 130, 246, 0.1);
    color: var(--blue);
}

.action-btn.large {
    padding: 16px 32px;
    font-size: 1rem;
    border-radius: 14px;
}

.action-btn svg {
    flex-shrink: 0;
}

/* Stats Bar */
.my-domains-stats {
    display: flex;
    gap: 16px;
    margin-bottom: 28px;
    padding: 0 4px;
}

.stat-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 20px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    transition: all 0.2s;
}

.stat-item:hover {
    border-color: rgba(59, 130, 246, 0.3);
    transform: translateY(-2px);
}

.stat-value {
    font-family: var(--mono);
    font-size: 2rem;
    font-weight: 800;
    color: var(--text);
    line-height: 1;
}

.stat-value.expiring {
    color: var(--red);
}

.stat-value.healthy {
    color: var(--green);
}

.stat-label {
    font-size: 0.75rem;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
}

/* Loading State */
.domains-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 80px 40px;
    color: var(--text-dim);
}

.loading-spinner {
    width: 48px;
    height: 48px;
    border: 3px solid var(--border);
    border-top-color: var(--blue);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* Empty State */
.domains-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 40px;
    text-align: center;
    background: linear-gradient(180deg, transparent 0%, rgba(59, 130, 246, 0.03) 100%);
    border: 2px dashed var(--border);
    border-radius: 24px;
}

.domains-empty .empty-illustration {
    margin-bottom: 32px;
    opacity: 0.3;
}

.domains-empty .empty-illustration svg {
    color: var(--blue);
}

.domains-empty h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 12px;
}

.domains-empty p {
    color: var(--text-dim);
    margin: 0 0 32px;
    max-width: 420px;
    line-height: 1.6;
}

/* Domain Grid */
.domains-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 24px;
}

/* Domain Card */
.domain-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.domain-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 20px;
    padding: 1px;
    background: linear-gradient(135deg, transparent, transparent);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: all 0.3s;
}

.domain-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(59, 130, 246, 0.2);
}

.domain-card:hover::before {
    background: linear-gradient(135deg, var(--blue), var(--purple));
    opacity: 1;
}

.domain-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 24px 24px 16px;
    gap: 16px;
}

.domain-card-name {
    font-family: var(--mono);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text);
    word-break: break-all;
    letter-spacing: -0.02em;
    line-height: 1.3;
}

.domain-card-tld {
    flex-shrink: 0;
    font-size: 0.7rem;
    color: var(--blue);
    padding: 6px 12px;
    background: rgba(59, 130, 246, 0.12);
    border: 1px solid rgba(59, 130, 246, 0.25);
    border-radius: 8px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.domain-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 24px 20px;
    min-height: 36px;
}

.domain-card-tags:empty {
    display: none;
}

.domain-card-tags .tag-badge {
    font-size: 0.7rem;
    padding: 5px 12px;
}

.domain-card-info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 1px solid var(--border);
}

.domain-card-info-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 18px 24px;
    background: rgba(0, 0, 0, 0.15);
}

.domain-card-info-item:first-child {
    border-right: 1px solid var(--border);
}

.domain-card-info-label {
    color: var(--text-muted);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
}

.domain-card-info-value {
    color: var(--text);
    font-family: var(--mono);
    font-size: 0.9rem;
    font-weight: 600;
}

.domain-card-info-value.expiring {
    color: var(--red);
}

.domain-card-info-value.expired {
    color: var(--red);
    opacity: 0.7;
}

.domain-card-info-value.healthy {
    color: var(--green);
}

/* Verification Badge */
.verification-badge {
    font-size: 0.6rem;
    padding: 4px 10px;
    border-radius: 20px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.verification-badge.verified {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(6, 182, 212, 0.2));
    color: var(--green);
    border: 1px solid rgba(16, 185, 129, 0.4);
}

.verification-badge.unverified {
    background: rgba(251, 191, 36, 0.1);
    color: var(--yellow);
    border: 1px solid rgba(251, 191, 36, 0.3);
}

/* Verification Section in Modal */
#domain-verification-section {
    padding: 16px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    border: 1px solid var(--border);
}

.verification-status {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
}

.verification-status.verified {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(6, 182, 212, 0.1));
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.verification-status.unverified {
    background: rgba(251, 191, 36, 0.1);
    border: 1px solid rgba(251, 191, 36, 0.3);
}

.verification-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: 700;
    font-size: 1rem;
}

.verification-status.verified .verification-icon {
    background: var(--green);
    color: white;
}

.verification-status.unverified .verification-icon {
    background: var(--yellow);
    color: black;
}

.verification-text {
    flex: 1;
    font-size: 0.9rem;
    color: var(--text);
}

.verification-date {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.verification-token-box {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 6px;
    margin-bottom: 12px;
}

.verification-token {
    flex: 1;
    font-family: var(--mono);
    font-size: 0.7rem;
    color: var(--cyan);
    padding: 6px 10px;
    background: rgba(6, 182, 212, 0.1);
    border: 1px solid rgba(6, 182, 212, 0.3);
    border-radius: 4px;
    cursor: pointer;
    word-break: break-all;
    transition: all 0.2s;
    line-height: 1.3;
}

.verification-token:hover {
    background: rgba(6, 182, 212, 0.2);
}

.verification-hint-box {
    padding: 12px;
    background: rgba(139, 92, 246, 0.1);
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: 8px;
    margin-bottom: 16px;
}

.verification-hint-box p {
    color: var(--text-dim);
    font-size: 0.8rem;
    margin: 0 0 8px 0;
}

.verification-hint-box p:last-child {
    margin-bottom: 0;
}

.verification-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.verification-hint {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* DNS Record Table for Verification */
.dns-record-box {
    padding: 12px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    margin-bottom: 12px;
}

.dns-record-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
    margin-bottom: 10px;
}

.dns-record-table th {
    text-align: left;
    padding: 6px 8px;
    color: var(--text-muted);
    font-weight: 500;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.dns-record-table td {
    padding: 8px;
    vertical-align: middle;
}

.dns-record-table code {
    font-family: var(--mono);
    padding: 4px 8px;
    border-radius: 4px;
    background: rgba(6, 182, 212, 0.1);
    border: 1px solid rgba(6, 182, 212, 0.2);
    color: var(--cyan);
    -webkit-text-fill-color: var(--cyan);
    background-clip: border-box;
    -webkit-background-clip: border-box;
}

.dns-record-table td:nth-child(3) code {
    display: inline-block;
    word-break: break-all;
    cursor: pointer;
    transition: all 0.2s;
    flex: none;
    max-width: 100%;
}

.dns-record-table .verification-token {
    flex: none;
    display: inline-block;
}

.dns-record-table td:nth-child(3) code:hover {
    background: rgba(6, 182, 212, 0.2);
}

/* DNS Record Table - Mobile */
@media (max-width: 768px) {
    .dns-record-box {
        overflow-x: auto;
        max-width: 100%;
        padding: 8px;
    }
    .dns-record-table {
        min-width: auto;
        font-size: 0.7rem;
        display: block;
        overflow-x: auto;
    }
    .dns-record-table th,
    .dns-record-table td {
        padding: 4px 6px;
        white-space: nowrap;
    }
    .dns-record-table td:nth-child(3) code {
        font-size: 0.65rem;
        word-break: break-all;
        white-space: normal;
        max-width: 150px;
        display: inline-block;
    }
}

/* ─────────────────────────────────────────────────────────────────
   TAG CREATOR FORM
   ───────────────────────────────────────────────────────────────── */

.tag-creator-section {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.tag-creator-section h4 {
    margin: 0 0 16px 0;
    font-size: 1rem;
    color: var(--text);
}

.tag-preview-box {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    margin-bottom: 16px;
}

.tag-preview-label {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.tag-creator-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.tag-form-row {
    display: flex;
    gap: 16px;
}

.tag-form-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tag-form-field.full-width {
    flex: 1;
}

.tag-form-field label {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 500;
}

.tag-form-field input[type="text"] {
    padding: 10px 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font-size: 0.9rem;
    width: 200px;
}

.tag-form-field input[type="color"] {
    width: 50px;
    height: 38px;
    padding: 4px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
}

.tag-form-field select {
    padding: 10px 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font-size: 0.9rem;
    cursor: pointer;
}

.tag-form-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 8px;
}

.approval-hint {
    font-size: 0.8rem;
    color: var(--yellow);
    font-style: italic;
}

/* ─────────────────────────────────────────────────────────────────
   PENDING TAGS (Admin)
   ───────────────────────────────────────────────────────────────── */

.pending-tags-grid {
    display: grid;
    gap: 16px;
}

.pending-tag-card {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    backdrop-filter: blur(10px);
}

.pending-tag-preview {
    min-width: 120px;
    display: flex;
    justify-content: center;
}

.pending-tag-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pending-tag-meta {
    display: flex;
    gap: 16px;
    font-size: 0.85rem;
}

.pending-tag-user {
    color: var(--cyan);
}

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

.pending-tag-details {
    display: flex;
    gap: 20px;
    font-size: 0.8rem;
    color: var(--text-dim);
}

.detail-item strong {
    color: var(--text-muted);
}

.color-swatch {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 3px;
    vertical-align: middle;
    margin-right: 4px;
    border: 1px solid rgba(255,255,255,0.2);
}

.pending-tag-actions {
    display: flex;
    gap: 8px;
}

.btn-success {
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff;
    border: none;
}

.btn-success:hover {
    background: linear-gradient(135deg, #059669, #047857);
    transform: translateY(-1px);
}

.btn-danger {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #fff;
    border: none;
}

.btn-danger:hover {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    transform: translateY(-1px);
}

/* Badge count for pending items */
.badge-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--red);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: 9px;
    margin-left: 6px;
}

/* Tag approval status badge in manage list */
.tag-status-badge {
    font-size: 0.65rem;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    font-weight: 600;
}

.tag-status-badge.pending {
    background: rgba(245, 158, 11, 0.2);
    color: var(--yellow);
}

.tag-status-badge.rejected {
    background: rgba(239, 68, 68, 0.2);
    color: var(--red);
}

/* Responsive */
@media (max-width: 768px) {
    .my-domains-header {
        padding: 14px 16px;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        margin-bottom: 16px;
    }

    .my-domains-title {
        justify-content: center;
        text-align: center;
        flex-direction: row;
        gap: 10px;
    }

    .my-domains-title .title-icon {
        width: 32px;
        height: 32px;
    }

    .my-domains-title .title-icon svg {
        width: 16px;
        height: 16px;
    }

    .my-domains-title h2 {
        font-size: 1.1rem;
    }

    .my-domains-title .subtitle {
        font-size: 0.75rem;
    }

    .my-domains-actions {
        justify-content: center;
    }

    .my-domains-stats {
        flex-direction: row;
        gap: 8px;
        margin-bottom: 16px;
    }

    .my-domains-stats .stat-item {
        padding: 12px 8px;
        gap: 3px;
    }

    .my-domains-stats .stat-value {
        font-size: 1.3rem;
    }

    .my-domains-stats .stat-label {
        font-size: 0.6rem;
    }

    .domains-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .domain-card {
        border-radius: 14px;
    }

    .domain-card-header {
        padding: 14px 14px 10px;
        gap: 10px;
    }

    .domain-card-name {
        font-size: 1rem;
    }

    .domain-card-tags {
        padding: 0 14px 12px;
        gap: 4px;
        min-height: 28px;
    }

    .domain-card-info-item {
        padding: 12px 14px;
        gap: 4px;
    }

    .action-btn span {
        display: none;
    }

    .action-btn {
        padding: 10px;
    }
}

/* ─────────────────────────────────────────────────────────────────
   DOMAIN VERIFICATION MODAL
   ───────────────────────────────────────────────────────────────── */

.verify-intro {
    color: var(--text-dim);
    margin-bottom: 24px;
    line-height: 1.6;
}

.verify-intro strong {
    color: var(--blue);
    font-family: var(--mono);
}

.verify-steps {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.verify-step {
    display: flex;
    gap: 16px;
}

.step-num {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--blue), var(--purple));
    color: #fff;
    font-weight: 700;
    border-radius: 50%;
    font-size: 0.9rem;
}

.step-content {
    flex: 1;
}

.step-content strong {
    display: block;
    color: var(--text);
    margin-bottom: 8px;
}

.step-content p {
    color: var(--text-dim);
    font-size: 0.85rem;
    margin: 0;
}

.verify-record {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px;
    margin-top: 12px;
}

.record-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
}

.record-row:not(:last-child) {
    border-bottom: 1px solid var(--border);
}

.record-label {
    color: var(--text-muted);
    font-size: 0.8rem;
    min-width: 60px;
}

.record-value {
    color: var(--text);
    font-family: var(--mono);
    font-size: 0.85rem;
}

.record-value-copy {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}

.record-value-copy code {
    background: rgba(59, 130, 246, 0.1);
    color: var(--blue);
    padding: 8px 14px;
    border-radius: 6px;
    font-family: var(--mono);
    font-size: 0.8rem;
    word-break: break-all;
    flex: 1;
}

.btn-copy-token {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-dim);
    padding: 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-copy-token:hover {
    background: var(--surface);
    border-color: var(--blue);
    color: var(--blue);
}

.verify-status {
    margin-top: 20px;
}

.verify-failed {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 10px;
    padding: 16px;
}

.verify-failed strong {
    color: var(--red);
    display: block;
    margin-bottom: 8px;
}

.verify-failed p {
    color: var(--text-dim);
    margin: 0 0 8px;
    font-size: 0.85rem;
}

.verify-failed .found-records {
    font-family: var(--mono);
    font-size: 0.75rem;
    color: var(--text-muted);
}

.verify-failed .verify-hint {
    color: var(--text-muted);
    font-style: italic;
}

.spinner-sm {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* ─────────────────────────────────────────────────────────────────
   TAG BADGES - Design Presets
   ───────────────────────────────────────────────────────────────── */

.tag-badge {
    --tag-color: #6b7280;
    --tag-bg: var(--tag-color);
    --tag-text: #fff;
    --tag-border: transparent;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    transition: all 0.2s ease;
    cursor: default;
    position: relative;
}

/* ═══════════════════════════════════════════════════════════════
   DESIGN PRESET: Solid (default)
   Filled background with white text
   ═══════════════════════════════════════════════════════════════ */
.tag-badge.design-solid,
.tag-badge:not([class*="design-"]) {
    background: var(--tag-color);
    color: #fff;
    border: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.tag-badge.design-solid:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* ═══════════════════════════════════════════════════════════════
   DESIGN PRESET: Outline
   Transparent with colored border
   ═══════════════════════════════════════════════════════════════ */
.tag-badge.design-outline {
    background: transparent;
    color: var(--tag-color);
    border: 2px solid var(--tag-color);
}

.tag-badge.design-outline:hover {
    background: var(--tag-color);
    color: #fff;
}

/* ═══════════════════════════════════════════════════════════════
   DESIGN PRESET: Soft
   Light background tint with colored text
   ═══════════════════════════════════════════════════════════════ */
.tag-badge.design-soft {
    background: color-mix(in srgb, var(--tag-color) 15%, transparent);
    color: var(--tag-color);
    border: 1px solid color-mix(in srgb, var(--tag-color) 30%, transparent);
}

.tag-badge.design-soft:hover {
    background: color-mix(in srgb, var(--tag-color) 25%, transparent);
    border-color: color-mix(in srgb, var(--tag-color) 50%, transparent);
}

/* ═══════════════════════════════════════════════════════════════
   DESIGN PRESET: Glow
   Solid with glowing shadow effect - ATTENTION GRABBING
   ═══════════════════════════════════════════════════════════════ */
.tag-badge.design-glow {
    background: var(--tag-color);
    color: #fff;
    border: none;
    box-shadow:
        0 0 10px color-mix(in srgb, var(--tag-color) 60%, transparent),
        0 0 20px color-mix(in srgb, var(--tag-color) 40%, transparent),
        0 2px 8px rgba(0, 0, 0, 0.2);
    animation: tag-pulse 2s ease-in-out infinite;
}

@keyframes tag-pulse {
    0%, 100% {
        box-shadow:
            0 0 10px color-mix(in srgb, var(--tag-color) 60%, transparent),
            0 0 20px color-mix(in srgb, var(--tag-color) 40%, transparent),
            0 2px 8px rgba(0, 0, 0, 0.2);
    }
    50% {
        box-shadow:
            0 0 15px color-mix(in srgb, var(--tag-color) 80%, transparent),
            0 0 30px color-mix(in srgb, var(--tag-color) 50%, transparent),
            0 2px 8px rgba(0, 0, 0, 0.2);
    }
}

.tag-badge.design-glow:hover {
    animation: none;
    box-shadow:
        0 0 20px color-mix(in srgb, var(--tag-color) 80%, transparent),
        0 0 40px color-mix(in srgb, var(--tag-color) 60%, transparent),
        0 4px 12px rgba(0, 0, 0, 0.3);
    transform: scale(1.05);
}

/* ═══════════════════════════════════════════════════════════════
   DESIGN PRESET: Gradient
   Gradient background effect - STRIKING
   ═══════════════════════════════════════════════════════════════ */
.tag-badge.design-gradient {
    background: linear-gradient(
        135deg,
        var(--tag-color) 0%,
        color-mix(in srgb, var(--tag-color) 70%, #000) 100%
    );
    color: #fff;
    border: none;
    box-shadow: 0 3px 10px color-mix(in srgb, var(--tag-color) 40%, transparent);
}

.tag-badge.design-gradient:hover {
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--tag-color) 90%, #fff) 0%,
        var(--tag-color) 100%
    );
    transform: translateY(-2px);
    box-shadow: 0 6px 16px color-mix(in srgb, var(--tag-color) 50%, transparent);
}

/* ═══════════════════════════════════════════════════════════════
   DESIGN PRESET: Pill
   Larger rounded pill shape - PROMINENT
   ═══════════════════════════════════════════════════════════════ */
.tag-badge.design-pill {
    background: var(--tag-color);
    color: #fff;
    border: none;
    border-radius: 50px;
    padding: 8px 18px;
    font-size: 0.85rem;
    box-shadow:
        0 4px 12px color-mix(in srgb, var(--tag-color) 35%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.tag-badge.design-pill:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow:
        0 6px 20px color-mix(in srgb, var(--tag-color) 45%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* ═══════════════════════════════════════════════════════════════
   DESIGN PRESET: Badge
   Compact badge with icon dot indicator
   ═══════════════════════════════════════════════════════════════ */
.tag-badge.design-badge {
    background: var(--surface-elevated, #2a2a3a);
    color: var(--tag-color);
    border: 1px solid var(--border);
    padding-left: 10px;
}

.tag-badge.design-badge::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--tag-color);
    box-shadow: 0 0 6px var(--tag-color);
}

.tag-badge.design-badge:hover {
    background: color-mix(in srgb, var(--tag-color) 10%, var(--surface-elevated, #2a2a3a));
    border-color: var(--tag-color);
}

/* ═══════════════════════════════════════════════════════════════
   DESIGN PRESET: Glass
   Glassmorphism with frosted blur effect - MODERN
   ═══════════════════════════════════════════════════════════════ */
.tag-badge.design-glass {
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--tag-color) 25%, transparent) 0%,
        color-mix(in srgb, var(--tag-color) 10%, transparent) 100%
    );
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #fff;
    border: 1px solid color-mix(in srgb, var(--tag-color) 40%, transparent);
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 color-mix(in srgb, #fff 20%, transparent),
        inset 0 -1px 0 color-mix(in srgb, #000 10%, transparent);
}

.tag-badge.design-glass:hover {
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--tag-color) 35%, transparent) 0%,
        color-mix(in srgb, var(--tag-color) 20%, transparent) 100%
    );
    border-color: color-mix(in srgb, var(--tag-color) 60%, transparent);
    transform: translateY(-2px);
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 color-mix(in srgb, #fff 30%, transparent);
}

/* ═══════════════════════════════════════════════════════════════
   DESIGN PRESET: Neon
   Vibrant neon glow effect - ATTENTION GRABBING
   ═══════════════════════════════════════════════════════════════ */
.tag-badge.design-neon {
    background: transparent;
    color: var(--tag-color);
    border: 2px solid var(--tag-color);
    text-shadow:
        0 0 5px var(--tag-color),
        0 0 10px var(--tag-color),
        0 0 20px var(--tag-color);
    box-shadow:
        0 0 5px var(--tag-color),
        0 0 10px color-mix(in srgb, var(--tag-color) 50%, transparent),
        inset 0 0 10px color-mix(in srgb, var(--tag-color) 20%, transparent);
    animation: neon-flicker 3s ease-in-out infinite;
}

@keyframes neon-flicker {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.85; }
    52% { opacity: 1; }
    54% { opacity: 0.9; }
}

.tag-badge.design-neon:hover {
    animation: none;
    background: var(--tag-color);
    color: #000;
    text-shadow: none;
    box-shadow:
        0 0 10px var(--tag-color),
        0 0 20px var(--tag-color),
        0 0 40px var(--tag-color);
}

/* ═══════════════════════════════════════════════════════════════
   DESIGN PRESET: Shimmer
   Animated shimmer shine effect - PREMIUM
   ═══════════════════════════════════════════════════════════════ */
.tag-badge.design-shimmer {
    background: linear-gradient(
        90deg,
        var(--tag-color) 0%,
        color-mix(in srgb, var(--tag-color) 80%, #fff) 50%,
        var(--tag-color) 100%
    );
    background-size: 200% 100%;
    color: #fff;
    border: none;
    animation: shimmer 2.5s ease-in-out infinite;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--tag-color) 40%, transparent);
}

@keyframes shimmer {
    0% { background-position: 100% 50%; }
    100% { background-position: -100% 50%; }
}

.tag-badge.design-shimmer:hover {
    animation-duration: 1s;
    box-shadow: 0 4px 16px color-mix(in srgb, var(--tag-color) 50%, transparent);
    transform: scale(1.05);
}

/* ═══════════════════════════════════════════════════════════════
   DESIGN PRESET: Elevated (3D)
   Raised 3D effect with depth - PROMINENT
   ═══════════════════════════════════════════════════════════════ */
.tag-badge.design-elevated {
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--tag-color) 90%, #fff) 0%,
        var(--tag-color) 50%,
        color-mix(in srgb, var(--tag-color) 80%, #000) 100%
    );
    color: #fff;
    border: none;
    border-top: 1px solid color-mix(in srgb, #fff 30%, transparent);
    border-bottom: 2px solid color-mix(in srgb, #000 40%, transparent);
    box-shadow:
        0 4px 0 color-mix(in srgb, var(--tag-color) 60%, #000),
        0 6px 12px rgba(0, 0, 0, 0.25);
    transform: translateY(-2px);
}

.tag-badge.design-elevated:hover {
    transform: translateY(0);
    box-shadow:
        0 2px 0 color-mix(in srgb, var(--tag-color) 60%, #000),
        0 3px 6px rgba(0, 0, 0, 0.2);
}

.tag-badge.design-elevated:active {
    transform: translateY(2px);
    box-shadow:
        0 0 0 color-mix(in srgb, var(--tag-color) 60%, #000),
        0 1px 2px rgba(0, 0, 0, 0.15);
}

/* ═══════════════════════════════════════════════════════════════
   DESIGN PRESET: Cyber
   Cyberpunk styled with accent lines - FUTURISTIC
   ═══════════════════════════════════════════════════════════════ */
.tag-badge.design-cyber {
    background: linear-gradient(
        135deg,
        rgba(0, 0, 0, 0.8) 0%,
        rgba(20, 20, 30, 0.9) 100%
    );
    color: var(--tag-color);
    border: 1px solid var(--tag-color);
    clip-path: polygon(
        0 0,
        calc(100% - 8px) 0,
        100% 8px,
        100% 100%,
        8px 100%,
        0 calc(100% - 8px)
    );
    position: relative;
    text-shadow: 0 0 8px var(--tag-color);
}

.tag-badge.design-cyber::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        var(--tag-color),
        transparent
    );
}

.tag-badge.design-cyber::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 2px;
    right: 2px;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        color-mix(in srgb, var(--tag-color) 50%, transparent),
        transparent
    );
}

.tag-badge.design-cyber:hover {
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--tag-color) 20%, rgba(0, 0, 0, 0.8)) 0%,
        color-mix(in srgb, var(--tag-color) 10%, rgba(20, 20, 30, 0.9)) 100%
    );
    box-shadow:
        0 0 10px color-mix(in srgb, var(--tag-color) 50%, transparent),
        inset 0 0 20px color-mix(in srgb, var(--tag-color) 10%, transparent);
}

/* ═══════════════════════════════════════════════════════════════
   FUTURISTIC / TECH TAG DESIGNS
   ═══════════════════════════════════════════════════════════════ */

/* Gradient Fire - Hot/priority items */
.tag-badge.design-gradient-fire {
    background: linear-gradient(135deg, #ff6b6b 0%, #ff8e53 50%, #feca57 100%);
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    border: none;
    box-shadow: 0 2px 8px rgba(255, 107, 107, 0.4);
    animation: fire-pulse 2s ease-in-out infinite;
}

@keyframes fire-pulse {
    0%, 100% { box-shadow: 0 2px 8px rgba(255, 107, 107, 0.4); }
    50% { box-shadow: 0 2px 16px rgba(255, 142, 83, 0.6), 0 0 20px rgba(254, 202, 87, 0.3); }
}

.tag-badge.design-gradient-fire:hover {
    transform: translateY(-1px) scale(1.02);
    box-shadow: 0 4px 16px rgba(255, 107, 107, 0.6);
}

/* Gradient Ocean - Production/stable */
.tag-badge.design-gradient-ocean {
    background: linear-gradient(135deg, #667eea 0%, #4ecdc4 50%, #44a08d 100%);
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    border: none;
    box-shadow: 0 2px 8px rgba(78, 205, 196, 0.4);
}

.tag-badge.design-gradient-ocean:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(78, 205, 196, 0.5);
}

/* Gradient Aurora - Premium/flagship */
.tag-badge.design-gradient-aurora {
    background: linear-gradient(135deg, #a855f7 0%, #ec4899 50%, #f472b6 100%);
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    border: none;
    box-shadow: 0 2px 8px rgba(168, 85, 247, 0.4);
    animation: aurora-shift 4s ease-in-out infinite;
}

@keyframes aurora-shift {
    0%, 100% { filter: hue-rotate(0deg); }
    50% { filter: hue-rotate(15deg); }
}

.tag-badge.design-gradient-aurora:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(168, 85, 247, 0.6);
}

/* Holographic - AI/Future tech */
.tag-badge.design-holographic {
    background: linear-gradient(
        135deg,
        rgba(0, 212, 255, 0.15) 0%,
        rgba(0, 212, 255, 0.05) 50%,
        rgba(0, 212, 255, 0.15) 100%
    );
    color: #00d4ff;
    border: 1px solid #00d4ff;
    position: relative;
    overflow: hidden;
    animation: holographic-shimmer 3s linear infinite;
}

@keyframes holographic-shimmer {
    0% { background-position: -200% center; }
    100% { background-position: 200% center; }
}

.tag-badge.design-holographic::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(0, 212, 255, 0.3) 50%,
        transparent 100%
    );
    background-size: 200% 100%;
    animation: holo-sweep 2s ease-in-out infinite;
}

@keyframes holo-sweep {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.tag-badge.design-holographic:hover {
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.5), inset 0 0 10px rgba(0, 212, 255, 0.2);
}

/* Plasma - Web3/Blockchain */
.tag-badge.design-plasma {
    background: linear-gradient(
        135deg,
        rgba(244, 114, 182, 0.2) 0%,
        rgba(168, 85, 247, 0.2) 50%,
        rgba(59, 130, 246, 0.2) 100%
    );
    color: #f472b6;
    border: 1px solid;
    border-image: linear-gradient(135deg, #f472b6, #a855f7, #3b82f6) 1;
    text-shadow: 0 0 8px rgba(244, 114, 182, 0.5);
    animation: plasma-glow 2s ease-in-out infinite alternate;
}

@keyframes plasma-glow {
    0% {
        text-shadow: 0 0 8px rgba(244, 114, 182, 0.5);
        box-shadow: 0 0 5px rgba(244, 114, 182, 0.3);
    }
    100% {
        text-shadow: 0 0 12px rgba(168, 85, 247, 0.7);
        box-shadow: 0 0 15px rgba(168, 85, 247, 0.4);
    }
}

.tag-badge.design-plasma:hover {
    background: linear-gradient(
        135deg,
        rgba(244, 114, 182, 0.3) 0%,
        rgba(168, 85, 247, 0.3) 50%,
        rgba(59, 130, 246, 0.3) 100%
    );
}

/* Matrix - Code/Quantum tech */
.tag-badge.design-matrix {
    background: rgba(0, 0, 0, 0.8);
    color: #22c55e;
    border: 1px solid #22c55e;
    font-family: 'Courier New', monospace;
    text-shadow: 0 0 5px #22c55e, 0 0 10px #22c55e;
    box-shadow: 0 0 10px rgba(34, 197, 94, 0.3);
    letter-spacing: 1px;
}

.tag-badge.design-matrix::before {
    content: '>';
    margin-right: 4px;
    opacity: 0.7;
}

.tag-badge.design-matrix:hover {
    background: rgba(34, 197, 94, 0.15);
    box-shadow: 0 0 20px rgba(34, 197, 94, 0.5);
}

/* Pulse Glow - Urgent/Time-sensitive */
.tag-badge.design-pulse-glow {
    background: var(--tag-color);
    color: #fff;
    border: none;
    animation: urgent-pulse 1.5s ease-in-out infinite;
}

@keyframes urgent-pulse {
    0%, 100% {
        box-shadow: 0 0 5px var(--tag-color), 0 0 10px var(--tag-color);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 10px var(--tag-color), 0 0 20px var(--tag-color), 0 0 30px var(--tag-color);
        transform: scale(1.02);
    }
}

.tag-badge.design-pulse-glow:hover {
    animation: none;
    box-shadow: 0 0 15px var(--tag-color), 0 0 25px var(--tag-color);
}

/* Radar - Watching/Monitoring */
.tag-badge.design-radar {
    background: rgba(255, 217, 61, 0.15);
    color: #ffd93d;
    border: 1px solid #ffd93d;
    position: relative;
    overflow: hidden;
}

.tag-badge.design-radar::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        rgba(255, 217, 61, 0.3) 30deg,
        transparent 60deg
    );
    transform-origin: center;
    animation: radar-sweep 2s linear infinite;
}

@keyframes radar-sweep {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

.tag-badge.design-radar:hover {
    box-shadow: 0 0 15px rgba(255, 217, 61, 0.5);
}

/* Checkmark Pulse - Success/Acquired */
.tag-badge.design-checkmark-pulse {
    background: linear-gradient(135deg, #00bf6f 0%, #10b981 100%);
    color: #fff;
    border: none;
    box-shadow: 0 2px 8px rgba(0, 191, 111, 0.4);
}

.tag-badge.design-checkmark-pulse::before {
    content: '✓';
    margin-right: 4px;
    animation: check-bounce 2s ease-in-out infinite;
}

@keyframes check-bounce {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

.tag-badge.design-checkmark-pulse:hover {
    box-shadow: 0 4px 16px rgba(0, 191, 111, 0.6);
}

/* Gold Shine - Premium/Valuable */
.tag-badge.design-gold-shine {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #d97706 100%);
    color: #78350f;
    border: none;
    box-shadow: 0 2px 8px rgba(251, 191, 36, 0.4);
    position: relative;
    overflow: hidden;
}

.tag-badge.design-gold-shine::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.4),
        transparent
    );
    animation: gold-shine 3s ease-in-out infinite;
}

@keyframes gold-shine {
    0% { left: -100%; }
    50%, 100% { left: 150%; }
}

.tag-badge.design-gold-shine:hover {
    box-shadow: 0 4px 16px rgba(251, 191, 36, 0.6);
}

/* Circuit - Tech Portfolio */
.tag-badge.design-circuit {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.1) 0%, rgba(6, 182, 212, 0.2) 100%);
    color: #06b6d4;
    border: 1px solid #06b6d4;
    position: relative;
}

.tag-badge.design-circuit::before,
.tag-badge.design-circuit::after {
    content: '';
    position: absolute;
    background: #06b6d4;
    border-radius: 50%;
}

.tag-badge.design-circuit::before {
    width: 4px;
    height: 4px;
    top: 50%;
    left: 4px;
    transform: translateY(-50%);
    box-shadow: 0 0 4px #06b6d4;
}

.tag-badge.design-circuit::after {
    width: 4px;
    height: 4px;
    top: 50%;
    right: 4px;
    transform: translateY(-50%);
    box-shadow: 0 0 4px #06b6d4;
}

.tag-badge.design-circuit:hover {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.2) 0%, rgba(6, 182, 212, 0.3) 100%);
    box-shadow: 0 0 15px rgba(6, 182, 212, 0.4);
}

/* Price Tag - For Sale */
.tag-badge.design-price-tag {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #fff;
    border: none;
    border-radius: 4px 12px 12px 4px;
    padding-left: 16px;
    position: relative;
}

.tag-badge.design-price-tag::before {
    content: '';
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    background: #fff;
    border-radius: 50%;
    box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.3);
}

.tag-badge.design-price-tag:hover {
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.5);
    transform: translateY(-1px);
}

/* ═══════════════════════════════════════════════════════════════
   TAG BADGE VARIANTS
   ═══════════════════════════════════════════════════════════════ */

/* System vs Custom base styling */
.tag-badge.system {
    font-weight: 800;
}

.tag-badge.custom {
    font-weight: 600;
}

/* Remove button */
.tag-badge .tag-remove {
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.15s, transform 0.15s;
    margin-left: 4px;
    font-size: 1.1em;
}

.tag-badge .tag-remove:hover {
    opacity: 1;
    transform: scale(1.2);
}

/* ═══════════════════════════════════════════════════════════════
   SYSTEM TAG SPECIFIC COLORS (via CSS custom property)
   ═══════════════════════════════════════════════════════════════ */
.tag-badge[data-slug="expiring"] {
    --tag-color: #ef4444;
}

.tag-badge[data-slug="just-renewed"] {
    --tag-color: #22c55e;
}

.tag-badge[data-slug="deleting"] {
    --tag-color: #f97316;
}

.tag-badge[data-slug="on-hold"] {
    --tag-color: #eab308;
}

.tag-badge[data-slug="long-registration"] {
    --tag-color: #8b5cf6;
}

/* ─────────────────────────────────────────────────────────────────
   TAG FILTER
   ───────────────────────────────────────────────────────────────── */

.tag-filter-wrap {
    position: relative;
}

.tag-filter-select {
    appearance: none;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 32px 8px 12px;
    color: var(--text);
    font-size: 0.85rem;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888899' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    min-width: 140px;
}

.tag-filter-select:hover {
    border-color: var(--blue);
}

.tag-filter-select:focus {
    outline: none;
    border-color: var(--blue);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

/* ─────────────────────────────────────────────────────────────────
   RULE CARDS (Tag Rules)
   ───────────────────────────────────────────────────────────────── */

.rule-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}

.rule-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px;
}

.rule-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.rule-card-tag {
    display: flex;
    align-items: center;
    gap: 10px;
}

.rule-card-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.rule-card-name {
    font-weight: 600;
    color: var(--text);
}

.rule-card-toggle {
    position: relative;
    width: 44px;
    height: 24px;
}

.rule-card-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.rule-card-toggle-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 24px;
    transition: background 0.2s, border-color 0.2s;
}

.rule-card-toggle-slider::before {
    content: '';
    position: absolute;
    height: 18px;
    width: 18px;
    left: 2px;
    bottom: 2px;
    background: var(--text-dim);
    border-radius: 50%;
    transition: transform 0.2s, background 0.2s;
}

.rule-card-toggle input:checked + .rule-card-toggle-slider {
    background: var(--blue);
    border-color: var(--blue);
}

.rule-card-toggle input:checked + .rule-card-toggle-slider::before {
    transform: translateX(20px);
    background: white;
}

.rule-card-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.rule-card-type {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.rule-card-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rule-card-field label {
    font-size: 0.8rem;
    color: var(--text-dim);
}

.rule-card-field input {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 8px 12px;
    color: var(--text);
    font-family: var(--mono);
    font-size: 0.85rem;
}

.rule-card-field input:focus {
    outline: none;
    border-color: var(--blue);
}

.rule-card.disabled {
    opacity: 0.5;
}

/* ─────────────────────────────────────────────────────────────────
   MANAGE TAGS MODAL
   ───────────────────────────────────────────────────────────────── */

.manage-tags-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
    max-height: 300px;
    overflow-y: auto;
}

.manage-tag-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--surface-2);
    border-radius: 8px;
    flex-wrap: wrap;
}

.manage-tag-item .tag-badge {
    min-width: 80px;
}

.manage-tag-item .tag-status-badge {
    margin-left: -4px;
}

.manage-tag-item.system {
    opacity: 0.7;
}

.manage-tag-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

.manage-tag-color {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    cursor: pointer;
    border: 1px solid var(--border);
    padding: 2px;
}

.manage-tag-name {
    width: 140px;
    background: transparent;
    border: none;
    color: var(--text);
    font-size: 0.9rem;
}

.manage-tag-name:focus {
    outline: none;
}

.manage-tag-delete {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    opacity: 0.6;
    transition: opacity 0.15s, color 0.15s;
}

.manage-tag-delete:hover {
    opacity: 1;
    color: var(--red);
}

.add-tag-form {
    display: flex;
    gap: 8px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.add-tag-form input[type="text"] {
    flex: 1;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 8px 12px;
    color: var(--text);
    font-size: 0.9rem;
}

.add-tag-form input[type="color"] {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    background: transparent;
}

/* ─────────────────────────────────────────────────────────────────
   DOMAIN DETAIL MODAL
   ───────────────────────────────────────────────────────────────── */

.domain-detail-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.domain-detail-section h4 {
    font-size: 0.85rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 12px;
}

.detail-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.detail-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.detail-label {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.detail-value {
    font-family: var(--mono);
    font-size: 0.9rem;
    color: var(--text);
}

.tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 32px;
}

/* Drag-and-drop tag zones */
.tag-hint {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 12px;
    opacity: 0.7;
}

.tag-drag-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 600px) {
    .tag-drag-container {
        grid-template-columns: 1fr;
    }
}

.tag-drop-zone {
    background: var(--surface-2);
    border: 2px dashed var(--border);
    border-radius: 12px;
    padding: 16px;
    min-height: 100px;
    transition: all 0.2s ease;
}

.tag-drop-zone.assigned {
    border-color: var(--blue);
    background: color-mix(in srgb, var(--blue) 5%, var(--surface-2));
}

.tag-drop-zone.available {
    border-color: var(--border);
}

.tag-drop-zone.drag-over {
    border-color: var(--green);
    background: color-mix(in srgb, var(--green) 10%, var(--surface-2));
    transform: scale(1.01);
}

.drop-zone-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    margin-bottom: 12px;
    font-weight: 600;
}

.tag-drop-zone .tag-list {
    min-height: 40px;
}

.tag-drop-zone .tag-badge {
    cursor: grab;
    user-select: none;
    transition: transform 0.15s, opacity 0.15s, box-shadow 0.15s;
}

.tag-drop-zone .tag-badge:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.tag-drop-zone .tag-badge.dragging {
    opacity: 0.5;
    cursor: grabbing;
}

.tag-drop-zone .tag-badge.drag-ghost {
    position: fixed;
    pointer-events: none;
    z-index: 10000;
    transform: rotate(3deg) scale(1.1);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.tag-drop-zone.assigned .empty-state,
.tag-drop-zone.available .empty-state {
    color: var(--text-muted);
    font-size: 0.85rem;
    font-style: italic;
    padding: 8px;
}

.tag-assign-section {
    margin-top: 12px;
}

.tag-assign-section select {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 8px 12px;
    color: var(--text);
    font-size: 0.85rem;
    cursor: pointer;
    min-width: 160px;
}

#domain-detail-notes {
    width: 100%;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 12px;
    color: var(--text);
    font-family: var(--sans);
    font-size: 0.9rem;
    resize: vertical;
}

#domain-detail-notes:focus {
    outline: none;
    border-color: var(--blue);
}

/* Delete button danger style */
.btn.btn-danger {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: var(--red);
}

.btn.btn-danger:hover {
    background: rgba(239, 68, 68, 0.25);
    border-color: var(--red);
}

/* Section description */
.section-desc {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 20px;
}

/* Empty state */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
}

.empty-state svg {
    color: var(--text-muted);
    margin-bottom: 16px;
    opacity: 0.5;
}

.empty-state p {
    color: var(--text-muted);
    margin-bottom: 20px;
}

/* Section loading state */
.section-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 40px;
    color: var(--text-muted);
}

/* Spinner for modals */
.spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--border);
    border-top-color: var(--blue);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

/* ─────────────────────────────────────────────────────────────────
   RESULT TAGS (shown next to TLD in lookup result)
   ───────────────────────────────────────────────────────────────── */

.result-tags {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-left: 16px;
    vertical-align: middle;
}

.result-tags .tag-badge {
    font-size: 0.85rem;
    padding: 8px 16px;
}

/* Override pill size in result tags */
.result-tags .tag-badge.design-pill {
    padding: 10px 22px;
    font-size: 0.9rem;
}

/* Override glow to be more visible in results */
.result-tags .tag-badge.design-glow {
    padding: 8px 18px;
}

/* Raw response navigation for registrar */
.raw-nav-btn.registrar {
    background: rgba(139, 92, 246, 0.15);
    color: var(--purple);
    border-color: rgba(139, 92, 246, 0.3);
}

.raw-nav-btn.registrar:hover {
    background: rgba(139, 92, 246, 0.25);
}

/* ─────────────────────────────────────────────────────────────────
   DOMAIN MONITORS TAB
   ───────────────────────────────────────────────────────────────── */

.monitors-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 32px 24px;
}

.monitors-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 16px;
}

.monitors-title {
    display: flex;
    align-items: center;
    gap: 16px;
}

.monitors-title .title-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--blue), var(--purple));
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.monitors-title .title-icon svg {
    color: #fff;
}

.monitors-title h2 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
}

.monitors-title .subtitle {
    margin: 4px 0 0;
    color: var(--text-dim);
    font-size: 0.9rem;
}

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

/* Tier Info Bar */
.monitors-tier-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 20px;
    margin-bottom: 16px;
}

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

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

.tier-badge.free {
    background: var(--bg);
    color: var(--text-dim);
    border: 1px solid var(--border);
}

.tier-badge.premium {
    background: linear-gradient(135deg, var(--blue), var(--purple));
    color: #fff;
}

.tier-badge.enterprise {
    background: linear-gradient(135deg, #f59e0b, #ef4444);
    color: #fff;
}

.tier-usage {
    color: var(--text-dim);
    font-size: 0.9rem;
}

.tier-features {
    display: flex;
    gap: 16px;
    font-size: 0.85rem;
    color: var(--text-dim);
}

/* Monitor Stats */
.monitors-stats {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.monitors-stats .stat-item {
    flex: 1;
    min-width: 100px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
}

.monitors-stats .stat-value {
    display: block;
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 4px;
}

.monitors-stats .stat-value.active {
    color: var(--green);
}

.monitors-stats .stat-value.warning {
    color: var(--yellow);
}

.monitors-stats .stat-label {
    font-size: 0.8rem;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Monitor Card */
.monitor-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 20px;
    transition: all 0.2s;
}

.monitor-card:hover {
    border-color: var(--blue);
    box-shadow: 0 4px 24px rgba(59, 130, 246, 0.1);
}

.monitor-card.paused {
    opacity: 0.7;
}

.monitor-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.monitor-domain {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text);
}

.monitor-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    padding: 4px 10px;
    border-radius: 12px;
}

.monitor-status.active {
    background: rgba(34, 197, 94, 0.15);
    color: var(--green);
}

.monitor-status.paused {
    background: rgba(234, 179, 8, 0.15);
    color: var(--yellow);
}

.monitor-status.error {
    background: rgba(239, 68, 68, 0.15);
    color: var(--red);
}

.monitor-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 12px;
    font-size: 0.85rem;
    color: var(--text-dim);
}

.monitor-meta-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.monitor-types {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.monitor-type-badge {
    font-size: 0.7rem;
    padding: 2px 8px;
    border-radius: 8px;
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text-dim);
}

.monitor-type-badge.active {
    background: rgba(59, 130, 246, 0.15);
    color: var(--blue);
    border-color: var(--blue);
}

.monitor-card-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.monitor-card-actions .btn {
    flex: 1;
    padding: 8px;
    font-size: 0.8rem;
}

/* Icon button actions */
.monitor-card-actions.icon-actions {
    justify-content: center;
    gap: 6px;
}

.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-dim);
    cursor: pointer;
    transition: all 0.2s ease;
}

.icon-btn svg {
    width: 18px;
    height: 18px;
}

.icon-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text);
    border-color: var(--text-dim);
}

.icon-btn.danger:hover {
    background: rgba(255, 59, 48, 0.15);
    color: var(--red);
    border-color: var(--red);
}

/* Events List */
.events-list {
    max-height: 500px;
    overflow-y: auto;
}

.event-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    border-bottom: 1px solid var(--border);
    transition: background 0.2s;
}

.event-item:hover {
    background: var(--bg);
}

.event-item.unread {
    background: rgba(59, 130, 246, 0.05);
}

.event-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.event-icon.whois_change {
    background: rgba(139, 92, 246, 0.15);
    color: var(--purple);
}

.event-icon.dns_change {
    background: rgba(59, 130, 246, 0.15);
    color: var(--blue);
}

.event-icon.domain_dropped {
    background: rgba(239, 68, 68, 0.15);
    color: var(--red);
}

.event-icon.domain_registered {
    background: rgba(34, 197, 94, 0.15);
    color: var(--green);
}

.event-icon.expiry_approaching {
    background: rgba(234, 179, 8, 0.15);
    color: var(--yellow);
}

.event-content {
    flex: 1;
    min-width: 0;
}

.event-domain {
    font-weight: 600;
    color: var(--text);
}

.event-description {
    font-size: 0.9rem;
    color: var(--text-dim);
    margin-top: 2px;
}

.event-time {
    font-size: 0.8rem;
    color: var(--text-dim);
    white-space: nowrap;
}

.event-changes {
    margin-top: 8px;
    font-size: 0.85rem;
}

.event-change {
    display: flex;
    gap: 8px;
    padding: 4px 0;
}

.event-change-field {
    font-weight: 500;
    color: var(--text);
    min-width: 100px;
}

.event-change-old {
    color: var(--red);
    text-decoration: line-through;
}

.event-change-new {
    color: var(--green);
}

.events-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}

.event-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

/* Event Details Modal */
.event-details-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    background: var(--glass-hover);
    border-radius: 8px;
    margin-bottom: 16px;
}

.event-details-domain {
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--text);
}

.event-details-type {
    padding: 4px 10px;
    background: rgba(139, 92, 246, 0.15);
    color: var(--purple);
    border-radius: 4px;
    font-size: 0.8rem;
    text-transform: uppercase;
    font-weight: 600;
}

.event-details-time {
    margin-left: auto;
    font-size: 0.85rem;
    color: var(--text-dim);
}

.event-changes-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 16px;
}

.event-changes-table th,
.event-changes-table td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--border);
}

.event-changes-table th {
    background: var(--surface);
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-dim);
}

.event-changes-table tr.changed {
    background: rgba(239, 68, 68, 0.05);
}

.event-changes-table tr.unchanged {
    opacity: 0.6;
}

.event-changes-table .field-name {
    font-weight: 500;
    color: var(--text);
    font-family: var(--mono);
    font-size: 0.9rem;
}

.event-changes-table .old-value {
    color: var(--red);
    font-family: var(--mono);
    font-size: 0.85rem;
}

.event-changes-table .new-value {
    color: var(--green);
    font-family: var(--mono);
    font-size: 0.85rem;
}

.event-changes-table .null-value {
    color: var(--text-dim);
    font-style: italic;
}

.no-changes {
    text-align: center;
    color: var(--text-dim);
    padding: 24px;
    background: var(--surface);
    border-radius: 8px;
}

.event-debug {
    margin-top: 16px;
}

.event-debug summary {
    cursor: pointer;
    color: var(--text-dim);
    font-size: 0.85rem;
    padding: 8px;
    border-radius: 4px;
}

.event-debug summary:hover {
    background: var(--surface);
}

.event-debug pre {
    margin-top: 8px;
    padding: 12px;
    background: var(--surface);
    border-radius: 8px;
    font-size: 0.75rem;
    overflow-x: auto;
    max-height: 300px;
    overflow-y: auto;
}

/* Check History Styles */
.check-history-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border);
}

.history-stat {
    text-align: center;
    padding: 16px;
    background: var(--surface);
    border-radius: 12px;
    border: 1px solid var(--border);
}

.history-stat-value {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--green);
}

.history-stat-label {
    display: block;
    font-size: 0.8rem;
    color: var(--text-dim);
    margin-top: 4px;
}

.check-history-list {
    max-height: 400px;
    overflow-y: auto;
}

.check-history-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.check-history-table th,
.check-history-table td {
    padding: 12px 10px;
    text-align: left;
    border-bottom: 1px solid var(--border);
}

.check-history-table th {
    background: var(--surface);
    font-weight: 600;
    color: var(--text-dim);
    font-size: 0.8rem;
    text-transform: uppercase;
    position: sticky;
    top: 0;
}

.check-history-table tr:hover {
    background: var(--bg);
}

.status-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
}

.status-badge.success {
    background: rgba(34, 197, 94, 0.15);
    color: var(--green);
}

.status-badge.error {
    background: rgba(239, 68, 68, 0.15);
    color: var(--red);
}

.events-badge {
    display: inline-block;
    background: var(--blue);
    color: #fff;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}

.on-demand-badge {
    display: inline-block;
    background: rgba(168, 85, 247, 0.15);
    color: var(--purple);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    margin-top: 4px;
}

.error-cell {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-dim);
    font-size: 0.85rem;
}

@media (max-width: 768px) {
    .check-history-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .check-history-table {
        font-size: 0.8rem;
    }

    .check-history-table th,
    .check-history-table td {
        padding: 8px 6px;
    }

    .error-cell {
        max-width: 80px;
    }

    /* Monitor cards - 2 per row on mobile */
    #monitors-grid.domains-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .monitor-card {
        padding: 12px;
        border-radius: 12px;
    }

    .monitor-card-header {
        margin-bottom: 8px;
    }

    .monitor-domain {
        font-size: 0.85rem;
        word-break: break-all;
    }

    .monitor-status {
        font-size: 0.65rem;
        padding: 2px 6px;
    }

    .monitor-meta {
        gap: 6px;
        margin-bottom: 8px;
        font-size: 0.7rem;
    }

    .monitor-meta-item {
        gap: 2px;
    }

    .monitor-types {
        gap: 4px;
        margin-bottom: 8px;
        flex-wrap: wrap;
    }

    .monitor-type-badge {
        font-size: 0.6rem;
        padding: 2px 5px;
    }

    .monitor-card-actions {
        gap: 4px;
        margin-top: 8px;
        padding-top: 8px;
    }

    .monitor-card-actions.icon-actions {
        gap: 4px;
    }

    .icon-btn {
        width: 28px;
        height: 28px;
    }

    .icon-btn svg {
        width: 14px;
        height: 14px;
    }
}

/* Badge styles */
.badge-count {
    background: var(--red);
    color: #fff;
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 10px;
    margin-left: 6px;
    font-weight: 600;
}

.badge-inline {
    background: var(--red);
    color: #fff;
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 10px;
    margin-left: 8px;
    font-weight: 600;
}

/* Snapshot Detail Styles */
.snapshot-section {
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border);
}

.snapshot-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.snapshot-section h4 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--blue);
}

.snapshot-time {
    font-size: 0.8rem;
    color: var(--text-dim);
    margin-bottom: 16px;
}

/* Snapshot view tabs */
.snapshot-view-tabs {
    display: flex;
    gap: 0;
    padding: 0 24px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
}

#snapshot-raw-view {
    padding: 0;
}

#snapshot-raw-view pre {
    margin: 0;
    padding: 24px;
    background: var(--bg);
    font-family: var(--mono);
    font-size: 0.8rem;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-all;
    min-height: 300px;
    max-height: 500px;
    overflow-y: auto;
    color: var(--text-dim);
}

.snapshot-data-table {
    width: 100%;
    border-collapse: collapse;
}

.snapshot-data-table td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
}

.snapshot-data-table .field-name {
    font-weight: 500;
    color: var(--text-dim);
    text-transform: capitalize;
    width: 35%;
    font-size: 0.85rem;
}

.snapshot-data-table .field-value {
    color: var(--text);
    font-family: var(--mono);
    font-size: 0.85rem;
    word-break: break-all;
}

/* Field value wrapper for long values */
.field-value-wrapper {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.field-value-content {
    position: relative;
}

.field-value-content.collapsed .field-value-text {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.field-value-toggle {
    align-self: flex-start;
    padding: 4px 10px;
    font-size: 0.75rem;
    font-family: var(--mono);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--cyan);
    cursor: pointer;
    transition: all 0.2s;
}

.field-value-toggle:hover {
    background: var(--surface-2);
    border-color: var(--cyan);
}

.field-value-content.collapsed ~ .field-value-toggle .toggle-hide {
    display: none;
}

.field-value-content:not(.collapsed) ~ .field-value-toggle .toggle-show {
    display: none;
}

.dns-records-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}

.dns-record-group h5 {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--green);
    margin-bottom: 8px;
    padding: 4px 8px;
    background: rgba(34, 197, 94, 0.1);
    border-radius: 4px;
    display: inline-block;
}

.dns-record-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.dns-record-list li {
    font-family: var(--mono);
    font-size: 0.8rem;
    padding: 4px 0;
    color: var(--text);
    word-break: break-all;
}

.error-icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background: rgba(239, 68, 68, 0.2);
    color: var(--red);
    border-radius: 50%;
    font-size: 0.7rem;
    font-weight: bold;
    cursor: help;
}

.actions-cell {
    vertical-align: middle;
    white-space: nowrap;
}

.actions-cell > * {
    display: inline-block;
    vertical-align: middle;
    margin-right: 6px;
}

.actions-cell > *:last-child {
    margin-right: 0;
}

.view-raw-btn {
    padding: 4px 8px !important;
}

/* Checkbox group */
.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 0.9rem;
}

.checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--blue);
}

/* ─────────────────────────────────────────────────────────────────
   UNIVERSAL MODAL STYLES
   ───────────────────────────────────────────────────────────────── */

/* Modal Backdrop */
.modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(3, 3, 5, 0.85);
    backdrop-filter: blur(8px);
}

/* Modal Content (alternative to modal-box) */
.modal-content {
    position: relative;
    width: 100%;
    max-width: 500px;
    max-height: calc(100vh - 48px);
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    animation: modalIn 0.3s ease;
    overflow: hidden;
}

.modal-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--gradient-main);
    z-index: 1;
}

.modal-lg .modal-content {
    max-width: 700px;
}

/* Modal Header */
.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
}

.modal-header h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text);
    margin: 0;
}

.modal-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.modal-header-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.modal-header-actions .btn svg {
    width: 14px;
    height: 14px;
}

.modal-header-actions .btn.danger:hover {
    background: rgba(255, 59, 48, 0.15);
    color: var(--red);
    border-color: var(--red);
}

/* Modal Close Button */
.modal-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-dim);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    transition: all 0.2s;
}

.modal-close:hover {
    background: var(--red);
    border-color: var(--red);
    color: #fff;
}

/* ─────────────────────────────────────────────────────────────────
   UNIVERSAL SELECT/DROPDOWN STYLES
   ───────────────────────────────────────────────────────────────── */

/* Universal dark select styling */
select,
.filter-select,
.form-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 36px 10px 14px;
    color: var(--text);
    font-family: var(--sans);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
    color-scheme: dark;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888899' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}

select:hover,
.filter-select:hover,
.form-select:hover {
    border-color: var(--blue);
    background-color: rgba(59, 130, 246, 0.05);
}

select:focus,
.filter-select:focus,
.form-select:focus {
    outline: none;
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

/* Option styling for dark theme */
select option,
.filter-select option,
.form-select option {
    background-color: var(--surface);
    color: var(--text);
    padding: 10px;
}

select option:checked,
.filter-select option:checked,
.form-select option:checked {
    background-color: var(--blue);
    color: #fff;
}

/* Specific filter-select overrides for monitors section */
#monitor-interval-filter,
#events-filter {
    min-width: 140px;
}

/* ─────────────────────────────────────────────────────────────────
   UNIVERSAL FORM STYLES
   ───────────────────────────────────────────────────────────────── */

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text);
    margin-bottom: 8px;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group input[type="number"],
.form-group input[type="url"],
.form-group textarea {
    width: 100%;
    padding: 12px 16px;
    font-family: var(--sans);
    font-size: 0.95rem;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    outline: none;
    transition: all 0.2s;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--text-muted);
}

.form-group input:hover,
.form-group textarea:hover {
    border-color: rgba(59, 130, 246, 0.5);
}

.form-group input:focus,
.form-group textarea:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.form-group select {
    width: 100%;
}

/* Disabled options styling for premium intervals */
.form-group select option:disabled {
    color: var(--text-muted);
    background: var(--surface);
}

/* Notification channel styling */
.notification-channel {
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 12px;
}

.notification-channel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.notification-channel-name {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
}

.notification-channel-name svg {
    width: 18px;
    height: 18px;
    color: var(--blue);
}

/* Notification Options (Monitor Form) */
.notification-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.notification-channel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.channel-header {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text);
    font-size: 0.9rem;
}

.channel-header svg {
    color: var(--text-dim);
}

.notification-mode-select {
    min-width: 160px;
    padding: 6px 12px;
    font-size: 0.85rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
}

.notification-channel-hint {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-left: 4px;
}

.notification-channel-hint.connected {
    color: var(--green);
}

/* Toggle Switch */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}

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

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--surface2);
    border: 1px solid var(--border);
    transition: all 0.2s ease;
    border-radius: 24px;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 2px;
    bottom: 2px;
    background-color: var(--text-muted);
    transition: all 0.2s ease;
    border-radius: 50%;
}

.toggle-switch input:checked + .toggle-slider {
    background: linear-gradient(135deg, var(--blue) 0%, var(--purple) 100%);
    border-color: transparent;
}

.toggle-switch input:checked + .toggle-slider:before {
    transform: translateX(20px);
    background-color: white;
}

.toggle-switch input:disabled + .toggle-slider {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Telegram Setup Panel */
.telegram-setup-panel {
    margin-top: 12px;
}

.telegram-connect-steps {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 16px;
    margin: 12px 0;
}

.telegram-connect-steps ol {
    margin: 0;
    padding-left: 20px;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.telegram-connect-steps li {
    margin-bottom: 6px;
}

.telegram-connect-steps code {
    background: var(--surface2);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.85em;
    color: var(--blue);
}

.telegram-code-section {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.telegram-code {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.telegram-code-value {
    font-family: var(--mono);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--green);
    letter-spacing: 0.1em;
    background: var(--surface);
    padding: 8px 16px;
    border-radius: 8px;
    border: 1px solid var(--border);
}

.telegram-code small {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.telegram-verify-section {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.telegram-verify-section .btn {
    flex-shrink: 0;
    white-space: nowrap;
    padding: 6px 12px;
    font-size: 0.75rem;
}

.telegram-verify-status {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-family: var(--mono);
    flex: 1;
    min-width: 0;
}

.telegram-connected-panel {
    margin-top: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Progressive config section */
.progressive-config {
    margin-top: 16px;
    padding: 16px;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.progressive-config-title {
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 12px;
    color: var(--text-muted);
}

.progressive-config-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.progressive-config-item label {
    display: block;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.progressive-config-item select {
    width: 100%;
    padding: 8px 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font-size: 0.85rem;
}

.progressive-config-item select option:disabled {
    color: var(--text-dim);
    background: var(--bg);
}

.progressive-info-hint {
    display: block;
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--text-dim);
    margin-top: 4px;
}

.progressive-tier-note {
    margin-top: 12px;
    padding: 8px 12px;
    background: rgba(59, 130, 246, 0.1);
    border-radius: 6px;
    font-size: 0.8rem;
    color: var(--blue);
}

@media (max-width: 500px) {
    .progressive-config-grid {
        grid-template-columns: 1fr;
    }
}

.form-hint {
    display: block;
    margin-top: 6px;
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.4;
}

.field-code {
    display: block;
    font-family: var(--mono);
    font-size: 0.85rem;
    background: var(--surface);
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid var(--border);
    color: var(--blue);
    margin-bottom: 8px;
    word-break: break-all;
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}

.form-actions .btn {
    min-width: 100px;
    padding: 12px 20px;
}

/* ─────────────────────────────────────────────────────────────────
   NAV DROPDOWN MOBILE FIX
   ───────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    /* Dropdowns become inline accordions in mobile menu */
    .nav-dropdown {
        position: static;
        border-bottom: 1px solid var(--border);
    }

    .dropdown-menu {
        position: static;
        transform: none;
        opacity: 1;
        visibility: visible;
        background: none;
        backdrop-filter: none;
        border: none;
        border-radius: 0;
        box-shadow: none;
        min-width: 0;
        padding: 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
    }

    .dropdown-menu::before { display: none; }

    /* Disable hover on mobile */
    .nav-dropdown:hover .dropdown-menu {
        max-height: 0;
        transform: none;
    }

    /* Open state */
    .nav-dropdown.open .dropdown-menu {
        max-height: 500px;
        transform: none;
    }

    .dropdown-item {
        padding: 12px 16px 12px 32px;
        font-size: 0.8rem;
        border-radius: 0;
        color: var(--text-dim);
    }
    .dropdown-item:hover { transform: none; color: var(--text); }

    /* No backdrop in menu */
    .nav-dropdown.open::before { display: none; }

    /* Mobile modal adjustments */
    .modal-content {
        max-width: calc(100vw - 32px);
        max-height: calc(100vh - 32px);
        border-radius: 12px;
    }

    .modal-header {
        padding: 16px 20px;
    }

    .modal-header h3 {
        font-size: 1rem;
    }

    .form-actions {
        flex-direction: column-reverse;
    }

    .form-actions .btn {
        width: 100%;
    }
}

/* ─────────────────────────────────────────────────────────────────
   DOMAIN AVAILABLE BANNER
   ───────────────────────────────────────────────────────────────── */

.domain-available-banner {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    margin-bottom: 24px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(6, 182, 212, 0.1) 100%);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 12px;
    animation: availablePulse 2s ease-in-out infinite;
}

@keyframes availablePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.2); }
    50% { box-shadow: 0 0 20px 4px rgba(16, 185, 129, 0.15); }
}

.domain-available-banner .available-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--green), var(--cyan));
    border-radius: 50%;
    flex-shrink: 0;
}

.domain-available-banner .available-icon svg {
    width: 24px;
    height: 24px;
    color: white;
}

.domain-available-banner .available-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.domain-available-banner .available-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--green);
}

.domain-available-banner .available-subtitle {
    font-size: 0.9rem;
    color: var(--text-dim);
}

@media (max-width: 600px) {
    .domain-available-banner {
        padding: 16px;
        gap: 12px;
    }

    .domain-available-banner .available-icon {
        width: 40px;
        height: 40px;
    }

    .domain-available-banner .available-icon svg {
        width: 20px;
        height: 20px;
    }

    .domain-available-banner .available-title {
        font-size: 1rem;
    }

    .domain-available-banner .available-subtitle {
        font-size: 0.85rem;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Domain Pricing Section
   ─────────────────────────────────────────────────────────────────────────────*/

/* Compact Pricing Row */
.pricing-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    margin-top: 10px;
    background: var(--glass-hover);
    border-radius: 8px;
    font-size: 0.85rem;
}

.pricing-row.loading {
    position: relative;
}

.pricing-row.loading .pricing-items::after {
    content: 'Loading...';
    color: var(--text-dim);
    font-style: italic;
}

.pricing-icon {
    display: flex;
    align-items: center;
    color: var(--text-dim);
    opacity: 0.7;
}

.pricing-items {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    flex: 1;
}

.price-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--text);
}

.price-chip .price-type {
    color: var(--text-dim);
    font-size: 0.8rem;
}

.price-chip .price-amount {
    font-weight: 600;
    color: var(--accent);
}

.price-chip::after {
    content: '·';
    color: var(--text-dim);
    margin-left: 6px;
    opacity: 0.5;
}

.price-chip:last-child::after {
    display: none;
}

.pricing-source-inline {
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--glass);
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.pricing-source-inline.override {
    background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.15), rgba(var(--accent-rgb), 0.05));
    color: var(--accent);
}

.pricing-source-inline.tld_base {
    background: linear-gradient(135deg, rgba(100, 200, 100, 0.15), rgba(100, 200, 100, 0.05));
    color: #4ade80;
}

.pricing-source-inline.api {
    background: linear-gradient(135deg, rgba(100, 150, 255, 0.15), rgba(100, 150, 255, 0.05));
    color: #60a5fa;
}

.pricing-premium-inline {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 6px;
    background: linear-gradient(135deg, rgba(255, 200, 50, 0.2), rgba(255, 150, 50, 0.1));
    border-radius: 4px;
    color: #fbbf24;
    font-size: 0.75rem;
    font-weight: 500;
}

.pricing-premium-inline svg {
    color: #fbbf24;
}

@media (max-width: 500px) {
    .pricing-row {
        flex-wrap: wrap;
        gap: 6px;
    }
    .pricing-items {
        width: 100%;
        order: 3;
    }
    .pricing-icon {
        order: 1;
    }
    .pricing-source-inline {
        order: 2;
        margin-left: auto;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Pricing Admin Tab
   ─────────────────────────────────────────────────────────────────────────────*/

.pricing-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 20px;
    padding: 4px;
    background: var(--glass);
    border-radius: 8px;
    width: fit-content;
}

.pricing-tab {
    padding: 8px 16px;
    border: none;
    background: transparent;
    color: var(--text-dim);
    cursor: pointer;
    border-radius: 6px;
    font-size: 0.9rem;
    transition: all 0.2s;
}

.pricing-tab:hover {
    color: var(--text);
    background: var(--glass-hover);
}

.pricing-tab.active {
    background: var(--accent);
    color: white;
}

.pricing-subtab {
    animation: fadeIn 0.2s ease;
}

.pricing-subtab.hidden {
    display: none;
}

/* Pricing Table Status Badges */
.pricing-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
}

.pricing-status.enabled {
    background: rgba(74, 222, 128, 0.15);
    color: #4ade80;
}

.pricing-status.disabled {
    background: rgba(248, 113, 113, 0.15);
    color: #f87171;
}

.pricing-status.error {
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
}

/* Premium indicator in tables */
.premium-star {
    color: #fbbf24;
}

/* API Source last error tooltip */
.source-error {
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.75rem;
    color: #f87171;
}

/* Price column formatting */
.price-col {
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}

.price-col.null {
    color: var(--text-dim);
    font-weight: 400;
}

/* Modal large variant */
.modal-box.modal-lg {
    max-width: 600px;
}

/* Field rows for pricing forms */
.field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

@media (max-width: 500px) {
    .field-row {
        grid-template-columns: 1fr;
    }
}

/* ─────────────────────────────────────────────────────────────────
   REGISTRAR PRICING STYLES
   ───────────────────────────────────────────────────────────────── */

/* Stats Row */
.stats-row {
    display: flex;
    gap: 24px;
    padding: 16px 20px;
    background: var(--glass);
    border-radius: 8px;
    margin-bottom: 20px;
}

.stat-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent);
}

.stat-label {
    font-size: 0.75rem;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

@media (max-width: 600px) {
    .stats-row {
        flex-wrap: wrap;
        gap: 16px;
    }
    .stat-item {
        flex: 1 0 45%;
    }
}

/* Source Badges */
.source-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.source-badge.source-tld-list {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(139, 92, 246, 0.1));
    color: #60a5fa;
}

.source-badge.source-manual {
    background: rgba(100, 116, 139, 0.2);
    color: #94a3b8;
}

/* Promo Price */
.promo-price {
    color: #4ade80;
    font-weight: 600;
}

/* Pagination */
.pagination-info {
    color: var(--text-dim);
    font-size: 0.85rem;
}

.pagination-btns {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

#registrar-pricing-pagination {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Import Modal Styles */
.import-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
    background: var(--surface);
    padding: 4px;
    border-radius: 8px;
}

.import-tab {
    flex: 1;
    padding: 10px 16px;
    border: none;
    background: transparent;
    color: var(--text-dim);
    cursor: pointer;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.2s;
}

.import-tab:hover {
    color: var(--text);
    background: var(--glass-hover);
}

.import-tab.active {
    background: var(--accent);
    color: white;
}

.import-tab-content {
    animation: fadeIn 0.2s ease;
}

.import-tab-content.hidden {
    display: none;
}

#import-result {
    margin-top: 16px;
}

.import-success {
    padding: 12px 16px;
    background: rgba(74, 222, 128, 0.1);
    border: 1px solid rgba(74, 222, 128, 0.3);
    border-radius: 8px;
    color: #4ade80;
    font-size: 0.9rem;
    line-height: 1.6;
}

.import-error {
    padding: 12px 16px;
    background: rgba(248, 113, 113, 0.1);
    border: 1px solid rgba(248, 113, 113, 0.3);
    border-radius: 8px;
    color: #f87171;
    font-size: 0.9rem;
}

/* Sample Format Helper */
.sample-format {
    margin-top: 8px;
    font-size: 0.75rem;
    color: var(--text-dim);
}

.sample-format code {
    display: block;
    margin-top: 6px;
    padding: 8px 10px;
    background: var(--surface);
    border-radius: 4px;
    font-family: var(--mono);
    white-space: pre-wrap;
    word-break: break-all;
}

/* ─────────────────────────────────────────────────────────────────
   NOTIFICATIONS DROPDOWN
   ───────────────────────────────────────────────────────────────── */

.notifications-dropdown {
    position: relative;
}

.notifications-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: 0.65rem;
    font-weight: 700;
    background: var(--red);
    color: white;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.notifications-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 320px;
    max-height: 400px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    overflow: hidden;
    z-index: 200;
}

.notifications-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    font-weight: 600;
}

.notifications-list {
    max-height: 340px;
    overflow-y: auto;
}

.notifications-empty {
    padding: 32px 16px;
    text-align: center;
    color: var(--text-dim);
}

.notification-item {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background 0.15s;
}

.notification-item:hover {
    background: var(--glass-hover);
}

.notification-item.unread {
    background: rgba(59, 130, 246, 0.05);
}

.notification-item.unread::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--blue);
}

.notification-item-title {
    font-weight: 500;
    margin-bottom: 4px;
}

.notification-item-body {
    font-size: 0.85rem;
    color: var(--text-dim);
    line-height: 1.4;
}

.notification-item-time {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 6px;
}

/* ─────────────────────────────────────────────────────────────────
   MY DOMAINS MOBILE IMPROVEMENTS
   ───────────────────────────────────────────────────────────────── */

@media (max-width: 480px) {
    .my-domains-header {
        padding: 10px 12px;
        gap: 8px;
        margin-bottom: 10px;
    }

    .my-domains-title .title-icon {
        display: none;
    }

    .my-domains-title h2 {
        font-size: 1rem;
    }

    .my-domains-title .subtitle {
        font-size: 0.7rem;
    }

    .my-domains-stats .stat-item {
        padding: 8px 6px;
    }

    .my-domains-stats .stat-value {
        font-size: 1.1rem;
    }

    .my-domains-stats .stat-label {
        font-size: 0.55rem;
    }

    .domains-grid {
        gap: 8px;
    }

    .domain-card {
        border-radius: 10px;
    }

    .domain-card-header {
        padding: 10px 12px 8px;
    }

    .domain-card-name {
        font-size: 0.88rem;
    }

    .domain-card-tags {
        padding: 0 12px 8px;
        min-height: 24px;
    }

    .domain-card-tags .tag-badge {
        font-size: 0.6rem;
        padding: 2px 6px;
    }

    .domain-card-info-item {
        padding: 10px 12px;
    }

    .domain-card-info-label {
        font-size: 0.6rem;
    }

    .domain-card-info-value {
        font-size: 0.8rem;
    }
}

/* ─────────────────────────────────────────────────────────────────
   DOMAIN VIEW TOGGLE + LIST VIEW
   ───────────────────────────────────────────────────────────────── */

.domain-view-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s;
}
.domain-view-toggle:hover {
    border-color: var(--blue);
    color: var(--text);
    background: var(--surface);
}
.domain-view-toggle:active { transform: scale(0.92); }
.domain-view-toggle .dv-icon-list { display: none; }
.domain-view-toggle.active .dv-icon-grid { display: none; }
.domain-view-toggle.active .dv-icon-list { display: block; }
.domain-view-toggle.active { border-color: var(--blue); color: var(--blue); }

/* List view grid override */
.domains-grid.list-view {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Domain row (list view) */
.domain-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background 0.15s;
}
.domain-row:first-child {
    border-top: 1px solid var(--border);
    border-radius: 10px 10px 0 0;
}
.domain-row:last-child {
    border-radius: 0 0 10px 10px;
}
.domain-row:only-child {
    border-radius: 10px;
}
.domain-row:hover {
    background: rgba(59, 130, 246, 0.06);
}
.domain-row-name {
    flex: 1;
    font-family: var(--mono);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.row-verified {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--green);
    flex-shrink: 0;
}
.domain-row-tags {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}
.domain-row-tags .tag-badge {
    font-size: 0.6rem;
    padding: 2px 8px;
}
.domain-row-expiry {
    width: 50px;
    text-align: right;
    font-family: var(--mono);
    font-size: 0.8rem;
    font-weight: 600;
    flex-shrink: 0;
}
.domain-row-expiry.healthy { color: var(--green); }
.domain-row-expiry.expiring { color: var(--red); }
.domain-row-expiry.expired { color: var(--red); opacity: 0.7; }
.domain-row-registrar {
    width: 140px;
    text-align: right;
    color: var(--text-muted);
    font-size: 0.78rem;
    flex-shrink: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Mobile list view adjustments */
@media (max-width: 768px) {
    .domain-row-tags { display: none; }
    .domain-row-registrar { display: none; }
    .domain-row { padding: 10px 12px; }
    .domain-row-name { font-size: 0.82rem; }
    .domain-row-expiry { width: 40px; font-size: 0.75rem; }
}

@media (max-width: 480px) {
    .domain-row { padding: 8px 10px; }
    .domain-row-name { font-size: 0.78rem; }
}

/* Field value display */
.field-value {
    padding: 8px 12px;
    background: var(--surface);
    border-radius: 6px;
    font-family: var(--mono);
    font-size: 0.9rem;
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE COMPACT — Comprehensive mobile size reduction
   Targets oversized buttons, modals, forms, tables, tags,
   filter bars, settings cards, and confirm dialogs.
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

    /* ── Buttons ── */
    .btn {
        padding: 10px 18px;
        font-size: 0.7rem;
        letter-spacing: 0.06em;
    }

    .btn-main {
        border-radius: 6px;
    }

    .btn-sec {
        padding: 8px 14px;
        font-size: 0.7rem;
        border-radius: 6px;
    }

    .btn-secondary {
        padding: 8px 14px;
        font-size: 0.7rem;
    }

    .btn-ghost {
        padding: 5px 10px;
        font-size: 0.6rem;
    }

    .btn-success,
    .btn-danger {
        padding: 8px 14px;
        font-size: 0.7rem;
    }

    .btn.btn-icon {
        padding: 5px;
    }

    .btn.btn-icon svg {
        width: 16px;
        height: 16px;
    }

    .action-btn {
        padding: 8px 14px;
        font-size: 0.8rem;
        border-radius: 8px;
        gap: 6px;
    }

    .action-btn.large {
        padding: 10px 20px;
        font-size: 0.85rem;
        border-radius: 10px;
    }

    .action-btn svg {
        width: 16px;
        height: 16px;
    }

    /* ── Modals — tighter everything ── */
    .modal-top {
        padding: 14px 16px;
    }

    .modal-top h2 {
        font-size: 0.88rem;
    }

    .modal-body {
        padding: 14px 16px;
    }

    .modal-foot {
        padding: 10px 16px;
        gap: 8px;
    }

    .modal-foot .btn {
        padding: 8px 14px;
        font-size: 0.7rem;
    }

    .modal-link {
        padding: 8px 16px;
        font-size: 0.7rem;
    }

    /* Modal header variant (monitor/pricing modals) */
    .modal-header {
        padding: 14px 16px;
    }

    .modal-header h3 {
        font-size: 0.95rem;
    }

    .modal-header-actions .btn {
        padding: 6px 10px;
        font-size: 0.65rem;
    }

    .modal-lg .modal-content {
        max-width: 100%;
    }

    .modal-box.modal-lg {
        max-width: 100%;
    }

    /* Confirm dialog */
    .confirm-box {
        padding: 20px 16px;
    }

    .confirm-box h2 {
        font-size: 1.1rem;
        margin-bottom: 8px;
    }

    .confirm-box p {
        font-size: 0.85rem;
        margin-bottom: 16px;
    }

    .confirm-icon {
        width: 48px;
        height: 48px;
        margin-bottom: 14px;
    }

    .confirm-icon svg {
        width: 24px;
        height: 24px;
    }

    /* ── Form elements inside modals ── */
    .field {
        margin-bottom: 10px;
    }

    .field label {
        font-size: 0.55rem;
        margin-bottom: 5px;
    }

    .field input,
    .field select,
    .field textarea {
        padding: 10px 12px;
        font-size: 0.82rem;
        border-radius: 6px;
    }

    .field textarea {
        min-height: 60px;
    }

    .field-hint {
        font-size: 0.65rem;
        margin-top: 4px;
    }

    .field-check {
        gap: 8px;
        margin-top: 10px;
    }

    .field-check input {
        width: 16px;
        height: 16px;
    }

    .field-check label {
        font-size: 0.82rem;
    }

    .field-group {
        margin-bottom: 12px;
    }

    .field-group-label {
        font-size: 0.55rem;
        margin-bottom: 8px;
    }

    .field-row {
        gap: 8px;
    }

    .form-actions {
        gap: 8px;
        margin-top: 16px;
        padding-top: 14px;
    }

    .form-actions .btn {
        padding: 8px 16px;
        font-size: 0.7rem;
        min-width: 80px;
    }

    .form-hint {
        font-size: 0.72rem;
    }

    .field-code {
        font-size: 0.78rem;
        padding: 6px 10px;
    }

    /* ── Tables — admin pages ── */
    th {
        padding: 8px 10px;
        font-size: 0.55rem;
        letter-spacing: 0.08em;
    }

    td {
        padding: 10px;
        font-size: 0.78rem;
    }

    td code {
        font-size: 0.7rem;
    }

    .tbl-actions {
        gap: 4px;
    }

    .tbl-actions .btn {
        padding: 5px 8px;
        font-size: 0.6rem;
    }

    /* ── Filter bar / action bars ── */
    .filter-select {
        padding: 8px 36px 8px 12px;
        font-size: 0.8rem;
        border-radius: 8px;
        min-width: 120px;
        background-position: right 10px center;
    }

    .filter-sel {
        padding: 7px 28px 7px 10px;
        font-size: 0.65rem;
    }

    .search-input-sm {
        padding: 7px 10px;
        font-size: 0.7rem;
        width: 100%;
    }

    .checkbox-inline {
        font-size: 0.68rem;
        gap: 4px;
    }

    .checkbox-inline input[type="checkbox"] {
        width: 13px;
        height: 13px;
    }

    .table-controls .btn {
        padding: 7px 12px;
        font-size: 0.65rem;
    }

    /* ── Section headers ── */
    .section-bar h3 {
        font-size: 1rem;
    }

    .section-desc {
        font-size: 0.68rem;
        margin-bottom: 16px;
    }

    /* ── Settings page ── */
    .settings-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .settings-card {
        padding: 16px;
    }

    .settings-card h4 {
        font-size: 0.9rem;
        margin-bottom: 6px;
    }

    .card-desc {
        font-size: 0.65rem;
        margin-bottom: 14px;
        padding-bottom: 12px;
    }

    .settings-actions {
        margin-top: 20px;
    }

    .settings-actions .btn {
        padding: 8px 16px;
        font-size: 0.7rem;
    }

    /* ── Tag badges ── */
    .tag-badge {
        padding: 4px 10px;
        font-size: 0.7rem;
        gap: 4px;
        border-radius: 5px;
    }

    .tag-badge .tag-remove {
        width: 14px;
        height: 14px;
        font-size: 0.6rem;
    }

    .tag-list {
        gap: 5px;
    }

    /* Tag creator form */
    .tag-creator-section h4 {
        font-size: 0.9rem;
        margin-bottom: 12px;
    }

    .tag-preview-box {
        padding: 12px;
        gap: 8px;
    }

    .tag-preview-label {
        font-size: 0.78rem;
    }

    .tag-creator-form {
        gap: 12px;
    }

    .tag-form-row {
        flex-direction: column;
        gap: 10px;
    }

    .tag-form-field label {
        font-size: 0.72rem;
    }

    .tag-form-field input[type="text"] {
        width: 100%;
        padding: 8px 12px;
        font-size: 0.82rem;
    }

    .tag-form-field input[type="color"] {
        width: 42px;
        height: 34px;
    }

    .tag-form-field select {
        padding: 8px 12px;
        font-size: 0.82rem;
    }

    .tag-form-actions {
        gap: 10px;
        margin-top: 4px;
    }

    .approval-hint {
        font-size: 0.72rem;
    }

    /* Tag management */
    .tag-drag-container {
        gap: 10px;
    }

    .tag-drop-zone {
        padding: 12px;
        min-height: 70px;
        border-radius: 10px;
    }

    .drop-zone-label {
        font-size: 0.62rem;
        margin-bottom: 8px;
    }

    /* Pending tags */
    .pending-tag-card {
        padding: 14px;
        gap: 12px;
        border-radius: 10px;
        flex-wrap: wrap;
    }

    .pending-tag-preview {
        min-width: 80px;
    }

    .pending-tag-meta {
        font-size: 0.78rem;
        gap: 10px;
    }

    .pending-tag-details {
        font-size: 0.72rem;
        gap: 12px;
        flex-wrap: wrap;
    }

    .pending-tag-actions {
        width: 100%;
        justify-content: flex-end;
    }

    .pending-tag-actions .btn {
        padding: 6px 12px;
        font-size: 0.65rem;
    }

    .badge-count {
        min-width: 16px;
        height: 16px;
        font-size: 0.6rem;
        padding: 0 4px;
    }

    /* ── Stats bar ── */
    .stats-row {
        padding: 12px 14px;
        gap: 12px;
    }

    /* ── Protocol badges ── */
    .protocol-badge {
        padding: 4px 8px;
        font-size: 0.65rem;
        gap: 4px;
    }

    /* ── Domain available banner ── */
    .domain-available-banner {
        padding: 14px 16px;
        gap: 10px;
        border-radius: 10px;
    }

    .domain-available-banner .available-icon {
        width: 38px;
        height: 38px;
    }

    .domain-available-banner .available-icon svg {
        width: 18px;
        height: 18px;
    }

    .domain-available-banner .available-title {
        font-size: 0.95rem;
    }

    .domain-available-banner .available-subtitle {
        font-size: 0.82rem;
    }

    /* ── Pricing row ── */
    .pricing-row {
        padding: 6px 10px;
        font-size: 0.78rem;
        gap: 8px;
    }

    /* ── Verification modal ── */
    .verify-intro {
        font-size: 0.85rem;
        margin-bottom: 16px;
    }

    .verify-steps {
        gap: 14px;
    }

    /* ── IP Restriction ── */
    .ip-restriction-info {
        padding: 8px 12px;
        gap: 8px;
    }

    .ip-restriction-info .info-label {
        font-size: 0.78rem;
    }

    .ip-restriction-info code {
        font-size: 0.78rem;
        padding: 3px 6px;
    }

    .ip-restriction-fields textarea {
        font-size: 0.78rem;
        min-height: 90px;
    }

    /* ── Source badges ── */
    .source-badge {
        font-size: 0.62rem;
        padding: 2px 6px;
    }

    /* ── Result tags on lookup page ── */
    .result-tags .tag-badge {
        font-size: 0.65rem;
        padding: 3px 8px;
    }

    /* ── Field value display ── */
    .field-value {
        padding: 6px 10px;
        font-size: 0.82rem;
    }
}

@media (max-width: 480px) {

    /* ── Buttons — extra compact ── */
    .btn {
        padding: 8px 14px;
        font-size: 0.65rem;
    }

    .btn-sec {
        padding: 6px 12px;
        font-size: 0.65rem;
    }

    .btn-secondary {
        padding: 6px 12px;
        font-size: 0.65rem;
    }

    .btn-ghost {
        padding: 4px 8px;
        font-size: 0.58rem;
    }

    .btn-success,
    .btn-danger {
        padding: 6px 12px;
        font-size: 0.65rem;
    }

    .action-btn {
        padding: 6px 10px;
        font-size: 0.72rem;
        border-radius: 6px;
        gap: 4px;
    }

    .action-btn.large {
        padding: 8px 16px;
        font-size: 0.78rem;
        border-radius: 8px;
    }

    .action-btn svg {
        width: 14px;
        height: 14px;
    }

    /* ── Modals — extra tight ── */
    .modal-top {
        padding: 10px 12px;
    }

    .modal-top h2 {
        font-size: 0.82rem;
    }

    .modal-body {
        padding: 10px 12px;
    }

    .modal-foot {
        padding: 8px 12px;
        gap: 6px;
    }

    .modal-foot .btn {
        padding: 7px 12px;
        font-size: 0.65rem;
    }

    .modal-link {
        padding: 6px 12px;
        font-size: 0.65rem;
    }

    .modal-header {
        padding: 10px 14px;
    }

    .modal-header h3 {
        font-size: 0.88rem;
    }

    .modal-header-actions .btn {
        padding: 4px 8px;
        font-size: 0.6rem;
    }

    /* Confirm dialog */
    .confirm-box {
        padding: 16px 12px;
    }

    .confirm-box h2 {
        font-size: 1rem;
    }

    .confirm-box p {
        font-size: 0.8rem;
        margin-bottom: 14px;
    }

    .confirm-icon {
        width: 40px;
        height: 40px;
        margin-bottom: 12px;
    }

    .confirm-icon svg {
        width: 20px;
        height: 20px;
    }

    /* ── Form elements — extra compact ── */
    .field {
        margin-bottom: 8px;
    }

    .field label {
        font-size: 0.52rem;
        margin-bottom: 4px;
    }

    .field input,
    .field select,
    .field textarea {
        padding: 8px 10px;
        font-size: 0.78rem;
    }

    .field textarea {
        min-height: 50px;
    }

    .field-hint {
        font-size: 0.6rem;
    }

    .field-check label {
        font-size: 0.78rem;
    }

    .field-check input {
        width: 14px;
        height: 14px;
    }

    .form-actions {
        gap: 6px;
        margin-top: 12px;
        padding-top: 10px;
    }

    .form-actions .btn {
        padding: 7px 12px;
        font-size: 0.65rem;
        min-width: 70px;
    }

    .form-hint {
        font-size: 0.65rem;
    }

    .field-code {
        font-size: 0.72rem;
        padding: 5px 8px;
    }

    /* ── Tables — extra compact ── */
    th {
        padding: 6px 8px;
        font-size: 0.5rem;
    }

    td {
        padding: 8px;
        font-size: 0.72rem;
    }

    td code {
        font-size: 0.65rem;
    }

    .tbl-actions .btn {
        padding: 4px 6px;
        font-size: 0.55rem;
    }

    /* ── Filter bar — extra compact ── */
    .filter-select {
        padding: 6px 30px 6px 10px;
        font-size: 0.72rem;
        border-radius: 6px;
        min-width: 100px;
        background-position: right 8px center;
    }

    .filter-sel {
        padding: 6px 24px 6px 8px;
        font-size: 0.6rem;
    }

    .search-input-sm {
        padding: 6px 8px;
        font-size: 0.65rem;
    }

    .table-controls .btn {
        padding: 6px 10px;
        font-size: 0.6rem;
    }

    /* ── Section ── */
    .section {
        padding: 16px 12px;
    }

    .section-bar {
        gap: 8px;
    }

    .section-bar h3 {
        font-size: 0.9rem;
    }

    .section-desc {
        font-size: 0.62rem;
        margin-bottom: 12px;
    }

    /* ── Settings page — extra compact ── */
    .settings-card {
        padding: 12px;
    }

    .settings-card h4 {
        font-size: 0.85rem;
    }

    .card-desc {
        font-size: 0.6rem;
        margin-bottom: 10px;
        padding-bottom: 10px;
    }

    .settings-actions {
        margin-top: 14px;
    }

    .settings-actions .btn {
        padding: 7px 14px;
        font-size: 0.65rem;
    }

    /* ── Tag badges — extra compact ── */
    .tag-badge {
        padding: 3px 8px;
        font-size: 0.62rem;
        gap: 3px;
        border-radius: 4px;
    }

    .tag-badge .tag-remove {
        width: 12px;
        height: 12px;
        font-size: 0.55rem;
    }

    .tag-list {
        gap: 4px;
    }

    .tag-creator-section h4 {
        font-size: 0.82rem;
    }

    .tag-preview-box {
        padding: 8px;
        gap: 6px;
    }

    .tag-preview-label {
        font-size: 0.72rem;
    }

    .tag-form-field label {
        font-size: 0.65rem;
    }

    .tag-form-field input[type="text"] {
        padding: 6px 10px;
        font-size: 0.78rem;
    }

    .tag-form-field select {
        padding: 6px 10px;
        font-size: 0.78rem;
    }

    .tag-form-field input[type="color"] {
        width: 36px;
        height: 30px;
    }

    .tag-form-actions {
        gap: 8px;
    }

    .approval-hint {
        font-size: 0.65rem;
    }

    /* Pending tags */
    .pending-tag-card {
        padding: 10px;
        gap: 8px;
    }

    .pending-tag-preview {
        min-width: 60px;
    }

    .pending-tag-meta {
        font-size: 0.7rem;
        gap: 6px;
    }

    .pending-tag-details {
        font-size: 0.65rem;
        gap: 8px;
    }

    .pending-tag-actions .btn {
        padding: 5px 10px;
        font-size: 0.6rem;
    }

    /* ── Protocol badges ── */
    .protocol-badge {
        padding: 3px 6px;
        font-size: 0.6rem;
        gap: 3px;
        border-radius: 4px;
    }

    /* ── Stats ── */
    .stats-row {
        padding: 8px 10px;
        gap: 8px;
    }

    /* ── Pricing ── */
    .pricing-row {
        padding: 5px 8px;
        font-size: 0.72rem;
        gap: 6px;
    }

    /* ── IP Restriction ── */
    .ip-restriction-info {
        padding: 6px 10px;
        gap: 6px;
        flex-wrap: wrap;
    }

    .ip-restriction-info .info-label {
        font-size: 0.7rem;
    }

    .ip-restriction-info code {
        font-size: 0.7rem;
    }

    .ip-restriction-fields textarea {
        font-size: 0.72rem;
        min-height: 70px;
    }

    /* ── Result tags ── */
    .result-tags .tag-badge {
        font-size: 0.58rem;
        padding: 2px 6px;
    }

    /* ── Source badges ── */
    .source-badge {
        font-size: 0.58rem;
        padding: 2px 5px;
    }

    /* ── Field value ── */
    .field-value {
        padding: 5px 8px;
        font-size: 0.78rem;
    }

    /* ── Domain available banner ── */
    .domain-available-banner {
        padding: 10px 12px;
        gap: 8px;
        border-radius: 8px;
    }

    .domain-available-banner .available-icon {
        width: 32px;
        height: 32px;
    }

    .domain-available-banner .available-icon svg {
        width: 16px;
        height: 16px;
    }

    .domain-available-banner .available-title {
        font-size: 0.88rem;
    }

    .domain-available-banner .available-subtitle {
        font-size: 0.78rem;
    }
}

/* ─────────────────────────────────────────────────────────────────
   MONITOR LIST VIEW
   ───────────────────────────────────────────────────────────────── */

.monitor-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background 0.15s;
}
.monitor-row:first-child {
    border-top: 1px solid var(--border);
    border-radius: 10px 10px 0 0;
}
.monitor-row:last-child {
    border-radius: 0 0 10px 10px;
}
.monitor-row:only-child {
    border-radius: 10px;
}
.monitor-row:hover {
    background: rgba(59, 130, 246, 0.06);
}
.monitor-row-name {
    flex: 1;
    font-family: var(--mono);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.monitor-row-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.monitor-row-dot.active { background: var(--green); }
.monitor-row-dot.paused { background: var(--yellow); }
.monitor-row-dot.error { background: var(--red); }
.monitor-row-types {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--blue);
    flex-shrink: 0;
    letter-spacing: 0.02em;
}
.monitor-row-interval {
    width: 40px;
    text-align: right;
    font-family: var(--mono);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    flex-shrink: 0;
}
.monitor-row-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}
.icon-btn-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: transparent;
    color: var(--text-dim);
    cursor: pointer;
    transition: all 0.15s;
}
.icon-btn-sm svg {
    width: 14px;
    height: 14px;
}
.icon-btn-sm:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text);
    border-color: var(--text-dim);
}
.icon-btn-sm.danger:hover {
    background: rgba(255, 59, 48, 0.15);
    color: var(--red);
    border-color: var(--red);
}

@media (max-width: 768px) {
    .monitor-row { padding: 10px 12px; gap: 8px; }
    .monitor-row-name { font-size: 0.82rem; }
    .monitor-row-types { font-size: 0.6rem; }
    .monitor-row-interval { font-size: 0.68rem; width: 34px; }
    .icon-btn-sm { width: 24px; height: 24px; }
    .icon-btn-sm svg { width: 12px; height: 12px; }
}

@media (max-width: 480px) {
    .monitor-row { padding: 8px 10px; }
    .monitor-row-name { font-size: 0.78rem; gap: 6px; }
    .monitor-row-actions { gap: 2px; }
    .icon-btn-sm { width: 22px; height: 22px; border-radius: 4px; }
    .icon-btn-sm svg { width: 11px; height: 11px; }
}

/* ─────────────────────────────────────────────────────────────────
   MY SETTINGS MOBILE
   ───────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    #my-settings .section {
        padding: 16px 12px;
    }
    #my-settings .section h3 {
        font-size: 1.1rem;
        margin-bottom: 16px;
    }
    #my-settings .settings-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    #my-settings .settings-card {
        padding: 14px;
    }
    #my-settings .settings-card h4 {
        font-size: 0.88rem;
        margin-bottom: 4px;
    }
    #my-settings .card-desc {
        font-size: 0.65rem;
        margin-bottom: 12px;
        padding-bottom: 10px;
    }
    #my-settings .notification-channel {
        padding: 10px;
        border-radius: 8px;
        margin-bottom: 8px;
    }
    #my-settings .notification-channel-name {
        font-size: 0.82rem;
        gap: 6px;
    }
    #my-settings .notification-channel-name svg {
        width: 15px;
        height: 15px;
    }
    #my-settings .notification-channel-hint {
        font-size: 0.72rem;
        margin-top: 4px;
    }
    #my-settings .toggle-switch {
        width: 36px;
        height: 20px;
    }
    #my-settings .toggle-slider:before {
        width: 16px;
        height: 16px;
    }
    #my-settings .toggle-switch input:checked + .toggle-slider:before {
        transform: translateX(16px);
    }
    #my-settings .telegram-connect-steps {
        font-size: 0.75rem;
    }
    #my-settings .telegram-connect-steps ol {
        gap: 4px;
        padding-left: 18px;
    }
    #my-settings .telegram-code-value {
        font-size: 1rem;
    }
    #my-settings .telegram-code-section {
        gap: 8px;
    }
    #my-settings .field label {
        font-size: 0.6rem;
    }
    #my-settings .field select,
    #my-settings .field input {
        padding: 10px 12px;
        font-size: 0.82rem;
    }
    #my-settings .field-hint {
        font-size: 0.65rem;
    }
    #my-settings .field-value {
        padding: 8px 10px;
        font-size: 0.82rem;
    }
    #my-settings .settings-actions {
        margin-top: 16px;
    }
    #my-settings .settings-actions .btn {
        padding: 10px 18px;
        font-size: 0.7rem;
    }
    #my-settings .checkbox-label {
        font-size: 0.82rem;
        gap: 8px;
    }
    #my-settings .checkbox-label input {
        width: 16px;
        height: 16px;
    }
}

@media (max-width: 480px) {
    #my-settings .section {
        padding: 12px 10px;
    }
    #my-settings .section h3 {
        font-size: 1rem;
        margin-bottom: 12px;
    }
    #my-settings .settings-card {
        padding: 10px;
    }
    #my-settings .settings-card h4 {
        font-size: 0.82rem;
    }
    #my-settings .notification-channel {
        padding: 8px;
    }
    #my-settings .notification-channel-name {
        font-size: 0.78rem;
    }
    #my-settings .toggle-switch {
        width: 32px;
        height: 18px;
    }
    #my-settings .toggle-slider:before {
        width: 14px;
        height: 14px;
    }
    #my-settings .toggle-switch input:checked + .toggle-slider:before {
        transform: translateX(14px);
    }
    #my-settings .field select,
    #my-settings .field input {
        padding: 8px 10px;
        font-size: 0.78rem;
    }
    #my-settings .settings-actions .btn {
        padding: 8px 14px;
        font-size: 0.65rem;
        width: 100%;
    }
}

/* ═══════════════════════════════════════════════════════════════
   Admin API Keys Stats
   ═══════════════════════════════════════════════════════════════ */

.api-stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}
.api-stat-card {
    padding: 16px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    text-align: center;
}
.api-stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    font-family: var(--mono);
    color: var(--text);
}
.api-stat-green { color: var(--green); }
.api-stat-red { color: var(--red); }
.api-stat-blue { color: var(--blue); }
.api-stat-label {
    font-size: 0.7rem;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 4px;
}

.status-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.status-active { background: rgba(16,185,129,0.15); color: var(--green); }
.status-revoked { background: rgba(239,68,68,0.15); color: var(--red); }

.row-inactive { opacity: 0.5; }

@media (max-width: 768px) {
    .api-stats-row { grid-template-columns: repeat(2, 1fr); }
}

/* ═══════════════════════════════════════════════════════════════
   API Documentation Page
   ═══════════════════════════════════════════════════════════════ */

.api-docs {
    max-width: 960px;
    margin: 0 auto;
}
.api-docs-header {
    margin-bottom: 32px;
}
.api-docs-header h3 {
    margin-bottom: 8px;
}
.api-docs-grid {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 32px;
}
.api-docs-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: sticky;
    top: 80px;
    align-self: start;
}
.api-docs-nav-item {
    padding: 8px 12px;
    border-radius: 6px;
    color: var(--text-dim);
    text-decoration: none;
    font-size: 0.78rem;
    transition: all 0.15s;
}
.api-docs-nav-item:hover {
    color: var(--text);
    background: var(--surface-2);
}
.api-docs-nav-item.active {
    color: var(--blue);
    background: rgba(59,130,246,0.1);
    font-weight: 500;
}

.api-docs-content {
    display: flex;
    flex-direction: column;
    gap: 40px;
}
.api-doc-section h4 {
    font-size: 1.1rem;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}
.api-doc-section h5 {
    font-size: 0.85rem;
    color: var(--text-dim);
    margin: 16px 0 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.api-doc-section p {
    color: var(--text-dim);
    font-size: 0.82rem;
    line-height: 1.6;
    margin-bottom: 12px;
}
.api-doc-section p a {
    color: var(--blue);
    text-decoration: none;
}
.api-doc-section p a:hover {
    text-decoration: underline;
}

.api-code-block {
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 16px;
    background: var(--surface);
}
.api-code-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 14px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    font-size: 0.7rem;
    color: var(--text-dim);
}
.api-code-block pre {
    padding: 14px;
    margin: 0;
    font-family: var(--mono);
    font-size: 0.75rem;
    line-height: 1.6;
    overflow-x: auto;
    color: var(--text);
    white-space: pre;
}

.api-endpoint-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 16px;
}
.api-endpoint-header code {
    font-size: 0.85rem;
    color: var(--text);
}

.api-method {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 700;
    font-family: var(--mono);
    letter-spacing: 0.5px;
}
.api-method-get { background: rgba(16,185,129,0.15); color: var(--green); }
.api-method-post { background: rgba(59,130,246,0.15); color: var(--blue); }
.api-method-put { background: rgba(251,191,36,0.15); color: var(--yellow); }
.api-method-delete { background: rgba(239,68,68,0.15); color: var(--red); }

.api-endpoints-table table,
.api-params-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
}
.api-endpoints-table th,
.api-params-table th {
    text-align: left;
    padding: 8px 12px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text-dim);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.api-endpoints-table td,
.api-params-table td {
    padding: 8px 12px;
    border: 1px solid var(--border);
    color: var(--text);
    vertical-align: top;
}

.api-note {
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--text-dim);
    background: rgba(59,130,246,0.06);
    border: 1px solid rgba(59,130,246,0.15);
    margin-top: 12px;
}
.api-note-warn {
    background: rgba(251,191,36,0.06);
    border-color: rgba(251,191,36,0.15);
}
.api-note strong {
    color: var(--text);
}

.api-example-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 4px;
}
.api-example-tab {
    padding: 6px 14px;
    background: none;
    border: none;
    color: var(--text-dim);
    font-family: var(--mono);
    font-size: 0.75rem;
    cursor: pointer;
    border-radius: 4px 4px 0 0;
    transition: all 0.15s;
}
.api-example-tab:hover {
    color: var(--text);
    background: var(--surface-2);
}
.api-example-tab.active {
    color: var(--blue);
    background: rgba(59,130,246,0.1);
    border-bottom: 2px solid var(--blue);
}

@media (max-width: 768px) {
    .api-docs-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .api-docs-nav {
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 4px;
    }
    .api-docs-nav-item {
        padding: 6px 10px;
        font-size: 0.7rem;
    }
    .api-endpoint-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
    .api-example-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
    }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE POLISH
   Comprehensive fixes for overflow, spacing, and readability
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

    /* ── Error card & result error banner ── */
    .error-card {
        padding: 16px;
        gap: 12px;
        margin: 12px 0;
        border-radius: 10px;
    }
    .error-card .error-icon svg {
        width: 32px;
        height: 32px;
    }
    .error-title {
        font-size: 0.95rem;
        margin-bottom: 4px;
    }
    .error-message {
        font-size: 0.78rem;
        margin-bottom: 8px;
    }
    .error-hint {
        font-size: 0.72rem;
    }
    .result-error-banner {
        padding: 14px 16px;
        gap: 10px;
    }
    .result-error-banner .error-icon svg {
        width: 24px;
        height: 24px;
    }

    /* ── Compare tray ── */
    .compare-tray {
        padding: 8px 12px;
    }
    .compare-tray-inner {
        flex-wrap: wrap;
        gap: 6px;
    }
    .compare-tray-label {
        font-size: 0.65rem;
        width: 100%;
    }
    .compare-tray-chips {
        flex-wrap: wrap;
        gap: 4px;
    }
    .compare-tray-add {
        flex: 1;
        min-width: 0;
    }
    .compare-tray-add input {
        width: 100%;
        min-width: 80px;
        font-size: 0.78rem;
    }
    .compare-result-back {
        flex-wrap: wrap;
        gap: 8px;
    }
    .compare-title {
        font-size: 0.85rem;
    }

    /* ── Compare cards ── */
    .compare-cards-row {
        flex-direction: column;
        align-items: stretch;
    }
    .compare-card {
        width: 100% !important;
        max-width: 100%;
    }

    /* ── Plans page ── */
    .plans-hero h2 {
        font-size: 1.4rem;
    }
    .plans-subtitle {
        font-size: 0.78rem;
    }
    .billing-toggle {
        gap: 0;
    }
    .billing-opt {
        padding: 8px 16px;
        font-size: 0.72rem;
    }
    .save-badge {
        font-size: 0.6rem;
    }
    .plan-card {
        padding: 20px 16px;
    }
    .plan-name {
        font-size: 1rem;
    }
    .plan-price {
        font-size: 2rem;
    }
    .plan-price .period {
        font-size: 0.75rem;
    }
    .plan-features {
        gap: 8px;
    }
    .plan-feature {
        font-size: 0.78rem;
        gap: 8px;
    }
    .plan-feature svg {
        width: 14px;
        height: 14px;
        flex-shrink: 0;
    }
    .plan-cta {
        padding: 10px 20px;
        font-size: 0.78rem;
    }

    /* ── Lookup meta row — wrapping for protocol/chain badges ── */
    .lookup-meta-row {
        flex-wrap: wrap;
        gap: 6px;
    }
    .query-chain {
        flex-wrap: wrap;
        gap: 3px;
    }
    .chain-step {
        padding: 2px 6px;
        font-size: 0.6rem;
        max-width: 80px;
    }
    .chain-step .chain-source {
        max-width: 60px;
    }

    /* ── Timeline ── */
    .timeline-bar {
        min-width: 0;
    }
    .timeline-row {
        gap: 6px;
    }
    .timeline-label {
        white-space: nowrap;
        min-width: 0;
    }

    /* ── Registrar grid — prevent overflow ── */
    .registrar-grid {
        gap: 4px;
    }
    .registrar-item {
        flex-direction: column;
        gap: 2px;
    }
    .registrar-key {
        min-width: unset;
    }
    .registrar-val {
        word-break: break-all;
    }

    /* ── API docs — endpoint & params tables ── */
    .api-endpoints-table,
    .api-params-table {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .api-endpoints-table table,
    .api-params-table table {
        min-width: 420px;
        font-size: 0.7rem;
    }
    .api-endpoints-table th,
    .api-endpoints-table td,
    .api-params-table th,
    .api-params-table td {
        padding: 6px 8px;
    }
    .api-endpoint-header code {
        font-size: 0.72rem;
        word-break: break-all;
    }
    .api-code-block pre {
        font-size: 0.68rem;
        padding: 10px;
        line-height: 1.5;
    }
    .api-code-header {
        padding: 6px 10px;
        font-size: 0.65rem;
    }
    .api-note {
        padding: 10px 12px;
        font-size: 0.72rem;
    }
    .api-doc-section h4 {
        font-size: 0.95rem;
    }
    .api-doc-section h5 {
        font-size: 0.75rem;
    }
    .api-doc-section p {
        font-size: 0.75rem;
    }
    .api-docs-header h3 {
        font-size: 1.1rem;
    }
    .api-docs-header .card-desc {
        font-size: 0.72rem;
    }

    /* ── API keys tab — stats & table ── */
    .api-stats-row {
        gap: 8px;
    }
    .api-stat-card {
        padding: 10px 8px;
        border-radius: 8px;
    }
    .api-stat-value {
        font-size: 1.2rem;
    }
    .api-stat-label {
        font-size: 0.58rem;
    }

    /* ── My Domains header — 768 ── */
    .my-domains-header {
        padding: 12px;
        gap: 10px;
        margin-bottom: 12px;
    }
    .my-domains-title h2 {
        font-size: 1.1rem;
    }
    .my-domains-title .subtitle {
        font-size: 0.72rem;
    }
    .my-domains-stats {
        flex-wrap: wrap;
    }
    .my-domains-stats .stat-item {
        padding: 8px;
    }
    .my-domains-stats .stat-value {
        font-size: 1.2rem;
    }
    .my-domains-stats .stat-label {
        font-size: 0.58rem;
    }
    .domains-toolbar {
        flex-wrap: wrap;
        gap: 8px;
    }
    .domains-grid {
        gap: 10px;
    }
    .domain-card {
        border-radius: 10px;
    }
    .domain-card-header {
        padding: 12px 14px 8px;
    }
    .domain-card-name {
        font-size: 0.9rem;
    }

    /* ── Monitors tab ── */
    .monitors-header {
        flex-wrap: wrap;
        gap: 8px;
    }
    .monitors-header h3 {
        font-size: 1rem;
    }
    .monitors-header .btn {
        font-size: 0.68rem;
    }

    /* ── My Settings ── */
    .api-key-item {
        flex-wrap: wrap;
        gap: 8px;
        padding: 10px 12px;
    }
    .api-key-value {
        font-size: 0.68rem;
    }
    .api-key-reveal {
        padding: 10px 12px;
    }
    .api-key-value-row {
        flex-wrap: wrap;
    }

    /* ── Notification panel ── */
    .notifications-panel {
        max-height: 70vh;
    }
    .notification-item {
        padding: 10px 12px;
    }
    .notification-item-body {
        font-size: 0.78rem;
    }

    /* ── Generic: prevent any horizontal overflow ── */
    main {
        overflow-x: hidden;
    }
    .result {
        overflow-x: hidden;
    }
    pre, code {
        word-break: break-word;
    }
    .raw-code pre {
        word-break: break-all;
    }
}

@media (max-width: 480px) {

    /* ── Error card ── */
    .error-card {
        padding: 12px;
        gap: 10px;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .error-card .error-icon svg {
        width: 28px;
        height: 28px;
    }
    .error-title {
        font-size: 0.88rem;
    }
    .error-message {
        font-size: 0.72rem;
    }
    .result-error-banner {
        padding: 10px 12px;
        gap: 8px;
    }

    /* ── Search area ── */
    .search-box .btn-main {
        padding: 12px 14px;
        font-size: 0.68rem;
        letter-spacing: 0.08em;
    }
    .search-input input {
        padding: 12px 36px 12px 12px;
    }

    /* ── Domain masthead ── */
    .domain-big {
        font-size: 1.15rem;
    }
    .domain-top {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .domain-meta {
        width: 100%;
        justify-content: flex-start;
        gap: 16px;
    }
    .meta-item {
        text-align: left;
    }

    /* ── Timeline ── */
    .timeline-row {
        flex-direction: column;
        gap: 4px;
        align-items: stretch;
    }
    .timeline-label {
        font-size: 0.55rem;
        display: flex;
        justify-content: space-between;
    }

    /* ── Date row ── */
    .date-row {
        flex-direction: column;
    }
    .date-cell {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        text-align: left;
        padding: 10px 12px;
    }
    .date-cell-label {
        margin-bottom: 0;
    }
    .date-cell-value {
        text-align: right;
    }
    .date-cell-value .date-time {
        display: inline;
        margin-left: 4px;
        margin-top: 0;
    }

    /* ── Data sections — vertical stack on very small ── */
    .data-section {
        flex-direction: column;
    }
    .data-label {
        width: 100%;
        padding: 8px 12px;
        border-right: none;
        border-bottom: 1px solid var(--border);
    }
    .data-content {
        padding: 10px 12px;
    }

    /* ── Compare tray ── */
    .compare-tray-add {
        width: 100%;
    }

    /* ── Plans ── */
    .plans-hero h2 {
        font-size: 1.2rem;
    }
    .plans-subtitle {
        font-size: 0.72rem;
    }
    .billing-opt {
        padding: 6px 12px;
        font-size: 0.65rem;
    }
    .plan-card {
        padding: 16px 14px;
    }
    .plan-price {
        font-size: 1.6rem;
    }
    .plan-feature {
        font-size: 0.72rem;
    }

    /* ── Pricing row ── */
    .pricing-row {
        flex-wrap: wrap;
        gap: 6px;
        padding: 6px 8px;
        font-size: 0.72rem;
    }
    .pricing-items {
        flex-wrap: wrap;
        gap: 4px;
    }

    /* ── API docs ── */
    .api-docs-nav {
        gap: 2px;
    }
    .api-docs-nav-item {
        padding: 5px 8px;
        font-size: 0.62rem;
    }
    .api-doc-section h4 {
        font-size: 0.88rem;
    }
    .api-code-block pre {
        font-size: 0.62rem;
        padding: 8px;
    }
    .api-example-tab {
        padding: 5px 10px;
        font-size: 0.65rem;
    }
    .api-method {
        padding: 2px 6px;
        font-size: 0.58rem;
    }

    /* ── API stats ── */
    .api-stats-row {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }
    .api-stat-card {
        padding: 8px 6px;
    }
    .api-stat-value {
        font-size: 1rem;
    }
    .api-stat-label {
        font-size: 0.52rem;
    }

    /* ── Domain cards — extra tight ── */
    .domain-card-info-item {
        padding: 8px 10px;
    }
    .domain-card-info-label {
        font-size: 0.55rem;
    }
    .domain-card-info-value {
        font-size: 0.75rem;
    }
    .domain-card-actions {
        padding: 8px 10px;
        gap: 4px;
    }
    .domain-card-actions .btn {
        padding: 6px 10px;
        font-size: 0.62rem;
    }

    /* ── Monitor row — extra tight ── */
    .monitor-row-types span {
        font-size: 0.55rem;
    }

    /* ── Lookup meta row ── */
    .lookup-meta-row {
        gap: 4px;
        flex-direction: column;
    }
    .lookup-info {
        margin-left: 0;
    }

    /* ── Notifications ── */
    .notifications-panel {
        width: calc(100vw - 16px);
        right: -50px;
    }
}