@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&display=swap');
/* Milestone Pay — component styles. Every value comes from tokens.css (tokens.json). */

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font-family:var(--font-sans);font-size:15px;line-height:24px;-webkit-font-smoothing:antialiased}
.mp-canvas{background:var(--canvas)}
.mp-num,.mp-money,.mp-stat__value,.mp-table td.num{font-variant-numeric:tabular-nums lining-nums}
h1,h2,h3,h4,p{margin:0}
.mp-i{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;vertical-align:-3px}
.mp-i--lg{width:20px;height:20px}
.mp-i--xl{width:28px;height:28px;stroke-width:1.5}

/* ---------- type ---------- */
.mp-t-display{font-size:32px;line-height:40px;font-weight:600;letter-spacing:-0.02em}
.mp-t-title{font-size:24px;line-height:32px;font-weight:600;letter-spacing:-0.015em}
.mp-t-section{font-size:18px;line-height:26px;font-weight:600;letter-spacing:-0.01em}
.mp-t-sub{font-size:15px;line-height:22px;font-weight:600}
.mp-t-body{font-size:15px;line-height:24px}
.mp-t-sm{font-size:14px;line-height:20px}
.mp-t-caption{font-size:12px;line-height:16px;font-weight:500}
.mp-t-overline{font-size:12px;line-height:16px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-muted)}
.mp-muted{color:var(--ink-muted)}
.mp-strong{font-weight:600}

/* ---------- layout helpers ---------- */
.mp-row{display:flex;align-items:center;gap:var(--space-2)}
.mp-row--between{justify-content:space-between}
.mp-row--top{align-items:flex-start}
.mp-row--wrap{flex-wrap:wrap}
.mp-stack{display:flex;flex-direction:column;gap:var(--space-2)}
.mp-stack--3{gap:var(--space-3)}.mp-stack--4{gap:var(--space-4)}.mp-stack--6{gap:var(--space-8)}
.mp-grid-2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-4)}
.mp-grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4)}
.mp-divider{height:1px;background:var(--border);border:0;margin:0}
.mp-grow{flex:1;min-width:0}

/* ---------- buttons ---------- */
.mp-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:44px;padding:0 var(--space-4);border-radius:var(--radius-md);border:1px solid transparent;font:inherit;font-size:15px;font-weight:600;line-height:20px;cursor:pointer;white-space:nowrap;text-decoration:none;transition:background .15s,border-color .15s}
.mp-btn:focus-visible,.mp-input:focus-visible,.mp-chip:focus-visible,.mp-link:focus-visible,.mp-tab:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.mp-btn--primary{background:var(--ink);color:var(--on-ink)}
.mp-btn--primary:hover{background:var(--ink-hover)}
.mp-btn--secondary{background:var(--surface-raised);color:var(--ink);border-color:var(--border-control)}
.mp-btn--secondary:hover{background:var(--surface-sunken)}
.mp-btn--ghost{background:transparent;color:var(--ink-muted);font-weight:500}
.mp-btn--ghost:hover{background:var(--surface-sunken);color:var(--ink)}
.mp-btn--danger{background:var(--issue);color:var(--on-ink)}
.mp-btn--danger-quiet{background:transparent;color:var(--issue);border-color:transparent;font-weight:500}
.mp-btn--sm{min-height:36px;padding:0 var(--space-3);font-size:14px}
.mp-btn--block{width:100%}
.mp-btn[disabled],.mp-btn.is-disabled{background:var(--surface-sunken);color:var(--ink-disabled);border-color:var(--border);cursor:not-allowed}
.mp-btn.is-focus{outline:2px solid var(--focus);outline-offset:2px}
.mp-link{color:var(--accent);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;font-weight:500}

/* ---------- inputs ---------- */
.mp-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.mp-label{font-size:14px;line-height:20px;font-weight:600}
.mp-help{font-size:12px;line-height:16px;color:var(--ink-muted)}
.mp-input{font:inherit;font-size:15px;min-height:44px;width:100%;padding:10px var(--space-3);border:1px solid var(--border-control);border-radius:var(--radius-md);background:var(--surface-raised);color:var(--ink)}
.mp-input::placeholder{color:var(--ink-muted)}
textarea.mp-input{line-height:22px;resize:vertical}
.mp-input.is-focus{outline:2px solid var(--focus);outline-offset:2px;border-color:var(--ink)}
.mp-input--error{border-color:var(--issue)}
.mp-err{display:flex;gap:6px;align-items:center;font-size:12px;line-height:16px;color:var(--issue);font-weight:500}
.mp-input--amount{width:132px;text-align:right;font-variant-numeric:tabular-nums}
.mp-affix{display:flex;align-items:center;gap:var(--space-2)}
.mp-select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);background-position:calc(100% - 18px) 20px,calc(100% - 13px) 20px;background-size:5px 5px;background-repeat:no-repeat;padding-right:36px}
.mp-check{display:flex;gap:var(--space-2);align-items:flex-start;font-size:14px;line-height:20px}
.mp-check i{width:20px;height:20px;border:1px solid var(--border-control);border-radius:4px;background:var(--surface-raised);flex:none;margin-top:0}

