:root {
 --bp-narrow: 720px;
}

/* Design tokens. The shadcn-equivalent semantic names (--primary,
 * --card, --border, --ring, --radius, ...) are reproduced by hand so the
 * UI kit in ui/*.mjs can imitate shadcn without importing Tailwind. The
 * existing color-mode switch (data-color-mode + body classes) is kept.
 * --primary / --accent are overridden at runtime by the shell with the
 * brand colors from GET /api/theme. */
body {
 --background: #ffffff;
 --foreground: #101729;
 --card: #ffffff;
 --card-foreground: #101729;
 --muted: #f9fafc;
 --muted-foreground: #677489;
 --accent: #f1f5f9;
 --accent-foreground: #0f172a;
 --secondary: #f1f5f9;
 --secondary-foreground: #0f172a;
 --primary: #475569;
 --primary-foreground: #ffffff;
 --destructive: #dc2626;
 --destructive-foreground: #ffffff;
 --message-error: #dc2626;
 --message-warning: #d97706;
 --message-alert: #2563eb;
 --message-info: #677489;
 --message-success: #16a34a;
 --border: #e2e8f0;
 --input: #cbd5e1;
 --ring: #94a3b8;
 --radius-sm: 6px;
 --radius-md: 10px;
 --radius-lg: 14px;

 /* legacy aliases kept for older dated layers' parity */
 --background-color: var(--background);
 --text-color: var(--foreground);
 --heading-color: var(--foreground);
 --subheading-color: var(
  --muted-foreground
 );
 --content-background-color: var(
  --muted
 );
 --shell-surface: #f1f3f5;

 margin: 0;
 overflow-x: clip;
 background-color: var(--background);
 color: var(--foreground);
 font-family:
  ui-sans-serif,
  system-ui,
  -apple-system,
  'Segoe UI',
  Roboto,
  Helvetica,
  Arial,
  sans-serif;
 font-feature-settings:
  'rlig' 1,
  'calt' 1;
 -webkit-font-smoothing: antialiased;
}

body[data-color-mode='dark'],
body.color-mode-dark {
 --background: #000000;
 --foreground: #efe8d6;
 --card: #0b0a08;
 --card-foreground: #efe8d6;
 --muted: #060503;
 --muted-foreground: #988b76;
 --accent: #16140f;
 --accent-foreground: #efe8d6;
 --secondary: #16140f;
 --secondary-foreground: #efe8d6;
 --primary: #e2dcc7;
 --primary-foreground: #101729;
 --destructive: #ef4444;
 --destructive-foreground: #0b0a08;
 --border: #26241d;
 --input: #2f2c23;
 --ring: #6b6557;
 --shell-surface: #0e0c0a;
}

@media (prefers-color-scheme: dark) {
 body[data-color-mode='system'],
 body.color-mode-system {
  --background: #000000;
  --foreground: #efe8d6;
  --card: #0b0a08;
  --card-foreground: #efe8d6;
  --muted: #060503;
  --muted-foreground: #988b76;
  --accent: #16140f;
  --accent-foreground: #efe8d6;
  --secondary: #16140f;
  --secondary-foreground: #efe8d6;
  --primary: #e2dcc7;
  --primary-foreground: #101729;
  --destructive: #ef4444;
  --destructive-foreground: #0b0a08;
  --border: #26241d;
  --input: #2f2c23;
  --ring: #6b6557;
  --shell-surface: #0e0c0a;
 }
}

* {
 box-sizing: border-box;
}

h1,
h2,
h3 {
 color: var(--foreground);
 margin: 0;
}

h2 {
 color: var(--muted-foreground);
}

a {
 color: inherit;
}

/* button (imitates shadcn Button) */
.btn {
 display: inline-flex;
 flex-shrink: 0;
 align-items: center;
 justify-content: center;
 gap: 8px;
 height: 36px;
 padding: 0 16px;
 border: 1px solid transparent;
 border-radius: var(--radius-md);
 background: var(--primary);
 color: var(--primary-foreground);
 font: inherit;
 font-size: 14px;
 font-weight: 500;
 line-height: 1;
 white-space: nowrap;
 cursor: pointer;
 transition:
  background-color 0.15s,
  color 0.15s,
  border-color 0.15s,
  box-shadow 0.15s;
}

.btn:focus-visible {
 outline: none;
 box-shadow: 0 0 0 3px
  color-mix(
   in srgb,
   var(--ring) 50%,
   transparent
  );
}

.btn:disabled {
 opacity: 0.5;
 pointer-events: none;
}

.btn-spinner {
 width: 14px;
 height: 14px;
 border: 2px solid currentColor;
 border-right-color: transparent;
 border-radius: 999px;
 flex-shrink: 0;
 animation: btn-spin 0.7s linear
  infinite;
}

.btn[data-loading='false']
 .btn-spinner {
 display: none;
}

.btn-content {
 display: inline-flex;
 align-items: center;
 gap: 8px;
}

@keyframes btn-spin {
 to {
  transform: rotate(360deg);
 }
}

.btn svg {
 width: 16px;
 height: 16px;
 flex-shrink: 0;
}

.btn-outline {
 background: var(--background);
 border-color: var(--border);
 color: var(--foreground);
}

.btn-outline:hover {
 background: var(--accent);
 color: var(--accent-foreground);
}

.btn-ghost {
 background: transparent;
 color: var(--foreground);
}

.btn-ghost:hover {
 background: var(--accent);
 color: var(--accent-foreground);
}

.btn-secondary {
 background: var(--secondary);
 color: var(--secondary-foreground);
}

.btn-destructive {
 background: var(--destructive);
 color: var(--destructive-foreground);
}

.btn-link {
 background: transparent;
 color: var(--primary);
 text-decoration-line: underline;
 text-underline-offset: 4px;
 height: auto;
 padding: 0;
}

.btn-default:hover {
 background: color-mix(
  in srgb,
  var(--primary) 90%,
  black
 );
}

.btn-sm {
 height: 32px;
 padding: 0 12px;
 font-size: 13px;
}

.btn-lg {
 height: 40px;
 padding: 0 24px;
}

.btn-icon {
 width: 36px;
 height: 36px;
 padding: 0;
}

.btn-block {
 width: 100%;
}

