@font-face{font-family:'Bebas Neue Pro SemiExpanded';font-style:normal;font-weight:500;src:url('../icons/Bebas Neue Pro SemiExpanded Middle.ttf') format('truetype')}
@font-face{font-family:'Bebas Neue Pro SemiExpanded';font-style:italic;font-weight:400;src:url('../icons/Bebas Neue Pro SemiExpanded Book Italic.ttf') format('truetype')}

:root{--panel-w:320px}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:#000;color:#cfe;overflow:hidden;font-family:'Bebas Neue Pro SemiExpanded',Segoe UI,Roboto,Arial;position:relative}

/* Fixed 1920x1080 design surface, uniformly scaled (letterboxed) to fit any real
   screen/window size via JS-computed transform — guarantees nothing inside is
   ever cropped or spills past the desktop frame, regardless of resolution. */
#stage{position:fixed;left:0;top:0;width:1920px;height:1080px;transform-origin:0 0;background:#000}
#bg{position:absolute;left:0;top:0;width:1920px;height:1080px;display:block;clip-path:polygon(23.5px 61.5px, calc(100% - 23.5px) 61.5px, calc(100% - 23.5px) calc(100% - 56.5px), 23.5px calc(100% - 56.5px))}
#debug{position:fixed;right:16px;top:16px;width:var(--panel-w);background:rgba(8,10,12,0.7);backdrop-filter:blur(6px);color:#dff;padding:14px;border-radius:8px;font-size:13px}
#debug h3{margin:0 0 8px 0;font-size:15px}
.row{display:flex;align-items:center;gap:8px;margin:8px 0}
.row label{flex:1}
.row input[type=range]{flex:1}
.row input[type=color]{width:48px;height:28px;padding:0;border:0;background:transparent}
.buttons{display:flex;gap:8px}
.buttons button{flex:1;padding:6px;border-radius:6px;border:1px solid rgba(255,255,255,0.06);background:rgba(255,255,255,0.02);color:#dff;cursor:pointer;transition:transform .06s ease,box-shadow .06s ease,background .08s}
.buttons button:active{transform:translateY(1px) scale(0.997);background:rgba(255,255,255,0.04);box-shadow:inset 0 1px 4px rgba(0,0,0,0.35)}
.buttons button:focus{outline:2px solid rgba(180,255,255,0.08)}
small{display:block;color:#9fb;font-size:11px;margin-top:8px}

@media (max-width:1200px){:root{--panel-w:260px}}

/* helper to hide the debug panel */
.hidden{display:none !important}

/* Top bar — spans frame width from x=23.5 to x=1897 on 1920w, with gap from frame */
#topbar{position:absolute;left:23.5px;right:23.5px;top:15px;display:flex;justify-content:space-between;align-items:center;color:#bff;padding:8px 12px;font-size:14px;border:1px solid #797979;border-radius:6px;background:linear-gradient(180deg,rgba(0,0,0,0.22),rgba(255,255,255,0.01))}
#topbar #user{font-weight:400;font-style:italic;opacity:0.95;padding-left:8px}
#topbar #clock{font-family:'Bebas Neue Pro SemiExpanded',Consolas,monospace;background:transparent;padding:6px 10px;border-radius:6px;border:0;color:#fff}
#topbar .topbarRight{display:flex;align-items:center;gap:14px}

/* Status icons (signal/wifi/battery) — cropped from a single sprite sheet.
   Source icon glyphs sit inside a 112,326 -> 622,410 box on a 736x736
   transparent canvas; scaled/offset here so only that strip is visible. */
#statusIcons{width:121.43px;height:20px;overflow:hidden;position:relative}
#statusIcons img{position:absolute;left:-26.67px;top:-77.62px;width:175.24px;height:175.24px;max-width:none}

/* Desktop layout */
#desktop{position:absolute;left:0;top:0;right:0;bottom:0;pointer-events:none}
#icons{position:absolute;left:48px;top:140px;display:flex;flex-direction:column;gap:18px;pointer-events:auto}
.icon{width:92px;display:flex;flex-direction:column;align-items:center;cursor:pointer;user-select:none}
.icon img{width:72px;height:72px;object-fit:contain;filter:drop-shadow(0 2px 8px rgba(0,0,0,0.6))}
.icon .caption{margin-top:6px;color:#cce;font-size:11px;text-align:center;font-family:'Bebas Neue Pro SemiExpanded',Arial}

.mapPlaceholder{background:rgba(6,8,10,0.6);border:1px solid #797979;border-radius:8px;padding:8px;margin-bottom:12px}
.mapPlaceholder{background:rgba(6,8,10,0.6);border:1px solid #797979;border-radius:8px;padding:8px;margin-bottom:12px}
.mapPlaceholder img{width:100%;height:140px;object-fit:cover;border-radius:4px}
#mapSmall img{height:92px}
#coords{font-family:Consolas,monospace;background:rgba(0,0,0,0.45);padding:6px 10px;border-radius:6px;border:1px solid rgba(255,255,255,0.04)}

/* Windows container */
#windows{position:absolute;left:0;top:0;right:0;bottom:0;pointer-events:none}
.window{width:560px;background:rgba(2,6,8,0.92);border:1px solid rgba(0,255,200,0.06);color:#cfe;border-radius:8px;position:absolute;box-shadow:0 8px 30px rgba(0,0,0,0.6);pointer-events:auto}
.window .title{background:linear-gradient(180deg,rgba(0,0,0,0.25),rgba(255,255,255,0.02));padding:10px 12px;border-top-left-radius:8px;border-top-right-radius:8px;cursor:grab;font-weight:600;border-bottom:1px solid rgba(121,121,121,0.25)}
.window .content{padding:12px;font-size:13px;max-height:700px;overflow-y:auto}
.window .close{position:absolute;right:10px;top:8px;width:20px;height:20px;border-radius:4px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.window .close:hover{background:rgba(255,255,255,0.03)}

/* small responsive tweaks */
@media (max-width:1000px){#mapPanel{display:none}} 

/* centered special operations icon */
#specOp{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:auto;display:flex;align-items:center;justify-content:center}
#specOp img{width:220px;height:220px;object-fit:contain;filter:drop-shadow(0 8px 24px rgba(0,0,0,0.7))}

/* page inner frame outline only, no fill outside — scoped to the stage so it
   always sits at the true edge of the 1920x1080 design regardless of scale */
#stage::after{content:'';position:absolute;left:23.5px;top:61.5px;right:23.5px;bottom:56.5px;border:1px solid #797979;pointer-events:none;border-radius:2px;background:transparent}

/* MAP_1 box — coords matched pixel-for-pixel against MainScreen.png
   (x=1427.5 y=516.5 w=429 h=429 on the 1920x1080 stage) */
#mapAll{position:absolute;left:74.328125%;top:47.796296%;width:22.34375%;height:39.722222%;pointer-events:auto;border:2px solid rgba(255,255,255,0.85);border-radius:2px;overflow:hidden;background:rgba(6,8,10,0.45);box-shadow:0 8px 24px rgba(0,0,0,0.6);z-index:1}

/* "General map" opening effect — reuse MAP_1 itself: it starts small/dim
   (standing in for a wide overview) then zooms up to full size in place,
   no separate overview asset needed. */
#mapMain{width:100%;height:100%;object-fit:contain;object-position:center;display:block;transform-origin:center center;transform:scale(0.55);opacity:0.65;transition:transform 1.2s ease,opacity 1.2s ease}
body.map-zoomed #mapMain{transform:scale(1);opacity:1}

/* Pointer on MAP_1 — plain white ring, position configurable via
   POINTER_1 in desktop.js (left/top set inline from that config) */
.mapRingPointer{position:absolute;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;border:3px solid #fff;background:rgba(0,0,0,0.35);box-shadow:0 0 6px rgba(0,0,0,0.6);opacity:0;transform:scale(0.3);transition:opacity .35s ease,transform .35s ease;z-index:2}
body.map-pointer-on .mapRingPointer{opacity:1;transform:scale(1)}

/* Leader line (SVG, bent horizontal+diagonal path) from MAP_2's edge to
   the pointer on MAP_1 — path "d" is computed in desktop.js from the two
   boxes + POINTER_1, and revealed via a stroke-dashoffset draw-on effect */
#mapLine{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
#mapLinePath{opacity:0;transition:opacity .05s linear}
body.map-line-on #mapLinePath{opacity:1}

/* MAP_2 — zoomed-in detail callout panel, overlapping MAP_1's top-left
   corner and rendered on top of it (coords matched against the mockup:
   x=1341 y=476 w=217 h=217 on the 1920x1080 stage) */
#mapMini{position:absolute;left:69.84375%;top:44.074074%;width:11.302083%;height:20.092593%;border:2px solid rgba(255,255,255,0.85);border-radius:2px;overflow:hidden;background:rgba(6,8,10,0.65);box-shadow:0 8px 20px rgba(0,0,0,0.6);opacity:0;transform:scale(0.55);transition:opacity .5s ease,transform .5s ease;pointer-events:none;transform-origin:center center;z-index:3}
#mapMini img{width:100%;height:100%;object-fit:contain;object-position:center;display:block}
body.map-mini-on #mapMini{opacity:1;transform:scale(1)}

/* Pointer on MAP_2 — map-pin glyph, position configurable via POINTER_2 */
.mapPinPointer{position:absolute;width:22px;height:27.5px;margin:-25px 0 0 -11px;opacity:0;transform:scale(0.4);transform-origin:bottom center;transition:opacity .3s ease,transform .3s ease;z-index:4}
body.map-mini-pointer-on .mapPinPointer{opacity:1;transform:scale(1)}

/* ===== Decorative hatch stripes (scattered around the map, per MainScreen.png) =====
   Appear once the whole map sequence has finished loading. */
.hatchDeco{position:absolute;background:repeating-linear-gradient(65deg, rgba(210,210,210,0.8) 0px, rgba(210,210,210,0.8) 6px, transparent 6px, transparent 13px);opacity:0;transition:opacity .6s ease;pointer-events:none}
body.map-decor-on .hatchDeco{opacity:1}
#hatchAboveMini{left:76.8229%;top:41.6667%;width:4.1667%;height:2.3148%}
#hatchTopRightMain{left:92.1875%;top:45.8333%;width:4.4271%;height:2.3148%}
#hatchSideVertical{left:68.6458%;top:56.4815%;width:1.0417%;height:7.4074%}
#hatchBelowCoords{left:66.7708%;top:79.6296%;width:4.0625%;height:1.4815%}
#hatchBelowMain{left:74.6354%;top:88.7037%;width:4.1667%;height:2.3148%}

/* ===== Coordinates plate — coords matched against MainScreen.png
   (x=1278 y=754 w=121 h=99 on the 1920x1080 stage) =====
   "Раздвигается": starts as a flat sliver and opens up vertically from
   its own center, then the title and rolled-digit numbers fade in. */
#coordsPlate{position:absolute;left:66.5625%;top:69.8148%;width:6.3021%;height:9.1667%;background:rgba(18,18,18,0.75);border:1px solid rgba(255,255,255,0.18);border-radius:2px;overflow:hidden;padding:7px 9px;box-sizing:border-box;font-family:'Bebas Neue Pro SemiExpanded',Consolas,monospace;transform:scaleY(0.05);transform-origin:center center;opacity:0;transition:transform .55s ease,opacity .25s ease}
body.coords-plate-on #coordsPlate{transform:scaleY(1);opacity:1}
.coordsTitle{color:#fff;font-size:13px;letter-spacing:.5px;margin-bottom:7px;opacity:0;transition:opacity .4s ease}
body.coords-title-on .coordsTitle{opacity:1}
.coordsRow{color:#9a9a9a;font-size:11px;line-height:1.6;opacity:0;transition:opacity .3s ease;font-variant-numeric:tabular-nums}
body.coords-numbers-on .coordsRow{opacity:1}

/* ===== Power-on screen ===== */
#powerScreen{position:fixed;inset:0;background:#000;z-index:9100;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;transition:opacity .4s ease}
#powerScreen.hidden{display:none}
.powerBtn{width:110px;height:110px;border-radius:50%;border:2px solid #797979;background:radial-gradient(circle at 35% 30%, rgba(255,255,255,0.08), rgba(0,0,0,0.5));display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;padding:0}
.powerBtn:hover{background:radial-gradient(circle at 35% 30%, rgba(255,255,255,0.14), rgba(0,0,0,0.5))}
.powerBtn svg{width:46px;height:46px;pointer-events:none}
.powerBtn .led{position:absolute;top:16px;right:16px;width:10px;height:10px;border-radius:50%;background:#3a1414;box-shadow:0 0 4px rgba(255,0,0,0.35);transition:background .3s ease,box-shadow .3s ease}
.powerBtn.on .led{background:#4cff8a;box-shadow:0 0 10px 3px rgba(76,255,138,0.85)}
.powerBtn.on{border-color:#4cff8a}
.powerLabel{font-family:Consolas,'Courier New',monospace;color:#9fb;font-size:13px;letter-spacing:2px;text-transform:uppercase}

/* ===== BIOS boot screen ===== */
#bootScreen{position:fixed;inset:0;background:#000;color:#c8c8c8;font-family:Consolas,'Courier New',monospace;font-size:14px;line-height:1.5;padding:24px;z-index:9000;overflow:hidden;white-space:pre-wrap}
#bootLines{margin:0;white-space:pre-wrap}

/* ===== Login screen ===== */
#loginScreen{position:fixed;inset:0;background:#000;z-index:8900;display:flex;align-items:center;justify-content:center;font-family:Consolas,'Courier New',monospace;color:#cfe;opacity:0;transition:opacity .6s ease}
#loginScreen:not(.hidden){opacity:1}
.loginBox{border:1px solid #797979;border-radius:6px;padding:28px 32px;min-width:340px;background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(0,0,0,0.3))}
.loginTitle{margin-bottom:18px;letter-spacing:1px;color:#9fe}
.loginBox label{display:block;margin-bottom:14px;font-size:13px;color:#9fb}
.loginBox input{display:block;margin-top:6px;width:100%;background:#000;border:1px solid #797979;border-radius:4px;color:#cfe;padding:8px 10px;font-family:inherit;font-size:14px}
.loginBox input:focus{outline:none;border-color:#5ff}
.loginBox button{margin-top:6px;width:100%;padding:9px;border-radius:4px;border:1px solid #797979;background:rgba(255,255,255,0.04);color:#dff;cursor:pointer;font-family:inherit;font-size:14px}
.loginBox button:hover{background:rgba(255,255,255,0.08)}
#loginError{margin-top:12px;color:#f66;font-size:12px}

/* ===== Auth reveal sequencing ===== */
body.pre-auth #bg,body.pre-auth #topbar,body.pre-auth #desktop{opacity:0;pointer-events:none}
#bg,#topbar,#desktop{transition:opacity 1s ease}
#specOp{opacity:0;transition:opacity 1.1s ease}
body.reveal-emblem #specOp{opacity:1}
#icons,#mapAll{opacity:0;transition:opacity .9s ease}
body.reveal-rest #icons,body.reveal-rest #mapAll{opacity:1}

/* map scanning effect on reveal */
#mapScan{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 0%,rgba(150,255,220,0.35) 48%,transparent 100%);background-size:100% 260%;background-position:0 -160%;opacity:0}
body.map-scanning #mapScan{opacity:1;animation:mapScanSweep 1.8s linear 1}
@keyframes mapScanSweep{0%{background-position:0 -160%}100%{background-position:0 160%}}

/* ===== Window open/close animation ===== */
.window{transform-origin:top left;transform:scale(0.94);opacity:0;transition:transform .22s ease,opacity .22s ease}
.window.open{transform:scale(1);opacity:1}
.window.closing{transform:scale(0.9);opacity:0}

/* ===== Улики: folder grid ===== */
.evidenceGrid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;max-height:360px;overflow-y:auto;padding-right:4px}
.evidenceCell{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 4px;border:1px solid rgba(121,121,121,0.3);border-radius:6px;cursor:pointer;text-align:center}
.evidenceCell:hover{background:rgba(255,255,255,0.04)}
.evidenceCell img,.evidenceCell svg{width:40px;height:40px}
.evidenceCell .capt{font-size:11px;color:#cce;line-height:1.3}
.evidenceEmpty{color:#9fb;font-size:13px;padding:12px 0;text-align:center}

/* ===== Modal viewer ===== */
.modalOverlay{position:fixed;inset:0;background:rgba(0,0,0,0.7);z-index:9500;display:flex;align-items:center;justify-content:center}
.modalBox{background:#050807;border:1px solid #797979;border-radius:8px;max-width:640px;width:90%;max-height:80vh;overflow-y:auto;padding:18px;position:relative}
.modalBox h3{margin:0 0 10px 0;color:#9fe}
.modalBox .modalClose{position:absolute;right:10px;top:10px;cursor:pointer;color:#cfe;width:22px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:4px}
.modalBox .modalClose:hover{background:rgba(255,255,255,0.06)}
.modalBox img,.modalBox video{max-width:100%;border-radius:4px;display:block;margin-bottom:10px}
.modalBox audio{width:100%;margin-bottom:10px}
.modalBox p{font-size:13px;line-height:1.5;color:#cde}

/* ===== Сканер отпечатков ===== */
.scannerList{display:flex;flex-direction:column;gap:8px;margin:10px 0}
.scannerItem{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;border:1px solid rgba(121,121,121,0.3);border-radius:6px}
.scannerItem button{padding:6px 12px;border-radius:4px;border:1px solid #797979;background:rgba(255,255,255,0.04);color:#dff;cursor:pointer;font-family:inherit}
.scannerItem button:hover{background:rgba(255,255,255,0.08)}
.scannerStatus{margin-top:10px;font-size:13px;color:#9fe}

/* ===== База_Данных ===== */
.dbSearchRow{display:flex;gap:8px;margin-bottom:14px}
.dbSearchRow input{flex:1;background:#000;border:1px solid #797979;border-radius:4px;color:#cfe;padding:8px 10px;font-family:inherit}
.dbSearchRow button{padding:8px 16px;border-radius:4px;border:1px solid #797979;background:rgba(255,255,255,0.04);color:#dff;cursor:pointer;font-family:inherit}
.dbSearchRow button:hover{background:rgba(255,255,255,0.08)}
.dossierCard{display:flex;gap:14px;padding:10px;border:1px solid rgba(121,121,121,0.3);border-radius:6px;margin-bottom:10px}
.dossierCard img{width:80px;height:80px;object-fit:cover;border-radius:4px;background:#111}
.dossierCard .fullName{font-size:14px;color:#9fe;margin-bottom:6px}
.dossierCard .desc{font-size:12px;color:#cde;line-height:1.4}
.dbEmpty{color:#9fb;font-size:13px}

/* ===== Мобильная страница улики (evidence.html) =====
   Layout/structure inspired by a HUD-style lockscreen reference: dashed
   dot-ended dividers between sections, a bordered media frame, and a
   player row with a scrubber + transport controls — colors/typography
   kept consistent with the rest of the site (black bg, cyan accents). */
/* Full-screen app-shell: scrollable content area + a bottom action bar
   that's always pinned (the collect button never scrolls out of view). */
html:has(body.evidencePage){height:100%}
body.evidencePage{margin:0;height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden;font-family:Consolas,'Courier New',monospace;-webkit-text-size-adjust:100%}

.evScroll{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:calc(18px + env(safe-area-inset-top)) 16px 18px}
.evCard{max-width:480px;width:100%;margin:0 auto;color:#cfe}

.evTopRow{display:flex;justify-content:flex-end;margin-bottom:10px}
.evTypeBadge{font-size:11px;letter-spacing:1.5px;color:#9fe;border:1px solid rgba(127,255,238,0.4);border-radius:3px;padding:3px 9px;text-transform:uppercase}

.evCard h1{font-size:19px;margin:0 0 4px 0;color:#fff;font-weight:normal;line-height:1.3}

.evDivider{position:relative;height:1px;margin:16px 0;border-top:1px dashed rgba(127,255,238,0.35)}
.evDivider::before,.evDivider::after{content:'';position:absolute;top:-3px;width:6px;height:6px;border-radius:50%;background:#7fe}
.evDivider::before{left:0}
.evDivider::after{right:0}

.evMediaFrame{position:relative;border:1px solid rgba(127,255,238,0.3);border-radius:6px;overflow:hidden;background:#000}
.evMediaFrame img,.evMediaFrame video{width:100%;max-height:60vh;object-fit:contain;display:block;background:#000}
.evMediaFrame img{cursor:zoom-in}
.evMediaTime{position:absolute;bottom:8px;font-size:11px;color:#bff;background:rgba(0,0,0,0.55);padding:2px 7px;border-radius:3px;letter-spacing:.5px}
.evMediaTime.left{left:8px}
.evMediaTime.right{right:8px}
.evExpandHint{position:absolute;top:8px;right:8px;width:26px;height:26px;border-radius:5px;background:rgba(0,0,0,0.55);color:#bff;display:flex;align-items:center;justify-content:center;pointer-events:none}

/* Fullscreen image lightbox */
.evLightbox{position:fixed;inset:0;background:rgba(0,0,0,0.94);display:none;align-items:center;justify-content:center;z-index:9600;padding:calc(16px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom))}
.evLightbox.open{display:flex}
.evLightbox img{max-width:100%;max-height:100%;object-fit:contain}
.evLightboxClose{position:absolute;top:calc(14px + env(safe-area-inset-top));right:14px;width:40px;height:40px;border-radius:50%;border:1px solid rgba(127,255,238,0.4);background:rgba(0,0,0,0.6);color:#cfe;font-size:16px;display:flex;align-items:center;justify-content:center;cursor:pointer}

.evPlayer{padding:2px 0 0}

/* Waveform progress bar — two stacked identical bar-graphs; the
   foreground copy is clipped by playback progress to reveal the "filled"
   portion, like a voice-message/SoundCloud-style waveform. */
.evWaveform{position:relative;height:44px;margin:8px 0 12px;cursor:pointer;touch-action:none}
.evWaveBars{position:absolute;inset:0;display:flex;align-items:center;gap:2px;pointer-events:none}
.evWaveBars span{flex:1;min-width:2px;border-radius:1px;background:rgba(127,255,238,0.22)}
.evWaveBarsFg{clip-path:inset(0 100% 0 0)}
.evWaveBarsFg span{background:#8ffce0;box-shadow:0 0 4px rgba(127,255,238,0.5)}
.evTimeRow{display:flex;justify-content:space-between;font-size:11px;color:#8fa;margin-bottom:14px;letter-spacing:.5px}
.evTrackRow{display:flex;justify-content:space-between;align-items:center;gap:14px}
.evTrackInfo{min-width:0}
.evTrackTitle{font-size:16px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.evTrackSub{font-size:10px;color:#8fa;letter-spacing:1px;text-transform:uppercase;margin-top:3px}
.evControls{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.evControls button{width:38px;height:38px;border-radius:50%;border:1px solid rgba(127,255,238,0.4);background:rgba(127,255,238,0.06);color:#cfe;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.evControls button:active{background:rgba(127,255,238,0.25)}
.evControls .evPlayBtn{width:50px;height:50px;background:rgba(127,255,238,0.16);color:#fff}

.evTextSection .evLabel{font-size:11px;letter-spacing:1.5px;color:#7fe;text-transform:uppercase;margin-bottom:8px}
.evTextSection p{font-size:14px;line-height:1.6;color:#cde;margin:0}
.evTextSection p+p{margin-top:10px}

/* Bottom action bar — pinned to the viewport edge, always visible
   regardless of how far the content above has been scrolled. */
.evActionBar{flex:0 0 auto;padding:12px 16px calc(12px + env(safe-area-inset-bottom));border-top:1px solid rgba(127,255,238,0.25);background:rgba(6,10,10,0.85);backdrop-filter:blur(6px)}
.evActionBar:empty{display:none}
.evActionBar>*{max-width:480px;margin:0 auto}

.collectBtn{display:block;width:100%;min-height:48px;padding:13px;border-radius:6px;border:1px solid rgba(127,255,238,0.45);background:rgba(127,255,238,0.08);color:#fff;font-family:inherit;font-size:13px;letter-spacing:1.5px;text-transform:uppercase;cursor:pointer}
.collectBtn:hover{background:rgba(127,255,238,0.16)}
.collectBtn:disabled{opacity:0.6;cursor:default}
.stateMsg{text-align:center;padding:12px;color:#9fe;font-size:14px}

@media (max-width:380px){
  .evControls button{width:34px;height:34px}
  .evControls .evPlayBtn{width:44px;height:44px}
}

/* ===== Админ-панель (admin.html) ===== */
body.adminPage{overflow:auto;height:auto;font-family:Consolas,'Courier New',monospace;padding:32px;color:#cfe}
.adminGate{max-width:360px;margin:80px auto;border:1px solid #797979;border-radius:8px;padding:24px}
.adminGate label{display:block;margin-bottom:14px;font-size:13px;color:#9fb}
.adminGate input{display:block;margin-top:6px;width:100%;background:#000;border:1px solid #797979;border-radius:4px;color:#cfe;padding:8px 10px;font-family:inherit}
.adminGate button,.adminForm button{padding:9px 16px;border-radius:4px;border:1px solid #797979;background:rgba(255,255,255,0.05);color:#dff;cursor:pointer;font-family:inherit}
.adminGate button:hover,.adminForm button:hover{background:rgba(255,255,255,0.1)}
.adminWrap{max-width:900px;margin:0 auto;display:none}
.adminWrap.visible{display:block}
.adminSection{border:1px solid #797979;border-radius:8px;padding:18px;margin-bottom:22px}
.adminSection h2{margin:0 0 14px 0;font-size:16px;color:#9fe}
.adminForm{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.adminForm .full{grid-column:1/-1}
.adminForm label{font-size:12px;color:#9fb;display:block}
.adminForm input,.adminForm select,.adminForm textarea{width:100%;margin-top:4px;background:#000;border:1px solid #797979;border-radius:4px;color:#cfe;padding:7px 9px;font-family:inherit;font-size:13px}
.adminForm textarea{min-height:70px;resize:vertical}
.adminList{margin-top:8px;font-size:13px}
.adminList .row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 14px;padding:8px 0;border-bottom:1px solid rgba(121,121,121,0.25)}
.adminList .row>span{min-width:0}
.adminList .link{color:#7fe;word-break:break-all;user-select:all;flex:1 1 260px}
.adminList .rowActions{display:flex;gap:6px;flex:0 0 auto}
.adminList .rowActions button{padding:5px 10px;font-size:12px;border-radius:4px;border:1px solid #797979;background:rgba(255,255,255,0.05);color:#dff;cursor:pointer;font-family:inherit}
.adminList .rowActions button:hover:not(:disabled){background:rgba(255,255,255,0.1)}
.adminList .rowActions button:disabled{opacity:0.35;cursor:default}
.adminList .rowActions .deleteBtn{border-color:rgba(255,100,100,0.5);color:#f88}
.adminList .rowActions .deleteBtn:hover:not(:disabled){background:rgba(255,80,80,0.15)}

.lookupResult{display:flex;gap:16px;align-items:center;margin-top:14px;padding-top:14px;border-top:1px solid rgba(121,121,121,0.25)}
.lookupResult img{width:120px;height:120px;border-radius:4px;background:#fff;flex:0 0 auto}
.lookupInfo{min-width:0;font-size:13px}
.lookupInfo .link{display:block;color:#7fe;word-break:break-all;user-select:all;margin-bottom:8px}
.lookupInfo a{color:#9fe}

