:root {
  --cf-font-sans: "NunitoSans", "Inter", "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --cf-color-primary: #148ddf;
  --cf-color-primary-strong: #075382;
  --cf-color-primary-hover: #106b9d;
  --cf-color-primary-soft: #eef8fd;
  --cf-color-primary-panel: #edf5fb;
  --cf-color-success: #0f7c5c;
  --cf-color-success-soft: #eefbf5;
  --cf-color-warning: #d94b00;
  --cf-color-warning-soft: #fff3ed;
  --cf-color-danger: #c72f3c;
  --cf-color-text: #192434;
  --cf-color-heading: #122033;
  --cf-color-text-muted: #64748b;
  --cf-color-text-soft: #526174;
  --cf-color-border: #e1e7ef;
  --cf-color-border-strong: #d8e3ef;
  --cf-color-divider: #edf2f7;
  --cf-color-surface: #ffffff;
  --cf-color-surface-alt: #f8fafc;
  --cf-color-page: #f6f8fb;
  --cf-shadow-soft: 0 12px 32px rgba(25, 36, 52, 0.08);
  --cf-shadow-popover: 0 18px 48px rgba(25, 36, 52, 0.18);
  --cf-shadow-focus: 0 0 0 3px rgba(20, 141, 223, 0.16);
  --cf-radius-xs: 6px;
  --cf-radius-sm: 8px;
  --cf-radius-md: 8px;
  --cf-radius-lg: 8px;
  --cf-radius-pill: 999px;
  --cf-space-1: 4px;
  --cf-space-2: 8px;
  --cf-space-3: 12px;
  --cf-space-4: 16px;
  --cf-space-5: 20px;
  --cf-space-6: 24px;
  --cf-space-7: 32px;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--cf-color-page);
  color: var(--cf-color-text);
  font-family: var(--cf-font-sans);
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

a {
  color: var(--cf-color-primary);
  text-decoration: none;
}

a:hover {
  color: var(--cf-color-primary-hover);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  color: var(--cf-color-heading);
  font-weight: 900;
  letter-spacing: 0;
}

p {
  margin: 0;
  color: var(--cf-color-text-muted);
}

code,
pre {
  letter-spacing: 0;
}

.cf-app-shell {
  min-height: 100vh;
  background: var(--cf-color-page);
}

.cf-page {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px 24px 80px;
}

.cf-card {
  background: var(--cf-color-surface);
  border: 1px solid var(--cf-color-border);
  border-radius: var(--cf-radius-md);
  box-shadow: none;
}

.cf-card--padded {
  padding: 24px;
}

.cf-section-title {
  color: var(--cf-color-heading);
  font-size: 16px;
  line-height: 22px;
  font-weight: 900;
}

.cf-section-subtitle {
  color: var(--cf-color-text-muted);
  font-size: 12px;
  line-height: 18px;
  font-weight: 700;
}

.cf-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  border: 1px solid #cfe4f5;
  border-radius: var(--cf-radius-pill);
  padding: 0 16px;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease, box-shadow 0.12s ease,
    transform 0.12s ease;
}

.cf-button:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.cf-button--primary {
  border: 0;
  background: linear-gradient(135deg, #12b7df 0%, #5d8cff 100%);
  box-shadow: 0 10px 22px rgba(39, 128, 255, 0.24);
  color: #ffffff;
}

.cf-button--primary:hover,
.cf-button--primary:focus {
  box-shadow: 0 12px 26px rgba(39, 128, 255, 0.32);
  color: #ffffff;
  transform: translateY(-1px);
}

.cf-button--secondary,
.cf-button--ghost {
  border: 0;
  background: linear-gradient(135deg, #12b7df 0%, #5d8cff 100%);
  box-shadow: 0 10px 22px rgba(39, 128, 255, 0.24);
  color: #ffffff;
}

.cf-button--secondary:hover,
.cf-button--secondary:focus,
.cf-button--ghost:hover,
.cf-button--ghost:focus {
  box-shadow: 0 12px 26px rgba(39, 128, 255, 0.32);
  color: #ffffff;
  transform: translateY(-1px);
}

.cf-input,
.cf-select,
.cf-textarea {
  width: 100%;
  min-height: 38px;
  border: 1px solid #cfd8e3;
  border-radius: 6px;
  background: #ffffff;
  color: var(--cf-color-text);
  padding: 9px 12px;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  outline: none;
  box-shadow: none;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.cf-input::placeholder,
.cf-textarea::placeholder {
  color: var(--cf-color-text-soft);
}

.cf-input:focus,
.cf-select:focus,
.cf-textarea:focus {
  border-color: #00b0e7;
  box-shadow: 0 0 0 3px rgba(0, 176, 231, 0.16);
}

.cf-field {
  display: grid;
  gap: 8px;
}

.cf-label {
  color: var(--cf-color-text-soft);
  font-size: 12px;
  font-weight: 900;
}

.cf-helper-text {
  color: var(--cf-color-text-muted);
  font-size: 12px;
  font-weight: 700;
}

.cf-topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  height: 72px;
  background: #ffffff;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  border-bottom: 0;
  box-shadow: none;
}

.cf-topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: none;
  height: 72px;
  margin: 0 auto;
  padding: 12px 38px;
}

.cf-topbar__brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--cf-color-heading);
  font-weight: 900;
}

