:root {
  --bg: #f6f8fc;
  --sidebar: #0f172a;
  --sidebar-deep: #08111f;
  --primary: #3867ff;
  --primary-dark: #214ce8;
  --card: #ffffff;
  --border: #e8edf5;
  --text: #0F172A;
  --secondary: #64748B;
  --muted: #94A3B8;
  --green: #16b978;
  --red: #ff4757;
  --orange: #ff9f1a;
  --violet: #7c5cff;
  --slate: #94a3b8;
  --shadow: 0 16px 44px rgba(15, 23, 42, .055);
  --shadow-soft: 0 8px 24px rgba(15, 23, 42, .045);
  --radius: 16px;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background:
    radial-gradient(circle at 70% -10%, rgba(56, 103, 255, .08), transparent 34%),
    var(--bg);
  color: var(--text);
  font-family: "Inter";
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
}
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }

.app-loading {
  min-height: 100vh;
  display: grid;
  place-items: center;
}
.boot-card {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow);
}
.brand-logo, .cloud-mark, .avatar, .detail-avatar, .owner-chip > span, .owner-mini > span {
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: linear-gradient(135deg, #3867ff, #7c5cff);
  color: #fff;
  font-weight: 800;
}
.brand-logo { width: 52px; height: 52px; font-size: 24px; }

.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
}
.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 22px 16px;
  background:
    radial-gradient(circle at 20% 0, rgba(56, 103, 255, .28), transparent 28%),
    linear-gradient(180deg, var(--sidebar), var(--sidebar-deep));
  color: #d7e3f4;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 6px 22px;
  border-bottom: 1px solid rgba(232, 237, 245, .08);
}
.cloud-mark {
  width: 46px;
  height: 46px;
  background: transparent;
  color: #3867ff;
}
.cloud-mark .icon { width: 42px; height: 42px; stroke-width: 2.4; }
.brand strong { display: block; color: #fff; font-size: 24px; line-height: 1; }
.brand span { display: block; margin-top: 4px; color: #9fb1c7; font-size: 12px; font-weight: 400; line-height: 1.5; }
.side-nav {
  flex: 1;
  overflow: auto;
  padding: 20px 0;
  scrollbar-width: none;
}
.side-nav::-webkit-scrollbar { display: none; }
.nav-group { margin-bottom: 16px; }
.nav-group p {
  margin: 0 8px 9px;
  color: #7f8fa7;
  font-size: 12px;
  font-weight: 400;
  text-transform: uppercase;
}
.nav-item {
  width: 100%;
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 3px 0;
  padding: 0 12px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #d7e3f4;
  font-size: 12px;
  font-weight: 600;
  text-align: left;
  transition: background .2s ease, transform .2s ease, color .2s ease, box-shadow .2s ease;
}
.nav-item:hover { background: rgba(255,255,255,.07); transform: translateX(2px); }
.nav-item.active {
  background: linear-gradient(135deg, #3867ff, #2454ff);
  color: #fff;
  box-shadow: 0 12px 28px rgba(56, 103, 255, .34);
}
.nav-item.disabled { color: #8fa1b8; }
.nav-item em {
  margin-left: auto;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  color: #b7c7d8;
  font-size: 12px;
  font-weight: 600;
  font-style: normal;
}
.nav-unread{min-width:20px;height:20px;display:grid;place-items:center;margin-left:auto;padding:0 6px;border:2px solid rgba(255,255,255,.85);border-radius:999px;background:#ef4f5f;color:#fff;font-size:9px;font-weight:800;line-height:1}.nav-item.active .nav-unread{border-color:#3867ff;background:#fff;color:#315ff1}
.icon { width: 17px; height: 17px; flex: 0 0 auto; }
.sidebar-footer {
  display: grid;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid rgba(232, 237, 245, .08);
}
.owner-mini, .owner-chip {
  display: flex;
  align-items: center;
  gap: 12px;
}
.owner-mini {
  padding: 12px;
  border: 1px solid rgba(232, 237, 245, .1);
  border-radius: 14px;
  background: rgba(255,255,255,.04);
}
.owner-mini > span, .owner-chip > span { width: 38px; height: 38px; }
.owner-mini strong, .owner-chip strong { display: block; color: inherit; }
.owner-mini em, .owner-chip em { display: block; color: #8fa1b8; font-size: 12px; font-style: normal; }
.logout-btn {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  border: 1px solid rgba(255, 71, 87, .18);
  border-radius: 14px;
  background: rgba(255, 71, 87, .05);
  color: #ff6b78;
  font-weight: 700;
}
.sidebar-footer small { display: block; text-align: center; color: #91a4bb; padding-top: 12px; }

.content-shell {
  min-width: 0;
  padding: 0 24px 34px;
}
.topbar {
  position: sticky;
  top: 0;
  z-index: 8;
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: rgba(246, 248, 252, .88);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(16px);
}
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-weight: 600;
}
.breadcrumb i {
  width: 5px;
  height: 5px;
  border-top: 1.5px solid #8ea0bb;
  border-right: 1.5px solid #8ea0bb;
  transform: rotate(45deg);
}
.breadcrumb strong { color: var(--text); }
.top-actions { display: flex; align-items: center; gap: 12px; }
.top-search, .search {
  height: 48px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--shadow-soft);
}
.top-search { width: 260px; }
.search { min-width: 320px; flex: 1; }
input, select, textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  color: var(--text);
  outline: 0;
}
.top-search input, .search input {
  min-width: 0;
  border: 0;
  padding: 0;
  box-shadow: none;
}
input, select { height: 44px; padding: 0 12px; }
textarea { min-height: 96px; padding: 12px; resize: vertical; }
input:focus, select:focus, textarea:focus {
  border-color: rgba(56, 103, 255, .65);
  box-shadow: 0 0 0 4px rgba(56, 103, 255, .1);
}
.round-btn {
  width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fff;
  color: #1f2a44;
  box-shadow: var(--shadow-soft);
}
.notify { position: relative; }
.notify b {
  position: absolute;
  top: -5px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 99px;
  background: var(--red);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
}
.owner-chip {
  padding: 5px 10px 5px 5px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
}

.page-view { max-width: 1580px; margin: 0 auto; padding-top: 22px; }
.page-title {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 24px;
}
.eyebrow {
  color: var(--primary);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}
h1, h2, h3, p { margin: 0; }
h1 {
  margin-top: 5px;
  font-size: 26px;
  line-height: 1.2;
  font-weight: 800;
}
h2 {
  font-size: 18px;
  line-height: 1.2;
  font-weight: 700;
}
.page-title p {
  margin-top: 8px;
  color: var(--secondary);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
}
.page-actions { display: flex; align-items: center; gap: 10px; }

.btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.btn:hover, .round-btn:hover, .icon-action:hover { transform: translateY(-1px); }
.btn.primary {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff;
  box-shadow: 0 14px 30px rgba(56, 103, 255, .2);
}
.btn.secondary { background: #fff; border-color: var(--border); color: #1f2a44; }
.btn.danger { background: #fff0f2; color: var(--red); border-color: rgba(255, 71, 87, .25); }

.stat-grid {
  display: grid;
  gap: 14px;
  margin-bottom: 18px;
}
.stat-grid.six { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.stat-grid.five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.stat-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stat-card, .panel, .table-card, .settings-panel {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
}
.stat-card {
  position: relative;
  min-height: 124px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 16px;
  overflow: hidden;
}
.stat-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: var(--primary);
  background: rgba(56, 103, 255, .12);
}
.stat-card span { display: block; color: var(--secondary); font-size: 11px; font-weight: 500; line-height: 1.5; }
.stat-card strong { display: block; margin-top: 7px; font-size: 22px; line-height: 1.2; font-weight: 700; }
.stat-card em { display: block; margin-top: 12px; color: var(--muted); font-size: 10.5px; font-weight: 400; line-height: 1.5; font-style: normal; }
.sparkline {
  position: absolute;
  right: 14px;
  bottom: 15px;
  width: 68px;
  height: 20px;
  border-radius: 50% 42% 48% 44%;
  border-bottom: 3px solid currentColor;
  opacity: .75;
}
.tone-green .stat-icon, .tone-green { color: var(--green); }
.tone-red .stat-icon, .tone-red { color: var(--red); }
.tone-orange .stat-icon, .tone-orange { color: var(--orange); }
.tone-violet .stat-icon, .tone-violet { color: var(--violet); }
.tone-slate .stat-icon, .tone-slate { color: var(--slate); }
.tone-blue .stat-icon, .tone-blue { color: var(--primary); }

.cloud-back-btn {
  width: 44px;
  height: 44px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(219, 227, 239, .9);
  border-radius: 16px;
  background: linear-gradient(180deg, #fff, #f8fbff);
  color: #172554;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .06);
  transition: background .2s ease, box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.cloud-back-btn:hover {
  transform: translateY(-1px);
  background: #eef4ff;
  border-color: #d8e4f8;
  box-shadow: 0 14px 28px rgba(15, 23, 42, .1);
}
.cloud-back-btn svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cloud-pos-logo {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(91,95,239,.14), rgba(124,77,255,.12));
  box-shadow: 0 8px 24px rgba(15, 23, 42, .06);
}
.cloud-pos-logo svg {
  width: 48px;
  height: 48px;
  display: block;
  filter: drop-shadow(0 8px 14px rgba(91, 95, 239, .18));
}
.today-sales-card {
  position: relative;
  min-height: 124px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .06);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.today-sales-card:hover {
  transform: translateY(-1px);
  border-color: #dbe6f5;
  box-shadow: 0 14px 30px rgba(15, 23, 42, .08);
}
.today-sales-card::after {
  content: "";
  position: absolute;
  inset: auto 16px 14px 16px;
  height: 1px;
  background: linear-gradient(90deg, rgba(91,95,239,.18), rgba(124,77,255,.02));
}
.today-sales-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, #5B5FEF, #7C4DFF);
  box-shadow: 0 10px 22px rgba(91, 95, 239, .22);
}
.today-sales-icon svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.today-sales-icon.warning {
  color: #f59e0b;
  background: #fff7e6;
  box-shadow: 0 10px 22px rgba(245, 158, 11, .14);
}
.today-sales-body {
  min-width: 0;
  display: grid;
  gap: 7px;
}
.today-sales-body span {
  color: var(--secondary);
  font-size: 11px;
  font-weight: 500;
}
.today-sales-body strong {
  color: #0f172a;
  font-size: 21px;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: 0;
}
.today-sales-body strong small {
  margin-left: 5px;
  color: var(--secondary);
  font-size: 10px;
  font-weight: 700;
}
.today-sales-body em {
  color: var(--muted);
  font-size: 10.5px;
  font-style: normal;
}
.today-sales-body .warning-title {
  color: #92400e;
  font-size: 16px;
  font-weight: 800;
}
.today-sparkline {
  position: absolute;
  right: 14px;
  bottom: 17px;
  width: 92px;
  height: 28px;
  color: #5B5FEF;
}
.skeleton-line {
  display: block;
  height: 14px;
  border-radius: 999px;
  background: linear-gradient(90deg, #edf2fb, #f8fafc, #edf2fb);
  background-size: 220% 100%;
  animation: skeletonMove 1.1s ease-in-out infinite;
}
.skeleton-line.wide { width: 132px; height: 23px; margin-top: 4px; }
.skeleton-line.short { width: 92px; height: 11px; }
@keyframes skeletonMove {
  0% { background-position: 0 0; }
  100% { background-position: -220% 0; }
}

.dashboard-layout, .monitoring-layout, .content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(360px, .7fr);
  gap: 18px;
}
.dashboard-reference-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, .7fr) minmax(320px, .7fr);
  gap: 18px;
}
.dashboard-reference-grid .panel:nth-child(4) {
  grid-column: span 2;
}
.content-grid.right-rail { grid-template-columns: minmax(0, 1fr) 360px; }
.panel { padding: 20px; }
.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.panel-head h2 { font-size: 15px; line-height: 1.2; font-weight: 600; }
.span-full { grid-column: 1 / -1; }

.map-card, .world-map {
  position: relative;
  min-height: 240px;
  border-radius: 14px;
  background:
    radial-gradient(circle at 23% 38%, rgba(56, 103, 255, .18) 0 5px, transparent 6px),
    radial-gradient(circle at 50% 54%, rgba(22, 185, 120, .2) 0 16px, transparent 17px),
    radial-gradient(circle at 73% 34%, rgba(22, 185, 120, .22) 0 22px, transparent 23px),
    linear-gradient(135deg, #f2f6ff, #fff);
  overflow: hidden;
}
.map-card::before, .world-map::before {
  content: "";
  position: absolute;
  inset: 36px;
  border-radius: 42% 58% 50% 46%;
  border: 1px dashed #cfd9ea;
}

.login-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at 22% 16%, rgba(91, 95, 239, .2), transparent 30%),
    radial-gradient(circle at 80% 20%, rgba(124, 77, 255, .16), transparent 32%),
    linear-gradient(135deg, #f7faff 0%, #eef4ff 46%, #f8fbff 100%);
}
.login-page::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(15,23,42,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,23,42,.035) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(circle at center, black, transparent 72%);
}
.login-shell {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 28px;
}
.login-panel {
  width: min(430px, 100%);
  padding: 34px;
  border: 1px solid rgba(219, 227, 239, .92);
  border-radius: 24px;
  background: rgba(255,255,255,.9);
  box-shadow: 0 28px 70px rgba(15, 23, 42, .12);
  backdrop-filter: blur(18px);
}
.login-panel .brand-mark {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  margin-bottom: 20px;
  border-radius: 22px;
  background: linear-gradient(135deg, #5B5FEF, #7C4DFF);
  color: #fff;
  box-shadow: 0 18px 36px rgba(91, 95, 239, .28);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0;
}
.login-panel h1 {
  margin: 0;
  color: #0f172a;
  font-size: 28px;
  line-height: 1.2;
  font-weight: 800;
}
.login-panel p {
  margin-top: 8px;
  color: #64748B;
  font-size: 13px;
  line-height: 1.5;
}
.login-form {
  display: grid;
  gap: 15px;
  margin-top: 26px;
}
.login-form label {
  display: grid;
  gap: 8px;
  color: #334155;
  font-size: 12px;
  font-weight: 700;
}
.login-form input {
  height: 48px;
  border-radius: 16px;
  border-color: #dbe3ef;
  background: #fff;
  font-size: 14px;
}
.login-form button {
  height: 48px;
  margin-top: 6px;
  border: 0;
  border-radius: 16px;
  background: linear-gradient(135deg, #5B5FEF, #7C4DFF);
  color: #fff;
  box-shadow: 0 16px 32px rgba(91, 95, 239, .26);
  font-size: 14px;
  font-weight: 800;
  transition: transform .2s ease, box-shadow .2s ease;
}
.login-form button:hover {
  transform: translateY(-1px);
  box-shadow: 0 20px 40px rgba(91, 95, 239, .32);
}

.remember-login{display:flex!important;align-items:center;gap:9px;margin:-2px 0 2px;font-size:13px;font-weight:600;color:#41506a;cursor:pointer}.remember-login input{width:17px;height:17px;accent-color:var(--primary)}.remember-login small{margin-left:4px;color:#8190a7;font-size:11px;font-weight:500}

.message-center-wrap{position:relative}.message-center{position:absolute;z-index:80;top:52px;right:0;width:min(390px,calc(100vw - 28px));padding:14px;border:1px solid var(--border);border-radius:16px;background:#fff;box-shadow:0 22px 55px rgba(15,23,42,.2)}.message-center header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px}.message-center header strong{display:block;font-size:14px}.message-center header small{display:block;margin-top:3px;color:var(--muted);font-size:11px;line-height:1.35}.message-center header button{width:27px;height:27px;border:0;border-radius:8px;background:#f2f5fa;color:#65738a;font-size:21px;line-height:1;cursor:pointer}.message-center-alert,.message-center-ok{display:block;margin-bottom:10px;padding:7px 9px;border-radius:8px;font-size:11px;font-weight:700}.message-center-alert{background:#fff5df;color:#9a6400}.message-center-ok{background:#e9f8f2;color:#117358}.message-quick-form{display:grid;gap:8px}.message-quick-form select,.message-quick-form textarea{width:100%;box-sizing:border-box;border:1px solid var(--border);border-radius:9px;background:#fff;color:var(--text);font:inherit;font-size:12px}.message-quick-form select{height:36px;padding:0 9px}.message-quick-form textarea{min-height:70px;padding:9px;resize:vertical}.message-quick-form footer{display:flex;align-items:center;gap:7px}.message-quick-form footer label{display:flex;align-items:center;gap:5px;flex:1;color:var(--muted);font-size:10px;font-weight:650;white-space:nowrap}.message-quick-form footer label input{width:14px;height:14px;accent-color:var(--primary)}.message-quick-form footer select{width:78px;height:32px;font-size:10px}.message-quick-form footer button{height:32px;padding:0 11px;border:0;border-radius:8px;background:var(--primary);color:#fff;font-size:11px;font-weight:750;cursor:pointer}.message-quick-form footer button:disabled{opacity:.55;cursor:not-allowed}
.attention-list{display:grid;gap:6px;margin:-2px 0 10px}.attention-item{width:100%;display:grid;grid-template-columns:28px minmax(0,1fr);gap:5px 8px;padding:8px;border:1px solid #f0d6a1;border-radius:9px;background:#fffaf0;color:inherit;text-align:left;cursor:pointer}.attention-item:hover{border-color:#d9a94a;background:#fff5df}.attention-item>span{grid-row:1 / span 2;width:28px;height:28px;display:grid;place-items:center;border-radius:8px;background:#f6dfaa;color:#956000}.attention-item div{min-width:0}.attention-item strong{display:block;overflow:hidden;font-size:11px;text-overflow:ellipsis;white-space:nowrap}.attention-item small{display:block;margin-top:3px;color:#7d6740;font-size:10px;line-height:1.35;white-space:normal}.attention-item em{grid-column:2;color:#956000;font-size:10px;font-style:normal;font-weight:750;white-space:normal}
.recent-messages{display:grid;gap:5px;margin-top:12px;padding-top:10px;border-top:1px solid #edf0f4}.recent-messages-title{color:#6e7d92;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.04em}.recent-messages.empty{display:block;color:#8b98aa;font-size:11px}.recent-message{display:flex;align-items:center;gap:8px;min-width:0;padding:6px 0}.recent-message>div{min-width:0;flex:1}.recent-message strong,.recent-message span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.recent-message strong{font-size:11px}.recent-message span{margin-top:2px;color:#728096;font-size:10px}.recent-message em{flex:0 0 auto;padding:3px 5px;border-radius:5px;background:#eef2f6;color:#66778d;font-size:9px;font-style:normal;font-weight:750}.recent-message em.success,.recent-message em.delivered{background:#e7f7f0;color:#177354}.recent-message em.failed{background:#fdebed;color:#b6414f}
.response-chart {
  min-height: 284px;
  display: grid;
  align-content: center;
  gap: 16px;
}
.response-chart svg {
  width: 100%;
  height: 220px;
  overflow: visible;
}
.response-chart line {
  stroke: #e8edf5;
  stroke-width: .6;
}
.response-chart polyline {
  fill: none;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}
.chart-green { stroke: var(--green); }
.chart-blue { stroke: var(--primary); }
.chart-violet { stroke: var(--violet); }
.chart-orange { stroke: var(--orange); }
.chart-legend {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 18px;
  color: #40516e;
  font-weight: 600;
}
.map-glow, .ping {
  position: absolute;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: rgba(22, 185, 120, .18);
  border: 1px solid rgba(22, 185, 120, .35);
}
.map-glow.one, .p1 { left: 18%; top: 38%; }
.map-glow.two, .p2 { left: 52%; top: 58%; }
.map-glow.three, .p3 { right: 18%; top: 34%; }
.p4 { right: 30%; bottom: 28%; }
.red { background: rgba(255, 71, 87, .18); border-color: rgba(255, 71, 87, .36); }
.orange { background: rgba(255, 159, 26, .18); border-color: rgba(255, 159, 26, .36); }
.map-legend {
  position: absolute;
  left: 24px;
  bottom: 18px;
  display: flex;
  gap: 16px;
  color: #41516f;
  font-weight: 600;
}
.dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 6px;
  border-radius: 99px;
  background: var(--slate);
}
.dot.online { background: var(--green); }
.dot.offline { background: var(--red); }
.dot.orange { background: var(--orange); }
.dot.never { background: var(--slate); }

.status-list, .attention-list, .timeline, .info-rows, .component-table {
  display: grid;
}
.status-list div, .attention-list div, .info-rows div, .component-table div {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--border);
}
.status-list div:last-child, .attention-list div:last-child, .info-rows div:last-child, .component-table div:last-child { border-bottom: 0; }
.status-list em, .attention-list em, .info-rows span, .component-table em, .component-table small {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}
.attention-list strong small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}
.soft-link, .icon-action {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  color: #1d4ed8;
  font-weight: 700;
}
.risk-dot {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: #eef2ff;
}
.risk-dot.offline, .risk-dot.blocked { background: #ffe8eb; }
.risk-dot.never_connected { background: #eef1f5; }
.timeline { gap: 0; }
.timeline div {
  position: relative;
  padding: 0 0 18px 26px;
  border-left: 1px solid #dbe5f0;
}
.timeline span {
  position: absolute;
  left: -6px;
  top: 0;
  width: 12px;
  height: 12px;
  border: 3px solid #fff;
  border-radius: 99px;
  background: var(--green);
  box-shadow: 0 0 0 1px #ccebdc;
}
.timeline em { display: block; margin-top: 4px; color: var(--muted); font-style: normal; }
.version-card, .stats-donut, .mini-stat-row {
  display: flex;
  align-items: center;
  gap: 22px;
}
.donut {
  --value: 0;
  width: 160px;
  height: 160px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: conic-gradient(var(--green) calc(var(--value) * 1%), #edf2f8 0);
}
.donut::before {
  content: "";
  position: absolute;
}
.donut strong, .donut span { grid-area: 1 / 1; }
.donut strong {
  width: 106px;
  height: 106px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #fff;
  font-size: 24px;
}
.donut span { transform: translateY(38px); color: var(--muted); font-size: 12px; }
.legend-list { display: grid; gap: 12px; flex: 1; }
.legend-list span { display: flex; justify-content: space-between; color: #40516e; }

.toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-bottom: 1px solid var(--border);
}
.toolbar select { width: 190px; }
.table-card { overflow: hidden; }
.table-wrap {
  overflow: auto;
  max-height: calc(100vh - 300px);
}
table {
  width: 100%;
  min-width: 980px;
  border-collapse: separate;
  border-spacing: 0;
}
th, td {
  padding: 15px 16px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: middle;
}
td {
  color: var(--text);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
}
th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #fbfdff;
  color: var(--secondary);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
  text-transform: uppercase;
}
tbody tr { transition: background .2s ease; }
tbody tr:hover { background: #fbfdff; }
.entity-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}
.avatar { width: 38px; height: 38px; background: #eef3ff; color: var(--primary); }
.entity-cell strong { display: block; font-size: 12px; font-weight: 600; line-height: 1.5; }
.entity-cell em { display: block; margin-top: 3px; color: var(--muted); font-size: 10.5px; font-weight: 400; line-height: 1.5; font-style: normal; }
.key-cell { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.row-actions { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.empty-cell { padding: 36px; text-align: center; color: var(--muted); }
.tabs {
  display: flex;
  gap: 8px;
  padding: 14px 16px 0;
}
.tabs button, .settings-tabs button {
  min-height: 38px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: #40516e;
  font-size: 12px;
  font-weight: 600;
}
.tabs button.active, .settings-tabs button.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

.badge {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}
.badge-active, .badge-online, .badge-green { background: #e8f8f1; color: var(--green); }
.badge-trial, .badge-blue, .badge-plan { background: #eef3ff; color: var(--primary); }
.badge-expired, .badge-red { background: #ffe8eb; color: var(--red); }
.badge-blocked { background: #fff0f2; color: var(--red); }
.badge-offline { background: #ffe8eb; color: var(--red); }
.badge-stale { background: #fff3df; color: var(--orange); }
.badge-error { background: #ffe8eb; color: var(--red); }
.badge-never_connected, .badge-neutral, .badge-slate { background: #eef2f7; color: #64748b; }
.badge-orange, .badge-soon { background: #fff3df; color: var(--orange); }
.badge-violet { background: #f0edff; color: var(--violet); }
.sync-state { display:inline-flex; align-items:center; gap:6px; color:var(--muted); font-size:11px; white-space:nowrap; }
.sync-state::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--green); }
.sync-state.cached::before, .sync-state.partial::before { background:var(--orange); }
.artifact-list { display:grid; gap:9px; }
.artifact-list article { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:9px 14px; align-items:center; padding:12px; border:1px solid var(--border); border-radius:12px; background:var(--card); }
.artifact-list article div { min-width:0; display:grid; gap:3px; }
.artifact-list article strong,.artifact-list article small,.artifact-list article code { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.artifact-list article small,.artifact-list article code,.artifact-list article p { color:var(--secondary); font-size:10.5px; }
.artifact-list article p { grid-column:1/-1; margin:0; }
@media(max-width:760px){.artifact-list article{grid-template-columns:1fr auto}.artifact-list article .btn{grid-column:1/-1;width:100%}.sync-state{max-width:104px;overflow:hidden;text-overflow:ellipsis}}

.rail { display: grid; gap: 18px; align-content: start; }
.quick-actions {
  display: grid;
  gap: 10px;
}
.quick-actions button {
  min-height: 42px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  color: var(--primary);
  font-size: 12px;
  font-weight: 600;
  text-align: left;
  padding: 0 12px;
}
.dashboard-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.dashboard-actions button {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}
.dashboard-actions button:last-child {
  grid-column: 1 / -1;
}
.component-table div { grid-template-columns: 1fr 100px 80px 80px 80px; }
.tiny-line {
  width: 74px;
  height: 22px;
  border-bottom: 2px solid var(--green);
  border-radius: 50%;
}
.mini-stat-row {
  margin-top: 14px;
}
.mini-stat-row span {
  flex: 1;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fff;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
}
.mini-stat-row em { display: block; margin-top: 5px; color: var(--muted); font-size: 11px; font-style: normal; font-weight: 400; line-height: 1.5; }

.settings-tabs {
  display: flex;
  gap: 28px;
  margin: -4px 0 16px;
  overflow-x: auto;
  scrollbar-width: none;
}
.settings-panel { display: grid; gap: 18px; padding: 18px; }
.settings-form, .grid-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
label { display: grid; gap: 7px; color: #40516e; font-size: 12px; font-weight: 500; line-height: 1.5; }
.wide { grid-column: 1 / -1; }
.logo-preview {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
}
.logo-preview b { color: var(--text); font-size: 20px; }
.logo-preview span { color: var(--muted); font-size: 12px; }
.landing-settings-form small,.settings-help { color: var(--muted); font-size: 11px; font-weight: 400; }
.landing-settings-form textarea { resize: vertical; min-height: 82px; }
.landing-settings-actions { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.landing-settings-actions .btn:disabled { opacity:.55; cursor:not-allowed; }
.carousel-cms { display:grid; gap:14px; }
.carousel-cms-head { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.carousel-cms-head>div { display:grid; gap:3px; }
.carousel-cms-head span,.carousel-upload small { color:var(--muted); font-size:11px; }
.carousel-upload { display:grid; grid-template-columns:1.2fr 1fr auto; gap:10px; align-items:end; padding:12px; border:1px solid var(--border); border-radius:12px; background:color-mix(in srgb,var(--card) 80%,var(--bg)); }
.carousel-upload label { display:grid; gap:5px; font-size:11px; font-weight:650; }
.carousel-file-picker{position:relative}.carousel-file-picker input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.carousel-file-picker>span{min-height:40px;display:flex;align-items:center;padding:0 12px;border:1px dashed var(--line);border-radius:9px;background:var(--surface-soft);color:var(--primary);font-weight:750;cursor:pointer}
.carousel-upload .wide { grid-column:auto; }
.carousel-slide-list { display:grid; gap:8px; }
.carousel-empty{display:grid;gap:3px;padding:12px;border:1px dashed var(--line);border-radius:10px;color:var(--secondary)}.carousel-empty strong{color:var(--text)}
.carousel-cms-item { display:grid; grid-template-columns:132px minmax(0,1fr) auto; gap:12px; align-items:center; padding:10px; border:1px solid var(--border); border-radius:12px; background:var(--card); }
.carousel-preview{width:132px;height:88px;overflow:hidden;border-radius:8px;background:var(--bg)}.carousel-preview img{width:100%;height:100%;object-fit:cover;object-position:var(--fx) var(--fy);transform:scale(var(--zoom));transition:transform .2s ease}
.carousel-cms-fields { min-width:0; display:grid; grid-template-columns:repeat(2,minmax(140px,1fr)) auto; gap:8px; align-items:center; }
.carousel-device-flags,.carousel-focal,.carousel-schedule{grid-column:1/-1;display:flex;align-items:center;gap:12px;flex-wrap:wrap}.carousel-device-flags label{display:flex;align-items:center;gap:5px;font-size:10px}.carousel-device-flags input{min-height:0}.carousel-focal label{display:flex;align-items:center;gap:5px;color:var(--secondary);font-size:10px}.carousel-focal input{width:90px;min-height:0}.carousel-schedule label{display:grid;gap:3px;color:var(--secondary);font-size:10px}.carousel-schedule input{min-height:34px}
.carousel-cms-fields input { min-width:0; }
.carousel-cms-actions { display:flex; gap:6px; align-items:center; }
.carousel-cms-actions .icon-btn { width:36px; height:36px; }
@media(max-width:760px){.carousel-cms-head{align-items:stretch;flex-direction:column}.carousel-upload{grid-template-columns:1fr}.carousel-cms-item{grid-template-columns:88px minmax(0,1fr)}.carousel-preview{width:88px;height:72px}.carousel-cms-fields{grid-template-columns:1fr}.carousel-device-flags,.carousel-focal,.carousel-schedule{grid-column:1}.carousel-focal input{width:72px}.carousel-cms-actions{grid-column:1/3;overflow-x:auto;padding-bottom:2px}.carousel-cms-actions .btn{white-space:nowrap}}
.toggle-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
}
.toggle-row span { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; }
.switch input { display: none; }
.switch i {
  width: 44px;
  height: 26px;
  display: block;
  border-radius: 999px;
  background: #cbd5e1;
  position: relative;
}
.switch i::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: #fff;
  transition: transform .2s ease;
}
.switch input:checked + i { background: var(--primary); }
.switch input:checked + i::after { transform: translateX(18px); }

dialog {
  width: min(780px, calc(100% - 24px));
  border: 0;
  border-radius: 18px;
  padding: 0;
  background: transparent;
}
dialog::backdrop {
  background: rgba(15, 23, 42, .42);
  backdrop-filter: blur(4px);
}
.modal-card, .shop-detail {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 28px 90px rgba(15, 23, 42, .22);
}
.modal-card header, .modal-card footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
  background: #fbfdff;
}
.modal-card footer {
  justify-content: flex-end;
  border-top: 1px solid var(--border);
  border-bottom: 0;
}
.modal-card main { padding: 20px; }
.modal-card h2 { margin-bottom: 5px; }
.modal-card p { color: var(--muted); }
.created-key {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px;
  border: 1px solid #d5e3ff;
  border-radius: 14px;
  background: #f3f7ff;
  font-family: "Inter";
}
.detail-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(135deg, #fbfdff, #fff);
}
.shop-detail-page { display: grid; gap: 18px; }
.shop-hero {
  display: grid;
  grid-template-columns: 44px 64px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
}
.shop-title-block h1 {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0;
}
.shop-title-block > div {
  display: flex;
  align-items: center;
  gap: 12px;
}
.shop-title-block p {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  color: #52627f;
  font-weight: 600;
}
.shop-title-block .icon { width: 15px; height: 15px; }
.shop-hero-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.detail-avatar { width: 58px; height: 58px; font-size: 24px; }
.detail-hero p { margin-top: 4px; color: var(--muted); }
.detail-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0;
}
.detail-chips span {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
}
.detail-chips .icon { width: 15px; height: 15px; color: var(--primary); }
.detail-kpis { margin: 0; }
.detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 0;
}
.vps-panel, .infra-panel {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow-soft);
}
.vps-panel header, .infra-panel header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.vps-panel header span, .infra-panel header span {
  color: var(--secondary);
  font-size: 11px;
  font-weight: 600;
}
.vps-panel header h2, .infra-panel header h2 {
  margin: 3px 0 0;
  font-size: 16px;
  line-height: 1.2;
}
.vps-panel header small, .infra-panel header small {
  color: var(--muted);
  font-size: 11px;
}
.vps-metrics, .infra-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.vps-card, .metric-skeleton, .metric-error {
  min-height: 112px;
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: linear-gradient(180deg, #fff, #fbfdff);
}
.vps-card span {
  color: var(--secondary);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}
.vps-card strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 15px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vps-card small {
  min-height: 18px;
  overflow: hidden;
  color: var(--secondary);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.resource-bar {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: #edf2f7;
}
.resource-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--green);
}
.vps-card.warning .resource-bar i { background: var(--orange); }
.vps-card.danger .resource-bar i { background: var(--red); }
.metric-skeleton {
  position: relative;
  overflow: hidden;
  background: #f8fafc;
}
.metric-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent);
  transform: translateX(-100%);
  animation: shimmer 1.3s infinite;
}
@keyframes shimmer { to { transform: translateX(100%); } }
.metric-error {
  grid-column: 1 / -1;
  grid-template-columns: 32px 1fr;
  align-items: center;
  min-height: 72px;
}
.metric-error .icon { color: var(--orange); }
.metric-error span { color: var(--secondary); }
.detail-tabs {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 0 14px;
  border-bottom: 1px solid var(--border);
}
.detail-tabs button {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  color: #40516e;
  font-size: 12px;
  font-weight: 600;
}
.detail-tabs button.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}
.detail-bottom {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr);
  gap: 18px;
}
.compact-location-grid {
  align-items: start;
}
.detail-overview-grid {
  grid-template-columns: minmax(0, 1fr) minmax(340px, .9fr);
}
.detail-overview-grid > .panel:nth-child(3) {
  grid-column: 1 / -1;
}
.compact-location-grid > .panel:first-child .shop-timeline {
  max-height: 260px;
  overflow: auto;
  padding-right: 6px;
}
.compact-activity {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.compact-activity div {
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fbfdff;
}
.compact-activity span {
  display: none;
}
.compact-activity strong,
.compact-activity em,
.compact-activity time {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.compact-activity time {
  margin-top: 6px;
}
.compact-more {
  width: max-content;
  margin: 12px auto 0;
}
.detail-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.detail-actions button {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 50px;
  padding: 8px 12px;
}
.detail-actions button span { display: grid; gap: 3px; }
.detail-actions button em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
}
.spacious div { grid-template-columns: 180px 1fr; }
.server-rows { display: grid; }
.server-rows div {
  display: grid;
  grid-template-columns: 28px 1fr 100px 110px;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.server-rows div:last-child { border-bottom: 0; }
.server-rows span {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #eef3ff;
  color: var(--primary);
}
.server-rows em { color: var(--green); font-style: normal; font-weight: 600; }
.server-rows small { color: #52627f; }
.location-card {
  display: grid;
  gap: 10px;
}
.location-card.compact {
  min-height: 0;
}
.location-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.location-head strong {
  display: block;
  font-size: 14px;
}
.location-head span {
  display: block;
  margin-top: 3px;
  color: var(--secondary);
  font-size: 11px;
}
.location-head em {
  height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  background: #eef8f2;
  color: var(--green);
  font-style: normal;
  font-weight: 700;
  white-space: nowrap;
}
.osm-map {
  min-height: 220px;
  height: 230px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #eef3ff;
}
.location-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.location-meta span {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.location-meta a {
  flex: 0 0 auto;
  color: var(--primary);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}
.location-empty {
  min-height: 240px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 9px;
  padding: 28px;
  border: 1px dashed #d7dfec;
  border-radius: 14px;
  background: linear-gradient(180deg, #fbfdff, #f6f8fc);
  text-align: center;
}
.location-empty.small {
  min-height: 220px;
  padding: 18px;
}
.location-empty small {
  color: var(--muted);
  font-size: 11px;
}
.device-location-select {
  width: 100%;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  color: var(--text);
  font: inherit;
  font-size: 12px;
}
.infra-panel {
  margin: 4px 0 18px;
}
.storage-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 12px;
  align-items: center;
}
.storage-summary strong {
  font-size: 18px;
  line-height: 1.2;
}
.storage-summary span,
.storage-summary p {
  margin: 0;
  color: var(--secondary);
  font-size: 12px;
}
.storage-summary .resource-bar,
.storage-summary p {
  grid-column: 1 / -1;
}
.storage-summary .btn {
  min-height: 34px;
  padding: 0 10px;
}
.storage-layout {
  display: grid;
  grid-template-columns: minmax(280px, .34fr) minmax(0, 1fr);
  gap: 16px;
}
.storage-stats {
  margin-bottom: 12px;
}
.storage-distribution {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 14px;
}
.storage-distribution span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card);
}
.storage-distribution b {
  color: var(--text);
  font-size: 12px;
}
.storage-distribution em {
  color: var(--secondary);
  font-size: 11px;
  font-style: normal;
}
.storage-explorer .table-wrap {
  max-height: 620px;
}
.storage-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: #fbfdff;
}
.storage-breadcrumbs button {
  border: 0;
  background: transparent;
  color: var(--primary);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.storage-breadcrumbs i,
.storage-breadcrumbs small {
  color: var(--muted);
  font-style: normal;
}
.storage-file .avatar svg {
  width: 16px;
  height: 16px;
}
.storage-actions .danger {
  color: var(--red);
}
.storage-actions button:disabled {
  opacity: .45;
  cursor: not-allowed;
}
.recommendation-list {
  display: grid;
}
.recommendation-list div {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
}
.recommendation-list div:last-child {
  border-bottom: 0;
}
.recommendation-list strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.recommendation-list small {
  display: block;
  margin-top: 3px;
  color: var(--secondary);
  font-size: 11px;
  font-weight: 500;
}
.recommendation-list em {
  color: var(--secondary);
  font-size: 11px;
  font-style: normal;
  white-space: nowrap;
}
.location-empty span {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: #eef3ff;
  color: var(--primary);
}
.location-empty strong { font-size: 15px; }
.location-empty p {
  max-width: 280px;
  margin: 0;
  color: var(--secondary);
}
.shop-timeline time {
  position: absolute;
  right: 0;
  top: 0;
  color: #52627f;
  font-size: 12px;
}
.center-btn {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 12px auto 0;
  padding: 0 18px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  color: var(--primary);
  font-size: 12px;
  font-weight: 600;
}
.table-footer { display: grid; place-items: center; padding: 0 16px 16px; }
.backup-layout .table-wrap {
  max-height: clamp(320px, 52vh, 560px);
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
.backup-layout .table-wrap thead {
  position: sticky;
  top: 0;
  z-index: 3;
}
.backup-layout .table-wrap thead th {
  box-shadow: 0 1px 0 var(--border);
}
.backup-page .page-title {
  margin-bottom: 16px;
}
.backup-page h1 {
  font-size: 26px;
  line-height: 1.2;
  font-weight: 800;
}
.backup-page .page-title p {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.5;
  font-weight: 500;
  color: var(--secondary);
}
.backup-page .stat-grid {
  gap: 12px;
  margin-bottom: 14px;
}
.backup-page .stat-card {
  min-height: 108px;
  padding: 16px;
  gap: 12px;
  border-radius: 12px;
}
.backup-page .stat-icon {
  width: 40px;
  height: 40px;
}
.backup-page .stat-icon .icon {
  width: 20px;
  height: 20px;
}
.backup-page .stat-card span {
  font-size: 11px;
  line-height: 1.5;
  font-weight: 500;
  color: var(--secondary);
}
.backup-page .stat-card strong {
  margin-top: 7px;
  font-size: 22px;
  line-height: 1.2;
  font-weight: 700;
}
.backup-page .stat-card em {
  margin-top: 12px;
  font-size: 10.5px;
  line-height: 1.5;
  font-weight: 400;
}
.backup-page .sparkline {
  width: 78px;
  height: 19px;
  right: 16px;
  bottom: 15px;
  border-bottom-width: 2px;
}
.backup-table-card {
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, .04);
}
.backup-table-head {
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
}
.backup-table-head h2 {
  font-size: 15px;
  line-height: 1.2;
  font-weight: 600;
}
.backup-table-head > div {
  display: flex;
  align-items: center;
  gap: 12px;
}
.backup-table-head select,
.backup-table-head .btn,
.date-pill {
  height: 34px;
  min-height: 34px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  color: #243557;
  font-size: 12px;
  font-weight: 600;
}
.backup-table-head select { width: 154px; padding: 0 10px; }
.backup-table-head .btn { padding: 0 13px; }
.date-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 0 13px;
}
.date-pill .icon {
  width: 13px;
  height: 13px;
}
.backup-table-card .toolbar {
  min-height: 58px;
  padding: 10px 18px;
  gap: 12px;
}
.backup-table-card .search {
  height: 42px;
  min-width: 0;
  box-shadow: none;
  border-radius: 11px;
}
.backup-table-card .search input {
  font-size: 12px;
  font-weight: 400;
}
.backup-table-card .toolbar select,
.backup-table-card .toolbar .btn {
  height: 38px;
  min-height: 38px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
}
.backup-table-card .toolbar select { width: 170px; }
.backup-table-card table {
  min-width: 860px;
  font-size: 12px;
}
.backup-table-card th {
  padding: 9px 18px;
  font-size: 11px;
  line-height: 1.5;
  font-weight: 600;
  color: var(--secondary);
  background: #fbfcff;
}
.backup-table-card td {
  height: 46px;
  padding: 6px 18px;
  font-size: 12px;
  line-height: 1.5;
  font-weight: 400;
  color: var(--text);
}
.backup-table-card .entity-cell {
  gap: 10px;
}
.backup-table-card .avatar {
  width: 26px;
  height: 26px;
  font-size: 12px;
  font-weight: 600;
}
.backup-table-card .entity-cell strong {
  font-size: 13px;
  line-height: 1.5;
  font-weight: 600;
}
.backup-table-card .entity-cell em {
  margin-top: 2px;
  font-size: 10.5px;
  line-height: 1.5;
  font-weight: 400;
}
.backup-table-card .badge {
  min-height: 20px;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.5;
}
.backup-table-card .row-actions {
  gap: 7px;
}
.backup-table-card .icon-action {
  width: 28px;
  min-width: 28px;
  height: 28px;
  min-height: 28px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border-radius: 8px;
}
.backup-table-card .icon-action .icon {
  width: 14px;
  height: 14px;
}
.backup-table-card .table-footer {
  padding: 10px 16px 14px;
}
.backup-table-card .center-btn {
  min-height: 34px;
  margin-top: 0;
  padding: 0 24px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
}
.safe-note {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
  padding: 18px;
  border-radius: 14px;
  background: #eaf9f1;
  color: #19694b;
}
.safe-note .icon {
  width: 32px;
  height: 32px;
  color: var(--green);
}
.safe-note span { display: block; margin-top: 4px; color: #3c6f5d; }
.storage-card strong { font-size: 30px; }
.storage-card > span { color: var(--muted); margin-left: 4px; }
.progress {
  height: 12px;
  margin: 18px 0 12px;
  overflow: hidden;
  border-radius: 999px;
  background: #eef2f7;
}
.progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--violet), var(--primary));
}
.storage-legend {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  color: #52627f;
  font-size: 12px;
}
.storage-legend b { color: var(--text); }
.compact div { grid-template-columns: 1fr auto; }
.toast {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 60;
  max-width: min(440px, calc(100% - 40px));
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--sidebar);
  color: #fff;
  box-shadow: var(--shadow);
}
.hidden { display: none !important; }

@media (max-width: 1280px) {
  .stat-grid.six, .stat-grid.five { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dashboard-layout, .dashboard-reference-grid, .monitoring-layout, .content-grid.right-rail { grid-template-columns: 1fr; }
  .dashboard-reference-grid .panel:nth-child(4) { grid-column: auto; }
  .rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vps-metrics, .infra-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .storage-layout { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; }
  .side-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .future { display: none; }
  .content-shell { padding: 0 16px 24px; }
  .topbar, .page-title, .toolbar { align-items: stretch; flex-direction: column; }
  .top-search, .search, .toolbar select { width: 100%; min-width: 0; }
  .stat-grid.six, .stat-grid.five, .stat-grid.four, .rail, .detail-grid, .detail-bottom, .vps-metrics, .infra-grid, .settings-form, .grid-form, .toggle-grid { grid-template-columns: 1fr; }
  .dashboard-actions, .detail-actions, .compact-activity { grid-template-columns: 1fr; }
  .dashboard-actions button:last-child, .detail-overview-grid > .panel:nth-child(3) { grid-column: auto; }
  .shop-hero { grid-template-columns: 44px minmax(0, 1fr); }
  .shop-hero .cloud-logo, .shop-hero-actions { grid-column: 1 / -1; }
  .osm-map { min-height: 220px; height: 220px; }
  .location-empty { min-height: 220px; }
}

@media (max-width: 560px) {
  .side-nav { grid-template-columns: 1fr; }
  .owner-chip { display: none; }
  .detail-actions { grid-template-columns: 1fr; }
}

/* v0.9 compact SaaS polish */
:root {
  --radius: 13px;
  --cloud-gap: 12px;
  --control-h: 36px;
  --row-h: 46px;
}

.content-shell { padding: 0 18px 26px; }
.topbar { min-height: 60px; gap: 14px; }
.page-view { padding-top: 18px; }
.page-title { margin-bottom: 16px; }
.page-title h1 { font-size: 24px; line-height: 1.18; }
.page-title p { margin-top: 4px; font-size: 12px; }
.btn {
  min-height: var(--control-h);
  padding: 0 13px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
}
.top-search,
.search {
  height: var(--control-h);
  border-radius: 11px;
  box-shadow: none;
}
.top-search { width: 250px; }
input,
select { height: var(--control-h); border-radius: 10px; font-size: 12px; }
textarea { border-radius: 10px; font-size: 12px; }
.round-btn {
  width: var(--control-h);
  height: var(--control-h);
  border-radius: 11px;
  box-shadow: none;
}
.stat-grid { gap: var(--cloud-gap); margin-bottom: 14px; }
.stat-card {
  min-height: 104px;
  padding: 13px;
  border-radius: 13px;
  box-shadow: 0 8px 22px rgba(15, 23, 42, .04);
}
.stat-card .stat-icon { width: 38px; height: 38px; }
.stat-card span { font-size: 11px; }
.stat-card strong { font-size: 22px; line-height: 1.15; }
.stat-card em { font-size: 11px; }
.panel,
.table-card,
.provision-card,
.provision-side .panel {
  border-radius: 13px;
  box-shadow: 0 8px 22px rgba(15, 23, 42, .04);
}
.panel { padding: 14px; }
.panel-head { margin-bottom: 12px; }
.panel-head h2 { font-size: 15px; }
.toolbar {
  min-height: 54px;
  gap: 10px;
  padding: 10px 12px;
}
.toolbar select { max-width: 180px; }
.table-wrap table { font-size: 12px; }
th {
  height: 36px;
  padding: 8px 14px;
  font-size: 11px;
  letter-spacing: 0;
  white-space: nowrap;
}
td {
  height: var(--row-h);
  padding: 8px 14px;
  font-size: 12px;
}
td em {
  display: block;
  color: var(--secondary);
  font-size: 10.5px;
  font-style: normal;
}
.entity-cell { gap: 9px; }
.avatar {
  width: 28px;
  height: 28px;
  font-size: 12px;
}
.entity-cell strong { font-size: 12px; }
.entity-cell em { font-size: 10.5px; }
.badge {
  min-height: 20px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
}
.row-actions { display: flex; gap: 6px; white-space: nowrap; }
.icon-action {
  min-height: 28px;
  min-width: 28px;
  padding: 0 9px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
}
.icon-action.primary {
  border-color: rgba(56,103,255,.22);
  background: rgba(56,103,255,.08);
  color: var(--primary);
}

.provision-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(340px, .75fr);
  gap: 14px;
  align-items: start;
}
.provision-card {
  padding: 16px;
  border: 1px solid var(--border);
  background: #fff;
}
.wizard-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.wizard-step {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fbfcff;
  color: var(--secondary);
}
.wizard-step span {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #eef4ff;
  color: var(--primary);
  font-size: 11px;
  font-weight: 800;
}
.wizard-step strong { font-size: 12px; }
.wizard-step.active {
  border-color: rgba(56, 103, 255, .22);
  background: linear-gradient(135deg, rgba(56,103,255,.1), rgba(124,77,255,.06));
  color: var(--text);
}
.provision-section {
  padding: 14px 0;
  border-top: 1px solid var(--border);
}
.provision-section h2 {
  margin: 0 0 12px;
  font-size: 15px;
}
.provision-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.provision-side {
  display: grid;
  gap: 14px;
}
.provision-preview strong {
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.warning-row strong { color: var(--orange); }
.provision-result {
  display: grid;
  gap: 10px;
}
.provision-result > strong { font-size: 16px; }
.provision-result a { color: var(--primary); font-weight: 700; }
.provision-domain-hint { margin: -4px 0 0; color: var(--muted); font-size: 12px; }

.pos-apk-card{display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px;border:1px solid #dbe5f2;border-radius:12px;background:linear-gradient(135deg,#f8fbff,#f1f6ff)}
.pos-apk-card.compact{margin:12px 0 4px}
.pos-apk-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:11px;background:#e4edff;color:#2f62ed}
.pos-apk-icon svg{width:22px;height:22px}
.pos-apk-copy{display:grid;gap:3px;min-width:0}
.pos-apk-copy strong{font-size:13px;color:var(--text)}
.pos-apk-copy span{font-size:11px;color:var(--muted)}
.pos-apk-copy code{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:600 10px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace;color:#45617e}
.pos-apk-actions{display:flex;gap:7px;align-items:center}
.pos-apk-actions .btn{min-height:34px;padding:0 11px;text-decoration:none;white-space:nowrap}

@media(max-width:760px){.pos-apk-card{grid-template-columns:38px minmax(0,1fr);gap:9px;padding:10px}.pos-apk-icon{width:38px;height:38px}.pos-apk-actions{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr}.pos-apk-actions .btn{justify-content:center}.pos-apk-copy code{max-width:230px}}
.domain-card .info-rows { margin-bottom: 14px; }
.domain-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.domain-actions .btn { width: auto; min-height: 36px; }
.domain-error { margin: 0 0 12px; padding: 9px 11px; border: 1px solid #fecaca; border-radius: 9px; background: #fff1f2; color: #b42318; font-size: 12px; overflow-wrap: anywhere; }
.domain-badges { display: flex; flex-wrap: wrap; gap: 7px; }
.domain-badges span { padding: 5px 8px; border-radius: 999px; background: var(--soft); color: var(--muted); font-size: 11px; font-weight: 700; }
.secret-grid {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: #f8fbff;
}
.secret-grid span { color: var(--secondary); }
.secret-grid code {
  overflow: auto;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 11px;
  color: var(--text);
}

@media (max-width: 1180px) {
  .provision-layout { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .content-shell { padding: 0 12px 20px; }
  .page-title h1 { font-size: 22px; }
  .wizard-strip { grid-template-columns: 1fr 1fr; }
  .provision-actions { flex-direction: column; }
  .toolbar select { max-width: none; }
}

/* Owner APK mobile shell, v0.9.1 */
.mobile-tabbar { display: none; }

@media (max-width: 760px) {
  html,
  body {
    min-height: 100%;
    overflow-x: hidden;
  }

  body {
    background:
      radial-gradient(circle at 8% -5%, rgba(56, 103, 255, .13), transparent 28%),
      linear-gradient(180deg, #f7faff 0%, #f3f6fb 100%);
    font-size: 11.5px;
  }

  .app-shell {
    display: block;
    min-height: 100vh;
    padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px));
  }

  .sidebar {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 20;
    height: 62px;
    min-height: 62px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: calc(8px + env(safe-area-inset-top, 0px)) 14px 8px;
    background: rgba(7, 16, 31, .96);
    border-bottom: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 10px 30px rgba(15, 23, 42, .12);
    backdrop-filter: blur(18px);
  }

  .brand {
    min-width: 0;
    gap: 9px;
    padding: 0;
    border: 0;
  }

  .cloud-mark {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    background: rgba(56, 103, 255, .12);
  }

  .cloud-mark .icon {
    width: 28px;
    height: 28px;
  }

  .brand strong {
    font-size: 18px;
  }

  .brand span {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 10px;
  }

  .side-nav,
  .sidebar-footer small,
  .sidebar-footer form {
    display: none;
  }

  .sidebar-footer {
    display: block;
    padding: 0;
    border: 0;
  }

  .owner-mini {
    min-width: 0;
    max-width: 132px;
    gap: 8px;
    padding: 5px 8px 5px 5px;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
  }

  .owner-mini > span {
    width: 30px;
    height: 30px;
    font-size: 11px;
  }

  .owner-mini strong,
  .owner-mini em {
    max-width: 76px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 10.5px;
  }

  .content-shell {
    padding: calc(68px + env(safe-area-inset-top, 0px)) 12px 0;
  }

  .topbar {
    position: sticky;
    top: calc(62px + env(safe-area-inset-top, 0px));
    z-index: 14;
    min-height: auto;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 9px;
    align-items: center;
    padding: 10px 0;
    background: rgba(247, 250, 255, .92);
    border-bottom: 1px solid rgba(219, 227, 239, .75);
    backdrop-filter: blur(16px);
  }

  .breadcrumb {
    min-width: 0;
    gap: 7px;
    overflow: hidden;
    white-space: nowrap;
    font-size: 11px;
  }

  .breadcrumb span {
    display: none;
  }

  .breadcrumb strong {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .top-actions {
    justify-self: end;
    gap: 6px;
  }

  .top-search {
    width: 42px;
    padding: 0;
    justify-content: center;
  }

  .top-search input {
    display: none;
  }

  .round-btn {
    width: 34px;
    height: 34px;
    border-radius: 12px;
  }

  .round-btn.notify b {
    top: -6px;
    right: -5px;
    min-width: 16px;
    height: 16px;
    font-size: 10px;
  }

  .owner-chip {
    display: none;
  }

  .page-view {
    max-width: none;
    padding-top: 14px;
  }

  .page-title {
    display: grid;
    gap: 12px;
    margin-bottom: 13px;
  }

  .eyebrow {
    font-size: 10px;
  }

  .page-title h1 {
    margin-top: 3px;
    font-size: 20px;
  }

  .page-title p {
    max-width: 34em;
    font-size: 11.5px;
  }

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

  .page-actions .btn {
    width: 100%;
  }

  .stat-grid,
  .stat-grid.six,
  .stat-grid.five,
  .stat-grid.four,
  .backup-page .stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .stat-card,
  .backup-page .stat-card {
    min-height: 78px;
    padding: 10px;
    border-radius: 13px;
  }

  .stat-card .stat-icon,
  .backup-page .stat-icon {
    width: 30px;
    height: 30px;
  }

  .stat-card strong,
  .backup-page .stat-card strong {
    margin-top: 3px;
    font-size: 18px;
  }

  .stat-card span,
  .stat-card em,
  .backup-page .stat-card span,
  .backup-page .stat-card em {
    font-size: 10.5px;
  }
  .stat-card em, .backup-page .stat-card em { margin-top: 5px; }

  .sparkline {
    width: 48px;
    height: 16px;
    right: 10px;
    bottom: 11px;
    border-bottom-width: 2px;
  }

  .panel,
  .table-card,
  .settings-panel,
  .backup-table-card {
    border-radius: 17px;
  }

  .panel {
    padding: 13px;
  }

  .panel-head {
    gap: 10px;
  }

  .panel-head h2,
  .backup-table-head h2 {
    font-size: 14px;
  }

  .toolbar,
  .backup-table-card .toolbar,
  .backup-table-head {
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
    min-height: auto;
    padding: 12px;
  }

  .backup-table-head > div {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .search,
  .toolbar select,
  .toolbar .btn,
  .backup-table-head select,
  .backup-table-head .btn,
  .backup-table-card .toolbar select,
  .backup-table-card .toolbar .btn {
    width: 100%;
    max-width: none;
    min-width: 0;
    height: 38px;
  }

  .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .backup-layout .table-wrap {
    max-height: clamp(300px, 48dvh, 480px);
    overflow: auto;
  }

  .table-wrap table,
  .backup-table-card table {
    min-width: 780px;
    font-size: 11.5px;
  }

  th,
  .backup-table-card th {
    height: 34px;
    padding: 7px 11px;
    font-size: 10px;
  }

  td,
  .backup-table-card td {
    height: 44px;
    padding: 8px 11px;
    font-size: 11.5px;
  }

  .entity-cell strong,
  .backup-table-card .entity-cell strong {
    font-size: 11.5px;
  }

  .entity-cell em,
  td em,
  .backup-table-card .entity-cell em {
    font-size: 10px;
  }

  .avatar,
  .backup-table-card .avatar {
    width: 27px;
    height: 27px;
    font-size: 10.5px;
  }

  .badge,
  .backup-table-card .badge {
    min-height: 19px;
    padding: 3px 7px;
    font-size: 10px;
  }

  .row-actions,
  .backup-table-card .row-actions {
    gap: 5px;
  }

  .icon-action,
  .backup-table-card .icon-action {
    min-width: 28px;
    min-height: 28px;
    border-radius: 9px;
    font-size: 10.5px;
  }

  .dashboard-layout,
  .dashboard-reference-grid,
  .monitoring-layout,
  .content-grid,
  .content-grid.right-rail,
  .backup-layout,
  .rail,
  .detail-grid,
  .detail-bottom,
  .vps-metrics,
  .infra-grid,
  .settings-form,
  .grid-form,
  .toggle-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .shop-detail-page {
    gap: 13px;
  }

  .shop-hero {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 10px;
  }

  .shop-hero h1 {
    font-size: 20px;
  }

  .shop-hero .cloud-logo,
  .shop-hero-actions {
    grid-column: 1 / -1;
  }

  .detail-actions,
  .dashboard-actions,
  .compact-activity {
    grid-template-columns: 1fr;
  }

  .osm-map,
  .location-empty {
    min-height: 238px;
    height: 238px;
  }

  .modal {
    padding: 12px;
  }

  .modal-card {
    width: min(100%, 520px);
    max-height: calc(100vh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    border-radius: 20px;
  }

  .modal-card header,
  .modal-card footer {
    padding: 14px;
  }

  .modal-card main {
    padding: 14px;
  }

  .modal-card footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .modal-card footer .btn {
    width: 100%;
  }

  .toast {
    right: 12px;
    bottom: calc(88px + env(safe-area-inset-bottom, 0px));
    max-width: calc(100% - 24px);
  }

  .mobile-tabbar {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: calc(9px + env(safe-area-inset-bottom, 0px));
    z-index: 30;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
    min-height: 62px;
    padding: 7px;
    border: 1px solid rgba(219, 227, 239, .86);
    border-radius: 24px;
    background: rgba(255,255,255,.94);
    box-shadow: 0 18px 45px rgba(15, 23, 42, .16);
    backdrop-filter: blur(20px);
  }

  .mobile-tabbar button {
    min-width: 0;
    display: grid;
    place-items: center;
    gap: 3px;
    border: 0;
    border-radius: 18px;
    background: transparent;
    color: #60708b;
    font-size: 9px;
    font-weight: 700;
  }

  .mobile-tabbar .icon {
    width: 19px;
    height: 19px;
  }

  .mobile-tabbar button.active {
    background: linear-gradient(135deg, var(--primary), #214ce8);
    color: #fff;
    box-shadow: 0 12px 26px rgba(56, 103, 255, .28);
  }
}

@media (max-width: 420px) {
  .stat-grid,
  .stat-grid.six,
  .stat-grid.five,
  .stat-grid.four,
  .backup-page .stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .page-actions,
  .modal-card footer {
    grid-template-columns: 1fr;
  }
}

.notice-strip{margin:-4px 0 18px;padding:11px 14px;border:1px solid #f0d9a5;border-radius:12px;background:#fff7e8;color:#8a5b10;font-size:12px;font-weight:700}
.messages-page textarea{width:100%;min-height:130px;box-sizing:border-box;padding:12px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--text);font:inherit;resize:vertical}.messages-page textarea:focus{outline:0;border-color:var(--primary);box-shadow:0 0 0 3px rgba(43,92,255,.12)}
.check-row{display:flex!important;align-items:center;gap:8px;color:var(--muted);font-size:12px}.check-row input{width:16px;height:16px;accent-color:var(--primary)}
.round-btn.notify.has-alerts{position:relative;border-color:#ffd48c;background:#fff8ea;color:#a76500}.round-btn.notify b{position:absolute;top:-7px;right:-7px;min-width:18px;height:18px;display:grid;place-items:center;padding:0 4px;border:2px solid #fff;border-radius:999px;background:#e25545;color:#fff;font-size:9px;font-weight:800}
.messages-workspace{height:calc(100vh - 108px);min-height:640px;display:flex;flex-direction:column}.messages-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.messages-heading h1{margin:0;font-size:25px}.messages-heading p{margin:3px 0 0;color:var(--secondary)}.messages-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:12px}.messages-kpis article{padding:12px 15px;border:1px solid var(--border);border-radius:13px;background:#fff}.messages-kpis span{display:block;color:var(--secondary);font-size:11px}.messages-kpis strong{font-size:20px}.messages-layout{min-height:0;flex:1;display:grid;grid-template-columns:280px minmax(360px,1fr) 260px;border:1px solid var(--border);border-radius:15px;background:#fff;overflow:hidden}.conversation-list{border-right:1px solid var(--border)}.conversation-list>header{display:grid;gap:9px;padding:14px;border-bottom:1px solid var(--border)}.conversation-list input{height:36px}.conversation-scroll{height:calc(100% - 83px);overflow:auto}.conversation{width:100%;display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:9px;padding:11px 12px;border:0;border-bottom:1px solid var(--border);background:#fff;text-align:left}.conversation.active{background:#eef3ff;border-left:3px solid var(--primary)}.conversation>span{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:#eeeaff;color:#6a4ff4}.conversation div{min-width:0}.conversation strong,.conversation small,.conversation p{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.conversation small,.conversation p{color:var(--secondary);font-size:10px}.conversation p{margin:3px 0 0}.conversation em{font-size:9px;font-style:normal}.chat-panel{min-width:0;display:flex;flex-direction:column;background:#f8faff}.chat-head{padding:13px 16px;border-bottom:1px solid var(--border);background:#fff}.chat-head strong,.chat-head span{display:block}.chat-head span{color:var(--secondary);font-size:10px}.chat-messages{min-height:0;flex:1;overflow:auto;padding:18px}.chat-bubble{width:fit-content;max-width:72%;margin:0 0 10px auto;padding:10px 12px;border-radius:13px 13px 3px;background:#dfe7ff}.chat-bubble p{margin:0;white-space:pre-wrap}.chat-bubble span{display:block;margin-top:5px;color:#65758d;font-size:9px}.chat-composer{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;gap:7px;align-items:end;padding:11px;border-top:1px solid var(--border);background:#fff}.chat-composer textarea{min-height:42px}.chat-composer select{width:74px;height:42px}.chat-composer button{height:42px;border:0;border-radius:9px;background:var(--primary);color:#fff}.chat-context{padding:15px;border-left:1px solid var(--border)}.context-shop{display:flex;gap:9px;align-items:center;padding-bottom:13px;border-bottom:1px solid var(--border)}.chat-context dl div{display:flex;justify-content:space-between;gap:10px;padding:7px 0}.chat-context dd{margin:0;font-weight:700}.chat-context>button{width:100%;height:38px;border:1px solid var(--border);border-radius:9px;background:#fff}.message-empty{padding:28px;color:var(--secondary);text-align:center}@media(max-width:1050px){.messages-layout{grid-template-columns:260px 1fr}.chat-context{display:none}}@media(max-width:700px){.messages-workspace{height:auto}.messages-layout{display:block}.conversation-list{height:260px}.chat-panel{min-height:520px}}
.message-center .message-quick-form,.message-center .recent-messages{display:none}
.message-tabs{display:flex;gap:4px;overflow:auto}.message-tabs button{padding:6px 8px;border:1px solid var(--border);border-radius:7px;background:#fff;color:var(--secondary);font-size:9px;white-space:nowrap}.message-tabs button.active{border-color:var(--primary);background:var(--primary);color:#fff}.conversation aside{display:grid;justify-items:end;gap:4px}.conversation aside b{min-width:17px;height:17px;display:grid;place-items:center;border-radius:99px;background:var(--primary);color:#fff;font-size:9px}.conversation.system.warning>span{background:#fff0ce;color:#bf7200}.chat-head{display:flex;align-items:center;justify-content:space-between}.chat-head>button{height:34px;border:1px solid var(--border);border-radius:8px;background:#fff}.chat-bubble.incoming{margin-right:auto;margin-left:0;border-radius:13px 13px 13px 3px;background:#fff;border:1px solid var(--border)}.chat-bubble strong{display:block;margin-bottom:3px;font-size:9px;color:var(--secondary)}.context-actions{display:grid;gap:6px}.context-actions button{height:35px;border:1px solid var(--border);border-radius:8px;background:#fff;text-align:left}.bulk-message-backdrop{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:18px;background:rgba(15,23,42,.5)}.bulk-message-modal{width:min(560px,100%);max-height:90vh;display:grid;gap:12px;padding:16px;border-radius:16px;background:#fff;box-shadow:0 30px 80px rgba(15,23,42,.3)}.bulk-message-modal header,.bulk-message-modal footer{display:flex;align-items:center;justify-content:space-between;gap:10px}.bulk-message-modal header strong,.bulk-message-modal header small{display:block}.bulk-message-modal header small{color:var(--secondary)}.bulk-message-modal header button{border:0;background:transparent;font-size:20px}.bulk-shops{max-height:230px;display:grid;grid-template-columns:1fr 1fr;gap:6px;overflow:auto}.bulk-shops label{padding:8px;border:1px solid var(--border);border-radius:8px}.bulk-shops small{float:right;color:var(--secondary)}.bulk-message-modal textarea{width:100%}.bulk-message-modal footer>button{height:38px;padding:0 18px;border:0;border-radius:8px;background:var(--primary);color:#fff}
@media(prefers-color-scheme:dark){.messages-layout,.messages-kpis article,.conversation-list,.conversation,.chat-head,.chat-composer,.chat-context,.bulk-message-modal{background:#152132;color:#e8eef7;border-color:#314156}.chat-panel{background:#0f1927}.conversation.active{background:#1d3150}.conversation input,.chat-composer textarea,.chat-composer select,.bulk-message-modal textarea,.bulk-message-modal select{background:#0f1927;color:#e8eef7;border-color:#314156}.chat-bubble.incoming{background:#1a293b;border-color:#314156}.chat-bubble.owner{background:#253c68}.context-actions button,.chat-head>button,.message-tabs button{background:#1a293b;color:#dbe6f2;border-color:#314156}}

/* Xabarlar: butun modul viewport ichida, faqat ustunlarning mazmuni scroll bo'ladi. */
.page-view:has(.messages-workspace){height:calc(100dvh - 78px);overflow:hidden}
.messages-workspace{height:100%;min-height:0;overflow:hidden}
.messages-heading{flex:0 0 52px;margin:0;gap:12px}
.messages-heading h1{font-size:23px;line-height:1.05}.messages-heading p{font-size:11px}
.messages-heading .btn{height:36px;padding:0 13px}
.messages-kpis{flex:0 0 66px;grid-template-columns:repeat(4,1fr);margin:0 0 10px}
.messages-kpis article{display:flex;flex-direction:column;justify-content:center;padding:8px 14px}
.messages-layout{height:calc(100% - 128px);min-height:0;grid-template-columns:minmax(245px,24%) minmax(390px,1fr) minmax(230px,23%)}
.conversation-list,.chat-panel,.chat-context{height:100%;min-height:0;overflow:hidden}
.conversation-list{display:flex;flex-direction:column}.conversation-list>header{flex:0 0 auto;padding:10px}.conversation-scroll{height:auto;min-height:0;flex:1;overflow:auto}
.conversation{padding:9px 10px}.chat-context{overflow:auto;padding:13px}.chat-messages{scrollbar-gutter:stable}
.chat-composer textarea{min-height:42px;max-height:96px;resize:none}.chat-composer label{font-size:10px;white-space:nowrap}
.bulk-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.bulk-grid label{display:grid;gap:5px;color:var(--secondary);font-size:11px}.bulk-message-modal>input{width:100%}
.bulk-preview{padding:10px;border:1px dashed var(--border);border-radius:10px;background:#f8faff}.bulk-preview strong,.bulk-preview span{display:inline-block;font-size:11px}.bulk-preview span{float:right;color:var(--secondary)}.bulk-preview p{clear:both;margin:7px 0 0;color:var(--secondary);font-size:11px;white-space:pre-wrap}
@media(prefers-color-scheme:dark){.bulk-preview{background:#0f1927;border-color:#314156}.bulk-message-modal>input{background:#0f1927;color:#e8eef7;border-color:#314156}}
@media(max-width:1050px){.messages-layout{grid-template-columns:250px minmax(0,1fr)}}
@media(max-width:700px){.page-view:has(.messages-workspace){height:calc(100dvh - 126px)}.messages-heading{flex:0 0 auto;align-items:flex-start}.messages-heading>div:last-child{display:flex}.messages-kpis{grid-template-columns:1fr 1fr;flex:0 0 112px}.messages-layout{height:calc(100% - 170px);display:grid;grid-template-columns:42% 58%}.conversation-list{height:100%}.chat-panel{min-height:0}.chat-composer{grid-template-columns:1fr auto}.chat-composer select,.chat-composer label{display:none}.chat-context{display:none}.bulk-grid{grid-template-columns:1fr}.bulk-shops{grid-template-columns:1fr}}

/* Xabarlar reference UI: bu modul OS dark-mode ranglarini meros olmaydi. */
.messages-workspace{color:#172033}
.messages-heading{flex-basis:62px}.messages-heading h1{font-size:26px}.messages-heading p{color:#77869d;font-size:12px}.messages-heading>div:last-child{display:flex;gap:10px}.messages-heading .btn{height:43px;padding:0 17px;border-radius:10px;font-size:12px}
.messages-kpis{flex-basis:96px;gap:12px;margin-bottom:10px}
.messages-kpis article{min-width:0;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:14px;padding:14px 18px!important;border:1px solid #e3e8f1!important;border-radius:14px!important;background:#fff!important;color:#172033!important;box-shadow:0 5px 18px rgba(15,23,42,.035)}
.messages-kpis article>div>span{color:#7b8ba3!important;font-size:11px}.messages-kpis article strong{display:block;margin-top:3px;color:#121a2c!important;font-size:24px;line-height:1}
.kpi-icon{width:45px;height:45px;display:grid!important;place-items:center;flex:0 0 auto;border-radius:13px;color:#3e73ff!important;background:#eaf2ff}.kpi-icon .icon{width:22px;height:22px}.messages-kpis .violet .kpi-icon{color:#7657ff!important;background:#eee9ff}.messages-kpis .orange .kpi-icon{color:#ef8b18!important;background:#fff0dc}
.messages-alert-strip{height:52px;display:flex;align-items:center;gap:11px;margin-bottom:9px;padding:0 14px;border:1px solid #f3c679;border-radius:11px;background:#fffaf1;color:#253044}.messages-alert-strip>span{width:31px;height:31px;display:grid;place-items:center;border-radius:8px;background:#f3a63a;color:#fff}.messages-alert-strip strong{font-size:12px}.messages-alert-strip button{height:34px;margin-left:auto;padding:0 14px;border:1px solid #efa943;border-radius:8px;background:#fff;color:#d47700;font-weight:700}
.messages-layout{height:calc(100% - 229px);grid-template-columns:minmax(330px,28%) minmax(500px,1fr) minmax(280px,26%);border-color:#e2e7ef!important;border-radius:12px!important;background:#fff!important;color:#172033!important}
.conversation-list,.chat-context{background:#fff!important;color:#172033!important;border-color:#e2e7ef!important}.conversation-kind-tabs{height:48px;display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid #e5e9f0}.conversation-kind-tabs button{position:relative;border:0;background:#fff;color:#77849b;font-weight:700}.conversation-kind-tabs button.active{color:#3568ff}.conversation-kind-tabs button.active:after{content:"";position:absolute;left:10px;right:10px;bottom:0;height:2px;background:#3568ff}
.conversation-list>header{gap:10px;padding:10px 12px 9px!important;background:#fff!important;border-color:#e5e9f0!important}.conversation-search{height:38px;display:flex;align-items:center;gap:9px;padding:0 11px;border:1px solid #dfe5ee;border-radius:9px;background:#fff}.conversation-search .icon{color:#8090a7}.conversation-search input{height:auto!important;padding:0!important;border:0!important;background:transparent!important;color:#172033!important;box-shadow:none!important}.message-tabs{overflow:visible}.message-tabs button{height:32px;padding:0 10px!important;border-color:#dfe5ee!important;border-radius:8px!important;background:#fff!important;color:#354158!important;font-size:10px!important}.message-tabs button.active{border-color:#3867ff!important;background:#3867ff!important;color:#fff!important}.conversation{min-height:68px;padding:9px 12px!important;border-color:#e7ebf2!important;background:#fff!important;color:#172033!important}.conversation.active{border-left:3px solid #3867ff!important;background:#eef3ff!important}.conversation>span{background:#eeeaff!important;color:#7657ff!important}.conversation strong{font-size:12px}.conversation small,.conversation p{color:#7c8ba1!important}.conversation em.online,.online-text{color:#13ad73!important}.conversation aside i{color:#f0a025;font-style:normal}
.chat-panel{background:#fbfcff!important;color:#172033!important}.chat-head{height:58px;padding:8px 13px!important;border-color:#e5e9f0!important;background:#fff!important;color:#172033!important}.chat-identity,.chat-head>div:last-child{display:flex;align-items:center;gap:9px}.chat-identity>span{width:36px;height:36px;display:grid;place-items:center;border-radius:12px;background:#eeeaff;color:#7657ff}.chat-identity strong,.chat-identity small{display:block}.chat-identity small{color:#7d8da3;font-size:10px}.chat-head button{display:inline-flex;align-items:center;gap:7px;padding:0 11px!important;border-color:#dfe5ee!important;background:#fff!important;color:#263248!important}.chat-head .chat-more{width:36px;padding:0!important;justify-content:center}.chat-messages{padding:18px 20px!important;background:#fbfcff!important}.chat-bubble{max-width:65%;padding:9px 12px!important;background:#dfe7ff!important;color:#172033!important;box-shadow:none}.chat-bubble.incoming{background:#fff!important;color:#172033!important;border-color:#dfe5ee!important}.chat-bubble strong,.chat-bubble span{color:#7b8ba2!important}.bubble-meta{display:flex!important;align-items:center;justify-content:flex-end;gap:5px}.delivery-mark{color:#7390c5!important;font-size:13px;font-style:normal;font-weight:900;letter-spacing:-4px;padding-right:4px;line-height:1}.delivery-mark.read,.delivery-mark.delivered{color:#2f70e8!important}.delivery-mark.failed{width:15px;height:15px;display:grid;place-items:center;padding:0;border-radius:50%;background:#e74b5b;color:#fff!important;font-size:10px;letter-spacing:0}
.chat-composer{grid-template-columns:minmax(0,1fr) 88px auto 82px 110px!important;padding:10px 12px!important;border-color:#e5e9f0!important;background:#fff!important}.chat-composer textarea,.chat-composer select{height:42px!important;min-height:42px!important;border-color:#dfe5ee!important;background:#fff!important;color:#172033!important}.chat-composer textarea{padding:11px 12px}.chat-composer label{display:flex;flex-direction:column;align-items:center;color:#7b8ba2}.chat-composer label input{width:18px;height:18px}.chat-composer button{height:42px!important;background:#3867ff!important}
.chat-context{padding:13px 14px!important}.chat-context h3{font-size:15px}.context-shop{border-color:#e5e9f0!important}.context-shop>span{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:#eeeaff;color:#7657ff}.chat-context dl{margin:12px 0}.chat-context dl div{padding:6px 0!important}.chat-context dt{color:#728198}.chat-context dd{color:#172033!important}.chat-context h4{margin:12px 0 8px;padding-top:12px;border-top:1px solid #e5e9f0;font-size:13px}.context-actions{gap:6px!important}.context-actions button{display:flex;align-items:center;justify-content:space-between;height:35px!important;padding:0 10px;border-color:#dfe5ee!important;background:#fff!important;color:#263248!important}.context-actions b{font-size:18px;font-weight:400}
@media(max-width:1200px){.messages-layout{grid-template-columns:290px minmax(430px,1fr)}.chat-context{display:none}}
@media(max-width:700px){.messages-heading h1{font-size:21px}.messages-kpis{flex-basis:110px}.messages-kpis article{padding:9px!important}.kpi-icon{width:35px;height:35px}.messages-alert-strip{height:44px}.messages-layout{height:calc(100% - 225px);grid-template-columns:42% 58%}.conversation-kind-tabs{height:42px}.message-tabs button:last-child{display:none}.chat-composer{grid-template-columns:1fr 92px!important}.chat-composer select,.chat-composer label{display:none}}
/* Landing demo requests */
.demo-requests{border:1px solid #dbe5f2;border-radius:14px;background:#fff;overflow:hidden}.demo-requests summary{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;cursor:pointer}.demo-requests summary span{padding:4px 9px;border-radius:999px;background:#e8f1ff;color:#245cda;font-size:11px}.demo-request-list{max-height:240px;overflow:auto;padding:0 12px 12px}.demo-request-list article{display:grid;grid-template-columns:1fr 310px;gap:14px;padding:12px;border-top:1px solid #edf1f7}.demo-request-list article>div{display:grid;gap:5px}.demo-request-list a{color:#2463eb;font-weight:700}.demo-request-list span,.demo-request-list p{margin:0;color:#718097;font-size:12px}.demo-request-list article>div:last-child{grid-template-columns:130px 1fr auto;align-items:center}.demo-request-list select,.demo-request-list input{min-width:0;padding:8px;border:1px solid #dbe5f2;border-radius:8px}.demo-request-list button{padding:9px 12px;border:0;border-radius:8px;background:#2864ef;color:#fff;font-weight:700}@media(max-width:800px){.demo-request-list article{grid-template-columns:1fr}.demo-request-list article>div:last-child{grid-template-columns:1fr}.demo-request-list{max-height:320px}}
.message-workspace-title h1{margin:0 0 10px}.workspace-tabs{display:flex;gap:8px}.workspace-tabs button{padding:10px 14px;border:1px solid #dbe5f2;border-radius:10px;background:#fff;font-weight:700}.workspace-tabs button.active{background:#2864ef;color:#fff}.workspace-tabs b{margin-left:7px;padding:2px 6px;border-radius:99px;background:#fff;color:#2864ef}.demo-workspace{display:grid;gap:12px}.demo-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.demo-kpis button{display:flex;justify-content:space-between;padding:12px 15px;border:1px solid #dbe5f2;border-radius:11px;background:#fff}.demo-kpis b{font-size:20px}.demo-filterbar{display:grid;grid-template-columns:2fr repeat(4,1fr);gap:8px}.demo-filterbar>*{min-width:0;padding:10px;border:1px solid #dbe5f2;border-radius:9px;background:#fff}.demo-crm-layout{display:grid;grid-template-columns:320px minmax(400px,1fr) 300px;min-height:520px;max-height:calc(100vh - 285px);border:1px solid #dbe5f2;border-radius:13px;overflow:hidden;background:#fff}.demo-crm-layout>*>*{box-sizing:border-box}.demo-leads,.demo-detail,.demo-control{overflow:auto}.demo-leads{border-right:1px solid #e4ebf4}.demo-leads>header{display:flex;justify-content:space-between;padding:14px}.demo-lead{width:100%;display:grid;gap:5px;padding:13px 14px;text-align:left;border:0;border-top:1px solid #edf1f6;background:#fff}.demo-lead.selected{padding-left:11px;border-left:3px solid #2864ef;background:#eef4ff}.demo-lead span,.demo-lead small,.demo-lead em{font-size:11px;color:#718097;font-style:normal}.demo-detail{padding:18px}.demo-person{display:grid;grid-template-columns:48px 1fr auto;gap:12px;align-items:center}.demo-person>span{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;background:#e9efff;color:#2864ef;font-weight:800}.demo-person h2{margin:0;font-size:18px}.demo-person p{margin:4px 0;color:#718097;font-size:12px}.demo-person button,.demo-detail section button{padding:9px 12px;border:1px solid #cfdbea;border-radius:8px;background:#fff}.demo-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:18px 0}.demo-info-grid div{padding:11px;border:1px solid #e3eaf3;border-radius:9px}.demo-info-grid span{display:block;color:#718097;font-size:11px}.demo-detail section{margin-top:12px;padding:13px;border:1px solid #e3eaf3;border-radius:10px}.demo-detail h3{margin:0 0 9px;font-size:14px}.demo-detail textarea{width:100%;min-height:70px;margin-bottom:8px}.demo-timeline div{display:grid;padding:8px 0;border-bottom:1px solid #edf1f6}.demo-timeline span{font-size:11px;color:#718097}.demo-control{padding:16px;border-left:1px solid #e4ebf4}.demo-control label{display:grid;gap:5px;margin:12px 0;font-size:12px}.demo-control select{padding:9px;border:1px solid #dbe5f2;border-radius:8px}.demo-actions{display:grid;gap:8px;margin-top:18px}.demo-actions button{padding:10px;border:1px solid #cfdbea;border-radius:8px;background:#fff;text-align:left}.demo-actions button:last-child{color:#c33;border-color:#f1caca}.demo-control>p{font-size:11px;color:#718097;line-height:1.5}@media(max-width:1100px){.demo-crm-layout{grid-template-columns:300px 1fr}.demo-control{display:none}}@media(max-width:700px){.demo-kpis{grid-template-columns:1fr 1fr}.demo-filterbar{grid-template-columns:1fr 1fr}.demo-filterbar input{grid-column:1/3}.demo-crm-layout{display:block;max-height:none}.demo-leads{border:0}.demo-detail{display:none}.workspace-tabs{overflow:auto}.workspace-tabs button{white-space:nowrap}}
.cloud-apk-download{display:flex;align-items:center;gap:10px;padding:10px 12px;margin-bottom:8px;border:1px solid rgba(120,150,210,.28);border-radius:10px;background:rgba(42,96,220,.14);color:#fff;text-decoration:none}.cloud-apk-download svg{width:19px}.cloud-apk-download span{display:grid}.cloud-apk-download strong{font-size:12px}.cloud-apk-download em{font-size:10px;color:#9db3d8;font-style:normal}
/* Cloud Owner APK: desktop vizual tizimining ixcham mobil ko'rinishi */
@media(max-width:760px){.sidebar{height:58px;min-height:58px;padding:calc(7px + env(safe-area-inset-top,0px)) 12px 7px}.brand span{display:none}.brand strong{font-size:17px}.cloud-mark{width:32px;height:32px}.content-shell{padding:calc(62px + env(safe-area-inset-top,0px)) 10px 0}.topbar{top:calc(58px + env(safe-area-inset-top,0px));padding:7px 0}.page-view{padding-top:10px}.message-workspace-title h1{font-size:19px;margin:0 0 8px}.workspace-tabs{gap:6px;padding-bottom:2px}.workspace-tabs button{padding:9px 11px;font-size:11px;border-radius:9px}.demo-workspace{gap:9px}.demo-kpis{gap:7px}.demo-kpis button{padding:9px 10px;border-radius:9px}.demo-kpis button span{font-size:10px}.demo-kpis b{font-size:17px}.demo-filterbar{gap:6px}.demo-filterbar>*{height:36px;padding:8px;font-size:11px;border-radius:8px}.demo-crm-layout{border-radius:11px;background:transparent;border:0}.demo-leads{display:grid;gap:7px}.demo-leads>header{padding:10px 4px}.demo-lead{border:1px solid #dfe7f1;border-radius:10px;padding:11px 12px;background:#fff}.demo-lead.selected{padding-left:9px}.demo-lead b{font-size:12px}.demo-lead span,.demo-lead small,.demo-lead em{font-size:10px}.mobile-tabbar{height:64px}.cloud-apk-download{display:none}}

/* Phase 2: unified Cloud Center design system. This block is intentionally authoritative. */
:root{--surface:#fff;--surface-soft:#f8faff;--surface-raised:#fff;--line:#dfe6f0;--focus:0 0 0 3px rgba(56,103,255,.18);--danger:#dc3545;--radius-sm:9px;--radius-md:12px;--page-max:1440px}
body{font-size:13px;overflow-x:hidden}
.app-shell{grid-template-columns:216px minmax(0,1fr)}
.sidebar{padding:16px 12px}.brand{padding:0 4px 15px}.brand strong{font-size:20px}.cloud-mark{width:38px;height:38px}.side-nav{padding:12px 0}.nav-group{margin-bottom:10px}.nav-group p{margin-bottom:5px;font-size:10px;letter-spacing:.07em}.nav-item{min-height:38px;padding:0 10px;border-radius:9px;font-size:12px}.sidebar-footer{gap:7px}.owner-mini{padding:9px;border-radius:10px}
.content-shell{min-width:0;padding:0 20px 30px}.page-view{width:100%;max-width:var(--page-max);padding-top:16px}.topbar{min-height:54px}.page-title{min-height:50px;align-items:center;margin-bottom:14px}.page-title h1{font-size:21px;line-height:1.2}.page-title p{margin-top:3px;font-size:12px}.page-actions{gap:8px}.btn{min-height:38px;border-radius:9px}.round-btn,.icon-action{min-width:38px;min-height:38px}
.stat-grid,.stat-grid.six,.stat-grid.five,.stat-grid.four{gap:10px}.stat-card,.panel,.table-card,.settings-panel,.infra-panel{min-height:0!important;border-radius:var(--radius-md);background:var(--surface);box-shadow:0 4px 16px rgba(15,23,42,.035)}.stat-card{min-width:0;min-height:84px!important;padding:12px;gap:10px}.stat-card .stat-icon{width:34px;height:34px;border-radius:10px}.stat-card strong{margin-top:2px;font-size:20px}.stat-card em{margin-top:4px}.stat-card .sparkline{display:none}
.infra-panel{margin:10px 0;padding:13px}.infra-panel header{margin-bottom:10px}.infra-panel header h2{font-size:15px}.infra-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.vps-card{min-height:82px!important;padding:10px;border-radius:10px}.vps-card strong{font-size:15px}.dashboard-reference-grid{display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:10px;align-items:start}.dashboard-reference-grid>.panel{grid-column:auto!important;min-height:0!important;padding:14px}.dashboard-reference-grid .panel:nth-child(4){grid-column:span 2!important}.dashboard-reference-grid .panel-head{margin-bottom:10px}.dashboard-reference-grid .panel-head h2{font-size:14px}.quick-actions.dashboard-actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.quick-actions.dashboard-actions button{min-height:38px}.status-list>div,.attention-list>div,.timeline>div{min-height:42px}
.table-card{overflow:hidden}.toolbar{min-height:52px;padding:8px;gap:7px;background:var(--surface)}.toolbar .search{min-width:220px;flex:1}.toolbar input,.toolbar select,input,select,textarea{min-height:40px;border-color:var(--line);border-radius:9px;background:var(--surface);color:var(--text)}input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible,a:focus-visible{outline:0;box-shadow:var(--focus)}.table-wrap{max-width:100%;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable}.table-wrap table{width:100%;min-width:820px}.table-wrap thead{position:sticky;top:0;z-index:2}.table-wrap th{height:40px;background:var(--surface-soft);font-size:11px}.table-wrap td{height:48px;font-size:12px}.row-actions{flex-wrap:nowrap}.entity-cell strong{white-space:normal;overflow-wrap:anywhere}
.shop-mobile-list{display:none}
.shop-hero{padding:14px;border-radius:12px}.shop-hero h1{font-size:20px}.detail-chips{gap:6px}.detail-chips span{min-height:34px;padding:7px 10px}.detail-tabs{position:sticky;top:54px;z-index:6;padding:5px;background:color-mix(in srgb,var(--surface) 94%,transparent);backdrop-filter:blur(14px)}.detail-tabs button{min-height:38px}.detail-grid,.detail-bottom{gap:10px}.panel{padding:14px}.panel-head h2{font-size:14px}
.modal{max-width:none;padding:max(14px,env(safe-area-inset-top)) 14px max(14px,env(safe-area-inset-bottom));background:rgba(8,17,31,.58);backdrop-filter:blur(8px)}.modal-card{width:min(620px,100%);max-height:calc(100dvh - 28px - env(safe-area-inset-top) - env(safe-area-inset-bottom));border-radius:16px;background:var(--surface);color:var(--text)}.modal-card header,.modal-card footer{padding:14px 16px}.modal-card main{padding:15px 16px;overflow:auto}.danger-action{color:var(--danger)!important}.danger-callout{padding:12px;border:1px solid #f2b9be;border-radius:10px;background:#fff4f5;color:#8e202b}.danger-callout strong{display:block;font-size:14px}.danger-callout p{margin:4px 0 0}.danger-callout.critical{border-color:#e8919a;background:#feecee}.delete-preview-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin:12px 0}.delete-preview-grid>div{padding:10px;border:1px solid var(--line);border-radius:9px;background:var(--surface-soft)}.delete-preview-grid span,.delete-preview-grid strong{display:block}.delete-preview-grid span{color:var(--secondary);font-size:10px}.delete-preview-grid strong{margin-top:3px;font-size:17px}.delete-resource-list{padding:11px;border:1px solid var(--line);border-radius:10px}.delete-resource-list h3{margin:0 0 6px}.delete-resource-list p{margin:4px 0}.danger-check{display:flex!important;align-items:flex-start;gap:9px;margin-top:12px}.danger-check input{width:18px;height:18px;min-height:18px;accent-color:var(--danger)}.delete-confirm-form{display:grid;gap:11px}.delete-confirm-form label{display:grid;gap:5px}.deletion-complete{padding:18px;border-radius:11px;background:#eefbf6;color:#116b4a}.deletion-complete code{display:block;margin-top:10px;overflow-wrap:anywhere;font-size:10px}

@media(max-width:1000px){.app-shell{grid-template-columns:188px minmax(0,1fr)}.infra-grid{grid-template-columns:repeat(2,1fr)}.dashboard-reference-grid{grid-template-columns:1fr 1fr}.dashboard-reference-grid .panel:nth-child(4){grid-column:auto!important}.stat-grid.six{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){body{padding-bottom:calc(76px + env(safe-area-inset-bottom))}.app-shell{display:block}.sidebar{height:56px!important;min-height:56px!important;padding:calc(6px + env(safe-area-inset-top)) 10px 6px}.content-shell{padding:calc(58px + env(safe-area-inset-top)) 9px 0}.topbar{top:calc(56px + env(safe-area-inset-top));min-height:48px;padding:5px 0}.page-view{padding-top:8px}.page-title{min-height:0;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;margin-bottom:10px}.page-title h1{font-size:18px}.page-title p{font-size:11px}.page-actions{display:flex}.page-actions .btn{width:auto;min-height:38px;padding:0 11px}.page-actions .btn span{display:none}.stat-grid,.stat-grid.six,.stat-grid.five,.stat-grid.four{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;overflow:visible}.stat-card{min-width:0;min-height:74px!important;padding:9px}.stat-card .stat-icon{width:30px;height:30px}.stat-card strong{font-size:18px}.infra-panel{padding:10px}.infra-panel header small{display:none}.infra-grid{display:flex;overflow-x:auto}.vps-card{min-width:168px}.dashboard-reference-grid{display:grid;grid-template-columns:1fr;gap:8px}.dashboard-reference-grid .panel:nth-child(4){grid-column:auto!important}.dashboard-reference-grid>.panel{padding:11px}.dashboard-reference-grid>.panel:nth-child(n+4){display:none}.toolbar{display:grid;grid-template-columns:minmax(0,1fr) auto;padding:7px}.toolbar .search{min-width:0;grid-column:1/-1}.toolbar select{min-width:0}.toolbar .btn span{display:none}.table-wrap{border-top:1px solid var(--line)}.table-wrap table{min-width:720px}.table-wrap th,.table-wrap td{padding:8px 10px}.table-card:has(.shop-mobile-list) .table-wrap{display:none}.shop-mobile-list{display:grid;gap:8px;padding:8px}.shop-mobile-card{display:grid;gap:9px;padding:11px;border:1px solid var(--line);border-radius:11px;background:var(--surface-soft)}.shop-mobile-card header,.shop-mobile-card>div{display:flex;align-items:center;justify-content:space-between;gap:7px}.shop-mobile-card dl{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:0}.shop-mobile-card dl div{min-width:0}.shop-mobile-card dt{color:var(--secondary);font-size:9px}.shop-mobile-card dd{margin:2px 0 0;overflow:hidden;text-overflow:ellipsis;font-size:11px;font-weight:700;white-space:nowrap}.shop-mobile-card>.btn{width:100%}.shop-hero{grid-template-columns:38px minmax(0,1fr);padding:11px}.shop-hero .cloud-pos-logo{display:none}.shop-title-block p{white-space:normal}.shop-hero-actions{grid-column:1/-1;display:flex;overflow-x:auto}.detail-chips{display:flex;overflow-x:auto;flex-wrap:nowrap}.detail-chips span{white-space:nowrap}.detail-kpis{display:grid}.detail-tabs{top:48px;overflow-x:auto}.detail-tabs button{flex:0 0 auto}.detail-grid,.detail-bottom{grid-template-columns:1fr}.modal-card{max-height:calc(100dvh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom));border-radius:14px}.modal-card footer{display:flex;position:sticky;bottom:0;background:var(--surface)}.modal-card footer .btn{flex:1}.delete-preview-grid{grid-template-columns:repeat(2,1fr)}.mobile-tabbar{left:7px;right:7px;bottom:calc(7px + env(safe-area-inset-bottom));min-height:58px;border-radius:18px}.messages-layout{grid-template-columns:1fr!important}.conversation-list{height:100%}.chat-panel{display:none}}

@media(prefers-color-scheme:dark){:root{--bg:#09111d;--surface:#111c2b;--surface-soft:#0d1725;--surface-raised:#172437;--card:#111c2b;--border:#28384c;--line:#2b3c51;--text:#e8eef7;--secondary:#9badc3;--muted:#7f93ac;--sidebar:#08111f;--sidebar-deep:#050b14}body{background:radial-gradient(circle at 70% -10%,rgba(56,103,255,.12),transparent 34%),var(--bg)}.stat-card,.panel,.table-card,.settings-panel,.infra-panel,.toolbar,.shop-hero,.modal-card,.mobile-tabbar{background:var(--surface)!important;color:var(--text);border-color:var(--line)!important}.table-wrap th{background:var(--surface-soft);color:var(--secondary)}.table-wrap td{border-color:var(--line)}input,select,textarea,.search,.btn.secondary,.icon-action,.round-btn{background:var(--surface-soft)!important;color:var(--text)!important;border-color:var(--line)!important}.danger-callout{background:#351a20;color:#ffc5ca;border-color:#6f2c36}.delete-preview-grid>div,.delete-resource-list{background:var(--surface-soft);border-color:var(--line)}.deletion-complete{background:#0d3026;color:#a7efd2}.topbar,.detail-tabs{background:color-mix(in srgb,var(--surface) 94%,transparent)!important}.boot-card{background:var(--surface);border-color:var(--line)}}
@media(prefers-color-scheme:dark){.vps-card,.storage-summary,.status-list>div,.attention-list>div,.quick-actions button,.info-rows>div,.server-rows>div{background:var(--surface-soft)!important;color:var(--text)!important;border-color:var(--line)!important}.vps-card span,.vps-card small{color:var(--secondary)!important}}
@media(prefers-color-scheme:dark){.modal-card header,.modal-card footer,.messages-layout,.messages-kpis article,.conversation-list,.conversation,.chat-head,.chat-composer,.chat-context,.chat-panel,.conversation-kind-tabs button,.conversation-list>header,.conversation-search,.message-tabs button,.chat-head button,.context-actions button,.bulk-message-modal,.demo-kpis button,.demo-filterbar>*,.demo-crm-layout,.demo-lead,.demo-detail,.demo-control,.demo-detail section,.demo-info-grid div,.workspace-tabs button,.shop-mobile-card{background:var(--surface)!important;color:var(--text)!important;border-color:var(--line)!important}.chat-messages,.bulk-preview{background:var(--surface-soft)!important}.conversation.active,.demo-lead.selected{background:#172b48!important}.messages-heading,.messages-heading h1,.messages-kpis strong,.chat-identity strong,.chat-context dd,.conversation strong,.demo-person h2{color:var(--text)!important}.messages-heading p,.messages-kpis span,.conversation small,.conversation p,.chat-identity small,.chat-context dt,.demo-lead span,.demo-lead small,.demo-lead em,.demo-person p{color:var(--secondary)!important}.chat-bubble.incoming{background:var(--surface-raised)!important;color:var(--text)!important;border-color:var(--line)!important}.chat-bubble.owner{background:#243e6c!important;color:#eef4ff!important}.danger-check{color:var(--text)!important}}
html[data-theme="dark"]{--bg:#09111d;--surface:#111c2b;--surface-soft:#0d1725;--surface-raised:#172437;--card:#111c2b;--border:#28384c;--line:#2b3c51;--text:#e8eef7;--secondary:#9badc3;--muted:#7f93ac;--sidebar:#08111f;--sidebar-deep:#050b14;color-scheme:dark}html[data-theme="dark"] body{background:radial-gradient(circle at 70% -10%,rgba(56,103,255,.12),transparent 34%),var(--bg)}html[data-theme="dark"] :is(.stat-card,.panel,.table-card,.settings-panel,.infra-panel,.toolbar,.shop-hero,.modal-card,.modal-card header,.modal-card footer,.mobile-tabbar,.vps-card,.shop-mobile-card,.messages-layout,.messages-kpis article,.conversation-list,.conversation,.chat-head,.chat-composer,.chat-context,.chat-panel,.conversation-kind-tabs button,.conversation-list>header,.conversation-search,.message-tabs button,.context-actions button,.bulk-message-modal,.demo-kpis button,.demo-filterbar>*,.demo-crm-layout,.demo-lead,.demo-detail,.demo-control,.demo-detail section,.demo-info-grid div,.workspace-tabs button){background:var(--surface)!important;color:var(--text)!important;border-color:var(--line)!important}html[data-theme="dark"] :is(input,select,textarea,.search,.btn.secondary,.icon-action,.round-btn,.table-wrap th,.chat-messages,.bulk-preview,.quick-actions button,.info-rows>div,.server-rows>div){background:var(--surface-soft)!important;color:var(--text)!important;border-color:var(--line)!important}html[data-theme="dark"] :is(.messages-heading,.messages-heading h1,.messages-kpis strong,.chat-identity strong,.chat-context dd,.conversation strong,.demo-person h2){color:var(--text)!important}html[data-theme="dark"] :is(.messages-heading p,.messages-kpis span,.conversation small,.conversation p,.chat-identity small,.chat-context dt,.demo-lead span,.demo-lead small,.demo-lead em,.demo-person p,.vps-card span,.vps-card small){color:var(--secondary)!important}
html[data-theme="light"]{--bg:#f6f8fc;--surface:#fff;--surface-soft:#f8faff;--surface-raised:#fff;--card:#fff;--border:#e8edf5;--line:#dfe6f0;--text:#0f172a;--secondary:#64748b;--muted:#94a3b8;color-scheme:light}html[data-theme="light"] body{background:radial-gradient(circle at 70% -10%,rgba(56,103,255,.08),transparent 34%),var(--bg);color:var(--text)}html[data-theme="light"] :is(.stat-card,.panel,.table-card,.settings-panel,.infra-panel,.toolbar,.shop-hero,.modal-card,.modal-card header,.modal-card footer,.mobile-tabbar,.vps-card,.shop-mobile-card){background:var(--surface)!important;color:var(--text)!important;border-color:var(--line)!important}html[data-theme="light"] :is(input,select,textarea,.search,.btn.secondary,.icon-action,.round-btn,.table-wrap th){background:var(--surface-soft)!important;color:var(--text)!important;border-color:var(--line)!important}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
html[data-theme="dark"] :is(.top-search,.owner-chip){background:var(--surface)!important;color:var(--text)!important;border-color:var(--line)!important}html[data-theme="dark"] .top-search input{background:transparent!important}.risk-dot{width:10px!important;height:10px!important;border-radius:50%!important}.risk-dot.online{background:var(--green)!important}.risk-dot.offline,.risk-dot.blocked{background:var(--red)!important}.risk-dot.never_connected,.risk-dot.stale{background:var(--orange)!important}
html[data-theme="dark"] :is(.pos-apk-card,.carousel-upload){background:var(--surface-soft)!important;border-color:var(--line)!important;color:var(--text)!important}
html[data-theme="dark"] .pos-apk-icon{background:#172b48;color:#7da2ff}
html[data-theme="dark"] :is(label,.pos-apk-copy code,.settings-help,.carousel-cms-head span,.carousel-upload small){color:var(--secondary)!important}

/* Phase 3 high-density enterprise shell */
:root{
  --ds-background:#f3f6fb;--ds-sidebar:#071321;--ds-surface:#fff;--ds-elevated:#f8fafd;--ds-interactive:#f1f5fb;
  --ds-border:#dfe7f1;--ds-border-strong:#cbd7e6;--ds-text:#132039;--ds-text-2:#60718a;--ds-text-3:#91a0b5;
  --ds-primary:#2470e8;--ds-success:#42a83f;--ds-warning:#df8c16;--ds-danger:#e34b50;--ds-info:#3b82f6;
  --ds-s1:4px;--ds-s2:8px;--ds-s3:12px;--ds-s4:16px;--ds-s6:24px;--ds-r-sm:7px;--ds-r-md:10px;--ds-r-lg:12px;
  --ds-shadow-low:0 3px 12px rgba(15,31,55,.045);--ds-header:54px;--ds-sidebar-width:220px;--ds-bottom-nav:66px;--ds-control:38px;--ds-row:42px;
}
html[data-theme="dark"]{--ds-background:#071421;--ds-sidebar:#06111d;--ds-surface:#0b1b2a;--ds-elevated:#102334;--ds-interactive:#11283b;--ds-border:#1d3548;--ds-border-strong:#29475f;--ds-text:#edf4fb;--ds-text-2:#9bb0c3;--ds-text-3:#71899f;--bg:var(--ds-background);--surface:var(--ds-surface);--surface-soft:var(--ds-elevated);--surface-raised:var(--ds-interactive);--line:var(--ds-border);--border:var(--ds-border);--text:var(--ds-text);--secondary:var(--ds-text-2);--muted:var(--ds-text-3);--primary:var(--ds-primary)}
html[data-theme="dark"] :is(.vps-card,.metric-skeleton,.mini-stat-row span,.donut strong){background:var(--ds-elevated);color:var(--ds-text);border-color:var(--ds-border)}
html[data-theme="dark"] .metric-skeleton::after{background:linear-gradient(90deg,transparent,rgba(111,153,187,.16),transparent)}
html[data-theme="dark"] .resource-bar{background:#173148}
body{font-size:14px;font-variant-numeric:tabular-nums;background:var(--ds-background)}
.app-shell{grid-template-columns:var(--ds-sidebar-width) minmax(0,1fr)}
.sidebar{padding:14px 12px;background:linear-gradient(180deg,var(--ds-sidebar),#050e18)}
.brand{padding:0 5px 14px}.brand strong{font-size:20px}.brand span{font-size:11px}.cloud-mark{width:36px;height:36px}.cloud-mark .icon{width:32px;height:32px}
.side-nav{padding:12px 0}.nav-group{margin-bottom:10px}.nav-group p{margin:0 8px 5px;font-size:10px}.nav-item{min-height:38px;margin:2px 0;border-radius:7px;font-size:12px}.nav-item.active{background:#1257ad!important;box-shadow:none}
.sidebar-footer{gap:8px}.cloud-apk-download{display:none}.owner-mini,.logout-btn{min-height:40px;border-radius:8px}.sidebar-footer>small{font-size:9px}
.topbar{min-height:var(--ds-header);height:var(--ds-header);padding:7px 16px;border-bottom:1px solid var(--ds-border);box-shadow:none}.breadcrumb{font-size:12px}.content-shell{min-width:0}.page-view{padding:14px 16px 18px}.page-title{min-height:40px;margin-bottom:10px}.page-title h1{font-size:20px}.page-title p{font-size:12px}.page-title .btn{min-height:36px}
.panel,.table-card,.settings-panel,.infra-panel,.toolbar{border-radius:var(--ds-r-md)!important;border-color:var(--ds-border)!important;box-shadow:var(--ds-shadow-low)!important}
.metric-strip{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));margin-bottom:10px;border:1px solid var(--ds-border);border-radius:var(--ds-r-md);background:var(--ds-surface);overflow:hidden}
.metric-strip-item{min-width:0;min-height:70px;display:grid;grid-template-columns:30px 1fr;grid-template-rows:auto auto;gap:1px 8px;padding:10px 12px;border:0;border-right:1px solid var(--ds-border);background:transparent;color:var(--ds-text);text-align:left}.metric-strip-item:last-child{border-right:0}.metric-strip-item>span{grid-row:1/3;width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:color-mix(in srgb,currentColor 12%,transparent)}.metric-strip-item svg{width:15px;height:15px}.metric-strip-item small{color:var(--ds-text-2);font-size:11px}.metric-strip-item strong{font-size:20px;line-height:1.1}.metric-strip-item.green{color:var(--ds-success)}.metric-strip-item.red{color:var(--ds-danger)}.metric-strip-item.orange{color:var(--ds-warning)}.metric-strip-item.violet{color:#8069e8}.metric-strip-item.slate{color:#70869a}.metric-strip-item small,.metric-strip-item strong{color:var(--ds-text)}.metric-strip-item:hover{background:var(--ds-interactive)}
.infra-panel{padding:11px 12px;margin-bottom:10px}.infra-panel header{margin-bottom:8px}.infra-panel header h2{font-size:14px}.infra-panel header span,.infra-panel header small{font-size:10px}.infra-grid{gap:7px}.vps-card{min-height:82px;padding:9px;border-radius:8px}.vps-card strong{font-size:16px}.vps-card span,.vps-card small{font-size:10px}
.dashboard-reference-grid{grid-template-columns:1.1fr 1fr 1fr;gap:10px}.dashboard-reference-grid>.panel{padding:11px}.dashboard-reference-grid>.panel:nth-child(1){grid-column:span 2}.dashboard-reference-grid>.panel:nth-child(2){grid-column:auto}.dashboard-reference-grid>.panel:nth-child(n){min-height:0}.panel>header h2,.panel>h2{font-size:13px}.status-list>div,.attention-list>div{min-height:42px;padding:7px}.timeline>div{padding:7px 0}.quick-actions{grid-template-columns:1fr 1fr}.quick-actions button{min-height:36px}
.table-wrap tr{height:var(--ds-row)}.table-wrap th,.table-wrap td{padding:7px 10px;font-size:12px}.toolbar :is(input,select,.btn){min-height:var(--ds-control)}
.metric-error,.metric-unavailable{min-height:78px;display:flex;align-items:center;justify-content:center;gap:9px}.metric-error span,.metric-unavailable span{color:var(--ds-text-2)}
@media(max-width:900px){.metric-strip{display:flex;overflow-x:auto}.metric-strip-item{flex:0 0 150px}.dashboard-reference-grid{grid-template-columns:1fr 1fr}.dashboard-reference-grid>.panel:nth-child(1){grid-column:1/-1}}
@media(max-width:760px){body{font-size:14px}.metric-strip{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible}.metric-strip-item{min-height:62px;flex:auto;border-right:1px solid var(--ds-border);border-bottom:1px solid var(--ds-border);padding:8px}.metric-strip-item:nth-child(even){border-right:0}.metric-strip-item:nth-last-child(-n+2){border-bottom:0}.metric-strip-item strong{font-size:18px}.dashboard-reference-grid{grid-template-columns:1fr}.dashboard-reference-grid>.panel:nth-child(1){grid-column:auto}.dashboard-reference-grid>.panel:nth-child(n+5){display:none}.topbar{height:48px;min-height:48px}.page-view{padding:10px 9px 12px}.page-title h1{font-size:18px}}

.login-page{background:#071421}.login-page::before{background-image:linear-gradient(rgba(81,126,164,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(81,126,164,.07) 1px,transparent 1px);mask-image:none}
.login-shell{grid-template-columns:minmax(380px,1.15fr) minmax(360px,.85fr);place-items:stretch;padding:0}
.login-visual{min-height:100vh;display:flex;flex-direction:column;justify-content:space-between;padding:42px clamp(36px,7vw,104px);border-right:1px solid #1d3548;background:radial-gradient(circle at 35% 25%,rgba(36,112,232,.18),transparent 34%),linear-gradient(145deg,#081827,#06111d);color:#edf4fb}
.login-brand-lockup{display:flex;align-items:center;gap:12px}.login-brand-lockup .brand-mark{font-size:24px;font-weight:850;color:#fff}.login-brand-lockup .brand-mark::first-letter{color:#fff}.login-brand-lockup small{padding-left:12px;border-left:1px solid #29475f;color:#8fa6ba}
.login-kicker,.login-eyebrow{display:block;margin-bottom:12px;color:#6ea4ff;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.12em}.login-visual h2{max-width:620px;margin:0;font-size:clamp(34px,4vw,58px);line-height:1.08;letter-spacing:-.04em}.login-visual p{max-width:570px;margin:20px 0 0;color:#9bb0c3;font-size:15px}.login-trust{display:flex;gap:22px;color:#83a0b7;font-size:11px}.login-trust span::first-letter{color:#42a83f}
.login-panel{align-self:center;width:min(410px,calc(100% - 48px));padding:34px;border:1px solid #1d3548;border-radius:12px;background:#0b1b2a;box-shadow:0 28px 70px rgba(0,0,0,.3);backdrop-filter:none}.login-mobile-brand{display:none}.login-panel h1{color:#edf4fb;font-size:26px}.login-panel p{color:#9bb0c3}.login-form label{color:#9bb0c3}.login-form input{height:44px;border:1px solid #29475f;border-radius:8px;background:#071421;color:#edf4fb}.login-form button{height:44px;border-radius:8px;background:#1769d2;box-shadow:none}.remember-login{color:#9bb0c3}.remember-login input{height:16px}
@media(max-width:760px){.login-shell{display:grid;grid-template-columns:1fr;place-items:center;padding:20px}.login-visual{display:none}.login-panel{width:min(390px,100%);padding:28px 24px;border-radius:14px}.login-mobile-brand{display:block;margin-bottom:28px;color:#edf4fb;font-size:22px;font-weight:850}.login-mobile-brand small{color:#6ea4ff;font-size:11px}.login-panel h1{font-size:24px}}
/* Reference shell: a four-item mobile dock with a real route sheet. */
.mobile-more-backdrop,.mobile-more-sheet{display:none}
@media(max-width:760px){
  .mobile-tabbar{grid-template-columns:repeat(4,minmax(0,1fr))!important}
  .mobile-more-backdrop{display:block;position:fixed;inset:0;z-index:1090;background:rgba(2,8,18,.58);backdrop-filter:blur(3px)}
  .mobile-more-sheet{display:block;position:fixed;z-index:1100;left:8px;right:8px;bottom:calc(74px + env(safe-area-inset-bottom));max-height:min(68dvh,560px);overflow:auto;padding:12px;border:1px solid var(--line);border-radius:18px;background:var(--surface);box-shadow:0 22px 60px rgba(0,0,0,.34)}
  .mobile-more-sheet>header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
  .mobile-more-sheet>header div{display:grid;gap:2px}.mobile-more-sheet>header strong{font-size:16px}.mobile-more-sheet>header small{color:var(--secondary);font-size:10px}
  .mobile-more-sheet>header button{width:38px;height:38px;border:1px solid var(--line);border-radius:10px;background:var(--surface-soft);color:var(--text);font-size:22px}
  .mobile-more-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .mobile-more-grid button{display:grid;place-items:center;gap:6px;min-height:72px;padding:8px 5px;border:1px solid var(--line);border-radius:11px;background:var(--surface-soft);color:var(--secondary);font:inherit;font-size:10px;text-align:center}
  .mobile-more-grid button .icon{width:20px;height:20px}.mobile-more-grid button.active{border-color:var(--blue);background:color-mix(in srgb,var(--blue) 14%,var(--surface));color:var(--blue)}
}
.route-mobile-list{display:none}
@media(max-width:760px){
  .table-card:has(.route-mobile-list) .table-wrap{display:none}
  .route-mobile-list{display:grid;gap:8px;padding:8px}
  .route-mobile-card{display:grid;gap:10px;padding:11px;border:1px solid var(--line);border-radius:11px;background:var(--surface-soft)}
  .route-mobile-card header,.route-mobile-card footer{display:flex;align-items:center;justify-content:space-between;gap:9px;min-width:0}
  .route-mobile-card header>div{display:grid;gap:2px;min-width:0}.route-mobile-card header strong{overflow:hidden;text-overflow:ellipsis;font-size:12px;white-space:nowrap}.route-mobile-card header small{color:var(--secondary);font-size:10px}
  .route-mobile-card dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin:0}.route-mobile-card dl div{min-width:0}.route-mobile-card dt{color:var(--secondary);font-size:9px}.route-mobile-card dd{margin:3px 0 0;overflow:hidden;text-overflow:ellipsis;font-size:10px;font-weight:700;white-space:nowrap}
  .route-mobile-card footer{padding-top:7px;border-top:1px solid var(--line)}.route-mobile-card footer>span{min-width:0;overflow:hidden;color:var(--secondary);font-size:9px;text-overflow:ellipsis;white-space:nowrap}.route-mobile-card footer .icon-action{min-width:76px;min-height:36px}
}