@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');

:root {
  --page: #aee8f4;
  --phone: #ffffff;
  --ink: #27405c;
  --muted: #9bbbd0;
  --line: #e7f6fb;
  --blue: #2294f2;
  --blue-2: #30b9f7;
  --cyan: #59d7df;
  --mint: #56d997;
  --mint-2: #67e3b2;
  --soft: #eefcff;
  --tile: rgba(255,255,255,.24);
  --shadow: 0 18px 34px rgba(24, 117, 168, .16);
  --shadow-strong: 0 28px 54px rgba(32, 126, 178, .26);
  --font-sans: 'Poppins', ui-sans-serif, system-ui, sans-serif;
  --primary: var(--blue);
  --primary-2: var(--cyan);
  --warning: #f7a65b;
  --shadow-soft: 0 14px 28px rgba(60, 151, 198, .13);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  min-height: 100%;
  overflow-x: hidden;
  scrollbar-width: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
.main-content::-webkit-scrollbar,
.sidebar::-webkit-scrollbar,
.data-table-wrapper::-webkit-scrollbar,
.modal-box::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

body {
  min-height: 100dvh;
  color: var(--ink);
  font-family: var(--font-sans);
  background: var(--page);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
  user-select: none;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  border: 0;
  cursor: pointer;
}

input,
select,
textarea {
  user-select: auto;
}

svg {
  flex-shrink: 0;
}

.layout-sidebar {
  min-height: 100dvh;
  display: flex;
  justify-content: center;
  background: var(--page);
}

.layout-sidebar:before,
.layout-sidebar:after {
  content: "";
  position: fixed;
  width: 230px;
  height: 230px;
  border-radius: 50%;
  pointer-events: none;
}

.layout-sidebar:before {
  left: -88px;
  bottom: -54px;
  border: 1px solid rgba(34, 148, 242, .42);
}

.layout-sidebar:after {
  right: -70px;
  top: -84px;
  border: 1px solid rgba(39, 64, 92, .18);
}

.main-content {
  position: relative;
  width: min(100%, 370px);
  max-width: 370px;
  min-height: 100dvh;
  margin: 0 auto;
  padding: 0 0 86px;
  overflow-y: auto;
  overflow-x: hidden;
  background:
    linear-gradient(145deg, var(--blue) 0 72px, transparent 72px),
    var(--phone);
  box-shadow: var(--shadow-strong);
  scrollbar-width: none;
}

.native-statusbar {
  position: sticky;
  top: 0;
  z-index: 70;
  height: 27px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  background: linear-gradient(145deg, var(--blue), var(--cyan));
  color: #fff;
  font-size: 9px;
  font-weight: 800;
}

.native-system-icons {
  display: flex;
  align-items: end;
  gap: 3px;
}

.native-system-icons i {
  width: 3px;
  border-radius: 99px;
  background: #fff;
}

.native-system-icons i:nth-child(1) { height: 5px; }
.native-system-icons i:nth-child(2) { height: 7px; }
.native-system-icons i:nth-child(3) { height: 9px; }
.native-system-icons b {
  width: 15px;
  height: 8px;
  border: 2px solid #fff;
  border-radius: 3px;
}

.native-appbar {
  position: sticky;
  top: 27px;
  z-index: 69;
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px 8px;
  background: linear-gradient(145deg, var(--blue), var(--cyan));
}

.native-app-name {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}

.native-app-logo {
  width: 23px;
  height: 23px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: rgba(255,255,255,.24);
  color: #fff;
}

.nav-toggle,
.native-actions {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: rgba(255,255,255,.18);
}

.nav-toggle {
  gap: 3px;
}

.nav-toggle span {
  width: 14px;
  height: 2px;
  display: block;
  border-radius: 99px;
  background: #fff;
}

.notif-wrap {
  position: relative;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
}

.notif-btn {
  position: relative;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: transparent;
}

.notif-badge {
  position: absolute;
  top: 1px;
  right: 1px;
  min-width: 13px;
  height: 13px;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: 99px;
  padding: 0 4px;
  color: #fff;
  background: #ef5b65;
  font-size: 7px;
  font-weight: 900;
}

.notif-badge.show {
  display: flex;
}

.notif-panel {
  position: absolute;
  top: 38px;
  right: 0;
  width: 306px;
  max-width: calc(100vw - 36px);
  display: none;
  overflow: hidden;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 18px 42px rgba(24, 117, 168, .22);
}

.notif-panel.open {
  display: block;
}

.notif-panel-head {
  padding: 13px 14px;
  border-bottom: 1px solid #edf9fd;
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
}

.notif-list {
  max-height: 330px;
  overflow-y: auto;
  scrollbar-width: none;
}

.notif-list::-webkit-scrollbar {
  display: none;
}

.notif-empty,
.notif-item {
  display: block;
  padding: 13px 14px;
  color: var(--muted);
  font-size: 11px;
}

.notif-item {
  border-bottom: 1px solid #f1fbfe;
  background: #fff;
}

.notif-item.unread {
  background: #f1fbfe;
}

.notif-title,
.notif-body,
.notif-time {
  display: block;
}

.notif-title {
  color: var(--ink);
  font-size: 11px;
  font-weight: 900;
}

.notif-body {
  margin-top: 3px;
  color: #6f93aa;
  font-size: 10px;
  line-height: 1.45;
}

.notif-time {
  margin-top: 5px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
}

.native-greeting {
  display: none;
}

.native-bottom-nav {
  position: fixed;
  left: 50%;
  bottom: 22px;
  z-index: 100;
  width: min(calc(100% - 42px), 328px);
  height: 56px;
  transform: translateX(-50%);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  align-items: center;
  padding: 6px 12px;
  border-radius: 0 0 28px 28px;
  background: #fff;
  box-shadow: 0 -10px 28px rgba(43, 159, 214, .12);
}

.native-bottom-nav a,
.native-bottom-nav button {
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #d4f4fb;
  background: transparent;
  font-size: 0;
}

.native-bottom-nav svg {
  width: 18px;
  height: 18px;
}

.native-bottom-nav a.active,
.native-bottom-nav button.active,
.native-bottom-nav a.native-fab {
  color: #58d5ea;
  background: transparent;
}

.native-home-indicator {
  position: fixed;
  left: 50%;
  bottom: 8px;
  z-index: 101;
  width: 104px;
  height: 4px;
  transform: translateX(-50%);
  border-radius: 99px;
  background: #16253b;
}

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 1000;
  width: min(82vw, 310px);
  padding: 24px 18px;
  overflow-y: auto;
  background: rgba(255,255,255,.98);
  transform: translateX(-105%);
  transition: transform .22s ease;
  box-shadow: 28px 0 60px rgba(27, 105, 151, .22);
}

.layout-sidebar.nav-open .sidebar {
  transform: translateX(0);
}

.nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(26, 91, 132, .28);
  backdrop-filter: blur(4px);
}

.layout-sidebar.nav-open .nav-overlay {
  display: block;
}

.sidebar-brand-row,
.sidebar-user-card {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sidebar-brand {
  margin-bottom: 18px;
}

.sidebar-logo,
.sidebar-user-avatar {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--blue), var(--mint));
  color: #fff;
  font-weight: 800;
}

.sidebar-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.sidebar-brand-text,
.sidebar-user-meta {
  min-width: 0;
}

.sidebar-brand h2,
.sidebar-user-meta p {
  max-width: 190px;
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.badge-active,
.sidebar-user-meta small {
  display: block;
  max-width: 190px;
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.sidebar-link,
.sidebar-link-danger {
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 14px;
  color: #6b8ca5;
  background: #f1fbfe;
  font-size: 12px;
  font-weight: 800;
}

.sidebar-link.active {
  color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--mint));
}

.sidebar-link-danger {
  color: #ef5b65;
  background: #fff0f3;
}

.sidebar-divider {
  height: 1px;
  margin: 8px 0;
  background: var(--line);
}

.sidebar-user-wrap {
  margin-top: auto;
  padding-top: 16px;
}

.sidebar-user-card {
  margin-bottom: 8px;
  padding: 10px;
  border-radius: 16px;
  background: #f1fbfe;
}

/* Reference-style home screen */
.market-home {
  min-height: calc(100dvh - 86px);
  margin-top: -69px;
  padding-bottom: 12px;
  background: #fff;
}

.market-hero {
  position: relative;
  overflow: hidden;
  min-height: 230px;
  padding: 82px 22px 18px;
  border-radius: 0 0 32px 32px;
  background:
    radial-gradient(circle at 92% 3%, #62e0a1 0 23%, transparent 24%),
    radial-gradient(circle at 100% 37%, rgba(86,217,151,.9) 0 28%, transparent 29%),
    radial-gradient(circle at -3% 70%, rgba(81,215,223,.95) 0 27%, transparent 28%),
    linear-gradient(145deg, #238ff0 0%, #2fb9f8 48%, #57d7df 100%);
  color: #fff;
}

.market-hero-top {
  display: grid;
  grid-template-columns: 28px 1fr 28px;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.market-round-btn {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: rgba(255,255,255,.22);
}

.market-hero-title {
  text-align: center;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
}

.market-search {
  height: 29px;
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 6px 0 16px;
  padding: 0 12px;
  border-radius: 99px;
  background: #fff;
  color: #8fcae2;
  font-size: 11px;
  box-shadow: 0 10px 22px rgba(32, 126, 178, .18);
}

.market-shortcuts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.market-shortcut {
  min-height: 55px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: #fff;
  background: rgba(255,255,255,.23);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}

.market-shortcut svg {
  width: 20px;
  height: 20px;
}

.market-section {
  padding: 18px 18px 0;
}

.market-section-title {
  margin-bottom: 13px;
  color: #686f9c;
  text-align: center;
  font-size: 11px;
  font-weight: 800;
}

.market-card-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 11px;
}

.market-product-card {
  min-height: 160px;
  padding: 10px;
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 14px 28px rgba(60, 151, 198, .14);
}

.market-product-image {
  height: 88px;
  margin-bottom: 8px;
  border-radius: 11px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,0)),
    #f4fcff;
}

.market-product-image.members {
  background:
    radial-gradient(circle at 25% 25%, rgba(89,215,223,.62) 0 20%, transparent 21%),
    radial-gradient(circle at 78% 32%, rgba(86,217,151,.45) 0 20%, transparent 21%),
    linear-gradient(145deg, #f4fcff, #dff6fd);
}

.market-product-image.koperasi {
  background:
    radial-gradient(circle at 68% 24%, rgba(34,148,242,.56) 0 22%, transparent 23%),
    radial-gradient(circle at 28% 72%, rgba(86,217,151,.5) 0 24%, transparent 25%),
    linear-gradient(145deg, #f4fcff, #e9fbff);
}

.market-product-card h3 {
  color: #416582;
  font-size: 10px;
  line-height: 1.2;
  font-weight: 900;
}

.market-product-card p {
  margin-top: 2px;
  color: #95b8cb;
  font-size: 8px;
  line-height: 1.35;
  font-weight: 600;
}

.market-progress {
  height: 9px;
  margin-top: 8px;
  overflow: hidden;
  border-radius: 99px;
  background: #e8f8fd;
}

.market-progress i {
  display: block;
  width: 68%;
  height: 100%;
  border-radius: inherit;
  background: #6bd3ee;
}

.market-progress.wide i {
  width: 78%;
}

.market-progress.mid i {
  width: 58%;
}

.market-info-list {
  padding: 16px 18px 0;
}

.market-info-card {
  display: grid;
  grid-template-columns: 54px 1fr auto;
  align-items: center;
  gap: 10px;
  min-height: 74px;
  margin-bottom: 12px;
  padding: 10px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 14px 28px rgba(60, 151, 198, .13);
}

.market-info-thumb {
  width: 52px;
  height: 52px;
  border-radius: 11px;
  background: #dff6fd;
}

.market-info-thumb.kas {
  background:
    radial-gradient(circle at 72% 26%, rgba(86,217,151,.72) 0 24%, transparent 25%),
    linear-gradient(145deg, #dff6fd, #f5fdff);
}

.market-info-thumb.cabang {
  background:
    radial-gradient(circle at 28% 30%, rgba(34,148,242,.55) 0 22%, transparent 23%),
    linear-gradient(145deg, #e4f9ff, #f5fdff);
}

.market-info-thumb.kta {
  background:
    radial-gradient(circle at 68% 68%, rgba(89,215,223,.7) 0 23%, transparent 24%),
    linear-gradient(145deg, #e4f9ff, #f5fdff);
}

.event-reel {
  padding: 8px 18px 12px;
  background: #fff;
}

.event-reel-hscroll {
  display: flex;
  gap: 11px;
  overflow-x: auto;
  padding: 2px 0 4px;
  scrollbar-width: none;
}

.event-reel-hscroll::-webkit-scrollbar {
  display: none;
}

.event-reel-item {
  flex: 0 0 68px;
  display: grid;
  justify-items: center;
  gap: 4px;
  color: var(--ink);
  text-align: center;
}

.event-reel-ring {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 17px;
  color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  box-shadow: 0 12px 22px rgba(34, 148, 242, .2);
}

.event-reel-item.is-live .event-reel-ring {
  background: linear-gradient(135deg, var(--mint), var(--cyan));
}

.event-reel-title,
.event-reel-date {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.event-reel-title {
  color: #416582;
  font-size: 9px;
  font-weight: 900;
}

.event-reel-date {
  color: var(--muted);
  font-size: 8px;
  font-weight: 800;
}

.market-info-card h3 {
  color: #416582;
  font-size: 10px;
  font-weight: 900;
}

.market-info-card p {
  margin-top: 3px;
  color: #95b8cb;
  font-size: 8px;
  font-weight: 600;
}

.market-info-price {
  color: #56cde8;
  font-size: 10px;
  font-weight: 900;
}

.app-page {
  display: flex;
  flex-direction: column;
  gap: 13px;
  padding: 12px 18px 22px;
  background: #fff;
}

.page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.native-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  border-radius: 17px;
  background: #fff;
  box-shadow: 0 14px 28px rgba(60, 151, 198, .13);
}

.native-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.native-card-head h2 {
  color: var(--ink);
  font-size: 13px;
  line-height: 1.25;
  font-weight: 900;
}

.native-card-head p {
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.4;
}

.native-card-head span,
.native-card small,
.mobile-form small,
.form-hint {
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
}

.mobile-form {
  gap: 8px;
}

.mobile-form label {
  margin-top: 2px;
}

.mobile-form a {
  color: var(--blue);
}

.mobile-form input[disabled] {
  opacity: .58;
}

.form-error,
.form-hint.danger {
  color: #ef5b65;
  font-size: 9px;
  font-weight: 900;
}

.form-hint.success,
.text-success {
  color: #28b986 !important;
}

.text-danger {
  color: #ef5b65 !important;
}

.native-stat-list {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.native-stat-card {
  display: grid;
  grid-template-columns: 52px 1fr;
  align-items: center;
  gap: 10px;
  min-height: 74px;
  padding: 10px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 14px 28px rgba(60, 151, 198, .13);
}

.native-stat-icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: var(--blue);
  background: #e4f9ff;
}

.native-stat-icon.mint {
  color: #28b986;
  background: #e9fbf5;
}

.native-stat-icon.danger {
  color: #ef5b65;
  background: #fff0f3;
}

.native-stat-card small,
.native-stat-card p {
  display: block;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.35;
  font-weight: 800;
}

.native-stat-card strong {
  display: block;
  margin: 2px 0;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.25;
  font-weight: 900;
}

.chart-shell {
  position: relative;
  height: 178px;
}

.table-card {
  padding: 0;
  overflow: hidden;
}

.table-card .native-card-head {
  padding: 14px 14px 0;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 21px;
  border-radius: 99px;
  padding: 3px 8px;
  color: var(--blue);
  background: #e4f9ff;
  font-size: 9px;
  font-weight: 900;
  white-space: nowrap;
}

.status-pill.success {
  color: #28b986;
  background: #e9fbf5;
}

.status-pill.danger {
  color: #ef5b65;
  background: #fff0f3;
}

.status-pill.warning {
  color: #c47b25;
  background: #fff4e4;
}

.table-empty {
  color: var(--muted) !important;
  text-align: center !important;
}

.mini-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 9px;
}

.mini-stat-grid div {
  min-height: 67px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 10px;
  border-radius: 13px;
  background: #f4fcff;
}

.mini-stat-grid strong {
  color: var(--ink);
  font-size: 18px;
  line-height: 1;
  font-weight: 900;
}

.mini-stat-grid span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
}

.faq-list,
.native-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq-card {
  padding: 14px;
  border-radius: 17px;
  background: #fff;
  box-shadow: 0 14px 28px rgba(60, 151, 198, .13);
}

.faq-title {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 10px;
}

.faq-title span {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--mint));
}

.faq-title h2 {
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
}

.faq-item {
  padding: 10px 0;
  border-top: 1px solid #eefaff;
}

.faq-item h3 {
  color: #416582;
  font-size: 11px;
  line-height: 1.45;
  font-weight: 900;
}

.faq-item p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.55;
  font-weight: 600;
}

.logo-field {
  display: grid;
  grid-template-columns: 68px 1fr;
  align-items: center;
  gap: 11px;
}

.logo-preview {
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 17px;
  color: var(--blue);
  background: #e4f9ff;
}

.logo-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.settings-toggle {
  display: grid;
  grid-template-columns: 1fr 48px;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 14px;
  background: #f4fcff;
}

.settings-toggle strong,
.notice-card strong {
  display: block;
  color: var(--ink);
  font-size: 11px;
  font-weight: 900;
}

.settings-toggle small,
.notice-card small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.35;
  font-weight: 700;
}

.settings-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.settings-toggle i {
  position: relative;
  width: 48px;
  height: 27px;
  border-radius: 99px;
  background: #d7eef5;
}

.settings-toggle i:after {
  content: "";
  position: absolute;
  width: 21px;
  height: 21px;
  left: 3px;
  top: 3px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 4px 10px rgba(39, 64, 92, .13);
  transition: transform .18s ease;
}

.settings-toggle input:checked + i {
  background: linear-gradient(135deg, var(--blue), var(--mint));
}

.settings-toggle input:checked + i:after {
  transform: translateX(21px);
}

.notice-card {
  display: grid;
  grid-template-columns: 36px 1fr;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border-radius: 15px;
  background: #f4fcff;
  box-shadow: 0 12px 24px rgba(60, 151, 198, .1);
}

.notice-card > span {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--cyan));
}

.notice-card.success > span {
  background: linear-gradient(135deg, var(--mint), var(--cyan));
}

.info-list {
  display: flex;
  flex-direction: column;
}

.info-list div,
.holder-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid #eefaff;
}

.info-list span,
.holder-item span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}

.info-list strong,
.holder-item strong {
  color: var(--ink);
  font-size: 11px;
  font-weight: 900;
  text-align: right;
}

.danger-card {
  background: #fff7f8;
}

.danger-card p {
  color: #a46b73;
  font-size: 10px;
  line-height: 1.5;
  font-weight: 700;
}

.position-card form {
  display: flex;
}

.pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.invite-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: 14px;
  background: #f4fcff;
}

.holder-list {
  display: flex;
  flex-direction: column;
}

.holder-list h3 {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
}

.holder-item form {
  flex-shrink: 0;
}

.empty-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 28px 14px;
  border-radius: 17px;
  background: #fff;
  box-shadow: 0 14px 28px rgba(60, 151, 198, .13);
  text-align: center;
}

.empty-card strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
}

.empty-card span {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.5;
  font-weight: 700;
}

.collapsible-card,
.qr-panel,
.checkout-breakdown,
.checkout-pay-actions,
.borrow-form {
  display: none;
}

