﻿:root {
  color-scheme: light;
  --bg: #f6f9ff;
  --bg-strong: #edf4ff;
  --ink: #0f172a;
  --muted: #64748b;
  --panel: #ffffff;
  --line: #dbe7f6;
  --line-strong: #bfd2ea;
  --soft: #eef6ff;
  --soft-2: #f8fbff;
  --accent: #2563eb;
  --accent-strong: #1d4ed8;
  --accent-soft: #dbeafe;
  --accent-ink: #ffffff;
  --success: #059669;
  --warn: #b45309;
  --danger: #dc2626;
  --shadow: 0 14px 36px rgba(15, 23, 42, .08);
  --shadow-soft: 0 8px 22px rgba(15, 23, 42, .06);
}

* { box-sizing: border-box; }

html {
  min-height: 100%;
}

body {
  min-height: 100vh;
  margin: 0;
  background:
    linear-gradient(180deg, #f9fbff 0%, var(--bg-strong) 45%, #f8fafc 100%);
  color: var(--ink);
  font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  letter-spacing: 0;
}

::selection {
  background: var(--accent-soft);
  color: var(--ink);
}

.shell {
  width: min(1360px, calc(100% - 32px));
  margin: 0 auto;
  padding: 24px 0 44px;
}

.login-shell {
  width: min(460px, calc(100% - 32px));
  min-height: 100vh;
  display: grid;
  place-items: center;
  margin: 0 auto;
}

.login-panel {
  width: 100%;
}

.public-shell,
.admin-shell {
  width: min(1760px, calc(100% - 72px));
}

.admin-app-shell {
  width: 100%;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
}

.admin-sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 20px;
  padding: 24px 18px;
  background: #0b1220;
  color: #e2e8f0;
  box-shadow: 12px 0 34px rgba(15, 23, 42, .12);
  overflow: auto;
}

.admin-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(148, 163, 184, .22);
}

.admin-brand-mark {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #2563eb, #38bdf8);
  color: #fff;
  font-weight: 900;
  letter-spacing: .4px;
}

.admin-brand strong,
.admin-brand span {
  display: block;
}

.admin-brand strong {
  font-size: 18px;
}

.admin-brand span {
  margin-top: 2px;
  color: #94a3b8;
  font-size: 12px;
}

.admin-menu {
  display: grid;
  align-content: start;
  gap: 8px;
}

.admin-menu-item {
  min-height: 58px;
  width: 100%;
  justify-content: flex-start;
  display: grid;
  gap: 3px;
  border: 1px solid transparent;
  background: transparent;
  color: #cbd5e1;
  text-align: left;
  padding: 9px 12px;
}

.admin-menu-item span,
.admin-menu-item small {
  display: block;
}

.admin-menu-item span {
  font-weight: 800;
  color: inherit;
}

.admin-menu-item small {
  color: #94a3b8;
  font-size: 12px;
}

.admin-menu-item:hover {
  background: rgba(37, 99, 235, .12);
  border-color: rgba(96, 165, 250, .35);
  color: #fff;
}

.admin-menu-item.active {
  background: #eff6ff;
  border-color: #93c5fd;
  color: #1d4ed8;
  box-shadow: 0 12px 28px rgba(37, 99, 235, .22);
}

.admin-menu-item.active small {
  color: #3b82f6;
}

.admin-sidebar-footer {
  padding-top: 16px;
  border-top: 1px solid rgba(148, 163, 184, .22);
}

.admin-sidebar-footer .link-button {
  width: 100%;
}

.admin-main {
  min-width: 0;
  height: 100vh;
  overflow: auto;
  padding: 28px 36px 46px;
}

.admin-topbar {
  margin-bottom: 18px;
}

.admin-view {
  display: grid;
  gap: 18px;
}

.admin-view[hidden] {
  display: none !important;
}

.admin-view-title {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 0 2px;
}

.admin-view-title p {
  max-width: 780px;
}

.admin-alias-toolbar {
  justify-content: flex-end;
  flex-wrap: wrap;
}

.admin-session-grid {
  align-items: stretch;
}

.admin-create-panel {
  width: min(760px, 100%);
}

.admin-security-panel {
  width: min(760px, 100%);
}

.admin-mail-settings-panel {
  width: min(760px, 100%);
}

.admin-mail-settings-panel select {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: var(--soft-2);
  color: var(--ink);
  padding: 9px 11px;
  font: inherit;
  outline: none;
}

.admin-mail-settings-panel select:focus {
  border-color: var(--accent);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .14);
}

.admin-mail-enabled {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
}

.admin-mail-enabled input {
  width: 18px;
  min-height: 18px;
  margin: 0;
  accent-color: var(--accent);
}

.admin-mail-settings-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.admin-mail-settings-fields label:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.admin-mail-settings-actions {
  justify-content: flex-end;
}

.admin-security-control {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.admin-security-control h3 {
  margin: 0 0 8px;
}

.admin-security-control p,
.admin-security-status,
.admin-security-key-status {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.admin-security-status {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft-2);
  padding: 12px 14px;
}

.admin-toggle-button {
  flex: 0 0 auto;
  min-width: 190px;
  min-height: 46px;
  border-color: #cbd5e1;
  background: #f1f5f9;
  color: #475569;
}

.admin-toggle-button.active {
  border-color: #059669;
  background: #059669;
  color: #fff;
}

.admin-toggle-button.active:hover {
  border-color: #047857;
  background: #047857;
  color: #fff;
}

.admin-security-status.error,
.admin-security-key-status.error {
  color: var(--danger);
}

.admin-list-panel {
  min-height: 650px;
  height: calc(100vh - 210px);
  overflow: hidden;
  grid-template-rows: minmax(0, 1fr) auto;
}

.admin-alias-list-panel {
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.admin-alias-filters {
  display: grid;
  grid-template-columns: minmax(260px, 2fr) minmax(170px, .8fr) minmax(210px, 1fr) auto auto;
  gap: 10px;
  align-items: end;
}

.admin-alias-filters select {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: var(--soft-2);
  color: var(--ink);
  padding: 9px 34px 9px 11px;
  font: inherit;
  outline: none;
}

.admin-alias-filters select:focus {
  border-color: var(--accent);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .14);
}

.admin-alias-result-count {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--soft);
  color: var(--muted);
  padding: 0 12px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.admin-list-panel .table-wrap {
  height: 100%;
  min-height: 0;
  max-height: none;
}

.admin-session-grid > .panel {
  height: 430px;
  min-height: 430px;
  max-height: 430px;
  overflow: hidden;
  grid-template-rows: auto auto minmax(0, 1fr);
}

.admin-session-grid #sessionOutput,
.admin-session-grid #sessionImportInput {
  height: 260px;
  min-height: 260px;
  max-height: 260px;
  overflow: auto;
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 18px;
  padding: 0 2px 18px;
  border-bottom: 1px solid rgba(219, 231, 246, .9);
}

h1,
h2 {
  margin: 0;
  line-height: 1.2;
}

h1 {
  font-size: 30px;
  font-weight: 800;
}

h2 {
  font-size: 17px;
  font-weight: 800;
}

p {
  margin: 7px 0 0;
  color: var(--muted);
  line-height: 1.55;
}

.band { margin-top: 16px; }

.split {
  display: grid;
  grid-template-columns: minmax(300px, 1fr) minmax(300px, .85fr);
  gap: 16px;
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.public-shell .split {
  grid-template-columns: minmax(620px, 1.2fr) minmax(460px, .8fr);
  align-items: stretch;
  gap: 18px;
}

.public-shell .split > .panel {
  min-height: 356px;
  height: 100%;
}

.public-shell .grid-2 {
  grid-template-columns: minmax(600px, .9fr) minmax(720px, 1.1fr);
  gap: 18px;
}

.public-shell .mail-workspace {
  align-items: stretch;
}

.public-shell .mail-workspace > .panel {
  height: 620px;
  min-height: 620px;
  max-height: 620px;
  overflow: hidden;
  grid-template-rows: auto minmax(0, 1fr);
  align-content: stretch;
}

body.public-home-body {
  background: #f5f4ef;
  color: #24313f;
}

body.public-modal-open {
  overflow: hidden;
}

.public-home-shell {
  width: min(760px, calc(100% - 36px));
  padding: 18px 0 32px;
}

.public-home-hero {
  display: grid;
  gap: 18px;
}

.public-home-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: end;
  gap: 18px 28px;
  padding: 4px 10px 0;
}

.public-home-header h1 {
  font-size: 26px;
  color: #10233b;
}

.public-home-header p {
  margin: 0;
  font-size: 14px;
  color: #596c7d;
}

.public-query-panel {
  max-width: 100%;
  border-radius: 14px;
  border-color: #d9dfdf;
  box-shadow: 0 14px 28px rgba(15, 23, 42, .06);
  padding: 18px 20px;
}

.public-query-panel::before,
.public-mail-panel::before,
.public-result-workspace > .panel::before {
  display: none;
}

.public-query-panel .stack {
  gap: 14px;
}

.public-query-panel label {
  gap: 8px;
  color: #334155;
  font-size: 15px;
}

.public-query-panel input {
  min-height: 48px;
  border-radius: 8px;
  border-color: #d4dde6;
  background: #fff;
  padding: 11px 14px;
}

.token-input-wrap {
  position: relative;
}

.token-input-wrap input {
  padding-right: 56px;
}

.token-toggle-btn {
  position: absolute;
  top: 50%;
  right: 10px;
  width: 34px;
  min-width: 34px;
  min-height: 34px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #0f172a;
  transform: translateY(-50%);
}

.token-toggle-btn:hover {
  background: rgba(15, 23, 42, .06);
  color: #0f172a;
  border-color: transparent;
}

.token-toggle-btn svg {
  width: 18px;
  height: 18px;
}

.public-turnstile-box {
  min-height: 84px;
  padding: 0;
  width: 100%;
}

.public-turnstile-box .turnstile-widget {
  width: 100%;
  max-width: none;
}

.public-turnstile-box .turnstile-widget > div,
.public-turnstile-box .turnstile-widget iframe {
  width: 100% !important;
  max-width: 100% !important;
}

.public-query-submit {
  min-height: 50px;
  border-radius: 8px;
  border-color: #196c60;
  background: #196c60;
  font-size: 15px;
  letter-spacing: .16em;
}

.public-query-submit:hover {
  border-color: #14574d;
  background: #14574d;
}

.public-query-status {
  margin: 0;
  font-size: 14px;
}

.public-home-notices {
  display: grid;
  gap: 6px;
  justify-items: center;
  text-align: center;
  padding: 2px 0;
}

.public-home-notice {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
}

.public-home-notice.warn {
  color: #ff9d00;
}

.public-home-notice.danger {
  color: #ff7d95;
}

.public-home-accordion-group {
  display: grid;
  gap: 16px;
}

.public-home-accordion {
  border: 1px solid #f2d29c;
  border-radius: 14px;
  background: rgba(255, 247, 235, .9);
  overflow: hidden;
}

.public-home-accordion.policy {
  border-color: #cfd3ff;
  background: rgba(241, 243, 255, .92);
}

.public-home-accordion summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 56px;
  padding: 0 18px;
  border-bottom: 1px solid rgba(236, 205, 143, .85);
}

.public-home-accordion summary::-webkit-details-marker {
  display: none;
}

.public-home-accordion.policy summary {
  border-bottom-color: rgba(198, 204, 255, .9);
}

.public-home-accordion-title {
  color: #10233b;
  font-size: 17px;
  font-weight: 800;
}

.public-home-accordion-arrow {
  color: #10233b;
  font-size: 14px;
  transition: transform .16s ease;
}

.public-home-accordion[open] .public-home-accordion-arrow {
  transform: rotate(90deg);
}

.public-home-accordion-body {
  padding: 14px 18px 16px;
}

.public-home-accordion-body ul {
  margin: 0;
  padding-left: 18px;
  color: #18222d;
  display: grid;
  gap: 8px;
}

.public-home-advice-list li,
.public-home-policy-body li {
  line-height: 1.75;
}

.public-home-advice-list li.accent {
  color: #f39c12;
  font-weight: 700;
}

.public-home-advice-list li.danger {
  color: #ff6f7f;
}

.public-home-accordion-body a {
  color: #4e82ff;
  text-decoration: underline;
}

.public-home-inline-links {
  margin: 10px 0 0;
  color: #18222d;
  font-size: 14px;
}

.public-home-policy-body {
  background: rgba(245, 246, 252, .75);
}

.public-home-policy-section {
  display: grid;
  gap: 8px;
}

.public-home-policy-title {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
}

.public-home-policy-title.success {
  color: #14d78f;
}

.public-home-policy-title.process {
  color: #1fd59a;
}

.public-home-policy-title.danger {
  color: #ff648b;
}

.public-home-policy-highlight {
  color: #14d78f;
  font-weight: 800;
}

.public-home-policy-divider {
  border: 0;
  border-top: 1px dashed #cfd6ec;
  margin: 12px 0;
}

.public-home-policy-note {
  margin: 8px 0 0;
  text-align: center;
  color: #f3a21c;
  font-size: 14px;
  font-weight: 700;
}

.public-result-workspace {
  margin-top: 18px;
}

.public-result-workspace,
.public-result-workspace > .panel {
  border-radius: 16px;
  border-color: rgba(204, 214, 222, .95);
  box-shadow: 0 14px 28px rgba(15, 23, 42, .06);
}

