*{box-sizing:border-box;margin:0;padding:0}
  :root{
    --bg:#0d0f14;--surface:#161b25;--surface2:#1e2535;--border:#ffffff12;
    --text:#f0f2f7;--muted:#8892a4;--accent:#6c63ff;--accent2:#00d4aa;
    --red:#ff4d6d;--green:#00d4aa;--yellow:#ffd166;
    --font:'Inter',system-ui,sans-serif;
  }
  body{background:var(--bg);color:var(--text);font-family:var(--font);min-height:100vh;padding:0}
  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;700&display=swap');

  .app{max-width:1100px;margin:0 auto;padding:1.5rem 1rem}

  /* Header */
  .header{display:flex;align-items:center;justify-content:space-between;margin-bottom:2rem}
  .logo{font-family:'Space Grotesk',sans-serif;font-size:1.4rem;font-weight:700;letter-spacing:-0.5px}
  .logo span{color:var(--accent)}
  .tag{font-size:11px;background:var(--accent)22;color:var(--accent);border:1px solid var(--accent)44;padding:3px 10px;border-radius:20px}

  /* Summary cards */
  .summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:2rem}
  .card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:1rem 1.2rem}
  .card-label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.8px;margin-bottom:6px}
  .card-value{font-size:1.5rem;font-weight:700;font-family:'Space Grotesk',sans-serif}
  .card-value.green{color:var(--green)}
  .card-value.red{color:var(--red)}
  .card-sub{font-size:12px;color:var(--muted);margin-top:3px}

  /* Search */
  .search-wrap{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:1.2rem;margin-bottom:2rem}
  .search-wrap h3{font-size:13px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.8px;margin-bottom:12px}
  .search-row{display:flex;gap:8px;flex-wrap:wrap}
  .search-row input{flex:1;min-width:160px;background:var(--bg);border:1px solid var(--border);color:var(--text);border-radius:8px;padding:.55rem .8rem;font-size:14px;outline:none;transition:border .2s}
  .search-row input:focus{border-color:var(--accent)}
  .search-row input::placeholder{color:var(--muted)}
  .btn{padding:.55rem 1.1rem;border-radius:8px;border:none;font-size:13px;font-weight:600;cursor:pointer;transition:opacity .2s}
  .btn-primary{background:var(--accent);color:#fff}
  .btn-primary:hover{opacity:.85}
  .btn-danger{background:var(--red)22;color:var(--red);border:1px solid var(--red)44}
  .btn-danger:hover{background:var(--red)33}
  .search-results{margin-top:10px;display:flex;flex-wrap:wrap;gap:8px}
  .coin-pill{background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:6px 12px;font-size:13px;cursor:pointer;display:flex;align-items:center;gap:8px;transition:border .2s}
  .coin-pill:hover{border-color:var(--accent)}
  .coin-pill img{width:20px;height:20px;border-radius:50%}

  /* Add form */
  .add-form{background:var(--surface2);border:1px solid var(--accent)33;border-radius:12px;padding:1rem;margin-top:10px;display:none}
  .add-form.show{display:block}
  .add-form h4{font-size:13px;color:var(--muted);margin-bottom:10px}
  .form-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
  .form-row input{flex:1;min-width:120px;background:var(--bg);border:1px solid var(--border);color:var(--text);border-radius:8px;padding:.5rem .8rem;font-size:13px;outline:none}
  .form-row input:focus{border-color:var(--accent)}
  .selected-coin{display:flex;align-items:center;gap:8px;margin-bottom:8px}
  .selected-coin img{width:24px;height:24px;border-radius:50%}
  .selected-coin span{font-weight:600}
  .selected-coin .price{color:var(--green);font-size:13px}

  /* Holdings table */
  .holdings{background:var(--surface);border:1px solid var(--border);border-radius:14px;margin-bottom:2rem;overflow:hidden}
  .holdings-header{padding:1rem 1.2rem;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}
  .holdings-header h3{font-size:13px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.8px}
  .badge{background:var(--accent)22;color:var(--accent);font-size:11px;padding:2px 8px;border-radius:20px}
  .table-wrap{overflow-x:auto}
  table{width:100%;border-collapse:collapse;font-size:13px}
  thead th{padding:.65rem 1rem;text-align:left;color:var(--muted);font-weight:500;font-size:11px;text-transform:uppercase;letter-spacing:.6px;border-bottom:1px solid var(--border);white-space:nowrap}
  tbody tr{border-bottom:1px solid var(--border)88;transition:background .15s}
  tbody tr:last-child{border-bottom:none}
  tbody tr:hover{background:var(--surface2)}
  td{padding:.75rem 1rem;white-space:nowrap}
  .coin-cell{display:flex;align-items:center;gap:10px}
  .coin-cell img{width:26px;height:26px;border-radius:50%}
  .coin-name{font-weight:600;font-size:13px}
  .coin-sym{color:var(--muted);font-size:11px;text-transform:uppercase}
  .pos{color:var(--green)}
  .neg{color:var(--red)}
  .empty{text-align:center;padding:2.5rem;color:var(--muted);font-size:14px}

  /* Chart */
  .chart-section{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:1.2rem;margin-bottom:2rem}
  .chart-section h3{font-size:13px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.8px;margin-bottom:1rem}
  .chart-row{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
  @media(max-width:600px){.chart-row{grid-template-columns:1fr}}
  .chart-box{position:relative;height:200px}
  .chart-legend{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
  .legend-item{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--muted)}
  .legend-dot{width:9px;height:9px;border-radius:50%}

  /* Toast */
  .toast{position:fixed;bottom:20px;right:20px;background:var(--surface2);border:1px solid var(--accent)44;color:var(--text);padding:.7rem 1.2rem;border-radius:10px;font-size:13px;opacity:0;transform:translateY(10px);transition:all .3s;pointer-events:none;z-index:999}
  .toast.show{opacity:1;transform:translateY(0)}

  /* Live dot */
  .live{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--green)}
  .dot{width:7px;height:7px;border-radius:50%;background:var(--green);animation:pulse 2s infinite}
  @keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

  .refresh-btn{background:none;border:1px solid var(--border);color:var(--muted);border-radius:8px;padding:4px 10px;font-size:11px;cursor:pointer}
  .refresh-btn:hover{border-color:var(--accent);color:var(--accent)}