* { box-sizing: border-box; }
  body { margin: 0; font-family: Arial, sans-serif; background: #f7f7f7; color: #222; }
  img { max-width: 100%; height: auto; display: block; }

  .layout { display: flex; min-height: 100vh; }

  /* Sidebar – ChatGPT-style: expanded + collapsible */
  .sidebar {
    width: 260px;
    background: #f3f3eb;
    border-right: 1px solid #e0e0d8;
    display: flex;
    flex-direction: column;
    padding: 12px 10px;
    gap: 8px;
    transition: width 0.25s ease;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    overflow: hidden;        /* prevent whole sidebar from scrolling */
    z-index: 30;
  }

  .sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 4px 8px;
    width: 100%;
  }

  .sidebar-logo-mark {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    border: 1px solid #444;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
  }

  .sidebar-logo-link {
    display: inline-flex;
  }

  .sidebar-logo-img {
    height: 32px;
    width: auto;
    object-fit: contain;
  }

  .sidebar-toggle {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    border: 1px solid #d0d0c5;
    background: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
  }

  .nav-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 4px;
    flex: 1 1 auto;          /* take remaining vertical space */
    overflow-y: auto;        /* scroll only menu items if too long */
    padding-right: 4px;      /* avoid scrollbar overlapping content */
  }

  .nav-section-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #9a9a8a;
    padding: 6px 8px 2px;
  }

  .nav-item-group {
    width: 100%;
  }

  .nav-item-main {
    width: 100%;
    border-radius: 999px;
    border: 1px solid transparent;
    background: transparent;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    font-size: 14px;
    cursor: pointer;
    color: inherit;
    text-decoration: none;
  }

  .nav-item-main:hover {
    background: #e7efe5;
  }

  .nav-item-main.active {
    background: #dde9ff;
    border-color: #2f7de1;
  }

  .nav-icon {
    font-size: 18px;
    width: 22px;
    text-align: center;
  }

  .nav-main-label {
    font-size: 13px;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .nav-main-caret {
    margin-left: auto;
    font-size: 12px;
    opacity: 0.7;
    transition: transform 0.2s ease;
  }

  .nav-item-main[aria-expanded="true"] .nav-main-caret {
    transform: rotate(180deg);
  }

  .nav-sub {
    margin-left: 32px;
    margin-top: 4px;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .nav-sub.is-collapsed {
    display: none;
  }

  .nav-sub-parent {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .nav-sub-nested {
    margin-left: 18px;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .nav-sub-nested.collapsed {
    display: none;
  }

  .nav-sub-label {
    cursor: default;
    font-weight: 600;
    color: #333;
  }

  .nav-sub-toggle {
    border-radius: 999px;
    border: 1px solid transparent;
    background: transparent;
    font-size: 12px;
    padding: 4px 10px;
    cursor: pointer;
    text-align: left;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  .nav-sub-toggle:hover {
    background: #eef1ff;
    border-color: #c7d5ff;
    color: #1e4ea4;
  }

  .nav-sub-caret {
    font-size: 10px;
    color: #6b7280;
    transition: transform 0.2s ease;
  }

  .nav-sub-toggle[aria-expanded="true"] .nav-sub-caret {
    transform: rotate(180deg);
  }

  .nav-sub-button {
    border-radius: 999px;
    border: 1px solid transparent;
    background: transparent;
    font-size: 12px;
    padding: 4px 10px;
    cursor: pointer;
    text-align: left;
    color: #555;
    text-decoration: none;
  }

  .nav-sub-button:hover {
    background: #eef1ff;
    border-color: #c7d5ff;
    color: #1e4ea4;
  }

  .nav-sub-button.active {
    background: #dde9ff;
    border-color: #2f7de1;
    color: #1e4ea4;
  }

  .sidebar .nav-sub-button[data-i18n="nav.lifeTech"] {
    display: none;
  }

  .auth-hidden {
    display: none !important;
  }

  .nav-bottom {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid #e0e0d8;
    position: relative;
  }

  .nav-bottom-button {
    border-radius: 999px;
    border: 1px solid transparent;
    background: transparent;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    font-size: 13px;
    cursor: pointer;
    width: 100%;
    justify-content: space-between;
  }

  .nav-bottom-button:hover {
    background: #e7efe5;
  }

  .nav-bottom-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    flex: 1;
    min-width: 0;
  }

  .nav-avatar {
    width: 32px;
    height: 32px;
    border-radius: 12px;
    border: 1px solid #d2d2c7;
    background: linear-gradient(135deg, #f5f5ef 0%, #e7e7dc 100%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #444;
    font-size: 13px;
    flex-shrink: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  .nav-avatar.has-image,
  .account-avatar.has-image {
    color: transparent;
  }

  .nav-bottom-label { white-space: nowrap; color: #222; font-weight: 600; }
  .nav-bottom-sub { font-size: 12px; color: #777; white-space: nowrap; }
  .nav-caret { font-size: 11px; color: #777; }

  .account-dropup {
    position: fixed;
    left: 72px; /* align with sidebar icons */
    bottom: 72px;
    width: min(480px, calc(100vw - 96px));
    transform: translateY(8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 200;
  }

  .account-dropup.open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  .account-card {
    background: #ffffff;
    border-radius: 18px;
    box-shadow: 0 16px 38px rgba(0, 0, 0, 0.16);
    border: 1px solid #e8e8df;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  @media (max-width: 640px) {
    .account-dropup {
      bottom: 68px;
      left: 12px;
      width: calc(100vw - 24px);
    }
  }

  .account-row { display: flex; gap: 10px; align-items: center; }
  .account-avatar {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background: linear-gradient(135deg, #e6f1ff 0%, #dde9ff 100%);
    color: #1d4f9b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  .account-meta { display: flex; flex-direction: column; gap: 2px; }
  .account-name { font-size: 14px; font-weight: 600; color: #222; }
  .account-handle { font-size: 12px; color: #777; }
.account-user-type { font-size: 12px; color: #555; }
.account-mode-icon { margin-left: 6px; cursor: pointer; }

.mode-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 210;
}
.mode-overlay.open {
  display: flex;
}
.mode-modal {
  background: #fff;
  border-radius: 16px;
  padding: 20px;
  width: min(520px, 100%);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
  outline: none;
}
.mode-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}
.mode-header h3 {
  margin: 0 0 4px;
  font-size: 18px;
}
.mode-header p {
  margin: 0;
  font-size: 13px;
  color: #666;
}
.mode-close {
  border: none;
  background: #f2f2f2;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}
.mode-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}
.mode-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 10px;
  cursor: pointer;
}
.mode-item.disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.mode-item input[type='radio'] {
  margin-top: 4px;
}
.mode-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mode-title {
  font-weight: 600;
  color: #222;
}
.mode-subtitle {
  font-size: 12px;
  color: #666;
}
.mode-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

  .account-divider {
    height: 1px;
    background: #ededdf;
    margin: 4px 0 2px;
  }

  .account-section-title {
    font-size: 12px;
    color: #6b7280;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin: 6px 8px 2px;
  }

  .account-section {
    display: grid;
    gap: 6px;
    padding: 2px 0;
  }

  .account-section-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    border: none;
    background: transparent;
    color: #2f2a22;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 4px 8px;
    cursor: pointer;
  }

  .account-section-caret {
    transition: transform 0.2s ease;
    font-size: 12px;
  }

  .account-section-toggle.is-collapsed .account-section-caret {
    transform: rotate(180deg);
  }

  .account-section-body {
    display: grid;
    gap: 6px;
  }

  .account-section-body.is-collapsed {
    display: none;
  }

  .account-actions { display: flex; flex-direction: column; gap: 6px; }
  .account-action {
    border: none;
    background: transparent;
    text-align: left;
    padding: 8px 10px;
    border-radius: 12px;
    font-size: 13px;
    color: #333;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
  }

  .account-action:visited,
  .account-action:hover,
  .account-action:focus {
    text-decoration: none;
  }

  .account-action:hover { background: #f3f7ff; color: #1d4f9b; }
  .account-action.danger { color: #c0392b; }
  .account-action.danger:hover { background: #fdecea; }

  .profile-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.25);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease;
    z-index: 45;
  }

  .profile-overlay.visible {
    opacity: 1;
    visibility: visible;
  }

  .confirm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.32);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 70;
    padding: 16px;
  }

  .confirm-overlay.open {
    opacity: 1;
    visibility: visible;
  }

  .confirm-modal {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
    padding: 22px 20px 20px;
    max-width: 420px;
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .confirm-title {
    margin: 0;
    font-size: 20px;
    color: #111;
  }

  .confirm-desc {
    margin: 0;
    font-size: 14px;
    color: #555;
    line-height: 1.5;
  }

  .confirm-email {
    display: block;
    margin-top: 4px;
    font-weight: 600;
    color: #222;
    word-break: break-all;
  }

  .confirm-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .confirm-primary,
  .confirm-secondary {
    width: 100%;
    border-radius: 999px;
    border: 1px solid #111;
    padding: 12px 12px;
    font-size: 15px;
    cursor: pointer;
    font-weight: 600;
  }

  .confirm-primary {
    background: #111;
    color: #fff;
  }

  .confirm-primary:hover {
    background: #000;
  }

  .confirm-secondary {
    background: #fff;
    color: #111;
    border-color: #ddd;
  }

  .confirm-secondary:hover {
    border-color: #aaa;
  }

  .profile-panel {
    position: fixed;
    left: 280px;
    bottom: 32px;
    width: 360px;
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: none;
    z-index: 50;
  }

  .profile-panel.open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  .profile-panel-header {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
  }

  .profile-panel-title {
    margin: 0;
    font-size: 18px;
  }

  .profile-panel-desc {
    margin: 4px 0 0;
    font-size: 13px;
    color: #555;
  }

  .profile-panel-close {
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid #e4e4e4;
    background: #fafafa;
    color: #666;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    flex: 0 0 auto;
  }

  .profile-panel-close:hover {
    background: #f1f1f1;
    color: #333;
  }

  .profile-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .profile-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    color: #333;
  }

  .profile-field input {
    border-radius: 12px;
    border: 1px solid #ccc;
    padding: 10px 12px;
    font-size: 14px;
  }

  .profile-field input:focus {
    outline: none;
    border-color: #2f7de1;
    box-shadow: 0 0 0 1px rgba(47, 125, 225, 0.2);
  }

  .profile-form-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
  }

  .profile-remember {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #444;
  }

  .profile-link {
    border: none;
    background: none;
    color: #2f7de1;
    cursor: pointer;
    font-size: 12px;
    padding: 0;
  }

  .profile-actions {
    display: flex;
    gap: 10px;
  }

  .profile-primary,
  .profile-secondary {
    flex: 1;
    border-radius: 999px;
    border: none;
    padding: 10px 0;
    font-size: 14px;
    cursor: pointer;
  }

  .profile-primary {
    background: #2f7de1;
    color: #fff;
  }

  .profile-secondary {
    background: #eef1ff;
    color: #1d4f9b;
  }

  .profile-status {
    min-height: 18px;
    font-size: 12px;
    color: #2d7d32;
  }

  .profile-status.error {
    color: #c0392b;
  }

  @media (max-width: 900px) {
    .profile-panel {
      left: 16px;
      right: 16px;
      width: auto;
    }
  }

  @media (max-width: 600px) {
    .profile-panel {
      bottom: 16px;
      border-radius: 16px;
    }
  }

  /* Collapsed sidebar (icons only) */
  .sidebar.collapsed {
    width: 64px;
    align-items: center;
  }

  .sidebar.collapsed .sidebar-header {
    justify-content: space-between;
  }

  .sidebar.collapsed .sidebar-logo-mark,
  .sidebar.collapsed .sidebar-logo-img {
    display: none;
  }

  .sidebar.collapsed .sidebar-toggle {
    position: static;
  }

  .sidebar.collapsed .nav-section-label,
  .sidebar.collapsed .nav-main-label,
  .sidebar.collapsed .nav-sub,
  .sidebar.collapsed .nav-bottom-label,
  .sidebar.collapsed .nav-bottom-sub,
  .sidebar.collapsed .nav-caret,
  .sidebar.collapsed .account-handle,
  .sidebar.collapsed .account-name,
  .sidebar.collapsed #profileButtonLabel,
  .sidebar.collapsed #profileButtonSub {
    display: none !important;
  }

  /* When dropup is open, show user name/handle even if sidebar is collapsed */
  .sidebar.collapsed .account-dropup.open .account-name,
  .sidebar.collapsed .account-dropup.open .account-handle {
    display: block !important;
  }

  .sidebar.collapsed .nav-item-main,
  .sidebar.collapsed .nav-bottom-button {
    justify-content: center;
    padding: 8px 0;
  }

  .sidebar.collapsed .nav-bottom-button {
    width: 44px;
    margin: 0 auto;
  }

  .sidebar.collapsed .sidebar-header {
    justify-content: center;
  }

  .sidebar.collapsed #sidebarToggle {
    margin: 0;
  }

  .sidebar.collapsed #profileAvatar {
    margin: 0 auto;
  }

  /* Main layout */
  .main {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-left: 260px; /* space for fixed sidebar */
    width: calc(100% - 260px);
    transition: margin-left 0.25s ease, width 0.25s ease;
  }

  .sidebar.collapsed ~ .main {
    margin-left: 64px;
    width: calc(100% - 64px);
  }

  .topbar {
    padding: 80px 32px 24px; /* push all logo + steps downward */
    background: #f7f7f7;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
    position: sticky;
    top: 0;
    z-index: 10;
  }

  .topbar-toolbar {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
  }

  .topbar-left {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .brand { display: flex; align-items: center; gap: 12px; }

  .brand-mark {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 2px solid #222;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 18px;
  }

  .brand-name {
    font-size: 22px;
    font-weight: bold;
    letter-spacing: 0.08em;
  }

  .brand-logo {
    height: 44px;
    width: auto;
    object-fit: contain;
  }

  .steps {
    display: flex;
    gap: 48px; /* increase gap for spacing */
    font-size: 15px;
    margin-top: 16px; /* extra space from brand */
  }

  .topbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .admin-control-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 12px;
    border: 1px solid #2f7de1;
    background: #ffffff;
    color: #1d4f9b;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 10px 22px rgba(47, 125, 225, 0.16);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  }

  .admin-control-btn:hover {
    background: #e6f1ff;
    transform: translateY(-1px);
    box-shadow: 0 14px 26px rgba(47, 125, 225, 0.2);
  }

  .admin-control-btn:active {
    transform: translateY(0);
    box-shadow: 0 8px 18px rgba(47, 125, 225, 0.18);
  }

  .create-content-btn {
    border: 1px solid #2f7de1;
    background: linear-gradient(90deg, #2f7de1, #5aa0ff);
    color: #fff;
    border-radius: 999px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 8px 16px rgba(47, 125, 225, 0.2);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
  }

  .create-content-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 18px rgba(47, 125, 225, 0.22);
  }

  .create-content-btn:active {
    transform: translateY(0);
    box-shadow: 0 6px 12px rgba(47, 125, 225, 0.2);
  }

  .lang-switch {
    border-radius: 999px;
    border: 1px solid #ddd;
    background: #ffffff;
    padding: 6px 12px;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    color: #444;
  }

  .lang-switch:hover {
    border-color: #2f7de1;
    background: #e6f1ff;
    color: #1d4f9b;
  }

  .step {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #555;
  }

  .step-number {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
  }

  .step.active .step-number {
    border-color: #2f7de1;
    background: #2f7de1;
    color: #fff;
  }

  .step.active {
    color: #2f7de1;
    font-weight: 600;
  }

  .step-symbols {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 8px;
  }

  .step-symbol {
    font-size: 16px;
    line-height: 1;
  }

  .step-symbol-gold {
    width: 24px;
    height: 24px;
    object-fit: contain;
  }

  .content {
    padding: 24px 40px 40px;
    width: 100%;
    max-width: none;
    margin: 0;
  }

  /* Dashboard */
  .dashboard-hero {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 20px;
  }

  .dashboard-title {
    font-size: 26px;
    font-weight: 700;
    margin: 0;
  }

  .dashboard-sub {
    margin: 0;
    color: #555;
    font-size: 14px;
  }

  .dashboard-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
  }

  .create-card {
    background: #fff;
    border: 1px solid #dbe7ff;
    border-radius: 18px;
    padding: 24px 18px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    box-shadow: 0 10px 28px rgba(47, 125, 225, 0.12);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  }

  .create-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(47, 125, 225, 0.18);
    border-color: #2f7de1;
  }

  .create-card:active {
    transform: translateY(0);
    box-shadow: 0 8px 18px rgba(47, 125, 225, 0.14);
  }

  .create-card.locked {
    border-color: #e2dfd7;
    background: #f7f5f1;
    box-shadow: none;
  }

  .create-card.locked:hover {
    transform: none;
    box-shadow: none;
    border-color: #e2dfd7;
  }

  .create-card-icon {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    background: linear-gradient(135deg, #2f7de1, #5aa0ff);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 26px;
    box-shadow: inset 0 -4px 10px rgba(0, 0, 0, 0.12);
  }

  .create-card-label {
    font-size: 14px;
    font-weight: 600;
    color: #1f3557;
  }

  .create-card.locked .create-card-icon {
    background: linear-gradient(135deg, #9ba7b4, #c3ccd6);
    box-shadow: inset 0 -4px 10px rgba(0, 0, 0, 0.08);
  }

  .create-card.locked .create-card-label {
    color: #6b7480;
  }

  .create-card-lock {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: #ffffff;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
  }

  .create-card.locked .create-card-lock {
    display: inline-flex;
  }

  /* Manage access */
  .access-table {
    margin-top: 10px;
    background: #fff;
    border: 1px solid #e6eaf2;
    border-radius: 16px;
    padding: 16px 16px 8px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.05);
  }

  .access-table-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
  }

  .access-table-title {
    font-size: 16px;
    font-weight: 700;
  }

  .table-scroll {
    overflow-x: auto;
  }

  .admin-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 720px;
  }

  .admin-table th,
  .admin-table td {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid #eef1f6;
    font-size: 13px;
  }

  .admin-table th {
    color: #5a6375;
    font-weight: 700;
    background: #f7f9fc;
  }

  .admin-table tr:hover td {
    background: #f7fbff;
  }

  .admin-table select {
    width: 100%;
    padding: 6px 8px;
    border-radius: 10px;
    border: 1px solid #d5dcea;
    background: #fff;
    font-size: 13px;
  }

  .chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
  }

  .chip-success {
    background: #e7f6ed;
    color: #1b6b39;
  }

  .chip-warning {
    background: #fff6e5;
    color: #a36205;
  }

  .link-btn {
    border: none;
    background: none;
    padding: 0;
    color: #2f7de1;
    cursor: pointer;
    font-weight: 600;
  }

  /* AI box */
  .ai-box {
    margin-top: 12px;
    background: #fff;
    border-radius: 999px;
    border: 1px solid #dcdcdc;
    padding: 10px 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.03);
  }

  .ai-prefix { font-size: 20px; }

  .ai-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 14px;
    color: #444;
  }

  .ai-actions { display: flex; gap: 8px; align-items: center; }

  .ai-chip {
    width: 26px;
    height: 26px;
    border-radius: 999px;
    border: 1px solid #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    cursor: pointer;
  }

  .ai-go {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #2f7de1;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    cursor: pointer;
    border: none;
  }

  /* Filters */
  .filters {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 18px 0 8px;
    flex-wrap: wrap;
  }

  .filter-chip {
    border-radius: 999px;
    border: 1px solid #ddd;
    padding: 8px 14px;
    font-size: 13px;
    background: #fff;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
  }

  .filter-chip.active {
    border-color: #2f7de1;
    background: #e6f1ff;
    color: #1d4f9b;
  }

  .filter-icon { font-size: 14px; }

  .filter-right {
    margin-left: auto;
    display: flex;
    gap: 8px;
    align-items: center;
  }

  h2.section-title { font-size: 18px; margin: 24px 0 12px; }

  .cards-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
  }

  .service-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0,0,0,0.04);
    display: flex;
    flex-direction: column;
    min-height: 180px;
  }

  .service-cover { height: 90px; background: linear-gradient(135deg, #f6c163, #f28b3c); }
  .service-cover-wealth {
    background: linear-gradient(135deg, rgba(246, 193, 99, 0.4), rgba(242, 139, 60, 0.7)),
                url('../images/senior_make_income.png') center/cover;
  }

  .service-cover-compassion {
    background: linear-gradient(135deg, rgba(244, 176, 167, 0.5), rgba(227, 107, 92, 0.7)),
                url('../images/hero_volunteer.png') center/cover;
  }

  .service-cover-tech {
    background: linear-gradient(135deg, rgba(164, 184, 255, 0.45), rgba(80, 112, 201, 0.65)),
                url('../images/siratsapon_anime_rich_balance.jpeg') center/cover;
  }

  .service-body {
    padding: 14px 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
  }

  .service-tag {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #888;
  }

  .service-title { font-size: 15px; font-weight: 600; }

  .service-desc { font-size: 13px; color: #666; flex: 1; }

  .service-cta { font-size: 12px; color: #2f7de1; font-weight: 600; margin-top: 4px; text-decoration: none; }

  .grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }

  .card-simple {
    background: #fff;
    border-radius: 12px;
    padding: 16px 18px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.03);
    font-size: 14px;
    color: #555;
  }

  .card-simple h3 { margin-top: 0; font-size: 15px; }

  .small-list { list-style: none; padding-left: 18px; margin: 8px 0 0; }

  .small-list li { margin-bottom: 4px; font-size: 13px; }

  .notifications-empty { font-size: 13px; color: #777; }

  footer {
    padding: 24px 40px 32px;
    font-size: 12px;
    color: #777;
    text-align: center;
    border-top: 1px solid #eee;
    margin-top: 24px;
  }

  /* Responsive helpers */
  @media (max-width: 1200px) {
    .cards-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .content { padding: 24px 24px 32px; }
  }

  @media (max-width: 900px) {
    .sidebar {
      width: 220px;
      padding: 12px 8px;
    }
    .main {
      margin-left: 220px;
      width: calc(100% - 220px);
    }
    .sidebar.collapsed ~ .main {
      margin-left: 64px;
      width: calc(100% - 64px);
    }
    .topbar {
      padding: 48px 24px 16px;
    }
    .content {
      padding: 20px 24px 32px;
    }
    .cards-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid-2 { grid-template-columns: 1fr; }
  }

  @media (max-width: 600px) {
    .layout {
      flex-direction: row;
      min-height: 100vh;
    }
    .sidebar {
      position: fixed;
      top: 0;
      left: 0;
      width: 64px;
      height: 100vh;
      flex-direction: column;
      align-items: center;
      padding: 16px 8px;
      gap: 12px;
      border-bottom: none;
      overflow: hidden;
      transition: width 0.25s ease;
    }
    .sidebar-header {
      justify-content: space-between;
      width: 100%;
      gap: 8px;
    }
    .sidebar-toggle {
      width: 28px;
      height: 28px;
    }
    .nav-group {
      flex-direction: column;
      gap: 6px;
      width: 100%;
      overflow: hidden;
      margin-top: 0;
      padding: 0;
    }
    .nav-item-main {
      width: 100%;
      justify-content: center;
      padding: 8px 0;
    }
    .nav-sub,
    .nav-section-label,
    .nav-main-label,
    .nav-bottom-label {
      display: none;
    }
    .nav-bottom {
      display: flex;
      width: 100%;
      justify-content: center;
      margin-top: auto;
      padding-top: 24px;
    }
    .nav-bottom-button {
      width: 100%;
      justify-content: center;
      border: 1px solid transparent;
      background: transparent;
      padding: 10px 0;
    }
    .nav-bottom-label { display: none; }
    .main {
      margin-left: 64px;
      width: calc(100% - 64px);
    }
    .topbar {
      padding: 20px 16px 16px;
      min-height: auto;
    }
    .topbar-inner {
      align-items: flex-start;
      width: 100%;
    }
    .steps {
      justify-content: flex-start;
    }
    .content {
      padding: 16px 16px 32px;
      width: 100%;
    }
    .filters {
      flex-direction: column;
      align-items: stretch;
      gap: 8px;
    }
    .filter-right {
      width: 100%;
      margin-left: 0;
      justify-content: flex-start;
    }
    .ai-box {
      flex-wrap: nowrap;
      align-items: center;
      gap: 8px;
      padding: 12px 14px;
      border-radius: 28px;
      box-shadow: 0 8px 20px rgba(0,0,0,0.05);
    }
    .ai-prefix {
      width: 38px;
      height: 38px;
      border-radius: 14px;
      background: #f2f4f7;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      flex-shrink: 0;
    }
    .ai-input {
      flex: 1;
      border: none;
      background: transparent;
      padding: 0;
      font-size: 14px;
      outline: none;
      min-width: 0;
    }
    .ai-actions {
      justify-content: flex-end;
      gap: 8px;
      flex-shrink: 0;
    }
    .ai-chip {
      width: 30px;
      height: 30px;
    }
    .ai-go {
      width: 34px;
      height: 34px;
      border-radius: 12px;
    }
    .cards-row,
    .grid-2 { grid-template-columns: 1fr; }
    footer {
      padding: 20px;
    }

    .sidebar.mobile-expanded {
      width: 220px;
      align-items: stretch;
      padding: 16px;
    }
    .sidebar.mobile-expanded .nav-group {
      overflow-y: auto;
    }
    .sidebar.mobile-expanded .nav-item-main {
      justify-content: flex-start;
      padding: 8px 12px;
    }
    .sidebar.mobile-expanded .nav-main-label,
    .sidebar.mobile-expanded .nav-section-label,
    .sidebar.mobile-expanded .nav-bottom-label {
      display: block;
    }
    .sidebar.mobile-expanded .nav-sub {
      display: flex;
    }
    .sidebar.mobile-expanded .nav-bottom {
      display: flex;
      flex-direction: column;
    }
    .sidebar.mobile-expanded ~ .main {
      margin-left: 220px;
      width: calc(100% - 220px);
    }
    .sidebar:not(.mobile-expanded) .sidebar-logo-img {
      display: none;
    }
  }
  .topbar-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
.notif-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #e53935;
    color: #fff;
    font-size: 10px;
    padding: 2px 5px;
    border-radius: 999px;
    font-weight: bold;
  }
  .notif-dropdown {
    position: absolute;
    top: 40px;
    right: 0;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    width: 280px;
    display: none;
    flex-direction: column;
    z-index: 20;
  }
  .notif-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid #eee;
    font-size: 12px;
    font-weight: 700;
  }
  .notif-actions {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .notif-mark-all {
    border: none;
    background: none;
    font-size: 11px;
    color: #0f6b62;
    font-weight: 600;
    cursor: pointer;
  }
  .notif-delete-all {
    border: none;
    background: none;
    font-size: 11px;
    color: #b42318;
    font-weight: 600;
    cursor: pointer;
  }
  .notif-list {
    display: flex;
    flex-direction: column;
    max-height: 280px;
    overflow: auto;
  }
  .notif-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    font-size: 13px;
    border-bottom: 1px solid #eee;
  }
  .notif-item.is-actionable {
    cursor: pointer;
  }
  .notif-item.is-actionable:hover {
    background: #f9fafb;
  }
  .notif-item.is-actionable:focus-visible {
    outline: 2px solid #93c5fd;
    outline-offset: -2px;
  }
  .notif-item-content {
    flex: 1;
  }
  .notif-open {
    align-self: center;
    font-size: 11px;
    font-weight: 700;
    color: #1d4ed8;
    background: #eff6ff;
    border: 1px solid #dbeafe;
    padding: 2px 8px;
    border-radius: 999px;
    user-select: none;
  }
  .notif-delete {
    border: none;
    background: #f3f4f6;
    color: #6b7280;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    line-height: 1;
  }
  .notif-delete:hover {
    background: #fee4e2;
    color: #b42318;
  }
  .notif-item:last-child { border-bottom: none; }
  .notif-item.is-unread {
    background: #f0f7ff;
    font-weight: 600;
  }
  .notif-item small {
    display: block;
    margin-top: 4px;
    color: #6b7280;
    font-weight: 400;
  }
  .notif-empty {
    padding: 12px 14px;
    font-size: 12px;
    color: #777;
  }
  .notif-wrapper.open .notif-dropdown { display: flex; }
.lang-dropdown {
    position: absolute;
    top: 40px;
    right: 0;
    width: 160px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    display: none;
    flex-direction: column;
    z-index: 30;
  }
  .lang-item {
    padding: 10px 14px;
    font-size: 13px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
  }
  .lang-item:last-child { border-bottom: none; }
  .lang-item:hover { background: #eef1ff; color: #1d4f9b; }
  .lang-wrapper.open .lang-dropdown { display: flex; }