/* ============================================
   YAML File Viewer - yaml_viewer.css
   Prefix: yv-
   Light mode default, dark mode via [data-theme="dark"]
   Blue theme - file viewer category
   Styling adapted from epub-file-viewer
   ============================================ */

/* CSS Variables - Light Mode (Default) */
:root {
    --yv-transition: 0.25s;

    /* Primary - blue (file viewers) */
    --yv-primary: #3399cc;
    --yv-primary-light: #e0f0f8;
    --yv-primary-dark: #2a7fa8;

    /* Secondary functional colors */
    --yv-success: #339966;
    --yv-success-light: #d1fae5;
    --yv-warning: #d97706;
    --yv-warning-light: #fef3c7;
    --yv-danger: #b91c1c;
    --yv-danger-light: #fee2e2;
    --yv-info: #2563eb;
    --yv-info-light: #dbeafe;

    /* Surfaces */
    --yv-bg: #f7fafc;
    --yv-bg-elevated: #ffffff;
    --yv-bg-secondary: #f0f7fb;
    --yv-bg-tertiary: #e1eff7;
    --yv-bg-canvas: #fafafa;

    /* Text */
    --yv-text: #1f2937;
    --yv-text-secondary: #374151;
    --yv-text-muted: #6b7280;

    /* Borders & shadows */
    --yv-border: #e5e7eb;
    --yv-border-strong: #d1d5db;
    --yv-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --yv-shadow-md: 0 2px 6px rgba(0, 0, 0, 0.06);
    --yv-shadow-lg: 0 6px 16px rgba(0, 0, 0, 0.08);

    /* Syntax highlighting - light */
    --yv-syn-key: #2563eb;
    --yv-syn-string: #0f766e;
    --yv-syn-number: #b91c1c;
    --yv-syn-bool: #b45309;
    --yv-syn-null: #6d28d9;
    --yv-syn-comment: #6b7280;
    --yv-syn-item: #339966;
}

/* Dark Mode Overrides */
[data-theme="dark"] {
    --yv-primary: #5db8e8;
    --yv-primary-light: rgba(93, 184, 232, 0.15);
    --yv-primary-dark: #3399cc;

    --yv-success: #4ade80;
    --yv-success-light: rgba(74, 222, 128, 0.15);
    --yv-warning: #fbbf24;
    --yv-warning-light: rgba(251, 191, 36, 0.15);
    --yv-danger: #f87171;
    --yv-danger-light: rgba(248, 113, 113, 0.15);
    --yv-info: #60a5fa;
    --yv-info-light: rgba(96, 165, 250, 0.15);

    --yv-bg: #0f1419;
    --yv-bg-elevated: #1a2129;
    --yv-bg-secondary: #232b35;
    --yv-bg-tertiary: #2d3744;
    --yv-bg-canvas: #0a0d12;

    --yv-text: #e5e7eb;
    --yv-text-secondary: #cbd5e1;
    --yv-text-muted: #94a3b8;

    --yv-border: #2d3744;
    --yv-border-strong: #3d4a5c;
    --yv-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --yv-shadow-md: 0 2px 6px rgba(0, 0, 0, 0.4);
    --yv-shadow-lg: 0 6px 16px rgba(0, 0, 0, 0.5);

    /* Syntax highlighting - dark */
    --yv-syn-key: #60a5fa;
    --yv-syn-string: #4ade80;
    --yv-syn-number: #f472b6;
    --yv-syn-bool: #fb923c;
    --yv-syn-null: #a78bfa;
    --yv-syn-comment: #64748b;
    --yv-syn-item: #a3e635;
}

/* ============================================
   Global overrides for this tool
   ============================================ */
.tool-main {
    overflow: visible !important;
    background: var(--yv-bg-elevated) !important;
    border: 1px solid var(--yv-border) !important;
    padding: 0 !important;
}
.tool-container {
    max-width: 1100px;
}
.tool-description {
    max-width: 800px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    float: none !important;
    display: block !important;
    text-align: center !important;
    box-sizing: border-box;
}
.yv-tool-header .tool-description {
    margin: 0 auto !important;
}
.tool-description a {
    color: var(--yv-primary);
    font-weight: 600;
    text-decoration: none;
}
.tool-description a:hover {
    text-decoration: underline;
}