/* ---------- badges ---------- */
.mp-badge{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 var(--space-2);border-radius:var(--radius-sm);font-size:12px;line-height:16px;font-weight:600;white-space:nowrap}
.mp-badge .mp-i{width:14px;height:14px;stroke-width:2}
.mp-badge--neutral{background:var(--neutral-bg);color:var(--neutral)}
.mp-badge--held{background:var(--held-bg);color:var(--held)}
.mp-badge--pending{background:var(--pending-bg);color:var(--pending)}
.mp-badge--issue{background:var(--issue-bg);color:var(--issue)}
.mp-badge--success{background:var(--success-bg);color:var(--success)}
.mp-badge--ai{background:var(--ai-bg);color:var(--accent)}
.mp-badge--outline{background:transparent;color:var(--ink-muted);box-shadow:inset 0 0 0 1px var(--border-control)}

/* ---------- cards ---------- */
.mp-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-6)}
.mp-card--raised{background:var(--surface-raised);box-shadow:var(--shadow-sm)}
.mp-card--flush{padding:0;overflow:hidden}
.mp-card__head{display:flex;justify-content:space-between;align-items:center;gap:var(--space-3);margin-bottom:var(--space-4)}
.mp-card--current{background:var(--surface-raised);border:1.5px solid var(--ink);box-shadow:var(--shadow-md)}

/* ---------- money ---------- */
.mp-money{font-weight:650;font-weight:600;letter-spacing:-0.01em;white-space:nowrap}
.mp-money small,.mp-money .cur{font-size:.55em;font-weight:600;color:var(--ink-muted);margin-left:.3em;letter-spacing:.02em}
.mp-money--xl{font-size:40px;line-height:48px}
.mp-money--lg{font-size:32px;line-height:40px}
.mp-money--md{font-size:22px;line-height:28px}
.mp-money--sm{font-size:16px;line-height:22px}
.mp-where{display:inline-flex;align-items:center;gap:6px;font-size:13px;line-height:18px;font-weight:500}
.mp-where--none{color:var(--neutral)} .mp-where--held{color:var(--held)} .mp-where--released{color:var(--success)} .mp-where--refunded{color:var(--ink-muted)}

/* ---------- stats ---------- */
.mp-stat{background:var(--surface-raised);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-2)}
.mp-stat__value{font-size:26px;line-height:32px;font-weight:600;letter-spacing:-0.01em}
.mp-stat__value small{font-size:13px;color:var(--ink-muted);font-weight:600;margin-left:4px}

/* ---------- milestone card ---------- */
.mp-ms{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-4) var(--space-6);display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:var(--space-1) var(--space-4);align-items:start}
.mp-ms__idx{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:600;background:var(--surface-sunken);color:var(--ink-muted)}
.mp-ms__idx--done{background:var(--success-bg);color:var(--success)}
.mp-ms__idx--cur{background:var(--ink);color:var(--on-ink)}
.mp-ms__title{font-size:15px;line-height:22px;font-weight:600}
.mp-ms__meta{font-size:13px;line-height:18px;color:var(--ink-muted);display:flex;gap:var(--space-3);flex-wrap:wrap;margin-top:2px}
.mp-ms__right{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.mp-ms__body{grid-column:2/4;margin-top:var(--space-2)}
.mp-ms--current{background:var(--surface-raised);border:1.5px solid var(--ink);box-shadow:var(--shadow-md)}
.mp-ms--locked{opacity:1;background:var(--surface)}
.mp-ms--locked .mp-ms__title{color:var(--ink-muted)}
.mp-ms__crit{margin:var(--space-2) 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:4px;font-size:14px;line-height:20px;color:var(--ink-2)}
.mp-ms__crit li{display:flex;gap:var(--space-2)}
.mp-ms__crit li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--ink-muted);flex:none;margin-top:8px}

/* ---------- progress ---------- */
.mp-progress{display:flex;flex-direction:column;gap:var(--space-2)}
.mp-progress__bar{display:flex;gap:4px}
.mp-progress__seg{height:6px;flex:1;border-radius:3px;background:var(--surface-sunken)}
.mp-progress__seg--paid{background:var(--success)}
.mp-progress__seg--held{background:var(--held)}
.mp-progress__seg--pending{background:var(--pending)}
.mp-progress__label{font-size:13px;line-height:18px;color:var(--ink-muted);display:flex;justify-content:space-between}
.mp-progress__label b{color:var(--ink);font-weight:600}

/* ---------- milestone stepper strip ---------- */
.mp-strip{display:flex;gap:var(--space-2);flex-wrap:wrap}
.mp-strip__item{display:flex;align-items:center;gap:var(--space-2);padding:6px var(--space-3) 6px 6px;border:1px solid var(--border);border-radius:999px;background:var(--surface);font-size:13px;line-height:18px;font-weight:500}
.mp-strip__item--cur{border-color:var(--ink);background:var(--surface-raised)}
.mp-strip__dot{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:600;background:var(--surface-sunken);color:var(--ink-muted)}
.mp-strip__item--paid .mp-strip__dot{background:var(--success-bg);color:var(--success)}
.mp-strip__item--cur .mp-strip__dot{background:var(--ink);color:var(--on-ink)}

