:root {
  color-scheme: light;
  --admin-bg: #f3f6f7;
  --admin-surface: #ffffff;
  --admin-surface-soft: #f8fafb;
  --admin-ink: #132027;
  --admin-muted: #6d7b83;
  --admin-line: #dfe6e9;
  --admin-line-strong: #cdd8dc;
  --admin-brand: #0d7559;
  --admin-brand-hover: #095c47;
  --admin-brand-soft: #e8f5f0;
  --admin-sidebar: #0d171d;
  --admin-sidebar-soft: #14242c;
  --admin-danger: #b13f46;
  --admin-danger-soft: #fff0f1;
  --admin-warning: #a66a13;
  --admin-warning-soft: #fff6e7;
  --admin-success: #147355;
  --admin-success-soft: #e9f7f1;
  --admin-shadow-sm: 0 8px 24px rgba(16, 31, 39, .06);
  --admin-shadow-lg: 0 24px 70px rgba(12, 27, 35, .13);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --sidebar-width: 264px;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --admin-bg: #0c1216;
  --admin-surface: #141d22;
  --admin-surface-soft: #11191e;
  --admin-ink: #eef3f5;
  --admin-muted: #98a6ad;
  --admin-line: #2a363d;
  --admin-line-strong: #3a4850;
  --admin-brand: #48bf96;
  --admin-brand-hover: #67d1ae;
  --admin-brand-soft: #15372c;
  --admin-sidebar: #080d10;
  --admin-sidebar-soft: #111c22;
  --admin-danger: #f0757b;
  --admin-danger-soft: #3b1c20;
  --admin-warning: #e9b45e;
  --admin-warning-soft: #352919;
  --admin-success: #73d4b1;
  --admin-success-soft: #143329;
  --admin-shadow-sm: 0 10px 30px rgba(0, 0, 0, .22);
  --admin-shadow-lg: 0 28px 80px rgba(0, 0, 0, .35);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  background: var(--admin-bg);
  color: var(--admin-ink);
  font-family: Tahoma, "Segoe UI", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
[hidden], .is-hidden { display: none !important; }

.btn {
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 800;
  font-size: 12px;
  transition: transform .18s ease, background .18s ease, border-color .18s ease, opacity .18s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:disabled { cursor: not-allowed; opacity: .58; transform: none; }
.btn-primary { background: var(--admin-brand); color: #fff; }
.btn-primary:hover { background: var(--admin-brand-hover); }
.btn-secondary { background: var(--admin-surface); color: var(--admin-ink); border-color: var(--admin-line); }
.btn-secondary:hover { border-color: var(--admin-line-strong); }
.btn-block { width: 100%; }

/* Login */
.admin-login-view {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(420px, .9fr) minmax(480px, 1.1fr);
  background: var(--admin-surface);
}
.login-visual {
  position: relative;
  min-height: 100vh;
  padding: clamp(38px, 6vw, 84px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 18% 12%, rgba(72, 191, 150, .22), transparent 34%),
    radial-gradient(circle at 82% 88%, rgba(72, 191, 150, .10), transparent 30%),
    linear-gradient(145deg, #0b1419 0%, #0f2028 58%, #102a28 100%);
}
.login-visual::before,
.login-visual::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 50%;
}
.login-visual::before { width: 540px; height: 540px; inset: -250px auto auto -220px; }
.login-visual::after { width: 430px; height: 430px; inset: auto -220px -210px auto; }
.login-brand-mark {
  position: relative;
  z-index: 1;
  width: 56px;
  height: 60px;
  border-radius: 12px 12px 18px 12px;
  display: grid;
  place-items: center;
  background: #fff;
  color: #0d171d;
  font-size: 28px;
  font-weight: 900;
  box-shadow: 0 18px 45px rgba(0,0,0,.24);
}
.login-visual-copy { position: relative; z-index: 1; max-width: 620px; }
.login-visual-copy > span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #82d3b8;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
}
.login-visual-copy > span::before { content: ""; width: 24px; height: 2px; background: currentColor; }
.login-visual-copy h2 {
  margin: 18px 0 20px;
  font-size: clamp(34px, 4.4vw, 62px);
  line-height: 1.25;
  letter-spacing: -.035em;
}
.login-visual-copy p { margin: 0; max-width: 510px; color: #a8bbc4; font-size: 14px; line-height: 2; }
.login-system-list { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 10px 20px; color: #b5c6cd; font-size: 10px; }
.login-system-list span { display: inline-flex; align-items: center; gap: 7px; }
.login-system-list i { width: 7px; height: 7px; border-radius: 50%; background: #54c99f; box-shadow: 0 0 0 5px rgba(84,201,159,.09); }
.login-panel { min-height: 100vh; display: grid; place-items: center; padding: 40px; background: var(--admin-surface); }
.login-card { width: min(430px, 100%); }
.login-home-link { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 70px; color: var(--admin-muted); font-size: 11px; font-weight: 700; }
.login-home-link:hover { color: var(--admin-brand); }
.login-mobile-brand { display: none; }
.login-kicker { color: var(--admin-brand); font-weight: 800; font-size: 10px; }
.login-card h1 { margin: 9px 0 10px; font-size: 36px; letter-spacing: -.03em; }
.login-card > p { margin: 0; color: var(--admin-muted); line-height: 1.9; font-size: 12px; }
.admin-login-form { margin-top: 30px; }
.admin-login-form label,
.product-form label {
  display: block;
  margin-bottom: 14px;
  color: var(--admin-ink);
  font-size: 11px;
  font-weight: 800;
}
.admin-login-form label > span { display: block; margin-bottom: 7px; }
.admin-login-form input,
.product-form input,
.product-form textarea,
.product-form select,
.section-toolbar input,
.section-toolbar select {
  width: 100%;
  border: 1px solid var(--admin-line);
  border-radius: var(--radius-sm);
  background: var(--admin-surface);
  color: var(--admin-ink);
  outline: none;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.admin-login-form input { height: 48px; padding: 0 13px; }
.admin-login-form input:focus,
.product-form input:focus,
.product-form textarea:focus,
.product-form select:focus,
.section-toolbar input:focus,
.section-toolbar select:focus {
  border-color: var(--admin-brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--admin-brand) 15%, transparent);
}
.admin-login-form .btn { margin-top: 6px; min-height: 49px; }
.login-support { margin-top: 20px !important; text-align: center; font-size: 9px !important; }
.login-support a { color: var(--admin-brand); direction: ltr; display: inline-block; }
.form-alert {
  margin: 10px 0 14px;
  border: 1px solid color-mix(in srgb, var(--admin-danger) 30%, var(--admin-line));
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  background: var(--admin-danger-soft);
  color: var(--admin-danger);
  font-size: 10px;
  line-height: 1.7;
}

/* Shell and navigation */
.admin-page, .admin-shell { min-height: 100vh; }
.admin-shell { display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); background: var(--admin-bg); }
.admin-sidebar {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 50;
  width: var(--sidebar-width);
  height: 100vh;
  padding: 23px 18px 18px;
  display: flex;
  flex-direction: column;
  color: #fff;
  background: var(--admin-sidebar);
  border-left: 1px solid rgba(255,255,255,.04);
}
.sidebar-header { display: flex; align-items: center; justify-content: space-between; }
.admin-brand { display: inline-flex; align-items: center; gap: 11px; direction: ltr; }
.admin-brand-symbol {
  width: 41px;
  height: 45px;
  border-radius: 9px 9px 13px 9px;
  display: grid;
  place-items: center;
  background: #fff;
  color: #0d171d;
  font-size: 20px;
  font-weight: 900;
}
.admin-brand > span:last-child { display: flex; flex-direction: column; }
.admin-brand b { font-size: 13px; letter-spacing: .01em; }
.admin-brand small { margin-top: 5px; color: #7f939d; font-size: 7px; letter-spacing: .16em; text-transform: uppercase; }
.sidebar-close { display: none; border: 0; background: transparent; color: #fff; font-size: 26px; }
.admin-nav { margin-top: 48px; display: flex; flex-direction: column; gap: 5px; }
.nav-group-title { margin: 16px 12px 7px; color: #60747e; font-size: 8px; font-weight: 800; letter-spacing: .08em; }
.admin-nav a {
  min-height: 43px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  display: grid;
  grid-template-columns: 24px 1fr auto;
  align-items: center;
  gap: 8px;
  color: #a8b7be;
  font-size: 10px;
  font-weight: 700;
  transition: .16s ease;
}
.admin-nav a:hover { color: #fff; background: var(--admin-sidebar-soft); }
.admin-nav a.active { color: #fff; background: #1a2a32; border-color: #2a3c45; box-shadow: inset -3px 0 0 #55cba3; }
.nav-icon { width: 24px; height: 24px; display: grid; place-items: center; font-size: 14px; }
.admin-nav em { min-width: 22px; height: 20px; padding: 0 6px; border-radius: 10px; display: grid; place-items: center; background: #22353e; color: #8fa4ae; font-style: normal; font-size: 8px; }
.admin-nav a.active em { background: #2d4d46; color: #8de0c1; }
.admin-user-card {
  margin-top: auto;
  padding: 14px 12px;
  display: grid;
  grid-template-columns: 35px 1fr 28px;
  align-items: center;
  gap: 9px;
  border: 1px solid #26363e;
  border-radius: var(--radius-md);
  background: #111e24;
}
.admin-avatar { width: 35px; height: 35px; border-radius: 50%; display: grid; place-items: center; background: #23433b; color: #79d7b7; font-size: 11px; font-weight: 900; }
.admin-user-card b { display: block; font-size: 9px; }
.admin-user-card small { display: block; max-width: 128px; margin-top: 4px; overflow: hidden; color: #748991; font-size: 7px; text-overflow: ellipsis; direction: ltr; }
.admin-user-card button { width: 28px; height: 28px; border: 0; border-radius: 6px; background: transparent; color: #83979f; font-size: 17px; }
.admin-user-card button:hover { background: #24343c; color: #fff; }

.admin-main { grid-column: 2; min-width: 0; padding: 104px clamp(22px, 3.2vw, 48px) 60px; }
.admin-topbar {
  position: fixed;
  inset: 0 var(--sidebar-width) auto 0;
  z-index: 30;
  min-height: 82px;
  padding: 14px clamp(22px, 3.2vw, 48px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid var(--admin-line);
  background: color-mix(in srgb, var(--admin-bg) 90%, transparent);
  backdrop-filter: blur(18px);
}
.topbar-title { display: flex; align-items: center; gap: 12px; }
.topbar-title small { color: var(--admin-brand); font-size: 8px; font-weight: 800; }
.topbar-title h1 { margin: 3px 0 2px; color: var(--admin-ink); font-size: 21px; letter-spacing: -.02em; }
.topbar-title p { margin: 0; color: var(--admin-muted); font-size: 9px; }
.sidebar-open { display: none; width: 40px; height: 40px; border: 1px solid var(--admin-line); border-radius: var(--radius-sm); background: var(--admin-surface); color: var(--admin-ink); }
.admin-header-actions { display: flex; align-items: center; gap: 9px; }
.icon-button,
.admin-theme-toggle {
  height: 42px;
  border: 1px solid var(--admin-line);
  border-radius: var(--radius-sm);
  background: var(--admin-surface);
  color: var(--admin-ink);
}
.icon-button { width: 42px; display: grid; place-items: center; font-size: 18px; }
.admin-theme-toggle { padding: 0 13px; display: inline-flex; align-items: center; gap: 8px; font-size: 9px; font-weight: 800; }
.icon-button:hover, .admin-theme-toggle:hover { border-color: var(--admin-line-strong); }
.theme-toggle-icon { width: 15px; height: 15px; border: 2px solid currentColor; border-radius: 50%; display: inline-block; box-shadow: -5px -4px 0 -4px currentColor; }
:root[data-theme="dark"] .theme-toggle-icon { background: currentColor; box-shadow: 6px -5px 0 -4px var(--admin-surface); }

.admin-message {
  position: fixed;
  z-index: 80;
  inset: 94px auto auto 28px;
  width: min(370px, calc(100vw - 36px));
  border: 1px solid color-mix(in srgb, var(--admin-success) 25%, var(--admin-line));
  border-radius: var(--radius-md);
  padding: 13px 15px;
  background: var(--admin-success-soft);
  color: var(--admin-success);
  box-shadow: var(--admin-shadow-lg);
  font-size: 10px;
  line-height: 1.7;
}
.admin-message[data-type="error"] { border-color: color-mix(in srgb, var(--admin-danger) 25%, var(--admin-line)); background: var(--admin-danger-soft); color: var(--admin-danger); }

/* Dashboard */
.dashboard-section { display: grid; gap: 20px; }
.welcome-panel {
  min-height: 230px;
  padding: clamp(24px, 3vw, 42px);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 35px;
  overflow: hidden;
  position: relative;
  color: #fff;
  background:
    radial-gradient(circle at 18% 18%, rgba(77,202,159,.23), transparent 28%),
    linear-gradient(135deg, #0e191f 0%, #132b32 56%, #123b32 100%);
  box-shadow: var(--admin-shadow-sm);
}
.welcome-panel::after { content: "N"; position: absolute; inset: -90px auto auto -12px; color: rgba(255,255,255,.025); font-size: 300px; font-weight: 900; line-height: 1; direction: ltr; }
.welcome-panel > div { position: relative; z-index: 1; }
.eyebrow { color: #78d8b7; font-size: 8px; font-weight: 900; letter-spacing: .13em; }
.welcome-panel h2 { max-width: 700px; margin: 11px 0 10px; font-size: clamp(24px, 3vw, 38px); letter-spacing: -.035em; }
.welcome-panel p { max-width: 670px; margin: 0; color: #adbdc4; font-size: 11px; line-height: 1.9; }
.welcome-actions { margin-top: 24px; display: flex; gap: 9px; }
.welcome-actions .btn-secondary { background: rgba(255,255,255,.07); color: #fff; border-color: rgba(255,255,255,.14); }
.system-badge { min-width: 190px; padding: 22px; border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius-md); background: rgba(255,255,255,.055); backdrop-filter: blur(10px); }
.system-pulse { width: 10px; height: 10px; border-radius: 50%; display: block; margin-bottom: 19px; background: #61d1a9; box-shadow: 0 0 0 7px rgba(97,209,169,.10); }
.system-badge small, .system-badge em { display: block; color: #869ba4; font-size: 8px; font-style: normal; }
.system-badge b { display: block; margin: 5px 0 12px; font-size: 13px; }
.dashboard-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; }
.stat-card {
  min-height: 126px;
  padding: 20px;
  border: 1px solid var(--admin-line);
  border-radius: var(--radius-md);
  display: flex;
  align-items: flex-start;
  gap: 13px;
  background: var(--admin-surface);
  box-shadow: var(--admin-shadow-sm);
}
.stat-icon { flex: 0 0 39px; width: 39px; height: 39px; border-radius: 10px; display: grid; place-items: center; background: var(--admin-brand-soft); color: var(--admin-brand); font-size: 15px; }
.stat-card small, .stat-card em { display: block; color: var(--admin-muted); font-size: 8px; font-style: normal; }
.stat-card b { display: block; margin: 5px 0 8px; font-size: 26px; line-height: 1; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr); gap: 18px; }
.dashboard-card { border: 1px solid var(--admin-line); border-radius: var(--radius-md); background: var(--admin-surface); box-shadow: var(--admin-shadow-sm); overflow: hidden; }
.panel-heading { min-height: 72px; padding: 17px 20px; display: flex; align-items: center; justify-content: space-between; gap: 15px; border-bottom: 1px solid var(--admin-line); }
.panel-heading small { color: var(--admin-brand); font-size: 8px; font-weight: 800; }
.panel-heading h3 { margin: 4px 0 0; font-size: 14px; }
.panel-heading button { border: 0; background: transparent; color: var(--admin-brand); font-size: 9px; font-weight: 800; }
.dashboard-product-row { min-height: 72px; padding: 11px 20px; display: grid; grid-template-columns: 42px minmax(0,1fr) auto; align-items: center; gap: 11px; border-bottom: 1px solid var(--admin-line); }
.dashboard-product-row:last-child { border-bottom: 0; }
.dashboard-product-row:hover { background: var(--admin-surface-soft); }
.dashboard-product-row .mini-product-icon { width: 42px; height: 42px; border: 1px solid var(--admin-line); border-radius: 9px; display: grid; place-items: center; overflow: hidden; background: var(--admin-bg); color: var(--admin-brand); font-weight: 900; }
.dashboard-product-row .mini-product-icon img { width: 100%; height: 100%; object-fit: contain; padding: 2px; }
.dashboard-product-row b { display: block; font-size: 10px; }
.dashboard-product-row small { display: block; margin-top: 4px; color: var(--admin-muted); font-size: 8px; }
.dashboard-product-row em { padding: 5px 7px; border-radius: 5px; background: var(--admin-bg); color: var(--admin-muted); font-size: 7px; font-style: normal; }
.dashboard-product-row em.visible { background: var(--admin-success-soft); color: var(--admin-success); }
.quick-action-list { padding: 10px; }
.quick-action-list button { width: 100%; min-height: 74px; padding: 11px; border: 0; border-radius: 9px; display: grid; grid-template-columns: 42px minmax(0,1fr) 22px; align-items: center; gap: 11px; background: transparent; color: var(--admin-ink); text-align: right; }
.quick-action-list button:hover { background: var(--admin-surface-soft); }
.quick-action-list button > span { width: 42px; height: 42px; border-radius: 9px; display: grid; place-items: center; background: var(--admin-brand-soft); color: var(--admin-brand); font-size: 15px; }
.quick-action-list b, .quick-action-list small { display: block; }
.quick-action-list b { font-size: 10px; }
.quick-action-list small { margin-top: 5px; color: var(--admin-muted); font-size: 8px; }
.quick-action-list em { color: var(--admin-muted); font-style: normal; }

/* Products */
.products-section, .settings-section { display: grid; gap: 16px; }
.section-toolbar { display: grid; grid-template-columns: minmax(260px, 1fr) 190px; gap: 10px; }
.product-search-wrap { position: relative; }
.product-search-wrap > span { position: absolute; z-index: 1; top: 50%; right: 13px; transform: translateY(-50%); color: var(--admin-muted); font-size: 18px; }
.section-toolbar input, .section-toolbar select { height: 44px; padding: 0 13px; font-size: 10px; }
.section-toolbar input { padding-right: 42px; }
.admin-grid { display: grid; grid-template-columns: minmax(320px, .72fr) minmax(570px, 1.28fr); gap: 18px; align-items: start; }
.admin-products, .product-form { border: 1px solid var(--admin-line); border-radius: var(--radius-md); background: var(--admin-surface); box-shadow: var(--admin-shadow-sm); overflow: hidden; }
.admin-products { position: sticky; top: 101px; max-height: calc(100vh - 122px); overflow-y: auto; }
.admin-block-title { min-height: 68px; padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-bottom: 1px solid var(--admin-line); background: var(--admin-surface); }
.admin-block-title b { display: block; font-size: 13px; }
.admin-block-title small { display: block; margin-top: 5px; color: var(--admin-muted); font-size: 8px; line-height: 1.5; }
.admin-product-list { min-height: 120px; }
.admin-product { padding: 14px 16px; display: grid; grid-template-columns: 54px minmax(0,1fr) auto; align-items: center; gap: 12px; border-bottom: 1px solid var(--admin-line); transition: background .16s ease; }
.admin-product:last-child { border-bottom: 0; }
.admin-product:hover { background: var(--admin-surface-soft); }
.product-icon { grid-row: 1 / 3; width: 54px; height: 54px; border: 1px solid var(--admin-line); border-radius: 10px; display: grid; place-items: center; overflow: hidden; background: var(--admin-bg); color: var(--admin-brand); font-size: 13px; font-weight: 900; }
.product-icon img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
.admin-product-details { min-width: 0; }
.admin-product-details small, .admin-product-details b, .admin-product-details em { display: block; }
.admin-product-details small { color: var(--admin-brand); font-size: 7px; font-weight: 800; }
.admin-product-details b { margin: 5px 0 4px; overflow: hidden; color: var(--admin-ink); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.admin-product-details em { overflow: hidden; color: var(--admin-muted); font-size: 7px; font-style: normal; direction: ltr; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.visibility { padding: 5px 7px; border: 1px solid var(--admin-line); border-radius: 6px; background: var(--admin-bg); color: var(--admin-muted); font-size: 7px; font-weight: 800; }
.visibility.visible { border-color: color-mix(in srgb, var(--admin-success) 30%, var(--admin-line)); background: var(--admin-success-soft); color: var(--admin-success); }
.product-meta-line { grid-column: 2 / 4; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.product-meta-line span { padding: 4px 6px; border-radius: 5px; background: var(--admin-bg); color: var(--admin-muted); font-size: 7px; }
.row-actions { grid-column: 2 / 4; display: flex; flex-wrap: wrap; gap: 6px; padding-top: 9px; border-top: 1px dashed var(--admin-line); }
.row-actions button, .row-actions a { min-height: 29px; padding: 0 9px; border: 1px solid var(--admin-line); border-radius: 6px; background: var(--admin-surface); color: var(--admin-ink); font-size: 8px; font-weight: 800; display: inline-flex; align-items: center; }
.row-actions button:hover, .row-actions a:hover { border-color: var(--admin-line-strong); background: var(--admin-bg); }
.row-actions .danger { color: var(--admin-danger); }
.admin-empty { padding: 55px 20px; text-align: center; color: var(--admin-muted); font-size: 10px; line-height: 1.8; }
.admin-empty.compact { padding: 32px 20px; }
.admin-empty-error { color: var(--admin-danger); }

.product-form { overflow: visible; }
.product-form > .admin-block-title { position: sticky; top: 82px; z-index: 9; border-radius: var(--radius-md) var(--radius-md) 0 0; }
.form-title-row { background: color-mix(in srgb, var(--admin-surface) 92%, var(--admin-bg)); }
.text-button { border: 0; background: transparent; color: var(--admin-danger); font-size: 9px; font-weight: 800; }
.form-section { margin: 18px; padding: 18px; border: 1px solid var(--admin-line); border-radius: var(--radius-md); background: var(--admin-surface-soft); scroll-margin-top: 102px; }
.form-section-title { margin-bottom: 17px; display: flex; align-items: center; gap: 11px; }
.form-section-title > span { flex: 0 0 31px; width: 31px; height: 31px; border-radius: 8px; display: grid; place-items: center; background: var(--admin-brand-soft); color: var(--admin-brand); font-size: 8px; font-weight: 900; }
.form-section-title b, .form-section-title small { display: block; }
.form-section-title b { font-size: 11px; }
.form-section-title small { margin-top: 4px; color: var(--admin-muted); font-size: 7px; }
.product-form label > small { float: left; color: var(--admin-muted); font-size: 7px; font-weight: 500; }
.product-form input, .product-form select { height: 42px; padding: 0 11px; }
.product-form textarea { min-height: 90px; padding: 10px 11px; resize: vertical; line-height: 1.7; }
.product-form input, .product-form textarea, .product-form select { margin-top: 6px; font-size: 10px; }
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 11px; }
.form-row.thirds { grid-template-columns: repeat(3, minmax(0,1fr)); }
.admin-image-uploader { margin-bottom: 15px; padding: 16px; border: 1px dashed color-mix(in srgb, var(--admin-brand) 42%, var(--admin-line)); border-radius: var(--radius-md); background: color-mix(in srgb, var(--admin-brand) 4%, var(--admin-surface)); }
.admin-image-uploader input[type="file"] { height: auto; padding: 7px; background: var(--admin-surface); cursor: pointer; }
.admin-image-uploader input[type="file"]::file-selector-button { margin-inline-end: 9px; border: 0; border-radius: 6px; padding: 8px 11px; background: var(--admin-ink); color: var(--admin-surface); font: inherit; cursor: pointer; }
.admin-image-status { margin: 10px 0 0; padding: 9px 11px; border-radius: 7px; background: var(--admin-brand-soft); color: var(--admin-brand); font-size: 9px; line-height: 1.6; }
.admin-image-status[data-type="error"] { background: var(--admin-danger-soft); color: var(--admin-danger); }
.admin-image-status[data-type="loading"] { background: var(--admin-warning-soft); color: var(--admin-warning); }
.admin-image-preview { margin: 13px 0 0; padding: 11px; border: 1px solid var(--admin-line); border-radius: 9px; display: grid; grid-template-columns: 150px minmax(0,1fr); align-items: center; gap: 14px; background: var(--admin-surface); }
.admin-image-preview img { width: 150px; height: 112px; border: 1px solid var(--admin-line); border-radius: 7px; object-fit: contain; background: var(--admin-bg); }
.admin-image-preview figcaption { min-width: 0; }
.admin-image-preview figcaption b, .admin-image-preview figcaption small { display: block; }
.admin-image-preview figcaption b { font-size: 10px; }
.admin-image-preview figcaption small { margin-top: 5px; color: var(--admin-muted); font-size: 7px; line-height: 1.6; }
.preview-actions { margin-top: 13px; display: flex; gap: 7px; }
.preview-actions a, .preview-actions button { min-height: 30px; border: 1px solid var(--admin-line); border-radius: 6px; padding: 0 9px; display: inline-flex; align-items: center; background: var(--admin-surface); color: var(--admin-ink); font-size: 8px; }
.preview-actions button { color: var(--admin-danger); }
.toggle-label { margin: 2px 0 0 !important; display: flex !important; align-items: center; gap: 11px; cursor: pointer; }
.toggle-label > input { position: absolute; opacity: 0; pointer-events: none; }
.toggle-track { flex: 0 0 40px; width: 40px; height: 22px; border-radius: 12px; position: relative; background: var(--admin-line-strong); transition: .18s ease; }
.toggle-track::after { content: ""; position: absolute; top: 3px; right: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.18); transition: .18s ease; }
.toggle-label input:checked + .toggle-track { background: var(--admin-brand); }
.toggle-label input:checked + .toggle-track::after { right: 21px; }
.toggle-copy b, .toggle-copy small { display: block; }
.toggle-copy b { font-size: 10px; }
.toggle-copy small { margin-top: 4px; color: var(--admin-muted); font-size: 7px; font-weight: 500; }
.sticky-submit-bar { position: sticky; bottom: 0; z-index: 10; min-height: 69px; padding: 12px 18px; border-top: 1px solid var(--admin-line); border-radius: 0 0 var(--radius-md) var(--radius-md); display: flex; align-items: center; justify-content: space-between; gap: 15px; background: color-mix(in srgb, var(--admin-surface) 92%, transparent); backdrop-filter: blur(14px); }
.sticky-submit-bar > span { color: var(--admin-muted); font-size: 8px; }
.sticky-submit-bar .btn { min-width: 150px; }

/* Settings */
.settings-form { overflow: visible; }
.settings-layout { display: grid; grid-template-columns: 190px minmax(0,1fr); gap: 0; }
.settings-nav { position: sticky; top: 101px; align-self: start; padding: 18px; display: flex; flex-direction: column; gap: 4px; }
.settings-nav a { min-height: 37px; padding: 0 10px; border-radius: 7px; display: flex; align-items: center; color: var(--admin-muted); font-size: 9px; font-weight: 700; }
.settings-nav a:hover { background: var(--admin-bg); color: var(--admin-ink); }
.settings-content { min-width: 0; border-right: 1px solid var(--admin-line); }
.settings-content .form-section { margin-inline: 20px; }
.social-settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 11px; }
.social-setting { padding: 14px; border: 1px solid var(--admin-line); border-radius: 9px; background: var(--admin-surface); }
.social-setting > b { display: block; margin-bottom: 12px; color: var(--admin-brand); font-size: 10px; direction: ltr; text-align: right; }
.social-setting label:last-child { margin-bottom: 0; }
.settings-submit-bar { border-radius: 0 0 var(--radius-md) 0; }

.sidebar-backdrop { position: fixed; z-index: 45; inset: 0; background: rgba(3,8,11,.62); backdrop-filter: blur(2px); }

@media (max-width: 1180px) {
  :root { --sidebar-width: 232px; }
  .dashboard-stats { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .admin-grid { grid-template-columns: 1fr; }
  .admin-products { position: relative; top: auto; max-height: none; }
}

@media (max-width: 1100px) {
  .admin-login-view { grid-template-columns: 1fr; }
  .login-visual { display: none; }
  .login-panel { min-height: 100vh; padding: 28px; background: linear-gradient(145deg, var(--admin-bg), var(--admin-surface)); }
  .login-home-link { margin-bottom: 35px; }
  .login-mobile-brand { margin-bottom: 38px; display: flex; align-items: center; gap: 10px; direction: ltr; }
  .login-mobile-brand span { width: 39px; height: 43px; border-radius: 9px; display: grid; place-items: center; background: var(--admin-ink); color: var(--admin-surface); font-weight: 900; }
  .login-mobile-brand b { font-size: 13px; }

  .admin-shell { display: block; }
  .admin-sidebar { transform: translateX(110%); transition: transform .22s ease; box-shadow: -24px 0 60px rgba(0,0,0,.26); }
  .admin-sidebar.is-open { transform: translateX(0); }
  .sidebar-close, .sidebar-open { display: grid; place-items: center; }
  .admin-main { padding: 92px 18px 50px; }
  .admin-topbar { inset: 0 0 auto 0; min-height: 74px; padding: 12px 18px; }
  .topbar-title p { display: none; }
  .topbar-title h1 { font-size: 18px; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .settings-layout { grid-template-columns: 1fr; }
  .settings-nav { position: static; padding: 12px 18px; flex-direction: row; overflow-x: auto; border-bottom: 1px solid var(--admin-line); }
  .settings-nav a { white-space: nowrap; }
  .settings-content { border-right: 0; }
  .settings-submit-bar { border-radius: 0 0 var(--radius-md) var(--radius-md); }
}

@media (max-width: 680px) {
  .admin-main { padding-inline: 12px; }
  .admin-topbar { padding-inline: 12px; }
  .admin-header-actions .icon-button { display: none; }
  .admin-theme-toggle { width: 42px; padding: 0; justify-content: center; }
  .admin-theme-toggle [data-theme-label] { display: none; }
  .admin-header-actions .btn { min-width: 42px; padding: 0 12px; font-size: 0; }
  .admin-header-actions .btn::before { content: "+"; font-size: 20px; }
  .welcome-panel { align-items: flex-start; flex-direction: column; }
  .system-badge { width: 100%; }
  .dashboard-stats { grid-template-columns: 1fr; }
  .dashboard-product-row { grid-template-columns: 42px minmax(0,1fr); }
  .dashboard-product-row em { grid-column: 2; justify-self: start; }
  .section-toolbar { grid-template-columns: 1fr; }
  .form-row, .form-row.thirds, .social-settings-grid { grid-template-columns: 1fr; }
  .form-section { margin: 12px; padding: 14px; }
  .settings-content .form-section { margin-inline: 12px; }
  .admin-image-preview { grid-template-columns: 1fr; }
  .admin-image-preview img { width: 100%; height: 220px; }
  .sticky-submit-bar { align-items: stretch; flex-direction: column; }
  .sticky-submit-bar > span { display: none; }
  .sticky-submit-bar .btn { width: 100%; }
  .admin-product { grid-template-columns: 48px minmax(0,1fr); }
  .product-icon { width: 48px; height: 48px; }
  .visibility { grid-column: 2; grid-row: 2; justify-self: start; }
  .product-meta-line, .row-actions { grid-column: 1 / -1; }
}

@media (max-width: 420px) {
  .login-panel { padding: 22px; }
  .login-card h1 { font-size: 30px; }
  .welcome-panel { padding: 22px; }
  .welcome-actions { width: 100%; flex-direction: column; }
  .welcome-actions .btn { width: 100%; }
  .panel-heading { padding-inline: 15px; }
  .quick-action-list button { grid-template-columns: 38px minmax(0,1fr); }
  .quick-action-list button > span { width: 38px; height: 38px; }
  .quick-action-list button > em { display: none; }
}

/* Users and permissions */
.users-section { display: grid; gap: 18px; }
.users-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 26px;
  border: 1px solid var(--admin-line);
  border-radius: var(--radius-md);
  background: var(--admin-surface);
  box-shadow: var(--admin-shadow-sm);
}
.users-summary h2 { margin: 7px 0 5px; font-size: 20px; }
.users-summary p { margin: 0; color: var(--admin-muted); font-size: 10px; line-height: 1.8; }
.users-summary-stat {
  flex: 0 0 150px;
  padding: 17px;
  border: 1px solid var(--admin-line);
  border-radius: var(--radius-sm);
  background: var(--admin-surface-soft);
  text-align: center;
}
.users-summary-stat small,
.users-summary-stat em { display: block; color: var(--admin-muted); font-size: 8px; font-style: normal; }
.users-summary-stat b { display: block; margin: 5px 0; font-size: 25px; }
.users-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr);
  gap: 18px;
  align-items: start;
  min-width: 0;
}
.users-grid > * { min-width: 0; max-width: 100%; }
.admin-users {
  min-width: 0;
  border: 1px solid var(--admin-line);
  border-radius: var(--radius-md);
  background: var(--admin-surface);
  box-shadow: var(--admin-shadow-sm);
  overflow: hidden;
}
.admin-user-list { display: grid; gap: 0; }
.admin-user-row {
  display: grid;
  grid-template-columns: 42px minmax(150px, 1.15fr) minmax(150px, .9fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border-top: 1px solid var(--admin-line);
}
.admin-user-row:first-child { border-top: 0; }
.admin-user-row.is-disabled { opacity: .62; background: var(--admin-surface-soft); }
.user-list-avatar {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--admin-brand-soft);
  color: var(--admin-brand);
  font-size: 14px;
  font-weight: 900;
}
.user-list-identity { min-width: 0; }
.user-list-heading { display: flex; align-items: center; gap: 7px; min-width: 0; }
.user-list-heading b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.user-list-identity small,
.user-list-identity em,
.user-permissions-summary small { display: block; overflow: hidden; color: var(--admin-muted); font-size: 8px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.user-list-identity small { margin-top: 5px; direction: ltr; text-align: right; }
.user-list-identity em { margin-top: 4px; }
.user-permissions-summary { min-width: 0; }
.user-permissions-summary b { display: block; margin-bottom: 5px; font-size: 9px; }
.role-badge,
.account-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 7px;
  font-weight: 900;
  white-space: nowrap;
}
.role-badge { background: var(--admin-brand-soft); color: var(--admin-brand); }
.role-owner { background: #f4ead0; color: #8c6414; }
:root[data-theme="dark"] .role-owner { background: #3a311c; color: #f1c76c; }
.role-manager { background: #e9eefc; color: #425ea6; }
:root[data-theme="dark"] .role-manager { background: #202b48; color: #91a8eb; }
.account-status { background: var(--admin-danger-soft); color: var(--admin-danger); }
.account-status.active { background: var(--admin-success-soft); color: var(--admin-success); }
.user-form { position: sticky; top: 94px; }
.field-help { display: block; margin-top: 6px; color: var(--admin-muted); font-size: 8px; font-weight: 500; }
.permission-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.permission-item {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start;
  gap: 9px;
  min-height: 76px;
  padding: 12px;
  border: 1px solid var(--admin-line);
  border-radius: var(--radius-sm);
  background: var(--admin-surface-soft);
  cursor: pointer;
}
.permission-item:hover { border-color: var(--admin-line-strong); }
.permission-item input { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 2px; accent-color: var(--admin-brand); }
.permission-item span { min-width: 0; }
.permission-item b { display: block; color: var(--admin-ink); font-size: 9px; }
.permission-item small { display: block; margin-top: 5px; color: var(--admin-muted); font-size: 7px; line-height: 1.6; }
.permission-item:has(input:checked) { border-color: color-mix(in srgb, var(--admin-brand) 42%, var(--admin-line)); background: var(--admin-brand-soft); }
.permission-item:has(input:disabled) { cursor: default; }

@media (max-width: 1320px) {
  .users-grid { grid-template-columns: minmax(0, 1fr); }
  .user-form { position: static; }
  .user-form .sticky-submit-bar { position: static; }
}

@media (max-width: 760px) {
  html, body { max-width: 100%; overflow-x: hidden; }
  .users-section, .users-grid, .admin-users, .user-form { width: 100%; max-width: 100%; min-width: 0; }
  .users-summary { align-items: stretch; flex-direction: column; padding: 20px; }
  .users-summary-stat { flex-basis: auto; }
  .admin-user-row { grid-template-columns: 40px minmax(0, 1fr) auto; }
  .user-permissions-summary { grid-column: 2 / -1; }
  .admin-user-row > .row-actions { grid-column: 2 / -1; }
  .permission-grid { grid-template-columns: 1fr; }
}


/* Mobile/tablet corrections for users screen */
@media (max-width: 1100px) {
  .users-section { width: 100%; min-width: 0; }
  .users-grid { grid-template-columns: minmax(0, 1fr); }
  .user-form { position: static; overflow: hidden; }
  .user-form > .admin-block-title { position: static; }
  .user-form .sticky-submit-bar { position: static; }
}

@media (max-width: 680px) {
  .users-summary { gap: 14px; padding: 16px; }
  .users-summary-stat { width: 100%; }
  .user-form .form-section { margin: 10px; padding: 13px; }
  .user-form .form-row { grid-template-columns: minmax(0, 1fr); }
  .permission-grid { grid-template-columns: minmax(0, 1fr); }
  .permission-item { min-height: 0; }
  .user-form .sticky-submit-bar { padding: 12px; }
  .user-form .sticky-submit-bar .btn { min-width: 0; width: 100%; }
  .admin-user-row { padding: 13px; }
}

/* ERP customer accounts */
.erp-accounts-section { min-width: 0; }
.erp-accounts-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(390px, .85fr);
  gap: 18px;
  align-items: start;
}
.erp-tenant-list-panel { min-width: 0; }
.erp-tenant-list { display: grid; gap: 12px; padding: 14px; }
.erp-tenant-card {
  padding: 16px;
  border: 1px solid var(--admin-line);
  border-radius: var(--radius-md);
  background: var(--admin-surface);
  box-shadow: 0 8px 24px rgba(20, 35, 50, .035);
}
.erp-tenant-card.is-suspended { opacity: .72; background: var(--admin-surface-soft); }
.erp-tenant-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.erp-tenant-identity { min-width: 0; display: flex; align-items: center; gap: 11px; }
.erp-tenant-avatar {
  width: 42px; height: 42px; flex: 0 0 auto;
  display: grid; place-items: center;
  border-radius: 12px;
  background: var(--admin-brand-soft);
  color: var(--admin-brand);
  font-weight: 900;
}
.erp-tenant-copy { min-width: 0; }
.erp-tenant-copy b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.erp-tenant-copy small { display: block; margin-top: 4px; color: var(--admin-muted); font-size: 8px; direction: ltr; text-align: right; }
.erp-tenant-stats {
  margin: 14px 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.erp-tenant-stats span { padding: 10px; border-radius: 10px; background: var(--admin-surface-soft); text-align: center; }
.erp-tenant-stats b { display: block; color: var(--admin-ink); font-size: 14px; }
.erp-tenant-stats small { display: block; margin-top: 3px; color: var(--admin-muted); font-size: 7px; }
.erp-tenant-meta { display: flex; flex-wrap: wrap; gap: 7px 14px; color: var(--admin-muted); font-size: 8px; }
.erp-tenant-actions { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--admin-line); }
.erp-tenant-actions a,
.erp-tenant-actions button {
  min-height: 32px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--admin-line);
  border-radius: 8px;
  background: var(--admin-surface);
  color: var(--admin-ink);
  font-size: 8px;
  font-weight: 800;
}
.erp-tenant-actions a:hover,
.erp-tenant-actions button:hover { border-color: var(--admin-brand); color: var(--admin-brand); }
.erp-tenant-actions .danger:hover { border-color: #c64f55; color: #c64f55; }
.erp-tenant-form { position: sticky; top: 88px; }

@media (max-width: 1320px) {
  .erp-accounts-grid { grid-template-columns: minmax(0, 1fr); }
  .erp-tenant-form { position: static; }
}

@media (max-width: 680px) {
  .erp-accounts-section, .erp-accounts-grid, .erp-tenant-list-panel, .erp-tenant-form { width: 100%; min-width: 0; }
  .erp-tenant-card { padding: 13px; }
  .erp-tenant-stats { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .erp-tenant-meta { flex-direction: column; gap: 5px; }
  .erp-tenant-actions { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); }
}

/* v18 ERP accounts administration polish */
.erp-accounts-section .users-summary{border:1px solid var(--admin-line);border-radius:16px;background:linear-gradient(135deg,var(--admin-surface),color-mix(in srgb,var(--admin-brand) 5%,var(--admin-surface)));padding:22px 24px;box-shadow:var(--admin-shadow-sm)}
.erp-accounts-section .users-summary h2{font-size:24px;margin:4px 0 8px}.erp-v18-admin-paid{display:block;margin-top:7px;color:var(--admin-brand);font-size:9px;font-weight:900}.erp-accounts-grid{gap:20px!important}.erp-tenant-list{gap:14px!important}.erp-tenant-card{border-radius:14px!important;padding:17px!important;box-shadow:0 8px 24px color-mix(in srgb,var(--admin-ink) 6%,transparent)!important;transition:transform .16s ease,border-color .16s ease}.erp-tenant-card:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--admin-brand) 48%,var(--admin-line))!important}.erp-tenant-stats{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:8px!important}.erp-tenant-stats span{border:1px solid var(--admin-line);background:color-mix(in srgb,var(--admin-brand) 3%,var(--admin-surface-soft))!important}.erp-tenant-stats b{font-size:13px!important}.erp-tenant-actions{display:flex!important;flex-wrap:wrap!important;gap:7px!important}.erp-tenant-actions a,.erp-tenant-actions button{min-height:34px;padding:0 11px!important;border-radius:8px!important}.erp-tenant-form{border-radius:14px!important;overflow:hidden}.erp-tenant-form .form-section{padding-block:20px!important}.erp-tenant-form input,.erp-tenant-form select{min-height:44px!important}
@media(max-width:800px){.erp-tenant-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important}}

/* ERP v18 subscription/account overview */
.erp-v18-admin-overview{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:14px 0 18px}.erp-v18-admin-overview>div{border:1px solid var(--admin-line);background:var(--admin-surface);border-radius:13px;padding:14px 15px;box-shadow:var(--admin-shadow-sm);display:grid;gap:4px}.erp-v18-admin-overview small{color:var(--admin-muted);font-size:8px;font-weight:800}.erp-v18-admin-overview b{font-size:21px;color:var(--admin-ink)}.erp-v18-admin-overview span{font-size:8px;color:var(--admin-muted)}.erp-tenant-card.is-renewal-due{border-color:#aa7b20!important;box-shadow:0 8px 26px rgba(170,123,32,.10)!important}.erp-tenant-card.is-expired{border-color:#934247!important;background:color-mix(in srgb,#8e3038 6%,var(--admin-surface))!important}.erp-tenant-card.is-renewal-due .account-status:after{content:" · تجديد قريب"}.erp-tenant-card.is-expired .account-status:after{content:" · منتهي"}@media(max-width:900px){.erp-v18-admin-overview{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:520px){.erp-v18-admin-overview{grid-template-columns:1fr}}


/* v54 — unified administration theme */
:root,:root[data-theme="dark"]{color-scheme:light!important;--admin-bg:#e9eff1!important;--admin-surface:#ffffff!important;--admin-surface-soft:#f4f8f9!important;--admin-ink:#142b35!important;--admin-muted:#6c8089!important;--admin-line:#d5e0e4!important;--admin-line-strong:#bdccd2!important;--admin-brand:#17647b!important;--admin-brand-hover:#104e62!important;--admin-brand-soft:#e4f1f5!important;--admin-sidebar:#112630!important;--admin-sidebar-soft:#183742!important;--admin-success:#0f766e!important;--admin-success-soft:#e7f5f2!important;--admin-warning:#a96c12!important;--admin-warning-soft:#fff5e2!important;--admin-danger:#b84550!important;--admin-danger-soft:#fff0f2!important;--admin-shadow-sm:0 10px 28px rgba(24,51,63,.07)!important;--admin-shadow-lg:0 28px 80px rgba(20,45,56,.14)!important}
body.static-admin,body.theme-dark.static-admin{background:#e9eff1!important;color:#142b35!important}.admin-theme-toggle{display:none!important}.admin-main,body.theme-dark.static-admin .admin-main{background:linear-gradient(145deg,#eef3f4 0%,#e7edef 100%)!important}
.admin-sidebar{background:linear-gradient(180deg,#102630 0%,#0d2028 100%)!important;border-inline-end:1px solid rgba(255,255,255,.07)!important;box-shadow:10px 0 35px rgba(20,42,51,.11)}.admin-brand-symbol{background:linear-gradient(145deg,#fff,#dce8ec)!important;color:#12303c!important}.admin-nav a{border-radius:11px!important}.admin-nav a:hover{background:rgba(255,255,255,.07)!important}.admin-nav a.active{background:linear-gradient(135deg,#17647b,#0f766e)!important;color:#fff!important;box-shadow:0 8px 22px rgba(15,118,110,.18)}
.admin-topbar{background:rgba(247,250,251,.92)!important;border-bottom:1px solid #d5e0e4!important;box-shadow:0 8px 28px rgba(25,51,62,.05)}.admin-header-actions{gap:9px!important}.admin-content,.dashboard-section{max-width:1500px;margin-inline:auto}.welcome-panel{background:linear-gradient(135deg,#173b4a 0%,#185d69 55%,#0f766e 100%)!important;color:#fff!important;border:0!important;box-shadow:0 22px 60px rgba(21,74,84,.18)!important}.welcome-panel p,.welcome-panel .eyebrow,.welcome-panel small,.welcome-panel em{color:#d8eef0!important}.system-badge{background:rgba(255,255,255,.11)!important;border-color:rgba(255,255,255,.2)!important}
.stat-card,.admin-card,.content-card,.saas-tenant-card,.saas-metrics article,.health-card,.security-grid article,.platform-event-panel,.saas-modal{background:#fff!important;color:#142b35!important;border-color:#d5e0e4!important;box-shadow:0 12px 34px rgba(25,51,62,.065)!important}.stat-card{border-radius:16px!important}.stat-icon,.saas-avatar{background:linear-gradient(145deg,#17647b,#0f766e)!important;color:#fff!important}
.saas-hero{background:linear-gradient(135deg,#dcecf0 0%,#edf7f5 100%)!important;border-color:#c9dde2!important}.saas-toolbar{background:rgba(255,255,255,.94)!important;border-color:#d5e0e4!important}.saas-toolbar input,.saas-toolbar select,.renew-form input,.renew-form select{background:#f8fafb!important;color:#142b35!important;border-color:#cbd9df!important}.saas-state.active{background:#e6f5f1!important;color:#0c6d60!important}.saas-card-actions button,.session-list button,.renew-actions button{background:#fff!important;color:#183540!important;border-color:#d2dee3!important}.saas-card-actions button.primary,.renew-actions .primary{background:#17647b!important;border-color:#17647b!important;color:#fff!important}
.login-visual{background:radial-gradient(circle at 18% 12%,rgba(29,137,138,.24),transparent 34%),linear-gradient(145deg,#102630 0%,#143c49 58%,#0f625d 100%)!important}.login-panel{background:#edf2f3!important}.login-card{box-shadow:0 28px 80px rgba(24,51,62,.13)!important}

/* v57 admin cleanup */
.static-admin .admin-theme-toggle,.static-admin [data-theme-toggle]{display:none!important}.static-admin .login-brand-mark{background:linear-gradient(145deg,#1b6f8c,#17485d)!important;color:#fff!important}.static-admin .login-visual{background:radial-gradient(circle at 20% 15%,#2a6474,#173a48 48%,#102932 100%)!important}.static-admin .login-visual-copy h2,.static-admin .login-visual-copy p,.static-admin .login-system-list span{color:#eef7f8!important}.static-admin .login-kicker{color:#176f87!important}


/* Admin sign-in: keep the full split layout on normal desktop widths. */
@media (min-width: 821px) {
  body.static-admin .admin-login-view {
    min-height: 100dvh !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1.18fr) minmax(390px, .82fr) !important;
    grid-template-areas: "visual panel" !important;
    direction: ltr !important;
    background: #d6e2e6 !important;
  }
  body.static-admin .admin-login-view .login-visual {
    grid-area: visual !important;
    display: flex !important;
    min-height: 100dvh !important;
    direction: rtl !important;
    padding: clamp(38px, 5.5vw, 82px) !important;
    background:
      linear-gradient(rgba(95,158,178,.10) 1px, transparent 1px),
      linear-gradient(90deg, rgba(95,158,178,.08) 1px, transparent 1px),
      radial-gradient(circle at 18% 16%, rgba(77,161,179,.24), transparent 30%),
      linear-gradient(145deg, #234957 0%, #193843 55%, #15313c 100%) !important;
    background-size: 64px 64px, 64px 64px, auto, auto !important;
  }
  body.static-admin .admin-login-view .login-panel {
    grid-area: panel !important;
    min-height: 100dvh !important;
    direction: rtl !important;
    padding: clamp(26px, 4vw, 54px) !important;
    background: #d6e2e6 !important;
  }
  body.static-admin .admin-login-view .login-card {
    width: min(470px, 100%) !important;
    padding: clamp(28px, 3.2vw, 40px) !important;
    border: 1px solid #afc5ce !important;
    border-radius: 22px !important;
    background: #e9f0f3 !important;
    box-shadow: 0 28px 70px rgba(19, 52, 64, .16) !important;
  }
  body.static-admin .admin-login-view .login-home-link { margin-bottom: 42px !important; }
  body.static-admin .admin-login-view .login-card h1 { font-size: clamp(32px, 3vw, 42px) !important; }
  body.static-admin .admin-login-view .admin-login-form input {
    background: #f5f8fa !important;
    border-color: #9eb8c3 !important;
    min-height: 52px !important;
  }
  body.static-admin .admin-login-view .btn-primary {
    min-height: 52px !important;
    background: linear-gradient(135deg, #1b8aac, #17667d) !important;
  }
}
@media (max-width: 820px) {
  body.static-admin .admin-login-view { display: block !important; min-height: 100dvh !important; }
  body.static-admin .admin-login-view .login-visual { display: none !important; }
  body.static-admin .admin-login-view .login-panel { min-height: 100dvh !important; padding: 20px !important; background: #d6e2e6 !important; }
  body.static-admin .admin-login-view .login-card { width: min(480px,100%) !important; padding: 26px !important; border:1px solid #afc5ce !important; border-radius:20px !important; background:#e9f0f3 !important; box-shadow:0 20px 54px rgba(19,52,64,.14) !important; }
}


/* Authentication view isolation.
   Login and admin shell are mutually exclusive. These rules intentionally come
   after all historical responsive rules so [hidden]/.is-hidden cannot be
   overridden by desktop login display declarations. */
html, body.static-admin { max-width: 100%; overflow-x: hidden; }
body.static-admin.admin-auth-login { overflow: hidden !important; background: #d6e2e6 !important; }
body.static-admin.admin-auth-login .admin-page { min-height: 100dvh; width: 100%; max-width: 100%; overflow: hidden; }
body.static-admin [data-admin-login][hidden],
body.static-admin [data-admin-login].is-hidden,
body.static-admin.admin-auth-ready [data-admin-login] { display: none !important; }
body.static-admin [data-admin-panel][hidden],
body.static-admin [data-admin-panel].is-hidden,
body.static-admin.admin-auth-login [data-admin-panel] { display: none !important; }
body.static-admin.admin-auth-login [data-admin-login] {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483000 !important;
  width: 100vw !important;
  max-width: 100vw !important;
  min-width: 0 !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  overflow: hidden !important;
  margin: 0 !important;
}
body.static-admin.admin-auth-ready { overflow-x: hidden; overflow-y: auto; }
body.static-admin.admin-auth-ready [data-admin-panel] { width: 100%; max-width: 100%; }

@media (min-width: 821px) {
  body.static-admin.admin-auth-login [data-admin-login] {
    display: grid !important;
    grid-template-columns: minmax(0, 1.15fr) minmax(400px, .85fr) !important;
    grid-template-areas: "visual panel" !important;
  }
  body.static-admin.admin-auth-login .login-visual,
  body.static-admin.admin-auth-login .login-panel {
    width: 100% !important;
    max-width: 100% !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    overflow: hidden !important;
  }
  body.static-admin.admin-auth-login .login-panel {
    display: grid !important;
    place-items: center !important;
    padding: clamp(24px, 3.4vw, 52px) !important;
  }
  body.static-admin.admin-auth-login .login-card {
    width: min(470px, 100%) !important;
    max-height: calc(100dvh - 48px) !important;
    overflow: auto !important;
    overscroll-behavior: contain;
  }
}

@media (max-width: 820px) {
  body.static-admin.admin-auth-login { overflow-y: auto !important; }
  body.static-admin.admin-auth-login [data-admin-login] {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 100dvh !important;
    overflow: visible !important;
  }
  body.static-admin.admin-auth-login .login-panel {
    width: 100% !important;
    min-width: 0 !important;
  }
  body.static-admin.admin-auth-login .login-card { max-width: 480px !important; margin-inline: auto !important; }
}


/* auth visibility rules live in an external stylesheet so the strict
   Content-Security-Policy can keep style-src limited to self without unsafe-inline. */
body.static-admin [data-admin-login][hidden],
body.static-admin [data-admin-login].is-hidden,
body.static-admin [data-admin-panel][hidden],
body.static-admin [data-admin-panel].is-hidden { display: none !important; }
body.static-admin.admin-auth-login { overflow: hidden; }
body.static-admin.admin-auth-login [data-admin-panel] { display: none !important; }
body.static-admin.admin-auth-ready [data-admin-login] { display: none !important; }
\n\n/* v71 subscription renewal dialogs shared by ERP and POS */\n.admin-renew-overlay{position:fixed;inset:0;z-index:1000;background:rgba(7,15,25,.58);backdrop-filter:blur(5px);display:grid;place-items:center;padding:20px}.admin-renew-card{width:min(760px,96vw);max-height:90vh;overflow:auto;border:1px solid var(--admin-line);border-radius:18px;background:var(--admin-surface);box-shadow:0 24px 70px rgba(0,0,0,.24);padding:18px}.admin-renew-card>.admin-block-title{margin-bottom:12px}.admin-renew-card [data-close-renew]{border:1px solid var(--admin-line);background:var(--admin-surface-soft);color:var(--admin-ink);width:34px;height:34px;border-radius:9px;font-size:20px;cursor:pointer}.admin-renew-card .product-form{position:static!important;box-shadow:none!important;border:0!important;padding:0!important}.renew-history{margin-top:16px;border-top:1px solid var(--admin-line);padding-top:14px;display:grid;gap:8px}.renew-history>b{font-size:11px}.renew-history>div{display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:10px;border:1px solid var(--admin-line);border-radius:10px;padding:10px;background:var(--admin-surface-soft)}.renew-history span{font-size:9px;font-weight:800}.renew-history strong{font-size:10px;color:var(--admin-brand)}.renew-history small{font-size:8px;color:var(--admin-muted);text-align:left}@media(max-width:620px){.admin-renew-overlay{padding:8px}.admin-renew-card{padding:12px;border-radius:13px}.renew-history>div{grid-template-columns:1fr 1fr}.renew-history small{grid-column:1/-1;text-align:right}}\n
/* v71.3 — Admin information architecture refresh */
.admin-nav-v713 { margin-top: 30px; gap: 3px; overflow-y: auto; padding-bottom: 10px; }
.admin-nav-v713 .nav-group-title { margin-top: 15px; }
.admin-nav-v713 a { min-height: 52px; grid-template-columns: 30px minmax(0,1fr) auto; padding: 7px 10px; }
.admin-nav-v713 a > span:nth-child(2) { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.admin-nav-v713 a > span:nth-child(2) > b { color: inherit; font-size: 10px; line-height: 1.35; }
.admin-nav-v713 a > span:nth-child(2) > small { color: #6f858e; font-size: 7px; font-weight: 600; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-nav-v713 a.active > span:nth-child(2) > small { color: #91b7aa; }
.nav-icon-program { width: 29px; height: 29px; border-radius: 8px; background: #1b3037; color: #7dd4b5; font-size: 11px; font-weight: 900; }
.admin-nav-v713 a.active .nav-icon-program { background: #2b5146; color: #b6f2dc; }

.control-dashboard { display: grid; gap: 18px; }
.control-hero-v713 {
  position: relative;
  overflow: hidden;
  min-height: 230px;
  padding: clamp(28px, 4vw, 48px);
  border: 1px solid #263b44;
  border-radius: 22px;
  display: grid;
  grid-template-columns: minmax(0,1.3fr) minmax(220px,.55fr);
  align-items: center;
  gap: 30px;
  color: #eef7f5;
  background:
    radial-gradient(circle at 12% 18%, rgba(78, 196, 157, .20), transparent 35%),
    linear-gradient(135deg, #0d171d 0%, #10262d 52%, #12342e 100%);
  box-shadow: 0 24px 65px rgba(13, 28, 35, .14);
}
.control-hero-v713::after { content:""; position:absolute; width:340px; height:340px; border:1px solid rgba(255,255,255,.055); border-radius:50%; inset:auto -160px -190px auto; }
.control-hero-copy { position: relative; z-index: 1; max-width: 760px; }
.control-hero-copy .eyebrow { color: #7ed8b8; }
.control-hero-copy h2 { margin: 10px 0 12px; max-width: 720px; font-size: clamp(25px, 3vw, 40px); line-height: 1.35; letter-spacing: -.035em; }
.control-hero-copy p { margin: 0; max-width: 680px; color: #a9bdc4; font-size: 11px; line-height: 2; }
.control-hero-actions { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 9px; }
.control-hero-v713 .btn-secondary { border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.07); color: #fff; }
.system-badge-v713 { position: relative; z-index: 1; min-width: 220px; padding: 25px; border-color: rgba(255,255,255,.12); background: rgba(6,16,19,.42); color: #fff; backdrop-filter: blur(12px); }
.system-badge-v713 small, .system-badge-v713 em { color: #8da6ae; }
.system-badge-v713 b { color: #8ee1c3; }

.system-control-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.system-control-card { position: relative; overflow: hidden; min-width:0; padding: 20px; border: 1px solid var(--admin-line); border-radius: 16px; background: var(--admin-surface); box-shadow: var(--admin-shadow-sm); }
.system-control-card::after { content:""; position:absolute; width:105px; height:105px; border-radius:50%; inset:-56px auto auto -48px; background: color-mix(in srgb, var(--card-accent, var(--admin-brand)) 9%, transparent); }
.system-control-card header { position:relative; z-index:1; display:flex; align-items:center; gap:11px; }
.system-letter { flex:0 0 40px; width:40px; height:40px; border-radius:10px; display:grid; place-items:center; background: color-mix(in srgb, var(--card-accent, var(--admin-brand)) 12%, var(--admin-surface)); color: var(--card-accent, var(--admin-brand)); font-size:15px; font-weight:900; }
.system-control-card header small { display:block; color:var(--admin-muted); font-size:7px; }
.system-control-card h3 { margin:3px 0 0; font-size:12px; }
.system-control-number { margin:22px 0 7px; display:flex; align-items:end; gap:8px; }
.system-control-number b { color:var(--card-accent, var(--admin-brand)); font-size:32px; line-height:1; }
.system-control-number span { padding-bottom:3px; color:var(--admin-muted); font-size:8px; }
.system-control-card p { min-height:40px; margin:0; color:var(--admin-muted); font-size:8px; line-height:1.75; }
.system-control-card > button { width:100%; min-height:38px; margin-top:16px; border:1px solid var(--admin-line); border-radius:8px; display:flex; align-items:center; justify-content:space-between; padding:0 11px; background:var(--admin-surface-soft); color:var(--admin-ink); font-size:8px; font-weight:800; }
.system-control-card > button:hover { border-color: color-mix(in srgb, var(--card-accent, var(--admin-brand)) 34%, var(--admin-line)); color:var(--card-accent, var(--admin-brand)); }
.system-erp { --card-accent:#188162; }
.system-pos { --card-accent:#2a7192; }
.system-site { --card-accent:#8a6730; }
.system-admin { --card-accent:#6d5a94; }
.dashboard-grid-v713 { grid-template-columns: minmax(0,1.15fr) minmax(310px,.65fr); }
.quick-action-list-v713 button { min-height:62px; }

/* Program pages are now visually treated as complete workspaces, not repeated admin cards. */
.erp-accounts-section > .users-summary,
.users-section > .users-summary {
  border-radius: 16px;
  border-color: color-mix(in srgb, var(--admin-brand) 17%, var(--admin-line));
  background: linear-gradient(135deg, color-mix(in srgb, var(--admin-brand) 5%, var(--admin-surface)), var(--admin-surface));
}
.erp-v18-admin-overview { border-radius: 14px; overflow: hidden; }
.erp-accounts-grid { gap: 14px; }
.erp-tenant-list-panel, .erp-tenant-form { border-radius: 14px; }

@media (max-width: 1260px) {
  .system-control-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 900px) {
  .control-hero-v713 { grid-template-columns:1fr; }
  .system-badge-v713 { width:100%; }
  .dashboard-grid-v713 { grid-template-columns:1fr; }
}
@media (max-width: 620px) {
  .control-hero-v713 { padding:24px 20px; border-radius:16px; }
  .control-hero-copy h2 { font-size:25px; }
  .system-control-grid { grid-template-columns:1fr; }
}
.workspace-subnav { width:max-content; max-width:100%; margin:0 0 14px; padding:4px; border:1px solid var(--admin-line); border-radius:11px; display:flex; gap:4px; overflow-x:auto; background:var(--admin-surface); box-shadow:var(--admin-shadow-sm); }
.workspace-subnav button { min-width:112px; min-height:36px; border:0; border-radius:8px; padding:0 13px; background:transparent; color:var(--admin-muted); font-size:8px; font-weight:800; white-space:nowrap; }
.workspace-subnav button:hover { color:var(--admin-ink); background:var(--admin-surface-soft); }
.workspace-subnav button.active { background:var(--admin-brand-soft); color:var(--admin-brand); }
.image-url-preview-only { margin-top: 10px; }
.image-url-preview-only .admin-image-preview { margin-top: 0; }