:root {
  --sidebar-width: 304px;
  --app-radius: 12px;
  --app-shadow: 0 5px 20px rgba(27, 54, 74, .03);

  --app-action-color: #2ED48A;
  --app-action-color-rgb: 46, 212, 138;
  --app-action-hover-color: #25BD7A;
  --app-action-active-color: #1FA86B;
  --app-action-text-color: #015f35;
}

[data-bs-theme="light"] {
  --bs-body-bg: #F5F6F8;
  --bs-body-color: #1B364A;
  --bs-primary: #2977B5;
  --bs-primary-rgb: 41, 119, 181;
  --bs-link-color: #2977B5;
  --bs-link-hover-color: #154870;
  --app-bg: #F5F6F8;
  /* --app-panel-bg: #ffffff; */
  --app-panel-bg: #E8EBF0;
  --app-panel-soft-bg: rgba(235, 242, 249, .7);
  --app-panel-soft-bg-hover: rgba(235, 242, 249, 1);
  --app-border-color: #E8EBF0;
  --app-title-color: #1B364A;
  --app-muted-color: #676E85;
  --app-muted-light-color: #979FB2;
  --app-accent-color: #2977B5;
}

[data-bs-theme="dark"] {
  --bs-body-bg: #1F1F1F;
  --bs-body-color: #F3F3F3;

  --bs-primary: #ffffff;
  --bs-primary-rgb: 255, 255, 255;

  --bs-link-color: #F3F3F3;
  --bs-link-hover-color: #ffffff;

  --bs-border-color: rgba(255, 255, 255, .10);

  --app-bg: #1F1F1F;
  /* --app-panel-bg: #343233; */
  --app-panel-bg: rgba(255, 255, 255, .045);

  --app-panel-soft-bg: rgba(255, 255, 255, .055);
  --app-panel-soft-bg-hover: rgba(255, 255, 255, .095);

  --app-border-color: rgba(255, 255, 255, .08);

  --app-title-color: #ffffff;
  --app-muted-color: #A8A8A8;
  --app-muted-light-color: #747474;

  --app-accent-color: #ffffff;
}


* {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  background: var(--app-bg);
  color: var(--app-title-color);
  font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

a {
  text-decoration: none;
}

.app-shell {
  min-height: 100vh;
}

.sidebar {
  background: var(--app-bg);
  border-right: 1px solid var(--app-border-color);
}

@media (min-width: 992px) {
  .sidebar-desktop {
    width: var(--sidebar-width);
    min-width: var(--sidebar-width);
    height: 100vh;
    position: sticky;
    top: 0;
  }
}

.sidebar-header {
  border-bottom: 1px solid var(--app-border-color);
}

.brand-logo-link {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

.brand-logo {
  display: block;
  width: 38px;
  height: 38px;
  object-fit: contain;
}

.brand-mobile-trigger {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}

.brand-mobile-trigger:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 .2rem rgba(var(--app-action-color-rgb), .16);
  border-radius: 10px;
}

.brand-title {
  color: var(--app-title-color);
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
}

.brand-subtitle {
  color: var(--app-muted-light-color);
  font-size: 11px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.theme-toggle {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--app-muted-color);
  font-size: 18px;
  line-height: 1;
}

.theme-toggle:hover,
.theme-toggle:focus {
  background: var(--app-panel-soft-bg);
  color: var(--app-title-color);
}

.theme-toggle:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 .2rem rgba(var(--app-action-color-rgb), .16);
}

.app-search {
  background: var(--app-panel-soft-bg);
  border-color: transparent;
  color: var(--app-title-color);
}

.app-search::placeholder {
  color: var(--app-muted-light-color);
}

.app-search:focus {
  background: var(--app-panel-bg);
  border-color: rgba(255, 255, 255, .22);
  box-shadow: none;
  color: var(--app-title-color);
}

.sidebar-scroll {
  height: calc(100vh - 139px);
  overflow-y: auto;
  scrollbar-width: thin;
}

.project-toggle {
  width: 100%;
  min-height: 48px;
  border: 0;
  border-bottom: 1px solid var(--app-border-color);
  border-radius: 0;
  background: transparent;
  color: var(--app-muted-color);
  font-size: 14px;
  line-height: 18px;
  font-weight: 600;
}