.btn-start {
 justify-content: flex-start;
}

/* card */
.card {
 display: flex;
 flex-direction: column;
 min-width: 0;
 gap: 24px;
 padding: 24px 0;
 border: 1px solid var(--border);
 border-radius: var(--radius-lg);
 background: var(--card);
 color: var(--card-foreground);
 box-shadow: 0 1px 2px
  rgba(16, 23, 41, 0.05);
}

.card-header {
 display: flex;
 flex-direction: column;
 gap: 6px;
 padding: 0 24px;
}

.card-title {
 font-weight: 600;
 line-height: 1.1;
}

.card-description {
 font-size: 14px;
 color: var(--muted-foreground);
}

.card-content {
 min-width: 0;
 padding: 0 24px;
}

.card-footer {
 display: flex;
 align-items: center;
 padding: 0 24px;
}

/* badge */
.badge {
 display: inline-flex;
 width: fit-content;
 flex-shrink: 0;
 align-items: center;
 justify-content: center;
 gap: 4px;
 padding: 2px 8px;
 border: 1px solid transparent;
 border-radius: 9999px;
 background: var(--primary);
 color: var(--primary-foreground);
 font-size: 12px;
 font-weight: 500;
 white-space: nowrap;
}

.badge-secondary {
 background: var(--secondary);
 color: var(--secondary-foreground);
}

.badge-outline {
 background: transparent;
 border-color: var(--border);
 color: var(--foreground);
}

.badge-destructive {
 background: var(--destructive);
 color: var(--destructive-foreground);
}

/* input / textarea / select / label */
.input,
.textarea,
select,
input,
textarea {
 width: 100%;
 padding: 9px 12px;
 background: var(--background);
 border: 1px solid var(--input);
 border-radius: var(--radius-md);
 color: var(--foreground);
 font: inherit;
 font-size: 14px;
 box-sizing: border-box;
}

.textarea,
textarea {
 min-height: 80px;
 resize: vertical;
}

/* Color inputs ignore line-height, so they render shorter than text inputs.
 * Pin them to the same total height: content (1lh) + padding (18px) + border
 * (2px), matching a default text input. */
input[type='color'] {
 height: calc(1lh + 20px);
 padding: 4px;
 cursor: pointer;
}

.input:focus-visible,
.textarea:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible {
 outline: none;
 border-color: var(--ring);
 box-shadow: 0 0 0 3px
  color-mix(
   in srgb,
   var(--ring) 40%,
   transparent
  );
}

/* password input with a reveal/hide toggle pinned inside the right
 * edge. Pads the input so typed text never slides under the icon. */
.password-field {
 position: relative;
 display: block;
 width: 100%;
}

.password-field > input {
 padding-right: 40px;
}

.password-field__toggle {
 position: absolute;
 inset-block: 0;
 right: 0;
 width: 38px;
 padding: 0;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 background: transparent;
 border: 0;
 color: var(--muted-foreground);
 cursor: pointer;
 border-radius: var(--radius-md);
}

.password-field__toggle:hover {
 color: var(--foreground);
}

.password-field__toggle:focus-visible {
 outline: 2px solid var(--ring);
 outline-offset: -2px;
 color: var(--foreground);
}

.label {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 font-size: 14px;
 font-weight: 500;
 color: var(--foreground);
}

/* separator */
.separator {
 flex-shrink: 0;
 background: var(--border);
 border: 0;
}

.separator[data-orientation='horizontal'] {
 height: 1px;
 width: 100%;
 margin: 0;
}

.separator[data-orientation='vertical'] {
 width: 1px;
 align-self: stretch;
}

/* tabs */
.tabs {
 display: flex;
 flex-direction: column;
 gap: 12px;
}

.tabs-list {
 display: inline-flex;
 gap: 4px;
 padding: 4px;
 width: fit-content;
 border-radius: var(--radius-md);
 background: var(--muted);
}

.tab-trigger {
 padding: 6px 12px;
 border: 0;
 border-radius: var(--radius-sm);
 background: transparent;
 color: var(--muted-foreground);
 font: inherit;
 font-size: 13px;
 font-weight: 500;
 cursor: pointer;
}

.tab-trigger.active {
 background: var(--background);
 color: var(--foreground);
 box-shadow: 0 1px 2px
  rgba(16, 23, 41, 0.08);
}

.tab-content {
 display: none;
}

.tab-content.active {
 display: block;
}

/* dialog */
.dialog-overlay {
 position: fixed;
 inset: 0;
 display: flex;
 align-items: center;
 justify-content: center;
 padding: 16px;
 background: rgba(0, 0, 0, 0.5);
 z-index: 50;
}

.dialog {
 width: 100%;
 max-width: 30rem;
 display: flex;
 flex-direction: column;
 gap: 16px;
 padding: 24px;
 border: 1px solid var(--border);
 border-radius: var(--radius-lg);
 background: var(--card);
 color: var(--card-foreground);
 box-shadow: 0 10px 30px
  rgba(0, 0, 0, 0.25);
}

.dialog-title {
 font-size: 18px;
 font-weight: 600;
}

.dialog-description {
 font-size: 14px;
 color: var(--muted-foreground);
}

.dialog-footer {
 display: flex;
 justify-content: flex-end;
 gap: 8px;
}

/* avatar */
.avatar {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 40px;
 height: 40px;
 overflow: hidden;
 border-radius: var(--radius-md);
 background: var(--primary);
 color: var(--primary-foreground);
 font-size: 13px;
 font-weight: 700;
 flex-shrink: 0;
}

.avatar img {
 width: 100%;
 height: 100%;
 object-fit: cover;
}

.avatar.avatar-logo-bg {
 background-color: var(
  --logo-bg-light,
  transparent
 );
}

.avatar.avatar-logo-bg img {
 object-fit: contain;
 padding: 4px;
}

body[data-color-mode='dark']
 .avatar.avatar-logo-bg,
body.color-mode-dark
 .avatar.avatar-logo-bg {
 background-color: var(
  --logo-bg-dark,
  var(--logo-bg-light, transparent)
 );
}

@media (prefers-color-scheme: dark) {
 body[data-color-mode='system']
  .avatar.avatar-logo-bg,
 body.color-mode-system
  .avatar.avatar-logo-bg {
  background-color: var(
   --logo-bg-dark,
   var(--logo-bg-light, transparent)
  );
 }
}

