/* ============================================================================
   FILING CO. — customer portal stylesheet
   Layers on top of colors_and_type.css + tokens.css + app.css. Reuses the
   shared .card / .chip / .badge / .btn / .fee / .num vocabulary; adds the
   portal shell (sidebar + topbar nav), dashboard, business detail tabs,
   compliance, documents, RA mail, services, billing and notification panel.
   Calmer + denser than the marketing site — dashboard, not landing page.
   ============================================================================ */

/* ------------------------------------------------------------- App shell -- */
.pt { min-height: 100vh; background: var(--bg-1); color: var(--color-text); }
.pt--sidebar { display: grid; grid-template-columns: 248px 1fr; }
.pt__main { min-width: 0; display: flex; flex-direction: column; }

/* scrim behind notification panel */
.pt__scrim { position: fixed; inset: 0; z-index: 60; }

/* ------------------------------------------------------------ Sidebar nav -- */
.pnav { background: var(--color-surface); border-right: 1px solid var(--color-border); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; }
.pnav__brand { display: flex; align-items: center; padding: var(--space-6) var(--space-6) var(--space-5); }
.pnav__brand img { height: 26px; }
.pnav__list { list-style: none; margin: 0; padding: var(--space-2) var(--space-4); display: flex; flex-direction: column; gap: 2px; }
.pnav__item { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: var(--radius-md); color: var(--color-text-muted); text-decoration: none; font-size: var(--text-sm); font-weight: var(--weight-medium); cursor: pointer; border: none; background: none; width: 100%; text-align: left; font-family: inherit; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.pnav__item:hover { background: var(--color-surface-alt); color: var(--color-ink); }
.pnav__item.is-active { background: var(--color-primary-soft); color: var(--color-primary); font-weight: var(--weight-semibold); }
.pnav__item i { flex: none; }
.pnav__badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--radius-full); background: var(--color-error); color: #fff; font-size: var(--text-xs); font-weight: var(--weight-semibold); font-family: var(--font-mono); display: inline-flex; align-items: center; justify-content: center; }
.pnav__sect { font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: .05em; text-transform: uppercase; color: var(--color-text-subtle); padding: var(--space-5) 12px var(--space-2); }
.pnav__foot { margin-top: auto; padding: var(--space-4) var(--space-4) var(--space-6); }
.pnav__user { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-md); background: var(--color-surface-alt); border: 1px solid var(--color-border); }
.pnav__user-meta { min-width: 0; }
.pnav__user-name { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pnav__user-mail { font-size: var(--text-xs); color: var(--color-text-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.avatar { width: 34px; height: 34px; border-radius: var(--radius-full); background: var(--color-primary-soft); color: var(--color-primary); display: flex; align-items: center; justify-content: center; font-weight: var(--weight-semibold); font-size: var(--text-sm); flex: none; }
.avatar--lg { width: 44px; height: 44px; font-size: var(--text-base); }

/* ------------------------------------------------------------- Topbar -- */
.ptop { background: rgba(255,255,255,.86); backdrop-filter: blur(10px); border-bottom: 1px solid var(--color-border); position: sticky; top: 0; z-index: 50; }
.ptop__inner { display: flex; align-items: center; gap: var(--space-4); padding: 11px var(--space-8); max-width: 1180px; margin: 0 auto; width: 100%; }
.ptop__brand { display: none; }
.pt--topbar .ptop__brand { display: inline-flex; }
.pt--topbar .ptop__brand img { height: 26px; }
.ptop__links { display: none; gap: 4px; margin-right: auto; }
.pt--topbar .ptop__links { display: flex; }
.ptop__crumb { display: flex; align-items: center; gap: 8px; font-size: var(--text-sm); color: var(--color-text-subtle); margin-right: auto; min-width: 0; }
.ptop__crumb button, .ptop__crumb a { background: none; border: none; font: inherit; color: var(--color-text-muted); cursor: pointer; padding: 0; text-decoration: none; white-space: nowrap; }
.ptop__crumb button:hover, .ptop__crumb a:hover { color: var(--color-primary); }
.ptop__crumb-cur { color: var(--color-ink); font-weight: var(--weight-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ptop__right { display: flex; align-items: center; gap: var(--space-2); flex: none; }
.ptop__icon { position: relative; width: 38px; height: 38px; border-radius: var(--radius-md); border: 1px solid transparent; background: none; color: var(--color-text-muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.ptop__icon:hover { background: var(--color-surface-alt); color: var(--color-ink); }
.ptop__icon.is-on { background: var(--color-primary-soft); color: var(--color-primary); }
.ptop__dot { position: absolute; top: 7px; right: 8px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--radius-full); background: var(--color-error); color: #fff; font-size: 10px; font-weight: var(--weight-bold); font-family: var(--font-mono); display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--color-surface); }

/* content column */
.pt__content { flex: 1; max-width: 1180px; margin: 0 auto; width: 100%; padding: var(--space-8) var(--space-8) var(--space-16); }
.pt--topbar .pt__content { max-width: 1080px; }

/* page header */
.phead { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-5); margin-bottom: var(--space-6); flex-wrap: wrap; }
.phead__title { font-size: var(--text-3xl); line-height: var(--leading-tight); margin: 0; }
.phead__sub { font-size: var(--text-base); color: var(--color-text-muted); margin: 6px 0 0; }
.phead__actions { display: flex; gap: var(--space-3); align-items: center; }

/* ----------------------------------------------------------- Demo bar -- */
.demobar { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; background: var(--color-surface); border: 1px dashed var(--color-border-strong); border-radius: var(--radius-md); padding: 8px 10px; margin-bottom: var(--space-6); }
.demobar__lbl { font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--color-text-subtle); text-transform: uppercase; letter-spacing: .05em; display: inline-flex; align-items: center; gap: 6px; padding: 0 6px 0 2px; }
.demobar__group { display: inline-flex; gap: 3px; padding: 3px; background: var(--color-surface-alt); border-radius: var(--radius-sm); }
.demobar__group button { font: inherit; font-size: var(--text-xs); font-weight: var(--weight-medium); padding: 5px 11px; border: none; background: transparent; color: var(--color-text-muted); border-radius: 6px; cursor: pointer; min-height: 30px; white-space: nowrap; }
.demobar__group button.is-on { background: var(--color-surface); color: var(--color-ink); box-shadow: var(--shadow-sm); }
.demobar__sep { width: 1px; align-self: stretch; background: var(--color-border); margin: 2px 4px; }

/* --------------------------------------------------- Action-needed banner -- */
.actionbar { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-6); }
.actionrow { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5); border-radius: var(--radius-lg); border: 1px solid; }
.actionrow--overdue { background: var(--color-error-soft); border-color: color-mix(in oklab, var(--color-error) 30%, white); }
.actionrow--due-soon { background: var(--color-warning-soft); border-color: color-mix(in oklab, var(--color-warning) 32%, white); }
.actionrow__icon { flex: none; display: flex; }
.actionrow--overdue .actionrow__icon { color: var(--color-error); }
.actionrow--due-soon .actionrow__icon { color: var(--color-warning); }
.actionrow__body { flex: 1; min-width: 0; }
.actionrow__title { font-weight: var(--weight-semibold); color: var(--color-ink); font-size: var(--text-sm); }
.actionrow__title strong { font-weight: var(--weight-bold); }
.actionrow__sub { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: 2px; }
.actionrow__x { flex: none; width: 30px; height: 30px; border-radius: var(--radius-sm); border: none; background: transparent; color: var(--color-text-subtle); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.actionrow__x:hover { background: rgba(0,0,0,.05); color: var(--color-ink); }

/* status pill tones (extends .badge / .chip) */
.spill { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-xs); font-weight: var(--weight-semibold); padding: 4px 10px; border-radius: var(--radius-full); white-space: nowrap; }
.spill__dot { width: 7px; height: 7px; border-radius: var(--radius-full); background: currentColor; flex: none; }
.spill--active { background: var(--color-success-soft); color: var(--color-success); }
.spill--forming { background: var(--color-primary-soft); color: var(--color-primary); }
.spill--action { background: var(--color-error-soft); color: var(--color-error); }
.spill--upcoming { background: var(--color-surface-alt); color: var(--color-text-muted); }
.spill--due-soon { background: var(--color-warning-soft); color: var(--color-warning); }
.spill--overdue { background: var(--color-error-soft); color: var(--color-error); }
.spill--filed { background: var(--color-success-soft); color: var(--color-success); }

/* ------------------------------------------------------------ Dashboard -- */
.bizlist { display: flex; flex-direction: column; gap: var(--space-3); }
.bizgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }

/* BusinessCard — list row variant */
.bizcard { display: grid; grid-template-columns: 44px 1fr auto 20px; gap: var(--space-4); align-items: center; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--shadow-sm); text-align: left; width: 100%; cursor: pointer; font-family: inherit; transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur-fast) var(--ease); }
.bizcard:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.bizcard--action { border-color: color-mix(in oklab, var(--color-error) 26%, white); }
.bizcard__mark { width: 44px; height: 44px; border-radius: var(--radius-md); background: var(--color-primary-soft); color: var(--color-primary); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-weight: var(--weight-bold); font-size: var(--text-sm); flex: none; }
.bizcard__main { min-width: 0; }
.bizcard__top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bizcard__name { font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--text-lg); color: var(--color-ink); letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.bizcard__meta { display: flex; align-items: center; gap: var(--space-4); margin-top: 5px; font-size: var(--text-sm); color: var(--color-text-muted); flex-wrap: wrap; }
.bizcard__meta span { display: inline-flex; align-items: center; gap: 6px; }
.bizcard__meta i { color: var(--color-text-subtle); }
.bizcard__ein { font-family: var(--font-mono); font-size: var(--text-xs); }
.bizcard__right { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; flex: none; }
.bizcard__deadline { text-align: right; font-size: var(--text-sm); }
.bizcard__deadline-lbl { font-size: var(--text-xs); color: var(--color-text-subtle); }
.bizcard__deadline-val { font-weight: var(--weight-medium); color: var(--color-ink); display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
.bizcard__actions { display: flex; gap: 8px; }
.bizcard__chev { color: var(--color-text-subtle); flex: none; }

/* grid variant tweaks */
.bizgrid .bizcard { grid-template-columns: 1fr; align-items: start; }
.bizgrid .bizcard__right { flex-direction: row; align-items: center; justify-content: space-between; width: 100%; border-top: 1px solid var(--color-border); padding-top: var(--space-4); margin-top: var(--space-1); }
.bizgrid .bizcard__deadline { text-align: left; }
.bizgrid .bizcard__deadline-val { justify-content: flex-start; }
.bizgrid .bizcard__chev { display: none; }

/* "form another" card */
.bizadd { display: flex; align-items: center; gap: var(--space-4); justify-content: center; background: var(--color-surface); border: 1.5px dashed var(--color-border-strong); border-radius: var(--radius-lg); padding: var(--space-5); color: var(--color-primary); font-weight: var(--weight-semibold); font-size: var(--text-sm); text-decoration: none; cursor: pointer; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.bizadd:hover { background: var(--color-primary-soft); border-color: var(--color-primary); }

/* dashboard summary strip */
.summary-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin-bottom: var(--space-6); }
.sumcard { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--shadow-sm); display: flex; align-items: center; gap: var(--space-4); }
.sumcard__icon { width: 42px; height: 42px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; flex: none; }
.sumcard__icon--blue { background: var(--color-primary-soft); color: var(--color-primary); }
.sumcard__icon--gold { background: var(--color-accent-soft); color: var(--color-accent-hover); }
.sumcard__icon--green { background: var(--color-success-soft); color: var(--color-success); }
.sumcard__val { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: var(--weight-semibold); color: var(--color-ink); line-height: 1; }
.sumcard__lbl { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: 4px; }

