:root{--bg:#0b0e13;--card:#141922;--card2:#1b2230;--text:#e8edf5;--muted:#8b96a8;--green:#22c55e;--red:#ef4444;--blue:#3b82f6;--border:#242c3a}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:15px/1.45 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;-webkit-font-smoothing:antialiased}
#app{max-width:520px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:18px 16px 10px}
h1{margin:0;font-size:22px}.muted{color:var(--muted);font-size:13px;margin:2px 0 0}
main{flex:1;padding:0 16px 90px}
.view{display:none}.view.active{display:block;animation:fade .18s ease}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:16px;margin-bottom:14px}
.summary-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.summary-grid .card{margin:0;padding:14px}.summary-grid span{display:block;color:var(--muted);font-size:12px}.summary-grid strong{font-size:19px}
.row{display:flex;justify-content:space-between;align-items:center}h2{margin:0 0 12px;font-size:16px}
.list{display:flex;flex-direction:column;gap:10px}
.position,.order,.fill,.journal-item,.watch{background:var(--card2);border:1px solid var(--border);border-radius:12px;padding:12px}
.position-top,.item-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.symbol{font-weight:700}.side{font-size:11px;padding:3px 8px;border-radius:999px;font-weight:700}
.long{background:rgba(34,197,94,.15);color:var(--green)}.short{background:rgba(239,68,68,.15);color:var(--red)}
.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;font-size:12px;color:var(--muted)}
.metrics b{display:block;color:var(--text);font-size:13px}
.actions{display:flex;gap:8px;margin-top:10px}
button{font:inherit;border:0;border-radius:10px;padding:10px 12px;cursor:pointer;color:var(--text);background:var(--card2)}
.primary{background:var(--blue);color:white;font-weight:700}.secondary{background:#232b39}.danger{background:rgba(239,68,68,.18);color:var(--red)}
.actions button{flex:1;font-size:12px;padding:8px 6px}
.icon-btn{width:38px;height:38px;border-radius:50%;background:var(--card2);font-size:18px}
input,select,textarea{width:100%;margin:6px 0 12px;padding:11px;border-radius:10px;border:1px solid var(--border);background:#0f141c;color:var(--text)}
textarea{min-height:90px;resize:vertical}
.tabbar{position:fixed;bottom:0;left:0;right:0;display:flex;background:rgba(11,14,19,.95);backdrop-filter:blur(12px);border-top:1px solid var(--border);padding:8px 6px calc(8px + env(safe-area-inset-bottom))}
.tab{flex:1;background:none;color:var(--muted);font-size:12px;font-weight:600;padding:10px 4px}
.tab.active{color:var(--blue)}
.switch{display:flex;align-items:center;gap:10px;margin:10px 0;font-size:14px}
.switch input{width:auto;margin:0}
.pill{background:var(--card2);border-radius:999px;padding:3px 9px;font-size:12px}
.pos{color:var(--green)}.neg{color:var(--red)}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.65);display:flex;align-items:center;justify-content:center;padding:20px;z-index:50}
.modal.hidden,.toast.hidden{display:none}
.modal-card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:18px;width:100%;max-width:360px}
.modal-actions{display:flex;gap:10px;margin-top:14px}.modal-actions button{flex:1}
.toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);background:#232b39;border:1px solid var(--border);padding:10px 16px;border-radius:999px;z-index:60}
@media(min-width:700px){#app{max-width:760px}.summary-grid{grid-template-columns:repeat(4,1fr)}}