/* dropdown-menu */
.dropdown {
 position: relative;
}

.dropdown-menu {
 position: absolute;
 z-index: 40;
 min-width: 240px;
 margin-top: 6px;
 padding: 6px;
 border: 1px solid var(--border);
 border-radius: var(--radius-md);
 background: var(--card);
 color: var(--card-foreground);
 box-shadow: 0 10px 30px
  rgba(0, 0, 0, 0.18);
}

.dropdown-menu[hidden] {
 display: none;
}

.dropdown-label {
 padding: 6px 8px;
 font-size: 12px;
 font-weight: 600;
 color: var(--muted-foreground);
}

.dropdown-separator {
 height: 1px;
 margin: 6px 0;
 background: var(--border);
 border: 0;
}

.dropdown-item {
 display: flex;
 align-items: center;
 gap: 10px;
 width: 100%;
 padding: 8px;
 border: 0;
 border-radius: var(--radius-sm);
 background: transparent;
 color: var(--foreground);
 font: inherit;
 font-size: 14px;
 text-align: left;
 cursor: pointer;
}

.dropdown-item:hover {
 background: var(--accent);
 color: var(--accent-foreground);
}

/* scroll-area */
.scroll-area {
 overflow: auto;
 max-height: 320px;
}

/* layout: shell / sidebar / content */
.app-shell {
 display: flex;
 --sidebar-width: var(
  --sidebar-width-user,
  248px
 );
 min-height: 100vh;
}

.app-shell.sidebar-collapsed {
 --sidebar-width: 0px;
}

.app-shell.sidebar-resizing .sidebar,
.app-shell.sidebar-resizing
 .sidebar-collapse-cluster {
 transition: none;
}

.app-shell.sidebar-resizing {
 cursor: ew-resize;
 user-select: none;
}

.sidebar {
 display: flex;
 flex-direction: column;
 position: sticky;
 top: 0;
 width: var(--sidebar-width);
 height: 100vh;
 max-height: 100vh;
 flex-shrink: 0;
 border-right: 1px solid var(--border);
 background: var(--shell-surface);
 transition:
  width 0.15s ease,
  border-color 0.15s ease;
 overflow: visible;
}

.sidebar-collapsed .sidebar {
 width: 0;
 border-right-color: transparent;
 overflow: hidden;
 visibility: hidden;
}

.sidebar-resize-handle {
 position: absolute;
 top: 0;
 right: -3px;
 width: 7px;
 height: 100%;
 z-index: 30;
 cursor: default;
 touch-action: none;
}

.sidebar-resize-handle::before {
 content: '';
 position: absolute;
 top: 0;
 left: 3px;
 width: 1px;
 height: 100%;
 background: transparent;
}

.sidebar-resize-handle:hover {
 cursor: ew-resize;
}

.sidebar-resize-handle:hover::before {
 background: var(--border);
}

.sidebar-collapse-cluster {
 position: fixed;
 z-index: 40;
 top: 8px;
 left: calc(var(--sidebar-width) + 8px);
 display: inline-flex;
 align-items: center;
 gap: 6px;
 transition: left 0.15s ease;
}

.sidebar-collapse-identity {
 display: none;
 align-items: center;
 justify-content: center;
 padding: 0;
 border: 1px solid var(--border);
 border-radius: var(--radius-md);
 background: var(--card);
 box-shadow: none;
 cursor: pointer;
 transition:
  background-color 0.15s,
  box-shadow 0.15s;
}

.app-shell.sidebar-collapsed:not(
  .app-shell-mobile
 )
 .sidebar-collapse-identity {
 display: inline-flex;
}

.sidebar-collapse-identity:hover {
 box-shadow: 0 8px 24px
  rgba(16, 23, 41, 0.12);
}

.sidebar-collapse-identity:focus-visible {
 outline: none;
 box-shadow:
  0 8px 24px rgba(16, 23, 41, 0.12),
  0 0 0 3px
   color-mix(
    in srgb,
    var(--ring) 40%,
    transparent
   );
}

.sidebar-collapse-toggle {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 36px;
 height: 36px;
 padding: 0;
 border: 1px solid var(--border);
 border-radius: var(--radius-md);
 background: var(--card);
 color: var(--foreground);
 box-shadow: none;
 cursor: pointer;
 transition:
  background-color 0.15s,
  color 0.15s,
  box-shadow 0.15s;
}

.sidebar-collapse-toggle:hover {
 background: var(--accent);
 color: var(--accent-foreground);
 box-shadow: 0 8px 24px
  rgba(16, 23, 41, 0.12);
}

.sidebar-collapse-toggle:focus-visible {
 outline: none;
 box-shadow:
  0 8px 24px rgba(16, 23, 41, 0.12),
  0 0 0 3px
   color-mix(
    in srgb,
    var(--ring) 40%,
    transparent
   );
}

.sidebar-collapse-toggle svg {
 width: 18px;
 height: 18px;
}

.page-help-toggle {
 position: fixed;
 z-index: 40;
 top: 8px;
 right: 8px;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 36px;
 height: 36px;
 padding: 0;
 border: 1px solid var(--border);
 border-radius: var(--radius-md);
 background: var(--card);
 color: var(--foreground);
 box-shadow: none;
 cursor: pointer;
 transition:
  background-color 0.15s,
  color 0.15s,
  box-shadow 0.15s;
}

.page-help-toggle:hover {
 background: var(--accent);
 color: var(--accent-foreground);
 box-shadow: 0 8px 24px
  rgba(16, 23, 41, 0.12);
}

.page-help-toggle:focus-visible {
 outline: none;
 box-shadow:
  0 8px 24px rgba(16, 23, 41, 0.12),
  0 0 0 3px
   color-mix(
    in srgb,
    var(--ring) 40%,
    transparent
   );
}

.page-help-toggle svg {
 width: 18px;
 height: 18px;
}

.page-help-body {
 overflow: auto;
 max-height: min(60vh, 520px);
}

.page-help-content {
 font-size: 14px;
 line-height: 1.55;
}

.page-help-content > * + * {
 margin-top: 0.75em;
}

