/* Extracted from ai.html */

    .voice-engine-row { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--color-border); }
    .voice-engine-row:last-child { border-bottom: none; }
    .voice-engine-row .toggle-switch { width: 40px; height: 22px; background: var(--color-border); border-radius: 11px; position: relative; cursor: pointer; flex-shrink: 0; }
    .voice-engine-row .toggle-switch.on { background: var(--color-primary); }
    .voice-engine-row .toggle-switch::after { content: ''; position: absolute; width: 18px; height: 18px; background: #fff; border-radius: 50%; top: 2px; left: 2px; transition: transform 0.15s; }
    .voice-engine-row .toggle-switch.on::after { transform: translateX(18px); }
    .voice-engine-info h4 { margin: 0; font-size: 0.875rem; }
    .voice-engine-info p { margin: 2px 0 0 0; font-size: 0.75rem; color: var(--color-text-muted); }
    .voice-engine-tag { font-size: 0.75rem; font-weight: 500; padding: 2px 8px; border-radius: 4px; background: #e8f0fa; color: #5b8db8; margin-left: 8px; vertical-align: middle; }
    .voice-engine-tag--fallback { background: #fdf6e3; color: #b8956a; }

    .command-row { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--color-border); align-items: flex-start; }
    .command-row:last-child { border-bottom: none; }
    .command-row .form-control { padding: 6px 10px; font-size: 0.8125rem; }
    .command-row-info { flex: 1; min-width: 0; }
    .command-phrase { font-family: monospace; font-size: 0.8125rem; font-weight: 600; color: var(--color-text-primary); display: block; }
    .command-action { font-size: 0.75rem; color: var(--color-text-muted); display: block; margin-top: 2px; }
    .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 4px; background: transparent; border: none; color: var(--color-text-muted); cursor: pointer; transition: background 0.15s, color 0.15s; }
    .icon-btn:hover { background: #fde8e8; color: #b86a6a; }

    .prompt-card textarea { width: 100%; min-height: 120px; resize: vertical; font-family: monospace; font-size: 0.8125rem; line-height: 1.5; }
    .prompt-meta { display: flex; gap: 16px; font-size: 0.75rem; color: var(--color-text-muted); margin-top: 8px; }

    .rule-row { display: flex; align-items: flex-start; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--color-border); }
    .rule-row:last-child { border-bottom: none; }
    .rule-info { flex: 1; }
    .rule-info h4 { margin: 0; font-size: 0.875rem; }
    .rule-info .rule-desc { margin: 4px 0 0 0; font-size: 0.75rem; color: var(--color-text-muted); }
    .rule-info .rule-trigger { margin-top: 6px; font-size: 0.75rem; }
    .rule-info .rule-trigger strong { color: var(--color-text-primary); }
    .rule-actions { display: flex; gap: 6px; flex-shrink: 0; }

    .usage-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
    .usage-stat { padding: 14px; border: 1px solid var(--color-border); border-radius: 4px; }
    .usage-stat-value { font-size: 1.5rem; font-weight: 600; color: var(--color-text-primary); }
    .usage-stat-label { font-size: 0.75rem; color: var(--color-text-muted); margin-top: 2px; }
    .usage-stat-trend { font-size: 0.75rem; margin-top: 6px; }
    .usage-stat-trend--up { color: var(--color-success); }
    .usage-stat-trend--neutral { color: var(--color-text-muted); }

    .add-row-btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 4px; background: var(--color-primary); color: #fff; text-decoration: none; flex-shrink: 0; }
    .add-row-btn:hover { background: #fff; color: var(--color-primary); box-shadow: inset 0 0 0 1px var(--color-primary); }
    .add-row-btn:hover svg { stroke: var(--color-primary); }