.project-toggle:hover,
.project-toggle:focus {
  color: var(--app-title-color);
  background: var(--app-panel-soft-bg);
}

.project-toggle .chevron {
  transition: transform .18s ease;
  color: var(--app-muted-light-color);
  font-size: 18px;
  line-height: 1;
}

.project-toggle[aria-expanded="true"] .chevron {
  transform: rotate(90deg);
}

.app-count-badge {
  background: var(--app-panel-soft-bg);
  color: var(--app-muted-color);
  font-size: 10px;
  font-weight: 500;
}

.tool-link {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .45rem 1rem;
  margin: .125rem .5rem;
  color: var(--app-muted-color);
  border-radius: var(--app-radius);
  font-size: 12px;
  line-height: 12px;
  font-weight: 500;
}

.tool-link:hover,
.tool-link.active {
  color: var(--app-title-color);
  background: var(--app-panel-soft-bg-hover);
}

.tool-link.active {
  color: var(--app-title-color);
}

.tool-icon {
  width: 24px;
  flex: 0 0 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--app-muted-light-color);
  font-size: 16px;
  line-height: 1;
}

.tool-link:hover .tool-icon,
.tool-link.active .tool-icon {
  color: var(--app-title-color);
}

.mobile-topbar {
  background: var(--app-bg);
  border-bottom: 1px solid var(--app-border-color);
}

.content-area {
  flex: 1;
  min-width: 0;
  background: var(--app-bg);
}

.tool-stage {
  min-height: calc(100vh - 57px);
  display: grid;
  place-items: center;
  padding: clamp(8px, 3vw, 48px);
}

@media (min-width: 992px) {
  .tool-stage {
    min-height: 100vh;
  }
}

.tool-page {
  width: min(100%, 700px);
}

.tool-card {
  width: 100%;
  background: var(--app-panel-bg);
  border: 0;
  border-radius: var(--app-radius);
}



.tool-card .card-body {
  padding: 32px;
}

.tool-badge {
  background: var(--app-panel-soft-bg-hover);
  color: var(--app-title-color);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
}

.tool-title {
  color: var(--app-title-color);
  font-size: 24px;
  line-height: 30px;
  font-weight: 600;
}

.tool-description {
  color: var(--app-muted-color);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
}

.tool-placeholder {
  background: var(--app-panel-soft-bg);
  border-radius: var(--app-radius);
  padding: 24px;
}

.upload-zone {
  border: 1px dashed rgba(255, 255, 255, .22);
  background: var(--app-panel-soft-bg);
  border-radius: var(--app-radius);
}

.meta-list {
  display: grid;
  gap: 8px;
  margin: 0;
}

.meta-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--app-panel-bg);
  color: var(--app-muted-color);
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
}

.meta-row code {
  color: var(--app-title-color);
}

.btn-primary {
  --bs-btn-color: var(--app-action-text-color);
  --bs-btn-bg: var(--app-action-color);
  --bs-btn-border-color: var(--app-action-color);

  --bs-btn-hover-color: var(--app-action-text-color);
  --bs-btn-hover-bg: var(--app-action-hover-color);
  --bs-btn-hover-border-color: var(--app-action-hover-color);

  --bs-btn-focus-shadow-rgb: var(--app-action-color-rgb);

  --bs-btn-active-color: var(--app-action-text-color);
  --bs-btn-active-bg: var(--app-action-active-color);
  --bs-btn-active-border-color: var(--app-action-active-color);

  --bs-btn-disabled-color: rgba(6, 19, 13, .55);
  --bs-btn-disabled-bg: rgba(var(--app-action-color-rgb), .45);
  --bs-btn-disabled-border-color: rgba(var(--app-action-color-rgb), .1);

  font-weight: 500;
}

.btn.is-copy-success,
.btn.is-copy-success:hover,
.btn.is-copy-success:focus,
.btn.is-copy-success:active {
  color: #ffffff !important;
  background-color: var(--app-action-color) !important;
  border-color: var(--app-action-color) !important;
  box-shadow: none !important;
}

