/* Colors and variables */
:root{
  --bg:#f5f7fa;
  --card:#ffffff;
  --muted:#6b7280;
  --accent:#0f172a;
  --accent-2:#165b9d;
  --success:#16a34a;
  --danger:#ef4444;
  --panel-width:340px;
  --shadow: 0 10px 30px rgba(2,6,23,0.08);
}

/* Light / dark body */
body { margin:0; font-family: Inter, Roboto, Arial, sans-serif; background:var(--bg); color:var(--accent); }
body.dark { --bg:#0b1020; --card:#071028; --muted:#9aa4b2; --accent:#e6eef7; --accent-2:#3ea3ff; --shadow: 0 10px 30px rgba(2,6,23,0.4); color:var(--accent); }

/* Small utilities */
.muted { color:var(--muted); font-size:0.9rem; }
.card { background:var(--card); border-radius:10px; padding:1rem; box-shadow:var(--shadow); }

/* Header */
header { display:flex; justify-content:space-between; align-items:center; padding:0.9rem 1rem; background:var(--card); border-bottom:1px solid rgba(0,0,0,0.04); }
header .brand h1 { margin:0; font-size:1.05rem; }
.header-right { display:flex; gap:10px; align-items:center; }

/* theme toggle */
button.ghost { background:transparent; border:1px solid rgba(0,0,0,0.06); padding:6px 10px; border-radius:8px; cursor:pointer; color:inherit; }
body.dark button.ghost { border-color: rgba(255,255,255,0.06); }

/* Main grid: left + right */
main { display:grid; grid-template-columns: 1fr var(--panel-width); grid-template-rows: auto auto; gap:1rem; padding:1rem; align-items:start; }

/* Stocks section (left, top) */
.stocks { grid-column:1 / 2; grid-row:1 / 2; }
.section-head { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:8px; }
.sector-row { display:flex; gap:8px; flex-wrap:wrap; }
.sector-row button { background:var(--accent-2); color:white; border:none; padding:6px 10px; border-radius:8px; cursor:pointer; font-weight:600; }
.sector-row button:hover { opacity:0.95; transform:translateY(-3px); }

/* Tables */
.table-wrap { overflow:auto; max-height:44vh; }
.table-wrap.small { max-height:50vh; }
table { width:100%; border-collapse:collapse; }
thead th { text-align:left; font-size:0.92rem; padding:8px 6px; color:var(--muted); border-bottom:1px solid rgba(0,0,0,0.04); }
tbody td { padding:8px 6px; border-bottom:1px dashed rgba(0,0,0,0.03); font-size:0.95rem; }
.stock-row:hover { background: rgba(0,0,0,0.02); }
.action-btn { background:var(--accent-2); color:white; border:none; padding:6px 8px; border-radius:6px; cursor:pointer; font-weight:600; }
.action-btn:hover { opacity:0.95; transform:translateY(-2px); }

/* Portfolio panel (right) */
#portfolio-panel { grid-column:2 / 3; grid-row:1 / 3; position:relative; }
#portfolio-panel h2 { margin-top:0; }
#portfolio-panel p { margin:6px 0; }
#add-cash-btn { background:linear-gradient(90deg,var(--accent-2),#2b7bd8); color:white; border:none; padding:8px 10px; border-radius:8px; cursor:pointer; font-weight:700; margin-top:6px; }
#add-cash-btn[style*="display:none"] { display:none !important; }

/* Graph (left below stocks) */
.graph { grid-column:1 / 2; grid-row:2 / 3; }
.graph canvas { width:100%; height:320px; display:block; border-radius:6px; background:transparent; }

/* Legend */
.legend { margin-top:8px; display:flex; gap:10px; flex-wrap:wrap; }
.legend .item { display:flex; gap:6px; align-items:center; font-size:0.9rem; color:var(--muted); }
.legend .swatch { width:12px; height:12px; border-radius:3px; }

/* Footer */
footer { display:flex; justify-content:space-between; align-items:center; padding:0.8rem 1rem; background:transparent; color:var(--muted); border-top:1px solid rgba(0,0,0,0.04); }

/* small screens */
@media (max-width:980px) {
  main { grid-template-columns: 1fr; grid-template-rows: auto auto auto; }
  #portfolio-panel { grid-column:1 / -1; order:2; }
  .graph { grid-column:1 / -1; order:3; }
}

/* Hidden by default */
.creator-note {
  display: none;
}

/* Show only in dark mode */
body.dark .creator-note {
  display: block;
  opacity: 0.2;
  text-align: center;
  font-size: 12px;
  margin-top: 10px;
  font-style: italic;
  transition: 0.3s ease;
}


body.dark .creator-note:hover {
  opacity: 0.4;
}