/* ----------------------------------------------------------- Section head -- */
.psec { margin-top: var(--space-8); }
.psec__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); }
.psec__title { font-size: var(--text-lg); font-family: var(--font-sans); font-weight: var(--weight-semibold); color: var(--color-ink); margin: 0; }
.psec__link { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-primary); background: none; border: none; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }

/* ------------------------------------------------------- Business detail -- */
.bizhead { display: flex; align-items: flex-start; gap: var(--space-5); margin-bottom: var(--space-6); flex-wrap: wrap; }
.bizhead__mark { width: 56px; height: 56px; border-radius: var(--radius-lg); background: var(--color-primary-soft); color: var(--color-primary); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-weight: var(--weight-bold); font-size: var(--text-lg); flex: none; }
.bizhead__main { flex: 1; min-width: 0; }
.bizhead__name { font-size: var(--text-3xl); line-height: 1.1; margin: 0 0 8px; }
.bizhead__facts { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; font-size: var(--text-sm); color: var(--color-text-muted); }
.bizhead__facts span { display: inline-flex; align-items: center; gap: 7px; }
.bizhead__facts i { color: var(--color-text-subtle); }
.bizhead__ein { font-family: var(--font-mono); }
.bizhead__actions { display: flex; gap: var(--space-3); flex: none; }

