:root{--pink:#db2777;--ink:#1e293b;--slate:#475569;--mut:#64748b;--line:#e2e8f0;
  --bg:#f8fafc;--card:#fff;--own:#0f172a;--rent:#db2777}
*{box-sizing:border-box}

/* Page wrapper — mirrors .wrap from the mockup, scoped to .tasp */
.tasp{max-width:1120px;margin:0 auto;padding:1rem 1.5rem 4rem}
.tasp-intro h1{font-size:clamp(1.4rem,3vw,1.85rem);margin:.2rem 0 .4rem;color:#1e293b}
.tasp-intro p{color:#475569;max-width:72ch}
.tasp-caveat{font-size:.85rem;color:#64748b;border:1px dashed #e2e8f0;border-radius:8px;padding:.6rem .8rem;background:#fff}

/* view tabs */
.tabs{display:inline-flex;background:#eef2f6;border-radius:10px;padding:.25rem;gap:.25rem;margin:0 0 1.4rem}
.tab{border:none;background:none;font:inherit;font-weight:600;font-size:.88rem;color:var(--slate);
  padding:.45rem .9rem;border-radius:8px;cursor:pointer}
.tab.active{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(15,23,42,.08)}
.view{display:none} .view.active{display:block}

/* BUILD: list + detail */
.builder{display:grid;grid-template-columns:300px 1fr;gap:1.1rem;align-items:start}
.uc-list{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:.5rem}
.uc-list h4{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);
  margin:.4rem .6rem .5rem}
.uc-item{display:block;width:100%;text-align:left;border:none;background:none;font:inherit;
  border-radius:9px;padding:.55rem .6rem;cursor:pointer;margin-bottom:.15rem}
.uc-item:hover{background:#f8fafc}
.uc-item.active{background:#fdf2f8;outline:1px solid #fbcfe8}
.uc-item .nm{font-weight:600;font-size:.9rem;display:block}
.uc-item .dc{font-size:.74rem;color:var(--mut)}
.uc-item.active .dc{color:var(--pink)}
.uc-add{width:100%;margin-top:.35rem;border:1.5px dashed #cbd5e1;background:#fff;color:var(--slate);
  border-radius:9px;padding:.5rem;font-weight:600;cursor:pointer;font-size:.85rem}

.detail{background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:1.1rem 1.2rem;box-shadow:0 1px 2px rgba(15,23,42,.04)}
.detail .dt-name{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-bottom:.15rem}
.detail .dt-name h2{font-size:1.25rem;margin:0}
.pill{font-size:.74rem;font-weight:600;border-radius:999px;padding:.18rem .55rem}
.pill.data{background:#eef2ff;border:1px solid #c7d2fe;color:#3730a3}
.pill.flag{background:#fff7ed;border:1px solid #fed7aa;color:#9a3412}
.auto-note{font-size:.78rem;color:var(--mut);margin:.1rem 0 1.1rem}

.step{border-top:1px solid var(--line);padding:1rem 0 .2rem}
.step:first-of-type{border-top:none}
.step .lab{display:flex;align-items:center;gap:.5rem;margin-bottom:.6rem}
.step .num{width:1.4rem;height:1.4rem;border-radius:50%;background:var(--ink);color:#fff;
  font-size:.78rem;font-weight:700;display:grid;place-items:center;flex:none}
.step .lab b{font-size:.95rem} .step .lab .hint{font-size:.78rem;color:var(--mut)}

.opts{display:flex;flex-wrap:wrap;gap:.4rem}
.opt{font-size:.84rem;font-weight:600;border-radius:8px;padding:.34rem .6rem;cursor:pointer;
  border:1.5px solid var(--line);background:#f8fafc;color:var(--slate)}
.opt.sel{border-color:var(--pink);background:#fdf2f8;color:var(--pink)}
.opt.add{border-style:dashed;color:var(--mut);background:#fff}

.kpi{font-size:.84rem;font-weight:600;border-radius:999px;padding:.32rem .6rem;cursor:pointer;
  border:1.5px solid var(--line);background:#fff;color:var(--slate);display:inline-flex;gap:.35rem;align-items:center}
.kpi.sel{border-color:#16a34a;background:#f0fdf4;color:#166534}
.kpi.sel::before{content:"✓";font-weight:800}

.chip{display:inline-flex;align-items:center;gap:.3rem;font-size:.82rem;font-weight:600;
  border-radius:999px;padding:.3rem .55rem .3rem .6rem;white-space:nowrap}
.chip.own{background:var(--own);color:#fff;border:1.5px solid var(--own)}
.chip.rent{background:#fff;color:var(--pink);border:1.5px solid var(--pink)}
.chip .x{opacity:.55;font-weight:700;cursor:pointer}
.chip-add{font-size:.8rem;color:var(--slate);background:#f1f5f9;border:1px dashed #cbd5e1;
  border-radius:999px;padding:.3rem .55rem;cursor:pointer}
.layer-tag{font-size:.74rem;color:var(--mut);margin-left:.1rem}

/* SUMMARY view */
.toolbar{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin:0 0 1.4rem;
  padding:.6rem .7rem;background:#fff;border:1px solid var(--line);border-radius:10px}
.toolbar .tb-label{font-size:.76rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--mut);margin-right:.2rem}
.tb-btn{display:inline-flex;align-items:center;gap:.4rem;font-size:.82rem;font-weight:600;
  border-radius:8px;padding:.4rem .7rem;cursor:pointer;border:1px solid var(--line);background:#f8fafc;color:var(--ink)}
.tb-btn.primary{background:var(--pink);color:#fff;border-color:var(--pink)}

.mini{width:100%;border-collapse:collapse;font-size:.82rem;margin:0 0 2rem;background:#fff;
  border:1px solid var(--line);border-radius:10px;overflow:hidden}
.mini th{font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);
  text-align:left;padding:.55rem .7rem;background:#f8fafc;border-bottom:1px solid var(--line)}
.mini td{padding:.55rem .7rem;border-bottom:1px solid var(--line);vertical-align:top}
.mini tr:last-child td{border-bottom:none}
.mini .b{font-weight:600}
.tag{font-size:.72rem;font-weight:700;border-radius:6px;padding:.12rem .4rem}
.tag.rent{color:var(--pink);background:#fdf2f8;border:1px solid #fbcfe8}
.tag.own{color:#fff;background:var(--own)}
.tag.flag{color:#9a3412;background:#fff7ed;border:1px solid #fed7aa}

.setup h2{font-size:1.2rem;margin:1.4rem 0 .25rem}
.glance{color:var(--slate);font-size:.9rem;margin:0 0 1.1rem}.glance b{color:var(--ink)}
.layer-group{margin:0 0 1.1rem}
.layer-group h3{font-size:.74rem;letter-spacing:.09em;text-transform:uppercase;color:var(--mut);
  margin:0 0 .5rem;padding-bottom:.3rem;border-bottom:1px solid var(--line)}
.setup-item{display:flex;align-items:flex-start;gap:.7rem;padding:.45rem .2rem;flex-wrap:wrap}
.si-dot{width:.6rem;height:.6rem;border-radius:50%;margin-top:.4rem;flex:none}
.si-dot.rent{background:var(--rent)}.si-dot.own{background:var(--own)}
.si-name{font-weight:700;font-size:.9rem;min-width:9rem}
.si-action{font-size:.76rem;font-weight:700;border-radius:6px;padding:.16rem .5rem;white-space:nowrap}
.si-action.rent{color:var(--rent);background:#fdf2f8;border:1px solid #fbcfe8}
.si-action.own{color:#fff;background:var(--own)}
.si-for{font-size:.82rem;color:var(--slate);flex:1;min-width:13rem}.si-for b{color:var(--ink);font-weight:600}

@media(max-width:820px){.builder{grid-template-columns:1fr}}

/* Print / present-mode */
@media print {
    nav.navbar, .tool-breadcrumbs, .tabs, .toolbar, #view-build { display: none !important; }
    .tasp { padding: 0; }
    #view-summary { display: block !important; }
}
.tasp.present-mode nav.navbar,
.tasp.present-mode .tool-breadcrumbs,
.tasp.present-mode .toolbar,
.tasp.present-mode #view-build { display: none; }