/* TTM Stock Tracker - styles */
:root{
  --bg:#0b1220; /* slate-950 */
  --panel:#0f172a; /* slate-900 */
  --muted:#94a3b8; /* slate-400 */
  --text:#e2e8f0; /* slate-200 */
  --primary:#22c55e; /* green-500 */
  --primary-600:#16a34a; /* green-600 */
  --danger:#ef4444; /* red-500 */
  --warn:#f59e0b; /* amber-500 */
  --info:#38bdf8; /* sky-400 */
  --border:#1f2937; /* gray-800 */
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:linear-gradient(180deg, var(--bg), #0a0f1a 60%);
  color:var(--text);
  font:16px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji','Segoe UI Emoji';
}

.app-header{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:.75rem 1rem; background:var(--panel); border-bottom:1px solid var(--border);
}
.brand{display:flex; align-items:center; gap:.5rem}
.brand .logo{font-size:1.35rem}
.brand h1{margin:0; font-size:1.05rem; font-weight:600}
.actions{display:flex; align-items:center; gap:.5rem; flex-wrap:wrap}
.menu-split{width:1px; height:24px; background:var(--border); margin:0 .5rem}

.btn{appearance:none; border:1px solid var(--border); background:#0b1628; color:var(--text); padding:.45rem .7rem; border-radius:.5rem; cursor:pointer}
.btn:hover{background:#0d1a30}
.btn.primary{background:var(--primary); color:#04110a; border-color:transparent}
.btn.primary:hover{background:var(--primary-600); color:#031007}
.btn.danger{background:#2a0f14; border-color:#3f1a1f; color:#fecaca}
.btn.danger:hover{background:#3a1419}
.btn.sm{padding:.25rem .5rem; font-size:.85rem}
.btn.hit{background:#064e3b; border-color:#065f46; color:#bbf7d0}
.btn.hit:hover{background:#065f46}

.container{padding:1rem; max-width:1200px; margin:0 auto}
.card{background:rgba(15,23,42,.7); border:1px solid var(--border); border-radius:.75rem; padding:1rem; margin-bottom:1rem}
.hidden{display:none}

/* New accordion list layout */
.list{display:flex; flex-direction:column; gap:.75rem; max-height:70vh; overflow:auto}
.item{border:1px solid var(--border); border-radius:.75rem; overflow:hidden; background:rgba(9,13,23,.6)}
.item-header{width:100%; display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:.75rem 1rem; background:#0b1628; border:0; color:var(--text); cursor:pointer; text-align:left}
.item-header:hover{background:#0d1a30}
.head-left{display:flex; flex-direction:column}
.head-left .title{font-weight:700}
.head-left .subtitle{font-size:.8rem; color:var(--muted); display:none}
.item.expanded .head-left .subtitle{display:block}
.head-right{display:flex; align-items:center; gap:1rem}
.head-right .price{font-weight:600}
.header-progress{display:flex; align-items:center; gap:.5rem}
.progress.small{height:6px; width:140px}
.item-body{display:none; padding:1rem; border-top:1px solid var(--border); background:rgba(15,23,42,.5)}
.item.expanded .item-body{display:block}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:.75rem}
.grid2 .span2{grid-column:1 / -1}
.row.between{display:flex; align-items:center; justify-content:space-between}
.levels{display:flex; flex-direction:column; gap:.6rem; margin:.5rem 0 1rem}
.levels .level .value{color:var(--muted)}

.price-up{color:#86efac}
.price-down{color:#fca5a5}

.progress{position:relative; height:10px; background:#0a1426; border:1px solid var(--border); border-radius:999px; overflow:hidden}
.progress .bar{position:absolute; top:0; left:0; height:100%}
.progress .bar.to-target{background:linear-gradient(90deg, #0ea5e9, #22d3ee)}
.progress .bar.to-stop{background:linear-gradient(90deg, #ef4444, #f59e0b)}
.progress .bar.to-buy2{background:linear-gradient(90deg, #8b5cf6, #22d3ee)}
.progress .bar.to-buy3{background:linear-gradient(90deg, #f472b6, #22d3ee)}
.progress-caption{font-size:.8rem; color:var(--muted); margin-top:.25rem}

.row-actions{display:flex; gap:.35rem; flex-wrap:wrap}

.app-footer{padding:1rem; text-align:center; color:var(--muted)}

/* Modal */
.modal{position:fixed; inset:0; display:none; z-index:1000}
.modal[aria-hidden="false"]{display:block}
.modal-backdrop{position:absolute; inset:0; background:rgba(0,0,0,.6)}
.modal-card{position:relative; margin:5vh auto; width:min(720px, 94vw); max-height:90vh; display:flex; flex-direction:column; background:var(--panel); border:1px solid var(--border); border-radius:.75rem; overflow:hidden}
.modal-header{display:flex; align-items:center; justify-content:space-between; padding:.75rem 1rem; border-bottom:1px solid var(--border); flex:0 0 auto}
.modal-body{padding:1rem; overflow:auto; flex:1 1 auto; min-height:0}
.modal-footer{display:flex; justify-content:flex-end; gap:.5rem; padding:1rem; border-top:1px solid var(--border)}
.icon-btn{appearance:none; background:transparent; border:0; color:var(--text); font-size:1.5rem; cursor:pointer}

.fieldset{border:1px dashed var(--border); border-radius:.5rem; padding:.75rem; margin:.75rem 0}
.fieldset legend{padding:0 .4rem; color:var(--muted)}

.grid{display:grid; grid-template-columns:1fr 1fr; gap:.75rem}
.row{display:flex; align-items:center; gap:.75rem}
label{display:flex; flex-direction:column; gap:.25rem}
input, select, textarea{background:#0a1629; border:1px solid var(--border); color:var(--text); padding:.5rem .6rem; border-radius:.5rem}
input:focus, select:focus, textarea:focus{outline:2px solid #1e293b}

@media (max-width: 800px){
  .grid{grid-template-columns:1fr}
  .grid2{grid-template-columns:1fr}
  .actions{gap:.35rem}
  .progress.small{width:100px}
}