/* tabs */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--color-border); margin-bottom: var(--space-6); overflow-x: auto; }
.tab { position: relative; padding: 12px 16px; border: none; background: none; font: inherit; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text-muted); cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; transition: color var(--dur) var(--ease); }
.tab:hover { color: var(--color-ink); }
.tab.is-active { color: var(--color-primary); font-weight: var(--weight-semibold); }
.tab.is-active::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; background: var(--color-primary); border-radius: 2px; }
.tab__count { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-text-subtle); background: var(--color-surface-alt); padding: 1px 7px; border-radius: var(--radius-full); }
.tab__dot { width: 7px; height: 7px; border-radius: var(--radius-full); background: var(--color-error); }

.detail-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--space-6); align-items: start; }
.stack { display: flex; flex-direction: column; gap: var(--space-6); min-width: 0; }

/* key facts list */
.facts { list-style: none; margin: 0; padding: 0; }
.facts li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: 11px 0; border-bottom: 1px solid var(--color-border); font-size: var(--text-sm); }
.facts li:last-child { border-bottom: none; }
.facts__k { color: var(--color-text-muted); display: inline-flex; align-items: center; gap: 8px; }
.facts__k i { color: var(--color-text-subtle); }
.facts__v { font-weight: var(--weight-medium); color: var(--color-ink); text-align: right; }
.facts__v.num { font-family: var(--font-mono); }

