/* === ONLINE INDICATOR === */
@media (max-width: 768px) {
  .online-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #4CAF50;
    margin-right: 2px;
    user-select: none;
  }
  .online-indicator .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #4CAF50;
    box-shadow: 0 0 0 0 #4CAF50;
    animation: online-pulse 1.2s infinite cubic-bezier(0.66,0,0,1);
    display: inline-block;
  }
  @keyframes online-pulse {
    0% {
      box-shadow: 0 0 0 0 #4CAF5077;
    }
    70% {
      box-shadow: 0 0 0 8px #4CAF5000;
    }
    100% {
      box-shadow: 0 0 0 0 #4CAF5000;
    }
  }
  .online-indicator .online-text {
    color: #4CAF50;
    font-weight: 600;
    letter-spacing: 0.5px;
    font-size: 13px;
  }
}
/* Mobile-first UX layer for master dashboard (profi-like)
   Scope: UI only, no logic changes.
*/

:root {
  --profi-bg: var(--bg, #f5f7fa);
  --profi-card: var(--surface, #ffffff);
  --profi-primary: var(--primary, #6366f1);
  --profi-text: var(--text, #1e293b);
  --profi-muted: var(--muted, #64748b);
  --profi-border: var(--border, #e2e8f0);
}

@media (max-width: 768px) {
  html,
  html body,
  body,
  body.app-shell,
  body.profi-mobile-ready .app-shell,
  body.profi-mobile-ready,
  body.profi-mobile-ready .app-main,
  body.profi-mobile-ready .app-panel,
  body.profi-mobile-ready .cabinet-section {
    background: var(--profi-bg) !important;
    color: var(--profi-text) !important;
  }

  body.profi-mobile-ready {
    background: var(--profi-bg);
    color: var(--profi-text);
    overflow-x: hidden;
  }

  /* ── Touch-friendly: prevent 300ms delay, double-tap zoom ── */
  .mobile-topbar-btn,
  .sidebar-toggle,
  .mobile-bottom-nav a,
  .mobile-bottom-nav button.agg-mbn-item,
  .btn-primary,
  .btn-secondary,
  .btn-ghost,
  .tab-btn,
  .profile-tab,
  .nav-menu a {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, .96);
    border-bottom: 1px solid var(--profi-border);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  .mobile-topbar-title {
    flex: 1;
    min-width: 0;
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    color: var(--profi-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .mobile-topbar-btn {
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 12px;
    background: var(--profi-bg);
    color: var(--profi-text);
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .15s, transform .1s;
  }

  .mobile-topbar-btn:active {
    transform: scale(0.92);
    background: var(--profi-border);
  }

  .sidebar-toggle {
    display: none !important;
  }

  /* ── Sidebar light ── */
  .app-sidebar {
    width: 82vw;
    max-width: 300px;
    background: #ffffff !important;
    box-shadow: 6px 0 32px rgba(99,102,241,.12), 1px 0 0 #e8ecf4;
    border-right: 1px solid #e8ecf4 !important;
    z-index: 300;
  }

  .sidebar-overlay {
    z-index: 250;
    background: rgba(99,102,241,.15) !important;
    backdrop-filter: blur(4px);
    -webkit-tap-highlight-color: transparent;
    display: block !important;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
  }

  .sidebar-overlay.active {
    opacity: 1;
    pointer-events: auto;
  }

  /* ── Бренд ── */
  .app-sidebar .sb-brand-new {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 20px 18px 16px !important;
    border-bottom: 1px solid #f0f2f8 !important;
    background: linear-gradient(135deg, #f8f7ff 0%, #ffffff 100%) !important;
  }

  .app-sidebar .sb-clock-icon {
    width: 46px; height: 46px; border-radius: 14px; flex-shrink: 0;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 16px rgba(99,102,241,.35);
    animation: sbClockPulse 3s ease-in-out infinite;
  }
  @keyframes sbClockPulse {
    0%,100% { box-shadow: 0 4px 16px rgba(99,102,241,.35); }
    50%      { box-shadow: 0 4px 24px rgba(99,102,241,.55), 0 0 0 6px rgba(99,102,241,.08); }
  }

  .app-sidebar .sb-brand-text {
    display: flex; flex-direction: column; line-height: 1; gap: 2px;
  }
  .app-sidebar .sb-brand-time {
    font: 800 17px/1 'Manrope', sans-serif; letter-spacing: -.02em; color: #1e293b;
  }
  .app-sidebar .sb-brand-profi {
    font: 900 17px/1 'Manrope', sans-serif; letter-spacing: -.02em;
    background: linear-gradient(90deg, #6366f1, #8b5cf6, #ec4899);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    background-size: 200% 100%;
    animation: sbProfiShimmer 2.5s linear infinite;
  }
  @keyframes sbProfiShimmer {
    0%  { background-position: 100%; }
    100%{ background-position: -100%; }
  }

  /* ── Карточка пользователя ── */
  .app-sidebar .sb-user-card {
    display: flex; align-items: center; gap: 10px;
    margin: 10px 12px;
    padding: 11px 13px;
    border-radius: 16px;
    background: linear-gradient(135deg, #f5f3ff, #fdf4ff);
    border: 1px solid rgba(139,92,246,.15);
    transition: all .25s cubic-bezier(.34,1.3,.64,1);
  }
  .app-sidebar .sb-user-card:hover {
    background: linear-gradient(135deg, #ede9fe, #fce7f3);
    border-color: rgba(139,92,246,.3);
    box-shadow: 0 4px 16px rgba(139,92,246,.15);
  }
  .app-sidebar .sb-user-avatar {
    width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    display: flex; align-items: center; justify-content: center;
    font: 700 16px/1 'Manrope', sans-serif; color: #fff;
    overflow: hidden;
    box-shadow: 0 0 0 3px rgba(139,92,246,.2), 0 3px 10px rgba(99,102,241,.25);
  }
  .app-sidebar .sb-avatar-agg {
    background: linear-gradient(135deg, #b45309, #f59e0b) !important;
    box-shadow: 0 0 0 3px rgba(245,158,11,.2), 0 2px 8px rgba(245,158,11,.3) !important;
  }
  .app-sidebar .sb-user-info { flex: 1; min-width: 0; }
  .app-sidebar .sb-user-name {
    font: 700 13px/1.2 'Manrope', sans-serif;
    color: #1e293b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .app-sidebar .sb-user-role {
    font: 500 11px/1.3 'Inter', sans-serif;
    color: #94a3b8; margin-top: 2px;
  }
  .app-sidebar .sb-user-settings {
    width: 30px; height: 30px; border-radius: 9px; border: none; flex-shrink: 0;
    background: #f1f5f9; color: #94a3b8;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all .25s cubic-bezier(.34,1.56,.64,1); font-size: 12px;
  }
  .app-sidebar .sb-user-settings:hover {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff; transform: rotate(90deg) scale(1.1);
    box-shadow: 0 3px 10px rgba(99,102,241,.35);
  }

  /* ── Группы навигации ── */
  .app-sidebar .nav-group-label {
    margin: 14px 12px 4px !important;
    font: 700 9px/1 'Inter', sans-serif !important;
    letter-spacing: .13em !important;
    text-transform: uppercase !important;
    color: #a5b4fc !important;
    display: flex !important; align-items: center !important; gap: 6px !important;
  }
  .app-sidebar .nav-group-label::after {
    content: ''; flex: 1; height: 1px;
    background: linear-gradient(90deg, rgba(99,102,241,.15), transparent);
    margin-left: 4px;
  }

  /* ── Пункты меню ── */
  .app-sidebar .nav-menu a {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    color: #64748b !important;
    padding: 9px 10px !important;
    border-radius: 13px !important;
    font: 500 14px/1.2 'Inter', sans-serif !important;
    transition: all .2s cubic-bezier(.34,1.3,.64,1) !important;
    position: relative;
  }
  .app-sidebar .nav-menu a:hover {
    background: linear-gradient(135deg, #f5f3ff, #fdf4ff) !important;
    color: #6366f1 !important;
    transform: translateX(4px);
    box-shadow: 0 2px 10px rgba(99,102,241,.1) !important;
  }
  .app-sidebar .nav-menu a:active { transform: scale(0.97) !important; }
  .app-sidebar .nav-menu a.active {
    background: linear-gradient(135deg, #eef2ff 0%, #faf5ff 100%) !important;
    color: #4f46e5 !important;
    font-weight: 700 !important;
    border: 1px solid rgba(99,102,241,.12) !important;
    box-shadow: 0 2px 12px rgba(99,102,241,.12) !important;
  }
  .app-sidebar .nav-menu a.active::after {
    content: ''; position: absolute; left: 0; top: 18%; bottom: 18%;
    width: 3.5px; border-radius: 0 4px 4px 0;
    background: linear-gradient(180deg, #6366f1, #a855f7, #ec4899);
    box-shadow: 0 0 10px rgba(99,102,241,.5);
  }
  .app-sidebar .nav-menu a.active .nav-icon-wrap { transform: scale(1.1); }

  /* ── Иконки ── */
  .app-sidebar .nav-icon-wrap {
    width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; transition: transform .25s cubic-bezier(.34,1.56,.64,1);
  }
  .app-sidebar .ni-indigo { background: #eef2ff; color: #6366f1; }
  .app-sidebar .ni-violet { background: #f5f3ff; color: #7c3aed; }
  .app-sidebar .ni-blue   { background: #eff6ff; color: #2563eb; }
  .app-sidebar .ni-cyan   { background: #ecfeff; color: #0891b2; }
  .app-sidebar .ni-emerald{ background: #ecfdf5; color: #059669; }
  .app-sidebar .ni-amber  { background: #fffbeb; color: #d97706; }
  .app-sidebar .ni-rose   { background: #fff1f2; color: #e11d48; }
  .app-sidebar .ni-pink   { background: #fdf2f8; color: #db2777; }
  .app-sidebar .ni-slate  { background: #f8fafc; color: #475569; }

  /* ── Нижняя панель ── */
  .app-sidebar .sb-bottom-new {
    padding: 12px 12px calc(12px + env(safe-area-inset-bottom)) !important;
    border-top: 1px solid #f0f2f8 !important;
    background: #fafbff !important;
    display: flex; flex-direction: column; gap: 6px;
  }
  .app-sidebar .sb-btn {
    display: flex; align-items: center; gap: 8px;
    width: 100%; padding: 10px 14px; border-radius: 12px;
    font: 600 13px/1 'Inter', sans-serif;
    border: 1px solid transparent; cursor: pointer;
    text-decoration: none; transition: all .2s cubic-bezier(.34,1.3,.64,1);
  }
  .app-sidebar .sb-btn:hover { transform: translateY(-2px); }
  .app-sidebar .sb-btn i { transition: transform .25s cubic-bezier(.34,1.56,.64,1); }
  .app-sidebar .sb-btn:hover i { transform: scale(1.2); }
  .app-sidebar .sb-btn-primary {
    background: #eef2ff; color: #4f46e5; border-color: #c7d2fe;
  }
  .app-sidebar .sb-btn-primary:hover {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff; border-color: transparent;
    box-shadow: 0 4px 16px rgba(99,102,241,.35);
  }
  .app-sidebar .sb-btn-danger {
    background: #fff1f2; color: #e11d48; border-color: #fecdd3;
  }
  .app-sidebar .sb-btn-danger:hover {
    background: linear-gradient(135deg, #f43f5e, #e11d48);
    color: #fff; border-color: transparent;
    box-shadow: 0 4px 14px rgba(244,63,94,.35);
  }
  .app-sidebar .sb-btn-logout {
    background: #f8fafc; color: #94a3b8; border-color: #e2e8f0;
  }
  .app-sidebar .sb-btn-logout:hover {
    background: #fff1f2; color: #e11d48; border-color: #fecdd3;
    box-shadow: 0 3px 10px rgba(244,63,94,.15);
  }

  .app-main {
    padding: 12px !important;
    padding-top: 70px !important;
    padding-bottom: calc(98px + env(safe-area-inset-bottom)) !important;
    min-height: 100dvh;
    background: transparent !important;
  }

  .cabinet-section,
  .section-card,
  .profile-data-card,
  .metric-card,
  .order-item,
  .notif-item,
  .doc-item,
  .chat-item,
  .review-item {
    background: var(--profi-card) !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06) !important;
    border: 1px solid var(--profi-border) !important;
  }

  .cabinet-section,
  .section-card,
  .profile-data-value,
  .profile-data-label,
  .section-head h2,
  .metric-card h3,
  .metric-value,
  .profile-hero-name,
  .profile-hero-meta,
  .profile-stat-lbl,
  .profile-stat-val,
  .doc-name,
  .review-author,
  .review-text {
    color: var(--profi-text) !important;
  }

  .cabinet-section {
    padding: 12px !important;
    margin-bottom: 12px;
  }

  .section-card {
    padding: 12px !important;
    margin-bottom: 12px;
  }

  .page-head {
    padding: 4px 2px 10px;
    margin-bottom: 8px;
  }

  .page-title {
    font-size: 21px !important;
    line-height: 1.2;
    color: var(--profi-text) !important;
  }

  .metrics-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  .metric-card {
    padding: 14px !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
  }

  .metric-card .metric-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    background: color-mix(in srgb, var(--profi-primary) 10%, transparent);
    color: var(--profi-primary);
    margin-bottom: 2px;
  }

  .metric-card h3 {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--profi-muted) !important;
    margin: 0 !important;
    line-height: 1.3;
  }

  .metric-card .metric-value {
    font-size: 22px !important;
    font-weight: 800 !important;
    color: var(--profi-text) !important;
    line-height: 1;
  }

  .app-grid,
  .profile-info-grid,
  .profile-cards-grid,
  .profile-two-col-grid {
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .section-head h2 {
    font-size: 16px !important;
    font-weight: 700 !important;
  }

  .header-actions,
  .section-head {
    gap: 8px;
    flex-wrap: wrap;
  }

  .header-actions {
    width: 100%;
  }

  .header-actions .btn-secondary,
  .header-actions .btn-primary {
    min-height: 40px;
  }

  .section-head .btn-primary,
  .section-head .btn-secondary,
  .settings-form .btn-primary,
  .settings-form .btn-secondary,
  .btn-primary,
  .btn-secondary {
    min-height: 42px;
    border-radius: 12px !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    justify-content: center;
  }

  .form-input,
  select.form-input,
  textarea.form-input {
    min-height: 44px;
    border-radius: 10px !important;
    padding: 10px 12px !important;
    font-size: 14px !important;
    background: var(--profi-card);
    border: 1px solid var(--profi-border) !important;
    color: var(--profi-text) !important;
  }

  .form-input::placeholder,
  textarea.form-input::placeholder {
    color: var(--profi-muted);
  }

  .profile-tabs {
    overflow-x: auto;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    padding-bottom: 4px;
    scrollbar-width: none;
  }

  .profile-tabs::-webkit-scrollbar {
    display: none;
  }

  .profile-tab {
    flex: 0 0 auto;
    border-radius: 999px !important;
    padding: 8px 12px !important;
    font-size: 12px !important;
    background: var(--profi-bg);
    border: 1px solid var(--profi-border);
    color: var(--profi-muted);
  }

  .profile-tab.active {
    border-color: var(--profi-primary) !important;
    color: var(--profi-primary) !important;
    background: color-mix(in srgb, var(--profi-primary) 8%, transparent) !important;
  }

  .section-tabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 4px;
    scrollbar-width: none;
  }

  .section-tabs::-webkit-scrollbar {
    display: none;
  }

  .section-tabs .tab-btn {
    flex: 0 0 auto;
    white-space: nowrap;
    min-height: 40px;
    padding: 8px 12px;
    border-radius: 10px;
  }

  /* Profile photo: rectangular card ratio on mobile */
  .profile-hero-avatar {
    width: min(100%, 260px);
  }

  .profile-hero-info {
    width: 100%;
    min-width: 0;
  }

  .profile-hero-meta {
    justify-content: flex-start;
    gap: 8px 12px;
    font-size: 12px;
  }

  .profile-hero-meta span {
    min-width: 0;
  }

  .profile-hero-stats {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .profile-stat {
    border-right: 0;
    border-bottom: 1px solid var(--profi-border);
  }

  .profile-stat:nth-child(odd) {
    border-right: 1px solid var(--profi-border);
  }

  .profile-stat:nth-last-child(-n+2) {
    border-bottom: 0;
  }

  .profile-hero-avatar .profile-avatar {
    width: 100% !important;
    max-width: 260px;
    height: auto !important;
    aspect-ratio: 4 / 3;
    border-radius: 12px !important;
    font-size: 34px;
  }

  .profile-hero-avatar .profile-avatar img,
  .profile-hero-avatar .profile-avatar .profile-avatar-overlay {
    border-radius: 12px !important;
  }

  .profile-data-value-inline {
    flex-wrap: wrap;
    align-items: stretch;
  }

  .profile-data-value-inline button,
  .profile-data-value-inline .btn-secondary {
    width: 100%;
  }

  .oft-cards-grid,
  .orders-list,
  .notif-list,
  #fin-history,
  #verificationChecklist {
    min-width: 0;
  }

  .oft-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }

  /* Keep tables functional on mobile via horizontal scroll.
     IMPORTANT: do NOT apply overflow-x:auto to sec-dashboard or sec-myorders —
     Chrome/Android can mis-paint layers (huge tinted shapes / clipped content). */
  .cabinet-section:not(#sec-dashboard):not(#sec-myorders),
  .section-card {
    overflow-x: auto;
  }

  /* Dashboard + «Мои заказы»: root section must not be a horizontal scroll root */
  #sec-dashboard,
  #sec-myorders {
    overflow: visible !important;
  }

  /* Master card — keep overflow:hidden so border-radius clips gradient properly */
  #dash-master-card {
    overflow: hidden !important;
  }

  .cabinet-section table,
  .section-card table,
  .cabinet-section .admin-table,
  .section-card .admin-table {
    display: table !important;
    width: max-content;
    min-width: 640px;
  }

  /* Documents upload status states */
  .doc-upload-status.is-uploading {
    border-left: 4px solid #f59e0b !important;
  }

  .doc-upload-status.is-success {
    border-left: 4px solid #16a34a !important;
  }

  .doc-upload-status.is-error {
    border-left: 4px solid #ef4444 !important;
  }

  /* ══════════════════════════════════════════════
     MASTER CARD — mobile fixes
     ══════════════════════════════════════════════ */
  #dash-master-card {
    overflow: hidden !important;
  }

  /* Hero stats grid — 2x2 on small phones */
  .dash-stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  /* Hero gradient panel — fit to container */
  .dash-hero {
    border-radius: 16px !important;
    padding: 18px 16px 16px !important;
  }

  #dash-card-fio {
    font-size: 16px !important;
    line-height: 1.3;
  }

  /* Info cells: allow text to wrap, reduce font on small screens */
  #dash-city, #dash-exp, #dash-warranty, #dash-visit, #dash-car {
    font-size: 12px !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    word-break: break-word;
  }
  /* Specs + brands chips: allow wrap */
  #dash-specs, #dash-brands {
    gap: 5px !important;
  }

  /* ══════════════════════════════════════════════
     PROFILE — comprehensive mobile fixes
     ══════════════════════════════════════════════ */

  /* ── Hero outer card ── */
  #sec-profile > div:first-child {
    overflow: hidden !important;
    margin-bottom: 14px !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 20px rgba(99,102,241,.13) !important;
  }

  /* Gradient header: compact on mobile */
  #sec-profile > div:first-child > div:first-child {
    padding: 16px 16px 54px !important;
  }
  #sec-profile > div:first-child > div:first-child h1 {
    font-size: 17px !important;
    margin-bottom: 2px !important;
  }
  #sec-profile > div:first-child > div:first-child p {
    font-size: 12px !important;
  }

  /* Avatar + info overlay row */
  #sec-profile > div:first-child > div:nth-child(2) {
    padding: 0 14px 10px !important;
    margin-top: -40px !important;
    position: relative !important;
    z-index: 3 !important;
  }
  #sec-profile > div:first-child > div:nth-child(2) > div:first-child {
    gap: 12px !important;
    flex-wrap: nowrap !important;
    align-items: flex-end !important;
  }

  /* Avatar circle */
  #avatarCircle {
    width: 70px !important;
    height: 70px !important;
    font-size: 24px !important;
    border-radius: 18px !important;
    border-width: 3px !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
    box-shadow: 0 4px 14px rgba(99,102,241,.28) !important;
  }

  /* Avatar image — JS controls display */
  #avatarImg {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 14px !important;
  }

  /* "Сменить фото" button: hidden on mobile */
  #avatarBtn {
    display: none !important;
  }

  /* Info block next to avatar */
  #sec-profile > div:first-child > div:nth-child(2) > div:first-child > div:nth-child(2) {
    padding-bottom: 4px !important;
    min-width: 0 !important;
    flex: 1 !important;
  }

  /* FIO */
  #account-fio {
    font-size: 16px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.25 !important;
    margin-bottom: 4px !important;
  }

  /* Phone + email row */
  #account-phone, #account-email {
    font-size: 11px !important;
  }
  /* Hide bullet separator between phone/email */
  #sec-profile [style*="color:var(--border)"] {
    display: none !important;
  }
  /* Phone/email icons+text: stack on mobile */
  #sec-profile > div:first-child [style*="display:flex;flex-wrap:wrap;gap:6px;margin-top:6px"] {
    flex-direction: column !important;
    gap: 2px !important;
    margin-top: 4px !important;
  }

  /* Status badges */
  #account-status-badge, #verifyStatusBadge, #onlineStatusText {
    font-size: 10px !important;
    padding: 3px 9px !important;
  }
  #sec-profile > div:first-child [style*="display:flex;flex-wrap:wrap;gap:6px;margin-top:8px"] {
    gap: 5px !important;
    margin-top: 5px !important;
  }

  /* Rating mini badge */
  #hero-rating-badge {
    font-size: 9px !important;
    padding: 2px 5px !important;
    border-radius: 6px !important;
  }

  /* Reputation bar */
  #sec-profile > div:first-child > div:nth-child(3) {
    padding: 10px 14px 0 !important;
  }
  #hero-reputation-level {
    font-size: 12px !important;
  }

  /* 4-column stats → 2×2 */
  #sec-profile [style*="grid-template-columns:repeat(4,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  #sec-profile > div:first-child > div:nth-child(4) {
    padding: 10px 14px 14px !important;
  }
  #hero-done, #hero-exp, #hero-warranty {
    font-size: 18px !important;
  }
  #hero-rating {
    font-size: 17px !important;
  }
  /* stat cells compact */
  #sec-profile > div:first-child > div:nth-child(4) [style*="padding:12px 8px"] {
    padding: 10px 6px !important;
  }

  /* ── Verification checklist — 1 col on mobile ── */
  #verificationChecklist {
    grid-template-columns: 1fr !important;
  }
  #masterVerificationPanel {
    padding: 14px !important;
  }

  /* ── Profile tabs: scrollable ── */
  #profileTabsBar {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    padding-bottom: 4px;
    gap: 6px !important;
    scrollbar-width: none !important;
  }
  #profileTabsBar::-webkit-scrollbar { display: none; }
  #profileTabsBar .profile-tab {
    flex-shrink: 0 !important;
    padding: 8px 12px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
  }

  /* ── Metrics grid (4 cards in ptab-info): removed from HTML, rule kept for safety ── */
  #ptab-info .metrics-grid,
  #ptab-info [style*="grid-template-columns:repeat(4,minmax(0,1fr))"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  #ptab-info .metric-card {
    padding: 10px 8px !important;
  }

  /* ── Мои показатели row: 3 equal pills ── */
  #ptab-info > div:first-child {
    flex-direction: row !important;
    gap: 8px !important;
  }
  #ptab-info > div:first-child > div {
    flex: 1 !important;
    padding: 10px 10px !important;
    border-radius: 10px !important;
  }
  #ptab-info > div:first-child > div > div:first-child {
    width: 28px !important;
    height: 28px !important;
    border-radius: 8px !important;
    flex-shrink: 0 !important;
  }
  #card-stat-rating, #card-stat-new {
    font-size: 17px !important;
  }
  #card-stat-reputation-level {
    font-size: 11px !important;
  }

  /* ── Кнопка Редактировать: скрыть в шапке, показать снизу карточки ── */
  #profileEditBtn {
    display: none !important;
  }
  #profileEditBtnBottom {
    display: flex !important;
  }
  #profileInfoCards {
    border-radius: 10px !important;
  }
  #profileInfoCards > div {
    padding: 10px 12px !important;
  }
  #profileInfoCards [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* ── Profile form grid: always 1 col on mobile ── */
  .profile-form-grid {
    grid-template-columns: 1fr !important;
  }
  .profile-form-grid [style*="grid-column:1/-1"] {
    grid-column: 1 / -1 !important;
  }

  /* ── Spec / portfolio / docs tabs: reduce padding ── */
  #ptab-spec, #ptab-portfolio, #ptab-docs, #ptab-reviews {
    overflow-x: visible !important;
  }

  /* ── Save buttons: full width on mobile ── */
  #saveProfileBtn, #saveSpecBtn {
    width: 100% !important;
    justify-content: center !important;
  }

  /* ── Notifications nav button badge ── */
  .mobile-bottom-nav a[data-section="notifications"].has-unread i {
    color: #ef4444;
    animation: chatIconPulse 2.5s ease-in-out infinite;
  }

  /* ── Active orders compact chips status colors ── */
  .order-status-chip {
    background: #f1f5f9;
    color: #64748b;
  }
  .order-status-chip[class*="\u0412 \u0440\u0430\u0431\u043e\u0442\u0435"],
  .order-status-chip[class*="assigned"] { background: rgba(245,158,11,.12); color: #d97706; }
  .order-status-chip[class*="\u0412\u044b\u043f\u043e\u043b\u043d"],
  .order-status-chip[class*="done"] { background: rgba(16,185,129,.12); color: #059669; }
  .order-status-chip[class*="\u041d\u0430\u0437\u043d\u0430\u0447"],
  .order-status-chip[class*="primary"] { background: rgba(99,102,241,.12); color: #6366f1; }
  .order-status-chip[class*="\u041e\u0442\u043c"],
  .order-status-chip[class*="danger"] { background: rgba(239,68,68,.1); color: #ef4444; }

  /* ══════════════════════════════════════════════
     CHAT SPLIT — full mobile UX (iPhone-ready)
     ══════════════════════════════════════════════ */
  .chat-split {
    flex-direction: column !important;
    border: none !important;
    border-radius: 0 !important;
    min-height: 0 !important;
    max-height: none !important;
    background: transparent !important;
  }
  .chat-split-sidebar {
    width: 100% !important;
    min-width: 0 !important;
    border-right: none !important;
    border-bottom: 1.5px solid var(--profi-border) !important;
    border-radius: 14px !important;
    background: var(--profi-card) !important;
    max-height: none !important;
    margin-bottom: 8px;
  }
  .chat-split.conv-open .chat-split-sidebar {
    display: none !important;
  }
  /* When conv is open — full-screen overlay (Telegram/WhatsApp UX) */
  .chat-split.conv-open .chat-split-main {
    position: fixed !important;
    inset: 0 !important;
    z-index: 200 !important;
    height: 100% !important;
    height: 100dvh !important;
    display: flex !important;
    flex-direction: column !important;
    border-radius: 0 !important;
    min-height: 0 !important;
    max-height: none !important;
    background: #fff !important;
  }
  .chat-split-main {
    border-radius: 14px !important;
    background: var(--profi-card) !important;
  }
  .chat-split .chat-conv-back {
    display: flex !important;
  }
  /* Conversation wrapper: fills parent fully */
  #chat-conversation {
    border-radius: 0 !important;
    overflow: hidden !important;
    flex: 1 !important;
    flex-direction: column !important;
    min-height: 0 !important;
    height: 100% !important;
  }
  /* Only show conversation when it's actually open (don't override JS display:none) */
  .chat-split.conv-open #chat-conversation {
    display: flex;
  }
  /* Header: wrap on tiny screens */
  .chat-conv-header {
    flex-wrap: nowrap !important;
    min-height: 58px !important;
    align-items: flex-start !important;
    padding: 10px 12px !important;
    gap: 8px !important;
  }
  /* Action buttons in header: move below on mobile */
  #chat-conv-actions {
    display: none !important;
  }
  /* Show action buttons as a bar below header on mobile */
  #chat-conv-actions-bar {
    display: flex !important;
    padding: 6px 12px 6px !important;
    gap: 8px !important;
    background: var(--profi-card) !important;
    border-bottom: 1px solid #f1f5f9 !important;
    flex-shrink: 0 !important;
  }
  /* Status pill: smaller on mobile */
  #chat-conv-status-pill .order-status-chip {
    font-size: 10px !important;
    padding: 2px 7px !important;
  }
  /* Messages area: flex:1 so it fills remaining space */
  #chatMessages, .chat-messages {
    flex: 1 !important;
    max-height: none !important;
    min-height: 120px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  /* Input row: safe-area for iPhone X+ notch */
  .chat-input-row {
    padding: 10px 12px !important;
    padding-bottom: calc(10px + env(safe-area-inset-bottom)) !important;
    flex-shrink: 0 !important;
    background: #fff !important;
    border-top: 1px solid #f1f5f9 !important;
  }
  /* Скрываем нижнюю навигацию когда диалог открыт — иначе перекрывает поле ввода */
  body.chat-conv-open .mobile-bottom-nav {
    display: none !important;
  }
  /* Support conv on mobile */
  .support-conv-wrap {
    border-radius: 14px !important;
  }
  /* Support messages */
  #supportMessages {
    max-height: 50vh !important;
    max-height: 50svh !important;
    min-height: 200px !important;
  }
  /* Support card padding */
  .support-new-card {
    padding: 16px !important;
  }
  .support-chips {
    gap: 5px !important;
  }
  .support-chip {
    padding: 6px 10px !important;
    font-size: 11px !important;
  }

  /* ══════════════════════════════════════════════
     BOTTOM NAV — redesigned with chat highlight
     ══════════════════════════════════════════════ */
  .mobile-bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    padding: 0 4px calc(4px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .98);
    border-top: 1px solid var(--profi-border);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 -4px 20px rgba(15,23,42,.08);
  }

  .mobile-bottom-nav a {
    text-decoration: none;
    color: var(--profi-muted);
    border-radius: 14px;
    min-height: 54px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    font-size: 10px;
    font-weight: 700;
    position: relative;
    transition: color .2s, background .2s, transform .12s;
    padding: 6px 4px;
  }

  .mobile-bottom-nav a:active {
    transform: scale(0.88);
  }

  .mobile-bottom-nav a i {
    font-size: 18px;
    transition: transform .2s;
  }

  .mobile-bottom-nav a.active {
    color: var(--profi-primary);
  }

  .mobile-bottom-nav a.active i {
    transform: scale(1.15);
  }

  /* Active indicator pill under icon */
  .mobile-bottom-nav a.active::after {
    content: '';
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px; height: 3px;
    border-radius: 99px;
    background: var(--profi-primary);
  }

  /* Chat nav item — special highlight */
  .mobile-bottom-nav a[data-section="chat"] {
    color: var(--profi-muted);
  }
  .mobile-bottom-nav a[data-section="chat"].active {
    color: #6366f1;
  }
  .mobile-bottom-nav a[data-section="chat"].has-unread i {
    color: #6366f1;
    animation: chatIconPulse 2.5s ease-in-out infinite;
  }
  @keyframes chatIconPulse {
    0%, 100% { transform: scale(1); }
    30% { transform: scale(1.2) rotate(-8deg); }
    60% { transform: scale(1.1) rotate(6deg); }
  }
  /* Mobile badge — bigger, more visible */
  #mobileChatBadge {
    position: absolute !important;
    top: 6px !important;
    right: 8px !important;
    min-width: 18px !important;
    height: 18px !important;
    border-radius: 9px !important;
    background: #ef4444 !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    line-height: 18px !important;
    text-align: center !important;
    padding: 0 4px !important;
    box-shadow: 0 2px 6px rgba(239,68,68,.5) !important;
    animation: badgePop .3s cubic-bezier(.34,1.56,.64,1) !important;
  }
  @keyframes badgePop {
    from { transform: scale(0); }
    to { transform: scale(1); }
  }

  /* ── Aggregator: нижнее меню 5 + «Ещё», отступ контента, шторка ── */
  body.cabinet-role-agg.profi-mobile-ready .app-main {
    padding-bottom: calc(88px + env(safe-area-inset-bottom)) !important;
  }
  body.cabinet-role-agg .mobile-bottom-nav {
    padding-top: 6px;
    padding-left: 2px;
    padding-right: 2px;
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
    min-height: calc(64px + env(safe-area-inset-bottom));
  }
  body.cabinet-role-agg .mobile-bottom-nav a,
  body.cabinet-role-agg .mobile-bottom-nav button.agg-mbn-item {
    min-height: 56px;
    padding-top: 4px;
    padding-bottom: 4px;
  }
  body.cabinet-role-agg .mobile-bottom-nav .agg-mbn-ico {
    font-size: 20px;
    line-height: 1;
    display: block;
    margin-bottom: 2px;
  }
  body.cabinet-role-agg .mobile-bottom-nav button.agg-mbn-item {
    border: none;
    background: transparent;
    cursor: pointer;
    font: inherit;
    color: var(--profi-muted);
    width: 100%;
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    font-size: 10px;
    font-weight: 700;
    position: relative;
    transition: color 0.2s, background 0.2s, transform 0.12s;
    -webkit-tap-highlight-color: transparent;
  }
  body.cabinet-role-agg .mobile-bottom-nav button.agg-mbn-item:active {
    transform: scale(0.88);
  }
  body.cabinet-role-agg .mobile-bottom-nav button.agg-mbn-item.active {
    color: var(--profi-primary);
  }
  body.cabinet-role-agg .mobile-bottom-nav button.agg-mbn-item.active::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 3px;
    border-radius: 99px;
    background: var(--profi-primary);
  }
}

