:root {
  --app-surface: #ffffff;
  --app-surface-soft: #f8fafc;
  --app-border: #e5e7eb;
  --app-muted: #6b7280;
  --app-radius: .5rem;
  --app-radius-lg: .75rem;
  --app-card-outline-soft: rgba(148, 0, 130, .18);
  --app-card-header-bg: rgba(244, 217, 239, .34);
  --bs-primary: #940082;
  --bs-primary-rgb: 148, 0, 130;
  --bs-primary-text-emphasis: #59004e;
  --bs-primary-bg-subtle: #f4d9ef;
  --bs-primary-border-subtle: #d98aca;
  --bs-link-color: #940082;
  --bs-link-color-rgb: 148, 0, 130;
  --bs-link-hover-color: #760068;
  --bs-link-hover-color-rgb: 118, 0, 104;
  --bs-focus-ring-color: rgba(148, 0, 130, .25);
  --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

.btn-primary {
  --bs-btn-bg: #940082;
  --bs-btn-border-color: #940082;
  --bs-btn-hover-bg: #7f006f;
  --bs-btn-hover-border-color: #760068;
  --bs-btn-active-bg: #700062;
  --bs-btn-active-border-color: #69005c;
  --bs-btn-disabled-bg: #940082;
  --bs-btn-disabled-border-color: #940082;
}

.badge {
  align-items: center;
  display: inline-flex;
  line-height: 1;
  min-height: 1.5rem;
}

.card-primary {
  --lte-card-variant-bg: #940082;
  --lte-card-variant-bg-rgb: 148, 0, 130;
  border-top-color: #940082;
}

.card-edit {
  --lte-card-variant-bg: #1a73e8;
  --lte-card-variant-bg-rgb: 26, 115, 232;
  --app-card-header-bg: rgba(26, 115, 232, .07);
  --app-card-outline-soft: rgba(26, 115, 232, .2);
  --bs-focus-ring-color: rgba(26, 115, 232, .25);
  border: 3px solid #1a73e8 !important;
  border-radius: var(--app-radius-lg);
}

.card-edit > .card-header,
.card-edit .card-footer {
  background: rgba(26, 115, 232, .07) !important;
  border-color: rgba(26, 115, 232, .2);
}

.card-edit > .card-header .card-title {
  color: #0d47a1;
}

.card-edit > .card-body {
  background: rgba(26, 115, 232, .035);
}

.card-edit .btn-primary {
  --bs-btn-bg: #1a73e8;
  --bs-btn-border-color: #1a73e8;
  --bs-btn-hover-bg: #1558b0;
  --bs-btn-hover-border-color: #1252a3;
  --bs-btn-active-bg: #a8c7fa;
  --bs-btn-active-border-color: #8ab4f8;
  --bs-btn-active-color: #0d47a1;
  --bs-btn-disabled-bg: #1a73e8;
  --bs-btn-disabled-border-color: #1a73e8;
}

.card-edit .form-control:focus,
.card-edit .form-select:focus {
  border-color: #1a73e8 !important;
  box-shadow: 0 0 0 .25rem rgba(26, 115, 232, .25) !important;
  outline: none !important;
}

.card-edit .form-check-input:checked {
  background-color: #1a73e8 !important;
  border-color: #1a73e8 !important;
}

.card-edit .form-check-input:focus {
  border-color: #1a73e8 !important;
  box-shadow: 0 0 0 .25rem rgba(26, 115, 232, .25) !important;
  outline: none !important;
}

.card-edit .btn:focus-visible {
  box-shadow: 0 0 0 .25rem rgba(26, 115, 232, .25) !important;
  outline: none !important;
}

.card-edit .app-file-label.btn-primary {
  --bs-btn-bg: transparent;
  --bs-btn-border-color: #1a73e8;
  --bs-btn-color: #1a73e8;
  --bs-btn-hover-bg: #1558b0;
  --bs-btn-hover-border-color: #1252a3;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #a8c7fa;
  --bs-btn-active-border-color: #8ab4f8;
  --bs-btn-active-color: #0d47a1;
}

.card-edit .ts-wrapper.focus .ts-control {
  border-color: #1a73e8 !important;
  box-shadow: 0 0 0 .25rem rgba(26, 115, 232, .25) !important;
}

.card-edit .ts-dropdown .active,
.card-edit .ts-dropdown .selected {
  background-color: rgba(26, 115, 232, .1) !important;
  color: #0d47a1 !important;
}

.card-edit .ts-dropdown .active:hover {
  background-color: rgba(26, 115, 232, .18) !important;
  color: #0d47a1 !important;
}

.card-edit .ts-wrapper.multi .ts-control > div.active {
  background: #1a73e8;
  border-color: transparent;
  color: #fff;
}

.card-delete {
  --lte-card-variant-bg: #dc3545;
  --lte-card-variant-bg-rgb: 220, 53, 69;
  border: 3px solid #dc3545 !important;
  border-radius: var(--app-radius-lg);
}

.card-delete > .card-header,
.card-delete .card-footer {
  background: rgba(220, 53, 69, .07) !important;
  border-color: rgba(220, 53, 69, .2);
}

.card-delete > .card-header .card-title {
  color: #842029;
}

.card-delete > .card-body {
  background: rgba(220, 53, 69, .035);
}

.card {
  box-shadow: 0 .75rem 1.75rem rgba(17, 24, 39, .04);
  overflow: hidden;
}

.card-header,
.card-footer {
  background: var(--app-card-header-bg);
  border-color: var(--app-card-outline-soft);
}

.card-header {
  padding-block: .9rem;
}

.card-title {
  color: var(--bs-primary-text-emphasis);
  display: flex;
  align-items: center;
  font-weight: 700;
}

.card-body + .card-footer,
.card-header + .card-body {
  border-color: var(--app-card-outline-soft);
}

body {
  color: #1f2937;
}

:root {
  --bs-link-decoration: none;
  --bs-link-hover-decoration: none;
}

a {
  text-decoration: none !important;
}

a:hover,
a:focus {
  text-decoration: none !important;
}

.app-main {
  background:
    radial-gradient(circle at top right, rgba(244, 217, 239, .6), transparent 28rem),
    linear-gradient(180deg, rgba(248, 250, 252, .98), rgba(255, 255, 255, .98));
}

.app-preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .78);
  backdrop-filter: blur(2px);
  opacity: 1;
  visibility: visible;
  transition: opacity .32s ease, visibility .32s ease;
  pointer-events: none;
}

