/**
 * Claude AI Copywriter - Admin Styles
 * Swiss Design System
 */

/* ========================================
   SWISS DESIGN TOKENS
   ======================================== */
:root {
    /* Colors */
    --c-bg:          #ffffff !important;
    --c-bg-subtle:   #f9fafb !important;
    --c-bg-raised:   #f3f4f6 !important;
    --c-border:      #e5e7eb !important;
    --c-border-dark: #d1d5db !important;
    --c-text:        #111827 !important;
    --c-text-muted:  #6b7280 !important;
    --c-text-xmuted: #9ca3af !important;
    --c-accent:      #D6263A !important;  /* Copy crimson */
    --c-accent-hover:#A6172A !important;
    --c-success:     #16a34a;
    --c-danger:      #dc2626;
    --c-warning:     #d97706;

    /* Typography */
    --font:          -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif;
    --font-mono:     'JetBrains Mono', 'Fira Code', monospace;

    /* Spacing */
    --space-xs:  4px;
    --space-sm:  8px;
    --space-md:  16px;
    --space-lg:  24px;
    --space-xl:  40px;
    --space-2xl: 64px;

    /* Radius */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 10px;

    /* Shadow */
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.06);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
}

/* Legacy support - keep existing variables */
:root {
    /* Kinetic Brand Colors */
    --kinetic-gold: #e8d98e;
    --kinetic-blue: #4B73FF;
    --kinetic-red: #FF0105;
    --kinetic-orange: #FE7B02;
    --kinetic-orange-light: #FF8E63;

    /* Light Mode (Default) */
    --kinetic-bg-primary: #FCFBF8;
    --kinetic-bg-secondary: #ffffff;
    --kinetic-bg-tertiary: #f5f5f5;
    --kinetic-text-primary: #1a1a1a;
    --kinetic-text-secondary: #4a4a4a;
    --kinetic-text-muted: #A1A1AA;
    --kinetic-border: #e5e5e5;
    --kinetic-shadow: rgba(0, 0, 0, 0.1);
    --kinetic-hover-bg: rgba(232, 217, 142, 0.1);
}

/* ========================================
   --kc-* CANONICAL TOKEN SYSTEM  (v1.5.0)
   Single source of truth going forward.
   --c-* and --kinetic-* kept for backward
   compat but new code should use --kc-*.
   ======================================== */
:root {
    /* Surface */
    --kc-bg:           #ffffff;
    --kc-bg-subtle:    #f9fafb;
    --kc-bg-raised:    #f3f4f6;
    --kc-bg-warm:      #FCFBF8;

    /* Border */
    --kc-border:       #e5e7eb;
    --kc-border-dark:  #d1d5db;

    /* Text */
    --kc-text:         #111827;
    --kc-text-muted:   #6b7280;
    --kc-text-xmuted:  #9ca3af;

    /* Brand Accent (teal) */
    --kc-accent:       #D6263A;  /* KineticCopy crimson */
    --kc-accent-hover: #A6172A;
    --kc-accent-light: #FFF0F2;  /* soft red tint */
    --kc-copy-soft:    #FFF0F2;
    --kc-copy-edge:    #F5C0C5;

    /* Brand Palette */
    --kc-gold:         #e8d98e;
    --kc-blue:         #4B73FF;
    --kc-orange:       #FE7B02;
    --kc-orange-light: #FF8E63;

    /* Status */
    --kc-success:      #16a34a;
    --kc-danger:       #dc2626;
    --kc-warning:      #d97706;

    /* Header gradient */
    --kc-header-grad:  linear-gradient(135deg, #D6263A 0%, #A6172A 100%);  /* Copy crimson */

    /* Typography */
    --kc-font:         'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --kc-font-mono:    'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
    --kc-font-display: 'Instrument Serif', Georgia, 'Times New Roman', serif;

    /* Spacing */
    --kc-space-xs:  4px;
    --kc-space-sm:  8px;
    --kc-space-md:  16px;
    --kc-space-lg:  24px;
    --kc-space-xl:  40px;

    /* Radius */
    --kc-radius-sm: 4px;
    --kc-radius-md: 6px;
    --kc-radius-lg: 10px;

    /* Shadow */
    --kc-shadow-sm: 0 1px 2px rgba(0,0,0,0.06);
    --kc-shadow-md: 0 4px 12px rgba(0,0,0,0.08);
}

/* ========================================
   SLIM PAGE HEADER  (v2.0.5)
   No full-width banner - just logo + title
   ======================================== */
.kc-page-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 20px;
    margin: -6px -20px 20px -20px;
    background: #ffffff !important;
    border-bottom: 1px solid #ECE9DF !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    color: #111827 !important;
}
.kc-page-header__brand {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    text-decoration: none;
}
.kc-page-header__chevron {
    flex-shrink: 0;
}
.kc-page-header__brand-name {
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #9ca3af;
    white-space: nowrap;
}
.kc-page-header__sep {
    color: #d1d5db;
    font-size: 14px;
    font-weight: 300;
    flex-shrink: 0;
    line-height: 1;
}
.kc-page-header__content {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex: 1;
    min-width: 0;
}
.kc-page-header__title {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #111827 !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.3 !important;
    text-shadow: none !important;
    border: none !important;
    box-shadow: none !important;
    white-space: nowrap;
}
.kc-page-header__desc {
    font-family: 'Instrument Serif', Georgia, serif;
    font-style: italic;
    font-size: 13px;
    color: #9ca3af;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.kc-page-header__badge {
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 2px 7px;
    background: #FBFAF7;
    border: 1px solid #ECE9DF;
    border-radius: 3px;
    color: #9ca3af;
    white-space: nowrap;
    flex-shrink: 0;
}
.kc-page-header__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    margin-left: auto;
}
.kc-page-header__actions .button-primary {
    background: #A6172A !important;
    border-color: #7A1620 !important;
    color: #fff !important;
    border-radius: 3px !important;
    box-shadow: none !important;
    text-shadow: none !important;
}
.kc-page-header__actions .button-primary:hover {
    background: #7A1620 !important;
    border-color: #5c1018 !important;
}
@media (max-width: 782px) {
    .kc-page-header { flex-wrap: wrap; gap: 8px; }
    .kc-page-header__desc { display: none; }
}

/* Dark Mode intentionally disabled — plugin UI is always light mode */

/* ===== SWISS DESIGN SYSTEM ===== */

/* ===== RESET WP ADMIN INTERFERENCE ===== */
.claude-ai-wrap * { box-sizing: border-box; }
.claude-ai-wrap { font-family: var(--font); color: var(--c-text); }

/* ===== LAYOUT ===== */
.claude-studio-layout {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: var(--space-lg);
    margin-top: var(--space-lg);
}
@media (max-width: 900px) {
    .claude-studio-layout { grid-template-columns: 1fr; }
}

/* ===== PAGE HEADER ===== */
.claude-page-header {
    padding: var(--space-xl) 0 var(--space-lg);
    border-bottom: 2px solid var(--c-text);
    margin-bottom: var(--space-xl);
}
.claude-page-header h1 {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.5px;
    margin: 0 0 4px;
    color: var(--c-text);
}
.claude-page-header p {
    font-size: 14px;
    color: var(--c-text-muted);
    margin: 0;
}

/* ===== CARD ===== */
.claude-card {
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    box-shadow: var(--shadow-sm);
}
.claude-card + .claude-card { margin-top: var(--space-md); }

.claude-card-title {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--c-text-muted);
    margin: 0 0 var(--space-md);
}

/* ===== FORM ELEMENTS ===== */
.claude-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--c-text);
    margin-bottom: var(--space-sm);
}

.claude-select,
.claude-input,
.claude-textarea {
    width: 100%;
    padding: 10px 12px;
    font-size: 14px;
    font-family: var(--font);
    color: var(--c-text);
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    appearance: none;
    transition: border-color 0.15s;
}
.claude-select:focus,
.claude-input:focus,
.claude-textarea:focus {
    outline: none;
    border-color: var(--c-accent);
    box-shadow: 0 0 0 3px rgba(15,23,42,0.08);
}
.claude-textarea {
    min-height: 120px;
    resize: vertical;
    line-height: 1.6;
}

