:root {
  --font-sans: 'Poppins', system-ui, sans-serif;
  --color-bg: #F6F5F2;
  --color-surface: #FFFFFF;
  --color-border: #E8E6E1;
  --color-border-strong: #D6D3CC;
  --color-text: #424242;
  --color-text-secondary: #6B6B6B;
  --color-text-muted: #9A9890;
  --color-accent: #218AE7;
  --color-accent-bg: #E9F4FE;
  --color-success: #059669;
  --color-success-bg: #ECFDF5;
  --color-danger: #DC2626;
  --color-danger-bg: #FEF2F2;
  --color-cyan: #0E93A6;
  --color-cyan-bg: #E5FCFF;
  --radius: 10px;
  --space-1: 8px; --space-2: 16px; --space-3: 24px; --space-4: 32px; --space-5: 48px;
}
* { box-sizing: border-box; }
[x-cloak] { display: none !important; }
body { margin: 0; font-family: var(--font-sans); background: var(--color-bg); color: var(--color-text); }
.page {
  min-height: 100vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: var(--space-5) var(--space-2);
  position: relative;
  overflow: hidden;
}
.page::before {
  content: '';
  position: absolute;
  top: -20%; left: 50%;
  width: 700px; height: 700px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, var(--color-accent-bg), transparent);
  opacity: .6;
  pointer-events: none;
  z-index: 0;
}
.brand { display:flex; align-items:center; gap:8px; margin-bottom: 24px; position:relative; z-index:1; animation: fade-slide-in .4s ease both; }
.brand-logo { height: 16px; width: auto; display:block; }
.brand-logo-link { display:block; line-height:0; transition: opacity .15s ease; }
.brand-logo-link:hover { opacity:.75; }
.brand-logo-video { height: 20px; width: auto; display:block; }
.brand-dot { width:22px; height:22px; border-radius:6px; background: var(--color-accent); }
.brand-name { font-size: 12px; color: var(--color-text-secondary); letter-spacing: .01em; }
.card {
  width: 100%; max-width: 400px;
  background: var(--color-surface);
  border-radius: 18px;
  padding: 40px 36px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 20px 48px rgba(30,30,30,0.09), 0 4px 12px rgba(30,30,30,0.05);
  position: relative; z-index: 1;
  animation: fade-slide-in .45s ease both;
  animation-delay: .06s;
}
.title { font-size: 23px; font-weight: 600; text-align:center; margin: 0 0 4px; letter-spacing: -.01em; }
.subtitle { font-size: 14px; color: var(--color-text-secondary); text-align:center; margin: 0 0 var(--space-4); }
.field { margin-bottom: var(--space-2); }
.field label { display:block; font-size: 13px; color: var(--color-text-secondary); margin-bottom: 6px; }
.field input { width:100%; padding:10px 12px; border-radius: var(--radius); border:1px solid var(--color-border); background:#FAFAF9; font-family: var(--font-sans); font-size:14px; }
.field input:focus { outline: none; border-color: var(--color-accent); }
.password-field { position: relative; }
.password-field input { padding-right: 32px; width: 100%; }
.password-toggle {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  background: none; border: none; padding: 4px; margin: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--color-text-muted);
  transition: color .15s ease;
}
.password-toggle:hover { color: var(--color-accent); }
.two-col { display:flex; gap:12px; }
.two-col .field { flex:1; }
.submit-btn { width:100%; padding:12px; border-radius: 999px; border:none; background: #1A1A1A; color:#fff; font-size:14px; font-weight:500; margin-top: var(--space-2); cursor:pointer; transition: opacity .2s; }
.submit-btn:disabled { opacity:.4; cursor:not-allowed; }
.error-banner { background: var(--color-danger-bg); color: var(--color-danger); font-size:13px; padding:10px 12px; border-radius: var(--radius); margin-bottom: var(--space-2); }
.hint { font-size:13px; color: var(--color-text-secondary); text-align:center; margin-top: var(--space-3); }
.hint a { color: var(--color-accent); text-decoration:none; font-weight:500; }
.success { text-align:center; padding: 12px 0; }
.logo-intro { width: 100%; max-width: 260px; height: auto; display: block; margin: 0 auto 12px; }
.success-icon {
  width:48px; height:48px; border-radius:50%;
  background: var(--color-success-bg); color: var(--color-success);
  display:flex; align-items:center; justify-content:center; margin: 0 auto 16px; font-size:22px;
  animation: pop-in .4s cubic-bezier(.34,1.56,.64,1) both;
}
.success-title { font-size:18px; font-weight:600; margin:0 0 4px; }
.success-subtitle { font-size:14px; color: var(--color-text-secondary); margin:0 0 var(--space-4); }
.pending-icon {
  width:48px; height:48px; border-radius:50%;
  background: var(--color-accent-bg); color: var(--color-accent);
  display:flex; align-items:center; justify-content:center; margin: 0 auto 16px; font-size:22px;
  animation: pop-in .4s cubic-bezier(.34,1.56,.64,1) both;
}
.footer { font-size:12px; color: var(--color-text-muted); margin-top: 24px; position:relative; z-index:1; text-align:center; }
.page-wide .footer { max-width: 1040px; margin: 16px auto 0; animation: fade-slide-in .4s ease both; animation-delay: .1s; }

@keyframes pop-in {
  from { opacity: 0; transform: scale(.5); }
  to { opacity: 1; transform: scale(1); }
}

.dot-pulse::after {
  content: '...';
  display: inline-block;
  overflow: hidden;
  width: 0;
  vertical-align: bottom;
  animation: dot-pulse-reveal 1.1s steps(4, end) infinite;
}
@keyframes dot-pulse-reveal {
  to { width: 1.2em; }
}

.page-wide { min-height: 100vh; padding: 20px 16px; }
.app-shell { max-width: 1040px; margin: 0 auto; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; overflow: hidden; }
.page-content { padding: 20px 24px; background: var(--color-bg); }

.topbar-full { padding: 10px 24px; border-bottom: 1px solid var(--color-border); display:flex; align-items:center; justify-content:space-between; }
.navbar-full { background: #FBFBFA; padding: 0 24px; border-bottom: 1px solid var(--color-border); }
.topbar-left { display:flex; align-items:center; gap:24px; }
.nav-links { display:flex; gap:28px; }
.nav-links a { display:flex; align-items:center; gap:7px; color: var(--color-text-secondary); text-decoration:none; font-size:13px; padding:12px 0; border-bottom: 2px solid transparent; }
.nav-links a.active { color: var(--color-accent); font-weight:500; border-bottom-color: var(--color-accent); }
.nav-links a svg { opacity:.8; }
.nav-links a.active svg { opacity:1; }
.topbar-right { display:flex; align-items:center; gap:16px; position:relative; }
.avatar-circle { width:32px; height:32px; border-radius:50%; background: var(--color-accent); color:#fff; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:600; cursor:pointer; user-select:none; overflow:hidden; }
.avatar-circle img { width:100%; height:100%; object-fit:cover; }
.user-dropdown { position:absolute; right:0; top:42px; background:#fff; border-radius:10px; box-shadow: 0 8px 24px rgba(0,0,0,.16); min-width:150px; overflow:hidden; z-index:20; }
.user-dropdown .user-name { padding:10px 14px; font-size:13px; color: var(--color-text); border-bottom:1px solid var(--color-border); font-weight:500; }
.user-dropdown button { width:100%; text-align:left; padding:10px 14px; border:none; background:none; font-family:var(--font-sans); font-size:13px; color: var(--color-text); cursor:pointer; }
.user-dropdown button:hover { background: var(--color-bg); }
.page-title { font-size: 20px; font-weight: 500; margin:0; }
.panel-card { background: var(--color-surface); border-radius: 16px; overflow:hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.04); }
table { width:100%; border-collapse: collapse; }
th { text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.03em; color: var(--color-text-muted); padding: 10px 16px; border-bottom: 1px solid var(--color-border); }
td { padding: 10px 16px; border-bottom: 1px solid var(--color-border); font-size:13px; }
tr:last-child td { border-bottom: none; }
.status-pill { display:inline-block; padding:3px 10px; border-radius:999px; font-size:12px; font-weight:500; }
.status-pending { background: var(--color-accent-bg); color: var(--color-accent); }
.status-approved { background: var(--color-success-bg); color: var(--color-success); }
.admin-badge { display:inline-block; padding:3px 10px; border-radius:999px; font-size:12px; font-weight:500; background:#1A1A1A; color:#fff; margin-left:6px; }
.name-cell { display:flex; align-items:center; gap:10px; }
.avatar-mini { width:26px; height:26px; border-radius:50%; background: var(--color-accent); color:#fff; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:600; flex-shrink:0; overflow:hidden; }
.avatar-mini img { width:100%; height:100%; object-fit:cover; }
.avatar-large { width:76px; height:76px; border-radius:50%; background: var(--color-accent); color:#fff; display:flex; align-items:center; justify-content:center; font-size:26px; font-weight:600; overflow:hidden; flex-shrink:0; }
.avatar-large img { width:100%; height:100%; object-fit:cover; }
.avatar-upload-row { display:flex; align-items:center; gap:16px; margin-bottom: var(--space-3); }
.avatar-upload-btn { padding:6px 14px; border-radius:999px; border:1px solid var(--color-border-strong); background: var(--color-surface); color: var(--color-text); font-size:13px; cursor:pointer; }
.success-text { color: var(--color-success); font-size:13px; margin:8px 0 0; }
.error-text { color: var(--color-danger); font-size:13px; margin:8px 0 0; }
.form-field { margin-bottom: 12px; }
.form-field label { display:block; font-size:11px; text-transform:uppercase; letter-spacing:.03em; color: var(--color-text-muted); margin-bottom:6px; }
.form-field input { width:100%; padding:7px 10px; border-radius: 8px; border:1px solid var(--color-border); background:#FAFAF9; font-family: var(--font-sans); font-size:13px; color: var(--color-text); }
.form-field input:focus { outline:none; border-color: var(--color-accent); }
.form-field input:disabled { color: var(--color-text-muted); cursor:not-allowed; }
.save-btn { padding:10px 20px; border-radius:999px; border:none; background: var(--color-accent); color:#fff; font-size:14px; font-weight:500; cursor:pointer; }
.save-btn:disabled { opacity:.4; cursor:not-allowed; }
.settings-label { color: var(--color-text-muted); font-size:11px; text-transform:uppercase; letter-spacing:.03em; width:150px; vertical-align:middle; white-space:nowrap; }
.settings-table td { border-bottom: none; }
.settings-input { width:100%; border:none; border-bottom:1px solid var(--color-border); background:transparent; font-family: var(--font-sans); font-size:13px; color: var(--color-text); padding:6px 4px; border-radius:4px; transition: background .15s, border-color .15s; }
.settings-input:hover { background: var(--color-bg); }
.settings-input:focus { outline:none; background: var(--color-accent-bg); border-bottom-color: var(--color-accent); }
.settings-input:disabled { color: var(--color-text-muted); cursor:not-allowed; border-bottom-style:dashed; }
.settings-input:disabled:hover { background:transparent; }
.settings-actions { padding: 14px 16px; }
.approve-btn { padding:6px 14px; border-radius:999px; border:none; background:#1A1A1A; color:#fff; font-size:13px; cursor:pointer; }
.approve-btn:disabled { opacity:.4; cursor:not-allowed; }
.center-message { text-align:center; padding: 60px 20px; color: var(--color-text-secondary); }
.center-message a { color: var(--color-accent); }

.inline-form { display:flex; gap:10px; margin-bottom: var(--space-3); }
.inline-form input { flex:1; padding:10px 12px; border-radius: var(--radius); border:1px solid var(--color-border); background:#FAFAF9; font-family: var(--font-sans); font-size:14px; }
.inline-form input:focus { outline:none; border-color: var(--color-accent); }
.add-btn { padding:10px 20px; border-radius:999px; border:none; background: var(--color-accent); color:#fff; font-size:14px; font-weight:500; cursor:pointer; white-space:nowrap; }
.add-btn:disabled { opacity:.4; cursor:not-allowed; }
.toggle-btn { padding:6px 14px; border-radius:999px; border:1px solid var(--color-border-strong); background: var(--color-surface); color: var(--color-text); font-size:13px; cursor:pointer; }
.toggle-btn:disabled { opacity:.4; cursor:not-allowed; }
.link-select { padding:6px 10px; border-radius:8px; border:1px solid var(--color-border-strong); background: var(--color-surface); color: var(--color-text); font-size:13px; font-family: var(--font-sans); cursor:pointer; max-width:200px; }
.link-select:disabled { opacity:.5; cursor:not-allowed; }
.status-inactive { background: var(--color-danger-bg); color: var(--color-danger); }

.kpi-grid { display:grid; grid-template-columns: repeat(4, 1fr); gap:12px; margin-bottom: 14px; }
.kpi-card { background: var(--color-surface); border-radius: 12px; padding: 14px 16px; display:flex; align-items:center; justify-content:space-between; gap:10px; box-shadow: 0 1px 3px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.04); }
.kpi-label { font-size:11px; color: var(--color-text-muted); text-transform:uppercase; letter-spacing:.03em; margin:0 0 4px; }
.kpi-value { font-size:22px; font-weight:600; margin:0; }
.kpi-sub { font-size:12px; color: var(--color-text-secondary); margin:2px 0 0; }
.kpi-icon { width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:16px; }
.kpi-icon-blue { background: var(--color-accent-bg); color: var(--color-accent); }
.kpi-icon-green { background: var(--color-success-bg); color: var(--color-success); }
.kpi-icon-cyan { background: var(--color-cyan-bg); color: var(--color-cyan); }
.kpi-icon-gray { background: var(--color-bg); color: var(--color-text-secondary); }
.section-card { background: var(--color-surface); border-radius:14px; padding: 16px 18px; margin-bottom: 14px; box-shadow: 0 1px 3px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.04); }
.section-title { font-size:14px; font-weight:500; margin:0 0 10px; }
.chart-caption { font-size:12px; color: var(--color-text-muted); margin-top:6px; }
.section-header-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.range-toggle { display:flex; gap:4px; }
.range-toggle button {
  padding:4px 10px; border-radius:999px; border:1px solid var(--color-border-strong);
  background: var(--color-surface); color: var(--color-text-secondary);
  font-family: var(--font-sans); font-size:12px; cursor:pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.range-toggle button:hover { border-color: var(--color-accent); color: var(--color-accent); }
.range-toggle button.active { background: var(--color-accent); border-color: var(--color-accent); color:#fff; }
.trend-chart-wrap { position:relative; height:180px; width:100%; }

.bar-row { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.bar-row:last-child { margin-bottom:0; }
.bar-label { width:96px; font-size:12px; color: var(--color-text-secondary); flex-shrink:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bar-track { flex:1; height:8px; background: var(--color-bg); border-radius:999px; overflow:hidden; }
.bar-fill { height:100%; border-radius:999px; background: var(--color-accent); transition: width .5s ease; }
.bar-value { width:32px; text-align:right; font-size:12px; font-weight:600; color: var(--color-text); flex-shrink:0; }
.agent-bars { margin-bottom:14px; padding-bottom:14px; border-bottom:1px solid var(--color-border); }

.split-bar { height:14px; border-radius:999px; background: var(--color-border); overflow:hidden; margin-bottom:12px; }
.split-fill { height:100%; border-radius:999px; }
.split-resolved { background: var(--color-accent); transition: width .5s ease; }
.split-legend { display:flex; gap:20px; font-size:12px; color: var(--color-text-secondary); }
.split-legend b { color: var(--color-text); }
.legend-dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px; }
.legend-dot-blue { background: var(--color-accent); }
.legend-dot-gray { background: var(--color-border-strong); }
.comment-item {
  padding: 10px 8px;
  margin: 0 -8px;
  border-radius: 10px;
  border-bottom: 1px solid var(--color-border);
  position: relative;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease, background-color .2s ease;
}
.comment-item:last-child { border-bottom:none; }
.comment-item:hover {
  background: var(--color-surface);
  box-shadow: 0 22px 44px rgba(0,0,0,0.18), 0 8px 16px rgba(0,0,0,0.09);
  transform: scale(1.14) translateY(-6px);
  border-color: transparent;
  z-index: 5;
}
.comment-meta { display:flex; align-items:center; gap:8px; margin-bottom:4px; font-size:12px; color: var(--color-text-muted); }
.comment-text { font-size:13px; margin:0; }
.mini-pill { font-size:11px; padding:2px 8px; border-radius:999px; }
.grid-two { display:grid; grid-template-columns: 1.4fr 1fr; gap:12px; }
.grid-two-equal { display:grid; grid-template-columns: 1fr 1fr; gap:12px; align-items:start; }
@media (max-width: 900px) { .kpi-grid { grid-template-columns: repeat(2, 1fr); } .grid-two { grid-template-columns: 1fr; } .grid-two-equal { grid-template-columns: 1fr; } }

/* ---------- Motion & micro-interactions ---------- */

@keyframes fade-slide-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.app-shell { animation: fade-slide-in .35s ease both; }
.card { animation: fade-slide-in .35s ease both; }
.kpi-card { animation: fade-slide-in .35s ease both; }
.kpi-grid .kpi-card:nth-child(1) { animation-delay: 0s; }
.kpi-grid .kpi-card:nth-child(2) { animation-delay: .04s; }
.kpi-grid .kpi-card:nth-child(3) { animation-delay: .08s; }
.kpi-grid .kpi-card:nth-child(4) { animation-delay: .12s; }

/* Cards lift softly on hover */
.kpi-card, .section-card, .panel-card {
  transition: box-shadow .2s ease, transform .2s ease;
}
.kpi-card:hover, .section-card:hover {
  box-shadow: 0 8px 20px rgba(0,0,0,0.09), 0 2px 6px rgba(0,0,0,0.05);
  transform: translateY(-2px);
}

/* Buttons: lift + deepen on hover, settle on click */
.submit-btn, .add-btn, .save-btn, .approve-btn, .toggle-btn, .avatar-upload-btn, .link-select {
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .12s ease, box-shadow .15s ease;
}
.submit-btn:hover:not(:disabled) { background:#000; transform: translateY(-1px); box-shadow: 0 6px 14px rgba(0,0,0,0.18); }
.submit-btn:active:not(:disabled) { transform: translateY(0); box-shadow:none; }

.add-btn:hover:not(:disabled), .save-btn:hover:not(:disabled) {
  background:#1476CC; transform: translateY(-1px); box-shadow: 0 6px 14px rgba(33,138,231,0.28);
}
.add-btn:active:not(:disabled), .save-btn:active:not(:disabled) { transform: translateY(0); box-shadow:none; }

.approve-btn:hover:not(:disabled) { background:#000; transform: translateY(-1px); box-shadow: 0 6px 14px rgba(0,0,0,0.18); }
.approve-btn:active:not(:disabled) { transform: translateY(0); }

.toggle-btn:hover:not(:disabled), .avatar-upload-btn:hover:not(:disabled), .link-select:hover:not(:disabled) {
  border-color: var(--color-accent); color: var(--color-accent); transform: translateY(-1px);
}
.toggle-btn:active:not(:disabled), .avatar-upload-btn:active:not(:disabled) { transform: translateY(0); }

/* Table rows: gentle highlight + avatar pop on hover */
tbody tr { transition: background-color .12s ease; }
tbody tr:hover { background: var(--color-bg); }
tbody tr:hover .avatar-mini { transform: scale(1.12); }

/* Nav links: sliding underline */
.nav-links a {
  position: relative;
  transition: color .15s ease;
}
.nav-links a:hover { color: var(--color-text); }
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--color-accent);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s ease;
}
.nav-links a.active::after { transform: scaleX(1); }
.nav-links a:not(.active):hover::after { transform: scaleX(1); opacity: .35; }

/* Avatars: playful hover pop */
.avatar-circle, .avatar-mini, .avatar-large {
  transition: transform .15s ease, box-shadow .15s ease;
}
.avatar-circle:hover { transform: scale(1.08); box-shadow: 0 3px 10px rgba(0,0,0,.18); }
.avatar-large:hover { transform: scale(1.04); }

/* Status pills: tiny bounce on hover */
.status-pill, .admin-badge, .mini-pill {
  transition: transform .15s ease;
}
.status-pill:hover, .admin-badge:hover { transform: scale(1.06); }

/* Inputs: soft focus glow, consistent across the app */
.field input, .inline-form input {
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.field input:focus, .inline-form input:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-bg);
}

/* Links */
.hint a, .center-message a { transition: opacity .15s ease; }
.hint a:hover, .center-message a:hover { opacity: .7; }

/* Respect users who'd rather skip the motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}