/* ---------- chat ---------- */
.mp-chat{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-4)}
.mp-day{align-self:center;font-size:12px;line-height:16px;color:var(--ink-muted);font-weight:500}
.mp-msg{display:flex;gap:var(--space-2);align-items:flex-end;max-width:84%}
.mp-msg--me{align-self:flex-end;flex-direction:row-reverse}
.mp-avatar{width:28px;height:28px;border-radius:50%;flex:none;display:grid;place-items:center;font-size:11px;font-weight:600;background:var(--surface-sunken);color:var(--ink-2)}
.mp-avatar--me{background:var(--ink);color:var(--on-ink)}
.mp-avatar--lg{width:36px;height:36px;font-size:13px}
.mp-bubble{background:var(--surface-raised);border:1px solid var(--border);border-radius:14px 14px 14px 4px;padding:var(--space-2) var(--space-3);font-size:14px;line-height:20px}
.mp-msg--me .mp-bubble{background:var(--bubble-me);border-color:var(--bubble-me);border-radius:14px 14px 4px 14px}
.mp-bubble__meta{display:flex;gap:6px;align-items:center;font-size:12px;line-height:16px;color:var(--ink-muted);margin-bottom:2px}
.mp-bubble__meta b{color:var(--ink);font-weight:600}
.mp-bubble__tr{display:block;margin-top:6px;padding-top:6px;border-top:1px solid var(--border);color:var(--ink-2)}
.mp-bubble__tr::before{content:attr(data-l);display:inline-block;font-size:10px;line-height:14px;font-weight:700;letter-spacing:.06em;color:var(--accent);margin-right:6px;padding:0 4px;border-radius:3px;background:var(--ai-bg)}
.mp-bubble.is-hl{box-shadow:0 0 0 2px var(--focus)}
.mp-bubble--flag{background:var(--issue-bg);border-color:var(--issue-line)}
.mp-bubble__flag{display:flex;gap:6px;align-items:center;margin-top:6px;font-size:12px;line-height:16px;font-weight:600;color:var(--issue)}
.mp-event{align-self:center;display:inline-flex;align-items:center;gap:var(--space-2);padding:6px var(--space-3);border-radius:999px;background:var(--surface-sunken);font-size:13px;line-height:18px;color:var(--ink-2);max-width:92%}
.mp-event b{color:var(--ink);font-weight:600}
.mp-event time{color:var(--ink-muted);font-size:12px}
.mp-event--success{background:var(--success-bg);color:var(--success)}
.mp-event--held{background:var(--held-bg);color:var(--held)}
.mp-event--issue{background:var(--issue-bg);color:var(--issue)}
.mp-ai{align-self:stretch;background:var(--ai-bg);border-radius:var(--radius-lg);padding:var(--space-3) var(--space-4);font-size:14px;line-height:20px}
.mp-ai__label{display:inline-flex;align-items:center;gap:4px;font-size:11px;line-height:16px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin-bottom:4px}
.mp-composer{display:flex;gap:var(--space-2);align-items:center;padding:var(--space-3);border-top:1px solid var(--border);background:var(--surface-raised)}

/* ---------- source chips ---------- */
.mp-chip{display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 var(--space-2);border-radius:var(--radius-sm);border:1px solid var(--accent-line);background:var(--surface-raised);color:var(--accent);font-size:12px;line-height:16px;font-weight:600;cursor:pointer;font-family:inherit}
.mp-chip .mp-i{width:12px;height:12px}

/* ---------- next step ---------- */
.mp-next{display:flex;align-items:center;gap:var(--space-4);background:var(--surface-raised);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-4) var(--space-6);box-shadow:var(--shadow-sm)}
.mp-next__icon{width:40px;height:40px;border-radius:50%;background:var(--ink);color:var(--on-ink);display:grid;place-items:center;flex:none}
.mp-next__label{font-size:12px;line-height:16px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-muted)}
.mp-next__text{font-size:15px;line-height:22px;font-weight:600}
.mp-next--stack{flex-direction:column;align-items:stretch;gap:var(--space-3)}

/* ---------- alerts (inline banners) ---------- */
.mp-alert{display:flex;gap:var(--space-3);align-items:flex-start;padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);font-size:14px;line-height:20px}
.mp-alert .mp-i{margin-top:2px}
.mp-alert--info{background:var(--ai-bg);color:var(--ink)} .mp-alert--info .mp-i{color:var(--accent)}
.mp-alert--warn{background:var(--pending-bg);color:var(--ink)} .mp-alert--warn .mp-i{color:var(--pending)}
.mp-alert--issue{background:var(--issue-bg);color:var(--ink)} .mp-alert--issue .mp-i{color:var(--issue)}
.mp-alert--success{background:var(--success-bg);color:var(--ink)} .mp-alert--success .mp-i{color:var(--success)}
.mp-alert--held{background:var(--held-bg);color:var(--ink)} .mp-alert--held .mp-i{color:var(--held)}

/* ---------- terms list ---------- */
.mp-terms{display:flex;flex-direction:column}
.mp-term{display:grid;grid-template-columns:112px minmax(0,1fr);gap:var(--space-3);padding:var(--space-3) 0;border-top:1px solid var(--border);font-size:14px;line-height:20px}
.mp-term:first-child{border-top:0;padding-top:0}
.mp-term dt{color:var(--ink-muted);font-weight:500}
.mp-term dd{margin:0;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.mp-missing{color:var(--pending);font-weight:600;display:inline-flex;gap:4px;align-items:center}

/* ---------- gap items ---------- */
.mp-gap{display:flex;gap:var(--space-3);align-items:flex-start;padding:var(--space-3) 0;border-top:1px solid var(--border);font-size:14px;line-height:20px}
.mp-gap:first-of-type{border-top:0}
.mp-gap__icon{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--pending-bg);color:var(--pending)}
.mp-gap__icon--ok{background:var(--success-bg);color:var(--success)}
.mp-gap__icon--issue{background:var(--issue-bg);color:var(--issue)}