body.agg-more-open {
  overflow: hidden;
}

.agg-more-overlay {
  position: fixed;
  inset: 0;
  z-index: 4300;
  background: rgba(15, 23, 42, 0.45);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.22s ease, visibility 0.22s ease;
}
.agg-more-overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.agg-more-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4301;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}
.agg-more-sheet.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.agg-more-sheet-inner {
  width: 100%;
  max-width: 520px;
  background: #fff;
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -10px 44px rgba(15, 23, 42, 0.2);
  padding-bottom: env(safe-area-inset-bottom, 0);
  max-height: min(88vh, 640px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.32, 1, 0.28, 1);
  pointer-events: auto;
}
.agg-more-sheet.is-open .agg-more-sheet-inner {
  transform: translateY(0);
}
.agg-more-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--profi-border, #e2e8f0);
  flex-shrink: 0;
}
.agg-more-title {
  font: 800 16px/1.2 'Manrope', system-ui, sans-serif;
  color: var(--profi-text, #1e293b);
}
.agg-more-close {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 12px;
  background: #f1f5f9;
  color: #64748b;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
}
.agg-more-close:active {
  transform: scale(0.92);
}
.agg-more-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 14px 14px 18px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.agg-more-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid var(--profi-border, #e2e8f0);
  background: #f8fafc;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
  color: inherit;
  min-height: 64px;
  box-sizing: border-box;
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
}
.agg-more-tile:active {
  transform: scale(0.98);
}
.agg-more-tile:hover {
  border-color: rgba(99, 102, 241, 0.35);
  background: #f5f3ff;
}
.agg-more-tile-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--profi-text, #1e293b);
  line-height: 1.25;
}
.agg-more-tile-sub {
  font-size: 11px;
  font-weight: 600;
  color: var(--profi-muted, #64748b);
  line-height: 1.3;
}
.agg-more-tile--danger .agg-more-tile-title {
  color: #b91c1c;
}
.agg-more-tile--danger {
  border-color: #fecaca;
  background: #fff1f2;
}
.agg-more-nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: linear-gradient(135deg, #f43f5e, #e11d48);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  margin-left: 6px;
  vertical-align: middle;
}

@media (min-width: 769px) {
  .mobile-topbar,
  .mobile-bottom-nav {
    display: none !important;
  }
  .agg-more-overlay,
  .agg-more-sheet {
    display: none !important;
  }
  body.agg-more-open {
    overflow: auto;
  }
}

body {
  background: #F5F7FA;
}

.profi-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(31,41,55,0.06);
  margin-bottom: 16px;
  padding: 16px;
  color: #1F2937;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.profi-btn {
  background: var(--profi-primary);
  color: #fff;
  border-radius: 10px;
  padding: 12px 20px;
  font-size: 1rem;
  border: none;
  margin-top: 8px;
  width: 100%;
}

