:root {
  /* Sub2API-inspired light admin system */
  --bg: #f8fafc;
  --surface: #ffffff;
  --surface-alt: #f8fafc;
  --surface-soft: #f1f5f9;
  --text: #0f172a;
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #64748b;
  --border: #e2e8f0;
  --border-light: #eef2f7;
  --primary: #14b8a6;
  --primary-hover: #0d9488;
  --primary-strong: #0f766e;
  --primary-light: #ccfbf1;
  --primary-soft: rgba(20,184,166,.10);

  /* Semantic */
  --green: #16a34a;
  --green-bg: #ecfdf5;
  --red: #dc2626;
  --red-bg: #fef2f2;
  --amber: #d97706;
  --amber-bg: #fffbeb;
  --blue: #2563eb;
  --blue-bg: #eff6ff;

  /* Sidebar */
  --sidebar-bg: #ffffff;
  --sidebar-hover: #f1f5f9;
  --sidebar-active: #ccfbf1;
  --sidebar-text: #64748b;
  --sidebar-text-active: #0f766e;
  --sidebar-width: 256px;

  /* Layout */
  --radius: 14px;
  --radius-sm: 10px;
  --radius-lg: 18px;
  --shadow: 0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
  --shadow-md: 0 12px 30px rgba(15,23,42,.08);
  --shadow-card: 0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
  --transition: .18s cubic-bezier(.4,0,.2,1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  background:
    radial-gradient(circle at top left, rgba(45,212,191,.12), transparent 32rem),
    linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  color: var(--text);
  line-height: 1.5;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--primary-strong); text-decoration: none; }
a:hover { color: var(--primary-hover); text-decoration: none; }
:focus-visible { outline: 3px solid rgba(20,184,166,.26); outline-offset: 2px; }

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

/* Sidebar */
.sidebar {
  width: var(--sidebar-width);
  background: rgba(255,255,255,.92);
  color: var(--sidebar-text);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  overflow-y: auto;
  z-index: 100;
  border-right: 1px solid rgba(226,232,240,.88);
  box-shadow: 1px 0 0 rgba(255,255,255,.75), 16px 0 50px rgba(15,23,42,.04);
  backdrop-filter: blur(14px);
}
.sidebar-header {
  padding: 24px 20px 18px;
  border-bottom: 1px solid var(--border-light);
  flex-shrink: 0;
}
.sidebar-header h1 {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.03em;
  margin: 0;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 10px;
}
.sidebar-header h1 .logo-icon {
  width: 34px;
  height: 34px;
  background: linear-gradient(135deg, #2dd4bf, #0d9488);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #fff;
  font-weight: 900;
  box-shadow: 0 12px 24px rgba(20,184,166,.26);
}
.sidebar-header .subtitle {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 7px;
}
.sidebar-nav {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.sidebar-nav a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  color: var(--sidebar-text);
  font-size: 13px;
  font-weight: 650;
  transition: background var(--transition), color var(--transition), transform var(--transition);
}
.sidebar-nav a:hover {
  background: var(--sidebar-hover);
  color: var(--text);
  text-decoration: none;
  transform: translateX(1px);
}
.sidebar-nav a.active {
  background: linear-gradient(135deg, rgba(20,184,166,.15), rgba(45,212,191,.10));
  color: var(--sidebar-text-active);
  box-shadow: inset 0 0 0 1px rgba(20,184,166,.15);
}
.sidebar-nav a.active::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 99px;
  background: linear-gradient(180deg, #2dd4bf, #0d9488);
}
.sidebar-nav a svg { flex-shrink: 0; opacity: .72; width: 17px; height: 17px; }
.sidebar-nav a.active svg { opacity: .95; }
.sidebar-nav .nav-section {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #94a3b8;
  padding: 18px 12px 5px;
}
.sidebar-footer {
  padding: 14px 20px;
  border-top: 1px solid var(--border-light);
  font-size: 11px;
  color: #94a3b8;
}
.sidebar-lang {
  padding: 10px 18px;
  border-top: 1px solid var(--border-light);
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.sidebar-lang a {
  color: var(--text-muted);
  padding: 3px 7px;
  border-radius: 999px;
  transition: all var(--transition);
}
.sidebar-lang a:hover { color: var(--primary-strong); background: var(--primary-soft); text-decoration: none; }
.sidebar-lang a.active { color: var(--primary-strong); background: var(--primary-light); font-weight: 800; }
.sidebar-lang svg { opacity: .5; }

/* Main content */
.content {
  flex: 1;
  padding: 24px 32px 44px;
  margin-left: var(--sidebar-width);
  max-width: calc(var(--sidebar-width) + 1440px);
  min-width: 0;
}

/* Runtime environment bar */
.env-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 20px;
  padding: 10px 12px;
  border: 1px solid rgba(226,232,240,.92);
  border-radius: 18px;
  background: rgba(255,255,255,.82);
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(12px);
}
.env-bar-main { display: flex; flex-direction: column; gap: 1px; min-width: 112px; }
.env-bar-main strong { font-size: 13px; color: var(--text); }
.env-kicker { color: var(--primary-strong); font-size: 10px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.env-items { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.env-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border-light);
  background: #fff;
  color: var(--text-muted);
  box-shadow: 0 1px 1px rgba(15,23,42,.03);
}
.env-pill:hover { background: #f8fafc; color: var(--text); transform: translateY(-1px); }
.env-pill span:not(.env-dot) { font-size: 11px; color: var(--text-muted); }
.env-pill strong { color: var(--text); font-size: 12px; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.env-dot { width: 8px; height: 8px; border-radius: 999px; background: #cbd5e1; box-shadow: 0 0 0 3px rgba(148,163,184,.15); }
.env-dot.ok { background: var(--green); box-shadow: 0 0 0 3px rgba(22,163,74,.14); }
.env-dot.warn { background: var(--amber); box-shadow: 0 0 0 3px rgba(217,119,6,.15); }
.env-dot.neutral { background: #94a3b8; box-shadow: 0 0 0 3px rgba(148,163,184,.14); }

/* Page header */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.page-header h2 {
  margin: 0;
  font-size: 26px;
  font-weight: 850;
  letter-spacing: -.04em;
  color: var(--text);
}
.page-header p {
  margin: 4px 0 0;
  color: var(--text-muted);
  font-size: 13px;
}
.page-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* KPI Cards */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 16px;
  border: 1px solid var(--border);
}
.card-icon {
  width: 32px; height: 32px;
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 10px;
}
.card-icon.blue { background: var(--blue-bg); color: var(--blue); }
.card-icon.indigo { background: #f0f0ff; color: #4f46e5; }
.card-icon.green { background: var(--green-bg); color: var(--green); }
.card-icon.amber { background: var(--amber-bg); color: var(--amber); }
.card-icon.red { background: var(--red-bg); color: var(--red); }
.card .label { color: var(--text-muted); font-size: 11px; font-weight: 500; margin-bottom: 2px; }
.card .value { font-size: 24px; font-weight: 700; line-height: 1.2; }

/* Panels */
.panel {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 20px;
  border: 1px solid var(--border);
  margin-bottom: 12px;
}
.panel h3 {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
}
.panel h3 svg { opacity: 0.4; width: 14px; height: 14px; }

/* Grid layouts */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.grid-4 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 12px; margin-bottom: 12px; }

/* Tables */
table { width: 100%; border-collapse: collapse; font-size: 13px; }
thead th {
  text-align: left;
  padding: 8px 10px;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
tbody td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-light);
  vertical-align: middle;
}
tbody tr:hover { background: var(--surface-alt); }
tbody tr:last-child td { border-bottom: none; }

/* Badges */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}
.badge-green { background: var(--green-bg); color: #166534; }
.badge-red { background: var(--red-bg); color: #991b1b; }
.badge-amber { background: var(--amber-bg); color: #92400e; }
.badge-blue { background: var(--blue-bg); color: #1e40af; }
.badge-purple { background: #f5f3ff; color: #5b21b6; }

/* Status dot */
.status-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  margin-right: 4px;
}
.status-dot.online { background: var(--green); }
.status-dot.offline { background: var(--red); }

/* Buttons */
.btn, button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: none;
  font-size: 13px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: all var(--transition);
  line-height: 1.4;
  font-family: inherit;
  white-space: nowrap;
}
.btn-primary, button[type="submit"] {
  background: var(--primary);
  color: #fff;
}
.btn-primary:hover, button[type="submit"]:hover {
  background: var(--primary-hover);
}
.btn-secondary {
  background: var(--surface);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}
.btn-secondary:hover { background: var(--surface-alt); color: var(--text); }
.btn-danger {
  background: var(--red-bg);
  color: #991b1b;
  border: 1px solid #fecaca;
}
.btn-danger:hover { background: #fee2e2; }
.btn-sm { padding: 4px 10px; font-size: 12px; }

/* Forms */
input[type="text"], input[type="password"], input[type="number"], input[type="email"], input[type="url"], select, textarea {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 6px 10px;
  font-size: 13px;
  font-family: inherit;
  background: var(--surface);
  color: var(--text);
  outline: none;
  width: 100%;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(37,99,235,0.1);
}
input::placeholder { color: var(--text-muted); }
textarea { resize: vertical; min-height: 60px; }
.form-vertical { display: flex; flex-direction: column; gap: 10px; }
.form-vertical label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
}
.form-group { display: flex; flex-direction: column; gap: 4px; }

/* Settings sections */
.settings-section {
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  margin-bottom: 12px;
}
.settings-section-header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
}
.settings-section-header h3 { margin: 0; font-size: 13px; font-weight: 600; }
.settings-section-header .section-icon {
  width: 28px; height: 28px;
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
}
.settings-section-body { padding: 16px; }

/* Message Feed */
.msg-feed { display: flex; flex-direction: column; gap: 2px; }
.msg-card {
  display: flex;
  gap: 12px;
  padding: 12px 16px;
  border-radius: var(--radius);
  transition: background var(--transition);
}
.msg-card:hover { background: var(--surface-alt); }
.msg-avatar {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.msg-content { flex: 1; min-width: 0; }
.msg-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
}
.msg-sender {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}
.msg-chat {
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 3px;
  background: var(--surface-alt);
  color: var(--text-muted);
  border: 1px solid var(--border);
  white-space: nowrap;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.msg-time {
  font-size: 11px;
  color: var(--text-muted);
  margin-left: auto;
  white-space: nowrap;
}
.msg-body { padding-left: 0; }
.msg-text {
  font-size: 13px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--text-secondary);
}
.msg-text-empty {
  color: var(--text-muted);
  font-style: italic;
}
.msg-media {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.msg-media-item {
  position: relative;
  display: block;
  width: 120px;
  height: 90px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  transition: transform var(--transition), box-shadow var(--transition);
}
.msg-media-item:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.msg-media-item img,
.msg-media-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.msg-media-video { position: relative; }
.msg-media-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.3);
  color: #fff;
  opacity: 0;
  transition: opacity var(--transition);
}
.msg-media-video:hover .msg-media-play { opacity: 1; }
.msg-media-file {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--surface-alt);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 12px;
  text-decoration: none;
  transition: border-color var(--transition), color var(--transition);
}
.msg-media-file:hover {
  border-color: var(--primary);
  color: var(--primary);
  text-decoration: none;
}
.msg-media-file svg { flex-shrink: 0; opacity: 0.6; }
.msg-media-file span {
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.msg-media-type {
  cursor: default;
  opacity: 0.7;
}

/* Legacy message styles (for chat_detail page) */
.message-cell { max-width: 480px; white-space: pre-wrap; word-break: break-word; }
.message-item {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 6px 12px;
  padding: 10px 12px;
  border-radius: var(--radius);
}
.message-item:hover { background: var(--surface-alt); }
.message-item .meta {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
}
.message-item .meta .highlight { color: var(--text-secondary); font-weight: 500; }
.message-item .body .sender {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 2px;
}
.message-item .body .text {
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--text-secondary);
}

/* Media (legacy) */
.media-preview {
  width: 64px; height: 64px;
  border-radius: var(--radius);
  object-fit: cover;
  border: 1px solid var(--border);
}
.media-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  padding: 3px 6px;
  background: var(--surface-alt);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  color: var(--text-secondary);
}
.media-link:hover { border-color: var(--primary); color: var(--primary); text-decoration: none; }

/* Pagination */
.pagination {
  display: flex;
  gap: 4px;
  align-items: center;
}
.pagination .info { font-size: 12px; color: var(--text-muted); margin-right: 6px; }

/* Keywords */
.keyword-list { display: flex; flex-wrap: wrap; gap: 4px; }
.keyword-list span {
  background: var(--primary-light);
  color: var(--primary);
  padding: 3px 8px;
  border-radius: 3px;
  font-size: 12px;
}
.keyword-list .weight { color: var(--text-muted); font-size: 10px; margin-left: 2px; }

/* Charts */
.chart-container {
  position: relative;
  height: 240px;
  width: 100%;
}

/* Empty state */
.empty-state {
  color: var(--text-muted);
  font-size: 13px;
  text-align: center;
  padding: 32px 16px;
}
.empty-state .empty-icon { font-size: 32px; margin-bottom: 8px; opacity: 0.3; }
.empty-state .empty-title { font-weight: 500; color: var(--text-secondary); margin-bottom: 2px; }

/* Summary cards */
.summary-card {
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  padding: 16px;
  margin-bottom: 8px;
}
.summary-card .summary-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  gap: 8px;
  flex-wrap: wrap;
}
.summary-card .summary-body {
  padding: 12px;
  background: var(--surface-alt);
  border-radius: var(--radius);
  font-size: 13px;
  line-height: 1.6;
  white-space: pre-wrap;
  color: var(--text-secondary);
  border: 1px solid var(--border-light);
}

/* URL list */
.url-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-light);
}
.url-item:last-child { border-bottom: none; }
.url-item a { font-size: 13px; word-break: break-all; }
.url-item .url-date { font-size: 11px; color: var(--text-muted); white-space: nowrap; }

/* Filter tabs */
.filter-tabs {
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
  align-items: center;
  padding: 2px;
  background: var(--surface-alt);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  width: fit-content;
}
.filter-tab {
  padding: 5px 12px;
  border-radius: 2px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  transition: all var(--transition);
  cursor: pointer;
  text-decoration: none;
  border: none;
  background: none;
}
.filter-tab:hover { color: var(--text); text-decoration: none; }
.filter-tab.active {
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
  box-shadow: var(--shadow);
}
.filter-tab .count {
  display: inline-flex;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 2px;
  background: var(--border-light);
  font-size: 10px;
  font-weight: 600;
  margin-left: 4px;
  align-items: center;
  justify-content: center;
}
.filter-tab.active .count { background: var(--primary-light); color: var(--primary); }