/* ---------- files ---------- */
.mp-file{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) 0;border-top:1px solid var(--border);font-size:14px;line-height:20px}
.mp-file:first-child{border-top:0}
.mp-file__thumb{width:40px;height:40px;border-radius:var(--radius-sm);background:var(--surface-sunken);display:grid;place-items:center;font-size:10px;font-weight:700;color:var(--ink-muted);flex:none;letter-spacing:.03em}
.mp-file__name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.mp-file__size{color:var(--ink-muted);font-size:12px}
.mp-iconbtn{width:44px;height:44px;display:grid;place-items:center;border-radius:var(--radius-md);background:transparent;border:0;color:var(--ink-2);cursor:pointer}
.mp-iconbtn:hover{background:var(--surface-sunken)}
.mp-drop{border:1.5px dashed var(--border-control);border-radius:var(--radius-lg);background:var(--surface);padding:var(--space-8);text-align:center;display:flex;flex-direction:column;align-items:center;gap:var(--space-2)}
.mp-drop__icon{width:44px;height:44px;border-radius:50%;background:var(--surface-sunken);display:grid;place-items:center;color:var(--ink-2)}
.mp-formats{display:flex;gap:4px;flex-wrap:wrap;justify-content:center}
.mp-formats span{font-size:11px;line-height:16px;font-weight:600;padding:0 6px;border-radius:4px;background:var(--surface-sunken);color:var(--ink-2)}

/* ---------- table ---------- */
.mp-table{width:100%;border-collapse:collapse;font-size:14px;line-height:20px}
.mp-table th{text-align:left;font-size:12px;line-height:16px;font-weight:600;color:var(--ink-muted);padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--border);background:var(--surface)}
.mp-table td{padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--border);vertical-align:middle}
.mp-table tr:last-child td{border-bottom:0}
.mp-table .num{text-align:right}
.mp-ref{font-size:12px;color:var(--ink-muted);font-variant-numeric:tabular-nums}

/* ---------- timeline ---------- */
.mp-tl{display:grid;grid-template-columns:200px minmax(0,1fr);row-gap:var(--space-3);align-items:center;font-size:14px}
.mp-tl__axis{grid-column:2;display:flex;justify-content:space-between;font-size:12px;color:var(--ink-muted);border-bottom:1px solid var(--border);padding-bottom:6px}
.mp-tl__track{position:relative;height:28px;background:repeating-linear-gradient(90deg,transparent 0 calc(25% - 1px),var(--border) calc(25% - 1px) 25%)}
.mp-tl__bar{position:absolute;top:4px;height:20px;border-radius:6px;display:flex;align-items:center;gap:4px;padding:0 var(--space-2);font-size:11px;font-weight:600;white-space:nowrap;overflow:hidden}
.mp-tl__bar--paid{background:var(--success-bg);color:var(--success);box-shadow:inset 0 0 0 1px var(--success)}
.mp-tl__bar--held{background:var(--held-bg);color:var(--held);box-shadow:inset 0 0 0 1px var(--held)}
.mp-tl__bar--pending{background:var(--pending-bg);color:var(--pending);box-shadow:inset 0 0 0 1px var(--pending)}
.mp-tl__bar--blocked{background:repeating-linear-gradient(45deg,var(--surface-sunken) 0 5px,var(--surface) 5px 10px);color:var(--ink-muted);box-shadow:inset 0 0 0 1px var(--border-control)}
.mp-tl__deadline{position:absolute;top:-6px;bottom:-6px;width:0;border-left:1.5px dashed var(--issue)}

/* ---------- dialog ---------- */
.mp-scrim{background:var(--scrim);display:grid;place-items:center;padding:var(--space-8)}
.mp-dialog{background:var(--surface-raised);border-radius:var(--radius-xl);box-shadow:var(--shadow-overlay);width:440px;max-width:100%;padding:var(--space-8);display:flex;flex-direction:column;gap:var(--space-4)}
.mp-dialog__icon{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--surface-sunken);color:var(--ink)}
.mp-dialog__icon--issue{background:var(--issue-bg);color:var(--issue)}
.mp-dialog__icon--success{background:var(--success-bg);color:var(--success)}
.mp-summary{border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface)}
.mp-summary__row{display:flex;justify-content:space-between;gap:var(--space-4);padding:var(--space-3) var(--space-4);border-top:1px solid var(--border);font-size:14px;line-height:20px}
.mp-summary__row:first-child{border-top:0}
.mp-summary__row span:first-child{color:var(--ink-muted)}
.mp-summary__row span:last-child{font-weight:600;text-align:right}
.mp-summary__total{display:flex;justify-content:space-between;align-items:baseline;padding:var(--space-4);border-top:1px solid var(--border)}
.mp-dialog__actions{display:flex;flex-direction:column;gap:var(--space-2)}
.mp-sheet{background:var(--surface-raised);border-radius:var(--radius-xl) var(--radius-xl) 0 0;box-shadow:var(--shadow-overlay);padding:var(--space-3) var(--space-6) var(--space-8);display:flex;flex-direction:column;gap:var(--space-4)}
.mp-sheet__grab{width:40px;height:4px;border-radius:2px;background:var(--border-control);align-self:center}

