.nav-group { display: flex; flex-direction: column; gap: 3px; }
  .sidebar-nav-group[hidden] { display: none; }
  .nav-section-title { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: #aaa; padding: 0 10px; margin: 8px 0 4px; font-weight: 600; }
  .sidebar-group-title { display: flex; align-items: center; gap: 6px; }
  .sidebar-group-title-edit-only { display: none; }
  body.sidebar-navigation-editing .sidebar-group-title-edit-only { display: flex; }
  .sidebar-group-drag-handle,
  .sidebar-item-drag-handle,
  .sidebar-visibility,
  .sidebar-startup { display: none; border: 0; background: transparent; color: #9499a3; }
  .sidebar-group-drag-handle,
  .sidebar-item-drag-handle { cursor: grab; }
  body.sidebar-navigation-editing .sidebar-group-drag-handle { display: inline-flex; width: 19px; height: 19px; flex: 0 0 auto; align-items: center; justify-content: center; margin: -5px 0 -5px -6px; padding: 2px; border-radius: 5px; }
  .sidebar-group-drag-handle:hover { background: #eef0f3; color: #5d626d; }
  .sidebar-group-drag-handle svg { width: 13px; height: 13px; }
  .sidebar-group-drag-handle:active,
  .sidebar-item-drag-handle:active { cursor: grabbing; }
  .sidebar-group-drag-handle:focus-visible,
  .sidebar-item-drag-handle:focus-visible,
  .sidebar-visibility:focus-visible,
  .sidebar-startup:focus-visible { outline: 2px solid #43b7a8; outline-offset: 1px; }
  .nav-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; font-size: 13px; color: #666; cursor: pointer; transition: all 0.15s; border: none; background: transparent; width: 100%; text-align: left; }
  .nav-item:hover { background: #f5f5f7; color: #1a1a1a; }
  .nav-item.active { background: #1a1a1a; color: #fff; font-weight: 500; }
  .nav-item svg { width: 17px; height: 17px; flex-shrink: 0; }
  .nav-item-symbol { display: inline-flex; width: 17px; height: 17px; flex: 0 0 auto; align-items: center; justify-content: center; font-size: 16px; line-height: 1; }
  .sidebar-nav-list { display: flex; flex-direction: column; gap: 3px; }
  .sidebar-nav-row { position: relative; border-radius: 8px; }
  .sidebar-nav-row[hidden] { display: none; }
  .sidebar-nav-row .nav-item { padding-right: 10px; }
  body.sidebar-navigation-editing .sidebar-nav-row .nav-item { padding-right: 121px; }
  body.sidebar-navigation-editing .sidebar-nav-row.is-user-hidden { opacity: .5; }
  body.sidebar-navigation-editing .sidebar-nav-row.is-user-hidden .nav-item { color: #9296a0; }
  .sidebar-nav-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sidebar-item-drag-handle,
  .sidebar-visibility,
  .sidebar-startup { position: absolute; z-index: 3; top: 50%; width: 26px; height: 26px; align-items: center; justify-content: center; padding: 4px; border-radius: 7px; transform: translateY(-50%); }
  .sidebar-item-drag-handle { right: 89px; }
  .sidebar-startup { right: 61px; cursor: pointer; }
  .sidebar-visibility { right: 33px; cursor: pointer; }
  .sidebar-item-drag-handle:hover,
  .sidebar-visibility:hover,
  .sidebar-startup:hover { background: #eef0f3; color: #4f5560; }
  .sidebar-startup.is-startup { background: rgba(67,183,168,.13); color: #258f82; }
  .sidebar-visibility.is-hidden { color: #b2605b; }
  .sidebar-item-drag-handle svg,
  .sidebar-visibility svg,
  .sidebar-startup svg { width: 16px; height: 16px; }
  body.sidebar-navigation-editing .sidebar-item-drag-handle,
  body.sidebar-navigation-editing .sidebar-visibility,
  body.sidebar-navigation-editing .sidebar-startup { display: inline-flex; }
  body.sidebar-navigation-editing .sidebar-favorite { visibility: visible; pointer-events: auto; opacity: 1; transition-delay: 0s; }
  .sidebar-favorite { position: absolute; z-index: 2; top: 50%; right: 0; display: inline-flex; width: 27px; height: 27px; align-items: center; justify-content: center; transform: translateY(-50%); visibility: hidden; border: 0; border-radius: 7px; background: transparent; color: #a3a6ae; font: inherit; font-size: 17px; line-height: 1; cursor: pointer; pointer-events: none; opacity: 0; transition: visibility 0s linear .15s, background .15s ease, color .15s ease, opacity .15s ease, transform .15s ease; }
  body.sidebar-navigation-editing .sidebar-favorite { right: 6px; }
  .sidebar-nav-row:hover .sidebar-favorite,
  .sidebar-nav-row .nav-item:focus-visible ~ .sidebar-favorite,
  .sidebar-nav-row .sidebar-favorite:focus-visible,
  .sidebar-nav-row.is-dragging .sidebar-favorite { visibility: visible; pointer-events: auto; opacity: 1; transition-delay: 0s; }
  .sidebar-favorite:hover { background: rgba(236,174,45,.12); color: #d99b16; }
  .sidebar-favorite:active { transform: translateY(-50%) scale(.92); }
  .sidebar-favorite.is-favorite { color: #e3a11c; }
  .sidebar-favorite:focus-visible,
  .sidebar-nav-toggle:focus-visible { outline: 2px solid #43b7a8; outline-offset: 1px; }
  .sidebar-nav-row.is-dragging { z-index: 3; background: rgba(67,183,168,.1); box-shadow: 0 7px 18px rgba(22,33,38,.15); opacity: .84; }
  .sidebar-nav-row.is-dragging .nav-item { cursor: grabbing; }
  .sidebar-nav-row.is-drop-before::before,
  .sidebar-nav-row.is-drop-after::after { content: ''; position: absolute; z-index: 4; right: 8px; left: 8px; height: 2px; border-radius: 2px; background: #43b7a8; pointer-events: none; }
  .sidebar-nav-row.is-drop-before::before { top: -2px; }
  .sidebar-nav-row.is-drop-after::after { bottom: -2px; }
  .sidebar-nav-group.is-group-dragging { z-index: 3; border-radius: 10px; background: rgba(67,183,168,.08); box-shadow: 0 8px 22px rgba(22,33,38,.14); opacity: .84; }
  .sidebar-nav-group.is-group-drop-before::before,
  .sidebar-nav-group.is-group-drop-after::after { content: ''; display: block; height: 3px; flex: 0 0 auto; border-radius: 3px; background: #43b7a8; }
  body.sidebar-navigation-dragging,
  body.sidebar-navigation-group-dragging { cursor: grabbing; user-select: none; }
  .sidebar-favorites-empty { padding: 7px 10px; color: #a0a4ad; font-size: 10px; line-height: 1.35; }
  .sidebar-favorites-empty[hidden] { display: none; }
  .sidebar-nav-toggle { display: flex; width: 100%; align-items: center; justify-content: center; gap: 7px; padding: 7px 10px; border: 1px dashed #d8dbe2; border-radius: 8px; background: transparent; color: #8c909a; font: inherit; font-size: 10px; font-weight: 650; cursor: pointer; transition: border-color .15s ease, background .15s ease, color .15s ease; }
  .sidebar-nav-toggle:hover { border-color: #bfc4cd; background: #f5f5f7; color: #555a65; }
  .sidebar-nav-toggle[hidden] { display: none; }
  .sidebar-nav-toggle-arrow { font-size: 13px; transition: transform .18s ease; }
  .sidebar-nav-toggle[aria-expanded="true"] .sidebar-nav-toggle-arrow { transform: rotate(180deg); }
  .sidebar-navigation-status { position: fixed; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

  /* Main */
  .main { flex: 1; padding: 20px 28px; display: flex; flex-direction: column; gap: 16px; overflow: hidden; }
  .topbar { display: flex; align-items: flex-start; justify-content: flex-end; gap: 10px; min-width: 0; }
  .crm-online { display: flex; min-height: 38px; flex: 0 0 auto; align-items: center; gap: 10px; padding: 4px 13px; border: 1px solid #dfe8e6; border-radius: 11px; background: #f4fbf9; font: inherit; cursor: pointer; transition: border-color .15s ease, background .15s ease, transform .15s ease; }
  .crm-online:hover { border-color: rgba(47,186,131,.5); background: #ecf8f5; }
  .crm-online:active { transform: translateY(1px); }
  .crm-online:focus-visible { outline: 2px solid #43b7a8; outline-offset: 2px; }
  .crm-online-status { display: flex; align-items: center; gap: 6px; color: #55716c; font-size: 12px; font-weight: 700; white-space: nowrap; }
  .crm-online-value { min-width: 20px; color: #1b9d6f; font-size: 23px; font-weight: 750; line-height: 1; text-align: center; font-variant-numeric: tabular-nums; }
  .crm-online.is-loading .crm-online-value { color: #91a19e; }
  .icon-btn { width: 38px; height: 38px; border-radius: 10px; border: 1px solid #e5e5e5; background: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #666; position: relative; }
  .icon-btn:hover { background: #f5f5f7; }
  .icon-btn svg { width: 17px; height: 17px; }
  .user-chip { display: flex; align-items: center; gap: 8px; padding: 3px 10px 3px 3px; border-radius: 24px; border: 1px solid #e5e5e5; background: #fff; font-size: 12px; font-weight: 500; cursor: pointer; }
  .avatar { width: 30px; height: 30px; border-radius: 50%; background: #e5e5e5; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; color: #666; }
  .settings-stack { display: flex; flex: 0 0 auto; flex-direction: row; align-items: flex-start; gap: 7px; }
  .settings { position: relative; flex: 0 0 auto; }
  .settings-button { margin-top: 0; }
  .settings-portal-anchor { position: fixed; z-index: 520; top: var(--settings-portal-top, 0); right: var(--settings-portal-right, 12px); width: 0; height: 0; }
  .settings-portal-anchor .settings-menu { z-index: 1; }
  .access-header-add { display: none; width: auto; min-width: max-content; padding: 0 13px; gap: 7px; font-size: 12px; font-weight: 700; line-height: 1; white-space: nowrap; }
  .access-header-invite,
  .access-header-invite-history { display: none; width: auto; min-width: max-content; padding: 0 13px; gap: 7px; font-size: 12px; font-weight: 700; line-height: 1; white-space: nowrap; }
  .access-header-invite-symbol { color: #43b7a8; font-size: 17px; font-weight: 750; line-height: 1; }
  .access-header-invite-history-symbol { color: #7d8b9f; font-size: 18px; font-weight: 750; line-height: 1; }
  .access-header-add-plus { color: #24b77d; font-size: 22px; font-weight: 650; line-height: 1; }
  #page-access.active #global-topbar .access-header-invite,
  #page-access.active #global-topbar .access-header-invite-history,
  #page-access.active #global-topbar .access-header-add { display: flex; }
  #page-access.active #global-topbar .access-header-invite.permission-denied,
  #page-access.active #global-topbar .access-header-invite-history.permission-denied,
  #page-access.active #global-topbar .access-header-add.permission-denied { display: none; }
  #page-access.active #global-topbar .period-control { display: none; }
  #page-access.active .access-page-heading { order: 1; }
  #page-access.active #global-topbar { order: 2; margin-left: auto; }
  #page-access.active .access-page-close { order: 3; }
  #page-online.active #global-topbar .period-control,
  #page-online.active #global-topbar .access-header-add { display: none; }
  #page-online.active .online-page-heading { order: 1; }
  #page-online.active #global-topbar { order: 2; margin-left: auto; }
  #page-online.active .online-page-close { order: 3; }
  #page-audit.active #global-topbar .period-control,
  #page-audit.active #global-topbar .access-header-add { display: none; }
  #page-audit.active .audit-page-heading { order: 1; }
  #page-audit.active #global-topbar { order: 2; margin-left: auto; }
  #page-audit.active .audit-page-close { order: 3; }
  .crm-invite-overlay { position: fixed; z-index: 360; inset: 0; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(5,7,11,.7); backdrop-filter: blur(3px); }
  .crm-invite-overlay.open { display: flex; }
  .crm-invite-dialog { width: min(560px,100%); max-height: min(720px,calc(100dvh - 32px)); overflow-y: auto; padding: 24px; border: 1px solid #343945; border-radius: 18px; background: #171a21; box-shadow: 0 28px 80px rgba(0,0,0,.52); color: #f2f4f7; }
  .crm-invite-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
  .crm-invite-dialog h2 { margin: 0; font-size: 21px; line-height: 1.2; }
  .crm-invite-dialog-copy { margin: 7px 0 0; color: #999fab; font-size: 12px; line-height: 1.5; }
  .crm-invite-dialog-close { width: 34px; height: 34px; flex: 0 0 auto; border: 1px solid #373c47; border-radius: 9px; background: #111318; color: #aeb4c0; font: inherit; font-size: 20px; cursor: pointer; }
  .crm-invite-permissions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 18px; }
  .crm-invite-permission { display: flex; min-height: 48px; align-items: center; gap: 9px; padding: 10px 12px; border: 1px solid #343945; border-radius: 10px; background: #12151b; color: #d7dbe2; font-size: 11px; font-weight: 650; cursor: pointer; }
  .crm-invite-sensitive-permissions { display: grid; grid-column: 1/-1; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 18px; }
  .crm-invite-sensitive-permissions .crm-invite-permission { color: #ff756b; }
  .crm-invite-permission input { width: 18px; height: 18px; accent-color: #43b7a8; }
  .crm-invite-permission:has(input:disabled) { cursor: not-allowed; opacity: .45; }
  .crm-invite-permissions.is-readonly { opacity: .62; }
  .crm-invite-rights-note { margin-top: 10px; color: #8f95a2; font-size: 10px; line-height: 1.45; }
  .crm-invite-generate { width: 100%; min-height: 46px; margin-top: 18px; border: 0; border-radius: 11px; background: #43b7a8; color: #071411; font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
  .crm-invite-generate:disabled { opacity: .55; cursor: wait; }
  .crm-invite-result { display: none; margin-top: 15px; padding: 12px; border: 1px solid rgba(67,183,168,.35); border-radius: 11px; background: rgba(67,183,168,.08); }
  .crm-invite-result.visible { display: block; }
  .crm-invite-result-label { color: #62cdbf; font-size: 10px; font-weight: 750; text-transform: uppercase; letter-spacing: .05em; }
  .crm-invite-result-row { display: flex; gap: 8px; margin-top: 7px; }
  .crm-invite-result input { min-width: 0; flex: 1; padding: 10px; border: 1px solid #39404b; border-radius: 8px; background: #0f1116; color: #f2f4f7; font: inherit; font-size: 11px; }
  .crm-invite-copy { padding: 0 14px; border: 1px solid #43b7a8; border-radius: 8px; background: transparent; color: #64d0c1; font: inherit; font-size: 11px; font-weight: 750; cursor: pointer; }
  .crm-invite-expiry { margin-top: 8px; color: #9298a5; font-size: 10px; }
  .crm-invite-error { min-height: 17px; margin-top: 10px; color: #ff716d; font-size: 11px; }
  .crm-invite-history-dialog { width: min(900px,100%); overflow: hidden; }
  .crm-invite-history-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; color: #858b97; font-size: 10px; }
  .crm-invite-history-toolbar button { padding: 7px 11px; border: 1px solid #373c47; border-radius: 8px; background: #111318; color: #b8bec8; font: inherit; font-size: 10px; font-weight: 700; cursor: pointer; }
  .crm-invite-history-list { display: grid; max-height: min(620px,calc(100dvh - 190px)); gap: 10px; margin-top: 10px; overflow-y: auto; padding-right: 4px; }
  .crm-invite-history-card { padding: 16px; border: 1px solid #303540; border-radius: 13px; background: #111318; }
  .crm-invite-history-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
  .crm-invite-history-card-head > div { display: flex; min-width: 0; flex-direction: column; }
  .crm-invite-history-card-head > .crm-invite-history-card-actions { flex: 0 0 auto; flex-direction: row; align-items: center; gap: 7px; }
  .crm-invite-history-card-head small,
  .crm-invite-history-permissions-label,
  .crm-invite-history-accepted-label { color: #7f8591; font-size: 9px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; }
  .crm-invite-history-card-head strong { margin-top: 4px; color: #eceef2; font-size: 13px; }
  .crm-invite-history-card-head > div > span { margin-top: 2px; color: #858b97; font-size: 10px; overflow-wrap: anywhere; }
  .crm-invite-history-status { flex: 0 0 auto; padding: 5px 8px; border-radius: 99px; background: rgba(221,154,46,.13); color: #e5a23b; font-size: 9px; font-weight: 750; }
  .crm-invite-history-card.is-used .crm-invite-history-status { background: rgba(47,186,131,.13); color: #55d39e; }
  .crm-invite-history-card.is-expired .crm-invite-history-status { background: rgba(137,143,154,.13); color: #9aa0ab; }
  .crm-invite-history-delete { display: inline-flex; width: 27px; height: 27px; flex: 0 0 auto; align-items: center; justify-content: center; padding: 0; border: 1px solid transparent; border-radius: 7px; background: transparent; color: #737985; cursor: pointer; transition: border-color .15s ease, background .15s ease, color .15s ease; }
  .crm-invite-history-delete:hover { border-color: #343944; background: #1b1e25; color: #a6acb6; }
  .crm-invite-history-delete:focus-visible { outline: 2px solid #43b7a8; outline-offset: 2px; }
  .crm-invite-history-delete:disabled { cursor: wait; opacity: .45; }
  .crm-invite-history-delete svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .crm-invite-history-dates { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 12px; color: #7f8591; font-size: 10px; }
  .crm-invite-history-dates b { color: #bfc4cd; font-weight: 650; }
  .crm-invite-history-link { margin-top: 13px; }
  .crm-invite-history-link-label { color: #7f8591; font-size: 9px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; }
  .crm-invite-history-link-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; margin-top: 7px; }
  .crm-invite-history-link-row input { min-width: 0; padding: 9px 10px; border: 1px solid #39404b; border-radius: 8px; outline: none; background: #0f1116; color: #d9dde4; font: inherit; font-size: 10px; }
  .crm-invite-history-link-row input:focus { border-color: #55c4b5; box-shadow: 0 0 0 3px rgba(85,196,181,.12); }
  .crm-invite-history-link-row button { padding: 0 13px; border: 1px solid #43b7a8; border-radius: 8px; background: transparent; color: #64d0c1; font: inherit; font-size: 10px; font-weight: 750; cursor: pointer; }
  .crm-invite-history-link-row button:hover { background: rgba(67,183,168,.09); }
  .crm-invite-history-link-row button:focus-visible { outline: 2px solid #43b7a8; outline-offset: 2px; }
  .crm-invite-history-link.is-unavailable p { margin: 7px 0 0; color: #6f7580; font-size: 10px; }
  .crm-invite-history-permissions-label { margin-top: 14px; }
  .crm-invite-history-permissions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
  .crm-invite-history-permissions span { padding: 5px 7px; border-radius: 7px; background: rgba(67,183,168,.11); color: #66cabc; font-size: 9px; font-weight: 680; }
  .crm-invite-history-permissions span.is-empty { background: #1b1e25; color: #858b97; }
  .crm-invite-history-accepted { display: grid; grid-template-columns: minmax(150px,1fr) minmax(220px,1.35fr); gap: 3px 16px; margin-top: 14px; padding: 12px; border: 1px solid rgba(47,186,131,.22); border-radius: 10px; background: rgba(47,186,131,.07); }
  .crm-invite-history-accepted-label { grid-column: 1/-1; color: #4dbb91; }
  .crm-invite-history-accepted > strong { color: #edf2ef; font-size: 12px; }
  .crm-invite-history-accepted > span { grid-column: 1; color: #8f9995; font-size: 9px; overflow-wrap: anywhere; }
  .crm-invite-history-profile { grid-column: 2; grid-row: 2/4; display: grid; grid-template-columns: auto 1fr; gap: 3px 8px; color: #aeb6b2; font-size: 10px; }
  .crm-invite-history-profile b { color: #68716d; font-size: 8px; letter-spacing: .05em; text-transform: uppercase; }
  .crm-invite-history-accepted time { grid-column: 1/-1; margin-top: 5px; color: #6f7974; font-size: 9px; }
  .crm-invite-history-waiting { margin-top: 14px; padding: 11px 12px; border: 1px dashed #343944; border-radius: 10px; color: #858b97; font-size: 10px; line-height: 1.45; }
  .crm-invite-history-state { display: flex; min-height: 180px; align-items: center; justify-content: center; padding: 28px; border: 1px dashed #343944; border-radius: 12px; color: #858b97; font-size: 11px; text-align: center; }
  .crm-invite-history-state.is-error { color: #ff827a; }
  .settings-menu { position: absolute; z-index: 40; top: calc(100% + 8px); right: 0; display: none; width: min(360px, calc(100vw - 24px)); padding: 10px; border: 1px solid #e5e5e5; border-radius: 12px; background: #fff; box-shadow: 0 16px 38px rgba(20,22,28,.16); }
  .settings-menu.open { display: block; }
  .settings-account-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px; }
  .settings-account { display: flex; min-width: 0; flex: 1; align-items: center; gap: 10px; padding: 6px; border: 0; border-radius: 9px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
  .settings-account:hover { background: #f3f5f7; }
  .settings-account:focus-visible { outline: 2px solid #43b7a8; outline-offset: 2px; }
  .settings-account .avatar { overflow: hidden; }
  .settings-account .avatar img { width: 100%; height: 100%; object-fit: cover; }
  .settings-account-name { font-size: 13px; font-weight: 650; }
  .settings-account-role { margin-top: 2px; color: #999; font-size: 10px; }
  .settings-divider { height: 1px; margin: 7px 0; background: #ececf0; }
  .settings-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 5px 7px; color: #777; font-size: 12px; font-weight: 550; }
  .settings-link { display: flex; width: 100%; align-items: center; gap: 10px; padding: 9px 8px; border: 0; border-radius: 9px; background: transparent; color: #444; text-align: left; cursor: pointer; }
  .settings-link[hidden] { display: none; }
  .settings-link:hover { background: #f3f5f7; color: #1a1a1a; }
  .settings-link svg { width: 18px; height: 18px; flex: 0 0 auto; color: #43a99c; }
  .settings-link-symbol { display: inline-flex; width: 18px; height: 18px; flex: 0 0 auto; align-items: center; justify-content: center; color: #43a99c; font-size: 18px; font-weight: 750; }
  .settings-link-copy { display: flex; min-width: 0; flex: 1; flex-direction: column; align-items: flex-start; }
  .settings-link-title { display: block; font-size: 12px; font-weight: 700; line-height: 1.25; }
  .settings-link-sub { display: block; margin-top: 3px; color: #999; font-size: 9px; line-height: 1.3; }
  .settings-link-arrow { color: #aaa; font-size: 15px; }
  .settings-access-section[hidden] { display: none; }
  .settings-logout { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 6px; padding: 8px 9px; border: 0; border-radius: 8px; background: transparent; color: #d65c55; font: inherit; font-size: 11px; font-weight: 700; white-space: nowrap; cursor: pointer; }
  .settings-logout svg { width: 17px; height: 17px; flex: 0 0 auto; color: currentColor; }
  .settings-logout:hover { background: rgba(214,92,85,.09); color: #ef6d65; }

  .page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: nowrap; }
  .page-header > .period-control { display: none; }
  .page-title { font-size: 22px; font-weight: 600; }
  .page-sub { font-size: 13px; color: #999; margin-top: 3px; }

  .period-control { position: relative; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; max-width: 100%; }
  .topbar .period-control { min-width: 0; }
  .period-tabs { display: flex; gap: 3px; max-width: 100%; overflow-x: auto; background: #fff; border: 1px solid #e5e5e5; border-radius: 12px; padding: 4px; scrollbar-width: none; }
  .period-tabs::-webkit-scrollbar { display: none; }
  .period-tab { padding: 7px 13px; border-radius: 9px; border: none; background: transparent; font-size: 12px; color: #999; cursor: pointer; font-weight: 500; transition: all 0.15s; white-space: nowrap; }
  .period-tab:hover { color: #1a1a1a; }
  .period-tab.active { background: #1a1a1a; color: #fff; }
  .period-tab-custom { display: inline-flex; align-items: center; gap: 6px; }
  .period-tab-custom svg { width: 13px; height: 13px; }
  .period-compare-button { display: inline-flex; align-items: center; gap: 5px; margin-left: 3px; padding: 7px 10px; border: 0; border-left: 1px solid #e5e5e5; border-radius: 0 8px 8px 0; background: transparent; color: #777b86; font-size: 11px; font-weight: 650; white-space: nowrap; cursor: pointer; }
  .period-compare-button:hover { color: #1a1a1a; }
  .period-compare-button.active { color: #168c6a; background: rgba(39,174,96,.08); }
  .period-compare-button-symbol { font-size: 14px; line-height: 1; }
  .period-selection { min-height: 15px; padding-right: 4px; color: #999; font-size: 11px; }
  .export-button { position: relative; }
  .export-button[hidden] { display: none; }
  .export-button-icon { position: relative; display: block; width: 17px; height: 17px; }
  .export-button-icon::before { content: ''; position: absolute; left: 8px; top: 1px; width: 1.8px; height: 9px; border-radius: 2px; background: currentColor; }
  .export-button-icon::after { content: ''; position: absolute; left: 3px; bottom: 1px; width: 11px; height: 4px; border: 1.8px solid currentColor; border-top: 0; border-radius: 0 0 3px 3px; }
  .export-button-arrow { position: absolute; left: 5px; top: 6px; width: 7px; height: 7px; border-right: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor; transform: rotate(45deg); }
  .export-button.active { color: #43b7a8; border-color: rgba(67,183,168,.55); background: rgba(67,183,168,.1); }
  .export-overlay { position: fixed; z-index: 120; inset: 0; display: none; align-items: center; justify-content: center; padding: 24px; background: rgba(15,17,22,.48); backdrop-filter: blur(3px); }
  .export-overlay.open { display: flex; }
  .export-dialog { width: min(600px,100%); max-height: min(760px,calc(100vh - 48px)); overflow-y: auto; border: 1px solid #dedfe5; border-radius: 18px; background: #fff; box-shadow: 0 28px 80px rgba(12,14,20,.3); }
  .export-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 22px 24px 16px; border-bottom: 1px solid #eceef1; }
  .export-dialog-title { color: #202229; font-size: 20px; font-weight: 760; }
  .export-dialog-sub { margin-top: 5px; color: #8a8e98; font-size: 12px; line-height: 1.45; }
  .export-dialog-close { width: 32px; height: 32px; flex: 0 0 auto; border: 0; border-radius: 9px; background: transparent; color: #9296a0; font-size: 24px; line-height: 1; cursor: pointer; }
  .export-dialog-close:hover { background: #f1f2f5; color: #25272d; }
  .export-dialog-body { display: grid; gap: 18px; padding: 20px 24px 24px; }
  .export-section-title { margin-bottom: 9px; color: #555a64; font-size: 10px; font-weight: 760; letter-spacing: .06em; text-transform: uppercase; }
  .export-format { display: grid; grid-template-columns: repeat(2,1fr); gap: 7px; padding: 4px; border: 1px solid #e3e5e9; border-radius: 11px; background: #f7f8fa; }
  .export-format-button { padding: 9px 12px; border: 0; border-radius: 8px; background: transparent; color: #7d818a; font-size: 12px; font-weight: 720; cursor: pointer; }
  .export-format-button.active { background: #fff; color: #202229; box-shadow: 0 1px 5px rgba(20,23,30,.1); }
  .export-period-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 9px; padding: 10px 12px; border: 1px solid rgba(67,183,168,.28); border-radius: 10px; background: rgba(67,183,168,.07); }
  .export-period-summary span { color: #646974; font-size: 11px; }
  .export-period-summary strong { color: #258f81; font-size: 11px; text-align: right; }
  .export-period-fields { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
  .export-field { display: grid; gap: 5px; color: #8a8e98; font-size: 9px; font-weight: 700; letter-spacing: .035em; text-transform: uppercase; }
  .export-field input,
  .export-field select { min-width: 0; width: 100%; padding: 9px 10px; border: 1px solid #dedfe5; border-radius: 9px; background: #fafafa; color: #23262d; font: inherit; font-size: 11px; text-transform: none; outline: none; }
  .export-field input:focus,
  .export-field select:focus { border-color: #43b7a8; box-shadow: 0 0 0 3px rgba(67,183,168,.12); }
  .export-data-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
  .export-data-option { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 10px 11px; border: 1px solid #e4e6ea; border-radius: 10px; background: #fafafa; color: #3e424b; font-size: 11px; font-weight: 650; cursor: pointer; }
  .export-data-option[hidden] { display: none; }
  .export-data-option:has(input:checked) { border-color: rgba(67,183,168,.5); background: rgba(67,183,168,.08); color: #236f66; }
  .export-data-option input { width: 16px; height: 16px; flex: 0 0 auto; accent-color: #43b7a8; }
  .export-data-option.disabled { opacity: .45; cursor: not-allowed; }
  .export-data-option small { display: block; margin-left: auto; color: #a2a5ad; font-size: 8px; font-weight: 600; }
  .export-dialog-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 4px; }
  .export-dialog-hint { max-width: 330px; color: #9296a0; font-size: 9px; line-height: 1.4; }
  .export-download { min-width: 170px; padding: 11px 16px; border: 0; border-radius: 10px; background: #43b7a8; color: #071512; font-size: 12px; font-weight: 780; cursor: pointer; }
  .export-download:hover { background: #50c8b8; }
  .export-download:disabled { opacity: .55; cursor: wait; }
  .period-preset-popover { position: absolute; z-index: 24; top: calc(100% - 12px); right: 0; display: none; width: min(350px, calc(100vw - 32px)); padding: 13px; border: 1px solid #e1e3e8; border-radius: 12px; background: #fff; box-shadow: 0 16px 38px rgba(20,22,28,.16); }
  .period-preset-popover.open { display: block; }
  .period-preset-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 1px 2px 10px; }
  .period-preset-title { color: #292b32; font-size: 13px; font-weight: 720; }
  .period-preset-sub { margin-top: 3px; color: #9296a1; font-size: 9px; line-height: 1.35; }
  .period-preset-close { width: 25px; height: 25px; flex: 0 0 auto; border: 0; border-radius: 7px; background: transparent; color: #999; font-size: 17px; cursor: pointer; }
  .period-preset-close:hover { background: #f1f2f5; color: #333; }
  .period-preset-options { display: flex; flex-direction: column; gap: 5px; }
  .period-preset-option { display: grid; grid-template-columns: 24px minmax(0,1fr); gap: 9px; align-items: center; width: 100%; padding: 9px 10px; border: 1px solid #e6e7eb; border-radius: 9px; background: #fafafa; color: #343740; text-align: left; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
  .period-preset-option:hover { border-color: rgba(67,183,168,.48); background: rgba(67,183,168,.06); }
  .period-preset-option.active { border-color: rgba(67,183,168,.62); background: rgba(67,183,168,.1); }
  .period-preset-radio { display: inline-flex; width: 18px; height: 18px; align-items: center; justify-content: center; border: 1.5px solid #b7bbc4; border-radius: 50%; }
  .period-preset-option.active .period-preset-radio { border-color: #43b7a8; }
  .period-preset-option.active .period-preset-radio::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #43b7a8; }
  .period-preset-copy { display: grid; min-width: 0; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 10px; }
  .period-preset-name { display: block; color: inherit; font-size: 11px; font-weight: 730; }
  .period-preset-range { display: block; overflow: hidden; color: #8d929c; font-size: 9px; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
  .custom-period-popover { position: absolute; z-index: 20; top: calc(100% - 12px); right: 0; display: none; width: 310px; padding: 14px; border: 1px solid #e5e5e5; border-radius: 12px; background: #fff; box-shadow: 0 14px 35px rgba(20,22,28,.14); }
  .custom-period-popover.open { display: block; }
  .custom-period-title { margin-bottom: 11px; font-size: 13px; font-weight: 600; }
  .custom-period-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
  .custom-period-field { display: flex; flex-direction: column; gap: 5px; color: #999; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .035em; }
  .custom-period-field input { width: 100%; padding: 8px 9px; border: 1px solid #dedfe5; border-radius: 8px; background: #fafafa; color: #1a1a1a; font: inherit; color-scheme: light; outline: none; }
  .custom-period-field input:focus { border-color: #43b7a8; box-shadow: 0 0 0 3px rgba(67,183,168,.12); }
  .custom-period-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
  .custom-period-action { padding: 7px 11px; border: 1px solid #dedfe5; border-radius: 8px; background: transparent; color: #666; font-size: 11px; font-weight: 600; cursor: pointer; }
  .custom-period-action.primary { border-color: #1a1a1a; background: #1a1a1a; color: #fff; }
  .period-compare-popover { position: absolute; z-index: 22; top: calc(100% - 12px); right: 0; display: none; width: min(420px, calc(100vw - 32px)); padding: 14px; border: 1px solid #e1e3e8; border-radius: 12px; background: #fff; box-shadow: 0 16px 38px rgba(20,22,28,.16); }
  .period-compare-popover.open { display: block; }
  .period-compare-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
  .period-compare-title { color: #292b32; font-size: 13px; font-weight: 720; }
  .period-compare-sub { margin-top: 3px; color: #9296a1; font-size: 9px; line-height: 1.35; }
  .period-compare-close { width: 25px; height: 25px; border: 0; border-radius: 7px; background: transparent; color: #999; font-size: 17px; cursor: pointer; }
  .period-compare-close:hover { background: #f1f2f5; color: #333; }
  .period-compare-modes { display: grid; grid-template-columns: repeat(3,1fr); gap: 4px; margin-top: 12px; padding: 3px; border: 1px solid #e4e5e9; border-radius: 9px; background: #f7f7f9; }
  .period-compare-mode { padding: 7px 5px; border: 0; border-radius: 6px; background: transparent; color: #7d818b; font-size: 10px; font-weight: 680; cursor: pointer; }
  .period-compare-mode.active { background: #fff; color: #202229; box-shadow: 0 1px 4px rgba(25,28,35,.1); }
  .period-compare-preset { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; margin-top: 12px; }
  .period-compare-preset-card { padding: 9px 10px; border: 1px solid #e4e5e9; border-radius: 8px; background: #fafafa; }
  .period-compare-preset-card small { display: block; color: #999; font-size: 8px; font-weight: 650; text-transform: uppercase; letter-spacing: .04em; }
  .period-compare-preset-card strong { display: block; margin-top: 3px; color: #333; font-size: 10px; }
  .period-compare-arrow { color: #aaa; font-size: 15px; }
  .period-compare-custom { display: none; margin-top: 12px; }
  .period-compare-custom.visible { display: block; }
  .period-compare-range { display: grid; grid-template-columns: 68px 1fr 1fr; align-items: end; gap: 7px; }
  .period-compare-range + .period-compare-range { margin-top: 8px; }
  .period-compare-range-name { padding-bottom: 9px; color: #757985; font-size: 9px; font-weight: 700; }
  .period-compare-range .custom-period-field { font-size: 8px; }
  .period-compare-range .custom-period-field input { padding: 7px 8px; }
  .period-compare-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 13px; padding-top: 11px; border-top: 1px solid #eceef1; }
  .period-compare-reset { border: 0; background: transparent; color: #9a6767; font-size: 10px; font-weight: 650; cursor: pointer; }
  .period-compare-apply { padding: 7px 12px; border: 0; border-radius: 8px; background: #25272e; color: #fff; font-size: 10px; font-weight: 700; cursor: pointer; }
  .goal-chart-compare-total { color: #8d929e; font-size: 8px; font-weight: 650; }
  .goal-chart-delta.comparison-hidden { display: none; }
  .chart-comparison-legend { display: none; align-items: center; justify-content: flex-end; gap: 12px; margin: -4px 2px 9px; color: #8a8f9a; font-size: 9px; }
  .chart-comparison-legend.visible { display: flex; }
  .chart-comparison-key { display: inline-flex; align-items: center; gap: 5px; }
  .chart-comparison-line { width: 19px; height: 0; border-top: 2px solid #43b7a8; }
  .chart-comparison-line.previous { border-top: 2px dashed #9499a5; }