/* Sidebar status */
.sidebar-status {
  padding: 10px 16px;
  border-top: 1px solid #222;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
}
.sidebar-status .status-indicator {
  width: 5px; height: 5px;
  border-radius: 50%;
}
.sidebar-status .status-indicator.connected { background: var(--green); }
.sidebar-status .status-indicator.disconnected { background: var(--red); }

/* Items list (products, contacts) */
.items-list { display: flex; flex-direction: column; gap: 1px; }
.item-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
}
.item-card.is-muted,
tr.is-muted {
  opacity: 0.62;
  background: var(--surface-alt);
}
.item-card.is-muted .item-title,
tr.is-muted td:first-child {
  text-decoration: line-through;
}
.item-card .item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.item-card .item-title { font-weight: 600; font-size: 14px; }
.item-card .item-details {
  display: flex;
  gap: 16px;
  margin-top: 6px;
  font-size: 13px;
}
.item-card .item-price .price-amount { font-weight: 600; }
.item-card .item-meta {
  display: flex;
  gap: 16px;
}
.item-card .item-meta {
  display: flex;
  gap: 16px;
  margin-top: 6px;
  font-size: 11px;
  color: var(--text-muted);
}

/* Responsive */
@media (max-width: 1024px) {
  .content { padding: 20px; }
  .grid-4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .sidebar {
    width: 100%;
    position: relative;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 0;
    height: auto;
  }
  .sidebar-header { padding: 10px 14px; border: none; }
  .sidebar-header .subtitle { display: none; }
  .sidebar-nav {
    flex-direction: row;
    padding: 0 6px 6px;
    gap: 1px;
    flex-wrap: wrap;
    width: 100%;
  }
  .sidebar-nav .nav-section { display: none; }
  .sidebar-nav a { padding: 5px 8px; font-size: 12px; gap: 4px; }
  .sidebar-nav a svg { width: 14px; height: 14px; }
  .sidebar-footer, .sidebar-status { display: none; }
  .layout { flex-direction: column; }
  .content {
    margin-left: 0;
    padding: 12px;
    max-width: 100%;
  }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .message-item { grid-template-columns: 1fr; }
  .msg-header { flex-wrap: wrap; }
  .msg-chat { max-width: 120px; }
  .page-header { flex-direction: column; align-items: flex-start; }
  .filter-tabs { width: 100%; }
}
@media (max-width: 480px) {
  .cards { grid-template-columns: 1fr 1fr; gap: 8px; }
  .card { padding: 12px; }
  .card .value { font-size: 20px; }
  .grid-4 { grid-template-columns: 1fr; }
}


/* === Sub2API-aligned redesign overrides === */
:root {
  --bg: #f8fafc;
  --surface: #ffffff;
  --surface-alt: #f8fafc;
  --surface-soft: #f1f5f9;
  --text: #0f172a;
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #64748b;
  --border: #e2e8f0;
  --border-light: #f1f5f9;
  --primary: #14b8a6;
  --primary-hover: #0d9488;
  --primary-strong: #0f766e;
  --primary-light: rgba(20, 184, 166, .12);
  --primary-ring: rgba(20, 184, 166, .18);
  --green: #10b981;
  --green-bg: #ecfdf5;
  --red: #ef4444;
  --red-bg: #fef2f2;
  --amber: #f59e0b;
  --amber-bg: #fffbeb;
  --blue: #3b82f6;
  --blue-bg: #eff6ff;
  --purple: #8b5cf6;
  --purple-bg: #f5f3ff;
  --sidebar-bg: rgba(255, 255, 255, .92);
  --sidebar-hover: #f8fafc;
  --sidebar-active: rgba(20, 184, 166, .12);
  --sidebar-text: #64748b;
  --sidebar-text-active: #0f766e;
  --sidebar-width: 256px;
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --shadow: 0 1px 2px rgba(15, 23, 42, .04);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, .07);
  --shadow-card: 0 1px 3px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .04);
  --shadow-hover: 0 12px 28px rgba(15, 23, 42, .10);
  --transition: .22s cubic-bezier(.16, 1, .3, 1);
}

html { background: var(--bg); }
body {
  background:
    radial-gradient(circle at 18% -10%, rgba(20, 184, 166, .10), transparent 30%),
    radial-gradient(circle at 88% 0%, rgba(45, 212, 191, .10), transparent 28%),
    var(--bg);
  color: var(--text);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--primary-strong); }
a:hover { color: var(--primary-hover); }