.public-mail-panel {
  display: grid;
  gap: 14px;
  padding: 16px 18px 18px;
}

.public-mail-toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
}

.public-mail-toolbar > #refreshMessagesBtn {
  min-width: 92px;
  min-height: 44px;
  border-radius: 10px;
  border-color: #22746a;
  color: #0f7b6f;
  background: #fff;
}

.public-mail-toolbar > #refreshMessagesBtn:hover {
  border-color: #1b635a;
  color: #0f665d;
  background: #f7fbfa;
}

.public-mail-toolbar-meta {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

.public-refresh-countdown {
  min-width: 34px;
  text-align: right;
  color: #0f766e;
  font-size: 15px;
  font-weight: 700;
}

.public-switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #334155;
  font-size: 15px;
  font-weight: 600;
  user-select: none;
}

.public-switch input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.public-switch-track {
  width: 48px;
  min-width: 48px;
  height: 28px;
  border-radius: 999px;
  background: #d1d9e0;
  padding: 4px;
  display: inline-flex;
  align-items: center;
  transition: background .18s ease;
}

.public-switch-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(15, 23, 42, .18);
  transition: transform .18s ease;
}

.public-switch input:checked + .public-switch-track {
  background: #0f766e;
}

.public-switch input:checked + .public-switch-track .public-switch-thumb {
  transform: translateX(20px);
}

.public-switch input:disabled + .public-switch-track {
  background: #dbe4eb;
}

.public-switch input:disabled + .public-switch-track .public-switch-thumb {
  background: #f8fafc;
}

.public-switch input:disabled ~ .public-switch-label {
  color: #94a3b8;
}

.public-mail-list {
  min-height: 160px;
  max-height: none;
  border-color: #d6ddd8;
  border-radius: 12px;
  overflow: hidden auto;
}

