:root {
  --os-bg-a: #12243f;
  --os-bg-b: #1f3a64;
  --os-bg-c: #2d548f;
  --os-panel: rgba(14, 19, 31, 0.72);
  --os-panel-border: rgba(201, 220, 255, 0.22);
  --os-window: rgba(18, 24, 39, 0.82);
  --os-window-border: rgba(183, 210, 252, 0.3);
  --os-text: #edf4ff;
  --os-muted: #bdcde6;
  --os-accent: #4faeff;
  --os-tile-size: 112px;
  --os-tile-radius: 0px;
  --os-tile-border-width: 0px;
  --os-tile-border-color: transparent;
  --os-tile-bg-theme: rgba(33, 53, 87, 0.5);
  --os-tile-hover-bg-theme: rgba(83, 122, 187, 0.68);
  --os-tile-bg: transparent;
  --os-tile-hover-bg: var(--os-tile-hover-bg-theme);
  --os-taskbar-reserved-height: 42px;
}

* {
  box-sizing: border-box;
}

html, body {
  min-height: 100%;
}

body {
  margin: 0;
  color: var(--os-text);
  font-family: "Noto Sans", "Segoe UI", sans-serif;
  background:
    radial-gradient(1000px 460px at -10% -8%, #3b66a8 0, transparent 70%),
    radial-gradient(700px 380px at 95% 12%, #416fae 0, transparent 70%),
    linear-gradient(165deg, var(--os-bg-a), var(--os-bg-b) 56%, var(--os-bg-c));
  overflow: hidden;
}

.os-desktop {
  position: relative;
  width: 100vw;
  height: 100vh;
  padding: 10px;
}

.os-start-menu {
  position: fixed;
  left: 12px;
  bottom: 52px;
  width: min(520px, calc(100vw - 24px));
  max-height: min(76vh, 700px);
  border: 1px solid var(--os-panel-border);
  border-radius: 14px;
  background: var(--os-panel);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  z-index: 200;
}

.os-start-menu.hidden {
  display: none;
}

.os-start-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(184, 209, 245, 0.25);
}

.os-start-head strong {
  font-size: 14px;
}

.os-start-layout {
  display: grid;
  grid-template-columns: 170px 1fr;
  min-height: 320px;
  max-height: calc(76vh - 98px);
}

.os-start-main {
  display: block;
  min-height: 0;
}

.os-start-search-wrap {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(184, 209, 245, 0.2);
}

.os-start-search {
  width: 100%;
  border: 1px solid rgba(176, 206, 247, 0.35);
  border-radius: 8px;
  padding: 8px 10px;
  background: rgba(11, 21, 37, 0.8);
  color: #fff;
}

.os-start-cats {
  border-right: 1px solid rgba(184, 209, 245, 0.2);
  padding: 8px;
  overflow: auto;
}

.os-cat-btn {
  display: block;
  width: 100%;
  text-align: left;
  border: 1px solid transparent;
  background: transparent;
  color: var(--os-text);
  border-radius: 8px;
  padding: 8px 10px;
  cursor: pointer;
}

.os-cat-btn:hover,
.os-cat-btn.active {
  border-color: rgba(165, 198, 248, 0.35);
  background: rgba(63, 93, 136, 0.3);
}

.os-start-apps {
  padding: 10px;
  overflow: auto;
  min-height: 0;
}

.os-app-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--os-tile-size), var(--os-tile-size)));
  grid-auto-rows: var(--os-tile-size);
  grid-auto-flow: dense;
  gap: 10px;
  justify-content: start;
}

.os-app-btn {
  border: var(--os-tile-border-width) solid var(--os-tile-border-color);
  border-radius: var(--os-tile-radius);
  background: var(--os-tile-bg);
  color: var(--os-text);
  font-size: 12px;
  padding: 10px;
  text-align: left;
  cursor: pointer;
  text-decoration: none;
  width: var(--os-tile-size);
  height: var(--os-tile-size);
  min-height: var(--os-tile-size);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  line-height: 1.2;
  transition: transform 120ms ease, background 120ms ease;
}

