*,:before,:after{box-sizing:border-box}:root{--sans:"Inter", system-ui, "Segoe UI", Roboto, sans-serif;--mono:ui-monospace, "Cascadia Code", Consolas, monospace;--bg:#f8f9fb;--surface:#fff;--surface-2:#f1f3f7;--border:#e2e5ec;--text:#4b5565;--text-muted:#8b95a5;--heading:#0f172a;--accent:#6366f1;--accent-light:#eef2ff;--accent-border:#c7d2fe;--green:#10b981;--green-light:#ecfdf5;--red:#ef4444;--red-light:#fef2f2;--red-border:#fecaca;--shadow-sm:0 1px 3px #0000000f, 0 1px 2px #0000000a;--shadow:0 4px 12px #00000014, 0 1px 3px #0000000a;--shadow-lg:0 20px 40px #00000024, 0 4px 12px #00000014;--radius:12px;--radius-sm:8px;--radius-xs:6px;font:15px/1.5 var(--sans);color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased}@media (prefers-color-scheme:dark){:root{--bg:#0d1117;--surface:#161b22;--surface-2:#1c2230;--border:#30363d;--text:#8b949e;--text-muted:#5a6475;--heading:#e6edf3;--accent:#818cf8;--accent-light:#1e2035;--accent-border:#3730a3;--green:#3fb950;--green-light:#0d2b1a;--red:#f85149;--red-light:#2d1117;--red-border:#6e1c1c;--shadow-sm:0 1px 3px #0000004d;--shadow:0 4px 12px #0006;--shadow-lg:0 20px 40px #0009}}body{margin:0}#root{flex-direction:column;min-height:100svh;display:flex}h1,h2,h3{color:var(--heading);margin:0;font-weight:600}p{margin:0}button{cursor:pointer;font-family:inherit}.app{flex-direction:column;min-height:100svh;display:flex}.app-header{background:var(--surface);border-bottom:1px solid var(--border);z-index:100;box-shadow:var(--shadow-sm);padding:24px 32px 20px;position:sticky;top:0}.header-inner{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;display:flex}.header-title{align-items:center;gap:14px;display:flex}.header-logo{background:var(--accent-light);border:1px solid var(--accent-border);border-radius:var(--radius-sm);width:44px;height:44px;color:var(--accent);flex-shrink:0;justify-content:center;align-items:center;display:flex}.header-logo svg{width:22px;height:22px}.header-title h1{letter-spacing:-.3px;font-size:20px;font-weight:700;line-height:1.2}.header-sub{color:var(--text-muted);font-size:12px;font-family:var(--mono);margin-top:2px}.header-stats{gap:10px;display:flex}.stat-pill{background:var(--surface-2);border:1px solid var(--border);border-radius:20px;align-items:baseline;gap:5px;padding:6px 14px;display:flex}.stat-num{color:var(--accent);font-size:18px;font-weight:700;line-height:1}.stat-label{color:var(--text-muted);font-size:12px;font-weight:500}.search-wrap{align-items:center;gap:12px;margin-top:16px;display:flex}.search-bar{flex:1;max-width:480px;position:relative}.search-icon{width:16px;height:16px;color:var(--text-muted);pointer-events:none;position:absolute;top:50%;left:12px;transform:translateY(-50%)}.search-bar input{border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface-2);width:100%;color:var(--heading);outline:none;padding:9px 36px 9px 38px;font-size:14px;transition:border-color .15s,box-shadow .15s}.search-bar input::placeholder{color:var(--text-muted)}.search-bar input:focus{border-color:var(--accent);background:var(--surface);box-shadow:0 0 0 3px #6366f126}.search-clear{color:var(--text-muted);background:0 0;border:none;border-radius:4px;padding:2px 4px;font-size:12px;line-height:1;position:absolute;top:50%;right:10px;transform:translateY(-50%)}.search-clear:hover{color:var(--heading);background:var(--surface-2)}.search-result-count{color:var(--text-muted);white-space:nowrap;font-size:13px}.app-main{flex:1;padding:28px 32px 48px}.state-center{color:var(--text-muted);flex-direction:column;justify-content:center;align-items:center;gap:14px;padding:80px 20px;display:flex}.spinner{border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;width:36px;height:36px;animation:.7s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.empty-text{color:var(--text-muted);font-size:15px}.error-box{background:var(--red-light);border:1px solid var(--red-border);border-radius:var(--radius-sm);color:var(--red);text-align:left;align-items:flex-start;gap:12px;max-width:480px;padding:16px 20px;display:flex}.error-box svg{flex-shrink:0;width:20px;height:20px;margin-top:2px}.error-box strong{color:var(--red);font-size:14px;font-weight:600;display:block}.error-box p{opacity:.85;margin-top:2px;font-size:13px}.optins-list{flex-direction:column;gap:10px;max-width:900px;margin:0 auto;display:flex}.optin-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);transition:border-color .15s,box-shadow .15s,opacity .2s}.optin-card:hover{border-color:var(--accent-border);box-shadow:var(--shadow)}.optin-card--deleting{opacity:.5;pointer-events:none}.optin-card-header{justify-content:space-between;align-items:center;gap:12px;padding:16px 16px 16px 4px;display:flex}.optin-expand-btn{border-radius:var(--radius-xs);text-align:left;background:0 0;border:none;flex:1;align-items:center;gap:10px;min-width:0;margin:0 10px;padding:4px 8px;transition:background .12s;display:flex}.optin-expand-btn:hover{background:var(--surface-2)}.expand-chevron{width:22px;height:22px;color:var(--text-muted);flex-shrink:0;justify-content:center;align-items:center;transition:transform .2s;display:flex}.expand-chevron svg{width:16px;height:16px}.expand-chevron.expanded{transform:rotate(180deg)}.optin-title-block{flex-direction:column;gap:2px;min-width:0;display:flex}.optin-name{color:var(--heading);white-space:nowrap;text-overflow:ellipsis;font-size:14px;font-weight:600;overflow:hidden}.optin-key-raw{font-size:11px;font-family:var(--mono);color:var(--text-muted);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.optin-meta{flex-shrink:0;align-items:center;gap:8px;display:flex}.meta-badge{color:var(--text-muted);background:var(--surface-2);border:1px solid var(--border);white-space:nowrap;border-radius:20px;align-items:center;gap:5px;padding:4px 10px;font-size:12px;font-weight:500;display:inline-flex}.meta-badge svg{flex-shrink:0;width:12px;height:12px}.btn-delete{color:var(--red);background:var(--red-light);border:1px solid var(--red-border);border-radius:var(--radius-xs);white-space:nowrap;align-items:center;gap:6px;padding:6px 12px;font-size:13px;font-weight:500;transition:background .15s,border-color .15s,color .15s;display:inline-flex}.btn-delete svg{flex-shrink:0;width:14px;height:14px}.btn-delete:hover:not(:disabled){background:var(--red);color:#fff;border-color:var(--red)}.btn-delete:disabled{opacity:.6;cursor:not-allowed}.spinner-sm{border:2px solid #ef444440;border-top-color:var(--red);border-radius:50%;flex-shrink:0;width:14px;height:14px;animation:.6s linear infinite spin;display:inline-block}.optin-dates{border-top:1px solid var(--border);border-radius:0 0 var(--radius) var(--radius);background:var(--bg);overflow:hidden}.date-row{border-bottom:1px solid var(--border)}.date-row:last-child{border-bottom:none}.date-row-header{cursor:pointer;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;transition:background .12s;display:flex}.date-row-header:hover{background:var(--surface-2)}.date-row-left{align-items:center;gap:10px;min-width:0;display:flex}.date-label{font-size:13px;font-weight:600;font-family:var(--mono);color:var(--heading)}.date-count{color:var(--accent);background:var(--accent-light);border:1px solid var(--accent-border);border-radius:20px;padding:2px 8px;font-size:11px;font-weight:500}.action-menu{flex-shrink:0;position:relative}.action-menu-trigger{color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-xs);white-space:nowrap;cursor:pointer;align-items:center;gap:6px;padding:6px 12px;font-size:13px;font-weight:500;transition:background .12s,border-color .12s,color .12s;display:inline-flex}.action-menu-trigger:hover:not(:disabled),.action-menu-trigger--open{background:var(--surface-2);border-color:var(--accent-border);color:var(--heading)}.action-menu-trigger:disabled{opacity:.6;cursor:not-allowed}.action-menu-trigger>svg:first-child{flex-shrink:0;width:14px;height:14px}.action-chevron{width:13px;height:13px;color:var(--text-muted);transition:transform .18s}.action-chevron.open{transform:rotate(180deg)}.action-menu-dropdown{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);min-width:160px;box-shadow:var(--shadow);z-index:50;animation:.1s fadeIn;position:absolute;top:calc(100% + 6px);right:0;overflow:hidden}.action-menu-item{width:100%;color:var(--text);text-align:left;cursor:pointer;background:0 0;border:none;align-items:center;gap:9px;padding:9px 14px;font-size:13px;font-weight:500;transition:background .1s,color .1s;display:flex}.action-menu-item:hover{background:var(--surface-2);color:var(--heading)}.action-menu-item--danger{color:var(--red)}.action-menu-item--danger:hover{background:var(--red-light);color:var(--red)}.action-menu-dropdown--up{top:auto;bottom:calc(100% + 6px)}.action-menu-item-icon{flex-shrink:0;align-items:center;display:flex}.action-menu-item-icon svg{width:14px;height:14px}.btn-delete--sm{padding:5px 10px;font-size:12px}.player-grid{background:var(--surface);border-top:1px dashed var(--border);grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px;padding:14px 16px 16px;display:grid}.player-chip{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-xs);justify-content:space-between;align-items:center;gap:10px;padding:7px 12px;transition:border-color .12s;display:flex}.player-chip:hover{border-color:var(--accent-border)}.player-code{font-family:var(--mono);color:var(--heading);letter-spacing:.5px;font-size:12px;font-weight:600}.player-ts{color:var(--text-muted);white-space:nowrap;font-size:11px}.modal-overlay{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);z-index:200;background:#00000073;justify-content:center;align-items:center;padding:20px;animation:.15s fadeIn;display:flex;position:fixed;inset:0}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-lg);text-align:center;width:100%;max-width:420px;padding:32px 28px 28px;animation:.18s slideUp}@keyframes slideUp{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.modal-icon-wrap{background:var(--red-light);border:2px solid var(--red-border);width:52px;height:52px;color:var(--red);border-radius:50%;justify-content:center;align-items:center;margin-bottom:16px;display:inline-flex}.modal-icon-wrap svg{width:22px;height:22px}.modal h2{margin-bottom:8px;font-size:18px;font-weight:700}.modal-optin-name{font-family:var(--mono);color:var(--text-muted);background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-xs);word-break:break-all;margin:8px 0 14px;padding:6px 12px;font-size:12px}.modal-sub{color:var(--text-muted);margin-bottom:24px;font-size:13px;line-height:1.6}.modal-actions{justify-content:flex-end;gap:10px;display:flex}.btn-secondary{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-xs);color:var(--text);flex:1;padding:9px 16px;font-size:14px;font-weight:500;transition:background .12s}.btn-secondary:hover{background:var(--border)}.btn-danger{background:var(--red);border:1px solid var(--red);border-radius:var(--radius-xs);color:#fff;flex:1;justify-content:center;align-items:center;gap:6px;padding:9px 16px;font-size:14px;font-weight:600;transition:background .12s,box-shadow .12s;display:inline-flex}.btn-danger:hover{background:#dc2626;box-shadow:0 4px 12px #ef444459}.btn-danger svg{width:14px;height:14px}@media (width<=640px){.app-header{padding:16px 16px 14px}.app-main{padding:16px 12px 40px}.optin-card-header{flex-wrap:wrap;padding:12px 10px 12px 2px}.optin-meta{flex-wrap:wrap}.meta-badge{display:none}.player-grid{grid-template-columns:1fr}.modal{padding:24px 18px 20px}.modal-actions{flex-direction:column}}