/* =====================================================
   Notacross — Быстрая смена аккаунтов · Nota v3.2
   Воздушный стиль, светлая и тёмная темы
   ===================================================== */

/* === Локальные переменные === */
:root {
  --nql-bg-main:    rgba(38, 38, 38, 0.9);
  --nql-bg-soft:    rgba(255, 255, 255, 0.04);
  --nql-bg-hover:   rgba(255, 255, 255, 0.07);

  --nql-border:     rgba(255, 255, 255, 0.10);
  --nql-border-soft:rgba(255, 255, 255, 0.06);

  --nql-text-main:  rgba(255, 255, 255, 0.90);
  --nql-text-dim:   rgba(255, 255, 255, 0.55);
  --nql-text-soft:  rgba(255, 255, 255, 0.30);

  --nql-accent:     rgba(255, 255, 255, 0.80);
  --nql-danger:     rgba(210, 90, 90, 0.90);

  --nql-radius-lg:  14px;
  --nql-radius-md:  10px;
  --nql-radius-sm:  6px;

  --nql-blur:       blur(20px);
  --nql-shadow:     0 20px 56px rgba(0, 0, 0, 0.50),
                    0 1px 0 rgba(255, 255, 255, 0.06) inset;

  /* Модалка — переопределяются через data-modal-* */
  --nota-ql-modal-bg:     rgba(46, 46, 46, 0.95);
  --nota-ql-modal-color:  rgba(255, 255, 255, 0.90);
  --nota-ql-modal-radius: 16px;
}

/* Светлые темы — beige, blue, green, iris (все кроме violet) */
:root {
  --nql-bg-main:    rgba(247, 247, 247, 0.90);
  --nql-bg-soft:    rgba(0, 0, 0, 0.04);
  --nql-bg-hover:   rgba(0, 0, 0, 0.06);

  --nql-border:     rgba(100, 90, 80, 0.16);
  --nql-border-soft:rgba(0, 0, 0, 0.08);

  --nql-text-main:  rgba(30, 25, 20, 0.88);
  --nql-text-dim:   rgba(30, 25, 20, 0.55);
  --nql-text-soft:  rgba(30, 25, 20, 0.32);

  --nql-accent:     rgba(30, 25, 20, 0.75);
  --nql-danger:     rgba(180, 70, 70, 0.90);

  --nql-blur:       blur(20px);
  --nql-shadow:     0 20px 56px rgba(0, 0, 0, 0.12),
                    0 2px 0 rgba(255, 255, 255, 0.90) inset;

  --nota-ql-modal-bg:     rgba(248, 247, 245, 0.92);
  --nota-ql-modal-color:  rgba(30, 25, 20, 0.88);
  --nota-ql-modal-radius: 16px;
}

/* Тёмная тема — только violet */
.violet {
  --nql-bg-main:    rgba(38, 36, 34, 0.82);
  --nql-bg-soft:    rgba(255, 255, 255, 0.04);
  --nql-bg-hover:   rgba(255, 255, 255, 0.07);

  --nql-border:     rgba(255, 255, 255, 0.10);
  --nql-border-soft:rgba(255, 255, 255, 0.06);

  --nql-text-main:  rgba(255, 255, 255, 0.90);
  --nql-text-dim:   rgba(255, 255, 255, 0.55);
  --nql-text-soft:  rgba(255, 255, 255, 0.30);

  --nql-accent:     rgba(255, 255, 255, 0.80);
  --nql-danger:     rgba(210, 90, 90, 0.90);

  --nql-shadow:     0 20px 56px rgba(0, 0, 0, 0.50),
                    0 1px 0 rgba(255, 255, 255, 0.06) inset;

  --nota-ql-modal-bg:    rgba(38, 36, 34, 0.82);
  --nota-ql-modal-color: rgba(255, 255, 255, 0.90);
}

/* =====================================================
   ПАНЕЛЬ
   ===================================================== */

.nota-ql {
  position: relative;
  display: inline-block;
}

#nota-ql-navbtn {
  cursor: pointer;
  user-select: none;
}