.os-app-btn:hover {
  background: var(--os-tile-hover-bg);
  border-color: transparent;
}

.os-app-btn.dragging {
  opacity: 0.6;
  transform: scale(0.96);
}

.os-app-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--os-tile-size) * 0.5);
  height: calc(var(--os-tile-size) * 0.5);
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #dcecff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.3px;
  margin-top: 0;
  transition: background-color 120ms ease, border-color 120ms ease;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.os-app-icon.is-default {
  color: transparent;
  background-image: url('/themes/buttonbashed-os/assets/default-tile-icon.svg');
}

.os-app-icon.has-icon[data-icon="dashboard"] { background-image: url('/themes/buttonbashed-os/assets/icons/dashboard.svg'); }
.os-app-icon.has-icon[data-icon="system-settings"] { background-image: url('/themes/buttonbashed-os/assets/icons/system-settings.svg'); }
.os-app-icon.has-icon[data-icon="account"] { background-image: url('/themes/buttonbashed-os/assets/icons/account.svg'); }
.os-app-icon.has-icon[data-icon="logout"] { background-image: url('/themes/buttonbashed-os/assets/icons/logout.svg'); }
.os-app-icon.has-icon[data-icon="bbt-contacts"] { background-image: url('/themes/buttonbashed-os/assets/icons/bbt-contacts.svg'); }
.os-app-icon.has-icon[data-icon="bbt-crm-home"] { background-image: url('/themes/buttonbashed-os/assets/icons/bbt-crm-home.svg'); }
.os-app-icon.has-icon[data-icon="bbt-crm-leads"] { background-image: url('/themes/buttonbashed-os/assets/icons/bbt-crm-leads.svg'); }
.os-app-icon.has-icon[data-icon="accounting-invoices"] { background-image: url('/themes/buttonbashed-os/assets/icons/accounting-invoices.svg'); }
.os-app-icon.has-icon[data-icon="accounting-credit-notes"] { background-image: url('/themes/buttonbashed-os/assets/icons/accounting-credit-notes.svg'); }
.os-app-icon.has-icon[data-icon="accounting-bank-reconciliation"] { background-image: url('/themes/buttonbashed-os/assets/icons/accounting-bank-reconciliation.svg'); }
.os-app-icon.has-icon[data-icon="accounting-invoice-template-builder"] { background-image: url('/themes/buttonbashed-os/assets/icons/accounting-invoice-template-builder.svg'); }
.os-app-icon.has-icon[data-icon="accounting-foundation"] { background-image: url('/themes/buttonbashed-os/assets/icons/accounting-foundation.svg'); }
.os-app-icon.has-icon[data-icon="accounting-settings"] { background-image: url('/themes/buttonbashed-os/assets/icons/accounting-settings.svg'); }
.os-app-icon.has-icon[data-icon="home"] { background-image: url('/themes/buttonbashed-os/assets/icons/home.svg'); }
.os-app-icon.has-icon[data-icon="settings"] { background-image: url('/themes/buttonbashed-os/assets/icons/settings.svg'); }
.os-app-icon.has-icon[data-icon="context"] { background-image: url('/themes/buttonbashed-os/assets/icons/context.svg'); }
.os-app-icon.has-icon[data-icon="updates"] { background-image: url('/themes/buttonbashed-os/assets/icons/updates.svg'); }
.os-app-icon.has-icon[data-icon="themes"] { background-image: url('/themes/buttonbashed-os/assets/icons/themes.svg'); }
.os-app-icon.has-icon[data-icon="mail"] { background-image: url('/themes/buttonbashed-os/assets/icons/mail.svg'); }
.os-app-icon.has-icon[data-icon="updater"] { background-image: url('/themes/buttonbashed-os/assets/icons/updater.svg'); }
.os-app-icon.has-icon[data-icon="notifications"] { background-image: url('/themes/buttonbashed-os/assets/icons/notifications.svg'); }
.os-app-icon.has-icon[data-icon="default"] { background-image: url('/themes/buttonbashed-os/assets/default-tile-icon.svg'); }

