:root{
      --bg:#0b1020; /* deep navy */
      --panel:#121832; /* card */
      --muted:#8ea0c7;
      --text:#e7ecff;
      --accent:#5dd1ff;
      --accent-2:#a0ffcf;
      --danger:#ff6b6b;
      --ok:#2ed573;
      --shadow:0 10px 30px rgba(0,0,0,.35);
      --radius:18px;
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
      background: radial-gradient(1200px 800px at 10% -10%, #1b234a 0, rgba(27,35,74,0) 60%), var(--bg);
      color:var(--text);
    }
    .wrap{max-width:1100px; margin:40px auto; padding:0 16px}
    header{display:flex; gap:16px; align-items:center; justify-content:space-between; margin-bottom:18px}
    .title{font-size:clamp(22px, 2.2vw, 32px); font-weight:800; letter-spacing:.2px}
    .subtitle{color:var(--muted); font-size:14px}
    .card{background:var(--panel); border-radius:var(--radius); box-shadow:var(--shadow);}
    .controls{display:flex; flex-wrap:wrap; gap:10px; padding:14px}
    button, .ghost{
      appearance:none; border:0; border-radius:14px; padding:10px 14px; font-weight:600; cursor:pointer; color:#08101f;
      background:linear-gradient(180deg, var(--accent), #37b6e6);
      box-shadow:0 6px 18px rgba(93,209,255,.35);
    }
    button:hover{filter:brightness(1.02)}
    button.secondary{background:linear-gradient(180deg, #a0ffcf, #5de0a4); box-shadow:0 6px 18px rgba(94,224,164,.28)}
    button.ghost{background:transparent; color:var(--muted); border:1px solid #2a355f; box-shadow:none}
    button.danger{background:linear-gradient(180deg, #ff8b8b, #ff6b6b); box-shadow:0 6px 18px rgba(255,107,107,.28)}

    /* Columns: Investment | Ticker | Shares | Start | Start Value | Current Price | Current Value | Fees | Income | Gain | Return | Actions */
    .grid{display:grid; gap:14px; grid-template-columns:1.1fr .7fr .7fr .9fr 1fr 1fr 1fr .9fr .9fr .9fr .6fr .6fr}
    .thead, .row{align-items:center}
    .thead{padding:14px; color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.08em}
    .row{padding:10px 14px; border-top:1px solid #1e284f}

    input, select{width:100%; background:#0c1330; border:1px solid #24306a; padding:10px 10px; border-radius:12px; color:var(--text); outline:none}
    input:focus{border-color:#3a54d6; box-shadow:0 0 0 3px rgba(58,84,214,.25)}
    .num{ text-align:right }
    .pill{display:inline-block; padding:6px 10px; border-radius:999px; font-size:12px}
    .pill.ok{background:rgba(46,213,115,.12); color:var(--accent-2)}
    .pill.bad{background:rgba(255,107,107,.12); color:#ffb0b0}

    .summary{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:16px}
    .summary .box{padding:16px; border-radius:14px; background:#0e1738; border:1px solid #24306a}
    .summary .label{font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.08em}
    .summary .value{font-size:22px; font-weight:800; margin-top:6px}

    .footer{color:var(--muted); font-size:12px; padding:14px}
    .stack{display:flex; gap:8px; align-items:center; justify-content:flex-end}
    .row .stack{justify-content:flex-start}

    @media (max-width:980px){
      .grid{grid-template-columns:1fr .7fr .7fr .9fr 1fr 1fr 1fr .9fr .9fr .9fr .6fr .6fr}
      .col-hide-lg{display:none}
    }
    @media (max-width:760px){
      .grid{grid-template-columns:1.2fr .8fr 1fr 1fr 1fr .9fr}
      .col-hide-md{display:none}
      .summary{grid-template-columns:1fr}
      header{flex-direction:column; align-items:flex-start}
      .controls{gap:8px}
    }