.collapsible-card.open,
.qr-panel.open,
.checkout-breakdown.open,
.checkout-pay-actions.open,
.borrow-form.open {
  display: flex;
}

.event-card.selesai {
  border-left: 4px solid var(--mint);
}

.event-card.berlangsung {
  border-left: 4px solid #f7a65b;
}

.event-card.upcoming {
  border-left: 4px solid var(--blue);
}

.event-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.event-meta span {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}

.qr-panel {
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding-top: 12px;
  border-top: 1px solid #eefaff;
}

.qr-panel img {
  width: 150px;
  height: 150px;
  border-radius: 14px;
}

.qr-panel p {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.4;
  text-align: center;
}

.hierarchy-card {
  overflow: hidden;
}

.tree-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding-left: 0;
}

.tree-list .tree-list {
  margin-top: 9px;
  padding-left: 14px;
  border-left: 1px solid #dff6fd;
}

.tree-node-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 46px;
  padding: 10px;
  border-radius: 14px;
  background: #f4fcff;
  box-shadow: none;
}

.tree-node-content.root {
  background: linear-gradient(135deg, rgba(34,148,242,.12), rgba(86,217,151,.13));
}

.node-name {
  color: var(--ink);
  font-size: 11px;
  font-weight: 900;
}

.tree-level-badge {
  flex-shrink: 0;
  border-radius: 99px;
  padding: 4px 8px;
  color: var(--blue);
  background: #e4f9ff;
  font-size: 8px;
  font-weight: 900;
}

.catalog-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.catalog-category-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.catalog-category-header h2 {
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
}

.catalog-category-header small {
  margin-left: auto;
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
}

.catalog-grid {
  grid-template-columns: repeat(2, 1fr) !important;
}

.item-card {
  min-height: 214px;
  padding: 10px;
}

.item-media,
.item-icon {
  width: 100%;
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  overflow: hidden;
  margin-bottom: 9px;
  border-radius: 12px;
  color: var(--blue);
  background: #f4fcff;
}

.item-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8px;
}

.item-name {
  color: var(--ink);
  font-size: 11px;
  line-height: 1.25;
  font-weight: 900;
}

.item-desc {
  min-height: 28px;
  margin-top: 4px;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.45;
  font-weight: 600;
}

.item-price-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 8px 0;
}

.item-price {
  color: var(--blue);
  font-size: 12px;
  font-weight: 900;
}

.checkout-item-preview {
  display: grid;
  grid-template-columns: 46px 1fr;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 14px;
  background: #f4fcff;
}

.checkout-item-preview > span {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--mint));
}

.checkout-item-preview p:first-child {
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
}

.checkout-item-preview p:last-child {
  color: var(--blue);
  font-size: 10px;
  font-weight: 900;
}

.checkout-breakdown {
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: 14px;
  background: #f4fcff;
}

.checkout-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}

.checkout-row strong {
  color: var(--ink);
  text-align: right;
}

.checkout-row.total {
  padding-top: 8px;
  border-top: 1px solid #dff6fd;
  color: var(--ink);
  font-size: 12px;
}

.checkout-pay-actions,
.checkout-actions {
  flex-direction: column;
}

.toast,
.kta-toast {
  position: fixed;
  left: 50%;
  bottom: 92px;
  z-index: 1300;
  width: min(calc(100% - 36px), 328px);
  transform: translate(-50%, 18px);
  opacity: 0;
  pointer-events: none;
  border-radius: 15px;
  padding: 12px 14px;
  color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--mint));
  box-shadow: 0 18px 42px rgba(24, 117, 168, .22);
  font-size: 11px;
  font-weight: 900;
  transition: opacity .18s ease, transform .18s ease;
}

.toast.show,
.kta-toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

.toast.error,
.kta-toast.error {
  background: #ef5b65;
}

.modal-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}

.modal-title span {
  color: var(--ink);
  font-size: 14px;
  font-weight: 900;
}

.modal-close {
  min-height: 30px;
  border-radius: 99px;
  padding: 7px 10px;
  color: var(--blue);
  background: #e4f9ff;
  font-size: 10px;
  font-weight: 900;
}

.table-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.table-actions form {
  display: inline-flex;
}

.table-note {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.35;
  font-weight: 700;
}

.search-bar span {
  align-self: center;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}

.borrow-form {
  margin-top: 8px;
}

.simple-list {
  display: flex;
  flex-direction: column;
}

.simple-list div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid #eefaff;
}

.simple-list span,
.simple-list strong {
  font-size: 10px;
  font-weight: 800;
}

.simple-list span {
  color: var(--ink);
}

.simple-list small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.35;
  font-weight: 700;
}

.simple-list strong {
  color: var(--blue);
  text-align: right;
}

.progress-list {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.progress-list div {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 5px 10px;
  align-items: center;
}

.progress-list span {
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 10px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.progress-list strong {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
}

.progress-list progress {
  grid-column: 1 / -1;
  width: 100%;
  height: 8px;
  overflow: hidden;
  border: 0;
  border-radius: 99px;
  background: #e8f8fd;
}

.progress-list progress::-webkit-progress-bar {
  background: #e8f8fd;
}

.progress-list progress::-webkit-progress-value {
  border-radius: 99px;
  background: linear-gradient(90deg, var(--cyan), var(--blue));
}

.progress-list progress::-moz-progress-bar {
  border-radius: 99px;
  background: linear-gradient(90deg, var(--cyan), var(--blue));
}

.empty-text {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.5;
  font-weight: 700;
}

.print-shell {
  overflow: hidden;
  border-radius: 17px;
  padding: 14px;
  color: #111827;
  background: #fff;
  box-shadow: 0 14px 28px rgba(60, 151, 198, .13);
}

/* Shared app components */
.page-header,
.an-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 18px;
  margin: 6px 0 15px;
}

.page-header .page-title,
.title,
.an-head h1 {
  color: var(--ink);
  font-size: 20px;
  line-height: 1.18;
  font-weight: 900;
  letter-spacing: 0;
  background: none;
  -webkit-text-fill-color: currentColor;
}

.page-desc,
.an-head p {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.glass-panel,
.an-panel,
.an-stat,
.stat-card,
.data-table-wrapper,
.item-card,
.product-card,
.tree-node-content {
  border: 0;
  border-radius: 17px;
  background: #fff;
  box-shadow: 0 14px 28px rgba(60, 151, 198, .13);
}

.glass-panel,
.an-panel,
.an-stat,
.stat-card {
  padding: 14px;
}

.an-grid,
.stat-grid,
.events-grid,
.products-grid,
.an-modules,
.an-row,
.an-2,
.an-3 {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
  margin-bottom: 14px;
}

.an-stat .ic,
.quick-icon,
.activity-icon {
  background: #e4f9ff !important;
  color: var(--blue) !important;
}

.an-stat .v,
.stat-card .stat-value {
  color: var(--ink);
  font-size: 18px;
  font-weight: 900;
}

.an-stat .l,
.stat-card .stat-label {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

.an-bars {
  height: 140px;
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.an-bar {
  min-width: 0;
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
}

.an-bar .bar {
  width: 100%;
  max-width: 30px;
  min-height: 4px;
  border-radius: 99px 99px 0 0;
  background: linear-gradient(180deg, var(--cyan), var(--blue));
}

.an-bar .val {
  color: var(--ink);
  font-size: 9px;
  font-weight: 900;
}

.an-bar .cap {
  color: var(--muted);
  font-size: 8px;
  white-space: nowrap;
}

.an-list {
  display: flex;
  flex-direction: column;
}

.an-list .it {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid #eefaff;
  color: var(--ink);
  font-size: 10px;
  font-weight: 800;
}

.an-hbar + .an-hbar {
  margin-top: 12px;
}

.an-hbar .top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
  color: #5c819b;
  font-size: 10px;
  font-weight: 800;
}

.an-hbar .track {
  height: 8px;
  overflow: hidden;
  border-radius: 99px;
  background: #e8f8fd;
}

.an-hbar .fill {
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--cyan), var(--blue));
}

.an-mod {
  display: block;
  padding: 14px;
  border-radius: 17px;
  background: #fff;
  box-shadow: 0 14px 28px rgba(60, 151, 198, .13);
}

.an-mod .t {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 5px;
  color: var(--ink);
  font-size: 11px;
  font-weight: 900;
}

.an-mod .d {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.55;
}

.an-soon {
  padding: 2px 8px;
  border-radius: 99px;
  color: #c47b25;
  background: #fff4e4;
  font-size: 8px;
  font-weight: 900;
}

.btn-primary,
.btn-secondary,
.btn-outline-primary,
.btn-success,
.btn-danger,
.action-btn,
.order-btn {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 99px !important;
  padding: 9px 14px !important;
  font-size: 11px !important;
  font-weight: 900 !important;
}

.btn-primary,
.btn-success {
  color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--mint));
  box-shadow: 0 12px 22px rgba(34, 148, 242, .2);
}

.btn-secondary,
.btn-outline-primary,
.action-btn,
.order-btn {
  color: var(--blue) !important;
  background: #e4f9ff !important;
}

.btn-danger,
.action-btn.delete {
  color: #fff !important;
  background: #ef5b65 !important;
}

.badge,
.an-tag,
.cat-badge,
.item-split {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 21px;
  border-radius: 99px;
  padding: 3px 8px;
  color: var(--blue) !important;
  background: #e4f9ff !important;
  font-size: 9px;
  font-weight: 900;
}

.form-input,
input[type=text],
input[type=email],
input[type=password],
input[type=date],
input[type=number],
input[type=tel],
select,
textarea {
  width: 100%;
  min-height: 39px;
  border: 0;
  border-radius: 13px;
  padding: 9px 12px;
  color: var(--ink);
  background: #f4fcff;
  outline: none;
  font-size: 11px;
}

label,
.form-label {
  color: #5c819b;
  font-size: 10px;
  font-weight: 900;
}

.data-table-wrapper {
  overflow-x: auto;
  scrollbar-width: none;
}

.data-table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
}

.data-table th,
.data-table td {
  padding: 10px;
  border-bottom: 1px solid #eefaff;
  color: var(--ink);
  font-size: 10px;
  text-align: left;
}

.modal-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1200 !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  padding: 12px !important;
  background: rgba(24, 117, 168, .28) !important;
  backdrop-filter: blur(5px) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity .2s ease !important;
}

.modal-overlay.open {
  opacity: 1 !important;
  pointer-events: auto !important;
}

.modal-box {
  width: 100% !important;
  max-width: 370px !important;
  max-height: 86dvh !important;
  overflow-y: auto !important;
  border-radius: 27px 27px 18px 18px !important;
  padding: 18px !important;
  color: var(--ink) !important;
  background: #fff !important;
  box-shadow: 0 -20px 44px rgba(24, 117, 168, .22) !important;
  transform: translateY(18px) !important;
  transition: transform .2s ease !important;
}

.modal-overlay.open .modal-box {
  transform: translateY(0) !important;
}

.main-content,
.main-content * {
  max-width: 100%;
}

.main-content [style*="grid-template-columns"],
.main-content [style*="minmax("] {
  grid-template-columns: 1fr !important;
}

.main-content [style*="display:flex"],
.main-content [style*="display: flex"] {
  flex-wrap: wrap !important;
  min-width: 0 !important;
}

.item-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
}

.search-bar {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
}

.search-input {
  flex: 1 1 100%;
}

@media (min-width: 769px) {
  .main-content {
    min-height: 680px;
    max-height: 680px;
    margin: 76px 0;
    border-radius: 27px;
  }

  .native-bottom-nav {
    bottom: 98px;
  }

  .native-home-indicator {
    bottom: 84px;
  }
}

.dashboard-search,
.quick-create,
.topbar-user,
.sidebar-promo {
  display: none;
}

.sidebar-help {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  color: #6b8ca5;
  background: #f1fbfe;
  font-size: 12px;
  font-weight: 800;
}

.sidebar-help span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.dashboard-top-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dashboard-footer {
  display: none;
}