.profi-bottom-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: #fff;
  box-shadow: 0 -2px 8px rgba(31,41,55,0.06);
  display: flex;
  justify-content: space-around;
  padding: 8px 0;
  z-index: 100;
}

.profi-bottom-nav a {
  color: var(--profi-primary);
  font-size: 22px;
  padding: 0 12px;
}

@media (min-width: 481px) {
  .profi-bottom-nav { display: none; }
}

/* ══════════════════════════════════════════════════════════════
   MOBILE REDESIGN v2 — Unified Design Language
   Applies hero/card aesthetic to ALL sections
   (matches dashboard & aggregator homepage redesign style)
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ── Top-level cabinet sections: transparent shell on mobile ──
     Page bg shows through; white cards are .section-card / .dash-card / etc.
     (Include all master sections — missing IDs caused double «карточки» + лишний padding.) */
  #sec-dashboard,
  #sec-feed,
  #sec-myorders,
  #sec-profile,
  #sec-chat,
  #sec-stats,
  #sec-reports,
  #sec-notifications,
  #sec-settings,
  #sec-finances,
  #sec-wallet,
  #sec-referral,
  #sec-orders,
  #sec-masters,
  #sec-finance {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin-bottom: 0 !important;
  }

  /* ── Page header: bold & minimal ── */
  .page-head {
    padding: 4px 0 14px !important;
    border-bottom: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
  }

  .page-title {
    font-family: 'Manrope', sans-serif !important;
    font-size: 21px !important;
    font-weight: 800 !important;
    letter-spacing: -.025em !important;
    color: #1e293b !important;
    margin: 0 !important;
    line-height: 1.2 !important;
  }

  /* ── Section cards: refined white card style ── */
  .section-card,
  .table-card {
    border-radius: 16px !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 1px 5px rgba(15,23,42,.06) !important;
    padding: 16px !important;
    margin-bottom: 12px !important;
    overflow: hidden;
  }

  .section-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding-bottom: 12px !important;
    margin-bottom: 12px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
  }

  .section-head h2 {
    font-family: 'Manrope', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: -.01em !important;
    color: #1e293b !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
  }

  /* ── Verify gate overlay: friendly card on mobile ──
     Override the dark overlay (rgba(15,23,42,.75)) with
     a light, accessible card.                          */
  .verify-gate-overlay.active {
    background: linear-gradient(135deg, #f8fafc, #f1f5f9) !important;
    border: 2px dashed #cbd5e1 !important;
    border-radius: 16px !important;
    backdrop-filter: none !important;
    padding: 28px 18px !important;
    margin: 0 0 14px !important;
    min-height: 0 !important;
  }

  .verify-gate-overlay .gate-icon {
    font-size: 0 !important;            /* hide plain emoji icon */
    width: 52px !important;
    height: 52px !important;
    background: linear-gradient(135deg, #6366f1, #818cf8) !important;
    border-radius: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto 14px !important;
    box-shadow: 0 4px 14px rgba(99,102,241,.25) !important;
  }

  .verify-gate-overlay .gate-icon i {
    font-size: 20px !important;
    color: #fff !important;
  }

  .verify-gate-overlay .gate-title {
    font-family: 'Manrope', sans-serif !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #1e293b !important;
    margin: 0 0 8px !important;
  }

  .verify-gate-overlay .gate-sub {
    font-size: 13px !important;
    color: #64748b !important;
    line-height: 1.55 !important;
    margin: 0 0 16px !important;
    max-width: none !important;
  }

  .verify-gate-overlay .gate-btn {
    padding: 10px 22px !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, #6366f1, #818cf8) !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    border: none !important;
    cursor: pointer !important;
    box-shadow: 0 4px 14px rgba(99,102,241,.3) !important;
    transition: transform .12s !important;
  }

  .verify-gate-overlay .gate-btn:active {
    transform: scale(.96) !important;
  }

  /* ── Live indicator in feed header ── */
  .oft-live-indicator {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    color: #10b981 !important;
    background: rgba(16,185,129,.1) !important;
    padding: 3px 8px !important;
    border-radius: 99px !important;
    vertical-align: middle !important;
    margin-left: 6px !important;
  }

  /* ── Order feed cards: tap feedback ── */
  .oft-card {
    border-radius: 14px !important;
    border-color: #e2e8f0 !important;
    transition: transform .12s, box-shadow .12s !important;
  }

  .oft-card:active {
    transform: scale(.985) !important;
    box-shadow: 0 2px 10px rgba(15,23,42,.09) !important;
  }

  /* ── My orders list items ── */
  .orders-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  .order-item {
    border-radius: 14px !important;
    border: 1px solid #e2e8f0 !important;
    padding: 14px !important;
    box-shadow: 0 1px 4px rgba(15,23,42,.05) !important;
    transition: transform .12s !important;
  }

  .order-item:active {
    transform: scale(.985) !important;
  }

  /* ── Section tabs (My Orders, Settings): pill row ── */
  .section-tabs {
    display: flex !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    scrollbar-width: none !important;
    gap: 6px !important;
    padding-bottom: 4px !important;
    margin-bottom: 12px !important;
  }

  .section-tabs::-webkit-scrollbar { display: none !important; }

  .tab-btn {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    padding: 7px 14px !important;
    border-radius: 99px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    font-family: 'Manrope', sans-serif !important;
    border: 1.5px solid #e2e8f0 !important;
    background: #fff !important;
    color: #64748b !important;
    cursor: pointer !important;
    transition: all .15s !important;
  }

  .tab-btn.active {
    background: #6366f1 !important;
    color: #fff !important;
    border-color: #6366f1 !important;
    box-shadow: 0 2px 8px rgba(99,102,241,.25) !important;
  }

  /* ── Notifications: card-style list ── */
  .notif-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  .notif-item {
    border-radius: 12px !important;
    padding: 12px 14px !important;
    background: #f8fafc !important;
    border: 1px solid #f1f5f9 !important;
    transition: background .15s !important;
  }

  .notif-item:active {
    background: #f1f5f9 !important;
  }

  .notif-item.unread,
  .notif-item[data-unread="true"] {
    background: rgba(99,102,241,.04) !important;
    border-color: rgba(99,102,241,.18) !important;
  }

  /* ── Finance: metric grid as 2×2 stat-tiles ── */
  #sec-finances .metrics-grid,
  #sec-finance .metrics-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    margin-bottom: 14px !important;
  }

  #sec-finances .metric-card,
  #sec-finance .metric-card {
    border-radius: 14px !important;
    padding: 14px 12px !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 1px 4px rgba(15,23,42,.05) !important;
  }

  .metric-icon {
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 10px !important;
    font-size: 15px !important;
  }

  .metric-value {
    font-family: 'Manrope', sans-serif !important;
    font-weight: 800 !important;
    letter-spacing: -.02em !important;
  }

  /* ── Settings: compact spacing ── */
  #sec-settings .section-card {
    margin-bottom: 10px !important;
  }

  /* ── Global verify bar ── */
  #globalVerifyBar {
    margin: 0 0 10px !important;
    border-radius: 14px !important;
    padding: 12px 14px !important;
    font-size: 13px !important;
  }

  /* ── Aggregator: amber gate variant ── */
  #sec-orders .verify-gate-overlay.active,
  #sec-masters .verify-gate-overlay.active {
    background: linear-gradient(135deg, #fffbeb, #fef3c7) !important;
    border-color: rgba(245,158,11,.35) !important;
  }

  #sec-orders .verify-gate-overlay .gate-icon,
  #sec-masters .verify-gate-overlay .gate-icon {
    background: linear-gradient(135deg, #f59e0b, #d97706) !important;
    box-shadow: 0 4px 14px rgba(245,158,11,.25) !important;
  }

  #sec-orders .verify-gate-overlay .gate-btn,
  #sec-masters .verify-gate-overlay .gate-btn {
    background: linear-gradient(135deg, #f59e0b, #d97706) !important;
    box-shadow: 0 4px 14px rgba(245,158,11,.3) !important;
  }

  /* ── Aggregator filter chips ── */
  .agg-order-filters,
  .agg-filter-chip-row {
    display: flex !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    scrollbar-width: none !important;
    gap: 6px !important;
    padding-bottom: 4px !important;
  }

  .agg-order-filters::-webkit-scrollbar,
  .agg-filter-chip-row::-webkit-scrollbar { display: none !important; }

  .agg-filter-btn {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    padding: 7px 14px !important;
    border-radius: 99px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    border: 1.5px solid #e2e8f0 !important;
    background: #fff !important;
    color: #64748b !important;
    cursor: pointer !important;
    transition: all .15s !important;
  }

  .agg-filter-btn.active,
  .agg-filter-btn[aria-pressed="true"] {
    background: #f59e0b !important;
    color: #fff !important;
    border-color: #f59e0b !important;
    box-shadow: 0 2px 8px rgba(245,158,11,.25) !important;
  }

  /* ── Status badges: pill style ── */
  .badge,
  .status-badge {
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 3px 10px !important;
    border-radius: 99px !important;
    white-space: nowrap !important;
    font-family: 'Manrope', sans-serif !important;
  }

  /* ── Page-level eyebrow for feed section removed ──
     Was causing duplicate "ЛЕНТА ЗАКАЗОВ" text above the title.
     The mobile topbar already shows the section name.           */
  [data-feed-header]::before {
    display: none;
  }

  /* ── Hide feed section title text on mobile (topbar already shows it) ──
     Keep the LIVE indicator visible                                      */
  [data-feed-header] {
    font-size: 0 !important;
    line-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  [data-feed-header] .oft-live-indicator {
    font-size: 13px;
    line-height: normal;
  }
  .page-head:has([data-feed-header]) {
    margin-bottom: 4px;
  }

  /* ── Card active / pressed state for agg-cards ── */
  .agg-card {
    transition: transform .12s !important;
  }

  .agg-card:active {
    transform: scale(.99) !important;
  }

  /* ── Section form groups: lighter on mobile ── */
  .form-group {
    margin-bottom: 14px !important;
  }

  .form-label {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #64748b !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
    margin-bottom: 6px !important;
  }

  .form-input {
    border-radius: 12px !important;
    border: 1.5px solid #e2e8f0 !important;
    padding: 11px 14px !important;
    font-size: 14px !important;
    transition: border-color .15s, box-shadow .15s !important;
  }

  }

  .form-input:focus {
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 3px rgba(99,102,241,.12) !important;
    outline: none !important;
  }

}

