/* WaroPower — тема «заряд»:
   холодный светлый фон, чернильный текст, зелёный индикатора заряда,
   моноширинный шрифт для номеров павербанков, ячеек и цен. */

:root {
  color-scheme: light;
  --bg: #f6f4fb;
  --panel: #ffffff;
  --ink: #1c1530;
  --muted: #6b6285;
  --charge: #7c3aed;         /* фиолетовый акцент */
  --charge-dark: #5b21b6;    /* акцентный текст/ссылки */
  --charge-hover: #5b21b6;   /* ховер кнопок */
  --charge-soft: #ede9fe;
  --warn: #b7791f;
  --warn-soft: #fdf3df;
  --err: #c0392b;
  --err-soft: #f7e5e2;
  --line: #e2dcf2;
  --input-bg: #fbfaff;
  --input-ro: #efeaf9;
  --glass-bg: rgba(255,255,255,.38);
  --glass-border: rgba(255,255,255,.5);
  --fab-ring: rgba(255,255,255,.85);
  --radius: 10px;
}

/* Тёмная тема — включается автоматически по настройке системы */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #131020;
    --panel: #1c1730;
    --ink: #ede9fa;
    --muted: #a49bc4;
    --charge: #8b5cf6;
    --charge-dark: #c4b5fd;
    --charge-hover: #7c3aed;
    --charge-soft: #2a1f52;
    --warn: #fbbf24;
    --warn-soft: #3a2f18;
    --err: #f87171;
    --err-soft: #3b1f28;
    --line: #322a52;
    --input-bg: #241d3f;
    --input-ro: #2b2350;
    --glass-bg: rgba(22,17,38,.42);
    --glass-border: rgba(255,255,255,.1);
    --fab-ring: rgba(19,16,32,.75);
  }
}

* { box-sizing: border-box; }
html, body { max-width: 100%; overflow-x: hidden; }
img { max-width: 100%; height: auto; }
code { overflow-wrap: anywhere; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.55 "Segoe UI", system-ui, -apple-system, sans-serif;
}
a { color: var(--charge-dark); }

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px;
  padding: 14px 24px;
  background: var(--panel);
  border-bottom: 2px solid var(--charge);
}
.logo { font-size: 22px; text-decoration: none; color: var(--ink); letter-spacing: .5px; }
.logo b { color: var(--charge-dark); }
.bolt { margin-right: 4px; }
.topbar nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 14px; }
.topbar nav a { margin-left: 0; text-decoration: none; color: var(--muted); }
.topbar nav a:hover { color: var(--charge-dark); }
.admin-link { font-weight: 600; color: var(--charge-dark) !important; }

.wrap { max-width: 1080px; margin: 0 auto; padding: 24px 20px 60px; }

.hero h1 { font-size: 34px; line-height: 1.2; margin: 10px 0 6px; }
.hero p { color: var(--muted); margin-top: 0; }

.map { width: 100%; height: 420px; border-radius: var(--radius); border: 1px solid var(--line); margin: 18px 0; }
.map-small { height: 280px; }

.section-title { margin-top: 36px; border-left: 4px solid var(--charge); padding-left: 10px; }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px; margin-bottom: 16px;
}
.station-card { text-decoration: none; color: var(--ink); transition: border-color .15s; }
.station-card:hover { border-color: var(--charge); }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 6px 10px; flex-wrap: wrap; }
.st-name { font-weight: 600; font-size: 18px; flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.st-addr { color: var(--muted); margin: 4px 0; }
.st-price { font-family: "Consolas", "Menlo", monospace; color: var(--charge-dark); }

.cells {
  font-family: "Consolas", "Menlo", monospace; font-size: 13px;
  padding: 3px 8px; border-radius: 999px; white-space: nowrap;
}
.cells-ok { background: var(--charge-soft); color: var(--charge-dark); }
.cells-empty { background: var(--err-soft); color: var(--err); }

.pb-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.pb-chip {
  font-family: "Consolas", "Menlo", monospace;
  background: var(--charge-soft); color: var(--charge-dark);
  border: 1px solid var(--charge);
  border-radius: 6px; padding: 4px 10px; font-size: 14px;
}
.pb-live { background: var(--warn-soft); color: var(--warn); border-color: var(--warn); }

.station-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; align-items: start; }
.stat-row { display: flex; gap: 14px; flex-wrap: wrap; margin: 14px 0; }
.stat {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px 18px; display: flex; flex-direction: column;
}
.stat .num { font-family: "Consolas", "Menlo", monospace; font-size: 26px; color: var(--charge-dark); }
.stat span:last-child { color: var(--muted); font-size: 13px; }