.page-help-content h1,
.page-help-content h2,
.page-help-content h3 {
 margin: 1em 0 0.35em;
 font-weight: 600;
 line-height: 1.3;
}

.page-help-content h1 {
 font-size: 1.15rem;
}
.page-help-content h2 {
 font-size: 1rem;
}
.page-help-content h3 {
 font-size: 0.95rem;
}

.page-help-content ul,
.page-help-content ol {
 margin: 0.35em 0;
 padding-left: 1.35em;
}

.page-help-content li + li {
 margin-top: 0.25em;
}

.page-help-content a {
 color: var(--primary);
 text-decoration: underline;
}

.page-help-content code {
 font-size: 0.9em;
 padding: 0.1em 0.35em;
 border-radius: var(--radius-sm);
 background: var(--accent);
}

.sidebar-top {
 padding: 12px;
 border-bottom: 1px solid var(--border);
}

.sidebar-nav {
 display: flex;
 flex-direction: column;
 gap: 4px;
 flex: 1;
 min-height: 0;
 overflow: auto;
 padding: 12px;
}

.nav-section-label {
 margin: 14px 8px 4px;
 color: var(--muted-foreground);
 font-size: 11px;
 font-weight: 700;
 letter-spacing: 0.08em;
 text-transform: uppercase;
}

.nav-item {
 display: flex;
 align-items: center;
 gap: 10px;
 width: 100%;
 padding: 8px 12px;
 border: 0;
 border-radius: var(--radius-md);
 background: transparent;
 color: var(--muted-foreground);
 font: inherit;
 font-size: 14px;
 font-weight: 500;
 text-align: left;
 cursor: pointer;
}

.nav-item:hover {
 background: var(--accent);
 color: var(--accent-foreground);
}

.nav-item.active {
 background: var(--accent);
 color: var(--foreground);
}

.nav-item svg {
 width: 16px;
 height: 16px;
}

.sidebar-bottom {
 display: flex;
 flex-direction: column;
 gap: 4px;
 padding: 12px;
 border-top: 1px solid var(--border);
}

.sidebar-footer-row {
 display: flex;
 align-items: center;
 gap: 6px;
}

.sidebar-footer-row > .btn,
.sidebar-footer-row > .dropdown {
 flex: 1;
 min-width: 0;
}

.sidebar-footer-row > .dropdown > .btn {
 width: 100%;
}

.sidebar-footer-row
 > .dropdown:first-child
 > .btn {
 padding-left: 6px;
}

.sidebar-footer-row .dropdown-menu {
 top: auto;
 bottom: calc(100% + 6px);
 margin-top: 0;
}

.profile-trigger-text {
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}

.color-mode-toggle {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 flex-shrink: 0;
 width: 36px;
 height: 36px;
 padding: 0;
 border: 1px solid var(--border);
 border-radius: var(--radius-md);
 background: var(--muted);
 color: var(--muted-foreground);
 font: inherit;
 cursor: pointer;
 transition:
  background-color 0.15s,
  color 0.15s,
  box-shadow 0.15s;
}

.color-mode-toggle:hover {
 background: var(--accent);
 color: var(--foreground);
}

.color-mode-toggle:focus-visible {
 outline: none;
 box-shadow: 0 0 0 3px
  color-mix(
   in srgb,
   var(--ring) 40%,
   transparent
  );
}

.color-mode-toggle svg {
 width: 16px;
 height: 16px;
}

.profile-header {
 align-items: center;
 gap: 12px;
}

.profile-header-text {
 min-width: 0;
}

.profile-name {
 font-size: 16px;
 font-weight: 600;
}

.profile-section-title {
 font-size: 14px;
 font-weight: 600;
}

.main {
 display: flex;
 flex-direction: column;
 position: relative;
 flex: 1;
 min-width: 0;
 min-height: 100vh;
}

.page-loading-bar {
 position: absolute;
 z-index: 30;
 top: 0;
 left: 0;
 width: 0;
 height: 2px;
 background: var(--primary);
 opacity: 0;
 transition:
  width 0.5s ease,
  opacity 0.15s ease;
}

.page-loading-bar.active {
 width: 72%;
 opacity: 1;
}

.page-loading-bar.complete {
 width: 100%;
}

.content-loading {
 display: flex;
 flex: 1;
 align-items: center;
 justify-content: center;
 gap: 10px;
 min-height: 0;
}

.platform-starting {
 position: fixed;
 inset: 0;
 z-index: 100;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 gap: 12px;
 background: var(--background);
 color: var(--muted-foreground);
 font-size: 14px;
 opacity: 1;
 pointer-events: none;
 transition: opacity 0.25s linear;
}

.platform-starting-exit {
 opacity: 0;
}

.platform-starting .loading-spinner {
 transition: transform 0.25s linear;
}

/* On exit, the spinner zooms to 2x as the overlay fades. animation:none frees
 * the transform property (the spin keyframes otherwise override it). */
.platform-starting-exit
 .loading-spinner {
 animation: none;
 transform: scale(2);
}

.loading-spinner {
 width: 18px;
 height: 18px;
 border: 2px solid currentColor;
 border-right-color: transparent;
 border-radius: 999px;
 color: var(--muted-foreground);
 animation: btn-spin 0.7s linear
  infinite;
}

.topbar {
 display: flex;
 align-items: center;
 justify-content: space-between;
 height: 56px;
 padding: 0 24px;
 border-bottom: 1px solid var(--border);
 background: var(--card);
}

.topbar .crumb {
 font-size: 14px;
 color: var(--muted-foreground);
}

.topbar .crumb b {
 color: var(--foreground);
 font-weight: 600;
}

section.content {
 display: flex;
 flex-direction: column;
 flex: 1;
 overflow: auto;
 background: var(--muted);
 min-height: 0;
}

.page {
 --page-title-size: 2rem;
 --page-title-line-height: 1.25;
 --page-title-leading: calc(
  var(--page-title-size) *
   var(--page-title-line-height)
 );
 padding: 32px;
 padding-top: calc(
  32px + var(--page-title-leading)
 );
 max-width: 64rem;
 min-height: 100%;
 margin: 0 auto;
 display: flex;
 flex-direction: column;
 gap: 8px;
}

