:root {
  --bg:#0b0d10; --panel:#12161b; --ink:#e8eef6; --muted:#9fb0c7;
  --accent:#5dd0ff; --ok:#7ee787; --warn:#ffd166; --danger:#ff6b6b;
  --blue:#5dd0ff; --green:#7ee787; --amber:#ffd166; --purple:#c792ea;
}
*{box-sizing:border-box}
body{margin:0; font-family:system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji"; background:var(--bg); color:var(--ink);}
.wrap{max-width:1024px; margin:0 auto; padding:24px 24px 92px;} /* bottom padding for fixed nav */
h1{font-size:28px;margin:0 0 6px}
h2{font-size:18px;margin:18px 0 8px;color:var(--muted)}
.grid{display:grid; gap:12px}
.panel{background:var(--panel); border:1px solid #1e2430; border-radius:14px; padding:16px}
.row{display:flex; gap:8px; align-items:center;}
.row > *{flex:1}
label{font-size:12px;color:var(--muted);display:block;margin-bottom:6px}
input, textarea, select, button{width:100%; background:#0e131a; color:#e8eef6; border:1px solid #2a3140; border-radius:10px; padding:10px 12px; outline:none}
input:focus, textarea:focus, select:focus{border-color:var(--accent)}
button{cursor:pointer; background:#18202c}
button.primary{background:linear-gradient(180deg,#1e88e5,#1565c0); border:none}
small.help{color:var(--muted)}
.pill{display:inline-block; padding:4px 8px; border-radius:999px; background:#0e131a; border:1px solid #2a3140; color:#9fb0c7; font-size:12px}
.plan pre{white-space:pre-wrap; margin:0; line-height:1.7; font-size:22px; font-weight:800} /* bigger bolder */
.kpi{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px}
.kpi .card{background:#0e131a; border:1px solid #1f2735; padding:12px; border-radius:12px}
.kpi .card .v{font-size:22px; font-weight:700}
.muted{color:var(--muted)}
.row-2{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.note{border-left:3px solid var(--accent); padding-left:10px; color:var(--muted)}
.flex{display:flex; gap:8px}
.flex > *{flex:1}
.right{justify-content:flex-end}
.center{text-align:center}
.badge{font-size:12px; color:#111; background:var(--ok); display:inline-block; padding:2px 8px; border-radius:999px}
.chips{display:flex; gap:8px; flex-wrap:wrap}
.chip{display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:999px; border:1px solid #2a3140; background:#0e131a}
.chip input{width:auto}
.dim{opacity:0.5}
.disabled{filter:grayscale(0.8); opacity:0.6}
.danger{color:var(--danger)}
.list{display:flex; gap:8px; flex-wrap:wrap}
.tag{padding:2px 8px; border-radius:999px; border:1px solid #2a3140; background:#0e131a; font-size:12px}

/* drag list */
.dlist{list-style:none; padding:0; margin:0;}
.ditem{display:flex; align-items:center; gap:8px; padding:8px 10px; border:1px dashed #2a3140; border-radius:10px; margin-bottom:8px; background:#0e131a}
.drag{cursor:grab; user-select:none; font-weight:700; padding:0 8px; border-radius:8px; border:1px solid #2a3140}
.trash{cursor:pointer; border:none; padding:6px 10px; border-radius:8px; background:#1d2430; color:#f88}
.ditem.dragging{opacity:0.6}

/* sections behave like an app */
.view{display:none}
.view.active{display:block}

/* fixed bottom nav */
.bnav{position:fixed; left:0; right:0; bottom:0; height:60px; background:#12161b; border-top:1px solid #1e2430; display:flex; justify-content:space-around; align-items:center; z-index:1000}
.bnav button{flex:1; height:60px; background:none; border:none; color:#9fb0c7; font-size:12px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px}
.bnav button.active{color:var(--accent); font-weight:700}

/* banners/toasts */
.banner{display:none; position:fixed; bottom:72px; left:12px; right:12px; background:#2a0f0f; color:#ffdada; border:1px solid #533; padding:10px 12px; border-radius:10px; z-index:9999}
.toast{display:none; position:fixed; bottom:72px; left:50%; transform:translateX(-50%); background:#0e131a; color:#e8eef6; border:1px solid #2a3140; padding:10px 14px; border-radius:10px; z-index:10000; box-shadow:0 8px 20px rgba(0,0,0,0.4)}