/* ---------- PayPal slot (official SDK button renders here) ---------- */
.mp-paypal{display:flex;flex-direction:column;gap:6px}
.mp-paypal__slot{min-height:48px;border-radius:999px;background:var(--paypal-gold);display:grid;place-items:center;color:var(--paypal-ink);font-size:12px;line-height:16px;font-weight:600;letter-spacing:.02em;position:relative}
.mp-paypal__slot::after{content:"Official PayPal button · rendered by PayPal JS SDK";}
.mp-paypal__note{font-size:12px;line-height:16px;color:var(--ink-muted);text-align:center}

/* ---------- empty / loading / toast ---------- */
.mp-empty{border:1.5px dashed var(--border-control);border-radius:var(--radius-lg);padding:var(--space-12) var(--space-8);text-align:center;display:flex;flex-direction:column;align-items:center;gap:var(--space-3);background:var(--surface)}
.mp-empty__icon{width:56px;height:56px;border-radius:50%;background:var(--surface-sunken);display:grid;place-items:center;color:var(--ink-2)}
.mp-skel{background:linear-gradient(90deg,var(--surface-sunken),var(--surface) 50%,var(--surface-sunken));border-radius:6px;height:12px}
.mp-toast{display:flex;gap:var(--space-3);align-items:center;background:var(--ink);color:var(--on-ink);padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);font-size:14px;line-height:20px;box-shadow:var(--shadow-overlay);max-width:380px}
.mp-toast .mp-i{color:var(--toast-icon)}
.mp-spinner{width:20px;height:20px;border-radius:50%;border:2px solid var(--border);border-top-color:var(--ink);flex:none}
.mp-loadstep{display:flex;align-items:center;gap:var(--space-3);font-size:14px;line-height:20px}
.mp-loadstep--done{color:var(--ink-muted)} .mp-loadstep--done .mp-i{color:var(--success)}
.mp-loadstep--wait{color:var(--ink-disabled)}

/* ---------- tabs / segmented ---------- */
.mp-tabs{display:flex;gap:var(--space-1);border-bottom:1px solid var(--border)}
.mp-tab{padding:var(--space-3) var(--space-3);font-size:14px;line-height:20px;font-weight:500;color:var(--ink-muted);border-bottom:2px solid transparent;margin-bottom:-1px}
.mp-tab--on{color:var(--ink);border-bottom-color:var(--ink);font-weight:600}

/* ---------- app shell ---------- */
.mp-app{background:var(--bg);min-height:100%}
.mp-top{height:64px;display:flex;align-items:center;gap:var(--space-8);padding:0 var(--space-12);background:var(--surface-raised);border-bottom:1px solid var(--border)}
.mp-wordmark{font-size:17px;line-height:24px;font-weight:700;letter-spacing:-0.02em;display:flex;align-items:center;gap:var(--space-2)}
.mp-wordmark i{width:22px;height:22px;border-radius:6px;background:var(--ink);display:inline-block;position:relative}
.mp-wordmark i::after{content:"";position:absolute;left:5px;right:5px;bottom:6px;height:2px;background:var(--on-ink);box-shadow:0 -4px 0 var(--on-ink),0 -8px 0 var(--on-ink);transform-origin:left}
.mp-nav{display:flex;gap:var(--space-1)}
.mp-nav a{padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);font-size:14px;font-weight:500;color:var(--ink-muted);text-decoration:none}
.mp-nav a.on{color:var(--ink);background:var(--surface-sunken);font-weight:600}
.mp-role{display:inline-flex;align-items:center;gap:var(--space-2);height:32px;padding:0 var(--space-3) 0 var(--space-2);border-radius:999px;border:1px solid var(--border-control);font-size:13px;font-weight:600;background:var(--surface)}
.mp-role .dot{width:20px;height:20px;border-radius:50%;background:var(--ink);color:var(--on-ink);display:grid;place-items:center;font-size:10px}
.mp-role--client .dot{background:var(--accent)}
.mp-page{padding:var(--space-12);max-width:1200px;margin:0 auto;display:flex;flex-direction:column;gap:var(--space-8)}
.mp-back{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:500;color:var(--ink-muted);text-decoration:none;min-height:32px}
.mp-crumb{font-size:13px;color:var(--ink-muted)}

