/* =============================================================
   OPTIONS PAGE — STYLES
   Edit this file to change any options page appearance
   Never edit options.html for style changes
   ============================================================= */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { background: #0a0f1a; color: #e2e8f0; font-family: 'Segoe UI', sans-serif; min-height: 100vh; overflow-x: hidden; }

.opts-header { display:flex; align-items:center; justify-content:space-between; padding:12px 20px; background:#0f172a; border-bottom:1px solid #1e293b; position:sticky; top:0; z-index:100; }
.opts-logo { font-size:20px; font-weight:800; color:#00ff88; letter-spacing:0.05em; }
.opts-logo span { color:#00bfff; }
.opts-header-right { display:flex; align-items:center; gap:10px; }
.opts-back-btn { color:#94a3b8; font-size:12px; text-decoration:none; border:1px solid #334155; border-radius:5px; padding:4px 12px; transition:all 0.2s; }
.opts-back-btn:hover { color:#e2e8f0; border-color:#94a3b8; }
.opts-pnl-btn { color:#00ff88; font-size:12px; font-weight:700; text-decoration:none; border:1px solid #1e4a3a; border-radius:5px; padding:4px 12px; background:#0d2a1a; transition:all 0.2s; }
.opts-pnl-btn:hover { background:#1a3a2a; }

.opts-tab-row { display:flex; align-items:stretch; background:#0d1829; border-bottom:2px solid #1e293b; overflow-x:auto; min-height:52px; }
.opts-tab { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:120px; max-width:160px; flex:1; padding:6px 10px; cursor:pointer; border-right:1px solid #1e293b; transition:background 0.15s; user-select:none; }
.opts-tab:hover { background:#1e293b; }
.opts-tab.active { background:#1e293b; border-bottom:2px solid #00bfff; margin-bottom:-2px; }
.opts-tab-name { font-size:12px; font-weight:700; color:#94a3b8; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:130px; }
.opts-tab.active .opts-tab-name { color:#00bfff; }
.opts-tab-count { font-size:10px; color:#475569; margin-top:2px; }
.opts-tab-name-input { background:transparent; border:none; border-bottom:1px solid #00bfff; color:#00bfff; font-size:12px; font-weight:700; width:100px; text-align:center; outline:none; }
.opts-tab-add { min-width:44px; max-width:44px; display:flex; align-items:center; justify-content:center; color:#334155; font-size:20px; cursor:pointer; transition:color 0.15s; border-right:1px solid #1e293b; }
.opts-tab-add:hover { color:#00bfff; background:#1e293b; }

.opts-ctx-menu { position:fixed; background:#0f172a; border:1px solid #334155; border-radius:8px; padding:6px 0; z-index:9999; min-width:180px; box-shadow:0 8px 32px rgba(0,0,0,0.6); display:none; }
.opts-ctx-menu.open { display:block; }
.opts-ctx-item { padding:8px 16px; font-size:12px; color:#94a3b8; cursor:pointer; display:flex; align-items:center; gap:8px; }
.opts-ctx-item:hover { background:#1e293b; color:#e2e8f0; }
.opts-ctx-item.danger { color:#ff6655; }
.opts-ctx-item.danger:hover { background:#2a0808; }
.opts-ctx-divider { border-top:1px solid #1e293b; margin:4px 0; }

.opts-watchlist { padding:6px 20px; background:#0a0f1a; border-bottom:1px solid #1e293b; display:flex; align-items:center; gap:8px; flex-wrap:wrap; min-height:34px; }
.opts-watchlist-label { font-size:10px; color:#475569; font-weight:700; text-transform:uppercase; }
.opts-watchlist-chip { background:#1e293b; color:#00ff88; border:1px solid #1e4a3a; border-radius:4px; padding:2px 8px; font-size:11px; font-weight:700; cursor:pointer; transition:all 0.15s; }
.opts-watchlist-chip:hover { background:#dc2626; color:#fff; border-color:#dc2626; }
.opts-watchlist-empty { font-size:11px; color:#334155; font-style:italic; }

.opts-side-panel { position:fixed; left:-440px; top:0; width:440px; height:100vh; background:#0f172a; border-right:1px solid #334155; z-index:500; transition:left 0.3s cubic-bezier(0.4,0,0.2,1); overflow-y:auto; box-shadow:4px 0 32px rgba(0,0,0,0.5); }
.opts-side-panel.open { left:0; }
.opts-side-panel-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.4); z-index:499; display:none; }
.opts-side-panel-overlay.open { display:block; }
.opts-side-panel-header { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid #1e293b; position:sticky; top:0; background:#0f172a; z-index:1; }
.opts-side-panel-title { font-size:14px; font-weight:800; color:#e2e8f0; }
.opts-side-panel-close { background:none; border:none; color:#64748b; font-size:20px; cursor:pointer; padding:0 4px; }
.opts-side-panel-close:hover { color:#e2e8f0; }
.opts-side-panel-body { padding:20px; }

.opts-strat-list { display:flex; flex-direction:column; gap:8px; margin-bottom:24px; }
.opts-strat-nav-item { display:flex; align-items:center; justify-content:space-between; padding:12px 14px; background:#1e293b; border:1px solid #334155; border-radius:8px; cursor:pointer; transition:all 0.15s; }
.opts-strat-nav-item:hover { background:#334155; border-color:#475569; }
.opts-strat-nav-name { font-size:13px; font-weight:700; color:#e2e8f0; }
.opts-strat-nav-author { font-size:10px; color:#64748b; margin-top:2px; }
.opts-strat-nav-badge { font-size:9px; font-weight:700; padding:2px 7px; border-radius:10px; }
.badge-income { background:#1a3a1a; color:#00ff88; border:1px solid #1e4a3a; }
.badge-neutral { background:#1a2a3a; color:#00bfff; border:1px solid #1e3a4a; }

.opts-strat-detail { display:none; }
.opts-strat-detail.open { display:block; }
.opts-detail-section { margin-bottom:16px; }
.opts-detail-title { font-size:10px; font-weight:700; color:#475569; text-transform:uppercase; letter-spacing:0.08em; margin-bottom:8px; padding-bottom:4px; border-bottom:1px solid #1e293b; }
.opts-detail-rule { font-size:11px; color:#94a3b8; margin-bottom:5px; padding-left:10px; border-left:2px solid #1e293b; line-height:1.6; }
.opts-detail-rule strong { color:#e2e8f0; }
.opts-detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:8px; }
.opts-detail-box { background:#1e293b; border:1px solid #334155; border-radius:6px; padding:8px 10px; }
.opts-detail-box-label { font-size:9px; color:#475569; text-transform:uppercase; font-weight:700; margin-bottom:3px; }
.opts-detail-box-val { font-size:11px; color:#e2e8f0; font-weight:600; }
.opts-guardrail { font-size:11px; color:#ff6655; margin-bottom:4px; padding-left:10px; }
.opts-guardrail::before { content:"❌ "; }
.opts-back-to-list { background:none; border:none; color:#64748b; font-size:11px; cursor:pointer; padding:0 0 12px; display:flex; align-items:center; gap:4px; }
.opts-back-to-list:hover { color:#94a3b8; }

.opts-main { padding:20px; }
.opts-section-title { font-size:11px; font-weight:700; color:#475569; letter-spacing:0.1em; text-transform:uppercase; margin-bottom:14px; }

.opts-modal-bg { position:fixed; inset:0; background:rgba(0,0,0,0.7); z-index:1000; display:none; align-items:center; justify-content:center; }
.opts-modal-bg.open { display:flex; }
.opts-modal { background:#0f172a; border:1px solid #334155; border-radius:12px; padding:24px; width:480px; max-width:95vw; max-height:80vh; overflow-y:auto; }
.opts-modal h2 { font-size:16px; font-weight:800; color:#e2e8f0; margin-bottom:6px; }
.opts-modal-sub { font-size:12px; color:#64748b; margin-bottom:16px; }
.opts-modal-input { width:100%; background:#1e293b; border:1px solid #334155; border-radius:6px; padding:10px 14px; color:#fff; font-size:14px; outline:none; margin-bottom:12px; display:block; }
.opts-modal-input:focus { border-color:#00bfff; }
.opts-ticker-grid { display:flex; flex-wrap:wrap; gap:6px; max-height:200px; overflow-y:auto; margin-bottom:16px; padding:4px 0; }
.opts-ticker-chip { background:#1e293b; color:#e2e8f0; border:1px solid #334155; border-radius:4px; padding:3px 10px; font-size:11px; font-weight:700; cursor:pointer; transition:all 0.15s; }
.opts-ticker-chip:hover { background:#dc2626; color:#fff; border-color:#dc2626; }
.opts-btn-row { display:flex; gap:8px; }
.opts-btn { flex:1; padding:9px; border-radius:6px; font-size:12px; font-weight:700; cursor:pointer; border:none; transition:all 0.2s; }
.opts-btn-primary { background:linear-gradient(135deg,#0891b2,#0e7490); color:#fff; }
.opts-btn-primary:hover { background:linear-gradient(135deg,#0e7490,#155e75); }
.opts-btn-outline { background:transparent; color:#94a3b8; border:1px solid #334155 !important; }
.opts-btn-outline:hover { background:#1e293b; color:#e2e8f0; }
.opts-btn-danger { background:#7f1d1d; color:#fca5a5; }
.opts-btn-danger:hover { background:#dc2626; color:#fff; }