.page > h1,
.page > .stack > h1:first-child {
 font-size: var(--page-title-size);
 line-height: var(
  --page-title-line-height
 );
 font-weight: 600;
}

.page-grid {
 display: grid;
 min-width: 0;
 gap: 16px;
 margin-top: 16px;
}

.about-platform-header {
 display: flex;
 align-items: center;
 gap: 12px;
}

.about-platform-header-text {
 display: flex;
 flex-direction: column;
 gap: 4px;
 min-width: 0;
}

.about-platform-name {
 font-size: 16px;
 font-weight: 600;
}

.about-section-title {
 margin: 0 0 8px;
 font-size: 13px;
 font-weight: 600;
 color: var(--muted-foreground);
 text-transform: uppercase;
 letter-spacing: 0.04em;
}

.about-section + .about-section {
 margin-top: 4px;
}

.about-definition-list {
 display: grid;
 grid-template-columns:
  minmax(140px, auto)
  1fr;
 gap: 6px 12px;
 margin: 0;
}

.about-definition-list dt {
 margin: 0;
 font-size: 13px;
 color: var(--muted-foreground);
}

.about-definition-list dd {
 margin: 0;
 font-size: 13px;
 font-family:
  ui-monospace, SFMono-Regular, Menlo,
  Monaco, Consolas, monospace;
 word-break: break-word;
}

.integration-status-no {
 color: var(--destructive);
}

.integrations-settings-link {
 text-decoration: none;
}

.integrations-badges {
 display: flex;
 flex-wrap: wrap;
 gap: 6px;
}

.integrations-workspace-list {
 margin-top: 4px;
}

.integrations-workspace-row {
 display: grid;
 grid-template-columns:
  minmax(0, 1fr)
  auto auto;
 align-items: center;
 gap: 12px;
 padding: 10px 0;
 border-top: 1px solid var(--border);
}

.integrations-workspace-row:first-of-type {
 border-top: none;
 padding-top: 0;
}

.integrations-workspace-text {
 min-width: 0;
}

@media (max-width: 640px) {
 .integrations-workspace-row {
  grid-template-columns: minmax(0, 1fr);
 }
}

.accent-row {
 display: flex;
 align-items: center;
 gap: 8px;
}

.accent-swatch {
 display: inline-block;
 width: 1.25rem;
 height: 1.25rem;
 border-radius: 4px;
 border: 1px solid var(--border);
 flex-shrink: 0;
}

.muted {
 color: var(--muted-foreground);
 font-size: 14px;
}

.row {
 display: flex;
 align-items: center;
 gap: 12px;
}

.workspace-row {
 width: 100%;
 padding: 0;
 border: 0;
 background: transparent;
 color: inherit;
 font: inherit;
 text-align: left;
 cursor: pointer;
}

.user-row {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 12px;
 padding: 10px 0;
 border-bottom: 1px solid var(--border);
}

.user-row:last-child {
 border-bottom: 0;
}

.user-row-main {
 min-width: 0;
}

.user-row-title {
 font-weight: 600;
}

.user-row-actions {
 flex-shrink: 0;
}

.spread {
 justify-content: space-between;
}

.stack {
 display: flex;
 flex-direction: column;
 gap: 8px;
}

.stack[hidden] {
 display: none;
}

.paper {
 padding: 16px;
}

/* customer-menu (top-left switcher) */
.customer-menu {
 position: relative;
}

.customer-trigger {
 display: flex;
 align-items: center;
 gap: 10px;
 width: 100%;
 padding: 8px;
 border: 0;
 border-radius: var(--radius-md);
 background: transparent;
 color: var(--foreground);
 font: inherit;
 text-align: left;
 cursor: pointer;
}

.customer-trigger:hover {
 background: var(--accent);
}

.customer-static {
 cursor: default;
}

.customer-static:hover {
 background: transparent;
}

.customer-trigger .ct-text {
 display: flex;
 flex-direction: column;
 flex: 1;
 min-width: 0;
 align-items: flex-start;
 text-align: left;
}

.customer-trigger > svg:last-child {
 margin-left: auto;
 flex-shrink: 0;
}

.customer-trigger .ct-name {
 max-width: 100%;
 font-size: 14px;
 font-weight: 600;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}

.customer-trigger .ct-sub {
 max-width: 100%;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
 font-size: 12px;
 color: var(--muted-foreground);
}

.customer-search {
 margin-bottom: 6px;
 text-align: left;
}

.customer-recent-item {
 padding: 0;
 gap: 0;
}

.customer-recent-main {
 display: flex;
 align-items: center;
 gap: 10px;
 flex: 1;
 min-width: 0;
 padding: 8px;
 border: 0;
 border-radius: var(--radius-sm);
 background: transparent;
 color: inherit;
 font: inherit;
 font-size: 14px;
 text-align: left;
 cursor: pointer;
}

.customer-recent-main:hover,
.customer-recent-item:hover
 .customer-recent-main {
 background: var(--accent);
 color: var(--accent-foreground);
}

.customer-item-trailing {
 display: flex;
 align-items: center;
 gap: 4px;
 margin-left: auto;
 flex-shrink: 0;
 padding-right: 4px;
}

.customer-recent-dismiss {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 28px;
 height: 28px;
 padding: 0;
 border: 0;
 border-radius: var(--radius-sm);
 background: transparent;
 color: var(--muted-foreground);
 cursor: pointer;
 opacity: 0;
 pointer-events: none;
}

.customer-recent-item:hover
 .customer-recent-dismiss,
.customer-recent-item:focus-within
 .customer-recent-dismiss {
 opacity: 1;
 pointer-events: auto;
}

.customer-recent-dismiss:hover {
 background: var(--accent);
 color: var(--accent-foreground);
}

.customer-recent-item:hover
 .customer-recent-dismiss,
.customer-recent-item:focus-within
 .customer-recent-dismiss {
 color: inherit;
}

.customer-trigger + .dropdown-menu,
.customer-trigger + .dropdown-menu * {
 text-align: left;
}

.customer-item-check {
 margin-left: auto;
 color: #00ba7c;
}

/* gate (login + customer picker) */
.gate-screen {
 display: flex;
 align-items: center;
 justify-content: center;
 min-height: 100vh;
 width: 100%;
 padding: 16px;
 box-sizing: border-box;
 background: var(--shell-surface);
}

