:root {
  --background: #ffffff;
  --foreground: #172033;
  --muted: #64748b;
  --muted-light: #94a3b8;
  --surface: rgba(255, 255, 255, 0.86);
  --surface-solid: #ffffff;
  --border: #e2e8f0;
  --brand-blue: #3b82f6;
  --brand-blue-dark: #2563eb;
  --brand-purple: #9333ea;
  --brand-purple-dark: #7e22ce;
  --brand-green: #22c55e;
  --brand-green-dark: #16a34a;
  --brand-orange: #f97316;
  --brand-red: #ef4444;
  --brand-red-dark: #dc2626;
  --on-brand: #ffffff;
  --page-gradient: linear-gradient(135deg, #eff6ff 0%, #eef2ff 48%, #faf5ff 100%);
  --brand-gradient: linear-gradient(135deg, #3b82f6, #9333ea);
  --brand-gradient-hover: linear-gradient(135deg, #2563eb, #7e22ce);
  --green-gradient: linear-gradient(135deg, #22c55e, #2563eb);
  --orange-gradient: linear-gradient(135deg, #f97316, #dc2626);
  --red-gradient: linear-gradient(135deg, #ef4444, #ea580c);
  --blue-soft: #eff6ff;
  --blue-border: #dbeafe;
  --purple-soft: #faf5ff;
  --green-soft: #f0fdf4;
  --green-border: #dcfce7;
  --green-text: #15803d;
  --orange-soft: #fff7ed;
  --orange-border: #ffedd5;
  --orange-text: #c2410c;
  --yellow-soft: #fefce8;
  --yellow-border: #fef9c3;
  --yellow-text: #854d0e;
  --red-soft: #fef2f2;
  --red-border: #fecaca;
  --red-text: #b91c1c;
  --bubble: #f3f4f6;
  --shadow: 0 20px 45px rgba(51, 65, 85, 0.12);
  --shadow-soft: 0 8px 25px rgba(51, 65, 85, 0.09);
  --radius: 14px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-width: 320px; background: var(--background); color: var(--foreground); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.5; }
button, input { font: inherit; }
button { cursor: pointer; }
button:disabled, input:disabled { cursor: not-allowed; opacity: 0.55; }
button:focus-visible, input:focus-visible, [tabindex]:focus-visible { outline: 3px solid rgba(59, 130, 246, 0.35); outline-offset: 2px; }
h1, h2, p { margin: 0; }
h1 { font-size: 1.65rem; line-height: 1.2; }
h2 { font-size: 1.15rem; line-height: 1.35; }
ul { margin: 0; padding-left: 1.1rem; }
.svg-library { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 1.35rem; height: 1.35rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.icon-large { width: 2rem; height: 2rem; }
.icon-small { width: 1rem; height: 1rem; }
.icon-tiny { width: 0.8rem; height: 0.8rem; }

.auth-screen { min-height: 100vh; display: grid; place-items: center; padding: 1.25rem; background: var(--page-gradient); }
.card { background: var(--surface); border: 1px solid rgba(255, 255, 255, 0.65); border-radius: var(--radius); box-shadow: var(--shadow-soft); backdrop-filter: blur(12px); }
.auth-card { width: min(100%, 28rem); box-shadow: var(--shadow); overflow: hidden; }
.card-header { padding: 1.5rem 1.5rem 0; }
.card-header.centered { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0.8rem; }
.card-header > p { color: var(--muted); }
.card-body { padding: 1.5rem; }
.lead { font-size: 1rem; }
.gradient-text { color: var(--brand-blue-dark); background: linear-gradient(90deg, var(--brand-blue-dark), var(--brand-purple)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.danger-text { color: var(--brand-red-dark); }
.brand-mark { width: 3rem; height: 3rem; display: grid; place-items: center; color: var(--on-brand); background: var(--brand-gradient); border-radius: 0.8rem; flex: 0 0 auto; }
.brand-mark-large { width: 4rem; height: 4rem; border-radius: 50%; }
.brand-mark-green { background: var(--green-gradient); }
.brand-mark-orange { background: var(--orange-gradient); }
.brand-mark-red { background: var(--red-gradient); }
.stack, .stack-lg, .stack-sm { display: flex; flex-direction: column; }
.stack { gap: 1rem; }
.stack-lg { gap: 1.35rem; }
.stack-sm { gap: 0.5rem; }
.centered { text-align: center; align-items: center; }
.field { display: flex; flex-direction: column; gap: 0.45rem; }
.field label { display: flex; align-items: center; gap: 0.45rem; font-size: 0.88rem; font-weight: 650; }
.field input, .chat-form input { width: 100%; min-height: 3rem; padding: 0.7rem 0.85rem; border: 1px solid var(--border); border-radius: 0.5rem; background: var(--surface-solid); color: var(--foreground); }
.field input::placeholder, .chat-form input::placeholder { color: var(--muted-light); }
.field-note { display: flex; align-items: center; justify-content: center; gap: 0.3rem; color: var(--muted); font-size: 0.75rem; }
.code-input { text-align: center; font-size: 1.5rem !important; letter-spacing: 0.35em; }
.button { min-height: 2.75rem; border: 0; border-radius: 0.5rem; padding: 0.65rem 1rem; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font-weight: 650; transition: transform 160ms ease, background 160ms ease, box-shadow 160ms ease; }
.button:not(:disabled):active { transform: translateY(1px); }
.button-full { width: 100%; min-height: 3rem; }
.button-primary { color: var(--on-brand); background: var(--brand-gradient); }
.button-primary:not(:disabled):hover { background: var(--brand-gradient-hover); box-shadow: 0 7px 18px rgba(59, 130, 246, 0.22); }
.button-green { color: var(--on-brand); background: var(--green-gradient); }
.button-outline { color: var(--foreground); background: var(--surface); border: 1px solid var(--border); }
.button-outline:not(:disabled):hover { background: var(--blue-soft); border-color: var(--brand-blue); }
.button-link { color: var(--brand-blue-dark); background: transparent; margin: 0 auto; }
.button-link:hover { color: var(--brand-purple-dark); }
.notice { padding: 1rem; border-radius: 0.65rem; border: 1px solid; font-size: 0.82rem; }
.notice h2 { display: flex; align-items: center; gap: 0.45rem; font-size: 0.9rem; margin-bottom: 0.45rem; }
.notice ul { font-size: 0.76rem; }
.notice li + li { margin-top: 0.2rem; }
.notice-success { background: linear-gradient(90deg, var(--green-soft), var(--blue-soft)); border-color: var(--green-border); color: var(--green-text); }
.notice-warning { background: var(--orange-soft); border-color: var(--orange-border); color: var(--orange-text); }
.notice-caution { background: var(--yellow-soft); border-color: var(--yellow-border); color: var(--yellow-text); }
.notice-danger { background: var(--red-soft); border-color: var(--red-border); color: var(--red-text); }
.account-details { padding: 1.25rem; border: 1px solid var(--blue-border); border-radius: 0.75rem; background: linear-gradient(90deg, var(--blue-soft), var(--purple-soft)); color: var(--brand-blue-dark); font-size: 0.86rem; overflow-wrap: anywhere; }
.account-details h2 { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 0.75rem; }
.account-details p + p { margin-top: 0.35rem; }
.timer { justify-content: center; }

.app-screen { min-height: 100vh; padding: 1.5rem 1rem; background: var(--page-gradient); }
.app-container { width: min(100%, 80rem); margin: 0 auto; }
.app-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.app-brand { display: flex; align-items: center; gap: 0.85rem; }
.app-brand h1 { font-size: 1.8rem; }
.app-brand p { color: var(--muted); font-size: 0.88rem; }
.stats-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1.25rem; }
.stat-card { padding: 1rem; display: flex; align-items: center; gap: 0.8rem; }
.stat-card p { color: var(--muted); font-size: 0.82rem; }
.stat-card strong { display: block; font-size: 1.45rem; line-height: 1.25; overflow-wrap: anywhere; }
.stat-icon { width: 2.6rem; height: 2.6rem; border-radius: 0.6rem; display: grid; place-items: center; flex: 0 0 auto; }
.stat-blue { background: var(--blue-soft); color: var(--brand-blue-dark); }
.stat-green { background: var(--green-soft); color: var(--brand-green-dark); }
.stat-purple { background: var(--purple-soft); color: var(--brand-purple); }
.tabs { display: grid; grid-template-columns: repeat(3, 1fr); padding: 0.25rem; margin-bottom: 1rem; border-radius: 0.65rem; background: var(--surface); box-shadow: var(--shadow-soft); }
.tab { min-height: 2.8rem; border: 0; border-radius: 0.45rem; background: transparent; color: var(--muted); font-weight: 650; }
.tab.active { color: var(--on-brand); background: var(--brand-gradient); }
.two-column { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.title-row { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.5rem; }
.title-row.simple { color: var(--brand-blue-dark); }
.title-icon { width: 2.5rem; height: 2.5rem; border-radius: 0.55rem; display: grid; place-items: center; color: var(--on-brand); background: var(--brand-gradient); }
.title-icon-green { background: linear-gradient(135deg, var(--brand-green), var(--brand-blue)); }
.drop-zone { padding: 2rem 1rem; text-align: center; border: 2px dashed var(--muted-light); border-radius: 0.8rem; transition: border-color 160ms ease, background 160ms ease; }
.drop-zone:hover, .drop-zone.drag-active { border-color: var(--brand-blue); background: var(--blue-soft); }
.drop-zone p { font-size: 1.05rem; font-weight: 650; margin-bottom: 0.35rem; }
.drop-zone span { color: var(--muted); font-size: 0.82rem; }
.upload-icon { width: 3rem; height: 3rem; color: var(--muted-light); margin-bottom: 0.75rem; }
.pipeline { display: flex; flex-direction: column; gap: 0.85rem; }
.pipeline-step { display: flex; align-items: center; gap: 0.85rem; padding: 0.9rem; border: 1px solid; border-radius: 0.75rem; }
.pipeline-step > span { width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 50%; color: var(--on-brand); font-size: 0.82rem; font-weight: 750; flex: 0 0 auto; }
.pipeline-step p { color: var(--muted); font-size: 0.8rem; }
.step-blue { background: var(--blue-soft); border-color: var(--blue-border); }
.step-blue > span { background: var(--brand-blue); }
.step-purple { background: var(--purple-soft); border-color: #f3e8ff; }
.step-purple > span { background: var(--brand-purple); }
.step-green { background: var(--green-soft); border-color: var(--green-border); }
.step-green > span { background: var(--brand-green); }
.step-orange { background: var(--orange-soft); border-color: var(--orange-border); }
.step-orange > span { background: var(--brand-orange); }
.table-title { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.table-title > p { font-size: 0.85rem; }
.filter-row { display: flex; align-items: end; gap: 1rem; }
.search-field { flex: 1; }
.amount-field { width: 9rem; }
.input-with-icon { position: relative; }
.input-with-icon .icon { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); color: var(--muted-light); }
.input-with-icon input { padding-left: 2.4rem; }
.table-wrap { max-height: 25rem; overflow: auto; border: 1px solid var(--border); border-radius: 0.6rem; background: var(--surface-solid); }
table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
th { position: sticky; top: 0; z-index: 1; padding: 0; text-align: left; background: var(--surface-solid); border-bottom: 1px solid var(--border); }
th button { width: 100%; padding: 0.8rem 1rem; border: 0; background: transparent; color: var(--foreground); text-align: left; font-weight: 700; }
th button:hover { background: var(--blue-soft); }
td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--border); }
tbody tr:hover { background: var(--blue-soft); }
.amount-cell { color: var(--brand-green-dark); font-weight: 700; white-space: nowrap; }
.status-pill { display: inline-block; padding: 0.2rem 0.55rem; border-radius: 999px; font-size: 0.73rem; background: var(--yellow-soft); color: var(--yellow-text); }
.status-pill.active { background: var(--green-soft); color: var(--green-text); }
.empty-cell { padding: 2rem; text-align: center; color: var(--muted); }
.scale-note { padding: 0.8rem; background: var(--blue-soft); color: var(--brand-blue-dark); border-radius: 0.55rem; font-size: 0.82rem; }
.ai-heading { background: linear-gradient(90deg, var(--blue-soft), var(--purple-soft)); border-color: var(--blue-border); }
.ai-heading .card-header { padding-bottom: 1.25rem; }
.quick-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; }
.quick-action { min-height: 4.7rem; flex-direction: column; color: var(--brand-blue-dark); font-size: 0.75rem; }
.chat-card { height: 26rem; display: flex; flex-direction: column; overflow: hidden; background: var(--surface-solid); }
.chat-messages { flex: 1; min-height: 0; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: 1rem; }
.message { display: flex; gap: 0.65rem; max-width: 85%; }
.message.user { align-self: flex-end; flex-direction: row-reverse; }
.avatar { width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; color: var(--on-brand); flex: 0 0 auto; }
.avatar-bot { background: var(--brand-purple); }
.avatar-user { background: var(--brand-blue); }
.message-bubble { padding: 0.7rem 0.85rem; border-radius: 0.6rem; background: var(--bubble); }
.message.user .message-bubble { color: var(--on-brand); background: var(--brand-blue); }
.message-bubble p { white-space: pre-line; font-size: 0.85rem; }
.message-bubble time { display: block; margin-top: 0.25rem; opacity: 0.7; font-size: 0.68rem; }
.chat-processing { display: flex; gap: 0.65rem; padding: 0 1rem 1rem; }
.processing-bubble { display: flex; align-items: center; gap: 0.5rem; padding: 0.7rem 0.85rem; border-radius: 0.6rem; background: var(--bubble); font-size: 0.82rem; }
.chat-form { display: flex; gap: 0.5rem; padding: 1rem; border-top: 1px solid var(--border); }
.chat-form input { min-height: 2.75rem; }
.spinner { width: 1rem; height: 1rem; display: inline-block; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: spin 700ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.toast-region { position: fixed; z-index: 20; top: 1rem; right: 1rem; width: min(calc(100% - 2rem), 23rem); display: flex; flex-direction: column; gap: 0.6rem; pointer-events: none; }
.toast { padding: 0.9rem 1rem; border: 1px solid var(--green-border); border-radius: 0.65rem; background: var(--surface-solid); box-shadow: var(--shadow); animation: toast-in 180ms ease-out; }
.toast.error { border-color: var(--red-border); }
.toast strong { display: block; font-size: 0.9rem; }
.toast p { color: var(--muted); font-size: 0.78rem; margin-top: 0.2rem; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-0.5rem); } }

@media (max-width: 760px) {
  .two-column { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr; }
  .app-header { align-items: flex-start; }
  .app-brand h1 { font-size: 1.35rem; }
  .app-brand p { font-size: 0.75rem; }
  .app-header > .button { padding: 0.55rem 0.7rem; }
  .filter-row { flex-wrap: wrap; }
  .search-field { flex-basis: 100%; }
  .amount-field { flex: 1; width: auto; }
  .quick-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tab { font-size: 0.78rem; padding: 0.4rem; }
  th button, td { padding: 0.7rem; }
  .message { max-width: 95%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}