.rent-box { background: var(--panel); border: 2px solid var(--charge); border-radius: var(--radius); padding: 20px; }
.rent-box h2 { margin-top: 0; }

form label { display: block; margin: 12px 0 4px; font-size: 14px; color: var(--muted); }
input[type=text], input[type=email], input[type=password], input[type=number], select, textarea {
  width: 100%; padding: 10px 12px; margin-top: 4px;
  border: 1px solid var(--line); border-radius: 8px;
  font: inherit; background: var(--input-bg);
  color: var(--ink); caret-color: var(--charge);
}
select option { color: var(--ink); background: var(--panel); }
/* Автозаполнение Safari/Chrome красило текст в чёрный на тёмном фоне */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink);
  -webkit-box-shadow: 0 0 0 100px var(--input-bg) inset;
  box-shadow: 0 0 0 100px var(--input-bg) inset;
  transition: background-color 9999s ease-in-out 0s;
}
input:focus, select:focus { outline: 2px solid var(--charge); border-color: var(--charge); }
input[readonly] { background: var(--input-ro); font-family: "Consolas", "Menlo", monospace; }

button {
  margin-top: 14px; width: 100%;
  background: var(--charge); color: #fff; border: 0;
  padding: 12px 16px; border-radius: 8px;
  font: 600 16px/1 inherit; cursor: pointer;
}
button:hover { background: var(--charge-hover); }
button:disabled { background: #8d85a6; cursor: not-allowed; }
.btn-small { width: auto; margin: 0; padding: 6px 12px; font-size: 13px; }
.btn-danger { background: var(--err); }
.btn-danger:hover { background: #96281b; }

.table { width: 100%; border-collapse: collapse; background: var(--panel); border-radius: var(--radius); overflow: hidden; }
.table th, .table td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; }
.table th { background: var(--charge-soft); color: var(--charge-dark); font-size: 13px; text-transform: uppercase; letter-spacing: .5px; }
.table td { font-size: 15px; }

.flash { padding: 12px 16px; border-radius: 8px; margin: 14px 0; }
.flash-ok { background: var(--charge-soft); color: var(--charge-dark); border: 1px solid var(--charge); }
.flash-err { background: var(--err-soft); color: var(--err); border: 1px solid var(--err); }
.flash-warn { background: var(--warn-soft); color: var(--warn); border: 1px solid var(--warn); }

.empty { color: var(--muted); background: var(--panel); border: 1px dashed var(--line); border-radius: var(--radius); padding: 16px; }
.hint { color: var(--muted); font-size: 13px; }
.back { display: inline-block; margin-bottom: 8px; text-decoration: none; }

.auth-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 760px; margin: 30px auto; }
.admin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
fieldset.prices { border: 1px solid var(--line); border-radius: 8px; margin-top: 12px; }
fieldset.prices legend { font-size: 13px; color: var(--muted); padding: 0 6px; }

.active-rental { border: 2px solid var(--charge); }
.inline-form { margin-top: 8px; }

.station-photo{width:100%;max-width:420px;border-radius:12px;border:1px solid var(--line);margin:8px 0;display:block}
.photo-form input[type=file]{font-size:12px;width:150px;padding:4px;margin:0 0 4px}