/* ---------- presentation boards (not product UI) ---------- */
.mp-board{padding:48px;display:flex;flex-direction:column;gap:32px;background:var(--canvas);min-height:100vh}
.mp-board__head{display:flex;align-items:flex-end;gap:20px;border-bottom:1px solid var(--border-control);padding-bottom:20px}
.mp-board__num{font-size:56px;line-height:52px;font-weight:600;letter-spacing:-0.04em;color:var(--ink);font-variant-numeric:tabular-nums}
.mp-board__title{font-size:28px;line-height:34px;font-weight:600;letter-spacing:-0.02em}
.mp-board__sub{font-size:14px;line-height:20px;color:var(--ink-muted);margin-top:2px}
.mp-board__body{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:32px;align-items:start}
.mp-board__frames{display:flex;flex-direction:column;gap:32px;min-width:0}
.mp-board__row{display:flex;gap:32px;align-items:flex-start}
.mp-cap{font-size:12px;line-height:16px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-muted);margin-bottom:10px;display:flex;gap:8px;align-items:center}
.mp-cap span{font-weight:500;letter-spacing:0;text-transform:none}
.mp-frame{border-radius:14px;overflow:hidden;border:1px solid var(--border-control);box-shadow:var(--shadow-md);background:var(--bg)}
.mp-frame__bar{height:36px;display:flex;align-items:center;gap:6px;padding:0 14px;background:var(--surface-sunken);border-bottom:1px solid var(--border)}
.mp-frame__bar i{width:10px;height:10px;border-radius:50%;background:var(--border-control)}
.mp-frame__url{margin-left:12px;flex:1;max-width:420px;height:22px;border-radius:6px;background:var(--surface-raised);font-size:12px;line-height:22px;color:var(--ink-muted);padding:0 10px}
.mp-phone{width:390px;flex:none;border-radius:44px;padding:12px;background:var(--ink);box-shadow:var(--shadow-md)}
.mp-phone__screen{border-radius:34px;overflow:hidden;background:var(--bg);height:800px;display:flex;flex-direction:column;position:relative}
.mp-phone__status{height:44px;display:flex;align-items:center;justify-content:space-between;padding:0 28px;font-size:14px;font-weight:600;flex:none}
.mp-phone__body{flex:1;overflow:hidden;padding:0 var(--space-4) var(--space-4);display:flex;flex-direction:column;gap:var(--space-4)}
.mp-phone__top{display:flex;align-items:center;justify-content:space-between;padding:var(--space-2) var(--space-4) var(--space-3);border-bottom:1px solid var(--border);background:var(--surface-raised);flex:none}
.mp-phone__overlay{position:absolute;inset:0;background:var(--scrim);display:flex;flex-direction:column;justify-content:flex-end}
.mp-notes{display:flex;flex-direction:column;gap:16px;position:sticky;top:24px}
.mp-notes__title{font-size:12px;line-height:16px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);display:flex;gap:6px;align-items:center}
.mp-note{background:var(--surface-raised);border:1px dashed var(--accent);border-radius:var(--radius-md);padding:14px 16px;font-size:13px;line-height:19px;color:var(--ink-2)}
.mp-note b{color:var(--ink);display:block;margin-bottom:4px;font-size:13px}
.mp-note__fix{display:block;margin-top:8px;padding-top:8px;border-top:1px solid var(--border);color:var(--ink)}
.mp-note__fix::before{content:"Suggested fix  ";font-weight:700;color:var(--accent)}
.mp-note__n{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--accent);color:var(--on-ink);font-size:11px;font-weight:700;margin-right:6px;vertical-align:1px}
.mp-pin{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--accent);color:var(--on-ink);font-size:11px;font-weight:700;box-shadow:0 0 0 3px var(--canvas);flex:none}
.mp-legend{font-size:13px;line-height:19px;color:var(--ink-muted)}

/* ---------- milestone card at phone width ---------- */
.mp-ms--compact,.mp-phone .mp-ms{grid-template-columns:32px minmax(0,1fr);padding:var(--space-3) var(--space-4)}
.mp-ms--compact .mp-ms__right,.mp-phone .mp-ms__right{grid-column:2;flex-direction:row;align-items:center;justify-content:space-between;text-align:left}
.mp-ms--compact .mp-ms__body,.mp-phone .mp-ms__body{grid-column:1/3}
.mp-phone .mp-money--md{font-size:20px;line-height:26px}
.mp-paypal__slot{padding:0 var(--space-6);text-align:center}

/* =================== onboarding & auth =================== */
.mp-auth{min-height:100%;display:flex;flex-direction:column;background:var(--bg)}
.mp-auth__top{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 var(--space-8)}
.mp-auth__main{flex:1;display:grid;place-items:center;padding:var(--space-8) var(--space-4)}
.mp-auth__foot{display:flex;justify-content:center;gap:var(--space-6);padding:var(--space-4);font-size:12px;line-height:16px;color:var(--ink-muted)}
.mp-authcard{width:440px;max-width:100%;background:var(--surface-raised);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:var(--space-8);display:flex;flex-direction:column;gap:var(--space-6)}
.mp-authcard--wide{width:640px}
.mp-authcard__head{display:flex;flex-direction:column;gap:var(--space-2)}
.mp-authcard__icon{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--surface-sunken);color:var(--ink)}
.mp-authcard__icon--success{background:var(--success-bg);color:var(--success)}
.mp-authcard__icon--issue{background:var(--issue-bg);color:var(--issue)}
.mp-authcard__icon--held{background:var(--held-bg);color:var(--held)}
.mp-or{display:flex;align-items:center;gap:var(--space-3);font-size:12px;line-height:16px;color:var(--ink-muted);font-weight:500}
.mp-or::before,.mp-or::after{content:"";flex:1;height:1px;background:var(--border)}
.mp-legal{font-size:12px;line-height:18px;color:var(--ink-muted);text-align:center}
.mp-switch{font-size:14px;line-height:20px;color:var(--ink-muted);text-align:center}
.mp-trust{display:flex;align-items:center;justify-content:center;gap:6px;font-size:12px;line-height:16px;color:var(--ink-muted)}
.mp-trust .mp-i{width:14px;height:14px}