.layout { min-height: 100vh; }
.sidebar {
  background: var(--sidebar-bg);
  color: var(--sidebar-text);
  border-right: 1px solid rgba(226, 232, 240, .9);
  box-shadow: 1px 0 0 rgba(255,255,255,.65) inset, 8px 0 28px rgba(15,23,42,.03);
  backdrop-filter: blur(16px);
  transition: width var(--transition), transform var(--transition);
}
.sidebar-header {
  min-height: 72px;
  padding: 18px 18px 16px;
  border-bottom: 1px solid var(--border-light);
}
.sidebar-header h1 {
  color: var(--text);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.02em;
}
.sidebar-header h1 .logo-icon {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: linear-gradient(135deg, #2dd4bf, #14b8a6 52%, #0d9488);
  box-shadow: 0 10px 22px rgba(20,184,166,.25);
  font-size: 12px;
}
.sidebar-header .subtitle { color: var(--text-muted); font-size: 12px; margin-left: 42px; }
.sidebar-nav { padding: 14px 12px; gap: 4px; }
.sidebar-nav .nav-section {
  color: #94a3b8;
  font-size: 10px;
  letter-spacing: .10em;
  padding: 18px 12px 6px;
}
.sidebar-nav a {
  position: relative;
  padding: 10px 12px;
  border-radius: 12px;
  color: var(--sidebar-text);
  font-size: 13px;
  font-weight: 600;
  transition: background var(--transition), color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.sidebar-nav a:hover {
  background: var(--sidebar-hover);
  color: var(--text);
  transform: translateX(2px);
}
.sidebar-nav a.active {
  background: var(--sidebar-active);
  color: var(--sidebar-text-active);
  box-shadow: inset 0 0 0 1px rgba(20,184,166,.14);
}
.sidebar-nav a.active::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 50%;
  width: 3px;
  height: 18px;
  border-radius: 999px;
  background: linear-gradient(#2dd4bf, #14b8a6);
  transform: translateY(-50%);
}
.sidebar-nav a svg { opacity: .72; width: 17px; height: 17px; }
.sidebar-nav a.active svg { opacity: 1; color: var(--primary); }
.sidebar-lang, .sidebar-footer, .sidebar-status {
  border-top: 1px solid var(--border-light);
  color: var(--text-muted);
}
.sidebar-lang a { color: var(--text-muted); border-radius: 999px; padding: 3px 7px; }
.sidebar-lang a.active { color: var(--primary-strong); background: var(--primary-light); }
.sidebar-footer { padding: 14px 18px; }

.content {
  max-width: 1440px;
  margin-left: var(--sidebar-width);
  padding: 30px 34px 48px;
  animation: pageEnter .22s var(--transition) both;
}
@keyframes pageEnter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

.page-header {
  padding: 4px 0 2px;
  margin-bottom: 22px;
}
.page-header h2 {
  font-size: 26px;
  line-height: 1.15;
  font-weight: 750;
  letter-spacing: -.035em;
  color: var(--text);
}
.page-header .page-desc { margin-top: 7px; color: var(--text-muted); font-size: 14px; }
.page-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.cards { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; margin-bottom: 22px; }
.card, .panel, .settings-section, .summary-card, .item-card {
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(226,232,240,.92);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(10px);
}
.card {
  position: relative;
  overflow: hidden;
  padding: 18px;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.card::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 0;
  height: 3px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, rgba(20,184,166,.85), rgba(45,212,191,.32));
  opacity: .45;
}
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); border-color: rgba(20,184,166,.22); }
.card-icon {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  margin-bottom: 14px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.6);
}
.card-icon.blue, .card-icon.indigo { background: var(--primary-light); color: var(--primary-strong); }
.card-icon.green { background: var(--green-bg); color: #047857; }
.card-icon.amber { background: var(--amber-bg); color: #b45309; }
.card-icon.red { background: var(--red-bg); color: #b91c1c; }
.card .label { color: var(--text-muted); font-size: 12px; font-weight: 650; letter-spacing: .02em; }
.card .value { color: var(--text); font-size: 28px; font-weight: 800; letter-spacing: -.04em; }

.panel { padding: 20px; margin-bottom: 16px; }
.panel h3 {
  margin-bottom: 16px;
  font-size: 15px;
  font-weight: 750;
  letter-spacing: -.015em;
  color: var(--text);
}
.panel h3 svg { color: var(--primary); opacity: .85; }
.grid-2, .grid-3, .grid-4 { gap: 16px; margin-bottom: 16px; }

.flash {
  position: sticky;
  top: 14px;
  z-index: 80;
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: var(--shadow-md);
  animation: flashIn .24s var(--transition);
}
@keyframes flashIn { from { opacity: 0; transform: translateY(-10px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes flashOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-10px); } }
.flash-info { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.flash-success { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.flash-error { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }

.btn, button {
  min-height: 36px;
  border-radius: 10px;
  padding: 8px 14px;
  font-weight: 650;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition), border-color var(--transition), color var(--transition), opacity var(--transition);
}
.btn:hover, button:hover { transform: translateY(-1px); text-decoration: none; }
.btn-primary, button.btn-primary, a.btn-primary {
  background: linear-gradient(135deg, #14b8a6, #0d9488);
  color: #fff;
  box-shadow: 0 8px 18px rgba(20,184,166,.22);
}
.btn-primary:hover, button.btn-primary:hover, a.btn-primary:hover {
  background: linear-gradient(135deg, #0d9488, #0f766e);
  color: #fff;
  box-shadow: 0 12px 24px rgba(20,184,166,.28);
}
.btn-secondary {
  background: rgba(255,255,255,.92);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}
.btn-secondary:hover { background: #f8fafc; color: var(--text); border-color: #cbd5e1; box-shadow: var(--shadow); }
.btn-danger { background: #fff; color: #dc2626; border: 1px solid #fecaca; box-shadow: none; }
.btn-danger:hover { background: var(--red-bg); border-color: #fca5a5; }
.btn-sm { min-height: 31px; padding: 6px 11px; font-size: 12px; }
.btn-xs { min-height: 28px; padding: 4px 9px; font-size: 11px; border-radius: 8px; }
button[disabled], .btn[disabled], .is-loading { opacity: .66; pointer-events: none; transform: none !important; }
.is-loading::before {
  content: "";
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-right-color: transparent;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

input[type="text"], input[type="password"], input[type="number"], input[type="email"], input[type="url"], select, textarea {
  min-height: 38px;
  border-color: var(--border);
  border-radius: 10px;
  background: rgba(255,255,255,.94);
  color: var(--text);
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
input:focus, select:focus, textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-ring);
  background: #fff;
}
.checkbox-label { display: inline-flex; align-items: center; gap: 7px; color: var(--text-secondary); font-size: 13px; font-weight: 600; }
input[type="checkbox"] { accent-color: var(--primary); }
.form-vertical { gap: 14px; }
.form-vertical label, .form-group label { color: var(--text-secondary); font-weight: 700; font-size: 12px; }
.filters {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.filters > select, .filters > input { width: auto; }
@media (max-width: 768px) {
  .filters { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .filters > select, .filters > input { width: 100% !important; min-width: 0 !important; }
  .filters .checkbox-label { grid-column: 1 / 2; align-self: center; }
  .filters button[type="submit"] { grid-column: 2 / 3; }
  .filters a.btn { grid-column: 1 / -1; text-align: center; }
}

.table-wrap { width: 100%; overflow-x: auto; }
table { font-size: 13px; border-collapse: separate; border-spacing: 0; }
thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f8fafc;
  color: #64748b;
  padding: 11px 12px;
  border-bottom: 1px solid var(--border);
}
tbody td { padding: 11px 12px; border-bottom: 1px solid var(--border-light); }
tbody tr { transition: background var(--transition); }
tbody tr:hover { background: rgba(248,250,252,.86); }
code {
  background: #f1f5f9;
  color: #0f766e;
  border-radius: 7px;
  padding: 2px 6px;
}
.actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.badge {
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid transparent;
}
.badge-green { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.badge-red { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.badge-amber, .badge-yellow { background: #fffbeb; color: #b45309; border-color: #fde68a; }
.badge-blue { background: var(--primary-light); color: var(--primary-strong); border-color: rgba(20,184,166,.20); }
.badge-purple { background: var(--purple-bg); color: #6d28d9; border-color: #ddd6fe; }

.filter-tabs {
  gap: 4px;
  padding: 4px;
  background: #f1f5f9;
  border-radius: 999px;
  border-color: #e2e8f0;
}
.filter-tab { border-radius: 999px; padding: 7px 13px; color: var(--text-secondary); }
.filter-tab.active { color: var(--primary-strong); background: #fff; box-shadow: var(--shadow); }
.filter-tab .count, .filter-tab .badge { margin-left: 5px; }

.pagination { gap: 7px; flex-wrap: wrap; }
.pagination .info, .pagination-info { color: var(--text-muted); font-size: 12px; }
.keyword-list { gap: 8px; }
.keyword-list span { background: var(--primary-light); color: var(--primary-strong); border-radius: 999px; padding: 5px 10px; font-weight: 650; }
.empty-state { padding: 42px 18px; color: var(--text-muted); }
.empty-state .empty-icon { filter: grayscale(.15); opacity: .75; }
.empty-state .empty-title { color: var(--text-secondary); font-weight: 750; }

.msg-feed {
  gap: 12px;
}
.msg-card {
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(226,232,240,.92);
  border-radius: 16px;
  padding: 16px;
  box-shadow: var(--shadow-card);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition), background var(--transition);
}
.msg-card:hover {
  background: #fff;
  border-color: rgba(20,184,166,.20);
  box-shadow: var(--shadow-hover);
  transform: translateY(-1px);
}
.msg-avatar {
  width: 40px;
  height: 40px;
  box-shadow: 0 8px 18px rgba(15,23,42,.12);
}
.msg-header { gap: 9px; margin-bottom: 7px; }
.msg-sender { color: var(--text); font-weight: 750; }
.msg-chat {
  background: #f1f5f9;
  border-color: #e2e8f0;
  border-radius: 999px;
  color: var(--text-muted);
  padding: 2px 8px;
}
.msg-time { color: #94a3b8; }

/* 消息统计间距优化 */
.msg-stat { display: inline-flex; align-items: center; gap: 3px; }
.msg-stat + .msg-stat { margin-left: 2px; }
.msg-stat + .msg-time { margin-left: 6px; }

.msg-text { color: var(--text-secondary); line-height: 1.68; }
.msg-media-item { width: 136px; height: 102px; border-radius: 14px; border-color: var(--border); }
.msg-media-file { border-radius: 999px; background: #f8fafc; }

.item-card { transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); }
.item-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-hover); border-color: rgba(20,184,166,.20); }
.summary-card .summary-body { background: #f8fafc; border-radius: 12px; border-color: #e2e8f0; }
.settings-section-header { padding: 16px 18px; }
.settings-section-body { padding: 18px; }

#nav-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 9999;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transition: opacity .18s ease-out;
}
#nav-progress.active { opacity: 1; }
#nav-progress::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent 0%, #2dd4bf 20%, #14b8a6 50%, #2dd4bf 80%, transparent 100%);
  animation: progressSlide 1.25s ease-in-out infinite;
}
@keyframes progressSlide { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

.modern-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.muted { color: var(--text-muted); }
.metric-subvalue { font-size: 13px; color: var(--text-muted); font-weight: 650; }

@media (max-width: 1024px) {
  .content { padding: 24px 22px 42px; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .layout { display: block; }
  .sidebar {
    width: 100%;
    position: sticky;
    top: 0;
    display: block;
    max-height: 58vh;
    overflow-y: auto;
  }
  .sidebar-header { min-height: auto; padding: 12px 14px; }
  .sidebar-header .subtitle { margin-left: 42px; }
  .sidebar-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 10px; }
  .sidebar-nav .nav-section { grid-column: 1 / -1; padding-top: 10px; }
  .sidebar-lang { padding: 8px 14px; }
  .content { margin-left: 0; padding: 18px 14px 32px; }
  .page-header h2 { font-size: 22px; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .panel, .card { border-radius: 14px; }
  .filters > select, .filters > input { width: 100%; min-width: 0 !important; }
  table { min-width: 760px; }
  .panel:has(table) { overflow-x: auto; }
  .msg-card { padding: 13px; }
  .msg-header { flex-wrap: wrap; }
  .msg-time { margin-left: 0; width: 100%; }
}
@media (max-width: 520px) {
  .cards { grid-template-columns: 1fr; }
  .sidebar-nav { grid-template-columns: 1fr; }
  .msg-card { gap: 10px; }
  .msg-avatar { width: 34px; height: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}


/* Page-specific polish */
.panel > form.filters, .panel > form.form-vertical { margin: 0; }
.panel .modern-toolbar + table, .panel h3 + table { margin-top: 4px; }
.url-cell, .truncate-cell { max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.url-cell a { font-weight: 650; }
.toolbar-panel {
  padding: 14px 16px !important;
}
.stat-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 16px !important;
}
.stat-strip strong { color: var(--text); }
#batch-bar {
  position: sticky;
  top: 12px;
  z-index: 20;
  box-shadow: 0 12px 28px rgba(20,184,166,.12);
}
#batch-bar[style*="flex"] { animation: batchEnter .18s var(--transition) both; }
@keyframes batchEnter { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.chat-title-cell strong { color: var(--text); }
.chat-title-cell::before {
  content: "";
  display: inline-flex;
  width: 28px;
  height: 28px;
  margin-right: 8px;
  vertical-align: middle;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(45,212,191,.9), rgba(20,184,166,.9));
  box-shadow: 0 8px 18px rgba(20,184,166,.18);
}
.chart-container canvas { filter: drop-shadow(0 8px 18px rgba(15,23,42,.04)); }
.sidebar-nav a[href="/alerts"]::after {
  content: attr(data-alert-count);
  margin-left: auto;
  min-width: 18px;
  height: 18px;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
}
.sidebar-nav a[href="/alerts"][data-alert-count]:not([data-alert-count="0"])::after { display: inline-flex; }


/* TG Monitor UX upgrade: account drawer, settings tabs, softer account table */
.session-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 4px 9px;
  background: #f1f5f9;
  color: #475569;
  font-size: 11px;
  font-weight: 700;
}
.drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: rgba(15, 23, 42, .32);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.drawer-backdrop.is-open { opacity: 1; pointer-events: auto; }
.account-drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 130;
  width: min(520px, 94vw);
  height: 100vh;
  overflow-y: auto;
  background: rgba(255,255,255,.98);
  border-left: 1px solid var(--border);
  box-shadow: -24px 0 60px rgba(15,23,42,.22);
  transform: translateX(102%);
  transition: transform .24s var(--transition);
  padding: 22px;
}
.account-drawer.is-open { transform: translateX(0); }
.drawer-header { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; margin-bottom: 16px; }
.drawer-header h3 { margin: 3px 0 5px; font-size: 22px; letter-spacing: -.03em; }
.drawer-header p, .muted { margin: 0; color: var(--text-muted); font-size: 13px; line-height: 1.55; }
.drawer-kicker { color: var(--primary-strong); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.drawer-close { width: 34px; height: 34px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: #f8fafc; border: 1px solid var(--border); color: var(--text-secondary); font-size: 24px; line-height: 1; }
.drawer-close:hover { color: var(--primary-strong); text-decoration: none; }
.stepper { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0; }
.step { display: flex; align-items: center; gap: 7px; padding: 9px; border-radius: 12px; background: #f8fafc; color: var(--text-muted); font-size: 12px; font-weight: 700; border: 1px solid var(--border-light); }
.step span { width: 22px; height: 22px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: #e2e8f0; color: #64748b; font-size: 11px; }
.step.active { background: var(--primary-light); color: var(--primary-strong); border-color: rgba(20,184,166,.22); }
.step.active span, .step.done span { background: var(--primary); color: white; }
.drawer-note, .drawer-card { border: 1px solid var(--border); border-radius: 16px; background: #fff; box-shadow: var(--shadow-card); }
.drawer-note { padding: 12px 14px; color: var(--text-secondary); font-size: 13px; line-height: 1.6; margin-bottom: 12px; background: #f8fafc; }
.drawer-card { padding: 16px; margin-bottom: 12px; }
.drawer-card h4 { margin: 0 0 12px; font-size: 15px; color: var(--text); }
.settings-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 16px;
  padding: 6px;
  border-radius: 16px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
}
.settings-tab {
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  min-height: 36px;
  border-radius: 12px;
  box-shadow: none;
}
.settings-tab.active {
  background: #fff;
  color: var(--primary-strong);
  box-shadow: var(--shadow);
}
.settings-tab-panel { display: none; }
.settings-tab-panel.active { display: block; animation: cardIn .2s ease-out; }
@media (max-width: 720px) {
  .account-drawer { padding: 18px; }
  .stepper { grid-template-columns: 1fr; }
}


/* Messages page upgrade: readable cards + real hyperlinks */
.msg-feed { gap: 14px; }
.msg-card {
  position: relative;
  display: flex;
  gap: 14px;
  padding: 18px;
  border-radius: 18px;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(226,232,240,.92);
  box-shadow: 0 10px 28px rgba(15,23,42,.06);
}
.msg-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 16px;
  bottom: 16px;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, #2dd4bf, rgba(20,184,166,.18));
  opacity: .65;
}
.msg-content { flex: 1; min-width: 0; }
.msg-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.msg-meta-left, .msg-meta-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.msg-meta-right { justify-content: flex-end; flex-shrink: 0; }
.msg-sender { font-size: 13px; font-weight: 800; color: var(--text); }
.msg-chat { max-width: 280px; }
.msg-stat {
  color: #64748b;
  font-size: 11px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  padding: 2px 7px;
}
.msg-time { margin-left: 0; }
.msg-body {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 13px 14px;
}
.msg-text {
  font-size: 14px;
  line-height: 1.78;
  color: #334155;
  white-space: pre-wrap;
  word-break: break-word;
}
.msg-link {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  vertical-align: baseline;
  color: #0f766e;
  font-weight: 750;
  text-decoration: none;
  border-bottom: 1px solid rgba(20,184,166,.35);
  overflow-wrap: anywhere;
}
.msg-link::before {
  content: "🔗";
  font-size: 11px;
  margin-right: 3px;
  opacity: .75;
}
.msg-link:hover { color: #0d9488; border-bottom-color: #0d9488; background: rgba(20,184,166,.08); border-radius: 5px; }
.msg-link-linuxdo {
  color: #1d4ed8;
  border-bottom-color: rgba(29,78,216,.35);
  background: rgba(59,130,246,.08);
  border-radius: 6px;
  padding: 0 4px;
}
.msg-link-linuxdo::before { content: "linux.do"; font-size: 10px; margin-right: 5px; color: #1d4ed8; font-weight: 900; }
.msg-media { margin-top: 12px; }
@media (max-width: 768px) {
  .msg-card { padding: 14px; }
  .msg-header { display: block; }
  .msg-meta-right { justify-content: flex-start; margin-top: 6px; }
  .msg-body { padding: 11px; }
}


/* Workbench */
.workbench-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(320px, .9fr); gap: 16px; margin-bottom: 16px; }
.workbench-hero, .workbench-panel { padding: 18px; }
.workbench-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.workbench-title-row h3 { margin: 0; }
.eyebrow { color: var(--primary-strong); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.workbench-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.workbench-stats div { background: linear-gradient(180deg, #fff, #f8fafc); border: 1px solid var(--border-light); border-radius: 14px; padding: 13px; }
.workbench-stats span { display: block; color: var(--text); font-size: 24px; font-weight: 800; letter-spacing: -.03em; }
.workbench-stats label { display: block; color: var(--text-muted); font-size: 12px; margin-top: 3px; }
.workbench-status-line { margin-top: 14px; color: var(--text-secondary); font-size: 13px; }
.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 999px; margin-right: 6px; background: var(--amber); }
.status-dot.ok { background: var(--green); }
.status-dot.bad { background: var(--red); }
.mini-list { display: flex; flex-direction: column; gap: 8px; }
.mini-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border-light); }
.mini-row:last-child { border-bottom: 0; }
.mini-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mini-main strong, .mini-main a { color: var(--text); font-weight: 750; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 520px; }
.mini-main span { color: var(--text-muted); font-size: 12px; }
.empty-inline { color: var(--text-muted); padding: 16px 0; }

/* P2 dashboard-pro-charts / ops-timeline: intelligence cockpit, ops timeline, readonly polish */
.dashboard-pro-charts { margin: 16px 0; }
.chart-panel { overflow: hidden; background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,252,.94)); }
.chart-toolbar { align-items: center; }
.chart-legend { display: inline-flex; align-items: center; gap: 7px; color: var(--text-muted); font-size: 12px; font-weight: 750; }
.legend-dot { width: 9px; height: 9px; border-radius: 999px; background: var(--primary); box-shadow: 0 0 0 4px rgba(20,184,166,.12); }
.legend-dot.green { background: var(--blue); box-shadow: 0 0 0 4px rgba(37,99,235,.12); }
.chart-container-lg { height: 280px; }
.chart-insights { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.chart-insights span,
.readonly-hint.compact {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border-light);
  border-radius: 999px;
  background: #fff;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 750;
  padding: 5px 9px;
}
.timeline-list { display: grid; gap: 10px; }
.timeline-row { position: relative; display: flex; gap: 10px; padding: 10px 0 10px 2px; }
.timeline-row:not(:last-child)::after { content: ""; position: absolute; left: 6px; top: 24px; bottom: -10px; width: 1px; background: var(--border-light); }
.timeline-dot { flex: 0 0 auto; width: 13px; height: 13px; border-radius: 999px; margin-top: 4px; background: var(--blue); box-shadow: 0 0 0 4px rgba(37,99,235,.10); }
.timeline-row.success .timeline-dot { background: var(--green); box-shadow: 0 0 0 4px rgba(22,163,74,.12); }
.timeline-row.failed .timeline-dot { background: var(--red); box-shadow: 0 0 0 4px rgba(220,38,38,.12); }
.timeline-row.running .timeline-dot { background: var(--amber); box-shadow: 0 0 0 4px rgba(217,119,6,.14); }
.backup-readiness-card { background: linear-gradient(135deg, rgba(20,184,166,.08), rgba(255,255,255,.95) 42%, rgba(37,99,235,.06)); }
.backup-readiness-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.backup-readiness-grid span { display: grid; gap: 3px; border: 1px solid rgba(226,232,240,.88); border-radius: 14px; padding: 11px; background: rgba(255,255,255,.82); }
.backup-readiness-grid strong { color: var(--text); font-size: 13px; }
.backup-readiness-grid em { color: var(--text-muted); font-size: 11px; font-style: normal; }
@media (max-width: 760px) { .chart-container-lg { height: 230px; } .backup-readiness-grid { grid-template-columns: 1fr; } .chart-toolbar { align-items: flex-start; } }
@media (max-width: 1024px) { .workbench-grid { grid-template-columns: 1fr; } .workbench-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }


/* UI Phase 1 polish: Sub2API-style surfaces and responsive shell */
.card, .panel, .settings-section, .drawer-card, .drawer-note {
  border-radius: 18px;
  border-color: rgba(226,232,240,.92);
  box-shadow: var(--shadow-card);
}
.card, .panel, .settings-section { background: rgba(255,255,255,.92); }
.card {
  position: relative;
  overflow: hidden;
  padding: 18px;
}
.card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(45,212,191,.08), transparent 36%);
  opacity: .75;
}
.card .label { color: var(--text-muted); font-size: 12px; font-weight: 700; letter-spacing: .01em; }
.card .value { color: var(--text); font-size: 28px; font-weight: 850; letter-spacing: -.04em; }
.panel { padding: 22px; }
.panel h3 { font-size: 15px; font-weight: 800; letter-spacing: -.02em; }
table {
  overflow: hidden;
  border-radius: 16px;
}
thead th {
  background: #f8fafc;
  color: #64748b;
  font-size: 11px;
  letter-spacing: .06em;
  padding: 11px 12px;
}
tbody td { padding: 11px 12px; }
tbody tr { transition: background var(--transition); }
tbody tr:hover { background: rgba(20,184,166,.05); }
.badge {
  border-radius: 999px;
  padding: 3px 9px;
  font-weight: 750;
  border: 1px solid transparent;
}
.badge-green { border-color: rgba(22,163,74,.16); }
.badge-red { border-color: rgba(220,38,38,.16); }
.badge-amber { border-color: rgba(217,119,6,.18); }
.badge-blue { border-color: rgba(37,99,235,.16); }
.badge-purple { border-color: rgba(91,33,182,.16); }
.btn, button {
  min-height: 34px;
  border-radius: 12px;
  padding: 7px 13px;
  font-weight: 720;
  box-shadow: none;
}
.btn-primary, button[type="submit"] {
  background: linear-gradient(135deg, #14b8a6, #0d9488);
  color: #fff;
  box-shadow: 0 10px 22px rgba(20,184,166,.18);
}
.btn-primary:hover, button[type="submit"]:hover {
  background: linear-gradient(135deg, #2dd4bf, #0d9488);
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(20,184,166,.24);
}
.btn-secondary {
  background: #fff;
  border: 1px solid var(--border);
  color: var(--text-secondary);
}
.btn-secondary:hover { background: #f8fafc; color: var(--text); transform: translateY(-1px); }
.btn-sm { min-height: 28px; padding: 4px 10px; border-radius: 10px; }
input[type="text"], input[type="password"], input[type="number"], input[type="email"], input[type="url"], select, textarea {
  min-height: 38px;
  border-radius: 12px;
  border-color: #dbe4ee;
  background: #fff;
  padding: 8px 11px;
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
input:focus, select:focus, textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(20,184,166,.12);
}
.form-vertical { gap: 12px; }
.form-vertical label, .form-group label { color: var(--text-secondary); font-weight: 700; }
.flash {
  border-radius: 16px;
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(226,232,240,.92);
}
#nav-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  height: 3px;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  transition: opacity .18s ease;
}
#nav-progress::before {
  content: "";
  display: block;
  width: 35%;
  height: 100%;
  background: linear-gradient(90deg, transparent, #2dd4bf, #14b8a6, transparent);
  transform: translateX(-110%);
}
#nav-progress.active { opacity: 1; }
#nav-progress.active::before { animation: navProgress 1.1s cubic-bezier(.4,0,.2,1) infinite; }
@keyframes navProgress { to { transform: translateX(310%); } }
@media (max-width: 1100px) {
  :root { --sidebar-width: 232px; }
  .content { padding: 20px; }
  .env-bar { align-items: flex-start; flex-direction: column; }
  .env-items { justify-content: flex-start; }
}
@media (max-width: 760px) {
  .layout { display: block; }
  .sidebar {
    position: relative;
    width: 100%;
    height: auto;
    max-height: none;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }
  .sidebar-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sidebar-nav .nav-section { grid-column: 1 / -1; }
  .content { margin-left: 0; padding: 16px; }
  .env-bar { border-radius: 16px; }
  .env-pill { width: 100%; justify-content: flex-start; }
  .cards, .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .page-header h2 { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}


/* Auth shell */
.login-body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at top left, rgba(20, 184, 166, 0.18), transparent 32%),
    linear-gradient(135deg, #f8fafc 0%, #eef6f6 100%);
}
.login-shell { width: min(460px, calc(100vw - 32px)); }
.login-card {
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 26px;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.14);
  padding: 30px;
}
.login-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; }
.login-brand h1 { margin: 0; font-size: 22px; }
.login-brand p, .login-copy p, .login-hint { margin: 4px 0 0; color: var(--text-muted); font-size: 13px; }
.login-copy h2 { margin: 0 0 6px; font-size: 28px; letter-spacing: -0.04em; }
.login-form { margin-top: 22px; }
.login-form .btn { width: 100%; justify-content: center; margin-top: 6px; }
.login-hint { margin-top: 18px; text-align: center; }
.user-chip {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  background: rgba(248, 250, 252, 0.86);
}
.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  background: var(--primary-soft);
  color: var(--primary-strong);
  font-weight: 800;
}
.user-chip span:nth-child(2) { display: grid; gap: 2px; min-width: 0; }
.user-chip strong { color: var(--text); font-size: 13px; overflow: hidden; text-overflow: ellipsis; }
.user-chip em { color: var(--text-muted); font-size: 11px; font-style: normal; text-transform: uppercase; }
.user-chip a { color: var(--primary-strong); font-weight: 700; font-size: 12px; }


/* Readonly role guard: server middleware blocks writes; CSS hides common write controls for clarity. */
body.role-readonly form[method="post"],
body.role-readonly a.btn-primary,
body.role-readonly button[type="submit"] {
  display: none !important;
}


/* User management */
.compact-form {
  align-items: end;
}
.form-actions.align-end {
  align-self: end;
}
.inline-form {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  margin: 0;
}
.inline-form select,
.inline-form input {
  min-width: 120px;
  padding: 8px 10px;
}
.stack-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.btn-danger {
  background: #fee2e2;
  color: #991b1b;
  border-color: #fecaca;
}
.btn-danger:hover:not(:disabled) {
  background: #fecaca;
  color: #7f1d1d;
}
.badge-blue {
  background: #dbeafe;
  color: #1d4ed8;
}
.status-muted {
  background: #f1f5f9;
  color: #64748b;
}
@media (max-width: 960px) {
  .inline-form,
  .stack-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
}


/* Proxy management */
.proxy-form {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.proxy-inline-form {
  display: grid;
  grid-template-columns: 120px 96px 150px 86px 110px 110px auto;
  gap: 8px;
  align-items: center;
  min-width: 780px;
}
.proxy-inline-form input,
.proxy-inline-form select {
  min-width: 0;
}
.small-text {
  font-size: 12px;
  margin-top: 6px;
  max-width: 260px;
  word-break: break-all;
}
.status-danger {
  background: #fee2e2;
  color: #991b1b;
}
.status-ok {
  background: #dcfce7;
  color: #166534;
}
@media (max-width: 1180px) {
  .proxy-inline-form { grid-template-columns: 1fr 1fr; min-width: 420px; }
}
/* Message quick filters: make message feed actionable */
.message-quick-panel { padding: 16px 18px; }
.quick-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 13px;
}
.quick-panel-header h3 { margin: 2px 0 0; }
.quick-filter-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 9px;
}
.quick-filter-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  border-radius: 15px;
  background: linear-gradient(180deg, #fff, #f8fafc);
  border: 1px solid var(--border-light);
  color: var(--text-secondary);
  text-decoration: none;
  min-height: 94px;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition), background var(--transition);
}
.quick-filter-card:hover {
  transform: translateY(-1px);
  border-color: rgba(20,184,166,.25);
  box-shadow: var(--shadow-hover);
  text-decoration: none;
}
.quick-filter-card.active {
  background: linear-gradient(135deg, rgba(20,184,166,.12), rgba(45,212,191,.04));
  border-color: rgba(20,184,166,.35);
  box-shadow: 0 12px 26px rgba(20,184,166,.12);
}
.quick-filter-card span { color: var(--text-muted); font-size: 12px; font-weight: 800; }
.quick-filter-card strong { color: var(--text); font-size: 24px; line-height: 1; letter-spacing: -.04em; }
.quick-filter-card em { color: var(--text-muted); font-size: 11px; line-height: 1.35; font-style: normal; }
.quick-active-note {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--primary-light);
  color: var(--primary-strong);
  font-size: 13px;
  font-weight: 650;
}
@media (max-width: 1180px) { .quick-filter-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) { .quick-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }


/* LinkShop Monitor replica integrated into TG Admin */
.linkshop-page{position:relative;isolation:isolate;color:#f7f8f8;background:radial-gradient(circle at 15% -22%,rgba(113,112,255,.22),transparent 28rem),radial-gradient(circle at 95% 0%,rgba(16,185,129,.10),transparent 24rem),linear-gradient(180deg,#08090a 0%,#0b0c0f 62%,#08090a 100%);border-radius:24px;padding:14px;min-height:calc(100vh - 96px);overflow:hidden}.linkshop-orb{position:absolute;z-index:-1;width:320px;height:320px;border-radius:999px;filter:blur(86px);opacity:.35;pointer-events:none}.linkshop-orb-one{left:-150px;top:-140px;background:rgba(94,106,210,.42)}.linkshop-orb-two{right:-170px;top:80px;background:rgba(16,185,129,.16)}.linkshop-topbar{display:grid;grid-template-columns:minmax(320px,max-content) minmax(320px,1fr);gap:12px;align-items:center;padding:13px 14px;border:1px solid rgba(255,255,255,.055);border-radius:20px;background:linear-gradient(135deg,rgba(255,255,255,.07),rgba(255,255,255,.03));box-shadow:0 12px 42px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.07);backdrop-filter:blur(16px)}.linkshop-eyebrow{display:inline-flex;align-items:center;gap:7px;margin-bottom:8px;padding:3px 8px;border:1px solid rgba(255,255,255,.09);border-radius:999px;color:#d0d6e0;background:rgba(255,255,255,.04);font-size:10px;font-weight:750}.linkshop-live-dot{width:7px;height:7px;border-radius:50%;background:#10b981;box-shadow:0 0 0 4px rgba(16,185,129,.10),0 0 14px rgba(16,185,129,.7)}.linkshop-title-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.linkshop-title-row h2{margin:0;color:#f7f8f8;font-size:clamp(22px,2vw,30px);letter-spacing:-.7px}.linkshop-brand p{margin:7px 0 0;color:#8a8f98}.linkshop-contact-pill{display:inline-flex;align-items:center;border:1px solid rgba(251,191,36,.58);border-radius:999px;padding:6px 12px;color:#fff7ed;background:linear-gradient(180deg,rgba(251,191,36,.28),rgba(245,158,11,.16));font-size:13px;font-weight:900;box-shadow:0 8px 24px rgba(245,158,11,.20)}.linkshop-quick-add{display:flex;gap:9px}.linkshop-quick-add input,.linkshop-toolbar input,.linkshop-chat-form input{flex:1;min-width:0;color:#f7f8f8;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.09);border-radius:12px;padding:11px 13px;outline:none}.linkshop-quick-add button,.linkshop-chat-form button{white-space:nowrap;background:linear-gradient(180deg,#8382ff,#5e6ad2);color:white;border:1px solid rgba(255,255,255,.16);border-radius:12px;padding:10px 14px;font-weight:800;box-shadow:0 10px 24px rgba(94,106,210,.25)}.linkshop-status{min-height:18px;margin:8px 4px;color:#8a8f98;font-size:12px}.linkshop-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,420px);grid-template-rows:auto minmax(0,1fr);grid-template-areas:"summary chat" "data chat";gap:12px}.linkshop-card{background:linear-gradient(180deg,rgba(255,255,255,.054),rgba(255,255,255,.027));border:1px solid rgba(255,255,255,.055);border-radius:18px;padding:13px;box-shadow:0 14px 42px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.06);backdrop-filter:blur(16px)}.linkshop-summary-card{grid-area:summary}.linkshop-data-card{grid-area:data;min-height:540px}.linkshop-chat-card{grid-area:chat;display:flex;flex-direction:column;min-height:720px}.linkshop-chat-card.expanded{grid-column:1/-1;min-height:760px}.linkshop-section-title,.linkshop-data-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}.linkshop-kicker{display:block;margin-bottom:3px;color:#8382ff;font-size:10px;font-weight:850;letter-spacing:.12em;text-transform:uppercase}.linkshop-card h3{margin:0;color:#f7f8f8;font-size:16px}.linkshop-soft-pill{display:inline-flex;border:1px solid rgba(255,255,255,.09);border-radius:999px;padding:3px 8px;color:#d0d6e0;background:rgba(255,255,255,.035);font-size:11px}.linkshop-summary-list{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}.linkshop-metric{position:relative;overflow:hidden;padding:9px 10px;border:1px solid rgba(255,255,255,.055);border-radius:14px;background:rgba(255,255,255,.033);min-height:64px}.linkshop-metric:after{content:"";position:absolute;right:-24px;top:-28px;width:70px;height:70px;border-radius:50%;background:rgba(113,112,255,.10)}.linkshop-metric span{color:#8a8f98;font-size:11px}.linkshop-metric strong{display:block;margin-top:6px;color:#f7f8f8;font-size:22px;line-height:1;font-weight:800;letter-spacing:-.7px}.linkshop-tabs{display:inline-flex;gap:4px;padding:4px;border:1px solid rgba(255,255,255,.055);border-radius:14px;background:rgba(0,0,0,.18)}.linkshop-tab{background:transparent;color:#8a8f98;border-radius:10px;padding:7px 11px;font-weight:800;border:0}.linkshop-tab.active{background:rgba(113,112,255,.16);color:#f7f8f8;box-shadow:inset 0 0 0 1px rgba(113,112,255,.28)}.linkshop-toolbar{display:flex;gap:9px;margin-bottom:8px}.linkshop-secondary{display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,.055);color:#d0d6e0!important;border:1px solid rgba(255,255,255,.09);border-radius:12px;padding:10px 12px;font-weight:800;text-decoration:none}.linkshop-small-action{padding:8px 10px;font-size:12px}.linkshop-search-status{margin:4px 0 8px;color:#8a8f98;font-size:12px}.linkshop-tab-panel{display:none;max-height:510px;overflow:auto;scrollbar-width:thin;scrollbar-color:rgba(113,112,255,.55) rgba(255,255,255,.04)}.linkshop-tab-panel.active{display:block}.linkshop-shop{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:11px;margin-bottom:8px;border:1px solid rgba(255,255,255,.055);border-radius:15px;background:rgba(255,255,255,.032);transition:border-color .16s ease,background .16s ease,transform .16s ease}.linkshop-shop:hover{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.12);transform:translateY(-1px)}.linkshop-shop-info{min-width:0}.linkshop-shop strong{font-weight:750;color:#f7f8f8}.linkshop-pill{display:inline-flex;margin-left:7px;padding:2px 7px;border-radius:999px;border:1px solid rgba(113,112,255,.28);background:rgba(113,112,255,.12);color:#c9ccff;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10px}.linkshop-muted{color:#8a8f98;font-size:12px;line-height:1.5}.linkshop-shop-actions{flex:0 0 auto;display:flex;align-items:center;gap:8px}.linkshop-refresh-time{display:inline-flex;max-width:215px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:6px 9px;border:1px solid rgba(16,185,129,.28);border-radius:999px;background:rgba(16,185,129,.10);color:#b6f7d1;font-size:11px;font-weight:800}.linkshop-empty{padding:18px;border:1px dashed rgba(255,255,255,.09);border-radius:14px;background:rgba(255,255,255,.025);color:#8a8f98}.linkshop-goods-table{width:100%;border-collapse:separate;border-spacing:0 7px;font-size:12px;table-layout:fixed}.linkshop-goods-table th{position:sticky;top:0;z-index:2;padding:8px 9px;color:#8a8f98;font-size:11px;font-weight:800;text-align:left;background:#111216;border-bottom:1px solid rgba(255,255,255,.055)}.linkshop-goods-table td{padding:9px;border-top:1px solid rgba(255,255,255,.055);border-bottom:1px solid rgba(255,255,255,.055);vertical-align:top;color:#d0d6e0;background:rgba(255,255,255,.035)}.linkshop-goods-table td:first-child{border-left:1px solid rgba(255,255,255,.055);border-radius:12px 0 0 12px;color:#f7f8f8;font-weight:700}.linkshop-goods-table td:last-child{border-right:1px solid rgba(255,255,255,.055);border-radius:0 12px 12px 0}.linkshop-clip{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.linkshop-num{text-align:center;font-variant-numeric:tabular-nums;color:#edf0f7;font-weight:750}.linkshop-status-badge{display:inline-flex;padding:2px 7px;border-radius:999px;background:rgba(113,112,255,.12);color:#c9ccff;border:1px solid rgba(113,112,255,.25);font-size:11px}.linkshop-chat{flex:1;min-height:260px;overflow:auto;padding:10px;border:1px solid rgba(255,255,255,.055);border-radius:16px;background:rgba(0,0,0,.18);font-size:12px;white-space:pre-line}.linkshop-msg{padding:8px 10px;border-radius:13px;margin-bottom:8px;line-height:1.55}.linkshop-msg.user{margin-left:8%;background:linear-gradient(180deg,rgba(113,112,255,.22),rgba(113,112,255,.12));border:1px solid rgba(113,112,255,.24);color:#f1f3ff}.linkshop-msg.assistant{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.055);color:#d0d6e0}.linkshop-chat-form{display:flex;gap:9px;margin-top:10px}.linkshop-visitor-card{margin-top:10px;padding:9px;border:1px solid rgba(255,255,255,.055);border-radius:15px;background:rgba(0,0,0,.14)}.linkshop-visitor-head,.linkshop-visitor-row{display:flex;align-items:center;justify-content:space-between;gap:8px}.linkshop-visitor-row{margin-top:6px;padding:6px 8px;border:1px solid rgba(255,255,255,.055);border-radius:11px;background:rgba(255,255,255,.032);font-size:11px}.linkshop-visitor-row span{font-family:'JetBrains Mono',ui-monospace,monospace;color:#f7f8f8}.linkshop-visitor-row time{color:#8a8f98}@media(max-width:1180px){.linkshop-topbar{grid-template-columns:1fr}.linkshop-grid{grid-template-columns:1fr;grid-template-areas:"summary" "data" "chat"}.linkshop-chat-card{min-height:520px}.linkshop-summary-list{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:760px){.linkshop-page{padding:10px;border-radius:18px}.linkshop-quick-add,.linkshop-toolbar,.linkshop-chat-form{flex-direction:column}.linkshop-summary-list{grid-template-columns:repeat(2,minmax(0,1fr))}.linkshop-shop{align-items:flex-start;flex-direction:column}.linkshop-shop-actions{align-items:stretch;flex-wrap:wrap}.linkshop-data-head{align-items:flex-start;flex-direction:column}.linkshop-tabs{width:100%}.linkshop-tab{flex:1}}

/* === Product intelligence page === */
.products-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  padding: 22px;
  margin-bottom: 18px;
  border: 1px solid rgba(20,184,166,.18);
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(20,184,166,.12), rgba(45,212,191,.05) 42%, rgba(255,255,255,.92)),
    rgba(255,255,255,.92);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  position: relative;
}
.products-hero::after {
  content: "";
  position: absolute;
  right: -42px;
  top: -58px;
  width: 190px;
  height: 190px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(45,212,191,.26), transparent 68%);
  pointer-events: none;
}
.products-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--primary-strong);
  background: rgba(20,184,166,.12);
  border: 1px solid rgba(20,184,166,.18);
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.products-hero h2 {
  margin: 12px 0 7px;
  font-size: 30px;
  line-height: 1.12;
  letter-spacing: -.04em;
  color: var(--text);
}
.products-hero p { margin: 0; color: var(--text-muted); max-width: 680px; }
.products-hero-actions { display: flex; gap: 10px; flex-wrap: wrap; position: relative; z-index: 1; }

.product-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.product-metric-card {
  display: block;
  padding: 15px 16px;
  border: 1px solid rgba(226,232,240,.92);
  border-radius: 18px;
  background: rgba(255,255,255,.92);
  box-shadow: var(--shadow-card);
  color: var(--text);
  text-decoration: none;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition), background var(--transition);
}
.product-metric-card span { display: block; color: var(--text-muted); font-size: 12px; font-weight: 750; }
.product-metric-card strong { display: block; margin-top: 5px; font-size: 27px; line-height: 1; letter-spacing: -.04em; }
.product-metric-card em { display: block; margin-top: 7px; color: #94a3b8; font-style: normal; font-size: 11px; }
.product-metric-link:hover, .product-metric-card.active {
  transform: translateY(-2px);
  border-color: rgba(20,184,166,.26);
  background: #fff;
  box-shadow: var(--shadow-hover);
  color: var(--text);
}
.product-metric-card.active strong { color: var(--primary-strong); }

.product-control-panel {
  margin-bottom: 16px;
  padding: 16px;
  border: 1px solid rgba(226,232,240,.92);
  border-radius: 18px;
  background: rgba(255,255,255,.92);
  box-shadow: var(--shadow-card);
}
.product-filter-form {
  display: grid;
  grid-template-columns: minmax(260px, 2fr) repeat(5, minmax(120px, 1fr)) auto;
  gap: 12px;
  align-items: end;
}
.product-filter-form label { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.product-filter-form label > span { color: var(--text-muted); font-size: 11px; font-weight: 800; letter-spacing: .04em; }
.product-filter-form input, .product-filter-form select { width: 100%; min-width: 0; }
.product-filter-actions { display: flex; align-items: center; gap: 8px; }
.product-result-line { margin-top: 12px; color: var(--text-muted); font-size: 12px; }
.product-result-line strong { color: var(--text); }
.product-pagination { justify-content: flex-end; margin-bottom: 14px; }
.product-pagination.bottom { margin-top: 16px; }

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
}
.product-card {
  padding: 16px;
  padding-top: 42px;
  border: 1px solid rgba(226,232,240,.92);
  border-radius: 20px;
  background: rgba(255,255,255,.94);
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition), opacity var(--transition), background var(--transition);
}
.product-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, rgba(20,184,166,.82), rgba(45,212,191,.18));
  opacity: .55;
}
.product-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); border-color: rgba(20,184,166,.24); background: #fff; }
.product-card.is-favorite { border-color: rgba(20,184,166,.38); box-shadow: 0 10px 26px rgba(20,184,166,.10); }
.product-card.is-muted { opacity: .64; background: #f8fafc; }
.product-card.is-muted h3 { text-decoration: line-through; }
.product-card-top { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.product-title-block { min-width: 0; }
.product-title-line { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.product-title-line h3 {
  margin: 0;
  max-width: 100%;
  font-size: 15px;
  line-height: 1.35;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.product-chat { margin-top: 6px; color: var(--text-muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
.product-status-stack { flex-shrink: 0; }
.status-badge.status-warn { background: #fffbeb; color: #b45309; border-color: #fde68a; }

.product-price-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 14px 0;
}
.product-price, .product-age {
  padding: 12px;
  border-radius: 15px;
  background: #f8fafc;
  border: 1px solid var(--border-light);
}
.product-price span, .product-age span { display: block; color: var(--text-muted); font-size: 11px; font-weight: 750; }
.product-price strong, .product-age strong { display: block; margin-top: 4px; color: var(--text); font-size: 18px; letter-spacing: -.03em; }
.product-price:not(.unknown) strong { color: var(--primary-strong); font-size: 24px; }
.product-price.unknown strong { color: #94a3b8; }
.product-info-strip {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--border-light);
}
.product-info-strip div { min-width: 0; }
.product-info-strip span { display: block; color: var(--text-muted); font-size: 11px; font-weight: 750; }
.product-info-strip strong { display: block; margin-top: 4px; color: var(--text-secondary); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.product-card-actions { justify-content: flex-end; margin-top: 14px; }
.product-empty { border: 1px dashed rgba(20,184,166,.28); border-radius: 20px; background: rgba(255,255,255,.7); }

@media (max-width: 1180px) {
  .product-filter-form { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .product-search-box { grid-column: 1 / -1; }
  .product-filter-actions { grid-column: 1 / -1; justify-content: flex-end; }
}
@media (max-width: 720px) {
  .products-hero { align-items: flex-start; flex-direction: column; padding: 18px; }
  .products-hero h2 { font-size: 24px; }
  .product-filter-form { grid-template-columns: 1fr; }
  .product-filter-actions { justify-content: stretch; }
  .product-filter-actions .btn { flex: 1; justify-content: center; }
  .product-grid { grid-template-columns: 1fr; }
  .product-card-top, .product-price-row, .product-info-strip { grid-template-columns: 1fr; }
  .product-card-top { flex-direction: column; }
  .product-chat { max-width: 100%; }
}
/* Product workbench Phase 2: batch actions, detail drawer, guided empty state */
.product-quick-chips {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-light);
}
.product-quick-chips span {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
}
.product-quick-chips a {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(20,184,166,.18);
  background: rgba(20,184,166,.08);
  color: var(--primary-strong);
  font-size: 12px;
  font-weight: 750;
  text-decoration: none;
}
.product-quick-chips a:hover { background: rgba(20,184,166,.14); text-decoration: none; }

.product-batch-bar {
  position: sticky;
  top: 12px;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid rgba(20,184,166,.22);
  border-radius: 18px;
  background: rgba(240,253,250,.96);
  box-shadow: 0 16px 34px rgba(20,184,166,.16);
  backdrop-filter: blur(14px);
}
.product-batch-bar[hidden] { display: none; }
.batch-select-all { display: inline-flex; align-items: center; gap: 8px; color: var(--text-secondary); font-size: 13px; font-weight: 750; }
.product-batch-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.product-card-select {
  position: absolute;
  left: 14px;
  top: 13px;
  z-index: 2;
}
.product-card-select input, .batch-select-all input {
  width: 17px;
  height: 17px;
  accent-color: var(--primary);
}
.product-detail-open {
  position: absolute;
  right: 14px;
  top: 11px;
  z-index: 2;
  border: 1px solid rgba(20,184,166,.2);
  border-radius: 999px;
  background: #fff;
  color: var(--primary-strong);
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.product-detail-open:hover { background: var(--primary-light); }
.product-empty-actions { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.product-detail-drawer { z-index: 42; }
.product-drawer-backdrop { z-index: 41; }
.product-detail-card dl {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 9px 12px;
  margin: 0;
}
.product-detail-card dt { color: var(--text-muted); font-size: 12px; font-weight: 800; }
.product-detail-card dd { margin: 0; color: var(--text); font-size: 13px; font-weight: 650; }
.product-detail-card p { margin: 0; color: var(--text-secondary); line-height: 1.65; white-space: pre-wrap; }
.related-products { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.related-products li { display: grid; gap: 3px; padding: 10px; border-radius: 12px; background: #f8fafc; border: 1px solid var(--border-light); }
.related-products strong { color: var(--text); font-size: 13px; }
.related-products span { color: var(--text-muted); font-size: 12px; }
.toast-stack {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 60;
  display: grid;
  gap: 10px;
  pointer-events: none;
}
.toast {
  min-width: 220px;
  max-width: 340px;
  padding: 12px 14px;
  border-radius: 14px;
  background: #0f172a;
  color: #fff;
  box-shadow: 0 18px 38px rgba(15,23,42,.22);
  font-size: 13px;
  font-weight: 700;
  animation: toastIn .18s var(--transition) both;
}
.toast-success { background: linear-gradient(135deg, #14b8a6, #0d9488); }
.toast-error { background: linear-gradient(135deg, #ef4444, #b91c1c); }
.toast.is-leaving { animation: toastOut .2s ease both; }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes toastOut { to { opacity: 0; transform: translateY(6px) scale(.98); } }
@media (max-width: 720px) {
  .product-batch-bar { align-items: flex-start; flex-direction: column; }
  .product-batch-actions { justify-content: stretch; width: 100%; }
  .product-batch-actions .btn { flex: 1; justify-content: center; }
  .toast-stack { left: 14px; right: 14px; bottom: 14px; }
  .toast { max-width: none; }
}
/* Mobile-first polish for TG admin */
.mobile-nav-state,
.mobile-topbar,
.mobile-nav-backdrop,
.mobile-close-chip { display: none; }

@media (max-width: 760px) {
  html { scroll-padding-top: 72px; }
  body { background: linear-gradient(180deg, #f8fafc 0%, #eef6f6 100%); }
  body.drawer-open { overflow: hidden; }
  .layout { min-height: 100vh; padding-top: calc(62px + env(safe-area-inset-top)); }
  .mobile-topbar {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 55;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: calc(62px + env(safe-area-inset-top));
    padding: calc(10px + env(safe-area-inset-top)) 14px 10px;
    border-bottom: 1px solid rgba(226,232,240,.8);
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(18px);
    box-shadow: 0 10px 28px rgba(15,23,42,.08);
  }
  .mobile-brand {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    color: var(--text);
    font-size: 15px;
    font-weight: 850;
    text-decoration: none;
  }
  .mobile-brand .logo-icon { width: 32px; height: 32px; box-shadow: 0 10px 20px rgba(20,184,166,.18); }
  .mobile-brand span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-menu-btn {
    width: 42px;
    height: 42px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #fff;
    display: inline-grid;
    place-items: center;
    gap: 4px;
    padding: 10px;
    cursor: pointer;
    box-shadow: var(--shadow-card);
  }
  .mobile-menu-btn span { display: block; width: 18px; height: 2px; border-radius: 999px; background: var(--text); transition: transform var(--transition), opacity var(--transition); }
  .mobile-nav-state:checked ~ .mobile-topbar .mobile-menu-btn span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .mobile-nav-state:checked ~ .mobile-topbar .mobile-menu-btn span:nth-child(2) { opacity: 0; }
  .mobile-nav-state:checked ~ .mobile-topbar .mobile-menu-btn span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .mobile-nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 49;
    display: block;
    background: rgba(15,23,42,.34);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition);
  }
  .mobile-nav-state:checked ~ .mobile-nav-backdrop { opacity: 1; pointer-events: auto; }
  .sidebar {
    position: fixed !important;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 50;
    width: min(86vw, 320px) !important;
    height: 100dvh !important;
    max-height: none !important;
    display: flex !important;
    flex-direction: column !important;
    transform: translateX(-105%);
    transition: transform var(--transition);
    border-right: 1px solid rgba(226,232,240,.9) !important;
    border-bottom: 0 !important;
    border-radius: 0 24px 24px 0;
    box-shadow: 28px 0 70px rgba(15,23,42,.22);
    overflow: hidden;
  }
  .mobile-nav-state:checked ~ .sidebar { transform: translateX(0); }
  .sidebar-header { padding: calc(18px + env(safe-area-inset-top)) 18px 14px !important; border-bottom: 1px solid var(--border-light) !important; }
  .sidebar-header .subtitle { display: block !important; }
  .sidebar-nav {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    overflow-y: auto;
    padding: 12px !important;
    gap: 4px !important;
    -webkit-overflow-scrolling: touch;
  }
  .sidebar-nav .nav-section { display: block !important; padding: 15px 10px 5px !important; }
  .sidebar-nav a { min-height: 42px; padding: 10px 12px !important; border-radius: 13px; font-size: 13px !important; gap: 9px !important; }
  .sidebar-footer, .sidebar-lang { display: block !important; }
  .sidebar-footer { padding-bottom: calc(14px + env(safe-area-inset-bottom)) !important; }
  .mobile-close-chip {
    display: none;
  }
  .content { padding: 14px 12px calc(24px + env(safe-area-inset-bottom)) !important; }
  .env-bar {
    margin-bottom: 12px;
    padding: 12px;
    gap: 10px;
    border-radius: 18px !important;
  }
  .env-bar-main { flex-direction: row; align-items: center; justify-content: space-between; width: 100%; }
  .env-kicker { font-size: 9px; }
  .env-items {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
  }
  .env-pill {
    width: auto !important;
    min-width: 0;
    padding: 9px 10px;
    border-radius: 13px;
  }
  .env-pill span:nth-child(2) { display: none; }
  .env-pill strong { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
  .flash { margin: 10px 0 12px; border-radius: 14px; }
}

@media (max-width: 720px) {
  .products-hero {
    margin: 0 0 12px;
    padding: 16px;
    border-radius: 20px;
    gap: 14px;
  }
  .products-kicker { font-size: 9px; padding: 4px 8px; }
  .products-hero h2 { margin-top: 10px; font-size: 24px; }
  .products-hero p { font-size: 13px; line-height: 1.55; }
  .products-hero-actions { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .products-hero-actions .btn { width: 100%; justify-content: center; min-height: 42px; }
  .product-metrics {
    display: flex;
    overflow-x: auto;
    gap: 10px;
    margin: 0 -12px 12px;
    padding: 0 12px 4px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .product-metric-card {
    flex: 0 0 132px;
    padding: 12px;
    border-radius: 16px;
    scroll-snap-align: start;
  }
  .product-metric-card strong { font-size: 23px; }
  .product-metric-card em { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .product-control-panel { padding: 12px; border-radius: 18px; margin-bottom: 12px; }
  .mobile-filter-sheet { display: block; }
  .mobile-filter-sheet > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    list-style: none;
    cursor: pointer;
    padding: 2px 0 12px;
    color: var(--text);
    font-weight: 850;
  }
  .mobile-filter-sheet > summary::-webkit-details-marker { display: none; }
  .mobile-filter-sheet > summary small { color: var(--text-muted); font-size: 11px; font-weight: 650; }
  .mobile-filter-sheet > summary::after { content: "收起"; color: var(--primary-strong); font-size: 12px; font-weight: 850; }
  .mobile-filter-sheet:not([open]) > summary { padding-bottom: 2px; }
  .mobile-filter-sheet:not([open]) > summary::after { content: "展开"; }
  .product-filter-form { gap: 10px; }
  .product-filter-form label > span { font-size: 10px; }
  .product-filter-form input, .product-filter-form select {
    min-height: 44px;
    border-radius: 13px;
    font-size: 16px;
  }
  .product-filter-actions { position: sticky; bottom: 8px; z-index: 4; padding-top: 4px; }
  .product-filter-actions .btn { min-height: 44px; box-shadow: 0 10px 24px rgba(15,23,42,.08); }
  .product-quick-chips {
    overflow-x: auto;
    flex-wrap: nowrap;
    margin-left: -4px;
    margin-right: -4px;
    padding: 12px 4px 0;
    -webkit-overflow-scrolling: touch;
  }
  .product-quick-chips span { flex: 0 0 auto; }
  .product-quick-chips a { flex: 0 0 auto; min-height: 34px; padding: 0 13px; }
  .product-result-line { line-height: 1.5; }
  .product-pagination { justify-content: space-between; gap: 8px; }
  .product-pagination .btn { flex: 1; justify-content: center; }
  .product-grid { gap: 12px; }
  .product-card {
    padding: 14px;
    padding-top: 48px;
    border-radius: 18px;
    box-shadow: 0 1px 2px rgba(15,23,42,.05);
  }
  .product-card:hover { transform: none; }
  .product-card-select { top: 14px; left: 14px; }
  .product-card-select input, .batch-select-all input { width: 20px; height: 20px; }
  .product-detail-open { top: 12px; right: 12px; min-height: 32px; padding: 0 12px; }
  .product-title-line h3 { font-size: 16px; -webkit-line-clamp: 3; }
  .product-status-stack { width: 100%; }
  .product-status-stack .status-badge { width: max-content; }
  .product-price-row { grid-template-columns: 1fr 1fr !important; gap: 8px; margin: 12px 0; }
  .product-price, .product-age { padding: 10px; border-radius: 14px; }
  .product-price:not(.unknown) strong { font-size: 20px; }
  .product-age strong { font-size: 15px; }
  .product-info-strip { grid-template-columns: 1fr !important; gap: 8px; }
  .product-card-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .product-card-actions .btn { justify-content: center; min-height: 38px; }
  .product-batch-bar {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    top: auto;
    z-index: 44;
    border-radius: 18px;
    padding: 11px;
    box-shadow: 0 18px 44px rgba(15,23,42,.22);
  }
  .product-batch-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .product-batch-actions .btn { min-height: 38px; }
  .product-empty { padding: 22px 14px; }
  .product-empty-actions { display: grid; grid-template-columns: 1fr; width: 100%; }
  .product-empty-actions .btn { justify-content: center; min-height: 42px; }
  .product-detail-drawer.account-drawer {
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    width: 100%;
    max-width: none;
    height: min(82dvh, 720px);
    border-radius: 24px 24px 0 0;
    transform: translateY(105%);
    padding: 18px 16px calc(18px + env(safe-area-inset-bottom));
  }
  .product-detail-drawer.account-drawer.is-open { transform: translateY(0); }
  .drawer-header { gap: 12px; margin-bottom: 12px; }
  .drawer-header h3 { font-size: 18px; }
  .drawer-header p { font-size: 12px; }
  .drawer-close { width: 38px; height: 38px; flex: 0 0 auto; }
  .product-detail-body { padding-bottom: 8px; }
  .product-detail-card dl { grid-template-columns: 76px 1fr; }
  .toast-stack { left: 10px; right: 10px; bottom: calc(88px + env(safe-area-inset-bottom)); }
}

@media (max-width: 390px) {
  .products-hero-actions { grid-template-columns: 1fr; }
  .env-items { grid-template-columns: 1fr; }
  .product-price-row { grid-template-columns: 1fr !important; }
  .product-batch-actions { grid-template-columns: 1fr; }
}


/* === P0 professionalization pass: auth, unified feedback, mobile tables === */
:root {
  --shadow-hover: 0 18px 42px rgba(15,23,42,.10);
  --border-soft: #eef2f7;
  --primary-ring: rgba(20,184,166,.14);
  --purple-bg: #f5f3ff;
}
.logo-icon {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: inline-grid;
  place-items: center;
  background: linear-gradient(135deg, #2dd4bf, #0d9488);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  box-shadow: 0 12px 24px rgba(20,184,166,.24);
}
.login-body { overflow-x: hidden; }
.login-shell-pro {
  width: min(1040px, calc(100vw - 32px));
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, .82fr);
  gap: 18px;
  align-items: stretch;
}
.login-hero-panel,
.login-card-pro {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.58);
  border-radius: 30px;
  background: rgba(255,255,255,.78);
  box-shadow: 0 28px 80px rgba(15,23,42,.16);
  backdrop-filter: blur(20px);
}
.login-hero-panel { min-height: 520px; padding: 34px; display: flex; flex-direction: column; justify-content: space-between; }
.login-card-pro { padding: 34px; align-self: center; background: rgba(255,255,255,.94); }
.login-orbit { position: absolute; inset: auto -120px -130px auto; width: 360px; height: 360px; border-radius: 999px; background: radial-gradient(circle, rgba(20,184,166,.24), transparent 68%); pointer-events: none; }
.logo-icon-xl { width: 48px; height: 48px; border-radius: 17px; font-size: 15px; }
.login-brand-pro h1 { font-size: 25px; letter-spacing: -.04em; }
.login-kicker { display: inline-flex; width: max-content; margin-bottom: 10px; padding: 5px 10px; border-radius: 999px; background: rgba(20,184,166,.12); color: var(--primary-strong); font-size: 11px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.login-hero-copy h2 { max-width: 620px; margin: 0 0 12px; color: var(--text); font-size: clamp(30px, 4vw, 48px); line-height: 1.05; letter-spacing: -.06em; }
.login-hero-copy p { max-width: 540px; margin: 0; color: var(--text-secondary); font-size: 15px; line-height: 1.75; }
.login-feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; position: relative; z-index: 1; }
.login-feature-grid div { padding: 14px; border: 1px solid rgba(226,232,240,.74); border-radius: 16px; background: rgba(255,255,255,.70); }
.login-feature-grid strong { display: block; color: var(--text); font-size: 18px; }
.login-feature-grid span { display: block; margin-top: 4px; color: var(--text-muted); font-size: 12px; }
.login-card-pro .login-copy h2 { font-size: 30px; }
.login-form label { display: grid; gap: 7px; }
.login-form label span { color: var(--text-secondary); font-size: 12px; font-weight: 800; }
.login-form input { min-height: 46px; font-size: 15px; border-radius: 14px; }
.login-submit { width: 100%; min-height: 46px; justify-content: center; font-size: 15px; border-radius: 14px; }
.login-hint { display: grid; gap: 4px; padding: 12px; border-radius: 14px; background: #f8fafc; border: 1px solid var(--border-light); }
.login-hint small { color: #94a3b8; }
.login-flash { position: relative; top: auto; margin: 16px 0 0; }
.env-pill { transition: transform var(--transition), box-shadow var(--transition), background var(--transition), border-color var(--transition); }
.env-pill:has(.env-dot.warn) { border-color: rgba(217,119,6,.24); background: #fffbeb; }
.env-pill:has(.env-dot.warn)::after { content: "修复"; margin-left: 2px; padding: 2px 7px; border-radius: 999px; background: #fff; color: #b45309; font-size: 10px; font-weight: 850; }
.toast-info { background: linear-gradient(135deg, #334155, #0f172a); }
@media (max-width: 860px) {
  .login-shell-pro { grid-template-columns: 1fr; width: min(520px, calc(100vw - 28px)); }
  .login-hero-panel { min-height: auto; padding: 24px; gap: 22px; }
  .login-hero-copy h2 { font-size: 30px; }
  .login-feature-grid { grid-template-columns: 1fr; }
  .login-card-pro { padding: 24px; }
}
@media (max-width: 760px) {
  .page-actions, .filters, .actions { width: 100%; }
  .page-actions .btn, .filters .btn, .filters button { justify-content: center; }
  .panel:has(table) { padding: 0; overflow: hidden; }
  .panel:has(table) > h3, .panel:has(table) > .modern-toolbar { padding: 16px 16px 0; }
  .panel:has(table) table { min-width: 0; width: 100%; display: block; border-radius: 0; }
  .panel:has(table) thead { display: none; }
  .panel:has(table) tbody { display: grid; gap: 10px; padding: 12px; }
  .panel:has(table) tbody tr { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--border-light); border-radius: 16px; background: #fff; box-shadow: 0 1px 2px rgba(15,23,42,.04); }
  .panel:has(table) tbody td { display: flex; justify-content: space-between; gap: 12px; padding: 0; border: 0; min-width: 0; word-break: break-word; }
  .panel:has(table) tbody td::before { content: attr(data-label); flex: 0 0 86px; color: var(--text-muted); font-size: 11px; font-weight: 850; }
  .panel:has(table) tbody td:empty { display: none; }
  input[type="text"], input[type="password"], input[type="number"], input[type="email"], input[type="url"], select, textarea { min-height: 44px; font-size: 16px; }
}


/* P1 resource intelligence polish: advanced filters, URL/contact batch actions, readonly UI */
.resource-filter-panel { margin-bottom: 16px; }
.resource-filter-grid {
  display: grid;
  grid-template-columns: minmax(220px, 1.5fr) repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  align-items: end;
}
.resource-filter-grid .form-group { margin: 0; }
.filter-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.resource-batch-bar {
  position: sticky;
  top: 12px;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  margin: 0 0 14px;
  border: 1px solid rgba(20,184,166,.24);
  border-radius: 18px;
  background: rgba(240,253,250,.92);
  box-shadow: 0 16px 36px rgba(15,23,42,.10);
  backdrop-filter: blur(14px);
}
.resource-batch-bar[hidden] { display: none; }
.resource-batch-bar label { display: inline-flex; align-items: center; gap: 8px; color: var(--text-secondary); font-weight: 800; font-size: 13px; }
.resource-batch-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.selection-cell { width: 54px; text-align: center; }
.selection-cell input, .js-bulk-select { width: 17px; height: 17px; accent-color: var(--primary); }
.readonly-hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 12px;
  border-radius: 999px;
  background: rgba(100,116,139,.10);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 750;
}
.readonly-hint.compact { padding: 4px 8px; font-size: 12px; }
body.cannot-write .js-action,
body.cannot-write .js-bulk-action,
body.cannot-write .js-bulk-select,
body.cannot-write .js-bulk-select-all { display: none !important; }
@media (max-width: 720px) {
  .resource-filter-grid { grid-template-columns: 1fr; }
  .resource-batch-bar { align-items: stretch; flex-direction: column; bottom: calc(12px + env(safe-area-inset-bottom)); top: auto; position: fixed; left: 12px; right: 12px; margin: 0; }
  .resource-batch-actions { width: 100%; }
  .resource-batch-actions .btn { flex: 1; justify-content: center; }
  .selection-cell { width: auto; text-align: left; }
}

/* === Mature intelligence workspace v2: unified, no legacy dashboard mix === */
.cockpit-hero {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 24px;
  padding: 28px;
  margin-bottom: 18px;
  border: 1px solid rgba(20,184,166,.18);
  border-radius: 24px;
  background:
    radial-gradient(circle at 10% 0%, rgba(45,212,191,.20), transparent 34rem),
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(248,250,252,.90));
  box-shadow: 0 24px 70px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,.8);
  overflow: hidden;
}
.cockpit-hero::after {
  content: "";
  position: absolute;
  right: -80px;
  top: -80px;
  width: 260px;
  height: 260px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(20,184,166,.20), transparent 68%);
  pointer-events: none;
}
.cockpit-hero__copy { position: relative; z-index: 1; max-width: 760px; }
.cockpit-hero h2 { margin: 6px 0 8px; font-size: clamp(30px, 4vw, 48px); line-height: .98; letter-spacing: -.06em; color: var(--text); }
.cockpit-hero p { margin: 0; color: var(--text-secondary); font-size: 15px; max-width: 640px; }
.cockpit-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.cockpit-hero__status { position: relative; z-index: 1; min-width: 220px; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 18px; border: 1px solid rgba(226,232,240,.9); border-radius: 20px; background: rgba(255,255,255,.82); box-shadow: var(--shadow-card); }
.cockpit-hero__status strong { font-size: 22px; color: var(--text); }
.cockpit-hero__status small { color: var(--text-muted); }
.mature-surface { margin-bottom: 18px; padding: 18px; border: 1px solid rgba(226,232,240,.92); border-radius: 22px; background: rgba(255,255,255,.94); box-shadow: var(--shadow-card); }
.metric-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.metric-strip article { padding: 16px; border: 1px solid var(--border-light); border-radius: 18px; background: linear-gradient(180deg,#fff,#f8fafc); }
.metric-strip span { display: block; font-size: 28px; font-weight: 900; letter-spacing: -.05em; color: var(--text); }
.metric-strip label { display: block; margin-top: 4px; font-size: 12px; color: var(--text-muted); }
.cockpit-layout { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; }
.section-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 14px; }
.section-heading h3 { margin: 4px 0 0; font-size: 18px; letter-spacing: -.03em; }
.soft-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--border-light); background: #f8fafc; color: var(--text-muted); font-size: 12px; font-weight: 700; white-space: nowrap; }
.ops-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; }
.ops-grid div { padding: 14px; border-radius: 16px; border: 1px solid var(--border-light); background: #f8fafc; }
.ops-grid b { display: block; font-size: 24px; letter-spacing: -.04em; }
.ops-grid span { color: var(--text-muted); font-size: 12px; }
.ops-line { margin: 14px 0 0; color: var(--text-secondary); }
.warning-stack { display: grid; gap: 8px; margin-top: 14px; }
.warning-stack a { padding: 10px 12px; border-radius: 14px; background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }
.intel-list { display: flex; flex-direction: column; gap: 10px; }
.intel-list .section-heading { margin-bottom: 4px; }
.intel-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; border: 1px solid var(--border-light); border-radius: 16px; background: #fff; }
.intel-row div { min-width: 0; }
.intel-row a, .intel-row strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-weight: 800; }
.intel-row span { display: block; margin-top: 3px; color: var(--text-muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filter-console .resource-filter-grid { align-items: end; }
.inline-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.inline-actions input[type=number] { width: 92px; }
.category-cloud { display: flex; flex-wrap: wrap; gap: 8px; }
.category-cloud .filter-tab { margin: 0; }
.resource-board { padding: 0; overflow: hidden; }
.resource-board > .section-heading { padding: 18px 18px 0; }
.resource-card-list { display: flex; flex-direction: column; gap: 1px; }
.resource-card { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 14px; padding: 16px 18px; border-top: 1px solid var(--border-light); background: rgba(255,255,255,.98); transition: background var(--transition), transform var(--transition); }
.resource-card:hover { background: #f8fafc; }
.resource-card.is-muted { opacity: .62; background: #f8fafc; }
.resource-card__check { padding-top: 5px; }
.resource-card__main { min-width: 0; }
.resource-card__top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.resource-card__top a, .resource-card__top strong { color: var(--text); font-weight: 850; letter-spacing: -.02em; }
.resource-card__top code { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 4px 8px; border-radius: 999px; background: #f1f5f9; color: var(--text-muted); font-size: 11px; }
.resource-card p { margin: 8px 0 0; color: var(--text-muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.resource-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.resource-meta span { padding: 4px 8px; border-radius: 999px; background: #f8fafc; border: 1px solid var(--border-light); color: var(--text-secondary); font-size: 11px; font-weight: 700; }
.resource-meta span.accent { color: var(--primary-strong); background: var(--primary-soft); border-color: rgba(20,184,166,.18); }
.resource-card__actions { display: flex; align-items: flex-end; flex-direction: column; gap: 10px; min-width: 150px; }
.error-line { margin-top: 8px; color: var(--red); font-size: 12px; }
.pagination-surface { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.empty-state.compact { padding: 18px; }
@media (max-width: 1100px) { .cockpit-layout, .metric-strip, .ops-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } .cockpit-hero { flex-direction: column; } }
@media (max-width: 720px) { .cockpit-hero { padding: 20px; border-radius: 20px; } .metric-strip, .ops-grid, .cockpit-layout { grid-template-columns: 1fr; } .section-heading, .intel-row, .pagination-surface { flex-direction: column; align-items: stretch; } .resource-card { grid-template-columns: 1fr; } .resource-card__actions { align-items: stretch; min-width: 0; } .inline-actions { width: 100%; } }


/* ==================== v2 升级组件样式 ==================== */

/* 深度统计卡片 */
.deep-stat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 16px;
}
.deep-stat-card .stat-number {
  font-size: 28px;
  font-weight: 700;
  color: var(--blue);
  line-height: 1.2;
}
.deep-stat-card .stat-label {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
}

/* 搜索组件 */
.search-box {
  position: relative;
  max-width: 600px;
  margin: 0 auto 24px;
}
.search-box input {
  width: 100%;
  padding: 12px 16px 12px 40px;
  border: 2px solid var(--border-light);
  border-radius: var(--radius-md);
  font-size: 15px;
  background: var(--surface);
  transition: border-color 0.2s;
}
.search-box input:focus {
  border-color: var(--blue);
  outline: none;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
.search-box .search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
}
.search-summary {
  padding: 8px 16px;
  background: var(--surface-alt);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 16px;
}
.search-result-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
}
.search-result-type {
  font-size: 18px;
  flex-shrink: 0;
}
.search-result-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
}
.search-result-meta {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* 频道健康表格 */
.channel-health-table {
  width: 100%;
}
.channel-health-table th {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 8px 12px;
  border-bottom: 2px solid var(--border-light);
  text-align: left;
}
.channel-health-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-soft);
  font-size: 13px;
}
.channel-health-table tr:hover {
  background: var(--surface-alt);
}

/* 操作日志表格 */
.audit-log-table {
  width: 100%;
}
.audit-log-table th {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 8px 12px;
  border-bottom: 2px solid var(--border-light);
  text-align: left;
}
.audit-log-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-soft);
  font-size: 13px;
}
.audit-log-table tr:hover {
  background: var(--surface-alt);
}

/* 加载动画 */
.loading-spinner {
  display: inline-block;
  padding: 8px 16px;
  color: var(--text-muted);
  font-size: 13px;
}

/* 图表容器 */
.chart-container {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 16px;
  margin-bottom: 16px;
}
.chart-container svg text {
  user-select: none;
}

/* 空状态 */
.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-muted);
  font-size: 14px;
}


/* === Telegram-grade interaction upgrade 2026-06 === */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --radius-xs: 8px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.2, .8, .2, 1);
  --duration-fast: 120ms;
  --duration-med: 220ms;
  --duration-slow: 360ms;
  --surface-glass: rgba(255,255,255,.86);
  --neutral-25: #fbfdff;
  --neutral-50: #f8fafc;
  --neutral-100: #f1f5f9;
  --neutral-200: #e2e8f0;
  --neutral-300: #cbd5e1;
  --neutral-500: #64748b;
  --neutral-700: #334155;
  --neutral-900: #0f172a;
  --tg-shadow-soft: 0 8px 26px rgba(15,23,42,.06);
  --tg-shadow-float: 0 18px 44px rgba(15,23,42,.12);
}

html { scrollbar-gutter: stable; }
body {
  letter-spacing: -.005em;
  background:
    radial-gradient(circle at 20% -12%, rgba(20,184,166,.11), transparent 30rem),
    radial-gradient(circle at 92% 4%, rgba(59,130,246,.06), transparent 26rem),
    linear-gradient(180deg, var(--neutral-25), var(--neutral-100));
}
body.is-navigating .content { opacity: .74; transform: translateY(2px) scale(.998); transition: opacity 120ms ease, transform 120ms ease; }

/* unified surfaces */
.content { transition: opacity var(--duration-fast) ease, transform var(--duration-fast) ease; }
.card, .panel, .settings-section, .summary-card, .item-card, .drawer-card, .drawer-note,
.env-bar, .msg-card, .product-card, .quick-filter-card, .workbench-hero, .workbench-panel {
  border-radius: var(--radius-lg) !important;
  border-color: rgba(226,232,240,.86) !important;
  background: var(--surface-glass);
  box-shadow: var(--tg-shadow-soft);
  transition:
    transform var(--duration-med) var(--ease-out),
    box-shadow var(--duration-med) var(--ease-out),
    border-color var(--duration-fast) ease,
    background var(--duration-fast) ease,
    opacity var(--duration-med) var(--ease-out);
}
.card:hover, .panel:hover, .summary-card:hover, .item-card:hover, .msg-card:hover, .quick-filter-card:hover, .product-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--tg-shadow-float);
  border-color: rgba(20,184,166,.22) !important;
}
.panel:has(table):hover, .panel:has(form):hover { transform: none; box-shadow: var(--tg-shadow-soft); }

/* typography rhythm */
.page-header h2, .products-hero h2, .login-copy h2 { letter-spacing: -.045em; line-height: 1.12; }
.page-header p, .page-desc, .muted { line-height: 1.65; }
.panel h3, .settings-section-header h3 { font-weight: 820; letter-spacing: -.02em; }

/* instant tactile feedback */
.btn, button, .sidebar-nav a, .env-pill, .filter-tab, .settings-tab, .quick-filter-card, .item-card,
.msg-card, .product-detail-open, input, select, textarea, .toast, .mobile-menu-btn {
  -webkit-tap-highlight-color: transparent;
}
.btn:not(:disabled):active, button:not(:disabled):active, .sidebar-nav a:active,
.env-pill:active, .filter-tab:active, .settings-tab:active, .quick-filter-card:active,
.product-detail-open:active, .mobile-menu-btn:active {
  transform: scale(.985) translateY(0) !important;
  transition-duration: 50ms !important;
}
.sidebar-nav a { overflow: hidden; }
.sidebar-nav a::after, .btn::after, button::after, .filter-tab::after, .settings-tab::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at var(--press-x, 50%) var(--press-y, 50%), rgba(20,184,166,.16), transparent 36%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}
.btn, button, .filter-tab, .settings-tab { position: relative; overflow: hidden; }
.is-pressing::after { opacity: 1 !important; transition-duration: 40ms !important; }

/* smoother selected nav highlight */
.sidebar-nav a.active {
  background: linear-gradient(135deg, rgba(20,184,166,.16), rgba(45,212,191,.07));
  transform: translateX(2px);
}
.sidebar-nav a.active::before { transition: height var(--duration-med) var(--ease-out), opacity var(--duration-fast) ease; }
.sidebar-nav a:hover svg { transform: translateX(1px) scale(1.04); }
.sidebar-nav a svg { transition: transform var(--duration-fast) ease, opacity var(--duration-fast) ease; }

/* list enter and optimistic states */
.js-stagger, tbody tr, .msg-card, .item-card, .summary-card, .quick-filter-card, .card {
  animation: tgItemIn 360ms var(--ease-out) both;
  animation-delay: min(calc(var(--stagger-index, 0) * 26ms), 260ms);
}
@keyframes tgItemIn { from { opacity: 0; transform: translateY(8px) scale(.992); } to { opacity: 1; transform: none; } }
.optimistic-pending { opacity: .72; filter: saturate(.92); }
.optimistic-done { animation: optimisticDone 520ms var(--ease-out) both; }
@keyframes optimisticDone { 0% { background: rgba(20,184,166,.14); } 100% { background: transparent; } }
.removing { opacity: 0 !important; transform: translateX(12px) scale(.985) !important; max-height: 0 !important; margin: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; overflow: hidden; }

/* skeletons instead of spinner flicker */
.loading-spinner {
  display: block !important;
  min-height: 86px;
  padding: 0 !important;
  color: transparent !important;
  border-radius: var(--radius-lg);
  background:
    linear-gradient(90deg, rgba(241,245,249,.72) 25%, rgba(255,255,255,.95) 37%, rgba(241,245,249,.72) 63%) 0 0 / 400% 100%,
    linear-gradient(#eef2f7, #eef2f7) 18px 18px / 42% 13px no-repeat,
    linear-gradient(#eef2f7, #eef2f7) 18px 43px / 72% 11px no-repeat,
    linear-gradient(#eef2f7, #eef2f7) 18px 65px / 56% 11px no-repeat;
  animation: skeletonShimmer 1.12s ease-in-out infinite;
}
.skeleton-line, .skeleton-card {
  color: transparent !important;
  border-radius: 999px;
  background: linear-gradient(90deg, #edf2f7 25%, #fff 37%, #edf2f7 63%) 0 0 / 400% 100%;
  animation: skeletonShimmer 1.12s ease-in-out infinite;
}
.skeleton-card { min-height: 104px; border-radius: var(--radius-lg); border: 1px solid var(--border-light); }
@keyframes skeletonShimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* form without flash: stable focus and submitting affordance */
input, select, textarea { caret-color: var(--primary); }
input:hover, select:hover, textarea:hover { border-color: #cbd5e1; background: #fff; }
form.is-submitting { opacity: .88; transition: opacity var(--duration-fast) ease; }
button.is-loading::before, .btn.is-loading::before { flex: 0 0 auto; }

/* tables feel like fast native lists */
tbody tr { will-change: background, transform, opacity; }
tbody tr:active { transform: scale(.998); }
tbody tr td:first-child { transition: padding-left var(--duration-fast) ease; }
tbody tr:hover td:first-child { padding-left: 15px; }

/* toasts: Telegram-like compact floating feedback */
.toast-stack { z-index: 1000; }
.toast {
  border-radius: 16px;
  backdrop-filter: blur(18px);
  background: rgba(15,23,42,.90);
  box-shadow: 0 18px 50px rgba(15,23,42,.24);
  animation: toastIn 240ms var(--ease-out) both;
}
.toast-info { background: rgba(15,23,42,.90); }
.toast-success { background: linear-gradient(135deg, rgba(20,184,166,.96), rgba(13,148,136,.96)); }
.toast-error { background: linear-gradient(135deg, rgba(239,68,68,.96), rgba(185,28,28,.96)); }

/* page transitions when supported */
::view-transition-old(root) { animation: tgViewOut 160ms ease both; }
::view-transition-new(root) { animation: tgViewIn 240ms var(--ease-out) both; }
@keyframes tgViewOut { to { opacity: .72; transform: translateY(-2px); } }
@keyframes tgViewIn { from { opacity: 0; transform: translateY(8px); } }

/* modal/drawer smoothness */
.drawer-backdrop, .product-drawer-backdrop, .mobile-nav-backdrop { backdrop-filter: blur(2px); }
.account-drawer, .product-detail-drawer, .sidebar { will-change: transform; }

@media (max-width: 760px) {
  .mobile-topbar { transition: transform var(--duration-med) var(--ease-out), box-shadow var(--duration-med) var(--ease-out); }
  .sidebar-nav a.active { transform: none; }
  .content { animation-duration: 260ms; }
  tbody tr:hover td:first-child { padding-left: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .js-stagger, tbody tr, .msg-card, .item-card, .summary-card, .quick-filter-card, .card { animation: none !important; }
  body.is-navigating .content { opacity: 1; transform: none; }
}


/* === DNS Portal 实用后台 UI pass 2026-06-18 ===
   目标：参考 dns.ccocc.cyou/dashboard 的克制、实用、低 AI 味管理台风格。
   只改视觉层，不改业务逻辑。 */
:root {
  --accent: #14b8a6;
  --accent-hover: #0d9488;
  --accent-soft: rgba(20,184,166,.12);
  --accent-soft-hover: rgba(20,184,166,.18);
  --bg: #f8fafc;
  --surface: #ffffff;
  --surface-alt: #f8fafc;
  --surface-soft: #f1f5f9;
  --bg-elevated: #ffffff;
  --text: #0f172a;
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #64748b;
  --text-tertiary: #64748b;
  --border: #e2e8f0;
  --border-light: #eef2f7;
  --border-hover: #cbd5e1;
  --divider: #f1f5f9;
  --radius: 12px;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --sidebar-width: 272px;
  --shadow-sm: 0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
  --shadow-md: 0 8px 24px rgba(15,23,42,.08);
  --shadow-card: 0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
  --tg-shadow-soft: var(--shadow-sm);
  --tg-shadow-float: 0 8px 24px rgba(15,23,42,.10);
}
html, body { background: var(--bg) !important; }
body {
  font-size: 14px;
  letter-spacing: 0;
  color: var(--text-primary);
}
a { color: var(--accent); }
a:hover { color: var(--accent-hover); opacity: 1; }
.layout { background: var(--bg); }
.sidebar {
  width: var(--sidebar-width);
  background: #fff !important;
  color: var(--text-secondary);
  border-right: 1px solid var(--border);
  box-shadow: none;
  backdrop-filter: none;
}
.sidebar-header {
  height: 72px;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-bottom: 1px solid var(--divider);
}
.sidebar-header h1 {
  color: var(--text-primary);
  font-size: 17px;
  letter-spacing: -.02em;
  font-weight: 760;
}
.logo-icon, .sidebar-header h1 .logo-icon, .mobile-brand .logo-icon {
  border-radius: 10px;
  background: var(--accent-gradient, linear-gradient(135deg,#14b8a6,#0d9488));
  box-shadow: none;
}
.sidebar-header .subtitle { color: var(--text-tertiary); font-size: 12px; margin-top: 4px; }
.sidebar-nav { padding: 12px; gap: 2px; }
.sidebar-nav .nav-section {
  padding: 18px 12px 6px;
  color: #94a3b8;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: none;
}
.sidebar-nav a {
  min-height: 38px;
  padding: 9px 12px;
  border-radius: 8px;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 560;
  box-shadow: none !important;
}
.sidebar-nav a svg { width: 16px; height: 16px; opacity: .62; }
.sidebar-nav a:hover {
  background: var(--surface-soft);
  color: var(--text-primary);
  transform: none;
}
.sidebar-nav a.active {
  background: var(--accent-soft) !important;
  color: #0f766e !important;
  transform: none !important;
  box-shadow: none !important;
}
.sidebar-nav a.active::before { display: none; }
.sidebar-nav a.active svg { opacity: 1; }
.sidebar-footer, .sidebar-lang { border-top: 1px solid var(--divider); background: #fff; }
.sidebar-lang a.active { color: #0f766e; background: var(--accent-soft); }
.user-chip { background: var(--surface-alt); border: 1px solid var(--border-light); border-radius: 10px; }
.content {
  margin-left: var(--sidebar-width);
  padding: 24px 28px 44px;
  max-width: calc(var(--sidebar-width) + 1120px);
}
.env-bar {
  margin-bottom: 18px;
  padding: 12px 14px;
  border-radius: 12px !important;
  border: 1px solid var(--border) !important;
  background: #fff !important;
  box-shadow: var(--shadow-sm) !important;
  backdrop-filter: none;
}
.env-kicker {
  color: var(--text-tertiary);
  font-size: 11px;
  letter-spacing: .02em;
  text-transform: none;
}
.env-bar-main strong { font-size: 14px; font-weight: 700; }
.env-pill {
  min-height: 32px;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--surface-alt);
  border: 1px solid var(--border-light);
  box-shadow: none;
}
.env-pill:hover { background: var(--surface-soft); transform: none; }
.page-header { margin-bottom: 18px; }
.page-header h2, .products-hero h2, .cockpit-hero h2 {
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: -.02em;
  font-weight: 760;
}
.page-header p, .page-desc, .cockpit-hero p { color: var(--text-tertiary); font-size: 13px; line-height: 1.6; }
.card, .panel, .settings-section, .summary-card, .item-card, .drawer-card, .drawer-note,
.msg-card, .product-card, .quick-filter-card, .workbench-hero, .workbench-panel,
.mature-surface, .resource-card, .products-hero, .cockpit-hero, .filter-console, .resource-board {
  background: #fff !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  box-shadow: var(--shadow-sm) !important;
  backdrop-filter: none !important;
}
.card:hover, .panel:hover, .summary-card:hover, .item-card:hover, .msg-card:hover,
.quick-filter-card:hover, .product-card:hover, .resource-card:hover {
  transform: none !important;
  border-color: var(--border-hover) !important;
  box-shadow: var(--shadow-md) !important;
}
.card::after { display: none !important; }
.cards { gap: 14px; }
.card { padding: 16px; }
.card-icon { width: 36px !important; height: 36px !important; border-radius: 10px !important; box-shadow: none !important; }
.card .label { color: var(--text-tertiary); font-size: 12px; font-weight: 500; }
.card .value { color: var(--text-primary); font-size: 24px; font-weight: 760; letter-spacing: -.02em; }
.btn, button {
  border-radius: 8px;
  font-weight: 560;
  box-shadow: none;
  letter-spacing: 0;
}
.btn-primary {
  background: var(--accent) !important;
  color: #fff !important;
  box-shadow: var(--shadow-sm) !important;
}
.btn-primary:hover { background: var(--accent-hover) !important; transform: translateY(-1px); box-shadow: var(--shadow-md) !important; }
.btn-secondary, .btn-ghost {
  background: #fff !important;
  color: var(--text-secondary) !important;
  border: 1px solid var(--border) !important;
}
.btn-secondary:hover, .btn-ghost:hover { background: var(--surface-alt) !important; color: var(--text-primary) !important; }
input[type="text"], input[type="password"], input[type="number"], input[type="email"], input[type="url"], select, textarea {
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text-primary);
  box-shadow: none;
  min-height: 38px;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  outline: none;
}
table, .table, .data-table { font-size: 13px; }
th { color: var(--text-tertiary); font-weight: 650; background: var(--surface-alt); }
td, th { border-bottom-color: var(--divider) !important; }
tbody tr:hover { background: var(--surface-alt); }
.badge, .pill, .soft-chip, .filter-tab {
  border-radius: 999px;
  box-shadow: none !important;
}
.filter-tab.active, .settings-tab.active { background: var(--accent-soft) !important; color: #0f766e !important; border-color: rgba(20,184,166,.24) !important; }
.flash { border-radius: 10px; box-shadow: var(--shadow-sm); }
/* 登录页：去掉营销大图感，改成 DNS Portal 式实用登录 */
.login-body-dnsui {
  min-height: 100vh;
  background: var(--bg) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.login-shell-dnsui {
  width: min(920px, 100%);
  display: grid;
  grid-template-columns: 1fr 390px;
  gap: 20px;
  align-items: stretch;
}
.login-brand-panel, .login-card-dnsui {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
}
.login-brand-panel {
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 360px;
}
.login-simple-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text-primary);
  font-weight: 760;
  font-size: 18px;
}
.login-simple-copy h1 {
  margin: 0 0 10px;
  font-size: 30px;
  line-height: 1.18;
  letter-spacing: -.03em;
}
.login-simple-copy p { max-width: 440px; color: var(--text-secondary); font-size: 14px; line-height: 1.7; }
.login-simple-list { display: flex; flex-wrap: wrap; gap: 8px; }
.login-simple-list span {
  display: inline-flex;
  padding: 7px 10px;
  border-radius: 999px;
  background: var(--surface-alt);
  border: 1px solid var(--border-light);
  color: var(--text-secondary);
  font-size: 12px;
}
.login-card-dnsui { padding: 28px; }
.login-card-dnsui .login-copy h2 { font-size: 24px; font-weight: 760; margin-bottom: 6px; }
.login-card-dnsui .login-copy p { color: var(--text-tertiary); }
.login-card-dnsui label span { font-weight: 560; color: var(--text-secondary); }
.login-card-dnsui .login-submit { width: 100%; min-height: 40px; margin-top: 4px; }
.login-card-dnsui .login-hint {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--divider);
  color: var(--text-tertiary);
}
@media (max-width: 900px) {
  .login-shell-dnsui { grid-template-columns: 1fr; max-width: 440px; }
  .login-brand-panel { min-height: auto; gap: 24px; padding: 24px; }
  .login-simple-copy h1 { font-size: 26px; }
}
@media (max-width: 760px) {
  .content { margin-left: 0; padding: 76px 14px 32px; max-width: none; }
  .mobile-topbar { background: #fff; border-bottom: 1px solid var(--border); box-shadow: var(--shadow-sm); }
  .sidebar { transform: translateX(-100%); }
  .mobile-nav-state:checked ~ .sidebar { transform: translateX(0); }
}


/* === StartCode V2 PRD P0 dashboard reform === */
.prd-hero { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:18px; align-items:stretch; padding:22px; border-radius:18px; background:#fff; }
.prd-hero-main h2 { margin:6px 0 8px; font-size:34px; line-height:1.08; letter-spacing:-.04em; color:var(--text); }
.prd-hero-main p { margin:0; max-width:720px; color:var(--text-secondary); font-size:14px; line-height:1.7; }
.prd-health-card { border:1px solid var(--border-light); border-radius:16px; padding:16px; background:linear-gradient(180deg,#f8fafc,#fff); display:flex; flex-direction:column; justify-content:center; gap:8px; }
.prd-health-card p { margin:0; color:var(--text-muted); font-size:12px; }
.prd-health-line { display:flex; align-items:center; gap:8px; color:var(--text); }
.prd-health-line strong { font-size:18px; }
.prd-warning-link { color:#b45309; font-weight:800; text-decoration:none; }
.prd-ok-text { color:#0f766e; font-weight:800; font-size:12px; }
.prd-metrics article { min-height:92px; }
.prd-workflow-strip { padding:18px; }
.prd-flow-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; }
.prd-flow-grid a { display:flex; flex-direction:column; gap:7px; padding:15px; border:1px solid var(--border-light); border-radius:15px; background:#fff; color:var(--text); text-decoration:none; transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
.prd-flow-grid a:hover { transform:translateY(-2px); border-color:rgba(20,184,166,.38); box-shadow:0 10px 24px rgba(15,23,42,.08); }
.prd-flow-grid b { width:26px; height:26px; border-radius:9px; display:grid; place-items:center; background:rgba(20,184,166,.12); color:#0f766e; font-size:13px; }
.prd-flow-grid strong { font-size:14px; }
.prd-flow-grid span { font-size:12px; color:var(--text-muted); line-height:1.45; }
.prd-roadmap-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.prd-roadmap-grid article { padding:15px; border:1px solid var(--border-light); border-radius:15px; background:#fff; }
.prd-roadmap-grid strong { display:block; margin-bottom:8px; color:var(--text); }
.prd-roadmap-grid span { color:var(--text-secondary); font-size:12px; line-height:1.6; }
.sidebar-nav .nav-section { color:#64748b; }
@media (max-width:1100px){ .prd-hero{grid-template-columns:1fr;} .prd-flow-grid,.prd-roadmap-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:720px){ .prd-hero{padding:16px;} .prd-hero-main h2{font-size:28px;} .prd-flow-grid,.prd-roadmap-grid{grid-template-columns:1fr;} }


/* === StartCode V2 P1 platform modules === */
.p1-page-head{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px;border-radius:18px;background:#fff}.p1-page-head h2{margin:6px 0 8px;font-size:30px;letter-spacing:-.04em;color:var(--text)}.p1-page-head p{margin:0;max-width:760px;color:var(--text-secondary);line-height:1.7}.p1-card-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.p1-plan-card,.p1-flow-card{border:1px solid var(--border-light);border-radius:16px;background:#fff;padding:16px;display:flex;flex-direction:column;gap:8px}.p1-plan-card strong,.p1-flow-card strong{font-size:16px;color:var(--text)}.p1-plan-card b{font-size:24px;color:#0f766e}.p1-plan-card span,.p1-flow-card span{color:var(--text-secondary);font-size:13px}.p1-plan-card p,.p1-flow-card p{margin:0;color:var(--text-muted);font-size:12px;line-height:1.55}.p1-plan-card em,.p1-flow-card em{align-self:flex-start;border-radius:999px;background:rgba(20,184,166,.12);color:#0f766e;font-style:normal;font-size:11px;font-weight:800;padding:4px 8px}.p1-spec ul{margin:8px 0 0;padding-left:20px;color:var(--text-secondary);line-height:1.8}.p1-provider-list{display:grid;gap:10px}.p1-provider-row{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--border-light);border-radius:14px;background:#fff;padding:13px 15px}.p1-provider-row.active{border-color:rgba(20,184,166,.45);background:rgba(20,184,166,.06)}.p1-provider-row strong{display:block;color:var(--text)}.p1-provider-row span{display:block;margin-top:4px;color:var(--text-muted);font-size:12px}.p1-provider-row em{font-style:normal;color:var(--text-secondary);font-size:12px}@media(max-width:1100px){.p1-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.p1-page-head{flex-direction:column;align-items:flex-start}}@media(max-width:720px){.p1-card-grid{grid-template-columns:1fr}.p1-provider-row{align-items:flex-start;flex-direction:column}.p1-page-head h2{font-size:26px}}