/* ---- 3D-сцена аренды/возврата ---- */
.overlay3d{position:fixed;inset:0;background:rgba(24,14,48,.88);display:flex;align-items:center;justify-content:center;z-index:1000;padding:12px}
.overlay3d[hidden]{display:none}
.overlay3d-box{position:relative;width:min(720px,96vw);background:linear-gradient(180deg,#231052,#160a38);border:2px solid #7c3aed;border-radius:16px;padding:14px}
.canvas-wrap{position:relative}
.canvas-wrap::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse 60% 55% at 50% 46%, rgba(139,92,246,.28), transparent 70%);
}
.canvas3d{width:100%;height:440px;position:relative;z-index:1}
.overlay3d-close{position:absolute;top:6px;right:10px;width:auto;margin:0;background:transparent;color:#c4b5fd;font-size:28px;line-height:1;padding:2px 10px;z-index:5}
.overlay3d-close:hover{background:transparent;color:#fff}
.overlay3d-hint{text-align:center;color:#ddd6fe;margin-top:8px;min-height:22px;font-size:15px}
/* ---- HTML-павербанк «в руках»: ввод номера ПРЯМО на корпусе ---- */
.pb-card{
  position:absolute;left:50%;top:50%;z-index:6;
  width:min(230px,52vw);height:min(430px,72cqh,72vh);
  transform:translate(-50%,-50%) scale(.45) translateY(60px);opacity:0;pointer-events:none;
  background:linear-gradient(160deg,#9d7bf0 0%,#7c3aed 45%,#5b21b6 100%);
  border-radius:26px;
  box-shadow:0 28px 70px rgba(0,0,0,.6), inset 0 2px 8px rgba(255,255,255,.35), inset 0 -6px 14px rgba(0,0,0,.28);
  display:flex;flex-direction:column;align-items:center;
  padding:20px 16px 12px;box-sizing:border-box;
  transition:transform .5s cubic-bezier(.34,1.56,.64,1),opacity .35s;
}
.pb-card.show{transform:translate(-50%,-50%) scale(1) translateY(0);opacity:1;pointer-events:auto}
.pb-card.hide{transform:translate(-50%,-50%) scale(.22) translateY(-30px);opacity:0;pointer-events:none;transition:transform .55s ease-in,opacity .4s}
.pb-card-brand{color:#fff;font-size:19px;letter-spacing:.5px}
.pb-card-brand b{color:#ede9fe}
.pb-card-mid{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;width:100%}
.pb-card-label{color:rgba(255,255,255,.75);font-size:11px;letter-spacing:2px;text-transform:uppercase}
.pb-card-num{color:#fff;font-family:"Consolas","Menlo",monospace;font-weight:700;font-size:26px}
.pb-card input{width:90%;background:rgba(255,255,255,.16);border:0;border-bottom:2px dashed rgba(255,255,255,.85);border-radius:8px 8px 0 0;color:#fff;font-family:"Consolas","Menlo",monospace;font-weight:700;font-size:19px;text-align:center;padding:9px 4px}
.pb-card input::placeholder{color:rgba(255,255,255,.5)}
.pb-card input:focus{outline:0;background:rgba(255,255,255,.26);border-bottom-color:#fff}
.pb-card button{width:90%;margin:0;padding:10px;background:#fff;color:#5b21b6;font-size:14px;border-radius:9px}
.pb-card button:hover{background:#ede9fe}
.pb-card .mini-qr{background:transparent;border:1px solid rgba(255,255,255,.85);color:#fff;padding:7px;font-size:12px;width:62%}
.pb-card .mini-qr:hover{background:rgba(255,255,255,.15)}
.pb-card-ports{display:flex;gap:16px;color:rgba(255,255,255,.9);font-size:10px;letter-spacing:1.5px;margin-top:4px}
.pb-card-tabs{display:flex;gap:14px;margin:6px 0 2px}
.pb-card-tabs i{width:32px;height:44px;background:#4c1d95;border-radius:6px 6px 11px 11px;box-shadow:inset 0 -7px 0 #3b0d78, inset 0 2px 3px rgba(255,255,255,.18)}
.overlay3d .pb-reader{max-width:300px;margin:10px auto 0}
.returned-msg{font-size:21px;font-weight:700;color:#a7f3d0;text-align:center;padding:14px 10px}
@media (max-width:760px){.canvas3d{height:56vh}}

.foot { text-align: center; color: var(--muted); padding: 24px; font-size: 14px; }

/* ---- Страница оплаты (checkout) ---- */
.checkout{display:flex;justify-content:center;padding:24px 0}
.checkout-card{
  width:min(460px,100%);background:var(--panel);
  border:1px solid var(--line);border-top:4px solid var(--charge);
  border-radius:14px;padding:22px 22px 16px;
}
.checkout-logo{font-size:22px;text-align:center;margin-bottom:14px;color:var(--ink)}
.checkout-logo b{color:var(--charge-dark)}
.checkout-row{
  display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;
  padding:10px 2px;border-bottom:1px dashed var(--line);
}
.checkout-row span{color:var(--muted);font-size:14px}
.checkout-row b, .checkout-row code{color:var(--ink)}
.checkout-sum{font-family:"Consolas","Menlo",monospace;font-size:20px;color:var(--charge-dark) !important}
.checkout-wallet{
  max-width:100%;overflow-wrap:anywhere;
  font-family:"Consolas","Menlo",monospace;font-size:15px;letter-spacing:1px;
  background:var(--charge-soft);color:var(--charge-dark) !important;
  border:1px solid var(--charge);border-radius:8px;padding:4px 10px;
}
.checkout-methods{display:flex}
.checkout-methods .method{
  display:inline-flex;align-items:center;gap:6px;margin:0;
  color:var(--ink);font-size:14px;cursor:pointer;
  border:1px solid var(--line);border-radius:10px;padding:8px 12px;
}
.checkout-methods .method:has(input:checked){border-color:var(--charge);background:var(--charge-soft)}
.checkout-methods input{width:auto;margin:0;accent-color:var(--charge)}
.checkout-wait{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:14px;color:var(--charge-dark);font-weight:600}
.spinner{
  width:18px;height:18px;border-radius:50%;flex:0 0 auto;
  border:3px solid var(--charge-soft);border-top-color:var(--charge);
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.checkout-hint{text-align:center;margin-top:10px}

/* ---- Код станции и служебные классы ---- */
.mono{font-family:"Consolas","Menlo",monospace}
.ok-text{color:var(--charge-dark) !important;font-weight:600}
.err-text{color:var(--err) !important;font-weight:600}
.st-code b{
  font-family:"Consolas","Menlo",monospace;font-size:18px;letter-spacing:3px;
  background:var(--charge-soft);color:var(--charge-dark);
  border:1px solid var(--charge);border-radius:8px;padding:3px 10px;
}
.qr-station-code{margin-top:8px;font-size:15px;color:#1c1530}
.qr-station-code b{
  font-family:"Consolas","Menlo",monospace;font-size:22px;letter-spacing:4px;
  color:#5b21b6;
}
.qr-min{padding:26px 24px 20px}
.qr-code-only{
  margin-top:16px;text-align:center;
  font-family:"Consolas","Menlo",monospace;font-weight:700;
  font-size:34px;letter-spacing:6px;color:#1c1530;
}

/* ---- Панель активной аренды (режим приложения, вместо QR-кнопки) ---- */
.rental-panel{display:none}
html.standalone body.page-index .rental-panel{
  display:block;position:fixed;z-index:1000;
  left:12px;right:12px;bottom:calc(14px + env(safe-area-inset-bottom));
  background:var(--glass-bg);
  -webkit-backdrop-filter:blur(18px) saturate(1.6);
  backdrop-filter:blur(18px) saturate(1.6);
  border:1px solid var(--glass-border);
  border-radius:22px;padding:14px 16px;
  box-shadow:0 14px 40px rgba(0,0,0,.22);
}
.rp-head{display:flex;justify-content:space-between;align-items:center;gap:6px 10px;flex-wrap:wrap}
.rp-title{font-weight:700;color:var(--ink)}
.rp-link{font-size:13px;color:var(--charge-dark);text-decoration:none;font-weight:600}
.rp-stats{
  font-family:"Consolas","Menlo",monospace;color:var(--charge-dark);
  font-size:14px;margin:6px 0 4px;
}
.rental-panel button{margin-top:10px;padding:12px;font-size:15px}
.rp-secondary{background:transparent !important;color:var(--charge-dark) !important;border:1px solid var(--charge) !important}
.rp-secondary:hover{background:var(--charge-soft) !important}
.rp-code{display:flex;gap:8px;margin-top:10px}
.rp-code input{
  flex:1;margin:0;text-align:center;letter-spacing:4px;
  font-family:"Consolas","Menlo",monospace;font-size:17px;
}
.rp-code button{width:auto;margin:0;padding:10px 18px}
.rp-info{margin:8px 0 0;text-align:center}
.rp-info:empty{display:none}
.rental-panel .pb-reader{max-width:260px;margin:10px auto 0}

/* ---- Шаги выдачи павербанка ---- */
.rent-modal-box{max-width:440px}
.rent-step{text-align:center;color:#ede9fe;padding:30px 18px 24px}
.rent-step-icon{font-size:56px;line-height:1;margin-bottom:8px}
.rent-step h2{margin:8px 0 6px;color:#fff}
.rent-step p{color:#c4b5fd;margin:0 0 18px}
.rent-input{
  width:min(260px,100%);display:block;margin:0 auto 4px;
  text-align:center;font-family:"Consolas","Menlo",monospace;
  font-size:20px;letter-spacing:2px;color:#fff;padding:12px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.35);border-radius:10px;
}
.rent-input::placeholder{color:rgba(255,255,255,.45)}
.rent-input:focus{outline:2px solid #a78bfa;background:rgba(255,255,255,.18)}
.rent-step button{
  width:min(260px,100%);display:block;margin:12px auto 0;
  background:#fff;color:#5b21b6;
}
.rent-step button:hover{background:#ede9fe}
.rent-step .rent-secondary{background:transparent;color:#ede9fe;border:1px solid rgba(255,255,255,.5)}
.rent-step .rent-secondary:hover{background:rgba(255,255,255,.12)}
.rent-step .pb-reader{margin:12px auto 0;max-width:260px}

/* ---- Маркер станции: молния ---- */
.wp-bolt-marker{background:transparent;border:none;cursor:pointer}
.wp-bolt-marker .wp-bolt{width:36px;height:36px}
.wp-user-dot{
  width:18px;height:18px;border-radius:50%;
  background:#a78bfa;border:3px solid #7c3aed;
  box-shadow:0 0 0 4px rgba(124,58,237,.25);
}
.maplibregl-popup-content{
  background:var(--panel);color:var(--ink);
  border-radius:12px;padding:12px 14px;box-shadow:0 8px 24px rgba(0,0,0,.2);
}
.maplibregl-popup-content a{color:var(--charge-dark);font-weight:600}
.maplibregl-popup-close-button{color:var(--muted);font-size:18px;padding:2px 6px}
.maplibregl-popup-tip{border-top-color:var(--panel);border-bottom-color:var(--panel)}
.wp-bolt{
  width:100%;height:100%;border-radius:50%;
  background:var(--charge);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 12px rgba(0,0,0,.35), 0 0 0 3px var(--panel);
  position:relative;
}
.wp-bolt svg{width:60%;height:60%}
.wp-bolt::after{
  content:'';position:absolute;left:50%;bottom:-7px;transform:translateX(-50%);
  border:6px solid transparent;border-top:8px solid var(--charge);border-bottom:0;
}

/* ---- Геолокация ---- */
.st-dist{
  flex-basis:100%;order:3;width:max-content;max-width:100%;
  font-family:"Consolas","Menlo",monospace;font-size:12px;color:var(--charge-dark);
  background:var(--charge-soft);border:1px solid var(--charge);
  border-radius:999px;padding:2px 9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.st-dist:empty{display:none}
.station-card{overflow:hidden}
.card.nearest{border:2px solid var(--charge);box-shadow:0 6px 18px rgba(124,58,237,.22)}
.geo-btn{
  position:absolute;right:10px;bottom:10px;z-index:5;
  width:38px;height:38px;border-radius:9px;padding:0;margin:0;font-size:18px;
  background:var(--panel);color:var(--ink);
  border:1px solid var(--line);box-shadow:0 2px 8px rgba(0,0,0,.2);cursor:pointer;
}
.geo-btn:hover{background:var(--charge-soft)}
#geo-note{margin:-8px 0 14px}

/* ---- Режим «с экрана Домой» (iOS/Android standalone) ---- */
.app-top{display:none}
.qr-fab{display:none}

html.standalone body.page-index .topbar,
html.standalone body.page-index .hero,
html.standalone body.page-index .section-title,
html.standalone body.page-index .cards,
html.standalone body.page-index #geo-note,
html.standalone body.page-index .foot{display:none}

html.standalone body.page-index .wrap{max-width:none;padding:0;margin:0}
html.standalone body.page-index .map{
  position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;
  margin:0;border:0;border-radius:0;z-index:1;
}
html.standalone body.page-index .flash{
  position:fixed;top:calc(64px + env(safe-area-inset-top));left:12px;right:12px;z-index:1001;margin:0;
}

/* Верхняя плавающая панель */
html.standalone body.page-index .app-top{
  display:flex;position:fixed;z-index:1000;
  top:calc(10px + env(safe-area-inset-top));left:12px;right:12px;
  background:var(--glass-bg);
  -webkit-backdrop-filter:blur(18px) saturate(1.6);
  backdrop-filter:blur(18px) saturate(1.6);
  border:1px solid var(--glass-border);border-radius:16px;
  padding:9px 14px;align-items:center;justify-content:space-between;
  box-shadow:0 8px 24px rgba(0,0,0,.12);
}
html.standalone body.page-index .app-top .logo{font-size:18px}
html.standalone body.page-index .app-top a{text-decoration:none;color:var(--charge-dark);font-weight:600}

/* Круглая QR-кнопка внизу по центру */
html.standalone body.page-index .qr-fab{
  display:flex;position:fixed;z-index:1000;
  left:50%;bottom:calc(20px + env(safe-area-inset-bottom));
  transform:translateX(-50%);
  width:68px;height:68px;border-radius:50%;
  background:var(--charge);align-items:center;justify-content:center;
  box-shadow:0 12px 32px rgba(0,0,0,.35), 0 0 0 6px var(--fab-ring);
}
html.standalone body.page-index .qr-fab:active{transform:translateX(-50%) scale(.93)}
.qr-fab svg{width:34px;height:34px;fill:#fff}

/* На внутренних страницах в standalone — отступы под чёлку */
html.standalone .topbar{padding-top:calc(14px + env(safe-area-inset-top))}
html.standalone .foot{padding-bottom:calc(24px + env(safe-area-inset-bottom))}

/* ---- QR и сканер ---- */
.scan-link { font-weight: 600; }
.balance-link {
  font-family: "Consolas", "Menlo", monospace; font-weight: 700;
  background: var(--charge-soft); color: var(--charge-dark) !important;
  border: 1px solid var(--charge); border-radius: 999px; padding: 4px 12px;
}
.btn-link {
  display: inline-block; margin-top: 8px;
  background: var(--charge); color: #fff; text-decoration: none;
  padding: 12px 20px; border-radius: 8px; font-weight: 600;
}
.btn-link:hover { background: var(--charge-hover); color: #fff; }

.scan-wrap { max-width: 480px; margin: 20px auto; text-align: center; }
#reader, .pb-reader {
  width: 100%; border: 2px solid var(--charge);
  border-radius: var(--radius); overflow: hidden; background: #000;
}
.pb-reader { margin-top: 10px; }
.btn-scan { background: var(--panel); color: var(--charge-dark); border: 1px solid var(--charge); }
.btn-scan:hover { background: var(--charge-soft); }

.btn-qr {
  display: inline-block; text-decoration: none;
  background: var(--charge-soft); color: var(--charge-dark);
  border: 1px solid var(--charge); border-radius: 8px;
  padding: 6px 12px; font-size: 13px; font-weight: 600;
}
.qr-mini { font-size: 11px; margin-left: 6px; text-decoration: none; font-weight: 700; }

.qr-sheet {
  color:#1c1530;
  max-width: min(340px, 100%); margin: 20px auto; text-align: center;
  background: #fff; border: 2px solid var(--ink);
  border-radius: 14px; padding: 24px;
}
.qr-brand { font-size: 20px; margin-bottom: 14px; }
.qr-brand b { color: var(--charge-dark); }
.qr-box { display: flex; justify-content: center; }
.qr-box img, .qr-box canvas { image-rendering: pixelated; }
.qr-label { font-weight: 700; font-size: 18px; margin-top: 14px; }
.qr-sub { color: var(--muted); font-size: 13px; }
.qr-payload { font-family: "Consolas", "Menlo", monospace; font-size: 11px; color: var(--muted); margin-top: 10px; word-break: break-all; }
.qr-print-btn { max-width: min(340px, 100%); display: block; margin: 14px auto; }

@media print {
  .no-print, .topbar, .foot, .flash { display: none !important; }
  body { background: #fff; }
  .qr-sheet {
  color:#1c1530; border-radius: 0; margin: 0 auto; }
}

@media (max-width: 760px) {
  .station-grid, .auth-grid, .admin-grid, .row3 { grid-template-columns: 1fr; }
  .map { height: 300px; }
  .wrap { padding: 18px 14px 50px; }
  .topbar { padding: 12px 14px; }
  .topbar nav { gap: 6px 12px; font-size: 14px; }
  .logo { font-size: 19px; }
  .nav-email { display: none; }
  /* Таблицы шире экрана прокручиваются по горизонтали, а не вылезают */
  .table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; max-width: 100%; }
  .table th, .table td { font-size: 13px; padding: 8px 10px; }
  .hero h1 { font-size: 27px; }
  .stat { padding: 10px 14px; }
  .stat .num { font-size: 22px; }
  .checkout-card { padding: 18px 14px 14px; }
  .checkout-row span { font-size: 13px; }
  .checkout-wallet { font-size: 13px; letter-spacing: .5px; padding: 4px 8px; }
  .checkout-methods .method { padding: 7px 10px; font-size: 13px; }
  .qr-code-only { font-size: 28px; letter-spacing: 5px; }
  .st-code b { font-size: 16px; letter-spacing: 2px; }
  .rp-code input { letter-spacing: 3px; font-size: 16px; }
  .flash { overflow-wrap: anywhere; }
}

/* В приложении контролы карты опускаются под стеклянную панель */
html.standalone body.page-index .maplibregl-ctrl-top-left {
  top: calc(66px + env(safe-area-inset-top));
}

.qr-sheet .qr-sub, .qr-sheet .qr-payload { color:#6b7280 }

/* ---- Тёмная тема: карта и попапы Leaflet ---- */
@media (prefers-color-scheme: dark) {
    .topbar { background: var(--panel) }
}