:root {
  --navy: #102d55;
  --ink: #1b2c44;
  --muted: #71809a;
  --line: #e6ebf2;
  --paper: #fff;
  --canvas: #f6f8fb;
  --blue: #4278d0;
  --blue-soft: #eaf1ff;
  --amber: #c88224;
  --amber-soft: #fff5e5;
  --lilac: #765cc8;
  --lilac-soft: #f2edff;
  --mint: #2b997f;
  --mint-soft: #eaf8f4;
  --shadow: 0 18px 48px rgba(27, 54, 94, 0.09);
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: "DM Sans", Arial, sans-serif;
}
.app-shell {
  display: grid;
  grid-template-columns: 254px 1fr;
  min-height: 100vh;
}
.sidebar {
  background: #102f5c;
  color: white;
  padding: 30px 18px 20px;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}
.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0 10px 36px;
}
.brand-home {
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
}
.brand-home:hover .brand-mark,
.brand-home:focus-visible .brand-mark {
  transform: translateY(-1px);
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.22);
}
.brand-home:focus-visible {
  outline: 2px solid #d6b36a;
  outline-offset: 3px;
  border-radius: 12px;
}
.brand-mark {
  height: 39px;
  width: 39px;
  border-radius: 13px;
  background: linear-gradient(145deg, #6f9fff, #324e9b);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 13px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.brand strong,
.brand span {
  display: block;
}
.brand strong {
  font-family: "Playfair Display", serif;
  font-size: 20px;
  letter-spacing: 0.2px;
}
.brand span {
  font-size: 11px;
  color: #b9cbe5;
  margin-top: 2px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.nav {
  display: grid;
  gap: 5px;
}
.nav-item {
  border: 0;
  background: transparent;
  color: #c0d0e6;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 12px 11px;
  border-radius: 10px;
  font: 500 13px inherit;
  text-align: left;
  transition: 0.2s;
}
.nav-item span {
  font-size: 18px;
  width: 20px;
  text-align: center;
}
.nav-item b {
  font-size: 10px;
  margin-left: auto;
  background: #284a7a;
  padding: 3px 7px;
  border-radius: 30px;
}
.nav-item b.alert {
  background: #de9b3b;
  color: #fff;
}
.nav-item:hover,
.nav-item.active {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}
.sidebar-footer {
  margin-top: auto;
  border-top: 1px solid rgba(255, 255, 255, 0.13);
  padding: 20px 10px 4px;
  display: flex;
  gap: 9px;
  align-items: flex-start;
}
.sidebar-footer strong,
.sidebar-footer span {
  display: block;
}
.sidebar-footer strong {
  font-size: 11px;
}
.sidebar-footer span {
  font-size: 10px;
  line-height: 1.35;
  color: #a8bdd8;
  margin-top: 3px;
}
.status-dot {
  height: 8px;
  width: 8px;
  border-radius: 99px;
  background: #67d1b0;
  margin-top: 4px;
  box-shadow: 0 0 0 4px rgba(103, 209, 176, 0.13);
}
.main-content {
  padding: 36px 48px 56px;
  max-width: 1550px;
  width: 100%;
  margin: 0 auto;
}
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 29px;
}
.eyebrow,
.section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.1px;
  color: var(--muted);
  margin: 0 0 4px;
  text-transform: uppercase;
}
.topbar h1 {
  font-family: "Playfair Display", serif;
  margin: 0;
  font-size: 25px;
  letter-spacing: -0.4px;
}
.top-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.search {
  background: white;
  border: 1px solid var(--line);
  height: 40px;
  width: 244px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  gap: 7px;
  color: #8090a7;
}
.search input {
  border: 0;
  outline: 0;
  width: 100%;
  font: 12px inherit;
  color: var(--ink);
}
.icon-button,
.profile-button {
  height: 40px;
  border: 1px solid var(--line);
  background: white;
  border-radius: 10px;
  cursor: pointer;
  position: relative;
}
.icon-button {
  font-size: 16px;
  width: 40px;
  color: #49698f;
}
.icon-button i {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 9px;
  background: #e2784d;
  right: 9px;
  top: 8px;
}
.profile-button {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4px 8px 4px 5px;
}
.profile-button span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  background: #e4eefb;
  border-radius: 8px;
  color: #315a9a;
  font-size: 10px;
  font-weight: 700;
}
.account-avatar { width: 28px; height: 28px; border-radius: 8px; object-fit: cover; display: block; }
.profile-button em {
  font-size: 11px;
  color: #71809a;
  font-style: normal;
}
.hero-card {
  min-height: 210px;
  overflow: hidden;
  background: linear-gradient(113deg, #142f5a, #25579e);
  border-radius: 18px;
  padding: 30px 34px;
  color: #fff;
  position: relative;
  display: flex;
  justify-content: space-between;
  box-shadow: 0 15px 28px rgba(24, 59, 108, 0.15);
}
.hero-card:before {
  content: "";
  position: absolute;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(109, 177, 255, 0.28),
    transparent 68%
  );
  right: -70px;
  top: -130px;
}
.hero-card > div:first-child {
  max-width: 535px;
  position: relative;
  z-index: 2;
}
.hero-card .section-label {
  color: #a9c8fb;
}
.hero-card h2 {
  font:
    700 29px/1.16 "Playfair Display",
    serif;
  margin: 5px 0 8px;
  letter-spacing: -0.5px;
}
.hero-card p {
  font-size: 13px;
  margin: 0 0 18px;
  color: #d5e5ff;
}
.primary-button,
.secondary-button {
  font: 600 12px inherit;
  border: 0;
  border-radius: 9px;
  padding: 11px 15px;
  cursor: pointer;
  transition: 0.2s;
}
.primary-button {
  color: #173966;
  background: #fff;
  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.12);
}
.primary-button:hover {
  transform: translateY(-1px);
  background: #edf5ff;
}
.primary-button span {
  padding-left: 8px;
  font-size: 15px;
}
.secondary-button {
  background: #fff;
  border: 1px solid var(--line);
  color: #35557d;
}
.hero-illustration {
  position: relative;
  width: 280px;
  min-width: 280px;
}
.document {
  position: absolute;
  width: 130px;
  height: 145px;
  right: 41px;
  bottom: -5px;
  border-radius: 11px;
  background: #ecf3ff;
  box-shadow: 0 18px 35px rgba(0, 0, 0, 0.23);
}
.doc-back {
  right: 20px;
  bottom: 6px;
  transform: rotate(9deg);
  background: #6f94d3;
  opacity: 0.6;
}
.doc-front {
  padding: 22px 18px;
}
.doc-front span {
  display: block;
  height: 6px;
  background: #b6c8e7;
  border-radius: 8px;
  margin-bottom: 10px;
}
.doc-front span:nth-child(2) {
  width: 76%;
}
.doc-front span:nth-child(3) {
  width: 58%;
}
.doc-front b {
  position: absolute;
  right: 15px;
  bottom: 15px;
  border-radius: 50%;
  height: 25px;
  width: 25px;
  background: #56b69a;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 14px;
}
.orbit {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(191, 221, 255, 0.35);
}
.orbit-one {
  width: 240px;
  height: 240px;
  right: -15px;
  top: -32px;
}
.orbit-two {
  width: 180px;
  height: 180px;
  right: 14px;
  top: -3px;
  border-color: rgba(191, 221, 255, 0.2);
}
.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
  margin: 18px 0;
}
.metric-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  display: flex;
  gap: 11px;
  padding: 16px;
  align-items: center;
}
.metric-icon {
  width: 37px;
  height: 37px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  font-size: 18px;
}
.metric-icon.blue {
  background: var(--blue-soft);
  color: var(--blue);
}
.metric-icon.amber {
  background: var(--amber-soft);
  color: var(--amber);
}
.metric-icon.lilac {
  background: var(--lilac-soft);
  color: var(--lilac);
}
.metric-icon.mint {
  background: var(--mint-soft);
  color: var(--mint);
}
.metric-card small,
.metric-card em {
  display: block;
  font-style: normal;
}
.metric-card small {
  font-size: 10px;
  color: var(--muted);
}
.metric-card strong {
  font-size: 23px;
  letter-spacing: -0.4px;
  line-height: 1.1;
}
.metric-card em {
  font-size: 9px;
  color: #6d8eaf;
  margin-top: 2px;
}
.content-grid {
  display: grid;
  grid-template-columns: 1.35fr 0.8fr;
  gap: 18px;
}
.panel-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 15px;
  box-shadow: 0 4px 18px rgba(34, 65, 106, 0.025);
  overflow: hidden;
}
.panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 20px 20px 12px;
}
.panel-header h3 {
  font-family: "Playfair Display", serif;
  font-size: 17px;
  margin: 0;
}
.panel-header p {
  font-size: 10px;
  color: var(--muted);
  margin: 4px 0;
}
.text-button {
  background: transparent;
  border: 0;
  color: #4678bd;
  font: 600 11px inherit;
  cursor: pointer;
}
.case-row {
  display: grid;
  grid-template-columns: 38px 1.1fr 0.8fr 0.75fr 27px;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border-top: 1px solid #f0f3f7;
  cursor: pointer;
}
.case-row:hover {
  background: #f9fbfe;
}
.case-avatar {
  width: 35px;
  height: 35px;
  border-radius: 11px;
  background: #eaf1ff;
  color: #3c6cb3;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
}
.case-main strong,
.case-main span {
  display: block;
}
.case-main strong {
  font-size: 12px;
}
.case-main span {
  font-size: 10px;
  color: var(--muted);
  margin-top: 2px;
}
.case-stage {
  font-size: 10px;
  color: #4f6888;
}
.case-stage b {
  font-size: 9px;
  display: inline-block;
  border-radius: 20px;
  padding: 3px 7px;
  margin-top: 4px;
  font-weight: 600;
}
.stage-reply {
  background: #fff1dc;
  color: #ad6e18;
}
.stage-report {
  background: #eeeaff;
  color: #6953ae;
}
.stage-decision {
  background: #e8f7f2;
  color: #23826c;
}
.case-date {
  font-size: 10px;
  color: #7890aa;
}
.case-date strong {
  display: block;
  color: #b06924;
  font-size: 10px;
}
.row-arrow {
  color: #91a2b8;
}
.timeline {
  padding: 1px 20px 13px;
}
.timeline-item {
  display: grid;
  grid-template-columns: 8px 1fr auto;
  gap: 11px;
  padding: 13px 0;
  border-top: 1px solid #f0f3f7;
  align-items: start;
}
.timeline-item:first-child {
  border-top: 0;
}
.timeline-dot {
  height: 8px;
  width: 8px;
  border-radius: 50%;
  margin-top: 3px;
}
.timeline-dot.critical {
  background: #db8752;
  box-shadow: 0 0 0 4px #fff1eb;
}
.timeline-dot.warning {
  background: #d4a13f;
  box-shadow: 0 0 0 4px #fff8e9;
}
.timeline-dot.normal {
  background: #5b96d9;
  box-shadow: 0 0 0 4px #edf5ff;
}
.timeline-item strong,
.timeline-item span {
  display: block;
}
.timeline-item strong {
  font-size: 11px;
}
.timeline-item span {
  font-size: 10px;
  color: var(--muted);
  margin-top: 3px;
}
.timeline-item time {
  font-size: 10px;
  font-weight: 700;
  color: #9a5f27;
  white-space: nowrap;
}
.view {
  display: none;
}
.view.active-view {
  display: block;
}
.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin: 8px 0 22px;
}
.section-heading h2 {
  font:
    700 27px/1.1 "Playfair Display",
    serif;
  margin: 3px 0 5px;
}
.section-heading p {
  color: var(--muted);
  font-size: 12px;
  margin: 0;
}
.section-heading .primary-button {
  background: var(--navy);
  color: #fff;
}
.section-heading .primary-button:hover {
  background: #1d477e;
}
.table-toolbar {
  display: flex;
  gap: 7px;
  padding: 17px 20px;
  border-bottom: 1px solid var(--line);
}
.chip {
  font-size: 10px;
  padding: 7px 10px;
  background: #f5f7fa;
  border-radius: 20px;
  color: #6c7d94;
}
.chip b {
  margin-left: 4px;
}
.chip.active {
  background: #e9f1ff;
  color: #3469b2;
  font-weight: 600;
}
.case-table .case-row {
  grid-template-columns: 42px 1.1fr 0.9fr 0.85fr 0.7fr 27px;
  padding: 14px 20px;
}
.case-table .case-row.header {
  color: #7b8da4;
  font-size: 10px;
  font-weight: 700;
  cursor: default;
  background: #fafbfd;
}
.case-table .case-row.header:hover {
  background: #fafbfd;
}
.deadline-board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}
.deadline-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 19px;
}
.deadline-card .date {
  font:
    700 26px/1 "Playfair Display",
    serif;
  color: var(--navy);
}
.deadline-card .month {
  font-size: 10px;
  color: var(--muted);
  margin-left: 5px;
}
.deadline-card h3 {
  font-size: 13px;
  margin: 16px 0 6px;
}
.deadline-card p {
  font-size: 11px;
  line-height: 1.45;
  color: var(--muted);
  margin: 0;
}
.deadline-card .tag {
  display: inline-block;
  margin-top: 12px;
  border-radius: 20px;
  padding: 4px 8px;
  font-size: 9px;
  font-weight: 700;
}
.tag.critical {
  background: #fff0e8;
  color: #b15f2e;
}
.tag.warning {
  background: #fff6e6;
  color: #b37b1e;
}
.tag.normal {
  background: #edf4ff;
  color: #4777b9;
}
.empty-state {
  background: #fff;
  border: 1px dashed #cad6e5;
  border-radius: 16px;
  text-align: center;
  padding: 80px 20px;
}
.empty-state > span {
  display: grid;
  place-items: center;
  margin: auto;
  width: 48px;
  height: 48px;
  background: #eef4ff;
  border-radius: 16px;
  color: #4777b9;
  font-size: 22px;
}
.empty-state h3 {
  font:
    700 20px "Playfair Display",
    serif;
  margin: 15px 0 5px;
}
.empty-state p {
  font-size: 12px;
  color: var(--muted);
  max-width: 410px;
  margin: 0 auto;
  line-height: 1.5;
}
.case-drawer {
  position: fixed;
  right: 0;
  top: 0;
  height: 100%;
  width: 420px;
  background: #fff;
  z-index: 20;
  transform: translateX(102%);
  transition: 0.28s ease;
  box-shadow: -20px 0 45px rgba(16, 45, 85, 0.13);
  padding: 33px 29px;
  overflow: auto;
}
.case-drawer.open {
  transform: translateX(0);
}
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(11, 35, 68, 0.25);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: 0.2s;
  z-index: 19;
}
.overlay.show {
  opacity: 1;
  visibility: visible;
}
.close-drawer,
.close-dialog {
  border: 0;
  background: #f2f5f9;
  color: #61728c;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  font-size: 22px;
  cursor: pointer;
}
.close-drawer {
  position: absolute;
  right: 24px;
  top: 25px;
}
.drawer-eyebrow {
  font-size: 10px;
  letter-spacing: 1px;
  color: #6f86a5;
  font-weight: 700;
}
.drawer-title {
  font:
    700 26px/1.1 "Playfair Display",
    serif;
  margin: 7px 36px 4px 0;
}
.drawer-subtitle {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 24px;
}
.drawer-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin-bottom: 24px;
}
.drawer-summary div {
  background: #f6f8fb;
  border-radius: 10px;
  padding: 11px;
}
.drawer-summary small,
.drawer-summary strong {
  display: block;
}
.drawer-summary small {
  font-size: 9px;
  color: #74849a;
}
.drawer-summary strong {
  font-size: 11px;
  margin-top: 3px;
}
.drawer-section {
  border-top: 1px solid var(--line);
  padding-top: 19px;
  margin-top: 20px;
}
.drawer-section h3 {
  font-size: 12px;
  margin: 0 0 10px;
}
.drawer-section p,
.drawer-section li {
  font-size: 11px;
  color: #53677f;
  line-height: 1.5;
}
.drawer-section ul {
  padding-left: 17px;
  margin: 7px 0;
}
dialog {
  border: 0;
  border-radius: 17px;
  padding: 0;
  width: min(480px, calc(100% - 32px));
  box-shadow: 0 25px 80px rgba(15, 35, 66, 0.25);
}
dialog::backdrop {
  background: rgba(11, 35, 68, 0.35);
  backdrop-filter: blur(2px);
}
dialog form {
  padding: 26px;
}
.dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
}
.dialog-header h2 {
  font:
    700 24px "Playfair Display",
    serif;
  margin: 4px 0 0;
}
.dialog-header .section-label {
  margin: 0;
}
.close-dialog {
  font-size: 20px;
}
dialog label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: #405573;
  margin-top: 13px;
}
dialog input,
dialog select {
  display: block;
  width: 100%;
  border: 1px solid #dbe3ee;
  border-radius: 8px;
  margin-top: 6px;
  padding: 10px;
  font: 12px inherit;
  color: var(--ink);
  background: white;
}
.form-note {
  font-size: 10px;
  color: #71809a;
  line-height: 1.45;
  margin: 15px 0;
}
.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.dialog-actions .primary-button {
  background: var(--navy);
  color: white;
}
@media (max-width: 1050px) {
  .metric-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .content-grid {
    grid-template-columns: 1fr;
  }
  .deadline-board {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 760px) {
  .app-shell {
    grid-template-columns: 1fr;
  }
  .sidebar {
    position: relative;
    height: auto;
    padding: 17px;
  }
  .sidebar .nav {
    display: flex;
    overflow: auto;
  }
  .sidebar-footer {
    display: none;
  }
  .brand {
    padding: 0 7px 14px;
  }
  .main-content {
    padding: 25px 18px;
  }
  .topbar {
    align-items: flex-start;
  }
  .top-actions {
    display: none;
  }
  .hero-illustration {
    display: none;
  }
  .hero-card {
    padding: 25px;
  }
  .metric-grid {
    grid-template-columns: 1fr 1fr;
  }
  .case-row {
    grid-template-columns: 35px 1fr 25px;
  }
  .case-row .case-stage,
  .case-row .case-date {
    display: none;
  }
  .case-table .case-row {
    grid-template-columns: 35px 1fr 25px;
  }
  .case-table .case-row > *:nth-child(n + 4) {
    display: none;
  }
  .case-table .case-row.header {
    display: none;
  }
  .deadline-board {
    grid-template-columns: 1fr;
  }
  .section-heading {
    align-items: flex-start;
    gap: 14px;
  }
  .section-heading .primary-button,
  .section-heading .secondary-button {
    white-space: nowrap;
  }
  .case-drawer {
    width: min(100%, 420px);
  }
}

.auth-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 28px;
  background: radial-gradient(circle at 20% 15%, #eaf1ff 0, transparent 32%), #f6f8fb;
}
[hidden] { display: none !important; }
.auth-card {
  width: min(100%, 420px);
  background: #fff;
  border: 1px solid #dce4ef;
  border-radius: 20px;
  padding: 38px;
  box-shadow: 0 22px 60px rgba(34, 54, 83, 0.12);
}
.auth-mark {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: #1f4274;
  color: #fff;
  font-weight: 700;
  margin-bottom: 22px;
}
.auth-card h1 { font: 700 30px "Playfair Display", serif; margin: 7px 0; color: #203d68; }
.auth-card > p { color: #6d7f96; font-size: 13px; line-height: 1.5; margin: 0 0 22px; }
.auth-card label, .user-form label { display: grid; gap: 6px; color: #4f637c; font-size: 11px; font-weight: 700; margin: 14px 0; }
.auth-card input, .user-form input, .user-form select {
  border: 1px solid #d7e0eb;
  border-radius: 9px;
  min-height: 41px;
  padding: 0 11px;
  font: 400 13px "DM Sans", sans-serif;
  color: #263a54;
  background: #fff;
}
dialog textarea { min-height: 115px; resize: vertical; border: 1px solid #d7e0eb; border-radius: 9px; padding: 10px 11px; font: 400 13px "DM Sans", sans-serif; color: #263a54; }
.permission-fieldset { border: 1px solid #dbe3ee; border-radius: 10px; margin: 16px 0 0; padding: 8px 12px 11px; }
.permission-fieldset legend { color: #405573; font: 700 11px "DM Sans", sans-serif; padding: 0 4px; }
.permission-fieldset label { align-items: center; color: #526985; display: flex; font-size: 12px; font-weight: 600; gap: 8px; margin: 9px 0 0; }
.permission-fieldset input[type="checkbox"] { accent-color: #315e9b; height: 15px; margin: 0; width: 15px; }
.auth-card .primary-button { width: 100%; justify-content: center; margin-top: 8px; }
.auth-card small { display: block; color: #8492a5; font-size: 10px; text-align: center; margin-top: 18px; }
.auth-error { min-height: 18px; color: #b13d46 !important; margin: 3px 0 0 !important; font-size: 11px !important; }
.admin-grid { display: grid; grid-template-columns: minmax(280px, .72fr) minmax(420px, 1.28fr); gap: 18px; }
.admin-form-card { padding-bottom: 20px; }
.user-form { padding: 0 20px; }
.user-form .primary-button { margin-top: 8px; }
.category-admin-card { margin-top: 18px; }
.category-form { align-items: center; display: flex; gap: 9px; padding: 0 20px 10px; }
.category-form input { border: 1px solid #d7e0eb; border-radius: 9px; color: #263a54; flex: 1; font: 400 13px "DM Sans", sans-serif; min-height: 40px; padding: 0 11px; }
.category-list { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 20px 18px; }
.category-chip { align-items: center; background: #f0f5fa; border: 1px solid #d8e4f0; border-radius: 999px; color: #405b7c; display: flex; font-size: 11px; font-weight: 700; gap: 7px; padding: 5px 7px 5px 10px; }
.category-chip button { background: transparent; border: 0; color: #a4494e; cursor: pointer; font-size: 17px; line-height: 1; padding: 0 1px; }
.user-list { border-top: 1px solid #edf1f6; }
.user-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid #edf1f6; }
.user-row strong, .user-row small { display: block; }
.user-row strong { font-size: 12px; color: #314864; }
.user-row small { margin-top: 3px; color: #71839b; font-size: 10px; }
.user-row select { border: 1px solid #d7e0eb; background: #fff; border-radius: 7px; padding: 6px; color: #526985; font: 600 10px "DM Sans", sans-serif; }
.user-status { border: 1px solid #d7e0eb; background: #fff; color: #526985; border-radius: 7px; padding: 7px 9px; cursor: pointer; font: 600 10px "DM Sans", sans-serif; }
.user-status.deactivate { color: #a64b4b; border-color: #f0d1d1; }
.user-status.delete { color: #a4494e; border-color: #f0d1d1; background: #fffafa; }
.user-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex-wrap: wrap; }
.account-menu { position: relative; }
.account-popover { position: absolute; z-index: 20; right: 0; top: calc(100% + 10px); width: 232px; padding: 6px; background: #fff; border: 1px solid #dbe4ef; border-radius: 12px; box-shadow: 0 16px 36px rgba(27, 48, 77, .16); }
.account-summary { padding: 10px 10px 8px; }
.account-popover strong, .account-popover .account-summary > span { display: block; }
.account-popover strong { color: #304964; font-size: 12px; }
.account-popover #account-username { color: #788aa0; font-size: 10px; margin-top: 3px; }
.account-role { display: inline-block !important; margin-top: 9px; padding: 4px 7px; border-radius: 6px; background: #edf3ff; color: #4e77b5; font-size: 9px; font-weight: 700; }
.account-menu-list { border-top: 1px solid #edf1f6; padding: 4px 0; }
.account-menu-item { width: 100%; min-height: 38px; padding: 0 10px; border: 0; background: transparent; color: #455e7b; display: flex; align-items: center; gap: 9px; border-radius: 7px; font: 600 11px "DM Sans", sans-serif; text-align: left; cursor: pointer; transition: background .16s ease, color .16s ease; }
.account-menu-item:hover, .account-menu-item:focus-visible { outline: 0; background: #f2f6fb; color: #264a70; }
.account-menu-item svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.account-menu-item b { margin-left: auto; color: #9aaabd; font-size: 17px; line-height: 1; font-weight: 400; }
.account-profile-button { margin: 3px 0 7px; padding: 9px; min-height: 0; border: 1px solid #d7e0eb; background: #fff; color: #526985; box-shadow: none; }
.account-profile-button:hover, .account-profile-button:focus-visible { background: #fff; border-color: #b9cbdf; box-shadow: 0 2px 5px rgba(42, 67, 96, .1); }
.account-profile-button:active { transform: translateY(1px); box-shadow: inset 0 1px 3px rgba(42, 67, 96, .13); }
.logout-button { width: 100%; padding: 9px; border: 1px solid #f0d3d3; border-radius: 8px; background: #fffafa; color: #a4494e; font: 700 11px "DM Sans", sans-serif; cursor: pointer; }
.profile-photo-editor { display: flex; align-items: center; gap: 13px; margin: 14px 0 17px; padding: 12px; border: 1px solid #e0e7f0; border-radius: 10px; background: #f9fbfd; }
.profile-photo-preview { width: 54px; height: 54px; border-radius: 12px; overflow: hidden; display: grid; place-items: center; flex: 0 0 auto; background: #eaf0f8; color: #315a9a; font-size: 14px; font-weight: 700; }
.profile-photo-preview img { width: 100%; height: 100%; object-fit: cover; }
.profile-photo-upload { margin: 0 !important; flex: 1; }
.profile-photo-upload input { font-size: 11px; }
.profile-photo-upload small { color: #8190a2; font-size: 10px; font-weight: 500; }
@media (max-width: 900px) { .admin-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .auth-card { padding: 27px 22px; } .user-row { grid-template-columns: 1fr auto; } .user-row .user-status { grid-column: 2; } }

.research-layout {
  display: grid;
  grid-template-columns: 1.45fr 0.85fr;
  gap: 18px;
  margin-bottom: 18px;
}
.research-builder,
.research-guide {
  padding-bottom: 20px;
}
.research-builder .panel-header,
.research-guide .panel-header {
  padding-bottom: 16px;
}
.safe-label {
  background: #e9f5f0;
  color: #277c69;
  font-size: 9px;
  font-weight: 700;
  border-radius: 20px;
  padding: 5px 8px;
}
.research-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 0 20px;
}
.research-form label,
.source-option {
  font-size: 10px;
  font-weight: 700;
  color: #405573;
}
.research-form select,
.research-form input {
  display: block;
  width: 100%;
  border: 1px solid #dbe3ee;
  border-radius: 8px;
  margin-top: 6px;
  padding: 10px;
  font: 12px inherit;
  color: var(--ink);
  background: white;
}
.research-company-action { align-items: center; color: #72839a; display: flex; font-size: 11px; gap: 10px; padding: 10px 20px 0; }
.research-company-action .text-button { font-size: 11px; }
.field-title {
  font-size: 10px;
  font-weight: 700;
  color: #405573;
  margin: 18px 20px 8px;
}
.issue-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 0 20px;
}
.issue-chip {
  border: 1px solid #dce5f1;
  background: #fff;
  color: #647792;
  border-radius: 20px;
  padding: 7px 10px;
  font: 600 10px inherit;
  cursor: pointer;
}
.issue-chip.active {
  background: #eaf1ff;
  color: #356ab5;
  border-color: #bcd0f0;
}
.source-choice {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 0 20px;
}
.source-option {
  border: 1px solid #dfe7f0;
  border-radius: 10px;
  padding: 9px;
  display: flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
}
.source-option input {
  accent-color: #356ab5;
  margin: 0;
}
.source-option strong,
.source-option small {
  display: block;
}
.source-option small {
  font-weight: 500;
  color: #8190a3;
  margin-top: 2px;
  font-size: 9px;
}
.source-logo {
  height: 27px;
  width: 27px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-size: 13px;
}
.source-logo.lexpera {
  background: #1b456f;
  color: #fff;
}
.source-logo.official {
  background: #eaf4f2;
  color: #247e6d;
}
.dark-button {
  background: var(--navy);
  color: #fff;
  margin: 19px 20px 0;
}
.dark-button:hover {
  background: #1d477e;
}
.research-guide ol {
  margin: 1px 22px 17px;
  padding-left: 18px;
}
.research-guide li {
  font-size: 11px;
  line-height: 1.45;
  color: #5c708b;
  margin-bottom: 11px;
}
.notice {
  margin: 0 20px;
  background: #fff7ea;
  border-radius: 8px;
  padding: 10px;
  color: #9b681d;
  font-size: 10px;
}
.research-results {
  margin-bottom: 20px;
}
.result-list {
  border-top: 1px solid #edf1f6;
}
.result-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: 12px;
  padding: 15px 20px;
  border-bottom: 1px solid #edf1f6;
}
.result-source {
  font-size: 9px;
  font-weight: 700;
  border-radius: 7px;
  padding: 5px 6px;
  background: #edf3ff;
  color: #4371b5;
}
.result-source.official {
  background: #eaf7f2;
  color: #24816d;
}
.result-card h4 {
  font-size: 12px;
  margin: 0 0 4px;
}
.result-card p {
  font-size: 10px;
  color: #697c95;
  line-height: 1.4;
  margin: 0;
}
.result-meta {
  font-size: 9px;
  color: #8a99aa;
  margin-top: 6px;
}
.verify-button {
  border: 1px solid #d8e1ec;
  background: #fff;
  color: #60748f;
  font: 600 10px inherit;
  border-radius: 7px;
  padding: 7px 9px;
  cursor: pointer;
}
.verify-button.verified {
  background: #e8f7f2;
  border-color: #bde5d8;
  color: #287b68;
}
.research-footer {
  padding: 15px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.research-footer strong,
.research-footer span {
  display: block;
}
.research-footer strong {
  font-size: 11px;
}
.research-footer span {
  font-size: 10px;
  color: #7a8da5;
  margin-top: 3px;
}
.research-footer .primary-button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.standard-intro {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  background: #eaf1ff;
  border: 1px solid #d4e2fa;
  padding: 15px 17px;
  border-radius: 13px;
  margin-bottom: 18px;
}
.standard-intro > span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  background: #fff;
  border-radius: 9px;
  color: #4b77bc;
}
.standard-intro strong {
  font-size: 12px;
}
.standard-intro p {
  font-size: 11px;
  line-height: 1.45;
  color: #5c718d;
  margin: 3px 0 0;
}
.template-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}
.template-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 16px;
}
.template-card .template-icon {
  display: grid;
  place-items: center;
  width: 33px;
  height: 33px;
  border-radius: 10px;
  background: #eef4ff;
  color: #4978ba;
  font-size: 16px;
  margin-bottom: 14px;
}
.template-card h3 {
  font-size: 12px;
  margin: 0;
}
.template-card p {
  font-size: 10px;
  color: #75879f;
  margin: 4px 0 12px;
}
.template-progress {
  height: 6px;
  background: #edf1f5;
  border-radius: 20px;
  overflow: hidden;
}
.template-progress span {
  display: block;
  height: 100%;
  background: #4d7dc3;
  border-radius: 20px;
}
.template-card small {
  font-size: 9px;
  color: #5c7495;
  display: block;
  margin-top: 6px;
}
.standards-layout {
  display: grid;
  grid-template-columns: 1.35fr 0.8fr;
  gap: 18px;
}
.standard-checklist {
  padding: 0 20px 19px;
  display: grid;
  gap: 8px;
}
.standard-checklist div {
  display: flex;
  align-items: center;
  gap: 9px;
  background: #f8fafc;
  border-radius: 8px;
  padding: 10px;
  font-size: 11px;
  color: #536982;
}
.standard-checklist b {
  font-size: 9px;
  color: #4977b8;
  background: #e9f1ff;
  border-radius: 6px;
  padding: 4px;
}
.approval-card {
  padding: 20px;
}
.approval-card h3 {
  font:
    700 17px "Playfair Display",
    serif;
  margin: 5px 0;
}
.approval-card p {
  font-size: 11px;
  color: #71839b;
  line-height: 1.45;
  margin: 0 0 16px;
}
@media (max-width: 1050px) {
  .research-layout,
  .standards-layout {
    grid-template-columns: 1fr;
  }
  .template-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 760px) {
  .research-form,
  .source-choice {
    grid-template-columns: 1fr;
  }
  .research-footer {
    align-items: flex-start;
    gap: 12px;
    flex-direction: column;
  }
  .result-card {
    grid-template-columns: auto 1fr;
  }
  .result-card .verify-button {
    grid-column: 2;
  }
  .template-grid {
    grid-template-columns: 1fr;
  }
}