.app-preloader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.app-preloader__core {
  position: relative;
  width: 80px;
  min-height: 108px;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: .875rem;
  justify-content: center;
}

.app-preloader__icon {
  width: 72px;
  height: 72px;
  object-fit: contain;
  animation: app-preloader-pulse 1.15s ease-in-out infinite;
  filter: drop-shadow(0 .75rem 1.5rem rgba(15, 23, 42, .14));
}

.app-preloader__dots {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
}

.app-preloader__dot {
  width: .55rem;
  height: .55rem;
  border-radius: 999px;
  animation: app-preloader-dot-wave .9s ease-in-out infinite;
}

.app-preloader__dot--magenta {
  background: #a21caf;
}

.app-preloader__dot--yellow {
  background: #f59e0b;
  animation-delay: .15s;
}

.app-preloader__dot--violet {
  background: #c084fc;
  animation-delay: .3s;
}

.app-preview-modal {
  align-items: center;
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 1rem;
  position: fixed;
  z-index: 1060;
}

.app-preview-modal[hidden] {
  display: none;
}

.app-preview-modal__backdrop {
  background: rgba(15, 23, 42, .68);
  inset: 0;
  position: absolute;
}

.app-preview-modal__dialog {
  background: #fff;
  border-radius: 1rem;
  box-shadow: 0 1.5rem 4rem rgba(15, 23, 42, .22);
  max-width: min(960px, 100%);
  overflow: hidden;
  position: relative;
  width: 100%;
  z-index: 1;
}

.app-preview-modal__header {
  align-items: center;
  border-bottom: 1px solid rgba(148, 163, 184, .24);
  display: flex;
  justify-content: space-between;
  padding: 1rem 1.25rem;
}

.app-preview-modal__title {
  font-size: 1rem;
  margin: 0;
}

.app-preview-modal__body {
  background: #f8fafc;
  padding: 0;
  text-align: center;
}

.app-preview-img {
  max-height: 80vh;
  object-fit: contain;
}

.app-preview-img--modal-document {
  max-height: 80vh;
}

.app-pdf-frame {
  border: 1px solid var(--bs-border-color);
}

.app-pdf-frame--medium {
  height: 400px;
}

.app-pdf-frame--large {
  height: 800px;
}

.app-form-b3-bird-image {
  max-width: 260px;
}

.app-telekonseling-pks-frame {
  background: #fff;
  min-height: 75vh;
}

.app-login-submit {
  position: relative;
  overflow: hidden;
}

.dot-loader {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 6px;
  vertical-align: middle;
}

.dot-loader__dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: .85;
  transform: scale(1);
  animation: dot-loader-bounce .9s ease-in-out infinite;
}

.dot-loader__dot:nth-child(2) {
  animation-delay: .15s;
}

.dot-loader__dot:nth-child(3) {
  animation-delay: .3s;
}

.app-login-submit.btn-loading {
  pointer-events: none;
}

.login-page {
  align-items: center;
  background-color: #f8fafc;
  background-image: url("/assets/images/ipk-bg-2023.jpg");
  background-position: top left;
  background-repeat: repeat;
  justify-content: flex-start;
  padding-top: 25px;
}

.app-header,
.sidebar-brand,
.app-footer {
  background-color: #f8fafc;
  background-image: url("/assets/images/ipk-bg-2023.jpg");
  background-position: top left;
  background-repeat: repeat;
  border: 0;
  box-shadow: none;
}

.app-header.navbar,
.app-sidebar,
.app-sidebar .sidebar-brand,
.app-sidebar .brand-link,
.app-sidebar .sidebar-brand::before,
.app-sidebar .sidebar-brand::after,
.app-sidebar::before,
.app-sidebar::after {
  border: 0;
  border-bottom: 0;
  border-right: 0;
  border-inline-end: 0;
  box-shadow: none;
}

.app-header,
.app-header .nav-link,
.app-header .btn,
.app-header .app-topbar-user,
.app-footer,
.app-footer a {
  color: #ffffff;
}

.app-header .nav-link:hover,
.app-header .nav-link:focus,
.app-header .btn:hover,
.app-header .btn:focus {
  color: #ffffff;
}

.app-topbar-user {
  align-items: center;
  color: #fff;
  display: inline-flex;
  gap: .7rem;
  max-width: 16rem;
}

.app-topbar-user:hover,
.app-topbar-user:focus {
  color: #fff;
}

.app-topbar-user__name {
  font-size: .875rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-user-avatar {
  align-items: center;
  background: rgba(0, 0, 0, 0.18);
  border: 0px solid rgba(0, 0, 0, 0.28);
  border-radius: 999px;
  color: #fff;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: .78rem;
  font-weight: 700;
  justify-content: center;
  letter-spacing: .04em;
  overflow: hidden;
  text-transform: uppercase;
}

.app-user-avatar img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.app-user-avatar--sm {
  height: 2.1rem;
  width: 2.1rem;
}

.app-user-avatar--lg {
  box-shadow: 0 .75rem 1.75rem rgba(15, 23, 42, .22);
  height: 3rem;
  width: 3rem;
}

.app-mobile-brand {
  display: none;
}

.app-mobile-brand img {
  display: block;
  height: 2rem;
  max-width: 11rem;
  object-fit: contain;
}

.app-logout-button {
  align-items: center;
  border: 0;
  display: inline-flex;
  font-size: 1.1rem;
  height: 2rem;
  justify-content: center;
  padding: 0;
  text-decoration: none;
  width: 2rem;
}

.app-logout-button:hover,
.app-logout-button:focus,
.app-logout-button:active {
  color: #f59e0b;
  text-decoration: none;
}

.app-header .app-logout-button:hover,
.app-header .app-logout-button:focus,
.app-header .app-logout-button:active {
  color: #f59e0b;
}

.app-footer {
  border: 0;
  box-shadow: none;
  font-size: .875rem;
  min-height: 3rem;
}

.login-box.app-login--wide {
  width: min(100% - 2rem, 54rem);
}

.app-login .card {
  background-color: rgba(255, 255, 255, .7);
  box-shadow: none;
}

.app-login .login-card-body {
  background-color: transparent;
  border-radius: .85rem;
  padding: 1rem;
}

.app-login-shell {
  align-items: center;
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, .95fr);
}