.public-mail-list.empty {
  min-height: 120px;
  color: #607487;
  font-size: 14px;
  background: linear-gradient(180deg, #fff 0%, #fbfcfb 100%);
}

.public-mail-item {
  border-bottom: 1px solid #dfe5e0;
  background: #fff;
}

.public-mail-item:last-child {
  border-bottom: 0;
}

.public-mail-item.expanded {
  background: #eef4f0;
}

.public-mail-item-toggle {
  width: 100%;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  text-align: left;
}

.public-mail-item-toggle:hover {
  border-color: transparent;
  background: #f8fbf8;
  color: inherit;
}

.public-mail-item.expanded .public-mail-item-toggle {
  background: #eef4f0;
}

.public-mail-item-main {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.public-mail-item-titleline {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.public-mail-item-from {
  color: #0f172a;
  font-size: 15px;
  font-weight: 800;
  white-space: nowrap;
}

.public-mail-item-subject {
  min-width: 0;
  color: #5b6c7b;
  font-size: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.public-mail-item-snippet {
  color: #7a8998;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.public-mail-item-side {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}

.public-mail-item-date {
  color: #607487;
  font-size: 13px;
}

.public-mail-item-arrow {
  color: #738292;
  font-size: 14px;
  transition: transform .16s ease;
}

.public-mail-item.expanded .public-mail-item-arrow {
  transform: rotate(90deg);
}

.public-mail-item-body {
  padding: 0 16px 16px;
  background: #eef4f0;
}

.public-mail-detail-card {
  display: grid;
  gap: 12px;
  border: 1px solid #d6e1da;
  border-radius: 12px;
  background: #fff;
  padding: 12px;
  max-height: 360px;
  overflow: auto;
}

.public-mail-code-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid #c3ddd1;
  border-radius: 10px;
  background: #edf8f1;
  padding: 12px 14px;
}

.public-mail-code-value {
  color: #0f766e;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: .28em;
}

.public-mail-copy-btn {
  min-height: 38px;
  border-radius: 10px;
  padding: 0 12px;
}

.public-mail-link-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid #c3ddd1;
  border-radius: 10px;
  background: #edf8f1;
  padding: 12px 14px;
  margin-top: 10px;
}

.public-mail-link-info {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.public-mail-link-label {
  color: #0f766e;
  font-size: 13px;
  font-weight: 700;
}

.public-mail-link-value {
  color: #0f766e;
  font-size: 13px;
  font-weight: 600;
  overflow-wrap: anywhere;
  word-break: break-all;
}

.public-mail-link-card .public-mail-copy-btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

.public-mail-body {
  display: grid;
  gap: 12px;
  color: #405260;
  font-size: 15px;
  line-height: 1.7;
  overflow-wrap: anywhere;
}

.public-mail-body p {
  margin: 0;
}

.public-mail-inline-status {
  min-height: 86px;
  display: grid;
  place-items: center;
  color: #607487;
  font-size: 14px;
  border: 1px dashed #cfd8d2;
  border-radius: 10px;
  background: #f8fbf9;
}

.public-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(15, 23, 42, .58);
  backdrop-filter: blur(6px);
}

.public-modal-card {
  width: min(640px, calc(100vw - 32px));
  display: grid;
  gap: 16px;
  border: 1px solid rgba(245, 158, 11, .45);
  border-radius: 20px;
  background: linear-gradient(180deg, #1a1b33 0%, #171729 100%);
  box-shadow: 0 36px 80px rgba(15, 23, 42, .42);
  padding: 24px 22px 18px;
  color: #f8fafc;
}

.public-modal-head {
  display: grid;
  gap: 8px;
  text-align: center;
}

.public-modal-head h2 {
  margin: 0;
  color: #f59e0b;
  font-size: 32px;
  font-weight: 800;
}

.public-modal-head p {
  margin: 0;
  color: rgba(226, 232, 240, .82);
  font-size: 14px;
}

.public-modal-section {
  display: grid;
  gap: 10px;
  border: 1px solid rgba(245, 158, 11, .24);
  border-radius: 14px;
  background: rgba(23, 23, 42, .72);
  padding: 16px 16px 14px;
}

.public-modal-section h3,
.public-modal-policy h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
}

.public-modal-section h3 {
  color: #67e8f9;
}

.public-modal-list {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 8px;
  color: #e5edf6;
  line-height: 1.7;
}

.public-modal-list a,
.public-modal-links a {
  color: #8dc7ff;
  text-decoration: underline;
}

.public-modal-links {
  margin: 0;
  color: #94a3b8;
  font-size: 13px;
}

.public-modal-policy-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.public-modal-policy {
  display: grid;
  gap: 10px;
  border-radius: 14px;
  padding: 16px 15px;
  border: 1px solid rgba(148, 163, 184, .2);
}

.public-modal-policy.success {
  background: rgba(15, 118, 110, .18);
  border-color: rgba(45, 212, 191, .24);
}

.public-modal-policy.success h3 {
  color: #34d399;
}

.public-modal-policy.danger {
  background: rgba(127, 29, 29, .2);
  border-color: rgba(248, 113, 113, .24);
}

.public-modal-policy.danger h3 {
  color: #fb7185;
}

.public-modal-policy p {
  margin: 0;
  color: #e5edf6;
  line-height: 1.65;
}

.public-modal-confirm {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: 12px;
  background: rgba(15, 23, 42, .32);
  padding: 14px 14px;
  color: #e2e8f0;
}

.public-modal-confirm.disabled {
  opacity: .72;
  cursor: not-allowed;
}

.public-modal-confirm input {
  width: 18px;
  min-width: 18px;
  min-height: 18px;
  height: 18px;
  margin-top: 2px;
}

.public-modal-confirm input:disabled {
  cursor: not-allowed;
}

.public-modal-close-btn {
  min-height: 50px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 700;
}

.public-modal-close-btn:disabled {
  cursor: not-allowed;
  opacity: .62;
}

.admin-shell .grid-3 {
  grid-template-columns: minmax(360px, 1fr) minmax(360px, 1fr) minmax(360px, 1fr);
}

.admin-shell .admin-tools-grid {
  align-items: stretch;
}

.admin-shell .admin-tools-grid > .panel {
  height: 560px;
  min-height: 560px;
  max-height: 560px;
  overflow: hidden;
  align-content: stretch;
}

.admin-shell .admin-tools-grid .stack {
  gap: 10px;
}

.admin-shell .grid-2 {
  grid-template-columns: minmax(560px, 1fr) minmax(560px, 1fr);
  gap: 18px;
}

.panel {
  position: relative;
  background: rgba(255, 255, 255, .96);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: 18px;
}

.panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  border-radius: 8px 8px 0 0;
  background: linear-gradient(90deg, var(--accent), #38bdf8);
  opacity: .82;
}

body.admin-ui-blocked {
  overflow: hidden;
}

.admin-busy-overlay,
.admin-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(15, 23, 42, .46);
  backdrop-filter: blur(4px);
}

.admin-busy-card,
.admin-modal {
  width: min(440px, calc(100vw - 32px));
  border: 1px solid rgba(191, 210, 234, .85);
  border-radius: 18px;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 28px 72px rgba(15, 23, 42, .24);
  padding: 28px 24px;
}

.admin-busy-card {
  display: grid;
  justify-items: center;
  gap: 14px;
  text-align: center;
}

.admin-busy-card strong,
.admin-modal-head h2 {
  color: var(--ink);
  font-size: 20px;
}

.admin-busy-card p,
.admin-modal-message {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.admin-spinner {
  width: 52px;
  height: 52px;
  border: 4px solid rgba(37, 99, 235, .16);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: admin-spin .75s linear infinite;
}

.admin-modal {
  display: grid;
  gap: 18px;
}

.admin-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.admin-modal .button-row {
  justify-content: flex-end;
}

@keyframes admin-spin {
  to {
    transform: rotate(360deg);
  }
}

.stack {
  display: grid;
  gap: 12px;
  align-content: start;
}

.panel-head,
.button-row,
.inline-form {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

[hidden] { display: none !important; }

.mode-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft);
}

.mode-tab {
  min-height: 44px;
  border-color: transparent;
  background: transparent;
  color: var(--muted);
  font-weight: 800;
}

.mode-tab.active {
  background: var(--panel);
  border-color: var(--line-strong);
  color: var(--accent-strong);
  box-shadow: var(--shadow-soft);
}

.mode-panel { margin: 0; }

.turnstile-box {
  min-height: 74px;
  display: flex;
  align-items: center;
  width: 100%;
}

.turnstile-widget {
  min-height: 65px;
  width: 100%;
  max-width: 100%;
}

.turnstile-widget > div,
.turnstile-widget iframe {
  width: 100% !important;
  max-width: 100% !important;
}

.turnstile-unavailable {
  min-height: 50px;
  border: 1px solid #fecaca;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: var(--danger);
  background: #fff5f5;
}

.inline-form input {
  flex: 1;
  min-width: 180px;
}

label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

input,
textarea,
button,
.link-button {
  min-height: 44px;
  border-radius: 7px;
  font: inherit;
}

input,
textarea {
  width: 100%;
  border: 1px solid var(--line-strong);
  background: var(--soft-2);
  color: var(--ink);
  padding: 9px 11px;
  outline: none;
}

input::placeholder,
textarea::placeholder {
  color: #94a3b8;
}

input:focus,
textarea:focus {
  border-color: var(--accent);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .14);
}

textarea {
  min-height: 118px;
  resize: vertical;
  line-height: 1.5;
}

button,
.link-button {
  border: 1px solid var(--line-strong);
  background: #fff;
  color: var(--ink);
  padding: 0 14px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

button.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

button.primary:hover {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
}

button:hover,
.link-button:hover {
  border-color: var(--accent);
  color: var(--accent-strong);
  background: #f8fbff;
}

button.primary:hover {
  color: var(--accent-ink);
}

button:active,
.link-button:active {
  transform: translateY(1px);
}

button.danger,
.small-button.danger {
  border-color: #fecaca;
  background: #fff5f5;
  color: var(--danger);
}

button:disabled {
  opacity: .62;
  cursor: wait;
}

.status {
  min-height: 22px;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.status.error { color: var(--danger); }
.muted { color: var(--muted); }

.kv {
  display: grid;
  grid-template-columns: 128px 1fr;
  gap: 9px 14px;
  margin: 0;
}

.kv dt {
  color: var(--muted);
  font-weight: 800;
}

.kv dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.pill {
  min-width: 36px;
  min-height: 30px;
  border: 1px solid var(--line);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-strong);
  background: var(--accent-soft);
  font-weight: 800;
}

.list {
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  overflow: auto;
  min-height: 280px;
  max-height: 540px;
  background: #fff;
}

.public-shell .mail-workspace .list {
  height: 100%;
  min-height: 0;
  max-height: none;
}

.list.empty {
  display: grid;
  place-items: center;
  color: var(--muted);
  background: linear-gradient(180deg, #fff 0%, #f8fbff 100%);
}

.list-item {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  display: grid;
  gap: 4px;
  min-height: 74px;
  text-align: left;
  padding: 12px 14px;
}

.list-item:last-child {
  border-bottom: 0;
}

.list-item:hover {
  background: var(--soft);
}

.list-item.active {
  background: #eaf2ff;
  box-shadow: inset 4px 0 0 var(--accent);
}

.list-title {
  color: var(--ink);
  font-weight: 800;
}

.list-meta,
.list-snippet {
  color: var(--muted);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.message-detail,
.compact-output {
  margin: 0;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: #0b1220;
  color: #e2e8f0;
  padding: 12px;
  white-space: pre-wrap;
  word-break: break-word;
  min-height: 260px;
  overflow: auto;
  font-size: 13px;
  line-height: 1.55;
}

.public-shell .mail-detail,
.admin-shell .admin-mail-workspace .admin-mail-detail {
  background: #fff;
  color: var(--ink);
  font-family: inherit;
  font-size: 14px;
  height: 100%;
  line-height: 1.65;
  min-height: 0;
  max-height: none;
  overflow: auto;
  padding: 0;
  white-space: normal;
}

.public-shell .mail-detail.empty,
.admin-shell .admin-mail-workspace .admin-mail-detail.empty {
  display: grid;
  place-items: center;
  color: var(--muted);
  background: linear-gradient(180deg, #fff 0%, #f8fbff 100%);
}

.public-shell .mail-detail.error,
.admin-shell .admin-mail-workspace .admin-mail-detail.error {
  color: var(--danger);
}

.mail-html-frame {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: block;
  border: 0;
  background: #fff;
}

.mail-preview {
  width: min(460px, 100%);
  margin: 0 auto;
  padding: 46px 24px 56px;
  background: #fff;
  color: #202124;
  font-family: Arial, Helvetica, sans-serif;
}

.mail-preview-brand {
  margin: 0 0 42px;
  font-size: 30px;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: 0;
}

.mail-preview-prompt,
.mail-preview-note,
.mail-preview-signoff p {
  margin: 0;
  color: #4d5663;
  font-size: 16px;
  line-height: 1.6;
}

.mail-preview-code {
  width: min(284px, 100%);
  margin: 18px 0 24px;
  padding: 22px 26px;
  border-radius: 14px;
  background: #f1f1f1;
  color: #4b5563;
  font-size: 25px;
  line-height: 1.5;
  letter-spacing: 1.5px;
}

.mail-preview-note a {
  color: #0b74de;
}

.mail-preview-signoff {
  display: grid;
  gap: 4px;
  margin-top: 44px;
}

.mail-preview-body {
  display: grid;
  gap: 12px;
  overflow-wrap: anywhere;
}

.mail-preview-body p {
  margin: 0;
  color: #333b45;
  font-size: 16px;
  line-height: 1.7;
}

.compact-output { min-height: 132px; }

.generated-list {
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: #fff;
  min-height: 86px;
  max-height: 220px;
  overflow: auto;
}

.generated-list.empty {
  display: grid;
  place-items: center;
  color: var(--muted);
  background: linear-gradient(180deg, #fff 0%, #f8fbff 100%);
}

.generated-cdk-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 46px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
}

.generated-cdk-row:last-child { border-bottom: 0; }

.generated-cdk-row code {
  overflow-wrap: anywhere;
  color: var(--ink);
}

.table-wrap {
  overflow: auto;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  min-height: 280px;
  background: #fff;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

th,
td {
  border-bottom: 1px solid var(--line);
  padding: 10px 11px;
  text-align: left;
  vertical-align: top;
  white-space: nowrap;
}

th {
  position: sticky;
  top: 0;
  z-index: 1;
  color: #475569;
  background: #f1f7ff;
  font-weight: 800;
}

tr:hover td {
  background: #f8fbff;
}

td.wrap {
  white-space: normal;
  overflow-wrap: anywhere;
}

.alias-select-cell,
.alias-select-head {
  width: 52px;
  text-align: center;
}

.alias-select-checkbox {
  width: 18px;
  height: 18px;
  min-height: 18px;
  margin: 0;
}

.table-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.shell:not(.public-shell) .grid-2,
.shell:not(.public-shell) .grid-3 {
  align-items: start;
}

.shell:not(.public-shell) .panel,
.shell:not(.public-shell) .stack {
  min-width: 0;
  min-height: 0;
}

.shell:not(.public-shell) textarea {
  resize: none;
}

.shell:not(.public-shell) .table-wrap,
.shell:not(.public-shell) .list,
.shell:not(.public-shell) .message-detail {
  height: 280px;
  min-height: 280px;
  max-height: 280px;
  overflow: auto;
}

.admin-app-shell .admin-list-panel .table-wrap {
  height: 100%;
  min-height: 0;
  max-height: none;
}

.shell:not(.public-shell) .compact-output {
  height: 150px;
  min-height: 150px;
  max-height: 150px;
}

.shell:not(.public-shell) .generated-list {
  height: 110px;
  min-height: 110px;
  max-height: 110px;
}

.shell:not(.public-shell) #createdCdksOutput,
.shell:not(.public-shell) #sessionImportInput {
  height: 108px;
  min-height: 108px;
  max-height: 108px;
}

.admin-shell .admin-tools-grid .compact-output,
.admin-shell .admin-tools-grid .generated-list {
  height: 150px;
  min-height: 150px;
  max-height: 150px;
  overflow: auto;
}

.admin-shell .admin-tools-grid #createdCdksOutput,
.admin-shell .admin-tools-grid #sessionImportInput {
  height: 108px;
  min-height: 108px;
  max-height: 108px;
}

.admin-shell .admin-tools-grid #createdCdkList {
  height: 110px;
  min-height: 110px;
  max-height: 110px;
}

.admin-shell .admin-data-grid > .panel {
  height: 390px;
  min-height: 390px;
  max-height: 390px;
  overflow: hidden;
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-content: stretch;
}

.admin-shell .admin-data-grid .table-wrap {
  height: 100%;
  min-height: 0;
  max-height: none;
}

.admin-shell .admin-mail-workspace {
  align-items: stretch;
}

.admin-shell .admin-mail-workspace > .panel {
  height: 620px;
  min-height: 620px;
  max-height: 620px;
  overflow: hidden;
  grid-template-rows: auto auto minmax(0, 1fr);
  align-content: stretch;
}

.admin-shell .admin-mail-workspace > .panel:last-child {
  grid-template-rows: auto minmax(0, 1fr);
}

.admin-shell .admin-mail-workspace .list {
  height: 100%;
  min-height: 0;
  max-height: none;
}

.admin-shell .admin-mail-workspace .admin-mail-detail {
  height: 100%;
  min-height: 0;
  max-height: none;
}

.admin-shell .admin-log-panel .message-detail {
  height: 220px;
  min-height: 220px;
  max-height: 220px;
}

.small-button {
  min-height: 34px;
  padding: 0 10px;
  font-size: 12px;
  white-space: nowrap;
}

.pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
}

.page-size {
  width: auto;
  min-height: 34px;
  padding: 0 8px;
}

@media (prefers-reduced-motion: no-preference) {
  button,
  .link-button,
  input,
  textarea,
  .list-item,
  tr td {
    transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease, color .16s ease, transform .12s ease;
  }
}

@media (max-width: 1200px) {
  .public-shell,
  .admin-shell:not(.admin-app-shell) {
    width: min(100% - 40px, 1100px);
  }

  .public-shell .split,
  .public-shell .grid-2,
  .admin-shell .grid-3,
  .admin-shell .grid-2 {
    grid-template-columns: 1fr;
  }

  .admin-shell .admin-tools-grid > .panel {
    height: 540px;
    min-height: 540px;
    max-height: 540px;
  }
}

@media (max-width: 900px) {
  .shell {
    width: min(100% - 24px, 760px);
    padding-top: 18px;
  }

  .split,
  .grid-2,
  .grid-3,
  .two-col {
    grid-template-columns: 1fr;
  }

  .topbar {
    flex-direction: column;
  }

  .inline-form,
  .panel-head {
    align-items: stretch;
    flex-direction: column;
  }

  .inline-form input,
  .inline-form button,
  .panel-head button {
    width: 100%;
  }

  .generated-cdk-row {
    grid-template-columns: 1fr;
  }

  .table-actions {
    display: flex;
  }

  .pager {
    justify-content: stretch;
  }

  .pager > * {
    flex: 1;
  }

  .public-shell .split > .panel {
    min-height: auto;
  }

  .public-home-shell {
    width: min(100% - 24px, 760px);
    padding-top: 20px;
  }

  .public-home-header {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 8px;
  }

  .public-home-notice {
    font-size: 13px;
  }

  .public-mail-toolbar {
    flex-wrap: wrap;
  }

  .public-mail-toolbar-meta {
    width: 100%;
    justify-content: space-between;
    margin-left: 0;
  }

  .public-mail-item-toggle {
    grid-template-columns: 1fr;
  }

  .public-mail-item-side {
    justify-content: space-between;
  }

  .public-mail-item-titleline {
    flex-wrap: wrap;
  }

  .public-mail-item-from,
  .public-mail-item-subject,
  .public-mail-item-snippet {
    white-space: normal;
  }

  .public-mail-code-card {
    align-items: flex-start;
    flex-direction: column;
  }

  .public-home-footer-meta {
    gap: 8px;
    flex-direction: column;
  }

  .public-shell .mail-workspace > .panel,
  .admin-shell .admin-data-grid > .panel,
  .admin-shell .admin-mail-workspace > .panel {
    height: 540px;
    min-height: 540px;
    max-height: 540px;
  }

  .admin-shell .admin-tools-grid > .panel {
    height: 560px;
    min-height: 560px;
    max-height: 560px;
  }

  .admin-app-shell {
    width: 100%;
    grid-template-columns: 1fr;
  }

  .admin-sidebar {
    position: static;
    height: auto;
    grid-template-rows: auto auto auto;
    padding: 16px 14px;
  }

  .admin-menu {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-main {
    height: auto;
    min-height: 100vh;
    padding: 18px 14px 36px;
  }

  .admin-view-title {
    flex-direction: column;
  }

  .admin-alias-filters {
    grid-template-columns: 1fr;
  }

  .admin-mail-settings-fields {
    grid-template-columns: 1fr;
  }

  .admin-mail-settings-fields label:last-child:nth-child(odd) {
    grid-column: auto;
  }

  .admin-alias-result-count {
    justify-content: flex-start;
  }

  .admin-list-panel,
  .admin-session-grid > .panel {
    height: 540px;
    min-height: 540px;
    max-height: 540px;
  }
}

/* ----------------------------------------------------------------
   AGENT PAGE - Light Admin Workspace
   ---------------------------------------------------------------- */

.agent-page {
  --agent-bg: #f3f7fc;
  --agent-surface: #fff;
  --agent-soft: #f7faff;
  --agent-sidebar: #0c1729;
  --agent-text: #14233b;
  --agent-text-soft: #34445d;
  --agent-muted: #6c7a90;
  --agent-line: #d9e3f0;
  --agent-line-strong: #c5d4e7;
  --agent-primary: #4f7ff7;
  --agent-primary-strong: #356be8;
  --agent-primary-soft: #eaf2ff;
  --agent-success: #168a65;
  --agent-success-soft: #e9f8f2;
  --agent-warning: #ad6a13;
  --agent-warning-soft: #fff5e5;
  --agent-danger: #c84455;
  --agent-danger-soft: #fff0f2;
  --agent-radius: 12px;
  --agent-shadow: 0 8px 28px rgba(35, 66, 110, .08);
  min-width: 0;
  min-height: 100dvh;
  margin: 0;
  overflow-x: hidden;
  background: var(--agent-bg);
  color: var(--agent-text);
  color-scheme: light;
  font-family: Inter, "Segoe UI", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.55;
}

.agent-page *, .agent-page *::before, .agent-page *::after { box-sizing: border-box; }
.agent-page h1, .agent-page h2, .agent-page h3, .agent-page p { color: inherit; }
.agent-page button, .agent-page input, .agent-page textarea, .agent-page select { font: inherit; }
.agent-page button { cursor: pointer; touch-action: manipulation; }
.agent-page button:disabled { cursor: not-allowed; opacity: .5; transform: none !important; box-shadow: none !important; }
.agent-page button:focus-visible,
.agent-page input:focus-visible,
.agent-page textarea:focus-visible,
.agent-page select:focus-visible,
.agent-page a:focus-visible { outline: 3px solid rgba(79, 127, 247, .38); outline-offset: 2px; }

.agent-skip-link {
  position: fixed; top: 10px; left: 10px; z-index: 1200;
  padding: 10px 14px; border-radius: 8px; background: #fff; color: #12213a;
  font-weight: 800; text-decoration: none; box-shadow: var(--agent-shadow);
  transform: translateY(-150%); transition: transform .18s ease;
}
.agent-skip-link:focus { transform: translateY(0); }

/* Login */
.agent-login-overlay {
  position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center;
  min-height: 100dvh; padding: 28px 18px; overflow: auto; background: #f2f6fb;
}
.agent-login-bg-grid {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 16% 12%, rgba(79,127,247,.10), transparent 28rem),
              radial-gradient(circle at 84% 86%, rgba(56,189,248,.08), transparent 24rem),
              linear-gradient(180deg, #f8fbff, #eef4fb);
}
.agent-login-card {
  position: relative; width: min(100%, 480px); margin: 0; padding: 40px 40px 36px;
  border: 1px solid #d7e2ef; border-radius: 18px; background: #fff;
  box-shadow: 0 24px 70px rgba(28, 60, 103, .14); animation: agent-enter .25s ease-out both;
}
.agent-login-logo { display: grid; justify-items: center; text-align: center; }
.agent-login-icon, .agent-brand-icon { display: grid; place-items: center; color: #fff; background: var(--agent-primary); }
.agent-login-icon { width: 58px; height: 58px; margin-bottom: 18px; border-radius: 14px; box-shadow: 0 10px 24px rgba(79,127,247,.26); }
.agent-login-logo h1 { margin: 0; color: var(--agent-text); font-size: 29px; font-weight: 800; letter-spacing: -.035em; }
.agent-login-eyebrow { margin: 8px 0 0; color: #5a79bd !important; font-size: 12px; font-weight: 800; letter-spacing: .17em; }
.agent-login-card > .agent-status {
  display: flex; align-items: center; justify-content: center; min-height: 24px;
  margin: 24px 0 14px; color: var(--agent-muted); font-size: 14px; text-align: center;
}
.agent-login-card > .agent-status.error { color: var(--agent-danger); }
.agent-login-form { display: grid; gap: 18px; }
.agent-login-form label, .agent-token-card label { display: grid; gap: 8px; margin: 0; color: var(--agent-text-soft); font-size: 14px; font-weight: 700; }
.agent-login-form input, .agent-token-card input, .agent-token-card textarea {
  width: 100%; min-height: 52px; margin: 0; border: 1px solid var(--agent-line-strong);
  border-radius: 9px; background: #fff; color: var(--agent-text);
}
.agent-login-form input { padding: 0 15px; font-size: 16px; }
.agent-login-form input::placeholder, .agent-token-card input::placeholder, .agent-token-card textarea::placeholder { color: #94a3b8; }
.agent-login-form input:hover, .agent-token-card input:hover, .agent-token-card textarea:hover { border-color: #9cb7dc; }
.agent-login-form input:focus, .agent-token-card input:focus, .agent-token-card textarea:focus {
  border-color: var(--agent-primary); background: #fff; box-shadow: 0 0 0 3px rgba(79,127,247,.14);
}
.agent-login-submit {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; min-height: 52px; border: 1px solid var(--agent-primary) !important;
  border-radius: 9px; background: var(--agent-primary) !important; color: #fff !important;
  font-weight: 800; box-shadow: 0 8px 20px rgba(79,127,247,.22) !important;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.agent-login-submit:hover:not(:disabled) { border-color: var(--agent-primary-strong) !important; background: var(--agent-primary-strong) !important; transform: translateY(-1px); }
.agent-turnstile { display: flex; justify-content: center; min-height: 65px; overflow: hidden; }

/* App shell */
.agent-app { display: grid; grid-template-areas: "sidebar main"; grid-template-columns: 220px minmax(0,1fr); width: 100%; min-height: 100dvh; background: var(--agent-bg); }
.agent-sidebar {
  grid-area: sidebar; position: sticky; top: 0; z-index: 60; display: flex; flex-direction: column;
  width: 220px; height: 100dvh; padding: 20px 14px 16px; border-right: 1px solid #16243a;
  background: var(--agent-sidebar); color: #dce7f6;
}
.agent-sidebar-brand { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 2px 4px 18px; border-bottom: 1px solid rgba(255,255,255,.10); }
.agent-brand-icon { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 9px; }
.agent-sidebar-brand > div:last-child { display: grid; min-width: 0; gap: 2px; }
.agent-sidebar-brand strong { overflow: hidden; color: #fff; font-size: 16px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.agent-sidebar-brand span { color: #8fa4c1; font-size: 12px; }
.agent-nav { display: grid; gap: 8px; margin-top: 22px; }
.agent-nav-item {
  display: flex; align-items: center; justify-content: flex-start; gap: 11px; width: 100%; min-height: 48px;
  padding: 0 12px; border: 1px solid transparent !important; border-radius: 9px;
  background: transparent !important; color: #b5c5da !important; font-size: 15px; font-weight: 700;
  text-align: left; box-shadow: none !important; transition: background .16s ease, color .16s ease;
}
.agent-nav-item svg { flex: 0 0 auto; }
.agent-nav-item:hover { border-color: rgba(255,255,255,.06) !important; background: rgba(255,255,255,.06) !important; color: #fff !important; transform: none; }
.agent-nav-item.active, .agent-nav-item[aria-current="page"] { border-color: #cfe0f6 !important; background: #eaf2ff !important; color: #1d4e95 !important; }
.agent-sidebar-footer { display: grid; gap: 12px; margin-top: auto; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.10); }
.agent-sidebar-user { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 0 5px; }
.agent-user-avatar { display: grid; place-items: center; flex: 0 0 auto; width: 36px; height: 36px; border: 1px solid rgba(255,255,255,.16); border-radius: 8px; background: #172843; color: #dbe9ff; font-size: 14px; font-weight: 800; }
.agent-user-cdk { min-width: 0; overflow: hidden; color: #b9c9dd; font-family: "Cascadia Code", Consolas, monospace; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.agent-logout-btn {
  display: flex; align-items: center; justify-content: flex-start; gap: 10px; width: 100%; min-height: 46px !important;
  padding: 0 12px !important; border: 1px solid rgba(255,137,151,.26) !important; border-radius: 9px;
  background: rgba(200,68,85,.10) !important; color: #ffb5bf !important; font-size: 14px !important; font-weight: 700; box-shadow: none !important;
}
.agent-logout-btn:hover { border-color: rgba(255,137,151,.42) !important; background: rgba(200,68,85,.18) !important; color: #ffd1d7 !important; transform: none; }
.agent-mobile-bar, .agent-sidebar-overlay { display: none; }

.agent-main { grid-area: main; width: 100%; min-width: 0; min-height: 100dvh; padding: 28px 30px 44px; background: var(--agent-bg); }
.agent-main > * { width: 100%; max-width: none; margin-right: 0; margin-left: 0; }
.agent-status-bar { display: flex; justify-content: flex-end; min-height: 30px; margin-bottom: 6px; }
.agent-status-bar .agent-status { display: inline-flex; align-items: center; min-height: 30px; margin: 0; padding: 5px 11px; border: 1px solid var(--agent-line); border-radius: 999px; background: #fff; color: var(--agent-muted); font-size: 13px; }
.agent-status-bar .agent-status:empty { visibility: hidden; }
.agent-status-bar .agent-status.error { border-color: #f2c0c8; background: var(--agent-danger-soft); color: var(--agent-danger); }
.agent-view { min-width: 0; animation: agent-enter .2s ease-out both; }
.agent-view-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 22px; margin-bottom: 22px; }
.agent-view-header h2 { margin: 0; color: var(--agent-text); font-size: 29px; font-weight: 800; letter-spacing: -.03em; }
.agent-view-header p { max-width: 760px; margin: 6px 0 0; color: var(--agent-muted); font-size: 15px; line-height: 1.6; }
.agent-view-actions { display: flex; align-items: center; justify-content: flex-end; gap: 9px; flex-wrap: wrap; }
.agent-btn-primary, .agent-btn-ghost, .agent-table-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; border-radius: 8px; font-size: 14px; font-weight: 750; white-space: nowrap; transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease; }
.agent-btn-primary { padding: 0 16px; border: 1px solid var(--agent-primary) !important; background: var(--agent-primary) !important; color: #fff !important; box-shadow: 0 6px 16px rgba(79,127,247,.18) !important; }
.agent-btn-primary:hover:not(:disabled) { border-color: var(--agent-primary-strong) !important; background: var(--agent-primary-strong) !important; transform: translateY(-1px); }
.agent-btn-ghost { padding: 0 14px; border: 1px solid var(--agent-line-strong) !important; background: #fff !important; color: var(--agent-text-soft) !important; box-shadow: none !important; }
.agent-btn-ghost:hover:not(:disabled) { border-color: #9eb9dd !important; background: #f4f8fd !important; color: #1c4f95 !important; transform: none; }

/* Overview */
.agent-summary-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; margin: 0; }
.agent-stat-card { display: flex; align-items: center; gap: 15px; min-width: 0; min-height: 126px; padding: 21px; border: 1px solid var(--agent-line); border-radius: var(--agent-radius); background: #fff; box-shadow: var(--agent-shadow); transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
.agent-stat-card:hover { border-color: #b7cae2; transform: translateY(-2px); box-shadow: 0 12px 32px rgba(35,66,110,.11); }
.agent-stat-icon { display: grid; place-items: center; flex: 0 0 auto; width: 48px; height: 48px; border: 1px solid #cfe0fb; border-radius: 11px; background: var(--agent-primary-soft); color: var(--agent-primary); }
.agent-stat-info { display: grid; min-width: 0; gap: 5px; }
.agent-stat-info span { color: var(--agent-muted); font-size: 14px; font-weight: 700; }
.agent-stat-info strong { min-width: 0; overflow: hidden; color: var(--agent-text); font-size: 30px; font-weight: 820; line-height: 1.1; letter-spacing: -.025em; overflow-wrap: anywhere; }
.agent-stat-card[data-stat="cdk"] .agent-stat-info strong { color: #315a9c; font-family: "Cascadia Code", Consolas, monospace; font-size: 17px; }
.agent-stat-card[data-stat="total"] .agent-stat-icon { border-color: #c9e9f6; background: #eaf8fd; color: #1686af; }
.agent-stat-card[data-stat="used"] .agent-stat-icon { border-color: #f2ddb7; background: var(--agent-warning-soft); color: var(--agent-warning); }
.agent-stat-card[data-stat="remaining"] .agent-stat-icon { border-color: #bfe6d8; background: var(--agent-success-soft); color: var(--agent-success); }

.agent-chart-panel { margin-top: 18px; overflow: hidden; border: 1px solid var(--agent-line); border-radius: var(--agent-radius); background: #fff; box-shadow: var(--agent-shadow); }
.agent-chart-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 20px 22px 15px; border-bottom: 1px solid #e7edf5; }
.agent-chart-header h3 { margin: 0; color: var(--agent-text); font-size: 19px; font-weight: 800; }
.agent-chart-header p { margin: 4px 0 0; color: var(--agent-muted); font-size: 14px; }
.agent-chart-range { display: inline-flex; align-items: center; min-height: 34px; padding: 0 11px; border: 1px solid #cfdef0; border-radius: 8px; background: #f7faff; color: #526681; font-size: 13px; font-weight: 700; white-space: nowrap; }
.agent-chart-frame { position: relative; min-height: 340px; padding: 8px 12px 2px; }
.agent-daily-chart { width: 100%; height: 330px; }
.agent-chart-empty { position: absolute; top: 50%; left: 50%; z-index: 2; width: min(90%,440px); margin: 0; padding: 11px 14px; border: 1px solid #dbe5f1; border-radius: 8px; background: rgba(255,255,255,.92); color: var(--agent-muted); font-size: 14px; text-align: center; transform: translate(-50%,-50%); }

/* Alias list */
.agent-list-card { overflow: hidden; border: 1px solid var(--agent-line); border-radius: var(--agent-radius); background: #fff; box-shadow: var(--agent-shadow); }
.agent-list-filters { display: grid; grid-template-columns: minmax(280px,1.55fr) minmax(170px,.7fr) minmax(210px,.85fr) auto auto; align-items: end; gap: 10px; padding: 14px; border-bottom: 1px solid var(--agent-line); background: #f8fbff; }
.agent-list-filters label, .agent-list-pagination label { display: grid; gap: 7px; min-width: 0; margin: 0; color: #52637b; font-size: 13px; font-weight: 750; }
.agent-list-filters input, .agent-list-filters select, .agent-list-pagination select { width: 100%; min-width: 0; min-height: 44px; margin: 0; padding: 0 12px; border: 1px solid var(--agent-line-strong); border-radius: 8px; background: #fff; color: var(--agent-text-soft); font-size: 14px; outline: 0; }
.agent-list-filters input::placeholder { color: #94a3b8; }
.agent-list-filters input:hover, .agent-list-filters select:hover, .agent-list-pagination select:hover { border-color: #9eb8da; }
.agent-list-filters input:focus, .agent-list-filters select:focus, .agent-list-pagination select:focus { border-color: var(--agent-primary); box-shadow: 0 0 0 3px rgba(79,127,247,.12); }
.agent-filter-reset { min-width: 74px; }
.agent-result-count { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 12px; border: 1px solid #cfdef0; border-radius: 8px; background: #eef5fd; color: #506781; font-size: 13px; font-weight: 700; white-space: nowrap; }
.agent-table-wrap { width: 100%; min-height: 0; overflow-x: auto; overflow-y: hidden; background: #fff; scrollbar-width: thin; scrollbar-color: #b9c9de transparent; }
.agent-table-wrap table { width: 100%; min-width: 1120px; border-collapse: separate; border-spacing: 0; color: var(--agent-text-soft); font-size: 14px; }
.agent-table-wrap th { position: sticky; top: 0; z-index: 1; padding: 13px 14px; border-bottom: 1px solid var(--agent-line); background: #eef4fb; color: #52637a; font-size: 13px; font-weight: 800; text-align: left; white-space: nowrap; }
.agent-table-wrap td { padding: 13px 14px; border-bottom: 1px solid #e5ecf5; background: #fff; color: var(--agent-text-soft); vertical-align: middle; }
.agent-table-wrap tr:last-child td { border-bottom: 0; }
.agent-table-wrap tbody tr:hover td { background: #f8fbff; }
.agent-table-wrap tbody tr.is-selected td, .agent-table-wrap tbody tr.is-selected:hover td { background: #edf4ff; }
.agent-table-wrap td.wrap { max-width: 320px; color: #203653; font-family: "Cascadia Code", Consolas, monospace; font-size: 13px; font-weight: 650; overflow-wrap: anywhere; }
.agent-select-cell { width: 48px; min-width: 48px; max-width: 48px; padding-right: 7px !important; padding-left: 15px !important; text-align: center; }
.agent-page input.agent-row-checkbox { display: inline-block; width: 18px; min-width: 18px; height: 18px; min-height: 18px; margin: 0; padding: 0; border-radius: 4px; vertical-align: middle; accent-color: var(--agent-primary); cursor: pointer; }
.agent-code-cell { color: #52637a !important; font-family: "Cascadia Code", Consolas, monospace; font-size: 12px; white-space: nowrap; }
.agent-token-status { display: inline-flex; align-items: center; min-height: 28px; padding: 0 9px; border: 1px solid transparent; border-radius: 999px; font-size: 12px; font-weight: 750; white-space: nowrap; }
.agent-token-status.is-bound { border-color: #bde2d4; background: var(--agent-success-soft); color: var(--agent-success); }
.agent-token-status.is-unbound { border-color: #d7e0eb; background: #f4f7fb; color: #65748a; }
.agent-table-wrap .table-actions { display: flex; align-items: center; gap: 7px; min-width: max-content; }
.agent-table-btn { min-height: 38px; padding: 0 10px; border: 1px solid var(--agent-line-strong) !important; border-radius: 7px; background: #fff !important; color: #30445f !important; font-size: 13px; box-shadow: none !important; }
.agent-table-btn:hover { border-color: #95b3da !important; background: #f2f7fd !important; color: #1d55a0 !important; transform: none; }
.agent-list-pagination { display: flex; align-items: center; justify-content: flex-end; gap: 16px; min-height: 62px; padding: 10px 14px; border-top: 1px solid var(--agent-line); background: #f8fbff; color: var(--agent-muted); font-size: 13px; }
.agent-pagination-actions { display: flex; align-items: flex-end; gap: 7px; }
.agent-pagination-actions .agent-btn-ghost { width: auto; min-height: 40px; padding: 0 12px; }
.agent-list-pagination label { grid-template-columns: auto 92px; align-items: center; gap: 7px; }
.agent-list-pagination select { min-height: 40px; }

.agent-empty-state { display: grid; place-items: center; align-content: center; min-height: 250px; padding: 34px 20px; color: #8a9bb1; text-align: center; }
.agent-empty-state svg { margin-bottom: 8px; color: #a5b4c6; }
.agent-empty-state p { margin: 5px 0 0; color: var(--agent-text-soft); font-size: 16px; font-weight: 750; }
.agent-empty-state .agent-empty-hint { max-width: 440px; color: var(--agent-muted); font-size: 14px; font-weight: 450; }
.agent-empty-state.agent-empty-small { min-height: 220px; }

/* Token */
.agent-token-card { display: grid; gap: 16px; margin-top: 18px; padding: 22px; border: 1px solid #bfe2d5; border-left: 4px solid #28a77e; border-radius: var(--agent-radius); background: #fff; box-shadow: var(--agent-shadow); }
.agent-token-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.agent-token-header h3 { display: flex; align-items: center; gap: 9px; margin: 0; color: var(--agent-text); font-size: 19px; font-weight: 800; }
.agent-token-header h3 svg { flex: 0 0 auto; color: var(--agent-success); }
.agent-token-header p { margin: 5px 0 0; color: var(--agent-muted); font-size: 14px; }
.agent-token-card input { padding: 0 14px; }
.agent-token-card textarea { min-height: 100px; padding: 12px 14px; resize: vertical; font-family: "Cascadia Code", Consolas, monospace; font-size: 13px; line-height: 1.55; }
.agent-token-card > .agent-btn-primary { justify-self: start; }

/* Mail */
.agent-mail-grid { display: grid; grid-template-columns: minmax(320px,.8fr) minmax(0,1.35fr); gap: 16px; min-height: 560px; }
.agent-mail-list-panel, .agent-mail-detail-panel { display: grid; grid-template-rows: auto minmax(0,1fr); min-width: 0; overflow: hidden; border: 1px solid var(--agent-line); border-radius: var(--agent-radius); background: #fff; box-shadow: var(--agent-shadow); }
.agent-mail-list-header, .agent-mail-detail-header { min-height: 54px; padding: 16px 18px; border-bottom: 1px solid var(--agent-line); background: #eef4fb; color: #40536e; font-size: 14px; font-weight: 800; }
.agent-message-list { display: block; min-height: 0; max-height: 560px; padding: 9px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #b9c9de transparent; }
.agent-message-row { display: grid; grid-template-columns: 44px minmax(0,1fr); align-items: center; gap: 12px; width: 100%; min-height: 82px; margin: 0 0 6px; padding: 12px; border: 1px solid transparent !important; border-radius: 9px; background: #fff !important; color: var(--agent-text-soft) !important; text-align: left; box-shadow: none !important; }
.agent-message-row:hover { border-color: #cfe0f3 !important; background: #f5f9fe !important; transform: none; }
.agent-message-row.is-active, .agent-message-row[aria-current="true"] { border-color: #9dbbff !important; background: #f4f7ff !important; box-shadow: inset 3px 0 0 var(--agent-primary) !important; }
.agent-message-avatar { display: grid; place-items: center; width: 42px; height: 42px; overflow: hidden; border: 1px solid #d9e3ef; border-radius: 10px; background: #f6f9fd; color: #5a6f89; }
.agent-message-avatar.is-openai { background: #fff; color: #0f172a; }
.agent-message-avatar img, .agent-message-avatar svg { display: block; width: 24px; height: 24px; }
.agent-message-content { display: grid; min-width: 0; gap: 4px; overflow: hidden; }
.agent-message-subject { overflow: hidden; color: #203653; font-size: 15px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.agent-message-meta, .agent-message-snippet { overflow: hidden; color: var(--agent-muted); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.agent-message-snippet { color: #7c8ca1; font-size: 12px; }
.agent-page .agent-message-detail { display: block; width: 100%; min-width: 0; min-height: 0; height: 100%; max-height: 560px; margin: 0; overflow: auto; padding: 0; border: 0; border-radius: 0; background: #fff; color: #34445c; font-family: inherit; font-size: 14px; line-height: 1.65; overflow-wrap: anywhere; scrollbar-width: thin; scrollbar-color: #b9c9de transparent; }
.agent-page .agent-message-detail-empty { display: grid; place-items: center; padding: 24px; color: var(--agent-muted); text-align: center; }
.agent-page .agent-message-detail-empty.is-error { color: var(--agent-danger); }
.agent-mail-document { display: grid; grid-template-rows: auto minmax(360px,1fr); min-height: 100%; background: #fff; }
.agent-mail-document-head { padding: 20px 22px 17px; border-bottom: 1px solid var(--agent-line); background: #fbfdff; }
.agent-mail-document-head h3 { margin: 0 0 12px; color: var(--agent-text); font-size: 18px; font-weight: 800; line-height: 1.4; }
.agent-mail-document-meta { display: grid; gap: 5px; color: var(--agent-muted); font-size: 13px; }
.agent-mail-document-meta p { margin: 0; overflow-wrap: anywhere; }
.agent-mail-document-meta strong { color: #51647d; font-weight: 750; }
.agent-mail-document-body { min-width: 0; min-height: 0; overflow: hidden; background: #fff; }
.agent-code-card { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 12px; margin: 16px 0 0; padding: 14px 16px; border: 1px solid #dbe7f5; border-radius: 12px; background: #fff; box-shadow: 0 10px 24px rgba(29, 78, 216, .08); }
.agent-code-card-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: #eff6ff; color: var(--agent-primary); }
.agent-code-card-content { display: grid; gap: 3px; min-width: 0; }
.agent-code-card-label { color: #60738d; font-size: 12px; font-weight: 800; }
.agent-code-card-value { color: #17233a; font-family: "Cascadia Code", Consolas, monospace; font-size: 22px; letter-spacing: .12em; line-height: 1.2; overflow-wrap: anywhere; }
.agent-code-copy-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 11px; border: 1px solid #cddbf0; border-radius: 9px; background: #f8fbff; color: #31547e; font-size: 13px; font-weight: 800; cursor: pointer; }
.agent-code-copy-btn:hover { border-color: #aac4ec; background: #f1f7ff; }
.agent-mail-frame { display: block; width: 100%; height: 100%; min-height: 420px; border: 0; background: #fff; }
.agent-mail-plain { display: grid; gap: 12px; min-height: 100%; padding: 24px; overflow: auto; background: #fff; color: #34445c; font-size: 15px; line-height: 1.75; }
.agent-mail-plain p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }


/* Agent session and ChatGPT registration */
.agent-session-drawer-open { overflow: hidden; }
.agent-session-drawer { position: fixed; inset: 0; z-index: 230; display: grid; grid-template-columns: minmax(0,1fr) min(560px, calc(100vw - 28px)); background: rgba(25, 43, 69, .30); backdrop-filter: blur(2px); }
.agent-session-drawer[hidden] { display: none; }
.agent-session-backdrop { width: 100%; height: 100%; border: 0 !important; border-radius: 0; background: transparent !important; box-shadow: none !important; cursor: default; }
.agent-session-sheet { position: relative; display: grid; grid-template-rows: auto minmax(0,1fr) auto; min-width: 0; height: 100dvh; overflow: hidden; border-left: 1px solid #c9dcff; background: #fff; color: var(--agent-text); box-shadow: -28px 0 70px rgba(31, 55, 88, .20); animation: agent-session-slide-in .22s ease-out; }
.agent-session-sheet-header { display: grid; grid-template-columns: 52px minmax(0,1fr) auto; gap: 14px; align-items: flex-start; padding: 24px 24px 18px; border-bottom: 1px solid #e7eef8; background: linear-gradient(180deg,#fbfdff 0%,#fff 100%); }
.agent-session-heading-icon { display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid #cfe1ff; border-radius: 15px; background: #eef5ff; color: var(--agent-primary); }
.agent-session-eyebrow { margin: 0 0 5px; color: #6f88ac; font-size: 12px; font-weight: 850; letter-spacing: .12em; }
.agent-session-sheet h2 { margin: 0; color: #152842; font-size: 25px; font-weight: 850; outline: none; }
.agent-session-sheet-header p:last-child { max-width: 440px; margin: 6px 0 0; color: #60738d; font-size: 14px; line-height: 1.6; }
.agent-session-close { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 12px; border: 1px solid #d6e2f1; border-radius: 10px; background: #fff; color: #415673; font-size: 13px; font-weight: 750; cursor: pointer; }
.agent-session-close:hover { border-color: #a9c2e2; background: #f4f8ff; color: #255fb8; }
.agent-session-body { display: grid; align-content: start; gap: 16px; min-height: 0; padding: 22px 24px 18px; overflow: auto; scrollbar-width: thin; scrollbar-color: #b9c9de transparent; }
.agent-session-body label { display: grid; gap: 8px; margin: 0; color: var(--agent-text-soft); font-size: 14px; font-weight: 750; }
.agent-session-body input, .agent-session-body textarea { width: 100%; min-height: 50px; margin: 0; border: 1px solid var(--agent-line-strong); border-radius: 10px; outline: 0; }
.agent-session-body input { padding: 0 14px; }
.agent-session-body textarea { min-height: min(56dvh, 520px); padding: 14px; resize: vertical; border-color: #cddbeb; background: #fbfdff; color: #1f344f; font-family: "Cascadia Code", Consolas, monospace; font-size: 13px; line-height: 1.6; }
.agent-session-body textarea:focus { background: #fff; }
.agent-session-actions { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 16px 24px; border-top: 1px solid #e7eef8; background: rgba(255,255,255,.96); backdrop-filter: blur(8px); }
.agent-session-actions .agent-btn-primary, .agent-session-actions .agent-btn-ghost { width: auto; }
.agent-session-saving { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; padding: 24px; background: rgba(255, 255, 255, .92); backdrop-filter: blur(3px); }
.agent-session-saving[hidden] { display: none; }
.agent-session-saving-card { display: grid; justify-items: center; gap: 10px; width: min(320px, 100%); padding: 28px 24px; border: 1px solid #cfe1ff; border-radius: 16px; background: #fff; color: #255fb8; text-align: center; box-shadow: 0 18px 50px rgba(31, 78, 143, .14); }
.agent-session-saving svg { animation: agent-session-saving-spin .8s linear infinite; }
.agent-session-saving strong { color: #152842; font-size: 17px; }
.agent-session-saving span { color: #60738d; font-size: 14px; line-height: 1.6; }
.agent-table-btn.is-primary-action { border-color: #9dbbff !important; background: #eef5ff !important; color: #255fb8 !important; }
.agent-table-btn.is-primary-action:hover { border-color: var(--agent-primary) !important; background: #e4efff !important; color: #164f9f !important; }
.agent-table-btn:disabled, .agent-table-btn[aria-disabled="true"] { border-color: #e1e8f2 !important; background: #f5f7fb !important; color: #9aa8ba !important; cursor: not-allowed; transform: none; }

.agent-registration-modal { position: fixed; inset: 0; z-index: 220; display: grid; place-items: center; padding: 24px; background: rgba(25, 43, 69, .34); backdrop-filter: blur(3px); }
.agent-registration-modal[hidden] { display: none; }
.agent-registration-dialog { display: grid; gap: 18px; width: min(920px, calc(100vw - 32px)); max-height: min(900px, calc(100dvh - 32px)); overflow: auto; padding: 24px; border: 1px solid #c9ddff; border-radius: 18px; background: #fff; color: var(--agent-text); box-shadow: 0 24px 70px rgba(31, 55, 88, .22); }
.agent-registration-header { display: flex; align-items: center; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid #e7eef8; }
.agent-registration-heading-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: #eef5ff; color: var(--agent-primary); }
.agent-registration-eyebrow { margin: 0 0 4px; color: #6f88ac; font-size: 12px; font-weight: 850; letter-spacing: .12em; }
.agent-registration-header h2 { margin: 0; color: #152842; font-size: 24px; font-weight: 850; outline: none; }
.agent-registration-email { margin: 5px 0 0; color: #526985; font-family: "Cascadia Code", Consolas, monospace; font-size: 13px; overflow-wrap: anywhere; }
.agent-registration-summary { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.agent-registration-summary > div { min-height: 76px; padding: 14px; border: 1px solid #dce8f7; border-radius: 13px; background: #f8fbff; }
.agent-registration-summary span { display: block; color: #71849d; font-size: 12px; font-weight: 750; }
.agent-registration-summary strong { display: block; margin-top: 6px; color: #1c3655; font-size: 15px; line-height: 1.45; }
.agent-registration-notice { display: flex; align-items: flex-start; gap: 10px; padding: 13px 14px; border: 1px solid #cfe1ff; border-radius: 12px; background: #f4f8ff; color: #315f9f; }
.agent-registration-notice svg { flex: 0 0 auto; margin-top: 2px; }
.agent-registration-notice p { margin: 0; font-size: 14px; line-height: 1.6; }
.agent-registration-steps { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.agent-registration-step { display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 11px; align-items: flex-start; padding: 13px; border: 1px solid #e0e8f4; border-radius: 12px; background: #fff; }
.agent-registration-step > span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 999px; background: #edf3fb; color: #6c7e95; font-size: 13px; font-weight: 850; }
.agent-registration-step strong { display: block; color: #213a5a; font-size: 14px; font-weight: 850; }
.agent-registration-step small { display: block; margin-top: 3px; color: #71849c; font-size: 12px; line-height: 1.45; }
.agent-registration-step.is-current { border-color: #9dbbff; background: #f4f8ff; box-shadow: inset 3px 0 0 var(--agent-primary); }
.agent-registration-step.is-current > span { background: var(--agent-primary); color: #fff; }
.agent-registration-step.is-done { border-color: #bfe2d5; background: #f4fbf7; }
.agent-registration-step.is-done > span { background: #28a77e; color: #fff; }
.agent-registration-step.is-error { border-color: #ffd0d0; background: #fff6f6; box-shadow: inset 3px 0 0 #d75b5b; }
.agent-registration-step.is-error > span { background: #d75b5b; color: #fff; }
.agent-registration-error { margin: 0; padding: 12px 14px; border: 1px solid #ffd0d0; border-radius: 10px; background: #fff6f6; color: #b33636; font-size: 14px; line-height: 1.55; }
.agent-registration-error.is-muted { border-color: #cfe1ff; background: #f4f8ff; color: #315f9f; }
.agent-registration-actions { position: sticky; bottom: -24px; display: flex; justify-content: flex-end; gap: 10px; margin: 0 -24px -24px; padding: 16px 24px; border-top: 1px solid #e7eef8; background: rgba(255,255,255,.96); backdrop-filter: blur(8px); }
.agent-registration-actions .agent-btn-primary, .agent-registration-actions .agent-btn-ghost { width: auto; }

/* Agent proxy configuration */
.agent-proxy-workflow-header { display: flex; align-items: flex-start; gap: 14px; margin: 0 0 12px; padding: 17px 19px; border: 1px solid var(--agent-line); border-radius: var(--agent-radius); background: #fff; box-shadow: 0 5px 18px rgba(35,66,110,.055); }
.agent-proxy-workflow-header.agent-billing-proxy { margin-top: 24px; border-color: #cfe0f5; }
.agent-proxy-workflow-header.agent-promotion-proxy { border-color: #c9e5dd; }
.agent-proxy-workflow-index { display: grid; place-items: center; flex: 0 0 auto; min-width: 52px; min-height: 38px; padding: 0 10px; border: 1px solid #cfe0fb; border-radius: 9px; background: var(--agent-primary-soft); color: #255fb8; font-family: "Cascadia Code", Consolas, monospace; font-size: 13px; font-weight: 850; }
.agent-promotion-proxy .agent-proxy-workflow-index { border-color: #bfe4d7; background: var(--agent-success-soft); color: var(--agent-success); }
.agent-proxy-workflow-header h3 { margin: 0; color: #18304e; font-size: 19px; font-weight: 850; }
.agent-proxy-workflow-header p { margin: 4px 0 0; color: var(--agent-muted); font-size: 14px; line-height: 1.6; }
.agent-proxy-layout { display: grid; grid-template-columns: minmax(0,1.08fr) minmax(360px,.92fr); align-items: start; gap: 18px; }
.agent-proxy-layout.agent-promotion-proxy .agent-proxy-card { border-color: #cfe4df; }
.agent-proxy-layout.agent-promotion-proxy .agent-proxy-card-icon { border-color: #bfe4d7; background: var(--agent-success-soft); color: var(--agent-success); }
.agent-proxy-layout.agent-promotion-proxy .agent-btn-primary { border-color: #168a65 !important; background: #168a65 !important; box-shadow: 0 6px 16px rgba(22,138,101,.16) !important; }
.agent-proxy-layout.agent-promotion-proxy .agent-btn-primary:hover:not(:disabled) { border-color: #117052 !important; background: #117052 !important; }
.agent-proxy-card { overflow: hidden; border: 1px solid var(--agent-line); border-radius: var(--agent-radius); background: #fff; color: var(--agent-text); box-shadow: var(--agent-shadow); }
.agent-proxy-card-header { display: grid; grid-template-columns: 48px minmax(0,1fr); align-items: center; gap: 13px; padding: 20px 22px 17px; border-bottom: 1px solid #e7eef8; background: #fbfdff; }
.agent-proxy-card-icon { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid #cfe1ff; border-radius: 12px; background: #eef5ff; color: var(--agent-primary); }
.agent-proxy-card-icon.is-success { border-color: #c5e8dc; background: var(--agent-success-soft); color: var(--agent-success); }
.agent-proxy-card-header h3 { margin: 0; color: #18304e; font-size: 19px; font-weight: 850; }
.agent-proxy-card-header p { margin: 4px 0 0; color: var(--agent-muted); font-size: 13px; line-height: 1.55; }
.agent-proxy-form-grid { display: grid; grid-template-columns: minmax(130px,.42fr) minmax(240px,1fr) minmax(130px,.48fr); gap: 16px; padding: 22px; }
.agent-proxy-form-grid label { display: grid; align-content: start; gap: 8px; min-width: 0; color: #435872; font-size: 14px; font-weight: 750; }
.agent-proxy-form-grid label:nth-child(4), .agent-proxy-password-field { grid-column: span 2; }
.agent-proxy-form-grid input { width: 100%; min-width: 0; min-height: 48px; margin: 0; padding: 0 13px; border: 1px solid var(--agent-line-strong); border-radius: 9px; background: #fff; color: var(--agent-text); outline: 0; }
.agent-proxy-form-grid input[readonly] { background: #f4f7fb; color: #62738a; }
.agent-proxy-form-grid input:hover:not([readonly]) { border-color: #9eb8da; }
.agent-proxy-form-grid input:focus { border-color: var(--agent-primary); box-shadow: 0 0 0 3px rgba(79,127,247,.13); }
.agent-proxy-form-grid small { color: #74869c; font-size: 12px; font-weight: 600; line-height: 1.5; }
.agent-proxy-form-error { margin: 0 22px 18px; padding: 11px 13px; border: 1px solid #f2c0c8; border-radius: 9px; background: var(--agent-danger-soft); color: var(--agent-danger); font-size: 13px; }
.agent-proxy-actions { display: flex; justify-content: flex-end; gap: 9px; padding: 16px 22px; border-top: 1px solid #e7eef8; background: #fbfdff; }
.agent-proxy-actions .agent-btn-primary, .agent-proxy-actions .agent-btn-ghost { width: auto; }
.agent-btn-danger { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 0 14px; border: 1px solid #efc2c8; border-radius: 8px; background: #fff; color: #b53849; font-size: 14px; font-weight: 750; cursor: pointer; }
.agent-btn-danger:hover:not(:disabled) { border-color: #dc8792; background: var(--agent-danger-soft); }
.agent-proxy-actions .agent-btn-danger { margin-right: auto; }
.agent-proxy-diagnostics { min-height: 100%; }
.agent-proxy-status-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1px; margin: 0; border-bottom: 1px solid #e7eef8; background: #e7eef8; }
.agent-proxy-status-grid > div { min-height: 92px; padding: 17px 18px; background: #fff; }
.agent-proxy-status-grid span { display: block; color: #76889f; font-size: 12px; font-weight: 750; }
.agent-proxy-status-grid strong { display: block; margin-top: 7px; color: #1d3858; font-family: "Cascadia Code", Consolas, monospace; font-size: 15px; font-weight: 800; overflow-wrap: anywhere; }
.agent-proxy-last-tested { margin: 0; padding: 14px 18px; color: var(--agent-muted); font-size: 13px; }
.agent-proxy-warning { display: flex; align-items: flex-start; gap: 10px; margin: 0 18px 18px; padding: 12px 13px; border: 1px solid #f2d59f; border-radius: 10px; background: var(--agent-warning-soft); color: #8c5714; }
.agent-proxy-warning[hidden], .agent-proxy-form-error[hidden] { display: none; }
.agent-proxy-warning svg { flex: 0 0 auto; margin-top: 2px; }
.agent-proxy-warning p { margin: 0; font-size: 13px; line-height: 1.55; }
.agent-proxy-actions .is-loading svg { animation: agent-session-saving-spin .8s linear infinite; }

/* UPI extraction drawer */
.agent-upi-drawer-open { overflow: hidden; }
.agent-upi-drawer { position: fixed; inset: 0; z-index: 240; display: grid; grid-template-columns: minmax(0,1fr) min(600px, calc(100vw - 28px)); background: rgba(25,43,69,.30); backdrop-filter: blur(2px); }
.agent-upi-drawer[hidden] { display: none; }
.agent-upi-backdrop { width: 100%; height: 100%; border: 0 !important; border-radius: 0; background: transparent !important; box-shadow: none !important; cursor: default; }
.agent-upi-sheet { position: relative; display: grid; grid-template-rows: auto minmax(0,1fr) auto; min-width: 0; height: 100dvh; overflow: hidden; border-left: 1px solid #c9dcff; background: #fff; color: var(--agent-text); box-shadow: -28px 0 70px rgba(31,55,88,.20); animation: agent-session-slide-in .22s ease-out; }
.agent-upi-header { display: grid; grid-template-columns: 52px minmax(0,1fr) auto; align-items: start; gap: 14px; padding: 24px 24px 18px; border-bottom: 1px solid #e7eef8; background: linear-gradient(180deg,#fbfdff 0%,#fff 100%); }
.agent-upi-heading-icon { display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid #cfe1ff; border-radius: 15px; background: #eef5ff; color: var(--agent-primary); }
.agent-upi-eyebrow { margin: 0 0 5px; color: #6f88ac; font-size: 12px; font-weight: 850; letter-spacing: .12em; }
.agent-upi-header h2 { margin: 0; color: #152842; font-size: 25px; font-weight: 850; outline: none; }
.agent-upi-header p:last-child { margin: 5px 0 0; color: #60738d; font-family: "Cascadia Code", Consolas, monospace; font-size: 13px; overflow-wrap: anywhere; }
.agent-upi-close { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 12px; border: 1px solid #d6e2f1; border-radius: 10px; background: #fff; color: #415673; font-size: 13px; font-weight: 750; cursor: pointer; }
.agent-upi-close:hover { border-color: #a9c2e2; background: #f4f8ff; color: #255fb8; }
.agent-upi-body { min-height: 0; padding: 20px 22px 24px; overflow: auto; scrollbar-width: thin; scrollbar-color: #b9c9de transparent; }
.agent-upi-summary { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.agent-upi-summary > div { min-height: 78px; padding: 13px; border: 1px solid #dce8f7; border-radius: 12px; background: #f8fbff; }
.agent-upi-summary span { display: block; color: #71849d; font-size: 12px; font-weight: 750; }
.agent-upi-summary strong { display: block; margin-top: 6px; color: #1c3655; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.agent-upi-notice { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; padding: 12px 13px; border: 1px solid #cfe1ff; border-radius: 11px; background: #f4f8ff; color: #315f9f; }
.agent-upi-notice svg { flex: 0 0 auto; margin-top: 2px; }
.agent-upi-notice p { margin: 0; font-size: 13px; line-height: 1.6; }
.agent-upi-retry { display: grid; grid-template-columns: 42px minmax(0,1fr) auto; align-items: center; gap: 12px; margin-top: 14px; padding: 14px; border: 1px solid #d8e5f4; border-radius: 12px; background: #fff; }
.agent-upi-retry-icon { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid #cfe0f5; border-radius: 11px; background: #f4f8ff; color: #326fbe; }
.agent-upi-retry h3 { margin: 0; color: #1d3858; font-size: 15px; font-weight: 850; }
.agent-upi-retry p { margin: 4px 0 0; color: #687d98; font-size: 12px; line-height: 1.55; }
.agent-upi-retry-switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
.agent-upi-retry-switch input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.agent-upi-retry-switch > span { position: relative; width: 46px; height: 26px; border-radius: 999px; background: #dbe4ef; transition: background .18s ease; }
.agent-upi-retry-switch i { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(42,75,116,.22); transition: transform .18s ease; }
.agent-upi-retry-switch b { color: #526984; font-size: 13px; font-weight: 800; }
.agent-upi-retry-switch input:checked + span { background: #3276d2; }
.agent-upi-retry-switch input:checked + span i { transform: translateX(20px); }
.agent-upi-retry-switch input:focus-visible + span { outline: 3px solid rgba(50,118,210,.22); outline-offset: 2px; }
.agent-upi-retry-switch input:disabled + span { background: #e8edf3; opacity: .75; }
.agent-upi-retry-switch input:disabled ~ b { color: #94a3b8; }
.agent-upi-steps { display: grid; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.agent-upi-steps li { display: grid; grid-template-columns: 32px minmax(0,1fr); align-items: start; gap: 11px; padding: 12px; border: 1px solid #e0e8f4; border-radius: 11px; background: #fff; }
.agent-upi-steps li > span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 999px; background: #edf3fb; color: #6c7e95; font-size: 12px; font-weight: 850; }
.agent-upi-steps strong { display: block; color: #213a5a; font-size: 14px; font-weight: 850; }
.agent-upi-steps small { display: block; margin-top: 2px; color: #71849c; font-size: 12px; line-height: 1.45; }
.agent-upi-steps li.is-current { border-color: #9dbbff; background: #f4f8ff; box-shadow: inset 3px 0 0 var(--agent-primary); }
.agent-upi-steps li.is-current > span { background: var(--agent-primary); color: #fff; }
.agent-upi-steps li.is-done { border-color: #bfe2d5; background: #f4fbf7; }
.agent-upi-steps li.is-done > span { background: #28a77e; color: #fff; }
.agent-upi-steps li.is-error { border-color: #ffd0d0; background: #fff6f6; box-shadow: inset 3px 0 0 #d75b5b; }
.agent-upi-steps li.is-error > span { background: #d75b5b; color: #fff; }
.agent-upi-diagnostics[hidden] { display: none !important; }
.agent-upi-diagnostics { margin-top: 16px; overflow: hidden; border: 1px solid #d8e5f4; border-radius: 14px; background: #fff; box-shadow: 0 8px 24px rgba(42,75,116,.06); }
.agent-upi-diagnostics-header { display: flex; align-items: flex-start; gap: 11px; padding: 15px 16px; border-bottom: 1px solid #e5edf7; background: #f8fbff; }
.agent-upi-diagnostics-icon { display: grid; flex: 0 0 auto; place-items: center; width: 38px; height: 38px; border: 1px solid #cfe0f5; border-radius: 11px; background: #fff; color: #326fbe; }
.agent-upi-diagnostics-header h3 { margin: 0; color: #1d3858; font-size: 16px; font-weight: 850; }
.agent-upi-diagnostics-header p { margin: 4px 0 0; color: #687d98; font-size: 12px; line-height: 1.55; }
.agent-upi-diagnostics-list { display: grid; gap: 10px; margin: 0; padding: 12px; list-style: none; }
.agent-upi-diagnostics-empty { padding: 14px; border: 1px dashed #cddbea; border-radius: 10px; background: #fbfdff; color: #667b95; font-size: 13px; line-height: 1.6; }
.agent-upi-diagnostic-event { padding: 13px; border: 1px solid #e0e9f4; border-radius: 11px; background: #fff; }
.agent-upi-diagnostic-heading { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 9px; }
.agent-upi-diagnostic-stage { display: inline-flex; min-height: 26px; align-items: center; padding: 0 8px; border-radius: 999px; background: #edf4ff; color: #2e68ae; font-size: 11px; font-weight: 800; white-space: nowrap; }
.agent-upi-diagnostic-heading strong { color: #263f5e; font-size: 13px; line-height: 1.5; }
.agent-upi-diagnostic-heading time { color: #8797aa; font-family: "Cascadia Code", Consolas, monospace; font-size: 11px; white-space: nowrap; }
.agent-upi-diagnostic-details { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin: 11px 0 0; }
.agent-upi-diagnostic-details > div { min-width: 0; padding: 9px 10px; border-radius: 9px; background: #f7faff; }
.agent-upi-diagnostic-details dt { color: #74869d; font-size: 11px; font-weight: 750; line-height: 1.4; }
.agent-upi-diagnostic-details dd { margin: 4px 0 0; color: #243f61; font-family: "Cascadia Code", Consolas, monospace; font-size: 12px; font-weight: 750; line-height: 1.5; overflow-wrap: anywhere; }
.agent-upi-diagnostic-details dd.is-negative { color: #b33f3f; }
.agent-upi-error { margin: 14px 0 0; padding: 12px 14px; border: 1px solid #ffd0d0; border-radius: 10px; background: #fff6f6; color: #b33636; font-size: 14px; line-height: 1.55; }
.agent-upi-result { display: grid; grid-template-columns: minmax(220px,320px) minmax(0,1fr); align-items: center; gap: 20px; margin-top: 16px; padding: 18px; border: 1px solid #bfe2d5; border-radius: 14px; background: #f7fcf9; }
.agent-upi-result[hidden], .agent-upi-error[hidden] { display: none; }
.agent-upi-qr-frame { display: grid; place-items: center; aspect-ratio: 1; padding: 14px; border: 1px solid #d5e4dd; border-radius: 12px; background: #fff; }
.agent-upi-qr-frame img { display: block; width: 100%; max-width: 320px; height: auto; aspect-ratio: 1; }
.agent-upi-result-copy h3 { margin: 0; color: #173c30; font-size: 20px; font-weight: 850; }
.agent-upi-result-copy p { margin: 7px 0 14px; color: #577267; font-size: 14px; line-height: 1.6; }
.agent-upi-result-copy strong { display: inline-flex; min-height: 36px; align-items: center; padding: 0 11px; border: 1px solid #bfe2d5; border-radius: 8px; background: #fff; color: var(--agent-success); font-family: "Cascadia Code", Consolas, monospace; font-size: 13px; }
.agent-upi-actions { display: flex; justify-content: flex-end; gap: 9px; padding: 16px 22px; border-top: 1px solid #e7eef8; background: rgba(255,255,255,.96); backdrop-filter: blur(8px); }
.agent-upi-actions .agent-btn-primary, .agent-upi-actions .agent-btn-ghost { width: auto; }

/* KakaoPay extraction drawer */
.agent-kakao-drawer-open { overflow: hidden; }
.agent-kakao-drawer { position: fixed; inset: 0; z-index: 245; display: grid; grid-template-columns: minmax(0,1fr) min(600px, calc(100vw - 28px)); background: rgba(25,43,69,.28); backdrop-filter: blur(2px); }
.agent-kakao-drawer[hidden] { display: none; }
.agent-kakao-backdrop { width: 100%; height: 100%; border: 0 !important; border-radius: 0; background: transparent !important; box-shadow: none !important; cursor: default; }
.agent-kakao-sheet { position: relative; display: grid; grid-template-rows: auto minmax(0,1fr) auto; min-width: 0; height: 100dvh; overflow: hidden; border-left: 1px solid #e6e2d5; background: #fff; color: #172033; box-shadow: -22px 0 58px rgba(31,43,61,.18); animation: agent-session-slide-in .22s ease-out; }
.agent-kakao-header { display: grid; grid-template-columns: 52px minmax(0,1fr) auto; align-items: start; gap: 14px; padding: 24px 24px 18px; border-bottom: 1px solid #ebe8df; background: linear-gradient(180deg,#fffdf6 0%,#fff 100%); }
.agent-kakao-heading-icon { display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid #ead98e; border-radius: 15px; background: #fff8d8; color: #7a5a00; }
.agent-kakao-eyebrow { margin: 0 0 5px; color: #8a7335; font-size: 12px; font-weight: 850; letter-spacing: .12em; }
.agent-kakao-header h2 { margin: 0; color: #25231e; font-size: 25px; font-weight: 850; outline: none; }
.agent-kakao-header p:last-child { margin: 5px 0 0; color: #716d63; font-family: "Cascadia Code", Consolas, monospace; font-size: 13px; overflow-wrap: anywhere; }
.agent-kakao-close { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 12px; border: 1px solid #dedbd2; border-radius: 10px; background: #fff; color: #514f49; font-size: 13px; font-weight: 750; cursor: pointer; }
.agent-kakao-close:hover { border-color: #cfb94e; background: #fffaf0; color: #684f00; }
.agent-kakao-body { min-height: 0; padding: 20px 22px 24px; overflow: auto; scrollbar-width: thin; scrollbar-color: #c9c3b5 transparent; }
.agent-kakao-summary { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.agent-kakao-summary > div { min-height: 78px; padding: 13px; border: 1px solid #e7e3d8; border-radius: 12px; background: #fffdf8; }
.agent-kakao-summary span { display: block; color: #7c776b; font-size: 12px; font-weight: 750; }
.agent-kakao-summary strong { display: block; margin-top: 6px; color: #322f28; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.agent-kakao-notice { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; padding: 12px 13px; border: 1px solid #ead98e; border-radius: 11px; background: #fffaf0; color: #765c0a; }
.agent-kakao-notice svg { flex: 0 0 auto; margin-top: 2px; }
.agent-kakao-notice p { margin: 0; font-size: 13px; line-height: 1.6; }
.agent-kakao-retry { display: grid; grid-template-columns: 42px minmax(0,1fr) auto; align-items: center; gap: 12px; margin-top: 14px; padding: 14px; border: 1px solid #eadfba; border-radius: 12px; background: #fff; }
.agent-kakao-retry-icon { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid #ead98e; border-radius: 11px; background: #fff8d8; color: #8a6800; }
.agent-kakao-retry h3 { margin: 0; color: #3f3825; font-size: 15px; font-weight: 850; }
.agent-kakao-retry p { margin: 4px 0 0; color: #756d59; font-size: 12px; line-height: 1.55; }
.agent-kakao-retry-switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
.agent-kakao-retry-switch input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.agent-kakao-retry-switch > span { position: relative; width: 46px; height: 26px; border-radius: 999px; background: #e7e2d5; transition: background .18s ease; }
.agent-kakao-retry-switch i { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(88,72,25,.20); transition: transform .18s ease; }
.agent-kakao-retry-switch b { color: #665d47; font-size: 13px; font-weight: 800; }
.agent-kakao-retry-switch input:checked + span { background: #d3ad16; }
.agent-kakao-retry-switch input:checked + span i { transform: translateX(20px); }
.agent-kakao-retry-switch input:focus-visible + span { outline: 3px solid rgba(211,173,22,.24); outline-offset: 2px; }
.agent-kakao-retry-switch input:disabled + span { background: #ece9e1; opacity: .75; }
.agent-kakao-retry-switch input:disabled ~ b { color: #a19a8b; }
.agent-kakao-steps { display: grid; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.agent-kakao-steps li { display: grid; grid-template-columns: 32px minmax(0,1fr); align-items: start; gap: 11px; padding: 12px; border: 1px solid #e8e5dd; border-radius: 11px; background: #fff; }
.agent-kakao-steps li > span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 999px; background: #f1efe9; color: #777167; font-size: 12px; font-weight: 850; }
.agent-kakao-steps strong { display: block; color: #34312a; font-size: 14px; font-weight: 850; }
.agent-kakao-steps small { display: block; margin-top: 2px; color: #7d786e; font-size: 12px; line-height: 1.45; }
.agent-kakao-steps li.is-current { border-color: #e0c34a; background: #fffaf0; box-shadow: inset 3px 0 0 #d3ad16; }
.agent-kakao-steps li.is-current > span { background: #d3ad16; color: #fff; }
.agent-kakao-steps li.is-done { border-color: #bfe2d5; background: #f4fbf7; }
.agent-kakao-steps li.is-done > span { background: #28a77e; color: #fff; }
.agent-kakao-steps li.is-error { border-color: #ffd0d0; background: #fff6f6; box-shadow: inset 3px 0 0 #d75b5b; }
.agent-kakao-steps li.is-error > span { background: #d75b5b; color: #fff; }
.agent-kakao-diagnostics { margin-top: 16px; overflow: hidden; border: 1px solid #e4e1d9; border-radius: 14px; background: #fff; box-shadow: 0 8px 24px rgba(72,62,37,.05); }
.agent-kakao-diagnostics-header { display: flex; align-items: flex-start; gap: 11px; padding: 15px 16px; border-bottom: 1px solid #ece9e1; background: #fffdf8; }
.agent-kakao-diagnostics-header > span { display: grid; flex: 0 0 auto; place-items: center; width: 38px; height: 38px; border: 1px solid #ead98e; border-radius: 11px; background: #fff; color: #806200; }
.agent-kakao-diagnostics-header h3 { margin: 0; color: #343129; font-size: 16px; font-weight: 850; }
.agent-kakao-diagnostics-header p { margin: 4px 0 0; color: #777269; font-size: 12px; line-height: 1.55; }
.agent-kakao-diagnostics-list { display: grid; gap: 10px; margin: 0; padding: 12px; list-style: none; }
.agent-kakao-diagnostics-empty { padding: 14px; border: 1px dashed #dad5c9; border-radius: 10px; background: #fffdf9; color: #746f65; font-size: 13px; line-height: 1.6; }
.agent-kakao-diagnostic-event { padding: 13px; border: 1px solid #ebe7dd; border-radius: 11px; background: #fff; }
.agent-kakao-diagnostic-heading { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 9px; }
.agent-kakao-diagnostic-heading > span { display: inline-flex; min-height: 26px; align-items: center; padding: 0 8px; border-radius: 999px; background: #fff6ce; color: #755800; font-size: 11px; font-weight: 800; white-space: nowrap; }
.agent-kakao-diagnostic-heading strong { color: #3d3931; font-size: 13px; line-height: 1.5; }
.agent-kakao-diagnostic-heading time { color: #8b867c; font-family: "Cascadia Code", Consolas, monospace; font-size: 11px; white-space: nowrap; }
.agent-kakao-diagnostic-details { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin: 11px 0 0; }
.agent-kakao-diagnostic-details > div { min-width: 0; padding: 9px 10px; border-radius: 9px; background: #fffdf8; }
.agent-kakao-diagnostic-details dt { color: #7f7a70; font-size: 11px; font-weight: 750; line-height: 1.4; }
.agent-kakao-diagnostic-details dd { margin: 4px 0 0; color: #3b372f; font-family: "Cascadia Code", Consolas, monospace; font-size: 12px; font-weight: 750; line-height: 1.5; overflow-wrap: anywhere; }
.agent-kakao-error { margin: 14px 0 0; padding: 12px 14px; border: 1px solid #ffd0d0; border-radius: 10px; background: #fff6f6; color: #b33636; font-size: 14px; line-height: 1.55; }
.agent-kakao-result { display: grid; grid-template-columns: minmax(220px,320px) minmax(0,1fr); align-items: center; gap: 20px; margin-top: 16px; padding: 18px; border: 1px solid #d7cfaa; border-radius: 14px; background: #fffdf6; }
.agent-kakao-result[hidden], .agent-kakao-error[hidden] { display: none; }
.agent-kakao-qr-frame { display: grid; place-items: center; aspect-ratio: 1; padding: 14px; border: 1px solid #e4e0d4; border-radius: 18px; background: #fff; }
.agent-kakao-qr-frame img { display: block; width: 100%; max-width: 320px; height: auto; aspect-ratio: 1; }
.agent-kakao-result-copy h3 { margin: 0; color: #373127; font-size: 20px; font-weight: 850; }
.agent-kakao-result-copy p { margin: 7px 0 14px; color: #716b60; font-size: 14px; line-height: 1.6; }
.agent-kakao-result-copy strong { display: inline-flex; min-height: 36px; align-items: center; padding: 0 11px; border: 1px solid #d7cfaa; border-radius: 8px; background: #fff; color: #725800; font-family: "Cascadia Code", Consolas, monospace; font-size: 13px; }
.agent-kakao-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px; padding: 16px 22px; border-top: 1px solid #ebe8df; background: rgba(255,255,255,.97); backdrop-filter: blur(8px); }
.agent-kakao-actions .agent-btn-primary, .agent-kakao-actions .agent-btn-ghost, .agent-kakao-actions .agent-btn-danger { width: auto; }

@keyframes agent-session-slide-in { from { opacity: .82; transform: translateX(28px); } to { opacity: 1; transform: translateX(0); } }
@keyframes agent-session-saving-spin { to { transform: rotate(360deg); } }

@keyframes agent-enter { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 1240px) {
  .agent-summary-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .agent-list-filters { grid-template-columns: minmax(240px,1.35fr) minmax(150px,.7fr) minmax(180px,.8fr) auto; }
  .agent-result-count { grid-column: 1/-1; justify-self: start; }
  .agent-proxy-layout { grid-template-columns: 1fr; }
}

@media (max-width: 1020px) {
  .agent-app { display: block; padding-top: 64px; }
  .agent-sidebar { position: fixed; top: 0; bottom: 0; left: 0; z-index: 110; width: min(294px,86vw); height: 100dvh; transform: translateX(-104%); transition: transform .22s ease-out; }
  .agent-sidebar.open { transform: translateX(0); }
  .agent-mobile-bar { position: fixed; top: 0; right: 0; left: 0; z-index: 90; display: flex; align-items: center; gap: 12px; height: 64px; padding: 0 18px; border-bottom: 1px solid #1b2d48; background: var(--agent-sidebar); box-shadow: 0 7px 20px rgba(17,33,56,.18); }
  .agent-menu-toggle { display: grid; place-items: center; width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0; border: 1px solid rgba(255,255,255,.16) !important; border-radius: 8px; background: rgba(255,255,255,.07) !important; color: #fff !important; box-shadow: none !important; }
  .agent-mobile-title { color: #fff; font-size: 16px; font-weight: 800; }
  .agent-sidebar-overlay { position: fixed; inset: 0; z-index: 100; display: block; background: rgba(10,21,38,.52); }
  .agent-main { min-height: calc(100dvh - 64px); padding: 24px 20px 40px; }
}

@media (max-width: 760px) {
  .agent-login-card { padding: 32px 22px 28px; }
  .agent-main { padding: 20px 14px 34px; }
  .agent-view-header { align-items: stretch; flex-direction: column; gap: 15px; }
  .agent-view-header h2 { font-size: 26px; }
  .agent-view-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .agent-btn-primary, .agent-btn-ghost { width: 100%; }
  .agent-summary-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
  .agent-stat-card { min-height: 112px; padding: 16px; }
  .agent-stat-info strong { font-size: 25px; }
  .agent-chart-header { padding: 17px 16px 13px; }
  .agent-chart-frame { min-height: 300px; padding-right: 4px; padding-left: 4px; }
  .agent-daily-chart { height: 292px; }
  .agent-list-filters { grid-template-columns: 1fr 1fr; padding: 12px; }
  .agent-filter-search, .agent-result-count { grid-column: 1/-1; }
  .agent-filter-reset { width: 100%; }
  .agent-list-pagination { align-items: stretch; flex-direction: column; gap: 10px; }
  .agent-pagination-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .agent-list-pagination label { grid-column: 1/-1; grid-template-columns: auto minmax(0,1fr); }
  .agent-token-header { align-items: stretch; flex-direction: column; gap: 13px; }
  .agent-token-header .agent-btn-ghost { width: auto; align-self: flex-start; }
  .agent-token-card > .agent-btn-primary { width: 100%; }
  .agent-mail-grid { grid-template-columns: 1fr; min-height: 0; }
  .agent-mail-list-panel, .agent-mail-detail-panel { min-height: 320px; }
  .agent-message-list, .agent-page .agent-message-detail { max-height: 440px; }
  .agent-message-row { grid-template-columns: 38px minmax(0,1fr); gap: 10px; }
  .agent-message-avatar { width: 36px; height: 36px; border-radius: 9px; }
  .agent-message-avatar img, .agent-message-avatar svg { width: 21px; height: 21px; }
  .agent-mail-document-head { padding: 17px 16px 14px; }
  .agent-mail-frame { min-height: 400px; }
  .agent-session-drawer { grid-template-columns: minmax(0,1fr); padding-left: 18px; }
  .agent-session-backdrop { position: fixed; inset: 0; }
  .agent-session-sheet { position: relative; z-index: 1; width: 100%; height: 100dvh; border-left: 1px solid #c9dcff; border-radius: 18px 0 0 18px; }
  .agent-session-sheet-header { grid-template-columns: 44px minmax(0,1fr); padding: 18px 16px 14px; }
  .agent-session-heading-icon { width: 44px; height: 44px; border-radius: 13px; }
  .agent-session-sheet h2 { font-size: 21px; }
  .agent-session-close { grid-column: 1/-1; justify-self: end; }
  .agent-session-body { padding: 16px; }
  .agent-session-body textarea { min-height: 48dvh; font-size: 12px; }
  .agent-session-actions { display: grid; grid-template-columns: 1fr; padding: 13px 16px; }
  .agent-session-actions .agent-btn-primary, .agent-session-actions .agent-btn-ghost { width: 100%; }
  .agent-registration-modal { align-items: stretch; padding: 8px; }
  .agent-registration-dialog { width: 100%; max-height: calc(100dvh - 16px); padding: 18px; border-radius: 16px; }
  .agent-registration-header { align-items: flex-start; }
  .agent-registration-summary, .agent-registration-steps { grid-template-columns: 1fr; }
  .agent-registration-actions { bottom: -18px; margin: 0 -18px -18px; padding: 13px 18px; }
  .agent-registration-actions .agent-btn-primary, .agent-registration-actions .agent-btn-ghost { flex: 1 1 auto; }
  .agent-proxy-form-grid { grid-template-columns: 1fr 1fr; padding: 16px; }
  .agent-proxy-workflow-header { padding: 15px 16px; }
  .agent-proxy-form-grid label:nth-child(4), .agent-proxy-password-field { grid-column: auto; }
  .agent-proxy-actions { padding: 14px 16px; }
  .agent-upi-drawer { grid-template-columns: minmax(0,1fr); padding-left: 12px; }
  .agent-upi-backdrop { position: fixed; inset: 0; }
  .agent-upi-sheet { position: relative; z-index: 1; width: 100%; height: 100dvh; border-radius: 18px 0 0 18px; }
  .agent-upi-header { grid-template-columns: 44px minmax(0,1fr); padding: 18px 16px 14px; }
  .agent-upi-heading-icon { width: 44px; height: 44px; border-radius: 13px; }
  .agent-upi-header h2 { font-size: 21px; }
  .agent-upi-close { grid-column: 1/-1; justify-self: end; }
  .agent-upi-body { padding: 16px; }
  .agent-upi-summary { grid-template-columns: 1fr; }
  .agent-upi-retry { grid-template-columns: 42px minmax(0,1fr); }
  .agent-upi-retry-switch { grid-column: 2; justify-self: start; }
  .agent-upi-diagnostic-heading { grid-template-columns: auto minmax(0,1fr); }
  .agent-upi-diagnostic-heading time { grid-column: 2; }
  .agent-upi-diagnostic-details { grid-template-columns: 1fr; }
  .agent-upi-result { grid-template-columns: 1fr; }
  .agent-upi-qr-frame { width: min(100%,340px); justify-self: center; }
  .agent-upi-actions { display: grid; grid-template-columns: 1fr; padding: 13px 16px; }
  .agent-upi-actions .agent-btn-primary, .agent-upi-actions .agent-btn-ghost { width: 100%; }
  .agent-kakao-drawer { grid-template-columns: minmax(0,1fr); padding-left: 12px; }
  .agent-kakao-backdrop { position: fixed; inset: 0; }
  .agent-kakao-sheet { position: relative; z-index: 1; width: 100%; height: 100dvh; border-radius: 18px 0 0 18px; }
  .agent-kakao-header { grid-template-columns: 44px minmax(0,1fr); padding: 18px 16px 14px; }
  .agent-kakao-heading-icon { width: 44px; height: 44px; border-radius: 13px; }
  .agent-kakao-header h2 { font-size: 21px; }
  .agent-kakao-close { grid-column: 1/-1; justify-self: end; }
  .agent-kakao-body { padding: 16px; }
  .agent-kakao-summary { grid-template-columns: 1fr; }
  .agent-kakao-retry { grid-template-columns: 42px minmax(0,1fr); }
  .agent-kakao-retry-switch { grid-column: 2; justify-self: start; }
  .agent-kakao-diagnostic-heading { grid-template-columns: auto minmax(0,1fr); }
  .agent-kakao-diagnostic-heading time { grid-column: 2; }
  .agent-kakao-diagnostic-details { grid-template-columns: 1fr; }
  .agent-kakao-result { grid-template-columns: 1fr; }
  .agent-kakao-qr-frame { width: min(100%,340px); justify-self: center; }
  .agent-kakao-actions { display: grid; grid-template-columns: 1fr; padding: 13px 16px; }
  .agent-kakao-actions .agent-btn-primary, .agent-kakao-actions .agent-btn-ghost, .agent-kakao-actions .agent-btn-danger { width: 100%; }
}

@media (max-width: 480px) {
  .agent-mobile-bar { padding: 0 12px; }
  .agent-summary-grid { grid-template-columns: 1fr; }
  .agent-view-actions, .agent-list-filters { grid-template-columns: 1fr; }
  .agent-filter-search, .agent-result-count { grid-column: auto; }
  .agent-chart-header { align-items: flex-start; flex-direction: column; }
  .agent-proxy-form-grid { grid-template-columns: 1fr; }
  .agent-proxy-status-grid { grid-template-columns: 1fr; }
  .agent-proxy-actions { display: grid; grid-template-columns: 1fr; }
  .agent-proxy-actions .agent-btn-danger { margin-right: 0; }
  .agent-proxy-actions .agent-btn-primary, .agent-proxy-actions .agent-btn-ghost { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .agent-page *, .agent-page *::before, .agent-page *::after {
    scroll-behavior: auto !important; animation-duration: .01ms !important;
    animation-iteration-count: 1 !important; transition-duration: .01ms !important;
  }
}
