:root {
  --ink: #17212b;
  --muted: #6d7781;
  --soft-muted: #939ba3;
  --accent: #ff5d52;
  --accent-dark: #dd433a;
  --accent-soft: #fff0ed;
  --line: #e7e9eb;
  --surface: #ffffff;
  --background: #f4f5f5;
  --green: #15956d;
  --danger: #c63f36;
  --danger-soft: #fff0ee;
  --yellow: #d89b13;
  --purple: #6856d9;
  --blue: #2e75cf;
  --shadow: 0 14px 40px rgba(23, 33, 43, 0.08);
  --font: "Aptos", "Segoe UI", Arial, Helvetica, sans-serif;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--background); }
body { min-height: 100vh; margin: 0; color: var(--ink); font-family: var(--font); }
button, input, select { font: inherit; }
button { color: inherit; }
[hidden] { display: none !important; }

.loginView {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 28px;
  background:
    radial-gradient(circle at 14% 18%, rgba(255, 93, 82, 0.19), transparent 30%),
    radial-gradient(circle at 84% 82%, rgba(78, 181, 153, 0.15), transparent 29%),
    #f4f5f5;
}

.loginCard {
  width: min(440px, 100%);
  padding: 48px;
  border: 1px solid rgba(23, 33, 43, 0.07);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 28px 80px rgba(23, 33, 43, 0.14);
}

.brandMark {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  margin-bottom: 28px;
  border-radius: 17px;
  background: var(--ink);
  color: #fff;
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -0.08em;
}

.brandMark span, .brand > span { color: var(--accent); }
.kicker { margin: 0 0 8px; color: var(--accent); font-size: 11px; font-weight: 850; letter-spacing: 0.14em; }
.loginCard h1 { margin: 0; font-size: 38px; letter-spacing: -0.055em; }
.loginIntro { margin: 13px 0 30px; color: var(--muted); font-size: 15px; line-height: 1.55; }
.loginCard form { display: grid; gap: 12px; }
.loginCard label { font-size: 12px; font-weight: 750; }

.passwordField { position: relative; }
.passwordField input {
  width: 100%;
  height: 54px;
  padding: 0 68px 0 16px;
  border: 1px solid #d7dadd;
  border-radius: 13px;
  background: #fff;
  color: var(--ink);
  font-size: 18px;
}
.passwordField input:focus { border-color: var(--accent); outline: 3px solid rgba(255, 93, 82, 0.14); }
.passwordField button {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  padding: 8px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
}