.gate {
 display: grid;
 gap: 16px;
 margin: 0;
 max-width: 22rem;
 width: 100%;
 padding: 0;
}

.color-mode-select {
 justify-self: start;
 width: auto;
}

.gate form {
 display: grid;
 gap: 12px;
}

.gate .switcher {
 display: flex;
 gap: 8px;
 font-size: 13px;
}

.gate .message-inline {
 font-size: 13px;
}

.gate .pick-list {
 display: flex;
 flex-direction: column;
 gap: 6px;
}

.gate-logo-bg {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 padding: 12px;
 border-radius: 8px;
 background-color: var(
  --logo-bg-light,
  transparent
 );
}

.gate-avatar-bg {
 background-color: var(
  --logo-bg-light,
  transparent
 );
}

body[data-color-mode='dark']
 .gate-logo-bg,
body.color-mode-dark .gate-logo-bg,
body[data-color-mode='dark']
 .gate-avatar-bg,
body.color-mode-dark .gate-avatar-bg {
 background-color: var(
  --logo-bg-dark,
  var(--logo-bg-light, transparent)
 );
}

@media (prefers-color-scheme: dark) {
 body[data-color-mode='system']
  .gate-logo-bg,
 body.color-mode-system .gate-logo-bg,
 body[data-color-mode='system']
  .gate-avatar-bg,
 body.color-mode-system
  .gate-avatar-bg {
  background-color: var(
   --logo-bg-dark,
   var(--logo-bg-light, transparent)
  );
 }
}

/* mock banner */
.mock-banner {
 position: fixed;
 left: 0;
 right: 0;
 bottom: 0;
 z-index: 60;
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
 padding: 8px 12px;
 background: #f59e0b;
 color: #111827;
 font-size: 13px;
 font-weight: 600;
 box-shadow: 0 -1px 6px
  rgba(0, 0, 0, 0.2);
}

/* data table */
.table-wrap {
 overflow-x: auto;
 width: 100%;
 max-width: 100%;
 min-width: 0;
}

.table {
 width: 100%;
 border-collapse: collapse;
 font-size: 14px;
}

.table th {
 text-align: left;
 padding: 8px 10px;
 font-weight: 500;
 color: var(--muted-foreground);
 border-bottom: 1px solid var(--border);
 white-space: nowrap;
}

.table td {
 padding: 8px 10px;
 border-bottom: 1px solid var(--border);
 vertical-align: top;
}

.table tbody tr:last-child td {
 border-bottom: 0;
}

.table .num {
 text-align: right;
 font-variant-numeric: tabular-nums;
}

/* view helpers */
.toolbar {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 8px;
 margin: 8px 0;
 flex-wrap: wrap;
}

.field {
 display: flex;
 flex-direction: column;
 min-width: 0;
 gap: 4px;
}

.field-grid {
 display: grid;
 gap: 12px;
 grid-template-columns: 1fr 1fr;
}

.empty {
 color: var(--muted-foreground);
 font-size: 14px;
 padding: 16px 0;
}

.link-inline {
 color: var(--primary);
 text-decoration: none;
 font-size: 13px;
}

.link-inline:hover {
 text-decoration: underline;
}

/* Unified status / alert messages (ui/message.mjs) */
.message {
 display: flex;
 align-items: flex-start;
 gap: 8px;
 padding: 10px 12px;
 border: 1px solid var(--border);
 border-radius: var(--radius-md);
 font-size: 13px;
 line-height: 1.45;
 margin-top: 8px;
 background: var(--card);
 color: var(--foreground);
}

.message:first-child {
 margin-top: 0;
}

.message.spread {
 align-items: center;
 justify-content: space-between;
 flex-wrap: wrap;
 gap: 10px;
}

.message.hidden,
.message[hidden] {
 display: none;
}

.message-icon {
 display: inline-flex;
 flex: none;
 margin-top: 1px;
 color: inherit;
}

.message-content {
 display: flex;
 flex-direction: column;
 gap: 6px;
 min-width: 0;
 flex: 1;
}

.message-title {
 font-weight: 600;
 font-size: 14px;
 line-height: 1.35;
}

.message-text {
 overflow-wrap: anywhere;
}

.message-detail {
 font-family: var(
  --font-mono,
  ui-monospace,
  monospace
 );
 font-size: 12px;
 line-height: 1.5;
 word-break: break-word;
 padding: 8px 10px;
 border-radius: var(--radius-sm);
 background: color-mix(
  in srgb,
  var(--foreground) 4%,
  transparent
 );
}

.message-footer {
 font-size: 13px;
 line-height: 1.45;
}

.message-error {
 background: color-mix(
  in srgb,
  var(--message-error) 10%,
  transparent
 );
 border-color: color-mix(
  in srgb,
  var(--message-error) 35%,
  transparent
 );
 color: var(--message-error);
}

.message-warning {
 background: color-mix(
  in srgb,
  var(--message-warning) 12%,
  transparent
 );
 border-color: color-mix(
  in srgb,
  #f59e0b 40%,
  transparent
 );
 color: var(--message-warning);
}

.message-alert {
 background: color-mix(
  in srgb,
  var(--message-alert) 10%,
  transparent
 );
 border-color: color-mix(
  in srgb,
  var(--message-alert) 35%,
  transparent
 );
 color: var(--message-alert);
}

.message-info {
 background: color-mix(
  in srgb,
  var(--message-info) 8%,
  transparent
 );
 border-color: var(--border);
 color: var(--message-info);
}

.message-success {
 background: color-mix(
  in srgb,
  var(--message-success) 10%,
  transparent
 );
 border-color: color-mix(
  in srgb,
  var(--message-success) 35%,
  transparent
 );
 color: var(--message-success);
}

.message-inline {
 padding: 0;
 margin-top: 0;
 border: none;
 border-radius: 0;
 background: none;
 gap: 0;
}

.message-inline.message-error {
 color: var(--message-error);
}

.message-inline.message-warning {
 color: var(--message-warning);
}

.message-inline.message-alert {
 color: var(--message-alert);
}

.message-inline.message-info {
 color: var(--message-info);
}

.message-inline.message-success {
 color: var(--message-success);
}

.message-inline.message-compact {
 font-size: 11px;
}