/* next-deadline highlight card */
.nextdl { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-5); border-radius: var(--radius-lg); border: 1px solid var(--color-border); background: var(--color-surface); box-shadow: var(--shadow-sm); }
.nextdl__icon { width: 44px; height: 44px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; flex: none; background: var(--color-primary-soft); color: var(--color-primary); }
.nextdl--overdue { border-color: color-mix(in oklab, var(--color-error) 28%, white); background: var(--color-error-soft); }
.nextdl--overdue .nextdl__icon { background: #fff; color: var(--color-error); }
.nextdl--due-soon { border-color: color-mix(in oklab, var(--color-warning) 30%, white); background: var(--color-warning-soft); }
.nextdl--due-soon .nextdl__icon { background: #fff; color: var(--color-warning); }
.nextdl__main { flex: 1; min-width: 0; }
.nextdl__lbl { font-size: var(--text-xs); color: var(--color-text-subtle); text-transform: uppercase; letter-spacing: .04em; font-weight: var(--weight-semibold); }
.nextdl__type { font-weight: var(--weight-semibold); color: var(--color-ink); font-size: var(--text-base); margin: 2px 0; }
.nextdl__when { font-size: var(--text-sm); color: var(--color-text-muted); }

/* ------------------------------------------------- ComplianceTimeline -- */
.timeline-c { display: flex; flex-direction: column; gap: var(--space-3); }
.deadline { display: grid; grid-template-columns: 44px 1fr auto; gap: var(--space-4); align-items: center; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); box-shadow: var(--shadow-sm); }
.deadline--overdue { border-color: color-mix(in oklab, var(--color-error) 26%, white); }
.deadline--due-soon { border-color: color-mix(in oklab, var(--color-warning) 28%, white); }
.deadline--filed { opacity: .72; }
.deadline__icon { width: 44px; height: 44px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; flex: none; background: var(--color-surface-alt); color: var(--color-text-muted); }
.deadline--overdue .deadline__icon { background: var(--color-error-soft); color: var(--color-error); }
.deadline--due-soon .deadline__icon { background: var(--color-warning-soft); color: var(--color-warning); }
.deadline--filed .deadline__icon { background: var(--color-success-soft); color: var(--color-success); }
.deadline__main { min-width: 0; }
.deadline__top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.deadline__type { font-weight: var(--weight-semibold); color: var(--color-ink); font-size: var(--text-base); }
.deadline__sub { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: 3px; display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.deadline__sub i { color: var(--color-text-subtle); }
.deadline__biz { display: inline-flex; align-items: center; gap: 6px; }
.deadline__note { font-size: var(--text-xs); color: var(--color-error); margin-top: 4px; }
.deadline__right { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex: none; min-width: 104px; }
.deadline__due { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-ink); font-family: var(--font-mono); white-space: nowrap; }
.deadline--overdue .deadline__due { color: var(--color-error); }

/* ------------------------------------------------------------- Documents -- */
.doclist { display: flex; flex-direction: column; }
.docfilter { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: var(--space-4); align-items: center; }
.docfilter__chip { font: inherit; font-size: var(--text-sm); font-weight: var(--weight-medium); padding: 7px 14px; border-radius: var(--radius-full); border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text-muted); cursor: pointer; min-height: 36px; }
.docfilter__chip.is-on { background: var(--color-ink); border-color: var(--color-ink); color: #fff; }
.docfilter__search { margin-left: auto; display: flex; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); min-height: 38px; min-width: 220px; }
.docfilter__search input { border: none; background: none; font: inherit; font-size: var(--text-sm); padding: 8px 0; flex: 1; min-width: 0; color: var(--color-ink); }
.docfilter__search input:focus { outline: none; }
.docfilter__search i { color: var(--color-text-subtle); flex: none; }

