/* MYSTICA v8 — test panel (agent B): ⚙ button, states drawer, device frames (computer, tablet, phone, Telegram).
   Demo tool only: rights live in this browser, the server checks them in production. */
.tp-fab{position:fixed;left:calc(10px + var(--sal));bottom:calc(var(--tab-h) + var(--cta-h) + var(--pb,0px) + 12px);z-index:310;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;color:var(--gold2);background:rgba(23,18,33,.9);border:1px solid var(--line2);box-shadow:0 8px 22px rgba(0,0,0,.45);touch-action:manipulation;transition:transform .3s var(--spring)}
/* below sheets (z 80/81) so it never covers a paywall or checkout; above the device stage when it is open */
.tp-fab{z-index:79}
body.tp-open .tp-fab,body.tp-staged .tp-fab{z-index:310}
.tp-fab .ic{width:20px;height:20px}
.tp-fab:active{transform:scale(.9)}
body.no-cta .tp-fab{bottom:calc(var(--tab-h) + var(--pb,0px) + 12px)}
body.tp-open .tp-fab{color:#1A1209;background:linear-gradient(180deg,#F3DCAA,#C9A063);transform:rotate(60deg)}
body.immersive .tp-fab{bottom:calc(12px + var(--pb,0px))}
@media (min-width:900px){.tp-fab,body.no-cta .tp-fab{bottom:18px;left:18px}}

.tp{position:fixed;z-index:300;left:0;right:0;bottom:0;max-height:min(74vh,660px);overflow:auto;overscroll-behavior:contain;padding:12px calc(14px + var(--sar)) calc(18px + var(--pb,0px)) calc(14px + var(--sal));border-radius:20px 20px 0 0;background:linear-gradient(180deg,#1F1628,#0F0B16);border:1px solid var(--line2);border-bottom:0;box-shadow:0 -20px 50px rgba(0,0,0,.6);color:var(--text);font:14px/1.4 var(--sans);transform:translate3d(0,105%,0);transition:transform .4s var(--ease);visibility:hidden}
body.tp-open .tp{transform:none;visibility:visible}
@media (min-width:900px){
  .tp{left:auto;top:0;right:0;bottom:0;width:360px;max-height:none;padding:16px 16px 24px;border-radius:0;border:0;border-left:1px solid var(--line2);transform:translate3d(105%,0,0)}
}
.tp-h{display:flex;align-items:center;gap:10px}
.tp-h b{flex:1;font:500 21px/1.2 var(--serif);color:var(--ivory2)}
.tp-x{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:rgba(241,225,196,.07);color:var(--muted)}
.tp-x .ic{width:18px;height:18px}
.tp-note{margin:8px 0 2px;padding:8px 10px;border-radius:10px;background:rgba(230,182,110,.1);border:1px solid rgba(230,182,110,.35);color:#F2D29E;font-size:12.5px;line-height:1.35}
.tp-sec{margin-top:16px}
.tp-sec h4{margin-bottom:8px;font:600 11.5px/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.tp-chips,.tp-row{display:flex;flex-wrap:wrap;gap:6px}
.tp-chip{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 12px;border-radius:999px;border:1px solid var(--line);background:rgba(11,9,17,.6);color:var(--muted);font-size:13px;touch-action:manipulation}
.tp-chip small{font-size:10.5px;opacity:.7}
.tp-chip.on{color:#1A1209;background:linear-gradient(180deg,#F3DCAA,#C9A063);border-color:transparent;font-weight:600}
.tp-chip:active{transform:scale(.96)}
.tp-warn{color:var(--warn)}
.tp-danger{border-color:rgba(227,138,122,.5);color:#F2B5A9}
.tp-danger.arm{background:rgba(227,138,122,.2);color:#FFD6CC}
.tp-now{margin-bottom:8px;font-size:13px;color:var(--ivory2)}
.tp-days{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:10px}
.tp-days label{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted)}
.tp-days input{width:66px;min-height:36px;padding:0 8px;border-radius:10px;border:1px solid var(--line2);background:rgba(11,9,17,.8);color:var(--ivory2);font-size:16px}
.tp-oos{display:grid;gap:2px}
.tp-oo{display:flex;align-items:center;gap:9px;min-height:36px;padding:2px 4px;border-radius:8px;font-size:13.5px;cursor:pointer}
.tp-oo span{flex:1}
.tp-oo i{font-style:normal;font-size:10.5px;color:#B6E2BE;border:1px solid rgba(143,199,154,.4);border-radius:999px;padding:1px 6px;margin-left:4px}
.tp-oo b{color:var(--gold2);font-weight:600;white-space:nowrap}
.tp-oo input,.tp-check input{width:18px;height:18px;accent-color:#C69C61;flex:none}
.tp-credit{margin-top:6px;font-size:12.5px;color:#B6E2BE}
.tp-check{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:13px;color:var(--muted);cursor:pointer}

/* stage with a device frame */
body.tp-staged{overflow:hidden}
body.tp-staged .toast{z-index:400}
.tp-stage{position:fixed;inset:0;z-index:290;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:10px 16px;background:radial-gradient(120% 90% at 50% 0%,#2A1A33,#0B0911 70%)}
.tp-cap{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px 10px;font-size:12.5px;color:var(--muted)}
.tp-cap b{font:500 17px/1 var(--serif);color:var(--ivory2)}
.tp-sbtn{display:inline-flex;align-items:center;min-height:30px;padding:0 12px;border-radius:999px;border:1px solid var(--line2);background:rgba(23,18,33,.8);color:var(--ivory2);font-size:12.5px}
.tp-hap{color:var(--gold2);opacity:0}
.tp-hap.on{animation:tpHap 1.3s ease-out}
@keyframes tpHap{0%,40%{opacity:1}100%{opacity:0}}
.tp-fit{position:relative;flex:none}
.tp-dev{position:absolute;left:0;top:0;transform-origin:0 0}
.tp-body{padding:12px;border-radius:54px;background:linear-gradient(160deg,#2A2230,#09070C 60%);box-shadow:0 0 0 1px rgba(198,156,97,.35),0 30px 80px rgba(0,0,0,.7)}
.tp-body.buzz{animation:tpBuzz .09s linear 3}
@keyframes tpBuzz{0%,100%{transform:translate3d(0,0,0)}25%{transform:translate3d(-2px,0,0)}75%{transform:translate3d(2px,0,0)}}
.tp-inner{overflow:hidden;border-radius:42px;background:#0B0911}
.tp-screen{position:relative;overflow:hidden;background:#0B0911}
.tp-screen iframe{display:block;width:100%;height:100%;border:0;background:#0B0911}
.tp-status{display:flex;align-items:center;justify-content:space-between;height:44px;padding:0 30px;color:#F1E1C4;font:600 14px/1 var(--sans);background:#0B0911}
.tp-island{width:112px;height:31px;border-radius:20px;background:#000}
.tp-home{display:grid;place-items:center;height:34px;background:#0B0911}
.tp-home::before{content:"";width:134px;height:5px;border-radius:3px;background:rgba(241,225,196,.55)}
.tp-tablet .tp-body{padding:16px;border-radius:38px}
.tp-tablet .tp-inner{border-radius:22px}
.tp-st-s{height:24px;padding:0 22px;font-size:12px}
.tp-home-s{height:20px}
.tp-home-s::before{width:160px;height:5px}
.tp-desktop .tp-body{padding:0;border-radius:14px;background:#1A1420}
.tp-desktop .tp-inner{border-radius:14px}
.tp-bar{display:flex;align-items:center;gap:7px;height:38px;padding:0 14px;background:#231A2C;border-bottom:1px solid rgba(198,156,97,.2)}
.tp-bar i{width:12px;height:12px;border-radius:50%;background:#4A3A55}
.tp-bar i:first-child{background:#C9705F}.tp-bar i:nth-child(2){background:#D9B062}.tp-bar i:nth-child(3){background:#7FAF82}
.tp-url{margin-left:14px;flex:1;max-width:480px;height:24px;line-height:24px;padding:0 12px;border-radius:999px;background:#120D18;color:var(--muted);font-size:12.5px}
/* Telegram chrome: header with Close/Back, MainButton under the web view */
.tp-tgh{display:flex;align-items:center;gap:8px;height:48px;padding:0 10px;background:#17121F;border-bottom:1px solid rgba(198,156,97,.16)}
.tp-tgl{min-width:78px;height:34px;padding:0 6px;text-align:left;color:#E6C68E;font:500 15px/1 var(--sans)}
.tp-tgt{flex:1;display:flex;flex-direction:column;align-items:center;line-height:1.15}
.tp-tgt b{font:600 15px/1.2 var(--sans);color:#F1E1C4}
.tp-tgt small{font-size:11.5px;color:#A8977C}
.tp-tgm{min-width:78px;text-align:right;color:#E6C68E;font-size:20px;padding-right:6px}
.tp-tgbar{background:#0B0911}
.tp-tgmain{position:relative;display:block;width:calc(100% - 16px);height:46px;margin:5px 8px;border-radius:12px;overflow:hidden;background:#C69C61;color:#1A1209;font:600 15.5px/1 var(--sans);white-space:nowrap;text-overflow:ellipsis}
.tp-tgmain[hidden]{display:none}
.tp-tgmain.off{opacity:.5}
.tp-tgmain.busy::after{content:"";position:absolute;top:0;bottom:0;left:0;width:40%;background:linear-gradient(100deg,transparent,rgba(255,250,235,.6),transparent);animation:tpBusy 1.1s ease-in-out infinite}
@keyframes tpBusy{from{transform:translate3d(-100%,0,0)}to{transform:translate3d(260%,0,0)}}
/* inside a frame: no panel; slimmer scrollbars */
body.in-frame{scrollbar-width:thin}