/* ===== BUTTONS ===== */
.claude-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 10px 20px;
    font-size: 13px;
    font-weight: 700;
    font-family: var(--font);
    letter-spacing: 0.02em;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.15s;
    border: 1.5px solid transparent;
    white-space: nowrap;
}
.claude-btn:focus { outline: 2px solid var(--c-accent); outline-offset: 2px; }

/* Primary: KineticCopy crimson */
.claude-btn-primary {
    background: #D6263A !important;
    color: #ffffff !important;
    border-color: #D6263A !important;
}
.claude-btn-primary:hover {
    background: #A6172A !important;
    border-color: #A6172A !important;
}

/* Secondary: white with border */
.claude-btn-secondary {
    background: var(--c-bg);
    color: var(--c-text);
    border-color: var(--c-border-dark);
}
.claude-btn-secondary:hover {
    background: var(--c-bg-subtle);
    border-color: var(--c-text);
}

/* Danger */
.claude-btn-danger {
    background: var(--c-bg);
    color: var(--c-danger);
    border-color: var(--c-danger);
}
.claude-btn-danger:hover {
    background: var(--c-danger);
    color: #fff;
}

/* Full-width */
.claude-btn-full { width: 100%; justify-content: center; }

/* ===== TONE GRID ===== */
.tone-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-sm);
    padding: var(--space-md);
    background: var(--c-bg-subtle);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
}
@media (max-width: 700px) {
    .tone-grid { grid-template-columns: repeat(2, 1fr); }
}

.tone-grid label {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 500;
    color: var(--c-text);
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.1s;
    user-select: none;
}
.tone-grid label:hover {
    border-color: var(--c-accent);
    background: var(--c-bg-raised);
}
.tone-grid input[type="checkbox"] { display: none; }
.tone-grid label.checked,
.tone-grid label:has(input:checked) {
    background: var(--c-accent);
    color: #fff;
    border-color: var(--c-accent);
}

/* ===== ACTIVE TONE PILLS ===== */
.tone-pills {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    min-height: 38px;
    padding: var(--space-sm);
    background: var(--c-bg-subtle);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    align-items: center;
}
.tone-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    background: var(--c-accent);
    color: #fff;
    border-radius: 20px;
}
.tone-pill .remove-tone {
    background: none;
    border: none;
    color: rgba(255,255,255,0.7);
    cursor: pointer;
    padding: 0;
    font-size: 14px;
    line-height: 1;
}
.tone-pill .remove-tone:hover { color: #fff; }
.no-tones-msg {
    font-size: 13px;
    color: var(--c-text-xmuted);
    font-style: italic;
}

/* ===== SECTION HEADER (collapsible) ===== */
.section-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md);
    font-size: 13px;
    font-weight: 700;
    color: var(--c-text);
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    user-select: none;
    transition: background 0.1s;
}
.section-header:hover { background: var(--c-bg-subtle); }
.section-header .dashicons { color: var(--c-text-muted); }

/* ===== TABS ===== */
.claude-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--c-border);
    margin-bottom: var(--space-lg);
}
.claude-tab {
    padding: 10px 20px;
    font-size: 13px;
    font-weight: 600;
    color: var(--c-text-muted);
    border: none;
    background: none;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.15s;
}
.claude-tab:hover { color: var(--c-text); }
.claude-tab.active {
    color: var(--c-text);
    border-bottom-color: var(--c-accent);
}

/* ===== STATS SIDEBAR ===== */
.claude-stat-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--c-border);
    font-size: 14px;
}
.claude-stat-row:last-child { border-bottom: none; }
.claude-stat-label { color: var(--c-text-muted); }
.claude-stat-value {
    font-size: 20px;
    font-weight: 800;
    color: var(--c-text);
}

/* ===== TIPS ===== */
.claude-tips-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.claude-tips-list li {
    font-size: 13px;
    color: var(--c-text-muted);
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--c-border);
    padding-left: 20px;
    position: relative;
    line-height: 1.5;
}
.claude-tips-list li:last-child { border-bottom: none; }
.claude-tips-list li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: var(--c-text-xmuted);
}

/* ===== NOTIFICATIONS / TOASTS ===== */
.claude-toast {
    position: fixed;
    top: 32px;
    right: var(--space-lg);
    z-index: 100001;
    padding: 12px 20px;
    font-size: 13px;
    font-weight: 600;
    background: var(--c-text);
    color: #fff;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    animation: toastIn 0.2s ease;
}
.claude-toast.success { background: var(--c-success); }
.claude-toast.error   { background: var(--c-danger); }
@keyframes toastIn {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ===== GENERATE BUTTON ===== */
#claude-generate-btn {
    width: 100%;
    padding: 14px;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.02em;
    background: var(--c-accent);
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background 0.15s;
    margin-top: var(--space-md);
}
#claude-generate-btn:hover { background: #000; }
#claude-generate-btn:disabled {
    background: var(--c-bg-raised);
    color: var(--c-text-muted);
    cursor: not-allowed;
}

/* ===== GENERATED OUTPUT ===== */
.claude-output {
    padding: var(--space-lg);
    background: var(--c-bg-subtle);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    font-size: 14px;
    line-height: 1.7;
    white-space: pre-wrap;
    margin-top: var(--space-md);
}
.claude-output-actions {
    display: flex;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
}

/* ===== SETTINGS PAGE ===== */
.claude-settings-grid {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: var(--space-xl);
    margin-top: var(--space-lg);
}
.claude-settings-nav {
    position: sticky;
    top: 32px;
}
.claude-settings-nav-item {
    display: block;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--c-text-muted);
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: all 0.1s;
}
.claude-settings-nav-item:hover { color: var(--c-text); background: var(--c-bg-subtle); }
.claude-settings-nav-item.active { color: var(--c-text); background: var(--c-bg-raised); }

/* ===== API KEY FIELD ===== */
.api-key-row {
    display: flex;
    gap: var(--space-sm);
    align-items: stretch;
}
.api-key-row .claude-input { font-family: var(--font-mono); font-size: 13px; }