/* Neutralize any global .upload-area::before gradient overlay */
.yv-upload-area::before,
.yv-upload-area::after {
    display: none !important;
    content: none !important;
}

/* ============================================
   Tool header
   ============================================ */
.yv-tool-header {
    text-align: center !important;
    margin-bottom: 24px;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 4px 0 0 !important;
    width: 100% !important;
    max-width: none !important;
    float: none !important;
    display: block !important;
}
.yv-title-row {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 0 auto 12px !important;
    width: auto !important;
    float: none !important;
    text-align: center;
}
.yv-icon-wrapper {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--yv-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.yv-icon-wrapper i,
.yv-icon-wrapper svg {
    width: 24px;
    height: 24px;
    color: #ffffff;
    stroke: #ffffff;
}
.yv-title {
    font-size: 1.9rem !important;
    font-weight: 700 !important;
    color: var(--yv-primary) !important;
    margin: 0 !important;
    text-align: center !important;
    width: auto !important;
    line-height: 1.2 !important;
}

/* ============================================
   Input section
   ============================================ */
.yv-input-section {
    padding: 24px;
}

/* Tabs */
.yv-tabs {
    display: flex;
    gap: 6px;
    background: var(--yv-bg-secondary);
    border: 1px solid var(--yv-border);
    border-radius: 10px;
    padding: 5px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}
.yv-tab-btn {
    flex: 1 1 120px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 14px !important;
    border: 1px solid transparent !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: var(--yv-text-muted) !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    cursor: pointer;
    transition: background var(--yv-transition), color var(--yv-transition);
    text-transform: none !important;
    box-shadow: none !important;
    line-height: 1.2 !important;
    min-width: 0 !important;
    width: auto !important;
}
.yv-tab-btn:hover {
    color: var(--yv-text) !important;
    background: var(--yv-bg-tertiary) !important;
}
.yv-tab-btn.active {
    background: var(--yv-bg-elevated) !important;
    color: var(--yv-primary) !important;
    border-color: var(--yv-border) !important;
    box-shadow: var(--yv-shadow-sm) !important;
}
.yv-tab-btn i,
.yv-tab-btn svg {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
}
.yv-tab-content {
    display: none;
}
.yv-tab-content.active {
    display: block;
}

/* Upload area */
.yv-upload-area {
    border: 2px dashed var(--yv-border-strong);
    border-radius: 14px;
    padding: 48px 24px;
    text-align: center;
    cursor: pointer;
    background: var(--yv-bg-secondary);
    transition: border-color var(--yv-transition), background var(--yv-transition);
    outline: none;
}
.yv-upload-area:hover,
.yv-upload-area:focus-visible,
.yv-upload-area.dragover {
    border-color: var(--yv-primary);
    background: var(--yv-primary-light);
}
.yv-upload-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    border-radius: 16px;
    background: var(--yv-primary);
    display: flex;
    align-items: center;
    justify-content: center;
}
.yv-upload-icon i,
.yv-upload-icon svg {
    width: 32px;
    height: 32px;
    color: #ffffff;
    stroke: #ffffff;
}
.yv-upload-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--yv-text);
    margin: 0 0 6px;
}
.yv-upload-subtitle {
    color: var(--yv-text-muted);
    margin: 0 0 16px;
    font-size: 0.95rem;
}
.yv-file-types {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-bottom: 16px;
}
.yv-type-badge {
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--yv-bg-elevated);
    border: 1px solid var(--yv-border);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--yv-text-secondary);
    letter-spacing: 0.03em;
}
.yv-upload-hint {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--yv-success);
    font-weight: 500;
}
.yv-upload-hint i,
.yv-upload-hint svg {
    width: 16px;
    height: 16px;
}