[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
  background-color: rgba(255, 255, 255, .055);
  border-color: rgba(255, 255, 255, .12);
  color: var(--app-title-color);
}

[data-bs-theme="dark"] .form-control::placeholder {
  color: var(--app-muted-light-color);
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
  background-color: rgba(255, 255, 255, .075);
  border-color: rgba(255, 255, 255, .28);
  color: var(--app-title-color);
  box-shadow: none;
}

[data-bs-theme="dark"] .form-text {
  color: var(--app-muted-light-color);
}

[data-bs-theme="dark"] .form-label,
[data-bs-theme="dark"] .form-check-label {
  color: var(--app-muted-color);
}

/* [data-bs-theme="dark"] .form-check-input {
  background-color: rgba(255, 255, 255, .055);
  border-color: rgba(255, 255, 255, .22);
}

[data-bs-theme="dark"] .form-check-input:checked {
  background-color: #ffffff;
  border-color: #ffffff;
} */

.form-check-input {
  cursor: pointer;
}

.form-check-input:checked {
  background-color: var(--app-action-color);
  border-color: var(--app-action-color);
}

.form-check-input:focus {
  border-color: rgba(var(--app-action-color-rgb), .75);
  box-shadow: 0 0 0 .2rem rgba(var(--app-action-color-rgb), .18);
}

.form-check-input:active {
  filter: none;
}

.form-switch .form-check-input:checked {
  background-color: var(--app-action-color);
  border-color: var(--app-action-color);
}

.form-control:focus,
.form-select:focus {
  border-color: rgba(var(--app-action-color-rgb), .65);
  box-shadow: 0 0 0 .2rem rgba(var(--app-action-color-rgb), .12);
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
  border-color: rgba(var(--app-action-color-rgb), .65);
  box-shadow: 0 0 0 .2rem rgba(var(--app-action-color-rgb), .14);
}

.btn-outline-secondary {
  --bs-btn-color: var(--app-action-color);
  --bs-btn-border-color: rgba(var(--app-action-color-rgb), .45);

  --bs-btn-hover-color: var(--app-action-text-color);
  --bs-btn-hover-bg: var(--app-action-color);
  --bs-btn-hover-border-color: var(--app-action-color);

  --bs-btn-focus-shadow-rgb: var(--app-action-color-rgb);

  --bs-btn-active-color: var(--app-action-text-color);
  --bs-btn-active-bg: var(--app-action-active-color);
  --bs-btn-active-border-color: var(--app-action-active-color);

  --bs-btn-disabled-color: rgba(var(--app-action-color-rgb), .5);
  --bs-btn-disabled-border-color: rgba(var(--app-action-color-rgb), .25);
}


[data-bs-theme="dark"] .border-top {
  border-top-color: rgba(255, 255, 255, .12) !important;
}

[data-bs-theme="light"] {
  --app-seo-bg: #E8EBF0;
  --app-seo-text: #83899F;
  --app-seo-h: #83899F;
}

[data-bs-theme="dark"] {
  --app-seo-bg: rgba(255, 255, 255, .015);
  --app-seo-text: #616161;
  --app-seo-h: #7e7e7e;
}

.seo-article {
  margin-top: 8px;
  width: 100%;
  border-radius: var(--app-radius);
  background: var(--app-seo-bg);
  box-shadow: none;
}

.seo-article__body {
  padding: 28px 32px;
}

.seo-article h2,
.seo-article h3,
.seo-article h4 {
  color: var(--app-seo-h);
  font-weight: 500;
  margin-top: 18px;
  margin-bottom: 6px;
}

.seo-article h2 {
  font-size: 18px;
  line-height: 24px;
}

.seo-article h3 {
  font-size: 16px;
  line-height: 22px;
}

.seo-article p,
.seo-article li {
  color: var(--app-seo-text);
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
}

.seo-article p {
  margin-bottom: 12px;
}

.seo-article p:last-child,
.seo-article ul:last-child,
.seo-article ol:last-child {
  margin-bottom: 0;
}