.app-login-form-panel,
.app-login-help-panel {
  border-radius: var(--app-radius-lg);
}

.app-login-form-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: 2.7rem;
  padding: 1rem;
}

.app-login-help-panel {
  background: transparent;
  border: 0;
  padding: 1.15rem;
}

.app-login-help-eyebrow {
  color: var(--bs-primary);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  margin: 0 0 .35rem;
  text-transform: uppercase;
}

.app-login-help-title {
  color: var(--bs-primary);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 .45rem;
}

.app-login-help-lead {
  color: var(--app-muted);
  font-size: .9rem;
  line-height: 1.5;
  margin: 0 0 1rem;
}

.app-login-help-list {
  display: grid;
  gap: .65rem;
}

.app-login-help-item {
  align-items: flex-start;
  background: rgba(255, 255, 255, .78);
  border: 1px solid rgba(229, 231, 235, .9);
  border-radius: var(--app-radius);
  color: var(--bs-body-color);
  display: grid;
  gap: .75rem;
  grid-template-columns: auto 1fr;
  padding: .8rem;
  text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.app-login-help-item:hover,
.app-login-help-item:focus {
  background: rgba(244, 217, 239, .55);
  border-color: var(--bs-primary-border-subtle);
  box-shadow: 0 .5rem 1.25rem rgba(15, 23, 42, .08);
  color: var(--bs-body-color);
  text-decoration: none;
  transform: translateY(-1px);
}

.app-login-help-item:hover .app-login-help-icon,
.app-login-help-item:focus .app-login-help-icon {
  background: rgba(217, 138, 202, .45);
  color: var(--bs-primary);
}

.app-login-help-item:hover .app-login-help-item-title,
.app-login-help-item:focus .app-login-help-item-title {
  color: var(--bs-primary-text-emphasis);
}

.app-login-help-icon {
  align-items: center;
  background: var(--bs-primary-bg-subtle);
  border-radius: var(--app-radius);
  color: var(--bs-primary-text-emphasis);
  display: inline-flex;
  flex-shrink: 0;
  height: 2.1rem;
  justify-content: center;
  width: 2.1rem;
}

.app-login-help-item-title,
.app-login-help-item-text {
  display: block;
}

.app-login-help-item-title {
  color: var(--bs-primary);
  font-size: .9rem;
  font-weight: 700;
  line-height: 1.3;
}

.app-login-help-item-text {
  color: var(--app-muted);
  font-size: .82rem;
  line-height: 1.45;
  margin-top: .15rem;
}

.app-login-version-inline {
  color: #000000;
  font-size: .78rem;
  margin: .2rem 0 0;
  text-align: center;
}

.app-login-helper-text {
  color: #000000;
  font-size: .82rem;
  line-height: 1.45;
  margin: 1rem 0 0;
  text-align: center;
}

.app-login-footer-meta {
  margin-top: 1rem;
}

.app-login--wide .app-login-version {
  display: none;
}

.app-login .input-group-text,
.app-login .form-control,
.app-login .input-group .btn {
  background-color: rgba(255, 255, 255, .82);
}

.app-login .js-password-toggle {
  border-color: var(--bs-border-color);
  color: var(--app-muted);
}

.app-login .js-password-toggle:hover,
.app-login .js-password-toggle:focus,
.app-login .js-password-toggle:active {
  color: var(--bs-primary);
}

.app-login-version {
  color: #ffffff;
  font-size: .75rem;
  margin: .75rem 0 0;
  text-align: center;
}

.app-login-actions {
  display: block;
  width: 100%;
  font-size: .875rem;
  margin-top: 1rem;
  text-align: center;
}

.app-login-actions--footer {
  margin-top: 0;
}

.app-login-actions--tight {
  margin-top: 1.4rem;
}

.app-login-actions a {
  color: var(--bs-primary);
  font-weight: 600;
  text-decoration: none;
}

.app-login-actions a:hover,
.app-login-actions a:focus {
  color: var(--bs-link-hover-color);
}

.app-honeypot {
  height: 1px;
  left: -10000px;
  overflow: hidden;
  position: absolute;
  top: auto;
  width: 1px;
}

.app-login-logo {
  height: auto;
  max-width: min(100%, 200px);
  object-fit: contain;
  width: 200px;
}

.app-captcha-question {
  color: var(--bs-primary);
  font-weight: 600;
}

.app-login-verify-header {
  text-align: center;
}

.app-login-verify-actions .btn-link {
  text-decoration: none;
}

.app-login-verify-actions .btn-link:hover,
.app-login-verify-actions .btn-link:focus {
  color: var(--bs-link-hover-color);
}

.app-security-grid {
  display: grid;
  gap: 1rem;
}

.app-security-option {
  padding: 1rem;
  background: rgba(248, 250, 252, .85);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius);
}