/* ══════════════════════════════════════════════════════════════
   MOBILE CHAT SECTION — Full redesign
   Hero + search + tabs + list items + bubbles + input
   ══════════════════════════════════════════════════════════════ */

/* ── Chat hero: only visible on mobile ── */
.chat-m-hero { display: none; }

/* ── Toolbar (tabs + search) visible on all screens ── */
.chat-m-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.chat-m-search-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f1f5f9;
  border-radius: 12px;
  padding: 0 12px;
  min-width: 160px;
  max-width: 320px;
  flex: 0 1 260px;
}

/* На десктопе toolbar не нужен — есть свой header */
@media (min-width: 769px) {
  .chat-desktop-head { display: block; }
}

@media (max-width: 768px) {

  /* ── Chat header: compact messenger-style ── */
  .chat-desktop-head { display: none !important; }
  .chat-m-hero {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 4px 2px 14px !important;
    margin-bottom: 0 !important;
  }

  .chat-m-hero-left {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
  }

  .chat-m-hero-icon {
    width: 38px !important;
    height: 38px !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, #6366f1, #818cf8) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 16px !important;
    color: #fff !important;
    flex-shrink: 0 !important;
    box-shadow: 0 4px 12px rgba(99,102,241,.3) !important;
  }

  .chat-m-eyebrow {
    font-size: 10px !important;
    font-weight: 600 !important;
    color: #94a3b8 !important;
    text-transform: uppercase !important;
    letter-spacing: .07em !important;
    margin-bottom: 1px !important;
  }

  .chat-m-title {
    font-family: 'Manrope', sans-serif !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #1e293b !important;
    margin: 0 !important;
    letter-spacing: -.02em !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
  }

  .chat-m-unread {
    background: #ef4444 !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    padding: 2px 7px !important;
    border-radius: 99px !important;
    white-space: nowrap !important;
    font-family: 'Manrope', sans-serif !important;
  }

  .chat-m-hero-desc {
    margin: 5px 0 0 !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    color: #64748b !important;
    font-weight: 500 !important;
    max-width: 100% !important;
  }

  .chat-m-hero-right {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 0 !important;
  }

  .chat-m-hero-stat-val {
    display: block !important;
    font-family: 'Manrope', sans-serif !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    color: #6366f1 !important;
    line-height: 1 !important;
  }

  .chat-m-hero-stat-lbl {
    font-size: 9px !important;
    color: #94a3b8 !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: .06em !important;
  }

  /* ── Toolbar: search и tabs ─── stacked ── */
  .chat-m-toolbar {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
  }

  /* ── Search bar ── */
  .chat-m-search-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: #f1f5f9 !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 0 12px !important;
    flex: none !important;
    width: 100% !important;
    transition: background .15s, box-shadow .15s !important;
    margin-bottom: 0 !important;
  }

  .chat-m-search-wrap:focus-within {
    background: #fff !important;
    box-shadow: 0 0 0 1.5px #6366f1 !important;
  }

  .chat-m-search-icon {
    color: #94a3b8 !important;
    font-size: 12px !important;
    flex-shrink: 0 !important;
  }

  .chat-m-search-input {
    flex: 1 !important;
    border: none !important;
    outline: none !important;
    background: transparent !important;
    font-size: 13px !important;
    font-family: 'Manrope', sans-serif !important;
    color: #1e293b !important;
    padding: 10px 0 !important;
  }

  .chat-m-search-input::placeholder {
    color: #94a3b8 !important;
    font-weight: 500 !important;
  }

  .chat-m-search-clear {
    background: none !important;
    border: none !important;
    color: #94a3b8 !important;
    cursor: pointer !important;
    font-size: 11px !important;
    padding: 3px !important;
    border-radius: 5px !important;
    flex-shrink: 0 !important;
  }

  /* ── Tab switcher: full-width row of pills ── */
  .chat-tab-switcher {
    display: flex !important;
    gap: 4px !important;
    padding: 3px !important;
    background: #f1f5f9 !important;
    border-radius: 12px !important;
    margin-bottom: 0 !important;
    flex-shrink: 0 !important;
    width: 100% !important;
  }

  .chat-tab-btn {
    flex: 1 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    padding: 8px 6px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 9px !important;
    cursor: pointer !important;
    color: #64748b !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    font-family: 'Manrope', sans-serif !important;
    transition: all .18s ease !important;
    position: relative !important;
    white-space: nowrap !important;
  }

  .chat-tab-btn i {
    font-size: 12px !important;
  }

  .chat-tab-btn:active {
    transform: scale(.93) !important;
  }

  .chat-tab-btn.active {
    background: #fff !important;
    color: #6366f1 !important;
    box-shadow: 0 1px 6px rgba(15,23,42,.1) !important;
  }

  .chat-tab-btn[data-chat-tab="news"].active {
    color: #d97706 !important;
  }

  .chat-tab-btn[data-chat-tab="support"].active {
    color: #7c3aed !important;
  }

  .chat-tab-icon { display: none !important; }
  .chat-tab-desc { display: none !important; }

  .chat-tab-label {
    font-size: 12px !important;
    font-weight: 800 !important;
  }

  /* ── Global chat fix: fill conv-open container ── */
  .chat-split.conv-open #gcConversation {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .chat-split.conv-open #gcMessages {
    flex: 1 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
  }

  /* ── Chat split: proper mobile layout ── */
  .chat-split {
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    min-height: 0 !important;
    max-height: none !important;
    gap: 0 !important;
  }

  /* Sidebar: chat list ── */
  .chat-split-sidebar {
    background: #fff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    margin-bottom: 0 !important;
    max-height: none !important;
    border-bottom: none !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }

  .chat-split.conv-open .chat-split-sidebar {
    display: none !important;
  }

  .chat-sidebar-head {
    padding: 14px 16px 12px !important;
    background: #fff !important;
    border-bottom: 1px solid #f1f5f9 !important;
  }

  .chat-sidebar-title {
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: .06em !important;
    color: #94a3b8 !important;
    text-transform: uppercase !important;
  }

  .chat-sidebar-refresh {
    width: 28px !important;
    height: 28px !important;
    border-radius: 8px !important;
    background: #f1f5f9 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 12px !important;
  }

  /* ── Chat order items: card-style ── */
  .chat-order-item {
    padding: 14px 16px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    transition: background .1s !important;
    align-items: flex-start !important;
  }

  .chat-order-item:active {
    background: rgba(99,102,241,.06) !important;
  }

  .chat-order-av {
    width: 46px !important;
    height: 46px !important;
    border-radius: 12px !important;
    font-size: 22px !important;
    flex-shrink: 0 !important;
    box-shadow: 0 2px 8px rgba(99,102,241,.15) !important;
  }

  .chat-order-name {
    font-size: 14px !important;
    font-weight: 700 !important;
    font-family: 'Manrope', sans-serif !important;
  }

  .chat-order-status {
    font-size: 10px !important;
    padding: 2px 8px !important;
  }

  .chat-order-tech {
    font-size: 12px !important;
    margin-top: 3px !important;
  }

  .chat-order-unread-badge {
    background: #6366f1 !important;
    min-width: 22px !important;
    height: 22px !important;
    border-radius: 11px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    line-height: 22px !important;
    box-shadow: 0 2px 6px rgba(99,102,241,.35) !important;
  }

  /* ── Main conversation panel: hidden until conv-open ── */
  .chat-split-main {
    display: none !important;
    background: #fff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-top: none !important;
    border-radius: 0 0 16px 16px !important;
  }

  /* Empty state ── */
  .chat-empty-state {
    min-height: 280px !important;
    padding: 32px 24px !important;
    background: linear-gradient(135deg, #f8f9ff, #f3f4ff) !important;
    border-radius: 0 0 16px 16px !important;
  }

  .chat-empty-icon {
    width: 72px !important;
    height: 72px !important;
    border-radius: 20px !important;
    background: linear-gradient(135deg, #6366f1, #818cf8) !important;
    font-size: 30px !important;
    color: #fff !important;
    box-shadow: 0 6px 20px rgba(99,102,241,.3) !important;
  }

  .chat-empty-title {
    font-family: 'Manrope', sans-serif !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    color: #1e293b !important;
    letter-spacing: -.01em !important;
  }

  .chat-empty-sub {
    font-size: 13px !important;
    color: #64748b !important;
    line-height: 1.6 !important;
  }

  /* ── Conversation header ── */
  .chat-conv-header {
    background: #fff !important;
    padding: 12px 14px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    gap: 10px !important;
  }

  .chat-conv-back {
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    background: #f1f5f9 !important;
    border: none !important;
    font-size: 14px !important;
  }

  .chat-conv-av {
    width: 40px !important;
    height: 40px !important;
    border-radius: 12px !important;
    font-size: 18px !important;
    box-shadow: 0 2px 8px rgba(99,102,241,.2) !important;
  }

  .chat-conv-name {
    font-family: 'Manrope', sans-serif !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    letter-spacing: -.01em !important;
  }

  .chat-conv-sub {
    font-size: 11px !important;
    color: #64748b !important;
  }

  /* ── Message bubbles ── */
  .chat-messages {
    padding: 16px 14px !important;
    gap: 10px !important;
    background: #f8f9ff !important;
    flex: 1 !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow-y: auto !important;
  }
  /* В full-screen overlay: #chatMessages тоже flex:1 */
  .chat-split.conv-open #chatMessages {
    flex: 1 !important;
    max-height: none !important;
    min-height: 0 !important;
  }

  .chat-msg {
    max-width: 82% !important;
    padding: 10px 14px !important;
    border-radius: 14px !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    box-shadow: 0 1px 3px rgba(15,23,42,.06) !important;
  }

  .chat-msg.incoming {
    background: #fff !important;
    color: #1e293b !important;
    border-bottom-left-radius: 4px !important;
    border: 1px solid #f1f5f9 !important;
    align-self: flex-start !important;
  }

  .chat-msg.outgoing {
    background: linear-gradient(135deg, #6366f1, #818cf8) !important;
    color: #fff !important;
    border-bottom-right-radius: 4px !important;
    align-self: flex-end !important;
    box-shadow: 0 2px 10px rgba(99,102,241,.25) !important;
    border: none !important;
  }

  .chat-msg-time {
    font-size: 10px !important;
    opacity: .65 !important;
  }

  /* ── Input row: pill style ── */
  .chat-input-row {
    padding: 10px 12px !important;
    background: #fff !important;
    border-top: 1px solid #f1f5f9 !important;
    gap: 8px !important;
    align-items: center !important;
    flex-shrink: 0 !important;
  }

  .chat-input-row input {
    border-radius: 24px !important;
    border: 1.5px solid #e2e8f0 !important;
    padding: 10px 16px !important;
    font-size: 14px !important;
    background: #f8fafc !important;
    transition: border-color .15s, box-shadow .15s !important;
  }

  .chat-input-row input:focus {
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 3px rgba(99,102,241,.1) !important;
    background: #fff !important;
    outline: none !important;
  }

  .chat-send-btn {
    width: 42px !important;
    height: 42px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #6366f1, #818cf8) !important;
    box-shadow: 0 3px 10px rgba(99,102,241,.35) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    transition: transform .12s, box-shadow .12s !important;
  }

  .chat-send-btn:active {
    transform: scale(.9) !important;
    box-shadow: 0 2px 6px rgba(99,102,241,.25) !important;
  }

  /* ── Support form on mobile ── */
  .support-new-card {
    padding: 16px !important;
    border-radius: 16px !important;
    margin-bottom: 14px !important;
  }

  .support-new-hero {
    gap: 12px !important;
    margin-bottom: 14px !important;
  }

  .support-new-icon {
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
    font-size: 18px !important;
  }

  .support-new-title {
    font-family: 'Manrope', sans-serif !important;
    font-size: 15px !important;
    font-weight: 800 !important;
  }

  .support-chips {
    display: flex !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    scrollbar-width: none !important;
    gap: 6px !important;
    padding-bottom: 4px !important;
    margin-bottom: 12px !important;
  }

  .support-chips::-webkit-scrollbar { display: none !important; }

  .support-chip {
    flex-shrink: 0 !important;
    padding: 7px 13px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    border-radius: 99px !important;
  }

  .support-chip.active {
    box-shadow: 0 2px 8px rgba(124,58,237,.3) !important;
  }

  .support-send-btn {
    width: 100% !important;
    justify-content: center !important;
    border-radius: 14px !important;
    padding: 13px 22px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    letter-spacing: -.01em !important;
  }

  .support-ticket-card {
    border-radius: 14px !important;
    padding: 12px 14px !important;
  }

  .support-conv-wrap {
    border-radius: 16px !important;
    border-color: #e2e8f0 !important;
  }

  /* ══════════════════════════════════════════════════════════════
     PROFILE SETTINGS PAGE — v2 mobile redesign
     Full-form UI, no display/edit card duality, clean sections
     ══════════════════════════════════════════════════════════════ */

  /* ── sec-profile: transparent container ── */
  #sec-profile {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
  }

  /* ── Hero outer card ── */
  #sec-profile > div:first-child {
    border-radius: 20px !important;
    overflow: hidden !important;
    margin-bottom: 12px !important;
    box-shadow: 0 6px 28px rgba(99,102,241,.18) !important;
  }

  /* ── Gradient header strip ── */
  #sec-profile > div:first-child > div:first-child {
    padding: 18px 18px 52px !important;
  }
  #sec-profile > div:first-child > div:first-child h1 {
    font-size: 18px !important;
    font-family: 'Manrope', sans-serif !important;
    font-weight: 800 !important;
    margin-bottom: 2px !important;
  }
  #sec-profile > div:first-child > div:first-child p {
    font-size: 11px !important;
    opacity: .75 !important;
  }

  /* ── Avatar + info overlay ── */
  #sec-profile > div:first-child > div:nth-child(2) {
    margin-top: -44px !important;
    padding: 0 16px 12px !important;
    position: relative !important;
    z-index: 3 !important;
  }
  #sec-profile > div:first-child > div:nth-child(2) > div:first-child {
    gap: 12px !important;
    flex-wrap: nowrap !important;
    align-items: flex-end !important;
  }

  /* ── Avatar circle: prominent, tap-to-change ── */
  #avatarCircle {
    width: 76px !important;
    height: 76px !important;
    border-radius: 20px !important;
    border-width: 3.5px !important;
    font-size: 26px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 18px rgba(99,102,241,.32) !important;
    flex-shrink: 0 !important;
    position: relative !important;
  }
  #avatarCircle .profile-avatar-overlay {
    opacity: .3 !important;
    border-radius: 18px !important;
  }
  #avatarCircle:active .profile-avatar-overlay {
    opacity: .8 !important;
  }
  #avatarImg {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 18px !important;
  }

  /* ── Hide "Сменить фото" button — tap avatar ── */
  #avatarBtn { display: none !important; }

  /* ── Name block ── */
  #account-fio {
    font-size: 16px !important;
    font-weight: 800 !important;
    font-family: 'Manrope', sans-serif !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.25 !important;
  }
  #account-phone, #account-email { font-size: 11px !important; }

  /* Hide bullet separator */
  #sec-profile [style*="color:var(--border)"] { display: none !important; }

  /* Phone/email: stack on mobile */
  #sec-profile > div:first-child [style*="display:flex;flex-wrap:wrap;gap:6px;margin-top:6px"] {
    flex-direction: column !important;
    gap: 2px !important;
    margin-top: 4px !important;
  }

  /* Status badges: compact */
  #account-status-badge, #verifyStatusBadge, #onlineStatusText {
    font-size: 10px !important;
    padding: 3px 8px !important;
  }
  #sec-profile > div:first-child [style*="display:flex;flex-wrap:wrap;gap:6px;margin-top:8px"] {
    gap: 5px !important;
    margin-top: 5px !important;
  }

  /* Reputation bar: tighter */
  #hero-rating-badge {
    font-size: 9px !important;
    padding: 2px 5px !important;
    border-radius: 6px !important;
  }

  /* ── Verification panel ── */
  #masterVerificationPanel {
    border-radius: 16px !important;
    margin-bottom: 10px !important;
    padding: 14px 16px !important;
    box-shadow: 0 1px 5px rgba(15,23,42,.06) !important;
  }
  #verificationChecklist {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  /* ── Profile tab pills ── */
  #profileTabsBar {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    scrollbar-width: none !important;
    gap: 6px !important;
    padding-bottom: 4px !important;
    margin-bottom: 12px !important;
  }
  #profileTabsBar::-webkit-scrollbar { display: none !important; }

  .profile-tab {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    padding: 8px 14px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    border-radius: 99px !important;
    border: 1.5px solid #e2e8f0 !important;
    background: #fff !important;
    color: #64748b !important;
    cursor: pointer !important;
    transition: all .15s !important;
    font-family: 'Manrope', sans-serif !important;
  }
  .profile-tab.active {
    background: #6366f1 !important;
    border-color: #6366f1 !important;
    color: #fff !important;
    box-shadow: 0 2px 10px rgba(99,102,241,.3) !important;
  }

  /* ══ ptab-info: clean settings form layout ══ */

  /* Hide duplicate display cards */
  #profileInfoCards { display: none !important; }

  /* Hide both edit buttons — form always open */
  #profileEditBtn { display: none !important; }
  #profileEditBtnBottom { display: none !important; }

  /* Transparent section card wrapper */
  #ptab-info .section-card.profile-info-card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  /* Hide section head (title + edit btn) */
  #ptab-info .section-card.profile-info-card > .section-head {
    display: none !important;
  }

  /* Hide collapsible toggle, always show content */
  #ptab-info .mobile-collapsible-head { display: none !important; }
  #ptab-info .mobile-collapsible-content { display: block !important; }

  /* Infobanner: rounded card */
  #ptab-info > div[style*="display:flex;align-items:center;gap:10px;padding:11px"] {
    border-radius: 14px !important;
    margin-bottom: 12px !important;
  }

  /* Each form sub-block → white card */
  #ptab-info .mobile-collapsible-content > div {
    background: #fff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 16px !important;
    padding: 16px !important;
    margin-bottom: 10px !important;
    box-shadow: 0 1px 6px rgba(15,23,42,.05) !important;
  }

  /* Sub-section header row (icon + label) */
  #ptab-info .mobile-collapsible-content > div > div:first-child {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding-bottom: 13px !important;
    margin-bottom: 14px !important;
    border-bottom: 1px solid #f1f5f9 !important;
  }

  /* Icon square */
  #ptab-info .mobile-collapsible-content > div > div:first-child > span:first-child {
    width: 32px !important;
    height: 32px !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    flex-shrink: 0 !important;
  }

  /* Section label */
  #ptab-info .mobile-collapsible-content > div > div:first-child > span:nth-child(2) {
    font-size: 14px !important;
    font-weight: 700 !important;
    font-family: 'Manrope', sans-serif !important;
    color: #1e293b !important;
    flex: 1 !important;
    min-width: 0 !important;
  }

  /* Hide "* обязательные поля" label from header on mobile */
  #ptab-info .mobile-collapsible-content > div > div:first-child > span[style*="color:var(--danger)"] {
    display: none !important;
  }

  /* Form labels */
  #ptab-info .form-label {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #64748b !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
    margin-bottom: 7px !important;
    display: block !important;
  }

  /* Form inputs */
  #ptab-info .form-input {
    border-radius: 12px !important;
    border: 1.5px solid #e2e8f0 !important;
    padding: 12px 14px !important;
    font-size: 14px !important;
    background: #f8fafc !important;
    color: #1e293b !important;
    min-height: 46px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    transition: border-color .15s, box-shadow .15s !important;
  }
  #ptab-info .form-input:focus {
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 3px rgba(99,102,241,.1) !important;
    background: #fff !important;
    outline: none !important;
  }
  #ptab-info .form-input[readonly] {
    background: #f1f5f9 !important;
    color: #94a3b8 !important;
    cursor: not-allowed !important;
  }

  /* Icons inside inputs */
  #ptab-info .form-group [style*="position:absolute"] i {
    font-size: 13px !important;
  }

  /* Warranty composite field */
  #ptab-info [style*="display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:10px"] {
    border-radius: 12px !important;
    background: #f8fafc !important;
    border: 1.5px solid #e2e8f0 !important;
    padding: 10px 14px !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
  }

  /* Profile form grid: 1 col on mobile */
  .profile-form-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* Save button: full width, accent */
  #ptab-info .btn-primary[onclick*="saveProfileInfo"] {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    padding: 15px 20px !important;
    font-size: 15px !important;
    border-radius: 14px !important;
    margin-top: 6px !important;
    font-family: 'Manrope', sans-serif !important;
    font-weight: 800 !important;
    letter-spacing: -.01em !important;
    box-shadow: 0 4px 18px rgba(59,130,246,.35) !important;
  }

  /* ── ptab-spec: specializations & brands ── */
  #ptab-spec .profile-info-grid {
    gap: 10px !important;
  }
  #ptab-spec .section-card.profile-info-card {
    border-radius: 16px !important;
    padding: 16px !important;
    margin-bottom: 0 !important;
    border: 1.5px solid #e2e8f0 !important;
    box-shadow: 0 1px 5px rgba(15,23,42,.05) !important;
  }
  .spec-chips {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 7px !important;
  }
  .spec-chip {
    padding: 7px 13px !important;
    border-radius: 10px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    border: 1.5px solid var(--border, #e2e8f0) !important;
    background: var(--card, #fff) !important;
    color: var(--text-secondary, #475569) !important;
    cursor: pointer !important;
    transition: all .15s !important;
    user-select: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
  }
  .spec-chip.selected,
  .spec-chip.active {
    background: rgba(99,102,241,.09) !important;
    border-color: #6366f1 !important;
    color: #4338ca !important;
    font-weight: 700 !important;
    box-shadow: 0 1px 4px rgba(99,102,241,.15) !important;
  }
  .brand-chip.selected {
    background: rgba(245,158,11,.09) !important;
    border-color: #f59e0b !important;
    color: #b45309 !important;
    box-shadow: 0 1px 4px rgba(245,158,11,.15) !important;
  }
  .skill-chip-btn.chip-selected {
    background: rgba(139,92,246,.09) !important;
    border-color: #8b5cf6 !important;
    color: #6d28d9 !important;
    box-shadow: 0 1px 4px rgba(139,92,246,.18) !important;
  }

  /* ── ptab-portfolio ── */
  #ptab-portfolio .section-card.profile-info-card {
    border-radius: 16px !important;
    padding: 14px !important;
    border: 1.5px solid #e2e8f0 !important;
    box-shadow: 0 1px 5px rgba(15,23,42,.05) !important;
  }
  .photo-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .photo-upload-btn {
    border-radius: 12px !important;
    min-height: 90px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
  }

  /* ── ptab-docs ── */
  #ptab-docs .profile-info-grid { gap: 10px !important; }
  #ptab-docs .section-card.profile-info-card {
    border-radius: 16px !important;
    padding: 14px !important;
    border: 1.5px solid #e2e8f0 !important;
    box-shadow: 0 1px 5px rgba(15,23,42,.05) !important;
    overflow-x: hidden !important;
  }

  /* Переключатель «Гражданин РФ / Иностранный гражданин» — не обрезать */
  #docCitizenRF,
  #docCitizenForeign {
    flex: 1 1 0 !important;
    flex-shrink: 1 !important;
    min-width: 0 !important;
    white-space: normal !important;
    line-height: 1.3 !important;
    text-align: center !important;
    padding: 7px 10px !important;
    font-size: 12px !important;
    word-break: break-word !important;
  }

  /* Сетка слотов документов — адаптивная */
  #docBlockRF > div,
  #docBlockForeign > div {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  .doc-upload-slot > div {
    padding: 14px 10px !important;
    border-radius: 12px !important;
  }
  .doc-upload-slot > div .fa-id-card,
  .doc-upload-slot > div .fa-house-user,
  .doc-upload-slot > div .fa-passport,
  .doc-upload-slot > div .fa-file-shield,
  .doc-upload-slot > div .fa-plane-arrival {
    font-size: 22px !important;
    margin-bottom: 6px !important;
  }

  /* Список загруженных документов — не обрезать */
  #docsList > div {
    flex-wrap: nowrap !important;
    min-width: 0 !important;
  }
  #docsList > div > div:nth-child(2) {
    flex: 1 !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }
  #docsList > div > div:nth-child(2) > div:first-child {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Дополнительные документы — форма в одну колонку на очень маленьких экранах */
  @media (max-width: 360px) {
    #ptab-docs [id="docTypeSelect"] ~ div,
    #ptab-docs .section-card:last-child > div > div[style*="grid-template-columns"] {
      grid-template-columns: 1fr !important;
    }
  }

  /* Education/certs collapsible head: keep visible */
  #ptab-docs .mobile-collapsible-head {
    display: flex !important;
    padding: 12px 14px !important;
    background: #f8fafc !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 12px !important;
    margin-top: 10px !important;
  }

  /* ── ptab-reviews ── */
  #ptab-reviews .profile-info-grid { gap: 10px !important; }
  #ptab-reviews .section-card.profile-info-card {
    border-radius: 16px !important;
    margin-bottom: 0 !important;
    border: 1.5px solid #e2e8f0 !important;
    box-shadow: 0 1px 5px rgba(15,23,42,.05) !important;
  }
  .achievement-card {
    border-radius: 12px !important;
    padding: 12px !important;
  }
  .rating-block {
    gap: 16px !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
  }
  .rating-big {
    font-size: 42px !important;
    font-weight: 800 !important;
    font-family: 'Manrope', sans-serif !important;
    color: #f59e0b !important;
    line-height: 1 !important;
  }

}