/* Paste area */
.yv-paste-area {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.yv-textarea {
    width: 100%;
    min-height: 300px;
    padding: 16px !important;
    border: 1px solid var(--yv-border) !important;
    border-radius: 10px !important;
    font-family: 'SF Mono', Consolas, Monaco, 'Ubuntu Mono', monospace !important;
    font-size: 0.9rem !important;
    line-height: 1.6 !important;
    resize: vertical;
    background: var(--yv-bg-canvas) !important;
    color: var(--yv-text) !important;
    transition: border-color var(--yv-transition);
    outline: none;
}
.yv-textarea:focus {
    border-color: var(--yv-primary) !important;
}
.yv-textarea::placeholder {
    color: var(--yv-text-muted);
}
.yv-paste-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

/* URL area */
.yv-url-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 24px 0;
}
.yv-url-group {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 520px;
    padding: 10px 14px;
    background: var(--yv-bg-canvas);
    border: 1px solid var(--yv-border);
    border-radius: 10px;
    transition: border-color var(--yv-transition);
}
.yv-url-group:focus-within {
    border-color: var(--yv-primary);
}
.yv-url-group input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 0.95rem;
    color: var(--yv-text);
    outline: none;
}
.yv-url-group input::placeholder {
    color: var(--yv-text-muted);
}
.yv-url-group i,
.yv-url-group svg {
    width: 20px;
    height: 20px;
    color: var(--yv-text-muted);
    stroke: var(--yv-text-muted);
    flex-shrink: 0;
}
.yv-url-hint {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.83rem;
    color: var(--yv-text-muted);
}
.yv-url-hint i,
.yv-url-hint svg {
    width: 14px;
    height: 14px;
}

/* ============================================
   Buttons
   ============================================ */
.yv-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 16px !important;
    border-radius: 9px !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    border: 1px solid transparent !important;
    cursor: pointer;
    transition: background var(--yv-transition), border-color var(--yv-transition), color var(--yv-transition);
    background: var(--yv-bg-secondary) !important;
    color: var(--yv-text) !important;
    line-height: 1.2 !important;
    width: auto !important;
    min-width: 0 !important;
    text-transform: none !important;
    box-shadow: none !important;
}
.yv-btn i,
.yv-btn svg {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
}
.yv-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.yv-btn-primary {
    background: var(--yv-primary) !important;
    color: #ffffff !important;
}
.yv-btn-primary:hover:not(:disabled) {
    background: var(--yv-primary-dark) !important;
}
.yv-btn-secondary {
    background: var(--yv-bg-secondary) !important;
    border-color: var(--yv-border) !important;
    color: var(--yv-text) !important;
}
.yv-btn-secondary:hover:not(:disabled) {
    border-color: var(--yv-primary) !important;
    color: var(--yv-primary) !important;
}
.yv-btn-icon {
    padding: 9px !important;
    background: var(--yv-bg-secondary) !important;
    border-color: var(--yv-border) !important;
    color: var(--yv-text-muted) !important;
}
.yv-btn-icon:hover:not(:disabled) {
    border-color: var(--yv-primary) !important;
    color: var(--yv-primary) !important;
}
.yv-spin {
    animation: yv-spin 1s linear infinite;
}
@keyframes yv-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ============================================
   View options bar
   ============================================ */
.yv-view-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 12px 20px;
    background: var(--yv-bg-secondary);
    border: 1px solid var(--yv-border);
    border-bottom: none;
    border-radius: 10px 10px 0 0;
}
.yv-view-toggle {
    display: flex;
    gap: 4px;
    background: var(--yv-bg-elevated);
    border: 1px solid var(--yv-border);
    border-radius: 9px;
    padding: 4px;
}
.yv-view-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 15px !important;
    border: none !important;
    border-radius: 6px !important;
    background: transparent !important;
    color: var(--yv-text-muted) !important;
    font-size: 0.86rem !important;
    font-weight: 600 !important;
    cursor: pointer;
    transition: background var(--yv-transition), color var(--yv-transition);
    text-transform: none !important;
    box-shadow: none !important;
    line-height: 1.2 !important;
    width: auto !important;
    min-width: 0 !important;
}
.yv-view-btn:hover {
    color: var(--yv-text) !important;
    background: var(--yv-bg-tertiary) !important;
}
.yv-view-btn.active {
    background: var(--yv-primary) !important;
    color: #ffffff !important;
}
.yv-view-btn i,
.yv-view-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
.yv-view-actions {
    display: flex;
    gap: 8px;
}