.cf-topbar__nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
}

.cf-topbar__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 12px;
  color: #4c5564;
  font-family: "Inter", var(--cf-font-sans);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  transition: color 140ms ease, transform 80ms ease;
}

.cf-topbar__link::after {
  display: none;
}

.cf-topbar__link:hover,
.cf-topbar__link:focus {
  color: #106b9d;
  text-decoration: none;
}

.cf-topbar__link.is-active {
  color: #0f6095;
}

.cf-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: var(--cf-color-primary-soft);
  color: var(--cf-color-primary);
  font-size: 12px;
  font-weight: 900;
}

.cf-sidebar {
  width: 270px;
  background: var(--cf-color-surface);
  border-right: 1px solid var(--cf-color-border-strong);
}

.cf-sidebar__section {
  padding: 24px;
}

.cf-sidebar__nav {
  display: grid;
  gap: 8px;
}

.cf-sidebar__link {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 38px;
  padding: 8px 10px;
  border-radius: var(--cf-radius-sm);
  color: var(--cf-color-text-muted);
  font-size: 13px;
  font-weight: 800;
}

.cf-sidebar__link:hover,
.cf-sidebar__link.is-active {
  background: var(--cf-color-primary-soft);
  color: var(--cf-color-primary-strong);
}

.cf-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--cf-color-surface);
}

.cf-table th,
.cf-table td {
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid var(--cf-color-divider);
  font-size: 13px;
}

.cf-table th {
  background: #eef3f8;
  color: var(--cf-color-text-soft);
  font-weight: 900;
}

.cf-table td {
  color: var(--cf-color-text);
}

.cf-stat {
  display: grid;
  gap: 6px;
}

.cf-stat__label {
  color: var(--cf-color-text-soft);
  font-size: 12px;
  font-weight: 900;
}

.cf-stat__value {
  color: var(--cf-color-heading);
  font-size: 30px;
  line-height: 1;
  font-weight: 900;
}

.cf-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 4px 8px;
  border-radius: var(--cf-radius-pill);
  background: var(--cf-color-primary-soft);
  color: var(--cf-color-primary-strong);
  font-size: 11px;
  font-weight: 900;
}

.cf-pill--success {
  background: var(--cf-color-success-soft);
  color: var(--cf-color-success);
}

.cf-pill--warning {
  background: var(--cf-color-warning-soft);
  color: var(--cf-color-warning);
}

.cf-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--cf-color-border);
  border-radius: var(--cf-radius-sm);
  background: #ffffff;
}

.cf-banner--info {
  border-color: #bdddf4;
  background: #f5fbff;
}

.cf-banner--warning {
  border-color: #ffd0b8;
  background: var(--cf-color-warning-soft);
}

.cf-mobile-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 110;
  display: none;
  background: var(--cf-color-page);
  border-top: 1px solid var(--cf-color-border);
}

.cf-mobile-footer__menu {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  padding: 12px 16px;
}

.cf-mobile-footer__item {
  display: grid;
  justify-items: center;
  gap: 4px;
  color: var(--cf-color-text-muted);
  font-size: 11px;
  font-weight: 900;
}

.cf-mobile-footer__item.is-active {
  color: var(--cf-color-primary);
}

.cf-grid {
  display: grid;
  gap: 18px;
}

.cf-grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cf-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 991px) {
  .cf-page {
    padding: 24px 16px 80px;
  }

  .cf-grid--2,
  .cf-grid--3 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .cf-topbar {
    height: auto;
    min-height: 50px;
  }

  .cf-topbar__inner {
    min-height: 50px;
    height: auto;
    padding: 8px 16px;
  }

  .cf-topbar__nav {
    display: none;
  }

  .cf-sidebar {
    width: 100%;
    border-right: 0;
  }

  .cf-mobile-footer {
    display: block;
  }
}