/* provider sign-in slots: the providers' own SDKs render the real buttons */
.mp-provider{min-height:44px;border-radius:var(--radius-md);display:grid;place-items:center;font-size:12px;line-height:16px;font-weight:600;letter-spacing:.02em;text-align:center;padding:0 var(--space-4)}
.mp-provider--paypal{background:var(--paypal-gold);color:var(--paypal-ink);border-radius:999px}
.mp-provider--paypal::after{content:"Official “Log in with PayPal” button · PayPal SDK"}
.mp-provider--google{background:var(--surface-raised);color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--border-control)}
.mp-provider--google::after{content:"Official “Sign in with Google” button · Google Identity Services"}
.mp-provider--connect::after{content:"Official “Connect with PayPal” button · PayPal SDK"}
.mp-provider.is-loading{opacity:.6}

/* inputs: valid + adornments */
.mp-input--valid{border-color:var(--success)}
.mp-ok{display:flex;gap:6px;align-items:center;font-size:12px;line-height:16px;color:var(--success);font-weight:500}
.mp-adorn{position:relative}
.mp-adorn .mp-input{padding-right:52px}
.mp-adorn__btn{position:absolute;right:0;top:0;height:44px;min-width:52px;border:0;background:transparent;color:var(--ink-2);font:inherit;font-size:13px;font-weight:600;cursor:pointer;border-radius:0 var(--radius-md) var(--radius-md) 0}
.mp-label-row{display:flex;justify-content:space-between;align-items:baseline}
.mp-opt{font-weight:400;color:var(--ink-muted);font-size:13px;margin-left:4px}
.mp-strength{display:flex;flex-direction:column;gap:6px}
.mp-strength__bar{display:flex;gap:4px}
.mp-strength__bar span{flex:1;height:4px;border-radius:2px;background:var(--surface-sunken)}
.mp-strength--weak .mp-strength__bar span:nth-child(-n+1){background:var(--issue)}
.mp-strength--ok .mp-strength__bar span:nth-child(-n+2){background:var(--pending)}
.mp-strength--good .mp-strength__bar span:nth-child(-n+3){background:var(--success)}
.mp-strength--strong .mp-strength__bar span{background:var(--success)}
.mp-strength__text{font-size:12px;line-height:16px;color:var(--ink-muted)}
.mp-strength__text b{color:var(--ink)}

/* segmented toggle */
.mp-seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;padding:4px;border-radius:var(--radius-md);background:var(--surface-sunken)}
.mp-seg span{min-height:40px;display:flex;align-items:center;justify-content:center;gap:6px;border-radius:6px;font-size:14px;font-weight:500;color:var(--ink-muted)}
.mp-seg span.on{background:var(--surface-raised);color:var(--ink);font-weight:600;box-shadow:0 0 0 1px var(--border-control)}

/* selectable tags */
.mp-tags{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.mp-tag{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 var(--space-3);border-radius:999px;border:1px solid var(--border-control);background:var(--surface-raised);font-size:14px;font-weight:500;color:var(--ink)}
.mp-tag.on{background:var(--ink);color:var(--on-ink);border-color:var(--ink)}
.mp-tag .mp-i{width:14px;height:14px}

/* photo upload */
.mp-photo{display:flex;align-items:center;gap:var(--space-4)}
.mp-photo__circle{width:64px;height:64px;border-radius:50%;background:var(--surface-sunken);display:grid;place-items:center;color:var(--ink-muted);border:1.5px dashed var(--border-control);flex:none;font-size:20px;font-weight:600}
.mp-photo__circle--set{border:0;background:var(--ink);color:var(--on-ink)}

/* role cards */
.mp-roles{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
.mp-role-card{position:relative;display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-6);border-radius:var(--radius-lg);border:1px solid var(--border-control);background:var(--surface-raised);min-height:200px;cursor:pointer}
.mp-role-card__icon{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;background:var(--surface-sunken);color:var(--ink)}
.mp-role-card__icon .mp-i{width:26px;height:26px;stroke-width:1.5}
.mp-role-card__title{font-size:18px;line-height:26px;font-weight:600}
.mp-role-card__desc{font-size:14px;line-height:20px;color:var(--ink-2)}
.mp-role-card__radio{position:absolute;top:var(--space-4);right:var(--space-4);width:24px;height:24px;border-radius:50%;border:1.5px solid var(--border-control);display:grid;place-items:center;background:var(--surface-raised)}
.mp-role-card.on{border:2px solid var(--ink);box-shadow:var(--shadow-md);padding:calc(var(--space-6) - 1px)}
.mp-role-card.on .mp-role-card__radio{background:var(--ink);border-color:var(--ink);color:var(--on-ink)}
.mp-role-card.on .mp-role-card__icon{background:var(--ink);color:var(--on-ink)}
.mp-role-card.is-focus{outline:2px solid var(--focus);outline-offset:2px}
.mp-roles--stack{grid-template-columns:1fr}
.mp-roles--stack .mp-role-card{min-height:0;flex-direction:row;align-items:center;padding:var(--space-4);gap:var(--space-4)}
.mp-roles--stack .mp-role-card.on{padding:calc(var(--space-4) - 1px)}
.mp-roles--stack .mp-role-card__radio{position:static;margin-left:auto;flex:none}

/* step progress */
.mp-steps{display:flex;flex-direction:column;gap:var(--space-2)}
.mp-steps__row{display:flex;justify-content:space-between;font-size:13px;line-height:18px;color:var(--ink-muted)}
.mp-steps__row b{color:var(--ink);font-weight:600}
.mp-steps__bar{display:flex;gap:4px}
.mp-steps__bar span{flex:1;height:4px;border-radius:2px;background:var(--surface-sunken)}
.mp-steps__bar span.done{background:var(--ink)}
.mp-saved{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--ink-muted)}