.os-app-icon.has-icon {
  color: transparent;
}

.os-app-btn:hover .os-app-icon {
  background-color: rgba(255, 255, 255, 0.08);
}

.os-app-label {
  width: 100%;
  height: 2.4em;
  margin-top: auto;
  text-align: center;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
  word-break: break-word;
}

#os-tile-style-status {
  display: inline-block;
  margin-top: 8px;
}

.os-context-menu {
  position: fixed;
  z-index: 900;
  min-width: 220px;
  border: 1px solid rgba(176, 206, 247, 0.35);
  border-radius: 10px;
  background: rgba(12, 21, 37, 0.96);
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.45);
  padding: 6px;
}

.os-context-item {
  width: 100%;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--os-text);
  text-align: left;
  padding: 8px 10px;
  cursor: pointer;
}

.os-context-item:hover {
  border-color: rgba(176, 206, 247, 0.3);
  background: rgba(72, 108, 168, 0.45);
}

.os-taskbar {
  position: fixed;
  left: 10px;
  right: 10px;
  bottom: 10px;
  height: 38px;
  border: 1px solid var(--os-panel-border);
  border-radius: 10px;
  background: var(--os-panel);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 4px 8px;
  z-index: 210;
}

.os-taskbar.docked {
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 0;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
}

.os-task-left,
.os-task-mid,
.os-task-right {
  display: flex;
  align-items: center;
  gap: 6px;
}

.os-task-mid {
  margin-left: 8px;
}

.os-task-right {
  margin-left: auto;
}

.os-save-btn,
.os-task-btn,
.os-link-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  border: 1px solid rgba(176, 206, 247, 0.35);
  background: rgba(60, 97, 153, 0.65);
  color: #fff;
  border-radius: 8px;
  padding: 8px 12px;
  cursor: pointer;
  text-decoration: none;
  line-height: 1.2;
  font-size: 16px;
  font-weight: 500;
}

.os-save-btn:hover,
.os-task-btn:hover,
.os-task-btn.active,
.os-link-btn:hover {
  background: rgba(72, 108, 168, 0.7);
}

.os-start-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  border: 0;
  background: transparent;
  color: #fff;
  border-radius: 0;
  width: 30px;
  min-width: 30px;
  height: 30px;
  min-height: 30px;
  padding: 0;
  cursor: pointer;
}

.os-start-btn:hover,
.os-start-btn:focus-visible {
  background: rgba(83, 122, 187, 0.35);
}

.os-start-btn-icon {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 6px;
  background-image: url('/themes/buttonbashed-os/assets/start-logo.png');
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

.os-gear-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid rgba(171, 205, 252, 0.36);
  background: rgba(47, 72, 112, 0.5);
  color: #fff;
  cursor: pointer;
  text-decoration: none;
}

.os-clock {
  font-size: 12px;
  color: var(--os-muted);
}

.os-notification-wrap {
  position: relative;
}

.os-notification-btn {
  position: relative;
  width: 34px;
  height: 30px;
  border: 1px solid rgba(171, 205, 252, 0.36);
  background: rgba(47, 72, 112, 0.5);
  color: #fff;
  border-radius: 8px;
  cursor: pointer;
}

.os-notification-btn:hover,
.os-notification-btn.active {
  background: rgba(62, 95, 148, 0.55);
}

.os-notification-btn.has-notifications {
  background: rgba(72, 108, 168, 0.72);
  border-color: rgba(197, 223, 255, 0.55);
  filter: none;
  opacity: 1;
}

.os-notification-btn.has-notifications:hover,
.os-notification-btn.has-notifications.active {
  background: rgba(92, 132, 196, 0.85);
}

.os-notification-btn.is-empty {
  opacity: 0.6;
  filter: grayscale(1);
}

.os-notification-btn.is-empty:hover {
  opacity: 0.8;
}

.os-taskbar .os-task-btn,
.os-taskbar .os-start-btn,
.os-taskbar .os-notification-btn {
  min-height: 30px;
  height: 30px;
}

