:root {
  --bg: #0a0a0d;
  --surface: #141418;
  --surface-2: #1c1c22;
  --surface-3: #25252d;
  --border: #2a2a33;
  --text: #f2f2f6;
  --muted: #8d8d9b;
  --accent: #6246ff;
  --accent-2: #8a74ff;
  --accent-soft: rgba(98, 70, 255, .16);
  --green: #2ecc71;
  --green-soft: rgba(46, 204, 113, .14);
  --red: #ff5468;
  --red-soft: rgba(255, 84, 104, .14);
  --amber: #f5a524;
  --amber-soft: rgba(245, 165, 36, .14);
  --portals: #3d9bff;
  --mrkt: #ff7a45;
  --getgems: #2ecc9a;
  --radius: 16px;
  --radius-sm: 10px;
  --nav-h: 62px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  color-scheme: dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font: 15px/1.4 -apple-system, "SF Pro Text", "Segoe UI", Roboto, system-ui, sans-serif; overscroll-behavior: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
a { color: var(--accent-2); }
.app { display: flex; flex-direction: column; height: 100%; max-width: 980px; margin: 0 auto; }

/* верхняя полоса */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: calc(10px + var(--safe-t)) 14px 10px; border-bottom: 1px solid #15151b; background: var(--bg); }
.brand { display: flex; align-items: center; gap: 9px; min-width: 0; }
.logo { width: 28px; height: 28px; border-radius: 9px; background: conic-gradient(from 210deg, #6246ff, #3d9bff, #2ecc9a, #6246ff); box-shadow: 0 0 0 2px #0a0a0d inset; }
.brand-name { font-weight: 700; letter-spacing: .2px; white-space: nowrap; }
.chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.chip.portals .dot { background: var(--portals); } .chip.mrkt .dot { background: var(--mrkt); } .chip.getgems .dot { background: var(--getgems); }
.chip .unit { color: var(--muted); font-weight: 500; }
.chip.err { color: var(--muted); }

/* область контента и нижняя навигация */
.view { flex: 1; overflow-y: auto; padding: 14px 14px calc(var(--nav-h) + var(--safe-b) + 24px); -webkit-overflow-scrolling: touch; }
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; height: calc(var(--nav-h) + var(--safe-b)); padding: 6px 10px calc(6px + var(--safe-b)); display: flex; gap: 6px; background: rgba(10, 10, 13, .94); backdrop-filter: blur(14px); border-top: 1px solid #17171d; z-index: 20; max-width: 980px; margin: 0 auto; }
.tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border-radius: 14px; color: var(--muted); font-size: 11.5px; font-weight: 600; transition: background .15s, color .15s; }
.tab svg { width: 22px; height: 22px; }
.tab.active { background: var(--surface-2); color: var(--text); }
.tab.active svg { color: var(--accent-2); }
.tab .badge { position: absolute; margin: -22px -26px 0 0; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--red); color: #fff; font-size: 10px; display: grid; place-items: center; }

/* общие элементы */
h2 { margin: 6px 2px 12px; font-size: 20px; }
h3 { margin: 18px 2px 8px; font-size: 13px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .6px; }
.muted { color: var(--muted); } .small { font-size: 12.5px; }
.row { display: flex; align-items: center; gap: 10px; } .row.wrap { flex-wrap: wrap; } .grow { flex: 1; min-width: 0; } .spacer { flex: 1; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; margin-bottom: 12px; }
.card.flat { padding: 0; overflow: hidden; }
.pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; background: var(--surface-3); color: var(--muted); }
.pill.green { background: var(--green-soft); color: var(--green); } .pill.red { background: var(--red-soft); color: var(--red); }
.pill.amber { background: var(--amber-soft); color: var(--amber); } .pill.accent { background: var(--accent-soft); color: var(--accent-2); }
.pill.portals { color: var(--portals); background: rgba(61,155,255,.13); } .pill.mrkt { color: var(--mrkt); background: rgba(255,122,69,.13); } .pill.getgems { color: var(--getgems); background: rgba(46,204,154,.13); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 16px; border-radius: 12px; background: var(--surface-3); font-weight: 650; transition: filter .15s, transform .05s; }
.btn:active { transform: scale(.98); } .btn[disabled] { opacity: .45; pointer-events: none; }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn.primary { background: var(--accent); color: #fff; } .btn.white { background: #f2f2f6; color: #111; }
.btn.danger { background: var(--red-soft); color: var(--red); } .btn.ghost { background: transparent; border: 1px solid var(--border); }
.btn.block { width: 100%; } .btn.small { min-height: 34px; padding: 0 12px; border-radius: 10px; font-size: 13px; }
.icon-btn { width: 38px; height: 38px; border-radius: 10px; background: var(--red-soft); color: var(--red); display: grid; place-items: center; }
.icon-btn svg { width: 18px; height: 18px; }

input[type=text], input[type=number], input[type=search], select { width: 100%; min-height: 44px; padding: 0 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); outline: none; }
input:focus, select:focus { border-color: var(--accent); }
.field { margin-bottom: 12px; } .field > label { display: block; margin: 0 2px 6px; font-size: 13px; color: var(--muted); font-weight: 600; }
.field .hint { margin: 5px 2px 0; font-size: 12px; color: var(--muted); }
.search { position: relative; margin-bottom: 10px; } .search svg { position: absolute; left: 13px; top: 12px; width: 20px; height: 20px; color: var(--muted); } .search input { padding-left: 42px; }

.toggle { position: relative; width: 46px; height: 28px; flex: none; border-radius: 999px; background: #34343e; transition: background .15s; }
.toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform .15s; }
.toggle.on { background: var(--accent); } .toggle.on::after { transform: translateX(18px); } .toggle[disabled] { opacity: .45; pointer-events: none; }

.seg { display: flex; gap: 6px; overflow-x: auto; margin-bottom: 12px; scrollbar-width: none; } .seg::-webkit-scrollbar { display: none; }
.seg button { flex: none; padding: 7px 14px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); color: var(--muted); font-weight: 600; font-size: 13.5px; }
.seg button.active { background: var(--text); color: #111; border-color: var(--text); }

/* карточки подписок */
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 640px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 860px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sub { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.sub.live { border-color: rgba(46, 204, 113, .55); } .sub.warn { border-color: rgba(245, 165, 36, .5); }
.sub-img { position: relative; height: 78px; display: grid; place-items: center; overflow: hidden; }
.sub-img img { height: 66px; width: 66px; object-fit: contain; filter: drop-shadow(0 3px 6px rgba(0,0,0,.45)); position: relative; z-index: 1; }
.sub-img .initial { font-size: 30px; font-weight: 800; color: rgba(255,255,255,.85); position: relative; z-index: 1; }
.sub-body { padding: 10px 11px 11px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.sub-title { font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sub-meta { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk { display: flex; gap: 6px; flex-wrap: wrap; }
.mk button { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-2); color: var(--muted); font-size: 11.5px; font-weight: 700; }
.mk button .d { width: 7px; height: 7px; border-radius: 50%; background: #4a4a55; }
.mk button.on { color: var(--text); } .mk button.on .d { background: var(--green); }
.mk button.portals.on { border-color: rgba(61,155,255,.6); } .mk button.mrkt.on { border-color: rgba(255,122,69,.6); } .mk button.getgems.on { border-color: rgba(46,204,154,.6); }
.sub-foot { display: flex; align-items: center; gap: 8px; margin-top: auto; }
.sub-foot .btn { flex: 1; }
.fab { position: fixed; right: 16px; bottom: calc(var(--nav-h) + var(--safe-b) + 16px); z-index: 15; box-shadow: 0 8px 24px rgba(98,70,255,.45); }
.empty { text-align: center; padding: 42px 18px; color: var(--muted); }
.empty .big { font-size: 40px; margin-bottom: 6px; }

/* редактор (полноэкранный лист) */
.sheet { position: fixed; inset: 0; z-index: 40; background: var(--bg); display: flex; flex-direction: column; max-width: 980px; margin: 0 auto; animation: slide .18s ease-out; }
@keyframes slide { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.sheet-head { display: flex; align-items: center; gap: 10px; padding: calc(10px + var(--safe-t)) 14px 10px; border-bottom: 1px solid #15151b; }
.sheet-head h2 { margin: 0; font-size: 18px; flex: 1; }
.sheet-body { flex: 1; overflow-y: auto; padding: 14px 14px 24px; }
.sheet-foot { padding: 10px 14px calc(10px + var(--safe-b)); border-top: 1px solid #15151b; display: flex; gap: 10px; background: var(--bg); }
.gift-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 560px) { .gift-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.gift { position: relative; padding: 8px 6px; border-radius: 12px; background: var(--surface-2); border: 1.5px solid transparent; text-align: center; }
.gift.sel { border-color: var(--accent-2); background: var(--accent-soft); }
.gift .gi { height: 54px; display: grid; place-items: center; } .gift img { height: 50px; width: 50px; object-fit: contain; }
.gift .gi .initial { font-weight: 800; font-size: 22px; color: var(--muted); }
.gift .gn { font-size: 11.5px; font-weight: 600; margin-top: 4px; line-height: 1.15; min-height: 27px; overflow-wrap: anywhere; }
.gift .gf { font-size: 11px; color: var(--muted); }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 9px; background: var(--surface-2); border: 1px solid var(--border); font-size: 12.5px; font-weight: 600; }
.tag.sel { background: var(--accent-soft); border-color: var(--accent-2); color: #fff; }
.tag .f { color: var(--muted); font-weight: 500; font-size: 11.5px; }
/* редактор: выбор коллекции, списки моделей / фонов, форма */
.sq { width: 44px; min-height: 44px; padding: 0; font-size: 18px; }
.picker-bar { display: flex; gap: 8px; margin-bottom: 12px; }
.picker-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 0 14px; min-height: 44px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); font-weight: 700; text-align: left; }
.picker-main .grow { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker-main .gi { height: 28px; width: 28px; } .picker-main img { height: 28px !important; width: 28px !important; }
.picked { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; margin-bottom: 10px; }
.picked-row { display: flex; gap: 8px; overflow-x: auto; padding: 10px 0 2px; scrollbar-width: none; } .picked-row::-webkit-scrollbar { display: none; }
.pk { flex: none; width: 68px; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; text-align: center; }
.pk .mimg { width: 40px; height: 40px; object-fit: contain; } .pk .bd { width: 40px; height: 40px; }
.bd { display: inline-block; width: 44px; height: 44px; border-radius: 12px; box-shadow: 0 0 0 1px rgba(255,255,255,.12) inset; background: #3a3a44; }
.attr-bar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.attr-bar .dd:nth-child(3) { grid-column: 1 / -1; min-height: 40px; }
.dd { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; min-height: 46px; padding: 0 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); font-weight: 650; font-size: 13.5px; text-align: left; }
.dd .grow { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dd.open { border-color: var(--accent); background: var(--accent-soft); }
.apanel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px; margin-bottom: 12px; }
.agrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; }
.atile { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; border-radius: 12px; background: var(--surface-2); border: 1.5px solid transparent; text-align: center; min-width: 0; }
.atile.sel { border-color: var(--accent-2); background: var(--accent-soft); }
.atile .mimg { width: 44px; height: 44px; object-fit: contain; border-radius: 8px; }
.atile .an { font-size: 11px; font-weight: 650; line-height: 1.15; overflow-wrap: anywhere; } .atile .af { font-size: 11px; color: var(--muted); }
.linkbtn { color: var(--accent-2); font-weight: 700; font-size: 13px; }
.plist { margin-top: 8px; max-height: 56vh; overflow-y: auto; }
.prow { width: 100%; display: flex; align-items: center; gap: 12px; padding: 9px 2px; border-bottom: 1px solid var(--border); text-align: left; }
.prow .pn { font-weight: 700; } .prow .pp { text-align: right; font-weight: 700; display: flex; flex-direction: column; } .prow .pp small { color: var(--muted); font-weight: 500; font-size: 11px; }
.prow .gi { height: 34px; display: grid; place-items: center; } .prow img { height: 34px !important; width: 34px !important; }
.radio { width: 22px; height: 22px; flex: none; border-radius: 50%; border: 2px solid #4a4a55; } .radio.on { border-color: var(--accent); background: radial-gradient(circle, var(--accent) 45%, transparent 50%); }
.modal.tall { max-height: 90vh; display: flex; flex-direction: column; } .modal.tall .plist { flex: 1; }
.fblock { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; margin-bottom: 10px; }
.fblock .ft { font-weight: 800; font-size: 15px; } .fblock > .row + * { margin-top: 12px; }
.mchips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.mchip { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 12px; background: var(--surface-2); border: 1.5px solid var(--border); font-weight: 700; font-size: 13.5px; color: var(--muted); }
.mchip .d { width: 9px; height: 9px; border-radius: 50%; background: #4a4a55; } .mchip.on { color: var(--text); background: var(--accent-soft); border-color: var(--accent-2); } .mchip.on .d { background: var(--green); }
.pricebox { display: flex; align-items: stretch; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); overflow: hidden; }
.pricebox button { flex: none; padding: 0 12px; color: var(--muted); font-weight: 700; font-size: 13px; } .pricebox input { border: 0; background: transparent; text-align: center; min-width: 0; }
.stepper { display: flex; align-items: center; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); overflow: hidden; }
.stepper button { width: 60px; height: 44px; font-size: 22px; color: var(--muted); } .stepper span { flex: 1; text-align: center; font-weight: 800; font-size: 16px; }
.more summary { cursor: pointer; color: var(--accent-2); font-weight: 700; padding: 4px 0 10px; font-size: 13.5px; }
.tag .mimg { width: 26px; height: 26px; object-fit: contain; border-radius: 6px; margin: -3px 0 -3px -4px; }
.tag .initial { display: none; }
.tag .swatch { width: 16px; height: 16px; border-radius: 50%; flex: none; box-shadow: 0 0 0 1px rgba(255,255,255,.18) inset; }
.sub-foot { flex-wrap: nowrap; }
.group-h { display: flex; align-items: center; gap: 10px; margin: 14px 2px 8px; font-size: 12px; color: var(--muted); }
.group-h button { color: var(--accent-2); font-weight: 700; font-size: 12px; }
.mkt-box { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; margin-bottom: 10px; background: var(--surface); }
.mkt-box.off .mkt-fields { display: none; }
.mkt-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.problems { margin: 10px 0; display: flex; flex-direction: column; gap: 6px; } .problem { padding: 9px 11px; border-radius: 10px; font-size: 13px; } .problem.error { background: var(--red-soft); color: #ff9aa6; } .problem.warn { background: var(--amber-soft); color: #ffc766; }

/* журнал */
.ev { display: flex; gap: 11px; padding: 11px 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); margin-bottom: 8px; }
.ev .ic { width: 38px; height: 38px; flex: none; border-radius: 11px; display: grid; place-items: center; background: var(--surface-3); } .ev .ic svg { width: 20px; height: 20px; }
.ev.good .ic { background: var(--green-soft); color: var(--green); } .ev.bad .ic { background: var(--red-soft); color: var(--red); } .ev.warn .ic { background: var(--amber-soft); color: var(--amber); } .ev.info .ic { background: var(--accent-soft); color: var(--accent-2); }
.ev .t { font-weight: 700; } .ev .s { font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; } .ev .tm { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.logbox { background: #0e0e12; border: 1px solid var(--border); border-radius: 12px; padding: 10px; font: 11.5px/1.45 ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: #b8b8c6; max-height: 60vh; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; }

/* боты */
.bot-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.bot-title { font-weight: 800; font-size: 17px; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0; }
.stat { background: var(--surface-2); border-radius: 12px; padding: 9px 10px; } .stat .v { font-weight: 800; font-size: 16px; } .stat .l { font-size: 11px; color: var(--muted); }
.kv { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--border); font-size: 13.5px; } .kv:first-child { border-top: 0; } .kv .k { color: var(--muted); } .kv .v { text-align: right; overflow-wrap: anywhere; }
.setting { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); } .setting .grow { min-width: 0; } .setting input { width: 112px; text-align: right; }
.setting .name { font-weight: 600; } .setting .desc { font-size: 12px; color: var(--muted); }

/* модальное окно подтверждения */
.modal-bg { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.66); display: flex; align-items: flex-end; justify-content: center; animation: fade .15s; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.modal { width: 100%; max-width: 520px; background: var(--surface); border: 1px solid var(--border); border-radius: 22px 22px 0 0; padding: 18px 16px calc(16px + var(--safe-b)); max-height: 88vh; overflow-y: auto; }
@media (min-width: 640px) { .modal-bg { align-items: center; } .modal { border-radius: 22px; } }
.modal h3 { margin: 0 0 10px; font-size: 18px; text-transform: none; letter-spacing: 0; color: var(--text); }
.modal ul { padding-left: 18px; margin: 8px 0 12px; } .modal li { margin: 5px 0; }
.warnbox { background: var(--red-soft); border: 1px solid rgba(255,84,104,.4); color: #ffb0ba; border-radius: 12px; padding: 10px 12px; margin: 10px 0; font-size: 13.5px; }
.check { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0; font-size: 13.5px; } .check input { width: 20px; height: 20px; margin-top: 1px; accent-color: var(--accent); }

.toasts { position: fixed; left: 12px; right: 12px; bottom: calc(var(--nav-h) + var(--safe-b) + 14px); z-index: 80; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast { max-width: 520px; width: 100%; padding: 12px 14px; border-radius: 12px; background: #2a2a33; border: 1px solid #3a3a46; box-shadow: 0 10px 30px rgba(0,0,0,.5); font-weight: 600; font-size: 14px; animation: slide .18s; }
.toast.err { background: #3a1820; border-color: #6a2a36; color: #ffb7c0; } .toast.ok { background: #14301f; border-color: #25583a; color: #a6f0c4; }
.banner { padding: 10px 12px; border-radius: 12px; margin-bottom: 12px; font-size: 13px; } .banner.err { background: var(--red-soft); color: #ffb0ba; } .banner.warn { background: var(--amber-soft); color: #ffc766; } .banner.info { background: var(--accent-soft); color: #cfc6ff; }
.spin { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid rgba(255,255,255,.25); border-top-color: #fff; animation: rot .7s linear infinite; display: inline-block; } @keyframes rot { to { transform: rotate(360deg); } }
.skeleton { height: 120px; border-radius: 16px; background: linear-gradient(90deg, var(--surface) 25%, var(--surface-2) 50%, var(--surface) 75%); background-size: 200% 100%; animation: sh 1.2s infinite; } @keyframes sh { to { background-position: -200% 0; } }