.primaryButton {
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 5px;
  padding: 0 18px 0 22px;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 13px;
  font-weight: 850;
  cursor: pointer;
  transition: transform 0.18s, background 0.18s;
}
.primaryButton:hover { transform: translateY(-2px); background: var(--accent-dark); }
.primaryButton:disabled { transform: none; opacity: 0.65; cursor: wait; }
.primaryButton b { font-size: 18px; }
.formError { margin: 0; padding: 10px 12px; border: 1px solid #f0b5b0; border-radius: 10px; background: #fff3f1; color: #962f28; font-size: 12px; }

.dashboard { min-height: 100vh; }
.topbar {
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 max(24px, calc((100vw - 1280px) / 2));
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(14px);
}
.brand { color: var(--ink); font-size: 20px; font-weight: 900; letter-spacing: -0.065em; text-decoration: none; }
.brand small { margin-left: 6px; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: 0.16em; }
.topbarRight { display: flex; align-items: center; gap: 18px; }
.privateBadge { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12px; font-weight: 700; }
.privateBadge i { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(21, 149, 109, 0.1); }
.textButton { padding: 6px 0; border: 0; border-bottom: 1px solid var(--ink); background: transparent; font-size: 12px; font-weight: 750; cursor: pointer; }

.primaryNav {
  width: min(1280px, calc(100% - 48px));
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 24px auto 0;
}
.navButton {
  min-height: 88px;
  display: grid;
  grid-template-columns: 44px 1fr;
  grid-template-rows: auto auto;
  column-gap: 14px;
  align-items: center;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  text-align: left;
  cursor: pointer;
  transition: border 0.18s, transform 0.18s, box-shadow 0.18s;
}
.navButton:hover { transform: translateY(-2px); border-color: #d3d6d8; box-shadow: 0 8px 24px rgba(23, 33, 43, 0.06); }
.navButton.active { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 8px 24px rgba(255, 93, 82, 0.08); }
.navIcon {
  grid-row: 1 / 3;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: #f0f1f2;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}
.navButton.active .navIcon { background: var(--accent); color: #fff; }
.navButton strong { align-self: end; font-size: 15px; }
.navButton small { align-self: start; color: var(--muted); font-size: 12px; }

.content { width: min(1280px, calc(100% - 48px)); margin: 0 auto; padding: 48px 0 80px; }
.view { animation: reveal 0.24s ease both; }
@keyframes reveal { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

.pageHeading { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 30px; }
.pageHeading h2 { margin: 0; font-size: clamp(30px, 3vw, 42px); letter-spacing: -0.05em; }
.pageHeading > div > p:last-child { margin: 9px 0 0; color: var(--muted); font-size: 14px; }
.headingActions { display: flex; align-items: end; gap: 10px; }
.secondaryButton, .refreshButton {
  height: 42px;
  border: 1px solid #d7dadd;
  background: #fff;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.secondaryButton { padding: 0 17px; border-radius: 999px; }
.refreshButton { width: 42px; border-radius: 50%; font-size: 20px; }
.secondaryButton:hover, .refreshButton:hover { border-color: var(--accent); color: var(--accent-dark); }

.rangeField { display: grid; gap: 5px; }
.rangeField span, .searchField span, .filterField span { color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
select, input[type="search"] { height: 42px; border: 1px solid #d7dadd; border-radius: 11px; background: #fff; color: var(--ink); }
select { padding: 0 36px 0 12px; }
input[type="search"] { padding: 0 14px; }
select:focus, input[type="search"]:focus { border-color: var(--accent); outline: 3px solid rgba(255, 93, 82, 0.11); }

.toolbar {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 220px auto;
  gap: 12px;
  align-items: end;
  margin-bottom: 14px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: #fff;
}
.searchField, .filterField { display: grid; gap: 6px; }
.resultCount { min-width: 118px; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; padding-bottom: 3px; }
.resultCount strong { font-size: 22px; letter-spacing: -0.03em; }
.resultCount span { color: var(--muted); font-size: 10px; }

.panel { border: 1px solid var(--line); border-radius: 20px; background: var(--surface); box-shadow: 0 6px 22px rgba(23, 33, 43, 0.045); }
.tablePanel { min-height: 280px; overflow: hidden; }
.tableWrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { padding: 14px 18px; border-bottom: 1px solid var(--line); background: #fafafa; color: var(--soft-muted); font-size: 10px; font-weight: 850; letter-spacing: 0.09em; text-align: left; text-transform: uppercase; }
td { padding: 17px 18px; border-bottom: 1px solid #eeeff0; font-size: 13px; vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background 0.15s; }
tbody tr:hover { background: #fffaf9; }
.dateCell { min-width: 118px; color: var(--muted); font-size: 11px; }
.personCell { min-width: 190px; }
.personCell strong { display: block; margin-bottom: 4px; }
.personCell span { display: block; max-width: 220px; overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.forCell { min-width: 130px; }
.messageCell { max-width: 390px; }
.messageCell span { display: -webkit-box; overflow: hidden; color: #59636c; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.statusPill { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 999px; background: #f0f1f2; color: #5b646d; font-size: 10px; font-weight: 850; white-space: nowrap; }
.statusPill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status-new, .status-awaiting_approval, .status-awaiting_edit, .status-pending { background: #fff4d8; color: #976600; }
.status-replied, .status-responded, .status-sent { background: #e4f7ef; color: #087553; }
.status-rejected { background: var(--danger-soft); color: #a62f27; }
.status-contact_replied { background: #e8efff; color: #315fa7; }
.actionsCell { min-width: 310px; }
.rowActions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.quickAction, .requestAction, .confirmActions button {
  border: 1px solid var(--line);
  background: #fff;
  font-weight: 800;
  cursor: pointer;
  transition: border-color 0.16s, background 0.16s, color 0.16s, transform 0.16s;
}
.quickAction { min-height: 34px; padding: 0 10px; border-radius: 999px; font-size: 10px; }
.quickAction:hover, .requestAction:hover, .confirmActions button:hover { transform: translateY(-1px); }
.repliedAction { border-color: #a9decf; color: #087553; }
.repliedAction:hover, .repliedAction.isActive { border-color: var(--green); background: #e4f7ef; }
.rejectedAction { border-color: #edbeb9; color: #a62f27; }
.rejectedAction:hover, .rejectedAction.isActive { border-color: var(--danger); background: var(--danger-soft); }
.deleteAction { color: var(--danger); }
.deleteAction:hover { border-color: var(--danger); background: var(--danger-soft); }
.quickAction:disabled, .requestAction:disabled, .confirmActions button:disabled { cursor: default; opacity: 0.68; transform: none; }
.viewButton { width: 34px; height: 34px; border: 1px solid #dadcdf; border-radius: 50%; background: #fff; color: var(--ink); font-size: 16px; cursor: pointer; }
.viewButton:hover { border-color: var(--accent); color: var(--accent); }
.loadingState, .emptyState { min-height: 278px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--muted); font-size: 13px; }
.emptyState strong { color: var(--ink); font-size: 16px; }
.emptyState span { color: var(--muted); font-size: 12px; }
.analyticsLoading { border: 1px solid var(--line); border-radius: 20px; background: #fff; }

.metricGrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.metricCard { min-height: 145px; display: flex; flex-direction: column; justify-content: center; padding: 24px; border: 1px solid var(--line); border-radius: 19px; background: #fff; box-shadow: 0 5px 18px rgba(23, 33, 43, 0.04); }
.metricCard > span { color: var(--muted); font-size: 11px; font-weight: 750; }
.metricCard strong { margin: 10px 0 7px; font-size: 35px; letter-spacing: -0.055em; }
.metricCard small { color: var(--soft-muted); font-size: 10px; }
.accentCard { border-color: var(--accent); background: var(--accent); color: #fff; }
.accentCard > span, .accentCard small { color: rgba(255, 255, 255, 0.8); }

.analyticsGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.analyticsGrid > .panel { min-height: 360px; padding: 24px; }
.trendPanel { grid-column: 1 / -1; }
.panelHeading { display: flex; align-items: start; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.panelHeading h3 { margin: 0; font-size: 17px; letter-spacing: -0.02em; }
.panelHeading p { margin: 5px 0 0; color: var(--muted); font-size: 11px; }
.legend { display: flex; gap: 14px; color: var(--muted); font-size: 10px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 8px; height: 8px; border-radius: 50%; }
.visitorDot { background: var(--accent); }
.formDot { background: var(--purple); }
.chartWrap { width: 100%; min-height: 265px; }
#trendChart { width: 100%; height: 265px; overflow: visible; }
.chartGrid { stroke: #eceeef; stroke-width: 1; }
.chartAxisLabel { fill: #9aa1a8; font-size: 9px; font-family: var(--font); }
.chartVisitorArea { fill: rgba(255, 93, 82, 0.09); }
.chartVisitorLine { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.chartFormLine { fill: none; stroke: var(--purple); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.chartPointVisitor { fill: var(--accent); }
.chartPointForm { fill: var(--purple); }

.rankList, .simpleList { display: grid; gap: 12px; }
.rankItem { display: grid; grid-template-columns: 28px minmax(90px, 1fr) 2fr auto; gap: 10px; align-items: center; }
.rankItem .flag { font-size: 18px; }
.rankItem strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.rankItem progress { width: 100%; height: 7px; border: 0; border-radius: 999px; overflow: hidden; background: #eff0f1; }
.rankItem progress::-webkit-progress-bar { border-radius: 999px; background: #eff0f1; }
.rankItem progress::-webkit-progress-value { border-radius: 999px; background: var(--accent); }
.rankItem progress::-moz-progress-bar { border-radius: 999px; background: var(--accent); }
.rankItem span:last-child { min-width: 52px; color: var(--muted); font-size: 10px; text-align: right; }
.listItem { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-bottom: 12px; border-bottom: 1px solid #eff0f1; }
.listItem:last-child { padding-bottom: 0; border-bottom: 0; }
.listItem span { overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.listItem strong { font-size: 13px; }
.donutRow { display: grid; grid-template-columns: 155px 1fr; gap: 26px; align-items: center; }
.donut { width: 145px; height: 145px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 18px solid var(--accent-soft); border-top-color: var(--accent); border-right-color: var(--purple); border-radius: 50%; }
.donut span { font-size: 27px; font-weight: 850; letter-spacing: -0.04em; }
.donut small { color: var(--muted); font-size: 9px; }
.simpleList.compact { gap: 10px; }
.updatedAt { margin: 16px 4px 0; color: var(--soft-muted); font-size: 10px; text-align: right; }

dialog { width: min(760px, calc(100% - 28px)); max-height: calc(100vh - 40px); overflow-y: auto; padding: 0; border: 0; border-radius: 24px; background: #fff; color: var(--ink); box-shadow: 0 35px 100px rgba(10, 16, 22, 0.28); }
dialog::backdrop { background: rgba(14, 21, 28, 0.58); backdrop-filter: blur(5px); }
.dialogHeader { display: flex; justify-content: space-between; gap: 20px; padding: 28px 30px 22px; border-bottom: 1px solid var(--line); }
.dialogHeader h2 { margin: 0; font-size: 29px; letter-spacing: -0.045em; }
.dialogHeader button { width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%; background: #fff; font-size: 22px; cursor: pointer; }
.dialogMeta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 28px; padding: 26px 30px; }
.dialogMeta > div { min-width: 0; }
.dialogMeta span, .messageBlock > span { display: block; margin-bottom: 5px; color: var(--soft-muted); font-size: 9px; font-weight: 850; letter-spacing: 0.1em; text-transform: uppercase; }
.dialogMeta strong, .dialogMeta a { display: block; overflow: hidden; color: var(--ink); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.messageBlock { margin: 0 30px 18px; padding: 20px; border-radius: 15px; background: #f5f6f6; }
.messageBlock p { margin: 0; color: #4f5962; font-size: 14px; line-height: 1.6; white-space: pre-wrap; }
.finalBlock { margin-bottom: 30px; background: #eaf8f3; }
.requestActions { display: flex; align-items: center; gap: 9px; padding: 20px 30px 26px; border-top: 1px solid var(--line); }
.requestAction { min-height: 42px; padding: 0 18px; border-radius: 999px; font-size: 12px; }
.requestActions .deleteAction { margin-left: auto; }

.confirmDialog { width: min(500px, calc(100% - 28px)); padding: 34px; text-align: center; }
.confirmIcon { width: 52px; height: 52px; display: grid; place-items: center; margin: 0 auto 18px; border-radius: 50%; background: var(--danger-soft); color: var(--danger); font-size: 24px; font-weight: 900; }
.confirmDialog h2 { margin: 0 0 13px; font-size: 26px; letter-spacing: -0.035em; }
.confirmDialog > p { margin: 0 auto 12px; color: var(--muted); font-size: 14px; line-height: 1.55; }
.confirmDialog > p strong { color: var(--ink); }
.confirmAlternative { padding: 12px; border-radius: 12px; background: #eef8f4; color: #306b5a !important; }
.confirmActions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 24px; }
.confirmActions button { min-height: 45px; border-radius: 12px; font-size: 12px; }
.permanentDeleteButton { grid-column: 1 / -1; border-color: var(--danger) !important; background: var(--danger) !important; color: #fff; }
.permanentDeleteButton:hover { background: #aa3028 !important; }
.rejectInsteadButton { border-color: #a9decf !important; color: #087553; }
.rejectInsteadButton:hover { background: #e4f7ef; }
.cancelButton:hover { background: #f3f4f4; }

.toast { position: fixed; z-index: 20; right: 22px; bottom: 22px; max-width: min(420px, calc(100% - 44px)); padding: 14px 18px; border-radius: 13px; background: var(--ink); color: #fff; box-shadow: 0 18px 50px rgba(10, 16, 22, 0.22); font-size: 13px; font-weight: 700; }
.toast.error { background: var(--danger); }

@media (max-width: 960px) {
  .metricGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .analyticsGrid { grid-template-columns: 1fr; }
  .trendPanel { grid-column: auto; }
  .toolbar { grid-template-columns: 1fr 190px; }
  .resultCount { grid-column: 1 / -1; flex-direction: row; justify-content: flex-end; gap: 5px; }
}

@media (max-width: 680px) {
  .loginCard { padding: 34px 26px; border-radius: 22px; }
  .topbar { height: 64px; padding: 0 18px; }
  .privateBadge { display: none; }
  .brand small { display: none; }
  .primaryNav { width: calc(100% - 28px); gap: 8px; margin-top: 14px; }
  .navButton { min-height: 68px; grid-template-columns: 34px 1fr; column-gap: 9px; padding: 12px; border-radius: 14px; }
  .navIcon { width: 32px; height: 32px; border-radius: 10px; }
  .navButton small { display: none; }
  .content { width: calc(100% - 28px); padding: 34px 0 60px; }
  .pageHeading { align-items: start; flex-direction: column; gap: 18px; }
  .headingActions { width: 100%; }
  .rangeField { flex: 1; }
  .rangeField select { width: 100%; }
  .toolbar { grid-template-columns: 1fr; }
  .resultCount { grid-column: auto; }
  .metricGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .metricCard { min-height: 128px; padding: 18px; border-radius: 16px; }
  .metricCard strong { font-size: 29px; }
  .analyticsGrid { gap: 10px; }
  .analyticsGrid > .panel { min-height: auto; padding: 20px; border-radius: 17px; }
  .chartWrap, #trendChart { min-height: 220px; height: 220px; }
  .legend { flex-direction: column; gap: 5px; }
  .donutRow { grid-template-columns: 110px 1fr; gap: 16px; }
  .donut { width: 105px; height: 105px; border-width: 13px; }
  .rankItem { grid-template-columns: 25px minmax(70px, 1fr) 1.4fr auto; }
  th:nth-child(3), td:nth-child(3), th:nth-child(4), td:nth-child(4), th:nth-child(5), td:nth-child(5) { display: none; }
  .actionsCell { min-width: 54px; padding-left: 8px; }
  .quickAction { display: none; }
  .dialogMeta { grid-template-columns: 1fr; gap: 14px; padding: 22px; }
  .dialogHeader { padding: 24px 22px 18px; }
  .messageBlock { margin-inline: 22px; }
  .requestActions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 18px 22px 24px; }
  .requestAction { width: 100%; }
  .requestActions .deleteAction { grid-column: 1 / -1; margin-left: 0; }
  .confirmDialog { padding: 28px 22px; }
  .confirmActions { grid-template-columns: 1fr; }
  .permanentDeleteButton { grid-column: auto; }
}

@media (max-width: 420px) {
  .metricGrid { grid-template-columns: 1fr; }
  .rankItem { grid-template-columns: 24px 1fr auto; }
  .rankItem progress { display: none; }
}

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