.os-taskbar .os-task-btn {
  padding: 2px;
  font-size: 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.os-taskbar .os-task-btn.os-task-app-btn {
  width: 30px;
  min-width: 30px;
  justify-content: center;
}

.os-taskbar .os-task-btn.os-task-app-btn:hover,
.os-taskbar .os-task-btn.os-task-app-btn.active,
.os-taskbar .os-task-btn.os-task-app-btn:focus-visible {
  background: rgba(83, 122, 187, 0.35);
  border: 0;
}

.os-task-app-icon {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url('/themes/buttonbashed-os/assets/default-tile-icon.svg');
}

.os-bell {
  font-size: 15px;
  line-height: 1;
}

.os-notification-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  color: #fff;
  font-size: 10px;
  line-height: 16px;
  text-align: center;
  font-weight: 700;
  background: #2f9f5f;
  border: 1px solid rgba(255, 255, 255, 0.35);
}

.os-notification-badge.level-info { background: #2f9f5f; }
.os-notification-badge.level-attention { background: #cf8b1f; }
.os-notification-badge.level-critical { background: #c64242; }

.os-notification-menu {
  position: absolute;
  right: 0;
  bottom: 40px;
  width: min(440px, calc(100vw - 20px));
  max-height: 60vh;
  border: 1px solid var(--os-panel-border);
  border-radius: 12px;
  background: rgba(15, 24, 40, 0.96);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.45);
  overflow: hidden;
  z-index: 260;
}

.os-notification-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 10px;
  border-bottom: 1px solid rgba(184, 209, 245, 0.2);
}

.os-notification-list {
  max-height: calc(60vh - 44px);
  overflow: auto;
}

.os-notification-item {
  border-bottom: 1px solid rgba(184, 209, 245, 0.14);
  padding: 9px 10px;
  cursor: pointer;
}

.os-notification-item:hover {
  background: rgba(63, 93, 136, 0.24);
}

.os-notification-item.unread {
  background: rgba(73, 109, 167, 0.14);
}

.os-notification-item:last-child {
  border-bottom: 0;
}

.os-notification-meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 5px;
  font-size: 11px;
  color: var(--os-muted);
}