/* Aggregator: уведомления — empty / error / подпись (все ширины, дублирует mobile-стили) */
.agg-notif-hero-label {
  margin: 4px 0 0;
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
}
.agg-notif-hero-label--muted {
  color: #94a3b8;
}
.agg-notif-empty {
  text-align: center;
  padding: 28px 16px 26px;
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
}
.agg-notif-empty__ico {
  width: 52px;
  height: 52px;
  margin: 0 auto 14px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(99, 102, 241, 0.1);
  color: #6366f1;
  font-size: 22px;
}
.agg-notif-empty__title {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 800;
  color: #0f172a;
  font-family: 'Manrope', sans-serif;
}
.agg-notif-empty__sub {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: #64748b;
  max-width: 360px;
  margin-left: auto;
  margin-right: auto;
}
.agg-notif-error-card {
  text-align: center;
  padding: 22px 16px 20px;
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
}
.agg-notif-error-card__title {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  font-family: 'Manrope', sans-serif;
}
.agg-notif-error-card__sub {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.45;
  color: #64748b;
}
.agg-notif-retry-btn {
  font-size: 13px;
  padding: 8px 16px;
  border-radius: 10px;
}

/* ── Сегментные кнопки «Мои заказы» (мастер) ── */
.mo-segs {
  display: flex;
  gap: 7px;
  padding: 2px 0 14px;
  overflow-x: auto;
  scrollbar-width: none;
}
.mo-segs::-webkit-scrollbar { display: none; }

