/* HEXBLUE Content Studio — light cloud-tech console theme.
   Loaded after the existing workspace styles so behaviour and layout remain intact. */

:root {
  --ink: #191c21;
  --muted: #667085;
  --line: #dfe7f5;
  --soft: #f3f6ff;
  --canvas: #f7f9ff;
  --card: rgb(255 255 255 / 88%);
  --nav: #ffffff;
  --nav-2: #f4f7ff;
  --brand: #1366ec;
  --brand-dark: #0d54cf;
  --blue: #1366ec;
  --violet: #7f5bff;
  --cyan: #08a8f5;
  --success: #087a61;
  --warning: #b66a06;
  --shadow: 0 18px 48px rgb(55 78 145 / 9%);
  color: var(--ink);
  background: var(--canvas);
  font-family: Inter, "Segoe UI Variable Text", "Microsoft YaHei UI", "PingFang SC", system-ui, sans-serif;
}

html { background: var(--canvas); }
body {
  color: var(--ink);
  background:
    radial-gradient(circle at 82% -8%, rgb(127 91 255 / 15%), transparent 31rem),
    radial-gradient(circle at 38% 8%, rgb(8 168 245 / 12%), transparent 35rem),
    linear-gradient(180deg, #fbfcff 0%, #f5f8ff 48%, #f9faff 100%);
}
body::before {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image:
    linear-gradient(rgb(81 111 187 / 4%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(81 111 187 / 4%) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, #000 0%, transparent 70%);
  content: "";
}

a, button, input, select, textarea { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible,
[contenteditable="true"]:focus-visible {
  outline: 3px solid rgb(19 102 236 / 23%);
  outline-offset: 2px;
}

/* Login */
.login-page {
  background:
    radial-gradient(circle at 14% 12%, rgb(8 168 245 / 19%), transparent 27rem),
    radial-gradient(circle at 82% 70%, rgb(127 91 255 / 17%), transparent 31rem),
    #f7f9ff;
}
.login-intro {
  color: var(--ink);
  background:
    linear-gradient(135deg, rgb(255 255 255 / 92%), rgb(239 246 255 / 76%)),
    #f5f8ff;
  border-right: 1px solid rgb(190 207 237 / 72%);
}
.login-intro::before {
  border-color: rgb(19 102 236 / 13%);
  box-shadow: 0 0 0 44px rgb(19 102 236 / 4%), 0 0 0 88px rgb(127 91 255 / 3%);
}
.login-intro::after {
  background: linear-gradient(135deg, rgb(8 168 245 / 68%), rgb(127 91 255 / 54%));
  filter: blur(5px);
}
.login-copy h1 { color: #171a21; }
.login-copy h1 em {
  color: transparent;
  background: linear-gradient(105deg, #1366ec, #7f5bff 76%);
  background-clip: text;
  -webkit-background-clip: text;
}
.login-copy p { color: #58677f; }
.login-foot { color: #7c88a0; }
.login-panel { background: rgb(255 255 255 / 60%); backdrop-filter: blur(22px); }
.login-card {
  padding: clamp(25px, 4vw, 42px);
  border: 1px solid rgb(211 222 244 / 88%);
  border-radius: 24px;
  background: rgb(255 255 255 / 86%);
  box-shadow: 0 30px 80px rgb(45 73 139 / 12%);
  backdrop-filter: blur(18px);
}
.login-help {
  border-left-color: var(--brand);
  color: #5c6980;
  background: linear-gradient(90deg, #eef5ff, #f7f4ff);
}

/* Shell and navigation */
.app-shell { grid-template-columns: 264px minmax(0, 1fr); }
.sidebar {
  position: sticky;
  isolation: isolate;
  overflow: hidden;
  color: #495875;
  background: linear-gradient(165deg, rgb(255 255 255 / 96%), rgb(243 247 255 / 93%));
  border-right: 1px solid rgb(210 221 243 / 90%);
  box-shadow: 16px 0 45px rgb(46 72 128 / 6%);
}
.sidebar::before {
  display: block;
  position: absolute;
  z-index: -1;
  top: -145px;
  right: -120px;
  width: 300px;
  height: 300px;
  border: 1px solid rgb(19 102 236 / 11%);
  border-radius: 50%;
  box-shadow: 0 0 0 38px rgb(19 102 236 / 3%), 0 0 0 78px rgb(127 91 255 / 2%);
  content: "";
}
.sidebar .brand-lockup { color: #1c2840; }
.brand-logo, .sidebar .brand-logo { background:transparent; box-shadow:none; }
.workspace-label { color: #8490a8; }
.nav-item {
  min-height: 44px;
  color: #65738c;
  border: 1px solid transparent;
  transition: color .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.nav-item:hover {
  color: #164fba;
  border-color: rgb(192 210 242 / 68%);
  background: rgb(255 255 255 / 72%);
}
.nav-item.is-active {
  color: #1257cc;
  border-color: rgb(176 203 247 / 72%);
  background: linear-gradient(105deg, rgb(225 239 255 / 94%), rgb(241 236 255 / 76%));
  box-shadow: 0 9px 22px rgb(49 91 182 / 8%);
}
.nav-item.is-active::after { width: 3px; background: linear-gradient(#08a8f5, #7f5bff); }
.nav-item--external, .nav-item--tracking {
  color: #65738c;
  box-shadow: inset 0 1px rgb(205 217 239 / 74%);
}
.nav-item--external:hover, .nav-item--tracking:hover,
.nav-item--tracking.is-active {
  color: #1257cc;
  background: linear-gradient(105deg, rgb(225 239 255 / 90%), rgb(242 237 255 / 72%));
  box-shadow: inset 0 0 0 1px rgb(176 203 247 / 60%);
}
.nav-item--external b { color: #5f76a5; }
.nav-icon--products, .nav-icon--modtek, .nav-icon--articles, .nav-icon--media,
.nav-icon--manuals, .nav-icon--inquiries, .nav-icon--settings, .nav-icon--reception,
.nav-icon--tracking { color: #4974cc; }
.side-card {
  color: #66738b;
  border-color: rgb(199 215 240 / 78%);
  background: linear-gradient(135deg, rgb(255 255 255 / 86%), rgb(237 243 255 / 78%));
}
.side-card strong { color: #273650; }
.logout-link { color: #71809b; }
.logout-link:hover { color: #1257cc; }

/* Main workspace */
.main { position: relative; z-index: 0; }
.main::before { display: none; }
.topbar {
  position: sticky;
  top: 0;
  z-index: 8;
  min-height: 70px;
  margin: 0 -24px 31px;
  padding: 0 24px;
  border-bottom: 1px solid rgb(211 222 241 / 76%);
  background: rgb(248 250 255 / 80%);
  backdrop-filter: blur(20px) saturate(145%);
}
.crumb strong { color: #26334b; }
.user-chip {
  border-color: rgb(206 219 242 / 88%);
  background: rgb(255 255 255 / 82%);
  box-shadow: 0 8px 22px rgb(42 69 129 / 7%);
}
.avatar { color: #fff; background: linear-gradient(135deg, #08a8f5, #7f5bff); }
.page-heading h1 {
  color: #1b1f27;
  font-family: "Segoe UI Variable Display", "Microsoft YaHei UI", sans-serif;
  font-weight: 760;
}
.page-heading p { color: #66748b; }

/* Buttons */
.button {
  min-height: 40px;
  color: #3e4d68;
  border: 1px solid #d9e4f5;
  border-radius: 10px;
  background: rgb(255 255 255 / 84%);
  box-shadow: 0 5px 14px rgb(44 72 132 / 4%);
  transition: color .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s ease;
}
.button:hover:not(:disabled) {
  color: #1257cc;
  border-color: #a9c7f7;
  background: #fff;
  box-shadow: 0 10px 22px rgb(39 83 174 / 11%);
  transform: translateY(-1px);
}
.button.primary, .button.dark {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(105deg, #08a8f5, #1366ec 52%, #7f5bff);
  box-shadow: 0 10px 24px rgb(49 91 207 / 20%);
}
.button.primary:hover:not(:disabled), .button.dark:hover:not(:disabled) {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(105deg, #169fdf, #0e58d9 52%, #7049ee);
  box-shadow: 0 14px 28px rgb(49 91 207 / 26%);
}
.button.ghost { color: #3f4d67; border-color: #d9e4f5; background: rgb(255 255 255 / 76%); }
.button.danger { color: #b4233c; border-color: #f0ccd4; background: #fff4f6; }
.button.danger:hover:not(:disabled) { color: #991b32; border-color: #e9aebb; background: #ffedf1; }
.button:disabled { color: #8792a5; border-color: #e2e7ef; background: #f1f3f7; opacity: .72; }
.button[aria-busy="true"] { cursor: wait; }
.button.small { min-height: 34px; padding: 7px 10px; }
.text-button { color: #1366ec; }

/* Dashboard and cards */
.dashboard-hero, .manuals-intro {
  color: #1b2130;
  border: 1px solid rgb(202 218 246 / 82%);
  background:
    radial-gradient(circle at 83% 22%, rgb(127 91 255 / 21%), transparent 19rem),
    radial-gradient(circle at 65% 105%, rgb(8 168 245 / 18%), transparent 22rem),
    linear-gradient(120deg, rgb(255 255 255 / 96%), rgb(237 246 255 / 92%) 54%, rgb(244 239 255 / 90%));
  box-shadow: 0 24px 58px rgb(47 77 151 / 11%);
}
.manuals-intro {
  background:
    radial-gradient(circle at 84% 18%, rgb(127 91 255 / 12%), transparent 20rem),
    radial-gradient(circle at 62% 110%, rgb(8 168 245 / 11%), transparent 23rem),
    linear-gradient(120deg, #fbfdff, #f1f8ff 56%, #f7f3ff);
  box-shadow: 0 18px 42px rgb(47 77 151 / 8%);
}
.manuals-intro::before {
  background: linear-gradient(90deg, rgb(19 102 236 / 2.5%), transparent 48%);
}
.dashboard-hero::before {
  border-color: rgb(19 102 236 / 13%);
  box-shadow: 0 0 0 45px rgb(19 102 236 / 4%), 0 0 0 91px rgb(127 91 255 / 3%);
}
.dashboard-hero::after { background: linear-gradient(135deg, transparent 28%, rgb(127 91 255 / 50%) 29% 31%, transparent 32%); }
.dashboard-hero h2 { color: #161a21; }
.dashboard-hero p, .manuals-intro p { color: #5d6c84; }
.dashboard-kicker { color: #2763ca; }
.dashboard-kicker b { color: #5b42bd; background: rgb(127 91 255 / 10%); }
.dashboard-hero .button.ghost { color: #30527f; border-color: rgb(163 193 238 / 68%); background: rgb(255 255 255 / 66%); }
.manuals-intro .eyebrow { color: #1366ec; }
.manuals-intro-mark { color: #1366ec; border-color: rgb(165 195 239 / 65%); background: rgb(255 255 255 / 58%); }
.metric, .panel, .content-card, .manuals-summary > div {
  border-color: rgb(216 226 244 / 94%);
  background: rgb(255 255 255 / 84%);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px) saturate(130%);
}
.metric { position: relative; overflow: hidden; }
.metric::after {
  position: absolute;
  right: -38px;
  bottom: -58px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(127 91 255 / 15%), rgb(8 168 245 / 5%) 62%, transparent 64%);
  content: "";
}
.metric strong, .panel-head h2 { color: #1e2a40; }
.metric-icon, .quick-icon, .manual-row-icon {
  color: #1366ec;
  background: linear-gradient(135deg, #e4f3ff, #f0eaff);
}
.quick-action, .workflow-row, .manual-row, .manual-language-slot,
.manual-language-row, .manual-faq-list article, .tracking-card {
  border-color: #e0e8f6;
  background: rgb(255 255 255 / 76%);
}
.quick-action:hover, .workflow-row:hover, .manual-row:hover, .manual-language-slot:hover {
  border-color: #aac8f5;
  background: #fff;
  box-shadow: 0 12px 26px rgb(45 83 165 / 9%);
}
.feed-row { width: 100%; min-width: 0; }
.feed-row > span:nth-child(2) { display: grid; min-width: 0; }
.feed-title, .feed-meta { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Lists and unified product actions */
.list-controls {
  border-bottom-color: #e2e9f5;
  background: linear-gradient(90deg, rgb(255 255 255 / 88%), rgb(245 248 255 / 84%));
}
.search { border-color: #e0e8f5; background: rgb(247 249 255 / 88%); }
.search:focus-within { border-color: #8bb3f1; box-shadow: 0 0 0 4px rgb(19 102 236 / 9%); }
.filter-tabs { border: 1px solid #e1e8f5; background: #f1f5fc; }
.filter-tab { color: #6d7990; }
.filter-tab.is-active { color: #1257cc; background: #fff; box-shadow: 0 4px 12px rgb(40 77 155 / 10%); }
.data-table th { color: #718099; background: rgb(243 247 253 / 88%); }
.data-table td { border-top-color: #e8edf6; }
.data-table tbody tr { transition: background .18s ease; }
.data-table tbody tr:hover, .data-table tbody tr:hover td { background: rgb(245 249 255 / 72%); }
.row-title--link:hover { color: #1366ec; }
.row-title--link span { color: #7f5bff; }
.row-actions { flex-wrap: wrap; align-items: center; min-width: 390px; }
.product-action {
  min-width: 82px;
  min-height: 36px;
  gap: 6px;
  color: #40506b;
  text-decoration: none;
}
.button.small.product-action { min-height: 36px; }
.product-action-icon { display: inline-grid; width: 16px; height: 16px; place-items: center; }
.product-action-icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.product-action--buyer {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(105deg, #08a8f5, #1366ec 58%, #6f57ee);
  box-shadow: 0 8px 18px rgb(38 91 203 / 17%);
}
.product-action--buyer:hover:not(:disabled) { color: #fff; border-color: transparent; background: linear-gradient(105deg, #0797db, #0e59da 58%, #6248df); }
.product-action--buyer:disabled { color: #7a879a; border-color: #dfe5ef; background: #eff2f6; box-shadow: none; }
.product-action--copy { color: #6243ca; border-color: #dcd1ff; background: #f6f2ff; }
.product-action--copy:hover:not(:disabled) { color: #5635c4; border-color: #c8b6ff; background: #f0eaff; }
.badge.published { color: #08745b; background: #e6f8f2; }
.badge.draft { color: #9a6310; background: #fff4dd; }
.badge.modtek { color: #6442c3; background: #f1ebff; }
.badge.standard { color: #1559bd; background: #eaf3ff; }
.badge.upcoming { color: #6840b1; background: #f3edff; }

/* Forms, editors, and dialogs */
.field input, .field select, .field textarea, .input-like,
.inline-form input, .inline-form select, .tracking-note textarea {
  color: #25324a;
  border-color: #d9e4f3;
  background: rgb(255 255 255 / 90%);
}
.field input:focus, .field select:focus, .field textarea:focus,
.inline-form input:focus, .inline-form select:focus, .tracking-note textarea:focus {
  border-color: #6e9ee8;
  box-shadow: 0 0 0 4px rgb(19 102 236 / 10%);
}
.modal-backdrop { background: rgb(28 42 75 / 34%); backdrop-filter: blur(10px) saturate(120%); }
.modal {
  border: 1px solid rgb(255 255 255 / 82%);
  background: rgb(255 255 255 / 96%);
  box-shadow: 0 34px 100px rgb(30 48 91 / 25%);
}
.modal-head, .modal-foot {
  border-color: #e1e8f4;
  background: rgb(255 255 255 / 90%);
  backdrop-filter: blur(18px);
}
.close { color: #5f6d84; border: 1px solid #e0e7f3; background: #f5f7fb; }
.close:hover { color: #1559c4; border-color: #b6cdf3; background: #edf4ff; }
.product-editor-nav, .manual-editor-nav {
  align-content: start;
  border-color: #e0e8f5;
  background: linear-gradient(180deg, #f7faff, #f4f1ff);
}
.product-editor-nav button:hover, .manual-editor-nav a:hover { color: #1557bd; background: rgb(255 255 255 / 72%); }
.product-editor-nav button.is-active {
  color: #fff;
  background: linear-gradient(105deg, #08a8f5, #1366ec 55%, #7f5bff);
  box-shadow: 0 10px 22px rgb(44 91 196 / 20%);
}
.product-editor-nav-modtek { color: #6442c3 !important; }
.product-editor-nav-modtek.is-active { color: #fff !important; }
.product-editor-section, .article-editor-section, .manual-editor-section {
  border-color: #e1e9f5;
  background: rgb(255 255 255 / 76%);
}
.product-editor-section-head > span, .manual-editor-section-head > span,
.product-publish-overline { color: #1366ec; }
.product-media-stage, .product-gallery, .product-media-control,
.manual-product-summary, .manual-bound-product, .manual-callout {
  border-color: #dce6f4;
  background: linear-gradient(135deg, #fbfdff, #f6f3ff);
}
.rich-editor { border-color: #dce5f3; box-shadow: inset 0 1px rgb(255 255 255 / 80%); }
.rich-editor:focus-within { border-color: #7ba6e8; box-shadow: 0 0 0 4px rgb(19 102 236 / 9%); }
.rich-editor__toolbar { border-color: #e0e8f4; background: #f5f8fd; }
.rich-editor__toolbar button:hover { color: #1559c4; background: #e8f1ff; }
.product-publish-handoff, .product-editor-handoff {
  border-color: #d9e5f5;
  background: linear-gradient(125deg, #eef7ff, #f5efff);
}

/* Media, tracking, manuals */
.media-library-workspace, .media-library-switcher, .upload-box,
.media-upload-dock, .tracking-create-panel, .tracking-library-panel {
  border-color: #dbe5f3;
  background: rgb(255 255 255 / 84%);
  box-shadow: var(--shadow);
}
.media-library-tools, .media-library-switcher-head, .media-directory-settings,
.tracking-fixed-field, .tracking-card-stats, .tracking-medium-editor,
.tracking-medium-library {
  border-color: #dce6f4;
  background: linear-gradient(105deg, #f7fbff, #f7f4ff);
}
.directory-tree-button.is-active, .media-library-tab.is-active {
  color: #145bc8;
  border-color: #abc8f4;
  background: linear-gradient(105deg, #e9f4ff, #f1ebff);
}
.manual-tag { color: #61708a; background: #edf3fb; }
.manual-language-slot--approved { border-color: #94d9b1; background: #f2fcf6; }
.manual-language-slot--review { border-color: #ecd6a6; background: #fffdf6; }
.manual-language-slot--failed { border-color: #efc2c5; background: #fff9f9; }
.toast {
  border: 1px solid rgb(164 192 237 / 65%);
  background: linear-gradient(105deg, rgb(255 255 255 / 96%), rgb(238 246 255 / 96%));
  box-shadow: 0 18px 48px rgb(34 65 130 / 18%);
}

@media (min-width: 1025px) {
  .app-shell { grid-template-columns: 264px minmax(0, 1fr); }
  .sidebar { padding: 27px 16px 22px; background: linear-gradient(165deg, rgb(255 255 255 / 96%), rgb(243 247 255 / 93%)); }
  .sidebar .brand-logo { background:transparent; }
  .main { padding: 30px clamp(34px, 4vw, 68px) 64px; }
  .topbar { background: rgb(248 250 255 / 80%); }
  .button.primary { background: linear-gradient(105deg, #08a8f5, #1366ec 52%, #7f5bff); }
  .quick-action:hover { border-color: #aac8f5; background: #fff; }
  .data-table tbody tr:hover { background: rgb(245 249 255 / 72%); }
  .product-table th:last-child, .product-table td:last-child { width: 420px; }
}

@media (max-width: 1180px) {
  .row-actions { min-width: 190px; }
  .product-action { flex: 1 1 calc(50% - 7px); }
}

@media (max-width: 780px) {
  body::before { background-size: 36px 36px; }
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { position: static; width: 100%; height: auto; overflow: hidden; padding: 13px; gap: 12px; border-right: 0; border-bottom: 1px solid #dce5f3; }
  .sidebar::before { display: none; }
  .side-nav { scrollbar-width: none; }
  .main { padding: 18px 14px 38px; }
  .topbar { min-height: 58px; margin: 0 -14px 20px; padding: 0 14px; }
  .topbar-actions > .button { display: none; }
  .dashboard-hero, .manuals-intro { border-radius: 18px; }
  .content-card { overflow: hidden; }
  .product-table, .product-table tbody, .product-table tr, .product-table td { display: block; width: 100%; }
  .product-table thead { display: none; }
  .product-table tr { padding: 14px; border-top: 1px solid #e5ebf5; }
  .product-table tr:first-child { border-top: 0; }
  .product-table td { display: block !important; padding: 5px 0; border: 0; }
  .product-table td:nth-child(2), .product-table td:nth-child(3), .product-table td:nth-child(4) { display: inline-block !important; width: auto; margin: 5px 5px 6px 0; }
  .product-table td:last-child { margin-top: 8px; padding-top: 12px; border-top: 1px solid #e8edf6; }
  .row-actions { min-width: 0; justify-content: flex-start; }
  .button.small.product-action { flex: 1 1 calc(50% - 7px); min-width: 128px; min-height: 44px; }
  .toolbar > .button, .modal-foot .button, .filter-tab { min-height: 44px; }
  .close { width: 44px; height: 44px; }
  .field input, .field select, .field textarea, .input-like, .inline-form input, .inline-form select { font-size: 16px; }
  .modal-backdrop { padding: 0; }
  .modal { border: 0; }
  .product-editor-nav, .manual-editor-nav { background: rgb(247 249 255 / 96%); }
}

@media (max-width: 430px) {
  .login-intro { min-height: 230px; padding: 26px; }
  .login-panel { padding: 16px; }
  .login-card { padding: 25px 20px; border-radius: 20px; }
  .topbar .crumb { font-size: 11px; }
  .button.small.product-action { flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* E-commerce members: publisher-facing read-only operations view. */
.nav-icon--members { color:#6b5ce4; }
.member-admin-page { display:grid; gap:20px; }
.member-admin-notice {
  display:grid; grid-template-columns:46px minmax(0,1fr) auto; gap:16px; align-items:center; padding:18px 20px;
  border:1px solid rgb(117 113 221 / 20%); border-radius:16px;
  background:linear-gradient(110deg,rgb(237 246 255 / 90%),rgb(245 240 255 / 90%)); box-shadow:0 13px 34px rgb(55 78 145 / 7%);
}
.member-admin-notice > span { display:grid; width:46px; height:46px; place-items:center; border-radius:13px; background:#fff; box-shadow:0 8px 20px rgb(62 79 151 / 10%); color:#5e63db; }
.member-admin-notice .nav-icon { width:24px; height:24px; }
.member-admin-notice div { display:grid; gap:4px; }
.member-admin-notice strong { color:#293044; font-size:14px; }
.member-admin-notice p { margin:0; color:#68758b; font-size:12px; line-height:1.55; }
.member-admin-notice > b { padding:7px 10px; border:1px solid rgb(93 98 210 / 17%); border-radius:999px; background:rgb(255 255 255 / 62%); color:#5b5ec6; font-size:10px; letter-spacing:.12em; }
.member-admin-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.member-admin-metrics article { position:relative; overflow:hidden; display:grid; gap:4px; min-height:126px; padding:22px; border:1px solid #e0e8f5; border-radius:17px; background:rgb(255 255 255 / 82%); box-shadow:var(--shadow); }
.member-admin-metrics article::after { position:absolute; top:-35px; right:-35px; width:90px; height:90px; border-radius:50%; background:radial-gradient(circle,rgb(93 105 224 / 11%),transparent 68%); content:""; }
.member-admin-metrics span { color:#6d798f; font-size:12px; font-weight:650; }
.member-admin-metrics strong { color:#202737; font-size:30px; letter-spacing:-.04em; }
.member-admin-metrics small { color:#9aa3b3; font-size:11px; }
.member-admin-card { overflow:hidden; }
.member-admin-card .list-controls { border-bottom:1px solid #e4eaf5; background:linear-gradient(105deg,#fbfdff,#f8f6ff); }
.member-admin-card .search { max-width:480px; }
.member-admin-count { color:#7d889b; font-size:12px; }
.member-admin-table-wrap { overflow:auto; }
.member-admin-table { min-width:820px; }
.member-admin-person { display:flex; min-width:200px; gap:11px; align-items:center; }
.member-admin-person > span { display:grid; width:38px; height:38px; flex:0 0 38px; place-items:center; border-radius:11px; background:linear-gradient(135deg,#eaf5ff,#eeeaff); color:#5664d8; font-size:11px; font-weight:800; }
.member-admin-person div { display:grid; min-width:0; gap:3px; }
.member-admin-person strong { color:#2a3140; font-size:13px; }
.member-admin-person small,.member-admin-sub { display:block; max-width:220px; overflow:hidden; color:#8b95a5; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.member-admin-status,.member-admin-verified,.member-admin-unverified { display:inline-flex; align-items:center; gap:6px; width:max-content; padding:5px 8px; border-radius:999px; font-size:10px; font-weight:700; }
.member-admin-status { border:1px solid rgb(26 148 112 / 16%); background:#eefbf6; color:#14765d; }
.member-admin-status i { width:6px; height:6px; border-radius:50%; background:#28a880; }
.member-admin-status--disabled,.member-admin-status--archived { border-color:rgb(204 82 102 / 16%); background:#fff3f5; color:#a6324e; }
.member-admin-status--disabled i,.member-admin-status--archived i { background:#d65470; }
.member-admin-verified { background:#eefbf6; color:#14765d; }
.member-admin-unverified { background:#fff7e9; color:#a2600b; }
.member-admin-order-count { display:block; color:#313949; font-size:15px; }
.member-admin-modal { max-width:980px; }
.member-admin-modal .modal-body { display:grid; gap:22px; background:linear-gradient(145deg,#fbfdff,#f9f7ff); }
.member-admin-detail-hero { display:grid; grid-template-columns:62px minmax(0,1fr) auto; gap:18px; align-items:center; padding:22px; border:1px solid #dde6f4; border-radius:17px; background:#fff; box-shadow:0 12px 32px rgb(54 77 137 / 7%); }
.member-admin-detail-avatar { display:grid; width:62px; height:62px; place-items:center; border-radius:18px; background:linear-gradient(135deg,#166fd9,#6d5ce5); box-shadow:0 12px 25px rgb(54 79 187 / 20%); color:#fff; font-size:15px; font-weight:800; }
.member-admin-detail-hero > div:nth-child(2) { display:grid; gap:5px; }
.member-admin-detail-hero > div:nth-child(2) > strong { color:#252d3d; font-size:19px; }
.member-admin-detail-hero a { color:#2d61c7; font-size:12px; text-decoration:none; }
.member-admin-detail-hero > div:nth-child(2) > span { display:flex; flex-wrap:wrap; gap:7px; margin-top:3px; }
.member-admin-detail-hero aside { display:grid; grid-template-columns:auto auto; gap:5px 15px; padding-left:22px; border-left:1px solid #e1e8f4; }
.member-admin-detail-hero aside small { color:#929cac; font-size:10px; }
.member-admin-detail-hero aside b { color:#4c576b; font-size:11px; text-align:right; }
.member-admin-detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.member-admin-detail-grid article { padding:21px; border:1px solid #dfe7f3; border-radius:15px; background:rgb(255 255 255 / 78%); }
.member-admin-detail-grid article > span,.member-admin-orders header span { color:#5269ca; font-size:10px; font-weight:800; letter-spacing:.13em; }
.member-admin-detail-grid dl { display:grid; gap:10px; margin:16px 0 0; }
.member-admin-detail-grid dl div { display:grid; grid-template-columns:96px 1fr; gap:12px; padding-top:10px; border-top:1px solid #edf1f7; }
.member-admin-detail-grid dt { color:#8b95a6; font-size:11px; }
.member-admin-detail-grid dd { margin:0; color:#424c5e; font-size:12px; }
.member-admin-detail-grid p { margin:16px 0 0; color:#596579; font-size:12px; line-height:1.8; }
.member-admin-orders { overflow:hidden; border:1px solid #dfe7f3; border-radius:16px; background:#fff; }
.member-admin-orders > header { display:flex; justify-content:space-between; align-items:center; padding:18px 21px; border-bottom:1px solid #e5ebf4; background:#fafcff; }
.member-admin-orders h3 { margin:4px 0 0; color:#2b3343; font-size:16px; }
.member-admin-orders > header > b { display:grid; min-width:44px; height:29px; place-items:center; border-radius:999px; background:#edf2ff; color:#5064ce; font-size:11px; }
.member-admin-orders .data-table { min-width:660px; }
.member-admin-orders td strong { display:block; color:#303847; }
.member-admin-orders td small { display:block; margin-top:3px; color:#929dad; font-size:10px; }
.member-admin-no-orders { padding:42px; color:#8a95a6; font-size:12px; text-align:center; }
.member-admin-modal-lock { color:#68768b; font-size:11px; font-weight:700; }
.member-admin-notice.is-admin { border-color:rgb(19 102 236 / 22%); background:linear-gradient(110deg,#edf7ff,#f2efff); }
.member-editor-email { display:grid; grid-template-columns:120px minmax(0,1fr) auto; gap:16px; align-items:center; padding:17px 19px; border:1px solid #dfe7f3; border-radius:13px; background:#f7faff; }
.member-editor-email span { color:#7d899c; font-size:11px; font-weight:700; }
.member-editor-email strong { overflow:hidden; color:#344054; font-size:13px; text-overflow:ellipsis; white-space:nowrap; }
.member-editor-email small { color:#5c6fc6; font-size:10px; }
.member-editor-check { display:flex; gap:9px; align-items:center; color:#4e596b; font-size:12px; }
.member-editor-check input { width:16px; height:16px; accent-color:#276bd8; }
.member-editor-modal .button.danger { border-color:#efc3cb; background:#fff5f6; color:#b23852; }

@media(max-width:1000px) {
  .member-admin-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:780px) {
  .member-admin-notice { grid-template-columns:44px 1fr; }
  .member-admin-notice > b { display:none; }
  .member-admin-detail-hero { grid-template-columns:52px 1fr; }
  .member-admin-detail-avatar { width:52px; height:52px; border-radius:15px; }
  .member-admin-detail-hero aside { grid-column:1/-1; padding:14px 0 0; border-top:1px solid #e1e8f4; border-left:0; }
  .member-admin-detail-grid { grid-template-columns:1fr; }
}
@media(max-width:460px) {
  .member-admin-metrics { grid-template-columns:1fr 1fr; gap:9px; }
  .member-admin-metrics article { min-height:105px; padding:16px; }
  .member-admin-notice { padding:15px; }
  .member-admin-notice > span { display:none; }
  .member-admin-notice { grid-template-columns:1fr; }
}