:root {
  --bg: #f6f7f9;
  --card: #ffffff;
  --text: #1f2937;
  --muted: #6b7280;
  --border: #d1d5db;
  --primary: #2563eb;
  --danger: #dc2626;
  --success-bg: #ecfdf5;
  --success-text: #065f46;
  --error-bg: #fef2f2;
  --error-text: #991b1b;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
a { color: var(--primary); text-decoration: none; }
/* v0.87 simple two-row header */
.topbar {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  background: #111827;
  color: white;
  box-shadow: 0 1px 0 rgba(255,255,255,.08);
}
.topbar a { color: white; }
.topbar-row {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 10px max(18px, calc((100vw - 1100px) / 2 + 18px));
}
.topbar-row-main {
  min-height: 56px;
  justify-content: space-between;
  gap: 20px;
}
.topbar-row-admin {
  min-height: 38px;
  gap: 14px;
  background: #1f2937;
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: 7px;
  padding-bottom: 7px;
}
.brand {
  flex: 0 0 auto;
  color: white;
  margin: 0 !important;
  line-height: 1.1;
}
.brand-banner {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}
.brand-name {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: .01em;
}
.brand-note {
  color: #cbd5e1;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.topnav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 16px;
}
.topnav a {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 3px 0;
  color: white;
  margin-left: 0;
  line-height: 1.2;
  white-space: nowrap;
  font-weight: 650;
}
.topnav-main {
  justify-content: flex-end;
  font-size: 15px;
}
.topnav-admin {
  justify-content: flex-start;
  font-size: 13px;
}
.admin-menu-label {
  flex: 0 0 auto;
  color: #cbd5e1;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  white-space: nowrap;
}
.logout-link {
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 999px;
  padding: 4px 11px !important;
}
.topnav a:hover,
.brand:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.topnav a.is-active {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 7px;
}
.topnav-admin a.is-active {
  text-underline-offset: 6px;
}
.container { max-width: 1100px; margin: 28px auto; padding: 0 18px; }
.footer { text-align: center; color: var(--muted); padding: 30px; }
.card, .auth-card { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 22px; margin-bottom: 18px; box-shadow: 0 1px 3px rgba(0,0,0,.04); }
.details-card summary {
  cursor: pointer;
  font-weight: 800;
  font-size: 22px;
  color: var(--text);
}
.details-card summary::marker {
  color: var(--muted);
}
.details-card-body {
  margin-top: 18px;
}

.auth-card { max-width: 480px; margin: 60px auto; }
h1 { margin: 0 0 16px; font-size: 28px; }
h2 { margin-top: 0; }
label { display: block; font-weight: 600; margin: 14px 0 6px; }
input, select, textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; font: inherit; background: #fff; }
button, .button { display: inline-block; border: 0; border-radius: 8px; padding: 10px 16px; background: var(--primary); color: #fff; font-weight: 700; cursor: pointer; margin-top: 12px; }
button.secondary, .button.secondary { background: #4b5563; }
button.danger, .danger { background: var(--danger); color: white; }
.link-button { background: transparent; color: var(--primary); padding: 0; font-weight: 600; }
.alert { padding: 12px 14px; border-radius: 8px; margin: 12px 0; }
.alert.success { background: var(--success-bg); color: var(--success-text); }
.alert.error { background: var(--error-bg); color: var(--error-text); }
.actions { display: flex; flex-wrap: wrap; gap: 10px; }
.grid-form { display: grid; grid-template-columns: repeat(4, minmax(160px, 1fr)); gap: 12px; align-items: end; }
.grid-form button { height: 42px; }
table { width: 100%; border-collapse: collapse; }
th, td { border-bottom: 1px solid var(--border); text-align: left; padding: 10px; vertical-align: top; }
th { background: #f3f4f6; }
.check-row { display: flex; gap: 8px; align-items: center; font-weight: 500; }
.check-row input { width: auto; }
.inline-form { margin-top: 14px; }
@media (max-width: 760px) {
  .topbar-row { padding-left: 16px; padding-right: 16px; align-items: flex-start; }
  .topbar-row-main { flex-direction: column; gap: 8px; }
  .topbar-row-admin { flex-direction: column; gap: 6px; }
  .brand-banner { flex-direction: column; align-items: flex-start; gap: 3px; }
  .brand-name { font-size: 20px; }
  .brand-note { font-size: 11px; }
  .topnav-main { justify-content: flex-start; font-size: 14px; gap: 4px 13px; }
  .topnav-admin { font-size: 12px; gap: 3px 11px; }
  .grid-form { grid-template-columns: 1fr; }
  table { display: block; overflow-x: auto; }
}

.muted { color: #64748b; }
.inline-form { margin: 12px 0 18px; }
.inline-form label { display: block; margin-bottom: 10px; }
hr { border: 0; border-top: 1px solid #e5e7eb; margin: 20px 0; }


.compact-table th,
.compact-table td { vertical-align: middle; height: 54px; }
.table-control { min-width: 128px; width: auto; padding: 8px 10px; }
.table-action-form { margin: 0; }
.small-button { margin-top: 0; padding: 8px 14px; }
.definition-list { display: grid; grid-template-columns: 140px 1fr; gap: 8px 16px; }
.definition-list dt { font-weight: 700; color: var(--muted); }
.definition-list dd { margin: 0; }
@media (max-width: 760px) {
  .definition-list { grid-template-columns: 1fr; }
}

.table-input { min-width: 220px; padding: 8px 10px; }

.stack-form { max-width: 780px; }
.stack-form label { margin-top: 14px; }
.help-box { background: #f8fafc; border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; margin: 16px 0; }
.help-box ol { margin: 10px 0 0 22px; padding: 0; }
.help-box li { margin: 6px 0; }
code { background: #eef2ff; padding: 2px 5px; border-radius: 5px; }
input[readonly] { background: #f3f4f6; color: #4b5563; }

/* v0.9 UI polish */
.page-title { margin-bottom: 18px; }
.page-title h1 { margin-bottom: 6px; }
.section-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; margin-bottom: 14px; }
.section-head h2 { margin-bottom: 6px; }
.no-margin { margin-top: 0 !important; }
.profile-card { display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.profile-main { display: flex; align-items: center; gap: 16px; }
.avatar-circle { width: 56px; height: 56px; border-radius: 999px; background: #dbeafe; color: #1d4ed8; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 800; }
.profile-name { font-size: 22px; font-weight: 800; margin-bottom: 4px; }
.profile-meta { display: grid; grid-template-columns: repeat(2, minmax(180px, 1fr)); gap: 12px; min-width: 420px; }
.metric-box { border: 1px solid #e5e7eb; background: #f9fafb; border-radius: 10px; padding: 12px 14px; }
.metric-label { display: block; color: var(--muted); font-size: 13px; margin-bottom: 6px; }
.badge { display: inline-flex; align-items: center; min-height: 28px; border-radius: 999px; padding: 4px 10px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.role-owner { background: #fef3c7; color: #92400e; }
.role-admin { background: #dbeafe; color: #1e40af; }
.role-member { background: #ecfdf5; color: #065f46; }
.ok-badge { background: #ecfdf5; color: #065f46; }
.muted-badge { background: #f3f4f6; color: #4b5563; }
.form-row { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr) auto; gap: 14px; align-items: end; }
.form-row button { min-width: 220px; height: 44px; }
.empty-state { border: 1px dashed #cbd5e1; background: #f8fafc; color: var(--muted); border-radius: 10px; padding: 18px; }
.device-table th, .device-table td, .user-table th, .user-table td { vertical-align: middle; }
.device-table td, .user-table td { height: 62px; }
.device-table .table-input { min-width: 180px; max-width: 260px; }
.table-actions { display: flex; gap: 8px; align-items: center; flex-wrap: nowrap; }
.table-actions form { margin: 0; }
.user-table .table-control { min-width: 132px; height: 42px; }
.user-table .small-button, .device-table .small-button { height: 38px; }
@media (max-width: 900px) {
  .profile-card { align-items: flex-start; flex-direction: column; }
  .profile-meta { width: 100%; min-width: 0; grid-template-columns: 1fr; }
  .section-head { flex-direction: column; }
  .form-row { grid-template-columns: 1fr; }
  .form-row button { width: 100%; }
}


/* v0.10 alignment and personal settings polish */
body { line-height: 1.55; }
input, select, textarea, button, .button { min-height: 44px; }
label { line-height: 1.4; }
table.aligned-table, .user-table, .device-table { table-layout: auto; }
.aligned-table th,
.aligned-table td,
.user-table th,
.user-table td,
.device-table th,
.device-table td,
.compact-table th,
.compact-table td {
  vertical-align: middle;
}
.compact-table th,
.compact-table td {
  padding-top: 12px;
  padding-bottom: 12px;
}
.table-action-form,
.table-actions form { display: flex; align-items: center; margin: 0; }
.table-control,
.table-input {
  height: 44px;
  display: inline-flex;
  align-items: center;
}
.small-button {
  height: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}
.user-table td,
.device-table td { height: 68px; }
.user-table .table-control { min-width: 140px; }
.profile-settings-card { padding: 26px; }
.compact-head { margin-bottom: 18px; }
.profile-topline {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 22px;
  padding: 16px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #f8fafc;
}
.profile-edit-form { margin-top: 0; }
.form-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(240px, 1fr));
  gap: 16px;
}
.align-form-grid > label,
.readonly-field {
  min-height: 84px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.align-form-grid label { margin: 0; }
.field-label {
  display: block;
  font-weight: 700;
  margin-bottom: 6px;
}
.readonly-field {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 10px 12px;
  background: #f9fafb;
}
.readonly-field .badge { align-self: flex-start; }
.form-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}
.aligned-form-row > label {
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.aligned-form-row button {
  margin-top: 0;
  align-self: end;
}
.grid-form > label {
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.grid-form button { margin-top: 0; align-self: end; }
.card h1, .card h2 { letter-spacing: .01em; }
@media (max-width: 900px) {
  .form-grid-2 { grid-template-columns: 1fr; }
  .form-actions { justify-content: stretch; }
  .form-actions button { width: 100%; }
}


/* v0.15 OneDrive folder browser */
.path-edit-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.path-edit-row .table-input {
  flex: 1 1 auto;
  min-width: 220px;
}
.path-edit-row .small-button {
  flex: 0 0 auto;
}
.folder-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.folder-table .table-actions {
  justify-content: flex-start;
}
.folder-name {
  font-weight: 700;
}
.small-note {
  margin-top: 6px;
  font-size: 14px;
}
.folder-browser-card .inline-form {
  margin-bottom: 0;
}
@media (max-width: 760px) {
  .path-edit-row {
    align-items: stretch;
    flex-direction: column;
  }
  .path-edit-row .small-button {
    width: 100%;
  }
}

/* v0.16 maintenance/log/folder-create */
.two-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.button-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.button-row form { margin: 0; }
.tab-row { display: flex; gap: 10px; flex-wrap: wrap; }
.status-badge { display:inline-block; min-width: 4.5em; text-align:center; border-radius:999px; padding: 3px 8px; font-size: 12px; font-weight:700; background:#e5e7eb; color:#374151; }
.status-badge.success { background:#dcfce7; color:#166534; }
.status-badge.failed { background:#fee2e2; color:#991b1b; }
.folder-create-form { margin-top: 14px; display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.folder-create-form label { flex: 1 1 280px; margin: 0; }
.folder-create-form input { width: 100%; }
.settings-form h3 { margin-top: 22px; }
@media (max-width: 720px) { .two-cols { grid-template-columns: 1fr; } }

/* v0.17 ChatGPT guide on OneDrive page */
.user-guide-card {
  border-color: #bfdbfe;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}
.guide-head { align-items: center; }
.guide-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 18px 0;
}
.guide-step {
  display: flex;
  gap: 12px;
  min-height: 170px;
  padding: 16px;
  border: 1px solid #dbeafe;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.guide-step-number {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #2563eb;
  color: #ffffff;
  font-weight: 800;
}
.guide-step h3 {
  margin: 2px 0 8px;
  font-size: 16px;
}
.guide-step p {
  margin: 0;
  color: #475569;
  font-size: 14px;
}
.guide-details {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #ffffff;
  margin-top: 12px;
  overflow: hidden;
}
.guide-details summary {
  cursor: pointer;
  padding: 14px 16px;
  font-weight: 800;
  background: #f3f4f6;
}
.guide-details[open] summary { border-bottom: 1px solid #e5e7eb; }
.copy-box { padding: 16px; }
.copy-box label { margin-top: 0; }
.copy-box textarea {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  background: #f8fafc;
  min-height: 160px;
}
.guide-check-list {
  margin: 0;
  padding: 16px 22px 16px 36px;
}
.guide-check-list li { margin: 8px 0; }
.guide-note {
  margin-top: 14px;
  padding: 14px 16px;
  border-left: 5px solid #2563eb;
  background: #eff6ff;
  border-radius: 10px;
}
.guide-note p { margin: 6px 0 0; color: #475569; }
@media (max-width: 1000px) {
  .guide-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .guide-flow { grid-template-columns: 1fr; }
  .guide-step { min-height: 0; }
}

/* v0.18 ChatGPT-side setting guide */
.guide-panel { padding: 16px; }
.guide-panel-lead { margin: 0 0 14px; color: #334155; }
.setting-block-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.setting-block {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #f8fafc;
  padding: 14px;
}
.setting-block h3 { margin: 0 0 8px; font-size: 16px; }
.setting-block textarea {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  background: #ffffff;
  min-height: 180px;
}
.compact-guide-note { margin-top: 14px; }
@media (max-width: 760px) {
  .setting-block-grid { grid-template-columns: 1fr; }
}

/* MCP connector integration UI */
.mode-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 18px 0;
}
.mode-card {
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  background: #ffffff;
  padding: 18px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .05);
}
.mode-card.recommended {
  border-color: #bfdbfe;
  background: linear-gradient(180deg, #ffffff 0%, #eff6ff 100%);
}
.mode-card h3 { margin: 10px 0 8px; }
.mode-card p { color: #475569; }
.compact-flow .guide-step { min-height: 140px; }
.important-card { border-color: #f59e0b; background: #fffbeb; }
.token-output {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  background: #111827;
  color: #f9fafb;
  min-height: 80px;
}
.chatgpt-token-form {
  grid-template-columns: minmax(260px, 1fr) auto;
  align-items: end;
}
.action-settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 14px 0;
}
.action-settings-grid .readonly-field {
  align-items: flex-start;
}
@media (max-width: 760px) {
  .mode-cards,
  .action-settings-grid,
  .chatgpt-token-form {
    grid-template-columns: 1fr;
  }
}


/* MCP file and zip helper UI */
.three-mode-cards {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.mode-card code {
  display: inline-block;
  margin-top: 8px;
  padding: 4px 8px;
  border-radius: 8px;
  background: #f1f5f9;
  color: #0f172a;
  font-size: 13px;
}
.card textarea[readonly] {
  line-height: 1.6;
}
@media (max-width: 1000px) {
  .three-mode-cards { grid-template-columns: 1fr; }
}

/* v0.21 ChatGPT setup copy UI */
.setup-steps-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 18px 0;
}
.setup-step-card {
  position: relative;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  background: #ffffff;
  padding: 18px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .05);
}
.step-number {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #2563eb;
  color: #ffffff;
  font-weight: 800;
  margin-bottom: 8px;
}
.setup-step-card h3 {
  margin: 0 0 8px;
  font-size: 18px;
}
.setup-step-card p {
  color: #475569;
  min-height: 48px;
}
.setup-step-card code,
.readonly-field code {
  display: block;
  overflow-wrap: anywhere;
  white-space: normal;
}
.secret-code {
  max-height: 90px;
  overflow: auto;
}
.copy-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}
.copy-button.copied {
  background: #16a34a;
  color: #ffffff;
  border-color: #16a34a;
}
.copy-panel {
  position: relative;
}
.copy-panel-button {
  margin-bottom: 10px;
}
.token-copy-panel label {
  margin-top: 0;
}
.mini-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.mini-head h3 {
  margin: 0;
}
.badge.warning {
  background: #fef3c7;
  color: #92400e;
}
@media (max-width: 1000px) {
  .setup-steps-grid { grid-template-columns: 1fr; }
  .setup-step-card p { min-height: 0; }
}


/* v0.22 ChatGPT/Codex browser setup guide */

/* v0.23 ChatGPT/Codex fast setup UI */
.setup-time-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 16px 0 18px;
}
.time-card {
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  background: #ffffff;
  padding: 16px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .05);
}
.time-card.recommended {
  border-color: #93c5fd;
  background: linear-gradient(180deg, #ffffff 0%, #eff6ff 100%);
}
.time-card strong {
  display: inline-block;
  font-size: 12px;
  color: #2563eb;
  background: #dbeafe;
  border-radius: 999px;
  padding: 3px 8px;
  margin-bottom: 8px;
}
.time-card h3 { margin: 0 0 6px; }
.time-card p { margin: 0 0 6px; font-weight: 700; color: #0f172a; }
.time-card span { color: #475569; font-size: 13px; }
.speed-guide { border-color: #bfdbfe; background: #eff6ff; }
@media (max-width: 1000px) {
  .setup-time-grid { grid-template-columns: 1fr; }
}

/* v0.24 token-embedded Codex prompt UI */
.token-ready-card {
  border-color: #bfdbfe;
  background: linear-gradient(180deg, #ffffff 0%, #eff6ff 100%);
}
.muted-token-card {
  border-color: #e5e7eb;
  background: #f8fafc;
}
.token-embedded-note {
  margin-top: 14px;
  border-color: #fbbf24;
  background: #fffbeb;
}
.quick-copy-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}
.quick-copy-card {
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  background: #ffffff;
  padding: 16px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .05);
}
.quick-copy-card.recommended {
  border-color: #93c5fd;
  background: #ffffff;
}
.quick-copy-card h3 {
  margin: 0 0 8px;
}
.quick-copy-card p {
  color: #475569;
  margin: 0 0 12px;
}
@media (max-width: 800px) {
  .quick-copy-grid { grid-template-columns: 1fr; }
}

/* v0.25 MCP Connector UI */
.mcp-primary-card {
  border: 1px solid rgba(37, 99, 235, 0.24);
  background: linear-gradient(180deg, rgba(239, 246, 255, 0.96), rgba(255, 255, 255, 0.98));
}
.secondary-connector-card {
  border-style: dashed;
  background: #fffdf7;
}
.consent-summary {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 14px 16px;
  margin: 16px 0;
}
.consent-summary p {
  margin: 6px 0;
}
.wide-auth-card {
  max-width: 760px;
}

/* v0.26 MCP manual setup UI */
.manual-connector-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  margin-top: 18px;
}
.manual-copy-card {
  border: 1px solid #dbe5f2;
  border-radius: 16px;
  padding: 16px;
  background: #f9fbff;
}
.manual-copy-card code {
  display: block;
  white-space: pre-wrap;
  word-break: break-all;
  margin-top: 10px;
}
.manual-copy-card textarea,
.manual-details textarea {
  width: 100%;
  margin-top: 10px;
}
.wide-copy-card {
  grid-column: 1 / -1;
}
.card-inner-subsection {
  margin-top: 18px;
  padding: 18px;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid #e4edf7;
}
.compact-steps-grid {
  margin-top: 12px;
}
.warning-guide-note {
  border-color: #f6c267;
  background: #fff8ec;
}
.manual-details {
  margin-top: 18px;
  border: 1px solid #dbe5f2;
  border-radius: 16px;
  padding: 14px 16px;
  background: #fff;
}
.manual-details summary {
  cursor: pointer;
  font-weight: 700;
}
.trouble-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-top: 12px;
}
.trouble-item {
  padding: 14px;
  border-radius: 14px;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
}
.trouble-item p {
  margin-bottom: 0;
}

.log-console {
  background: #0f172a;
  border-radius: 14px;
  padding: 14px;
  overflow: auto;
  max-height: 620px;
  font-size: 12px;
  line-height: 1.6;
}
.log-line {
  color: #e5e7eb;
  border-bottom: 1px solid rgba(255,255,255,.08);
  padding: 6px 0;
  white-space: pre-wrap;
  word-break: break-word;
}
.log-line:last-child { border-bottom: 0; }
.log-file {
  display: inline-block;
  color: #93c5fd;
  margin-right: 8px;
  font-weight: 700;
}
.log-line code {
  color: #e5e7eb;
  background: transparent;
  padding: 0;
}

/* v0.29 MCP registration clarity */
.badge.success { background: #ecfdf5; color: #065f46; }
.badge.failed { background: #fef2f2; color: #991b1b; }
.connector-note-box {
  margin: 14px 0 18px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid #bfdbfe;
  background: #eff6ff;
}
.connector-note-box p { margin: 6px 0 0; color: #334155; }
.endpoint-list { display: grid; gap: 10px; padding-top: 12px; }
.endpoint-list div { display: grid; grid-template-columns: 180px 1fr; gap: 10px; align-items: center; }
.endpoint-list span { font-weight: 700; color: #475569; }
.endpoint-list code { display: block; word-break: break-all; white-space: normal; }
@media (max-width: 640px) {
  .endpoint-list div { grid-template-columns: 1fr; }
}


/* v0.67 dashboard service cards */
.service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-top: 16px;
}
.service-card {
  display: block;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  background: #fff;
  color: var(--text);
}
.service-card:hover {
  border-color: #93c5fd;
  box-shadow: 0 6px 18px rgba(15,23,42,.08);
}
.service-card-title {
  display: block;
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 6px;
}
.service-card-desc {
  display: block;
  color: var(--muted);
  font-size: 13px;
}

.bb-dev { display: none; }


/* v0.69 human service UI */
.copy-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 6px 0 14px;
}
.copy-row code {
  display: inline-block;
  max-width: 100%;
  word-break: break-all;
}
.chatgpt-connector-card h2 {
  margin-bottom: 8px;
}
.dev-accordion-card {
  padding: 0;
}
.dev-accordion {
  padding: 0;
}
.dev-accordion > summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 22px;
  font-size: 18px;
  font-weight: 800;
}
.dev-accordion > summary::-webkit-details-marker {
  display: none;
}
.dev-accordion > summary::before {
  content: "▶";
  display: inline-block;
  margin-right: 8px;
  font-size: 13px;
}
.dev-accordion[open] > summary::before {
  content: "▼";
}
.dev-accordion-body {
  border-top: 1px solid var(--border);
  padding: 18px 22px 22px;
}
.bb-actions .button {
  margin-top: 0;
}


/* v0.70 BrowserBridge active agent and human-only WebBridge */
.bb-actions {
  align-items: stretch;
}
.bb-actions > .button,
.bb-actions > button {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 0;
}
.bb-id-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.human-hidden {
  display: none !important;
}
.human-primary-card {
  border-color: #bfdbfe;
}
.human-note {
  background: #f8fafc;
}


/* v0.71 BrowserBridge connection cleanup */
.bb-actions > .button,
.bb-actions > button,
.bb-id-row > button,
.bb-agent-name-edit > button {
  min-height: 44px;
}


/* v0.72 BrowserBridge agent list polish */
.bb-agent-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.bb-agent-action-button,
.bb-mini-button {
  line-height: 1.2;
}


/* v0.73 WebBridge Agent human simple */
.webbridge-human-card {
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
}
.agent-setup-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin: 16px 0 20px;
}
.agent-setup-steps > div {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #f8fafc;
  padding: 14px;
}
.agent-setup-steps strong {
  display: block;
  margin-bottom: 6px;
}
.agent-setup-steps p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}
.agent-primary-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: flex-start;
  margin: 18px 0;
}
.agent-primary-actions form {
  margin: 0;
}
.agent-primary-actions button {
  min-height: 46px;
}
.agent-code-form {
  min-width: 260px;
}
.agent-advanced-options {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 10px;
  background: #fff;
}
.agent-advanced-options > summary,
.agent-secondary-actions > summary,
.agent-install-help > summary {
  cursor: pointer;
  font-weight: 800;
}
.agent-advanced-options label {
  margin-top: 10px;
}
.agent-secondary-actions,
.agent-install-help {
  margin: 12px 0;
}


/* v0.74 session and ChatGPT limit settings */
.preset-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 10px 0 14px;
}
.preset-actions button {
  min-height: 38px;
}


/* v0.75 pairing code edit and timezone */
.pairing-code-table select,
.pairing-code-table input {
  min-height: 36px;
  font-size: 14px;
}
.pairing-code-edit {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(150px, 1fr);
  gap: 8px;
  min-width: 280px;
}
.pairing-code-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.inline-form {
  display: inline-flex;
  margin: 0;
}
.compact-input {
  min-width: 160px;
}
@media (max-width: 760px) {
  .pairing-code-edit {
    grid-template-columns: 1fr;
    min-width: 0;
  }
}


/* v0.76 WebBridge code issue UI */
.agent-actions-clean {
  display: grid;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  gap: 14px;
  align-items: stretch;
  max-width: 760px;
}
.agent-action-form {
  display: flex;
  margin: 0;
}
.agent-action-form button {
  width: 100%;
  min-height: 52px;
}
.agent-advanced-wide {
  max-width: 760px;
  margin: 12px 0 16px;
}
.agent-advanced-wide .grid-full {
  grid-column: 1 / -1;
}
.issued-code-box {
  border: 2px solid #93c5fd;
  background: #eff6ff;
  border-radius: 14px;
  padding: 16px;
  margin: 16px 0;
  max-width: 760px;
}
.issued-code-box h2 {
  margin-top: 0;
}
.issued-code-copy {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.issued-code-copy code {
  display: inline-block;
  background: #fff;
  border: 1px solid #bfdbfe;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: .04em;
}
@media (max-width: 760px) {
  .agent-actions-clean {
    grid-template-columns: 1fr;
  }
}


/* v0.77 WebBridge layout tune */
.agent-actions-clean {
  width: 100%;
  max-width: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.agent-action-form {
  width: 100%;
}
.agent-action-form button {
  width: 100%;
}
.agent-advanced-wide,
.issued-code-box {
  max-width: none;
}
.pairing-code-table th:nth-child(2),
.pairing-code-table th:nth-child(3),
.pairing-code-table td:nth-child(2),
.pairing-code-table td:nth-child(3) {
  text-align: center;
}
.pairing-code-table td:nth-child(2) input,
.pairing-code-table td:nth-child(3) select {
  text-align: center;
  text-align-last: center;
}
.pairing-code-edit {
  justify-content: center;
}
@media (max-width: 760px) {
  .agent-actions-clean {
    grid-template-columns: 1fr;
  }
}


/* v0.78 ChatGPT common settings */
.chatgpt-flow-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.chatgpt-flow-grid > div {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #f8fafc;
  padding: 14px;
}
.step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: #2563eb;
  color: #fff;
  font-weight: 800;
  margin-right: 8px;
}
.chatgpt-flow-grid strong {
  font-size: 16px;
}
.chatgpt-flow-grid p {
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 0;
}
.chatgpt-service-list {
  display: grid;
  gap: 14px;
}
.chatgpt-service-card {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
  background: #fff;
}
.service-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}
.service-card-head h3 {
  margin: 0 0 4px;
}
.service-card-head p {
  margin: 0;
  color: var(--muted);
}
.chatgpt-copy-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.chatgpt-copy-grid .grid-full {
  grid-column: 1 / -1;
}
.chatgpt-copy-grid input[readonly] {
  background: #f8fafc;
}
.chatgpt-ai-note {
  margin-top: 10px;
}
.chatgpt-ai-note summary {
  cursor: pointer;
  font-weight: 800;
}
@media (max-width: 760px) {
  .service-card-head {
    flex-direction: column;
  }
  .chatgpt-copy-grid {
    grid-template-columns: 1fr;
  }
}


/* v0.79 simplified ChatGPT settings */
.simple-service-card h3 {
  margin-top: 0;
  margin-bottom: 14px;
}
.simple-copy-grid .copy-row {
  align-items: center;
}
.simple-copy-grid code {
  background: #eef2ff;
  border-radius: 6px;
  padding: 6px 8px;
}


/* v0.80 ChatGPT setting copy rows */
.service-row-list {
  display: grid;
  gap: 16px;
}
.service-row-card {
  padding: 0;
  overflow: hidden;
  border-color: #cbd5e1;
}
.service-title-panel {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: #f8fafc;
  border-bottom: 1px solid var(--border);
}
.service-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: #111827;
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .04em;
}
.service-title-panel h3 {
  margin: 0 0 2px;
  font-size: 22px;
  font-weight: 800;
}
.service-title-panel p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}
.service-copy-rows {
  display: grid;
  gap: 0;
  padding: 4px 18px 18px;
}
.service-copy-row {
  display: grid;
  grid-template-columns: 130px 96px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid #eef2f7;
}
.service-copy-row:last-child {
  border-bottom: 0;
}
.service-copy-label {
  color: #0f172a;
  font-size: 15px;
  font-weight: 800;
}
.service-copy-row .copy-button {
  width: 86px;
  min-height: 38px;
}
.service-copy-row code {
  display: block;
  background: #eef2ff;
  border-radius: 8px;
  padding: 9px 10px;
  color: #0f172a;
  white-space: normal;
  word-break: break-all;
  line-height: 1.6;
}
@media (max-width: 760px) {
  .service-copy-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .service-copy-row .copy-button {
    width: 100%;
  }
}


/* v0.81 release Q&A content */
.qa-hero p {
  max-width: 820px;
}
.qa-index {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}
.qa-index a {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #f8fafc;
  color: #0f172a;
  font-weight: 800;
  text-decoration: none;
}
.qa-index a:hover {
  background: #eef2ff;
}
.qa-section h2 {
  margin-bottom: 6px;
}
.qa-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}
.qa-list details {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  padding: 0;
}
.qa-list summary {
  cursor: pointer;
  padding: 14px 16px;
  font-weight: 800;
}
.qa-list details[open] summary {
  border-bottom: 1px solid var(--border);
  background: #f8fafc;
}
.qa-list p {
  margin: 0;
  padding: 14px 16px 16px;
  color: #334155;
  line-height: 1.8;
}


/* v0.82 recent device delete */
.device-table .table-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.device-table .table-actions .small-button {
  min-height: 38px;
}


/* v0.83 public landing pages */
.public-nav .logout-link {
  background: #fff;
  color: #111827 !important;
  border-color: #fff;
}
.lp-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr);
  gap: 22px;
  align-items: stretch;
  margin-bottom: 18px;
}
.lp-hero-copy,
.lp-hero-panel,
.lp-bottom-cta {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 30px;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.lp-kicker {
  color: #2563eb;
  font-weight: 800;
  margin: 0 0 8px;
}
.lp-hero h1 {
  font-size: 46px;
  margin-bottom: 12px;
}
.lp-lead {
  font-size: 18px;
  line-height: 1.8;
  color: #334155;
  max-width: 680px;
}
.lp-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px;
}
.lp-hero-panel {
  display: grid;
  gap: 12px;
  align-content: center;
}
.lp-mini-card {
  border: 1px solid #dbe3ef;
  border-radius: 14px;
  padding: 16px;
  background: #f8fafc;
}
.lp-mini-card strong,
.lp-mini-card span {
  display: block;
}
.lp-mini-card span {
  color: var(--muted);
  margin-top: 4px;
}
.lp-section h2 {
  margin-bottom: 14px;
}
.lp-grid.three {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.lp-grid.three > div,
.lp-steps > div {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
  background: #f8fafc;
}
.lp-grid h3,
.lp-service-row h3 {
  margin-top: 0;
}
.lp-service-list {
  display: grid;
  gap: 12px;
}
.lp-service-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
}
.lp-service-row p {
  margin-bottom: 0;
  color: var(--muted);
}
.lp-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.lp-steps span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: #2563eb;
  color: white;
  font-weight: 800;
  margin-bottom: 10px;
}
.lp-steps strong {
  display: block;
}
.lp-steps p {
  color: var(--muted);
}
.lp-bottom-cta {
  text-align: center;
}
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.pricing-card {
  margin-bottom: 0;
}
.price-placeholder {
  border-radius: 12px;
  background: #eef2ff;
  color: #1d4ed8;
  padding: 12px 14px;
  font-weight: 800;
  margin: 14px 0;
}
@media (max-width: 900px) {
  .lp-hero,
  .lp-grid.three,
  .lp-steps,
  .pricing-grid {
    grid-template-columns: 1fr;
  }
  .lp-service-row {
    flex-direction: column;
    align-items: flex-start;
  }
}


/* Tools2109 common ON/OFF toggle rows */
.tool-toggle-list {
  display: grid;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
}
.tool-toggle-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  margin: 0;
  padding: 16px 18px;
  border-bottom: 1px solid #f1f5f9;
  cursor: pointer;
}
.tool-toggle-row:last-child {
  border-bottom: 0;
}
.tool-toggle-info strong,
.tool-toggle-info span {
  display: block;
}
.tool-toggle-info strong {
  font-size: 16px;
  margin-bottom: 4px;
}
.tool-toggle-info span {
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
}
.tool-switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.tool-switch input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  min-height: 1px;
  padding: 0;
  border: 0;
}
.tool-switch-track {
  position: relative;
  width: 52px;
  height: 28px;
  border-radius: 999px;
  background: #cbd5e1;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .08);
  transition: background .16s ease, box-shadow .16s ease;
}
.tool-switch-track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(15, 23, 42, .22);
  transition: transform .16s ease;
}
.tool-switch input[type="checkbox"]:checked + .tool-switch-track {
  background: #2563eb;
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, .35);
}
.tool-switch input[type="checkbox"]:checked + .tool-switch-track::after {
  transform: translateX(24px);
}
.tool-switch input[type="checkbox"]:focus-visible + .tool-switch-track {
  outline: 3px solid rgba(37, 99, 235, .28);
  outline-offset: 3px;
}
.tool-switch-state {
  min-width: 28px;
  color: #475569;
  font-weight: 800;
}
.tool-switch .on {
  display: none;
}
.tool-switch .off {
  display: inline;
}
.tool-switch input[type="checkbox"]:checked ~ .on {
  display: inline;
}
.tool-switch input[type="checkbox"]:checked ~ .off {
  display: none;
}
@media (max-width: 720px) {
  .tool-toggle-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .tool-switch {
    justify-content: flex-start;
  }
}


/* v17.66 public plan/auth UI */
.public-auth-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 460px);
  gap: 28px;
  align-items: center;
  margin: 28px 0 36px;
}
.public-auth-copy,
.public-plan-hero {
  border: 1px solid rgba(197, 212, 230, .9);
  border-radius: 24px;
  padding: 34px;
  background:
    radial-gradient(circle at 80% 10%, rgba(56, 189, 248, .22), transparent 28%),
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(236,247,255,.92));
  box-shadow: 0 18px 48px rgba(15, 45, 83, .10);
}
.public-auth-copy h1,
.public-plan-hero h1 {
  margin: 12px 0 12px;
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.08;
  letter-spacing: -.04em;
  color: #081b36;
}
.public-auth-copy p,
.public-plan-hero p {
  color: #334155;
  line-height: 1.9;
  font-weight: 650;
}
.public-kicker {
  display: inline-flex;
  align-items: center;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(37, 99, 235, .10);
  color: #1d4ed8;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .04em;
}
.public-auth-plan-chip {
  display: inline-flex;
  margin-top: 14px;
  padding: 10px 13px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #dbeafe;
  color: #1e3a8a;
  font-weight: 800;
}
.public-auth-card {
  max-width: none;
  margin: 0;
  border-radius: 20px;
  padding: 26px;
  box-shadow: 0 18px 48px rgba(15, 45, 83, .10);
}

.public-auth-card-single {
  max-width: 520px;
  margin: 42px auto;
}
.otp-card { max-width: 520px; margin: 42px auto; }
.auth-alt-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 16px 0 8px;
  font-weight: 700;
}
.oauth-future-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 18px;
}
.oauth-future-row button[disabled] {
  opacity: .55;
  cursor: not-allowed;
}
.small-note { font-size: 12px; line-height: 1.7; }
.public-plan-hero { margin-bottom: 22px; text-align: center; }
.public-plan-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}
.account-plan-grid { margin-bottom: 28px; }
.public-plan-card {
  position: relative;
  background: #fff;
  border: 1px solid #dbe3ef;
  border-radius: 22px;
  padding: 24px 20px;
  box-shadow: 0 14px 36px rgba(15,45,83,.08);
  min-height: 330px;
}
.public-plan-card.is-featured {
  border-color: #2563eb;
  box-shadow: 0 22px 50px rgba(37, 99, 235, .14);
}
.public-plan-card.is-current {
  outline: 2px solid rgba(16, 185, 129, .22);
}
.public-plan-card h2 { margin: 0 0 8px; }
.plan-ribbon,
.plan-current {
  display: inline-flex;
  margin-bottom: 12px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
}
.plan-ribbon { background: #2563eb; color: #fff; }
.plan-current { background: #dcfce7; color: #166534; }
.plan-lead { color: #64748b; min-height: 38px; }
.plan-price {
  margin: 14px 0;
  font-size: 32px;
  font-weight: 900;
  letter-spacing: -.04em;
}
.plan-price span { font-size: 13px; color: #64748b; letter-spacing: 0; }
.plan-items { padding-left: 0; list-style: none; display: grid; gap: 9px; min-height: 92px; }
.plan-items li { color: #334155; font-weight: 650; font-size: 13px; }
.plan-items li::before { content: "✓"; color: #10b981; font-weight: 900; margin-right: 7px; }
.plan-actions { display: grid; gap: 8px; }
.plan-actions .button { text-align: center; margin-top: 0; }
.plan-summary-card { border-radius: 18px; }
.plan-summary-line { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.plan-summary-name { font-size: 28px; font-weight: 900; color: #0f172a; }
.small-inline-link { margin-left: 10px; font-size: 12px; font-weight: 800; }
@media (max-width: 980px) {
  .public-plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .public-auth-layout { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .public-plan-grid { grid-template-columns: 1fr; }
  .oauth-future-row { grid-template-columns: 1fr; }
  .public-auth-copy, .public-plan-hero { padding: 24px; }
}
/* v18.16 public plan card visual alignment */
.public-plan-grid {
  align-items: stretch;
}

.public-plan-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 430px;
}

.public-plan-card:not(.is-current):not(.is-featured)::before {
  content: "";
  display: block;
  width: 1px;
  height: 26px;
  margin-bottom: 12px;
}

.public-plan-card .plan-ribbon,
.public-plan-card .plan-current {
  align-self: flex-start;
  min-height: 26px;
}

.public-plan-card h2 {
  min-height: 42px;
  display: flex;
  align-items: flex-start;
}

.public-plan-card .plan-lead {
  min-height: 52px;
  margin: 0 0 12px;
}

.public-plan-card .plan-price {
  min-height: 58px;
  margin: 8px 0 14px;
  display: flex;
  align-items: baseline;
}

.public-plan-card .plan-items {
  min-height: 124px;
  margin: 0 0 20px;
  align-content: start;
}

.public-plan-card form,
.public-plan-card .plan-actions {
  margin-top: auto;
}

.public-plan-card form {
  display: flex;
  align-items: flex-end;
}

.public-plan-card form button,
.public-plan-card .plan-actions .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 154px;
  text-align: center;
}

@media (max-width: 980px) {
  .public-plan-card {
    min-height: 410px;
  }
}

@media (max-width: 620px) {
  .public-plan-card {
    min-height: 0;
  }
  .public-plan-card:not(.is-current):not(.is-featured)::before,
  .public-plan-card h2,
  .public-plan-card .plan-lead,
  .public-plan-card .plan-price,
  .public-plan-card .plan-items {
    min-height: 0;
  }
}
/* v18.17 public plan card content centering */
.public-plan-card .plan-items {
  width: max-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

.public-plan-card form,
.public-plan-card .plan-actions {
  justify-content: center;
}

.public-plan-card form button,
.public-plan-card .plan-actions .button {
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 620px) {
  .public-plan-card .plan-items {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  .public-plan-card form button,
  .public-plan-card .plan-actions .button {
    width: 100%;
  }
}
/* v18.18 public plan card top centering */
.public-plan-card {
  text-align: center;
}

.public-plan-card:not(.is-current):not(.is-featured)::before {
  margin-left: auto;
  margin-right: auto;
}

.public-plan-card .plan-ribbon,
.public-plan-card .plan-current {
  align-self: center;
}

.public-plan-card h2 {
  justify-content: center;
  text-align: center;
}

.public-plan-card .plan-lead {
  text-align: center;
}

.public-plan-card .plan-price {
  justify-content: center;
  text-align: center;
}

.public-plan-card .plan-items {
  text-align: left;
}

@media (max-width: 620px) {
  .public-plan-card {
    text-align: left;
  }

  .public-plan-card .plan-ribbon,
  .public-plan-card .plan-current {
    align-self: flex-start;
  }

  .public-plan-card h2,
  .public-plan-card .plan-lead,
  .public-plan-card .plan-price {
    justify-content: flex-start;
    text-align: left;
  }
}

/* v18.19 public plan five-card responsive layout */
.public-plan-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 16px;
}

.public-plan-grid > .public-plan-card {
  flex: 0 1 calc((100% - 64px) / 5);
  min-width: 0;
}

@media (max-width: 1180px) {
  .public-plan-grid > .public-plan-card {
    flex-basis: calc((100% - 32px) / 3);
  }
}

@media (max-width: 760px) {
  .public-plan-grid > .public-plan-card {
    flex-basis: calc((100% - 16px) / 2);
  }
}

@media (max-width: 620px) {
  .public-plan-grid > .public-plan-card {
    flex-basis: 100%;
  }
}