/* =====================================================
   Notacross — Быстрая смена аккаунтов · Лайт v1.4 (чистая)
   ===================================================== */

/* === Панель быстрого входа === */
.nota-ql-pane {
  position: absolute;
  left: 50%;
  top: 42px;
  z-index: 9999;
  width: 320px;
  max-width: 92vw;
  background: var(--pun);
  border-radius: 10px;
  padding: 10px;
  border: 1px solid var(--borders);
  opacity: 0;
  transform: translateY(-6px) translateX(-50%);
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  font: 400 11px var(--font);
}
.nota-ql.open .nota-ql-pane {
  opacity: 1;
  transform: translateY(0) translateX(-50%);
  pointer-events: auto;
}

.nota-ql h4 {
  margin: 0 0 6px;
  font-size: 10px;
  opacity: .9;
  font-weight: 500;
  text-transform: uppercase;
}

.nota-ql .row {
  display: flex;
  gap: 5px !important;
  margin: 10px 0;
}

.nota-ql input[type="text"],
.nota-ql input[type="password"] {
  flex: 1;
  transition: .2s ease;
  height: 24px;
      height: 20px;
    width: 40%;
}
.nota-ql input:focus {
  outline: none;
}

.nota-ql .list {
  max-height: 360px;
  overflow: auto;
  margin: 6px 0;
  border-radius: 10px;
  background: var(--cover2);
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 5px;
  justify-content: flex-start;
}

.nota-ql .item {
  display: flex;
  gap: 2px;
  justify-content: space-between;
  align-items: center;
  padding: 0 !important;
}

.nota-ql .namezone {
  cursor: pointer;
  background: var(--links);
  color: var(--text3);
  border-radius: 6px;
  padding: 0 10px;
  transition: .25s ease;
  align-self: stretch;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
}

.nota-ql .namezone b {
  font-weight: 500
}

.nota-ql .namezone:hover { background: var(--accent); }

.nota-ql .btn {
  padding: 5px 10px !important;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  font-size: 11px;
  font-weight: 300;
  transition: all .2s ease;
  margin: 0 !important;
  position: relative;
}

.nota-ql .btn.danger:before {
  content: "\f00d";
  font: 10px FontAwesome;
}

.nota-ql .danger {
  font-size: 0
}

.nota-ql .btn.primary:before{
  content: "\2b";
  font: 10px FontAwesome;
}

.nota-ql .btn.ghost:before{
  content: "\f54b";
  font: 10px FontAwesome;
}

.nota-ql .btn:hover { filter: brightness(1.1); }

.nota-ql .primary { 
  background:var(--accent); 
  color:var(--text3); 
    display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.nota-ql .danger  { 
  background: var(--red-accent); 
  color:var(--text3); 
}

.nota-ql .ghost {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}


.nql-ie {
  margin-top: 12px;
  border-top: 1px dashed var(--borders);
  padding-top: 10px
}
.nql-ie h4 {
  margin: 0 0 8px;
  font-size: 10px;
  font-weight: 400;
}
.nql-row {
  display: flex;
  gap: 5px;
  align-items: center;
  margin: 6px 0;
}
.nql-row input[type="text"] {
  width: 100%;
  height: 25px;
  overflow: clip;
  box-sizing: border-box
}
.nql-btn {
  padding: 2px 6px !important;
  font-size: 10px;
  font-weight: 600;
  height: 25px;
  margin: 0 !important;
  box-sizing: border-box;
}
.nql-btn[disabled] { opacity: .5; cursor: default; }
.nql-note { opacity: .6; font-size: 9px; margin-top: 4px; }

.ql-note {display:none;}

/* === Центральная плашка статуса выгула === */
#nota-ql-centerbox {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  background: transparent;
  pointer-events: none;
  opacity: 0;
  animation: nqlcFadeIn .4s ease forwards;
}
#nota-ql-centerbox.fadeout { animation: nqlcFadeOut .4s ease forwards; }

.nqlc-inner {
  pointer-events: auto;
  background: rgb(20 20 22 / .95);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
  padding: 28px 38px;
  color: #fff;
  text-align: center;
  font-family: system-ui, sans-serif;
  max-width: 340px;
  animation: nqlcPulse 2.5s ease-in-out infinite;
}
.nqlc-icon {
  font-size: 40px;
  margin-bottom: 10px;
}
.nqlc-text {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 18px;
}
.nqlc-sub {
  display: block;
  font-size: 13px;
  font-weight: 400;
  opacity: .7;
}
.nqlc-stop {
  background: #ff4d4f;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 18px;
  font-size: 14px;
  cursor: pointer;
  transition: filter .2s ease, transform .2s ease;
}
.nqlc-stop:hover { filter: brightness(1.1); transform: translateY(-1px); }
.nqlc-stop:active { filter: brightness(.95); transform: translateY(0); }

@keyframes nqlcFadeIn {from{opacity:0;transform:scale(.95);}to{opacity:1;transform:scale(1);}}
@keyframes nqlcFadeOut {from{opacity:1;transform:scale(1);}to{opacity:0;transform:scale(.95);}}
@keyframes nqlcPulse {
  0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,.05);}
  50%{box-shadow:0 0 25px 5px rgba(255,255,255,.05);}
}


/* === Cross-browser autofill styling for Quick Login === */
.nota-ql input:-webkit-autofill,
.nota-ql input:-webkit-autofill:hover,
.nota-ql input:-webkit-autofill:focus {
  border: 1px solid rgba(255,255,255,.15);
  -webkit-text-fill-color: #fff !important;
  -webkit-box-shadow: 0 0 0 1000px #0a0a0a inset !important;
  box-shadow: 0 0 0 1000px #0a0a0a inset !important;
  transition: background-color 5000s ease-in-out 0s;
}

/* Firefox autofill (uses :-moz-autofill) */
.nota-ql input:-moz-autofill {
  border: 1px solid rgba(255,255,255,.15) !important;
  color: #fff !important;
  box-shadow: 0 0 0 1000px #0a0a0a inset !important;
}

/* Generic input fallback (for Safari or future engines) */
.nota-ql input:-internal-autofill-selected {
  background-color: #0a0a0a !important;
  color: #fff !important;
  box-shadow: 0 0 0 1000px #0a0a0a inset !important;
}

/* === Нота Quick Login — namespace isolation === */
.nota-ql-box {
  all: initial;            /* 🔰 сбросить все унаследованные стили */
  * {
    all: unset;            /* сбросить у всех потомков */
  }
  font-family: inherit;    /* вернуть шрифт форума */
  color: #fff;
  display: block;
  position: relative;
  text-align: left;
  line-height: 1.4;
  font-size: 13px;
}

.nota-ql-box h4 {
  all: unset;
  display: block;
  font-weight: bold;
  margin: 0 0 8px 0;
  font-size: 12px;
  opacity: .85;
  color: #fff;
}

.nota-ql-box button,
.nota-ql-box input {
  all: unset;
  box-sizing: border-box;
  font-size: 13px;
  font-family: inherit;
}

.nota-ql-box button {
  cursor: pointer;
}

/* === Fix Chrome autofill color === */
.nota-ql input:-webkit-autofill,
.nota-ql input:-webkit-autofill:hover,
.nota-ql input:-webkit-autofill:focus {
  border: 1px solid rgba(255,255,255,.15);
  -webkit-text-fill-color: #fff;
  -webkit-box-shadow: 0 0 0 1000px #0a0a0a inset !important;
  box-shadow: 0 0 0 1000px #0a0a0a inset !important;
  transition: background-color 5000s ease-in-out 0s; /* блокирует миг при заполнении */
}