/* Signed-in design binding, source SHA-256:
   d65f625cea3a01401f693e0412c9b61500b99abedd94bbc3763d7609b9868560.
   Values come from Nicole's actual component styles, not the retired prototype.
   Keep runtime data, native input semantics and authorization in app.js. */
.portal-v2.connected-live { font:400 16px/24px Afacad,sans-serif; color:#000; background:#fff; }
.portal-v2.connected-live .connected-v2-shell { padding:0; }
.portal-v2.connected-live .connected-v2-page { gap:16px; padding:32px 40px 72px; }
.portal-v2.connected-live .connected-v2-page h1 { margin:0; font:500 32px/44px Afacad,sans-serif; letter-spacing:0; }
.portal-v2.connected-live .connected-v2-page h2 { margin:0; font:500 22px/30px Afacad,sans-serif; letter-spacing:0; }
.portal-v2.connected-live .connected-v2-page h3 { font:500 16px/24px Afacad,sans-serif; letter-spacing:0; }
.portal-v2.connected-live .connected-v2-page strong,
.portal-v2.connected-live .connected-v2-page b { font-weight:500; }
.portal-v2.connected-live .connected-v2-page small { font-size:14px; line-height:20px; }
.portal-v2.connected-live .connected-v2-page p { font-size:16px; line-height:24px; letter-spacing:0; }
.portal-v2.connected-live .connected-module-head { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:24px; margin:0; padding:0; min-height:44px; }
.portal-v2.connected-live .connected-module-head > button { width:auto; flex:0 0 auto; }
.portal-v2.connected-live .connected-management { margin:0; padding:20px; border:0; border-radius:8px; background:#f7f7f7; box-shadow:none; }
.portal-v2.connected-live .connected-management > h2 { margin:0 4px 16px; }
.portal-v2.connected-live .connected-source-card,
.portal-v2.connected-live .live-metric { border:0; border-radius:8px; background:#fff; box-shadow:0 1px 2px #0000001a; }
.portal-v2.connected-live .live-metric { min-height:0; padding:18px 20px; gap:8px; }
.portal-v2.connected-live .live-metric > span { font:400 14px/20px Afacad,sans-serif; color:#595959; }
.portal-v2.connected-live .live-metric strong { margin:0; font:500 32px/38px Afacad,sans-serif; letter-spacing:0; overflow-wrap:normal; word-break:normal; }
.portal-v2.connected-live .connected-list { background:#fff; border-radius:8px; padding:8px 24px 12px; box-shadow:0 1px 2px #0000001a; }
.portal-v2.connected-live .connected-list-row { gap:20px; padding:16px 0; border-color:#d8d8d8; }
.portal-v2.connected-live .connected-list-row > span:first-child { min-width:0; flex:1; }
.portal-v2.connected-live .connected-list-row strong { font:500 16px/24px Afacad,sans-serif; }
.portal-v2.connected-live .connected-list-row small { color:#808080; }
.portal-v2.connected-live .connected-action,
.portal-v2.connected-live .v2-button { min-height:28px; padding:4px 14px; font:500 14px/20px Afacad,sans-serif; border:0; border-radius:9999px; box-shadow:inset 0 0 0 1px #000; }
.portal-v2.connected-live .connected-action:disabled,
.portal-v2.connected-live .v2-button:disabled { cursor:not-allowed; opacity:.5; }
.portal-v2.connected-live .connected-inline-form,
.portal-v2.connected-live .connected-toolbar { border:0; border-radius:8px; margin:0 0 16px; padding:16px 24px; background:#fff; box-shadow:0 1px 2px #0000001a; }
.portal-v2.connected-live .connected-inline-form label,
.portal-v2.connected-live .connected-toolbar label,
.portal-v2.connected-live .connected-support-form label { font:400 14px/20px Afacad,sans-serif; letter-spacing:0; text-transform:none; }
.portal-v2.connected-live .connected-v2-page input:not([type=checkbox]):not([type=radio]),
.portal-v2.connected-live .connected-v2-page textarea { font:400 16px/24px Afacad,sans-serif; color:#000; border:1px solid #bdbdbd; border-radius:8px; background:#fff; padding:8px 14px; }
.portal-v2.connected-live .connected-v2-page select { appearance:none; max-width:100%; min-height:32px; font:500 14px/20px Afacad,sans-serif; color:#000; background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%23595959'/%3E%3C/svg%3E") no-repeat right 12px center; padding:6px 32px 6px 14px; border:0; border-radius:9999px; box-shadow:inset 0 0 0 1px #bdbdbd; }
.portal-v2.connected-live .connected-period select { margin-left:0; color:#fff; background-color:#000; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='white'/%3E%3C/svg%3E"); }
.portal-v2.connected-live #tour-filters .connected-period { width:max-content; max-width:100%; margin:0; gap:0; }
.portal-v2.connected-live .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.portal-v2.connected-live .connected-segments,
.portal-v2.connected-live .garment-tabs,
.portal-v2.connected-live .connected-analytics-tabs { gap:2px; padding:3px; border:0; border-radius:9999px; background:#f1f1f1; }
.portal-v2.connected-live .connected-segments button,
.portal-v2.connected-live .garment-tabs button,
.portal-v2.connected-live .connected-analytics-tabs button { min-height:32px; padding:6px 16px; font:400 14px/20px Afacad,sans-serif; border:0; border-radius:9999px; color:#595959; background:transparent; box-shadow:none; }
.portal-v2.connected-live .connected-segments button[aria-pressed=true],
.portal-v2.connected-live .garment-tabs button.active,
.portal-v2.connected-live .connected-analytics-tabs button[aria-selected=true] { color:#fff; background:#000; font-weight:500; }
.portal-v2.connected-live .connected-segments button:hover:not(:disabled):not([aria-pressed=true]),
.portal-v2.connected-live .garment-tabs button:hover:not(.active) { background:#e5e5e5; }
.portal-v2.connected-live .connected-brand-pill { gap:10px; min-height:38px; padding:6px 14px 6px 8px; }
.portal-v2.connected-live .connected-brand-pill strong { font:500 16px/20px Afacad,sans-serif; }
.portal-v2.connected-live .connected-brand-pill .workspace-avatar { background:#3d2a45; }
.portal-v2.connected-live .topbar { justify-content:flex-start; gap:24px; }
.portal-v2.connected-live .workspace-picker { margin-left:0; margin-right:auto; }
@media(min-width:881px) { .portal-v2.connected-live #mobile-menu { display:none; } }
.portal-v2.connected-live .connected-catalog-search input { width:170px; min-height:32px; font:400 14px/20px Afacad,sans-serif; border-radius:9999px; padding:6px 14px; }
.portal-v2.connected-live .approved-catalog { padding:8px 24px 12px; box-shadow:0 1px 2px #0000001a; }
/* min-width = 872px of columns and gaps + 24px of horizontal padding (border-box), so the grid never spills past its row. */
.portal-v2.connected-live .approved-catalog .garment-assets-row { gap:20px; grid-template-columns:18px 42px minmax(178px,2fr) 130px 84px 150px 150px; min-width:896px; padding:16px 12px; }
.portal-v2.connected-live .approved-catalog .garment-assets-head { padding:10px 12px; font:400 14px/20px Afacad,sans-serif; color:#808080; }
.portal-v2.connected-live .approved-catalog .garment-preview { width:42px; height:56px; border-radius:4px; }
.portal-v2.connected-live .approved-catalog .garment-name small { color:#808080; }
.portal-v2.connected-live .connected-settings-grid { grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr)); gap:24px; align-items:start; }
.portal-v2.connected-live .connected-preference-list { padding:0 24px; }
.portal-v2.connected-live .connected-preference-row strong { font-weight:400; }
.portal-v2.connected-live .connected-contract-details { margin:0; color:#595959; font:400 14px/20px Afacad,sans-serif; }
.portal-v2.connected-live .connected-contract-details summary { cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.portal-v2.connected-live .connected-contract-details p { font:400 14px/20px Afacad,sans-serif; margin:8px 0 0; }
.portal-v2.connected-live .connected-team-head { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; padding:0 4px 16px; }
.portal-v2.connected-live .connected-team-table { overflow-x:auto; }
.portal-v2.connected-live .connected-team-row { display:grid; grid-template-columns:minmax(220px,2fr) 170px 130px 70px; gap:20px; min-width:650px; align-items:center; padding:16px 0; border-top:1px solid #d8d8d8; }
.portal-v2.connected-live .connected-team-labels { font:400 14px/20px Afacad,sans-serif; color:#808080; border:0; padding:10px 0; }
.portal-v2.connected-live .connected-team-person { display:flex; align-items:center; gap:12px; min-width:0; }
.portal-v2.connected-live .connected-team-person > div { display:flex; flex-direction:column; overflow-wrap:anywhere; }
.portal-v2.connected-live .connected-team-avatar { flex:0 0 32px; height:32px; display:grid; place-items:center; border-radius:9999px; background:#f1f1f1; color:#595959; font:500 13px/16px Afacad,sans-serif; }
.portal-v2.connected-live .connected-team-person small { color:#808080; }
.portal-v2.connected-live .connected-team-last-active { text-align:right; color:#595959; font:400 14px/20px Afacad,sans-serif; }
.portal-v2.connected-live .connected-team-role { display:inline-block; width:max-content; padding:2px 10px; border-radius:9999px; background:#efefef; font:500 14px/20px Afacad,sans-serif; }
.portal-v2.connected-live .connected-team-row .connected-action { padding:4px 8px; }
.portal-v2.connected-live .connected-role-info { padding:0 4px; background:transparent; color:#808080; border:0; font:400 16px/24px Afacad,sans-serif; }
.portal-v2.connected-live .connected-team-dialog { width:480px; max-width:calc(100vw - 32px); max-height:calc(100dvh - 32px); padding:24px; border:1px solid #bdbdbd; border-radius:8px; font:400 16px/24px Afacad,sans-serif; }
.portal-v2.connected-live .connected-team-dialog::backdrop { background:#0006; }
.portal-v2.connected-live .connected-team-dialog .connected-inline-form { padding:16px 0 0; box-shadow:none; flex-direction:column; align-items:stretch; }
.portal-v2.connected-live .connected-dialog-close { float:right; }
.portal-v2.connected-live .connected-dialog-close button { background:#fff; border:1px solid #bdbdbd; border-radius:9999px; font:400 14px/20px Afacad,sans-serif; padding:4px 14px; }
.portal-v2.connected-live .v2-footer { font:400 14px/20px Afacad,sans-serif; }
.portal-v2.connected-live .connected-footer-brand { display:flex; align-items:center; gap:12px; min-width:0; max-width:100%; }
.portal-v2.connected-live .connected-build-version { font:inherit; color:#666; overflow-wrap:anywhere; min-width:0; }
.portal-v2.connected-live :is(button,a,input,select,textarea,summary):focus-visible { outline:2px solid #115ea3; outline-offset:3px; }
@media(max-width:800px) {
 .portal-v2.connected-live .connected-v2-page { padding:24px 16px 40px; }
 .portal-v2.connected-live .connected-v2-page h1 { font-size:24px; line-height:36px; }
 .portal-v2.connected-live .connected-v2-page h2 { font-size:22px; line-height:30px; }
 .portal-v2.connected-live .connected-module-head { min-height:36px; }
 .portal-v2.connected-live .connected-list { padding:8px 16px 12px; }
 .portal-v2.connected-live .connected-list-row { flex-wrap:wrap; }
 .portal-v2.connected-live .connected-inline-form { padding:16px; }
 .portal-v2.connected-live .v2-footer { margin:24px -16px -40px; padding:24px 16px; }
 .portal-v2.connected-live .v2-footer-left { min-width:0; flex-wrap:wrap; }
}

.sample-preview .topbar { flex-wrap:wrap; }
.sample-preview-banner { display:flex; flex-basis:100%; gap:16px; align-items:center; justify-content:space-between; padding:12px 16px; color:#171717; background:#f3f3f3; border:1px solid #d8d8d8; border-radius:8px; font:400 16px/24px Afacad,sans-serif; }
.sample-preview-banner p { margin:0; font-size:14px; line-height:20px; }
.sample-preview-banner a { flex-shrink:0; color:inherit; min-height:44px; display:flex; align-items:center; text-decoration:underline; }
@media(max-width:880px) { .sample-preview-banner { flex-wrap:wrap; gap:4px; } }
/* Touch corrections keep the approved desktop tokens unchanged. */
@media(max-width:880px) {
 .portal-v2.connected-live .topbar { padding:12px 16px; gap:12px; }
 .portal-v2.connected-live .garment-portal-head { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
 .portal-v2.connected-live .garment-portal-head h1 { flex-basis:100%; }
 .portal-v2.connected-live .garment-portal-head > button { width:auto; margin:0; }
 .portal-v2 #mobile-menu { flex-direction:column; justify-content:center; align-items:center; gap:5px; min-width:44px; min-height:44px; }
 .portal-v2.connected-live :is(.connected-action,.v2-button,.v2-link,.connected-role-info,.connected-segments button,.garment-tabs button,.connected-analytics-tabs button,.connected-dialog-close button) { min-height:44px; }
 .portal-v2.connected-live .connected-role-info { min-width:44px; }
 .portal-v2.connected-live .connected-contract-details summary { min-height:44px; align-content:center; }
 .portal-v2.connected-live .v2-footer-links a { display:inline-flex; align-items:center; min-height:44px; }
 .portal-v2.connected-live .connected-tip-body > a { display:inline-flex; align-items:center; min-height:44px; box-sizing:border-box; }
 .portal-v2.connected-live .connected-v2-page select { min-height:44px; font-size:16px; }
 .portal-v2.connected-live .garment-upload-dialog { width:calc(100% - 32px); max-width:calc(100% - 32px); max-height:calc(100dvh - 32px); overflow:auto; overscroll-behavior:contain; box-sizing:border-box; }
 .portal-v2.connected-live .garment-upload-close { position:sticky; top:0; height:56px; margin:0; padding:0; background:#fff; z-index:3; }
 .portal-v2.connected-live .garment-upload-close button { width:44px; height:44px; top:6px; right:12px; }
 .portal-v2.connected-live .garment-upload-header { padding:16px 20px 24px; }
 .portal-v2.connected-live .garment-upload-dialog > form:not(.garment-upload-close) { padding:20px; min-width:0; }
 .portal-v2.connected-live .garment-upload-dialog :is(input,fieldset,label) { min-width:0; max-width:100%; box-sizing:border-box; }
 .portal-v2.connected-live .garment-upload-dialog input[type=file] { width:100%; }
 .portal-v2.connected-live .garment-upload-actions { flex-wrap:wrap; gap:12px; }
 .portal-v2.connected-live .garment-upload-actions > span { flex-basis:100%; }
}
/* A failed identity lookup must not expose the legacy profile or navigation. */
/* QA: shared alignment and waiting states; no new visual design system. */
.portal-v2.connected-live .connected-drawer-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.portal-v2.connected-live .connected-drawer-head > div { min-width:0; flex:1; }
.portal-v2.connected-live .connected-drawer-head h2 { white-space:normal; overflow-wrap:anywhere; text-overflow:clip; width:auto; }
.portal-v2.connected-live .connected-drawer-head > form { flex:0 0 auto; margin:0; padding:0; }
.portal-v2.connected-live .connected-drawer-head > div > span { overflow-wrap:anywhere; }
.portal-v2.connected-live .connected-journey-table :is(th,td),
.portal-v2.connected-live .connected-feature-table :is(th,td) { text-align:left; }
.portal-v2:is(.connected-live, .connected-pending) .notification-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; text-align:center; }
.portal-v2:is(.connected-live, .connected-pending) .notification-empty :is(p,strong) { margin:0; }
.portal-v2.connected-live .connected-team-avatar { width:32px; min-width:32px; aspect-ratio:1; }
.portal-v2.connected-live .connected-v2-page input[type=file]::file-selector-button { font:500 14px/20px Afacad,sans-serif; padding:8px 14px; margin-right:12px; border:1px solid #000; border-radius:9999px; background:#fff; color:#000; cursor:pointer; }
.portal-v2.connected-live .connected-action:not(.secondary) { background:#000; color:#fff; }
.portal-v2.connected-live .connected-action.secondary { background:#fff; color:#000; }
.portal-v2.connected-live .stage-sample-callout { margin:0; padding:20px; border:1px solid #bdbdbd; border-radius:8px; background:#fff; }
.portal-v2.connected-live .partner-launch-readiness { margin:0; padding:20px; background:#f7f7f7; border:1px solid #d8d8d8; border-radius:8px; }
.portal-v2.connected-live .readiness-pending-space { height:480px; background:repeating-linear-gradient(to bottom,#eee 0,#eee 56px,transparent 56px,transparent 80px); border-radius:8px; }
.connected-scope-unverified .sidebar,
.connected-scope-unverified .topbar,
.connected-scope-unverified #notification-drawer,
.connected-scope-unverified #command-palette,
.connected-scope-unverified #portal-modal { display:none!important; }
.connected-scope-unverified .app-shell { grid-template-columns:minmax(0,1fr)!important; }

/* September 8 Release2: shared connected components, not prototype handlers. */
.portal-v2.connected-live .connected-v2-page { padding:24px 40px 72px; }
.portal-v2.connected-live .garment-portal-head { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.portal-v2.connected-live .connected-header-actions { display:flex; flex-wrap:wrap; gap:12px; margin-left:auto; }
.portal-v2.connected-live :is(.connected-freshness,.connected-contract-note,.connected-v2-page .connected-empty,.v2-catalog-health-card small) { font:400 14px/20px Afacad,sans-serif; color:#595959; }
.portal-v2.connected-live :is(.eyebrow,.section-label) { text-transform:none; letter-spacing:0; }
.portal-v2.connected-live :is(.connected-analytics-tabs,.garment-tabs) { width:fit-content; max-width:100%; flex-wrap:wrap; }
.portal-v2.connected-live .connected-analytics-tabs button { flex:0 0 auto; }
.portal-v2.connected-live .connected-catalog-toolbar { align-items:center; gap:16px; }
.portal-v2.connected-live .connected-catalog-controls { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:12px; }
.portal-v2.connected-live .connected-catalog-toolbar .v2-catalog-search input { width:220px; min-height:36px; border-radius:9999px; font:400 14px/20px Afacad,sans-serif; padding:6px 14px; }
.portal-v2.connected-live .connected-catalog-controls .connected-action { min-height:36px; }
.portal-v2.connected-live .garment-assets-head { display:grid; grid-template-columns:18px 42px minmax(178px,2fr) 130px 84px 150px 150px; gap:20px; min-width:896px; }
.portal-v2.connected-live .garment-variant,.portal-v2.connected-live .garment-updated { text-align:left; }
.portal-v2.connected-live .garment-bulk-actions { position:fixed; left:284px; right:20px; bottom:calc(20px + env(safe-area-inset-bottom)); z-index:12; width:fit-content; max-width:calc(100% - 304px); margin:0 auto; padding:12px 16px; border-radius:9999px; background:#fff; box-shadow:0 3px 16px #0003; flex-wrap:wrap; box-sizing:border-box; }
.portal-v2.connected-live .connected-load-more { justify-content:space-between; margin-top:16px; gap:16px; flex-wrap:wrap; }
.portal-v2.connected-live .connected-preview-gallery { position:relative; margin:0; min-height:320px; overflow:hidden; }
.portal-v2.connected-live .connected-preview-gallery img { height:380px; width:100%; object-fit:contain; }
.portal-v2.connected-live .connected-preview-gallery img:not([data-preview-image-state="ready"]) { visibility:hidden; }
.portal-v2.connected-live .connected-preview-image-status { position:absolute; inset:0 0 64px; margin:0; padding:24px; display:grid; place-items:start center; text-align:center; pointer-events:none; background:#f7f7f7; }
.portal-v2.connected-live .connected-preview-image-status[hidden] { display:none; }
.portal-v2.connected-live .connected-preview-navigation { position:absolute; inset:auto 12px 12px; display:flex; justify-content:space-between; align-items:center; gap:12px; }
.portal-v2.connected-live .connected-preview-navigation button { min-width:44px; min-height:44px; padding:8px; background:#fff; }
.portal-v2.connected-live .connected-preview-navigation span { padding:4px 12px; border-radius:9999px; background:#fffe; font:400 14px/20px Afacad,sans-serif; }
.portal-v2.connected-live .connected-preview-empty { min-height:320px; display:grid; place-items:center; background:#f7f7f7; }
.portal-v2.connected-live .connected-preview-close { font-size:24px; line-height:24px; min-width:44px; min-height:44px; padding:8px; }
.portal-v2.connected-live .connected-drawer-footer { flex-wrap:wrap; gap:12px; }
.portal-v2.connected-live .connected-outfit-row { grid-template-columns:minmax(180px,1.4fr) minmax(220px,1.6fr) 110px 100px; min-width:690px; }
.portal-v2.connected-live .connected-outfit-thumbnails { display:flex; gap:6px; margin-bottom:8px; }
.portal-v2.connected-live .connected-outfit-thumbnails .garment-preview { width:42px; height:56px; }
.portal-v2.connected-live .connected-outfit-thumbnails img { width:100%; height:100%; object-fit:cover; }
.portal-v2.connected-live .connected-setting-state { margin-left:auto; font:400 14px/20px Afacad,sans-serif; color:#595959; }
.portal-v2.connected-live .connected-inline-form[data-api-key-form] { align-items:flex-end; }
.portal-v2.connected-live .connected-inline-form[data-api-key-form] button { margin-bottom:0; min-height:40px; }
.portal-v2.connected-live .connected-invoice-table { width:calc(100% - 40px); margin:0 20px; }
.portal-v2.connected-live .connected-journey-table th[scope=row] { font-weight:400; }
.portal-v2.connected-live .connected-journey-table :is(th,td) { padding:14px 16px; }
.portal-v2.connected-live .connected-support-docs a:hover { background:#efefef; }
@media(max-width:880px) {
 .portal-v2.connected-live .connected-v2-page { padding:20px 16px 64px; }
 .portal-v2.connected-live .connected-catalog-toolbar .v2-catalog-search input { width:100%; min-height:44px; font-size:16px; }
 .portal-v2.connected-live .connected-catalog-controls .connected-action { min-height:44px; }
 .portal-v2.connected-live .garment-bulk-actions { left:16px; right:16px; max-width:calc(100% - 32px); border-radius:12px; bottom:calc(12px + env(safe-area-inset-bottom)); }
 .portal-v2.connected-live .connected-preview-gallery img { height:300px; }
 .portal-v2.connected-live .connected-header-actions { margin-left:0; }
}
/* Real asynchronous states only; never show the design-state catalogue. */
.connected-feature-table { min-width:620px; width:100%; }
.connected-rate-bar { display:inline-block; width:80px; height:8px; background:#f1f1f1; border-radius:9999px; margin-right:10px; overflow:hidden; vertical-align:middle; }
.connected-rate-bar i { display:block; height:100%; background:#595959; border-radius:inherit; }
.tryon-chart { margin:20px 0 8px; }
.tryon-chart-body { display:grid; grid-template-columns:auto 1fr; grid-template-rows:200px auto; column-gap:12px; }
.tryon-y-axis { position:relative; min-width:28px; font-size:12px; line-height:1; color:#6b6b6b; font-variant-numeric:tabular-nums; text-align:right; }
.tryon-y-axis span { position:absolute; right:0; transform:translateY(50%); white-space:nowrap; }
.tryon-plot { position:relative; outline:none; }
.tryon-plot:focus-visible { box-shadow:0 0 0 2px #fff, 0 0 0 4px #000; border-radius:4px; }
.tryon-grid, .tryon-bars { position:absolute; inset:0; }
.tryon-grid i { position:absolute; left:0; right:0; height:1px; background:#ededed; }
.tryon-grid i:first-child { background:#bdbdbd; } /* the baseline reads a step darker than the gridlines */
.tryon-bars { display:flex; align-items:stretch; }
.tryon-day { flex:1 1 0; min-width:0; display:flex; flex-direction:column-reverse; align-items:center; cursor:default; border-radius:4px 4px 0 0; }
.tryon-day > span { display:block; box-sizing:border-box; width:70%; max-width:40px; min-height:2px; flex:none; }
/* The 2px surface gap is transparent padding inside the upper segment, so the stack never exceeds its share of the plot. */
.tryon-day > span + span { padding-bottom:2px; background-clip:content-box; min-height:4px; }
.tryon-day > span:last-child { border-radius:4px 4px 0 0; }
.tryon-day.is-active { background:rgba(0,0,0,0.04); }
.tryon-chart .tryon-bar-ok { background-color:#595959; }
.tryon-chart .tryon-bar-failed { background-color:#b45309; } /* amber, 5:1 on white; the 2px gap separates it from the grey successes without relying on hue */
.tryon-day.is-active .tryon-bar-ok { background-color:#000; }
.tryon-day.is-active .tryon-bar-failed { background-color:#8a3f06; }
.tryon-tooltip { position:absolute; z-index:5; transform:translate(-50%, -100%); display:grid; gap:2px; padding:8px 10px; background:#fff; border:1px solid #e5e5e5; border-radius:8px; box-shadow:0 4px 16px rgba(0,0,0,0.12); white-space:nowrap; pointer-events:none; text-align:left; }
.tryon-tooltip[hidden] { display:none; }
.tryon-tooltip-value { font-size:16px; font-weight:600; color:#000; font-variant-numeric:tabular-nums; }
.tryon-tooltip-date { font-size:12px; color:#6b6b6b; }
.tryon-tooltip-failed { font-size:12px; color:#595959; font-variant-numeric:tabular-nums; }
.tryon-tooltip-failed::before { content:""; display:inline-block; width:10px; height:2px; margin-right:6px; vertical-align:middle; background:#b45309; }
.tryon-x-axis { grid-column:2; position:relative; height:26px; font-size:12px; color:#6b6b6b; }
.tryon-x-axis span { position:absolute; top:0; padding-top:10px; transform:translateX(-50%); white-space:nowrap; }
.tryon-x-axis span::before { content:""; position:absolute; top:0; left:50%; width:1px; height:5px; background:#bdbdbd; }
@media (max-width:600px) {
  .tryon-chart-body { grid-template-rows:160px auto; }
  .tryon-x-axis span:nth-last-child(even) { display:none; } /* counted from the end, so the latest day keeps its label */
}
.tryon-chart figcaption { display:flex; gap:8px; align-items:center; font-size:13px; color:#595959; margin-top:6px; }
.tryon-key { display:inline-block; width:10px; height:10px; border-radius:2px; margin-left:8px; }
.tryon-key-ok { background:#595959; }
.tryon-key-failed { background:#b45309; }
.connected-tryon-daily { margin:8px 0; }
.portal-v2 .drawer-overlay { pointer-events:none; }
.portal-v2 .drawer-overlay.open { pointer-events:auto; }
.portal-v2 .notification-drawer:not(.open) { pointer-events:none; }
.connected-source-card[aria-busy="true"]::after, [data-garment-filter-form][aria-busy="true"]::after {
  content: ""; display: block; width: 100%; height: 4px; margin-top: 16px;
  background: linear-gradient(90deg, #eee 20%, #fafafa 50%, #eee 80%);
  background-size: 200% 100%; animation: connected-shimmer 1.5s linear infinite;
}
@keyframes connected-shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
  .connected-source-card[aria-busy="true"]::after, [data-garment-filter-form][aria-busy="true"]::after { animation: none; }
}
.connected-preview-colors { border: 0; padding: 0; margin: 16px 0; display: flex; flex-wrap: wrap; gap: 8px; }
.connected-preview-colors legend { margin-bottom: 8px; }
.connected-preview-colors [aria-pressed="true"] { background: #000; color: #fff; }
.connected-preview-colors button { min-height: 44px; }
.twin-tour-save-error { position:fixed; bottom:16px; right:16px; z-index:11000; width:360px; max-width:calc(100% - 32px); padding:20px; box-sizing:border-box; border:1px solid #aaa; border-radius:12px; background:#fff; box-shadow:0 3px 16px #0003; font:400 16px/24px Afacad,sans-serif; }
.twin-tour-save-error button { min-height:44px; padding:8px 20px; border:1px solid #000; border-radius:9999px; background:#fff; }
.portal-v2.connected-live .connected-feature-table summary { min-height:44px; display:flex; align-items:center; cursor:pointer; }
/* September 9 Part 3: shared Nicole components on the authenticated surface. */
.portal-v2.connected-live .v2-section-head { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.portal-v2.connected-live .v2-section-head > .v2-link { margin-left:auto; white-space:nowrap; }
.portal-v2.connected-live .v2-link { font:500 14px/20px Afacad,sans-serif; text-underline-offset:3px; }
.portal-v2.connected-live .connected-action.secondary { background:#fff; color:#000; box-shadow:inset 0 0 0 1px #000; }
.portal-v2.connected-live .connected-action:disabled { background:#f1f1f1; color:#808080; box-shadow:inset 0 0 0 1px #bdbdbd; opacity:1; }
.portal-v2.connected-live .connected-integration-freshness { justify-content:flex-end; }
.portal-v2.connected-live .connected-management > h2 { margin-bottom:0; }
.portal-v2.connected-live .connected-management > .connected-contract-note { margin-top:6px; }
.portal-v2.connected-live .connected-catalog-toolbar { display:flex; justify-content:space-between; flex-wrap:wrap; }
.portal-v2.connected-live .connected-catalog-controls { margin-left:auto; }
.portal-v2.connected-live .connected-catalog-toolbar .v2-catalog-search { display:flex; align-items:center; gap:8px; width:220px; min-height:36px; box-sizing:border-box; padding:0 14px; border:1px solid #bdbdbd; border-radius:9999px; background:#fff; box-shadow:none; }
.portal-v2.connected-live .connected-catalog-toolbar .v2-catalog-search input:not([type=checkbox]):not([type=radio]) { border:0; border-radius:0; padding:6px 0; width:100%; min-width:0; min-height:32px; box-shadow:none; background:transparent; outline-offset:0; }
.portal-v2.connected-live .approved-table { width:100%; border-collapse:collapse; background:#fff; font:400 14px/20px Afacad,sans-serif; }
.portal-v2.connected-live .approved-table :is(th,td) { padding:14px 16px; border:0; border-bottom:1px solid #d8d8d8; }
.portal-v2.connected-live .approved-table thead th { color:#808080; font-weight:400; text-align:left; }
.portal-v2.connected-live .approved-table .numeric { text-align:right; }
.portal-v2.connected-live .approved-table tbody tr:last-child > *,
.portal-v2.connected-live .garment-assets-row:last-child,
.portal-v2.connected-live .connected-outfit-row:last-child { border-bottom:0; }
.portal-v2.connected-live .garment-assets-row,
.portal-v2.connected-live .connected-outfit-row { border-color:#d8d8d8; border-width:1px; }
.portal-v2.connected-live .connected-garment-heading { overflow:visible; white-space:nowrap; }
.portal-v2.connected-live .connected-period { width:max-content; max-width:100%; }
.portal-v2.connected-live .connected-period select { width:160px; }
.portal-v2.connected-live .approved-outfit-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr)); gap:24px; }
.portal-v2.connected-live .approved-outfit-card { min-width:0; }
.portal-v2.connected-live .approved-outfit-controls { border:0; }
.portal-v2.connected-live .outfit-delete.v2-link { width:auto; height:auto; border:0; border-radius:0; padding:4px 0; background:none; color:#000; box-shadow:none; text-decoration:underline; }
.portal-v2.connected-live .connected-preview-colors { justify-content:flex-start; align-items:center; }
.portal-v2.connected-live .connected-color-swatch { display:grid; place-items:center; width:44px; height:44px; padding:5px; background:transparent; border:1px solid transparent; border-radius:50%; box-shadow:none; }
.portal-v2.connected-live .connected-color-swatch > span { width:28px; height:28px; border-radius:50%; border:1px solid #bdbdbd; display:grid; place-items:center; color:#000; }
.portal-v2.connected-live .connected-color-swatch[aria-pressed=true] { border-color:#000; background:transparent; }
.portal-v2.connected-live .all-colors > span { background:conic-gradient(#333 0 25%,#ddd 25% 50%,#8d7b6d 50% 75%,#fff 75%); }
.portal-v2.connected-live .unknown-color > span { background:#fff; }
.portal-v2.connected-live .connected-preview-navigation { inset:50% 12px auto; transform:translateY(-50%); }
.portal-v2.connected-live .connected-preview-navigation span { align-self:flex-end; }
.portal-v2.connected-live .connected-preview-navigation button { border:0; box-shadow:none; font-size:28px; }
.portal-v2.connected-live .connected-billing-card:first-child > .connected-billing-value { color:#A88B35; }
.portal-v2.connected-live .connected-invoice-table { margin:0; width:100%; }
.portal-v2.connected-live .connected-team-dialog.connected-invoice-dialog { position:fixed; inset:0; margin:auto; padding-top:52px; }
.portal-v2.connected-live .connected-dialog-x { position:absolute; top:8px; right:8px; display:grid; place-items:center; width:44px; height:44px; background:none; border:0; color:#000; font:400 28px/1 Afacad,sans-serif; cursor:pointer; }
.portal-v2.connected-live .connected-pagination button[aria-label] { min-width:44px; min-height:44px; font-size:24px; background:none; border:0; box-shadow:none; }
.portal-v2.connected-live .connected-role-info { display:inline-flex; align-items:center; justify-content:center; vertical-align:middle; }
.portal-v2.connected-live #ask-us { scroll-margin-top:140px; }
.portal-v2:is(.connected-live, .connected-pending) .notification-drawer { box-sizing:border-box; top:0; bottom:0; height:100dvh; max-height:100dvh; width:min(420px,100vw); padding:0; overflow:hidden; }
.portal-v2:is(.connected-live, .connected-pending) .notification-drawer .drawer-header { flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 24px; margin:0; border-bottom:1px solid #d8d8d8; }
.portal-v2:is(.connected-live, .connected-pending) .notification-drawer h2 { margin:0; font:500 22px/30px Afacad,sans-serif; }
.portal-v2:is(.connected-live, .connected-pending) .notification-drawer .icon-button { width:44px; height:44px; min-width:44px; border:0; background:none; box-shadow:none; }
.portal-v2:is(.connected-live, .connected-pending) .notification-list { min-height:0; flex:1 1 auto; overflow:auto; overscroll-behavior:contain; margin:0; }
.portal-v2:is(.connected-live, .connected-pending) .notification-list article { grid-template-columns:24px minmax(0,1fr); padding:16px 24px; }
.portal-v2:is(.connected-live, .connected-pending) .notification-list .notification-icon { width:24px; height:24px; min-width:24px; font-size:12px; }
.portal-v2:is(.connected-live, .connected-pending) .notification-list small { display:block; margin-top:4px; }
.portal-v2:is(.connected-live, .connected-pending) #close-notifications { font-size:28px; }
.portal-v2:is(.connected-live, .connected-pending) .notification-list :is(strong,p,small) { overflow-wrap:anywhere; }
.portal-v2:is(.connected-live, .connected-pending) .notification-list strong { font:500 16px/24px Afacad,sans-serif; }
.portal-v2:is(.connected-live, .connected-pending) .notification-list p { font:400 14px/20px Afacad,sans-serif; }
.portal-v2:is(.connected-live, .connected-pending) .notification-empty { padding:24px; }
.portal-v2:is(.connected-live, .connected-pending) .notification-actions { flex:0 0 auto; display:flex; flex-direction:column; gap:10px; padding:16px 24px max(20px,env(safe-area-inset-bottom)); border-top:1px solid #d8d8d8; }
.portal-v2:is(.connected-live, .connected-pending) .notification-actions > button { width:100%; min-height:40px; margin:0; padding:8px 14px; border-radius:9999px; font:500 14px/20px Afacad,sans-serif; }
.portal-v2:is(.connected-live, .connected-pending) .notification-actions > button:disabled { color:#808080; background:#f1f1f1; cursor:not-allowed; }
.portal-v2.connected-live .is-attention { color:#b3261e; background:#fff4f4; }
.portal-v2.connected-live .connected-catalog-health .garment-processing.is-hold { color:#b3261e; background:#fff4f4; }
.portal-v2.connected-live .twin-tour-layer { z-index:1200; }
.portal-v2.connected-live .twin-tour-highlight { z-index:1201; border:1px solid #000; box-sizing:border-box; }
.portal-v2.connected-live .twin-tour-card { z-index:1202; max-height:calc(100dvh - 32px); overflow:auto; }
.portal-v2.connected-live .twin-tour-exit { border:0; background:none; box-shadow:none; text-decoration:underline; font:500 14px/20px Afacad,sans-serif; min-height:44px; }
/* These analytics tables use leading-edge alignment in the reference. Keep this
   after the shared numeric rule; invoice amount columns remain right-aligned. */
.portal-v2.connected-live :is(.connected-feature-table,.connected-journey-table) :is(th,td,.numeric) { text-align:left; }
@media(max-width:880px) {
 .portal-v2.connected-live .connected-catalog-controls { width:100%; margin-left:0; justify-content:flex-start; }
 .portal-v2.connected-live .connected-header-actions { margin-left:0; justify-content:flex-start; }
 .portal-v2.connected-live .connected-catalog-toolbar .v2-catalog-search { flex:1 1 180px; min-height:44px; }
 .portal-v2.connected-live .connected-catalog-toolbar .v2-catalog-search input { min-height:40px; }
 .portal-v2.connected-live .v2-section-head > .v2-link { min-height:44px; display:flex; align-items:center; }
 .portal-v2:is(.connected-live, .connected-pending) .notification-actions > button { min-height:44px; }
 .portal-v2.connected-live .connected-outfit-card-head { flex-wrap:wrap; }
}
/* Status pills preserve Nicole's table styling. Tap or keyboard activation opens
   the existing preview/status drawer; hover also explains the service status. */
.connected-status-info { font:inherit; border:0; cursor:pointer; }
.connected-status-info:focus-visible { outline:2px solid #000; outline-offset:3px; }
.connected-status-info:disabled { cursor:wait; }

/* Part 4: reuse Nicole's component anatomy and supplied icon asset. */
.portal-v2.connected-live .connected-search-icon { flex:0 0 16px; width:16px; height:16px; object-fit:contain; }
.portal-v2.connected-live .connected-drawer-body :is(dt,dd) { text-align:left; margin-left:0; }
.portal-v2.connected-live .connected-switch[data-outfit-readiness][aria-checked=true] { background:#16a34a; }
.portal-v2.connected-live .connected-switch[data-outfit-readiness][aria-checked=true]:disabled { background:#16a34a; opacity:1; cursor:not-allowed; }
.portal-v2.connected-live .v2-tab-panel > .v2-section > h2 { margin:0 0 16px; }
.portal-v2.connected-live .v2-tab-panel > .v2-section > .v2-section-head { margin:0 0 16px; }
.portal-v2.connected-live .connected-definition-table { min-width:620px; table-layout:fixed; }
.portal-v2.connected-live .connected-definition-table :is(th,td) { text-align:left; vertical-align:top; white-space:normal; overflow-wrap:anywhere; }
.portal-v2.connected-live .connected-definition-table :is(th,td):first-child { width:25%; }
.portal-v2.connected-live .connected-opportunity-tip .v2-link { text-decoration:underline; text-underline-offset:3px; }
.portal-v2.connected-live .connected-delivery-preferences-action { align-self:center; }
.portal-v2.connected-live .connected-billing-card > .connected-action { align-self:flex-start; }
.portal-v2.connected-live .connected-invoice-breakdown dt { overflow-wrap:anywhere; }
.portal-v2.connected-live .connected-invoice-breakdown dt small { display:block; }
.portal-v2.connected-live .connected-catalog-section > .connected-catalog-toolbar,
.portal-v2.connected-live .connected-catalog-section > .approved-catalog { margin:0; }


/* ===== 2026-09-11 QA action summary (Danel) - analytics, settings and help polish ===== */
.portal-v2.connected-live .connected-v2-page { gap: 24px; }
.portal-v2.connected-live .connected-commerce-live { align-self: stretch; width: 100%; }
.portal-v2.connected-live .connected-preference-row span small { display: block; margin-top: 8px; }
.portal-v2.connected-live .connected-list-row span small { display: block; margin-top: 8px; }
.portal-v2.connected-live [data-page="support"] .connected-action { min-height: 44px; }
.portal-v2.connected-live [data-page="support"] .v2-section { align-self: stretch; }
.portal-v2.connected-live .connected-action:disabled:hover { transform: none; box-shadow: none; }


/* ===== 2026-09-11 QA pinpoints (Danel, screenshots tab) ===== */
.portal-v2.connected-live .connected-api-key-table { font: 400 16px/24px Afacad, sans-serif; color: #000; }
.portal-v2.connected-live .connected-api-key-table :is(th, td) { padding: 20px 16px; vertical-align: middle; white-space: nowrap; }
.portal-v2.connected-live .connected-api-key-table thead th { padding-block: 12px; font-size: 14px; line-height: 20px; }
.portal-v2.connected-live .connected-api-key-table td:last-child { width: 1%; white-space: nowrap; }
.portal-v2.connected-live .connected-api-key-id { font: inherit; background: none; padding: 0; }
.portal-v2.connected-live [data-page="integration"] .v2-section h2 { margin-bottom: 8px; }
.portal-v2.connected-live [data-page="integration"] h2 + .connected-contract-note { margin-top: 6px; }
.portal-v2.connected-live .outfit-picker-search { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.portal-v2.connected-live .outfit-picker-search .v2-catalog-search { margin-left: auto; }
.portal-v2.connected-live .outfit-pick-grid { gap: 12px; }
.portal-v2.connected-live .approved-outfit-grid { gap: 16px; }
.portal-v2.connected-live [data-outfit-picker] .connected-pagination { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.portal-v2.connected-live .connected-plan-change-form { display: flex; flex-direction: column; gap: 16px; }
.portal-v2.connected-live .connected-plan-change-form fieldset { width: 100%; margin: 0; }
.portal-v2.connected-live .connected-plan-change-form .connected-support-send { justify-content: flex-start; }
.portal-v2.connected-live [data-page="billing"] h2 + .connected-contract-note, .portal-v2.connected-live [data-page="billing"] .v2-section-head + .connected-contract-note { margin-top: 6px; }
.portal-v2.connected-live [data-page="billing"] .approved-table td .connected-action + .connected-action { margin-left: 12px; }
.portal-v2.connected-live [data-page="billing"] .approved-table td:last-child { width: 1%; white-space: nowrap; }
.portal-v2.connected-live .connected-team-row { grid-template-columns: minmax(220px,2fr) 170px 130px 90px; }
.portal-v2.connected-live .connected-team-last-active { color: #808080; }
.portal-v2.connected-live .partner-launch-readiness-next div > span { margin-right: 12px; }


/* ===== 2026-09-12 QA final calls (Danel) - analytics single structure, plan form controls ===== */
/* Analytics: individual section cards with flat content inside - no inner inset borders. */
.portal-v2.connected-live [data-page="analytics"] .connected-table-scroll { border: 0; background: transparent; }
.portal-v2.connected-live .connected-plan-change-form fieldset { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.portal-v2.connected-live .connected-plan-change-form fieldset label { display: flex; flex-direction: row; align-items: center; gap: 8px; width: auto; min-height: 0; }
.portal-v2.connected-live .connected-plan-change-form input[type="radio"], .portal-v2.connected-live .connected-plan-change-form input[type="checkbox"] { width: 20px; height: 20px; max-width: 24px; max-height: 24px; min-height: 0; flex: 0 0 auto; margin: 0; accent-color: #000; }
.portal-v2.connected-live .connected-plan-change-form > label { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.portal-v2.connected-live .connected-plan-change-form textarea { width: 100%; }
.portal-v2.connected-live .connected-plan-change-form { align-items: flex-start; text-align: left; }


/* ===== 2026-09-14 Analytics: one container per tab, straight inner edges (Danel) ===== */
.portal-v2.connected-live [data-page="analytics"] .v2-tab-panel { background: #fff; border: 1px solid #d8d8d8; border-radius: 18px; overflow: hidden; }
.portal-v2.connected-live [data-page="analytics"] .v2-tab-panel > .v2-section { border: 0; border-radius: 0; box-shadow: none; margin-top: 0; background: #fff; }
.portal-v2.connected-live [data-page="analytics"] .v2-tab-panel > .v2-section + .v2-section { border-top: 0; } /* Round 9 item 5: no section dividers */

/* --- Part 11: Portal Notes 2026-09-14 (Nicole review) --- */

/* Overview: pull the period/filter row up under the h1 (visual gap read ~47px, target ~24px). */
.portal-v2.connected-live #tour-filters {
  margin-top: -16px;
}

.portal-v2.connected-live .connected-management .connected-contract-note {
  margin-bottom: 12px;
}

/* Commerce section heading reads as body copy, not display type. */
.portal-v2.connected-live .connected-commerce-live h2 {
  font-family: inherit;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

/* Catalog search: the input sits inside the styled label shell - no box-in-box. */
.portal-v2.connected-live .v2-catalog-search input {
  border: 0;
  background: transparent;
}


/* ============================================================
   Sep 16 QA — Round 4 (Danel Sullivan, North Star HTML reference)
   Card system: gray module surfaces (#F7F7F7, 18px padding) with
   white inner cards and tables — 4px radius, hairline border,
   very subtle shadow.
   DESIGN-SYSTEM NOTE: the subtle card shadow and 4px table rounding
   below come from Nicole's North Star HTML (via Danel's Round 4
   review, Sep 16) and intentionally relax the Sep 14 standards-layer
   "no shadow" rule for inner cards. Flagged for Nicole to reconcile
   in spreeai-portal-standards.css.
   ============================================================ */

/* -- Shared inner-card + table treatment ------------------------ */
.portal-v2.connected-live .connected-table-scroll,
.portal-v2.connected-live .garment-assets-table,
.portal-v2.connected-live .connected-billing-card {
  background: #ffffff;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 0 0 0.5px rgba(0, 0, 0, 0.06);
  overflow: hidden;
}
/* The table card still clips to its radius, but wide tables scroll sideways
   instead of being cut off (e.g. API key rows on phones, garment columns). */
.portal-v2.connected-live .connected-table-scroll,
.portal-v2.connected-live .garment-assets-table {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}
.portal-v2.connected-live .connected-table-scroll .approved-table {
  border-radius: 0;
  box-shadow: none; /* no double shadow when nested in the scroll card */
}
.portal-v2.connected-live .approved-table th,
.portal-v2.connected-live .approved-table td {
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.08);
}
.portal-v2.connected-live .garment-assets-table [role="row"] {
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.08);
}

/* Section meta text (counts, periods) — 14px, #808080 */
.portal-v2.connected-live .v2-section-head > span {
  font-size: 14px;
  color: #808080;
}

/* 20px between a section heading and its inner card */
.portal-v2.connected-live .v2-section > h2 {
  margin-bottom: 20px;
}

/* -- Overview: 28px compact controls (Danel QA guide, Sep 21, item 1) -- */
.portal-v2.connected-live #connected-overview .v2-button,
.portal-v2.connected-live #connected-overview select {
  height: 28px;
  min-height: 28px;
  padding-top: 0;
  padding-bottom: 0;
}

/* -- Notification drawer ----------------------------------------- */
.notification-drawer .drawer-header {
  display: flex;
  align-items: center;
  gap: 12px;
}
.notification-drawer .drawer-header > div {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
}
.notification-unread-count {
  font-size: 14px;
  color: #808080;
  white-space: nowrap;
}
.notification-drawer .drawer-read-all {
  flex: 0 0 auto;
}
.notification-settings-link {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
  font-size: 0.9375rem;
  color: #0a0a0a;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}
.notification-drawer .notification-actions {
  display: flex;
  justify-content: center;
}

/* -- Integrations: last sync hugs the heading -------------------- */
.portal-v2.connected-live .connected-integration-freshness {
  margin-top: 2px;
  padding-top: 0;
}

/* -- API keys: 20px side padding, dividers follow it ------------- */
.portal-v2.connected-live #connected-api-keys .approved-table th:first-child,
.portal-v2.connected-live #connected-api-keys .approved-table td:first-child {
  padding-left: 20px;
}
.portal-v2.connected-live #connected-api-keys .approved-table th:last-child,
.portal-v2.connected-live #connected-api-keys .approved-table td:last-child {
  padding-right: 20px;
}

/* -- Catalog health meta ------------------------------------------ */
.portal-v2.connected-live .connected-catalog-health .v2-section-head span {
  font-size: 14px;
  color: #808080;
}

/* -- Garments: search left, tabs right, no extra Search button ---- */
.portal-v2.connected-live .connected-catalog-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.portal-v2.connected-live .connected-catalog-controls .v2-catalog-search {
  order: -1;
  margin-right: auto;
}
.portal-v2.connected-live .connected-catalog-controls button[type="submit"][aria-label="Search garments"] {
  display: none; /* Enter in the search field submits the filter form */
}
.portal-v2.connected-live .garment-assets-table a,
.portal-v2.connected-live .garment-assets-table [role="cell"] button {
  text-decoration: none;
}
.portal-v2.connected-live .connected-catalog-count {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 0 12px;
  padding: 8px 0 10px;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.08);
  font-size: 14px;
  color: #808080;
}

/* -- Analytics: 42px tab bar, gray modules, condensed tables ------ */
.portal-v2.connected-live .connected-analytics-tabs,
.portal-v2.connected-live .connected-analytics-tabs [role="tab"] {
  min-height: 42px;
  height: 42px;
  padding-top: 0;
  padding-bottom: 0;
  box-sizing: border-box;
}
.portal-v2.connected-live [id^="connected-analytics-"]:not([role="tab"]) {
  background: #f7f7f7;
  border-radius: 8px;
  padding: 18px;
}
.portal-v2.connected-live [id^="connected-analytics-"]:not([role="tab"]) .approved-table th,
.portal-v2.connected-live [id^="connected-analytics-"]:not([role="tab"]) .approved-table td {
  padding-top: 10px;
  padding-bottom: 10px;
  line-height: 1.3;
}

/* -- Billing ------------------------------------------------------- */
.portal-v2.connected-live [data-invoice-open].v2-link {
  display: block;
  margin-top: 8px;
  text-align: left; /* view full invoice details sits bottom-left */
}
.portal-v2.connected-live .approved-table td .v2-link {
  margin-right: 16px;
}
.portal-v2.connected-live .approved-table td a {
  text-decoration: underline;
  text-underline-offset: 0.18em;
  margin-right: 16px;
}
.portal-v2.connected-live .approved-table td a:last-child {
  margin-right: 0;
}

/* -- Team: manage column right-aligned ---------------------------- */
.portal-v2.connected-live .v2-section:has([data-member-role]) .approved-table th:last-child,
.portal-v2.connected-live .v2-section:has([data-member-role]) .approved-table td:last-child {
  text-align: right;
}

/* -- Settings: standard white cards ------------------------------- */
.portal-v2.connected-live .connected-settings-grid .v2-section {
  background: #ffffff;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 0 0 0.5px rgba(0, 0, 0, 0.06);
  padding: 18px 20px;
}
.portal-v2.connected-live .connected-preference-list p {
  margin-top: 0; /* no stray top margins on body copy */
}

/* -- Tour: skip aligns with back ----------------------------------- */
.twin-tour-exit {
  margin: 0;
  padding-left: 0;
  padding-right: 0;
}


/* ============================================================
   Sep 17 QA — Round 5 (Danel, annotated notes tab)
   Container hierarchy: gray parents, white inner cards/tables only.
   Tables span full width with a right-aligned final column.
   ============================================================ */

/* Analytics: drop the outer white section wrappers */
.portal-v2.connected-live [id^="connected-analytics-"]:not([role="tab"]) > .v2-section {
  background: transparent;
  box-shadow: none;
  border: 0;
  padding: 0;
}
.portal-v2.connected-live [id^="connected-analytics-"]:not([role="tab"]) > .v2-section > h2,
.portal-v2.connected-live [id^="connected-analytics-"]:not([role="tab"]) .v2-section-head {
  margin-bottom: 16px;
}

/* Tables: full width, right-aligned final column, no leftover right gap */
.portal-v2.connected-live .approved-table {
  width: 100%;
}
.portal-v2.connected-live .approved-table th:last-child,
.portal-v2.connected-live .approved-table td:last-child {
  text-align: right;
}
.portal-v2.connected-live .approved-table td a {
  margin-right: 0;
}

/* Invoice actions: stacked, not side-by-side */
.portal-v2.connected-live .approved-table td:has([data-invoice-open]) {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

/* Billing: Direction / What should change as bordered field groups */
.portal-v2.connected-live .connected-plan-change-form fieldset {
  width: 100%;
  border: 0.5px solid rgba(0, 0, 0, 0.12);
  border-radius: 4px;
  padding: 12px 16px;
  margin: 0 0 16px;
}
.portal-v2.connected-live .connected-plan-change-form legend {
  font-size: 12px;
  color: #808080;
  padding: 0 4px;
}

/* Garments: count moved into the table footer */
.portal-v2.connected-live .connected-catalog-footer {
  border-bottom: 0;
  border-top: 0.5px solid rgba(0, 0, 0, 0.08);
  margin: 0;
  padding: 10px 16px;
}

/* SPREEAI integrations: match the thin table dividers */
.portal-v2.connected-live .v2-connection {
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.08);
}
.portal-v2.connected-live .v2-connection:last-child {
  border-bottom: 0;
}

/* Integrations header: 28px compact CTA (Danel QA guide, Sep 21, item 1).
   Desktop only: phones keep the 44px touch minimum. */
.portal-v2.connected-live [data-api-key-reveal] {
  margin-left: 0;
}
@media (min-width: 881px) {
  .portal-v2.connected-live [data-api-key-reveal] {
    height: 28px !important;
    min-height: 28px !important;
  }
}

/* Launch readiness: plain gray parent, white checklist rows */
.portal-v2 .partner-launch-readiness,
.portal-v2.connected-live .partner-launch-readiness {
  border: 0;
  box-shadow: none;
}
.portal-v2 .partner-launch-readiness-step,
.portal-v2.connected-live .partner-launch-readiness-step {
  background: #ffffff;
  border: 0;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 0 0 0.5px rgba(0, 0, 0, 0.06);
}

/* Settings: tighter panels, left-aligned delivery preferences */
.portal-v2.connected-live .connected-settings-grid .v2-section {
  padding: 16px 20px;
}
.portal-v2.connected-live .connected-delivery-preferences-action {
  display: inline-block;
  margin-left: 0;
  text-align: left;
}

/* Upload dialog: CSV step full width, hidden native input, button-style chooser */
.garment-upload-resources {
  display: block;
}
.garment-upload-resource {
  display: block;
  width: 100%;
}
.garment-dropzone {
  border: 0;
  padding: 0;
}
.garment-dropzone input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.garment-dropzone span {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  border-radius: 999px;
  background: #0a0a0a;
  color: #ffffff;
  cursor: pointer;
}
.garment-requirements-link {
  margin-right: auto;
}

/* Help: standalone chooser for the optional image */
.portal-v2.connected-live input[name="attachment"] {
  border: 0;
  background: transparent;
  padding: 0;
  width: auto;
}
.portal-v2.connected-live input[name="attachment"]::file-selector-button {
  border: 0.5px solid rgba(0, 0, 0, 0.2);
  border-radius: 999px;
  padding: 8px 16px;
  background: #ffffff;
  cursor: pointer;
  margin-right: 12px;
}

/* Tour: no side or bottom offsets on Skip tour */
.twin-tour-exit {
  margin: 0;
  padding: 0;
}


/* ============================================================
   Sep 17 QA — Round 6 (Danel, remaining feedback + decisions)
   Key change: card elevation is a soft shadow ONLY. The 0.5px ring
   from Rounds 4-5 read as the "gray outline" Danel kept flagging.
   Decisions applied: Add garments stays on Overview; Last active
   column hidden until the service supplies real dates.
   ============================================================ */

/* Cards: soft shadow, no ring, no outline */
.portal-v2.connected-live .connected-table-scroll,
.portal-v2.connected-live .garment-assets-table,
.portal-v2.connected-live .connected-billing-card,
.portal-v2.connected-live .connected-settings-grid .v2-section,
.portal-v2 .partner-launch-readiness-step,
.portal-v2.connected-live .partner-launch-readiness-step,
.portal-v2.connected-live .live-metric {
  border: 0;
  outline: 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 2px 6px rgba(0, 0, 0, 0.04);
}

/* Garments: Date updated hugs the right edge */
.portal-v2.connected-live .garment-assets-table [role="columnheader"]:last-child,
.portal-v2.connected-live .garment-assets-table .garment-assets-row [role="cell"]:last-child {
  text-align: right;
  justify-self: end;
}

/* Upload modal: tight, visibly interactive dropzone */
.garment-dropzone {
  border: 1.5px dashed rgba(0, 0, 0, 0.25);
  border-radius: 8px;
  padding: 14px 16px;
  margin: 0 0 8px;
}
.garment-upload-list { margin-top: 8px; }
.garment-upload-list p { margin: 4px 0; }

/* Analytics: 16px heading-and-group rhythm, aligned notes */
.portal-v2.connected-live [id^="connected-analytics-"]:not([role="tab"]) h2,
.portal-v2.connected-live [id^="connected-analytics-"]:not([role="tab"]) h3 {
  margin: 0 0 16px;
}
.portal-v2.connected-live [id^="connected-analytics-"]:not([role="tab"]) .v2-section,
.portal-v2.connected-live [id^="connected-analytics-"]:not([role="tab"]) .connected-table-scroll {
  margin-bottom: 16px;
}
.portal-v2.connected-live [id^="connected-analytics-"]:not([role="tab"]) p {
  margin-left: 0;
  padding-left: 0;
}

/* Billing: condensed rhythm; invoice actions stack without overlap */
.portal-v2.connected-live [data-page="billing"] .v2-section { margin: 0 0 16px; }
.portal-v2.connected-live .connected-billing-card { padding: 16px 20px; }
.portal-v2.connected-live .approved-table td:has([data-invoice-open]) {
  display: table-cell; /* undo the Round 5 flex cell, which broke column alignment */
}
.portal-v2.connected-live .approved-table td:has([data-invoice-open]) .v2-link,
.portal-v2.connected-live .approved-table td:has([data-invoice-open]) a {
  display: block;
  margin: 0 0 8px;
  text-align: right;
}
.portal-v2.connected-live .approved-table td:has([data-invoice-open]) a:last-child { margin-bottom: 0; }

/* Team: Last active hidden until real dates exist; Manage far right */
.portal-v2.connected-live .connected-team-last-active { display: none !important; }
.portal-v2.connected-live .connected-team-row { grid-template-columns: minmax(0, 1fr) 200px 96px; }
.portal-v2.connected-live .connected-team-row > [role="cell"]:last-child,
.portal-v2.connected-live .connected-team-labels [role="columnheader"]:last-child {
  justify-self: end;
  text-align: right;
}

/* Invites: empty state sits with the content */
.portal-v2.connected-live .connected-list:has(.connected-empty) { min-height: 0; }
.portal-v2.connected-live .connected-empty {
  margin: 0;
  padding: 8px 0;
  font-size: 14px;
  color: #808080;
}

/* Settings: padding does the spacing, not margins */
.portal-v2.connected-live .connected-settings-grid { gap: 16px; }
.portal-v2.connected-live .connected-settings-grid .v2-section { margin: 0; }

/* Help: breathing room under the ask-us flow */
.portal-v2.connected-live .v2-section:has(.connected-support-send) { padding-bottom: 16px; }

/* Tour: section-level spacing, no per-button offsets */
.twin-tour-actions { gap: 12px; }
.twin-tour-actions button { margin: 0; }
.twin-tour-exit { margin: 0; padding: 0; }


/* ============================================================
   Sep 18 QA — Round 7 (Danel: North Star source of truth)
   Shadow is the North Star's exact value. Gray parents are
   #F7F7F7 / 8px / 20px per the North Star HTML. New Help &
   support patterns and login cleanup.
   ============================================================ */

/* Canonical card shadow: 0 1px 2px rgba(0,0,0,0.1), from the North Star */
.portal-v2.connected-live .connected-table-scroll,
.portal-v2.connected-live .garment-assets-table,
.portal-v2.connected-live .connected-billing-card,
.portal-v2.connected-live .connected-settings-grid .v2-section,
.portal-v2 .partner-launch-readiness-step,
.portal-v2.connected-live .partner-launch-readiness-step,
.portal-v2.connected-live .live-metric {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Gray parents: 20px padding per North Star */
.portal-v2.connected-live [id^="connected-analytics-"]:not([role="tab"]) {
  padding: 20px;
}

/* -- Help & support: header status control -------------------- */
.portal-v2.connected-live .connected-status-control {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  margin-left: auto;
  text-align: right;
}
.portal-v2.connected-live .connected-status-note {
  font-size: 14px;
  line-height: 20px;
  color: #808080;
  white-space: nowrap;
}

/* -- Help hero: gray parent, white card, pill search, chips ---- */
.portal-v2.connected-live .connected-help-hero {
  background: #f7f7f7;
  border-radius: 8px;
  padding: 20px;
}
.portal-v2.connected-live .connected-help-hero-card {
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.portal-v2.connected-live .connected-help-hero-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.portal-v2.connected-live .connected-help-title {
  font-size: 22px;
  line-height: 30px;
  font-weight: 500;
}
.portal-v2.connected-live .connected-help-sub {
  font-size: 16px;
  line-height: 24px;
  color: #595959;
}
.portal-v2.connected-live .connected-help-search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  height: 46px;
  border-radius: 9999px;
  background: #ffffff;
  box-shadow: inset 0 0 0 1px #bdbdbd;
  max-width: 520px;
}
.portal-v2.connected-live .connected-help-search input {
  border: 0;
  outline: none;
  background: transparent;
  font: inherit;
  font-size: 16px;
  line-height: 24px;
  flex: 1;
  min-width: 0;
}
.portal-v2.connected-live .connected-help-search [data-support-search-clear] {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border: 0;
  border-radius: 9999px;
  background: transparent;
  cursor: pointer;
  font-size: 15px;
  color: #404040;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.portal-v2.connected-live .connected-help-search [data-support-search-clear]:hover {
  background: #f1f1f1;
}
.portal-v2.connected-live .connected-help-chips {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.portal-v2.connected-live .connected-help-chip {
  border: 0;
  border-radius: 9999px;
  background: #f1f1f1;
  padding: 6px 14px;
  font: inherit;
  font-size: 14px;
  line-height: 20px;
  cursor: pointer;
}
.portal-v2.connected-live .connected-help-chip:hover {
  background: #e5e5e5;
}

/* -- Help guides: gray parent, white list card ----------------- */
.portal-v2.connected-live .connected-help-guides {
  background: #f7f7f7;
  border-radius: 8px;
  padding: 20px;
}
.portal-v2.connected-live .connected-help-guides .v2-section-head {
  margin-bottom: 16px;
}
.portal-v2.connected-live .connected-help-guide-card {
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}
.portal-v2.connected-live .connected-help-guide {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 22px;
  text-decoration: none;
  color: inherit;
}
.portal-v2.connected-live .connected-help-guide + .connected-help-guide {
  border-top: 1px solid #d8d8d8; /* Round 8: reference divider color */
}
.portal-v2.connected-live .connected-help-guide strong {
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}
.portal-v2.connected-live .connected-help-guide small {
  display: block;
  font-size: 14px;
  line-height: 20px;
  color: #808080;
}
.portal-v2.connected-live .connected-help-guide-kind {
  font-size: 14px;
  line-height: 20px;
  color: #808080;
  white-space: nowrap;
  flex-shrink: 0;
}
.portal-v2.connected-live .connected-help-empty {
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.portal-v2.connected-live .connected-help-empty span {
  font-size: 14px;
  line-height: 20px;
  color: #595959;
}

/* -- Ask us: segmented topic control, ring inputs -------------- */
.portal-v2.connected-live .connected-help-ask {
  background: #f7f7f7;
  border-radius: 8px;
  padding: 20px;
}
.portal-v2.connected-live .connected-help-ask .connected-support-form {
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  padding: 20px 24px;
}
.portal-v2.connected-live .connected-support-topics {
  border: 0;
  margin: 0;
  padding: 3px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border-radius: 9999px;
  background: #f1f1f1;
  flex-wrap: wrap;
}
.portal-v2.connected-live .connected-support-topics legend {
  float: left;
  width: 100%;
  padding: 0 0 6px;
  font-size: 14px;
  line-height: 20px;
  color: #595959;
}
.portal-v2.connected-live .connected-support-topics label {
  position: relative;
}
.portal-v2.connected-live .connected-support-topics input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.portal-v2.connected-live .connected-support-topics span {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 9999px;
  font-size: 14px;
  line-height: 20px;
  cursor: pointer;
}
.portal-v2.connected-live .connected-support-topics input:checked + span {
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  font-weight: 500;
}
.portal-v2.connected-live .connected-support-form textarea {
  border: 0;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px #bdbdbd;
  padding: 12px 14px;
  font: inherit;
  font-size: 16px;
  line-height: 24px;
}

/* -- Login: consistent providers and fields -------------------- */
.provider-button,
.provider-slot,
.shopify-login-form button[type="submit"],
.login-form button[type="submit"] {
  height: 46px;
  min-height: 46px;
  width: 100%;
  max-width: 360px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 9999px;
}
.shopify-login-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 360px;
}
.shopify-login-form label,
.login-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
  line-height: 20px;
  color: #595959;
}
.shopify-login-form input,
.login-form input {
  height: 44px;
  border: 0;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px #bdbdbd;
  padding: 0 14px;
  font: inherit;
  font-size: 16px;
}
.login-provider-note {
  font-size: 14px;
  line-height: 20px;
  color: #808080;
  max-width: 360px;
}

/* ============================================================
   Sep 18 QA — Round 8 (Danel Sullivan, isolated Billing and
   Help/Support reference HTML). Fixes two 1.0.143 regressions
   (invisible checked topic label; doubled search outline) and
   aligns both pages to the isolated references. Later rules in
   this file supersede the Round 7 white-pill topic treatment.
   All figures remain API-bound; no sample data reproduced.
   ============================================================ */

/* -- Section head rows hug the reference: 4px side padding ------- */
.portal-v2.connected-live .v2-section-head {
  padding: 0 4px;
}

/* -- Help hero card ---------------------------------------------- */
.portal-v2.connected-live .connected-help-hero-card {
  padding: 24px 28px;
}
.portal-v2.connected-live .connected-help-title {
  font-size: 22px;
  line-height: 30px;
  font-weight: 500;
}
.portal-v2.connected-live .connected-help-sub {
  font-size: 16px;
  line-height: 24px;
  color: #595959;
}

/* -- Search pill: one ring only (fixes doubled outline) ----------- */
.portal-v2.connected-live .connected-help-search {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 520px;
}
.portal-v2.connected-live .connected-help-search-icon {
  flex: 0 0 auto;
}
.portal-v2.connected-live .connected-help-search input {
  border: 0 !important;
  box-shadow: none !important;
  outline: none;
  background: transparent;
  border-radius: 0;
  height: auto !important;
  min-height: 0;
  padding: 0;
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 16px;
  line-height: 24px;
  color: #000000;
}

/* -- Suggestion chips: 4px 14px, #404040 -------------------------- */
.portal-v2.connected-live .connected-help-chips {
  gap: 8px;
}
.portal-v2.connected-live .connected-help-chip {
  padding: 4px 14px;
  color: #404040;
  background: #f1f1f1;
  border-radius: 9999px;
  font-size: 14px;
  line-height: 20px;
}
.portal-v2.connected-live .connected-help-chip:hover {
  background: #e5e5e5;
}

/* -- Guide rows: 1px #D8D8D8 dividers ----------------------------- */
.portal-v2.connected-live .connected-help-guide {
  border-top: 1px solid #d8d8d8;
}
.portal-v2.connected-live .connected-help-guide:first-child {
  border-top: none;
}
/* -- Ask us: white card form, segmented topic pill row ------------ */
/* Fixes the 1.0.143 invisible checked label: the checked pill is
   black with white 500 text, per the isolated reference. */
.portal-v2.connected-live .connected-help-ask .connected-support-form {
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  padding: 20px 24px;
}
.portal-v2.connected-live .connected-support-topics {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
  background: transparent;
}
.portal-v2.connected-live .connected-support-topics legend {
  color: #595959;
  font-size: 14px;
  line-height: 20px;
  padding: 0;
  margin-bottom: 6px;
}
.portal-v2.connected-live .connected-support-topic-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
  padding: 3px;
  border-radius: 9999px;
  background: #f1f1f1;
  width: fit-content;
  max-width: 100%;
}
.portal-v2.connected-live .connected-support-topics label {
  position: relative;
  display: block;
}
.portal-v2.connected-live .connected-support-topics span {
  display: block;
  padding: 6px 14px;
  border-radius: 9999px;
  background: transparent;
  color: #595959;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  cursor: pointer;
  transition: background 140ms, color 140ms;
}
.portal-v2.connected-live .connected-support-topics input:checked + span {
  background: #000000;
  color: #ffffff;
  font-weight: 500;
}
.portal-v2.connected-live .connected-support-send {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.portal-v2.connected-live .connected-support-send-note {
  font-size: 14px;
  line-height: 20px;
  color: #808080;
}
/* The form is a column, but styles.css:168 still makes it wrap. A wrapping
   flex line is as wide as its widest child (the textarea's 20 built-in
   columns, the topic row), so on phones every field stretched past the card. */
.portal-v2.connected-live .connected-support-form {
  flex-wrap: nowrap;
}
/* The file input sits in a grid label, whose track won't go below the
   input's built-in width unless the input allows it. */
.portal-v2.connected-live .connected-support-form input[type="file"] {
  min-width: 0;
}
/* The topic radios are invisible, but styles.css:169 gives every form input
   min-height:42px, which hung below the 38px pill row. Keep them a 1px point
   inside their pill. */
.portal-v2.connected-live .connected-support-topics input {
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  min-height: 0;
  margin: 0;
  padding: 0;
}
/* Phones: topics stay on one line at the form's full width and scroll
   sideways instead of wrapping into a second row. */
@media (max-width: 720px) {
  .portal-v2.connected-live .connected-support-topic-row {
    flex-wrap: nowrap;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .portal-v2.connected-live .connected-support-topic-row::-webkit-scrollbar { display: none; }
  .portal-v2.connected-live .connected-support-topics label { flex: 0 0 auto; }
  .portal-v2.connected-live .connected-support-topics span { white-space: nowrap; }
  /* The row clips overflow, so draw the focus ring inside the pill. */
  .portal-v2.connected-live .connected-support-topics input:focus-visible + span { outline-offset: -2px; }
  /* Status filters (Garments, Looks, Team) work the same way: one line at
     full width, sideways scrolling only. */
  .portal-v2.connected-live .connected-segments {
    flex-wrap: nowrap;
    width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .portal-v2.connected-live .connected-segments::-webkit-scrollbar { display: none; }
  .portal-v2.connected-live .connected-segments button { flex: 0 0 auto; white-space: nowrap; }
  .portal-v2.connected-live .connected-segments button:focus-visible { outline-offset: -2px; }
}

/* -- Billing: reference card geometry, neutral plan headline ------ */
.portal-v2.connected-live .connected-billing-card {
  border-radius: 8px;
  padding: 20px 24px;
}
.portal-v2.connected-live .connected-billing-card > strong {
  color: #000000;
}

/* -- Billing: invoice table follows the reference grid ------------ */
.portal-v2.connected-live .connected-invoice-table th {
  font-size: 14px;
  line-height: 20px;
  color: #808080;
  font-weight: 400;
}
.portal-v2.connected-live .connected-invoice-table th,
.portal-v2.connected-live .connected-invoice-table td {
  border-bottom: 1px solid #d8d8d8;
}
.portal-v2.connected-live .connected-invoice-table tbody tr:last-child td {
  border-bottom: none;
}
.portal-v2.connected-live .connected-invoice-table .garment-processing {
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 9999px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  white-space: nowrap;
  color: #2c63a1;
  background: #ddedff;
}
.portal-v2.connected-live .connected-invoice-table .garment-processing.is-ready {
  color: #128012;
  background: #dffbdf;
}

/* ============================================================
   Sep 21 QA — Round 9 (Danel Sullivan, QA Implementation Guide).
   28px compact buttons, grouped Integrations header, garment
   wrapping, analytics section rhythm, team role alignment, gray
   settings parents with white inner cards, #D8D8D8 dividers,
   login provider button system, invoice dialog links.
   ============================================================ */

/* -- 1: comparable compact header/section buttons at 28px --------- */
.portal-v2.connected-live .v2-section-head .v2-button,
.portal-v2.connected-live .connected-module-head .v2-button {
  height: 28px;
  min-height: 28px;
  padding-top: 0;
  padding-bottom: 0;
}

/* -- 2: Integrations header groups the doc link beside the CTA ---- */
.portal-v2.connected-live .connected-module-head {
  justify-content: flex-start;
  gap: 12px;
  margin-bottom: 8px;
}
.portal-v2.connected-live .connected-module-head > div:first-child {
  margin-right: auto;
}
.portal-v2.connected-live .connected-integration-freshness {
  margin-top: 0;
  margin-bottom: 12px;
  padding-top: 0;
  padding-bottom: 0;
}

/* -- 3: badges never wrap; garment names clamp to two lines ------- */
.portal-v2.connected-live .garment-assets-table .garment-processing {
  white-space: nowrap;
}
.portal-v2.connected-live .garment-name .v2-link {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-align: left;
  overflow-wrap: anywhere;
}

/* -- 5: analytics sections without divider lines, tighter heads --- */
.portal-v2.connected-live [data-page="analytics"] .v2-section {
  border-top: 0;
  padding-top: 0;
}
.portal-v2.connected-live [data-page="analytics"] .v2-section > h2 {
  margin-bottom: 12px;
}

/* -- 7: invoice dialog secondary actions ------------------------- */
.portal-v2.connected-live .connected-invoice-dialog-links {
  display: flex;
  gap: 20px;
  margin: 12px 0 4px;
}
.portal-v2.connected-live .connected-invoice-table [data-invoice-open] {
  display: inline;
  margin: 0;
}

/* -- 8: role text aligns with the select text --------------------- */
.portal-v2.connected-live .connected-team-role {
  padding-left: 14px;
}
/* -- 9/10: settings — gray outer parents, white inner cards, ------ */
/*    full-width #D8D8D8 dividers between preference rows           */
.portal-v2.connected-live .connected-settings-grid .v2-section {
  background: #f7f7f7;
  border-radius: 8px;
  box-shadow: none;
  padding: 20px;
}
.portal-v2.connected-live .connected-settings-grid .v2-section > h2 {
  padding: 0 4px;
  margin-bottom: 16px;
}
.portal-v2.connected-live .connected-preference-list {
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  padding: 0;
  overflow: hidden;
}
.portal-v2.connected-live .connected-preference-row {
  padding: 14px 24px;
  margin: 0;
  border-top: 1px solid #d8d8d8;
}
.portal-v2.connected-live .connected-preference-row:first-child {
  border-top: none;
}
.portal-v2.connected-live .connected-settings-grid .connected-delivery-preferences-action {
  display: inline-block;
  margin: 14px 4px 0;
}

/* -- 10: one divider standard across cards and tables ------------- */
.portal-v2.connected-live .approved-table th,
.portal-v2.connected-live .approved-table td {
  border-bottom: 1px solid #d8d8d8;
}
.portal-v2.connected-live .approved-table tbody tr:last-child td {
  border-bottom: none;
}
.portal-v2.connected-live .garment-assets-table [role="row"] {
  border-bottom: 1px solid #d8d8d8;
}
.portal-v2.connected-live .garment-assets-table [role="row"]:last-child {
  border-bottom: none;
}

/* -- 11: one provider button system on login ---------------------- */
.provider-button,
.provider-slot {
  width: 100%;
  max-width: 368px;
  min-height: 46px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 9999px;
  border: 0;
  box-shadow: inset 0 0 0 1px #bdbdbd;
  background: #ffffff;
  color: #000000;
  font-family: Afacad, sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  padding: 0 16px;
  margin: 0 auto;
  cursor: pointer;
}
.provider-button .provider-icon {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  object-fit: contain;
}
.provider-button:hover {
  background: #f7f7f7;
}
.provider-button:focus-visible,
.provider-slot:focus-within {
  outline: 2px solid #000000;
  outline-offset: 2px;
}
.provider-slot {
  box-shadow: none;
  padding: 0;
  overflow: hidden;
}

/* ============================================================
   Sep 22 QA — Round 10 (Danel Sullivan, Second Round QA).
   One page rhythm, compact error states without nested white
   cards, full-width status banner, one login button system.
   ============================================================ */

/* -- 1/4/5/6: one vertical rhythm; controls grouped with heads --- */
.portal-v2.connected-live .connected-v2-page {
  gap: 16px;
}
.portal-v2.connected-live .v2-page-head,
.portal-v2.connected-live #tour-filters {
  margin-top: 0;
  margin-bottom: 0;
}

/* -- 2: status banner spans the content width -------------------- */
.portal-v2.connected-live .data-source-status {
  margin: 0 40px; /* matches the page horizontal padding so edges align */
  width: auto;
  box-sizing: border-box;
}

/* -- 2: Server Status — message lives in the section, no nested
      white card, compact and left aligned ----------------------- */
.portal-v2.connected-live .connected-attention {
  padding: 16px 20px;
  margin: 0;
}
.portal-v2.connected-live .connected-attention > h2 {
  margin: 0 0 10px;
}
.portal-v2.connected-live .connected-source-card {
  min-height: 0;
  height: auto;
}
.portal-v2.connected-live .connected-source-card > p {
  margin-bottom: 0;
}
.portal-v2.connected-live .connected-source-card > .connected-action {
  margin-top: 12px;
  align-self: flex-start;
}
.portal-v2.connected-live .connected-attention .connected-source-card {
  background: transparent;
  box-shadow: none;
  border: 0;
  border-radius: 0;
  padding: 0;
}
.portal-v2.connected-live .connected-attention .connected-source-card + .connected-source-card {
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  padding-top: 14px;
  margin-top: 14px;
}
.portal-v2.connected-live .connected-attention .connected-source-grid {
  display: block;
}

/* -- 3: billing cards size to content, error states stay compact - */
.portal-v2.connected-live .connected-billing-summary {
  align-items: start;
}
/* -- 7: one login authentication system --------------------------- */
/* Every action and field in the auth column shares one width, one
   height, one radius, one type treatment, aligned edges. */
#sign-in-panel .login-form,
#sign-in-panel .login-account-link,
#sign-in-panel .login-note,
.provider-button,
.provider-slot,
.shopify-login-form,
.provider-profile {
  width: 100%;
  max-width: 368px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}
#sign-in-panel .login-form .pill-button.full-width,
.provider-button,
.shopify-login-form .provider-button {
  width: 100%;
  max-width: none;
  height: 46px;
  min-height: 46px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 0 16px;
  font-family: Afacad, sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
}
.provider-button .provider-icon,
.shopify-login-form .provider-icon {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  margin-right: 10px;
  object-fit: contain;
}
.provider-slot {
  height: 46px;
  min-height: 46px;
  background: transparent;
  box-shadow: none;
  border: 0;
  padding: 0;
  border-radius: 9999px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.shopify-login-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.shopify-login-form label {
  width: 100%;
  box-sizing: border-box;
  font-family: Afacad, sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: #595959;
}
.shopify-login-form input,
#sign-in-panel .login-form input {
  width: 100%;
  box-sizing: border-box;
  height: 46px;
  border: 0;
  border-radius: 9999px;
  box-shadow: inset 0 0 0 1px #bdbdbd;
  background: #ffffff;
  padding: 0 16px;
  font-family: Afacad, sans-serif;
  font-size: 16px;
  line-height: 24px;
}
.shopify-login-form input:focus,
#sign-in-panel .login-form input:focus {
  outline: 2px solid #000000;
  outline-offset: 1px;
}
.provider-profile {
  border: 0;
  background: transparent;
}
.provider-profile > summary {
  width: 100%;
  box-sizing: border-box;
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  box-shadow: inset 0 0 0 1px #bdbdbd;
  background: #ffffff;
  padding: 0 16px;
  font-family: Afacad, sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}
.provider-profile > summary::-webkit-details-marker {
  display: none;
}

/* -- Round 10 verification fixes: tabs/panel spacing follows the rhythm */
.portal-v2.connected-live .connected-analytics-tabs {
  margin-bottom: 0;
}
.portal-v2.connected-live .v2-tab-panel {
  padding-top: 0;
}
.portal-v2.connected-live .v2-analytics-meta {
  margin-bottom: 0;
}


/* ============================================================
   Round 11 (Danel, Sep 22) — flags on Integrations, banner action
   ============================================================ */

/* -- CHG-01/UPD-04: "Coming soon" state on SDK feature flag rows.
   Visible, not clickable; same slot and type as the On/Off state label. */
.portal-v2.connected-live .connected-coming-soon {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 14px;
  border-radius: 9999px;
  background: #f0f0f0;
  color: #595959;
  font: 500 14px/20px Afacad, sans-serif;
  white-space: nowrap;
}

/* -- BUG-04/ERR-63: the workspace banner carries one action.
   Compact 28px pill in the banner's own ink color; hidden unless a source failed. */
.data-source-status .data-source-status-action {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  height: 28px;
  min-height: 28px;
  padding: 0 14px;
  border: 0;
  border-radius: 9999px;
  background: transparent;
  box-shadow: 0 0 0 1px currentColor inset;
  color: inherit;
  font: 500 14px/20px Afacad, sans-serif;
  cursor: pointer;
  white-space: nowrap;
}
.data-source-status .data-source-status-action[hidden] { display: none; }
.data-source-status .data-source-status-action:hover { background: rgba(0, 0, 0, 0.06); }
.data-source-status .data-source-status-action:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }


/* -- Round 11b (BUG-03/ERR-57): drawer error state carries one Try again action. */
.notification-drawer .notification-empty .connected-action {
  margin-top: 12px;
  height: 28px;
  min-height: 28px;
  padding: 0 14px;
  font: 500 14px/20px Afacad, sans-serif;
}

/* -- Round 12 (Danel, Sep 23): structure-matched skeletons, one primary error, identity chip. */
.portal-v2 .connected-skeleton { display: grid; gap: 12px; padding: 4px 0; }
.portal-v2 .connected-skeleton .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.portal-v2 .connected-skeleton .v2-skeleton { display: block; height: 14px; border-radius: 8px; }
.portal-v2 .connected-skeleton-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) 96px 56px; align-items: center; gap: 16px; padding: 12px 0; border-bottom: 1px solid #f0f0f0; }
.portal-v2 .connected-skeleton-row:last-child { border-bottom: 0; }
.portal-v2 .connected-skeleton .connected-skeleton-avatar { width: 36px; height: 36px; border-radius: 9999px; }
.portal-v2 .connected-skeleton-lines { display: grid; gap: 8px; }
.portal-v2 .connected-skeleton .connected-skeleton-line { width: 100%; max-width: 320px; }
.portal-v2 .connected-skeleton .connected-skeleton-line.short { max-width: 180px; height: 12px; }
.portal-v2 .connected-skeleton .connected-skeleton-pill { width: 96px; height: 28px; border-radius: 9999px; }
.portal-v2 .connected-skeleton .connected-skeleton-action { width: 56px; height: 12px; justify-self: end; }
.portal-v2 .connected-skeleton[data-shape="cards"] { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
.portal-v2 .connected-skeleton-card { display: grid; gap: 14px; padding: 20px; background: #fff; border-radius: 12px; }
.portal-v2 .connected-skeleton .connected-skeleton-value { width: 60%; height: 32px; }
.portal-v2 .connected-skeleton-block { display: grid; gap: 12px; }
.portal-v2 .connected-skeleton .connected-skeleton-title { width: 40%; height: 20px; }
.portal-v2 .connected-overview-skeleton .connected-skeleton { margin-top: 24px; }
.portal-v2 .connected-attention-more { margin-top: 12px; }
.portal-v2 .connected-attention-more summary { cursor: pointer; padding: 8px 0; font: 500 14px/20px Afacad, sans-serif; color: #7D351F; }
.portal-v2 .connected-attention-more > .connected-source-grid { margin-top: 8px; }
.sidebar div.user-chip { cursor: default; }
/* Settings > Account: follows the "Settings: Email and Password" reference. Gray section
   surface, white inner card, label-left/field-right rows, and a separate password screen. */
.portal-v2.connected-live .connected-acct { display:flex; flex-direction:column; gap:16px; max-width:1560px; }
.portal-v2.connected-live .connected-acct-sec { background:#f7f7f7; border-radius:8px; padding:20px; }
.portal-v2.connected-live .connected-acct-head { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; min-height:30px; margin-bottom:16px; }
.portal-v2.connected-live .connected-acct-head h2 { margin:0; font:500 22px/30px Afacad,sans-serif; }
.portal-v2.connected-live .connected-acct-inner { background:#fff; border-radius:8px; padding:4px 0; }
.portal-v2.connected-live .connected-acct-frow { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 24px; align-items:start; padding:16px 24px; border-top:1px solid #d8d8d8; }
.portal-v2.connected-live .connected-acct-frow:first-child { border-top:0; }
.portal-v2.connected-live .connected-acct-k { padding-top:12px; color:#595959; font:400 14px/20px Afacad,sans-serif; }
.portal-v2.connected-live .connected-acct-frow-info { grid-template-columns:minmax(120px,1fr) auto; align-items:center; }
.portal-v2.connected-live .connected-acct-frow-info > .connected-acct-k { padding-top:0; }
.portal-v2.connected-live .connected-acct-finfo { display:flex; justify-content:flex-end; align-items:center; gap:16px; }
.portal-v2.connected-live .connected-acct-fone { display:flex; flex-direction:column; gap:6px; min-width:0; width:100%; max-width:720px; justify-self:end; }
.portal-v2.connected-live .connected-acct .connected-acct-input { width:100%; height:44px; box-sizing:border-box; padding:0 14px; border:1px solid #bfbfbf; border-radius:4px; background:#fff; color:#000; font:400 16px/24px Afacad,sans-serif; }
.portal-v2.connected-live .connected-acct .connected-acct-input:hover { border-color:#808080; }
.portal-v2.connected-live .connected-acct .connected-acct-input:focus { outline:none; border-color:#000; box-shadow:0 0 0 1px #000; }
.portal-v2.connected-live .connected-acct .connected-acct-input[aria-invalid="true"] { border-color:#d32f2f; box-shadow:0 0 0 1px #d32f2f; }
.portal-v2.connected-live .connected-acct .connected-acct-input:disabled,
.portal-v2.connected-live .connected-acct .connected-acct-input[readonly] { background:#f7f7f7; color:#808080; border-color:#ebebeb; }
.portal-v2.connected-live .connected-acct-help { margin:0; color:#808080; font:400 14px/20px Afacad,sans-serif; }
.portal-v2.connected-live .connected-acct-help svg { vertical-align:-2px; }
.portal-v2.connected-live .connected-acct-err { margin:0; color:#d32f2f; font:400 14px/20px Afacad,sans-serif; }
.portal-v2.connected-live .connected-acct-err:empty { display:none; }
.portal-v2.connected-live .connected-acct-alert { display:flex; gap:12px; align-items:flex-start; justify-content:space-between; margin-bottom:16px; padding:12px 16px; border-radius:8px; background:#fdecec; color:#7a1b1b; font:400 14px/20px Afacad,sans-serif; }
.portal-v2.connected-live .connected-acct-alert b { display:block; margin-bottom:2px; font-size:15px; font-weight:500; }
.portal-v2.connected-live .connected-acct-back { display:inline-flex; align-self:flex-start; align-items:center; gap:6px; padding:4px 0; border:0; background:none; color:#000; font:500 14px/20px Afacad,sans-serif; cursor:pointer; }
.portal-v2.connected-live .connected-acct-back:hover { text-decoration:underline; text-underline-offset:3px; }
.portal-v2.connected-live .connected-acct-pwform { display:flex; flex-direction:column; gap:16px; padding:20px 24px 16px; }
.portal-v2.connected-live .connected-acct-field { display:flex; flex-direction:column; gap:6px; min-width:0; }
.portal-v2.connected-live .connected-acct-field > label { color:#595959; font:400 14px/20px Afacad,sans-serif; }
.portal-v2.connected-live .connected-acct-pw { position:relative; }
.portal-v2.connected-live .connected-acct .connected-acct-pw .connected-acct-input { padding-right:52px; }
.portal-v2.connected-live .connected-acct-reveal { position:absolute; top:6px; right:6px; display:grid; place-items:center; width:32px; height:32px; min-height:0; padding:0; border:0; border-radius:9999px; background:transparent; color:#404040; cursor:pointer; }
.portal-v2.connected-live .connected-acct-reveal:hover { background:#f1f1f1; }
.portal-v2.connected-live .connected-acct-forgot { align-self:flex-start; margin-top:2px; }
.portal-v2.connected-live .connected-acct-reqs { display:grid; gap:6px; margin:0; padding:0; list-style:none; }
.portal-v2.connected-live .connected-acct-reqs li { display:flex; align-items:center; gap:8px; color:#808080; font:400 14px/20px Afacad,sans-serif; }
.portal-v2.connected-live .connected-acct-dot { display:grid; place-items:center; flex:none; width:16px; height:16px; box-sizing:border-box; border:1.5px solid #bfbfbf; border-radius:50%; }
.portal-v2.connected-live .connected-acct-dot svg { display:none; }
.portal-v2.connected-live .connected-acct-reqs li.met { color:#000; }
.portal-v2.connected-live .connected-acct-reqs li.met .connected-acct-dot { background:#000; border-color:#000; }
.portal-v2.connected-live .connected-acct-reqs li.met .connected-acct-dot svg { display:block; }
.portal-v2.connected-live .connected-acct-foot { display:flex; gap:8px; padding-top:4px; }
.portal-v2.connected-live .connected-acct-spin { display:inline-block; width:12px; height:12px; margin-right:6px; box-sizing:border-box; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; vertical-align:-1px; animation:connected-spin .8s linear infinite; }
@media (prefers-reduced-motion: reduce) { .portal-v2.connected-live .connected-acct-spin { animation:none; } }
@media (max-width:720px) {
  .portal-v2.connected-live .connected-acct-sec { padding:16px; }
  .portal-v2.connected-live .connected-acct-frow { grid-template-columns:1fr; padding:16px; }
  .portal-v2.connected-live .connected-acct-frow-info { grid-template-columns:1fr auto; }
  .portal-v2.connected-live .connected-acct-k { padding-top:0; }
  .portal-v2.connected-live .connected-acct-alert { flex-direction:column; }
  .portal-v2.connected-live .connected-acct-pwform { padding:16px; }
  .portal-v2.connected-live .connected-acct-foot { flex-direction:column; }
  .portal-v2.connected-live .connected-acct-foot .connected-action { width:100%; min-height:40px; }
}

/* ===== Delivery preferences: switch rows (Settings reference, Notifications tab) ===== */
.portal-v2.connected-live .connected-notification-preferences { background: #f7f7f7; border-radius: 8px; padding: 20px; box-shadow: none; }
.portal-v2.connected-live .connected-notification-preferences-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.portal-v2.connected-live .connected-notification-preferences-head h2 { margin: 0; font: 500 22px/30px Afacad, sans-serif; }
.portal-v2.connected-live .connected-notification-status { font: 400 14px/20px Afacad, sans-serif; color: #808080; }
.portal-v2.connected-live .connected-notification-status.is-error { color: #b3261e; }
.portal-v2.connected-live .connected-notification-preferences > .connected-contract-note { margin: 4px 0 0; }
.portal-v2.connected-live .connected-notification-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; align-items: start; }
.portal-v2.connected-live .connected-notification-column { display: flex; flex-direction: column; gap: 16px; }
.portal-v2.connected-live .connected-notification-card { background: #fff; border-radius: 8px; padding: 4px 0; }
.portal-v2.connected-live .connected-notification-card-label { padding: 16px 24px 4px; font: 400 14px/20px Afacad, sans-serif; color: #808080; }
.portal-v2.connected-live .connected-notification-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 24px; }
.portal-v2.connected-live .connected-notification-row + .connected-notification-row { border-top: 1px solid #d8d8d8; }
.portal-v2.connected-live .connected-notification-row-label { font: 400 16px/22px Afacad, sans-serif; color: #000; }
.portal-v2.connected-live .connected-notification-row-sub { font: 400 14px/20px Afacad, sans-serif; color: #808080; }
.portal-v2.connected-live .connected-notification-frequency { padding: 20px 24px; }
/* Switches reuse the shared .connected-switch component (portal-v2.css). */
.portal-v2.connected-live .connected-segmented button:focus-visible { outline: 2px solid #000; outline-offset: 2px; }
.portal-v2.connected-live .connected-segmented { display: inline-flex; flex-wrap: wrap; gap: 2px; margin-top: 14px; padding: 3px; border-radius: 9999px; background: #f1f1f1; }
.portal-v2.connected-live .connected-segmented button { padding: 6px 14px; border: 0; border-radius: 9999px; background: transparent; color: #404040; font: 400 14px/20px Afacad, sans-serif; cursor: pointer; }
.portal-v2.connected-live .connected-segmented button[aria-pressed="true"] { background: #000; color: #fff; font-weight: 500; }
.portal-v2.connected-live .connected-segmented button:disabled { opacity: .5; cursor: not-allowed; }
/* While a change saves, controls are locked but should not flash to the disabled look. */
.portal-v2.connected-live .connected-notification-preferences.is-saving :is(.connected-switch, .connected-segmented button):disabled { opacity: 1; cursor: progress; }
@media (max-width: 720px) {
  .portal-v2.connected-live .connected-notification-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ===== Notifications drawer (Settings reference drawer, single flat list) ===== */
.portal-v2:is(.connected-live, .connected-pending) .notification-drawer { box-shadow: 0 8px 24px rgba(0, 0, 0, .25); }
.portal-v2:is(.connected-live, .connected-pending) .notification-drawer .drawer-header { align-items: flex-start; gap: 8px; padding: 20px 22px 16px; border-bottom: 1px solid #d8d8d8; }
.portal-v2:is(.connected-live, .connected-pending) .notification-drawer .drawer-header > div { flex-direction: column; align-items: flex-start; gap: 2px; }
.portal-v2:is(.connected-live, .connected-pending) .notification-drawer .drawer-header h2 { font: 500 22px/30px Afacad, sans-serif; }
.portal-v2:is(.connected-live, .connected-pending) .notification-unread-count { font: 400 14px/20px Afacad, sans-serif; color: #808080; }
.portal-v2:is(.connected-live, .connected-pending) .notification-drawer .drawer-read-all { margin-top: 4px; min-height: 0; padding: 2px 12px; border: 0; border-radius: 9999px; background: #fff; box-shadow: inset 0 0 0 1px #bdbdbd; color: #404040; font: 500 14px/20px Afacad, sans-serif; cursor: pointer; }
.portal-v2:is(.connected-live, .connected-pending) .notification-drawer .drawer-read-all:hover { background: #000; color: #fff; box-shadow: inset 0 0 0 1px #000; }
.portal-v2:is(.connected-live, .connected-pending) #close-notifications { display: grid; place-items: center; width: 32px; height: 32px; min-width: 32px; padding: 0; border-radius: 9999px; color: #404040; font: 400 22px/1 Afacad, sans-serif; }
.portal-v2:is(.connected-live, .connected-pending) #close-notifications:hover { background: #f1f1f1; }
.portal-v2:is(.connected-live, .connected-pending) .connected-notification-items { margin: 0; padding: 0; list-style: none; }
.portal-v2:is(.connected-live, .connected-pending) .notification-list .connected-notification-item { display: flex; gap: 12px; padding: 12px 22px 14px; background: #fff; transition: background 140ms; }
.portal-v2:is(.connected-live, .connected-pending) .notification-list .connected-notification-item + .connected-notification-item { border-top: 1px solid #efefef; }
.portal-v2:is(.connected-live, .connected-pending) .notification-list .connected-notification-item:hover { background: #fafafa; }
.portal-v2:is(.connected-live, .connected-pending) .connected-notification-dot { flex: 0 0 auto; width: 8px; height: 8px; margin-top: 8px; border-radius: 9999px; background: transparent; }
.portal-v2:is(.connected-live, .connected-pending) .connected-notification-item.is-unread .connected-notification-dot { background: #d32f2f; }
.portal-v2:is(.connected-live, .connected-pending) .connected-notification-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.portal-v2:is(.connected-live, .connected-pending) .notification-list .connected-notification-body strong { display: block; margin: 0; font: 500 16px/24px Afacad, sans-serif; color: #000; }
.portal-v2:is(.connected-live, .connected-pending) .notification-list .connected-notification-body p { margin: 0; font: 400 14px/20px Afacad, sans-serif; color: #595959; text-wrap: pretty; }
.portal-v2:is(.connected-live, .connected-pending) .connected-notification-meta { display: flex; align-items: center; gap: 12px; margin-top: 2px; font: 400 14px/20px Afacad, sans-serif; color: #808080; }
.portal-v2:is(.connected-live, .connected-pending) .notification-list .connected-notification-meta button { margin: 0; padding: 0; border: 0; background: none; color: #000; font: 500 14px/20px Afacad, sans-serif; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.portal-v2:is(.connected-live, .connected-pending) .notification-list .connected-notification-meta button:disabled { color: #808080; cursor: progress; }
.portal-v2:is(.connected-live, .connected-pending) .connected-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.portal-v2:is(.connected-live, .connected-pending) .notification-drawer .notification-actions { flex-direction: row; justify-content: flex-end; gap: 16px; padding: 16px 22px max(16px, env(safe-area-inset-bottom)); border-top: 0; }
.portal-v2:is(.connected-live, .connected-pending) .notification-drawer .notification-actions > .notification-settings-link { width: auto; min-height: 0; padding: 0; border-radius: 0; background: none; color: #000; font: 500 14px/20px Afacad, sans-serif; text-decoration: underline; text-underline-offset: 3px; }
/* Empty, loading and error states inside the drawer. */
.portal-v2:is(.connected-live, .connected-pending) .notification-drawer .notification-empty { min-height: 0; padding: 48px 28px; gap: 6px; }
.portal-v2:is(.connected-live, .connected-pending) .notification-drawer .notification-empty strong { font: 500 16px/24px Afacad, sans-serif; color: #000; }
.portal-v2:is(.connected-live, .connected-pending) .notification-drawer .notification-empty p { max-width: 300px; font: 400 14px/20px Afacad, sans-serif; color: #808080; }
.portal-v2:is(.connected-live, .connected-pending) .notification-drawer .notification-empty .connected-action { margin-top: 10px; }
@media (max-width: 720px) {
  .portal-v2:is(.connected-live, .connected-pending) #close-notifications { width: 44px; height: 44px; min-width: 44px; }
}

/* ===== API keys: create / created states (Integrations reference) ===== */
.portal-v2.connected-live .connected-api-key-panel { display: flex; flex-direction: column; gap: 12px; margin: 0 0 16px; padding: 18px 24px 20px; border-radius: 8px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .1); }
.portal-v2.connected-live .connected-api-key-form-row { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin: 0; padding: 0; box-shadow: none; background: none; }
.portal-v2.connected-live .connected-api-key-field { display: flex; flex-direction: column; gap: 6px; flex: 1 1 280px; max-width: 420px; min-width: 0; }
.portal-v2.connected-live .connected-api-key-field label { font: 400 14px/20px Afacad, sans-serif; color: #595959; }
.portal-v2.connected-live .connected-api-key-input { box-sizing: border-box; width: 100%; height: 40px; padding: 0 14px; border: 1px solid #bfbfbf; border-radius: 4px; background: #fff; color: #000; font: 400 16px Afacad, sans-serif; }
.portal-v2.connected-live .connected-api-key-input:hover { border-color: #808080; }
.portal-v2.connected-live .connected-api-key-input:focus { outline: none; border-color: #000; box-shadow: 0 0 0 1px #000; }
.portal-v2.connected-live .connected-api-key-input[aria-invalid="true"] { border-color: #d32f2f; box-shadow: 0 0 0 1px #d32f2f; }
.portal-v2.connected-live .connected-api-key-input:disabled { background: #f7f7f7; color: #808080; border-color: #ebebeb; }
.portal-v2.connected-live .connected-api-key-panel .connected-action { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; min-height: 40px; padding: 0 18px; border: 0; border-radius: 9999px; background: #000; color: #fff; box-shadow: inset 0 0 0 1px #000; font: 500 14px/20px Afacad, sans-serif; cursor: pointer; }
.portal-v2.connected-live .connected-api-key-panel .connected-action.secondary { background: transparent; color: #000; }
.portal-v2.connected-live .connected-api-key-panel .connected-action.secondary:hover { background: #000; color: #fff; }
.portal-v2.connected-live .connected-api-key-panel .connected-action:disabled { opacity: .35; cursor: not-allowed; }
.portal-v2.connected-live .connected-api-key-panel .connected-action.secondary:disabled:hover { background: transparent; color: #000; }
.portal-v2.connected-live .connected-api-key-spin { flex: 0 0 auto; width: 12px; height: 12px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: connected-api-key-spin .8s linear infinite; }
@keyframes connected-api-key-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .portal-v2.connected-live .connected-api-key-spin { animation-duration: 2.4s; } }
.portal-v2.connected-live .connected-api-key-help { margin: 0; font: 400 14px/20px Afacad, sans-serif; color: #808080; }
.portal-v2.connected-live .connected-api-key-err { margin: 0; font: 400 14px/20px Afacad, sans-serif; color: #d32f2f; }
.portal-v2.connected-live .connected-api-key-err:empty { display: none; }
.portal-v2.connected-live .connected-api-key-hint { padding: 10px 16px; border-radius: 8px; background: #e3f5ec; color: #124d33; font: 400 14px/20px Afacad, sans-serif; }
.portal-v2.connected-live .connected-api-key-hint b { font-weight: 500; }
.portal-v2.connected-live .connected-api-key-secret { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; border-radius: 8px; background: #f7f7f7; }
.portal-v2.connected-live .connected-api-key-secret-label { flex: 0 0 110px; font: 400 14px/20px Afacad, sans-serif; color: #595959; }
.portal-v2.connected-live .connected-api-key-secret code { flex: 1 1 200px; min-width: 0; padding: 0; background: none; color: #000; font: 400 14px/20px ui-monospace, SFMono-Regular, Menlo, monospace; word-break: break-all; }
.portal-v2.connected-live .connected-api-key-table td.connected-api-key-empty { width: auto; padding: 28px 8px; text-align: center; white-space: normal; }
.portal-v2.connected-live .connected-api-key-empty b { display: block; font: 500 16px/24px Afacad, sans-serif; color: #000; }
.portal-v2.connected-live .connected-api-key-empty span { display: block; margin-top: 4px; font: 400 14px/20px Afacad, sans-serif; color: #808080; }

/* ===== Webhooks: empty / add / added states (Integrations reference) =====
   The section's 16px flex gap spaces its parts. The form and one-time secret
   reuse the API key panel, field, hint and secret styles. */
.portal-v2.connected-live #connected-webhooks .connected-webhook-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 0 4px; }
.portal-v2.connected-live #connected-webhooks .connected-webhook-head h2 { margin: 0; }
.portal-v2.connected-live #connected-webhooks .connected-webhook-empty-note { margin: 0 4px; font: 400 16px/22px Afacad, sans-serif; color: #404040; }
.portal-v2.connected-live .connected-webhook-empty-action { padding: 0 4px; }
.portal-v2.connected-live .connected-webhook-list { padding: 0 24px; border-radius: 8px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .1); }
.portal-v2.connected-live .connected-webhook-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 16px 0; }
.portal-v2.connected-live .connected-webhook-row + .connected-webhook-row { border-top: 1px solid #d8d8d8; }
.portal-v2.connected-live .connected-webhook-stack { display: flex; flex-direction: column; min-width: 0; }
.portal-v2.connected-live .connected-webhook-url { font: 400 16px/24px Afacad, sans-serif; color: #000; overflow-wrap: anywhere; }
.portal-v2.connected-live .connected-webhook-meta { font: 400 14px/20px Afacad, sans-serif; color: #808080; }
.portal-v2.connected-live .connected-webhook-reason { margin-top: 4px; font: 400 14px/20px Afacad, sans-serif; color: #b3261e; }
.portal-v2.connected-live .connected-webhook-end { display: flex; align-items: center; gap: 12px; flex: none; }
.portal-v2.connected-live .connected-webhook-pill { display: inline-flex; align-items: center; padding: 0 10px; border-radius: 9999px; background: #f1f1f1; color: #404040; font: 500 14px/20px Afacad, sans-serif; white-space: nowrap; }
.portal-v2.connected-live .connected-webhook-pill.is-green { background: rgb(223, 251, 223); color: rgb(18, 128, 18); }
.portal-v2.connected-live .connected-webhook-pill.is-red { background: #fdecec; color: #b3261e; }
.portal-v2.connected-live .connected-webhook-pill.is-amber { background: #fdf3dd; color: #8a5a00; }
.portal-v2.connected-live .connected-webhook-link { padding: 0; border: 0; background: none; color: #000; font: 500 14px/20px Afacad, sans-serif; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; cursor: pointer; }
.portal-v2.connected-live .connected-webhook-link:disabled { color: #bdbdbd; cursor: not-allowed; }
.portal-v2.connected-live #connected-webhooks .connected-webhook-panel { margin: 0; }
.portal-v2.connected-live .connected-webhook-form-body { display: flex; flex-direction: column; gap: 14px; margin: 0; }
.portal-v2.connected-live .connected-webhook-panel .connected-api-key-field { flex: none; max-width: 560px; }
.portal-v2.connected-live .connected-webhook-events { min-width: 0; margin: 0; padding: 0; border: 0; }
.portal-v2.connected-live .connected-webhook-events legend { margin: 0 0 8px; padding: 0; font: 400 14px/20px Afacad, sans-serif; color: #808080; }
.portal-v2.connected-live .connected-webhook-events .connected-api-key-err { margin-top: 8px; }
.portal-v2.connected-live .connected-webhook-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px 20px; max-width: 720px; }
.portal-v2.connected-live .connected-webhook-check { display: inline-flex; align-items: center; gap: 8px; margin: 0; font: 400 15px/21px Afacad, sans-serif; color: #000; cursor: pointer; }
.portal-v2.connected-live .connected-webhook-check input { width: 16px; height: 16px; margin: 0; accent-color: #000; }
.portal-v2.connected-live .connected-webhook-actions { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 720px) {
  .portal-v2.connected-live .connected-webhook-list { padding: 0 16px; }
  .portal-v2.connected-live .connected-webhook-row { flex-wrap: wrap; }
  .portal-v2.connected-live .connected-webhook-end { flex: 1 1 100%; flex-wrap: wrap; row-gap: 0; }
}
@media (max-width: 880px) {
  .portal-v2.connected-live .connected-webhook-link { min-height: 44px; }
  .portal-v2.connected-live [data-webhook-add] { min-height: 44px; }
}

/* Revoke key: destructive confirm dialog (reference .dialog) */
.portal-v2.connected-live .connected-team-dialog.connected-confirm-danger { width: min(440px, calc(100vw - 32px)); padding: 24px; border: 0; border-radius: 12px; box-shadow: 0 12px 40px rgba(0, 0, 0, .2); }
.portal-v2.connected-live .connected-team-dialog.connected-confirm-danger::backdrop { background: rgba(0, 0, 0, .45); }
.portal-v2.connected-live .connected-confirm-danger h2 { margin: 0 0 8px; font: 500 20px/27px Afacad, sans-serif; color: #000; }
.portal-v2.connected-live .connected-confirm-danger p { margin: 0; font: 400 15px/21px Afacad, sans-serif; color: #404040; }
.portal-v2.connected-live .connected-confirm-danger .connected-module-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.portal-v2.connected-live .connected-confirm-danger .connected-action { height: 28px; min-height: 28px; padding: 4px 14px; border: 1px solid #000; border-radius: 9999px; background: #fff; color: #000; box-shadow: none; font: 500 14px/18px Afacad, sans-serif; }
.portal-v2.connected-live .connected-confirm-danger .connected-action.connected-action-danger { border-color: #d32f2f; background: #d32f2f; color: #fff; }
.portal-v2.connected-live .connected-confirm-danger .connected-action.connected-action-danger:hover { border-color: #b72525; background: #b72525; }
/* Touch: the desktop sizes above follow the reference, but on phones every
   API key control keeps the portal's 44px minimum (see the max-width 880px touch rule). */
@media (max-width: 880px) {
  .portal-v2.connected-live :is(.connected-api-key-panel, .connected-confirm-danger, .connected-api-key-table) .connected-action,
  .portal-v2.connected-live [data-api-key-reveal] { height: auto; min-height: 44px; }
  .portal-v2.connected-live .connected-api-key-input { height: 44px; }
}

/* ===== Garments pager (Full Portal Design, Garments) ===== */
.portal-v2.connected-live .connected-pager-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 16px; padding: 0 4px; }
.portal-v2.connected-live .connected-pager-meta { font: 400 14px/20px Afacad, sans-serif; color: #808080; }
.portal-v2.connected-live .connected-pager { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.portal-v2.connected-live .connected-pager-button { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; min-height: 32px; padding: 0 8px; border: 0; border-radius: 9999px; background: transparent; box-shadow: none; color: #404040; font: 400 14px/20px Afacad, sans-serif; cursor: pointer; }
.portal-v2.connected-live .connected-pager-button:hover { background: #f1f1f1; }
.portal-v2.connected-live .connected-pager-button.is-current { background: #000; color: #fff; font-weight: 500; }
.portal-v2.connected-live .connected-pager-button:disabled { background: transparent; color: #bdbdbd; cursor: not-allowed; }
.portal-v2.connected-live .connected-pager-button:focus-visible { outline: 2px solid #000; outline-offset: 2px; }
.portal-v2.connected-live .connected-pager-gap { min-width: 24px; text-align: center; font: 400 14px/20px Afacad, sans-serif; color: #808080; }
@media (max-width: 880px) {
  .portal-v2.connected-live .connected-pager-button { min-width: 44px; height: 44px; min-height: 44px; }
}

/* Garments: section intro, table empty states, load error and selection bar */
.portal-v2.connected-live .connected-catalog-heading { display:flex; flex-direction:column; gap:4px; margin-right:auto; min-width:0; }
.portal-v2.connected-live .connected-catalog-heading h2 { margin:0; }
.portal-v2.connected-live .connected-catalog-heading p { margin:0; font:400 14px/20px Afacad, sans-serif; color:#595959; }
.portal-v2.connected-live .garment-table-empty { display:flex; flex-direction:column; align-items:center; gap:4px; padding:28px 8px; text-align:center; }
.portal-v2.connected-live .garment-table-empty b { font:500 16px/24px Afacad, sans-serif; color:#000; }
.portal-v2.connected-live .garment-table-empty span { font:400 14px/20px Afacad, sans-serif; color:#595959; }
.portal-v2.connected-live .garment-table-empty :is(.v2-link, .connected-action) { margin-top:10px; }
.portal-v2.connected-live .connected-page-error { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; min-height:52vh; padding:48px 16px; margin-top:16px; box-sizing:border-box; background:#f7f7f7; border-radius:12px; }
.portal-v2.connected-live .connected-page-error-icon { color:#b42318; margin-bottom:16px; }
.portal-v2.connected-live .connected-page-error h2 { margin:0; font:500 28px/36px Afacad, sans-serif; max-width:32ch; text-wrap:balance; }
.portal-v2.connected-live .connected-page-error p { margin:8px 0 0; font:400 18px/26px Afacad, sans-serif; color:#404040; max-width:46ch; }
.portal-v2.connected-live .connected-page-error-actions { display:flex; gap:8px; margin-top:24px; flex-wrap:wrap; justify-content:center; }
.portal-v2.connected-live .connected-page-error-actions a.connected-action { text-decoration:none; }
.portal-v2.connected-live .garment-bulk-actions { display:flex; align-items:center; gap:16px; flex-wrap:nowrap; left:calc(264px + (100% - 264px) / 2); right:auto; bottom:calc(24px + env(safe-area-inset-bottom)); transform:translateX(-50%); z-index:30; width:max-content; max-width:calc(100% - 264px - 32px); margin:0; padding:8px 10px 8px 22px; border-radius:9999px; background:#fff; color:#000; box-shadow:0 10px 30px rgba(0,0,0,.14), 0 0 0 1px rgba(0,0,0,.06); }
.portal-v2.connected-live .garment-bulk-actions > span { margin:0; }
.portal-v2.connected-live .garment-bulk-count { font:400 16px/24px Afacad, sans-serif; color:#595959; white-space:nowrap; }
.portal-v2.connected-live .garment-bulk-buttons { display:flex; align-items:center; gap:10px; flex-wrap:nowrap; }
.portal-v2.connected-live .garment-bulk-button { height:36px; padding:0 16px; border:0; border-radius:9999px; background:#fff; color:#000; box-shadow:inset 0 0 0 1px #000; font:500 15px Afacad, sans-serif; white-space:nowrap; cursor:pointer; }
.portal-v2.connected-live .garment-bulk-button:hover { background:#f4f4f4; }
.portal-v2.connected-live .garment-bulk-button.primary { background:#000; color:#fff; box-shadow:none; }
.portal-v2.connected-live .garment-bulk-button.primary:hover { background:#262626; }
.portal-v2.connected-live .garment-bulk-button:disabled { opacity:.45; cursor:not-allowed; }
.portal-v2.connected-live .garment-bulk-buttons .v2-link { padding:0 6px; white-space:nowrap; }
.portal-v2.connected-live :is(.garment-bulk-button, .garment-bulk-buttons .v2-link):focus-visible { outline:2px solid #000; outline-offset:2px; }
@media (max-width: 960px) {
  .portal-v2.connected-live .garment-bulk-actions { left:50%; max-width:calc(100% - 32px); }
}
@media (max-width: 720px) {
  .portal-v2.connected-live .garment-bulk-actions { bottom:calc(16px + env(safe-area-inset-bottom)); width:calc(100% - 32px); border-radius:20px; flex-wrap:wrap; justify-content:center; padding:12px 14px; gap:10px; }
  .portal-v2.connected-live .garment-bulk-buttons { flex-wrap:wrap; justify-content:center; }
  .portal-v2.connected-live .garment-bulk-button { height:44px; }
}

/* Garments: preview panel (one garment, or several with Bulk Preview) and Report an issue */
.portal-v2 .connected-garment-panel { position:fixed; inset:0 0 0 auto; margin:0; width:min(480px, 100%); max-width:100%; height:100dvh; max-height:100dvh; box-sizing:border-box; padding:0; border:0; background:#fff; color:#000; display:none; flex-direction:column; box-shadow:-8px 0 30px rgba(0,0,0,.12); font-family:Afacad, sans-serif; overflow:hidden; }
.portal-v2 .connected-garment-panel[open] { display:flex; }
.portal-v2 .connected-garment-panel::backdrop { background:rgba(0,0,0,.35); }
.portal-v2 .connected-garment-panel button { font-family:inherit; }
.portal-v2 .connected-garment-panel .gp-h { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:24px 24px 16px; border-bottom:1px solid #ebebeb; }
.portal-v2 .connected-garment-panel .gp-ht { display:flex; flex-direction:column; gap:2px; min-width:0; }
.portal-v2 .connected-garment-panel .gp-ht h2 { margin:0; font:500 22px/30px Afacad, sans-serif; overflow-wrap:anywhere; }
.portal-v2 .connected-garment-panel :is(.gp-id, .gp-count) { font:400 14px/20px Afacad, sans-serif; color:#595959; }
.portal-v2 .connected-garment-panel .gp-hr { display:flex; gap:8px; align-items:center; flex:none; }
.portal-v2 .connected-garment-panel .gp-round { width:36px; height:36px; padding:0; border:0; border-radius:50%; background:#fff; color:#000; box-shadow:inset 0 0 0 1px #bdbdbd; display:grid; place-items:center; cursor:pointer; }
.portal-v2 .connected-garment-panel .gp-round:hover:not(:disabled) { box-shadow:inset 0 0 0 1px #000; }
.portal-v2 .connected-garment-panel .gp-round:disabled { opacity:.35; cursor:default; }
.portal-v2 .connected-garment-panel .gp-fwd svg { transform:scaleX(-1); }
.portal-v2 .connected-garment-panel .gp-b { flex:1; overflow:auto; padding:20px 24px; display:flex; flex-direction:column; gap:20px; }
.portal-v2 .connected-garment-panel .gp-b > * { flex:none; }
.portal-v2 .connected-garment-panel .gp-media { position:relative; align-self:center; width:auto; max-width:100%; height:clamp(220px, calc(100dvh - 492px), 600px); aspect-ratio:3/4; border-radius:8px; overflow:hidden; background:#f4f3f0; display:flex; align-items:center; justify-content:center; }
.portal-v2 .connected-garment-panel .gp-img { display:block; width:100%; height:100%; object-fit:contain; }
.portal-v2 .connected-garment-panel .gp-img-empty, .portal-v2 .connected-garment-panel .gp-img-note { margin:0; padding:16px; font:400 14px/20px Afacad, sans-serif; color:#595959; text-align:center; }
.portal-v2 .connected-garment-panel .gp-img-note { position:absolute; inset:auto 12px 48px; background:rgba(255,255,255,.92); border-radius:8px; }
.portal-v2 .connected-garment-panel .gp-img-note[hidden] { display:none; }
.portal-v2 .connected-garment-panel .gp-arrow { position:absolute; top:50%; transform:translateY(-50%); width:36px; height:36px; padding:0; border:0; border-radius:50%; background:#fff; color:#000; box-shadow:0 1px 3px rgba(0,0,0,.15); display:grid; place-items:center; cursor:pointer; }
.portal-v2 .connected-garment-panel .gp-arrow-l { left:12px; }
.portal-v2 .connected-garment-panel .gp-arrow-r { right:12px; }
.portal-v2 .connected-garment-panel .gp-pill { position:absolute; left:50%; bottom:12px; transform:translateX(-50%); padding:4px 12px; border-radius:9999px; background:rgba(255,255,255,.92); font:400 13px/18px Afacad, sans-serif; white-space:nowrap; }
.portal-v2 .connected-garment-panel .gp-sec { display:flex; flex-direction:column; gap:10px; }
.portal-v2 .connected-garment-panel .gp-l { display:flex; gap:8px; align-items:baseline; font:400 14px/20px Afacad, sans-serif; color:#595959; }
.portal-v2 .connected-garment-panel .gp-cname { font-weight:500; color:#000; }
.portal-v2 .connected-garment-panel .gp-sw { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.portal-v2 .connected-garment-panel .gp-swatch { width:36px; height:36px; padding:3px; border:0; border-radius:50%; background:#fff; box-shadow:inset 0 0 0 1px #d8d8d8; display:inline-grid; place-items:center; cursor:pointer; color:#000; }
.portal-v2 .connected-garment-panel .gp-swatch > span { width:28px; height:28px; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(0,0,0,.1); display:grid; place-items:center; font-size:13px; }
.portal-v2 .connected-garment-panel .gp-swatch > span.gp-unknown-color { background:#f1f1f1; color:#595959; }
.portal-v2 .connected-garment-panel .gp-swatch.is-on { box-shadow:inset 0 0 0 2px #000; }
.portal-v2 .connected-garment-panel .gp-swatch-label { width:auto; border-radius:9999px; padding:0 14px 0 4px; gap:8px; display:inline-flex; align-items:center; font:400 15px Afacad, sans-serif; }
.portal-v2 .connected-garment-panel .gp-swatch-label > span { width:26px; height:26px; }
.portal-v2 .connected-garment-panel .gp-rows { display:flex; flex-direction:column; border:1px solid #d8d8d8; border-radius:8px; overflow:hidden; }
.portal-v2 .connected-garment-panel .gp-line { display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:12px 16px; border-top:1px solid #d8d8d8; font:400 16px/24px Afacad, sans-serif; }
.portal-v2 .connected-garment-panel .gp-line:first-child { border-top:0; }
.portal-v2 .connected-garment-panel .gp-line .t { color:#595959; }
.portal-v2 .connected-garment-panel .gp-line .v { font-weight:500; text-align:right; overflow-wrap:anywhere; display:inline-flex; align-items:center; gap:8px; justify-content:flex-end; }
.portal-v2 .connected-garment-panel .gp-sub { margin:0; font:400 14px/20px Afacad, sans-serif; color:#595959; }
.portal-v2 .connected-garment-panel .gp-sub a { color:#000; }
.portal-v2 .connected-garment-panel .gp-alert { margin:0; padding:12px 16px; border-radius:4px; font:400 15px/22px Afacad, sans-serif; }
.portal-v2 .connected-garment-panel .gp-alert b { display:block; font-weight:500; }
.portal-v2 .connected-garment-panel .gp-alert.ok { background:#e3f5ec; color:#124d33; }
.portal-v2 .connected-garment-panel .gp-alert.bad { background:#fdecec; color:#7a1b1b; }
.portal-v2 .connected-garment-panel .gp-alert:focus { outline:2px solid currentColor; outline-offset:2px; }
.portal-v2 .connected-garment-panel .gp-f { display:flex; align-items:center; justify-content:flex-start; gap:12px; padding:16px 24px; border-top:1px solid #ebebeb; background:#fff; }
.portal-v2 .connected-garment-panel .gp-tryf { display:flex; align-items:center; gap:12px; min-width:0; flex:1; }
.portal-v2 .connected-garment-panel .gp-stack { display:flex; flex-direction:column; min-width:0; }
.portal-v2 .connected-garment-panel .gp-stack .t { font:500 16px/22px Afacad, sans-serif; }
.portal-v2 .connected-garment-panel .gp-stack .s { font:400 13px/18px Afacad, sans-serif; color:#595959; }
.portal-v2 .connected-garment-panel .gp-f-try .connected-action { flex:none; }
.portal-v2 .connected-garment-panel .gp-back { align-self:flex-start; display:inline-flex; align-items:center; gap:4px; margin-bottom:-8px; padding:0; border:0; background:none; color:#000; font:400 14px/20px Afacad, sans-serif; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.portal-v2 .connected-garment-panel .gp-back:disabled { color:#bdbdbd; cursor:not-allowed; }
.portal-v2 .connected-garment-panel .gp-sum { display:flex; gap:16px; align-items:stretch; }
.portal-v2 .connected-garment-panel .gp-sum .gp-rows { flex:1; min-width:0; }
.portal-v2 .connected-garment-panel .gp-mini { flex:none; align-self:center; height:146px; aspect-ratio:3/4; border-radius:6px; overflow:hidden; background:#f4f3f0; display:grid; place-items:center; color:#808080; font:500 14px Afacad, sans-serif; }
.portal-v2 .connected-garment-panel .gp-mini img { width:100%; height:100%; object-fit:contain; }
.portal-v2 .connected-garment-panel .gp-q { display:flex; flex-direction:column; gap:10px; min-width:0; margin:0; padding:0; border:0; }
.portal-v2 .connected-garment-panel .gp-q legend { margin-bottom:10px; padding:0; font:500 16px/24px Afacad, sans-serif; }
.portal-v2 .connected-garment-panel .gp-err { margin:0; font:400 14px/20px Afacad, sans-serif; color:#b42318; }
.portal-v2 .connected-garment-panel .gp-rate-wrap { display:inline-flex; flex-direction:column; gap:6px; align-self:flex-start; }
.portal-v2 .connected-garment-panel .gp-rate { display:flex; gap:12px; }
.portal-v2 .connected-garment-panel .gp-rate button { width:44px; height:44px; padding:0; border:0; border-radius:50%; background:#fff; color:#000; box-shadow:inset 0 0 0 1px #bdbdbd; font:400 16px Afacad, sans-serif; cursor:pointer; }
.portal-v2 .connected-garment-panel .gp-rate button[aria-pressed="true"] { background:#000; color:#fff; box-shadow:none; }
.portal-v2 .connected-garment-panel .gp-rate-ends { display:flex; justify-content:space-between; font:400 13px/18px Afacad, sans-serif; color:#595959; }
.portal-v2 .connected-garment-panel .gp-chips { display:flex; flex-wrap:wrap; gap:8px; }
.portal-v2 .connected-garment-panel .gp-chip { height:34px; padding:0 14px; border:0; border-radius:9999px; background:#fff; color:#000; box-shadow:inset 0 0 0 1px #bdbdbd; font:400 14px Afacad, sans-serif; cursor:pointer; }
.portal-v2 .connected-garment-panel .gp-chip.is-on { background:#000; color:#fff; box-shadow:none; }
.portal-v2 .connected-garment-panel .gp-field { display:flex; flex-direction:column; gap:8px; }
.portal-v2 .connected-garment-panel .gp-field label { font:500 16px/24px Afacad, sans-serif; }
.portal-v2 .connected-garment-panel .gp-opt { font-weight:400; color:#595959; }
.portal-v2 .connected-garment-panel textarea { width:100%; min-height:96px; box-sizing:border-box; padding:10px 12px; border:0; border-radius:4px; box-shadow:inset 0 0 0 1px #bdbdbd; font:16px/24px Afacad, sans-serif; resize:vertical; }
.portal-v2 .connected-garment-panel textarea:focus { outline:none; box-shadow:inset 0 0 0 1px #000, 0 0 0 1px #000; }
.portal-v2 .connected-garment-panel :is(.gp-swatch, .gp-rate button, .gp-chip, .gp-arrow, .gp-back):disabled { cursor:not-allowed; opacity:.6; }
.portal-v2 .connected-garment-panel :is(button, textarea):focus-visible { outline:2px solid #000; outline-offset:2px; }
.portal-v2 .connected-garment-panel .gp-spin { width:12px; height:12px; margin-right:6px; border-radius:50%; border:2px solid currentColor; border-right-color:transparent; display:inline-block; vertical-align:-1px; animation:gp-spin .8s linear infinite; }
@keyframes gp-spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .portal-v2 .connected-garment-panel .gp-spin { animation-duration:2.4s; } }
@media (max-width: 720px) {
  .portal-v2 .connected-garment-panel :is(.gp-h, .gp-b) { padding-left:16px; padding-right:16px; }
  .portal-v2 .connected-garment-panel .gp-f { padding:12px 16px; flex-wrap:wrap; }
  .portal-v2 .connected-garment-panel :is(.gp-round, .gp-arrow, .gp-swatch) { width:44px; height:44px; }
  .portal-v2 .connected-garment-panel :is(.gp-swatch-label, .gp-chip) { height:44px; }
}
@media (max-width: 520px) {
  .portal-v2 .connected-garment-panel .gp-media { height:auto; width:100%; }
}
.portal-v2 .connected-garment-panel .garment-processing { display:inline-flex; align-items:center; height:22px; min-height:0; padding:0 10px; border-radius:9999px; font:500 14px/20px Afacad, sans-serif; white-space:nowrap; }
.portal-v2 .connected-garment-panel .gp-img[hidden] { display:none; }
.portal-v2 .connected-garment-panel .connected-action[aria-disabled="true"] { opacity:.75; cursor:progress; }
.portal-v2 .connected-garment-panel .connected-switch[aria-disabled="true"] { opacity:.6; cursor:progress; }

/* Looks (Garments > Looks): cards, list, composer. Full Portal Design, Sep 24. */
.portal-v2.connected-live .looks-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr)); gap:16px; }
.portal-v2.connected-live .look-card { display:flex; flex-direction:column; gap:14px; min-width:0; padding:20px 22px 18px; border-radius:8px; background:#fff; box-shadow:0 1px 2px #0000001a; }
.portal-v2.connected-live .look-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.portal-v2.connected-live .look-card-head > div { min-width:0; }
.portal-v2.connected-live .look-card-head h3 { margin:0; font:500 17px/24px Afacad,sans-serif; overflow-wrap:anywhere; }
.portal-v2.connected-live :is(.look-card-head, .looks-name) small { display:block; color:#595959; font:400 14px/20px Afacad,sans-serif; }
.portal-v2.connected-live .look-pieces { display:flex; flex-direction:column; gap:8px; }
.portal-v2.connected-live .look-piece { display:flex; align-items:center; gap:10px; min-width:0; color:#404040; font:400 14px/20px Afacad,sans-serif; overflow-wrap:anywhere; }
.portal-v2.connected-live .look-piece .garment-preview { display:grid; place-items:center; flex:none; width:36px; height:42px; overflow:hidden; border-radius:4px; background:#f1f1f1; color:#808080; font:500 12px/1 Afacad,sans-serif; letter-spacing:.02em; }
.portal-v2.connected-live :is(.look-piece, .outfit-pick-card, .looks-pieces) .garment-preview img { width:100%; height:100%; object-fit:cover; }
.portal-v2.connected-live .look-card-note { margin:0; color:#595959; font:400 14px/20px Afacad,sans-serif; }
.portal-v2.connected-live .look-card-foot { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:auto; padding-top:14px; border-top:1px solid #d8d8d8; }
.portal-v2.connected-live .look-tryon { display:flex; align-items:center; gap:10px; color:#404040; font:400 14px/20px Afacad,sans-serif; }
.portal-v2.connected-live .outfit-delete.v2-link:disabled { color:#808080; cursor:not-allowed; }
.portal-v2.connected-live .looks-section .garment-processing { display:inline-flex; align-items:center; height:22px; padding:0 10px; border-radius:9999px; font:500 12.5px/1 Afacad,sans-serif; white-space:nowrap; }
.portal-v2.connected-live .looks-table { overflow-x:auto; padding:0 20px; border-radius:8px; background:#fff; box-shadow:0 1px 2px #0000001a; }
.portal-v2.connected-live .looks-row { display:grid; grid-template-columns:minmax(200px,1.4fr) minmax(240px,1.8fr) minmax(160px,1.2fr) 110px 110px; align-items:center; gap:16px; min-width:860px; padding:14px 0; border-bottom:1px solid #d8d8d8; font:400 15px/22px Afacad,sans-serif; }
.portal-v2.connected-live .looks-row:last-child { border-bottom:0; }
.portal-v2.connected-live .looks-table-head { color:#595959; font-size:14px; line-height:20px; }
.portal-v2.connected-live .looks-name strong { display:block; font:500 16px/22px Afacad,sans-serif; overflow-wrap:anywhere; }
.portal-v2.connected-live .looks-pieces { color:#404040; font-size:14px; line-height:20px; }
.portal-v2.connected-live .looks-pieces .garment-preview { display:grid; place-items:center; width:36px; height:42px; overflow:hidden; border-radius:4px; background:#f1f1f1; color:#808080; font:500 12px/1 Afacad,sans-serif; }
.portal-v2.connected-live .looks-row .numeric { text-align:right; }
.portal-v2.connected-live .looks-status small { display:block; margin-top:6px; color:#595959; font:400 13px/18px Afacad,sans-serif; }
.portal-v2.connected-live .look-viewer-note { margin:0; color:#595959; font:400 14px/20px Afacad,sans-serif; }
.portal-v2.connected-live .look-empty { padding:28px 16px; border-radius:8px; background:#fff; box-shadow:0 1px 2px #0000001a; }

.portal-v2.connected-live .outfit-composer { display:flex; flex-direction:column; gap:16px; }
.portal-v2.connected-live .outfit-composer[hidden] { display:none!important; }
.portal-v2.connected-live .outfit-composer-head { margin:0; align-items:flex-start; }
.portal-v2.connected-live .outfit-composer-head > div:last-child { gap:12px; }
.portal-v2.connected-live .outfit-composer-head [data-outfit-step-count] { color:#595959; }
.portal-v2.connected-live .outfit-composer-body,
.portal-v2.connected-live .outfit-composer[data-step="name"] .outfit-composer-body { display:flex; flex-direction:column; align-items:stretch; gap:16px; padding:22px 24px 24px; }
.portal-v2.connected-live .outfit-composer [data-outfit-picker],
.portal-v2.connected-live .outfit-composer[data-step="name"] [data-outfit-picker] { order:0; display:flex; flex-direction:column; gap:14px; padding:0; border-radius:0; background:none; }
.portal-v2.connected-live .outfit-picker-search { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.portal-v2.connected-live .outfit-picker-search h3 { margin:0; font:500 16px/24px Afacad,sans-serif; }
.portal-v2.connected-live .outfit-picker-search .v2-catalog-search { display:flex; align-items:center; gap:8px; width:260px; max-width:100%; min-height:36px; box-sizing:border-box; margin-left:0; padding:0 14px; border:1px solid #bdbdbd; border-radius:9999px; background:#fff; }
.portal-v2.connected-live .outfit-picker-search .v2-catalog-search:focus-within { border-color:#000; box-shadow:0 0 0 1px #000; }
.portal-v2.connected-live .connected-v2-page .outfit-picker-search .v2-catalog-search input[type="search"] { flex:1; width:auto; min-width:0; height:auto; min-height:34px; padding:0; border:0; border-radius:0; outline:none; box-shadow:none; background:none; font:400 14px/20px Afacad,sans-serif; }
.portal-v2.connected-live .outfit-pick-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr)); gap:12px; }
.portal-v2.connected-live .outfit-pick-card { align-items:flex-start; gap:12px; padding:14px; border:1px solid #d8d8d8; border-radius:8px; background:#fff; }
.portal-v2.connected-live button.outfit-pick-card:hover { border-color:#808080; background:#fff; }
.portal-v2.connected-live button.outfit-pick-card[aria-pressed="true"] { border-color:#000; box-shadow:inset 0 0 0 1px #000; }
.portal-v2.connected-live button.outfit-pick-card:disabled { cursor:progress; }
.portal-v2.connected-live .outfit-pick-card .garment-preview { display:grid; place-items:center; flex:none; width:44px; height:52px; overflow:hidden; border-radius:4px; background:#f1f1f1; color:#808080; font:500 13px/1 Afacad,sans-serif; letter-spacing:.02em; }
.portal-v2.connected-live .outfit-pick-card strong { color:#000; font:500 15px/21px Afacad,sans-serif; }
.portal-v2.connected-live .outfit-pick-card small { margin-top:2px; color:#595959; font:400 13px/18px Afacad,sans-serif; }
.portal-v2.connected-live .look-review { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); gap:12px; }
.portal-v2.connected-live .look-review .outfit-pick-card small:first-child { margin:0 0 2px; }
.portal-v2.connected-live .outfit-composer form[data-outfit-create-form] { display:flex; flex-direction:column; gap:16px; }
.portal-v2.connected-live .outfit-composer form[data-outfit-create-form][hidden] { display:none!important; }
.portal-v2.connected-live .look-field { display:flex; flex-direction:column; gap:6px; max-width:420px; }
.portal-v2.connected-live .look-field label { color:#595959; font:400 14px/20px Afacad,sans-serif; }
.portal-v2.connected-live .connected-v2-page .look-field input[name="name"] { width:100%; height:44px; box-sizing:border-box; padding:0 14px; border:1px solid #bdbdbd; border-radius:4px; background:#fff; color:#000; font:400 16px/24px Afacad,sans-serif; }
.portal-v2.connected-live .connected-v2-page .look-field input[name="name"]:hover { border-color:#808080; }
.portal-v2.connected-live .connected-v2-page .look-field input[name="name"]:focus { outline:none; border-color:#000; box-shadow:0 0 0 1px #000; }
.portal-v2.connected-live .connected-v2-page .look-field input[name="name"][aria-invalid="true"] { border-color:#d32f2f; box-shadow:0 0 0 1px #d32f2f; }
.portal-v2.connected-live .look-field-error { margin:0; color:#d32f2f; font:400 14px/20px Afacad,sans-serif; }
.portal-v2.connected-live .look-field-error:empty { display:none; }
.portal-v2.connected-live .look-check { display:inline-flex; align-items:center; gap:8px; align-self:flex-start; font:400 15px/22px Afacad,sans-serif; cursor:pointer; }
.portal-v2.connected-live .look-check input { width:16px; height:16px; margin:0; accent-color:#000; }
.portal-v2.connected-live .look-help { margin:-8px 0 0; color:#595959; font:400 14px/20px Afacad,sans-serif; }
.portal-v2.connected-live .look-step-actions { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:12px; padding-top:14px; border-top:1px solid #d8d8d8; }
.portal-v2.connected-live .look-step-actions [data-outfit-create-status] { flex:1 1 200px; flex-basis:auto; color:#595959; font:400 14px/20px Afacad,sans-serif; }
.portal-v2.connected-live .look-step-actions [data-outfit-create-status][role="alert"] { color:#d32f2f; }
.portal-v2.connected-live .look-step-actions [data-outfit-create-status]:empty { display:none; }
.portal-v2.connected-live .outfit-composer .connected-pager-row { margin-top:0; padding:0; }
@media (max-width: 720px) {
  .portal-v2.connected-live .look-card { padding:18px; }
  .portal-v2.connected-live .outfit-composer-body,
  .portal-v2.connected-live .outfit-composer[data-step="name"] .outfit-composer-body { padding:16px; }
  .portal-v2.connected-live .outfit-picker-search .v2-catalog-search { width:100%; min-height:44px; }
  .portal-v2.connected-live .connected-v2-page .outfit-picker-search .v2-catalog-search input[type="search"] { font-size:16px; }
  .portal-v2.connected-live .look-step-actions .connected-action { min-height:44px; }
}