/* welcome */
.mp-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-12);align-items:center;padding:var(--space-12) var(--space-8);max-width:1200px;margin:0 auto}
.mp-hero__title{font-size:48px;line-height:54px;font-weight:600;letter-spacing:-0.03em}
.mp-how{display:flex;flex-direction:column;gap:var(--space-3)}
.mp-how__step{display:grid;grid-template-columns:44px minmax(0,1fr);gap:var(--space-4);align-items:center;background:var(--surface-raised);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-4)}
.mp-how__n{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:var(--on-ink);font-weight:600}
.mp-how__line{width:2px;height:16px;background:var(--border-control);margin-left:37px}
.mp-how__t{font-size:15px;line-height:22px;font-weight:600}
.mp-how__d{font-size:13px;line-height:18px;color:var(--ink-muted)}
.mp-how__ex{grid-column:2;margin-top:var(--space-2)}

/* timer */
.mp-timer{font-variant-numeric:tabular-nums;font-weight:600;color:var(--ink)}

/* flow diagram */
.mp-flow{position:relative}
.mp-node{position:absolute;display:flex;flex-direction:column;justify-content:center;gap:2px;padding:10px 14px;border-radius:var(--radius-md);background:var(--surface-raised);border:1px solid var(--border-control);font-size:13px;line-height:18px;font-weight:600;color:var(--ink)}
.mp-node small{font-size:11px;line-height:14px;font-weight:500;color:var(--ink-muted)}
.mp-node--ink{background:var(--ink);color:var(--on-ink);border-color:var(--ink)} .mp-node--ink small{color:var(--toast-icon)}
.mp-node--held{background:var(--held-bg);border-color:var(--held)}
.mp-node--pending{background:var(--pending-bg);border-color:var(--pending)}
.mp-node--success{background:var(--success-bg);border-color:var(--success)}
.mp-node--dec{background:var(--surface);border-style:dashed}
.mp-flow svg{position:absolute;inset:0;overflow:visible}
.mp-flow path{fill:none;stroke:var(--ink-2);stroke-width:1.5}
.mp-flow path.dash{stroke-dasharray:5 4;stroke:var(--pending)}
.mp-flow text{font-family:var(--font-sans);font-size:11px;font-weight:600;fill:var(--ink-muted)}
.mp-note__fix--decided::before{content:"Decided  ";color:var(--success)}

/* =================== account menu & settings =================== */
.mp-avatarbtn{width:44px;height:44px;border-radius:50%;border:0;background:transparent;display:grid;place-items:center;cursor:pointer;padding:0}
.mp-avatarbtn span{width:32px;height:32px;border-radius:50%;background:var(--ink);color:var(--on-ink);display:grid;place-items:center;font-size:13px;font-weight:600}
.mp-avatarbtn--client span{background:var(--accent)}
.mp-avatarbtn.is-open span{box-shadow:0 0 0 2px var(--surface-raised),0 0 0 4px var(--focus)}
.mp-menu{position:absolute;right:24px;top:60px;width:280px;background:var(--surface-raised);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-overlay);padding:8px;display:flex;flex-direction:column;z-index:5}
.mp-menu__who{display:flex;gap:12px;align-items:center;padding:8px 8px 12px;border-bottom:1px solid var(--border);margin-bottom:4px}
.mp-menu__item{display:flex;align-items:center;gap:12px;min-height:44px;padding:0 8px;border-radius:var(--radius-md);font-size:14px;font-weight:500;color:var(--ink)}
.mp-menu__item.on{background:var(--surface-sunken)}
.mp-menu__item small{margin-left:auto;font-size:12px;color:var(--ink-muted);font-weight:500}
.mp-menu__sep{height:1px;background:var(--border);margin:4px 0}
.mp-settings{display:grid;grid-template-columns:220px minmax(0,1fr);gap:32px;align-items:start}
.mp-sidenav{display:flex;flex-direction:column;gap:2px}
.mp-sidenav a{min-height:40px;display:flex;align-items:center;gap:10px;padding:0 12px;border-radius:var(--radius-md);font-size:14px;font-weight:500;color:var(--ink-muted);text-decoration:none}
.mp-sidenav a.on{background:var(--surface-sunken);color:var(--ink);font-weight:600}
.mp-setrow{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0;border-top:1px solid var(--border)}
.mp-setrow:first-of-type{border-top:0;padding-top:0}
.mp-phone .mp-ms__right{flex-wrap:wrap;gap:6px}
.mp-app{position:relative} .mp-top{position:relative}