/* Дропдаун */
.nota-ql-pane {
  position: absolute;
    right: -280px;
  top: 42px;
  z-index: 9999;

  width: 300px;
  max-width: 92vw;

  background: var(--nql-bg-main);
  color: var(--nql-text-main);
  backdrop-filter: var(--nql-blur);
  -webkit-backdrop-filter: var(--nql-blur);

  border: 1px solid var(--nql-border);
  border-radius: var(--nql-radius-lg);
  padding: 16px;

  box-shadow: var(--nql-shadow);
    font-family: var(--font2);

  opacity: 0;
  transform: translateY(-8px) scale(.98);
  pointer-events: none;
  transition: opacity .28s ease, transform .28s ease;
}

.nota-ql.open .nota-ql-pane {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* Заголовок */
.nota-ql-pane h4 {
  margin: 0 0 12px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--nql-text-soft);
}

/* ── Список аккаунтов ── */
.nota-ql-pane .list {
  max-height: 300px;
  overflow-y: auto;
  margin: 0 0 10px;
  scrollbar-width: thin;
  scrollbar-color: var(--nql-border) transparent;
}
.nota-ql-pane .list::-webkit-scrollbar { width: 3px; }
.nota-ql-pane .list::-webkit-scrollbar-thumb {
  background: var(--nql-border);
  border-radius: 3px;
}

.nota-ql-pane .item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px;
  align-items: center;
  border-bottom: 1px solid var(--nql-border-soft);
}
.nota-ql-pane .item:last-child { border-bottom: none; }

.nota-ql-pane .namezone {
    padding: 4px 6px;
    border-radius: var(--nql-radius-sm);
    font-size: 11px;
    font-weight: 300;
    font-family: var(--font2);
    color: var(--nql-text-main);
    background: transparent;
    cursor: pointer;
    transition: background .18s ease, color .18s ease, padding-left .18s ease;
    text-align: left;
}
.nota-ql-pane .namezone:hover {
  background: var(--nql-bg-hover);
  padding-left: 10px;
  color: var(--nql-accent);
}

/* ── Поля ввода ── */
.nota-ql-pane .row {
  display: flex;
  gap: 6px;
  margin: 8px 0;
  align-items: center;
}

.nota-ql-pane input[type="text"],
.nota-ql-pane input[type="password"] {
  flex: 1;
  background: var(--nql-bg-soft) !important;
  border: 1px solid var(--nql-border-soft) !important;
  border-radius: var(--nql-radius-sm) !important;
  padding: 7px 10px;
  font-size: 12px;
  color: var(--nql-text-main) !important;
  outline: none;
  transition: border .2s ease, background .2s ease;
  min-width: 0;
  box-sizing: border-box;
}
.nota-ql-pane input::placeholder { color: var(--nql-text-soft); }
.nota-ql-pane input:focus {
  border-color: var(--nql-border) !important;
  background: var(--nql-bg-hover) !important;
}

/* ── Кнопки ── */
.nota-ql-pane .btn {
  padding: 7px;
  border-radius: var(--nql-radius-sm);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background .18s ease, border .18s ease,
              color .18s ease, transform .12s ease, opacity .18s ease;
}
.nota-ql-pane .btn:hover { transform: translateY(-1px); }
.nota-ql-pane .btn:active { transform: translateY(0); opacity: .8; }

.nota-ql-pane .btn.primary {
  background: var(--nql-accent);
  color: var(--nql-bg-main);
  filter: none;
}
.nota-ql-pane .btn.primary:hover { opacity: .85; }

.nota-ql-pane .btn.ghost {
  background: transparent;
  border: 1px solid var(--nql-border);
  color: var(--nql-text-dim);
}
.nota-ql-pane .btn.ghost:hover {
  background: var(--nql-bg-hover);
  color: var(--nql-text-main);
  border-color: var(--nql-border);
}

.nota-ql-pane .btn.danger {
  width: 24px;
  height: 24px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--nql-border-soft);
  color: var(--nql-text-soft);
  font-size: 13px;
  flex-shrink: 0;
}
.nota-ql-pane .btn.danger:hover {
  background: var(--nql-danger);
  border-color: var(--nql-danger);
  color: #fff;
  transform: none;
}

/* ── Чекбокс «без постинга» ── */
.nota-ql-skip-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--nql-text-soft);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: color .18s ease;
}
.nota-ql-skip-label:hover { color: var(--nql-text-dim); }
.nota-ql-skip-label input[type="checkbox"] {
  margin: 0;
  cursor: pointer;
  accent-color: var(--nql-text-dim);
}