.app-mfa-option {
  background: rgba(255, 255, 255, .82);
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.app-mfa-option.is-selected {
  background: linear-gradient(180deg, rgba(244, 217, 239, .38), rgba(255, 255, 255, .92));
  border-color: var(--bs-primary);
  box-shadow: 0 .75rem 1.75rem rgba(148, 0, 130, .08);
}

.app-mfa-option-header {
  align-items: flex-start;
  cursor: pointer;
  display: grid;
  gap: .8rem;
  grid-template-columns: auto minmax(0, 1fr) auto;
  margin: 0;
}

.app-mfa-radio {
  display: inline-grid;
  margin-top: .15rem;
  place-items: center;
  position: relative;
}

.app-mfa-radio input {
  height: 1.15rem;
  margin: 0;
  opacity: 0;
  position: absolute;
  width: 1.15rem;
}

.app-mfa-radio span {
  background: var(--app-surface);
  border: 2px solid var(--app-border);
  border-radius: 999px;
  display: inline-block;
  height: 1.15rem;
  width: 1.15rem;
}

.app-mfa-radio input:checked + span {
  border-color: var(--bs-primary);
  box-shadow: inset 0 0 0 .25rem var(--app-surface);
  background: var(--bs-primary);
}

.app-mfa-radio input:focus-visible + span {
  outline: 3px solid var(--bs-focus-ring-color);
  outline-offset: 2px;
}

.app-mfa-copy {
  display: grid;
  gap: .15rem;
}

.app-mfa-copy .h6 {
  color: #111827;
  display: block;
}

.app-mfa-action-panel {
  border-top: 1px solid var(--app-card-outline-soft);
  margin-top: 1rem;
  padding-top: 1rem;
}

.app-totp-setup {
  display: grid;
  gap: 1.5rem;
}

.app-totp-qr {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: #fff;
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius);
}

.app-totp-qr svg {
  display: block;
  width: min(100%, 240px);
  height: auto;
}

.app-secret-box {
  padding: .875rem 1rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .08em;
  background: #fff;
  border: 1px dashed #cbd5e1;
  border-radius: var(--app-radius);
  word-break: break-all;
}

.app-backup-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
}

.app-backup-grid span {
  display: block;
  padding: .75rem .875rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 700;
  background: #fff;
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius);
  text-align: center;
}

.app-sidebar .brand-link {
  justify-content: center;
  min-height: 3.5rem;
}

.app-sidebar-user {
  padding: .9rem .9rem .25rem;
}

.app-sidebar-user__link {
  align-items: center;
  background: rgba(255, 255, 255, .00);
  border: 0px solid rgba(255, 255, 255, .12);
  border-radius: .9rem;
  color: #fff;
  display: flex;
  gap: .85rem;
  min-width: 0;
  padding: .8rem .9rem;
  transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}

.app-sidebar-user__link:hover,
.app-sidebar-user__link:focus {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .18);
  color: #fff;
  transform: translateY(-1px);
}

.app-sidebar-user__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: .15rem;
  min-width: 0;
}

.app-sidebar-user__name,
.app-sidebar-user__meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-sidebar-user__name {
  font-size: .92rem;
  font-weight: 700;
}

.app-sidebar-user__meta {
  color: rgba(255, 255, 255, .72);
  font-size: .75rem;
}

.app-brand-link {
  overflow: hidden;
  padding-inline: .75rem;
}

.app-brand-logo {
  display: block;
  max-width: 100%;
  object-fit: contain;
}

.app-brand-logo-full {
  height: 2.25rem;
}

.app-brand-logo-mini {
  display: none;
  height: 2rem;
  width: 2rem;
}

body:not(.sidebar-collapse) .app-brand-logo-full {
  display: block;
}

body:not(.sidebar-collapse) .app-brand-logo-mini {
  display: none;
}

.sidebar-mini.sidebar-collapse .app-sidebar .brand-link {
  padding-inline: 0;
}

.sidebar-mini.sidebar-collapse .app-sidebar-user {
  padding-inline: .5rem;
}

.sidebar-mini.sidebar-collapse .app-sidebar-user__link {
  justify-content: center;
  padding-inline: .5rem;
}

.sidebar-mini.sidebar-collapse .app-sidebar-user__body {
  display: none;
}

.sidebar-collapse .app-brand-logo-full {
  display: none;
}

.sidebar-collapse .app-brand-logo-mini {
  display: block;
}

.sidebar-mini.sidebar-collapse .app-sidebar:hover .brand-link {
  padding-inline: .75rem;
}

.sidebar-mini.sidebar-collapse .app-sidebar:hover .app-sidebar-user {
  padding-inline: .9rem;
}

.sidebar-mini.sidebar-collapse .app-sidebar:hover .app-sidebar-user__link {
  justify-content: flex-start;
  padding-inline: .9rem;
}

.sidebar-mini.sidebar-collapse .app-sidebar:hover .app-sidebar-user__body {
  display: flex;
}

.sidebar-mini.sidebar-collapse .app-sidebar:hover .app-brand-logo-full {
  display: block;
}

.sidebar-mini.sidebar-collapse .app-sidebar:hover .app-brand-logo-mini {
  display: none;
}

@media (min-width: 768px) {
  .app-security-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .app-totp-setup {
    grid-template-columns: minmax(220px, 240px) minmax(0, 1fr);
    align-items: start;
  }
}

@media (max-width: 575.98px) {
  .app-backup-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .app-mfa-option-header {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .app-mfa-option-header .badge {
    grid-column: 2;
    justify-self: start;
  }
}

.app-content-header h1 {
  font-size: 1.5rem;
  font-weight: 650;
}

.app-content-header {
  padding-bottom: .25rem;
}

.app-content > .container-fluid > .alert:first-child {
  margin-top: 1rem;
}

.app-home-summary {
  margin-top: 0;
}

.card,
.info-box {
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius);
  box-shadow: 0 .75rem 1.75rem rgba(17, 24, 39, .04);
}

.card-header {
  background: var(--app-card-header-bg);
  border-bottom-color: var(--app-card-outline-soft);
}

.card-title {
  font-size: 1rem;
  font-weight: 650;
}

.app-profile-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem 1rem;
}

.app-profile-grid--1 {
  grid-template-columns: 1fr;
}

.app-profile-grid--3 {
  grid-template-columns: 1fr 1fr 1fr;
}

.app-profile-value--wrap {
  white-space: normal;
}

.app-profile-cell {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  min-width: 0;
}