/* ============================================
   Results
   ============================================ */
.yv-results {
    border: 1px solid var(--yv-border);
    border-radius: 0 0 10px 10px;
    overflow: hidden;
    margin-bottom: 4px;
}
.yv-file-info-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    padding: 12px 20px;
    background: var(--yv-bg-secondary);
    border-bottom: 1px solid var(--yv-border);
}
.yv-file-info-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.83rem;
    color: var(--yv-text-muted);
}
.yv-file-info-item i,
.yv-file-info-item svg {
    width: 15px;
    height: 15px;
    color: var(--yv-primary);
    stroke: var(--yv-primary);
}
.yv-file-info-item.status-valid {
    color: var(--yv-success);
    font-weight: 600;
}
.yv-file-info-item.status-valid i,
.yv-file-info-item.status-valid svg {
    color: var(--yv-success);
    stroke: var(--yv-success);
}
.yv-file-info-item.status-error {
    color: var(--yv-danger);
    font-weight: 600;
}
.yv-file-info-item.status-error i,
.yv-file-info-item.status-error svg {
    color: var(--yv-danger);
    stroke: var(--yv-danger);
}

/* Output */
.yv-output-container {
    max-height: 620px;
    overflow: auto;
    background: var(--yv-bg-elevated);
}
.yv-output-panel {
    padding: 20px 24px;
}
.yv-output-panel pre {
    margin: 0;
    font-family: 'SF Mono', Consolas, Monaco, 'Ubuntu Mono', monospace;
    font-size: 0.9rem;
    line-height: 1.7;
    white-space: pre-wrap;
    word-wrap: break-word;
    color: var(--yv-text);
}

/* Syntax highlighting */
.yaml-key    { color: var(--yv-syn-key); }
.yaml-string { color: var(--yv-syn-string); }
.yaml-number { color: var(--yv-syn-number); }
.yaml-bool   { color: var(--yv-syn-bool); }
.yaml-null   { color: var(--yv-syn-null); }
.yaml-comment{ color: var(--yv-syn-comment); font-style: italic; }
.yaml-item   { color: var(--yv-syn-item); }

/* ============================================
   Tree view
   ============================================ */
.yv-tree-node {
    margin-left: 20px;
    position: relative;
}
.yv-tree-node:first-child {
    margin-left: 0;
}
.yv-tree-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 3px 0;
    font-family: 'SF Mono', Consolas, Monaco, 'Ubuntu Mono', monospace;
    font-size: 0.88rem;
    line-height: 1.6;
}
.yv-tree-toggle {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--yv-text-muted);
    flex-shrink: 0;
    transition: transform var(--yv-transition);
}
.yv-tree-toggle:hover {
    color: var(--yv-primary);
}
.yv-tree-toggle.expanded {
    transform: rotate(90deg);
}
.yv-tree-toggle.empty {
    visibility: hidden;
}
.yv-tree-key {
    color: var(--yv-syn-key);
    font-weight: 600;
}
.yv-tree-colon {
    color: var(--yv-text-muted);
}
.yv-tree-value.string  { color: var(--yv-syn-string); }
.yv-tree-value.number  { color: var(--yv-syn-number); }
.yv-tree-value.boolean { color: var(--yv-syn-bool); }
.yv-tree-value.null    { color: var(--yv-syn-null); font-style: italic; }
.yv-tree-type {
    font-size: 0.68rem;
    color: var(--yv-text-muted);
    background: var(--yv-bg-secondary);
    border: 1px solid var(--yv-border);
    padding: 1px 7px;
    border-radius: 999px;
    margin-left: 6px;
}
.yv-tree-children {
    display: block;
}
.yv-tree-children.collapsed {
    display: none;
}

/* ============================================
   Error message
   ============================================ */
