.sp { --sp-card: var(--bg-card, var(--tw-surface, #14141A)); --sp-card2: var(--bg-secondary, var(--tw-bg, #101016)); --sp-border: var(--border-color, var(--tw-border, #2A2A35));
      --sp-text: var(--text-primary, var(--tw-text, #F5F6FA)); --sp-sub: var(--text-secondary, var(--tw-text-secondary, #A0A0B0)); --sp-muted: var(--text-muted, var(--tw-text-muted, #7C7F91));
      --sp-primary: var(--primary, var(--tw-blue, #3B82FF)); --sp-green: var(--green, var(--tw-green, #48FF91)); --sp-hover: var(--bg-hover, rgba(255,255,255,.05));
      --sp-shadow: var(--shadow-card, var(--tw-shadow, 0 6px 28px rgba(0,0,0,.25))); --sp-r: 18px; margin: 0 0 2.5rem; font-variant-numeric: tabular-nums; }
[data-theme="light"] .sp { --sp-green: #00A86B; }
.sp * { box-sizing: border-box; }
.sp-head { display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1.25rem; }
.sp-head h2 { margin:0; font-size:1.35rem; font-weight:800; letter-spacing:-.02em; color: var(--sp-text); display:flex; align-items:center; gap:.55rem; }
.sp-head h2 i { color: var(--sp-primary); }
.sp-head p { margin:.3rem 0 0; color: var(--sp-sub); font-size:.88rem; max-width:620px; }
.sp-controls { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.sp-seg { display:inline-flex; background: var(--sp-card); border:1px solid var(--sp-border); border-radius:12px; padding:3px; gap:2px; }
.sp-seg button { border:none; background:transparent; color: var(--sp-sub); font-weight:700; font-size:.76rem; padding:.42rem .8rem; border-radius:9px; cursor:pointer; transition: all .18s; white-space:nowrap; }
.sp-seg button:hover { color: var(--sp-text); background: var(--sp-hover); }
.sp-seg button.on { background: var(--sp-primary); color:#fff; box-shadow: 0 4px 14px rgba(59,130,255,.3); }
.sp-badge { display:inline-flex; align-items:center; gap:.35rem; padding:.3rem .75rem; border-radius:50px; font-size:.7rem; font-weight:700; background: var(--sp-card); border:1px solid var(--sp-border); color: var(--sp-sub); }
.sp-badge i { color: var(--sp-green); }
.sp-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap:1.1rem; }
.sp-card { --ac: #3B82FF; position:relative; background: var(--sp-card); border:1px solid var(--sp-border); border-radius: var(--sp-r); padding:1.25rem 1.25rem 1.1rem; box-shadow: var(--sp-shadow); transition: transform .22s, border-color .22s, box-shadow .22s; overflow:hidden; display:flex; flex-direction:column; gap:.9rem; }
.sp-card::before { content:''; position:absolute; inset:0 0 auto 0; height:3px; background: linear-gradient(90deg, var(--ac), transparent 85%); opacity:.9; }
.sp-card::after { content:''; position:absolute; top:-70px; right:-70px; width:190px; height:190px; border-radius:50%; background: radial-gradient(circle, color-mix(in srgb, var(--ac) 22%, transparent), transparent 70%); pointer-events:none; }
.sp-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--ac) 55%, var(--sp-border)); box-shadow: 0 16px 44px color-mix(in srgb, var(--ac) 18%, transparent); }
.sp-card.featured { border-color: color-mix(in srgb, var(--ac) 45%, var(--sp-border)); }
.sp-card.featured { padding-top: 2.15rem; }
.sp-ribbon { position:absolute; top:12px; right:14px; display:inline-flex; align-items:center; gap:.3rem; background: linear-gradient(135deg, var(--ac), color-mix(in srgb, var(--ac) 60%, #fff)); color:#fff; font-size:.58rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; padding:.22rem .65rem; border-radius:20px; box-shadow: 0 4px 12px color-mix(in srgb, var(--ac) 40%, transparent); z-index:2; }
.sp-ribbon::before { content:'★'; font-size:.65rem; }
.sp-top { display:flex; align-items:center; gap:.85rem; position:relative; z-index:1; }
.sp-logo { width:50px; height:50px; border-radius:16px; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:.78rem; letter-spacing:-.02em; color:#fff; background: linear-gradient(145deg, var(--ac), color-mix(in srgb, var(--ac) 55%, #000)); box-shadow: 0 8px 20px color-mix(in srgb, var(--ac) 35%, transparent); flex-shrink:0; }
.sp-logo.long { font-size:.62rem; }
.sp-logo { overflow:hidden; }
.sp-logo img { width:100%; height:100%; object-fit:cover; display:block; }
.sp-table .asset .dot { overflow:hidden; }
.sp-table .asset .dot img { width:100%; height:100%; object-fit:cover; display:block; }
.sp-name { font-weight:800; font-size:1.05rem; color: var(--sp-text); line-height:1.15; }
.sp-sym { font-size:.72rem; color: var(--sp-muted); font-weight:600; letter-spacing:.04em; }
.sp-apy { margin-left:auto; text-align:right; }
.sp-apy .v { font-size:1.75rem; font-weight:800; letter-spacing:-.04em; color: var(--sp-green); line-height:1; transition: transform .2s; }
.sp-apy .v.bump { transform: scale(1.08); }
.sp-apy .l { font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color: var(--sp-muted); }
.sp-desc { font-size:.78rem; color: var(--sp-sub); line-height:1.5; margin:-.2rem 0 0; min-height:2.35em; position:relative; z-index:1; }
.sp-tabs { display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:4px; background: var(--sp-card2); border:1px solid var(--sp-border); border-radius:12px; padding:4px; }
.sp-tab { border:none; background:transparent; border-radius:9px; padding:.45rem .2rem; cursor:pointer; color: var(--sp-sub); transition: all .18s; display:flex; flex-direction:column; align-items:center; gap:1px; }
.sp-tab b { font-size:.8rem; font-weight:800; }
.sp-tab small { font-size:.6rem; font-weight:600; opacity:.85; }
.sp-tab:hover { background: var(--sp-hover); color: var(--sp-text); }
.sp-tab.on { background: var(--ac); color:#fff; box-shadow: 0 6px 16px color-mix(in srgb, var(--ac) 40%, transparent); }
.sp-tab.on small { opacity:.95; }
.sp-facts { display:grid; grid-template-columns: repeat(4, 1fr); gap:.4rem; }
.sp-fact { background: var(--sp-card2); border:1px solid var(--sp-border); border-radius:11px; padding:.5rem .55rem; text-align:center; }
.sp-fact .k { font-size:.58rem; text-transform:uppercase; letter-spacing:.08em; color: var(--sp-muted); font-weight:700; }
.sp-fact .v { font-size:.84rem; font-weight:700; color: var(--sp-text); margin-top:.1rem; white-space:nowrap; }
.sp-fact .v.g { color: var(--sp-green); }
.sp-calc { background: linear-gradient(135deg, color-mix(in srgb, var(--ac) 10%, var(--sp-card2)), var(--sp-card2)); border:1px solid var(--sp-border); border-radius:14px; padding:.8rem .85rem; display:flex; flex-direction:column; gap:.55rem; }
.sp-amount { display:flex; align-items:center; gap:.5rem; background: var(--sp-card); border:1px solid var(--sp-border); border-radius:11px; padding:.2rem .3rem .2rem .8rem; transition: border-color .18s, box-shadow .18s; }
.sp-amount:focus-within { border-color: var(--ac); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ac) 22%, transparent); }
.sp-amount span { color: var(--sp-muted); font-weight:700; }
.sp-amount input { flex:1; min-width:0; border:none; background:transparent; color: var(--sp-text); font-weight:700; font-size:1rem; padding:.45rem 0; outline:none; }
.sp-amount input::-webkit-outer-spin-button, .sp-amount input::-webkit-inner-spin-button { -webkit-appearance:none; }
.sp-chips { display:flex; gap:.3rem; flex-wrap:wrap; }
.sp-chips button { border:1px solid var(--sp-border); background: var(--sp-card); color: var(--sp-sub); border-radius:8px; padding:.22rem .6rem; font-size:.68rem; font-weight:700; cursor:pointer; transition: all .15s; }
.sp-chips button:hover { border-color: var(--ac); color: var(--ac); }
.sp-proj { display:grid; grid-template-columns: 1fr auto; gap:.15rem .75rem; font-size:.76rem; color: var(--sp-sub); }
.sp-proj b { color: var(--sp-text); text-align:right; }
.sp-proj b.g { color: var(--sp-green); }
.sp-proj .total { grid-column: 1 / -1; display:flex; justify-content:space-between; align-items:baseline; border-top:1px dashed var(--sp-border); padding-top:.4rem; margin-top:.15rem; }
.sp-proj .total b { font-size:1.05rem; }
.sp-btn { width:100%; border:none; border-radius:12px; padding:.75rem 1rem; font-weight:800; font-size:.9rem; color:#fff; background: linear-gradient(135deg, var(--ac), color-mix(in srgb, var(--ac) 65%, #000)); box-shadow: 0 8px 22px color-mix(in srgb, var(--ac) 35%, transparent); cursor:pointer; transition: transform .18s, box-shadow .18s, filter .18s; display:flex; align-items:center; justify-content:center; gap:.5rem; text-decoration:none; }
.sp-btn:hover { transform: translateY(-2px); filter: brightness(1.08); color:#fff; box-shadow: 0 14px 30px color-mix(in srgb, var(--ac) 45%, transparent); }
.sp-btn:disabled { opacity:.55; cursor:not-allowed; transform:none; }
.sp-btn.ghost { background: transparent; color: var(--ac); border:1.5px solid var(--ac); box-shadow:none; }
.sp-foot { display:flex; justify-content:space-between; align-items:center; gap:.5rem; font-size:.68rem; color: var(--sp-muted); }
.sp-foot .warn { color:#F5A623; }
.sp-err { font-size:.7rem; color:#EF4444; min-height:1em; }
/* comparison table */
.sp-compare { background: var(--sp-card); border:1px solid var(--sp-border); border-radius: var(--sp-r); overflow:hidden; box-shadow: var(--sp-shadow); }
.sp-compare .scroll { overflow-x:auto; }
.sp-compare table { width:100%; border-collapse:separate; border-spacing:0; min-width:720px; }
.sp-compare th { font-size:.66rem; text-transform:uppercase; letter-spacing:.08em; color: var(--sp-muted); font-weight:700; padding:.9rem 1rem; text-align:center; border-bottom:1px solid var(--sp-border); background: var(--sp-card2); }
.sp-compare th:first-child, .sp-compare td:first-child { text-align:left; position:sticky; left:0; background: var(--sp-card); z-index:1; }
.sp-compare td { padding:.7rem 1rem; border-bottom:1px solid var(--sp-border); text-align:center; color: var(--sp-text); font-size:.86rem; }
.sp-compare tr:last-child td { border-bottom:none; }
.sp-compare .asset { display:flex; align-items:center; gap:.6rem; font-weight:700; }
.sp-compare .asset .dot { width:28px; height:28px; border-radius:9px; display:inline-flex; align-items:center; justify-content:center; font-size:.55rem; font-weight:800; color:#fff; }
.sp-compare .cell { display:inline-flex; flex-direction:column; align-items:center; gap:1px; padding:.4rem .75rem; border-radius:10px; border:1px solid transparent; cursor:pointer; transition: all .15s; min-width:78px; }
.sp-compare .cell b { color: var(--sp-green); font-size:.95rem; }
.sp-compare .cell small { font-size:.6rem; color: var(--sp-muted); }
.sp-compare .cell:hover { border-color: var(--sp-primary); background: var(--sp-hover); }
.sp-compare .cell.best { border-color: color-mix(in srgb, var(--sp-green) 45%, transparent); background: color-mix(in srgb, var(--sp-green) 10%, transparent); }
.sp-compare .muted { color: var(--sp-muted); }
.sp-notes { margin-top:1rem; display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:.6rem; }
.sp-note { display:flex; gap:.6rem; align-items:flex-start; font-size:.74rem; color: var(--sp-sub); background: var(--sp-card); border:1px solid var(--sp-border); border-radius:12px; padding:.7rem .85rem; }
.sp-note i { color: var(--sp-primary); margin-top:.15rem; }
.sp-empty { text-align:center; padding:3rem 1rem; color: var(--sp-muted); background: var(--sp-card); border:1px solid var(--sp-border); border-radius: var(--sp-r); }
.sp-more-wrap { display:flex; flex-direction:column; align-items:center; gap:.9rem; padding:1.4rem 0 .4rem; }
.sp-more-line { width:min(320px, 70%); height:3px; border-radius:2px; background: var(--sp-border); overflow:hidden; }
.sp-more-line span { display:block; height:100%; background: linear-gradient(90deg, #0500FF, #0094FF, #48FF91); border-radius:2px; transition: width .5s cubic-bezier(.22,.61,.36,1); }
.sp-more-btn { display:inline-flex; align-items:center; gap:.7rem; padding:.7rem .6rem .7rem 1.3rem; border-radius:50px; border:1px solid var(--sp-border); background: var(--sp-card); color: var(--text-primary, #F5F6FA); font: inherit; font-weight:800; font-size:.86rem; cursor:pointer; box-shadow: var(--sp-shadow); transition: transform .2s, border-color .2s, box-shadow .2s; }
.sp-more-btn:hover { transform: translateY(-2px); border-color: #3B82FF; box-shadow: 0 12px 30px rgba(59,130,255,.18); }
.sp-more-btn .cnt { font-size:.7rem; font-weight:700; color: var(--text-muted, #6E7183); padding:.2rem .55rem; border-radius:50px; background: rgba(127,127,127,.12); font-variant-numeric: tabular-nums; }
.sp-more-btn i { width:30px; height:30px; border-radius:50%; background: linear-gradient(135deg, #0500FF, #0094FF); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:.75rem; transition: transform .3s; }
.sp-more-btn.all i { transform: rotate(180deg); }
.sp-card.sp-reveal { animation: sp-reveal .45s cubic-bezier(.22,.61,.36,1) both; }
@keyframes sp-reveal { from { opacity:0; transform: translateY(14px) scale(.98); } to { opacity:1; transform:none; } }
@media (max-width: 720px) { .sp-grid { grid-template-columns: 1fr; } .sp-facts { grid-template-columns: repeat(2, 1fr); } .sp-head h2 { font-size:1.15rem; } .sp-apy .v { font-size:1.5rem; } }