/* ===== STATUS BADGE ===== */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 700;
    border-radius: 20px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.status-badge.active  { background: #dcfce7; color: var(--c-success); }
.status-badge.inactive { background: var(--c-bg-raised); color: var(--c-text-muted); }
.status-badge.error   { background: #fee2e2; color: var(--c-danger); }

.claude-ai-settings h1 {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.claude-ai-settings h1::before {
    content: '';
    width: 4px;
    height: 32px;
    background: #0d9488;
    border-radius: 2px;
}

/* ========================================
   CARDS & CONTAINERS
   ======================================== */
.claude-settings-container {
    max-width: 1200px;
    margin: 0 auto;
}

.claude-ai-settings .card,
.tab-content {
    background: var(--kinetic-bg-secondary);
    border: 1px solid var(--kinetic-border);
    border-radius: 8px;
    padding: 24px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px var(--kinetic-shadow);
    transition: all 0.3s ease;
}

.claude-ai-settings .card:hover {
    box-shadow: 0 4px 16px var(--kinetic-shadow);
    transform: translateY(-2px);
}

/* ========================================
   TABS NAVIGATION
   ======================================== */
.nav-tab-wrapper {
    border-bottom: 2px solid var(--kinetic-border);
    margin-bottom: 24px;
    padding: 0;
    background: transparent;
}

.nav-tab {
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    color: var(--kinetic-text-muted);
    padding: 12px 20px;
    margin: 0 4px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.nav-tab:hover {
    background: var(--kinetic-hover-bg);
    color: var(--kinetic-text-primary);
    border-bottom-color: var(--kinetic-gold);
}

.nav-tab-active,
.nav-tab-active:hover {
    background: transparent;
    color: var(--kinetic-blue);
    border-bottom-color: var(--kinetic-blue);
    font-weight: 600;
}

/* ========================================
   TAB CONTENT
   ======================================== */
.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

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

.tab-content h2 {
    color: var(--kinetic-text-primary);
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--kinetic-gold);
}

/* ========================================
   SUB-TAB NAVIGATION (nested tabs inside a tab)
   ======================================== */
.kc-subtab-nav {
    display: flex;
    gap: 0;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--kinetic-border, #e5e7eb);
}

.kc-subtab-btn {
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    color: var(--kinetic-text-muted, #6b7280);
    padding: 10px 18px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
}

.kc-subtab-btn:hover {
    color: var(--kinetic-text-primary, #111827);
    background: var(--kinetic-hover-bg, #f9fafb);
}

.kc-subtab-active,
.kc-subtab-active:hover {
    color: var(--kinetic-blue, #4338ca);
    border-bottom-color: var(--kinetic-blue, #4338ca);
    font-weight: 600;
    background: transparent;
}

.kc-subtab-content {
    display: none;
}

.kc-subtab-content.kc-subtab-visible {
    display: block;
    animation: fadeIn 0.2s ease;
}

/* ========================================
   KINETIC INFO BANNER
   ======================================== */
.kinetic-info-banner {
    background: #fef9c3;
    border: 2px solid #0d9488;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 32px;
}

.kinetic-info-banner h3 {
    color: var(--kinetic-blue);
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 12px 0;
}

.kinetic-info-banner > p {
    color: var(--kinetic-text-secondary);
    margin-bottom: 20px;
    font-size: 15px;
}

/* Auth Options Grid */
.auth-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.auth-option {
    background: var(--kinetic-bg-secondary);
    border: 1px solid var(--kinetic-border);
    border-radius: 8px;
    padding: 20px;
    transition: all 0.3s ease;
}

.auth-option:hover {
    border-color: var(--kinetic-blue);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--kinetic-shadow);
}

.auth-option h4 {
    color: var(--kinetic-text-primary);
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 16px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.auth-option h4 .dashicons {
    color: var(--kinetic-blue);
    font-size: 20px;
}

.auth-option ul {
    list-style: none;
    padding: 0;
    margin: 0 0 12px 0;
}

.auth-option ul li {
    padding: 8px 0 8px 24px;
    position: relative;
    color: var(--kinetic-text-secondary);
    font-size: 14px;
    line-height: 1.6;
}

.auth-option ul li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--kinetic-blue);
    font-weight: 700;
}

.auth-option .description {
    background: var(--kinetic-bg-tertiary);
    border-left: 3px solid var(--kinetic-orange);
    padding: 12px;
    margin-top: 12px;
    border-radius: 4px;
    font-size: 13px;
}

/* ========================================
   FORM ELEMENTS
   ======================================== */
.form-table {
    background: transparent;
}

.form-table th {
    color: var(--kinetic-text-primary);
    font-weight: 600;
    padding: 16px 12px 16px 0;
    width: 200px;
}

.form-table td {
    padding: 16px 12px;
}

.form-table input[type="text"],
.form-table input[type="password"],
.form-table input[type="number"],
.form-table select,
.form-table textarea {
    background: var(--kinetic-bg-primary);
    border: 1px solid var(--kinetic-border);
    border-radius: 6px;
    color: var(--kinetic-text-primary);
    padding: 10px 14px;
    font-size: 14px;
    transition: all 0.3s ease;
}

.form-table input[type="text"]:focus,
.form-table input[type="password"]:focus,
.form-table input[type="number"]:focus,
.form-table select:focus,
.form-table textarea:focus {
    border-color: var(--kinetic-blue);
    outline: none;
    box-shadow: 0 0 0 3px rgba(75, 115, 255, 0.1);
}

.form-table .description {
    color: var(--kinetic-text-muted);
    font-size: 13px;
    margin-top: 8px;
    line-height: 1.5;
}

/* ========================================
   BUTTONS - Kinetic Light Branding
   ======================================== */
.button,
.button-primary,
.button-secondary {
    border-radius: 6px;
    padding: 10px 20px;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.3s ease;
    border: 1px solid #e5e5e5;
    cursor: pointer;
}

.button-primary {
    background: #0d9488 !important;
    color: #ffffff !important;
    border-color: #0d9488 !important;
    box-shadow: 0 2px 8px rgba(13, 148, 136, 0.3);
}

.button-primary:hover {
    background: #115e59 !important;
    border-color: #115e59 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(13, 148, 136, 0.4);
}

.button-secondary,
.button {
    background: #fef9c3 !important;
    color: #713f12 !important;
    border-color: #e5e5e5 !important;
}

.button-secondary:hover,
.button:hover {
    background: #fef08a !important;
    border-color: #0d9488 !important;
    color: #713f12 !important;
    transform: translateY(-2px);
}

/* ========================================
   TONE PILLS & BADGES
   ======================================== */
.tone-pill,
.kinetic-badge {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 2px;
    font-size: 12px;
    font-weight: 600;
    margin: 4px;
    transition: all 0.3s ease;
}

.tone-pill {
    background: #fef9c3 !important;
    color: #713f12 !important;
    border: 1px solid #e5e5e5;
}

.tone-pill:hover {
    transform: scale(1.05);
    background: #fef08a !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.kinetic-badge {
    background: #fef9c3;
    color: #713f12;
}

/* ========================================
   STUDIO INTERFACE
   ======================================== */
.studio-container {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 24px;
    margin-top: 24px;
}

.studio-sidebar {
    background: var(--kinetic-bg-secondary);
    border: 1px solid var(--kinetic-border);
    border-radius: 8px;
    padding: 20px;
    height: fit-content;
    position: sticky;
    top: 32px;
}

.studio-main {
    background: var(--kinetic-bg-secondary);
    border: 1px solid var(--kinetic-border);
    border-radius: 8px;
    padding: 24px;
    min-height: 500px;
}

/* ========================================
   SNIPPETS LIBRARY
   ======================================== */
.snippet-card {
    background: var(--kinetic-bg-secondary);
    border: 1px solid var(--kinetic-border);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 16px;
    transition: all 0.3s ease;
}

.snippet-card:hover {
    border-color: var(--kinetic-blue);
    box-shadow: 0 4px 12px var(--kinetic-shadow);
}

.snippet-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.snippet-title {
    color: var(--kinetic-text-primary);
    font-weight: 600;
    font-size: 16px;
}

.snippet-rating {
    color: var(--kinetic-gold);
}

.snippet-content {
    color: var(--kinetic-text-secondary);
    line-height: 1.6;
    margin: 12px 0;
    padding: 12px;
    background: var(--kinetic-bg-tertiary);
    border-radius: 6px;
    border-left: 3px solid var(--kinetic-blue);
}

.snippet-meta {
    display: flex;
    gap: 16px;
    font-size: 12px;
    color: var(--kinetic-text-muted);
    margin-top: 12px;
}

/* ========================================
   LOADING & STATUS INDICATORS
   ======================================== */
.kinetic-loading {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid var(--kinetic-border);
    border-top-color: var(--kinetic-blue);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

.status-badge {
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.status-badge.success {
    background: rgba(46, 213, 115, 0.2);
    color: #2ed573;
    border: 1px solid #2ed573;
}

.status-badge.error {
    background: rgba(255, 1, 5, 0.2);
    color: var(--kinetic-red);
    border: 1px solid var(--kinetic-red);
}

.status-badge.warning {
    background: rgba(254, 123, 2, 0.2);
    color: var(--kinetic-orange);
    border: 1px solid var(--kinetic-orange);
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */
@media (max-width: 1024px) {
    .studio-container {
        grid-template-columns: 1fr;
    }

    .studio-sidebar {
        position: static;
    }

    .auth-options {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .claude-ai-settings {
        padding: 12px;
    }

    .form-table th {
        width: 100%;
        display: block;
        padding-bottom: 8px;
    }

    .form-table td {
        display: block;
        padding-top: 0;
    }

    .nav-tab {
        padding: 10px 12px;
        font-size: 13px;
    }
}

/* ========================================
   ACCESSIBILITY
   ======================================== */
.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
}

.kinetic-focus-ring:focus {
    outline: 3px solid var(--kinetic-blue);
    outline-offset: 2px;
}

/* ========================================
   UTILITIES
   ======================================== */
.hidden {
    display: none !important;
}

.text-center {
    text-align: center;
}

.mt-4 { margin-top: 16px; }
.mb-4 { margin-bottom: 16px; }
.p-4 { padding: 16px; }

.kinetic-gradient-text {
    color: #0d9488;
}

/* ========================================
   KINETIC FRAMEWORK BRANDING
   ======================================== */
.kinetic-framework-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: var(--kinetic-bg-tertiary);
    border: 1px solid var(--kinetic-border);
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--kinetic-text-muted);
    margin-top: 24px;
}

.kinetic-framework-badge::before {
    content: '';
    width: 16px;
    height: 16px;
    background: #0d9488;
    border-radius: 50%;
}

/* ========================================
   MULTI-TONE SELECTOR (v1.2.0)
   ======================================== */
.tone-selection-tabs {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.tone-tab {
    flex: 1;
    padding: 10px 16px;
    background: var(--kinetic-bg-secondary);
    border: 1px solid var(--kinetic-border);
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
    color: var(--kinetic-text-secondary);
    transition: all 0.2s ease;
}

.tone-tab:hover {
    border-color: var(--kinetic-blue);
    color: var(--kinetic-blue);
}

.tone-tab.active {
    background: #f5edbe;
    border-color: #c8a830;
    color: #5a4200;
    font-weight: 600;
}

.tone-content {
    margin-top: 16px;
}

.tone-content.hidden {
    display: none;
}

.tone-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
    margin-top: 12px;
    padding: 16px;
    background: var(--kinetic-bg-secondary);
    border: 1px solid var(--kinetic-border);
    border-radius: 8px;
    max-height: 300px;
    overflow-y: auto;
}

.tone-checkbox {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    background: var(--kinetic-bg-tertiary);
    border: 2px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}

.tone-checkbox:hover {
    background: var(--kinetic-hover-bg);
    border-color: var(--kinetic-blue);
}

.tone-checkbox input[type="checkbox"] {
    margin: 0 8px 0 0;
    cursor: pointer;
}

.tone-checkbox input[type="checkbox"]:checked + .tone-label {
    font-weight: 600;
    color: var(--kinetic-blue);
}

.tone-checkbox:has(input:checked) {
    background: var(--kinetic-hover-bg);
    border-color: var(--kinetic-blue);
}

.tone-label {
    font-size: 13px;
    color: var(--kinetic-text-primary);
    transition: all 0.2s ease;
}

.tone-pills-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px;
    background: var(--kinetic-bg-secondary);
    border: 1px solid var(--kinetic-border);
    border-radius: 8px;
    min-height: 50px;
    margin-top: 8px;
}

.tone-pill {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    background: #0d9488;
    color: #ffffff;
    border-radius: 2px;
    font-size: 12px;
    font-weight: 600;
    box-shadow: 0 2px 4px var(--kinetic-shadow);
}

.no-tones {
    color: var(--kinetic-text-muted);
    font-style: italic;
    font-size: 13px;
}

/* Dark mode input fixes removed — plugin UI is always light mode */

/* ========================================
   API KEY TEST SUCCESS MESSAGE (v1.2.0)
   ======================================== */
#api-key-status {
    margin-top: 12px;
    padding: 12px 16px;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
    background: #f9fafb;
    font-size: 14px;
    min-height: 44px;
}

#api-key-status .success {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #4caf50;
    font-weight: 500;
}

#api-key-status .success .dashicons {
    color: #4caf50;
}

#api-key-status .error {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--kinetic-red);
    font-weight: 500;
}

#api-key-status .error .dashicons {
    color: var(--kinetic-red);
}

#api-key-status .testing {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #374151;
    font-weight: 500;
}