/* ── Импорт / Экспорт ── */
.nql-ie-toggle {
  margin-top: 10px;
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--nql-text-soft);
  cursor: pointer;
  user-select: none;
  transition: color .18s ease;
}
.nql-ie-toggle:hover { color: var(--nql-text-dim); }

.nql-ie {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--nql-border-soft);
}
.nql-ie.hidden { display: none; }

.nql-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px;
  margin-bottom: 6px;
}
.nql-row input[type="text"] {
  background: var(--nql-bg-soft);
  border: 1px solid var(--nql-border-soft);
  border-radius: var(--nql-radius-sm);
  padding: 5px 8px;
  font-size: 11px;
  color: var(--nql-text-dim);
  outline: none;
  min-width: 0;
}
.nql-btn {
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 600;
  border-radius: var(--nql-radius-sm);
  border: 1px solid var(--nql-border);
  background: transparent;
  color: var(--nql-text-dim);
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
  white-space: nowrap;
}
.nql-btn:hover {
  background: var(--nql-bg-hover);
  color: var(--nql-text-main);
}
.nql-note {
  font-size: 10px;
  color: var(--nql-text-soft);
  margin-top: 5px;
  line-height: 1.4;
  font-style: italic;
}

/* ── Тост лицензии ── */
.nota-ql-license-toast {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: var(--nql-bg-main);
  color: var(--nql-text-main);
  border: 1px solid var(--nql-border);
  backdrop-filter: var(--nql-blur);
  -webkit-backdrop-filter: var(--nql-blur);
  padding: 10px 14px;
  border-radius: var(--nql-radius-md);
  font-size: 12px;
  line-height: 1.4;
  max-width: 300px;
  z-index: 99999;
  box-shadow: 0 8px 24px rgba(0,0,0,.3);
  pointer-events: none;
}

/* =====================================================
   МОДАЛКА ВЫГУЛА
   ===================================================== */

.nota-ql-modal-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  background: transparent;
  pointer-events: none;
  opacity: 0;
  animation: notaQlFadeIn .4s cubic-bezier(.22,.68,0,1.2) forwards;
}
.nota-ql-modal-overlay.nota-ql-fadeout {
  animation: notaQlFadeOut .3s ease forwards;
}

.nota-ql-modal {
  pointer-events: auto;
  background: var(--nota-ql-modal-bg);
  color: var(--nota-ql-modal-color);
  backdrop-filter: var(--nql-blur);
  -webkit-backdrop-filter: var(--nql-blur);

  border: 1px solid var(--nql-border);
  border-radius: var(--nota-ql-modal-radius);
  box-shadow: var(--nql-shadow);

  padding: 32px 36px 28px;
  text-align: center;
  font-family: var(--font2, system-ui, sans-serif);
  max-width: 220px;
  width: 90%;
}

.nota-ql-modal__icon {
  font-size: 34px;
  margin-bottom: 12px;
  display: block;
  opacity: .9;
}

.nota-ql-modal__title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--nql-text-soft);
  margin-bottom: 8px;
}

.nota-ql-modal__sub {
  font-size: 18px;
  font-weight: 400;
  color: var(--nota-ql-modal-color);
  opacity: .9;
  margin-bottom: 4px;
  min-height: 26px;
  line-height: 1.3;
  letter-spacing: .01em;
}

.nota-ql-modal__dots {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin: 10px 0 0;
}
.nota-ql-modal__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--nql-border);
  transition: background .3s ease, transform .3s ease;
}
.nota-ql-modal__dot--active {
  background: var(--nql-text-dim);
  transform: scale(1.3);
}

.nota-ql-modal__divider {
  width: 24px;
  height: 1px;
  background: var(--nql-border);
  margin: 14px auto;
}

.nota-ql-modal__stop {
  background: transparent;
  color: var(--nql-text-soft);
  border: 1px solid var(--nql-border-soft);
  border-radius: var(--nql-radius-sm);
  padding: 7px 18px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .10em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border .2s ease;
  font-family: var(--font, system-ui, sans-serif);
}
.nota-ql-modal__stop:hover {
  background: var(--nql-danger);
  color: #fff;
  border-color: var(--nql-danger);
}

@keyframes notaQlFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes notaQlFadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}