.docscroll { max-height: 560px; overflow-y: auto; margin: 0 calc(var(--space-2) * -1); padding: 0 var(--space-2); }
.docrow { display: grid; grid-template-columns: 40px 1fr auto auto; gap: var(--space-4); align-items: center; padding: var(--space-3) var(--space-2); border-bottom: 1px solid var(--color-border); }
.docrow:last-child { border-bottom: none; }
.docrow:hover { background: var(--color-surface-alt); border-radius: var(--radius-sm); }
.docrow__icon { width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--color-primary-soft); color: var(--color-primary); display: flex; align-items: center; justify-content: center; flex: none; }
.docrow__main { min-width: 0; }
.docrow__name { font-weight: var(--weight-medium); color: var(--color-ink); font-size: var(--text-sm); display: flex; align-items: center; gap: 8px; }
.docrow__meta { font-size: var(--text-xs); color: var(--color-text-subtle); margin-top: 2px; font-family: var(--font-mono); }
.docrow__cat { font-size: var(--text-xs); color: var(--color-text-muted); background: var(--color-surface-alt); padding: 3px 9px; border-radius: var(--radius-full); white-space: nowrap; }
.docrow__btns { display: flex; gap: 6px; flex: none; }
.iconbtn { width: 36px; height: 36px; border-radius: var(--radius-sm); border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.iconbtn:hover { background: var(--color-primary-soft); color: var(--color-primary); border-color: transparent; }

/* doc preview modal */
.modal-scrim { position: fixed; inset: 0; background: rgba(15,23,42,.5); backdrop-filter: blur(2px); z-index: 100; display: flex; align-items: center; justify-content: center; padding: var(--space-6); animation: fadeIn var(--dur) var(--ease); }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal { background: var(--color-surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); width: 100%; max-width: 720px; max-height: 88vh; display: flex; flex-direction: column; overflow: hidden; animation: popIn var(--dur) var(--ease-out); }
@keyframes popIn { from { transform: translateY(12px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }
.modal__head { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--color-border); }
.modal__head-main { flex: 1; min-width: 0; }
.modal__title { font-family: var(--font-sans); font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--color-ink); }
.modal__sub { font-size: var(--text-xs); color: var(--color-text-subtle); font-family: var(--font-mono); margin-top: 2px; }
.modal__x { width: 36px; height: 36px; border-radius: var(--radius-sm); border: none; background: var(--color-surface-alt); color: var(--color-text-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.modal__x:hover { color: var(--color-ink); }
.modal__body { padding: var(--space-6); overflow-y: auto; background: var(--color-surface-alt); }
.docpaper { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); padding: var(--space-10) var(--space-10); max-width: 540px; margin: 0 auto; min-height: 460px; }
.docpaper__seal { display: flex; align-items: center; gap: 10px; padding-bottom: var(--space-5); border-bottom: 2px solid var(--color-ink); margin-bottom: var(--space-6); }
.docpaper__seal-mark { width: 40px; height: 40px; border-radius: var(--radius-full); border: 2px solid var(--color-accent); color: var(--color-accent-hover); display: flex; align-items: center; justify-content: center; flex: none; }
.docpaper h3 { font-family: var(--font-display); font-size: var(--text-xl); margin: 0; }
.docpaper__org { font-size: var(--text-xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .08em; }
.docpaper__line { height: 11px; background: var(--color-surface-alt); border-radius: 3px; margin: 13px 0; }
.docpaper__line--short { width: 55%; }
.docpaper__line--mid { width: 78%; }
.modal__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) var(--space-6); border-top: 1px solid var(--color-border); }
.modal__foot-note { font-size: var(--text-xs); color: var(--color-text-subtle); display: inline-flex; align-items: center; gap: 7px; }

/* ----------------------------------------------------- RegisteredAgentInbox */
.inbox { display: flex; flex-direction: column; }
.mailitem { display: grid; grid-template-columns: 10px 40px 1fr auto; gap: var(--space-3); align-items: center; padding: var(--space-4) var(--space-2); border-bottom: 1px solid var(--color-border); cursor: pointer; text-align: left; background: none; border-left: none; border-right: none; border-top: none; font-family: inherit; width: 100%; transition: background var(--dur) var(--ease); }
.mailitem:hover { background: var(--color-surface-alt); }
.mailitem:last-child { border-bottom: none; }
.mailitem__dot { width: 8px; height: 8px; border-radius: var(--radius-full); flex: none; }
.mailitem--unread .mailitem__dot { background: var(--color-primary); }
.mailitem--important .mailitem__dot { background: var(--color-error); }
.mailitem__icon { width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--color-surface-alt); color: var(--color-text-muted); display: flex; align-items: center; justify-content: center; flex: none; }
.mailitem--unread .mailitem__icon { background: var(--color-primary-soft); color: var(--color-primary); }
.mailitem__main { min-width: 0; }
.mailitem__sender { font-size: var(--text-sm); color: var(--color-ink); display: flex; align-items: center; gap: 8px; }
.mailitem--unread .mailitem__sender { font-weight: var(--weight-semibold); }
.mailitem__subject { font-size: var(--text-sm); color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.mailitem__date { font-size: var(--text-xs); color: var(--color-text-subtle); font-family: var(--font-mono); white-space: nowrap; flex: none; }

/* ----------------------------------------------------------- Services -- */
.svcgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
.svctile { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--shadow-sm); text-align: left; cursor: pointer; font-family: inherit; width: 100%; transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur-fast) var(--ease); }
.svctile:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: color-mix(in oklab, var(--color-primary) 30%, white); }
.svctile__icon { width: 42px; height: 42px; border-radius: var(--radius-md); background: var(--color-primary-soft); color: var(--color-primary); display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-2); }
.svctile__name { font-weight: var(--weight-semibold); color: var(--color-ink); font-size: var(--text-base); display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); width: 100%; }
.svctile__price { font-family: var(--font-mono); color: var(--color-primary); font-weight: var(--weight-semibold); white-space: nowrap; }
.svctile__price small { color: var(--color-text-subtle); font-weight: var(--weight-regular); }
.svctile__desc { font-size: var(--text-sm); color: var(--color-text-muted); }
.svctile__cta { margin-top: auto; padding-top: var(--space-3); color: var(--color-primary); font-size: var(--text-sm); font-weight: var(--weight-semibold); display: inline-flex; align-items: center; gap: 6px; }