.yv-error {
    background: var(--yv-danger-light);
    border: 1px solid var(--yv-danger);
    border-radius: 10px;
    overflow: hidden;
    margin: 0 24px 20px;
}
.yv-error-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 18px;
    color: var(--yv-danger);
    font-weight: 700;
    font-size: 0.95rem;
}
.yv-error-header i,
.yv-error-header svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}
.yv-error-body {
    padding: 0 18px 16px;
    font-family: 'SF Mono', Consolas, Monaco, monospace;
    font-size: 0.82rem;
    color: var(--yv-text-secondary);
    white-space: pre-wrap;
    line-height: 1.6;
}
.yv-error-body a {
    color: var(--yv-primary);
    font-weight: 600;
}

/* ============================================
   Related tools box
   ============================================ */
.yv-related-box {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 24px 0;
    padding: 14px 18px;
    background: var(--yv-bg-elevated);
    border: 1px solid var(--yv-border);
    border-radius: 12px;
}
.yv-related-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--yv-text);
}
.yv-related-label i,
.yv-related-label svg {
    width: 16px;
    height: 16px;
    color: var(--yv-primary);
    stroke: var(--yv-primary);
}
.yv-related-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 999px;
    background: var(--yv-bg-secondary);
    border: 1px solid var(--yv-border);
    color: var(--yv-text-secondary);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color var(--yv-transition), color var(--yv-transition), background var(--yv-transition);
}
.yv-related-pill:hover {
    border-color: var(--yv-primary);
    color: var(--yv-primary);
    background: var(--yv-primary-light);
}
.yv-related-pill i,
.yv-related-pill svg {
    width: 15px;
    height: 15px;
}

/* ============================================
   Info cards
   ============================================ */
.yv-info-card {
    background: var(--yv-bg-elevated);
    border: 1px solid var(--yv-border);
    border-radius: 12px;
    padding: 28px 32px;
    margin-bottom: 24px;
}
.yv-info-card h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--yv-text);
    margin: 0 0 18px;
}
.yv-info-card h2 i,
.yv-info-card h2 svg {
    width: 22px;
    height: 22px;
    color: var(--yv-primary);
    stroke: var(--yv-primary);
    flex-shrink: 0;
}
.yv-info-card h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--yv-text);
    margin: 20px 0 8px;
}
.yv-info-card p {
    color: var(--yv-text-secondary);
    line-height: 1.7;
    margin: 0 0 12px;
    font-size: 0.95rem;
}
.yv-info-card a {
    color: var(--yv-primary);
    font-weight: 600;
    text-decoration: none;
}
.yv-info-card a:hover {
    text-decoration: underline;
}
.yv-info-card code {
    font-family: 'SF Mono', Consolas, Monaco, monospace;
    font-size: 0.85em;
    background: var(--yv-bg-secondary);
    border: 1px solid var(--yv-border);
    border-radius: 5px;
    padding: 1px 5px;
    color: var(--yv-text);
}

/* Steps */
.yv-steps {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.yv-step {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}
.yv-step-num {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--yv-primary);
    color: #ffffff;
    font-weight: 700;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.yv-step-content h3 {
    margin: 2px 0 4px;
    font-size: 1rem;
}
.yv-step-content p {
    margin: 0;
}

/* Features grid */
.yv-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
}
.yv-features > * {
    min-width: 0;
}
.yv-feature {
    background: var(--yv-bg-secondary);
    border: 1px solid var(--yv-border);
    border-radius: 10px;
    padding: 18px;
}
.yv-feature-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--yv-primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}
.yv-feature-icon i,
.yv-feature-icon svg {
    width: 20px;
    height: 20px;
    color: var(--yv-primary);
    stroke: var(--yv-primary);
}
.yv-feature h3 {
    margin: 0 0 6px;
    font-size: 0.98rem;
}
.yv-feature p {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.55;
}