.app-profile-label {
  color: var(--bs-secondary-color);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.app-profile-value {
  font-size: .9rem;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text-bg-purple {
  color: #fff;
  background-color: #940082;
}

.text-bg-indigo {
  color: #fff;
  background-color: #750395db;
}

.text-bg-orange {
  color: #fff;
  background-color: #c2410c;
}

.text-bg-dark-blue {
  color: #fff;
  background-color: #0d6efd;
}

.text-bg-emerald {
  color: #ffffff;
  background-color: #0a3d9ad3;
}

.card-outline-dark-blue {
  border-top-color: #0d6efd;
}

.text-dark-blue-bold {
  color: #1761d1;
  font-weight: 700;
}

.app-eyebrow {
  color: var(--bs-primary);
  display: block;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  margin-bottom: .2rem;
  text-transform: uppercase;
}

.app-welcome-card {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .94), rgba(244, 217, 239, .42)),
    var(--app-surface);
}

.app-welcome-card .card-body {
  padding: 1.25rem;
}

.app-welcome-status {
  background: rgba(255, 255, 255, .72);
  border: 1px solid var(--app-card-outline-soft);
  border-radius: var(--app-radius-lg);
  display: grid;
  gap: .25rem;
  padding: 1rem;
}

.app-welcome-status strong {
  color: var(--bs-primary-text-emphasis);
  font-size: 1.35rem;
  line-height: 1.2;
}

.app-info-box {
  background: rgba(255, 255, 255, .9);
  min-height: 5.75rem;
}

.app-info-box .info-box-icon {
  border-radius: calc(var(--app-radius) - .125rem);
  width: 4rem;
}

.app-info-box .info-box-text {
  color: var(--app-muted);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.app-info-box .info-box-number {
  color: #111827;
  font-size: 1.05rem;
  line-height: 1.25;
}

.info-box-content a.info-box-link {
  color: #c084fc;
  text-decoration: none;
  transition: color .15s ease;
}

.info-box-content a.info-box-link:hover {
  color: #fb923c;  text-decoration: none; 
}

.app-detail-list {
  display: grid;
  gap: .75rem;
  margin: 0;
}

.app-detail-list dt {
  color: var(--app-muted);
  font-size: .8125rem;
  font-weight: 600;
}

.app-detail-list dd {
  margin: -.45rem 0 0;
  overflow-wrap: anywhere;
}

.app-stat-tile {
  background: var(--app-surface-soft);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-lg);
  display: grid;
  gap: .25rem;
  min-height: 5rem;
  padding: 1rem;
}

.app-stat-label {
  color: var(--app-muted);
  font-size: .8125rem;
  font-weight: 600;
}