/* ---------------------------------------------------------- Order flow -- */
.order { display: grid; grid-template-columns: 1fr 360px; gap: var(--space-8); align-items: start; max-width: 980px; margin: 0 auto; }
.order__main { min-width: 0; }
.order__aside { position: sticky; top: 84px; display: flex; flex-direction: column; gap: var(--space-4); }
.order__summary { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: var(--space-4); }
.order__steps { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-6); }
.order__step { display: inline-flex; align-items: center; gap: 8px; font-size: var(--text-sm); color: var(--color-text-subtle); }
.order__step.is-on { color: var(--color-ink); font-weight: var(--weight-semibold); }
.order__step.is-done { color: var(--color-success); }
.order__step-n { width: 24px; height: 24px; border-radius: var(--radius-full); border: 1.5px solid var(--color-border); display: inline-flex; align-items: center; justify-content: center; font-size: var(--text-xs); font-family: var(--font-mono); font-weight: var(--weight-semibold); flex: none; }
.order__step.is-on .order__step-n { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.order__step.is-done .order__step-n { background: var(--color-success); border-color: var(--color-success); color: #fff; }
.order__step-sep { flex: 1; height: 1.5px; background: var(--color-border); border-radius: 2px; min-width: 16px; }

.optrow { display: flex; gap: var(--space-4); align-items: flex-start; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); cursor: pointer; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); margin-bottom: var(--space-3); text-align: left; width: 100%; font-family: inherit; }
.optrow:hover { box-shadow: var(--shadow-sm); }
.optrow--on { border-color: var(--color-primary); background: var(--color-primary-soft); }
.optrow__check { flex: none; width: 22px; height: 22px; border-radius: var(--radius-sm); border: 1.5px solid var(--color-border-strong); display: flex; align-items: center; justify-content: center; margin-top: 1px; background: var(--color-surface); }
.optrow--on .optrow__check { background: var(--color-primary); border-color: var(--color-primary); }
.optrow__main { flex: 1; min-width: 0; }
.optrow__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.optrow__name { font-weight: var(--weight-semibold); color: var(--color-ink); }
.optrow__price { font-family: var(--font-mono); color: var(--color-ink); white-space: nowrap; }
.optrow__desc { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: 4px; }

