/* ---------- widżety w dokumentach ---------- */

.widget { border: 1px solid var(--line-2); background: #070809; padding: 18px; margin: 20px 0; }
.w-h { font-size: 10px; letter-spacing: .2em; color: var(--text-mute); margin-bottom: 10px; }

.widget select, .widget input {
  width: 100%; padding: 10px 12px; background: #050606; color: var(--accent);
  border: 1px solid var(--line-2); font: inherit; font-size: 13px; outline: none;
}
.widget select:focus, .widget input:focus { border-color: var(--accent); }

.dial { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; }
.dial button { padding: 5px 10px; font-size: 11px; letter-spacing: .08em; cursor: pointer; background: transparent; color: var(--text-dim); border: 1px solid var(--line-2); }
.dial button:hover { color: var(--text); }
.dial button.on { background: var(--amber); border-color: var(--amber); color: #000; }

.w-out { margin-top: 14px; padding: 12px 14px; min-height: 48px; font-size: 13.5px; border-left: 3px solid var(--amber); background: rgba(214,160,44,.05); }
.w-out.red { border-left-color: var(--red); background: rgba(194,29,36,.08); color: #ff8a8f; }

.row2 { display: flex; gap: 10px; }
.row2 input { flex: 1; }
.row2 .btn { margin-top: 0; white-space: nowrap; }

.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn:disabled:hover { background: transparent; color: inherit; }

.w500 { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.w500 .big { font-family: var(--head); font-size: 54px; line-height: 1; color: #ff5359; text-shadow: 0 0 18px var(--red-glow); }
.w500 .w-h { margin: 4px 0 0; }
.w500 .btn { margin-top: 0; }

.ai-term { border-color: #1f4a2a; background: #020604; }
.ai-term .w-h { color: #4fae74; }
.ai-term pre { margin: 0; min-height: 160px; font-family: var(--mono); font-size: 13px; line-height: 1.5; color: #7dff9a; text-shadow: 0 0 8px rgba(125,255,154,.4); white-space: pre-wrap; }

.figure.working .fig-frame img { animation: shake .3s infinite; }

/* ---------- efekty ---------- */

.torch {
  position: fixed; inset: 0; z-index: 580; pointer-events: none;
  background: radial-gradient(circle 190px at var(--x, 50%) var(--y, 50%), transparent 0, transparent 45%, rgba(0,0,0,.97) 100%);
}

.face87 { position: fixed; z-index: 590; width: 70px; pointer-events: none; opacity: .85; filter: blur(.6px) drop-shadow(0 0 20px rgba(217,212,199,.3)); animation: face87 .5s ease-out; }
@keyframes face87 { from { transform: scale(.6); opacity: 0; } 30% { opacity: .9; } to { transform: scale(1.15); opacity: .4; } }

.whisper { color: #ff8a8f !important; font-style: italic; text-shadow: 0 0 10px var(--red-glow); animation: glitch .3s steps(2) 1; }

.fade-out { opacity: .06; filter: blur(3px); transition: opacity 3s, filter 3s; }
.forgot { padding: 30px 0; font-size: 18px; color: var(--text-dim); animation: docIn 1s ease; }
.forgot p { margin: 0 0 10px; }

.picto { font-size: 22px; letter-spacing: .3em; color: var(--accent); line-height: 1.8; }
.stolen { display: inline-block; min-width: 1.5em; border-bottom: 1px dashed var(--red); background: rgba(194,29,36,.1); animation: glitch .3s steps(2) 1; }

.malo { position: fixed; z-index: 620; pointer-events: none; transition: opacity .6s; filter: drop-shadow(0 0 14px #000); }
.malo svg { width: 100%; height: 100%; display: block; }

@media (max-width: 560px) {
  .row2 { flex-direction: column; }
}