/* stock_index_html.css — 由 src/invest/stock_index_html.py 抽离
 * 自动生成于 2026-04-26。改样式直接编辑此文件即可。
 */

/* ── block 1 ── */
/* 个股追踪专用样式（基础样式来自 _tracker.css） */

/* Row 2: 下拉选择器 */
.tb-row-selects{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
@media(max-width:720px){.tb-row-selects{grid-template-columns:1fr 1fr}}
.tb-sel{position:relative}
.tb-sel-label{position:absolute;left:10px;top:-7px;padding:0 4px;font-size:9px;color:#475569;background:#04080e;pointer-events:none;letter-spacing:.5px}
.tb-sel select{width:100%;padding:8px 30px 8px 10px;border-radius:8px;border:1px solid #1e293b;background:#0f172a;color:#cbd5e1;font-size:12px;font-family:inherit;cursor:pointer;outline:none;appearance:none;transition:border-color .15s}
.tb-sel select:hover{border-color:#334155}
.tb-sel select:focus{border-color:#22d3ee66}
.tb-sel::after{content:'▼';position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:8px;color:#475569;pointer-events:none}

.stock-card{background:linear-gradient(165deg,#111827 0%,#0d1420 100%);border:1px solid #1e293b;border-radius:16px;padding:16px 18px 12px;text-decoration:none!important;color:#e2e8f0;transition:all .25s ease;display:block;cursor:pointer;position:relative;overflow:hidden}
.stock-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,#1e293b,transparent);opacity:0;transition:opacity .25s}
.stock-card:hover{border-color:#334155;transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.35)}
.stock-card:hover::before{opacity:1}
.stock-card *{text-decoration:none!important}

.sc-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:2px}
.sc-ticker{font-size:16px;font-weight:900;color:#f8fafc;font-family:var(--mono,monospace);display:flex;align-items:center;gap:5px}
.sc-del{background:none;border:none;color:#334155;font-size:14px;cursor:pointer;opacity:0;transition:all .2s;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;line-height:1;flex-shrink:0;padding:0}
.stock-card:hover .sc-del{opacity:1;color:#64748b}
.sc-del:hover{color:#ef4444!important;background:rgba(239,68,68,.12)}

.sc-name{font-size:10px;color:#64748b;margin-bottom:10px;display:flex;align-items:center;gap:5px;flex-wrap:wrap}

.sc-price{display:flex;align-items:baseline;gap:8px;margin-bottom:8px}
.sc-price-val{font-size:22px;font-weight:900;color:#f8fafc;font-family:var(--mono,monospace);letter-spacing:-.5px}
.sc-price-chg{font-size:11px;font-weight:800;font-family:var(--mono,monospace);padding:2px 7px;border-radius:5px}

.sc-score-bar{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.sc-score-num{font-size:12px;font-weight:800;font-family:var(--mono,monospace);min-width:20px}
.sc-bar-track{flex:1;height:3px;background:#1e293b;border-radius:2px;overflow:hidden}
.sc-bar-fill{height:100%;border-radius:2px;transition:width .3s ease}
.rec-tag{font-size:9px;font-weight:700;padding:2px 8px;border-radius:10px;font-family:var(--sans,system-ui);white-space:nowrap;letter-spacing:.3px;flex-shrink:0}
.rec-buy{color:#22c55e;background:#22c55e15;border:1px solid #22c55e33}
.rec-hold{color:#f59e0b;background:#f59e0b15;border:1px solid #f59e0b33}
.rec-wait{color:#94a3b8;background:#94a3b815;border:1px solid #94a3b833}
.rec-sell{color:#ef4444;background:#ef444415;border:1px solid #ef444433}

.type-tag{font-size:8px;font-weight:700;padding:1px 6px;border-radius:8px;font-family:var(--sans,system-ui);white-space:nowrap}
.type-stock{color:#38bdf8;background:#38bdf810;border:1px solid #38bdf822}
.type-etf{color:#a78bfa;background:#a78bfa10;border:1px solid #a78bfa22}
.type-fund{color:#f59e0b;background:#f59e0b10;border:1px solid #f59e0b22}
.type-crypto{color:#fb923c;background:#fb923c10;border:1px solid #fb923c22}
.type-index{color:#22d3ee;background:#22d3ee10;border:1px solid #22d3ee22}

.sc-summary{font-size:11px;color:#8496a8;line-height:1.5;margin-bottom:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.sc-info-row{display:flex;align-items:center;gap:6px;margin-bottom:8px;min-height:20px;justify-content:flex-end}
.sc-evt{font-size:10px;color:#64748b;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-evt-time{color:#22d3ee;font-weight:700;font-size:9px;margin-right:3px}
.sc-earn{font-size:9px;display:flex;align-items:center;gap:4px;flex-shrink:0;padding:2px 8px;border-radius:10px;border:1px solid rgba(245,158,11,.15);background:rgba(245,158,11,.04)}
.sc-earn-dot{width:4px;height:4px;border-radius:50%;background:#f59e0b;animation:epulse 2s ease-in-out infinite}
@keyframes epulse{0%,100%{opacity:.3}50%{opacity:1}}
.sc-earn-dt{color:#cbd5e1;font-weight:700;font-family:var(--mono,monospace)}
.sc-earn-cd{color:#f59e0b;font-weight:800;font-family:var(--mono,monospace);margin-left:2px}
.sc-earn-far .sc-earn-cd{color:#64748b}
.sc-earn-far{border-color:rgba(100,116,139,.12);background:rgba(100,116,139,.03)}

.sc-alert-row{display:flex;gap:8px;margin-bottom:8px;flex-wrap:wrap}
.sc-alert-tag{font-size:9px;padding:2px 8px;border-radius:10px;display:flex;align-items:center;gap:3px;font-family:var(--mono,monospace)}
.sc-alert-low{border:1px solid rgba(34,211,238,.2);background:rgba(34,211,238,.06);color:#22d3ee}
.sc-alert-high{border:1px solid rgba(249,115,22,.2);background:rgba(249,115,22,.06);color:#f97316}
.sc-alert-none{border:1px solid rgba(100,116,139,.1);background:transparent;color:#334155}
.sc-footer{display:flex;justify-content:space-between;align-items:center;padding-top:6px;border-top:1px solid rgba(255,255,255,.03)}
.sc-meta{font-size:9px;color:#334155}
.sc-time{font-size:9px;color:#475569;font-family:var(--mono,monospace)}

.sc-loading{color:#475569;padding:12px 0;font-size:11px;display:flex;align-items:center;gap:8px}
.stock-card[draggable]{cursor:grab}.stock-card[draggable]:active{cursor:grabbing}
.stock-card.dragging{opacity:.25;transform:scale(.95)}
.stock-card{transition:transform .25s ease,opacity .2s ease,box-shadow .25s ease}
.stock-card.shift-right{transform:translateX(8px)}
.stock-card.shift-left{transform:translateX(-8px)}

.load-more{padding:10px 32px;border-radius:10px;border:1px solid #1e293b;background:rgba(255,255,255,.02);color:#64748b;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .15s}
.load-more:hover{background:rgba(255,255,255,.05);border-color:#334155;color:#94a3b8}
.add-card{display:flex!important;flex-direction:column;align-items:center;justify-content:center;min-height:180px;border:2px dashed #1e293b!important;background:transparent!important;cursor:pointer;text-decoration:none!important}
.add-card:hover{border-color:#22d3ee55!important;background:rgba(34,211,238,.05)!important;transform:translateY(-2px);box-shadow:none!important}
.add-icon{font-size:48px;color:#334155;margin-bottom:8px;transition:color .2s;line-height:1}
.add-card:hover .add-icon{color:#22d3ee}
.add-text{font-size:14px;color:#475569;font-weight:600}

.empty{text-align:center;padding:60px 20px;color:#475569}
.empty-icon{font-size:56px;margin-bottom:16px}
.empty h2{font-size:18px;font-weight:600;color:#94a3b8;margin-bottom:8px}
.empty p{font-size:13px;margin-bottom:20px}

/* Search overlay */
.ov{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.7);z-index:200}
.ov.open{display:flex;justify-content:center;align-items:flex-start;padding-top:80px}
.sbox{background:#0d1219;border:1px solid #1e293b;border-radius:16px;width:90%;max-width:480px;overflow:hidden;animation:sd .2s ease}
@keyframes sd{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}
.sinput{display:flex;align-items:center;padding:14px 18px;gap:10px;border-bottom:1px solid #1e293b}
.sinput input{flex:1;background:none;border:none;color:#e2e8f0;font-size:15px;outline:none;font-family:inherit}
.sinput input::placeholder{color:#475569}
.sclose{background:none;border:none;color:#475569;font-size:18px;cursor:pointer;padding:2px 6px}
.slist{max-height:50vh;overflow-y:auto;padding:6px}
.si{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:8px;cursor:pointer;transition:background .1s}
.si:hover{background:#111a26}
.si-tk{font-weight:800;font-family:var(--mono,monospace);min-width:70px;font-size:13px}
.si-nm{font-size:12px;color:#7a8ba0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.si-ex{font-size:9px;color:#475569;background:#111a26;padding:2px 6px;border-radius:4px}
.si.added{opacity:.35;pointer-events:none}
.smsg{text-align:center;padding:30px;color:#475569;font-size:13px}
.spinner{width:14px;height:14px;border:2px solid #1e293b;border-top-color:#22d3ee;border-radius:50%;animation:spin .8s linear infinite;flex-shrink:0;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}

/* Confirm dialog */
.confirm-ov{display:flex;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.6);z-index:9999;align-items:center;justify-content:center;animation:cfIn .15s ease}
@keyframes cfIn{from{opacity:0}to{opacity:1}}
.confirm-box{background:#111827;border:1px solid #1e293b;border-radius:16px;padding:28px 24px 20px;width:90%;max-width:340px;text-align:center;animation:cfUp .2s ease}
@keyframes cfUp{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}
.confirm-box .cf-icon{font-size:36px;margin-bottom:12px}
.confirm-box .cf-title{font-size:15px;font-weight:700;color:#f1f5f9;margin-bottom:6px}
.confirm-box .cf-msg{font-size:12px;color:#64748b;margin-bottom:22px}
.confirm-box .cf-btns{display:flex;gap:10px;justify-content:center}
.confirm-box .cf-btn{flex:1;padding:10px 0;border-radius:10px;font-size:13px;font-weight:600;cursor:pointer;border:none;font-family:inherit;transition:all .15s}
.cf-btn-cancel{background:#1e293b;color:#94a3b8}
.cf-btn-cancel:hover{background:#283548}
.cf-btn-danger{background:rgba(239,68,68,.15);color:#ef4444;border:1px solid rgba(239,68,68,.25)!important}
.cf-btn-danger:hover{background:rgba(239,68,68,.25)}

@media(max-width:640px){
  .grid{grid-template-columns:1fr}
  .sc-del{opacity:1;color:#475569}
  .ov.open{padding-top:20px}
}
.local-search{margin-bottom:12px}
.local-search input:focus{border-color:#22d3ee}
.local-search input::placeholder{color:#334155}