/* card field (stripe stub) */
.payfield { display: flex; flex-direction: column; gap: 7px; margin-bottom: var(--space-4); }
.payfield__lbl { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-ink); }
.payfield__box { display: flex; align-items: center; gap: 10px; padding: 0 14px; min-height: var(--tap-min); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text-subtle); font-size: var(--text-base); }
.payfield__box .num { color: var(--color-ink); margin-left: auto; }
.payrow { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }

/* ----------------------------------------------------------- Account -- */
.settings { display: flex; flex-direction: column; gap: var(--space-6); max-width: 820px; }
.setsec { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.setsec__head { padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--color-border); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.setsec__title { font-family: var(--font-sans); font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--color-ink); margin: 0; }
.setsec__sub { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: 2px; }
.setsec__body { padding: var(--space-6); }
.setsec__body--flush { padding: 0; }

.fieldgrid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.fieldgrid .field--full { grid-column: 1 / -1; }

/* payment method rows */
.paymethod { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--color-border); }
.paymethod:last-child { border-bottom: none; }
.paymethod__brand { width: 46px; height: 32px; border-radius: 6px; background: var(--color-ink); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: var(--weight-bold); letter-spacing: .03em; flex: none; }
.paymethod__num { font-family: var(--font-mono); color: var(--color-ink); font-weight: var(--weight-medium); white-space: nowrap; }
.paymethod > div { min-width: 0; }
.paymethod__exp { font-size: var(--text-xs); color: var(--color-text-subtle); font-family: var(--font-mono); margin-top: 2px; }
.paymethod__right { margin-left: auto; display: flex; align-items: center; gap: var(--space-3); }

/* subscription cards */
.subcard { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--color-border); }
.subcard:last-child { border-bottom: none; }
.subcard__icon { width: 42px; height: 42px; border-radius: var(--radius-md); background: var(--color-accent-soft); color: var(--color-accent-hover); display: flex; align-items: center; justify-content: center; flex: none; }
.subcard__main { flex: 1; min-width: 0; }
.subcard__name { font-weight: var(--weight-semibold); color: var(--color-ink); font-size: var(--text-sm); }
.subcard__scope { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: 2px; }
.subcard__price { text-align: right; flex: none; }
.subcard__amt { font-family: var(--font-mono); font-weight: var(--weight-semibold); color: var(--color-ink); }
.subcard__renew { font-size: var(--text-xs); color: var(--color-text-subtle); margin-top: 2px; }

/* invoice table */
.invtable { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.invtable th { text-align: left; padding: 11px var(--space-6); font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--color-text-subtle); text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--color-border); background: var(--color-surface-alt); }
.invtable td { padding: 13px var(--space-6); border-bottom: 1px solid var(--color-border); color: var(--color-text); }
.invtable tr:last-child td { border-bottom: none; }
.invtable__id { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-text-muted); }
.invtable__amt { font-family: var(--font-mono); font-weight: var(--weight-medium); color: var(--color-ink); text-align: right; }
.invtable__ent { color: var(--color-text-muted); }
.invtable th.r, .invtable td.r { text-align: right; }

/* ------------------------------------------------------- Empty / states -- */
.empty { max-width: 540px; margin: var(--space-16) auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-4); }
.empty__mark { width: 76px; height: 76px; border-radius: var(--radius-full); background: var(--color-primary-soft); color: var(--color-primary); display: flex; align-items: center; justify-content: center; }
.empty--caught .empty__mark { background: var(--color-success-soft); color: var(--color-success); }
.empty__title { font-size: var(--text-2xl); margin: 0; }
.empty__text { font-size: var(--text-base); color: var(--color-text-muted); max-width: 42ch; margin: 0; }
.empty--sm { margin: var(--space-10) auto; gap: var(--space-3); }
.empty--sm .empty__mark { width: 56px; height: 56px; }
.empty--sm .empty__title { font-size: var(--text-lg); font-family: var(--font-sans); }

/* error state */
.errstate { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-4); max-width: 460px; margin: var(--space-16) auto; }
.errstate__mark { width: 64px; height: 64px; border-radius: var(--radius-full); background: var(--color-error-soft); color: var(--color-error); display: flex; align-items: center; justify-content: center; }

