/* studio specific components layered on top of studio.css (the ported theme). Prefix: st- */

.acct-sidebar .acct-nav-item i { width: 24px; margin-right: 12px; text-align: center; font-size: 16px; }
.st-brand-badge { margin-left: 8px; padding: 2px 8px; }
.st-nav-label { padding: 20px 12px 6px; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); }
.st-full { width: 100%; }
.acct-user-info { display: flex; align-items: center; gap: 12px; }
.acct-user-text { flex: 1; min-width: 0; color: inherit; text-decoration: none; border-radius: 8px; }
.acct-user-text:hover .acct-user-name { color: var(--orange); }
.acct-logout { color: var(--muted); font-size: 18px; }
.acct-avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: #fff; font-weight: 600; flex: none; }
.acct-avatar-sm { width: 36px; height: 36px; font-size: 14px; }
.acct-avatar-md { width: 48px; height: 48px; font-size: 18px; }
.acct-avatar-lg { width: 64px; height: 64px; font-size: 24px; }

/* notices */
/*
 * The tab panels, notices and dialogs are shown and hidden with the `hidden` attribute, but the
 * elements carrying it are cards and chat panes that set `display: flex` themselves, which wins.
 * Without this every panel rendered at once and the tabs looked like they did nothing.
 */
[hidden] { display: none !important; }

.st-notice { border-radius: 12px; padding: 14px 16px; font-size: 14px; border: 1px solid; margin-bottom: 16px; }
.st-notice-error { color: #f87171; border-color: rgba(248,113,113,.4); background: rgba(248,113,113,.08); }
.st-notice-ok { color: #4ade80; border-color: rgba(74,222,128,.4); background: rgba(74,222,128,.08); }
.st-notice-warn { color: var(--amber); border-color: rgba(252,191,72,.4); background: var(--amber-08); }

/* generic data table (admin pages) */
.st-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.st-table th { text-align: left; font-weight: 600; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 12px 16px; border-bottom: 1px solid var(--white-08); }
.st-table td { padding: 14px 16px; border-bottom: 1px solid var(--white-08); vertical-align: middle; }
.st-table code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; color: var(--silver); }
.st-actions { display: flex; gap: 8px; flex-wrap: wrap; }
/* fields side by side. Bottom-aligned they stagger the moment one of them carries a hint, which
   drags its neighbour's label half a field down the page */
.st-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start; }
.st-row .field { flex: 1 1 200px; }
.st-row .field small { min-height: 1em; }
.st-muted { color: var(--muted); font-size: 13px; }
.acct-badge-purple { background: rgba(124,58,237,.15); color: #b794f6; }
.acct-badge-neutral { background: var(--white-08); color: var(--body-text); }
.acct-badge-sm.acct-badge-neutral { font-size: 12px; }
.st-plan-designer { color: var(--orange-text); }
.st-plan-studio { color: #b794f6; }

/* ---------- layout helpers ---------- */
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.st-spacer { flex: 1; }
.st-link { color: var(--orange-text); font-weight: 600; font-size: 14px; text-decoration: none; }
.st-link:hover { text-decoration: underline; }
.st-inline { display: inline-flex; align-items: center; gap: 8px; }
.st-empty { color: var(--muted); font-size: 14px; padding: 12px 0; margin: 0; }
.st-pre { white-space: pre-wrap; }
.eyebrow { font-weight: 600; font-size: var(--font-size-s); letter-spacing: .18em; color: var(--accent-color); text-transform: uppercase; }
.acct-content { display: flex; flex-direction: column; gap: 24px; width: min(1480px, 100%); }
.acct-card-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.acct-table-wrap { overflow-x: auto; }
.acct-table-head { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); min-height: 44px; }
.acct-table-head .acct-cell { padding: 8px 24px; }
.st-stream-row .acct-cell-title { color: var(--body-text); }
.st-stream-row.st-unread .acct-cell-title { color: var(--white); }
.st-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); flex: none; }
.icon-tile { display: inline-flex; align-items: center; justify-content: center; color: var(--orange-text); font-size: 20px; }
.icon-tile.icon-tile-lg { width: 64px; height: 64px; font-size: 26px; }

/* ---------- subscribe panel: the whole page for someone without a plan ---------- */
.st-subscribe {
    display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
    gap: 40px; align-items: start; padding: 36px 40px;
    background: linear-gradient(135deg, #2a2a2a 0%, #1f1f1f 100%);
    border: 1px solid rgba(255,255,255,.1);
}
.st-subscribe-main { display: flex; flex-direction: column; gap: 12px; }
.st-subscribe-title { font-weight: 600; font-size: 26px; line-height: 32px; color: var(--white); margin: 0; }
.st-subscribe-lead { font-size: 16px; line-height: 24px; color: var(--body-text); margin: 0; max-width: 62ch; }
.st-subscribe-main .st-muted { max-width: 62ch; margin: 0; }
.st-subscribe-what {
    font-weight: 600; font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
    color: var(--muted); margin: 12px 0 0;
}
.st-subscribe-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.st-subscribe-list li { display: flex; align-items: flex-start; gap: 10px; color: var(--body-text); font-size: 14px; }
.st-subscribe-list i { color: var(--green-bright); font-size: 12px; margin-top: 4px; flex: none; }
.st-subscribe-buy {
    display: flex; flex-direction: column; gap: 12px;
    background: rgba(255, 255, 255, .04); border: 1px solid var(--white-08);
    border-radius: 16px; padding: 20px;
}
.st-price-row { display: flex; flex-direction: column; gap: 10px; }
.st-price-row + .st-price-row { border-top: 1px solid var(--white-08); padding-top: 16px; }
.st-price { display: flex; align-items: baseline; gap: 6px; }
.st-price-amount { font-weight: 700; font-size: 28px; line-height: 34px; color: var(--white); }
.st-subscribe-buy .btn { width: 100%; min-width: 0; }
.st-subscribe-fine { font-size: 12px; margin: 4px 0 0; }
@media (max-width: 900px) {
    .st-subscribe { grid-template-columns: 1fr; gap: 24px; padding: 24px; }
}

/* ---------- brand kits ---------- */
.st-usage { margin: -8px 0 0; display: flex; align-items: baseline; gap: 8px; font-size: 13px; }
.st-usage strong { color: var(--white); font-weight: 600; }
.st-kit-files { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.st-kit-file { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--white-08); font-size: 14px; }
.st-kit-file:first-child { border-top: none; }
.st-kit-file > i:first-child { color: var(--muted); flex: none; }
/* the name takes what is left and truncates; the size sits under it rather than stealing width */
.st-kit-file-text { display: flex; flex-direction: column; gap: 2px; flex: 1 1 0; min-width: 0; overflow: hidden; }
.st-kit-file-name { color: var(--white); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; width: 100%; }
.st-kit-file-size { font-size: 12px; white-space: nowrap; }
.st-kit-file-actions { display: flex; align-items: center; gap: 2px; flex: none; }
.acct-modal-wide { max-width: 560px; width: 100%; }
.st-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; margin: 4px 6px 0 0;
    border: 1px solid var(--white-08); border-radius: 999px; font-size: 13px; color: var(--body-text); }
.st-chip button { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 15px; line-height: 1; }

.st-locked { gap: 16px; align-items: center; }
.st-locked .icon-tile { color: var(--muted); }
.st-locked p { margin: 2px 0 0; max-width: 52ch; }

/* ---------- overview sections ---------- */
.st-overview { gap: 32px; padding-top: 8px; }
/* a section heading belongs to what follows it, so the air goes above the heading, not below:
   .acct-content's own 24px gap left the two nearly equal and the grouping read as ambiguous */
.st-section { display: flex; flex-direction: column; gap: 12px; }
.acct-card + .st-section, .st-section + .st-section { margin-top: 12px; }
.st-section-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.st-section-title { font-weight: 600; font-size: 20px; line-height: 26px; color: var(--white); margin: 0; }

/* ---------- active streak hero: credit card sized tiles in a grid, not full width ---------- */
.st-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 400px)); gap: 20px; align-items: stretch; }
.st-cards .st-hero { position: relative; padding: 24px; gap: 14px; border-radius: 20px; min-height: 236px; }
.st-cards .acct-card-title { font-size: 18px; line-height: 24px; }
.st-capacity-card { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 24px; border: 1px dashed var(--border); border-radius: 20px; }
.st-capacity-card h3, .st-capacity-card p { margin: 0; }
.st-capacity-card p { font-size: 14px; line-height: 1.6; }
.st-capacity-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--orange-10); color: var(--orange-text); font-size: 18px; }
.st-capacity-email { align-self: stretch; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 8px 12px; border: 1px solid var(--white-08); border-radius: 10px; background: rgba(0, 0, 0, .15); color: var(--white); font-size: 15px; font-weight: 600; }
.st-capacity-copy { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 96px; min-height: 36px; padding: 4px 8px; border: 0; border-radius: 6px; background: var(--white-08); color: var(--white); font: inherit; font-size: 12px; cursor: pointer; }
.st-capacity-copy:hover { background: var(--white-08); color: var(--white); }
.st-capacity-copy:focus-visible { outline: 2px solid var(--orange-text); outline-offset: 2px; }
.st-capacity-footer { align-self: stretch; display: flex; justify-content: flex-end; }
.st-capacity-footer .btn { min-width: 0; }
.st-cards .st-request-footer .btn { box-sizing: border-box; height: 40px; padding-top: 0; padding-bottom: 0; }
@media (max-width: 380px) { .st-capacity-card { padding: 20px; } }