/* ========================================
   COLLAPSIBLE SECTIONS (v1.2.0)
   ======================================== */
.collapsible-section .section-header {
    cursor: pointer;
    padding: 12px;
    background: var(--kinetic-bg-secondary);
    border: 1px solid var(--kinetic-border);
    border-radius: 6px;
    margin-bottom: 15px;
    transition: all 0.2s ease;
}

.collapsible-section .section-header:hover {
    background: var(--kinetic-hover-bg);
    border-color: var(--kinetic-blue);
}

.collapsible-section .section-header .toggle-icon {
    transition: transform 0.2s ease;
    vertical-align: middle;
    margin-right: 5px;
}

.collapsible-section .section-header .dashicons-arrow-right-alt2 {
    transform: rotate(0deg);
}

.collapsible-section .section-header .dashicons-arrow-down-alt2 {
    transform: rotate(0deg);
}

.collapsible-section .section-content {
    padding: 0 12px;
}

/* Part of Kinetic Framework - End of File */


/* ========================================
   KineticCopy Design Theme v2.0.3
   Copy Edition — crimson + Instrument Serif + JetBrains Mono
   ======================================== */

/* ── COPY BRAND TOKENS ──────────────────────────────────────────────── */
:root {
    --copy:        #D6263A;
    --copy-hover:  #A6172A;
    --copy-deep:   #7A1620;
    --copy-soft:   #FFF0F2;
    --copy-edge:   #F5C0C5;
    --copy-mid:    #E86070;
}

/* ── RADIUS: consistent 4–5px ─────────────────────────────────────── */
:root {
    --kc-radius-sm: 4px;
    --kc-radius-md: 5px;
    --kc-radius-lg: 5px;
    --radius-sm: 4px;
    --radius-md: 5px;
    --radius-lg: 5px;
}
.button, .button-primary, .button-secondary,
.claude-btn, .claude-card, .kinetic-card,
.claude-select, .claude-input, .claude-textarea,
.auth-option, .snippet-card, .studio-sidebar, .studio-main,
.tab-content, .claude-ai-settings .card,
.kinetic-info-banner, .context-box, .progress-bar,
.status-item, .intelligence-item, .step {
    border-radius: 5px !important;
}

/* ── PAGE HEADER: slim bone/white (v2.0.5 — no gradient banner) ────── */
/* All header styles now live in the primary SLIM PAGE HEADER block above */

/* ── TYPOGRAPHY — Instrument Serif italic accents ──────────────────── */
/* Use .kc-serif-em inside headings for italic flourish */
.kc-serif-em,
.kc-page-header__desc em {
    font-family: var(--kc-font-display, 'Instrument Serif', Georgia, serif);
    font-style: italic;
    font-weight: 400;
    font-size: 1.08em;
    letter-spacing: -0.01em;
    line-height: 0;
    vertical-align: -0.02em;
}

/* Page subtitles / descriptions — Instrument Serif italic */
.kc-page-header__desc {
    font-family: var(--kc-font-display, 'Instrument Serif', Georgia, serif);
    font-style: italic;
    font-size: 13px;
}

