/* Bottega app. Same brand as the landing page: Instrument Serif titles, Inter Tight UI, white sheet on paper,
   blue split pill for the main action, hairline construction lines in empty states. */
:root {
  --ink: #1d1c1a;
  --ink-2: #55575d;
  --ink-3: #8a8c91;
  --ink-4: #b4b5b8;
  --line: #ecebe6;
  --line-2: #e2e0d9;
  --paper: #f5f3ee;
  --paper-2: #faf9f6;
  --hover: #f6f5f1;
  --blue: #1a74f2;
  --blue-d: #0a57cc;
  --blue-bg: #eaf2ff;
  --green: #1d7a3e;
  --green-bg: #e6f4ea;
  --amber: #a35a00;
  --amber-bg: #fff2df;
  --red: #b0352b;
  --red-bg: #fdecea;
  --violet: #4b47b8;
  --violet-bg: #eeedfb;
  --serif: 'Instrument Serif', 'Times New Roman', serif;
  --sans: 'Inter Tight', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  --side: 248px;
  --ease: cubic-bezier(.22, .7, .2, 1);
  --sh-1: 0 0 0 1px rgba(30, 25, 20, .07), 0 1px 2px rgba(30, 25, 20, .04);
  --sh-pop: 0 0 0 1px rgba(30, 25, 20, .08), 0 18px 40px -14px rgba(40, 30, 20, .3);
}
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; font: 400 14px/1.45 var(--sans); color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow: hidden; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 6px; }
.ic { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ic--s { width: 15px; height: 15px; }
.ic--fill { fill: currentColor; stroke: none; }
.mark { width: 22px; height: 22px; }
.mark circle { fill: none; stroke: currentColor; stroke-width: 2.6; }
.mark .lens { fill: var(--blue); }
.kbd { font: 500 11px/1 var(--sans); color: var(--ink-3); padding: 3px 5px; border-radius: 5px; background: #fff; box-shadow: 0 0 0 1px var(--line-2), 0 1px 0 var(--line-2); white-space: nowrap; word-spacing: .18em; }
.mono { font-family: var(--mono); font-size: .92em; letter-spacing: -.01em; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-3); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------------- shell ---------------- */
.app { display: grid; grid-template-columns: var(--side) minmax(0, 1fr); height: 100vh; height: 100dvh; }
.side { display: flex; flex-direction: column; padding: 10px 10px 12px; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; }
.side::-webkit-scrollbar { display: none; }
.side__top { display: flex; align-items: center; gap: 6px; }
.side__close { display: none; }
.ws { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 6px 8px; border: 0; background: none; border-radius: 10px; text-align: left; }
.ws:hover, .ws[aria-expanded="true"] { background: rgba(0, 0, 0, .04); }
.ws__mark { width: 32px; height: 32px; border-radius: 9px; background: var(--ink); color: #fff; display: grid; place-items: center; flex: none; }
.ws__txt { min-width: 0; flex: 1; }
.ws__txt b { display: block; font-weight: 600; font-size: 14px; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws__txt small { display: block; color: var(--ink-3); font-size: 12px; white-space: nowrap; }
.ws__chev { color: var(--ink-3); width: 16px; height: 16px; }
.side__search { margin: 10px 0 8px; display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 8px 0 10px; border: 0; border-radius: 9px; background: #fff; box-shadow: var(--sh-1); color: var(--ink-3); text-align: left; }
.side__search span { flex: 1; font-size: 13.5px; }
.side__search .ic { width: 16px; height: 16px; }
.side__nav { display: grid; gap: 1px; }
.nav-i { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 10px; border-radius: 9px; text-decoration: none; color: #3d3e42; font-weight: 500; font-size: 14px; position: relative; }
.nav-i .ic { color: #6e7075; }
.nav-i:hover { background: rgba(0, 0, 0, .04); }
.nav-i.is-on { background: #fff; color: var(--ink); box-shadow: var(--sh-1); }
.nav-i.is-on .ic { color: var(--ink); }
.nav-i span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-i__n { font-style: normal; font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.nav-i__n--hot { color: #fff; background: var(--blue); border-radius: 999px; min-width: 18px; height: 18px; padding: 0 5px; display: grid; place-items: center; font-weight: 600; font-size: 11px; }
.nav-i__n:empty { display: none; }
.side__sep { height: 1px; background: var(--line-2); margin: 8px 10px; }
.side__projects { margin-top: 14px; }
.side__h { display: flex; justify-content: space-between; align-items: center; padding: 0 10px; margin-bottom: 4px; font-size: 12.5px; color: var(--ink-3); font-weight: 500; }
.side__h button { border: 0; background: none; width: 22px; height: 22px; border-radius: 6px; color: var(--ink-3); display: grid; place-items: center; }
.side__h button:hover { background: rgba(0,0,0,.05); color: var(--ink); }
.proj-i { display: flex; align-items: center; gap: 10px; height: 30px; padding: 0 10px; border-radius: 8px; text-decoration: none; color: #4a4b50; font-size: 13.5px; }
.proj-i:hover { background: rgba(0, 0, 0, .04); }
.proj-i.is-on { color: var(--ink); background: rgba(0,0,0,.045); }
.proj-i i { width: 8px; height: 8px; border-radius: 3px; flex: none; }
.proj-i span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.proj-i em { font-style: normal; font-size: 11.5px; color: var(--ink-3); }
.side__foot { margin-top: auto; padding-top: 14px; display: grid; gap: 8px; }
.meter { display: block; padding: 12px 12px 11px; border-radius: 12px; text-decoration: none; color: #fff; background: #3c3a9e url(../img/plan-indigo.webp) center 30% / 260px auto; position: relative; overflow: hidden; isolation: isolate; }
.meter::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(18, 14, 80, .38), rgba(18, 14, 80, .55)); }
.meter__row { display: flex; align-items: baseline; gap: 6px; font-size: 12.5px; color: rgba(255,255,255,.85); }
.meter__row b { font: 400 24px/1 var(--serif); color: #fff; font-variant-numeric: tabular-nums; }
.meter__bar { display: block; height: 4px; border-radius: 4px; background: rgba(255,255,255,.22); margin: 9px 0 7px; overflow: hidden; }
.meter__bar i { display: block; height: 100%; background: #fff; border-radius: 4px; transform-origin: left; transition: transform .8s var(--ease); }
.meter__sub { font-size: 11.5px; color: rgba(255,255,255,.75); }
.me { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border: 0; background: none; border-radius: 10px; text-align: left; width: 100%; }
.me:hover, .me[aria-expanded="true"] { background: rgba(0, 0, 0, .04); }
.me img { width: 30px; height: 30px; border-radius: 50%; }
.me span { flex: 1; min-width: 0; }
.me b { display: block; font-weight: 500; font-size: 13.5px; }
.me small { display: block; color: var(--ink-3); font-size: 12px; }
.me .ic { color: var(--ink-3); }
.ariadne { justify-self: start; margin: 2px 0 0 8px; font: 500 12.5px/1 var(--sans); padding: 7px 11px; border-radius: 999px; background: rgba(20, 22, 26, .88); color: #fff; letter-spacing: .01em; box-shadow: 0 0 0 1px rgba(255, 255, 255, .14); opacity: .92; text-decoration: none; }
.ariadne b { font-weight: 600; color: #ff8a3d; }
.scrim { display: none; }

.main { min-width: 0; min-height: 0; margin: 8px 8px 8px 0; background: #fff; border-radius: 14px; box-shadow: 0 0 0 1px rgba(30, 25, 20, .07), 0 2px 10px -4px rgba(30, 25, 20, .08); display: flex; flex-direction: column; overflow: hidden; }
.top { height: 56px; flex: none; display: flex; align-items: center; gap: 12px; padding: 0 16px 0 22px; border-bottom: 1px solid var(--line); }
.top__menu { display: none; }
.crumbs { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; font-size: 14px; white-space: nowrap; overflow: hidden; }
.crumbs a { text-decoration: none; color: var(--ink-3); }
.crumbs a:hover { color: var(--ink); }
.crumbs .sep { color: #cfcdc6; }
.crumbs b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.top__right { display: flex; align-items: center; gap: 8px; }
.top__search { display: flex; align-items: center; gap: 8px; height: 34px; width: 230px; padding: 0 8px 0 10px; border: 0; border-radius: 9px; background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-3); }
.top__search span { flex: 1; text-align: left; font-size: 13.5px; }
.top__search .ic { width: 16px; height: 16px; }
.iconbtn { width: 34px; height: 34px; border-radius: 9px; border: 0; background: none; display: grid; place-items: center; color: #55575d; position: relative; }
.iconbtn:hover, .iconbtn[aria-expanded="true"] { background: var(--hover); color: var(--ink); }
.iconbtn .dot { position: absolute; top: 7px; right: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 2px #fff; }
.iconbtn .dot.is-off { display: none; }
.page { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; outline: 0; position: relative; }
.page__in { padding: 28px 32px 56px; max-width: 1360px; margin: 0 auto; }
.page__in--full { max-width: none; padding: 0; height: 100%; }

/* ---------------- page header ---------------- */
.ph { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 24px; flex-wrap: wrap; }
.ph__t { margin: 0; font: 400 36px/1 var(--serif); letter-spacing: -.012em; }
.ph__t em { font-style: italic; letter-spacing: -.02em; }
.ph__s { margin: 8px 0 0; color: var(--ink-2); font-size: 14.5px; max-width: 46em; }
.ph__a { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ---------------- buttons ---------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 34px; padding: 0 13px; border: 0; border-radius: 9px; background: #fff; box-shadow: 0 0 0 1px var(--line-2), 0 1px 2px rgba(0,0,0,.05); font-weight: 500; font-size: 13.5px; text-decoration: none; white-space: nowrap; color: var(--ink); transition: background .15s, box-shadow .15s; }
.btn:hover { background: var(--paper-2); box-shadow: 0 0 0 1px #d6d4cc, 0 1px 3px rgba(0,0,0,.07); }
.btn .ic { width: 16px; height: 16px; }
.btn--blue { background: var(--blue); color: #fff; box-shadow: 0 1px 2px rgba(10, 60, 160, .3), inset 0 1px 0 rgba(255,255,255,.18); }
.btn--blue:hover { background: #2b80f6; box-shadow: 0 1px 2px rgba(10, 60, 160, .3); }
.btn--dark { background: var(--ink); color: #fff; box-shadow: none; }
.btn--dark:hover { background: #333230; box-shadow: none; }
.btn--danger { color: var(--red); }
.btn--danger.is-solid { background: var(--red); color: #fff; box-shadow: none; }
.btn--ghost { background: none; box-shadow: none; }
.btn--ghost:hover { background: var(--hover); box-shadow: none; }
.btn--sm { height: 28px; padding: 0 10px; font-size: 12.8px; border-radius: 8px; }
.btn--icon { width: 34px; padding: 0; }
.btn--sm.btn--icon { width: 28px; }
.btn[disabled], .btn.is-disabled { opacity: .5; pointer-events: none; }
.btn-split { position: relative; display: inline-flex; align-items: stretch; height: 36px; border: 0; padding: 0; border-radius: 999px; background: linear-gradient(180deg, #1666dd, #0a4fbd); color: #fff; text-decoration: none; font-weight: 500; font-size: 13.5px; box-shadow: 0 1px 2px rgba(10, 60, 160, .3), 0 6px 14px -8px rgba(20, 100, 240, .6); white-space: nowrap; }
.btn-split__label { display: inline-flex; align-items: center; padding: 0 16px 0 18px; border-radius: 999px; background: linear-gradient(180deg, #3289ff 0%, #1a74f2 55%, #1468e6 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 3px 0 6px -1px rgba(4, 30, 90, .38); position: relative; z-index: 1; }
.btn-split__arrow { width: 34px; display: grid; place-items: center; margin-left: -3px; }
.btn-split__arrow .ic { width: 16px; height: 16px; stroke: #fff; transition: transform .25s var(--ease); }
.btn-split:hover .btn-split__label { background: linear-gradient(180deg, #4596ff 0%, #237cf6 55%, #176deb 100%); }
.btn-split:hover .btn-split__arrow .ic { transform: translateX(2px); }
.btn-split--sm { height: 34px; }
.btn-split[disabled] { opacity: .5; pointer-events: none; }
.link { color: var(--blue-d); text-decoration: none; font-weight: 500; display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; padding: 0; }
.link:hover { text-decoration: underline; text-underline-offset: 3px; }
.link .ic { width: 15px; height: 15px; }

/* ---------------- form controls ---------------- */
.field { display: grid; gap: 6px; }
.field > span { font-size: 13px; font-weight: 500; color: #3d3e42; }
.field small { color: var(--ink-3); font-size: 12.5px; }
.input, .select, .textarea { width: 100%; height: 36px; padding: 0 11px; border: 0; border-radius: 9px; background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); font-size: 14px; outline: 0; transition: box-shadow .15s; }
.input:focus, .select:focus, .textarea:focus { box-shadow: inset 0 0 0 1px var(--blue), 0 0 0 3px rgba(26, 116, 242, .14); }
.textarea { height: auto; min-height: 90px; padding: 10px 11px; resize: vertical; line-height: 1.5; }
.select { appearance: none; padding-right: 30px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m6 8 4 4 4-4' fill='none' stroke='%238a8c91' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") right 8px center / 16px no-repeat; }
.search-in { position: relative; }
.search-in .ic { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--ink-3); pointer-events: none; }
.search-in .input { padding-left: 34px; }
.seg { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.seg button { border: 0; background: none; height: 28px; padding: 0 11px; border-radius: 7px; font-size: 13px; font-weight: 500; color: var(--ink-3); display: inline-flex; align-items: center; gap: 6px; }
.seg button .ic { width: 16px; height: 16px; }
.seg button.is-on { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 0 0 1px rgba(0,0,0,.04); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.fchip { border: 0; height: 30px; padding: 0 12px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); font-size: 13px; font-weight: 500; color: #4a4b50; display: inline-flex; align-items: center; gap: 6px; }
.fchip em { font-style: normal; color: var(--ink-3); font-weight: 400; }
.fchip:hover { box-shadow: inset 0 0 0 1px #cfcdc5; }
.fchip.is-on { background: var(--ink); color: #fff; box-shadow: none; }
.fchip.is-on em { color: rgba(255,255,255,.65); }
.switch { position: relative; width: 34px; height: 20px; border-radius: 999px; background: #d9d7d0; border: 0; padding: 0; flex: none; transition: background .2s; }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform .2s var(--ease); }
.switch[aria-checked="true"] { background: var(--blue); }
.switch[aria-checked="true"]::after { transform: translateX(14px); }
.toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.toolbar .grow { flex: 1; }

/* ---------------- cards ---------------- */
.card { background: #fff; border-radius: 14px; box-shadow: 0 0 0 1px var(--line); position: relative; }
.card--paper { background: var(--paper-2); }
.card__h { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px 0; }
.card__h h3 { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.card__h p { margin: 2px 0 0; color: var(--ink-3); font-size: 13px; }
.card__b { padding: 16px 18px 18px; }
.grid { display: grid; gap: 16px; }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-main { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }

/* ---------------- chips ---------------- */
.chip { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 12px; font-weight: 500; white-space: nowrap; background: #f1f0ec; color: #6b6c70; }
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.chip--plain::before { display: none; }
.chip--ok { background: var(--green-bg); color: var(--green); }
.chip--review { background: var(--amber-bg); color: var(--amber); }
.chip--changes { background: var(--red-bg); color: var(--red); }
.chip--blue { background: var(--blue-bg); color: var(--blue-d); }
.chip--violet { background: var(--violet-bg); color: var(--violet); }
.chip--live { background: var(--green-bg); color: var(--green); }
.chip--live::before { box-shadow: 0 0 0 3px rgba(29, 122, 62, .18); }
.chip--run::before { animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .3; } }

/* ---------------- avatars ---------------- */
.av { width: 28px; height: 28px; border-radius: 50%; flex: none; object-fit: cover; display: inline-grid; place-items: center; font-size: 11px; font-weight: 600; background: #eee; }
.av--s { width: 22px; height: 22px; font-size: 9.5px; }
.av--l { width: 40px; height: 40px; font-size: 14px; }
.av--xl { width: 56px; height: 56px; font-size: 18px; }
.av--ai { background: var(--ink); color: #fff; }
.av--ai .mark { width: 72%; height: 72%; }
.av-stack { display: inline-flex; }
.av-stack .av { box-shadow: 0 0 0 2px #fff; }
.av-stack .av + .av { margin-left: -7px; }
.who { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.who b { font-weight: 500; white-space: nowrap; }
.who small { display: block; color: var(--ink-3); font-size: 12px; }

/* ---------------- tables ---------------- */
.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 14px; }
.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tbl th { text-align: left; font-weight: 500; font-size: 12.5px; color: var(--ink-3); padding: 11px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; background: #fff; position: sticky; top: 0; z-index: 1; }
.tbl th button { border: 0; background: none; padding: 0; font: inherit; color: inherit; display: inline-flex; align-items: center; gap: 4px; }
.tbl th button:hover { color: var(--ink); }
.tbl th button .ic { width: 13px; height: 13px; opacity: 0; }
.tbl th button.is-sort .ic { opacity: 1; }
.tbl th button.is-desc .ic { transform: rotate(180deg); }
.tbl td { padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tbody tr { transition: background .12s; }
.tbl tbody tr.is-link { cursor: pointer; }
.tbl tbody tr.is-link:hover { background: var(--paper-2); }
.tbl .r { text-align: right; }
.tbl .nowrap { white-space: nowrap; }
.cell-proj { display: flex; align-items: center; gap: 11px; min-width: 220px; }
.cell-proj b { font-weight: 500; display: block; }
.cell-proj small { color: var(--ink-3); font-size: 12.5px; }
.picon { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; color: #fff; flex: none; }
.picon .ic { width: 17px; height: 17px; }
.empty-row td { text-align: center; padding: 40px 14px; color: var(--ink-3); }

/* ---------------- KPIs ---------------- */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-radius: 14px; box-shadow: 0 0 0 1px var(--line); overflow: hidden; }
.kpi { padding: 16px 18px 18px; border-left: 1px solid var(--line); background: #fff; min-width: 0; }
.kpi:first-child { border-left: 0; }
.kpi > span { font-size: 13px; color: var(--ink-3); display: flex; align-items: center; gap: 6px; }
.kpi b { display: block; font: 400 34px/1.1 var(--serif); margin-top: 8px; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.kpi b small { font: 400 15px var(--sans); color: var(--ink-3); margin-left: 4px; }
.kpi p { margin: 4px 0 0; font-size: 12.5px; color: var(--ink-3); }
.bar { height: 6px; border-radius: 6px; background: #efeee9; overflow: hidden; margin-top: 10px; }
.bar i { display: block; height: 100%; background: var(--blue); border-radius: 6px; transform-origin: left; }

/* ---------------- charts ---------------- */
.chart { position: relative; }
.chart svg { display: block; width: 100%; overflow: visible; }
.chart .gl { stroke: #efeee9; stroke-width: 1; }
.chart .gl--base { stroke: #dedcd5; }
.chart .ax { font: 400 11px var(--sans); fill: var(--ink-3); }
.chart .bar-r { transition: opacity .15s; }
.chart .proj { fill: none; stroke: var(--ink-4); stroke-width: 1.4; stroke-dasharray: 4 4; }
.chart .limit { stroke: var(--red); stroke-width: 1; stroke-dasharray: 3 4; opacity: .6; }
.chart .limit-t { font: 500 11px var(--sans); fill: var(--red); opacity: .8; }
.chart-tip { position: absolute; pointer-events: none; background: var(--ink); color: #fff; font-size: 12px; padding: 7px 9px; border-radius: 8px; white-space: nowrap; transform: translate(-50%, -100%); margin-top: -8px; opacity: 0; transition: opacity .12s; z-index: 2; }
.chart-tip.is-on { opacity: 1; }
.chart-tip b { font-weight: 600; }
.chart-tip span { display: flex; align-items: center; gap: 6px; color: rgba(255,255,255,.8); }
.chart-tip i { width: 7px; height: 7px; border-radius: 2px; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-2); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 9px; height: 9px; border-radius: 3px; }

/* ---------------- popovers, menus ---------------- */
.pop { position: fixed; z-index: 80; background: #fff; border-radius: 12px; box-shadow: var(--sh-pop); padding: 6px; min-width: 210px; animation: popin .16s var(--ease); max-height: calc(100vh - 24px); overflow-y: auto; }
@keyframes popin { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
.menu__i { display: flex; align-items: center; gap: 10px; width: 100%; height: 34px; padding: 0 10px; border: 0; background: none; border-radius: 8px; text-align: left; font-size: 13.5px; color: var(--ink); text-decoration: none; }
.menu__i:hover, .menu__i:focus-visible { background: var(--hover); outline: 0; }
.menu__i .ic { width: 16px; height: 16px; color: var(--ink-3); }
.menu__i span { flex: 1; }
.menu__i kbd { margin-left: auto; }
.menu__i.is-danger { color: var(--red); }
.menu__i.is-danger .ic { color: var(--red); }
.menu__i.is-on::after { content: ""; width: 8px; height: 5px; border: solid var(--blue); border-width: 0 0 1.8px 1.8px; transform: rotate(-45deg) translateY(-2px); }
.menu__sep { height: 1px; background: var(--line); margin: 5px 4px; }
.menu__h { padding: 8px 10px 4px; font-size: 12px; color: var(--ink-3); }
.menu__ws { display: flex; align-items: center; gap: 10px; }
.menu__ws i { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; font-style: normal; font-size: 10.5px; font-weight: 600; flex: none; }
.notif { width: 360px; padding: 0; }
.notif__h { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.notif__h b { font-weight: 600; }
.notif__i { display: flex; gap: 11px; padding: 12px 14px; text-decoration: none; border-bottom: 1px solid var(--line); position: relative; }
.notif__i:last-child { border-bottom: 0; }
.notif__i:hover { background: var(--paper-2); }
.notif__i p { margin: 0; font-size: 13.5px; line-height: 1.4; }
.notif__i small { color: var(--ink-3); font-size: 12px; }
.notif__i.is-unread::after { content: ""; position: absolute; right: 14px; top: 17px; width: 7px; height: 7px; border-radius: 50%; background: var(--blue); }
.notif__i.is-unread p { font-weight: 500; padding-right: 14px; }
.notif__ic { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--paper); color: var(--ink-2); }
.notif__ic .ic { width: 15px; height: 15px; }

/* ---------------- modal, drawer ---------------- */
.layer-bg { position: fixed; inset: 0; z-index: 90; background: rgba(28, 24, 18, .32); animation: fadein .18s ease; }
@keyframes fadein { from { opacity: 0; } }
.modal { position: fixed; z-index: 91; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(540px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); display: flex; flex-direction: column; background: #fff; border-radius: 16px; box-shadow: 0 30px 80px -20px rgba(30, 20, 10, .45), 0 0 0 1px rgba(30, 25, 20, .06); animation: modalin .22s var(--ease); }
.modal--wide { width: min(860px, calc(100vw - 24px)); }
.modal--xl { width: min(1040px, calc(100vw - 24px)); }
@keyframes modalin { from { opacity: 0; transform: translate(-50%, calc(-50% + 10px)) scale(.985); } }
.modal__h { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 20px 22px 0; }
.modal__h h2 { margin: 0; font: 400 28px/1.05 var(--serif); letter-spacing: -.01em; }
.modal__h p { margin: 6px 0 0; color: var(--ink-2); font-size: 14px; }
.modal__b { padding: 18px 22px; overflow-y: auto; display: grid; gap: 16px; }
.modal__f { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 22px 18px; border-top: 1px solid var(--line); align-items: center; }
.modal__f .grow { flex: 1; color: var(--ink-3); font-size: 13px; }
.drawer:focus { outline: 0; }
.drawer { position: fixed; z-index: 91; top: 8px; right: 8px; bottom: 8px; width: min(520px, calc(100vw - 16px)); background: #fff; border-radius: 16px; box-shadow: 0 30px 80px -20px rgba(30, 20, 10, .45); display: flex; flex-direction: column; animation: drawin .26s var(--ease); }
@keyframes drawin { from { transform: translateX(24px); opacity: 0; } }
.drawer__h { display: flex; justify-content: space-between; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.drawer__h h2 { margin: 0; font: 400 26px/1.05 var(--serif); }
.drawer__h p { margin: 4px 0 0; color: var(--ink-3); font-size: 13px; }
.drawer__b { flex: 1; overflow-y: auto; padding: 18px 20px; display: grid; gap: 18px; align-content: start; }
.drawer__f { padding: 14px 20px; border-top: 1px solid var(--line); display: flex; gap: 8px; justify-content: flex-end; }
.kv { display: grid; grid-template-columns: 130px 1fr; gap: 10px 14px; font-size: 13.5px; margin: 0; }
.kv dt { color: var(--ink-3); }
.kv dd { margin: 0; min-width: 0; }
.log { background: #1d1c1a; color: #d9d6cc; border-radius: 12px; padding: 14px; font: 12px/1.65 var(--mono); overflow-x: auto; white-space: pre; }
.log .ok { color: #8fd19e; }
.log .dim { color: #8d8a80; }
.log .warn { color: #ffcf7a; }
.log .err { color: #ff8f80; }
.checks { display: grid; gap: 8px; }
.checks li { display: flex; gap: 10px; align-items: center; font-size: 13.5px; }
.checks { list-style: none; margin: 0; padding: 0; }
.checks .ic { width: 16px; height: 16px; color: var(--green); }

/* palette */
.palette { position: fixed; z-index: 95; left: 50%; top: 14vh; transform: translateX(-50%); width: min(620px, calc(100vw - 24px)); background: #fff; border-radius: 16px; box-shadow: 0 30px 80px -20px rgba(30, 20, 10, .5), 0 0 0 1px rgba(30,25,20,.06); overflow: hidden; animation: palin .18s var(--ease); }
@keyframes palin { from { opacity: 0; transform: translate(-50%, -6px); } }
.palette__in { display: flex; align-items: center; gap: 10px; padding: 0 16px; border-bottom: 1px solid var(--line); }
.palette__in .ic { color: var(--ink-3); }
.palette__in input { flex: 1; height: 54px; border: 0; outline: 0; font-size: 16px; background: none; }
.palette__list { max-height: min(420px, 56vh); overflow-y: auto; padding: 6px; }
.palette__g { padding: 8px 10px 4px; font-size: 12px; color: var(--ink-3); }
.palette__i { display: flex; align-items: center; gap: 11px; height: 40px; padding: 0 10px; border-radius: 9px; cursor: pointer; font-size: 14px; }
.palette__i .ic { width: 17px; height: 17px; color: var(--ink-3); }
.palette__i span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.palette__i small { color: var(--ink-3); font-size: 12.5px; }
.palette__i.is-sel { background: var(--hover); }
.palette__i.is-sel .ic { color: var(--ink); }
.palette__f { display: flex; gap: 14px; padding: 9px 14px; border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-3); background: var(--paper-2); }
.palette__empty { padding: 28px; text-align: center; color: var(--ink-3); }

/* toasts */
.toasts { position: fixed; z-index: 99; left: 50%; bottom: 20px; transform: translateX(-50%); display: grid; gap: 8px; justify-items: center; pointer-events: none; }
.toast { pointer-events: auto; display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 6px 6px 6px 14px; border-radius: 12px; background: #1d1c1a; color: #fff; font-size: 13.5px; box-shadow: 0 16px 34px -14px rgba(0,0,0,.5); animation: toastin .28s var(--ease); max-width: calc(100vw - 24px); }
.toast.is-out { animation: toastout .22s ease forwards; }
@keyframes toastin { from { opacity: 0; transform: translateY(10px); } }
@keyframes toastout { to { opacity: 0; transform: translateY(6px); } }
.toast .ic { color: #8fd19e; width: 17px; height: 17px; }
.toast button { border: 0; height: 32px; padding: 0 11px; border-radius: 8px; background: rgba(255,255,255,.1); color: #fff; font-weight: 500; font-size: 13px; display: inline-flex; align-items: center; gap: 6px; }
.toast button:hover { background: rgba(255,255,255,.18); }
.toast button .ic { color: #fff; width: 15px; height: 15px; }
.toast .x { width: 32px; padding: 0; justify-content: center; background: none; }

/* tooltip */
.tip { position: fixed; z-index: 120; pointer-events: none; background: var(--ink); color: #fff; font-size: 12px; padding: 5px 8px; border-radius: 7px; white-space: nowrap; opacity: 0; transform: translateY(2px); transition: opacity .12s, transform .12s; }
.tip.is-on { opacity: 1; transform: none; }
.tip kbd { font: 500 11px var(--sans); color: rgba(255,255,255,.7); margin-left: 6px; }

/* tabs */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 20px; overflow-x: auto; scrollbar-width: none; }
.tabs a, .tabs button { border: 0; background: none; padding: 10px 12px; font-size: 14px; font-weight: 500; color: var(--ink-3); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; display: inline-flex; align-items: center; gap: 7px; }
.tabs a:hover, .tabs button:hover { color: var(--ink); }
.tabs .is-on { color: var(--ink); border-bottom-color: var(--ink); }
.tabs em { font-style: normal; font-size: 12px; color: var(--ink-3); background: var(--paper); padding: 1px 7px; border-radius: 999px; }

/* empty state with construction lines */
.empty { position: relative; text-align: center; padding: 56px 20px; overflow: hidden; border-radius: 14px; box-shadow: 0 0 0 1px var(--line); }
.empty svg.cl { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.empty svg.cl * { fill: none; stroke: #ebe8e1; stroke-width: 1; }
.empty > *:not(svg) { position: relative; }
.empty h3 { margin: 0; font: 400 26px/1.1 var(--serif); }
.empty p { margin: 8px auto 18px; max-width: 30em; color: var(--ink-2); }
.empty img.fig { width: 120px; margin: 0 auto 10px; }

/* ---------------- overview ---------------- */
.hello { position: relative; padding: 26px 26px 24px; border-radius: 16px; box-shadow: 0 0 0 1px var(--line); overflow: hidden; margin-bottom: 16px; min-height: 238px; }
.hello svg.cl { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hello svg.cl * { fill: none; stroke: #ece9e2; stroke-width: 1; }
.hello__fig { position: absolute; right: 24px; bottom: -64px; width: 210px; pointer-events: none; -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent); mask-image: linear-gradient(180deg, #000 70%, transparent); }
.hello__in { position: relative; max-width: 640px; }
.hello h1 { margin: 0; font: 400 40px/1 var(--serif); letter-spacing: -.012em; }
.hello h1 em { font-style: italic; }
.hello > .hello__in > p { margin: 10px 0 0; color: var(--ink-2); font-size: 15px; }
.next { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 22px; position: relative; max-width: calc(100% - 230px); }
.next__i { background: rgba(255,255,255,.88); backdrop-filter: blur(4px); border-radius: 12px; box-shadow: 0 0 0 1px var(--line), 0 6px 16px -10px rgba(40, 30, 20, .2); padding: 14px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.next__i small { color: var(--ink-3); font-size: 12px; display: flex; align-items: center; gap: 6px; }
.next__i b { font-weight: 600; font-size: 14px; }
.next__i p { margin: 0; color: var(--ink-2); font-size: 13px; }
.next__i .row { display: flex; gap: 6px; margin-top: auto; padding-top: 4px; flex-wrap: wrap; }
.feed { list-style: none; margin: 0; padding: 0; }
.feed li { display: flex; gap: 12px; padding: 10px 0; position: relative; }
.feed li:not(:last-child)::before { content: ""; position: absolute; left: 13px; top: 40px; bottom: -4px; width: 1px; background: var(--line); }
.feed p { margin: 0; font-size: 13.5px; }
.feed p b { font-weight: 500; }
.feed small { color: var(--ink-3); font-size: 12px; }
.feed .ficon { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--paper); color: var(--ink-2); flex: none; box-shadow: 0 0 0 4px #fff; }
.feed .ficon .ic { width: 15px; height: 15px; }
.plist { list-style: none; margin: 0; padding: 0; }
.plist li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.plist li:first-child { border-top: 0; }
.plist a { text-decoration: none; }
.plist .cell-proj { min-width: 0; flex: 1; }

/* ---------------- projects ---------------- */
.pcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.pcard { text-decoration: none; display: flex; flex-direction: column; border-radius: 14px; box-shadow: 0 0 0 1px var(--line); overflow: hidden; background: #fff; transition: box-shadow .2s, transform .2s var(--ease); }
.pcard:hover { box-shadow: 0 0 0 1px #dcd9d1, 0 12px 26px -16px rgba(40,30,20,.35); transform: translateY(-1px); }
.pcard__shot { height: 150px; background: var(--paper); border-bottom: 1px solid var(--line); padding: 14px 14px 0; overflow: hidden; }
.pcard__b { padding: 14px; display: grid; gap: 8px; }
.pcard__b h3 { margin: 0; font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.pcard__b p { margin: 0; color: var(--ink-3); font-size: 13px; }
.pcard__f { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 4px; }

/* mini thumbnails (CSS mock screens) */
.mini { background: #fff; border-radius: 9px 9px 0 0; box-shadow: 0 0 0 1px var(--line), 0 6px 16px -10px rgba(0,0,0,.2); height: 100%; padding: 9px; display: grid; gap: 6px; align-content: start; --a: #2d6b58; }
.mini__bar { display: flex; gap: 6px; align-items: center; }
.mini__bar i { height: 6px; border-radius: 3px; background: #eceae4; }
.mini__bar i:first-child { width: 34px; background: var(--a); }
.mini__h { height: 9px; width: 46%; border-radius: 3px; background: #2a2a2a; opacity: .82; }
.mini__row { display: grid; gap: 5px; }
.mini__row--3 { grid-template-columns: repeat(3, 1fr); }
.mini__row--4 { grid-template-columns: repeat(4, 1fr); }
.mini__row--2 { grid-template-columns: 1fr 1fr; }
.mini__row--side { grid-template-columns: 26% 1fr; }
.mini__box { height: 26px; border-radius: 5px; box-shadow: inset 0 0 0 1px #e6e4de; }
.mini__box--a { background: var(--a); box-shadow: none; }
.mini__box--t { height: 16px; }
.mini__box--tall { height: 60px; }
.mini__box--sel { box-shadow: inset 0 0 0 1.5px var(--a); }
.mini__line { height: 5px; border-radius: 3px; background: #eceae4; }
.mini__line--s { width: 60%; }
.mini__phone { width: 44%; margin: 0 auto; height: 128px; border-radius: 12px; box-shadow: 0 0 0 3px #222, 0 8px 16px -8px rgba(0,0,0,.4); background: #fff; padding: 8px 6px; display: grid; gap: 5px; align-content: start; }
.mini__chart { height: 46px; border-radius: 5px; background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,.03)), repeating-linear-gradient(90deg, transparent 0 10px, rgba(0,0,0,.025) 10px 11px); position: relative; overflow: hidden; box-shadow: inset 0 0 0 1px #e6e4de; }
.mini__chart::after { content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 26px; background: var(--a); opacity: .16; clip-path: polygon(0 80%, 15% 60%, 30% 70%, 45% 40%, 60% 50%, 75% 20%, 90% 30%, 100% 5%, 100% 100%, 0 100%); }
.mini__kan { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.mini__kan div { display: grid; gap: 4px; align-content: start; padding: 4px; border-radius: 5px; background: #f6f5f1; }
.mini__kan i { height: 14px; border-radius: 3px; background: #fff; box-shadow: 0 0 0 1px #e6e4de; }
.mini__kan i:first-child { background: var(--a); opacity: .85; box-shadow: none; }
.mini__map { height: 64px; border-radius: 5px; background: #eef1ec; position: relative; overflow: hidden; background-image: linear-gradient(#e2e6df 1px, transparent 1px), linear-gradient(90deg, #e2e6df 1px, transparent 1px); background-size: 14px 14px; }
.mini__map i { position: absolute; width: 20px; height: 14px; border-radius: 3px; background: var(--a); opacity: .75; }

/* ---------------- builder ---------------- */
.bld { display: grid; grid-template-columns: 360px minmax(0, 1fr) 0; height: 100%; min-height: 0; transition: grid-template-columns .3s var(--ease); }
.bld.has-versions { grid-template-columns: 360px minmax(0, 1fr) 290px; }
.bld__chat { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line); }
.bld__chath { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.bld__chath .who b { font-size: 14px; }
.bld__msgs { flex: 1; overflow-y: auto; padding: 16px 14px 10px; display: flex; flex-direction: column; gap: 16px; }
.bm { display: flex; gap: 10px; align-items: flex-start; }
.bm__b { min-width: 0; flex: 1; }
.bm__who { display: flex; gap: 8px; align-items: baseline; font-size: 12.5px; color: var(--ink-3); margin-bottom: 4px; }
.bm__who b { color: var(--ink); font-weight: 500; }
.bm__t { font-size: 13.8px; line-height: 1.55; color: #2c2c2e; }
.bm--me .bm__t { background: var(--paper); padding: 9px 12px; border-radius: 4px 12px 12px 12px; }
.bm__t p { margin: 0 0 6px; }
.bm__t p:last-child { margin-bottom: 0; }
.bsteps { list-style: none; margin: 8px 0 0; padding: 10px 12px; display: grid; gap: 7px; border-radius: 10px; box-shadow: 0 0 0 1px var(--line); background: #fff; }
.bsteps li { display: flex; gap: 9px; align-items: center; font-size: 13px; color: #9a9ba0; }
.bsteps li i { width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid #d6d4cd; flex: none; position: relative; }
.bsteps li.is-run { color: #2c2c2e; }
.bsteps li.is-run i { border-color: var(--blue); border-right-color: transparent; animation: spin .8s linear infinite; }
.bsteps li.is-done { color: #2c2c2e; }
.bsteps li.is-done i { background: var(--blue); border-color: var(--blue); }
.bsteps li.is-done i::after { content: ""; position: absolute; left: 4px; top: 1.5px; width: 3.5px; height: 7px; border: solid #fff; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
@keyframes spin { to { transform: rotate(360deg); } }
.bsys { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; font-size: 13px; color: var(--ink-2); background: var(--paper-2); box-shadow: 0 0 0 1px var(--line); }
.bsys b { color: var(--ink); font-weight: 500; }
.bsys .chip { margin-left: auto; }
.bsys--ok { background: #f3faf5; box-shadow: 0 0 0 1px #d8eedf; }
.bsys--warn { background: #fff9f2; box-shadow: 0 0 0 1px #f4e3cb; }
.bld__compose { padding: 10px 12px 12px; border-top: 1px solid var(--line); display: grid; gap: 8px; }
.draftbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12.5px; color: var(--ink-3); }
.draftbar b { color: var(--ink); font-weight: 500; }
.sugs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); }
.sugs button { flex: none; border: 0; height: 28px; padding: 0 10px; border-radius: 999px; background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--line-2); font-size: 12.5px; color: #4a4b50; }
.sugs button:hover { background: #fff; color: var(--ink); }
.composer { border-radius: 12px; box-shadow: 0 0 0 1px var(--line-2), 0 2px 6px rgba(0,0,0,.04); background: #fff; padding: 8px 8px 8px 12px; display: grid; gap: 6px; }
.composer:focus-within { box-shadow: 0 0 0 1px var(--blue), 0 0 0 3px rgba(26,116,242,.12); }
.composer textarea { border: 0; outline: 0; resize: none; min-height: 44px; max-height: 160px; font-size: 14px; line-height: 1.5; background: none; padding: 2px 0; }
.composer__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--ink-3); }
.composer__send { width: 30px; height: 30px; border: 0; border-radius: 9px; background: var(--blue); color: #fff; display: grid; place-items: center; }
.composer__send:disabled { background: #d9d7d0; }
.composer__send .ic { width: 16px; height: 16px; }
.bld__stage { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--paper); }
.bld__bar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--line); background: #fff; flex-wrap: wrap; }
.bld__bar .grow { flex: 1; }
.urlbar { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px; border-radius: 8px; background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--line); font-size: 12.5px; color: var(--ink-2); min-width: 0; max-width: 360px; flex: 1 1 160px; }
.rv-sel { display: none; }
.urlbar .ic { width: 14px; height: 14px; color: var(--green); }
.urlbar span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bld__view { flex: 1; min-height: 0; overflow: auto; display: flex; justify-content: center; align-items: flex-start; padding: 22px; }
.device { width: 100%; max-width: 1020px; transition: max-width .35s var(--ease); }
.device.is-phone { max-width: 390px; }
.device.is-phone .pv { border-radius: 26px; box-shadow: 0 0 0 7px #1d1c1a, 0 30px 60px -30px rgba(0,0,0,.5); min-height: 720px; }
.viewing { display: flex; align-items: center; gap: 8px; justify-content: center; margin: -8px 0 12px; font-size: 12.5px; color: var(--amber); }
.code { display: grid; grid-template-columns: 220px minmax(0, 1fr); width: 100%; max-width: 1100px; min-height: 560px; background: #fff; border-radius: 12px; box-shadow: 0 0 0 1px var(--line); overflow: hidden; }
.code__tree { border-right: 1px solid var(--line); padding: 10px; font-size: 13px; background: var(--paper-2); }
.code__tree button { display: flex; width: 100%; align-items: center; gap: 7px; border: 0; background: none; padding: 5px 8px; border-radius: 7px; text-align: left; color: #4a4b50; font-family: var(--mono); font-size: 12px; }
.code__tree button.is-on { background: #fff; color: var(--ink); box-shadow: var(--sh-1); }
.code__tree .dir { color: var(--ink-3); font-size: 12px; padding: 8px 8px 3px; font-family: var(--mono); }
.code__src { margin: 0; padding: 14px 0; font: 12.5px/1.7 var(--mono); overflow: auto; counter-reset: ln; }
.code__src span.l { display: block; padding: 0 16px 0 0; white-space: pre; }
.code__src span.l::before { counter-increment: ln; content: counter(ln); display: inline-block; width: 42px; padding-right: 14px; text-align: right; color: #c4c2bb; }
.code__src span.l.is-new { background: #f0f8f2; }
.code__src span.l.is-new::before { color: #6cb383; }
.tk-k { color: #a33b8f; } .tk-s { color: #2d6b58; } .tk-c { color: #9a9890; font-style: italic; } .tk-f { color: #1a5fd0; } .tk-n { color: #b0562b; }
.bld__vers { border-left: 1px solid var(--line); min-width: 0; overflow: hidden; display: flex; flex-direction: column; visibility: hidden; }
.bld.has-versions .bld__vers { visibility: visible; }
.bld__versh { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.bld__versh b { font-weight: 600; }
.vlist { flex: 1; overflow-y: auto; padding: 8px; list-style: none; margin: 0; }
.vlist li { padding: 10px; border-radius: 10px; cursor: pointer; display: grid; gap: 5px; }
.vlist li:hover { background: var(--paper-2); }
.vlist li.is-on { background: var(--paper); box-shadow: inset 0 0 0 1px var(--line-2); }
.vlist .vrow { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.vlist b { font-weight: 600; font-size: 13.5px; }
.vlist p { margin: 0; font-size: 12.5px; color: var(--ink-2); line-height: 1.4; }
.vlist small { color: var(--ink-3); font-size: 11.5px; }
.vlist .live-tag { font-size: 11px; color: var(--green); font-weight: 600; }

/* Calder mini app in the preview */
.pv { --pv: #2d6b58; background: #fff; border-radius: 12px; box-shadow: 0 0 0 1px var(--line), 0 18px 40px -24px rgba(0,0,0,.25); padding: 0 24px 22px; display: flex; flex-direction: column; gap: 16px; font-size: 13.5px; color: #26302c; min-height: 600px; position: relative; }
.pv__top { display: flex; justify-content: space-between; align-items: center; height: 56px; border-bottom: 1px solid #eef0ee; margin: 0 -24px; padding: 0 24px; }
.pv__logo { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: 15px; color: var(--pv); }
.pv__logo svg { width: 17px; height: 17px; fill: var(--pv); }
.pv__nav { display: inline-flex; align-items: center; gap: 14px; color: #6a736f; font-size: 13px; }
.pv__avatar { width: 28px; height: 28px; border-radius: 50%; background: #e3efe9; color: var(--pv); display: grid; place-items: center; font-size: 11px; font-weight: 600; }
.pv__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.pv__head h4 { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -.015em; }
.pv__sub { margin: 3px 0 0; color: #5d6762; }
.pv__stepper { list-style: none; display: flex; gap: 5px; padding: 0; margin: 0; flex-wrap: wrap; }
.pv__stepper li { padding: 4px 11px; border-radius: 999px; background: #f1f4f2; color: #6f7a75; font-size: 12px; }
.pv__stepper .is-done { background: #e3efe9; color: var(--pv); }
.pv__stepper .is-on { background: var(--pv); color: #fff; }
.pv__days { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.pv__days span { text-align: center; padding: 9px 0; border-radius: 10px; box-shadow: 0 0 0 1px #e3e8e5; color: #5d6762; font-size: 12px; }
.pv__days b { display: block; font-size: 18px; color: #26302c; font-weight: 600; }
.pv__days .is-sel { background: var(--pv); color: #d8ebe3; box-shadow: none; }
.pv__days .is-sel b { color: #fff; }
.pv__slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.pv__slots span { position: relative; text-align: center; padding: 10px 0; border-radius: 9px; box-shadow: 0 0 0 1px #dfe5e1; font-weight: 500; font-variant-numeric: tabular-nums; }
.pv__slots .is-off { color: #a9b1ad; box-shadow: none; background: #f4f6f5; text-decoration: line-through; }
.pv__slots .is-sel { background: var(--pv); color: #fff; box-shadow: none; }
.pv__slots .wl { color: var(--pv); box-shadow: 0 0 0 1px #cfe2d9; background: #f6faf8; font-size: 12px; text-decoration: none; }
.pv__opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pv__opt { padding: 11px 13px; border-radius: 10px; box-shadow: 0 0 0 1px #e3e8e5; }
.pv__opt b { display: block; font-weight: 600; }
.pv__opt span { color: #5d6762; font-size: 12.5px; }
.pv__opt.is-sel { box-shadow: 0 0 0 1.5px var(--pv); background: #f6faf8; }
.pv__note { margin: 0; color: #4f5b55; font-size: 12.5px; display: flex; align-items: center; gap: 7px; }
.pv__note::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #8fbca9; flex: none; }
.pv__foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-top: 14px; border-top: 1px solid #eef0ee; color: #4f5b55; flex-wrap: wrap; }
.pv__foot b { background: var(--pv); color: #fff; padding: 10px 18px; border-radius: 9px; font-weight: 500; }
.pv__sum { display: grid; gap: 8px; padding: 14px; border-radius: 12px; background: #f7f9f8; box-shadow: inset 0 0 0 1px #e8ede9; }
.pv__sum div { display: flex; justify-content: space-between; gap: 10px; }
.pv__sum span { color: #5d6762; }
.pv__card { display: grid; gap: 8px; }
.pv__card label { font-size: 12.5px; color: #5d6762; }
.pv__card div { height: 42px; border-radius: 9px; box-shadow: inset 0 0 0 1px #dfe5e1; display: flex; align-items: center; padding: 0 12px; color: #4f5b55; font-variant-numeric: tabular-nums; }
.pv__toggle { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 13px; border-radius: 10px; box-shadow: 0 0 0 1px #e3e8e5; }
.pv__toggle i { width: 34px; height: 20px; border-radius: 999px; background: var(--pv); position: relative; flex: none; }
.pv__toggle i::after { content: ""; position: absolute; right: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; }
.pv__filters { display: flex; gap: 6px; flex-wrap: wrap; }
.pv__filters span { padding: 5px 11px; border-radius: 999px; box-shadow: 0 0 0 1px #dfe5e1; font-size: 12.5px; }
.pv__filters .is-on { background: var(--pv); color: #fff; box-shadow: none; }
.pv__day { display: grid; grid-template-columns: 48px repeat(3, minmax(0, 1fr)); border-radius: 10px; box-shadow: 0 0 0 1px #e3e8e5; overflow: hidden; font-size: 12px; }
.pv__day > div { border-left: 1px solid #eef0ee; position: relative; min-height: 440px; }
.pv__day > div:first-child { border-left: 0; }
.pv__day .hd { height: 34px; display: flex; align-items: center; justify-content: center; font-weight: 600; border-bottom: 1px solid #eef0ee; background: #fafbfa; }
.pv__day .hr { position: absolute; left: 0; right: 0; height: 1px; background: #f1f3f2; }
.pv__day .t { position: absolute; left: 6px; color: #8a938f; font-size: 11px; }
.pv__day .bk { position: absolute; left: 5px; right: 5px; border-radius: 7px; padding: 5px 7px; background: #e3efe9; color: #1f4d3f; font-size: 11.5px; line-height: 1.3; overflow: hidden; box-shadow: inset 3px 0 0 var(--pv); }
.pv__day .bk b { display: block; font-weight: 600; }
.pv__day .bk.new { background: #fff3e0; color: #7a4a00; box-shadow: inset 3px 0 0 #e08a1e; }
.pv__banner { padding: 10px 13px; border-radius: 10px; background: #f6faf8; box-shadow: inset 0 0 0 1px #cfe2d9; color: #1f4d3f; font-size: 12.5px; display: flex; gap: 8px; align-items: center; }
.pv__banner::before { content: "New"; font-size: 11px; font-weight: 600; color: #fff; background: var(--pv); padding: 2px 7px; border-radius: 999px; }
.pv-phone { display: grid; gap: 12px; }
.pv-phone .tile { padding: 14px; border-radius: 14px; box-shadow: 0 0 0 1px #e3e8e5; }
.pv-phone .tile b { display: block; font-size: 15px; }
.pv-phone .tile span { color: #5d6762; font-size: 12.5px; }
.pv-phone .vid { height: 150px; border-radius: 14px; background: linear-gradient(135deg, #cfe0d7, #9fc0b0); position: relative; }
.pv-phone .vid::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-40%, -50%); border-style: solid; border-width: 12px 0 12px 19px; border-color: transparent transparent transparent #fff; }
.pv-phone .streak { display: flex; gap: 6px; }
.pv-phone .streak i { flex: 1; height: 30px; border-radius: 8px; background: #e3efe9; }
.pv-phone .streak i.on { background: var(--pv); }
.pv-phone .row { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid #eef0ee; }

/* pins on review screens */
.pin { position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50% 50% 50% 4px; background: var(--blue); color: #fff; font: 600 12px/26px var(--sans); text-align: center; border: 0; padding: 0; box-shadow: 0 0 0 3px #fff, 0 6px 14px -4px rgba(10, 70, 200, .55); z-index: 3; transition: transform .2s var(--ease), background .2s; }
.pin:hover { transform: scale(1.12); }
.pin.is-done { background: var(--green); box-shadow: 0 0 0 3px #fff, 0 6px 14px -4px rgba(20, 120, 60, .5); }
.pin.is-note { background: #8a8c91; }
.pin.is-active { transform: scale(1.18); box-shadow: 0 0 0 3px #fff, 0 0 0 6px rgba(26,116,242,.3); }
.pin.is-new { background: var(--ink); }

/* ---------------- review detail ---------------- */
.rvd { display: grid; grid-template-columns: 200px minmax(0, 1fr) 380px; height: 100%; min-height: 0; }
.rvd__screens { border-right: 1px solid var(--line); overflow-y: auto; padding: 12px; display: grid; gap: 10px; align-content: start; background: var(--paper-2); }
.rvd__screens h4 { margin: 2px 4px 2px; font-size: 12.5px; font-weight: 500; color: var(--ink-3); }
.scr { border: 0; background: none; padding: 0; text-align: left; display: grid; gap: 6px; }
.scr__t { height: 108px; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px var(--line); overflow: hidden; position: relative; padding: 8px; }
.scr.is-on .scr__t { box-shadow: 0 0 0 2px var(--blue); }
.scr span { font-size: 12.5px; font-weight: 500; display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 0 2px; }
.scr em { font-style: normal; font-size: 11px; color: var(--ink-3); background: #fff; box-shadow: 0 0 0 1px var(--line); border-radius: 999px; padding: 1px 6px; }
.rvd__stage { min-width: 0; display: flex; flex-direction: column; background: var(--paper); }
.rvd__bar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: #fff; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.rvd__bar .grow { flex: 1; }
.rvd__view { flex: 1; overflow: auto; padding: 26px; display: flex; justify-content: center; align-items: flex-start; }
.rvd__frame { position: relative; width: 100%; max-width: 760px; }
.rvd__frame.is-commenting { cursor: crosshair; }
.rvd__frame.is-commenting .pv { box-shadow: 0 0 0 2px var(--ink), 0 18px 40px -24px rgba(0,0,0,.25); }
.rvd__frame.is-phone { max-width: 390px; }
.rvd__frame.is-phone .pv { border-radius: 26px; box-shadow: 0 0 0 7px #1d1c1a; }
.rvd__threads { border-left: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; }
.rvd__th { padding: 14px 16px 0; border-bottom: 1px solid var(--line); }
.rvd__list { flex: 1; overflow-y: auto; padding: 12px; display: grid; gap: 10px; align-content: start; }
.verdict { display: flex; gap: 10px; padding: 12px; border-radius: 12px; background: #f1f9f3; box-shadow: inset 0 0 0 1px #d6ecdc; font-size: 13px; color: #24563a; }
.verdict .ic { color: var(--green); width: 20px; height: 20px; margin-top: 1px; }
.verdict b { display: block; color: #17482d; font-weight: 600; }
.verdict p { margin: 3px 0 0; }
.verdict--wait { background: #fff8ee; box-shadow: inset 0 0 0 1px #f2e2c8; color: #6e4a12; }
.verdict--wait .ic { color: var(--amber); }
.verdict--wait b { color: #5a3a08; }
.th { border-radius: 12px; box-shadow: 0 0 0 1px var(--line); background: #fff; transition: box-shadow .2s; }
.th.is-active { box-shadow: 0 0 0 1.5px var(--blue), 0 8px 20px -12px rgba(26,116,242,.4); }
.th__h { display: flex; align-items: center; gap: 8px; padding: 11px 12px 0; cursor: pointer; }
.th__h .pin { position: static; margin: 0; width: 20px; height: 20px; line-height: 20px; font-size: 10.5px; box-shadow: none; flex: none; }
.th__h .pin:hover { transform: none; }
.th__h b { flex: 1; font-weight: 500; font-size: 13.5px; }
.th__b { padding: 6px 12px 12px; }
.th__c { display: flex; gap: 9px; padding-top: 10px; }
.th__c + .th__c { border-top: 1px dashed var(--line-2); margin-top: 10px; }
.th__c p { margin: 3px 0 0; font-size: 13px; color: #3a3b3f; line-height: 1.5; }
.th__c small { color: var(--ink-3); font-size: 11.5px; }
.th__c .fixline { color: var(--green); font-size: 12px; font-weight: 500; display: inline-flex; gap: 4px; align-items: center; }
.th__f { display: flex; gap: 6px; padding: 0 12px 12px; align-items: center; }
.th__f .input { height: 32px; font-size: 13px; }
.th.is-resolved:not(.is-open) .th__b { display: none; }
.th.is-resolved .th__h { padding-bottom: 11px; }
.th.is-resolved.is-open .th__h { padding-bottom: 0; }

/* ---------------- templates ---------------- */
.tgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.tcard { border: 0; padding: 0; background: #fff; text-align: left; border-radius: 14px; box-shadow: 0 0 0 1px var(--line); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .2s, transform .2s var(--ease); }
.tcard:hover { box-shadow: 0 0 0 1px #dcd9d1, 0 14px 30px -18px rgba(40,30,20,.4); transform: translateY(-2px); }
.tcard__shot { height: 158px; padding: 14px 16px 0; background: var(--paper); border-bottom: 1px solid var(--line); overflow: hidden; }
.tcard__b { padding: 13px 14px 14px; display: grid; gap: 6px; }
.tcard__b h3 { margin: 0; font-size: 15px; font-weight: 600; }
.tcard__b p { margin: 0; color: var(--ink-2); font-size: 13px; line-height: 1.45; }
.tcard__f { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; font-size: 12.5px; color: var(--ink-3); gap: 8px; }
.tfeature { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: center; padding: 22px 24px; border-radius: 16px; overflow: hidden; color: #fff; margin-bottom: 22px; background: #8f7377 url(../img/plaster.webp) center / cover; min-height: 180px; }
.tfeature h2 { margin: 0; font: 400 32px/1.05 var(--serif); }
.tfeature h2 em { font-style: italic; }
.tfeature p { margin: 8px 0 16px; color: rgba(255,255,255,.88); max-width: 34em; }
.tfeature img { position: absolute; right: -20px; bottom: -70px; width: 270px; pointer-events: none; }
.tfeature .btn { background: #fff; }

/* ---------------- deployments ---------------- */
.prod { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 22px; }
.prod__c { padding: 16px; border-radius: 14px; box-shadow: 0 0 0 1px var(--line); display: grid; gap: 10px; background: #fff; }
.prod__c h3 { margin: 0; font-size: 14.5px; font-weight: 600; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.prod__c a.host { color: var(--ink-2); text-decoration: none; display: inline-flex; gap: 6px; align-items: center; font-size: 13px; }
.prod__c a.host:hover { color: var(--blue-d); }
.prod__c .ver { font: 400 30px/1 var(--serif); }
.prod__c .row { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-3); }
.spark { height: 26px; display: flex; gap: 2px; align-items: flex-end; }
.spark i { flex: 1; background: #cfe7d6; border-radius: 1px; }
.spark i.dn { background: #f2c4bf; }

/* ---------------- sessions ---------------- */
.sess { display: grid; grid-template-columns: 130px minmax(0, 1fr) auto; gap: 20px; align-items: center; padding: 18px; border-radius: 16px; box-shadow: 0 0 0 1px var(--line); background: var(--paper-2); position: relative; overflow: hidden; }
.sess__pt { width: 130px; aspect-ratio: 4 / 5; border-radius: 999px 999px 12px 12px; overflow: hidden; }
.sess__pt img { width: 100%; height: 100%; object-fit: cover; }
.sess__d { font: 400 30px/1.05 var(--serif); margin: 4px 0 6px; }
.sess__t { margin: 0; font-weight: 500; font-size: 15px; }
.sess__m { color: var(--ink-3); font-size: 13px; margin: 3px 0 12px; }
.sess .textarea { min-height: 64px; background: #fff; }
.sess__a { display: grid; gap: 8px; align-self: start; }
.mgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.mcard { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 14px; padding: 14px; border-radius: 14px; box-shadow: 0 0 0 1px var(--line); background: #fff; }
.mcard__pt { width: 76px; aspect-ratio: 4 / 5; border-radius: 999px 999px 9px 9px; overflow: hidden; }
.mcard__pt img { width: 100%; height: 100%; object-fit: cover; }
.mcard h3 { margin: 0; font: 400 22px/1.05 var(--serif); }
.mcard p { margin: 3px 0 0; color: var(--ink-2); font-size: 13px; }
.mcard .tags { display: flex; gap: 4px; flex-wrap: wrap; margin: 8px 0; }
.mcard .tags span { font-size: 11.5px; padding: 2px 7px; border-radius: 999px; background: var(--paper); color: var(--ink-2); }
.mcard .row { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-3); }
.slots { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.slots button { border: 0; height: 36px; border-radius: 9px; background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); font-size: 13px; font-variant-numeric: tabular-nums; }
.slots button:hover { box-shadow: inset 0 0 0 1px #c9c6be; }
.slots button.is-on { background: var(--ink); color: #fff; box-shadow: none; }
.slots button:disabled { color: var(--ink-4); background: var(--paper); box-shadow: none; text-decoration: line-through; cursor: default; }
.days { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.days button { flex: none; width: 62px; border: 0; padding: 8px 0; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); font-size: 12px; color: var(--ink-3); }
.days button b { display: block; font-size: 17px; color: var(--ink); font-weight: 600; }
.days button.is-on { background: var(--ink); color: rgba(255,255,255,.7); box-shadow: none; }
.days button.is-on b { color: #fff; }
.mpick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.mpick button { border: 0; padding: 8px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); display: flex; gap: 8px; align-items: center; text-align: left; min-width: 0; }
.mpick button img { width: 30px; height: 30px; border-radius: 50%; }
.mpick button b { display: block; font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mpick button small { display: block; color: var(--ink-3); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mpick button span { min-width: 0; }
.mpick button.is-on { box-shadow: inset 0 0 0 1.5px var(--blue); background: var(--blue-bg); }
.past { display: grid; gap: 10px; }
.past details { border-radius: 12px; box-shadow: 0 0 0 1px var(--line); padding: 0 14px; }
.past summary { list-style: none; cursor: pointer; display: flex; gap: 12px; align-items: center; padding: 12px 0; }
.past summary::-webkit-details-marker { display: none; }
.past summary .grow { flex: 1; min-width: 0; }
.past summary b { display: block; font-weight: 500; }
.past summary small { color: var(--ink-3); font-size: 12.5px; }
.past details p { margin: 0 0 14px; padding: 12px 14px; border-radius: 10px; background: var(--paper-2); color: var(--ink-2); font-size: 13.5px; }

/* ---------------- usage ---------------- */
.plan-card { position: relative; border-radius: 14px; overflow: hidden; color: #fff; padding: 18px; display: grid; gap: 6px; isolation: isolate; background: #3c3a9e url(../img/plan-indigo.webp) center 30% / cover; }
.plan-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(18, 14, 80, .28), rgba(18, 14, 80, .5)); }
.plan-card.is-red { background-image: url(../img/plan-red.webp); background-color: #7d2a27; }
.plan-card.is-red::before { background: linear-gradient(180deg, rgba(70, 12, 10, .25), rgba(70, 12, 10, .4)); }
.plan-card.is-purple { background-image: url(../img/plan-purple.webp); background-color: #6a2590; }
.plan-card.is-purple::before { background: linear-gradient(180deg, rgba(50, 8, 70, .22), rgba(50, 8, 70, .38)); }
.plan-card small { color: rgba(255,255,255,.8); font-size: 12.5px; }
.plan-card h3 { margin: 0; font: 500 20px var(--sans); display: flex; align-items: center; gap: 8px; }
.plan-card .price { font: 400 46px/1 var(--serif); margin-top: 6px; }
.plan-card .price span { font: 400 15px var(--sans); }
.plan-card ul { margin: 8px 0 12px; padding: 0; list-style: none; display: grid; gap: 4px; font-size: 13px; color: rgba(255,255,255,.92); }
.plan-card .row { display: flex; gap: 8px; flex-wrap: wrap; }
.plan-card .btn { background: #fff; }
.plan-card .btn--ghost { background: rgba(255,255,255,.14); color: #fff; }
.plan-card .orn { width: 22px; height: 22px; fill: #fff; }
.plans3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.plans3 .plan-card { cursor: pointer; border: 0; text-align: left; font: inherit; }
.plans3 .plan-card.is-current { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--blue); }
.plans3 .plan-card.is-pick { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--ink); }
.split-bar { display: flex; height: 10px; border-radius: 6px; overflow: hidden; background: #efeee9; }
.split-bar i { height: 100%; }
.split-bar i + i { box-shadow: -1px 0 0 #fff; }
.blist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.blist li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: center; font-size: 13.5px; }
.blist .bar { grid-column: 1 / -1; margin: 0; height: 5px; }

/* ---------------- settings ---------------- */
.set { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 32px; }
.set__nav { display: grid; gap: 2px; align-content: start; position: sticky; top: 0; }
.set__nav a { padding: 8px 10px; border-radius: 8px; text-decoration: none; color: var(--ink-2); font-weight: 500; font-size: 14px; }
.set__nav a:hover { background: var(--hover); color: var(--ink); }
.set__nav a.is-on { background: var(--paper); color: var(--ink); }
.set__sec { display: grid; gap: 18px; max-width: 760px; }
.set__row { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 20px; padding: 18px 0; border-top: 1px solid var(--line); align-items: start; }
.set__row:first-of-type { border-top: 0; }
.set__row h4 { margin: 0; font-size: 14px; font-weight: 500; }
.set__row p { margin: 3px 0 0; color: var(--ink-3); font-size: 13px; }
.inline-edit { display: flex; gap: 8px; align-items: center; }
.inline-edit .val { font-size: 15px; font-weight: 500; }
.tog-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); }
.tog-row:first-child { border-top: 0; }
.tog-row b { font-weight: 500; display: block; }
.tog-row small { color: var(--ink-3); font-size: 12.5px; }
.integ { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.integ__c { padding: 14px; border-radius: 12px; box-shadow: 0 0 0 1px var(--line); display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.integ__c .gl { width: 36px; height: 36px; border-radius: 9px; background: var(--paper); display: grid; place-items: center; font-weight: 600; font-size: 14px; color: var(--ink-2); }
.integ__c b { display: block; font-weight: 500; }
.integ__c small { color: var(--ink-3); font-size: 12.5px; display: block; }
.dns { font-family: var(--mono); font-size: 12.5px; background: var(--paper-2); border-radius: 10px; padding: 12px; display: grid; grid-template-columns: auto auto 1fr; gap: 6px 16px; box-shadow: inset 0 0 0 1px var(--line); }
.dns b { font-family: var(--sans); font-size: 11.5px; color: var(--ink-3); font-weight: 500; }

/* shortcuts dialog */
.keys { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 26px; }
.keys div { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; gap: 10px; }
.keys span { display: inline-flex; gap: 4px; }

/* entry animation helpers (only on route entry) */
.enter .stagger > * { animation: rise .5s var(--ease) both; }
.enter .stagger > *:nth-child(2) { animation-delay: .04s; }
.enter .stagger > *:nth-child(3) { animation-delay: .08s; }
.enter .stagger > *:nth-child(4) { animation-delay: .12s; }
.enter .stagger > *:nth-child(n+5) { animation-delay: .16s; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } }

/* ================= responsive ================= */
@media (max-width: 1280px) {
  .rvd { grid-template-columns: 168px minmax(0, 1fr) 340px; }
  .bld.has-versions { grid-template-columns: 320px minmax(0, 1fr) 260px; }
  .bld { grid-template-columns: 320px minmax(0, 1fr) 0; }
  .mgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* tablet: sidebar becomes a rail */
@media (max-width: 1180px) {
  :root { --side: 64px; }
  .side { padding: 10px 8px 12px; align-items: center; }
  .ws { padding: 6px; flex: none; }
  .ws__txt, .ws__chev, .side__search span, .side__search kbd, .nav-i span, .nav-i__n:not(.nav-i__n--hot), .side__projects, .meter__row span, .meter__sub, .me span, .me .ic { display: none; }
  .side__search { width: 44px; justify-content: center; padding: 0; }
  .side__nav { width: 100%; }
  .nav-i { justify-content: center; padding: 0; height: 40px; }
  .nav-i__n--hot { position: absolute; top: 3px; right: 5px; min-width: 16px; height: 16px; font-size: 10px; }
  .side__sep { margin: 8px 6px; }
  .side__foot { width: 100%; justify-items: center; }
  .meter { padding: 9px 6px; width: 48px; text-align: center; }
  .meter__row { justify-content: center; }
  .meter__row b { font-size: 17px; }
  .meter__bar { margin: 6px 0 0; }
  .me { justify-content: center; padding: 6px 0; }
  .side .ariadne { margin: 2px 0 0; width: 34px; height: 34px; padding: 0; font-size: 0; display: grid; place-items: center; justify-self: center; }
  .side .ariadne b { display: none; }
  .side .ariadne::before { content: "A"; font-size: 13px; font-weight: 700; color: #ff8a3d; }
  .bld__bar .urlbar, .rvd__bar > b { display: none; }
  .g-main { grid-template-columns: 1fr; }
  .rvd { grid-template-columns: minmax(0, 1fr) 340px; }
  .rvd__screens { display: none; }
  .rv-sel { display: block; }
  .bld, .bld.has-versions { grid-template-columns: 320px minmax(0, 1fr); }
  .bld__vers { position: absolute; right: 0; top: 0; bottom: 0; width: 290px; background: #fff; z-index: 5; box-shadow: -20px 0 40px -20px rgba(0,0,0,.25); display: none; }
  .bld.has-versions .bld__vers { display: flex; }
  .bld { position: relative; }
  .next { max-width: none; }
  .hello__fig { display: none; }
  .tfeature { grid-template-columns: 1fr; }
  .tfeature img { display: none; }
}
@media (max-width: 980px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi:nth-child(3) { border-left: 0; }
  .kpi:nth-child(n+3) { border-top: 1px solid var(--line); }
  .g-3, .g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prod { grid-template-columns: 1fr; }
  .set { grid-template-columns: 1fr; gap: 12px; }
  .set__nav { display: flex; overflow-x: auto; position: static; }
  .set__nav a { white-space: nowrap; }
  .top__search { width: auto; }
  .top__search span, .top__search kbd { display: none; }
  .plans3 { grid-template-columns: 1fr; }
}
/* phone: sidebar becomes a drawer */
@media (max-width: 760px) {
  :root { --side: 0px; }
  body { overflow: hidden; }
  .app { grid-template-columns: 1fr; }
  .side { position: fixed; z-index: 70; left: 0; top: 0; bottom: 0; width: min(300px, 86vw); background: var(--paper); transform: translateX(-102%); transition: transform .3s var(--ease); align-items: stretch; padding: 12px; box-shadow: 20px 0 50px -20px rgba(0,0,0,.35); }
  .app.is-drawer .side { transform: none; }
  .scrim { display: block; position: fixed; inset: 0; z-index: 69; background: rgba(28,24,18,.35); opacity: 0; pointer-events: none; transition: opacity .25s; }
  .app.is-drawer .scrim { opacity: 1; pointer-events: auto; }
  .side__close { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 9px; background: rgba(0,0,0,.05); }
  .ws { flex: 1; padding: 6px 8px; }
  .ws__txt, .ws__chev, .side__search span, .side__search kbd, .nav-i span, .nav-i__n, .side__projects, .meter__row span, .meter__sub, .me span, .me .ic { display: revert; }
  .side__search { width: auto; justify-content: flex-start; padding: 0 8px 0 10px; display: flex; }
  .side__search span { flex: 1; }
  .nav-i { justify-content: flex-start; padding: 0 10px; height: 40px; }
  .nav-i span { display: block; }
  .nav-i__n--hot { position: static; display: grid; }
  .side__foot { justify-items: stretch; }
  .meter { width: auto; text-align: left; padding: 12px; }
  .meter__row { justify-content: flex-start; display: flex; }
  .meter__row b { font-size: 24px; }
  .meter__sub { display: block; }
  .me { justify-content: flex-start; padding: 6px 8px; display: flex; }
  .me span { display: block; }
  .side .ariadne { font-size: 12.5px; padding: 7px 11px; margin-left: 8px; width: auto; height: auto; display: inline-block; justify-self: start; }
  .side .ariadne b { display: inline; font-size: 12.5px; }
  .side .ariadne::before { content: none; }
  .main { margin: 0; border-radius: 0; box-shadow: none; }
  .top { padding: 0 10px; gap: 6px; height: 54px; }
  .top__menu { display: grid; place-items: center; width: 36px; height: 36px; border: 0; background: none; border-radius: 9px; }
  .top__new .btn-split__label { display: none; }
  .top__new .btn-split__arrow { width: 36px; margin: 0; }
  .crumbs a, .crumbs .sep { display: none; }
  .page__in { padding: 20px 16px 48px; }
  .ph__t { font-size: 30px; }
  .hello { padding: 20px 18px; }
  .hello h1 { font-size: 32px; }
  .next { grid-template-columns: 1fr; }
  .g-2, .g-3, .g-4 { grid-template-columns: 1fr; }
  .kpi b { font-size: 28px; }
  .bld, .bld.has-versions { display: flex; flex-direction: column; }
  .bld__chat, .bld__stage { flex: 1; min-height: 0; border-right: 0; }
  .bld[data-pane="preview"] .bld__chat, .bld[data-pane="chat"] .bld__stage { display: none; }
  .bld__vers { width: 100%; }
  .mtabs { display: flex !important; }
  .rvd { display: flex; flex-direction: column; }
  .rvd__stage { flex: none; }
  .rvd__view { padding: 14px; }
  .rvd__threads { border-left: 0; border-top: 1px solid var(--line); flex: none; }
  .rvd__list { overflow: visible; }
  .page__in--full { height: auto; min-height: 100%; }
  .rvd, .bld { height: auto; min-height: 100%; }
  .bld { height: calc(100dvh - 54px); }
  .sess { grid-template-columns: 84px minmax(0, 1fr); }
  .sess__pt { width: 84px; }
  .sess__a { grid-column: 1 / -1; display: flex; flex-wrap: wrap; }
  .mgrid { grid-template-columns: 1fr; }
  .integ { grid-template-columns: 1fr; }
  .set__row { grid-template-columns: 1fr; gap: 10px; }
  .keys { grid-template-columns: 1fr; }
  .mpick { grid-template-columns: 1fr 1fr; }
  .slots { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .notif { width: calc(100vw - 20px); }
  .code { grid-template-columns: 1fr; }
  .code__tree { display: none; }
  .pv { padding: 0 16px 18px; min-height: 520px; }
  .pv__top { margin: 0 -16px; padding: 0 16px; }
  .pv__head h4 { font-size: 19px; }
  .pv__opts { grid-template-columns: 1fr; }
  .bld__view { padding: 12px; }
  .tbl { font-size: 13px; }
  .modal__h h2 { font-size: 24px; }
}
.mtabs { display: none; padding: 6px; gap: 4px; border-bottom: 1px solid var(--line); background: #fff; }
.mtabs button { flex: 1; border: 0; height: 32px; border-radius: 8px; background: none; font-weight: 500; font-size: 13px; color: var(--ink-3); }
.mtabs button.is-on { background: var(--paper); color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}