.seo-article ul,
.seo-article ol {
  padding-left: 18px;
  margin-bottom: 12px;
}

.seo-article a {
  color: var(--app-title-color);
  text-decoration: underline;
}

@media (max-width: 767.98px) {
  .seo-article__body {
    padding: 28px 14px;
  }

  .seo-article h2 {
    font-size: 16px;
    line-height: 22px;
  }

  .seo-article p,
  .seo-article li {
    font-size: 12px;
    line-height: 16px;
  }
}


/* ===========================
   Единый action-акцент для форм
   =========================== */

input[type="checkbox"],
input[type="radio"],
input[type="range"] {
  accent-color: var(--app-action-color);
}

/* Range / ползунки */
.form-range::-webkit-slider-thumb {
  width: 16px;
  height: 16px;
  background-color: var(--app-action-color);
  border: 0;
  box-shadow: none;
}

.form-range::-webkit-slider-thumb:hover {
  background-color: var(--app-action-hover-color);
}

.form-range::-webkit-slider-thumb:active {
  background-color: var(--app-action-active-color);
}

.form-range:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 .2rem rgba(var(--app-action-color-rgb), .18);
}

.form-range::-moz-range-thumb {
  width: 16px;
  height: 16px;
  background-color: var(--app-action-color);
  border: 0;
  box-shadow: none;
}

.form-range::-moz-range-thumb:hover {
  background-color: var(--app-action-hover-color);
}

.form-range::-moz-range-thumb:active {
  background-color: var(--app-action-active-color);
}

.form-range:focus::-moz-range-thumb {
  box-shadow: 0 0 0 .2rem rgba(var(--app-action-color-rgb), .18);
}

/* Кнопка внутри input[type="file"] */
.form-control::file-selector-button {
  color: var(--app-action-text-color);
  background-color: var(--app-action-color);
  border-color: var(--app-action-color);
}

.form-control:hover:not(:disabled):not([readonly])::file-selector-button {
  color: var(--app-action-text-color);
  background-color: var(--app-action-hover-color);
  border-color: var(--app-action-hover-color);
}

.form-control:active::file-selector-button {
  color: var(--app-action-text-color);
  background-color: var(--app-action-active-color);
  border-color: var(--app-action-active-color);
}

/* Фокус у элементов форм */
.form-control:focus,
.form-select:focus,
.form-range:focus {
  border-color: rgba(var(--app-action-color-rgb), .65);
  box-shadow: 0 0 0 .2rem rgba(var(--app-action-color-rgb), .12);
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus,
[data-bs-theme="dark"] .form-range:focus {
  border-color: rgba(var(--app-action-color-rgb), .65);
  box-shadow: 0 0 0 .2rem rgba(var(--app-action-color-rgb), .14);
}

.form-range::-webkit-slider-runnable-track {
  height: 8px;
  background-color: rgba(var(--app-action-color-rgb), .22);
  border-radius: 999px;
}

.form-range::-moz-range-track {
  height: 8px;
  background-color: rgba(var(--app-action-color-rgb), .22);
  border-radius: 999px;
}

.form-range::-moz-range-progress {
  height: 8px;
  background-color: rgba(var(--app-action-color-rgb), .55);
  border-radius: 999px;
}

.form-range::-webkit-slider-thumb {
  margin-top: -4px;
}


.home-tools-grid {
  display: grid;
  gap: 20px;
}

.home-category {
  padding: 0;
}

.home-category__title {
  color: var(--app-title-color);
  font-size: 15px;
  line-height: 20px;
  font-weight: 700;
  margin-bottom: 10px;
}

.home-category__list {
  display: grid;
  gap: 8px;
}

.home-tool-link {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--app-muted-color);
  background: var(--app-panel-soft-bg);
  border-radius: 10px;
  padding: 12px;
  font-size: 14px;
  line-height: 18px;
  font-weight: 500;
}

.home-tool-link:hover {
  color: var(--app-accent-color);
  background: var(--app-panel-soft-bg-hover);
}

.home-tools-empty {
  color: var(--app-muted-color);
  background: var(--app-panel-soft-bg);
  border-radius: var(--app-radius);
  padding: 16px;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
}