.app-stat-tile strong {
  color: #111827;
  font-size: 1.25rem;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.app-empty-state {
  align-items: center;
  background: linear-gradient(180deg, rgba(248, 250, 252, .68), rgba(255, 255, 255, .82));
  color: var(--app-muted);
  display: grid;
  gap: .5rem;
  justify-items: center;
  min-height: 10rem;
  padding: 2rem;
  text-align: center;
}

.app-empty-state i {
  align-items: center;
  background: var(--bs-primary-bg-subtle);
  border: 1px solid var(--bs-primary-border-subtle);
  border-radius: 999px;
  color: var(--bs-primary);
  display: inline-flex;
  font-size: 1.6rem;
  height: 3.25rem;
  justify-content: center;
  width: 3.25rem;
}

.app-empty-state h3 {
  color: #111827;
  font-size: 1rem;
  margin: .25rem 0 0;
}

.app-empty-state p {
  margin: 0;
  max-width: 28rem;
}

.app-security-list .list-group-item {
  gap: 1rem;
}

.app-security-option {
  border-color: var(--app-card-outline-soft);
  border-radius: var(--app-radius-lg);
}

.app-security-option .badge {
  white-space: nowrap;
}

.table {
  --bs-table-hover-bg: #f8fafc;
}

.table > :not(caption) > * > * {
  padding: .5rem 1rem;
}

.table thead th {
  background: var(--app-surface-soft);
  color: var(--app-muted);
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: .03em;
  padding-block: .75rem;
  white-space: nowrap;
}

.btn {
  border-radius: .45rem;
  font-weight: 600;
}

.pagination {
  gap: .2rem;
}

.pagination .page-link {
  border: none;
  border-radius: .4rem !important;
  color: var(--bs-primary);
  line-height: 1.6;
  min-width: 2rem;
  padding: .3rem .6rem;
  text-align: center;
}

.pagination .page-link:hover,
.pagination .page-link:focus {
  background-color: var(--bs-primary-bg-subtle);
  color: var(--bs-primary);
}

.pagination .page-item.active .page-link {
  background-color: var(--bs-primary);
  color: #fff;
  font-weight: 700;
}

.pagination .page-item.disabled .page-link {
  background: transparent;
  color: var(--app-muted);
}

.app-per-page-select {
  appearance: none;
  background: transparent;
  border: none;
  box-shadow: none !important;
  color: var(--bs-primary);
  cursor: pointer;
  font-size: 1rem;
  font-weight: 700;
  padding-inline: .25rem;
  width: auto;
}

.app-per-page-select:focus {
  outline: none;
}

.ts-wrapper.app-per-page-select .ts-control {
  border: none;
  background: transparent;
  box-shadow: none !important;
  color: var(--bs-primary);
  font-weight: 700;
  font-size: 1rem;
  min-height: auto;
  padding-inline: .25rem;
}

.ts-wrapper.app-per-page-select .ts-control input {
  color: var(--bs-primary);
  font-weight: 700;
}

.ts-wrapper.app-per-page-select.focus .ts-control {
  border: none;
  box-shadow: none !important;
}

.app-membership-status {
  border-radius: .6rem;
  display: flex;
  flex-direction: column;
  gap: .2rem;
  padding: .75rem 1rem;
}

.app-membership-status--active {
  background: #e9fbe9;
  border: 1px solid #b2e8b2;
}

.app-membership-status--expired {
  background: #fdecea;
  border: 1px solid #f5b7b1;
}

.app-membership-status__label {
  color: var(--app-muted);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .06em;
}

.app-membership-status__value {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: .03em;
  line-height: 1.2;
}

.app-membership-status--active .app-membership-status__value {
  color: #1a7d3b;
}

.app-membership-status--expired .app-membership-status__value {
  color: #b91c1c;
}

.app-membership-status__exp {
  color: var(--app-muted);
  font-size: .75rem;
  margin-top: .1rem;
}

.app-badge-verified {
  background-color: #1a7d3b;
  color: #fff;
}

.app-badge-pending {
  background-color: #0a6da4;
  color: #fff;
}

.app-badge-invalid {
  background-color: #b91c1c;
  color: #fff;
}

.app-badge-problem {
  background-color: #b45309;
  color: #fff;
}

.app-badge-deletable {
  background-color: #6b7280;
  color: #fff;
}

.app-wilayah-name {
  color: var(--bs-primary-text-emphasis);
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: .01em;
  line-height: 1.3;
  margin-bottom: .5rem;
  word-break: break-word;
}

.app-wilayah-address {
  color: var(--bs-secondary-color);
  font-size: .875rem;
  line-height: 1.6;
  margin-bottom: 1rem;
  word-break: break-word;
  white-space: normal;
}

.app-copy-btn {
  color: var(--app-muted);
  font-size: .8rem;
  line-height: 1;
  opacity: .6;
}

.app-copy-btn:hover,
.app-copy-btn:focus {
  color: var(--bs-primary);
  opacity: 1;
}

.app-social-link {
  align-items: center;
  border-radius: .45rem;
  display: inline-flex;
  font-size: .875rem;
  font-weight: 600;
  gap: .4rem;
  padding: .35rem .65rem;
  text-decoration: none;
  transition: background .15s, color .15s;
}

.app-social-link i {
  font-size: 1.1rem;
}

.app-social-link--wa {
  background: #e9fbe9;
  color: #1a7d3b;
}

.app-social-link--wa:hover {
  background: #25d366;
  color: #fff;
}

.app-social-link--tg {
  background: #e5f3fb;
  color: #0a6da4;
}

.app-social-link--tg:hover {
  background: #229ed9;
  color: #fff;
}

@media (max-width: 575.98px) {
  .app-content-header h1 {
    font-size: 1.25rem;
  }

  .login-box:not(.app-login) {
    width: min(100% - 2rem, 24rem);
  }

  .login-box.app-login--wide {
    width: min(100% - 1rem, 24rem);
  }

  .app-login .login-card-body,
  .app-login-form-panel,
  .app-login-help-panel {
    padding: .9rem;
  }
}

@media (max-width: 767.98px) {
  .app-login-shell {
    align-items: stretch;
    grid-template-columns: 1fr;
  }

  .app-login-form-panel {
    justify-content: flex-start;
    margin-top: 0;
  }
}

@media (max-width: 991.98px) {
  .app-header .container-fluid {
    position: relative;
  }

  .app-mobile-brand {
    display: block;
    left: 50%;
    max-width: calc(100% - 8rem);
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .app-topbar-user {
    gap: .5rem;
    margin-right: .25rem !important;
    max-width: none;
  }

  .app-topbar-user__name {
    display: none;
  }
}

@keyframes app-preloader-pulse {
  0%,
  100% {
    opacity: .72;
    transform: scale(.94);
  }

  50% {
    opacity: 1;
    transform: scale(1.05);
  }
}

@keyframes app-preloader-dot-wave {
  0%,
  100% {
    opacity: .55;
    transform: scale(.72);
  }

  50% {
    opacity: 1;
    transform: scale(1.18);
  }
}

@keyframes dot-loader-bounce {
  0%,
  80%,
  100% {
    transform: scale(1);
    opacity: .55;
  }

  40% {
    transform: scale(1.55);
    opacity: 1;
  }
}

.ts-control {
  border-color: var(--bs-border-color);
}

.ts-control:focus,
.ts-control.focus,
.ts-wrapper.focus .ts-control {
  border-color: var(--bs-primary-border-subtle) !important;
  box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .25) !important;
}

.ts-dropdown .option {
  padding: .5rem .75rem;
}

.ts-dropdown .active,
.ts-dropdown .selected {
  background-color: var(--bs-primary-bg-subtle);
  color: var(--bs-primary);
}

.ts-dropdown .active:hover {
  background-color: var(--bs-primary-bg-subtle);
}

.ts-theme-blue.ts-dropdown .active,
.ts-theme-blue.ts-dropdown .selected {
  background-color: rgba(26, 115, 232, .1) !important;
  color: #0d47a1 !important;
}

.ts-theme-blue.ts-dropdown .active:hover {
  background-color: rgba(26, 115, 232, .18) !important;
  color: #0d47a1 !important;
}

.ts-wrapper.single .ts-control {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236c757d' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right .75rem center;
  background-size: 16px 12px;
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: var(--bs-primary-border-subtle) !important;
  box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .25) !important;
}

.form-check-input:checked {
  background-color: #940082 !important;
  border-color: #940082 !important;
}

::file-selector-button::after {
  content: " Pilih Berkas";
}

/* Custom file input wrapper */
.app-file-input-wrapper {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.app-file-input-wrapper .app-file-label {
  margin-bottom: 0;
  white-space: nowrap;
}

.app-file-input-wrapper .app-file-text {
  color: var(--bs-secondary-color);
  font-size: 0.875rem;
}

.app-file-input-wrapper.has-file .app-file-text {
  color: var(--bs-body-color);
  font-weight: 500;
}

.app-template-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.app-template-buttons .btn {
  padding: .25rem .6rem;
  border-radius: .4rem;
}

.btn:focus-visible {
  box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .25) !important;
}