@media (min-width: 1024px) {
  :root {
    --dash-bg: #fbfcff;
    --dash-surface: #ffffff;
    --dash-ink: #121632;
    --dash-muted: #68708f;
    --dash-line: #e4e8f2;
    --dash-purple: #6652f1;
    --dash-blue: #2f7bf0;
    --dash-green: #19a860;
    --dash-orange: #ff9f1c;
    --dash-red: #f04438;
  }

  .dashboard-shell.layout-sidebar {
    justify-content: flex-start;
    background: var(--dash-bg);
  }

  .dashboard-shell:before,
  .dashboard-shell:after,
  .dashboard-shell .native-statusbar,
  .dashboard-shell .native-bottom-nav,
  .dashboard-shell .native-home-indicator,
  .dashboard-shell .nav-overlay,
  .dashboard-shell .nav-toggle,
  .dashboard-shell .native-app-name {
    display: none;
  }

  .dashboard-shell .sidebar {
    position: sticky;
    top: 0;
    inset: auto;
    z-index: 90;
    width: 292px;
    height: 100dvh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    transform: none;
    padding: 26px 14px 20px;
    border-right: 1px solid var(--dash-line);
    background: #fff;
    box-shadow: none;
  }

  .dashboard-shell .sidebar-brand {
    margin: 0 12px 30px;
  }

  .dashboard-shell .sidebar-brand-row {
    gap: 12px;
  }

  .dashboard-shell .sidebar-logo {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    color: var(--dash-purple);
    background: transparent;
  }

  .dashboard-shell .sidebar-logo img {
    width: 42px;
    height: 42px;
    object-fit: contain;
  }

  .dashboard-shell .sidebar-brand-text strong {
    color: #241a7a;
    font-size: 21px;
    font-weight: 800;
    letter-spacing: 0;
  }

  .dashboard-shell .sidebar-nav {
    gap: 8px;
  }

  .dashboard-shell .sidebar-link,
  .dashboard-shell .sidebar-link-danger {
    min-height: 52px;
    gap: 18px;
    padding: 0 21px;
    border-radius: 8px;
    color: #1b2140;
    background: transparent;
    font-size: 14px;
    font-weight: 700;
    transition: color .16s ease, background .16s ease, box-shadow .16s ease;
  }

  .dashboard-shell .sidebar-link svg {
    width: 23px;
    height: 23px;
    color: #66708f;
  }

  .dashboard-shell .sidebar-link:hover {
    color: var(--dash-purple);
    background: #f7f4ff;
  }

  .dashboard-shell .sidebar-link.active {
    color: var(--dash-purple);
    background: linear-gradient(90deg, rgba(102, 82, 241, .16), rgba(102, 82, 241, .06));
    box-shadow: inset 3px 0 0 var(--dash-purple);
  }

  .dashboard-shell .sidebar-link.active svg {
    color: var(--dash-purple);
  }

  .sidebar-spacer {
    flex: 1;
    min-height: 22px;
  }

  .sidebar-promo {
    display: block;
    margin: 14px 18px 18px;
    padding: 18px 18px 18px;
    overflow: hidden;
    border-radius: 8px;
    color: #fff;
    background:
      radial-gradient(circle at 95% 15%, rgba(255,255,255,.25) 0 32%, transparent 33%),
      linear-gradient(135deg, #3b4ef2 0%, #8754f4 100%);
    box-shadow: 0 18px 38px rgba(85, 72, 226, .22);
  }

  .sidebar-promo-icon {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    margin-bottom: 12px;
    color: #ffcf56;
  }

  .sidebar-promo h2 {
    max-width: 190px;
    color: #fff;
    font-size: 17px;
    line-height: 1.25;
    font-weight: 800;
  }

  .sidebar-promo p {
    max-width: 180px;
    margin-top: 10px;
    color: rgba(255,255,255,.82);
    font-size: 12px;
    line-height: 1.65;
  }

  .sidebar-promo a {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 15px;
    border-radius: 12px;
    color: var(--dash-purple);
    background: #fff;
    font-size: 12px;
    font-weight: 800;
    box-shadow: 0 10px 18px rgba(35, 27, 132, .16);
  }

  .sidebar-help {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 0;
    padding: 0 20px;
    border-top: 1px solid var(--dash-line);
    color: #1b2140;
    font-size: 14px;
    font-weight: 700;
  }

  .sidebar-help span {
    display: inline-flex;
    align-items: center;
    gap: 18px;
  }

  .sidebar-help svg {
    color: #66708f;
  }

  .dashboard-shell .main-content {
    width: calc(100% - 292px);
    max-width: none;
    min-height: 100dvh;
    max-height: none;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    border-radius: 0;
    background: var(--dash-bg);
    box-shadow: none;
  }

  .dashboard-shell .main-content,
  .dashboard-shell .main-content * {
    max-width: none;
  }

  .dashboard-shell .native-appbar.dashboard-topbar {
    position: sticky;
    top: 0;
    z-index: 80;
    min-height: 88px;
    display: grid;
    grid-template-columns: minmax(320px, 1fr) auto;
    gap: 28px;
    align-items: center;
    padding: 0 38px;
    border-bottom: 1px solid var(--dash-line);
    background: rgba(255,255,255,.94);
    backdrop-filter: blur(16px);
  }

  .dashboard-search {
    height: 50px;
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: 610px;
    padding: 0 14px 0 18px;
    border: 1px solid #dbe1ed;
    border-radius: 8px;
    color: #8a92aa;
    background: #fff;
    box-shadow: 0 8px 18px rgba(22, 30, 56, .03);
  }

  .dashboard-search input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    color: var(--dash-ink);
    background: transparent;
    font-size: 14px;
    font-weight: 500;
  }

  .dashboard-search input::placeholder {
    color: #858ca5;
  }

  .dashboard-search kbd {
    min-width: 42px;
    height: 30px;
    display: grid;
    place-items: center;
    border: 1px solid #dbe1ed;
    border-radius: 7px;
    color: #4b526c;
    background: #fbfcff;
    font-size: 13px;
    font-weight: 700;
  }

  .dashboard-top-actions {
    justify-content: flex-end;
    gap: 20px;
  }

  .dashboard-top-actions .notif-wrap,
  .dashboard-top-actions .notif-btn {
    width: 42px;
    height: 42px;
  }

  .dashboard-top-actions .notif-btn {
    color: #202844;
    background: transparent;
  }

  .dashboard-top-actions .notif-btn svg {
    width: 23px;
    height: 23px;
  }

  .dashboard-top-actions .notif-badge {
    top: -2px;
    right: -2px;
    min-width: 18px;
    height: 18px;
    border: 2px solid #fff;
    font-size: 10px;
  }

  .dashboard-top-actions .notif-panel {
    top: 50px;
    width: 350px;
    border: 1px solid var(--dash-line);
    border-radius: 12px;
    box-shadow: 0 22px 60px rgba(18, 22, 50, .16);
  }

  .quick-create {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 0 18px;
    border-radius: 8px;
    color: #fff;
    background: linear-gradient(135deg, #4d43ef 0%, #6652f1 100%);
    font-size: 14px;
    font-weight: 800;
    box-shadow: 0 14px 24px rgba(82, 69, 232, .24);
  }

  .topbar-user {
    min-width: 206px;
    min-height: 50px;
    display: flex;
    align-items: center;
    gap: 13px;
    padding-left: 18px;
    border-left: 1px solid var(--dash-line);
    color: var(--dash-ink);
  }

  .topbar-avatar {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background:
      linear-gradient(135deg, rgba(9, 16, 38, .1), rgba(9, 16, 38, .2)),
      linear-gradient(135deg, #17315e, #d4a15f);
    font-size: 13px;
    font-weight: 900;
  }

  .topbar-user-copy {
    min-width: 0;
    display: grid;
    gap: 3px;
  }

  .topbar-user-copy strong,
  .topbar-user-copy small {
    max-width: 122px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .topbar-user-copy strong {
    color: var(--dash-ink);
    font-size: 13px;
    font-weight: 800;
  }

  .topbar-user-copy small {
    color: var(--dash-muted);
    font-size: 12px;
    font-weight: 600;
  }

  .desktop-dashboard {
    padding: 30px 30px 28px;
    color: var(--dash-ink);
  }

  .dashboard-hero-row {
    display: grid;
    grid-template-columns: minmax(320px, 1fr) minmax(360px, 520px);
    gap: 28px;
    align-items: center;
    margin-bottom: 30px;
  }

  .dashboard-hero-row h1 {
    color: var(--dash-ink);
    font-size: 26px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: 0;
  }

  .dashboard-hero-row p {
    margin-top: 10px;
    color: var(--dash-muted);
    font-size: 15px;
    font-weight: 500;
  }

  .organization-card {
    min-height: 78px;
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto 22px;
    gap: 15px;
    align-items: center;
    justify-self: end;
    width: 100%;
    padding: 8px 0 8px 8px;
    color: var(--dash-ink);
  }

  .organization-logo {
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid #dbe1ed;
    border-radius: 50%;
    background: #0d2452;
    box-shadow: 0 16px 26px rgba(17, 26, 58, .12);
  }

  .organization-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .organization-copy {
    min-width: 0;
    display: grid;
    gap: 5px;
  }

  .organization-copy strong {
    overflow: hidden;
    color: var(--dash-ink);
    font-size: 17px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .organization-copy small {
    overflow: hidden;
    color: #29304b;
    font-size: 15px;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .status-active {
    min-height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    border-radius: 999px;
    color: #118a43;
    background: #dbf7e5;
    font-size: 12px;
    font-weight: 800;
  }

  .summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 18px;
  }

  .summary-card,
  .dash-card {
    border: 1px solid #dde3ef;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 12px 34px rgba(18, 22, 50, .045);
  }

  .summary-card {
    min-height: 120px;
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 18px;
    align-items: center;
    padding: 22px 18px;
    transition: transform .16s ease, box-shadow .16s ease;
  }

  .summary-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 42px rgba(18, 22, 50, .09);
  }

  .summary-icon {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: #fff;
  }

  .summary-icon.purple { background: linear-gradient(135deg, #7454f8, #8c52ff); }
  .summary-icon.blue { background: linear-gradient(135deg, #2f7bf0, #48a2ff); }
  .summary-icon.green { background: linear-gradient(135deg, #18a85c, #22bb79); }
  .summary-icon.orange { background: linear-gradient(135deg, #ff9f1c, #ffb43d); }

  .summary-card span:last-child {
    min-width: 0;
    display: grid;
    gap: 5px;
  }

  .summary-card small {
    color: #4e5872;
    font-size: 12px;
    font-weight: 600;
  }

  .summary-card strong {
    overflow: hidden;
    color: var(--dash-ink);
    font-size: 24px;
    line-height: 1.1;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .summary-card em {
    min-height: 18px;
    overflow: hidden;
    color: #67708b;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .summary-card .metric-up {
    color: #07994f;
  }

  .summary-card .metric-link {
    color: var(--dash-blue);
  }

  .dashboard-main-grid {
    display: grid;
    grid-template-columns: minmax(420px, 1.25fr) minmax(280px, .9fr) minmax(330px, 1fr);
    gap: 16px;
    align-items: stretch;
    margin-bottom: 18px;
  }

  .dashboard-bottom-grid {
    display: grid;
    grid-template-columns: minmax(350px, 1fr) minmax(350px, 1.22fr) minmax(300px, 1.05fr);
    gap: 16px;
    align-items: stretch;
  }

  .dash-card {
    min-height: 100%;
    padding: 20px;
  }

  .dash-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
  }

  .dash-card-head.compact {
    margin-bottom: 14px;
  }

  .dash-card-head h2 {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--dash-ink);
    font-size: 16px;
    line-height: 1.3;
    font-weight: 800;
  }

  .dash-card-head > span {
    min-height: 31px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
    border: 1px solid #dce2ed;
    border-radius: 7px;
    color: #29304b;
    background: #fff;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
  }

  .growth-chart {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 8px;
    align-items: stretch;
  }

  .growth-axis {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 12px 0 33px;
    color: #4e5872;
    font-size: 12px;
    font-weight: 600;
  }

  .growth-chart svg {
    width: 100%;
    height: 174px;
    overflow: visible;
  }

  .chart-grid {
    fill: none;
    stroke: #e8edf5;
    stroke-dasharray: 3 5;
    stroke-width: 1;
  }

  .chart-area {
    fill: url("#chartFill");
    fill: rgba(116, 84, 248, .11);
  }

  .chart-line {
    fill: none;
    stroke: #7454f8;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 4;
  }

  .chart-dot {
    fill: #7454f8;
    stroke: #fff;
    stroke-width: 3;
  }

  .growth-months {
    grid-column: 2;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 4px;
    margin-top: -18px;
    color: #39425e;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
  }

  .growth-summary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 10px;
    padding: 11px 16px;
    border: 1px solid #e1e6f0;
    border-radius: 8px;
    background: #fbfcff;
  }

  .growth-summary span {
    color: #66708f;
    font-size: 12px;
    font-weight: 600;
  }

  .growth-summary strong {
    display: block;
    margin-top: 5px;
    color: var(--dash-blue);
    font-size: 13px;
    font-weight: 800;
  }

  .growth-summary span:first-child strong {
    color: #09a057;
  }

  .kta-status-layout {
    display: grid;
    grid-template-columns: 158px minmax(0, 1fr);
    gap: 18px;
    align-items: center;
    min-height: 202px;
  }

  .donut-chart {
    width: 158px;
    height: 158px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.02), 0 16px 30px rgba(116,84,248,.14);
  }

  .donut-chart span {
    width: 78px;
    height: 78px;
    display: grid;
    place-items: center;
    align-content: center;
    border-radius: 50%;
    background: #fff;
  }

  .donut-chart strong {
    color: var(--dash-ink);
    font-size: 20px;
    font-weight: 800;
  }

  .donut-chart small {
    color: #66708f;
    font-size: 12px;
    font-weight: 600;
  }

  .kta-legend {
    display: grid;
    gap: 16px;
  }

  .kta-legend div {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr);
    column-gap: 10px;
    row-gap: 3px;
    align-items: center;
  }

  .kta-legend i {
    width: 10px;
    height: 10px;
    grid-row: span 2;
    border-radius: 50%;
  }

  .kta-legend i.purple { background: #7454f8; }
  .kta-legend i.blue { background: #2f7bf0; }
  .kta-legend i.orange { background: #ff9f1c; }
  .kta-legend i.green { background: #51bd63; }

  .kta-legend span {
    color: #29304b;
    font-size: 12px;
    font-weight: 800;
  }

  .kta-legend strong {
    color: var(--dash-ink);
    font-size: 12px;
    font-weight: 600;
  }

  .approval-pill {
    border: 0 !important;
    color: #f04438 !important;
    background: #fff0ef !important;
  }

  .approval-pill b {
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: #f04438;
    font-size: 11px;
  }

  .pending-list,
  .event-list,
  .activity-list {
    display: grid;
  }

  .pending-item {
    min-height: 56px;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 72px 58px;
    gap: 12px;
    align-items: center;
    border-bottom: 1px solid #eef2f7;
  }

  .pending-card {
    padding-inline: 16px;
  }

  .pending-card .dash-card-head {
    gap: 8px;
  }

  .pending-card .dash-card-head h2 {
    font-size: 14px;
  }

  .pending-card .approval-pill {
    padding-inline: 8px;
    font-size: 10px;
  }

  .member-avatar {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(135deg, #66708f, #1b2140);
    font-size: 13px;
    font-weight: 900;
  }

  .member-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .pending-copy {
    min-width: 0;
    display: grid;
    gap: 4px;
  }

  .pending-copy strong,
  .pending-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .pending-copy strong {
    color: var(--dash-ink);
    font-size: 13px;
    font-weight: 800;
  }

  .pending-copy small,
  .pending-item time {
    color: #68708f;
    font-size: 12px;
    font-weight: 500;
  }

  .pending-item a {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(102,82,241,.32);
    border-radius: 7px;
    color: var(--dash-purple);
    font-size: 12px;
    font-weight: 800;
  }

  .card-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 16px;
    color: var(--dash-purple);
    font-size: 12px;
    font-weight: 800;
  }

  .event-item {
    min-height: 74px;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
  }

  .event-date {
    width: 48px;
    height: 54px;
    display: grid;
    place-items: center;
    align-content: center;
    border: 1px solid #e0e6f0;
    border-radius: 8px;
    background: #fbfcff;
  }

  .event-date strong {
    color: var(--dash-purple);
    font-size: 21px;
    line-height: 1;
    font-weight: 800;
  }

  .event-date small {
    margin-top: 5px;
    color: var(--dash-purple);
    font-size: 11px;
    font-weight: 800;
  }

  .event-copy {
    min-width: 0;
    display: grid;
    gap: 4px;
  }

  .event-copy strong,
  .activity-item strong {
    overflow: hidden;
    color: var(--dash-ink);
    font-size: 12px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .event-copy small,
  .activity-item small {
    overflow: hidden;
    color: #68708f;
    font-size: 11px;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .event-item em {
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
    border-radius: 999px;
    color: var(--dash-blue);
    background: #edf4ff;
    font-size: 11px;
    font-style: normal;
    font-weight: 800;
  }

  .activity-list {
    gap: 16px;
  }

  .activity-item {
    min-height: 44px;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
  }

  .activity-item span:last-child {
    min-width: 0;
    display: grid;
    gap: 5px;
  }

  .activity-icon {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 50%;
  }

  .activity-icon.success { color: #0d9d55; background: #e8f8ef; }
  .activity-icon.info { color: #2f7bf0; background: #eef5ff; }
  .activity-icon.warning { color: #f28c00; background: #fff6e8; }
  .activity-icon.danger { color: #f04438; background: #fff0ef; }

  .feature-panel {
    min-height: 236px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 160px;
    gap: 18px;
    align-items: center;
    overflow: hidden;
    padding: 28px 30px;
    border-radius: 8px;
    background:
      radial-gradient(circle at 88% 20%, rgba(102,82,241,.18), transparent 26%),
      linear-gradient(135deg, #fbfaff 0%, #edf1ff 100%);
  }

  .feature-panel h2 {
    max-width: 260px;
    color: var(--dash-purple);
    font-size: 20px;
    line-height: 1.45;
    font-weight: 800;
  }

  .feature-panel p {
    max-width: 300px;
    margin-top: 18px;
    color: #4e5872;
    font-size: 12px;
    line-height: 1.75;
    font-weight: 500;
  }

  .feature-panel a {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
    padding: 0 22px;
    border-radius: 7px;
    color: #fff;
    background: linear-gradient(135deg, #7454f8, #8b52f0);
    font-size: 12px;
    font-weight: 800;
    box-shadow: 0 14px 24px rgba(102, 82, 241, .22);
  }

  .feature-panel img {
    width: 170px;
    max-height: 160px;
    object-fit: contain;
    justify-self: end;
  }

  .empty-state {
    min-height: 90px;
    display: grid;
    place-items: center;
    color: #68708f;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
  }

  .dashboard-footer {
    min-height: 54px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 6px 30px 0;
    padding: 0 0 20px;
    color: #858ca5;
    font-size: 12px;
    font-weight: 600;
  }

  .dashboard-shell .alert {
    margin: 22px 30px 0;
    border-radius: 8px;
  }
}

@media (min-width: 1024px) and (max-width: 1320px) {
  .dashboard-shell .sidebar {
    width: 264px;
  }

  .dashboard-shell .main-content {
    width: calc(100% - 264px);
  }

  .dashboard-shell .native-appbar.dashboard-topbar {
    padding: 0 24px;
    gap: 18px;
  }

  .desktop-dashboard {
    padding: 24px;
  }

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

  .dashboard-main-grid,
  .dashboard-bottom-grid {
    grid-template-columns: 1fr 1fr;
  }

  .pending-card,
  .feature-panel {
    grid-column: span 2;
  }
}

@media (min-width: 1024px) and (max-width: 1160px) {
  .quick-create span,
  .topbar-user-copy {
    display: none;
  }

  .topbar-user {
    min-width: auto;
  }

  .dashboard-hero-row {
    grid-template-columns: 1fr;
  }

  .organization-card {
    justify-self: stretch;
  }
}

@media (max-width: 1023px) {
  .dashboard-top-actions .quick-create,
  .dashboard-top-actions .topbar-user {
    display: none;
  }

  .dashboard-top-actions .notif-wrap {
    width: 30px;
    height: 30px;
  }
}

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

.positions-console {
  --pos-ink: #111633;
  --pos-muted: #68708f;
  --pos-line: #dde3ef;
  --pos-purple: #6652f1;
  --pos-blue: #2f7bf0;
  --pos-green: #18a85c;
  --pos-orange: #ff9f1c;
  --pos-red: #f04438;
  display: grid;
  gap: 16px;
  padding: 14px 14px 96px;
  color: var(--pos-ink);
}

.positions-head,
.position-card-head,
.position-row-top,
.positions-actions,
.position-holder-head,
.position-invite-box div,
.position-holder-item,
.position-delete-form button {
  display: flex;
  align-items: center;
}

.positions-head {
  justify-content: space-between;
  gap: 16px;
}

.positions-eyebrow {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  margin-bottom: 7px;
  padding: 0 9px;
  border-radius: 999px;
  color: var(--pos-purple);
  background: rgba(102, 82, 241, .09);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.positions-head h1 {
  margin: 0;
  color: var(--pos-ink);
  font-size: 24px;
  line-height: 1.16;
  font-weight: 900;
}

.positions-head p,
.position-card-head p {
  margin: 6px 0 0;
  color: var(--pos-muted);
  font-size: 12px;
  line-height: 1.55;
  font-weight: 650;
}

.positions-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.position-primary-btn,
.position-ghost-btn,
.position-form button,
.position-invite-box button,
.position-invite-box a,
.position-empty-state a,
.position-featured-card a {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 850;
}

.position-primary-btn,
.position-form button {
  border: 0;
  color: #fff;
  background: linear-gradient(135deg, #4d43ef, #6652f1);
  box-shadow: 0 12px 24px rgba(82, 69, 232, .22);
}

.position-ghost-btn,
.position-invite-box button,
.position-invite-box a {
  border: 1px solid var(--pos-line);
  color: #26304d;
  background: #fff;
}

.position-stat-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.position-stat-card,
.position-card {
  border: 1px solid var(--pos-line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 34px rgba(18, 22, 50, .045);
}

.position-stat-card {
  min-height: 104px;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 16px;
}

.position-stat-icon,
.position-role-icon {
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: #fff;
}

.position-stat-icon {
  width: 52px;
  height: 52px;
}

.position-stat-icon.purple,
.position-role-icon.purple { background: linear-gradient(135deg, #7454f8, #8c52ff); }
.position-stat-icon.blue,
.position-role-icon.blue { background: linear-gradient(135deg, #2f7bf0, #48a2ff); }
.position-stat-icon.green { background: linear-gradient(135deg, #18a85c, #22bb79); }
.position-stat-icon.orange { background: linear-gradient(135deg, #ff9f1c, #ffb43d); }

.position-stat-card div,
.position-row-copy,
.position-holder-item div {
  min-width: 0;
}

.position-stat-card small,
.position-stat-card em,
.position-row-copy p,
.position-holder-item small,
.position-invite-box label,
.position-summary-list dt,
.position-flow-card small,
.position-featured-card p {
  color: var(--pos-muted);
}

.position-stat-card small {
  font-size: 11px;
  font-weight: 750;
}

.position-stat-card strong {
  display: block;
  margin-top: 4px;
  overflow: hidden;
  color: var(--pos-ink);
  font-size: 23px;
  line-height: 1.1;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.position-stat-card em {
  display: block;
  margin-top: 5px;
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
}

.positions-layout {
  display: grid;
  gap: 16px;
}

.position-card {
  padding: 16px;
}

.position-card-head {
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.position-card-head h2 {
  margin: 0;
  color: var(--pos-ink);
  font-size: 15px;
  line-height: 1.25;
  font-weight: 900;
}

.position-card-head.compact {
  align-items: flex-start;
}

.position-tabs {
  display: none;
  padding: 3px;
  border: 1px solid var(--pos-line);
  border-radius: 8px;
  background: #fbfcff;
}

.position-tabs button {
  min-height: 30px;
  padding: 0 12px;
  border-radius: 6px;
  color: #4e5872;
  background: transparent;
  font-size: 11px;
  font-weight: 850;
}

.position-tabs button.active {
  color: #fff;
  background: var(--pos-purple);
}

.position-list {
  border-top: 1px solid #eef2f7;
}

.position-row-card {
  display: grid;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid #eef2f7;
}

.position-row-card:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.position-row-top {
  align-items: flex-start;
  gap: 13px;
}

.position-role-icon {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
}

.position-row-copy {
  flex: 1;
}

.position-row-copy > div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.position-row-copy h3 {
  margin: 0;
  color: var(--pos-ink);
  font-size: 15px;
  line-height: 1.25;
  font-weight: 900;
}

.position-row-copy p {
  margin: 7px 0 0;
  font-size: 12px;
  line-height: 1.55;
  font-weight: 650;
}

.position-role-pill {
  min-height: 22px;
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
}

.position-role-pill.purple { color: var(--pos-purple); background: rgba(102, 82, 241, .1); }
.position-role-pill.blue { color: var(--pos-blue); background: rgba(47, 123, 240, .1); }
.position-role-pill.green { color: var(--pos-green); background: rgba(24, 168, 92, .1); }

.position-row-metric {
  min-width: 56px;
  text-align: right;
}

.position-row-metric strong {
  display: block;
  color: var(--pos-ink);
  font-size: 20px;
  line-height: 1;
  font-weight: 900;
}

.position-row-metric small {
  display: block;
  margin-top: 5px;
  color: var(--pos-muted);
  font-size: 10px;
  font-weight: 800;
}

.position-invite-box {
  display: grid;
  gap: 7px;
  padding: 12px;
  border: 1px solid #eef2f7;
  border-radius: 8px;
  background: #fbfcff;
}

.position-invite-box label {
  font-size: 11px;
  font-weight: 850;
}

.position-invite-box div {
  flex-wrap: wrap;
  gap: 8px;
}

.position-invite-box input {
  flex: 1 1 220px;
  min-width: 0;
  height: 40px;
  border: 1px solid var(--pos-line);
  border-radius: 8px;
  padding: 0 12px;
  color: #29304b;
  background: #fff;
  font-size: 12px;
  font-weight: 650;
}

.position-invite-box button,
.position-invite-box a {
  padding: 0 12px;
}

.position-holder-section {
  display: grid;
  gap: 10px;
}

.position-holder-head {
  justify-content: space-between;
}

.position-holder-head strong {
  color: var(--pos-ink);
  font-size: 12px;
  font-weight: 900;
}

.position-holder-head small {
  color: var(--pos-green);
  font-size: 11px;
  font-weight: 850;
}

.position-holder-list {
  display: grid;
  gap: 8px;
}

.position-holder-item {
  min-height: 48px;
  gap: 10px;
  padding: 8px;
  border: 1px solid #eef2f7;
  border-radius: 8px;
  background: #fff;
}

.position-holder-item > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, #17315e, #d4a15f);
  font-size: 11px;
  font-weight: 900;
}

.position-holder-item strong,
.position-holder-item small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.position-holder-item strong {
  color: var(--pos-ink);
  font-size: 12px;
  font-weight: 900;
}

.position-holder-item small {
  margin-top: 3px;
  font-size: 11px;
  font-weight: 650;
}

.position-holder-item form {
  margin-left: auto;
}

.position-holder-item button,
.position-delete-form button {
  border: 0;
  color: var(--pos-red);
  background: #fff0ef;
}

.position-holder-item button {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 7px;
}

.position-empty-holder {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 52px;
  padding: 10px;
  border: 1px dashed #d9e0ee;
  border-radius: 8px;
  background: #fbfcff;
}

.position-empty-holder span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: var(--pos-purple);
  background: rgba(102, 82, 241, .09);
}

.position-empty-holder p {
  margin: 0;
  color: var(--pos-muted);
  font-size: 11px;
  line-height: 1.5;
  font-weight: 650;
}

.position-delete-form {
  display: flex;
  justify-content: flex-end;
}

.position-delete-form button {
  min-height: 34px;
  gap: 7px;
  padding: 0 11px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 850;
}

.positions-side {
  display: grid;
  align-content: start;
  gap: 16px;
}

.position-form {
  display: grid;
  gap: 10px;
}

.position-form label {
  color: #29304b;
  font-size: 11px;
  font-weight: 850;
}

.position-form input,
.position-form select {
  width: 100%;
  height: 42px;
  border: 1px solid var(--pos-line);
  border-radius: 8px;
  padding: 0 12px;
  color: var(--pos-ink);
  background: #fff;
  font-size: 12px;
  font-weight: 650;
}

.position-form button {
  width: 100%;
  margin-top: 4px;
}

.position-progress {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 6px 0 14px;
  text-align: center;
}

.position-progress > div {
  width: 116px;
  height: 116px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(var(--pos-purple) 0 var(--value), #eef2fb var(--value) 100%);
}

.position-progress > div span {
  width: 74px;
  height: 74px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--pos-ink);
  background: #fff;
  font-size: 20px;
  font-weight: 900;
}

.position-progress p {
  margin: 0;
  color: var(--pos-muted);
  font-size: 12px;
  line-height: 1.5;
  font-weight: 650;
}

.position-summary-list {
  display: grid;
  gap: 10px;
  margin: 0;
}

.position-summary-list div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  min-height: 28px;
}

.position-summary-list dt,
.position-summary-list dd {
  margin: 0;
  font-size: 12px;
  font-weight: 750;
}

.position-summary-list dd {
  color: var(--pos-ink);
  font-weight: 900;
}

.position-flow-card ol {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.position-flow-card li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.position-flow-card li > span {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(102, 82, 241, .28);
  border-radius: 50%;
  color: var(--pos-purple);
  font-size: 11px;
  font-weight: 900;
}

.position-flow-card li.done > span {
  color: #fff;
  background: var(--pos-purple);
}

.position-flow-card strong,
.position-flow-card small {
  display: block;
}

.position-flow-card strong {
  color: var(--pos-ink);
  font-size: 12px;
  font-weight: 900;
}

.position-flow-card small {
  margin-top: 3px;
  font-size: 11px;
  line-height: 1.45;
  font-weight: 650;
}

.position-featured-card {
  display: grid;
  gap: 12px;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 90% 18%, rgba(255, 255, 255, .3), transparent 28%),
    linear-gradient(135deg, #3b4ef2, #8754f4);
}

.position-featured-card > span {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(255, 255, 255, .15);
}

.position-featured-card h2,
.position-featured-card p {
  margin: 0;
}

.position-featured-card h2 {
  color: #fff;
  font-size: 16px;
  font-weight: 900;
}

.position-featured-card p {
  margin-top: 6px;
  color: rgba(255, 255, 255, .82);
  font-size: 12px;
  line-height: 1.55;
  font-weight: 650;
}

.position-featured-card a {
  justify-content: flex-start;
  color: #fff;
}

.position-empty-state {
  min-height: 260px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  text-align: center;
}

.position-empty-state > span {
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: var(--pos-purple);
  background: rgba(102, 82, 241, .1);
}

.position-empty-state strong {
  color: var(--pos-ink);
  font-size: 15px;
  font-weight: 900;
}

.position-empty-state p {
  max-width: 320px;
  margin: 0;
  color: var(--pos-muted);
  font-size: 12px;
  line-height: 1.6;
  font-weight: 650;
}

.position-empty-state a {
  padding: 0 16px;
  color: #fff;
  background: var(--pos-purple);
}

.position-notice {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 58px;
  padding: 10px 14px;
  border: 1px solid #ccefdc;
  border-radius: 8px;
  color: var(--pos-green);
  background: #f0fbf5;
}

.position-notice > span {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #dcf8e7;
}

.position-notice strong,
.position-notice small {
  display: block;
}

.position-notice strong {
  color: #107d43;
  font-size: 12px;
  font-weight: 900;
}

.position-notice small {
  margin-top: 3px;
  color: #316f4e;
  font-size: 11px;
  line-height: 1.45;
  font-weight: 650;
}

@media (min-width: 1024px) {
  .positions-console {
    gap: 18px;
    padding: 28px 30px 28px;
    color: var(--dash-ink);
  }

  .positions-head h1 {
    font-size: 28px;
  }

  .positions-head p {
    font-size: 14px;
  }

  .position-stat-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
  }

  .position-stat-card {
    min-height: 112px;
    padding: 20px 18px;
  }

  .positions-layout {
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 18px;
    align-items: start;
  }

  .position-card {
    padding: 18px;
  }

  .position-tabs {
    display: inline-flex;
  }

  .position-row-card {
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 16px 18px;
    padding: 18px 0;
  }

  .position-row-top {
    grid-column: 1 / -1;
  }

  .position-invite-box {
    grid-column: 1;
  }

  .position-holder-section {
    grid-column: 2;
    grid-row: 2 / span 2;
  }

  .position-delete-form {
    grid-column: 1;
  }

  .position-form input,
  .position-form select {
    height: 44px;
  }
}

@media (min-width: 1024px) and (max-width: 1320px) {
  .positions-layout {
    grid-template-columns: 1fr;
  }

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

  .position-featured-card {
    grid-column: span 3;
  }
}

@media (max-width: 760px) {
  .positions-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .positions-actions,
  .position-primary-btn,
  .position-ghost-btn {
    width: 100%;
  }

  .position-row-top {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) auto;
  }

  .position-invite-box button,
  .position-invite-box a {
    flex: 1 1 120px;
  }
}

@media (min-width: 1024px) {
  .member-management-page {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 382px;
    gap: 0;
    color: var(--dash-ink);
  }

  .member-main {
    min-width: 0;
    padding: 30px 28px 30px 30px;
  }

  .member-page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 28px;
  }

  .member-page-head h1 {
    color: var(--dash-ink);
    font-size: 23px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: 0;
  }

  .member-page-head p {
    margin-top: 8px;
    color: var(--dash-muted);
    font-size: 14px;
    font-weight: 500;
  }

  .member-add-btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 18px;
    border-radius: 8px;
    color: #fff;
    background: linear-gradient(135deg, #7454f8, #5c45e8);
    font-size: 13px;
    font-weight: 800;
    box-shadow: 0 14px 24px rgba(102, 82, 241, .22);
    white-space: nowrap;
  }

  .member-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
  }

  .member-stat-card,
  .member-table-card,
  .member-chart-card {
    border: 1px solid #dde3ef;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 12px 34px rgba(18, 22, 50, .045);
  }

  .member-stat-card {
    min-height: 104px;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    padding: 18px 14px;
    transition: transform .16s ease, box-shadow .16s ease;
  }

  .member-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 42px rgba(18, 22, 50, .08);
  }

  .member-stat-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    color: #fff;
  }

  .member-stat-icon.purple { background: linear-gradient(135deg, #7454f8, #8d55ff); }
  .member-stat-icon.blue { background: linear-gradient(135deg, #2f7bf0, #48a2ff); }
  .member-stat-icon.orange { background: linear-gradient(135deg, #ff9f1c, #ffb43d); }
  .member-stat-icon.red { background: linear-gradient(135deg, #ff4d61, #ff6b73); }

  .member-stat-card span:last-child {
    min-width: 0;
    display: grid;
    gap: 4px;
  }

  .member-stat-card small {
    color: #59627d;
    font-size: 11px;
    font-weight: 700;
  }

  .member-stat-card strong {
    overflow: hidden;
    color: var(--dash-ink);
    font-size: 23px;
    line-height: 1.08;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .member-stat-card em {
    overflow: hidden;
    font-size: 10px;
    font-style: normal;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .member-stat-card em.positive { color: #07994f; }
  .member-stat-card em.warning { color: #f28c00; }
  .member-stat-card em.negative { color: #f04438; }

  .member-table-card {
    overflow: hidden;
    margin-bottom: 18px;
  }

  .member-table-toolbar {
    display: grid;
    grid-template-columns: auto minmax(170px, 1fr) auto auto;
    gap: 10px;
    align-items: center;
    padding: 12px;
    border-bottom: 1px solid #eef2f7;
  }

  .member-filter-tabs {
    display: inline-grid;
    grid-auto-flow: column;
    overflow: hidden;
    border: 1px solid #dce2ed;
    border-radius: 7px;
    background: #fff;
  }

  .member-filter-tab {
    min-height: 34px;
    padding: 0 12px;
    border-right: 1px solid #e5eaf2;
    color: #3d4561;
    background: #fff;
    font-size: 11px;
    font-weight: 800;
  }

  .member-filter-tab:last-child {
    border-right: 0;
  }

  .member-filter-tab.active {
    color: var(--dash-purple);
    background: #f5f2ff;
    box-shadow: inset 0 0 0 1px rgba(102,82,241,.45);
  }

  .member-table-search {
    min-height: 34px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 13px;
    border: 1px solid #dce2ed;
    border-radius: 7px;
    color: #8a92aa;
    background: #fff;
  }

  .member-table-search input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    color: var(--dash-ink);
    background: transparent;
    font-size: 12px;
    font-weight: 600;
  }

  .member-table-search input::placeholder {
    color: #9aa2b8;
  }

  .member-tool-btn,
  .member-icon-btn {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid #dce2ed;
    border-radius: 7px;
    color: #343c58;
    background: #fff;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
  }

  .member-tool-btn {
    padding: 0 12px;
  }

  .member-icon-btn {
    width: 34px;
  }

  .member-table-wrap {
    overflow-x: auto;
  }

  .member-table {
    width: 100%;
    min-width: 650px;
    border-collapse: collapse;
  }

  .member-table th,
  .member-table td {
    padding: 11px 12px;
    border-bottom: 1px solid #eef2f7;
    color: #29304b;
    font-size: 12px;
    line-height: 1.35;
    text-align: left;
    vertical-align: middle;
  }

  .member-table th {
    height: 38px;
    color: #202844;
    background: #fbfcff;
    font-size: 11px;
    font-weight: 800;
  }

  .member-table tbody tr {
    transition: background .16s ease;
  }

  .member-table tbody tr:hover,
  .member-table tbody tr.selected {
    background: #f5f1ff;
  }

  .member-name-cell {
    min-width: 0;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
  }

  .member-avatar-sm,
  .member-detail-avatar,
  .kta-preview-photo {
    display: grid;
    place-items: center;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(135deg, #59627d, #17213f);
    font-weight: 900;
  }

  .member-avatar-sm {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    font-size: 12px;
  }

  .member-avatar-sm img,
  .member-detail-avatar img,
  .kta-preview-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .member-name-cell span:last-child {
    min-width: 0;
    display: grid;
    gap: 3px;
  }

  .member-name-cell strong,
  .member-name-cell small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .member-name-cell strong {
    color: var(--dash-ink);
    font-size: 12px;
    font-weight: 800;
  }

  .member-name-cell small {
    color: #68708f;
    font-size: 11px;
    font-weight: 500;
  }

  .member-number {
    color: #29304b;
    font-weight: 600;
  }

  .member-status-badge {
    min-height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 9px;
    border-radius: 7px;
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
  }

  .member-status-badge.success {
    color: #0c9a54;
    background: #dff7ea;
  }

  .member-status-badge.warning {
    color: #f28c00;
    background: #fff0d9;
  }

  .member-status-badge.danger {
    color: #f04438;
    background: #ffe5e7;
  }

  .member-row-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }

  .member-action-icon {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border: 1px solid #dce2ed;
    border-radius: 7px;
    color: var(--dash-purple);
    background: #fff;
  }

  .member-empty-state {
    min-height: 120px;
    display: grid;
    place-items: center;
    gap: 12px;
    color: #68708f;
    font-size: 13px;
    font-weight: 700;
  }

  .member-pagination {
    min-height: 54px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 14px;
    color: #68708f;
    font-size: 11px;
    font-weight: 600;
  }

  .member-pagination div {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }

  .member-pagination div > a,
  .member-pagination div > span {
    width: 31px;
    height: 31px;
    display: grid;
    place-items: center;
    border: 1px solid #dce2ed;
    border-radius: 7px;
    color: #39425e;
    background: #fff;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
  }

  .member-pagination div > span:not(.active) {
    color: #a8afc2;
    background: #f8fafc;
  }

  .member-pagination div > .active {
    width: auto;
    min-width: 48px;
    padding: 0 10px;
    color: #fff;
    border-color: var(--dash-purple);
    background: var(--dash-purple);
  }

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

  .member-chart-card {
    min-height: 250px;
    padding: 20px;
  }

  .member-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
  }

  .member-card-head h2 {
    color: var(--dash-ink);
    font-size: 15px;
    line-height: 1.25;
    font-weight: 800;
  }

  .member-card-head span {
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
    border: 1px solid #dce2ed;
    border-radius: 7px;
    color: #29304b;
    font-size: 11px;
    font-weight: 700;
  }

  .member-trend-chart {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 8px;
  }

  .member-trend-axis {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 11px 0 30px;
    color: #68708f;
    font-size: 11px;
    font-weight: 700;
  }

  .member-trend-chart svg {
    width: 100%;
    height: 172px;
    overflow: visible;
  }

  .member-chart-grid {
    fill: none;
    stroke: #e8edf5;
    stroke-dasharray: 3 5;
  }

  .member-chart-area {
    fill: rgba(116, 84, 248, .12);
  }

  .member-chart-line {
    fill: none;
    stroke: #7454f8;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 4;
  }

  .member-chart-dot {
    fill: #7454f8;
    stroke: #fff;
    stroke-width: 3;
  }

  .member-trend-months {
    grid-column: 2;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 4px;
    margin-top: -20px;
    color: #68708f;
    font-size: 10px;
    font-weight: 700;
    text-align: center;
  }

  .member-funnel {
    display: grid;
    gap: 19px;
    padding-top: 6px;
  }

  .member-funnel-row {
    display: grid;
    grid-template-columns: 130px 58px minmax(90px, 1fr) 50px;
    gap: 12px;
    align-items: center;
    color: #424b66;
    font-size: 12px;
    font-weight: 600;
  }

  .member-funnel-row strong {
    color: #29304b;
    text-align: right;
    font-weight: 800;
  }

  .member-funnel-row i {
    height: 24px;
    overflow: hidden;
    border-radius: 5px;
    background: #f0edfb;
  }

  .member-funnel-row b {
    height: 100%;
    display: block;
    border-radius: inherit;
    background: linear-gradient(90deg, #d8cafc, #8f67f4);
  }

  .member-funnel-row em {
    color: #68708f;
    text-align: right;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
  }

  .member-conversion {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 28px;
    padding-top: 18px;
    border-top: 1px solid #eef2f7;
  }

  .member-conversion span {
    color: var(--dash-purple);
    font-size: 12px;
    font-weight: 800;
  }

  .member-conversion strong {
    color: var(--dash-purple);
    font-size: 24px;
    font-weight: 800;
  }

  .member-detail-panel {
    position: sticky;
    top: 88px;
    align-self: start;
    min-height: calc(100dvh - 88px);
    max-height: calc(100dvh - 88px);
    overflow-y: auto;
    padding: 20px 20px 18px;
    border-left: 1px solid #dde3ef;
    background: #fff;
    box-shadow: -18px 0 40px rgba(18, 22, 50, .035);
  }

  .member-detail-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
  }

  .member-detail-head h2 {
    color: var(--dash-ink);
    font-size: 17px;
    font-weight: 800;
  }

  .member-detail-head button {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    color: #47506d;
    background: transparent;
  }

  .member-detail-profile {
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    margin-bottom: 14px;
  }

  .member-detail-avatar {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    font-size: 24px;
  }

  .member-detail-profile h3 {
    display: inline;
    margin-right: 8px;
    color: var(--dash-ink);
    font-size: 17px;
    font-weight: 800;
  }

  .member-detail-profile p {
    margin-top: 5px;
    color: #59627d;
    font-size: 12px;
    line-height: 1.3;
    font-weight: 600;
  }

  .member-detail-profile dl {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    margin-top: 8px;
  }

  .member-detail-profile dt {
    color: #68708f;
    font-size: 11px;
    font-weight: 700;
  }

  .member-detail-profile dd {
    color: #29304b;
    font-size: 11px;
    font-weight: 800;
  }

  .member-detail-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-bottom: 1px solid #dde3ef;
    margin-bottom: 13px;
  }

  .member-detail-tabs button {
    min-height: 34px;
    color: #68708f;
    background: transparent;
    font-size: 11px;
    font-weight: 800;
  }

  .member-detail-tabs button.active {
    color: var(--dash-purple);
    box-shadow: inset 0 -2px 0 var(--dash-purple);
  }

  .member-detail-section h3,
  .member-verification-card h3,
  .member-kta-preview h3 {
    color: var(--dash-ink);
    font-size: 13px;
    line-height: 1.25;
    font-weight: 800;
  }

  .member-data-list {
    display: grid;
    gap: 6px;
    margin-top: 10px;
  }

  .member-data-list div {
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr);
    gap: 12px;
  }

  .member-data-list dt {
    color: #68708f;
    font-size: 11px;
    font-weight: 600;
  }

  .member-data-list dd {
    color: #29304b;
    font-size: 11px;
    line-height: 1.35;
    font-weight: 700;
  }

  .member-verification-card,
  .member-kta-preview {
    margin-top: 13px;
    padding: 13px;
    border: 1px solid #dde3ef;
    border-radius: 8px;
    background: #fff;
  }

  .member-verification-card ol {
    display: grid;
    gap: 0;
    margin-top: 10px;
    list-style: none;
  }

  .member-verification-card li {
    position: relative;
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) 24px;
    gap: 10px;
    align-items: start;
    min-height: 32px;
  }

  .member-verification-card li:before {
    content: "";
    position: absolute;
    left: 11px;
    top: 24px;
    bottom: -3px;
    width: 1px;
    background: #d8d0ff;
  }

  .member-verification-card li:last-child:before {
    display: none;
  }

  .member-verification-card li > span {
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    border: 1px solid var(--dash-purple);
    border-radius: 50%;
    color: var(--dash-purple);
    background: #fff;
    font-size: 10px;
    font-weight: 800;
  }

  .member-verification-card li.done > span {
    color: #fff;
    background: var(--dash-purple);
  }

  .member-verification-card strong {
    color: #29304b;
    font-size: 11px;
    font-weight: 800;
  }

  .member-verification-card small {
    display: block;
    margin-top: 2px;
    color: #68708f;
    font-size: 11px;
    line-height: 1.35;
    font-weight: 600;
  }

  .member-verification-card li > svg {
    width: 22px;
    height: 22px;
    padding: 5px;
    border-radius: 50%;
    color: #8a92aa;
    background: #f7f9fc;
  }

  .member-verification-card li.done > svg {
    color: #10a060;
    background: #e5f8ef;
  }

  .kta-preview-card {
    position: relative;
    overflow: hidden;
    min-height: 110px;
    margin-top: 10px;
    padding: 10px;
    border-radius: 12px;
    color: #fff;
    background:
      radial-gradient(circle at 100% 5%, rgba(255,255,255,.2), transparent 28%),
      linear-gradient(135deg, #1628a6 0%, #5536e8 56%, #6d4efa 100%);
  }

  .kta-preview-brand {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 6px;
  }

  .kta-preview-brand img {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
    background: rgba(255,255,255,.18);
  }

  .kta-preview-brand span {
    min-width: 0;
    display: grid;
    gap: 2px;
  }

  .kta-preview-brand strong,
  .kta-preview-brand small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .kta-preview-brand strong {
    color: #fff;
    font-size: 9px;
    font-weight: 800;
  }

  .kta-preview-brand small {
    color: rgba(255,255,255,.78);
    font-size: 7px;
    font-weight: 600;
  }

  .kta-preview-body {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 42px;
    gap: 8px;
    align-items: center;
  }

  .kta-preview-photo {
    width: 38px;
    height: 44px;
    border-radius: 7px;
    background: rgba(255,255,255,.18);
    font-size: 18px;
  }

  .kta-preview-body span:nth-child(2) {
    min-width: 0;
    display: grid;
    gap: 3px;
  }

  .kta-preview-body b {
    color: #fff;
    font-size: 16px;
    line-height: 1;
    font-weight: 900;
  }

  .kta-preview-body strong,
  .kta-preview-body small {
    overflow: hidden;
    color: rgba(255,255,255,.86);
    font-size: 8px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .kta-preview-body strong {
    color: #fff;
    font-size: 10px;
    font-weight: 800;
  }

  .kta-qr {
    width: 42px;
    height: 42px;
    border: 4px solid #fff;
    border-radius: 6px;
    background:
      linear-gradient(90deg, #111 50%, transparent 50%) 0 0/12px 12px,
      linear-gradient(#111 50%, transparent 50%) 0 0/12px 12px,
      #fff;
    image-rendering: pixelated;
  }

  .kta-preview-card p {
    display: none;
    margin-top: 0;
    color: rgba(255,255,255,.8);
    font-size: 9px;
    font-weight: 700;
  }

  .member-detail-actions {
    position: sticky;
    bottom: -18px;
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 12px;
    margin: 16px -20px -18px;
    padding: 12px 20px 14px;
    border-top: 1px solid #eef2f7;
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(12px);
  }

  .member-detail-actions form {
    min-width: 0;
  }

  .member-reject-btn,
  .member-approve-btn {
    min-height: 42px;
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
  }

  .member-reject-btn {
    border: 1px solid #ffd1d5;
    color: #f04438;
    background: #fff;
  }

  .member-approve-btn {
    color: #fff;
    background: linear-gradient(135deg, #7454f8, #5c45e8);
  }

  .member-detail-empty {
    min-height: 260px;
    display: grid;
    place-items: center;
    color: #68708f;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
  }
}

@media (min-width: 1024px) and (max-width: 1320px) {
  .member-management-page {
    grid-template-columns: 1fr;
  }

  .member-main {
    padding: 24px;
  }

  .member-detail-panel {
    position: relative;
    top: auto;
    min-height: auto;
    max-height: none;
    margin: 0 24px 24px;
    border: 1px solid #dde3ef;
    border-radius: 8px;
    box-shadow: 0 12px 34px rgba(18, 22, 50, .045);
  }

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

@media (max-width: 1023px) {
  .member-management-page {
    padding: 14px 14px 96px;
  }

  .member-page-head,
  .member-stats-grid,
  .member-analytics-grid {
    display: grid;
    gap: 12px;
  }

  .member-page-head h1 {
    color: var(--ink);
    font-size: 20px;
    font-weight: 900;
  }

  .member-page-head p {
    margin-top: 4px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
  }

  .member-add-btn,
  .member-tool-btn,
  .member-icon-btn,
  .member-filter-tab,
  .member-action-icon {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 12px;
    color: #fff;
    background: linear-gradient(135deg, var(--blue), var(--mint));
    font-size: 11px;
    font-weight: 900;
  }

  .member-stats-grid {
    grid-template-columns: 1fr 1fr;
    margin-top: 14px;
  }

  .member-stat-card,
  .member-table-card,
  .member-chart-card,
  .member-detail-panel {
    padding: 14px;
    border-radius: 17px;
    background: #fff;
    box-shadow: var(--shadow-soft);
  }

  .member-stat-card {
    display: grid;
    gap: 8px;
  }

  .member-stat-icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: #fff;
    background: var(--blue);
  }

  .member-stat-card small,
  .member-stat-card em {
    color: var(--muted);
    font-size: 9px;
    font-style: normal;
    font-weight: 800;
  }

  .member-stat-card strong {
    display: block;
    color: var(--ink);
    font-size: 18px;
    font-weight: 900;
  }

  .member-table-card,
  .member-chart-card,
  .member-detail-panel {
    margin-top: 14px;
  }

  .member-table-toolbar,
  .member-filter-tabs,
  .member-pagination,
  .member-detail-head,
  .member-detail-profile,
  .member-data-list div,
  .member-detail-actions {
    display: grid;
    gap: 10px;
  }

  .member-table-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    border-radius: 12px;
    background: #f1fbfe;
  }

  .member-table-search input {
    min-height: 38px;
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
  }

  .member-table-wrap {
    overflow-x: auto;
  }

  .member-table {
    min-width: 700px;
    border-collapse: collapse;
  }

  .member-table th,
  .member-table td {
    padding: 10px;
    border-bottom: 1px solid #eefaff;
    font-size: 10px;
    text-align: left;
  }

  .member-detail-panel {
    display: none;
  }
}

@media (min-width: 1024px) {
  .program-page {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(440px, 560px);
    gap: 20px;
    padding: 30px;
    color: var(--dash-ink);
  }

  .program-left,
  .program-right {
    min-width: 0;
  }

  .program-page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 30px;
  }

  .program-page-head h1 {
    color: var(--dash-ink);
    font-size: 28px;
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: 0;
  }

  .program-page-head p {
    margin-top: 10px;
    color: var(--dash-muted);
    font-size: 14px;
    font-weight: 500;
  }

  .program-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 18px;
  }

  .event-search-form {
    flex: 1 1 260px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    min-width: 0;
  }

  .event-filter-tabs {
    flex: 1 1 390px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    overflow: hidden;
    border: 1px solid #dde3ef;
    border-radius: 8px;
    background: #fff;
  }

  .event-filter-tab {
    min-height: 44px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid #e7ebf3;
    color: #29304b;
    background: #fff;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
  }

  .event-filter-tab:last-child {
    border-right: 0;
  }

  .event-filter-tab.active {
    color: #fff;
    background: linear-gradient(135deg, #7454f8, #5c45e8);
    box-shadow: 0 12px 24px rgba(102,82,241,.18);
  }

  .program-filter-btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1px solid #dde3ef;
    border-radius: 8px;
    color: #29304b;
    background: #fff;
    font-size: 12px;
    font-weight: 800;
  }

  .program-calendar-card,
  .program-list-card,
  .program-live-card,
  .program-report-card {
    border: 1px solid #dde3ef;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 12px 34px rgba(18, 22, 50, .045);
  }

  .program-calendar-card {
    margin-bottom: 18px;
    padding: 18px 22px 20px;
  }

  .program-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
  }

  .program-card-head.compact {
    justify-content: space-between;
    margin-bottom: 14px;
  }

  .program-card-head h2 {
    color: var(--dash-ink);
    font-size: 18px;
    line-height: 1.25;
    font-weight: 800;
  }

  .program-card-head a {
    color: var(--dash-purple);
    font-size: 12px;
    font-weight: 800;
  }

  .program-month-nav {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }

  .program-month-nav button {
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border: 1px solid #dde3ef;
    border-radius: 50%;
    color: #47506d;
    background: #fff;
  }

  .program-calendar-btn {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-left: auto;
    padding: 0 13px;
    border: 1px solid #dde3ef;
    border-radius: 7px;
    color: #29304b;
    background: #fff;
    font-size: 12px;
    font-weight: 800;
  }

  .program-week {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
  }

  .program-day {
    min-height: 70px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 8px;
    border-radius: 12px;
    color: #29304b;
  }

  .program-day span {
    color: #59627d;
    font-size: 11px;
    font-weight: 700;
  }

  .program-day strong {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 16px;
    font-weight: 800;
  }

  .program-day.active strong {
    color: #fff;
    background: linear-gradient(135deg, #7454f8, #5c45e8);
    box-shadow: 0 10px 20px rgba(102,82,241,.24);
  }

  .program-day.muted {
    color: #b5bdce;
  }

  .program-day small {
    min-height: 10px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #07994f;
    font-size: 10px;
    font-weight: 800;
  }

  .program-day small i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #17b267;
  }

  .program-list-card {
    padding: 18px 20px 20px;
  }

  .program-event-list {
    display: grid;
    gap: 12px;
  }

  .program-event-item {
    min-height: 78px;
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) 72px;
    gap: 14px;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid #e3e8f1;
    border-radius: 8px;
    background: #fff;
  }

  .program-event-date {
    width: 54px;
    height: 58px;
    display: grid;
    place-items: center;
    align-content: center;
    border: 1px solid #e0e6f0;
    border-radius: 8px;
    background: #fbfcff;
  }

  .program-event-date strong {
    font-size: 22px;
    line-height: 1;
    font-weight: 800;
  }

  .program-event-date small {
    margin-top: 6px;
    font-size: 11px;
    font-weight: 800;
  }

  .program-event-date.upcoming,
  .program-event-date.live {
    color: var(--dash-purple);
    background: #f5f2ff;
  }

  .program-event-date.done {
    color: #07994f;
    background: #effbf4;
  }

  .program-event-copy {
    min-width: 0;
  }

  .program-event-copy h3,
  .program-event-copy p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .program-event-copy h3 {
    color: var(--dash-ink);
    font-size: 13px;
    font-weight: 800;
  }

  .program-event-copy p {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 7px;
    color: #59627d;
    font-size: 11px;
    font-weight: 600;
  }

  .program-event-copy p span {
    width: 4px;
    height: 4px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #8a92aa;
  }

  .program-event-copy em {
    min-height: 22px;
    display: inline-flex;
    align-items: center;
    margin-top: 7px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 11px;
    font-style: normal;
    font-weight: 800;
  }

  .program-event-copy em.upcoming { color: #1b65e5; background: #eaf2ff; }
  .program-event-copy em.live { color: #0c9a54; background: #e5f8ef; }
  .program-event-copy em.done { color: #47506d; background: #f1f4f9; }

  .program-participants {
    min-height: 48px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 1px;
    border-left: 1px solid #eef2f7;
    color: #29304b;
  }

  .program-participants strong {
    font-size: 15px;
    font-weight: 800;
  }

  .program-participants small {
    color: #59627d;
    font-size: 10px;
    font-weight: 700;
  }

  .program-list-link {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 18px;
    color: var(--dash-purple);
    font-size: 12px;
    font-weight: 800;
  }

  .program-right {
    display: grid;
    gap: 18px;
    align-content: start;
    padding-top: 90px;
  }

  .program-live-card {
    overflow: hidden;
  }

  .program-live-hero {
    min-height: 144px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: start;
    padding: 20px 24px;
    color: #fff;
    background:
      radial-gradient(circle at 84% 55%, rgba(255,255,255,.22), transparent 24%),
      linear-gradient(135deg, #453ff0 0%, #673df0 55%, #7c58ff 100%);
  }

  .program-live-hero span {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-size: 13px;
    font-weight: 800;
  }

  .program-live-hero span i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #21da71;
  }

  .program-live-hero h2 {
    margin-top: 14px;
    color: #fff;
    font-size: 22px;
    line-height: 1.24;
    font-weight: 800;
  }

  .program-live-hero p {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    color: rgba(255,255,255,.9);
    font-size: 13px;
    font-weight: 700;
  }

  .program-live-hero p b {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(255,255,255,.82);
  }

  .program-live-hero em {
    min-height: 26px;
    display: inline-flex;
    align-items: center;
    padding: 0 13px;
    border-radius: 999px;
    color: #0d8e46;
    background: #c9f8dc;
    font-size: 11px;
    font-style: normal;
    font-weight: 800;
  }

  .program-presence-grid {
    display: grid;
    grid-template-columns: 1fr 1.28fr;
    gap: 16px;
    padding: 16px 22px 14px;
  }

  .program-qr-panel {
    padding-right: 20px;
    border-right: 1px solid #e5eaf2;
  }

  .program-section-title {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 14px;
  }

  .program-section-title strong {
    color: #29304b;
    font-size: 12px;
    font-weight: 800;
  }

  .program-section-title span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #0c9a54;
    font-size: 11px;
    font-weight: 800;
  }

  .program-section-title span i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #18bd65;
  }

  .event-qr-code {
    width: 160px;
    max-width: 100%;
    aspect-ratio: 1;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(6, 1fr);
    gap: 6px;
    padding: 15px;
    border: 2px solid var(--dash-purple);
    border-radius: 9px;
    background:
      linear-gradient(90deg, #101426 50%, transparent 50%) 0 0/22px 22px,
      linear-gradient(#101426 50%, transparent 50%) 0 0/22px 22px,
      #fff;
    box-shadow: inset 0 0 0 10px #fff;
  }

  .event-qr-code span {
    border: 8px solid #101426;
    background: #fff;
  }

  .event-qr-code span:nth-child(1) { grid-area: 1 / 1 / 3 / 3; }
  .event-qr-code span:nth-child(2) { grid-area: 1 / 5 / 3 / 7; }
  .event-qr-code span:nth-child(3) { grid-area: 5 / 1 / 7 / 3; }
  .event-qr-code span:nth-child(4) { grid-area: 3 / 3 / 4 / 4; background: #101426; }
  .event-qr-code span:nth-child(5) { grid-area: 4 / 5 / 5 / 6; background: #101426; }
  .event-qr-code span:nth-child(6) { grid-area: 5 / 4 / 6 / 5; background: #101426; }

  .program-qr-panel p {
    margin-top: 10px;
    color: #68708f;
    font-size: 11px;
    line-height: 1.4;
    font-weight: 600;
  }

  .attendance-progress {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 42px;
    gap: 12px;
    align-items: center;
    margin-bottom: 14px;
  }

  .attendance-progress i {
    height: 12px;
    overflow: hidden;
    border-radius: 999px;
    background: #dde3ef;
  }

  .attendance-progress b {
    height: 100%;
    display: block;
    border-radius: inherit;
    background: linear-gradient(90deg, #7454f8, #4d43ef);
  }

  .attendance-progress strong {
    color: #29304b;
    font-size: 14px;
    font-weight: 800;
  }

  .attendance-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .attendance-stats div {
    min-height: 64px;
    display: grid;
    align-content: center;
    gap: 5px;
    padding: 12px;
    border: 1px solid #e5eaf2;
    border-radius: 8px;
  }

  .attendance-stats .present {
    color: #0c9a54;
    background: #f3fbf7;
  }

  .attendance-stats .absent {
    color: #f04438;
    background: #fff7f6;
  }

  .attendance-stats .total {
    grid-column: span 2;
    color: #29304b;
    background: #fbfcff;
  }

  .attendance-stats span {
    font-size: 12px;
    font-weight: 800;
  }

  .attendance-stats strong {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 22px;
    font-weight: 800;
  }

  .attendance-stats small {
    color: #68708f;
    font-size: 11px;
    font-weight: 700;
  }

  .program-live-actions {
    display: grid;
    grid-template-columns: 1fr 1.25fr 1.25fr;
    gap: 10px;
    padding: 0 22px 18px;
  }

  .program-live-actions form {
    min-width: 0;
  }

  .program-live-actions button,
  .program-live-actions a,
  .program-live-actions span.download {
    min-height: 40px;
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
  }

  .program-live-actions .start {
    color: #fff;
    background: linear-gradient(135deg, #7454f8, #4d43ef);
  }

  .program-live-actions .finish {
    color: #fff;
    background: linear-gradient(135deg, #ff254a, #f04438);
  }

  .program-live-actions .download {
    border: 1px solid #dde3ef;
    color: #39425e;
    background: #fff;
  }

  .program-live-actions .download.muted {
    line-height: 1.25;
    text-align: center;
    white-space: normal;
  }

  .program-report-card {
    padding: 18px;
  }

  .report-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 16px;
  }

  .report-summary-grid div {
    position: relative;
    min-height: 92px;
    display: grid;
    align-content: center;
    gap: 5px;
    padding: 14px 44px 14px 14px;
    border: 1px solid #dde3ef;
    border-radius: 8px;
  }

  .report-summary-grid div > svg {
    position: absolute;
    right: 16px;
    top: 34px;
  }

  .report-summary-grid .present {
    color: #0c9a54;
    background: #f4fbf7;
  }

  .report-summary-grid .absent {
    color: #f04438;
    background: #fff7f6;
  }

  .report-summary-grid .letter {
    color: #1f6eea;
    background: #f5f9ff;
  }

  .report-summary-grid span,
  .report-summary-grid small {
    font-size: 11px;
    font-weight: 700;
  }

  .report-summary-grid strong {
    color: currentColor;
    font-size: 21px;
    font-weight: 800;
  }

  .report-summary-grid small {
    color: #68708f;
    line-height: 1.45;
  }

  .report-meta-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 210px;
    gap: 18px;
    align-items: center;
    padding: 14px 16px;
    border: 1px solid #e5eaf2;
    border-radius: 8px;
    background: #fff;
  }

  .report-meta-card dl {
    display: grid;
    gap: 11px;
  }

  .report-meta-card div {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 10px;
  }

  .report-meta-card dt {
    color: #68708f;
    font-size: 11px;
    font-weight: 700;
  }

  .report-meta-card dd {
    color: #29304b;
    font-size: 11px;
    font-weight: 800;
  }

  .report-meta-card dd small {
    display: block;
    margin-top: 2px;
    color: #68708f;
    font-size: 10px;
    font-weight: 600;
  }

  .report-meta-card dd span {
    min-height: 20px;
    display: inline-flex;
    align-items: center;
    padding: 0 8px;
    border-radius: 6px;
    color: var(--dash-purple);
    background: #f1edff;
    font-size: 10px;
  }

  .report-meta-card a,
  .report-meta-card button,
  .report-meta-card .report-action-disabled {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border: 1px solid var(--dash-purple);
    border-radius: 7px;
    color: var(--dash-purple);
    background: #fff;
    font-size: 12px;
    font-weight: 800;
  }

  .report-meta-card .report-action-disabled {
    border-color: #e2e8f0;
    color: #68708f;
    background: #f8fafc;
  }

  .program-empty {
    min-height: 180px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 12px;
    color: #68708f;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
  }

  .program-empty button {
    min-height: 40px;
    padding: 0 18px;
    border-radius: 7px;
    color: #fff;
    background: var(--dash-purple);
    font-size: 12px;
    font-weight: 800;
  }
}

@media (min-width: 1024px) and (max-width: 1320px) {
  .program-page {
    grid-template-columns: 1fr;
    padding: 24px;
  }

  .program-right {
    padding-top: 0;
  }

  .program-toolbar {
    align-items: stretch;
  }
}

@media (max-width: 1023px) {
  .program-page {
    padding: 14px 14px 96px;
  }

  .program-page-head h1 {
    color: var(--ink);
    font-size: 20px;
    font-weight: 900;
  }

  .program-page-head p {
    margin-top: 4px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
  }

  .program-toolbar,
  .event-search-form,
  .event-filter-tabs,
  .program-week,
  .program-event-list,
  .program-presence-grid,
  .attendance-stats,
  .program-live-actions,
  .report-summary-grid,
  .report-meta-card {
    display: grid;
    gap: 12px;
  }

  .program-calendar-card,
  .program-list-card,
  .program-live-card,
  .program-report-card {
    margin-top: 14px;
    padding: 14px;
    border-radius: 17px;
    background: #fff;
    box-shadow: var(--shadow-soft);
  }

  .event-filter-tabs,
  .program-week,
  .report-summary-grid {
    grid-template-columns: 1fr 1fr;
  }

  .event-filter-tab,
  .program-filter-btn,
  .program-calendar-btn,
  .program-live-actions button,
  .program-live-actions a,
  .report-meta-card button,
  .report-meta-card a {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 12px;
    color: #fff;
    background: linear-gradient(135deg, var(--blue), var(--mint));
    font-size: 11px;
    font-weight: 900;
  }

  .program-event-item {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 12px;
    padding: 12px;
    border-radius: 14px;
    background: #f8fdff;
  }

  .program-participants {
    grid-column: span 2;
  }

  .event-qr-code {
    width: 180px;
    aspect-ratio: 1;
    margin: 0 auto;
    background:
      linear-gradient(90deg, #111 50%, transparent 50%) 0 0/20px 20px,
      linear-gradient(#111 50%, transparent 50%) 0 0/20px 20px,
      #fff;
  }
}

@media (min-width: 1024px) {
  .dashboard-shell.layout-sidebar {
    height: 100dvh;
    min-height: 100dvh;
    overflow: hidden;
  }

  .dashboard-shell .sidebar {
    height: 100dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #cbd3e4 transparent;
  }

  .dashboard-shell .main-content {
    height: 100dvh;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #cbd3e4 transparent;
  }

  .dashboard-shell .main-content::-webkit-scrollbar,
  .dashboard-shell .sidebar::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    display: block;
  }

  .dashboard-shell .main-content::-webkit-scrollbar-track,
  .dashboard-shell .sidebar::-webkit-scrollbar-track {
    background: transparent;
  }

  .dashboard-shell .main-content::-webkit-scrollbar-thumb,
  .dashboard-shell .sidebar::-webkit-scrollbar-thumb {
    border: 3px solid transparent;
    border-radius: 999px;
    background: #cbd3e4;
    background-clip: padding-box;
  }

  .dashboard-shell .main-content::-webkit-scrollbar-thumb:hover,
  .dashboard-shell .sidebar::-webkit-scrollbar-thumb:hover {
    background: #aeb9cf;
    background-clip: padding-box;
  }
}

/* Koperasi & KTA marketplace */
.koperasi-page {
  --koop-ink: #111633;
  --koop-muted: #69718b;
  --koop-line: #e4e8f2;
  --koop-soft: #f6f8ff;
  --koop-purple: #6547f5;
  --koop-purple-dark: #4a32df;
  --koop-blue: #2f7df6;
  --koop-green: #16a35e;
  --koop-orange: #f59e0b;
  --koop-red: #ef3f57;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: 24px;
  padding: 28px 28px 8px;
  color: var(--koop-ink);
}

.koperasi-main,
.koperasi-side {
  min-width: 0;
}

.koperasi-side {
  display: grid;
  gap: 16px;
  align-content: start;
}

.koperasi-heading {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
  margin-bottom: 18px;
}

.koperasi-heading h1 {
  margin: 0;
  font-size: 28px;
  line-height: 1.15;
  font-weight: 900;
  color: var(--koop-ink);
}

.koperasi-heading p {
  margin: 7px 0 0;
  color: var(--koop-muted);
  font-size: 14px;
  font-weight: 650;
}

.koperasi-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0;
  padding: 4px;
  margin-bottom: 18px;
  border: 1px solid var(--koop-line);
  border-radius: 12px;
  background: #f8f9fe;
  box-shadow: 0 10px 30px rgba(33, 39, 74, 0.04);
}

.koperasi-tab {
  min-width: 92px;
  height: 40px;
  padding: 0 18px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #222946;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: 0.18s ease;
}

.koperasi-tab.active {
  color: #fff;
  background: linear-gradient(135deg, var(--koop-purple), var(--koop-purple-dark));
  box-shadow: 0 12px 24px rgba(88, 61, 232, 0.24);
}

.koperasi-toolbar {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) 92px 166px;
  gap: 10px;
  margin-bottom: 18px;
}

.koperasi-product-search,
.koperasi-tool-btn,
.koperasi-sort-btn {
  height: 48px;
  border: 1px solid var(--koop-line);
  border-radius: 9px;
  background: #fff;
  color: #222946;
  box-shadow: 0 10px 24px rgba(27, 34, 64, 0.03);
}

.koperasi-product-search {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 15px;
  color: #9aa3ba;
}

.koperasi-product-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  color: var(--koop-ink);
  font-size: 13px;
  font-weight: 650;
  background: transparent;
}

.koperasi-product-search input::placeholder {
  color: #a2aac0;
}

.koperasi-tool-btn,
.koperasi-sort-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 850;
  cursor: pointer;
}

.koperasi-sort-btn {
  justify-content: space-between;
}

.koperasi-product-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.koperasi-category-stack {
  display: grid;
  gap: 22px;
}

.koperasi-category-block {
  min-width: 0;
}

.koperasi-category-block .koperasi-product-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.koperasi-category-title {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 13px;
  padding: 13px 15px;
  border: 1px solid var(--koop-line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(31, 38, 72, 0.045);
}

.koperasi-category-title > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 86px;
  height: 31px;
  padding: 0 11px;
  border-radius: 999px;
  color: #fff;
  font-size: 11px;
  font-weight: 950;
  white-space: nowrap;
}

.koperasi-category-title.purple > span {
  background: var(--koop-purple);
}

.koperasi-category-title.blue > span {
  background: var(--koop-blue);
}

.koperasi-category-title.orange > span {
  background: var(--koop-orange);
}

.koperasi-category-title.green > span {
  background: var(--koop-green);
}

.koperasi-category-title h2 {
  margin: 0;
  color: #171c3b;
  font-size: 15px;
  line-height: 1.2;
  font-weight: 950;
}

.koperasi-category-title p {
  margin: 4px 0 0;
  color: #737c98;
  font-size: 12px;
  font-weight: 750;
}

.koperasi-product-card,
.koperasi-service-card,
.koperasi-orders-panel,
.koperasi-cart-card,
.koperasi-insight-card {
  border: 1px solid var(--koop-line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 42px rgba(31, 38, 72, 0.055);
}

.koperasi-product-card {
  position: relative;
  overflow: hidden;
  min-height: 218px;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.koperasi-product-card:hover {
  transform: translateY(-2px);
  border-color: #cec6ff;
  box-shadow: 0 22px 46px rgba(90, 66, 226, 0.13);
}

.koperasi-product-hit {
  position: absolute;
  z-index: 4;
  inset: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.koperasi-product-media {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1.55;
  background:
    radial-gradient(circle at 15% 12%, rgba(101, 71, 245, 0.18), transparent 30%),
    linear-gradient(135deg, #f8f9ff, #e9ecf8);
  overflow: hidden;
}

.koperasi-product-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8px;
}

.koperasi-product-media.is-empty {
  color: var(--koop-purple);
}

.koperasi-product-copy {
  padding: 13px 13px 12px;
}

.koperasi-product-copy h2 {
  margin: 0;
  color: #171c3b;
  font-size: 14px;
  line-height: 1.24;
  font-weight: 900;
}

.koperasi-product-copy p {
  margin: 5px 0 8px;
  min-height: 18px;
  color: #737c98;
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.koperasi-product-copy strong {
  display: block;
  color: #2f37db;
  font-size: 14px;
  line-height: 1.2;
  font-weight: 950;
}

.koperasi-product-copy strong span {
  color: #6e7791;
  font-size: 12px;
  font-weight: 800;
}

.koperasi-product-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
}

.koperasi-rating {
  min-width: 0;
  color: #64708c;
  font-size: 11px;
  font-weight: 750;
  white-space: nowrap;
}

.koperasi-rating b {
  color: #f6a31a;
}

.koperasi-tag,
.koperasi-order-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  padding: 0 7px;
  border-radius: 7px;
  font-size: 10px;
  font-weight: 850;
  white-space: nowrap;
}

.koperasi-tag {
  color: #6b7190;
  background: #f0f2fb;
}

.koperasi-service-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 218px;
  padding: 18px;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 78% 22%, rgba(255, 255, 255, 0.38), transparent 22%),
    linear-gradient(145deg, #f4f1ff 0%, #eee9ff 48%, #ddd7ff 100%);
  color: #332a76;
}

.koperasi-service-icon {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  margin-bottom: 16px;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(135deg, var(--koop-purple), var(--koop-purple-dark));
  box-shadow: 0 14px 30px rgba(88, 61, 232, 0.28);
}

.koperasi-service-card h2 {
  margin: 0;
  color: #3d2fd3;
  font-size: 15px;
  font-weight: 950;
}

.koperasi-service-card p {
  margin: 9px 0 18px;
  color: #5f6685;
  font-size: 12px;
  line-height: 1.55;
  font-weight: 700;
}

.koperasi-service-card button,
.koperasi-payment-box button,
.koperasi-payment-box a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 42px;
  border: 0;
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(135deg, var(--koop-purple), var(--koop-purple-dark));
  font-size: 13px;
  font-weight: 900;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 15px 28px rgba(88, 61, 232, 0.24);
}

.koperasi-service-card button {
  width: 100%;
  position: relative;
  z-index: 5;
}

.koperasi-empty-state {
  display: none;
  margin: 14px 0 0;
  padding: 16px;
  border: 1px dashed #cfd6e8;
  border-radius: 8px;
  color: #707a96;
  font-size: 13px;
  font-weight: 750;
  text-align: center;
}

.koperasi-empty-state.show {
  display: block;
}

.koperasi-more-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin: 18px 0 0;
  color: #4d38e7;
  font-size: 13px;
  font-weight: 900;
  text-decoration: none;
}

.koperasi-catalog-note {
  margin: 16px 0 0;
  color: #6f7893;
  font-size: 12px;
  line-height: 1.45;
  font-weight: 750;
  text-align: center;
}

.koperasi-more-link.bottom {
  margin-top: 16px;
}

.koperasi-orders-panel {
  margin-top: 18px;
  padding: 18px;
}

.koperasi-panel-head,
.koperasi-cart-head,
.koperasi-payment-box > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.koperasi-panel-head {
  margin-bottom: 14px;
}

.koperasi-panel-head.compact {
  margin-bottom: 14px;
}

.koperasi-panel-head h2,
.koperasi-cart-head h2,
.koperasi-best-seller h3,
.koperasi-mini-chart h3 {
  margin: 0;
  color: #171c3b;
  font-size: 15px;
  font-weight: 950;
}

.koperasi-panel-head a,
.koperasi-panel-head button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #4d38e7;
  background: transparent;
  border: 0;
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
  cursor: pointer;
}

.koperasi-order-table {
  width: 100%;
  overflow-x: hidden;
  border: 1px solid #edf0f7;
  border-radius: 8px;
}

.koperasi-order-table table {
  width: 100%;
  min-width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.koperasi-order-table th,
.koperasi-order-table td {
  padding: 12px 8px;
  border-bottom: 1px solid #edf0f7;
  text-align: left;
  font-size: 11px;
  font-weight: 750;
  color: #344061;
  white-space: nowrap;
}

.koperasi-order-table th:nth-child(1),
.koperasi-order-table td:nth-child(1) {
  width: 17%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.koperasi-order-table th:nth-child(2),
.koperasi-order-table td:nth-child(2) {
  width: 12%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.koperasi-order-table th:nth-child(3),
.koperasi-order-table td:nth-child(3) {
  width: 23%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.koperasi-order-table th:nth-child(4),
.koperasi-order-table td:nth-child(4) {
  width: 8%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.koperasi-order-table th:nth-child(5),
.koperasi-order-table td:nth-child(5) {
  width: 14%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.koperasi-order-table th:nth-child(6),
.koperasi-order-table td:nth-child(6) {
  width: 15%;
}

.koperasi-order-table th:nth-child(7),
.koperasi-order-table td:nth-child(7) {
  width: 11%;
}

.koperasi-order-table th {
  color: #7d86a2;
  background: #fbfcff;
  font-size: 11px;
  font-weight: 900;
}

.koperasi-order-table tr:last-child td {
  border-bottom: 0;
}

.koperasi-order-status.belum_dibayar {
  color: #d98600;
  background: #fff5d8;
}

.koperasi-order-status.lunas,
.koperasi-order-status.selesai {
  color: #109657;
  background: #e6f9ef;
}

.koperasi-order-status.proses {
  color: #2565d8;
  background: #e9f1ff;
}

.koperasi-order-status.batal {
  color: #df3347;
  background: #ffecef;
}

.koperasi-table-action,
.koperasi-more-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 31px;
  border: 1px solid #ded9ff;
  border-radius: 7px;
  background: #fff;
  color: #563fea;
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
}

.koperasi-table-action {
  min-width: 44px;
  padding: 0 9px;
}

.koperasi-more-btn {
  display: none;
  width: 28px;
  margin-left: 5px;
  cursor: pointer;
}

.koperasi-cart-card,
.koperasi-insight-card {
  padding: 18px;
}

.koperasi-cart-head {
  margin-bottom: 17px;
}

.koperasi-cart-head > div {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.koperasi-cart-head svg {
  color: #4d5a77;
}

.koperasi-cart-head > span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  color: #fff;
  background: var(--koop-purple);
  font-size: 13px;
  font-weight: 950;
}

.koperasi-cart-list {
  display: grid;
  gap: 13px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--koop-line);
}

.koperasi-cart-item {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto 24px;
  gap: 10px;
  align-items: center;
}

.koperasi-cart-thumb {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 6px;
  overflow: hidden;
  color: var(--koop-purple);
  background: #f0f3ff;
}

.koperasi-cart-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.koperasi-cart-item strong,
.koperasi-cart-item b {
  display: block;
  color: #1d2444;
  font-size: 12px;
  font-weight: 900;
}

.koperasi-cart-item strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.koperasi-cart-item small {
  display: block;
  margin-top: 5px;
  color: #7c859f;
  font-size: 11px;
  font-weight: 750;
}

.koperasi-cart-item button {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 0;
  background: transparent;
  color: #26304d;
  cursor: pointer;
}

.koperasi-cart-summary,
.koperasi-split-box {
  display: grid;
  gap: 10px;
  padding: 16px 0;
  border-bottom: 1px solid var(--koop-line);
}

.koperasi-cart-summary div,
.koperasi-split-box div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  color: #36415f;
  font-size: 12px;
  font-weight: 750;
}

.koperasi-cart-summary strong,
.koperasi-split-box strong {
  color: #101733;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.koperasi-cart-summary .total-before {
  padding-top: 2px;
  color: #111633;
  font-weight: 900;
}

.koperasi-split-box {
  border-bottom: 0;
}

.koperasi-split-box span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.koperasi-split-box .dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
}

.koperasi-split-box .purple {
  background: var(--koop-purple);
}

.koperasi-split-box .green {
  background: var(--koop-green);
}

.koperasi-split-box .blue {
  background: var(--koop-blue);
}

.koperasi-split-box .orange {
  background: var(--koop-orange);
}

.koperasi-payment-box {
  padding: 17px;
  border-radius: 8px;
  background: linear-gradient(135deg, #f6f3ff, #ece8ff);
}

.koperasi-payment-box span {
  color: #5d41e9;
  font-size: 13px;
  font-weight: 900;
}

.koperasi-payment-box strong {
  color: #5d41e9;
  font-size: 20px;
  font-weight: 950;
}

.koperasi-payment-box button,
.koperasi-payment-box a {
  width: 100%;
  margin-top: 13px;
}

.koperasi-insight-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.koperasi-insight-stats > div,
.koperasi-best-seller,
.koperasi-mini-chart {
  border: 1px solid #edf0f7;
  border-radius: 8px;
  background: #fff;
}

.koperasi-insight-stats > div {
  padding: 12px;
  min-height: 78px;
}

.koperasi-insight-stats span {
  display: block;
  color: #818ba6;
  font-size: 10px;
  font-weight: 850;
}

.koperasi-insight-stats strong {
  display: block;
  margin-top: 5px;
  color: #111633;
  font-size: 14px;
  font-weight: 950;
}

.koperasi-insight-stats small {
  display: block;
  margin-top: 6px;
  color: var(--koop-green);
  font-size: 10px;
  line-height: 1.25;
  font-weight: 850;
}

.koperasi-insight-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.25fr);
  gap: 10px;
  margin-top: 12px;
}

.koperasi-best-seller,
.koperasi-mini-chart {
  padding: 13px;
}

.koperasi-best-seller h3,
.koperasi-mini-chart h3 {
  margin-bottom: 13px;
  font-size: 13px;
}

.koperasi-best-seller div {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-height: 27px;
}

.koperasi-best-seller span {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  color: #fff;
  background: var(--koop-purple);
  font-size: 10px;
  font-weight: 950;
}

.koperasi-best-seller p {
  margin: 0;
  overflow: hidden;
  color: #495370;
  font-size: 11px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.koperasi-best-seller strong {
  color: #6e7792;
  font-size: 10px;
  font-weight: 850;
  white-space: nowrap;
}

.koperasi-chart-canvas {
  position: relative;
  display: flex;
  align-items: end;
  gap: 14px;
  height: 112px;
  padding: 14px 8px 0;
  border-radius: 8px;
  background:
    repeating-linear-gradient(to top, transparent 0 27px, rgba(119, 130, 160, 0.14) 28px),
    linear-gradient(180deg, #fff, #fbfaff);
}

.koperasi-chart-canvas:before {
  content: "";
  position: absolute;
  left: 20px;
  right: 12px;
  bottom: 39px;
  height: 48px;
  border-radius: 60% 45% 55% 50%;
  border-top: 3px solid var(--koop-purple);
  transform: skewY(-8deg);
  pointer-events: none;
}

.koperasi-chart-canvas span {
  width: 18px;
  min-height: 14px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(180deg, rgba(101, 71, 245, 0.85), rgba(101, 71, 245, 0.16));
}

.koperasi-chart-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  color: #8791aa;
  font-size: 10px;
  font-weight: 850;
}

.koperasi-checkout-modal .modal-box {
  max-width: 540px;
}

.koperasi-checkout-modal .btn-primary {
  background: linear-gradient(135deg, var(--koop-purple), var(--koop-purple-dark));
}

@media (max-width: 1360px) {
  .koperasi-page {
    grid-template-columns: minmax(0, 1fr) 370px;
    gap: 18px;
    padding-left: 22px;
    padding-right: 22px;
  }

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

  .koperasi-category-block .koperasi-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1120px) {
  .koperasi-page {
    grid-template-columns: 1fr;
  }

  .koperasi-side {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .koperasi-page {
    padding: 18px 14px 96px;
  }

  .koperasi-heading h1 {
    font-size: 24px;
  }

  .koperasi-tabs {
    display: flex;
    width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
  }

  .koperasi-tab {
    flex: 0 0 auto;
  }

  .koperasi-toolbar {
    grid-template-columns: 1fr 48px 1fr;
  }

  .koperasi-tool-btn span {
    display: none;
  }

  .koperasi-product-grid,
  .koperasi-category-block .koperasi-product-grid,
  .koperasi-insight-stats,
  .koperasi-insight-grid {
    grid-template-columns: 1fr;
  }

  .koperasi-order-table table {
    min-width: 680px;
    table-layout: auto;
  }

  .koperasi-order-table {
    overflow-x: auto;
  }

  .koperasi-cart-item {
    grid-template-columns: 44px minmax(0, 1fr) 24px;
  }

  .koperasi-cart-item b {
    grid-column: 2 / 3;
  }

  .koperasi-cart-item button {
    grid-column: 3;
    grid-row: 1;
  }
}

/* Pesanan Atribut */
.orders-page {
  --orders-ink: #111633;
  --orders-muted: #6c748e;
  --orders-line: #e4e8f2;
  --orders-soft: #f7f9ff;
  --orders-purple: #6547f5;
  --orders-purple-dark: #4a32df;
  --orders-blue: #2f7df6;
  --orders-green: #16a35e;
  --orders-amber: #f59e0b;
  --orders-red: #ef3f57;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 24px;
  padding: 28px 28px 8px;
  color: var(--orders-ink);
}

.orders-main,
.orders-side {
  min-width: 0;
}

.orders-side {
  display: grid;
  gap: 16px;
  align-content: start;
}

.orders-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 18px;
}

.orders-heading h1 {
  margin: 0;
  color: var(--orders-ink);
  font-size: 28px;
  line-height: 1.15;
  font-weight: 950;
}

.orders-heading p {
  margin: 7px 0 0;
  max-width: 620px;
  color: var(--orders-muted);
  font-size: 14px;
  font-weight: 650;
}

.orders-primary-action,
.orders-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 46px;
  padding: 0 18px;
  border: 0;
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(135deg, var(--orders-purple), var(--orders-purple-dark));
  box-shadow: 0 16px 32px rgba(88, 61, 232, 0.24);
  font-size: 13px;
  font-weight: 950;
  text-decoration: none;
  cursor: pointer;
}

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

.orders-stat-card {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 108px;
  padding: 18px;
  border: 1px solid var(--orders-line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 42px rgba(31, 38, 72, 0.055);
}

.orders-stat-card > span {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  color: #fff;
  flex: 0 0 auto;
}

.orders-stat-card.purple > span {
  background: linear-gradient(135deg, #8359fb, #5736e9);
}

.orders-stat-card.amber > span {
  background: linear-gradient(135deg, #ffbd42, #f28b12);
}

.orders-stat-card.blue > span {
  background: linear-gradient(135deg, #4da1ff, #286eea);
}

.orders-stat-card.green > span {
  background: linear-gradient(135deg, #2fcf85, #12985b);
}

.orders-stat-card small {
  display: block;
  color: #6d7690;
  font-size: 12px;
  font-weight: 850;
}

.orders-stat-card strong {
  display: block;
  margin-top: 5px;
  color: #111633;
  font-size: 25px;
  line-height: 1;
  font-weight: 950;
}

.orders-stat-card p {
  margin: 8px 0 0;
  color: #148b55;
  font-size: 11px;
  font-weight: 850;
}

.orders-stat-card.amber p {
  color: #d98600;
}

.orders-stat-card.blue p {
  color: #2565d8;
}

.orders-table-panel,
.orders-tracking-panel,
.orders-form-card,
.orders-help-card {
  border: 1px solid var(--orders-line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 42px rgba(31, 38, 72, 0.055);
}

.orders-table-panel {
  padding: 18px;
}

.orders-filterbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 90px;
  gap: 10px;
  align-items: center;
  margin-bottom: 14px;
}

.orders-tabs {
  display: inline-flex;
  grid-column: 1 / -1;
  min-width: 0;
  width: 100%;
  padding: 4px;
  border: 1px solid var(--orders-line);
  border-radius: 12px;
  background: #f8f9fe;
  overflow-x: hidden;
}

.orders-tab {
  flex: 1 1 0;
  height: 34px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #222946;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
}

.orders-tab.active {
  color: #fff;
  background: linear-gradient(135deg, var(--orders-purple), var(--orders-purple-dark));
  box-shadow: 0 12px 24px rgba(88, 61, 232, 0.22);
}

.orders-search,
.orders-filter-btn {
  height: 44px;
  border: 1px solid var(--orders-line);
  border-radius: 8px;
  background: #fff;
  color: #222946;
}

.orders-search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 13px;
  color: #97a0b8;
}

.orders-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--orders-ink);
  font-size: 12px;
  font-weight: 700;
}

.orders-filter-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.orders-table-wrap {
  width: 100%;
  overflow-x: hidden;
  border: 1px solid #edf0f7;
  border-radius: 8px;
}

.orders-table {
  width: 100%;
  min-width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.orders-table th,
.orders-table td {
  padding: 12px 6px;
  border-bottom: 1px solid #edf0f7;
  text-align: left;
  color: #344061;
  font-size: 12px;
  font-weight: 800;
  vertical-align: middle;
}

.orders-table th {
  color: #7d86a2;
  background: #fbfcff;
  font-size: 11px;
  font-weight: 950;
  white-space: nowrap;
}

.orders-table tr:last-child td {
  border-bottom: 0;
}

.orders-table th:nth-child(1),
.orders-table td:nth-child(1) {
  width: 16%;
}

.orders-table th:nth-child(2),
.orders-table td:nth-child(2) {
  width: 27%;
}

.orders-table th:nth-child(3),
.orders-table td:nth-child(3) {
  width: 9%;
}

.orders-table th:nth-child(4),
.orders-table td:nth-child(4) {
  width: 13%;
}

.orders-table th:nth-child(5),
.orders-table td:nth-child(5) {
  width: 14%;
}

.orders-table th:nth-child(6),
.orders-table td:nth-child(6) {
  width: 9%;
}

.orders-table th:nth-child(7),
.orders-table td:nth-child(7) {
  width: 13%;
}

.orders-table td > strong,
.orders-table td > small {
  display: block;
}

.orders-table td:nth-child(3),
.orders-table td:nth-child(4),
.orders-table td:nth-child(5),
.orders-table td:nth-child(7) {
  white-space: nowrap;
}

.orders-table td > strong {
  overflow: hidden;
  color: #1d2444;
  font-size: 12px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.orders-table td > small {
  margin-top: 5px;
  color: #7b849e;
  font-size: 11px;
  font-weight: 750;
}

.orders-product-cell {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.orders-product-thumb,
.orders-preview-thumb {
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--orders-purple);
  background: #f0f3ff;
}

.orders-product-thumb {
  width: 38px;
  height: 38px;
  border-radius: 7px;
}

.orders-product-thumb img,
.orders-preview-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.orders-product-cell b,
.orders-product-cell small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.orders-product-cell b {
  color: #1d2444;
  font-size: 12px;
  font-weight: 950;
}

.orders-product-cell small {
  margin-top: 5px;
  color: #7b849e;
  font-size: 11px;
  font-weight: 750;
}

.orders-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 23px;
  padding: 0 8px;
  border-radius: 7px;
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
}

.orders-status.belum_dibayar {
  color: #d98600;
  background: #fff5d8;
}

.orders-status.lunas,
.orders-status.selesai {
  color: #109657;
  background: #e6f9ef;
}

.orders-status.proses {
  color: #2565d8;
  background: #e9f1ff;
}

.orders-status.batal {
  color: #df3347;
  background: #ffecef;
}

.orders-row-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 31px;
  padding: 0 8px;
  border: 1px solid #ded9ff;
  border-radius: 7px;
  color: #563fea;
  background: #fff;
  font-size: 11px;
  font-weight: 950;
  text-decoration: none;
}

.orders-empty-state {
  display: none;
  margin: 14px 0 0;
  padding: 15px;
  border: 1px dashed #cfd6e8;
  border-radius: 8px;
  color: #707a96;
  text-align: center;
  font-size: 13px;
  font-weight: 800;
}

.orders-empty-state.show {
  display: block;
}

.orders-tracking-panel,
.orders-form-card,
.orders-help-card {
  padding: 18px;
}

.orders-tracking-panel {
  margin-top: 18px;
}

.orders-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}

.orders-panel-head h2 {
  margin: 0;
  color: #171c3b;
  font-size: 16px;
  font-weight: 950;
}

.orders-panel-head p {
  margin: 6px 0 0;
  color: #737c98;
  font-size: 12px;
  line-height: 1.45;
  font-weight: 700;
}

.orders-panel-head > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 25px;
  padding: 0 10px;
  border-radius: 999px;
  color: var(--orders-purple);
  background: #f0edff;
  font-size: 11px;
  font-weight: 950;
  white-space: nowrap;
}

.orders-fulfillment {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.orders-step {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  min-height: 78px;
  padding: 12px;
  border: 1px solid #edf0f7;
  border-radius: 8px;
  background: #fbfcff;
}

.orders-step span {
  display: grid;
  place-items: center;
  width: 31px;
  height: 31px;
  border-radius: 999px;
  color: #7d86a2;
  background: #eef2fb;
  font-size: 12px;
  font-weight: 950;
}

.orders-step.done {
  border-color: #dbd4ff;
  background: linear-gradient(135deg, #fbfaff, #f5f2ff);
}

.orders-step.done span {
  color: #fff;
  background: var(--orders-purple);
}

.orders-step strong,
.orders-step small {
  display: block;
}

.orders-step strong {
  color: #171c3b;
  font-size: 12px;
  font-weight: 950;
}

.orders-step small {
  margin-top: 5px;
  color: #7c849e;
  font-size: 11px;
  line-height: 1.35;
  font-weight: 700;
}

.orders-form-card label {
  display: block;
  margin: 13px 0 7px;
  color: #4a536f;
  font-size: 12px;
  font-weight: 900;
}

.orders-form-card select,
.orders-form-card input,
.orders-form-card textarea {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--orders-line);
  border-radius: 8px;
  background: #fff;
  color: var(--orders-ink);
  font-size: 13px;
  font-weight: 700;
  outline: 0;
}

.orders-form-card select,
.orders-form-card input {
  padding: 0 12px;
}

.orders-form-card textarea {
  padding: 11px 12px;
  resize: vertical;
}

.orders-preview-card {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 13px;
  align-items: center;
  margin-top: 16px;
  padding: 13px;
  border: 1px solid #edf0f7;
  border-radius: 8px;
  background: #fbfcff;
}

.orders-preview-thumb {
  width: 62px;
  height: 62px;
  border-radius: 8px;
}

.orders-preview-card small,
.orders-preview-card strong,
.orders-preview-card p {
  display: block;
  margin: 0;
}

.orders-preview-card small {
  color: #7b849e;
  font-size: 11px;
  font-weight: 850;
}

.orders-preview-card strong {
  margin-top: 5px;
  overflow: hidden;
  color: #111633;
  font-size: 13px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.orders-preview-card p {
  margin-top: 6px;
  color: #5c657f;
  font-size: 12px;
  font-weight: 800;
}

.orders-cost-card {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  padding: 14px;
  border-radius: 8px;
  background: linear-gradient(135deg, #f6f3ff, #ece8ff);
}

.orders-cost-card div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #4f5876;
  font-size: 12px;
  font-weight: 850;
}

.orders-cost-card strong {
  color: #111633;
  font-size: 12px;
  font-weight: 950;
  white-space: nowrap;
}

.orders-cost-card .total {
  padding-top: 10px;
  border-top: 1px solid rgba(101, 71, 245, 0.16);
  color: #5d41e9;
}

.orders-cost-card .total strong {
  color: #5d41e9;
  font-size: 18px;
}

.orders-submit {
  width: 100%;
  margin-top: 15px;
}

.orders-help-card {
  background:
    radial-gradient(circle at 84% 14%, rgba(255, 255, 255, 0.52), transparent 24%),
    linear-gradient(145deg, #f4f1ff, #ece8ff 46%, #e1dcff);
}

.orders-help-icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 15px;
  color: #fff;
  background: linear-gradient(135deg, var(--orders-purple), var(--orders-purple-dark));
  box-shadow: 0 14px 30px rgba(88, 61, 232, 0.26);
}

.orders-help-card h2 {
  margin: 16px 0 0;
  color: #3d2fd3;
  font-size: 18px;
  line-height: 1.25;
  font-weight: 950;
}

.orders-help-card p {
  margin: 10px 0 18px;
  color: #5f6685;
  font-size: 12px;
  line-height: 1.55;
  font-weight: 700;
}

.orders-help-card a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #4d38e7;
  font-size: 13px;
  font-weight: 950;
  text-decoration: none;
}

@media (max-width: 1360px) {
  .orders-page {
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 18px;
    padding-left: 22px;
    padding-right: 22px;
  }

  .orders-filterbar {
    grid-template-columns: 1fr 1fr 86px;
  }
}

@media (max-width: 1120px) {
  .orders-page {
    grid-template-columns: 1fr;
  }

  .orders-side {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .orders-page {
    padding: 18px 14px 96px;
  }

  .orders-heading {
    display: grid;
  }

  .orders-heading h1 {
    font-size: 24px;
  }

  .orders-primary-action {
    width: 100%;
  }

  .orders-stat-grid,
  .orders-filterbar,
  .orders-fulfillment {
    grid-template-columns: 1fr;
  }

  .orders-tabs {
    width: 100%;
    overflow-x: auto;
  }

  .orders-tab {
    flex: 0 0 auto;
  }

  .orders-table-wrap {
    overflow-x: auto;
  }

  .orders-table {
    min-width: 760px;
    table-layout: auto;
  }
}

/* Master marketplace insight */
.master-marketplace-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 18px;
  margin: 18px 0 26px;
}

.master-marketplace-card .dash-card-head a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #5b3ff0;
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
}

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

.master-marketplace-stats > div,
.master-marketplace-status > div,
.master-marketplace-list,
.master-marketplace-recent {
  border: 1px solid #e6eaf4;
  border-radius: 8px;
  background: #fff;
}

.master-marketplace-stats > div {
  min-height: 96px;
  padding: 14px;
}

.master-marketplace-stats span {
  display: block;
  color: #7d86a2;
  font-size: 11px;
  font-weight: 900;
}

.master-marketplace-stats strong {
  display: block;
  margin-top: 7px;
  color: #111633;
  font-size: 19px;
  line-height: 1.15;
  font-weight: 950;
}

.master-marketplace-stats small {
  display: block;
  margin-top: 7px;
  color: #11945a;
  font-size: 10px;
  line-height: 1.35;
  font-weight: 850;
}

.master-marketplace-status {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-top: 13px;
}

.master-marketplace-status > div {
  padding: 11px;
}

.master-marketplace-status span,
.master-marketplace-status strong {
  display: block;
}

.master-marketplace-status span {
  color: #7d86a2;
  font-size: 10px;
  font-weight: 850;
}

.master-marketplace-status strong {
  margin-top: 6px;
  color: #111633;
  font-size: 16px;
  font-weight: 950;
}

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

.master-marketplace-list {
  padding: 14px;
}

.master-marketplace-list h3,
.master-marketplace-recent h3 {
  margin: 0 0 12px;
  color: #171c3b;
  font-size: 13px;
  font-weight: 950;
}

.master-marketplace-list div {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  min-height: 31px;
}

.master-marketplace-list div + div {
  margin-top: 7px;
}

.master-marketplace-list span {
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  border-radius: 999px;
  color: #fff;
  background: #6547f5;
  font-size: 10px;
  font-weight: 950;
}

.master-marketplace-list p {
  margin: 0;
  overflow: hidden;
  color: #42506d;
  font-size: 11px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.master-marketplace-list strong {
  color: #6e7792;
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
}

.master-marketplace-recent {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  padding: 14px;
}

.master-marketplace-recent > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-top: 10px;
  border-top: 1px solid #eef1f7;
}

.master-marketplace-recent strong,
.master-marketplace-recent small {
  display: block;
}

.master-marketplace-recent strong {
  color: #1d2444;
  font-size: 12px;
  font-weight: 950;
}

.master-marketplace-recent small {
  margin-top: 5px;
  color: #7b849e;
  font-size: 11px;
  font-weight: 750;
}

.master-marketplace-recent b {
  color: #111633;
  font-size: 12px;
  font-weight: 950;
  white-space: nowrap;
}

.master-marketplace-empty {
  margin: 0;
  color: #7b849e;
  font-size: 12px;
  font-weight: 750;
}

@media (max-width: 1180px) {
  .master-marketplace-grid,
  .master-marketplace-analytics {
    grid-template-columns: 1fr;
  }

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

@media (max-width: 760px) {
  .master-marketplace-stats,
  .master-marketplace-status {
    grid-template-columns: 1fr;
  }
}

/* Master administrator console */
.master-admin-body {
  background: #f8fbff;
  color: #0b163f;
  min-height: 100vh;
  overflow-x: hidden;
}

.master-admin-body .chat-widget,
.master-admin-body #myorg-chat-widget {
  display: none;
}

.master-admin-shell {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  min-height: 100vh;
  background:
    radial-gradient(circle at 76% 12%, rgba(124, 58, 237, .08), transparent 24rem),
    linear-gradient(180deg, #fbfdff 0%, #f7faff 100%);
}

.admin-sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 24px 14px 18px;
  border-right: 1px solid #e6ebf5;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(14px);
  display: flex;
  flex-direction: column;
  gap: 18px;
  overflow-y: auto;
}

.admin-sidebar::-webkit-scrollbar {
  width: 6px;
}

.admin-sidebar::-webkit-scrollbar-thumb {
  background: #d7def0;
  border-radius: 999px;
}

.admin-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0 4px 10px;
  color: #0b163f;
  text-decoration: none;
}

.admin-brand-mark,
.admin-stat-icon,
.admin-mini-icon,
.admin-timeline-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.admin-brand-mark {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(135deg, #7c3aed, #2563eb);
  box-shadow: 0 12px 26px rgba(79, 70, 229, .22);
}

.admin-brand strong {
  display: block;
  font-size: 1.08rem;
  font-weight: 850;
  color: #1830c8;
}

.admin-wordmark {
  display: inline-flex !important;
  align-items: baseline;
  gap: 8px;
}

.admin-brand small {
  display: block;
  margin-top: 2px;
  color: #7c3aed;
  font-size: .78rem;
  font-weight: 700;
}

.admin-nav {
  display: grid;
  gap: 5px;
}

.admin-nav-link {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 42px;
  padding: 10px 12px;
  color: #24345d;
  text-decoration: none;
  border-radius: 8px;
  font-size: .91rem;
  font-weight: 720;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}

.admin-nav-link:hover {
  background: #f1f5ff;
  color: #4f46e5;
}

.admin-nav-link.active {
  color: #fff;
  background: linear-gradient(135deg, #6d5dfc, #8b5cf6);
  box-shadow: 0 12px 24px rgba(99, 102, 241, .24);
}

.admin-system-card {
  margin-top: auto;
  padding: 14px;
  border: 1px solid #e6ebf5;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 32px rgba(15, 23, 42, .05);
}

.admin-system-head,
.admin-system-row,
.admin-sidebar-footer,
.admin-section-head,
.admin-panel-head,
.admin-row-between,
.admin-table-actions,
.admin-form-row,
.admin-filter-row,
.admin-detail-line,
.admin-topbar,
.admin-top-actions,
.admin-profile-chip,
.admin-icon-button,
.admin-search,
.admin-page-title,
.admin-tabs,
.admin-action-bar,
.admin-stacked-row {
  display: flex;
  align-items: center;
}

.admin-system-head {
  justify-content: space-between;
  margin-bottom: 12px;
}

.admin-system-head span {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  font-weight: 850;
  font-size: .88rem;
}

.admin-system-head b,
.admin-status.success,
.admin-badge.success {
  color: #0f9f58;
  background: #e8f8ef;
}

.admin-system-head b {
  padding: 5px 10px;
  border-radius: 999px;
  font-size: .75rem;
}

.admin-system-row {
  justify-content: space-between;
  gap: 10px;
  margin-top: 9px;
  color: #60708f;
  font-size: .78rem;
}

.admin-system-row strong {
  color: #1f7a4b;
  font-weight: 700;
}

.admin-storage {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  margin-top: 12px;
  color: #60708f;
  font-size: .78rem;
}

.admin-storage i {
  grid-column: 1 / -1;
  display: block;
  height: 6px;
  border-radius: 999px;
  background: #ecf0f8;
  overflow: hidden;
}

.admin-storage em {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #6d5dfc, #a855f7);
}

.admin-sidebar-footer {
  justify-content: space-between;
  gap: 12px;
  color: #7d89a6;
  font-size: .77rem;
}

.admin-collapse,
.admin-icon-button,
.admin-menu-toggle {
  border: 1px solid #e1e8f5;
  background: #fff;
  color: #24345d;
  cursor: pointer;
}

.admin-collapse {
  width: 38px;
  height: 38px;
  border-radius: 8px;
}

.admin-main {
  min-width: 0;
  padding: 0 24px 34px;
}

.admin-topbar {
  position: sticky;
  z-index: 40;
  top: 0;
  min-height: 70px;
  justify-content: space-between;
  gap: 18px;
  margin: 0 -24px 22px;
  padding: 12px 26px;
  border-bottom: 1px solid #e6ebf5;
  background: rgba(255, 255, 255, .86);
  backdrop-filter: blur(16px);
}

.admin-menu-toggle {
  display: none;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
}

.admin-menu-toggle span {
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: #24345d;
}

.admin-search {
  flex: 1;
  max-width: 600px;
  min-height: 42px;
  gap: 10px;
  padding: 0 14px;
  border: 1px solid #dfe7f5;
  border-radius: 8px;
  background: #fff;
  color: #7a86a3;
  box-shadow: 0 10px 28px rgba(15, 23, 42, .04);
}

.admin-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #172244;
  font: inherit;
  font-size: .9rem;
}

.admin-search kbd {
  padding: 4px 8px;
  border: 1px solid #e1e8f5;
  border-radius: 6px;
  background: #f8faff;
  color: #6b7590;
  font-size: .74rem;
}

.admin-top-actions {
  margin-left: auto;
  gap: 12px;
}

.admin-top-actions .notif-btn,
.admin-icon-button {
  width: 42px;
  height: 42px;
  border-radius: 8px;
}

.admin-icon-button {
  position: relative;
  justify-content: center;
  text-decoration: none;
}

.admin-icon-button span {
  position: absolute;
  top: -5px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #6d5dfc;
  color: #fff;
  font-size: .67rem;
  line-height: 18px;
  text-align: center;
}

.admin-profile-chip {
  gap: 10px;
  color: #172244;
  text-decoration: none;
  padding-left: 6px;
}

.admin-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 850;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
}

.admin-profile-chip strong {
  display: block;
  font-size: .9rem;
}

.admin-profile-chip small {
  display: block;
  color: #60708f;
  font-size: .75rem;
}

.admin-page {
  display: grid;
  gap: 18px;
}

.admin-page-title {
  justify-content: space-between;
  gap: 20px;
  margin: 4px 0 6px;
}

.admin-page-title h1 {
  margin: 0;
  color: #0b163f;
  font-size: 1.6rem;
  font-weight: 900;
}

.admin-page-title p {
  margin: 5px 0 0;
  color: #60708f;
  font-size: .93rem;
}

.admin-action-bar {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.admin-btn {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 8px;
  border: 1px solid #dfe7f5;
  background: #fff;
  color: #25345d;
  font-weight: 800;
  font-size: .84rem;
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
}

.admin-btn.primary {
  border-color: transparent;
  color: #fff;
  background: linear-gradient(135deg, #5b5cf6, #7c3aed);
  box-shadow: 0 12px 24px rgba(99, 102, 241, .22);
}

.admin-btn.success {
  border-color: #bdebd0;
  color: #0f9f58;
  background: #effcf5;
}

.admin-btn.danger {
  border-color: #fecaca;
  color: #ef4444;
  background: #fff7f7;
}

.admin-btn.blue {
  border-color: #bfdbfe;
  color: #2563eb;
  background: #eff6ff;
}

.admin-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.admin-stat-grid.cols-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.admin-stat-grid.cols-6 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.admin-stat-card,
.admin-card,
.admin-panel {
  border: 1px solid #e1e8f5;
  border-radius: 8px;
  background: rgba(255, 255, 255, .95);
  box-shadow: 0 14px 34px rgba(15, 23, 42, .05);
}

.admin-stat-card {
  min-height: 112px;
  padding: 18px;
  display: flex;
  gap: 14px;
  align-items: center;
}

.admin-grid-main > .admin-page > .admin-stat-grid.cols-5,
.admin-grid-main > .admin-page > .admin-stat-grid.cols-6 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.admin-stat-card > span:last-child {
  min-width: 0;
}

.admin-stat-icon {
  width: 52px;
  height: 52px;
  border-radius: 8px;
}

.admin-tone-purple { color: #6d5dfc; background: #f0edff; }
.admin-tone-blue { color: #2563eb; background: #eaf3ff; }
.admin-tone-green { color: #16a34a; background: #eaf8ef; }
.admin-tone-orange { color: #f97316; background: #fff3e6; }
.admin-tone-red { color: #ef4444; background: #ffecee; }

.admin-stat-card small {
  display: block;
  color: #60708f;
  font-weight: 750;
  font-size: .8rem;
}

.admin-stat-card strong {
  display: block;
  margin-top: 5px;
  color: #0b163f;
  font-size: 1.45rem;
  line-height: 1;
  font-weight: 900;
}

.admin-trend {
  display: inline-flex;
  align-items: center;
  margin-top: 9px;
  color: #13a05f;
  font-size: .78rem;
  font-weight: 800;
}

.admin-trend.down {
  color: #ef4444;
}

.admin-grid-2,
.admin-grid-main,
.admin-grid-side,
.admin-grid-3 {
  display: grid;
  gap: 16px;
}

.admin-grid-2 {
  grid-template-columns: minmax(0, 1fr) minmax(320px, .56fr);
}

.admin-grid-main {
  grid-template-columns: minmax(0, 1fr) 356px;
  align-items: start;
}

.admin-grid-side {
  grid-template-columns: minmax(280px, .95fr) minmax(0, 1.3fr);
}

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

.admin-card,
.admin-panel {
  padding: 18px;
}

.admin-panel.no-pad {
  padding: 0;
  overflow: hidden;
}

.admin-panel-head {
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.admin-panel-head h2,
.admin-card h2 {
  margin: 0;
  color: #0b163f;
  font-size: 1.02rem;
  font-weight: 900;
}

.admin-panel-head a {
  color: #5b5cf6;
  text-decoration: none;
  font-size: .82rem;
  font-weight: 800;
}

.admin-filter-row {
  flex-wrap: wrap;
  gap: 10px;
  padding: 14px;
  border-bottom: 1px solid #edf1f8;
}

.admin-input,
.admin-select,
.admin-textarea {
  width: 100%;
  min-height: 38px;
  border: 1px solid #dfe7f5;
  border-radius: 8px;
  background: #fff;
  color: #172244;
  padding: 9px 11px;
  font: inherit;
  font-size: .85rem;
  outline: none;
}

.admin-input:focus,
.admin-select:focus,
.admin-textarea:focus {
  border-color: #8b5cf6;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, .12);
}

.admin-filter-row .admin-input {
  max-width: 330px;
  flex: 1 1 240px;
}

.admin-filter-row .admin-select {
  width: 170px;
}

.admin-table-wrap {
  overflow-x: auto;
}

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

.admin-table th {
  padding: 13px 14px;
  text-align: left;
  color: #60708f;
  font-size: .74rem;
  font-weight: 850;
  background: #fbfcff;
  border-bottom: 1px solid #edf1f8;
}

.admin-table td {
  padding: 13px 14px;
  border-bottom: 1px solid #edf1f8;
  color: #273a63;
  font-size: .84rem;
  vertical-align: middle;
}

.admin-table tbody tr.selected,
.admin-table tbody tr:hover {
  background: #f8f5ff;
}

.admin-table tbody tr.selected td {
  border-top: 1px solid #a78bfa;
  border-bottom: 1px solid #a78bfa;
}

.admin-table-actions {
  gap: 6px;
  flex-wrap: wrap;
}

.admin-mini-btn {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #dfe7f5;
  border-radius: 8px;
  background: #fff;
  color: #46577d;
  cursor: pointer;
}

.admin-badge,
.admin-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: .73rem;
  font-weight: 850;
  white-space: nowrap;
}

.admin-badge.info,
.admin-status.info {
  color: #2563eb;
  background: #eaf3ff;
}

.admin-badge.warning,
.admin-status.warning {
  color: #d97706;
  background: #fff5db;
}

.admin-badge.danger,
.admin-status.danger {
  color: #ef4444;
  background: #ffecee;
}

.admin-badge.purple,
.admin-status.purple {
  color: #6d5dfc;
  background: #f0edff;
}

.admin-badge.neutral,
.admin-status.neutral {
  color: #60708f;
  background: #f2f5fa;
}

.admin-pagination {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  padding: 13px 14px;
  color: #60708f;
  font-size: .82rem;
}

.admin-page-dot {
  min-width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e1e8f5;
  border-radius: 8px;
  background: #fff;
  color: #4e5c78;
  font-weight: 800;
}

.admin-page-dot.active {
  border-color: transparent;
  color: #fff;
  background: linear-gradient(135deg, #6d5dfc, #7c3aed);
}

.admin-detail {
  position: sticky;
  top: 92px;
  align-self: start;
}

.admin-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid #edf1f8;
  margin-bottom: 14px;
}

.admin-detail-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.admin-detail-title h2 {
  margin: 0;
  font-size: 1rem;
  font-weight: 900;
}

.admin-detail-title p {
  margin: 4px 0 0;
  color: #60708f;
  font-size: .8rem;
}

.admin-org-logo,
.admin-product-thumb,
.admin-user-photo {
  border-radius: 8px;
  background: #f3f6fc;
  overflow: hidden;
  flex-shrink: 0;
}

.admin-org-logo {
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #6d5dfc;
  font-weight: 900;
}

.admin-product-thumb {
  width: 46px;
  height: 46px;
}

.admin-user-photo {
  width: 44px;
  height: 44px;
  border-radius: 50%;
}

.admin-org-logo img,
.admin-product-thumb img,
.admin-user-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.admin-detail-line {
  justify-content: space-between;
  gap: 18px;
  padding: 9px 0;
  color: #60708f;
  font-size: .82rem;
}

.admin-detail-line strong {
  color: #172244;
  text-align: right;
}

.admin-divider {
  height: 1px;
  background: #edf1f8;
  margin: 12px 0;
}

.admin-timeline {
  display: grid;
  gap: 13px;
  margin-top: 12px;
}

.admin-timeline-item {
  display: grid;
  grid-template-columns: 26px 1fr auto;
  gap: 10px;
  align-items: start;
}

.admin-timeline-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: #6d5dfc;
  background: #f0edff;
  font-size: .72rem;
  font-weight: 900;
}

.admin-timeline-item strong {
  display: block;
  color: #172244;
  font-size: .84rem;
}

.admin-timeline-item small,
.admin-muted {
  color: #60708f;
  font-size: .78rem;
}

.admin-empty {
  padding: 28px;
  text-align: center;
  color: #60708f;
}

.admin-tabs {
  gap: 12px;
  border-bottom: 1px solid #edf1f8;
}

.admin-tab {
  padding: 12px 2px;
  border-bottom: 2px solid transparent;
  color: #50607f;
  font-weight: 850;
  font-size: .85rem;
  text-decoration: none;
}

.admin-tab.active {
  color: #5b5cf6;
  border-color: #6d5dfc;
}

.admin-progress {
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: #eef2fb;
}

.admin-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #6d5dfc, #2563eb);
}

.admin-donut {
  width: 142px;
  height: 142px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin: 8px auto;
  background: conic-gradient(#6d5dfc 0 64%, #2f7df6 64% 82%, #22c55e 82% 92%, #fb923c 92% 100%);
}

.admin-donut span {
  width: 86px;
  height: 86px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  text-align: center;
  color: #0b163f;
  font-weight: 900;
}

.admin-donut small {
  display: block;
  margin-top: -18px;
  color: #60708f;
  font-size: .72rem;
}

.admin-line-chart {
  min-height: 230px;
  position: relative;
  padding: 12px 4px 0;
}

.admin-line-chart svg {
  width: 100%;
  height: 190px;
  overflow: visible;
}

.admin-line-chart .grid {
  stroke: #dfe7f5;
  stroke-width: 1;
  stroke-dasharray: 4 6;
}

.admin-line-chart .line-purple {
  fill: none;
  stroke: #6d5dfc;
  stroke-width: 3;
}

.admin-line-chart .line-blue {
  fill: none;
  stroke: #2563eb;
  stroke-width: 3;
}

.admin-line-chart .area {
  fill: url(#adminAreaGradient);
}

.admin-chart-months {
  display: flex;
  justify-content: space-between;
  color: #60708f;
  font-size: .74rem;
  padding: 0 2px;
}

.admin-bars {
  display: grid;
  gap: 12px;
}

.admin-bar-row {
  display: grid;
  grid-template-columns: 145px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  color: #33466f;
  font-size: .82rem;
}

.admin-bar-track {
  height: 8px;
  border-radius: 999px;
  background: #eef2fb;
  overflow: hidden;
}

.admin-bar-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #9b7cff, #5b5cf6);
}

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

.admin-field {
  display: grid;
  gap: 6px;
}

.admin-field label {
  color: #39496d;
  font-size: .78rem;
  font-weight: 850;
}

.admin-switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px;
  border: 1px solid #edf1f8;
  border-radius: 8px;
}

.admin-switch {
  position: relative;
  width: 44px;
  height: 24px;
  display: inline-flex;
  flex-shrink: 0;
}

.admin-switch input {
  opacity: 0;
}

.admin-switch span {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: #d8deec;
  transition: background .18s ease;
}

.admin-switch span:before {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  left: 3px;
  top: 3px;
  border-radius: 50%;
  background: #fff;
  transition: transform .18s ease;
  box-shadow: 0 2px 5px rgba(15, 23, 42, .16);
}

.admin-switch input:checked + span {
  background: #6d5dfc;
}

.admin-switch input:checked + span:before {
  transform: translateX(20px);
}

.admin-alert {
  margin: 14px 0;
  padding: 12px 14px;
  border-radius: 8px;
  font-weight: 750;
  font-size: .86rem;
}

.admin-alert.success {
  color: #0f7a4b;
  background: #e8f8ef;
  border: 1px solid #bdebd0;
}

.admin-alert.error {
  color: #b91c1c;
  background: #fff1f2;
  border: 1px solid #fecdd3;
}

.admin-split-card {
  padding: 16px;
  border: 1px solid #edf1f8;
  border-radius: 8px;
  background: #fbfcff;
}

.admin-profile-hero {
  min-height: 158px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 28px;
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(109, 93, 252, .18), rgba(37, 99, 235, .08)),
    #fff;
  border: 1px solid #e1e8f5;
}

.admin-profile-main {
  display: flex;
  align-items: center;
  gap: 22px;
}

.admin-profile-main .admin-avatar {
  width: 104px;
  height: 104px;
  font-size: 2rem;
}

.admin-profile-main h2 {
  margin: 0 0 6px;
  font-size: 1.55rem;
}

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

.admin-mini-card {
  padding: 12px;
  border: 1px solid #edf1f8;
  border-radius: 8px;
  background: #fff;
}

.admin-mini-card strong {
  display: block;
  color: #0b163f;
  font-size: 1.12rem;
}

.admin-mini-card small {
  color: #60708f;
}

.admin-document-grid,
.admin-template-list {
  display: grid;
  gap: 10px;
}

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

.admin-doc {
  padding: 12px;
  border: 1px solid #e1e8f5;
  border-radius: 8px;
  text-align: center;
  color: #25345d;
  font-size: .78rem;
  background: #fbfcff;
}

.admin-map-placeholder,
.admin-heatmap {
  min-height: 154px;
  border-radius: 8px;
  background:
    radial-gradient(circle at 20% 45%, rgba(109, 93, 252, .28), transparent 18px),
    radial-gradient(circle at 44% 56%, rgba(37, 99, 235, .20), transparent 28px),
    linear-gradient(135deg, #f2f5ff, #fbfcff);
  border: 1px solid #edf1f8;
}

.admin-heatmap {
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  gap: 4px;
  padding: 14px;
  min-height: auto;
}

.admin-heatmap i {
  aspect-ratio: 1;
  border-radius: 4px;
  background: #ede9fe;
}

.admin-heatmap i:nth-child(3n) { background: #c4b5fd; }
.admin-heatmap i:nth-child(5n) { background: #a78bfa; }
.admin-heatmap i:nth-child(11n) { background: #6d5dfc; }

.admin-setting-tabs {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 0;
  border: 1px solid #e1e8f5;
  border-radius: 8px;
  background: #fff;
  overflow-x: auto;
}

.admin-setting-tabs span {
  min-width: 132px;
  padding: 13px 12px;
  color: #39496d;
  font-size: .82rem;
  font-weight: 850;
  text-align: center;
  border-bottom: 2px solid transparent;
}

.admin-setting-tabs span.active {
  color: #5b5cf6;
  border-color: #6d5dfc;
}

.admin-preview-panel {
  padding: 14px;
  border-radius: 8px;
  background: linear-gradient(135deg, #6d5dfc, #a855f7);
  color: #fff;
}

.admin-preview-inner {
  margin-top: 12px;
  padding: 14px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .92);
  color: #172244;
}

.admin-checkbox {
  width: 18px;
  height: 18px;
  accent-color: #6d5dfc;
}

@media (max-width: 1180px) {
  .admin-stat-grid,
  .admin-stat-grid.cols-5,
  .admin-stat-grid.cols-6 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .admin-grid-main,
  .admin-grid-2,
  .admin-grid-side,
  .admin-grid-3 {
    grid-template-columns: 1fr;
  }
  .admin-detail {
    position: static;
  }
}

@media (max-width: 860px) {
  .master-admin-shell {
    grid-template-columns: 1fr;
  }
  .admin-sidebar {
    position: fixed;
    z-index: 80;
    inset: 0 auto 0 0;
    width: 280px;
    transform: translateX(-105%);
    transition: transform .2s ease;
  }
  .master-admin-shell.nav-open .admin-sidebar {
    transform: translateX(0);
  }
  .master-admin-shell.nav-open .nav-overlay {
    opacity: 1;
    pointer-events: auto;
  }
  .admin-menu-toggle {
    display: flex;
  }
  .admin-main {
    padding: 0 14px 24px;
  }
  .admin-topbar {
    margin: 0 -14px 18px;
    padding: 10px 14px;
  }
  .admin-search {
    max-width: none;
  }
  .admin-profile-chip span:not(.admin-avatar),
  .admin-profile-chip svg,
  .admin-search kbd {
    display: none;
  }
  .admin-page-title {
    align-items: flex-start;
    flex-direction: column;
  }
  .admin-action-bar {
    justify-content: flex-start;
  }
  .admin-form-grid,
  .admin-document-grid,
  .admin-mini-grid,
  .admin-stat-grid,
  .admin-stat-grid.cols-5,
  .admin-stat-grid.cols-6 {
    grid-template-columns: 1fr;
  }
}