.os-pill {
  display: inline-block;
  border-radius: 999px;
  padding: 1px 7px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

.os-pill.level-info { background: rgba(63, 164, 96, 0.3); color: #9ee5b8; }
.os-pill.level-attention { background: rgba(207, 139, 31, 0.3); color: #ffd18a; }
.os-pill.level-critical { background: rgba(198, 66, 66, 0.3); color: #ffb6b6; }

.os-window {
  position: absolute;
  min-width: 340px;
  min-height: 220px;
  width: 620px;
  height: 380px;
  border: 1px solid var(--os-window-border);
  border-radius: 12px;
  background: var(--os-window);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 20px 42px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

.os-window-home { left: 26px; top: 24px; }
.os-window-settings { left: 120px; top: 80px; width: 980px; height: 620px; }
.os-window-updates { left: 160px; top: 88px; }
.os-window-themes { left: 240px; top: 140px; }
.os-window-context { left: 110px; top: 170px; }
.os-window-account { left: 210px; top: 220px; }
.os-window-mail { left: 180px; top: 120px; width: 760px; height: 460px; }
.os-window-accounting-invoices { left: 90px; top: 56px; width: 1180px; height: 680px; }
.os-window-accounting-invoice-editor { left: 150px; top: 96px; width: 1180px; height: 700px; }
.os-window-accounting-credit-notes { left: 200px; top: 82px; width: 1140px; height: 700px; }
.os-window-login {
  left: 18vw;
  top: 16vh;
  width: min(620px, 92vw);
  height: auto;
}
.os-window-admin-theme {
  left: 12vw;
  top: 12vh;
  width: min(760px, 94vw);
  height: auto;
}
.os-window-setup {
  left: 10vw;
  top: 8vh;
  width: min(900px, 95vw);
  height: min(86vh, 860px);
}

.os-window.hidden {
  display: none;
}

.os-window.maximized {
  position: fixed !important;
  left: 0 !important;
  top: 0 !important;
  width: 100vw !important;
  height: calc(100vh - var(--os-taskbar-reserved-height)) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.os-window-head {
  height: 34px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid rgba(186, 213, 251, 0.24);
  background: linear-gradient(180deg, rgba(64, 90, 136, 0.5), rgba(40, 58, 94, 0.45));
  padding: 0 9px;
  cursor: move;
  user-select: none;
}

.os-window-head-static {
  cursor: default;
}

.os-window-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
}

.os-window-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #75c5ff;
}

.os-window-controls {
  display: inline-flex;
  gap: 6px;
}

.os-win-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 22px;
  border: 1px solid rgba(173, 205, 250, 0.42);
  border-radius: 4px;
  background: rgba(40, 64, 103, 0.55);
  color: #fff;
  padding: 0;
  line-height: 1;
  cursor: pointer;
  font-size: 13px;
}

.os-win-btn.is-disabled,
.os-win-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.os-win-btn:hover {
  background: rgba(62, 95, 148, 0.55);
}

.os-win-btn.is-disabled:hover,
.os-win-btn:disabled:hover {
  background: rgba(40, 64, 103, 0.55);
}

.os-win-btn.close:hover {
  background: rgba(189, 66, 90, 0.8);
}

.os-window-body {
  height: calc(100% - 34px);
  overflow: hidden;
  padding: 12px;
}

.os-window-content {
  height: 100%;
  overflow: auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.os-settings-shell {
  display: grid;
  grid-template-columns: minmax(220px, 260px) 1fr;
  gap: 12px;
  height: 100%;
  min-height: 0;
}

.os-settings-nav {
  border: 1px solid rgba(167, 199, 242, 0.22);
  border-radius: 10px;
  background: rgba(21, 34, 56, 0.52);
  overflow: auto;
  min-height: 0;
  padding: 8px;
}

.os-settings-content {
  border: 1px solid rgba(167, 199, 242, 0.22);
  border-radius: 10px;
  background: rgba(21, 34, 56, 0.52);
  overflow: auto;
  min-height: 0;
  padding: 10px;
  display: flex;
  flex-direction: column;
}

.os-settings-nav-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(167, 199, 242, 0.18);
}

.os-settings-toolbar-actions {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.os-settings-back-btn {
  min-height: 30px;
  height: 30px;
  padding: 4px 10px;
}

.os-settings-category {
  margin-bottom: 8px;
}

.os-settings-category-btn {
  display: block;
  width: 100%;
  border: 1px solid rgba(176, 206, 247, 0.3);
  border-radius: 8px;
  background: rgba(48, 76, 121, 0.36);
  color: var(--os-text);
  text-align: left;
  padding: 8px 10px;
  cursor: pointer;
  font-weight: 600;
}

.os-settings-category-btn.active,
.os-settings-category-btn:hover {
  background: rgba(72, 108, 168, 0.45);
}

.os-settings-items {
  display: none;
  margin-top: 6px;
  padding-left: 6px;
}

.os-settings-category.expanded .os-settings-items {
  display: block;
}

.os-settings-items-main {
  display: block;
}

.os-settings-category.submenu-active .os-settings-items-main {
  display: none;
}

.os-settings-submenu-panel {
  display: block;
}

.os-settings-submenu-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--os-muted);
  margin: 4px 0 6px;
  padding: 0 4px;
}

.os-settings-submenu-back {
  display: block;
  width: 100%;
  border: 1px solid rgba(176, 206, 247, 0.3);
  border-radius: 8px;
  background: rgba(48, 76, 121, 0.36);
  color: var(--os-text);
  text-align: left;
  padding: 7px 9px;
  cursor: pointer;
  margin-bottom: 6px;
}

.os-settings-submenu-back:hover {
  background: rgba(72, 108, 168, 0.45);
}

.os-settings-item-btn {
  display: block;
  width: 100%;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--os-muted);
  text-align: left;
  padding: 7px 9px;
  cursor: pointer;
}

.os-settings-item-btn:hover,
.os-settings-item-btn.active {
  border-color: rgba(176, 206, 247, 0.24);
  background: rgba(62, 95, 148, 0.32);
  color: var(--os-text);
}

.os-settings-panel {
  min-height: 100%;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.os-window-content.hidden {
  display: none;
}

.os-panel-card {
  border: 1px solid rgba(167, 199, 242, 0.22);
  border-radius: 10px;
  background: rgba(21, 34, 56, 0.52);
  padding: 10px;
  margin-bottom: 10px;
}

.os-panel-card h3 {
  margin: 0 0 8px;
}

.os-panel-card p {
  margin: 0;
  color: var(--os-muted);
}

.os-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.os-panel-title {
  margin: 0;
}

.os-icon-tile-btn {
  width: 38px;
  min-width: 38px;
  height: 38px;
  min-height: 38px;
  padding: 0;
  font-size: 18px;
  line-height: 1;
}

.os-setup-lead {
  margin-top: 6px;
}

.os-setup-note {
  margin-top: 10px;
  color: var(--os-muted);
}

.os-setup-stepper {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.status-pill {
  border: 1px solid rgba(176, 206, 247, 0.3);
  border-radius: 9px;
  padding: 8px 9px;
  font-size: 13px;
  background: rgba(11, 21, 37, 0.55);
}

.status-pill.ok {
  border-color: rgba(117, 202, 154, 0.6);
}

.status-pill.bad {
  border-color: rgba(220, 130, 130, 0.62);
}

.os-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.os-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: 10px;
}

.os-field-full {
  grid-column: 1 / -1;
}

.os-field label {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  color: var(--os-muted);
}

.os-field select,
.os-field input,
.os-field textarea {
  width: 100%;
  border: 1px solid rgba(176, 206, 247, 0.3);
  border-radius: 7px;
  padding: 8px;
  background: rgba(11, 21, 37, 0.75);
  color: #fff;
}

.os-profile-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.os-profile-avatar {
  width: 64px;
  height: 64px;
  border-radius: 999px;
  border: 1px solid rgba(176, 206, 247, 0.35);
  background: rgba(11, 21, 37, 0.8);
  object-fit: cover;
}

.os-login-actions {
  margin-top: 10px;
  align-items: center;
}

.os-login-actions .os-save-btn {
  margin-top: 0;
}

.os-updater-embed {
  width: 100%;
  height: auto;
  flex: 1 1 auto;
  min-height: 0;
  border: 1px solid rgba(176, 206, 247, 0.25);
  border-radius: 8px;
  background: #fff;
  display: block;
}

.os-theme-settings-status {
  margin-top: 10px;
  font-size: 13px;
}

.os-theme-settings-status.ok {
  color: #9fe6b3;
}

.os-theme-settings-status.error {
  color: #ff9c9c;
}

.os-table-wrap {
  width: 100%;
  overflow: auto;
  margin-top: 10px;
}

.os-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 680px;
}

.os-table th,
.os-table td {
  border: 1px solid rgba(182, 209, 248, 0.28);
  padding: 7px;
  text-align: left;
  font-size: 12px;
}

.os-table th {
  background: rgba(35, 57, 92, 0.72);
}

.updater-section {
  display: none;
}

body.updater-tab-overview .updater-section[data-tab="overview"],
body.updater-tab-github .updater-section[data-tab="github"],
body.updater-tab-app-sources .updater-section[data-tab="app-sources"],
body.updater-tab-automation .updater-section[data-tab="automation"],
body.updater-tab-cron .updater-section[data-tab="cron"],
body.updater-tab-webhook .updater-section[data-tab="webhook"],
body.updater-tab-notices .updater-section[data-tab="notices"],
body.updater-tab-migrations .updater-section[data-tab="migrations"],
body.updater-tab-stabilization .updater-section[data-tab="stabilization"],
body.updater-tab-zip .updater-section[data-tab="zip"],
body.updater-tab-snapshots .updater-section[data-tab="snapshots"],
body.updater-tab-state .updater-section[data-tab="state"] {
  display: block;
}

body.updater-tab-overview .updater-section-overview-app-sources,
body.updater-tab-app-sources .updater-section-overview-app-sources {
  display: block;
}

.os-resize-handle {
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 14px;
  height: 14px;
  cursor: nwse-resize;
  border-right: 2px solid rgba(190, 217, 252, 0.65);
  border-bottom: 2px solid rgba(190, 217, 252, 0.65);
}

.os-resize-edge {
  position: absolute;
  z-index: 2;
}

.os-resize-edge.n {
  top: -3px;
  left: 8px;
  right: 8px;
  height: 8px;
  cursor: ns-resize;
}

.os-resize-edge.s {
  bottom: -3px;
  left: 8px;
  right: 8px;
  height: 8px;
  cursor: ns-resize;
}

.os-resize-edge.w {
  left: -3px;
  top: 8px;
  bottom: 8px;
  width: 8px;
  cursor: ew-resize;
}

.os-resize-edge.e {
  right: -3px;
  top: 8px;
  bottom: 8px;
  width: 8px;
  cursor: ew-resize;
}

.os-resize-edge.nw {
  left: -3px;
  top: -3px;
  width: 10px;
  height: 10px;
  cursor: nwse-resize;
}

.os-resize-edge.ne {
  right: -3px;
  top: -3px;
  width: 10px;
  height: 10px;
  cursor: nesw-resize;
}

.os-resize-edge.sw {
  left: -3px;
  bottom: -3px;
  width: 10px;
  height: 10px;
  cursor: nesw-resize;
}

.os-resize-edge.se {
  right: -3px;
  bottom: -3px;
  width: 10px;
  height: 10px;
  cursor: nwse-resize;
}

.site-notice {
  margin-bottom: 8px;
}

.ai-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 10px 0;
  flex-wrap: wrap;
}