/* YAML example block */
.yv-example {
    background: var(--yv-bg-canvas);
    border: 1px solid var(--yv-border);
    border-radius: 10px;
    overflow: hidden;
    margin-top: 8px;
}
.yv-example h4 {
    margin: 0;
    padding: 10px 16px;
    background: var(--yv-bg-secondary);
    border-bottom: 1px solid var(--yv-border);
    font-size: 0.78rem;
    color: var(--yv-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
}
.yv-example pre {
    margin: 0;
    padding: 16px;
    overflow-x: auto;
}
.yv-example code {
    font-family: 'SF Mono', Consolas, Monaco, monospace;
    font-size: 0.85rem;
    line-height: 1.7;
    background: none;
    border: none;
    padding: 0;
}

/* Tools grid */
.yv-tools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 14px;
}
.yv-tool-link-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 20px 14px;
    background: var(--yv-bg-secondary);
    border: 1px solid var(--yv-border);
    border-radius: 10px;
    text-decoration: none;
    color: var(--yv-text);
    transition: border-color var(--yv-transition), color var(--yv-transition), background var(--yv-transition);
}
.yv-tool-link-card:hover {
    border-color: var(--yv-primary);
    background: var(--yv-primary-light);
    color: var(--yv-primary);
}
.yv-tool-link-card i,
.yv-tool-link-card svg {
    width: 28px;
    height: 28px;
    color: var(--yv-primary);
    stroke: var(--yv-primary);
}
.yv-tool-link-card span {
    font-size: 0.85rem;
    font-weight: 600;
    text-align: center;
}

/* FAQ - uses .faq-item.open per global _footer.php handler */
.faq-item {
    border: 1px solid var(--yv-border);
    border-radius: 10px;
    margin-bottom: 10px;
    overflow: hidden;
    background: var(--yv-bg-secondary);
}
.faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100% !important;
    padding: 14px 18px !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer;
    font-size: 0.98rem !important;
    font-weight: 600 !important;
    color: var(--yv-text) !important;
    text-align: left;
    text-transform: none !important;
    box-shadow: none !important;
    min-width: 0 !important;
    line-height: 1.4 !important;
}
.faq-question:hover {
    color: var(--yv-primary) !important;
}
.faq-question i,
.faq-question svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    transition: transform var(--yv-transition);
}
.faq-item.open .faq-question i,
.faq-item.open .faq-question svg {
    transform: rotate(180deg);
}
.faq-answer {
    display: none;
    padding: 0 18px 16px;
}
.faq-item.open .faq-answer {
    display: block;
}
.faq-answer p {
    margin: 0;
    color: var(--yv-text-secondary);
    line-height: 1.7;
    font-size: 0.93rem;
}
.faq-answer code {
    font-family: 'SF Mono', Consolas, Monaco, monospace;
    font-size: 0.85em;
    background: var(--yv-bg-elevated);
    border: 1px solid var(--yv-border);
    border-radius: 5px;
    padding: 1px 5px;
}
.faq-answer a {
    color: var(--yv-primary);
    font-weight: 600;
}

/* ============================================
   Copy toast
   ============================================ */
.yv-toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: var(--yv-success);
    color: #ffffff;
    padding: 11px 22px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.88rem;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: var(--yv-shadow-lg);
    z-index: 9500;
    opacity: 0;
    transition: transform var(--yv-transition), opacity var(--yv-transition);
}
.yv-toast.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}
.yv-toast i,
.yv-toast svg {
    width: 18px;
    height: 18px;
}

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 768px) {
    .yv-input-section {
        padding: 18px;
    }
    .yv-view-options {
        padding: 10px 14px;
    }
    .yv-view-toggle {
        width: 100%;
        justify-content: center;
    }
    .yv-view-actions {
        width: 100%;
        justify-content: center;
    }
    .yv-info-card {
        padding: 20px 18px;
    }
    .yv-tools-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .yv-paste-actions .yv-btn {
        flex: 1 1 auto;
    }
}
@media (max-width: 480px) {
    .yv-tab-btn span {
        display: none;
    }
    .yv-output-container {
        max-height: 440px;
    }
    .yv-upload-area {
        padding: 32px 16px;
    }
}

/* ============================================
   Reduced motion
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}