:root{ --bg:#0c0c0e; --panel:#121316; --text:#eaecef; --muted:#a8aeb7; --accent:#ffa94d; --accent-2:#ff8f1f; --danger:#ff6b6b; --ok:#58d68d }

*{ box-sizing:border-box }
html,body{ margin:0; padding:0; height:100%; background:var(--bg); color:var(--text); font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif }

#app{ max-width:720px; margin:0 auto; padding:16px; }
.header{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:12px }
.title{ font-size:20px; font-weight:600 }
.code{ font-family:ui-monospace,Menlo,Consolas,monospace; background:var(--panel); padding:6px 10px; border-radius:8px; }

.card{ background:var(--panel); border:1px solid #22242a; border-radius:12px; padding:14px; margin:10px 0 }
.row{ display:flex; gap:10px; align-items:center }
.col{ display:flex; flex-direction:column; gap:10px }
.grow{ flex:1 }

input[type=text], select, textarea{ width:100%; background:#0f1115; color:var(--text); border:1px solid #26282f; border-radius:10px; padding:10px; outline:none }
textarea{ min-height:90px; resize:vertical }

button{ background:var(--accent); color:#2b1600; border:0; border-radius:10px; padding:10px 14px; font-weight:600; cursor:pointer }
button.secondary{ background:#1d2633; color:var(--text) }
button.ghost{ background:transparent; color:var(--muted); border:1px solid #263143 }
button.danger{ background:var(--danger); color:#240c0c }
button.success{ background:var(--ok); color:#0b2317 }
button:disabled{ opacity:.6; cursor:not-allowed }

.tabs{ display:flex; gap:8px; margin-bottom:8px }
.tab{ flex:1; text-align:center; padding:10px; border-radius:10px; background:#0f1520; cursor:pointer; border:1px solid #1b2432 }
.tab.active{ background:#141b28; border-color:#273247 }

.list{ display:flex; flex-direction:column; gap:8px }
.pill{ display:inline-flex; align-items:center; gap:8px; background:#0f1115; border:1px solid #2b2e36; border-radius:999px; padding:6px 10px }
.pill small{ color:var(--muted) }
.pill .dot{ width:8px; height:8px; border-radius:999px; background:#56627a }
.pill .dot.ok{ background:var(--ok) }
.pill .dot.not{ background:#56627a }

.grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px }
.chips{ display:flex; flex-wrap:wrap; gap:8px }
.chip{ border:1px solid #343740; background:#0f1115; border-radius:999px; padding:6px 10px }
.chip.selected{ background:#171a20; border-color:var(--accent) }
.selected-chip{ cursor:pointer }

.options{ display:flex; flex-direction:column; gap:6px; max-height:280px; overflow:auto; border:1px solid #2b2e36; background:#0f1115; border-radius:10px; padding:6px }
.option{ padding:8px 10px; border-radius:8px; cursor:pointer; border:1px solid transparent }
.option:hover{ background:#14171d; border-color:#2b2e36 }
.option.selected{ background:#171a20; border-color:var(--accent) }

.hint{ color:var(--muted); font-size:12px }
.section-title{ font-weight:600; color:#b8c2cc; margin:6px 0 }

.name-lg{ font-size:20px; font-weight:700; color:#ffd8a8 }

/* Make the first pill after section title larger in the summary */
.card .section-title + .pill{ font-size:16px; font-weight:700 }

@media (min-width: 700px){ #app{ padding:24px } .title{ font-size:22px } }