@media (prefers-reduced-motion: reduce) {
  .app-preloader,
  .app-preloader__icon,
  .app-preloader__dot,
  .dot-loader__dot {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Small-box with Bootstrap Icons polish */
.small-box {
  border-radius: var(--app-radius);
}

.small-box .icon > i.bi {
  font-size: 2.5rem;
  position: absolute;
  right: 1rem;
  top: 1rem;
  opacity: 0.9;
  transition: transform 0.3s ease;
}

.small-box:hover .icon > i.bi {
  transform: scale(1.1);
}

.small-box .inner h3 {
  font-size: 1.75rem;
  font-weight: 600;
}

.small-box .inner p {
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 0;
}

.small-box.bg-warning .inner h3,
.small-box.bg-warning .inner p {
  color: #000;
}

.small-box.bg-warning .icon > i.bi {
  color: rgba(0, 0, 0, 0.7);
}

/* Custom Text Colors - Global (berlaku di seluruh aplikasi) */
.text-coral { color: #ff6b6b !important; }
.text-salmon { color: #ff8787 !important; }
.text-orange { color: #fd7e14 !important; }
.text-amber { color: #d7c9c5 !important; }
.text-gold { color: #ffd43b !important; }
.text-golden { color: #ecdca1 !important; }
.text-lime { color: #84cc16 !important; }
.text-emerald { color: #10b981 !important; }
.text-teal { color: #14b8a6 !important; }
.text-cyan { color: #06b6d4 !important; }
.text-sky { color: #0ea5e9 !important; }
.text-indigo { color: #6366f1 !important; }
.text-violet { color: #8b5cf6 !important; }
.text-purple { color: #a855f7 !important; }
.text-fuchsia { color: #d946ef !important; }
.text-pink { color: #ec4899 !important; }
.text-rose { color: #f43f5e !important; }
.text-slate { color: #64748b !important; }
.text-zinc { color: #71717a !important; }
.text-stone { color: #78716c !important; }
.text-neutral { color: #f8f0f0 !important; }

/* Support for ul as callout-desc (list inside callout) */
ul.callout-desc {
  margin-bottom: 0;
}

ul.callout-desc li {
  margin-bottom: 0.25rem;
}

ul.callout-desc li:last-child {
  margin-bottom: 0;
}

/* Sidebar Nav Item - Vertical Line Indicator (mirip callout) */
.sidebar-menu .nav-item .nav-link {
  position: relative;
  transition: all 0.2s ease;
}

.sidebar-menu .nav-item .nav-link::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background-color: var(--bs-primary);
  border-radius: 2px 0 0 2px;
  transition: width 0.2s ease;
}

.sidebar-menu .nav-item .nav-link:hover::before,
.sidebar-menu .nav-item .nav-link.active::before {
  width: 3px;
}

/* Nav Group Toggle - Chevron rotation */
.nav-group-toggle .nav-arrow {
  transition: transform 0.2s ease;
}

.nav-group-toggle[aria-expanded="true"] .nav-arrow {
  transform: rotate(90deg);
}

/* Nav Treeview - Indent submenu (hanya untuk full sidebar) */
.sidebar:not(.sidebar-mini) .nav-treeview {
  margin-left: 1rem;
}

.sidebar:not(.sidebar-mini) .nav-treeview .nav-link {
  padding-left: 2.5rem;
}

/* Untuk sidebar mini, tidak ada indentasi */
.sidebar-mini .nav-treeview {
  margin-left: 0;
}

.sidebar-mini .nav-treeview .nav-link {
  padding-left: 1rem;
}

/* Active state untuk parent group */
.nav-item.menu-open > .nav-group-toggle {
  background-color: rgba(148, 0, 130, 0.05);
}

/* Sidebar button.nav-link hover effect */
.sidebar-menu .nav-item button.nav-link:hover {
  background-color: rgba(148, 0, 130, 0.05);
  text-decoration: none;
}

.sidebar-menu .nav-item button.nav-link:hover::before {
  width: 3px;
}

/* Callout Hijau Slate - Custom variant */
.callout.callout-hijauslate {
  background-color: #2f4f4f;
  color: #ffffff;
  border-left: 4px solid #fd7e14;
}

.callout.callout-hijauslate .callout-title {
  color: #ffffff;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.callout.callout-hijauslate .callout-desc {
  color: #ffffff;
  margin-bottom: 0;
}

.callout.callout-hijauslate a {
  color: #fd7e14; /* kuning (gold) */
  text-decoration: underline;
}

.callout.callout-hijauslate a:hover {
  color: #ffd43b; /* orange */
  text-decoration: underline;
}

/* Dashboard - Unread Ticket Banner */
.app-ticket-unread-banner {
  align-items: center;
  background: rgba(26, 115, 232, .08);
  border: 1px solid rgba(26, 115, 232, .25);
  border-radius: var(--app-radius-lg);
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .75rem;
  padding: .75rem 1rem;
}

.app-ticket-unread-banner__icon {
  color: #1a73e8;
  flex-shrink: 0;
  font-size: 1.1rem;
}

.app-ticket-unread-banner__text {
  color: var(--bs-body-color);
  flex: 1;
  font-size: .9rem;
  min-width: 0;
}

.app-ticket-unread-banner__link {
  color: #1a73e8;
  font-size: .85rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.app-ticket-unread-banner__link:hover {
  text-decoration: underline;
}

/* Dashboard - Ticket Widget */
.app-ticket-widget-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.app-ticket-widget-item {
  align-items: center;
  border-bottom: 1px solid var(--bs-border-color);
  display: flex;
  gap: .75rem;
  padding: .75rem 1rem;
  transition: background .15s ease;
}

.app-ticket-widget-item:last-child {
  border-bottom: none;
}

.app-ticket-widget-item--unread {
  background: rgba(26, 115, 232, .04);
  border-left: 3px solid #1a73e8;
}

.app-ticket-widget-item__body {
  flex: 1;
  min-width: 0;
}

.app-ticket-widget-item__top {
  align-items: center;
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin-bottom: .2rem;
}

.app-ticket-widget-item__number {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .02em;
}

.app-ticket-widget-item__topic {
  color: var(--bs-secondary-color);
  font-size: .82rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-ticket-widget-badge {
  background: rgba(26, 115, 232, .12);
  border-radius: .35rem;
  color: #1a73e8;
  font-size: .72rem;
  font-weight: 600;
  line-height: 1;
  padding: .25rem .5rem;
  white-space: nowrap;
}

.app-ticket-widget-badge--waiting {
  background: rgba(108, 117, 125, .12);
  color: #6c757d;
}

.app-ticket-widget-item__link {
  color: var(--bs-secondary-color);
  flex-shrink: 0;
  font-size: 1rem;
  padding: .25rem;
  text-decoration: none;
  transition: color .15s ease;
}

.app-ticket-widget-item__link:hover {
  color: #1a73e8;
}

/* SVG icon via mask-image — warna dikontrol via CSS color */
.nav-icon-svg {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  vertical-align: -0.125em;
  flex-shrink: 0;
}

.nav-icon-svg--b {
  -webkit-mask-image: url('/assets/images/huruf-b-solid.svg');
  mask-image: url('/assets/images/huruf-b-solid.svg');
}

.nav-icon-svg--c {
  -webkit-mask-image: url('/assets/images/huruf-c-solid.svg');
  mask-image: url('/assets/images/huruf-c-solid.svg');
}

.nav-icon-svg--d {
  -webkit-mask-image: url('/assets/images/huruf-d-solid.svg');
  mask-image: url('/assets/images/huruf-d-solid.svg');
}

.nav-icon-svg--e {
  -webkit-mask-image: url('/assets/images/huruf-e-solid.svg');
  mask-image: url('/assets/images/huruf-e-solid.svg');
}

.nav-icon-svg--f {
  -webkit-mask-image: url('/assets/images/huruf-f-solid.svg');
  mask-image: url('/assets/images/huruf-f-solid.svg');
}

/* ===== TOS Page ===== */
.tos-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  padding: 2rem 1rem 3rem;
}

.tos-header {
  width: 100%;
  max-width: 52rem;
  margin-bottom: 1.5rem;
}

.tos-brand {
  display: inline-block;
}

.tos-brand-logo {
  height: auto;
  max-width: 180px;
}

.tos-container {
  width: 100%;
  max-width: 52rem;
}

.tos-card {
  background-color: var(--app-surface);
  border-radius: var(--app-radius-lg);
  box-shadow: 0 2px 12px rgba(0, 0, 0, .08);
  overflow: hidden;
}

.tos-card-hero {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.75rem 2rem;
  background: linear-gradient(135deg, #940082 0%, #6d0060 100%);
  color: #fff;
}

.tos-card-hero__icon {
  font-size: 2rem;
  opacity: .85;
  flex-shrink: 0;
}

.tos-card-hero__title {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 .2rem;
  color: #fff;
}

.tos-card-hero__meta {
  font-size: .8rem;
  opacity: .8;
  margin: 0;
}

.tos-intro {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: 1rem 2rem;
  background-color: var(--bs-primary-bg-subtle);
  border-bottom: 1px solid var(--bs-primary-border-subtle);
  font-size: .875rem;
  color: var(--bs-primary-text-emphasis);
}

.tos-intro p {
  margin: 0;
  line-height: 1.6;
}

.tos-intro__icon {
  font-size: 1rem;
  margin-top: .15rem;
  flex-shrink: 0;
}

.tos-toc {
  padding: 1rem 2rem;
  background-color: var(--app-surface-soft);
  border-bottom: 1px solid var(--app-border);
}

.tos-toc__label {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--app-muted);
  margin: 0 0 .5rem;
}

.tos-toc__list {
  margin: 0;
  padding-left: 1.25rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: .2rem .5rem;
}

.tos-toc__list li {
  font-size: .8rem;
}

.tos-toc__list a {
  color: var(--bs-link-color);
  text-decoration: none;
}

.tos-toc__list a:hover {
  text-decoration: underline;
}

.tos-body {
  padding: 1.5rem 2rem;
}

.tos-section {
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--app-border);
}

.tos-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.tos-section__title {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--bs-primary-text-emphasis);
  margin: 0 0 .875rem;
}

.tos-section__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background-color: var(--bs-primary-bg-subtle);
  color: var(--bs-primary);
  font-size: .75rem;
  font-weight: 700;
  flex-shrink: 0;
}

.tos-section p {
  font-size: .875rem;
  line-height: 1.7;
  color: #374151;
  margin-bottom: .75rem;
}

.tos-section p:last-child {
  margin-bottom: 0;
}

.tos-dl {
  margin: 0;
}

.tos-dl dt {
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--app-muted);
  margin-top: .875rem;
}

.tos-dl dt:first-child {
  margin-top: 0;
}

.tos-dl dd {
  margin: .2rem 0 0 0;
  font-size: .875rem;
  line-height: 1.65;
  color: #374151;
}

.tos-list {
  font-size: .875rem;
  line-height: 1.7;
  color: #374151;
  padding-left: 1.25rem;
  margin: .5rem 0 0;
}

.tos-list li {
  margin-bottom: .3rem;
}

.tos-notice {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  border-radius: var(--app-radius);
  padding: .75rem 1rem;
  font-size: .8rem;
  line-height: 1.55;
  margin-top: .875rem;
}

.tos-notice--warning {
  background-color: #fff8e1;
  border: 1px solid #ffe082;
  color: #7d5a00;
}

.tos-policy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  gap: .875rem;
  margin-top: .875rem;
}

.tos-policy-item {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .875rem 1rem;
  background-color: var(--app-surface-soft);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius);
}

.tos-policy-item strong {
  display: block;
  font-size: .8rem;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: .2rem;
}

.tos-policy-item p {
  font-size: .775rem;
  color: var(--app-muted);
  line-height: 1.55;
  margin: 0;
}

.tos-policy-item__icon {
  font-size: 1.1rem;
  color: var(--bs-primary);
  margin-top: .1rem;
  flex-shrink: 0;
}

.tos-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .75rem;
  padding: 1rem 2rem;
  background-color: var(--app-surface-soft);
  border-top: 1px solid var(--app-border);
}

.tos-footer__updated {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .775rem;
  color: var(--app-muted);
  margin: 0;
}

@media (max-width: 576px) {
  .tos-card-hero {
    padding: 1.25rem 1.25rem;
  }

  .tos-intro,
  .tos-toc {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .tos-body {
    padding: 1.25rem;
  }

  .tos-footer {
    padding: 1rem 1.25rem;
    flex-direction: column;
    align-items: flex-start;
  }

  .tos-policy-grid {
    grid-template-columns: 1fr;
  }

  .tos-toc__list {
    grid-template-columns: 1fr;
  }
}