/* ── TYPOGRAPHY — JetBrains Mono for notices & labels ─────────────── */
.kc-eyebrow,
.kc-mono,
.form-table th,
p.description,
.description,
td .description,
.claude-card-title,
.claude-stat-label,
.kc-page-header__badge,
.tone-pill,
.kinetic-badge,
.keyword-tag,
.status-badge,
.kc-premium-badge,
.claude-tabs .claude-tab,
.nav-tab-wrapper .nav-tab {
    font-family: var(--kc-font-mono, 'JetBrains Mono', monospace) !important;
}
p.description,
.description,
td .description {
    font-size: 11.5px !important;
    letter-spacing: 0.01em;
    color: var(--kc-text-muted, #6b7280) !important;
}
.kc-eyebrow {
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--kc-text-xmuted, #9ca3af);
}
.form-table th {
    font-size: 12px !important;
    letter-spacing: 0.02em;
}

/* ── BUTTONS: WP button-primary = Copy crimson ─────────────────────── */
.claude-btn-primary,
.button.button-primary,
.button.button-primary:focus {
    background: #D6263A !important;
    color: #ffffff !important;
    border-color: #A6172A !important;
}
.claude-btn-primary:hover,
.button.button-primary:hover {
    background: #A6172A !important;
    border-color: #7A1620 !important;
    color: #ffffff !important;
}

/* Secondary buttons: dark text, no transforms */
.button,
.button-secondary {
    color: #374151 !important;
    transform: none !important;
}
.button:hover,
.button-secondary:hover {
    color: #111827 !important;
    border-color: #d1d5db !important;
    transform: none !important;
}

/* ── TABS: crimson underline on active ─────────────────────────────── */
.nav-tab-active,
.nav-tab-active:hover {
    color: #111827 !important;
    border-bottom-color: #D6263A !important;
    background: transparent !important;
}
.nav-tab:hover { border-bottom-color: var(--copy-edge, #F5C0C5) !important; }
.tone-tab.active {
    background: var(--copy-soft, #FFF0F2) !important;
    border-color: var(--copy-edge, #F5C0C5) !important;
    color: var(--copy, #D6263A) !important;
}
.claude-tab.active {
    border-bottom-color: #D6263A !important;
    color: #111827 !important;
}

/* ── INFO BANNER: crimson left accent ─────────────────────────────── */
.kinetic-info-banner {
    background: #FCFBF8 !important;
    border: 1px solid #e5e7eb !important;
    border-left: 4px solid #D6263A !important;
}
.kinetic-info-banner h2,
.kinetic-info-banner h3 {
    color: #111827 !important;
    font-weight: 700 !important;
}

/* ── SITE INTELLIGENCE: crimson section headings ───────────────────── */
.intelligence-item h4,
.intelligence-item h4 .dashicons { color: #374151 !important; }
.intelligence-item h4 {
    border-bottom: 2px solid #D6263A;
    padding-bottom: 8px;
    margin-bottom: 12px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-family: var(--kc-font-mono, 'JetBrains Mono', monospace);
}
/* Keyword tags: soft crimson */
.keyword-tag {
    background: var(--copy-soft, #FFF0F2) !important;
    color: var(--copy-deep, #7A1620) !important;
    border: 1px solid var(--copy-edge, #F5C0C5) !important;
    border-radius: 3px !important;
    font-weight: 600 !important;
    font-size: 11px !important;
}
/* Context box: crimson left border */
.context-box { border-left-color: #D6263A !important; }
/* Step numbers: crimson */
.step-number {
    background: var(--copy-soft, #FFF0F2) !important;
    background-image: none !important;
    color: var(--copy, #D6263A) !important;
    font-weight: 800 !important;
    border: 1px solid var(--copy-edge, #F5C0C5) !important;
}
/* Scan/Clear: icon-only, no bg */
.scan-actions .button,
#scan-site-now, #clear-intelligence {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #374151 !important;
    padding: 6px 10px !important;
    font-weight: 600 !important;
    transform: none !important;
}
#scan-site-now:hover, #clear-intelligence:hover {
    background: #f3f4f6 !important;
    color: #111827 !important;
}

/* ── CONTENT LIBRARY: toolbar borderless ──────────────────────────── */
.library-toolbar-actions .button,
#library-toggle-view, #library-manage-folders {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #374151 !important;
    padding: 6px 8px !important;
}
.library-toolbar-actions .button:hover,
#library-toggle-view:hover, #library-manage-folders:hover {
    background: #f3f4f6 !important;
    color: #111827 !important;
}

/* ── TONE TEMPLATES: crimson pills ────────────────────────────────── */
.tone-pill,
.kinetic-badge,
.claude-ai-templates .tone-pill {
    background: var(--copy-soft, #FFF0F2) !important;
    color: var(--copy-deep, #7A1620) !important;
    border: 1px solid var(--copy-edge, #F5C0C5) !important;
    border-radius: 3px !important;
    box-shadow: none !important;
    font-family: var(--kc-font-mono, 'JetBrains Mono', monospace) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
}
.claude-ai-templates .edit-template,
.claude-ai-templates .delete-template {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #374151 !important;
    transform: none !important;
}
.claude-ai-templates .edit-template:hover {
    background: #f3f4f6 !important;
    color: #111827 !important;
}
.claude-ai-templates .delete-template:hover {
    background: var(--copy-soft, #FFF0F2) !important;
    color: var(--copy, #D6263A) !important;
}

/* ── KINETIC CARD ─────────────────────────────────────────────────── */
.kinetic-card {
    border: 1px solid #e5e7eb !important;
    border-radius: 5px !important;
}
.status-badge { border-radius: 4px !important; }

/* ── FORM FOCUS: crimson ring ─────────────────────────────────────── */
.claude-ai-copywriter .widefat,
.claude-ai-copywriter input[type="text"],
.claude-ai-copywriter input[type="number"],
.claude-ai-copywriter input[type="email"],
.claude-ai-copywriter textarea,
.claude-ai-copywriter select,
.claude-ai-copywriter .claude-input,
.claude-ai-copywriter .claude-textarea,
.claude-ai-copywriter .claude-select,
#studio-page input[type="text"],
#studio-page input[type="number"],
#studio-page textarea,
#studio-page select,
.studio-main input, .studio-main textarea, .studio-main select {
    border-color: #e5e7eb !important;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.04) !important;
}
.claude-ai-copywriter .widefat:focus,
.claude-ai-copywriter input[type="text"]:focus,
.claude-ai-copywriter textarea:focus,
.claude-ai-copywriter select:focus,
.studio-main input:focus, .studio-main textarea:focus, .studio-main select:focus {
    border-color: #D6263A !important;
    box-shadow: 0 0 0 1px rgba(214,38,58,0.2) !important;
    outline: none !important;
}

/* ── LINK COLORS: crimson ─────────────────────────────────────────── */
.claude-ai-wrap a:not(.button):not(.nav-tab) {
    color: #D6263A;
}
.claude-ai-wrap a:not(.button):not(.nav-tab):hover {
    color: #A6172A;
}

/* END KineticCopy Design Theme v2.0.3 */

/* ── Free floor / upgrade nudge styles (Phase 4) ───────────────────────── */

.kc-upgrade-nudge {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-left: 4px solid #e8d98e;
    border-radius: 5px;
    padding: 12px 16px;
    margin: 8px 0;
    font-size: 13px;
    color: #374151;
}

.kc-upgrade-nudge .dashicons {
    flex-shrink: 0;
    color: #92400e;
}

.kc-upgrade-nudge p {
    margin: 0;
}

.kc-upgrade-nudge a {
    font-weight: 600;
    color: #92400e;
    text-decoration: underline;
}

.kc-upgrade-nudge-full {
    display: block;
    text-align: center;
    padding: 40px 32px;
    max-width: 520px;
    margin: 40px auto;
}

.kc-upgrade-nudge-full .kc-nudge-icon {
    font-size: 40px;
    width: 40px;
    height: 40px;
    color: #d97706;
    margin-bottom: 12px;
}

.kc-upgrade-nudge-full h3 {
    font-size: 18px;
    margin: 0 0 8px;
}

.kc-upgrade-nudge-full p {
    color: #6b7280;
    margin: 0 0 20px;
}

/* Locked option in dropdowns */
.kc-locked-option {
    color: #9ca3af;
}

/* Locked tone in tone grid */
.kc-tone-locked {
    opacity: 0.5;
    cursor: not-allowed;
}

.kc-tone-locked input[type="checkbox"] {
    cursor: not-allowed;
}

.kc-premium-badge {
    font-size: 10px;
}

/* END Phase 4 free floor styles */

/* ─────────────────────────────────────────────────────────────────────
   v1.9.2 — Button text contrast: force dark text on all plain .button
   elements in KineticCopy admin pages. WP default is blue (#0a4b78)
   which can disappear against light grey backgrounds.
   .button-primary keeps white text (dark bg).
   ───────────────────────────────────────────────────────────────────── */
.wrap .button:not(.button-primary):not(.kc-cal-view-toggle),
.wrap .button-secondary,
#kc-cal-page .button:not(.button-primary),
.kc-cal-modal .button:not(.button-primary),
#post .button:not(.button-primary) {
    color: #1d2327 !important;
}
.wrap .button:not(.button-primary):not(.kc-cal-view-toggle):hover,
.wrap .button-secondary:hover,
#kc-cal-page .button:not(.button-primary):hover,
.kc-cal-modal .button:not(.button-primary):hover {
    color: #000000 !important;
}


/* ========================================
   KineticCopy Layout & Cards v2.0.4
   Bone backgrounds, card panels, beautiful spacing
   ======================================== */

/* ── PAGE CANVAS: warm bone background ────────────────────────────── */
.claude-ai-wrap {
    background: #FBFAF7 !important;
    min-height: 100vh;
    padding-bottom: 40px;
}

/* Extend bone into the WP admin content area behind our pages */
.claude-ai-wrap + div,
.wrap.claude-ai-wrap {
    position: relative;
}

/* ── SETTINGS / MY BRAND CONTAINER ───────────────────────────────── */
.claude-settings-container {
    margin-top: 0 !important;
}

/* ── NAV TABS: sit on bone, feel light ───────────────────────────── */
.claude-ai-wrap .nav-tab-wrapper,
.claude-settings-container .nav-tab-wrapper {
    background: transparent !important;
    border-bottom: 2px solid #ECE9DF !important;
    margin-bottom: 0 !important;
    padding-top: 8px;
}

.claude-ai-wrap .nav-tab {
    background: transparent !important;
    border-color: transparent !important;
    border-bottom-color: transparent !important;
    color: #6b7280 !important;
    margin-bottom: -2px !important;
    padding: 10px 16px !important;
    font-size: 12px !important;
    font-family: 'JetBrains Mono', monospace !important;
    letter-spacing: 0.03em;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.claude-ai-wrap .nav-tab:hover {
    background: transparent !important;
    border-bottom-color: #F5C0C5 !important;
    color: #374151 !important;
}

.claude-ai-wrap .nav-tab-active,
.claude-ai-wrap .nav-tab-active:hover {
    background: transparent !important;
    border-bottom-color: #D6263A !important;
    color: #111827 !important;
    font-weight: 600 !important;
}

/* ── TAB CONTENT PANELS AS CARDS ─────────────────────────────────── */
.tab-content {
    display: none;
    background: #ffffff !important;
    border: 1px solid #ECE9DF !important;
    border-top: none !important;
    border-radius: 0 0 8px 8px !important;
    padding: 32px 28px !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.05) !important;
}

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

/* ── SECTION HEADINGS INSIDE TAB PANELS ──────────────────────────── */
.tab-content > h2,
.tab-content h2:first-child {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    color: #9ca3af !important;
    margin: 0 0 20px 0 !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid #F0EDE7 !important;
}

/* Subsequent h2s (new sections within same panel) */
.tab-content h2:not(:first-child) {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    color: #9ca3af !important;
    margin: 32px 0 16px 0 !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid #F0EDE7 !important;
}

/* ── FORM TABLE: warm rows ────────────────────────────────────────── */
.tab-content .form-table {
    margin-top: 0 !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

.tab-content .form-table tr {
    border-bottom: 1px solid #F5F3EC;
    transition: background 0.15s ease;
}

.tab-content .form-table tr:last-child {
    border-bottom: none;
}

.tab-content .form-table tr:hover {
    background: #FDFCF9 !important;
}

.tab-content .form-table th {
    padding: 18px 16px 18px 0 !important;
    vertical-align: top;
    width: 220px;
}

.tab-content .form-table td {
    padding: 16px 0 !important;
    vertical-align: top;
}

/* ── STUDIO CARDS ────────────────────────────────────────────────── */
.studio-card,
.claude-card {
    background: #ffffff !important;
    border: 1px solid #ECE9DF !important;
    border-radius: 8px !important;
    padding: 24px !important;
    box-shadow: 0 1px 6px rgba(0,0,0,0.05) !important;
    margin-bottom: 16px;
}

.studio-card + .studio-card,
.claude-card + .claude-card {
    margin-top: 0 !important;
}

.studio-card h2,
.claude-card h2 {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    color: #9ca3af !important;
    margin: 0 0 18px 0 !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid #F0EDE7 !important;
}

/* ── STUDIO SIDEBAR ──────────────────────────────────────────────── */
.studio-sidebar {
    background: #ffffff !important;
    border: 1px solid #ECE9DF !important;
    border-radius: 8px !important;
    padding: 20px !important;
    box-shadow: 0 1px 6px rgba(0,0,0,0.05) !important;
}

.studio-sidebar h3 {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    color: #9ca3af !important;
    margin: 0 0 14px 0 !important;
    padding-bottom: 8px !important;
    border-bottom: 1px solid #F0EDE7 !important;
}

/* ── INFO BANNERS: warm, not harsh white ─────────────────────────── */
.kinetic-info-banner {
    background: #FBFAF7 !important;
    border-color: #ECE9DF !important;
    border-left-color: #D6263A !important;
}

/* ── POSTBOX / METABOX CARDS ─────────────────────────────────────── */
.postbox {
    background: #ffffff !important;
    border: 1px solid #ECE9DF !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 6px rgba(0,0,0,0.05) !important;
}

.postbox .postbox-header {
    border-bottom-color: #ECE9DF !important;
}

/* ── SUBMIT BOX / SAVE ROW ───────────────────────────────────────── */
.tab-content .submit {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #F0EDE7;
}

/* ── INTELLIGENCE ITEMS as sub-cards ─────────────────────────────── */
.intelligence-item {
    background: #FBFAF7 !important;
    border: 1px solid #ECE9DF !important;
    border-radius: 6px !important;
    padding: 14px 16px !important;
    margin-bottom: 10px;
}

.intelligence-item:hover {
    background: #F5F3EC !important;
    border-color: #DAD5C4 !important;
}

/* ── SNIPPET CARDS ───────────────────────────────────────────────── */
.snippet-card {
    background: #ffffff !important;
    border: 1px solid #ECE9DF !important;
    border-radius: 6px !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04) !important;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.snippet-card:hover {
    border-color: #F5C0C5 !important;
    box-shadow: 0 2px 8px rgba(214,38,58,0.08) !important;
}

/* ── CONTEXT BOX ─────────────────────────────────────────────────── */
.context-box {
    background: #FBFAF7 !important;
    border-color: #ECE9DF !important;
    border-left-color: #D6263A !important;
}

/* ── CALENDAR: bone container ────────────────────────────────────── */
.kc-calendar-wrap,
#kc-calendar-container {
    background: #ffffff;
    border: 1px solid #ECE9DF;
    border-radius: 8px;
    box-shadow: 0 1px 6px rgba(0,0,0,0.05);
}

/* ── AUTH / LICENSE OPTION BOXES ─────────────────────────────────── */
.auth-option {
    background: #FBFAF7 !important;
    border-color: #ECE9DF !important;
}

.auth-option:hover,
.auth-option.selected {
    background: #FFF0F2 !important;
    border-color: #F5C0C5 !important;
}

.auth-option.selected {
    border-color: #D6263A !important;
}

/* ── UPGRADE NUDGE: keep warm gold tone ─────────────────────────── */
.kc-upgrade-nudge {
    background: #fffbeb !important;
}

/* ── SCROLLBAR: warm tint ────────────────────────────────────────── */
.claude-ai-wrap ::-webkit-scrollbar-track {
    background: #FBFAF7;
}

.claude-ai-wrap ::-webkit-scrollbar-thumb {
    background: #ECE9DF;
    border-radius: 4px;
}

.claude-ai-wrap ::-webkit-scrollbar-thumb:hover {
    background: #D6263A;
}

/* ── LIBRARY PAGE CONTAINER ──────────────────────────────────────── */
#library-container,
.library-grid {
    background: transparent;
}

/* END KineticCopy Layout & Cards v2.0.5 */

/* ══════════════════════════════════════════════════════════════════════
   KineticCopy v2.0.6 — Design System Overrides
   Applied last so these rules win over all earlier declarations.
   ══════════════════════════════════════════════════════════════════════ */

/* ── 1. GREEN LINE FIX: suppress .claude-ai-settings h1::before inside header */
.kc-page-header h1::before,
.kc-page-header .kc-page-header__title::before {
    display: none !important;
    content: none !important;
}

/* ── 2. PAGE HEADER: wordmark image sizing */
.kc-page-header__logo {
    height: 22px;
    width: auto;
    display: block;
    flex-shrink: 0;
}

/* ── 3. PAGE HEADER: separator = slim crimson vertical bar */
.kc-page-header__sep {
    display: inline-block !important;
    width: 1px !important;
    height: 18px !important;
    background: rgba(214, 38, 58, 0.35) !important;
    color: transparent !important;
    font-size: 0 !important;
    align-self: center;
    flex-shrink: 0;
}

/* ── 4. PAGE HEADER: align title + desc on same center line */
.kc-page-header__content {
    align-items: center !important;
}

/* ── 5. BORDER RADIUS: 3px everywhere — no more rounded corners */
:root {
    --kc-radius-sm: 3px;
    --kc-radius-md: 3px;
    --kc-radius-lg: 3px;
    --radius-sm: 3px;
    --radius-md: 3px;
    --radius-lg: 3px;
}
body.kc-admin-page .button,
body.kc-admin-page .button-primary,
body.kc-admin-page .button-secondary,
body.kc-admin-page .claude-btn,
body.kc-admin-page .claude-card,
body.kc-admin-page .kinetic-card,
body.kc-admin-page .claude-select,
body.kc-admin-page .claude-input,
body.kc-admin-page .claude-textarea,
body.kc-admin-page .auth-option,
body.kc-admin-page .snippet-card,
body.kc-admin-page .studio-sidebar,
body.kc-admin-page .studio-main,
body.kc-admin-page .studio-card,
body.kc-admin-page .claude-card,
body.kc-admin-page .tone-tab,
body.kc-admin-page .tone-checkbox,
body.kc-admin-page .tone-grid,
body.kc-admin-page .tone-pills-container,
body.kc-admin-page .tab-content,
body.kc-admin-page .postbox,
body.kc-admin-page input[type="text"],
body.kc-admin-page input[type="email"],
body.kc-admin-page input[type="password"],
body.kc-admin-page input[type="number"],
body.kc-admin-page input[type="url"],
body.kc-admin-page textarea,
body.kc-admin-page select,
body.kc-admin-page .intelligence-item,
body.kc-admin-page .kinetic-info-banner,
body.kc-admin-page .context-box {
    border-radius: 3px !important;
}

/* ── 6. JETBRAINS MONO: NEVER bold */
body.kc-admin-page .kc-eyebrow,
body.kc-admin-page .kc-mono,
body.kc-admin-page .form-table th,
body.kc-admin-page p.description,
body.kc-admin-page .description,
body.kc-admin-page td .description,
body.kc-admin-page .claude-card-title,
body.kc-admin-page .claude-stat-label,
body.kc-admin-page .kc-page-header__badge,
body.kc-admin-page .tone-pill,
body.kc-admin-page .kinetic-badge,
body.kc-admin-page .keyword-tag,
body.kc-admin-page .status-badge,
body.kc-admin-page .kc-premium-badge,
body.kc-admin-page .claude-tabs .claude-tab,
body.kc-admin-page .nav-tab-wrapper .nav-tab,
body.kc-admin-page .studio-card h2,
body.kc-admin-page .claude-card h2,
body.kc-admin-page .studio-sidebar h3,
body.kc-admin-page .studio-card h3,
body.kc-admin-page .tab-content h2 {
    font-weight: 400 !important;
}

/* ── 7. ALL GREY BOXES → bone #FBFAF7 */
body.kc-admin-page .tone-grid,
body.kc-admin-page .tone-pills-container {
    background: #FBFAF7 !important;
    border-color: #ECE9DF !important;
}

/* ── 8. YELLOW BUTTONS → white / dark text everywhere */
body.kc-admin-page .button,
body.kc-admin-page .button-secondary {
    background: #ffffff !important;
    color: #374151 !important;
    border: 1px solid #d1d5db !important;
    box-shadow: none !important;
    transform: none !important;
}
body.kc-admin-page .button:hover,
body.kc-admin-page .button-secondary:hover {
    background: #f9fafb !important;
    color: #111827 !important;
    border-color: #9ca3af !important;
    transform: none !important;
    box-shadow: none !important;
}
/* License & Debug tab: white + crimson border */
.tab-content[id="license"] .button:not(.button-primary),
.tab-content[id="debug-log"] .button:not(.button-primary) {
    background: #ffffff !important;
    color: #D6263A !important;
    border: 1px solid #D6263A !important;
}
.tab-content[id="license"] .button:not(.button-primary):hover,
.tab-content[id="debug-log"] .button:not(.button-primary):hover {
    background: #D6263A !important;
    color: #ffffff !important;
    border-color: #A6172A !important;
}

/* ── 9. BUTTON BORDERS: remove on action buttons (already handled by new defaults) */
/* Primary buttons in header keep their own styling */

/* ── 10. FIELD / INPUT BORDERS: much lighter throughout */
body.kc-admin-page input[type="text"],
body.kc-admin-page input[type="email"],
body.kc-admin-page input[type="password"],
body.kc-admin-page input[type="number"],
body.kc-admin-page input[type="url"],
body.kc-admin-page input[type="search"],
body.kc-admin-page textarea,
body.kc-admin-page select {
    border: 1px solid #e5e7eb !important;
    box-shadow: none !important;
}
body.kc-admin-page input:focus,
body.kc-admin-page textarea:focus,
body.kc-admin-page select:focus {
    border-color: #F5C0C5 !important;
    box-shadow: 0 0 0 1px #F5C0C5 !important;
    outline: none !important;
}

/* ── 11. FORM TABLE ROW HOVER → pure white (was bone) */
.tab-content .form-table tr:hover {
    background: #ffffff !important;
}

/* ── 12. CHECKBOXES: crimson accent */
body.kc-admin-page input[type="checkbox"] {
    accent-color: #D6263A;
}

/* ── 13. STUDIO OUTER WRAPPERS: remove double-box (keep only inner .studio-card) */
.studio-main {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
}
.studio-sidebar {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

/* ── 14. TONE SELECTION: crimson hover, no yellow bg */
.tone-tab:hover {
    border-color: #D6263A !important;
    color: #D6263A !important;
    background: #FFF0F2 !important;
}
.tone-tab.active {
    background: #FFF0F2 !important;
    border-color: #F5C0C5 !important;
    color: #D6263A !important;
    font-weight: 500 !important;
}
.tone-checkbox:hover {
    background: #FFF0F2 !important;
    border-color: #D6263A !important;
}
.tone-checkbox:has(input:checked) {
    background: #FFF0F2 !important;
    border-color: #D6263A !important;
}
.tone-checkbox input[type="checkbox"]:checked + .tone-label {
    color: #D6263A !important;
    font-weight: 500 !important;
}

/* ── 15. USE TEMPLATE TAB HOVER: crimson underline */
.claude-tab:hover {
    color: #D6263A !important;
    border-bottom-color: #F5C0C5 !important;
}

/* ── 16. SECTION LABEL TITLES: slightly larger (Content Type, Select Tones, etc.) */
.studio-card h2,
.claude-card h2 {
    font-size: 11px !important;
}
.studio-sidebar h3,
.studio-card h3 {
    font-size: 11px !important;
}

/* ── 17. SETTINGS FORM TABLE LABELS: bigger font */
.tab-content .form-table th {
    font-size: 13px !important;
}

/* ── 18. MY BRAND NAV TABS: slightly bigger text */
.claude-ai-wrap .nav-tab-wrapper .nav-tab {
    font-size: 13px !important;
}

/* ── END v2.0.6 overrides ── */

/* ══════════════════════════════════════════════════════════════════════
   KineticCopy v2.0.7 — Bug-fix patch
   ══════════════════════════════════════════════════════════════════════ */

/* ── FIX 1: Logo — slightly bigger (overrides v2.0.6 22px rule) */
.kc-page-header__logo {
    height: 28px !important;
}

/* ── FIX 2: Checkboxes — crimson accent (with !important) */
body.kc-admin-page input[type="checkbox"] {
    accent-color: #D6263A !important;
}

/* ── FIX 3: Sub-tabs (API Keys & Integrations: AI Providers / Integrations)
            Active underline was blue — now crimson. Font never bold. */
body.kc-admin-page .kc-subtab-active,
body.kc-admin-page .kc-subtab-active:hover {
    color: #D6263A !important;
    border-bottom-color: #D6263A !important;
    font-weight: 400 !important;
}
body.kc-admin-page .kc-subtab-btn {
    font-family: 'JetBrains Mono', monospace !important;
    font-weight: 400 !important;
    font-size: 12px !important;
}

/* ── FIX 4: Manual tab / .kinetic-info-banner — full reset from old yellow/teal style */
body.kc-admin-page .kinetic-info-banner {
    background: #FBFAF7 !important;
    border: 1px solid #ECE9DF !important;
    border-left: 4px solid #D6263A !important;
    border-radius: 3px !important;
    padding: 16px 20px !important;
    box-shadow: none !important;
}
body.kc-admin-page .kinetic-info-banner h3,
body.kc-admin-page .kinetic-info-banner h4 {
    color: #1d2327 !important;
    font-weight: 500 !important;
    font-family: 'Inter', sans-serif !important;
}
body.kc-admin-page .kinetic-info-banner p,
body.kc-admin-page .kinetic-info-banner li,
body.kc-admin-page .kinetic-info-banner summary {
    color: #374151 !important;
    font-size: 13px !important;
}
body.kc-admin-page .kinetic-info-banner details {
    border: none !important;
    background: transparent !important;
    border-radius: 0 !important;
}

/* ── END v2.0.7 patch ── */

/* ══════════════════════════════════════════════════════════════════════
   KineticCopy v2.0.9 — Bug-fix + polish patch
   ══════════════════════════════════════════════════════════════════════ */

/* ── FIX 1: Sidebar icon — proper centering (removed, see updated rule below) */

/* ── FIX 2: Max Tokens input — double the width */
#max_tokens {
    width: 100px !important;
}

/* ── FIX 3: Checkboxes — force crimson (file only loads on KC pages, no scope needed) */
input[type="checkbox"] {
    accent-color: #D6263A !important;
}

/* ── FIX 4: Main tabs — remove ALL blue border/outline on focus/active.
            Keep ONLY the crimson border-bottom on active. */
.claude-ai-wrap .nav-tab-wrapper .nav-tab:focus,
.claude-ai-wrap .nav-tab-wrapper .nav-tab:focus-visible,
.claude-ai-wrap .nav-tab-wrapper .nav-tab:focus-within,
.claude-settings-container .nav-tab-wrapper .nav-tab:focus,
.claude-settings-container .nav-tab-wrapper .nav-tab:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    border-color: transparent !important;
    border-top-color: transparent !important;
    border-left-color: transparent !important;
    border-right-color: transparent !important;
    border-bottom-color: transparent !important;
}
.claude-ai-wrap .nav-tab-active,
.claude-ai-wrap .nav-tab-active:hover,
.claude-ai-wrap .nav-tab-active:focus,
.claude-ai-wrap .nav-tab-active:focus-visible,
.claude-settings-container .nav-tab-active,
.claude-settings-container .nav-tab-active:focus,
.claude-settings-container .nav-tab-active:focus-visible {
    background: transparent !important;
    border: 1px solid transparent !important;
    border-bottom: 2px solid #D6263A !important;
    outline: none !important;
    box-shadow: none !important;
    color: #111827 !important;
    font-weight: 600 !important;
}

/* ── FIX 5: Page header logo — 20% larger (28px → 34px) */
.kc-page-header__logo {
    height: 34px !important;
}

/* ── FIX 6: Advanced Options & Constraints — bone background */
body.kc-admin-page .constraints-section {
    background: #F5F3EC !important;
    border-color: #ECE9DF !important;
}

/* ── FIX 7: Quick stats numbers — green instead of blue */
body.kc-admin-page .stat-value {
    color: #15803D !important;
    font-weight: 600 !important;
}

/* ── FIX 8: Persona empty state — bone colors */
.kc-persona-empty-state {
    background: #FBFAF7 !important;
    border: 2px dashed #ECE9DF !important;
    border-radius: 4px !important;
    padding: 32px !important;
    text-align: center !important;
    margin-bottom: 24px !important;
}
.kc-persona-empty-state p {
    color: #6b7280 !important;
    margin: 0 0 12px !important;
}

/* ── END v2.0.9 patch ── */

/* ══════════════════════════════════════════════════════════════
   WP ADMIN BONE BACKGROUND — KineticCopy pages only  (v2.0.5)
   Uses body.kc-admin-page added by Claude_AI_Copywriter_Admin::add_kc_body_class()
   Scoped so we don't touch other plugins' admin pages.
   ══════════════════════════════════════════════════════════════ */
body.kc-admin-page #wpcontent,
body.kc-admin-page #wpbody,
body.kc-admin-page #wpbody-content {
    background-color: #FBFAF7 !important;
}
/* Collapse extra top padding so the slim header sits flush */
body.kc-admin-page #wpbody-content {
    padding-top: 0 !important;
}
/* Make sure .wrap inherits bone - WP adds a margin-top that can expose grey */
body.kc-admin-page .wrap,
body.kc-admin-page .claude-ai-wrap {
    background: transparent !important;
}
/* ── SIDEBAR ICON: center and constrain PNG to 20×20 (WP standard) */
#adminmenu li.toplevel_page_kineticcopy .wp-menu-image {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
#adminmenu li.toplevel_page_kineticcopy .wp-menu-image img {
    width: 20px !important;
    height: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
    object-fit: contain !important;
    padding: 0 !important;
    margin: 0 auto !important;
    display: block !important;
}

/* Sidebar menu — crimson text only, NO background highlight */
#adminmenu li.toplevel_page_kineticcopy > a,
#adminmenu li.toplevel_page_kineticcopy > a:focus,
#adminmenu li.toplevel_page_kineticcopy.current > a,
#adminmenu li.current.menu-parent > a {
    background: transparent !important;
    color: #D6263A !important;
}
#adminmenu li.toplevel_page_kineticcopy .wp-menu-image:before {
    color: #D6263A !important;
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE — v2.1.0  (comprehensive mobile / tablet fixes)
   ══════════════════════════════════════════════════════════════ */

/* ── 1. Nav tabs: horizontal scroll so they never overflow or wrap ── */
.claude-ai-wrap .nav-tab-wrapper,
.claude-settings-container .nav-tab-wrapper {
    overflow-x: auto !important;
    overflow-y: visible !important;
    white-space: nowrap !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;           /* Firefox */
}
.claude-ai-wrap .nav-tab-wrapper::-webkit-scrollbar,
.claude-settings-container .nav-tab-wrapper::-webkit-scrollbar {
    display: none;                   /* Chrome/Safari */
}
.claude-ai-wrap .nav-tab-wrapper .nav-tab,
.claude-settings-container .nav-tab-wrapper .nav-tab {
    flex-shrink: 0 !important;
}

/* ── 2. Settings grid collapse ──────────────────────────────────── */
@media (max-width: 782px) {
    /* Settings sidebar collapses above the content */
    .claude-settings-grid {
        grid-template-columns: 1fr !important;
    }
    .claude-settings-nav {
        position: static !important;
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        border-bottom: 1px solid #ECE9DF;
        padding-bottom: 12px;
        margin-bottom: 16px;
    }
    .claude-settings-nav-item {
        flex-shrink: 0;
        padding: 5px 10px !important;
        font-size: 11px !important;
    }

    /* Tab content: tighter padding on mobile */
    .tab-content {
        padding: 20px 16px !important;
    }

    /* API key input row: stack on tiny screens */
    .api-key-row {
        flex-wrap: wrap !important;
    }
    .api-key-row .claude-input {
        min-width: 0 !important;
        flex: 1 1 100% !important;
    }
    .api-key-row .button {
        flex-shrink: 0;
    }

    /* Studio layout: already handled at 900px; force sidebar first on mobile */
    .claude-studio-layout,
    .studio-container {
        grid-template-columns: 1fr !important;
    }
    .studio-sidebar {
        position: static !important;
    }

    /* Form table: stacked */
    .tab-content .form-table th {
        width: 100% !important;
        display: block !important;
        padding-bottom: 4px !important;
        padding-top: 14px !important;
    }
    .tab-content .form-table td {
        display: block !important;
        padding-top: 0 !important;
    }

    /* Output actions: allow wrap */
    .claude-output-actions {
        flex-wrap: wrap !important;
    }

    /* Snippet meta: allow wrap */
    .snippet-meta {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    /* Plans grid: single column */
    .kc-plans-grid {
        grid-template-columns: 1fr !important;
    }

    /* Page header: hide description, tighter */
    .kc-page-header {
        padding: 8px 12px !important;
        margin: -6px -12px 16px -12px !important;
    }
    .kc-page-header__badge { display: none; }
}

@media (max-width: 540px) {
    /* Compact tab content further */
    .tab-content {
        padding: 16px 12px !important;
    }

    /* Content Library filter bar: stack */
    .kc-library-filters,
    .kc-filter-bar {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    .kc-library-filters .button,
    .kc-filter-bar .button {
        width: 100%;
        text-align: center;
    }

    /* Content type grid: 2 columns instead of 3+ */
    .content-type-grid,
    .kc-type-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Tone grid: single column */
    .tone-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Persona manager: stack row actions */
    .kc-persona-row {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    /* Snippet card actions: wrap */
    .snippet-actions,
    .kc-snippet-actions {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
}

/* ── 3. Ensure wrapping page doesn't cause horizontal scroll ────── */
body.kc-admin-page #wpbody-content > .wrap,
body.kc-admin-page .claude-ai-wrap {
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
}

/* ── 4. Touch-friendly tap targets ─────────────────────────────── */
@media (pointer: coarse) {
    .claude-ai-wrap .nav-tab {
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
    }
    .claude-ai-wrap .button {
        min-height: 36px !important;
    }
    /* Folder badge: bigger tap area */
    .card-folder-badge {
        padding: 4px 6px !important;
        min-height: 32px !important;
    }
}

/* ── END v2.1.0 responsive patch ── */
