/* ==============================================
   ONLINE CLIPBOARD PRO - STYLES v2.0.0
   ============================================== */

/* ---------- Variables / Themes ---------- */
.ocb-wrap {
    --ocb-primary: #2563eb;
    --ocb-primary-dark: #1d4ed8;
    --ocb-primary-light: #dbeafe;
    --ocb-success: #16a34a;
    --ocb-success-light: #dcfce7;
    --ocb-danger: #dc2626;
    --ocb-danger-light: #fee2e2;
    --ocb-warning: #d97706;
    --ocb-warning-light: #fef3c7;
    --ocb-bg: #ffffff;
    --ocb-bg-alt: #f8fafc;
    --ocb-bg-card: #f1f5f9;
    --ocb-border: #e2e8f0;
    --ocb-border-focus: #2563eb;
    --ocb-text: #1e293b;
    --ocb-text-muted: #64748b;
    --ocb-text-light: #94a3b8;
    --ocb-radius: 12px;
    --ocb-radius-sm: 6px;
    --ocb-shadow: 0 4px 24px rgba(37,99,235,0.09);
    --ocb-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --ocb-font-size: 15px;
    --ocb-editor-height: 260px;
    --ocb-transition: 0.2s ease;
    --ocb-gradient: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
    --ocb-key-bg: linear-gradient(135deg, #0f172a 0%, #1e3a5f 100%);
}
.ocb-wrap[data-theme="forest"]  { --ocb-primary:#16a34a;--ocb-primary-dark:#15803d;--ocb-primary-light:#dcfce7;--ocb-gradient:linear-gradient(135deg,#16a34a 0%,#065f46 100%);--ocb-key-bg:linear-gradient(135deg,#052e16 0%,#14532d 100%);--ocb-border-focus:#16a34a; }
.ocb-wrap[data-theme="sunset"]  { --ocb-primary:#ea580c;--ocb-primary-dark:#c2410c;--ocb-primary-light:#ffedd5;--ocb-gradient:linear-gradient(135deg,#f97316 0%,#b45309 100%);--ocb-key-bg:linear-gradient(135deg,#431407 0%,#7c2d12 100%);--ocb-border-focus:#ea580c; }
.ocb-wrap[data-theme="purple"]  { --ocb-primary:#7c3aed;--ocb-primary-dark:#6d28d9;--ocb-primary-light:#ede9fe;--ocb-gradient:linear-gradient(135deg,#8b5cf6 0%,#4c1d95 100%);--ocb-key-bg:linear-gradient(135deg,#2e1065 0%,#4c1d95 100%);--ocb-border-focus:#7c3aed; }
.ocb-wrap[data-theme="dark"]    { --ocb-primary:#60a5fa;--ocb-primary-dark:#3b82f6;--ocb-primary-light:#1e3a5f;--ocb-bg:#0f172a;--ocb-bg-alt:#1e293b;--ocb-bg-card:#1e293b;--ocb-border:#334155;--ocb-border-focus:#60a5fa;--ocb-text:#f1f5f9;--ocb-text-muted:#94a3b8;--ocb-text-light:#64748b;--ocb-gradient:linear-gradient(135deg,#1e3a8a 0%,#0f172a 100%);--ocb-key-bg:linear-gradient(135deg,#000 0%,#1e293b 100%);--ocb-shadow:0 4px 24px rgba(0,0,0,0.4); }

/* ---------- Reset ---------- */
.ocb-wrap *, .ocb-wrap *::before, .ocb-wrap *::after { box-sizing:border-box; margin:0; padding:0; }

/* ---------- Wrap ---------- */
.ocb-wrap {
    font-family: var(--ocb-font);
    font-size: var(--ocb-font-size);
    color: var(--ocb-text);
    background: var(--ocb-bg);
    border-radius: var(--ocb-radius);
    border: 1px solid var(--ocb-border);
    box-shadow: var(--ocb-shadow);
    overflow: hidden;
    max-width: 900px;
    margin: 0 auto 32px;
    transition: background var(--ocb-transition), color var(--ocb-transition);
}

/* ---------- Header ---------- */
.ocb-header {
    background: var(--ocb-gradient);
    padding: 18px 22px;
    display: flex;
    align-items: center;
    gap: 14px;
    color: #fff;
    flex-wrap: wrap;
}
.ocb-header-icon { width:42px;height:42px;background:rgba(255,255,255,0.15);border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.ocb-header-icon svg { width:22px;height:22px;stroke:#fff; }
.ocb-header-text { flex:1; }
.ocb-title { font-size:1.25rem;font-weight:700;line-height:1.2;letter-spacing:-0.01em; }
.ocb-subtitle { font-size:0.8rem;opacity:0.85;margin-top:2px; }

/* Sync status */
.ocb-sync-status { display:flex;align-items:center;gap:7px;background:rgba(255,255,255,0.12);padding:6px 12px;border-radius:20px;font-size:0.78rem;font-weight:600;white-space:nowrap; }
.ocb-status-dot { width:8px;height:8px;border-radius:50%;background:#94a3b8;flex-shrink:0; }
.ocb-sync-status.synced .ocb-status-dot { background:#4ade80; }
.ocb-sync-status.syncing .ocb-status-dot { background:#facc15;animation:ocbPulse 1s infinite; }
.ocb-sync-status.error .ocb-status-dot { background:#f87171; }
@keyframes ocbPulse { 0%,100%{opacity:1} 50%{opacity:0.3} }

/* ---------- Key Banner ---------- */
.ocb-key-banner { background:var(--ocb-key-bg);padding:12px 22px; }
.ocb-key-banner-inner { display:flex;align-items:center;gap:14px;flex-wrap:wrap; }
.ocb-key-icon { font-size:1.3rem; }
.ocb-key-info { flex:1;min-width:140px; }
.ocb-key-title { font-size:0.72rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:rgba(255,255,255,0.5);margin-bottom:3px; }
.ocb-key-val { font-size:1.1rem;font-weight:800;color:#fff;letter-spacing:0.12em;font-family:monospace; }
.ocb-key-actions { display:flex;gap:8px;flex-wrap:wrap; }
.ocb-key-btn { display:inline-flex;align-items:center;gap:5px;padding:6px 12px;background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.2);border-radius:6px;font-size:0.78rem;font-weight:600;color:#fff;cursor:pointer;transition:all var(--ocb-transition);font-family:var(--ocb-font); }
.ocb-key-btn:hover { background:rgba(255,255,255,0.22); }
.ocb-key-btn-change { background:rgba(255,255,255,0.06); }

/* ---------- Key Screen ---------- */
.ocb-key-screen { padding:40px 24px; }
.ocb-key-screen-inner { max-width:480px;margin:0 auto;text-align:center; }
.ocb-key-screen-icon { font-size:3rem;margin-bottom:16px; }
.ocb-key-screen-title { font-size:1.4rem;font-weight:700;margin-bottom:10px; }
.ocb-key-screen-sub { font-size:0.88rem;color:var(--ocb-text-muted);line-height:1.6;margin-bottom:24px; }

.ocb-key-tabs { display:flex;gap:0;border:1px solid var(--ocb-border);border-radius:var(--ocb-radius-sm);overflow:hidden;margin-bottom:22px; }
.ocb-key-tab { flex:1;padding:10px;background:var(--ocb-bg-card);border:none;font-size:0.875rem;font-weight:600;color:var(--ocb-text-muted);cursor:pointer;transition:all var(--ocb-transition);font-family:var(--ocb-font); }
.ocb-key-tab.active { background:var(--ocb-primary);color:#fff; }
.ocb-key-tab-panel { display:none;text-align:left; }
.ocb-key-tab-panel.active { display:block; }

.ocb-key-generate-info { font-size:0.85rem;color:var(--ocb-text-muted);line-height:1.5;margin-bottom:16px; }

.ocb-generated-key-preview { font-size:1.5rem;font-weight:900;text-align:center;letter-spacing:0.15em;color:var(--ocb-primary);background:var(--ocb-primary-light);border:2px dashed var(--ocb-primary);border-radius:var(--ocb-radius-sm);padding:14px;margin-bottom:16px;font-family:monospace; }

.ocb-btn-full { width:100%;justify-content:center; }

.ocb-btn-text { display:block;margin-top:10px;text-align:center;background:none;border:none;color:var(--ocb-text-muted);font-size:0.8rem;cursor:pointer;font-family:var(--ocb-font);text-decoration:underline; }
.ocb-btn-text:hover { color:var(--ocb-primary); }

.ocb-key-input-label { display:block;font-size:0.82rem;font-weight:600;color:var(--ocb-text-muted);margin-bottom:8px;text-transform:uppercase;letter-spacing:0.05em; }
.ocb-key-input-wrap { display:flex;gap:8px;margin-bottom:10px; }
.ocb-key-input { flex:1;padding:10px 14px;border:2px solid var(--ocb-border);border-radius:var(--ocb-radius-sm);font-size:1rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;font-family:monospace;color:var(--ocb-text);background:var(--ocb-bg);transition:border-color var(--ocb-transition); }
.ocb-key-input:focus { outline:none;border-color:var(--ocb-border-focus);box-shadow:0 0 0 3px rgba(37,99,235,0.1); }

.ocb-key-error { font-size:0.82rem;color:var(--ocb-danger);margin-bottom:8px;min-height:18px; }
.ocb-key-hint { font-size:0.78rem;color:var(--ocb-text-light); }
.ocb-key-hint code { background:var(--ocb-bg-card);padding:2px 6px;border-radius:4px;font-size:0.82rem; }

/* ---------- Tabs ---------- */
.ocb-tabs { display:flex;background:var(--ocb-bg-alt);border-bottom:1px solid var(--ocb-border);overflow-x:auto;scrollbar-width:none; }
.ocb-tabs::-webkit-scrollbar { display:none; }
.ocb-tab { display:flex;align-items:center;gap:6px;padding:12px 16px;background:none;border:none;border-bottom:2px solid transparent;font-size:0.875rem;font-weight:600;color:var(--ocb-text-muted);cursor:pointer;white-space:nowrap;transition:all var(--ocb-transition);font-family:var(--ocb-font); }
.ocb-tab:hover { color:var(--ocb-text);background:var(--ocb-bg-card); }
.ocb-tab.active { color:var(--ocb-primary);border-bottom-color:var(--ocb-primary);background:var(--ocb-bg); }
.ocb-badge { display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;background:var(--ocb-primary-light);color:var(--ocb-primary);border-radius:20px;font-size:0.7rem;font-weight:700;line-height:1; }

/* ---------- Panels ---------- */
.ocb-panel { display:none;padding:18px 22px 22px; }
.ocb-panel.active { display:block; }

/* ---------- Form Elements ---------- */
.ocb-label-row { display:flex;gap:12px;margin-bottom:12px;flex-wrap:wrap; }
.ocb-field-group { display:flex;flex-direction:column;gap:5px;flex:1;min-width:180px; }
.ocb-category-group { max-width:175px;min-width:140px; }
.ocb-label { font-size:0.78rem;font-weight:700;color:var(--ocb-text-muted);text-transform:uppercase;letter-spacing:0.05em; }
.ocb-input, .ocb-select { padding:9px 12px;border:1px solid var(--ocb-border);border-radius:var(--ocb-radius-sm);background:var(--ocb-bg);color:var(--ocb-text);font-size:0.9rem;font-family:var(--ocb-font);transition:border-color var(--ocb-transition),box-shadow var(--ocb-transition);width:100%; }
.ocb-input:focus, .ocb-select:focus { outline:none;border-color:var(--ocb-border-focus);box-shadow:0 0 0 3px rgba(37,99,235,0.1); }
.ocb-select { appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:30px;cursor:pointer; }
.ocb-select-sm { padding:7px 28px 7px 10px;font-size:0.82rem; }

/* ---------- Toolbar ---------- */
.ocb-toolbar { display:flex;align-items:center;gap:6px;padding:7px 10px;background:var(--ocb-bg-card);border:1px solid var(--ocb-border);border-radius:var(--ocb-radius-sm);margin-bottom:10px;flex-wrap:wrap; }
.ocb-toolbar-left { display:flex;align-items:center;gap:4px;flex-wrap:wrap;flex:1; }
.ocb-toolbar-right { display:flex;gap:4px; }
.ocb-tool-btn { display:inline-flex;align-items:center;gap:4px;padding:5px 9px;background:var(--ocb-bg);border:1px solid var(--ocb-border);border-radius:5px;font-size:0.77rem;font-weight:600;color:var(--ocb-text-muted);cursor:pointer;transition:all var(--ocb-transition);font-family:var(--ocb-font);white-space:nowrap; }
.ocb-tool-btn:hover { background:var(--ocb-primary-light);color:var(--ocb-primary);border-color:var(--ocb-primary); }
.ocb-tool-btn.ocb-danger:hover { background:var(--ocb-danger-light);color:var(--ocb-danger);border-color:var(--ocb-danger); }

/* ---------- Editor ---------- */
.ocb-editor-wrap { position:relative;display:flex;border:1px solid var(--ocb-border);border-radius:var(--ocb-radius-sm);overflow:hidden;transition:border-color var(--ocb-transition),box-shadow var(--ocb-transition); }
.ocb-editor-wrap:focus-within { border-color:var(--ocb-border-focus);box-shadow:0 0 0 3px rgba(37,99,235,0.1); }
.ocb-line-numbers { width:40px;padding:12px 0;background:var(--ocb-bg-card);border-right:1px solid var(--ocb-border);font-family:monospace;font-size:0.73rem;color:var(--ocb-text-light);text-align:right;overflow:hidden;flex-shrink:0;line-height:1.6;user-select:none; }
.ocb-line-numbers span { display:block;padding-right:7px; }
.ocb-textarea { flex:1;padding:12px;height:var(--ocb-editor-height);border:none;background:var(--ocb-bg);color:var(--ocb-text);font-family:monospace;font-size:var(--ocb-font-size);line-height:1.6;resize:vertical;outline:none;min-height:100px;transition:background var(--ocb-transition); }
.ocb-wrap[data-wordwrap="off"] .ocb-textarea { white-space:nowrap;overflow-x:auto; }

/* ---------- Stats Bar ---------- */
.ocb-stats-bar { display:flex;align-items:center;gap:6px;margin-top:8px;flex-wrap:wrap; }
.ocb-stat { font-size:0.78rem;color:var(--ocb-text-muted); }
.ocb-stat span { font-weight:700;color:var(--ocb-primary); }
.ocb-stat-sep { color:var(--ocb-border);font-size:0.75rem; }
.ocb-read-time { background:var(--ocb-primary-light);color:var(--ocb-primary);padding:1px 8px;border-radius:20px;font-weight:700; }

/* ---------- Buttons ---------- */
.ocb-actions { display:flex;gap:10px;margin-top:16px;flex-wrap:wrap; }
.ocb-btn { display:inline-flex;align-items:center;gap:7px;padding:10px 18px;border-radius:var(--ocb-radius-sm);font-size:0.875rem;font-weight:700;cursor:pointer;border:none;transition:all var(--ocb-transition);font-family:var(--ocb-font);white-space:nowrap; }
.ocb-btn-primary { background:var(--ocb-gradient);color:#fff;box-shadow:0 2px 8px rgba(37,99,235,0.25); }
.ocb-btn-primary:hover { transform:translateY(-1px);box-shadow:0 4px 16px rgba(37,99,235,0.35); }
.ocb-btn-primary:active { transform:translateY(0); }
.ocb-btn-success { background:var(--ocb-success);color:#fff;box-shadow:0 2px 8px rgba(22,163,74,0.25); }
.ocb-btn-success:hover { background:#15803d;transform:translateY(-1px);box-shadow:0 4px 16px rgba(22,163,74,0.35); }
.ocb-btn-secondary { background:var(--ocb-bg-card);color:var(--ocb-text);border:1px solid var(--ocb-border); }
.ocb-btn-secondary:hover { background:var(--ocb-primary-light);color:var(--ocb-primary);border-color:var(--ocb-primary); }
.ocb-btn-sm { padding:7px 12px;font-size:0.8rem; }
.ocb-btn-danger-sm { display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:var(--ocb-radius-sm);font-size:0.8rem;font-weight:700;cursor:pointer;border:1px solid var(--ocb-border);background:var(--ocb-bg-card);color:var(--ocb-danger);transition:all var(--ocb-transition);font-family:var(--ocb-font); }
.ocb-btn-danger-sm:hover { background:var(--ocb-danger-light);border-color:var(--ocb-danger); }

/* ---------- Sync Row ---------- */
.ocb-sync-row { display:flex;align-items:center;gap:8px;margin-top:10px;font-size:0.82rem;color:var(--ocb-text-muted); }
.ocb-spinner { width:14px;height:14px;border:2px solid var(--ocb-primary-light);border-top-color:var(--ocb-primary);border-radius:50%;animation:ocbSpin 0.7s linear infinite;flex-shrink:0; }
@keyframes ocbSpin { to { transform:rotate(360deg); } }

/* ---------- Toast ---------- */
.ocb-toast { display:none;position:fixed;bottom:26px;right:26px;padding:11px 18px;border-radius:10px;background:#1e293b;color:#fff;font-size:0.875rem;font-weight:600;box-shadow:0 8px 30px rgba(0,0,0,0.25);z-index:99999;max-width:320px;animation:ocbSlideIn 0.3s ease; }
.ocb-toast.show { display:flex;align-items:center;gap:8px; }
.ocb-toast.success { background:#064e3b;border-left:3px solid #10b981; }
.ocb-toast.error   { background:#7f1d1d;border-left:3px solid #ef4444; }
.ocb-toast.info    { background:#1e3a5f;border-left:3px solid #60a5fa; }
@keyframes ocbSlideIn { from{transform:translateY(20px);opacity:0} to{transform:translateY(0);opacity:1} }

/* ---------- Saved / History ---------- */
.ocb-saved-header { display:flex;gap:10px;margin-bottom:10px;flex-wrap:wrap; }
.ocb-search-wrap { position:relative;flex:1;min-width:180px; }
.ocb-search-wrap svg { position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--ocb-text-light);pointer-events:none; }
.ocb-search-input { width:100%;padding:9px 13px 9px 34px;border:1px solid var(--ocb-border);border-radius:var(--ocb-radius-sm);background:var(--ocb-bg);color:var(--ocb-text);font-size:0.875rem;font-family:var(--ocb-font);transition:border-color var(--ocb-transition); }
.ocb-search-input:focus { outline:none;border-color:var(--ocb-border-focus);box-shadow:0 0 0 3px rgba(37,99,235,0.1); }
.ocb-filter-wrap { display:flex;gap:8px;align-items:center;flex-wrap:wrap; }
.ocb-sort-bar { display:flex;align-items:center;gap:6px;margin-bottom:14px;flex-wrap:wrap; }
.ocb-sort-label { font-size:0.78rem;color:var(--ocb-text-muted);font-weight:600; }
.ocb-sort-btn { padding:4px 10px;background:var(--ocb-bg-card);border:1px solid var(--ocb-border);border-radius:20px;font-size:0.75rem;font-weight:600;color:var(--ocb-text-muted);cursor:pointer;font-family:var(--ocb-font);transition:all var(--ocb-transition); }
.ocb-sort-btn.active,.ocb-sort-btn:hover { background:var(--ocb-primary);color:#fff;border-color:var(--ocb-primary); }
.ocb-saved-list { display:flex;flex-direction:column;gap:10px;max-height:500px;overflow-y:auto;padding-right:2px; }
.ocb-saved-list::-webkit-scrollbar { width:4px; }
.ocb-saved-list::-webkit-scrollbar-track { background:var(--ocb-bg-card);border-radius:3px; }
.ocb-saved-list::-webkit-scrollbar-thumb { background:var(--ocb-border);border-radius:3px; }

/* ---------- Clip Card ---------- */
.ocb-clip-card { background:var(--ocb-bg-alt);border:1px solid var(--ocb-border);border-radius:10px;padding:14px 15px;transition:all var(--ocb-transition);animation:ocbFadeIn 0.2s ease; }
.ocb-clip-card:hover { border-color:var(--ocb-primary);box-shadow:0 2px 12px rgba(37,99,235,0.08); }
@keyframes ocbFadeIn { from{opacity:0;transform:translateY(7px)} to{opacity:1;transform:translateY(0)} }
.ocb-clip-top { display:flex;align-items:flex-start;gap:10px;margin-bottom:7px; }
.ocb-clip-title { font-size:0.9rem;font-weight:700;flex:1;word-break:break-word; }
.ocb-clip-meta { display:flex;gap:6px;align-items:center;flex-wrap:wrap; }
.ocb-clip-tag { padding:2px 8px;border-radius:20px;font-size:0.68rem;font-weight:700;background:var(--ocb-primary-light);color:var(--ocb-primary);text-transform:capitalize; }
.ocb-clip-date { font-size:0.7rem;color:var(--ocb-text-light); }
.ocb-clip-preview { font-size:0.82rem;color:var(--ocb-text-muted);line-height:1.5;margin-bottom:10px;word-break:break-word;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden; }
.ocb-clip-footer { display:flex;gap:6px;flex-wrap:wrap;align-items:center; }
.ocb-clip-btn { display:inline-flex;align-items:center;gap:4px;padding:5px 10px;border-radius:5px;font-size:0.74rem;font-weight:600;cursor:pointer;border:1px solid var(--ocb-border);background:var(--ocb-bg);color:var(--ocb-text-muted);transition:all var(--ocb-transition);font-family:var(--ocb-font); }
.ocb-clip-btn:hover { background:var(--ocb-primary-light);color:var(--ocb-primary);border-color:var(--ocb-primary); }
.ocb-clip-btn.ocb-clip-delete:hover { background:var(--ocb-danger-light);color:var(--ocb-danger);border-color:var(--ocb-danger); }
.ocb-clip-size { margin-left:auto;font-size:0.7rem;color:var(--ocb-text-light); }

/* ---------- Empty State ---------- */
.ocb-empty-state { display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;text-align:center; }
.ocb-empty-icon { font-size:2.4rem;margin-bottom:12px;opacity:0.55; }
.ocb-empty-title { font-size:1rem;font-weight:700;color:var(--ocb-text-muted);margin-bottom:5px; }
.ocb-empty-sub { font-size:0.82rem;color:var(--ocb-text-light);max-width:260px; }

/* ---------- History ---------- */
.ocb-history-header { display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap; }
.ocb-history-info { font-size:0.82rem;color:var(--ocb-text-muted);flex:1; }

/* ---------- Settings ---------- */
.ocb-settings-grid { display:grid;grid-template-columns:1fr 1fr;gap:14px; }
.ocb-setting-full { grid-column:1 / -1; }
.ocb-setting-card { background:var(--ocb-bg-alt);border:1px solid var(--ocb-border);border-radius:10px;padding:15px; }
.ocb-setting-title { font-size:0.88rem;font-weight:700;margin-bottom:13px;padding-bottom:9px;border-bottom:1px solid var(--ocb-border); }
.ocb-setting-row { display:flex;flex-direction:column;gap:5px;margin-bottom:12px; }
.ocb-setting-row:last-child { margin-bottom:0; }
.ocb-setting-label { font-size:0.82rem;font-weight:700;color:var(--ocb-text-muted); }
.ocb-setting-hint { font-size:0.74rem;color:var(--ocb-text-light); }
.ocb-setting-toggle-row { display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--ocb-border); }
.ocb-setting-toggle-row:last-child { border-bottom:none; }
.ocb-setting-toggle-row > div { flex:1; }

/* Toggle */
.ocb-toggle { position:relative;display:inline-block;width:40px;height:22px;flex-shrink:0; }
.ocb-toggle input { display:none; }
.ocb-toggle-slider { position:absolute;inset:0;background:var(--ocb-border);border-radius:22px;cursor:pointer;transition:background var(--ocb-transition); }
.ocb-toggle-slider::before { content:'';position:absolute;width:16px;height:16px;left:3px;top:3px;background:#fff;border-radius:50%;transition:transform var(--ocb-transition);box-shadow:0 1px 3px rgba(0,0,0,0.2); }
.ocb-toggle input:checked + .ocb-toggle-slider { background:var(--ocb-primary); }
.ocb-toggle input:checked + .ocb-toggle-slider::before { transform:translateX(18px); }

/* Key management */
.ocb-key-manage-box { display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:14px;background:var(--ocb-bg-card);border:1px solid var(--ocb-border);border-radius:8px;padding:14px; }
.ocb-key-manage-info { flex:1;min-width:160px; }
.ocb-key-manage-label { font-size:0.75rem;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;color:var(--ocb-text-muted);margin-bottom:4px; }
.ocb-key-manage-val { font-size:1.05rem;font-weight:900;letter-spacing:0.12em;font-family:monospace;color:var(--ocb-primary); }
.ocb-key-manage-actions { display:flex;gap:8px;flex-wrap:wrap; }
.ocb-key-warning { display:flex;align-items:flex-start;gap:9px;background:var(--ocb-warning-light);border:1px solid #fde68a;border-radius:8px;padding:12px 14px;font-size:0.8rem;color:#92400e;line-height:1.5;margin-bottom:14px; }
.ocb-key-warning svg { flex-shrink:0;margin-top:2px; }

.ocb-data-actions { display:flex;gap:10px;flex-wrap:wrap; }

/* ---------- Loading overlay ---------- */
.ocb-loading { display:flex;align-items:center;justify-content:center;padding:40px;gap:12px;color:var(--ocb-text-muted);font-size:0.9rem; }

/* ---------- Responsive ---------- */
@media (max-width:640px) {
    .ocb-header { padding:14px 16px;gap:10px; }
    .ocb-title { font-size:1.05rem; }
    .ocb-sync-status { display:none; }
    .ocb-panel { padding:13px 14px 16px; }
    .ocb-tab { padding:10px 11px;font-size:0.78rem; }
    .ocb-tab svg { display:none; }
    .ocb-label-row { flex-direction:column; }
    .ocb-category-group { max-width:100%; }
    .ocb-actions { gap:7px; }
    .ocb-btn { padding:9px 13px;font-size:0.82rem; }
    .ocb-settings-grid { grid-template-columns:1fr; }
    .ocb-setting-full { grid-column:1; }
    .ocb-key-banner { padding:10px 14px; }
    .ocb-key-val { font-size:0.95rem; }
    .ocb-toolbar { padding:6px 8px; }
    .ocb-tool-btn { padding:4px 7px;font-size:0.72rem; }
    .ocb-toast { bottom:10px;right:10px;left:10px;max-width:100%; }
    .ocb-saved-header { flex-direction:column; }
    .ocb-filter-wrap { width:100%;justify-content:space-between; }
    .ocb-line-numbers { display:none; }
    .ocb-key-screen { padding:24px 14px; }
    .ocb-key-screen-icon { font-size:2.2rem; }
    .ocb-key-screen-title { font-size:1.15rem; }
    .ocb-key-input-wrap { flex-direction:column; }
    .ocb-key-manage-box { flex-direction:column;align-items:flex-start; }
    .ocb-data-actions { flex-direction:column; }
}
@media (max-width:400px) {
    .ocb-tab { padding:9px 8px;font-size:0.72rem; }
    .ocb-generated-key-preview { font-size:1.1rem;letter-spacing:0.1em; }
}