.st-cards .acct-order-head { align-items: flex-start; gap: 12px; }
.st-cards .acct-order-meta { gap: 16px 24px; }
.st-cards .acct-meta-label { font-size: 12px; }
.st-cards .st-hero-actions { margin-top: auto; }
.st-cards .st-hero-row { align-items: flex-start; }
.st-cards .st-hero-row .st-muted, .st-cards .st-hero-designer .st-muted { font-size: 13px; }
.st-stack { flex-direction: column; align-items: stretch; }
.st-stack .btn { width: 100%; }
/* ---------- support ---------- */
.st-support-page .acct-content { gap: 32px; }
.st-support-page .st-section { margin: 0; }
.st-support { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 36px; padding: 32px; border: 1px solid var(--white-08); }
.st-support-contact { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; min-width: 0; }
.st-support-heading { display: flex; align-items: center; gap: 12px; }
.st-support-heading h2 { margin: 0; font-size: 22px; line-height: 1.35; font-weight: 600; }
.st-support-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--orange-10); color: var(--orange-text); font-size: 20px; }
.st-support-lead { margin: 0; color: var(--body-text); max-width: 44ch; font-size: 14px; line-height: 1.6; }
.st-support-email { font-weight: 600; font-size: clamp(22px, 2.2vw, 28px); line-height: 1.3; color: var(--white); text-decoration: none; overflow-wrap: anywhere; }
.st-support-email:hover { color: var(--orange-text); }
.st-support-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 2px; }
.st-support-actions .btn { width: auto; min-width: 0; gap: 8px; }
.st-support-actions .btn i { font-size: 13px; }
.st-support-expectations { display: flex; flex-direction: column; justify-content: center; gap: 20px; border-left: 1px solid var(--divider); padding-left: 36px; }
.st-support-expectations h3 { margin: 0; font-size: 14px; font-weight: 500; color: var(--muted); }
.st-support-reply { margin: 0; display: flex; align-items: center; gap: 14px; font-size: 14px; line-height: 1.6; color: var(--body-text); }
.st-support-person, .st-support-clock { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 42px; height: 42px; border-radius: 50%; background: var(--white-08); color: var(--orange-text); font-size: 18px; }
.st-routes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.st-route { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 24px; border: 1px solid var(--divider); border-radius: 18px; color: var(--body-text); background: var(--card); text-decoration: none; transition: border-color .15s ease, background-color .15s ease; }
.st-route:hover { border-color: var(--orange-text); background: var(--tile-bg); }
.st-route:focus-visible { outline: 2px solid var(--orange-text); outline-offset: 4px; }
.st-route-icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: var(--white-08); font-size: 18px; color: var(--body-text); }
.st-route h3 { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.4; color: var(--white); }
.st-route p { margin: 0 0 6px; font-size: 14px; line-height: 1.6; color: var(--muted); }
.st-route-go { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; font-size: 13px; line-height: 1.5; font-weight: 600; color: var(--orange-text); }
.st-route-go i { flex: none; font-size: 12px; }
@media (max-width: 1200px) and (min-width: 901px), (max-width: 700px) {
    .st-support { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .st-support-expectations { padding: 24px 0 0; border-left: 0; border-top: 1px solid var(--divider); gap: 16px; }
    .st-routes { grid-template-columns: minmax(0, 1fr); }
    .st-route { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 14px; row-gap: 8px; }
    .st-route-icon { grid-row: 1 / 3; }
    .st-route h3 { align-self: center; }
    .st-route-go { grid-column: 2; margin-top: 4px; }
}
@media (max-width: 700px) {
    .st-support { padding: 24px 20px; border-radius: 18px; }
    .st-support-heading h2 { font-size: 19px; }
    .st-support-actions { width: 100%; }
    .st-support-actions .btn { flex: 1; white-space: nowrap; padding: 11px 14px; }
    .st-route { padding: 20px; }
}

/* the whole card is the link to its detail page; real buttons sit above the cover */
.st-card-cover { position: absolute; inset: 0; border-radius: inherit; z-index: 1; }
.st-card-cover:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.st-cards .st-hero:hover { border-color: rgba(255,255,255,.24); }
.st-cards .st-hero:hover .btn-primary { filter: brightness(1.08); }
/*
 * There is deliberately no .btn-studio here. On the marketing pricing page that class is a purple
 * override applied alongside .btn-primary, so that the second of two plans reads differently from
 * the first. We sell one plan, so there is nothing to differentiate from: the portal's primary
 * action is the brand gradient, the same button the accounts portal and the pricing page use.
 */
.st-above-cover, .st-cards .st-hero .btn[href], .st-cards .st-hero button { position: relative; z-index: 2; }
.st-card-name { margin: 0; font-size: 18px; line-height: 24px; }
.st-hero-queued { opacity: .92; }
.st-hero-cta .icon-tile { font-size: 22px; }
@media (max-width: 700px) { .st-cards { grid-template-columns: 1fr; } }


.st-hero { background: linear-gradient(135deg, #2a2a2a 0%, #1f1f1f 100%); border: 1px solid rgba(255,255,255,.1); box-shadow: 0 4px 20px rgba(0,0,0,.3); }
.st-hero-demo { background: transparent; border: 1px dashed rgba(255,255,255,.2); box-shadow: none; }
.st-hero-title { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.st-hero-title a { color: inherit; text-decoration: none; }
.st-hero-designer, .st-hero-row { display: flex; align-items: center; gap: 16px; }
.st-hero-name { font-weight: 600; color: var(--white); }
.st-hero-meta { padding-top: 0; }
/* .btn-primary and .btn-secondary both carry a 240px minimum, which is a page's call to action.
   Two of them will not fit across a card, so inside one they are the width of their words. */
.st-name-head { align-items: flex-start; gap: 12px; }
.st-name-head .acct-card-title { margin: 0; flex: 1; min-width: 0; }
.st-name-head .acct-badge { flex: none; margin-top: 2px; }
/* actions end the card, so they sit where a card's actions sit: at the end of it */
.st-hero-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.st-hero-actions .btn { min-width: 0; }
.st-avatar-empty { background: var(--white-08); color: var(--muted); }
.acct-order-meta { display: flex; gap: 32px; flex-wrap: wrap; }
.acct-meta-label { font-size: 13px; color: var(--muted); }
.acct-meta-value { font-weight: 600; color: var(--white); }

/* ---------- stream page ---------- */
.st-stream-head { align-items: flex-start; }
.st-stream-title { margin: 0; }
.st-demo-banner a { color: inherit; font-weight: 600; margin-left: 8px; }
.st-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--white-08); margin: 8px 0 24px; }
.st-tab { padding: 10px 16px; font-weight: 600; font-size: 14px; color: var(--muted); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.st-tab.active { color: var(--orange); border-bottom-color: var(--orange); }
.st-stream-body { display: flex; gap: 32px; align-items: flex-start; }
.st-stream-panel { flex: 1; min-width: 0; }
.st-stream-side { width: 340px; flex: none; position: sticky; top: 24px; display: flex; flex-direction: column; gap: 16px; }
.st-side-card { padding: 24px; gap: 16px; }
.st-details .acct-brief-item { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--white-08); }
.st-details dt { color: var(--muted); font-size: 13px; }
.st-details dd { margin: 0; font-size: 14px; text-align: right; }
.st-cancel-link { background: none; border: none; color: var(--muted); font-size: 13px; cursor: pointer; padding: 0; margin-top: 12px; }
.st-cancel-link:hover { color: var(--red); }
@media (max-width: 1100px) { .st-stream-body { flex-direction: column; } .st-stream-side { width: 100%; position: static; } }

/* thread */
.st-thread-card { padding: 24px; gap: 0; display: flex; flex-direction: column; }
.st-thread { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 20px; max-height: 65vh; overflow-y: auto; padding-right: 8px; }
.st-event { display: flex; justify-content: center; align-items: center; gap: 12px; font-size: 13px; color: var(--muted); text-align: center; flex-wrap: wrap; }
.st-event strong { color: var(--body-text); }
.st-event-time { color: var(--muted-2); }
.st-event-link { color: var(--orange-text); font-size: 13px; }
.st-day { text-align: center; font-size: 12px; color: var(--muted-2); letter-spacing: .06em; text-transform: uppercase; }
.st-new-divider { display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--orange); text-transform: uppercase; letter-spacing: .06em; }
.st-new-divider::before, .st-new-divider::after { content: ''; flex: 1; height: 1px; background: rgba(254,150,21,.4); }
.st-msg { display: flex; gap: 12px; align-items: flex-start; max-width: 830px; }
.st-msg.acct-msg-me { flex-direction: row-reverse; align-self: flex-end; max-width: 560px; }
.st-msg-body { min-width: 0; flex: 1; }
.st-msg-name { flex-wrap: wrap; font-size: 13px; font-weight: 600; color: var(--white); margin-bottom: 4px; display: flex; gap: 8px; align-items: baseline; }
.acct-msg-me .st-msg-name { justify-content: flex-end; }
.st-msg-time { font-weight: 400; color: var(--muted-2); font-size: 12px; }
.st-bubble { background: var(--input-bg); border-radius: 12px 12px 12px 0; padding: 12px 16px; }
.acct-msg-me .st-bubble { background: #707070; border-radius: 12px 12px 0 12px; }
.st-bubble p { margin: 0; font-size: 1rem; line-height: 1.55; white-space: pre-wrap; word-break: break-word; }
.st-bubble a { color: var(--orange-text); }
.acct-msg-me .st-bubble a { color: #fff; text-decoration: underline; }
.st-msg-bot .st-bot-tile { width: 36px; height: 36px; padding: 6px; flex: none; }
.st-msg-bot .st-bot-tile img { width: 100%; }
.st-attachments { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.st-file-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 8px; background: var(--white-08); color: var(--white); text-decoration: none; font-size: 13px; max-width: 100%; }
.st-file-chip i { color: var(--orange-text); }
.st-file-chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
.st-file-chip-size { color: var(--muted); }
.st-new-pill { position: sticky; bottom: 8px; align-self: center; background: var(--orange); color: #fff; padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; cursor: pointer; }
.st-load-older { align-self: center; background: none; border: 1px solid var(--border); color: var(--muted); border-radius: 999px; padding: 6px 14px; font-size: 13px; cursor: pointer; margin-bottom: 12px; }

/* composer */
.st-composer { position: sticky; bottom: 0; background: var(--card); padding-top: 16px; margin-top: 16px; border-top: 1px solid var(--white-08); display: flex; flex-direction: column; gap: 8px; }
.st-composer.st-dragging { outline: 2px dashed var(--orange); outline-offset: 6px; border-radius: 8px; }
.st-composer-text { min-height: 44px; resize: none; }
.st-composer-bar { display: flex; align-items: center; gap: 12px; }
.st-composer-hint { font-size: 12px; }
.st-icon-btn { min-width: 0; padding: 8px 12px; }
.st-composer .st-icon-btn { width: 40px; height: 40px; min-width: 40px; padding: 0; flex: none; }
.st-composer .st-icon-btn:disabled { opacity: .4; cursor: not-allowed; transform: none; box-shadow: none; background: transparent; }
.st-pending { display: flex; flex-wrap: wrap; gap: 8px; }
.st-pending:empty { display: none; }
.st-pending .st-file-chip { position: relative; overflow: hidden; }
.st-pending .st-file-chip.st-uploading::after { content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: var(--pct, 0%); background: var(--orange); transition: width .2s; }
.st-pending .st-file-chip.st-failed { color: var(--red); }
.st-pending .st-remove { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 16px; line-height: 1; padding: 0 2px; }
.st-strip { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 16px; padding: 16px; border-radius: 12px; background: var(--white-08); font-size: 14px; }
.st-msg-failed .st-bubble { outline: 1px solid var(--red); }
.st-retry { color: var(--red); font-size: 12px; margin-top: 4px; cursor: pointer; background: none; border: none; padding: 0; }

/* files */
.st-files { gap: 20px; }
/*
 * The tile is the card, and everything about the folder lives inside it: "Download all" as a
 * detached button underneath read as a second, unrelated control and left the row of tiles
 * ragged. It is a footer of the same card now, so a tile with one file and a tile with five are
 * the same object, one just has an extra row.
 */
.st-folder-tile {
    position: relative; display: flex; flex-direction: column;
    border-radius: 12px; overflow: hidden; background: var(--white-08); border: 1px solid transparent;
}
.st-folder-tile:hover, .st-folder-tile:has(.st-folder.active) { border-color: var(--orange-border); }
.st-folder-tile .st-folder { flex: 1; background: none; border: none; border-radius: 0; }
.st-folder-all {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 10px 12px; font: inherit; font-size: 13px; border: 0; border-top: 1px solid var(--white-08);
    background: transparent; color: var(--body-text); cursor: pointer;
}
.st-folder-all:hover { background: var(--white-08); color: var(--white); }
button.st-file-thumb { border: none; font: inherit; cursor: pointer; }
button.acct-download { background: none; border: none; cursor: pointer; font: inherit; }
.st-folders { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.st-folder { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px; border-radius: 12px; background: var(--white-08); border: 1px solid transparent; color: var(--white); text-align: left; cursor: pointer; font: inherit; }
.st-folder:hover, .st-folder.active { border-color: var(--orange-border); }
.st-folder > i { color: var(--orange-text); font-size: 22px; }
.st-folder-name { font-weight: 600; display: flex; gap: 8px; align-items: center; }
/* brand kits: a list of cards that are ways in, and one page per kit */
/* kits are tiles, not rows: there are only ever a handful and each is a thing you open */
.st-kit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.st-kit { position: relative; gap: 10px; padding: 22px; min-height: 200px; text-align: left; }
.st-kit-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.st-kit-name { margin: 0; font-size: 17px; line-height: 22px; }
.st-kit-desc { margin: 0; font-size: 13px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.st-kit-meta { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; margin-top: auto; }
.st-kit-site { display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-kit-default { border-color: var(--orange-border); }
.st-kit:hover { border-color: rgba(255, 255, 255, .24); }
.st-kit-add { border-style: dashed; background: none; cursor: pointer; font: inherit; align-items: flex-start; justify-content: center; gap: 10px; }
.st-kit-add:hover { border-color: var(--orange); }
.st-kit-add .st-kit-name { color: var(--orange); }
.st-kit-none { margin: 0; align-self: center; font-size: 13px; }

/* Drafts follow the brand kit tile pattern, with editing and starting as separate actions. */
.st-section-sub { margin: -2px 0 4px; line-height: 1.6; max-width: 78ch; }
.st-draft-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 400px)); }
.st-draft-card { min-width: 0; }
.st-draft-card .st-card-name { overflow-wrap: anywhere; }
.st-draft-label { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; margin-left: auto; white-space: nowrap; }
.st-draft-summary { margin: 0; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.st-draft-updated { margin: 0; font-size: 12px; }
.st-draft-wait { margin: 0; padding-top: 12px; border-top: 1px solid var(--white-08); line-height: 1.5; }
.st-draft-add { min-height: 236px; border-radius: 20px; padding: 24px; text-decoration: none; }
.st-draft-add:focus-visible, .st-subscribe:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; }
.st-subscribe:target { border-color: var(--orange-border); scroll-margin-top: 24px; }
@media (max-width: 700px) { .st-draft-grid { grid-template-columns: minmax(0, 1fr); } }
/*
 * A kit is two things - what to know, and what to work from - so on a wide screen they sit beside
 * each other. Capped at 900px in one column the page filled the left third of a desktop and left
 * the rest black; stretching the writing box across 1600px instead would be worse to write in.
 */
.st-kit-page { max-width: 1360px; }
@media (min-width: 1100px) {
    .st-kit-page { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 28%); gap: 20px; align-items: start; }
    .st-kit-page > .st-notice, .st-kit-page > .st-kit-danger { grid-column: 1 / -1; }
}
.st-kit-title-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* the name edits in place, so it has to read as the page title until it is focused */
.st-title-input {
    font-family: inherit; font-weight: 700; font-size: 32px; line-height: 40px; color: var(--white);
    background: none; border: 1px solid transparent; border-radius: 10px; padding: 2px 8px; margin-left: -8px;
    max-width: 100%;
    /* an input is 20 characters wide whatever is in it, which left the pencil stranded half a line
       away from a short name. The script keeps the size attribute in step; this is the same thing
       for browsers that have it, and the floor stops an empty field collapsing to nothing. */
    field-sizing: content;
    min-width: 8ch;
}
.st-title-input:hover { border-color: var(--white-08); }
/* a heading that happens to be a field looks like a heading, so it says it is one */
.st-title-edit { display: inline-flex; align-items: center; gap: 8px; cursor: text; }
.st-title-pen { font-size: 13px; color: var(--muted); transition: color .15s ease; }
.st-title-edit:hover .st-title-pen { color: var(--orange); }
.st-title-edit:focus-within .st-title-pen { opacity: 0; }
.st-title-input:focus { outline: none; border-color: var(--orange); background: rgba(255, 255, 255, .04); }
.st-save-state { font-size: 13px; color: var(--muted); margin-left: 8px; }
.st-save-failed { color: var(--red); }
.st-kit-about, .st-kit-assets { gap: 16px; }
.st-kit-usage { margin: -8px 0 0; font-size: 13px; }
.st-kit-text { min-height: 240px; resize: vertical; line-height: 1.6; }
.st-kit-page .acct-page-sub { max-width: 78ch; }
.st-kit-danger { display: flex; justify-content: flex-end; }
/* destructive, but not the loudest thing on the page until you are on it */
.st-danger-btn { width: auto; min-width: 0; }
.st-danger-btn:hover { color: var(--red); border-color: var(--red); }
.st-brief-doc { gap: 10px; }
.st-brief-doc-note { margin: 0; font-size: 13px; }
/* "or tell us here": a divider between two ways of answering the same question, not a heading */
.st-or { display: flex; align-items: center; gap: 12px; margin: 2px 0; font-size: 13px; }
.st-or::before, .st-or::after { content: ''; flex: 1; height: 1px; background: var(--white-08); }
.st-optional { font-weight: 400; font-size: 12px; color: var(--muted); margin-left: 6px; }
.st-kit-links { min-height: 72px; resize: vertical; font-size: 13px; }
.st-kit-linklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
/* Save sits in a card heading, so it is the size of a heading's control, not a page's call to
   action. It goes primary only while there is something to save. */
.st-kit-save { display: inline-flex; align-items: center; gap: 10px; flex: none; }
.st-kit-save .btn { width: auto; min-width: 0; padding: 5px 14px; font-size: 13px; }
.st-kit-save .btn:disabled { opacity: .4; cursor: default; }
.st-kit-save .st-save-state { margin: 0; }
.st-draft-notice { margin: 0; font-size: 13px; }
/* the confirm button for something that destroys work: the primary gradient reads as "yes please" */
.btn-danger, .btn-primary.btn-danger { background: var(--red); background-image: none; color: #fff; }
.btn-danger:hover { filter: brightness(1.1); }
#confirmModal .acct-modal-text[hidden] { display: none; }
.st-file-open { background: none; border: none; padding: 0; font: inherit; color: var(--white); cursor: pointer; text-align: left; }
.st-file-open:hover { color: var(--orange); text-decoration: underline; }
.st-preview-card { width: min(940px, 100%); max-height: 88vh; gap: 14px; position: relative; }
.st-preview-head { display: flex; align-items: center; gap: 12px; padding-right: 40px; }
.st-preview-head .acct-modal-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; }
.st-preview-body { flex: 1; min-height: 0; overflow: auto; display: flex; align-items: center; justify-content: center; background: var(--white-08); border-radius: 10px; }
.st-preview-body img { max-width: 100%; max-height: 72vh; object-fit: contain; }
.st-preview-body iframe { width: 100%; height: 72vh; border: none; background: #fff; border-radius: 10px; }

/*
 * Quill's snow theme is light, so the surfaces are repainted here rather than by forking its
 * stylesheet: an upgrade stays a file copy. Its toolbar icons are inline SVG whose stroke and fill
 * are set by class, which is why those two rules look odd.
 */
/* the toolbar and the writing area are one control: quill inserts the toolbar as a sibling of the
   container, so both have to sit in a wrapper of their own or the card's gap splits them */
.st-kit-editor { display: flex; flex-direction: column; gap: 0; }
/* the toolbar wraps on a narrow column, so it is a flex row rather than quill's float layout,
   which orphaned the last button onto a line of its own */
.ql-toolbar.ql-snow {
    background: var(--white-08); border: 1px solid var(--divider); border-bottom: none;
    border-radius: 12px 12px 0 0; padding: 6px 8px;
    display: flex; flex-wrap: wrap; align-items: center; gap: 2px;
}
.ql-toolbar.ql-snow .ql-formats { margin: 0 6px 0 0; display: inline-flex; align-items: center; }
.ql-toolbar.ql-snow .ql-formats:not(:last-child)::after {
    content: ''; width: 1px; height: 18px; background: var(--white-08); margin-left: 6px;
}
.ql-container.ql-snow {
    background: var(--input-bg); border: 1px solid var(--divider); border-radius: 0 0 12px 12px;
    font-family: inherit; font-size: 14px; min-height: 320px;
}
.ql-editor { min-height: 320px; line-height: 1.65; color: var(--body-text); padding: 16px; }
.st-kit-page .st-kit-about .ql-editor { min-height: max(400px, calc(100dvh - 400px)); }
.ql-editor.ql-blank::before { color: var(--muted); font-style: normal; left: 16px; right: 16px; }
/* quill.core sizes headings in em off the container, which makes an h1 shout in a 14px box */
.ql-editor h1, .ql-editor h2, .ql-editor h3 { color: var(--white); margin: 18px 0 6px; line-height: 1.3; }
.ql-editor h1 { font-size: 20px; }
.ql-editor h2 { font-size: 17px; }
.ql-editor h3 { font-size: 15px; }
.ql-editor > :first-child { margin-top: 0; }
.ql-editor p { margin: 0 0 10px; }
.ql-editor ul, .ql-editor ol { margin: 0 0 10px; }
.ql-editor a { color: var(--orange-text); }
.ql-editor blockquote { border-left: 2px solid var(--divider); padding-left: 14px; color: var(--muted); }
.ql-editor pre.ql-syntax { background: var(--white-08); color: var(--white); border-radius: 10px; }
.ql-snow .ql-stroke { stroke: var(--body-text); }
.ql-snow .ql-fill, .ql-snow .ql-stroke.ql-fill { fill: var(--body-text); }
.ql-snow .ql-picker { color: var(--body-text); }
.ql-snow .ql-picker-options { background: var(--card); border-color: var(--divider); }
.ql-snow.ql-toolbar button:hover .ql-stroke, .ql-snow.ql-toolbar button.ql-active .ql-stroke,
.ql-snow .ql-picker-label:hover, .ql-snow .ql-picker-item:hover { stroke: var(--orange); color: var(--orange); }
.ql-snow.ql-toolbar button:hover .ql-fill, .ql-snow.ql-toolbar button.ql-active .ql-fill { fill: var(--orange); }
.ql-snow .ql-tooltip { background: var(--card); border-color: var(--divider); color: var(--body-text); box-shadow: none; }
.ql-snow .ql-tooltip input[type=text] { background: var(--input-bg); border-color: var(--divider); color: var(--white); }

/* rendered guidelines, as a designer sees them */
.st-md { color: var(--body-text); line-height: 1.65; }
.st-md > :first-child { margin-top: 0; }
.st-md > :last-child { margin-bottom: 0; }
.st-md h1, .st-md h2, .st-md h3, .st-md h4 { color: var(--white); margin: 20px 0 8px; line-height: 1.3; }
.st-md h1 { font-size: 20px; }
.st-md h2 { font-size: 17px; }
.st-md h3, .st-md h4 { font-size: 15px; }
.st-md p, .st-md ul, .st-md ol, .st-md blockquote, .st-md pre, .st-md table { margin: 0 0 12px; }
.st-md ul, .st-md ol { padding-left: 22px; }
.st-md li { margin: 4px 0; }
.st-md a { color: var(--orange-text); }
.st-md code { background: var(--white-08); padding: 1px 5px; border-radius: 5px; font-size: 13px; }
.st-md pre { background: var(--white-08); padding: 12px 14px; border-radius: 10px; overflow-x: auto; }
.st-md pre code { background: none; padding: 0; }
.st-md blockquote { border-left: 2px solid var(--divider); padding-left: 14px; margin-left: 0; color: var(--muted); }
.st-md img { max-width: 100%; border-radius: 8px; }
.st-md table { border-collapse: collapse; width: 100%; }
.st-md th, .st-md td { border: 1px solid var(--white-08); padding: 8px 10px; text-align: left; }
.st-md hr { border: none; border-top: 1px solid var(--white-08); margin: 20px 0; }


/* ---------- brief status rail ---------- */
.st-rail {
    list-style: none; margin: 4px 0 0; padding: 0;
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
}
.st-rail-step {
    position: relative; display: flex; flex-direction: column; align-items: center;
    text-align: center; gap: 8px; padding: 0 6px;
}
/* the connector runs from the previous dot's centre to this one, behind both */
.st-rail-step::before {
    content: ''; position: absolute; top: 15px; left: -50%; right: 50%; height: 2px;
    background: var(--white-08);
}
.st-rail-step:first-child::before { display: none; }
.st-rail-step.is-done::before, .st-rail-step.is-active::before { background: var(--green-bright); }
.st-rail-dot {
    position: relative; z-index: 1; width: 32px; height: 32px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 600; background: var(--card); color: var(--muted);
    border: 2px solid var(--white-08);
}
.st-rail-step.is-done .st-rail-dot { background: var(--green-bright); border-color: var(--green-bright); color: #06210c; }
.st-rail-step.is-active .st-rail-dot { background: var(--orange); border-color: var(--orange); color: #241300; box-shadow: 0 0 0 4px rgba(254, 150, 21, .18); }
.st-rail-label { font-size: 13px; font-weight: 600; color: var(--white); line-height: 1.3; }
.st-rail-step:not(.is-done):not(.is-active) .st-rail-label { color: var(--muted); font-weight: 500; }
.st-rail-when { font-size: 12px; color: var(--muted); }
@media (max-width: 700px) {
    .st-rail { grid-auto-flow: row; gap: 20px; }
    .st-rail-step { flex-direction: row; align-items: flex-start; text-align: left; gap: 12px; padding: 0; }
    .st-rail-step::before { top: -20px; bottom: auto; left: 15px; right: auto; width: 2px; height: 20px; }
    .st-rail-label { flex: 1; }
}

.st-files-head { margin-top: 8px; }
.st-view-toggle .seg-btn { padding: 6px 10px; }
.st-file-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.st-file-grid.st-list { grid-template-columns: 1fr; }
.st-file-card { border-radius: 12px; background: var(--input-bg); overflow: hidden; display: flex; flex-direction: column; }
.st-list .st-file-card { flex-direction: row; align-items: center; }
.st-file-thumb { display: flex; align-items: center; justify-content: center; aspect-ratio: 16/9;
    background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .02));
    color: var(--orange-text); font-size: 52px; text-decoration: none; }
.st-list .st-file-thumb { width: 64px; aspect-ratio: 1; font-size: 22px; flex: none; }
.st-thumb-img { width: 100%; height: 100%; background-size: cover; background-position: center; }
.st-file-body { padding: 12px; display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
.st-file-name { font-weight: 600; font-size: 14px; color: var(--white); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-file-foot { display: flex; justify-content: space-between; align-items: center; }
.acct-download { color: var(--orange-text); font-size: 16px; }
.st-dropzone { cursor: pointer; display: block; }
.st-dropzone.st-dragging { border-color: var(--orange); }
.st-dropzone input { display: none; }

/* brief tab */
.st-brief { gap: 24px; }
.acct-brief-list { margin: 0; display: flex; flex-direction: column; gap: 16px; }
.acct-brief-list dt { color: var(--muted); font-size: 13px; margin-bottom: 4px; }
.acct-brief-list dd { margin: 0; color: var(--white); }
.acct-brief-moods { display: flex; gap: 8px; flex-wrap: wrap; }
.acct-locked-main { display: inline-flex; align-items: center; gap: 12px; color: var(--muted); font-size: 13px; }
.acct-locked-main i { color: var(--orange-text); font-size: 18px; }

/* modals */
.acct-modal { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--black-50); z-index: 50; padding: 16px; }
.acct-modal[hidden] { display: none; }
/*
 * The ported card centres its children and puts 40px between them, which is a marketing hero's
 * spacing: a dialog with a heading, a line of text and one field came out centre-aligned with its
 * label hanging left and its buttons flush against the input. A dialog's form is also a single
 * child, so the card's gap never lands between the fields.
 */
.acct-modal-card { background: var(--card); border-radius: 16px; padding: 32px; width: min(504px, 100%); display: flex; flex-direction: column; align-items: stretch; gap: 20px; text-align: left; }
.acct-modal-card form { display: flex; flex-direction: column; gap: 20px; }
.acct-modal-card .btn { min-width: 0; }
/*
 * The onboarding dialog. Its form is a single child of .acct-modal-card, so the card's 40px gap
 * lands around the form rather than between the fields: without these the labels sat directly on
 * the select above them and the hint was wedged between the last field and the button.
 */
.st-onboarding .acct-modal-card { position: relative; width: min(560px, 100%); gap: 24px; padding: 36px; }
.st-onboarding .acct-modal-text { max-width: 42ch; }
.st-onboarding .field { gap: 8px; }
.st-onboarding .field-label { font-size: 13px; }
.st-onboarding .onb-note {
    margin: 0; font-size: 13px; display: flex; align-items: flex-start; gap: 8px;
    padding-top: 4px; border-top: 1px solid var(--white-08);
}
.st-onboarding .onb-note i { margin-top: 3px; color: var(--muted); }
.st-onboarding .acct-modal-actions { margin-top: 4px; }
.st-modal-close {
    position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--muted); text-decoration: none; font-size: 15px;
    background: none; border: 0; padding: 0; cursor: pointer;
}
.st-modal-close:hover { background: var(--white-08); color: var(--white); }
.acct-modal-title { margin: 0; font-size: 20px; }
/* the ported .acct-modal-text centres itself and caps at 357px, which reads as a marketing card
   rather than a dialog once the fields under it are left aligned */
.acct-modal-text { margin: 0; color: var(--body-text); align-items: stretch; text-align: left; max-width: none; }
/* the ported rule gives every dialog button flex: 1 1 0 and min-width: 0, so two buttons split the
   row and wrap their own labels: "Create and open" came out on two lines */
.acct-modal-actions { display: flex; gap: 12px; justify-content: flex-end; flex-wrap: wrap; }
.acct-modal-actions .btn { flex: 0 0 auto; white-space: nowrap; }

/* Draft requests: a quiet, single-column editor with optional details and an explicit review. */
.draft-page { max-width: 1040px; width: 100%; margin: 0 auto; padding-bottom: 24px; }
.draft-page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin: 28px 0; }
.draft-page-head .acct-page-sub { max-width: 660px; margin: 10px 0 0; line-height: 1.6; }
.draft-eyebrow { display: inline-block; font-size: 12px; font-weight: 600; color: var(--orange-text); margin-bottom: 8px; }
.draft-page-head #deleteDraft { flex: 0 0 auto; white-space: nowrap; }
.draft-form, .draft-editor, .draft-review { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.draft-page [hidden] { display: none !important; }
.draft-card { display: flex; flex-direction: column; gap: 20px; min-width: 0; padding: 28px; border: 1px solid var(--divider); border-radius: 18px; background: var(--tile-bg); }
.draft-card h2 { margin: 0; font-size: 20px; font-weight: 600; line-height: 1.4; }
.draft-card h3 { margin: 0; font-size: 24px; overflow-wrap: anywhere; }
.draft-card > p { margin: 0; line-height: 1.6; }
.draft-card > h2 + .brief-help { margin-top: -12px; }
.draft-page .field { width: 100%; display: flex; flex-direction: column; gap: 8px; padding: 0; margin: 0; align-items: stretch; }
.draft-page .field-label { margin: 0; font-size: 15px; font-weight: 500; line-height: 1.5; }
.draft-page .input { width: 100%; min-width: 0; box-sizing: border-box; padding: 12px 14px; font: inherit; font-size: 15px; line-height: 1.5; border: 1px solid var(--divider); border-radius: 10px; background: var(--input-bg, #191919); color: var(--white); }
.draft-page .input::placeholder { color: var(--muted); opacity: .85; }
.draft-page .input-textarea { resize: vertical; min-height: 88px; }
.draft-page #idealOutcome { min-height: 154px; }
.draft-page .input:focus-visible, .draft-page summary:focus-visible, .draft-text-button:focus-visible, .draft-upload:focus-within { outline: 2px solid var(--orange); outline-offset: 3px; }
.draft-page [aria-invalid="true"] { border-color: var(--red); }
.draft-page .brief-help { margin: 0; max-width: 760px; font-size: 14px; line-height: 1.6; color: var(--body-text); }
.draft-category-picker > summary { display: flex; justify-content: space-between; gap: 14px; cursor: pointer; padding: 14px 16px; border-radius: 10px; border: 1px solid var(--orange-border); font-weight: 600; }
.draft-category-picker[open] > summary { margin-bottom: 18px; }
.draft-category-picker > summary::-webkit-details-marker { display: none; }
.draft-change { color: var(--orange-text); font-size: 14px; font-weight: 500; }
.draft-cat-hint { display: block; color: var(--body-text); padding: 0 13px 14px; font-size: 12px; line-height: 1.5; }
.draft-page .st-cats { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.draft-page .st-cat-shot { aspect-ratio: 1.6; }
.draft-page .st-cat-name { padding-bottom: 6px; }
.draft-fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.draft-fieldset legend { padding: 0; margin-bottom: 10px !important; }
.draft-fieldset > .brief-help { margin-bottom: 12px; }
.draft-choices { display: flex; flex-wrap: wrap; gap: 9px; }
.draft-choice { position: relative; display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }
.draft-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.draft-choice span { display: block; padding: 10px 14px; border: 1px solid var(--divider); border-radius: 10px; color: var(--body-text); background: #ffffff03; }
.draft-choice input:checked + span { color: var(--orange-text); background: #fe961510; border-color: var(--orange); }
.draft-choice input:focus-visible + span { outline: 2px solid var(--orange); outline-offset: 3px; }
.draft-choice input:checked + span::before { content: '✓ '; }
.draft-intents .draft-choice { flex: 1 1 180px; }
.draft-intents .draft-choice span { width: 100%; text-align: center; }
.draft-check { display: flex; align-items: center; gap: 10px; color: var(--body-text); font-size: 14px; }
.draft-check input { accent-color: var(--orange); width: 17px; height: 17px; }
.draft-extra { border-top: 1px solid var(--divider); }
.draft-extra > summary { cursor: pointer; padding: 18px 0; font-size: 15px; font-weight: 600; color: var(--white); }
.draft-extra[open] > summary { color: var(--orange-text); }
.draft-extra-body { display: flex; flex-direction: column; gap: 18px; padding-bottom: 12px; min-width: 0; }
.draft-page .brief-ref { margin: 0; border: 1px solid var(--divider); border-radius: 10px; background: #ffffff03; }
.draft-page .st-linkrow { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; padding: 12px; align-items: start; }
.draft-page .st-linkrow > label { display: flex; flex-direction: column; gap: 8px; min-width: 0; font-size: 13px; line-height: 1.5; color: var(--body-text); }
.draft-page .btn-add-ref { align-self: flex-start; padding: 8px 0; min-height: auto; font-size: 14px; color: var(--orange-text); }
.draft-page .brief-fonts-pick { display: flex; flex-direction: row; flex-wrap: wrap; gap: 12px; }
.draft-page .brief-font-option { flex: 1 1 210px; min-height: 0; padding: 12px; font-size: 14px; }
.draft-page .brief-moods { display: flex; flex-wrap: wrap; gap: 8px; }
.draft-page .st-kitpick { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 12px; align-items: stretch; }
.draft-page .st-kitopt { min-width: 0; min-height: 104px; box-sizing: border-box; padding-top: 16px; padding-bottom: 16px; gap: 8px; }
.draft-page .st-kitopt::before { top: 18px; }
.draft-page .st-kitopt-name { line-height: 1.4; overflow-wrap: anywhere; }
.draft-page .st-kitopt-sub { line-height: 1.45; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.draft-upload { position: relative; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 20px; border: 1px dashed var(--divider); border-radius: 10px; cursor: pointer; font-size: 14px; text-align: center; }
.draft-upload input { position: absolute; width: 100%; height: 100%; inset: 0; opacity: 0; cursor: pointer; }
.draft-upload:hover, .draft-upload.st-dragging { border-color: var(--orange); background: #fe961508; }
.draft-upload > i { font-size: 24px; color: var(--orange-text); }
.draft-upload > span { display: flex; flex-direction: column; gap: 6px; }
.draft-upload strong { font-size: 15px; font-weight: 600; }
.draft-brand-fields { display: flex; flex-direction: column; gap: 16px; border-top: 1px solid var(--divider); padding-top: 22px; }
.draft-brand-fields h3 { font-size: 16px; font-weight: 600; }
.draft-file-list, .draft-page .st-pending { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.draft-file { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--divider); border-radius: 8px; font-size: 13px; overflow-wrap: anywhere; }
.draft-file > span:first-child { flex: 1; min-width: 0; }
.draft-file-failed { border-color: var(--red); }
.draft-review-head { display: flex; justify-content: space-between; gap: 16px; align-items: center; flex-wrap: wrap; }
.draft-text-button { border: 0; background: none; padding: 0; cursor: pointer; font: inherit; font-size: 14px; }
.draft-summary { display: flex; flex-direction: column; gap: 18px; margin: 0; }
.draft-summary > div { border-top: 1px solid var(--divider); padding-top: 16px; }
.draft-summary dt { font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.draft-summary dd { margin: 0; font-size: 15px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.draft-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.draft-field-error { color: var(--red); margin: 0; font-size: 14px; }
.draft-footer { position: sticky; bottom: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; padding: 16px 20px; margin-top: 2px; border: 1px solid var(--divider); border-radius: 14px; background: var(--tile-bg); box-shadow: 0 -8px 25px #0002; }
.draft-save-state { flex: 1; min-width: 130px; font-size: 13px; line-height: 1.5; color: var(--muted); display: flex; flex-direction: column; gap: 4px; }
.draft-footer-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.draft-footer .btn { flex: 0 0 auto; min-width: 0; white-space: nowrap; padding: 12px 18px; font-size: 14px; }
.draft-page #draftSubscribe > p { margin: 0 0 18px; }
.draft-page #draftSubscribe .st-subscribe { margin: 0; padding: 24px; }
.draft-page #draftSubscribe .st-subscribe-what, .draft-page #draftSubscribe .st-subscribe-list { display: none; }
.draft-page [id] { scroll-margin-top: 20px; }
@media (max-width: 700px) {
    .draft-page-head { flex-wrap: wrap; gap: 14px; margin: 24px 0; }
    .draft-page-head .acct-page-title { font-size: 28px; }
    .draft-card { padding: 20px 16px; border-radius: 14px; gap: 18px; }
    .draft-page .st-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .draft-page .st-cat-name { font-size: 13px; padding: 10px 10px 4px; }
    .draft-cat-hint { padding: 0 10px 12px; }
    .draft-intents .draft-choice { flex-basis: 100%; }
    .draft-page .st-linkrow { grid-template-columns: minmax(0, 1fr) auto; }
    .draft-page .st-linkrow > label:first-child { grid-column: 1; }
    .draft-page .st-linkrow > label:nth-child(2) { grid-column: 1; grid-row: 2; }
    .draft-page .st-linkrow > button { grid-column: 2; grid-row: 1; }
    .draft-two-col { grid-template-columns: 1fr; }
    .draft-footer { padding: 12px; gap: 8px; bottom: 8px; }
    .draft-save-state { flex-basis: 100%; }
    .draft-footer-actions { width: 100%; }
    .draft-footer .btn { flex: 1; white-space: normal; padding: 11px 10px; font-size: 13px; }
    .draft-file { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
    .draft-page .st-cat, .draft-page .st-cat-shot img { transition: none; }
    .draft-page .st-cat:hover { transform: none; }
}

/* category picker: a shot of that kind of work above its name */
.st-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.st-cat { position: relative; display: flex; flex-direction: column; border: 1px solid var(--divider);
    border-radius: 14px; overflow: hidden; cursor: pointer; background: rgba(255, 255, 255, .03);
    transition: border-color .15s ease, transform .15s ease; }
.st-cat input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.st-cat-shot { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3;
    background: #0d0d10; color: var(--muted); font-size: 26px; overflow: hidden; }
/* the shots are light-ground mockups and nine of them at full strength glare on a near-black
   page, so the ones you are not looking at sit back a little */
.st-cat-shot img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .8; transition: opacity .15s ease; }
.st-cat:hover .st-cat-shot img, .st-cat:has(input:checked) .st-cat-shot img { opacity: 1; }
.st-cat-name { display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 11px 13px; font-size: 14px; font-weight: 600; color: var(--white); }
.st-cat-tick { color: var(--orange); opacity: 0; transition: opacity .15s ease; }
.st-cat:hover { border-color: rgba(255, 255, 255, .3); transform: translateY(-2px); }
.st-cat:has(input:checked) { border-color: var(--orange); }
.st-cat:has(input:checked) .st-cat-tick { opacity: 1; }
.st-cat:has(input:focus-visible) { outline: 2px solid var(--orange); outline-offset: 2px; }

/*
 * Shared brand kit choices. The draft editor arranges these as compact cards above.
 */
.st-kitpick { display: flex; flex-direction: column; gap: 8px; }
.st-kitopt { position: relative; display: flex; flex-direction: column; gap: 3px; text-align: left;
    padding: 12px 16px 12px 44px; border: 1px solid var(--divider); border-radius: 12px; cursor: pointer;
    background: rgba(255, 255, 255, .03); font: inherit; transition: border-color .15s ease; }
.st-kitopt input { position: absolute; width: 1px; height: 1px; opacity: 0; }
/* the box is drawn, so the row can carry its own layout without a span for it in the markup */
.st-kitopt::before {
    content: ''; position: absolute; left: 15px; top: 14px; width: 16px; height: 16px;
    border: 1px solid var(--divider); border-radius: 4px; transition: background-color .15s ease, border-color .15s ease;
}
.st-kitopt:has(input:checked)::before {
    background: var(--orange) url('../img/icon-check.svg') center / 11px no-repeat; border-color: var(--orange);
}
.st-kitopt-name { font-size: 14px; font-weight: 600; color: var(--white); }
.st-kitopt-sub { font-size: 13px; color: var(--muted); }
.st-kitopt:hover { border-color: rgba(255, 255, 255, .3); }
.st-kitopt:has(input:checked) { border-color: var(--orange); background: rgba(254, 150, 21, .08); }
.st-kitopt:has(input:focus-visible), .st-kitopt-new:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
/* the default kit is sent whatever happens, so it is stated rather than offered */
.st-kitopt-always { cursor: default; padding-left: 16px; border-color: var(--orange-border); }
.st-kitopt-always::before { display: none; }
.st-kitopt-always .st-kitopt-name { color: var(--orange-text); display: flex; align-items: center; gap: 8px; }
.st-kitopt-new { border-style: dashed; background: none; padding-left: 16px; }
.st-kitopt-new::before { display: none; }
.st-kitopt-new .st-kitopt-name { color: var(--orange); }

@media (max-width: 700px) {
    .st-cats { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}
.st-list { display: flex; flex-direction: column; gap: 12px; }
.st-linkrow { display: grid; grid-template-columns: 1fr 1.4fr auto; gap: 10px; align-items: start; padding: 16px; }
.st-refrow { grid-template-columns: 1fr 1.6fr auto; }
.st-remove { background: none; border: none; color: var(--muted); font-size: 20px; cursor: pointer; padding: 8px; line-height: 1; }
.st-remove:hover { color: var(--red); }
.st-panel { display: none; flex-direction: column; gap: 20px; }
.st-panel.active { display: flex; }
[data-font="google"] { display: none; }
.st-fonts-google [data-font="google"] { display: flex; }
.st-library-pick { display: flex; flex-direction: column; gap: 8px; }
.st-pick { display: flex; gap: 8px; align-items: center; font-size: 14px; }
.brief-moods .badge-pill { cursor: pointer; }
.brief-moods .badge-pill input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.brief-moods .badge-pill:has(input:checked) { border-color: var(--orange); color: var(--orange); }
.brief-actions { display: flex; justify-content: space-between; gap: 16px; padding: 24px 0 40px; }
.brief-actions-end { justify-content: flex-end; }

/* assets / billing / profile */
.st-row-form { display: flex; flex-direction: column; gap: 16px; }
.st-swatches { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.st-swatch { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px 4px 4px; border-radius: 999px; background: var(--white-08); font-size: 12px; }
.st-swatch i { width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--white-20); display: inline-block; }
.st-swatch button { background: none; border: none; color: var(--muted); cursor: pointer; }
.st-zones { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.st-asset-table .acct-table-row { grid-template-columns: minmax(0, 1fr) 140px 120px 140px 100px; }
.st-danger { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 15px; }
.st-danger:hover { color: var(--red); }
.acct-form-actions { display: flex; gap: 12px; justify-content: flex-end; }
.st-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.acct-info-tile { background: var(--tile-bg); border-radius: 16px; padding: 20px; }
.acct-tile-title { color: var(--muted); font-size: 13px; }
.acct-tile-desc { font-weight: 600; color: var(--white); margin-top: 4px; }
.acct-tile-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.acct-tile-row > div { flex: 1; min-width: 200px; }
.acct-plan-row { display: flex; align-items: center; gap: 16px; }
.acct-plan-text { flex: 1; }
.acct-plan-desc { margin: 4px 0 0; color: var(--body-text); font-size: 14px; }
.acct-included h3 { font-size: 14px; margin: 0 0 8px; }
.acct-included-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
.acct-included-cols ul { margin: 0; padding-left: 18px; color: var(--body-text); font-size: 14px; line-height: 1.8; }
.acct-included-cols li::marker { color: var(--orange); }
.acct-sub-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.st-plan-designer-card { background: linear-gradient(135deg, #2d2620 0%, #241f1a 100%); border: 2px solid rgba(250,170,71,.5); }
.st-plan-studio-card { background: linear-gradient(135deg, #2a2035 0%, #1f1a2a 100%); border: 2px solid rgba(147,51,234,.5); }
.st-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
.st-plan-pick { display: flex; flex-direction: column; gap: 16px; }
.st-plan-pick .plan-price .amount { font-size: 2.5rem; font-weight: 700; }
.st-plan-pick .plan-features { margin: 0; padding-left: 18px; color: var(--body-text); line-height: 1.9; }
.billing-toggle { display: flex; justify-content: center; }
.acct-faq { background: var(--tile-bg); border-radius: 16px; padding: 20px 24px; margin-bottom: 12px; }
.acct-faq-q { font-weight: 600; margin-bottom: 6px; }
.acct-faq-a { color: var(--body-text); font-size: 14px; }
/*
 * A settings form. The ported .check-item and .field rules are the marketing page's, sized for a
 * hero: 24px padding, a 20px label on a 32px line. The form is also a single child of its card, so
 * the card's gap lands around it rather than between its fields - the same trap the onboarding
 * dialog fell into.
 */
.st-form { display: flex; flex-direction: column; gap: 24px; }
.st-checks { gap: 10px; }
.st-form .check-item { padding: 0; gap: 10px; margin: 0; border-radius: 8px; }
.st-form .check-icon { width: 20px; height: 20px; }
.st-form .check-label { font-size: 14px; line-height: 20px; }
.st-checks-note { margin: 4px 0 0; font-size: 12px; max-width: 62ch; }
.st-form .acct-form-actions { border-top: 1px solid var(--white-08); padding-top: 20px; }
.check-item { display: flex; gap: 8px; align-items: center; font-size: 14px; margin-top: 8px; }
@media (prefers-reduced-motion: reduce) { .st-pending .st-file-chip.st-uploading::after { transition: none; } }

.st-nav-ext { margin-left: auto; font-size: 11px; opacity: .5; }

/* Request controls stay compact in the sidebar and on touch screens. */
.st-overview-summary .acct-stats { margin: 0; }
.st-overview-summary .st-section-head { flex-wrap: wrap; }
.st-current-plan { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0; color: var(--muted); font-size: 13px; }
.st-current-plan a { text-decoration: none; gap: 6px; }
.st-current-plan a:hover { background: rgba(124,58,237,.25); text-decoration: underline; }
.st-current-plan a:focus-visible { outline: 2px solid var(--orange-text); outline-offset: 3px; }
.st-current-plan a i { font-size: 10px; }
.st-quiet-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; font: inherit; }
.st-quiet-icon:hover, .st-quiet-icon:focus-visible { background: var(--white-08); color: var(--orange-text); }
.st-quiet-icon:disabled { opacity: .4; cursor: wait; }
.st-msg-name .st-quiet-icon { width: 28px; height: 28px; font-size: 12px; align-self: center; }
.st-deleted { color: var(--muted); font-style: italic; font-size: 13px; }
.st-return-hint { margin: 14px 0 10px; font-size: 13px; line-height: 1.5; }
.st-details .st-detail-kits { display: block; padding: 12px 0; }
.st-detail-kits dt { display: flex; align-items: center; justify-content: space-between; }
.st-details .st-kit-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; text-align: left; }
.st-kit-plus { color: var(--orange-text); }
.st-kit-chip { display: inline-flex; gap: 6px; align-items: center; max-width: 100%; padding: 5px 9px; border: 1px solid var(--white-08); border-radius: 8px; font-size: 12px; color: var(--body-text); text-decoration: none; }
.st-kit-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-kit-chip i { color: var(--orange-text); font-size: 10px; }
.st-kit-chip:hover { border-color: var(--orange); color: var(--orange-text); }
.st-kit-tag { display: inline-flex; align-items: stretch; max-width: 100%; border: 1px solid var(--white-08); border-radius: 8px; overflow: hidden; }
.st-kit-tag .st-kit-chip { min-width: 0; border: 0; border-radius: 0; }
.st-kit-remove { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 28px; min-height: 28px; padding: 0; border: 0; border-left: 1px solid var(--white-08); background: transparent; color: var(--muted); cursor: pointer; font-size: 12px; }
.st-kit-remove:hover, .st-kit-remove:focus-visible { background: var(--white-08); color: var(--orange-text); }
.st-kit-remove:disabled { opacity: .5; cursor: wait; }
.st-kit-picker { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-height: 45vh; overflow-y: auto; }
.st-kit-option { display: flex; align-items: center; gap: 8px; border: 1px solid var(--white-08); border-radius: 10px; padding: 14px; font-size: 14px; cursor: pointer; }
.st-kit-option span { overflow-wrap: anywhere; }
.st-kit-option:has(input:checked) { border-color: var(--orange); background: var(--white-08); }
.st-image-chip { border: 1px solid transparent; cursor: pointer; text-align: left; }
.st-image-chip:hover { border-color: var(--orange); }
.st-image-chip .st-image-thumbnail { width: 64px; height: 48px; object-fit: cover; border-radius: 5px; }
.st-file-thumb .st-image-thumbnail { width: 100%; height: 100%; max-height: 240px; object-fit: contain; }
.st-thumb-fallback[hidden], .st-image-thumbnail[hidden] { display: none; }
.st-streak-preview { width: min(940px, 100%); max-height: 90vh; gap: 16px; }
.st-preview-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.st-preview-heading h3 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-streak-preview .st-preview-body { min-height: 160px; padding: 12px; }
.st-streak-preview .st-preview-body img { max-height: 65vh; }
@media (max-width: 540px) { .st-kit-picker { grid-template-columns: 1fr; } .st-image-chip { flex-wrap: wrap; } .st-image-chip .st-file-chip-name { max-width: 180px; } }

/* Active work: request first, status second, supporting details last. */
.st-cards .st-request-card { gap: 20px; padding: 24px; background: var(--card); }
.st-request-heading { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.st-request-card.has-unread .st-request-heading { padding-right: 40px; }
.st-request-category { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.4; }
.st-cards .st-request-title { margin: 0; font-size: 21px; line-height: 1.3; font-weight: 600; overflow-wrap: anywhere; }
.st-request-status { width: 100%; display: flex; align-items: center; gap: 7px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.st-request-status-cyan { color: var(--cyan); }
.st-request-status-indigo { color: var(--indigo); }
.st-request-status-orange { color: var(--orange-text); }
.st-request-status-green { color: #4ade80; }
.st-request-status-amber { color: var(--amber); }
.st-request-status-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.st-request-designer { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.st-request-designer .st-muted { margin-top: 2px; font-size: 12px; }
.st-request-matching { margin: 0; display: flex; align-items: center; gap: 12px; color: var(--body-text); font-size: 13px; line-height: 1.55; }
.st-request-matching i { color: var(--muted); font-size: 20px; }
.st-request-meta { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.st-request-meta dt { color: var(--muted); font-size: 12px; line-height: 1.4; }
.st-request-meta dd { margin: 5px 0 0; color: var(--body-text); font-size: 14px; line-height: 1.4; font-weight: 500; }
.st-request-unread.st-above-cover { position: absolute; top: 24px; right: 24px; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--orange-text); color: #161616; font-size: 11px; font-weight: 700; line-height: 1; text-decoration: none; }
.st-request-unread:hover { filter: brightness(1.12); }
.st-request-unread:focus-visible { outline: 2px solid var(--orange-text); outline-offset: 3px; }
.st-request-footer { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--white-08); }
.st-request-actions { justify-content: space-between; gap: 12px; }
.st-request-summary { margin: 0; color: var(--body-text); font-size: 13px; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.st-request-note { margin: 0 0 14px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.st-request-secondary-action { display: inline-flex; align-items: center; gap: 7px; padding: 9px 0; border: 0; border-radius: 4px; background: transparent; color: var(--body-text); font: inherit; font-size: 13px; text-decoration: none; cursor: pointer; }
.st-request-secondary-action:hover, .st-request-secondary-action:focus-visible { color: var(--orange-text); }
.st-request-secondary-action:disabled { opacity: .5; cursor: wait; }
.st-request-open { margin-left: auto; gap: 10px; }
.st-request-open i { font-size: 12px; }
@media (max-width: 380px) { .st-cards .st-request-card { padding: 20px; } .st-request-actions .btn { padding-right: 13px; padding-left: 13px; font-size: 13px; } }

/* Mobile navigation replaces the stacked desktop sidebar with a compact menu. */
.st-nav-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.st-nav-panel { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.st-nav-toggle { display: none; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; border: 1px solid var(--white-08); border-radius: 10px; background: transparent; color: var(--white); font-size: 20px; cursor: pointer; }
.st-nav-toggle:hover, .st-nav-toggle:focus-visible { background: var(--white-08); color: var(--orange-text); }
.st-nav-backdrop { display: none; }
@media (max-width: 900px) {
    .acct-sidebar { position: sticky; top: 0; z-index: 40; padding: 10px 16px; }
    .st-nav-heading { position: relative; z-index: 2; }
    .acct-sidebar .acct-brand img { width: 36px; height: 36px; }
    .acct-sidebar .acct-brand span { font-size: 18px; line-height: 24px; }
    .st-nav-toggle { display: inline-flex; }
    .st-nav-panel { position: absolute; top: 100%; left: 0; right: 0; z-index: 2; display: none; max-height: calc(100vh - 65px); max-height: calc(100dvh - 65px); overflow-y: auto; overscroll-behavior: contain; padding: 8px 16px 24px; background: var(--card-dark); border-bottom: 1px solid var(--nav-border); box-shadow: 0 16px 28px rgba(0,0,0,.2); }
    .st-nav-expanded .st-nav-panel { display: flex; }
    .st-nav-panel .acct-nav { flex: none; padding: 0 0 20px; gap: 16px; }
    .st-nav-panel .acct-nav-item { min-height: 44px; padding-top: 10px; padding-bottom: 10px; }
    .st-nav-panel .acct-user { padding-top: 20px; }
    .st-nav-expanded .st-nav-backdrop { display: block; position: fixed; inset: 65px 0 0; z-index: 1; border: 0; padding: 0; background: rgba(0,0,0,.55); }
    body.st-nav-open { overflow: hidden; }
    .acct-main { padding-top: 24px; }
}

.st-request-demo-label { position: absolute; top: 24px; right: 24px; padding: 3px 8px; border-radius: 6px; background: var(--orange-10); border: 1px solid var(--orange-border); color: var(--orange-text); font-size: 11px; font-weight: 600; line-height: 16px; }
.st-request-demo-card .st-request-heading { padding-right: 60px; }

/* Internal operations workspace: work-first lists and compact team/profile cards. */
.sw-main { max-width: 1540px; gap: 0; }
.sw-main > .acct-back { margin-bottom: 28px; }
.sw-workspace-nav { justify-content: flex-start; gap: 20px; }
.sw-workspace-nav > .acct-nav-group:last-child { margin-top: auto; }
.sw-main h1 { font-size: clamp(1.7rem, 2.6vw, 2.3rem); line-height: 1.2; margin: 0 0 12px; }
.sw-main h2 { font-size: 1.2rem; line-height: 1.4; margin: 0 0 12px; }
.sw-main h3 { font-size: 1rem; margin: 0; }
.sw-main p { line-height: 1.6; }
.sw-eyebrow { font-size: .75rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: #a5a5a5; margin: 0 0 12px; }
.sw-page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 32px; }
.sw-page-head p { margin-bottom: 0; max-width: 700px; }
.sw-page-head > .btn { flex-shrink: 0; margin-top: 25px; }
.sw-nav-work { border-bottom: 1px solid #414141; margin-bottom: 12px; padding-bottom: 12px; }
.sw-filters, .sw-team-toolbar { display: flex; align-items: end; gap: 18px; margin: 24px 0; }
.sw-filters label { flex: 1; max-width: 350px; min-width: 0; }
.sw-main label, .sw-modal label, #newStudioModal label { display: block; font-size: .875rem; }
.sw-main label > .input, .sw-modal label > .input, #newStudioModal label > .input { margin-top: 8px; width: 100%; }
.sw-main select, .sw-modal select { min-height: 46px; }
.sw-status-tabs { display: flex; gap: 22px; border-bottom: 1px solid #333; overflow-x: auto; margin: 24px 0; scrollbar-width: thin; }
.sw-status-tabs a { color: #b8b8b8; text-decoration: none; padding: 12px 0 16px; font-size: .85rem; white-space: nowrap; border-bottom: 2px solid transparent; }
.sw-status-tabs a.active { color: #ffaa3a; border-bottom-color: #ffaa3a; font-weight: 600; }
.sw-status-tabs a:hover { color: #fff; }
.sw-work-list { border: 1px solid #363636; background: #202020; border-radius: 18px; overflow: hidden; }
.sw-work-row { display: flex; align-items: center; gap: 20px; padding: 24px; border-bottom: 1px solid #393939; }
.sw-work-row:last-child { border-bottom: none; }
.sw-work-row:hover { background: #272727; }
.sw-work-link { display: grid; grid-template-columns: minmax(170px, 1.6fr) minmax(170px, 1fr) minmax(115px, .75fr); flex: 1; gap: 22px; align-items: center; min-width: 0; text-decoration: none; color: inherit; }
.sw-work-title { min-width: 0; }
.sw-work-title h2 { font-size: 1rem; margin: 7px 0 8px; display: flex; align-items: center; gap: 10px; overflow-wrap: anywhere; }
.sw-category, .sw-work-title > .st-muted, .sw-work-state > .st-muted, .sw-work-meta { font-size: .75rem; }
.sw-category { color: #aaa; }
.sw-work-state, .sw-work-meta { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.sw-work-state .acct-badge { white-space: normal; }
.sw-row-action .btn { min-width: 0; white-space: nowrap; }
.sw-unread { border-radius: 50%; background: #ffac42; color: #171717; min-width: 24px; height: 24px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center; font-size: .72rem; flex-shrink: 0; }
.sw-pagination { display: flex; align-items: center; justify-content: center; gap: 24px; margin-top: 26px; }
.sw-empty { padding: 64px 24px; text-align: center; color: #bcbcbc; }
.sw-empty h2 { color: #eee; margin-top: 20px; }
.sw-empty p { max-width: 560px; margin: 12px auto 24px; }
.sw-empty-icon, .sw-studio-icon { display: inline-flex; justify-content: center; align-items: center; width: 48px; height: 48px; background: #ff9f1c12; border: 1px solid #755120; color: #ffaf43; border-radius: 14px; font-size: 1.3rem; }
.sw-routing { display: grid; grid-template-columns: minmax(200px, .75fr) minmax(280px, 1.3fr); gap: 32px; padding: 28px; }
.sw-routing-choices { display: grid; gap: 12px; margin-bottom: 22px; }
.sw-routing label.sw-choice { display: flex; gap: 14px; padding: 16px; border-radius: 12px; border: 1px solid #494949; align-items: flex-start; cursor: pointer; }
.sw-choice:has(input:checked) { border-color: #bb7928; background: #ffaa3310; }
.sw-choice input { margin-top: 4px; accent-color: #ffaa3a; }
.sw-choice strong, .sw-choice small { display: block; }
.sw-choice small { color: #aaa; margin-top: 7px; line-height: 1.5; }
.sw-form-end { display: flex; align-items: center; justify-content: flex-end; gap: 16px; }
.sw-form-status { font-size: .82rem; color: #bcbcbc; line-height: 1.5; }
.sw-small { font-size: .8rem; }
.sw-error { color: #ff8275 !important; }
.sw-section-head { margin: 32px 0 16px; }
.sw-studio-grid, .sw-team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 310px), 1fr)); gap: 20px; }
.sw-studio-card, .sw-member-card { padding: 24px; margin: 0; gap: 0; }
.sw-studio-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); }
.sw-main .btn { min-width: 0; }
.sw-studio-card .sw-card-footer { gap: 20px; }
.sw-delete-studio { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--divider); }
.sw-delete-studio p { margin: 0 0 12px; }
.sw-main .sw-delete-studio .btn { color: #ff8275; border-color: #84443d; }
.sw-main .sw-delete-studio .btn:hover { background: #ff827510; border-color: #ff8275; }
.sw-card-footer .sw-text-link { white-space: nowrap; }
.sw-profile-form .acct-card, .sw-profile-summary, .sw-delivery-form .acct-card { gap: 0; }
.sw-card-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.sw-studio-card h2 a { color: #eee; text-decoration: none; }
.sw-manager-list { display: grid; gap: 14px; margin: 24px 0; }
.sw-person { display: flex; gap: 14px; align-items: center; min-width: 0; text-decoration: none; color: inherit; }
.sw-person strong, .sw-person small { display: block; }
.sw-person small { color: #aaa; font-size: .73rem; margin-top: 5px; }
.sw-person p { margin: 4px 0 0; font-size: .8rem; }
.sw-card-footer { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding-top: 20px; border-top: 1px solid #444; }
.sw-text-link { font-size: .8rem; color: #ffac3b; text-decoration: none; }
.sw-settings { margin-top: 18px; font-size: .8rem; }
.sw-settings summary { cursor: pointer; color: #bcbcbc; }
.sw-settings form { display: grid; gap: 15px; margin-top: 18px; }
.sw-team-toolbar { justify-content: space-between; }
.sw-team-toolbar form { flex: 1; max-width: 350px; }
.sw-member-card { text-decoration: none; color: #eee; display: flex; flex-direction: column; border: 1px solid #414141; transition: border-color .15s; }
.sw-member-card:hover { border-color: #987039; }
.sw-member-link { display: flex; flex-direction: column; flex: 1; color: inherit; text-decoration: none; }
.sw-member-actions { display: flex; justify-content: flex-end; margin-top: 18px; }
.sw-remove-member { color: #ff9388; border-color: #72504c; }
.sw-remove-member:hover { color: #ffb4aa; border-color: #c78278; background: #ff827508; }
.sw-manager-entry { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.sw-manager-entry .sw-person { flex: 1; min-width: 140px; }
.sw-bio-preview { color: #b4b4b4; font-size: .85rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sw-member-state { font-size: .75rem; color: #eeb463; }
.sw-expertise { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 22px; }
.sw-expertise span { font-size: .68rem; background: #ffffff08; border: 1px solid #484848; border-radius: 6px; padding: 5px 7px; }
.sw-member-footer { display: flex; align-items: center; gap: 20px; border-top: 1px solid #424242; padding-top: 18px; font-size: .75rem; color: #aaa; margin-top: auto; }
.sw-member-footer strong { color: #eee; }
.sw-member-footer > i { margin-left: auto; color: #ffb03e; }
.sw-inline-empty { padding: 22px; border: 1px dashed #454545; border-radius: 14px; color: #aaa; font-size: .85rem; }
.sw-modal { max-width: 650px; max-height: 90vh; overflow: auto; }
.sw-modal form { display: grid; gap: 16px; }
.sw-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.sw-modal-head h2 { margin: 0; font-size: 1.35rem; }
.sw-candidates { display: grid; gap: 10px; max-height: 48vh; overflow: auto; margin: 24px 0; }
.sw-candidate { display: flex !important; align-items: center; gap: 14px; padding: 16px; border: 1px solid #484848; border-radius: 12px; cursor: pointer; }
.sw-candidate:has(input:checked) { border-color: #d89239; background: #ffaa3810; }
.sw-candidate input { accent-color: #ffa536; }
.sw-candidate strong, .sw-candidate small { display: block; }
.sw-candidate small { color: #aaa; margin-top: 7px; line-height: 1.5; }
.sw-candidate .acct-avatar { flex-shrink: 0; }
.sw-profile-layout { display: grid; grid-template-columns: minmax(240px, .65fr) minmax(300px, 1.6fr); gap: 24px; align-items: start; }
.sw-profile-summary { padding: 28px; text-align: center; }
.sw-profile-summary #memberPhoto { display: flex; justify-content: center; margin-bottom: 18px; }
.sw-photo-button { display: inline-flex !important; margin: 0 auto; cursor: pointer; }
.sw-profile-counts { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 16px; border-top: 1px solid #444; margin-top: 24px; padding-top: 24px; font-size: .75rem; }
.sw-profile-counts strong { display: block; font-size: 1.4rem; color: #eee; margin-bottom: 10px; }
.sw-profile-counts a { color: #bcbcbc; text-decoration: none; }
.sw-profile-form { display: grid; gap: 24px; }
.sw-profile-form .acct-card { padding: 28px; margin: 0; }
.sw-profile-form label { margin-top: 20px; }
.sw-field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.sw-expertise-picker { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.sw-expertise-picker label { margin: 0; cursor: pointer; }
.sw-expertise-picker input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sw-expertise-picker span { display: block; border: 1px solid #555; padding: 10px 12px; border-radius: 9px; font-size: .8rem; }
.sw-expertise-picker input:checked + span { border-color: #bd842f; background: #ffa73313; color: #ffba64; }
.sw-expertise-picker input:focus-visible + span { outline: 2px solid white; outline-offset: 2px; }
.sw-portfolio-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; align-items: end; margin-bottom: 20px; }
.sw-save-bar { position: sticky; bottom: 16px; padding: 18px 22px; background: #242424f5; border: 1px solid #505050; border-radius: 14px; display: flex; align-items: center; justify-content: space-between; gap: 16px; z-index: 5; box-shadow: 0 8px 24px #0006; }
.sw-avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.sw-avatar-large { width: 96px; height: 96px; }
.sw-controls { padding: 22px !important; margin-bottom: 18px; }
.sw-controls h2 { font-size: 1.1rem; margin: 0 0 12px; }
.sw-controls .btn { margin-top: 12px; width: 100%; }
.sw-controls p { font-size: .82rem; }
.sw-review-panel { padding: 28px; border: 1px solid #618253; border-radius: 18px; background: #273026; margin: 24px 0; }
.sw-review-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.sw-review-heading h2 { margin: 0 0 10px; font-size: 1.25rem; }
.sw-delivery-files { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0; }
.sw-delivery-form { max-width: 1000px; display: grid; gap: 24px; }
.sw-delivery-form .acct-card { margin: 0; padding: 28px; }
.sw-delivery-form .st-kit-editor { margin-top: 20px; }
.sw-delivery-form .ql-editor { min-height: 260px; }
.sw-delivery-drop { display: flex !important; flex-direction: column; align-items: center; gap: 14px; padding: 32px; margin: 20px 0; border: 1px dashed #626262; border-radius: 14px; cursor: pointer; }
.sw-delivery-drop i { color: #ffb04b; font-size: 1.6rem; }
.sw-delivery-drop:focus-within { outline: 2px solid #fff; }
@media (max-width: 1350px) {
    .sw-work-link { grid-template-columns: minmax(150px, 1.5fr) minmax(160px, 1fr); }
    .sw-work-meta { grid-column: 1 / -1; flex-direction: row; margin-top: -8px; }
    .sw-work-row { align-items: flex-start; }
}
@media (max-width: 1100px) {
    .sw-routing { grid-template-columns: 1fr; gap: 20px; }
    .sw-profile-layout { grid-template-columns: 1fr; }
    .sw-profile-summary { display: none; }
}
@media (max-width: 700px) {
    .sw-page-head, .sw-review-heading { flex-direction: column; gap: 18px; }
    .sw-page-head > .btn { margin-top: 0; width: auto; }
    .sw-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
    .sw-filters label:first-of-type { grid-column: 1 / -1; max-width: none; }
    .sw-status-tabs { gap: 20px; }
    .sw-work-row { display: block; padding: 22px; }
    .sw-work-link { grid-template-columns: 1fr; gap: 16px; }
    .sw-work-meta { margin: 0; }
    .sw-row-action { margin-top: 22px; text-align: right; }
    .sw-row-action .btn { width: auto; }
    .sw-team-toolbar { flex-direction: column; align-items: stretch; }
    .sw-team-toolbar form { max-width: none; }
    .sw-profile-summary { display: block; }
    .sw-field-pair, .sw-portfolio-row { grid-template-columns: 1fr; }
    .sw-portfolio-row { border-bottom: 1px solid #444; padding-bottom: 16px; }
    .sw-portfolio-row label { margin-top: 4px; }
    .sw-save-bar { bottom: 8px; padding: 16px; }
    .sw-save-bar .btn { width: auto; min-width: 120px; }
    .sw-studio-card, .sw-routing, .sw-profile-form .acct-card, .sw-delivery-form .acct-card { padding: 22px; }
}
.sw-upload-row { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid #444; font-size: .85rem; }
.sw-upload-row > :first-child { overflow-wrap: anywhere; flex: 1; color: #ddd; text-decoration: none; }
.sw-upload-row small { color: #aaa; }
@media (min-width: 701px) and (max-width: 1100px) { .sw-profile-summary { display: block; } }

.sw-profile-summary h2 { margin-top: 18px; }
.sw-modal .btn:disabled { opacity: .45; cursor: not-allowed; }
.sw-member-card .sw-bio-preview { margin: 18px 0 12px; }

/* Delivery feedback: quiet cards, native keyboard-operable stars and explicit sharing choices. */
.qa-customer, .qa-work-notes { margin: 24px 0; padding: 28px; }
.qa-customer { scroll-margin-top: 24px; }
.qa-customer:focus { outline: 2px solid #ffa638; outline-offset: 4px; }
.qa-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.qa-heading h2 { margin: 0 0 8px; font-size: 1.25rem; }
.qa-heading p { margin: 0 0 8px; }
.qa-small { font-size: .8rem; line-height: 1.55; }
.qa-editor { border-top: 1px solid #ffffff18; margin-top: 20px; padding-top: 16px; }
.qa-editor summary { cursor: pointer; color: #ffad42; font-weight: 600; padding: 4px 0; }
.qa-editor summary:focus-visible { outline: 2px solid #ffad42; outline-offset: 4px; }
.qa-editor form { margin-top: 20px; max-width: 780px; }
.qa-editor form > label { display: block; font-size: .9rem; margin: 20px 0; }
.qa-editor form .input { display: block; width: 100%; margin-top: 8px; }
.qa-star-row, .qa-satisfaction { border: 0; padding: 0; margin: 0 0 22px; min-width: 0; }
.qa-star-row legend, .qa-satisfaction legend { font-size: .95rem; font-weight: 500; margin-bottom: 6px; }
.qa-stars { display: flex; align-items: center; flex-wrap: wrap; gap: 3px; }
.qa-stars .qa-star { position: relative; display: inline-flex; margin: 0; cursor: pointer; }
.qa-star input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.qa-star span { display: grid; place-items: center; color: #8a8a8a; font-size: 32px; width: 44px; height: 44px; border-radius: 8px; }
.qa-star.is-filled span, .qa-star:has(input:checked) span { color: #ffad42; }
.qa-star:hover span { color: #ffd095; background: #ffffff08; }
.qa-star:has(input:focus-visible) span { outline: 2px solid #ffad42; outline-offset: 2px; }
.qa-star:has(input:disabled) { opacity: .4; cursor: not-allowed; }
.qa-star-value { color: #bdbdbd; font-size: .8rem; margin-left: 12px; }
.qa-choice-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.qa-choice-row label { cursor: pointer; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px; border: 1px solid #555; border-radius: 10px; }
.qa-choice-row label:has(input:checked) { border-color: #ffa638; background: #ffa63812; }
.qa-choice-row input { accent-color: #ffa638; }
.qa-privacy { padding: 12px 16px; border-left: 2px solid #777; background: #ffffff04; font-size: .85rem; color: #c5c5c5; line-height: 1.6; }
.qa-privacy p { margin: 4px 0; }
.qa-form-end { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 16px; margin-top: 20px; }
.qa-form-status { color: #bdbdbd; font-size: .85rem; flex: 1; margin: 0; }
.qa-form-status.is-error { color: #ff8275; }
.qa-text-button { border: 0; background: none; color: #c7c7c7; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; padding: 10px 0; font: inherit; font-size: .85rem; }
.qa-text-button:hover { color: #fff; }
.qa-text-button:focus-visible { outline: 2px solid #ffa638; }
.qa-score { white-space: nowrap; color: #ffc074; font-weight: 600; padding: 8px 12px; border-radius: 10px; background: #ffa6380d; }
.qa-rating-list { display: grid; grid-template-columns: repeat(auto-fit,minmax(170px,1fr)); gap: 16px; margin: 20px 0; }
.qa-rating-list dt { color: #b7b7b7; font-size: .8rem; }
.qa-rating-list dd { margin: 6px 0 0; }
.qa-written { line-height: 1.7; overflow-wrap: anywhere; }
.qa-metrics { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
.qa-metric { padding: 12px 0; }
.qa-metric > span { color: #b7b7b7; font-size: .9rem; }
.qa-metric strong { display: block; font-size: 2rem; margin-top: 8px; }
.qa-metric small { font-size: .95rem; font-weight: 400; color: #aaa; }
.qa-star-mark { color: #ffa638; font-size: 1.3rem; vertical-align: 10%; }
.qa-health { display: flex; gap: 24px; flex-wrap: wrap; border-top: 1px solid #ffffff18; padding-top: 16px; font-size: .9rem; }
.qa-health strong { font-size: 1.15rem; margin-right: 4px; }
.qa-filters { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; align-items: end; margin: 24px 0; }
.qa-filters .btn { justify-self: start; }
.qa-review-list { display: grid; gap: 20px; }
.qa-review-list .acct-card { margin: 0; padding: 28px; }
.qa-inline-ratings { display: flex; flex-wrap: wrap; gap: 12px 24px; color: #bdbdbd; font-size: .85rem; margin: 16px 0; }
.qa-inline-ratings strong { color: #eee; margin-left: 6px; }
.qa-excerpt { border-left: 2px solid #ffa638; padding: 4px 16px; margin: 12px 0 20px; line-height: 1.6; overflow-wrap: anywhere; }
.qa-button-row, .qa-pagination { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 16px 0; }
.qa-feature-controls { margin-top: 16px; }
.qa-table-wrap { overflow-x: auto; margin: 20px 0; }
.qa-table { border-collapse: collapse; width: 100%; text-align: left; font-size: .85rem; }
.qa-table caption { text-align: left; font-size: 1rem; font-weight: 600; margin: 8px 0 16px; }
.qa-table th, .qa-table td { padding: 14px 18px 14px 0; border-bottom: 1px solid #ffffff15; min-width: 84px; }
.qa-table thead th { color: #bdbdbd; font-weight: 400; }
.qa-table tbody th { font-weight: 500; }
.qa-table td small { display: block; margin-top: 4px; color: #aaa; }
.qa-context-note, .qa-profile-review { border-top: 1px solid #ffffff18; margin-top: 24px; padding-top: 24px; }
.qa-context-note h4 { font-size: .85rem; color: #bbb; margin: 18px 0 4px; }
.qa-context-note p { margin: 4px 0; }
.qa-profile-feedback { margin-top: 32px; }
.qa-public-heading { display: flex; gap: 24px; align-items: center; margin: 24px 0; }
.qa-public-heading h1 { margin: 0; }
.qa-bio { max-width: 750px; font-size: 1.1rem; line-height: 1.7; }
.qa-tags, .qa-portfolio { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0; }
.qa-quotes { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr)); gap: 20px; margin: 24px 0; }
.qa-quote { margin: 0; border: 1px solid #ffffff20; background: #ffffff05; padding: 24px; border-radius: 16px; }
.qa-quote blockquote { margin: 0 0 20px; font-size: 1.05rem; line-height: 1.7; overflow-wrap: anywhere; }
.qa-quote figcaption { font-size: .85rem; }
@media (max-width: 700px) {
    .qa-customer, .qa-work-notes, .qa-review-list .acct-card { padding: 20px; }
    .qa-heading { flex-wrap: wrap; gap: 12px; }
    .qa-filters { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .qa-metrics { gap: 12px; }
    .qa-metric strong { font-size: 1.5rem; }
    .qa-metric > span { font-size: .8rem; }
    .qa-star-value { flex-basis: 100%; margin: 4px 0 0; }
    .qa-customer .btn, .qa-work-notes .btn, .qa-button-row .btn { min-width: 0; }
    .qa-form-end .btn { width: 100%; }
    .qa-public-heading { gap: 16px; }
}

/* A delivery has two clear customer decisions, grouped after its files and handoff. */
.sw-delivery-decision { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 24px; padding-top: 20px; border-top: 1px solid #ffffff20; }
.sw-delivery-decision > p { max-width: 560px; margin: 0; font-size: .9rem; line-height: 1.6; }
.sw-delivery-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; }
.sw-delivery-actions .btn { min-width: 0; white-space: nowrap; }
.sw-delivery-changes { max-width: 780px; margin-top: 24px; padding-top: 20px; border-top: 1px solid #ffffff20; }
.sw-delivery-changes > label { display: block; font-weight: 600; }
.sw-delivery-changes > p { font-size: .85rem; line-height: 1.6; }
.sw-delivery-changes textarea { display: block; width: 100%; margin: 12px 0; }
.sw-delivery-changes .sw-form-status { min-height: 24px; }
.sw-delivery-changes .is-error { color: #ffb0a6; }
@media (max-width: 900px) {
    .sw-delivery-decision { align-items: stretch; flex-direction: column; gap: 16px; }
}
@media (max-width: 500px) {
    .sw-delivery-actions { flex-direction: column-reverse; }
    .sw-delivery-actions .btn { width: 100%; }
}

/* Subscriber cards keep billing and sharing distinct from the customer's work. */
.st-sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.sub-overview{display:flex;flex-wrap:wrap;gap:28px;margin:24px 0;color:var(--muted)}
.sub-overview strong{color:var(--body-text);font-size:24px;margin-right:6px}
.sub-filters{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:24px 0}
.sub-search{flex:1;min-width:220px}.sub-filters label:not(.sub-search){max-width:240px}
.sub-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,410px),1fr));gap:24px}
.sub-card{display:flex;flex-direction:column;min-width:0;margin:0;padding:28px}
.sub-person{display:flex;gap:16px;align-items:center;min-width:0}.sub-person .acct-avatar{flex-shrink:0;width:52px;height:52px}
.sub-person>div{min-width:0}.sub-person h2{font-size:21px;margin:0 0 6px}.sub-person h2 a{color:inherit;text-decoration:none}
.sub-person p{margin:0 0 4px;color:var(--muted);font-size:14px}.sub-email{font-size:13px;overflow-wrap:anywhere}
.sub-plan{margin-top:24px;padding-top:20px;border-top:1px solid var(--border)}
.sub-plan-top{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:14px}
.sub-access-pill{font-size:11px;white-space:nowrap;border-radius:20px;background:rgba(45,190,97,.1);padding:4px 8px;color:var(--green)}
.sub-price{font-size:26px;font-weight:650;margin:12px 0 20px}.sub-price small{font-size:12px;font-weight:400;color:var(--muted)}
.sub-dates{display:grid;gap:12px;margin:18px 0}.sub-dates>div{display:flex;justify-content:space-between;gap:16px;align-items:baseline}
.sub-dates dt{font-size:13px;color:var(--muted)}.sub-dates dd{font-size:13px;text-align:right;margin:0;overflow-wrap:anywhere}
.sub-caption{font-size:12px;line-height:1.6;color:var(--muted);margin:12px 0 0}
.sub-work-counts{display:flex;flex-wrap:wrap;gap:18px;border-top:1px solid var(--border);padding-top:18px;margin-top:22px;font-size:13px;color:var(--muted)}
.sub-work-counts strong{color:var(--body-text);font-size:18px}.sub-recent{margin-top:14px;flex:1}.sub-recent a{display:flex;gap:12px;justify-content:space-between;text-decoration:none;padding:10px 0;font-size:13px;color:var(--body-text)}
.sub-recent a span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sub-recent small{color:var(--muted);flex-shrink:0}
.sub-open{display:flex;justify-content:space-between;align-items:center;padding:14px 0;margin-top:8px;text-decoration:none;font-size:14px}
.sub-sharing{border-top:1px solid var(--border);padding-top:20px;margin-top:12px}.sub-sharing>label{font-size:13px;display:block;margin-bottom:8px}
.sub-sharing>div{display:flex;align-items:center;gap:8px}.sub-sharing select{min-width:0;flex:1}.sub-sharing button{min-width:auto}
.sub-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.sub-detail-grid>.acct-card{min-width:0;margin:0 0 24px}
.sub-history{padding:8px 24px}.sub-history-row{display:flex;align-items:center;gap:20px;padding:20px 0;border-bottom:1px solid var(--border);color:var(--body-text);text-decoration:none}
.sub-history-row:last-child{border:0}.sub-history-row>div{flex:1;min-width:0}.sub-history-row strong{display:block;overflow-wrap:anywhere}.sub-history-row small{display:block;color:var(--muted);margin-top:8px}
.sub-kit-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}.sub-kit-grid>div{padding:20px;border:1px solid var(--border);border-radius:12px}
.sub-manager-plan{font-size:14px;color:var(--muted);margin:24px 0 0}.sub-manager-plan i{color:var(--green);margin-right:8px}
@media(max-width:700px){.sub-detail-grid{grid-template-columns:1fr}.sub-card{padding:24px}.sub-filters label,.sub-filters label:not(.sub-search){flex:1 1 100%;max-width:none}.sub-person h2{font-size:19px}.sub-history-row{flex-wrap:wrap}.sub-history-row>div{flex-basis:100%}}

/* Chat reminders are optional; lifecycle updates remain enabled. */
.st-email-preference { padding-bottom: 16px; border-bottom: 1px solid var(--white-08); }
.st-email-preference label { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; line-height: 1.5; }
.st-email-preference input { margin-top: 4px; accent-color: var(--orange-text); }
.st-email-preference p { margin: 8px 0 0; font-size: 12px; line-height: 1.5; }
.st-email-preference #emailPreferenceStatus:empty { display: none; }

/* Phoenix admin customer activity: compact table and existing card surfaces. */
.ca-views, .ca-pages { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 24px 0; }
.ca-table-wrap { overflow-x: auto; }
.ca-table { width: 100%; border-collapse: collapse; text-align: left; }
.ca-table th, .ca-table td { padding: 16px 12px; border-bottom: 1px solid var(--divider); }
.ca-table th { color: var(--muted); font-size: 13px; font-weight: 500; white-space: nowrap; }
.ca-table td small { display: block; color: var(--muted); margin-top: 4px; }
.ca-table td:first-child { min-width: 220px; }
.ca-table td:not(:first-child) { white-space: nowrap; }
.ca-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin: 20px 0 32px; }
.ca-card { text-decoration: none; color: inherit; }
.ca-card:hover { outline: 1px solid var(--orange); }