/* sign-in */
.signin { min-height: 100vh; display: grid; grid-template-columns: 1fr; place-items: center; background: var(--bg-1); padding: var(--space-8); }
.authcard { width: 100%; max-width: 412px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); box-shadow: var(--shadow-md); padding: var(--space-10) var(--space-8) var(--space-8); }
.authcard__brand { display: flex; justify-content: center; margin-bottom: var(--space-8); }
.authcard__brand img { height: 30px; }
.authcard h1 { font-size: var(--text-2xl); text-align: center; margin: 0 0 6px; }
.authcard__sub { font-size: var(--text-sm); color: var(--color-text-muted); text-align: center; margin: 0 0 var(--space-8); }
.authcard .field { margin-bottom: var(--space-4); }
.authcard__row { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-6); font-size: var(--text-sm); }
.authcard__link { color: var(--color-primary); text-decoration: none; font-weight: var(--weight-medium); }
.authcard__or { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-5) 0; color: var(--color-text-subtle); font-size: var(--text-xs); }
.authcard__or::before, .authcard__or::after { content: ""; flex: 1; height: 1px; background: var(--color-border); }
.authcard__foot { text-align: center; font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-6); }
.signin__disc { max-width: 412px; margin: var(--space-5) auto 0; }

/* checkrow reused */
.remember { display: inline-flex; align-items: center; gap: 8px; color: var(--color-text-muted); }
.remember input { width: 16px; height: 16px; accent-color: var(--color-primary); }

/* skeleton helpers reuse .sk from app.css */
.sk-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--shadow-sm); }

/* responsive */
@media (max-width: 1080px) {
  .detail-grid, .order { grid-template-columns: 1fr; }
  .order__aside { position: static; }
}
@media (max-width: 860px) {
  .pt--sidebar { grid-template-columns: 1fr; }
  .pnav { position: fixed; bottom: 0; top: auto; left: 0; right: 0; height: auto; flex-direction: row; border-right: none; border-top: 1px solid var(--color-border); z-index: 50; }
  .pnav__brand, .pnav__sect, .pnav__foot { display: none; }
  .pnav__list { flex-direction: row; flex: 1; padding: 6px; justify-content: space-around; }
  .pnav__item { flex-direction: column; gap: 3px; font-size: 10px; padding: 6px 4px; text-align: center; }
  .pnav__badge { position: absolute; top: 2px; right: 18px; margin: 0; }
  .pt__content { padding: var(--space-6) var(--space-5) calc(var(--space-16) + 56px); }
  .summary-strip, .bizgrid, .svcgrid, .fieldgrid, .payrow { grid-template-columns: 1fr; }
  .bizcard { grid-template-columns: 40px 1fr; }
  .bizcard__right { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; width: 100%; border-top: 1px solid var(--color-border); padding-top: var(--space-3); }
  .bizcard__chev { display: none; }
}

/* ============================================================================
   NOTIFICATION PANEL
   The design builds this with inline styles inside NotificationPanel; server-
   rendered markup has nowhere to put those, so they become classes here.
   Values are copied from lib/portal-chrome.jsx unchanged.
   ============================================================================ */

.notifpanel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 360px;
  z-index: 70;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.notifpanel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--color-border);
}

.notifpanel__head strong { font-size: var(--text-base); color: var(--color-ink); }

/* button_to puts the class on the <button> and wraps it in a form, so both the
   form's own layout and the button's chrome have to be flattened. */
.notifpanel__head form { margin: 0; }

.notifpanel__readall {
  background: none;
  border: none;
  color: var(--color-primary);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}

.notifpanel__readall:hover { color: var(--color-primary-hover); }

.notifpanel__list { max-height: 400px; overflow-y: auto; }

.notifrow {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  gap: 12px;
  align-items: start;
  width: 100%;
  padding: 13px 18px;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
}

.notifrow.is-unread { background: var(--color-primary-soft); }

.notifrow__icon {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface);
  flex: none;
}

.notifrow__icon--error   { color: var(--color-error); }
.notifrow__icon--warning { color: var(--color-warning); }
.notifrow__icon--primary { color: var(--color-primary); }
.notifrow__icon--success { color: var(--color-success); }

.notifrow__body { min-width: 0; }
.notifrow__title { display: block; font-size: var(--text-sm); font-weight: 600; color: var(--color-ink); }
.notifrow__sub   { display: block; font-size: var(--text-xs); color: var(--color-text-muted); margin-top: 2px; }
.notifrow__time  { display: block; font-size: var(--text-xs); color: var(--color-text-subtle); margin-top: 3px; }
.notifrow__dot   { width: 8px; height: 8px; background: var(--color-primary); margin-top: 6px; }