.mo-seg-btn,
.agg-order-filters .agg-filter-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: 12px !important;
  border: 1.5px solid var(--border, #e5e7eb) !important;
  background: var(--card, #fff) !important;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted, #6b7280) !important;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
  line-height: 1;
  font-family: inherit;
}
.mo-seg-btn:hover,
.agg-order-filters .agg-filter-btn:hover {
  border-color: #a5b4fc !important;
  color: #4338ca !important;
  background: rgba(99,102,241,.04) !important;
}
.mo-seg-btn.active,
.agg-order-filters .agg-filter-btn.active {
  background: linear-gradient(135deg, #4f46e5, #6366f1) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 3px 12px rgba(99,102,241,.3);
}

.mo-seg-cnt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  font-size: 10px;
  font-weight: 800;
  padding: 0 5px;
  border-radius: 9px;
  background: rgba(99,102,241,.1);
  color: #6366f1;
  line-height: 1;
  transition: all .15s;
}
.mo-seg-btn.active .mo-seg-cnt,
.agg-order-filters .agg-filter-btn.active .mo-seg-cnt {
  background: rgba(255,255,255,.25);
  color: #fff;
}

/* Контейнер фильтров агрегатора — горизонтальный скролл как у мастера */
.agg-order-filters {
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
  padding: 2px 0 14px !important;
  margin-bottom: 0 !important;
}
.agg-order-filters::-webkit-scrollbar { display: none; }