html,
  body,
  #allrecords,
  .t-records,
  .t-rec,
  .t396,
  .t396__artboard {
    background: #f6f7f7 !important;
  }

  .t-rec:has(#nomkamo-app-root) {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    background: #f6f7f7 !important;
  }

  #nomkamo-app-root {
    --na-bg: #f6f7f7;
    --na-surface: rgba(255,255,255,.78);
    --na-surface-solid: #ffffff;
    --na-text: #111315;
    --na-muted: #7a7f86;
    --na-soft: #e7e9ec;
    --na-line: rgba(17,19,21,.12);
    --na-line-strong: rgba(17,19,21,.22);
    --na-accent: #cfeaff;
    --na-accent-2: #eaf6ff;
    --na-danger: #9b3030;
    --na-ok: #2f6848;
    --na-radius-xl: 28px;
    --na-radius-lg: 20px;
    --na-radius-md: 14px;

    width: 100vw;
    max-width: 100vw;
    min-height: 100vh;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    background:
      radial-gradient(circle at 82% 12%, rgba(207,234,255,.72), rgba(246,247,247,0) 34%),
      radial-gradient(circle at 8% 88%, rgba(17,19,21,.08), rgba(246,247,247,0) 30%),
      var(--na-bg);
    color: var(--na-text);
    font-family: Arial, Helvetica, sans-serif;
    box-sizing: border-box;
    padding: 18px clamp(18px, 2.2vw, 34px) 34px;
  }

  #nomkamo-app-root *,
  #nomkamo-app-root *::before,
  #nomkamo-app-root *::after {
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif !important;
  }

  #nomkamo-app-root button,
  #nomkamo-app-root input,
  #nomkamo-app-root select,
  #nomkamo-app-root textarea {
    font-family: Arial, Helvetica, sans-serif !important;
  }

  .na-shell {
    width: 100%;
    max-width: none;
    margin: 0 auto;
  }

  .na-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
  }

  .na-logo {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .na-logo-mark {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    background: var(--na-text);
    position: relative;
    overflow: hidden;
  }

  .na-logo-mark::before {
    content: "";
    position: absolute;
    inset: 7px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.78);
  }

  .na-logo-mark::after {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    right: -2px;
    top: -2px;
    border-radius: 999px;
    background: var(--na-accent);
  }

  .na-brand-title {
    font-size: 13px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--na-text);
  }

  .na-brand-subtitle {
    margin-top: 3px;
    font-size: 11px;
    color: var(--na-muted);
  }

  .na-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--na-line);
    background: rgba(255,255,255,.62);
    backdrop-filter: blur(16px);
    border-radius: 999px;
    padding: 8px 11px;
    font-size: 12px;
    color: var(--na-muted);
  }

  .na-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--na-muted);
  }

  .na-status-dot.ok {
    background: var(--na-ok);
  }

  .na-card {
    border: 1px solid var(--na-line);
    background: var(--na-surface);
    backdrop-filter: blur(18px);
    border-radius: var(--na-radius-xl);
    overflow: hidden;
  }

  .na-auth-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(340px, .85fr);
    gap: 18px;
    min-height: calc(100vh - 104px);
  }

  .na-hero {
    padding: clamp(24px, 4vw, 52px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 34px;
    position: relative;
    overflow: hidden;
  }

  .na-hero::after {
    content: "";
    position: absolute;
    right: -160px;
    bottom: -170px;
    width: 420px;
    height: 420px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(207,234,255,.95), rgba(207,234,255,0) 64%);
    pointer-events: none;
  }

  .na-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--na-muted);
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
  }

  .na-kicker::before {
    content: "";
    width: 22px;
    height: 1px;
    background: var(--na-line-strong);
  }

  .na-title {
    margin: 16px 0 0;
    max-width: 720px;
    font-weight: 400;
    letter-spacing: -.065em;
    line-height: .92;
    font-size: clamp(54px, 8vw, 118px);
  }

  .na-title-small {
    margin: 0;
    font-weight: 400;
    letter-spacing: -.05em;
    line-height: .94;
    font-size: clamp(32px, 4.6vw, 58px);
  }

  .na-lead {
    margin: 18px 0 0;
    max-width: 560px;
    color: var(--na-muted);
    font-size: 15px;
    line-height: 1.5;
  }

  .na-hero-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    position: relative;
    z-index: 1;
  }

  .na-mini {
    border: 1px solid var(--na-line);
    background: rgba(255,255,255,.58);
    border-radius: 18px;
    padding: 14px;
    min-height: 106px;
  }

  .na-mini-label {
    color: var(--na-muted);
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
  }

  .na-mini-value {
    margin-top: 20px;
    font-size: 17px;
    letter-spacing: -.025em;
  }

  .na-auth-card {
    padding: 18px;
    background: rgba(255,255,255,.92);
  }

  .na-auth-inner {
    height: 100%;
    border: 1px solid var(--na-line);
    border-radius: 24px;
    padding: 22px;
    background:
      linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.96));
  }

  .na-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding: 5px;
    border: 1px solid var(--na-line);
    background: #f5f6f6;
    border-radius: 999px;
    margin: 18px 0;
  }

  .na-tab {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--na-muted);
    border-radius: 999px;
    padding: 10px 12px;
    cursor: pointer;
    font-size: 12px;
    transition: .18s ease;
  }

  .na-tab.active {
    background: var(--na-text);
    color: #fff;
  }

  .na-form,
  .na-form-grid {
    display: grid;
    gap: 12px;
  }

  .na-field {
    display: grid;
    gap: 6px;
  }

  .na-field label {
    color: var(--na-muted);
    font-size: 11px;
  }

  .na-input,
  .na-select,
  .na-textarea {
    width: 100%;
    border: 1px solid var(--na-line);
    background: #fff;
    color: var(--na-text);
    border-radius: 14px;
    padding: 12px 13px;
    outline: none;
    font-size: 13px;
    transition: .16s ease;
  }

  .na-textarea {
    min-height: 92px;
    resize: vertical;
    line-height: 1.45;
  }

  .na-textarea.tall {
    min-height: 132px;
  }

  .na-input:focus,
  .na-select:focus,
  .na-textarea:focus {
    border-color: var(--na-text);
    box-shadow: 0 0 0 4px rgba(207,234,255,.55);
  }

  .na-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 4px;
  }

  .na-btn {
    appearance: none;
    border: 1px solid var(--na-text);
    background: var(--na-text);
    color: #fff;
    border-radius: 999px;
    padding: 11px 15px;
    cursor: pointer;
    font-size: 12px;
    line-height: 1.1;
    transition: .16s ease;
  }

  .na-btn:hover {
    transform: translateY(-1px);
  }

  .na-btn.secondary {
    background: #fff;
    color: var(--na-text);
    border-color: var(--na-line);
  }

  .na-btn.ghost {
    background: transparent;
    color: var(--na-muted);
    border-color: transparent;
  }

  .na-btn:disabled {
    opacity: .55;
    cursor: wait;
    transform: none;
  }

  .na-alert {
    display: none;
    border: 1px solid var(--na-line);
    background: #fff;
    color: var(--na-muted);
    border-radius: 16px;
    padding: 12px 13px;
    font-size: 13px;
    line-height: 1.4;
    margin-top: 14px;
  }

  .na-alert.show {
    display: block;
  }

  .na-alert.ok {
    border-color: rgba(47,104,72,.28);
    color: var(--na-ok);
    background: rgba(47,104,72,.06);
  }

  .na-alert.bad {
    border-color: rgba(155,48,48,.28);
    color: var(--na-danger);
    background: rgba(155,48,48,.06);
  }

  .na-dashboard {
    display: none;
  }

  .na-dashboard.active {
    display: block;
  }

  .na-auth-screen.hidden {
    display: none;
  }

  .na-dash-grid {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
  }

  .na-dash-grid.collapsed {
    grid-template-columns: 66px minmax(0, 1fr);
  }

  .na-sidebar {
    padding: 14px;
    position: sticky;
    top: 18px;
    transition: .16s ease;
  }

  .na-user-box {
    border: 1px solid var(--na-line);
    background: #fff;
    border-radius: 20px;
    padding: 14px;
    margin-bottom: 12px;
  }

  .na-user-name {
    font-size: 15px;
    letter-spacing: -.02em;
    color: var(--na-text);
    overflow-wrap: anywhere;
  }

  .na-user-email {
    margin-top: 5px;
    font-size: 12px;
    color: var(--na-muted);
    overflow-wrap: anywhere;
  }

  .na-collapse-btn {
    width: 100%;
    margin-bottom: 10px;
  }

  .na-dash-grid.collapsed .na-user-box,
  .na-dash-grid.collapsed .na-sidebar-text,
  .na-dash-grid.collapsed .na-nav span,
  .na-dash-grid.collapsed .na-sidebar-actions-label {
    display: none;
  }

  .na-dash-grid.collapsed .na-sidebar {
    padding: 10px;
  }

  .na-dash-grid.collapsed .na-nav button {
    text-align: center;
    padding: 11px 8px;
  }

  .na-nav {
    display: grid;
    gap: 6px;
  }

  .na-nav button {
    appearance: none;
    border: 1px solid transparent;
    background: transparent;
    color: var(--na-muted);
    border-radius: 14px;
    padding: 11px 12px;
    text-align: left;
    cursor: pointer;
    font-size: 13px;
    transition: .16s ease;
  }

  .na-nav button.active,
  .na-nav button:hover {
    background: #fff;
    border-color: var(--na-line);
    color: var(--na-text);
  }

  .na-main {
    display: grid;
    gap: 18px;
    min-width: 0;
  }

  .na-panel {
    border: 1px solid var(--na-line);
    background: rgba(255,255,255,.86);
    backdrop-filter: blur(18px);
    border-radius: var(--na-radius-xl);
    padding: clamp(16px, 2vw, 24px);
    min-width: 0;
  }

  .na-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 18px;
  }

  .na-panel-title {
    margin: 0;
    font-size: clamp(24px, 2.6vw, 38px);
    line-height: 1;
    letter-spacing: -.055em;
    font-weight: 400;
  }

  .na-panel-subtitle {
    margin-top: 9px;
    color: var(--na-muted);
    font-size: 14px;
    line-height: 1.45;
    max-width: 680px;
  }

  .na-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--na-line);
    background: var(--na-accent-2);
    border-radius: 999px;
    padding: 8px 10px;
    font-size: 11px;
    color: var(--na-text);
    white-space: nowrap;
  }

  .na-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
  }

  .na-stat {
    border: 1px solid var(--na-line);
    background: #fff;
    border-radius: 18px;
    padding: 15px;
    min-height: 106px;
  }

  .na-stat span {
    display: block;
    color: var(--na-muted);
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
  }

  .na-stat strong {
    display: block;
    margin-top: 20px;
    font-weight: 400;
    font-size: 28px;
    letter-spacing: -.04em;
  }

  .na-soon-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 10px;
  }

  .na-soon {
    border: 1px solid var(--na-line);
    background: #fff;
    border-radius: 18px;
    padding: 15px;
    min-height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .na-soon h3 {
    margin: 0;
    font-size: 18px;
    line-height: 1.05;
    letter-spacing: -.035em;
    font-weight: 400;
  }

  .na-soon p {
    margin: 12px 0 0;
    color: var(--na-muted);
    font-size: 13px;
    line-height: 1.4;
  }

  .na-soon small {
    color: var(--na-muted);
    font-size: 11px;
  }

  .na-workspace {
    display: grid;
    grid-template-columns: minmax(190px, 260px) minmax(0, 1fr);
    gap: 14px;
    align-items: start;
  }

  .na-component-list-panel {
    border: 1px solid var(--na-line);
    background: rgba(255,255,255,.72);
    border-radius: 22px;
    padding: 10px;
    min-width: 0;
  }

  .na-component-card-panel {
    border: 1px solid var(--na-line);
    background: #fff;
    border-radius: 22px;
    padding: 16px;
    min-width: 0;
  }

  .na-toolbar {
    display: grid;
    gap: 8px;
    margin-bottom: 12px;
  }

  .na-list-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 7px;
  }

  .na-list-head small {
    color: var(--na-muted);
    font-size: 12px;
  }

  .na-family-group {
    display: grid;
    gap: 3px;
    margin-bottom: 8px;
  }

  .na-family-title {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--na-muted);
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 5px 4px 1px;
  }

  .na-family-dot {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    border: 1px solid rgba(17,19,21,.14);
    background: var(--na-accent);
    flex: 0 0 auto;
  }

  .na-component-row {
    width: 100%;
    appearance: none;
    border: 1px solid transparent;
    background: transparent;
    color: var(--na-text);
    text-align: left;
    border-radius: 11px;
    padding: 6px 9px;
    font-size: 13px;
    line-height: 1.15;
    cursor: pointer;
    overflow-wrap: anywhere;
  }

  .na-component-row:hover,
  .na-component-row.active {
    background: #fff;
    border-color: var(--na-line);
  }

  .na-component-row.active {
    background: var(--na-accent-2);
  }

  .na-empty {
    border: 1px dashed var(--na-line-strong);
    background: rgba(255,255,255,.56);
    border-radius: 18px;
    padding: 22px;
    text-align: center;
    color: var(--na-muted);
    font-size: 14px;
    line-height: 1.45;
  }

  .na-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .na-row3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
  }

  .na-section-title {
    margin: 18px 0 10px;
    padding-top: 14px;
    border-top: 1px solid var(--na-line);
    color: var(--na-muted);
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
  }

  .na-detail-title {
    margin: 0;
    font-size: clamp(34px, 4vw, 64px);
    line-height: .92;
    letter-spacing: -.06em;
    font-weight: 400;
  }

  .na-detail-subtitle {
    margin: 8px 0 0;
    color: var(--na-muted);
    font-size: 14px;
    line-height: 1.45;
  }

  .na-detail-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-top: 16px;
  }

  .na-detail {
    border: 1px solid var(--na-line);
    background: #f9fafa;
    border-radius: 14px;
    padding: 11px;
    min-height: 70px;
  }

  .na-detail span {
    display: block;
    color: var(--na-muted);
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 7px;
  }

  .na-detail div {
    font-size: 14px;
    color: var(--na-text);
    overflow-wrap: anywhere;
  }

  .na-text-block {
    border: 1px solid var(--na-line);
    background: #fff;
    border-radius: 16px;
    padding: 13px;
    color: var(--na-text);
    font-size: 14px;
    line-height: 1.45;
    overflow-wrap: anywhere;
  }

  .na-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
  }

  .na-pill {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--na-line);
    background: #f7f8f8;
    border-radius: 999px;
    padding: 6px 9px;
    font-size: 11px;
    color: var(--na-muted);
    white-space: nowrap;
  }

  .na-family-create {
    border: 1px solid var(--na-line);
    background: #f9fafa;
    border-radius: 18px;
    padding: 12px;
    display: grid;
    gap: 8px;
    margin-bottom: 12px;
  }
  .na-family-manager {
    border: 1px solid var(--na-line);
    background: #fff;
    border-radius: 18px;
    padding: 14px;
    display: grid;
    gap: 12px;
  }

  .na-family-list {
    display: grid;
    gap: 8px;
  }

  .na-family-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border: 1px solid var(--na-line);
    background: #f9fafa;
    border-radius: 14px;
    padding: 10px 11px;
    font-size: 13px;
  }

  .na-check-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
  }

  .na-check {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid var(--na-line);
    background: #fff;
    border-radius: 999px;
    padding: 8px 10px;
    font-size: 12px;
    cursor: pointer;
  }

  .na-check input {
    margin: 0;
  }

  .na-loader {
    display: none;
    color: var(--na-muted);
    font-size: 12px;
  }

  .na-loader.show {
    display: inline;
  }

  .na-hidden {
    display: none !important;
  }

  @media (max-width: 1100px) {
    .na-detail-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 980px) {
    #nomkamo-app-root {
      padding: 14px;
    }

    .na-auth-layout,
    .na-dash-grid,
    .na-dash-grid.collapsed,
    .na-workspace {
      grid-template-columns: 1fr;
    }

    .na-sidebar {
      position: static;
    }

    .na-stats,
    .na-soon-grid,
    .na-hero-grid,
    .na-row,
    .na-row3,
    .na-detail-grid {
      grid-template-columns: 1fr;
    }

    .na-auth-layout {
      min-height: auto;
    }

    .na-dash-grid.collapsed .na-user-box,
    .na-dash-grid.collapsed .na-sidebar-text,
    .na-dash-grid.collapsed .na-nav span,
    .na-dash-grid.collapsed .na-sidebar-actions-label {
      display: block;
    }

    .na-dash-grid.collapsed .na-nav button {
      text-align: left;
      padding: 11px 12px;
    }
  }

  @media (max-width: 620px) {
    #nomkamo-app-root {
      padding: 10px;
    }

    .na-topbar,
    .na-panel-head {
      flex-direction: column;
      align-items: stretch;
    }

    .na-title {
      font-size: 52px;
    }

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

  .na-formula-head,
  .na-formula-row {
    display: grid;
    grid-template-columns: minmax(220px, 1.6fr) minmax(90px, .55fr) minmax(90px, .55fr) minmax(190px, 1.15fr) 42px;
    gap: 8px;
    align-items: center;
  }

  .na-formula-head {
    color: var(--na-muted);
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 8px;
    padding: 0 4px;
  }

  .na-formula-row {
    border: 1px solid var(--na-line);
    background: #f9fafa;
    border-radius: 16px;
    padding: 8px;
    margin-bottom: 8px;
  }

  .na-formula-list {
    display: grid;
    gap: 8px;
  }

  .na-formula-detail-row {
    display: grid;
    grid-template-columns: minmax(180px, 1.5fr) minmax(90px, .55fr) minmax(90px, .55fr) minmax(170px, 1.2fr);
    gap: 8px;
    align-items: baseline;
    border: 1px solid var(--na-line);
    background: #fff;
    border-radius: 16px;
    padding: 12px;
    font-size: 13px;
  }

  .na-formula-detail-row strong {
    font-weight: 400;
    letter-spacing: -.02em;
  }

  .na-formula-detail-row span {
    color: var(--na-muted);
  }

  @media (max-width: 980px) {
    .na-formula-head {
      display: none;
    }

    .na-formula-row,
    .na-formula-detail-row {
      grid-template-columns: 1fr;
    }
  }


  .na-btn.danger {
    color: var(--na-danger);
    border-color: rgba(155,48,48,.28);
    background: rgba(155,48,48,.04);
  }

  .na-btn.danger:hover {
    background: rgba(155,48,48,.08);
  }

  .na-pyramid {
    width: 360px;
    max-width: 100%;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
    margin-top: 12px;
    padding: 0;
    border: 1px solid rgba(5, 5, 5, .10);
    border-radius: 14px;
    background: transparent;
    overflow: hidden;
    box-sizing: border-box;
  }

  .na-pyramid-segment {
    position: relative;
    height: 30px;
    min-height: 30px;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .16s ease;
    background: transparent;
  }

  .na-pyramid-segment + .na-pyramid-segment::before {
    content: "";
    position: absolute;
    left: 0;
    top: 7px;
    bottom: 7px;
    width: 1px;
    background: rgba(5, 5, 5, .10);
  }

  .na-pyramid-segment.active::after {
    content: "";
    position: absolute;
    inset: 3px;
    border: 1px solid rgba(5, 5, 5, .18);
    border-radius: 10px;
    pointer-events: none;
  }

  .na-pyramid-icon {
    width: 18px;
    height: 18px;
    display: block;
    position: relative;
    z-index: 1;
  }

  @media (max-width: 620px) {
    .na-pyramid {
      width: 100%;
    }

    .na-pyramid-segment {
      height: 28px;
      min-height: 28px;
    }

    .na-pyramid-icon {
      width: 17px;
      height: 17px;
    }
  }


  .na-component-usage {
    display: grid;
    gap: 8px;
  }

  .na-usage-row {
    appearance: none;
    width: 100%;
    border: 1px solid var(--na-line);
    background: #fff;
    border-radius: 16px;
    padding: 12px;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    text-align: left;
    cursor: pointer;
    transition: .16s ease;
  }

  .na-usage-row:hover {
    border-color: var(--na-line-strong);
    transform: translateY(-1px);
  }

  .na-usage-row strong {
    display: block;
    color: var(--na-text);
    font-weight: 400;
    letter-spacing: -.02em;
    font-size: 14px;
  }

  .na-usage-row small,
  .na-usage-meta {
    display: block;
    color: var(--na-muted);
    font-size: 12px;
    margin-top: 4px;
  }

  .na-usage-meta {
    white-space: nowrap;
  }

  @media (max-width: 620px) {
    .na-usage-row {
      flex-direction: column;
    }

    .na-usage-meta {
      white-space: normal;
    }
  }


  .na-test-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .na-timeline {
    display: grid;
    gap: 8px;
    margin: 12px 0 18px;
  }

  .na-timeline-item {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 12px;
    border: 1px solid var(--na-line);
    border-radius: 16px;
    background: #fff;
    padding: 12px;
  }

  .na-timeline-item span {
    color: var(--na-muted);
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  .na-timeline-item p {
    margin: 0;
    color: var(--na-text);
    font-size: 13px;
    line-height: 1.45;
  }

  @media (max-width: 780px) {
    .na-test-grid,
    .na-timeline-item {
      grid-template-columns: 1fr;
    }
  }


  .na-formula-tests-list {
    display: grid;
    gap: 8px;
  }

  .na-formula-test-row {
    appearance: none;
    width: 100%;
    border: 1px solid var(--na-line);
    background: #fff;
    border-radius: 16px;
    padding: 12px;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    text-align: left;
    cursor: pointer;
    transition: .16s ease;
  }

  .na-formula-test-row:hover {
    border-color: var(--na-line-strong);
    transform: translateY(-1px);
  }

  .na-formula-test-row strong {
    display: block;
    color: var(--na-text);
    font-weight: 400;
    letter-spacing: -.02em;
    font-size: 14px;
  }

  .na-formula-test-row small {
    display: block;
    color: var(--na-muted);
    font-size: 12px;
    margin-top: 4px;
  }

  .na-formula-test-status {
    color: var(--na-muted);
    font-size: 12px;
    white-space: nowrap;
  }

  @media (max-width: 620px) {
    .na-formula-test-row {
      flex-direction: column;
    }

    .na-formula-test-status {
      white-space: normal;
    }
  }


  .na-app-changelog {
    display: grid;
    gap: 8px;
    margin-bottom: 18px;
  }

  .na-app-changelog-row {
    border: 1px solid var(--na-line);
    background: rgba(255, 255, 255, .72);
    border-radius: 16px;
    padding: 10px 12px;
    display: grid;
    grid-template-columns: 88px 70px minmax(0, 1fr);
    align-items: start;
    gap: 10px;
  }

  .na-app-changelog-date {
    color: var(--na-muted);
    font-size: 12px;
    white-space: nowrap;
  }

  .na-app-changelog-version {
    color: var(--na-text);
    font-size: 12px;
    border: 1px solid var(--na-line);
    border-radius: 999px;
    padding: 4px 8px;
    text-align: center;
    white-space: nowrap;
  }

  .na-app-changelog-text {
    color: var(--na-text);
    font-size: 13px;
    line-height: 1.35;
  }

  @media (max-width: 620px) {
    .na-app-changelog-row {
      grid-template-columns: 1fr;
      gap: 6px;
    }

    .na-app-changelog-version {
      width: fit-content;
    }
  }


  .na-formula-detail-row.ifra-exceeded {
    border-color: rgba(155, 48, 48, .32);
    background: rgba(155, 48, 48, .045);
  }

  .na-formula-detail-row.ifra-exceeded strong,
  .na-formula-detail-row.ifra-exceeded span {
    color: #7d2424;
  }

  .na-ifra-warning {
    display: block;
    margin-top: 4px;
    color: #9b3030;
    font-size: 11px;
    line-height: 1.25;
  }


  .na-recalc {
    border: 1px solid var(--na-line);
    background: rgba(255, 255, 255, .72);
    border-radius: 18px;
    padding: 14px;
    margin-bottom: 18px;
  }

  .na-recalc-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, auto);
    gap: 12px;
    align-items: start;
  }

  .na-recalc-title {
    color: var(--na-text);
    font-size: 14px;
    letter-spacing: -.02em;
  }

  .na-recalc-subtitle {
    color: var(--na-muted);
    font-size: 12px;
    line-height: 1.35;
    margin-top: 4px;
  }

  .na-recalc-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
  }

  .na-recalc-summary span {
    border: 1px solid var(--na-line);
    border-radius: 999px;
    padding: 5px 9px;
    color: var(--na-muted);
    font-size: 12px;
  }

  .na-recalc-table {
    display: grid;
    gap: 6px;
    margin-top: 12px;
  }

  .na-recalc-table-head,
  .na-recalc-row {
    display: grid;
    grid-template-columns: minmax(160px, 1fr) 90px 110px;
    gap: 8px;
    align-items: center;
  }

  .na-recalc-table-head {
    color: var(--na-muted);
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 0 8px;
  }

  .na-recalc-row {
    border: 1px solid var(--na-line);
    border-radius: 14px;
    padding: 9px 8px;
    background: #fff;
    font-size: 13px;
  }

  .na-recalc-row span:nth-child(2) {
    color: var(--na-muted);
  }

  .na-recalc-row strong {
    color: var(--na-text);
    font-weight: 400;
  }

  @media (max-width: 700px) {
    .na-recalc-head,
    .na-recalc-table-head,
    .na-recalc-row {
      grid-template-columns: 1fr;
    }

    .na-recalc-table-head {
      display: none;
    }
  }


  .na-recalc-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
  }

  .na-recalc-actions .na-input {
    max-width: 150px;
  }

  .na-recalc-summary span.ok {
    border-color: rgba(32, 122, 76, .24);
    background: rgba(32, 122, 76, .06);
    color: #207a4c;
  }

  @media (max-width: 700px) {
    .na-recalc-actions {
      justify-content: stretch;
      flex-direction: column;
      align-items: stretch;
    }

    .na-recalc-actions .na-input {
      max-width: none;
    }
  }


  .na-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(245, 247, 248, .72);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
  }

  .na-modal-card {
    width: min(920px, 100%);
    max-height: min(760px, calc(100vh - 48px));
    overflow: auto;
    border: 1px solid var(--na-line);
    border-radius: 28px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 24px 80px rgba(0,0,0,.12);
    padding: 24px;
  }

  .na-modal-head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 18px;
  }

  .na-modal-head h2 {
    margin: 4px 0 6px;
    font-size: clamp(28px, 4vw, 46px);
    line-height: .95;
    letter-spacing: -.06em;
    font-weight: 400;
  }

  .na-modal-head p {
    margin: 0;
    color: var(--na-muted);
    font-size: 13px;
    line-height: 1.45;
  }

  .na-modal-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
  }

  .na-modal-summary span {
    border: 1px solid var(--na-line);
    border-radius: 999px;
    padding: 6px 10px;
    color: var(--na-muted);
    font-size: 12px;
  }

  .na-modal-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }

  .na-stats-bars {
    display: grid;
    gap: 10px;
  }

  .na-stats-bar-row {
    border: 1px solid var(--na-line);
    border-radius: 16px;
    padding: 10px;
    background: #fff;
  }

  .na-stats-bar-label {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    margin-bottom: 8px;
  }

  .na-stats-bar-label span {
    color: var(--na-text);
    font-size: 13px;
  }

  .na-stats-bar-label strong {
    color: var(--na-muted);
    font-size: 12px;
    font-weight: 400;
  }

  .na-stats-bar-track {
    height: 7px;
    border-radius: 999px;
    background: rgba(5,5,5,.06);
    overflow: hidden;
  }

  .na-stats-bar-fill {
    height: 100%;
    border-radius: inherit;
    background: #111;
  }

  .na-stats-bar-row small {
    display: block;
    margin-top: 6px;
    color: var(--na-muted);
    font-size: 11px;
  }

  @media (max-width: 760px) {
    .na-modal-backdrop {
      padding: 12px;
      align-items: flex-start;
    }

    .na-modal-card {
      border-radius: 22px;
      padding: 18px;
      max-height: calc(100vh - 24px);
    }

    .na-modal-head {
      flex-direction: column;
    }

    .na-modal-grid {
      grid-template-columns: 1fr;
    }
  }


  .na-admin-table {
    display: grid;
    gap: 8px;
  }

  .na-admin-table-head,
  .na-admin-table-row {
    display: grid;
    grid-template-columns: minmax(120px, 1.1fr) minmax(180px, 1.6fr) 90px 90px 110px;
    gap: 10px;
    align-items: center;
  }

  .na-admin-table-head {
    color: var(--na-muted);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .10em;
    padding: 0 12px;
  }

  .na-admin-table-row {
    border: 1px solid var(--na-line);
    background: #fff;
    border-radius: 16px;
    padding: 12px;
    font-size: 13px;
    color: var(--na-text);
  }

  .na-admin-table-row mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--na-line);
    background: var(--na-soft-blue);
    color: var(--na-text);
    border-radius: 999px;
    padding: 4px 9px;
    font-size: 12px;
  }

  @media (max-width: 820px) {
    .na-admin-table-head {
      display: none;
    }

    .na-admin-table-row {
      grid-template-columns: 1fr;
      gap: 6px;
    }
  }


  .na-diagnostics-list {
    display: grid;
    gap: 8px;
  }

  .na-diagnostic-row {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) 90px minmax(160px, 1.4fr);
    gap: 10px;
    align-items: center;
    border: 1px solid var(--na-line);
    border-radius: 16px;
    background: #fff;
    padding: 10px 12px;
  }

  .na-diagnostic-row span {
    color: var(--na-text);
    font-size: 13px;
  }

  .na-diagnostic-row strong {
    width: fit-content;
    border: 1px solid var(--na-line);
    border-radius: 999px;
    padding: 4px 9px;
    font-size: 12px;
    font-weight: 400;
  }

  .na-diagnostic-row small {
    color: var(--na-muted);
    font-size: 12px;
    word-break: break-word;
  }

  .na-diagnostic-row.ok strong {
    border-color: rgba(32, 122, 76, .24);
    background: rgba(32, 122, 76, .06);
    color: #207a4c;
  }

  .na-diagnostic-row.bad strong {
    border-color: rgba(155, 48, 48, .32);
    background: rgba(155, 48, 48, .05);
    color: #9b3030;
  }

  @media (max-width: 720px) {
    .na-diagnostic-row {
      grid-template-columns: 1fr;
      gap: 6px;
    }
  }


  .na-tariff-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .na-tariff-card {
    border: 1px solid var(--na-line);
    border-radius: 18px;
    background: rgba(255,255,255,.78);
    padding: 14px;
  }

  .na-tariff-card.development {
    opacity: .72;
  }

  .na-tariff-card-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 12px;
  }

  .na-tariff-card h3 {
    margin: 0 0 4px;
    font-size: 22px;
    line-height: 1;
    letter-spacing: -.05em;
    font-weight: 400;
  }

  .na-tariff-card p {
    margin: 0;
    color: var(--na-muted);
    font-size: 13px;
  }

  .na-tariff-card-head span {
    border: 1px solid var(--na-line);
    border-radius: 999px;
    padding: 5px 9px;
    color: var(--na-muted);
    font-size: 11px;
    white-space: nowrap;
  }

  .na-tariff-card ul {
    margin: 0;
    padding-left: 16px;
    display: grid;
    gap: 5px;
    color: var(--na-text);
    font-size: 13px;
    line-height: 1.35;
  }

  .na-addon-list {
    display: grid;
    gap: 8px;
    margin-top: 10px;
  }

  .na-addon-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 100px 90px;
    gap: 10px;
    align-items: center;
    border: 1px solid var(--na-line);
    border-radius: 16px;
    background: #fff;
    padding: 10px 12px;
  }

  .na-addon-row strong {
    font-size: 13px;
    font-weight: 400;
  }

  .na-addon-row span,
  .na-addon-row small {
    color: var(--na-muted);
    font-size: 12px;
  }

  .na-input.compact-select {
    min-height: 34px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
  }

  @media (max-width: 760px) {
    .na-tariff-grid,
    .na-addon-row {
      grid-template-columns: 1fr;
    }
  }


  .na-toast {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 99999;
    width: min(420px, calc(100vw - 44px));
    border: 1px solid var(--na-line);
    border-radius: 18px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 18px 60px rgba(0,0,0,.14);
    padding: 14px 16px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  .na-toast.bad {
    border-color: rgba(155, 48, 48, .28);
    background: rgba(255, 250, 250, .98);
  }

  .na-toast-title {
    margin-bottom: 5px;
    color: var(--na-text);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .10em;
  }

  .na-toast-message {
    color: var(--na-text);
    font-size: 14px;
    line-height: 1.4;
  }

  @media (max-width: 620px) {
    .na-toast {
      right: 12px;
      bottom: 12px;
      width: calc(100vw - 24px);
    }
  }


  #naComponentForm.is-solvent-component [data-solvent-extra] {
    display: none !important;
  }