/* Transient action feedback — fixed stack, auto-dismiss. */
.toast-stack {
 position: fixed;
 right: 16px;
 bottom: 16px;
 z-index: 10000;
 display: flex;
 flex-direction: column;
 gap: 8px;
 max-width: min(
  360px,
  calc(100vw - 32px)
 );
 pointer-events: none;
}

.toast {
 display: flex;
 align-items: flex-start;
 gap: 10px;
 padding: 10px 12px;
 border-radius: var(--radius-md);
 border: 1px solid var(--border);
 background: var(--background);
 box-shadow:
  0 4px 12px rgb(0 0 0 / 12%),
  0 1px 2px rgb(0 0 0 / 8%);
 color: var(--foreground);
 font-size: 13px;
 line-height: 1.35;
 opacity: 0;
 transform: translateY(8px);
 transition:
  opacity 0.2s ease,
  transform 0.2s ease;
 pointer-events: auto;
}

.toast-show {
 opacity: 1;
 transform: translateY(0);
}

.toast-exit {
 opacity: 0;
 transform: translateY(4px);
}

.toast-icon {
 flex: 0 0 auto;
 display: inline-flex;
 margin-top: 1px;
}

.toast-text {
 flex: 1;
 min-width: 0;
}

.toast-success {
 border-color: color-mix(
  in srgb,
  var(--message-success) 35%,
  var(--border)
 );
}

.toast-success .toast-icon {
 color: var(--message-success);
}

.toast-error {
 border-color: color-mix(
  in srgb,
  var(--message-error) 35%,
  var(--border)
 );
}

.toast-error .toast-icon {
 color: var(--message-error);
}

/* Contracts page sections ("Available to import" + "Contracts"). Each is
 * a titled block; the available section also fronts the import action. */
.contracts-section {
 display: block;
 margin: 16px 0;
}

.section-head {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 12px;
 flex-wrap: wrap;
 margin-bottom: 8px;
}

.section-head__title {
 display: flex;
 align-items: baseline;
 gap: 8px;
 min-width: 0;
}

.section-head__title h2 {
 margin: 0;
 font-size: 18px;
 font-weight: 600;
 line-height: 1.2;
 color: var(--foreground);
}

.section-head__actions {
 display: flex;
 align-items: center;
 gap: 12px;
 flex-wrap: wrap;
}

/* "Available to import" deal list — boxed rows, each with an Import CTA. */
.deal-list {
 list-style: none;
 margin: 0;
 padding: 0;
 display: flex;
 flex-direction: column;
 gap: 1px;
 background: var(--border);
 border: 1px solid var(--border);
 border-radius: var(--radius-md);
 overflow: hidden;
}

.deal-row {
 display: flex;
 align-items: center;
 gap: 12px;
 padding: 10px 12px;
 background: var(--background);
}

.deal-row__text {
 flex: 1;
 min-width: 0;
 display: flex;
 flex-direction: column;
 gap: 2px;
}

.deal-row__name {
 font-size: 14px;
 font-weight: 500;
 color: var(--foreground);
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}

.deal-row__meta {
 font-size: 12px;
 color: var(--muted-foreground);
}

.deal-row__amount {
 font-size: 14px;
 font-weight: 600;
 color: var(--foreground);
 font-variant-numeric: tabular-nums;
}

/* badge color variants (status palettes) */
.badge-success {
 background: transparent;
 border-color: #16a34a;
 color: #16a34a;
}

.badge-warning {
 background: transparent;
 border-color: #d97706;
 color: #d97706;
}

.badge-info {
 background: transparent;
 border-color: #2563eb;
 color: #2563eb;
}

/* switch */
.switch {
 position: relative;
 display: inline-flex;
 align-items: center;
 width: 36px;
 height: 20px;
 padding: 0;
 border: 1px solid var(--border);
 border-radius: 9999px;
 background: var(--muted);
 cursor: pointer;
 transition: background 0.15s ease;
}

.switch:disabled {
 opacity: 0.5;
 cursor: not-allowed;
}

.switch-on {
 background: var(--primary);
 border-color: var(--primary);
}

.switch-thumb {
 position: absolute;
 left: 2px;
 width: 14px;
 height: 14px;
 border-radius: 9999px;
 background: var(--background);
 transition: transform 0.15s ease;
}

.switch-on .switch-thumb {
 transform: translateX(16px);
}

/* popover */
.popover {
 position: relative;
 display: inline-flex;
}

.popover-panel {
 position: absolute;
 top: calc(100% + 6px);
 left: 0;
 z-index: 40;
 min-width: 220px;
 max-width: 320px;
 padding: 12px;
 border: 1px solid var(--border);
 border-radius: var(--radius-md);
 background: var(
  --popover,
  var(--card)
 );
 color: var(--foreground);
 box-shadow: 0 8px 24px
  rgba(0, 0, 0, 0.18);
 font-size: 13px;
}

/* collapse */
.collapse {
 border: 1px solid var(--border);
 border-radius: var(--radius-md);
 overflow: hidden;
}

.collapse-header {
 display: flex;
 align-items: center;
 justify-content: space-between;
 width: 100%;
 padding: 10px 12px;
 border: none;
 background: transparent;
 color: var(--foreground);
 font-size: 14px;
 font-weight: 500;
 cursor: pointer;
}

.collapse-header span {
 text-align: left;
}

.collapse-header svg {
 transition: transform 0.15s ease;
 flex-shrink: 0;
}

.collapse-body {
 padding: 0 12px 12px;
}

/* integration status pills */
.pill-row {
 display: flex;
 flex-wrap: wrap;
 gap: 8px;
 align-items: center;
 margin: 8px 0;
}

.pill {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 padding: 4px 10px;
 border: 1px solid var(--border);
 border-radius: 9999px;
 background: transparent;
 color: var(--foreground);
 font-size: 12px;
 cursor: pointer;
}

.pill-dot {
 width: 8px;
 height: 8px;
 border-radius: 9999px;
 background: var(--muted-foreground);
}

.pill-dot.ok {
 background: #16a34a;
}

.pill-dot.warn {
 background: #d97706;
}

.pill-dot.off {
 background: var(--destructive);
}

.pill-dot.info {
 background: #2563eb;
}