.ai-list-filters {
  margin: 8px 0 2px;
}

.ai-status-pill {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(176, 206, 247, 0.3);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  color: #d9eaff;
  background: rgba(63, 93, 136, 0.35);
}

.ai-mail-warning {
  border: 1px solid rgba(255, 185, 81, 0.35);
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 12px;
  color: #ffd79d;
  background: rgba(133, 90, 19, 0.22);
}

.ai-mail-warning.ai-mail-ok {
  border-color: rgba(112, 208, 142, 0.35);
  color: #b5f2c8;
  background: rgba(25, 107, 59, 0.24);
}

.ai-editor-layout {
  display: grid;
  grid-template-columns: 2fr minmax(320px, 1fr);
  gap: 12px;
}

.ai-editor-main,
.ai-editor-side,
.ai-register-main,
.ai-register-side {
  border: 1px solid rgba(167, 199, 242, 0.22);
  border-radius: 10px;
  background: rgba(21, 34, 56, 0.4);
  padding: 10px;
}

.ai-section-title {
  font-size: 13px;
  font-weight: 600;
  margin: 0 0 8px;
  color: #dcebff;
}

.ai-toolbar {
  position: sticky;
  top: 0;
  z-index: 3;
  background: rgba(20, 32, 52, 0.92);
  border: 1px solid rgba(167, 199, 242, 0.2);
  border-radius: 10px;
  padding: 8px;
  margin-top: 10px;
}

.ai-register-layout {
  margin-top: 10px;
  display: grid;
  grid-template-columns: 2fr minmax(260px, 1fr);
  gap: 12px;
}

.ai-register-side pre {
  margin: 0;
  min-height: 220px;
  max-height: 320px;
  overflow: auto;
}

.hidden {
  display: none;
}

@media (max-width: 900px) {
  .os-desktop {
    overflow: auto;
    padding-bottom: 60px;
  }

  .os-window {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    margin-bottom: 10px;
  }

  .os-resize-handle {
    display: none;
  }

  .os-field-grid {
    grid-template-columns: 1fr;
  }

  .ai-editor-layout,
  .ai-register-layout {
    grid-template-columns: 1fr;
  }

  .os-settings-shell {
    grid-template-columns: 1fr;
  }
}