/* legacy inline status aliases (prefer ui/message.mjs) */
.text-danger {
 color: var(--message-error);
}

.text-warn {
 color: var(--message-warning);
}

.text-ok {
 color: var(--message-success);
}

/* API Keys: scope picker grid */
.scope-grid {
 display: grid;
 grid-template-columns: 1fr repeat(
   4,
   58px
  );
 gap: 6px;
 align-items: center;
}

.scope-grid-scroll {
 overflow-x: auto;
 -webkit-overflow-scrolling: touch;
}

/* Feature-specific styles live in their own files loaded by index.html:
 *   tasks.css     — task comment thread
 *   vault.css     — key/value field rows
 *   billing.css   — summary cards + Stripe footer
 *   settings.css  — permissions table + associations editor */

/* ---- narrow viewport (mobile) ---- */
@media (max-width: 720px) {
 .page {
  padding: 16px;
  padding-top: calc(
   16px + var(--page-title-leading)
  );
  padding-left: max(
   16px,
   env(safe-area-inset-left)
  );
  padding-right: max(
   16px,
   env(safe-area-inset-right)
  );
  padding-bottom: max(
   16px,
   env(safe-area-inset-bottom)
  );
 }

 .app-shell {
  padding-left: env(
   safe-area-inset-left
  );
  padding-right: env(
   safe-area-inset-right
  );
 }

 .gate-screen {
  padding-left: max(
   16px,
   env(safe-area-inset-left)
  );
  padding-right: max(
   16px,
   env(safe-area-inset-right)
  );
  padding-bottom: env(
   safe-area-inset-bottom
  );
 }

 .dialog-overlay {
  padding: 12px;
  padding-left: max(
   12px,
   env(safe-area-inset-left)
  );
  padding-right: max(
   12px,
   env(safe-area-inset-right)
  );
  padding-bottom: max(
   12px,
   env(safe-area-inset-bottom)
  );
 }

 .dialog {
  padding: 16px;
  max-height: calc(
   100vh - 24px -
    env(safe-area-inset-top) -
    env(safe-area-inset-bottom)
  );
  overflow-y: auto;
 }

 .dialog-footer {
  flex-direction: column;
  align-items: stretch;
 }

 .dialog-footer .btn {
  width: 100%;
 }

 .field-grid {
  grid-template-columns: 1fr;
 }

 .tabs-list {
  display: flex;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
 }

 .row.spread {
  flex-wrap: wrap;
  gap: 8px;
 }

 .dropdown-menu {
  max-width: calc(100vw - 24px);
 }

 .mock-banner {
  padding-bottom: max(
   8px,
   env(safe-area-inset-bottom)
  );
 }

 body:has(.mock-banner) .main {
  padding-bottom: 48px;
 }

 .scope-grid {
  grid-template-columns: 1fr repeat(
    4,
    44px
   );
  min-width: 260px;
 }

 /* Mobile shell: off-canvas drawer sidebar */
 .app-shell-mobile {
  --sidebar-width: 0px;
 }

 .app-shell-mobile
  .sidebar-resize-handle {
  display: none;
 }

 .app-shell-mobile .sidebar {
  position: fixed;
  z-index: 45;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(280px, 85vw);
  height: 100vh;
  max-height: 100vh;
  visibility: visible;
  transform: translateX(-100%);
  transition: transform 0.2s ease;
  box-shadow: none;
 }

 .app-shell-mobile.sidebar-mobile-open
  .sidebar {
  transform: translateX(0);
  box-shadow: 4px 0 24px
   rgba(0, 0, 0, 0.15);
 }

 .app-shell-mobile.sidebar-collapsed
  .sidebar {
  transform: translateX(-100%);
 }

 .sidebar-backdrop {
  position: fixed;
  z-index: 44;
  inset: 0;
  border: 0;
  padding: 0;
  margin: 0;
  background: rgba(0, 0, 0, 0.4);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition:
   opacity 0.2s ease,
   visibility 0.2s ease;
 }

 .sidebar-backdrop:not([hidden]) {
  opacity: 1;
  visibility: visible;
 }

 .app-shell-mobile
  .sidebar-collapse-cluster {
  left: max(
   8px,
   env(safe-area-inset-left)
  );
  top: max(
   8px,
   env(safe-area-inset-top)
  );
 }

 .app-shell-mobile .main {
  width: 100%;
 }
}

/* PWA install prompt */
.pwa-install {
 position: fixed;
 z-index: 55;
 left: max(
  16px,
  env(safe-area-inset-left)
 );
 right: max(
  16px,
  env(safe-area-inset-right)
 );
 bottom: max(
  16px,
  env(safe-area-inset-bottom)
 );
 display: flex;
 flex-wrap: wrap;
 align-items: flex-start;
 gap: 12px;
 padding: 14px 40px 14px 16px;
 border: 1px solid var(--border);
 border-radius: var(--radius-lg);
 background: var(--card);
 color: var(--card-foreground);
 box-shadow: 0 8px 24px
  rgba(0, 0, 0, 0.15);
}

body:has(.mock-banner) .pwa-install {
 bottom: calc(
  48px +
   max(
    16px,
    env(safe-area-inset-bottom)
   )
 );
}

.pwa-install-main {
 flex: 1;
 min-width: 0;
}

.pwa-install-title {
 font-size: 15px;
 font-weight: 600;
 line-height: 1.3;
}

.pwa-install-body {
 margin-top: 4px;
 font-size: 13px;
 line-height: 1.45;
 color: var(--muted-foreground);
}

.pwa-install-actions {
 display: flex;
 flex-wrap: wrap;
 gap: 8px;
 align-items: center;
}

.pwa-install-close {
 position: absolute;
 top: 10px;
 right: 10px;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 28px;
 height: 28px;
 padding: 0;
 border: 0;
 border-radius: var(--radius-md);
 background: transparent;
 color: var(--muted-foreground);
 cursor: pointer;
}

.pwa-install-close:hover {
 color: var(--foreground);
 background: var(--muted);
}

@media (max-width: 720px) {
 .pwa-install {
  flex-direction: column;
  align-items: stretch;
 }

 .pwa-install-actions {
  width: 100%;
 }

 .pwa-install-actions .btn {
  flex: 1;
 }
}