/* =================== THEME VARS (default: dark) =================== */ :root{ --bg:#0f1320; --panel:#141a2a; --muted:#94a3b8; --text:#e5e7eb; --accent:#fbbf24; --accent-2:#22c55e; --border:#23304a; --brand:#f8fafc; --danger:#ef4444; --header-bg: rgba(15,19,32,.75); --header-border: #172036; } /* Светлая тема: включается атрибутом на : data-theme="light" */ :root[data-theme="light"]{ --bg:#ffffff; --panel:#ffffff; --muted:#475569; --text:#0f172a; --accent:#fbbf24; --accent-2:#16a34a; --border:#e5e7eb; --brand:#0f172a; --danger:#dc2626; --header-bg: rgba(255,255,255,.85); --header-border:#e5e7eb; } /* Иконка-переключатель темы */ .theme-toggle{display:inline-flex; align-items:center; gap:8px} .theme-icon{display:inline; vertical-align:middle} :root[data-theme="light"] .theme-icon-moon{display:none} :root:not([data-theme="light"]) .theme-icon-sun{display:none} /* ========== BASE ========== */ *{box-sizing:border-box} html,body{height:100%} body.app{margin:0;background:var(--bg);color:var(--text);font:16px/1.5 system-ui,Segoe UI,Roboto,Arial} .container{max-width:1200px;margin:0 auto;padding:20px} .site-header{ position:sticky;top:0;z-index:50; background:var(--header-bg); backdrop-filter:saturate(160%) blur(8px); border-bottom:1px solid var(--header-border) } .header-row{display:flex;align-items:center;gap:24px} .brand{font-weight:800;letter-spacing:.2px;text-decoration:none;color:var(--brand);font-size:20px} .brand span{color:var(--accent)} .main-nav{display:flex;gap:18px} .main-nav a{color:var(--text);opacity:.85;text-decoration:none;padding:10px 6px;border-radius:8px} .main-nav a:hover{background:#1b2236} .header-actions{margin-left:auto} .btn{border:1px solid var(--border);background:#1b2236;color:var(--text);padding:8px 14px;border-radius:10px;cursor:pointer} .btn:hover{border-color:#2b3b60} .btn-ghost{background:transparent} .btn-primary{background:#212a42;border-color:#2b3b60} .btn-primary:hover{background:#273358} .btn-accent{background:var(--accent);color:#111827;border:0} .btn-lg{padding:14px 18px;border-radius:12px;font-weight:700;margin-top: 20px;} .btn[disabled]{opacity:.55; cursor:not-allowed; filter:saturate(.75) brightness(.9)} .hero{margin-top:18px;margin-bottom:8px;padding:28px;border:1px solid var(--border);border-radius:16px;} .hero h1{margin:0 0 6px;font-size:40px} .hero p{margin:0;color:var(--muted);font-size:26px} .section{margin:26px 0} .section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px} .section-head h2{font-size:32px; margin-bottom: 20px} .ob-input { transition: border-color .2s, box-shadow .2s; } .ob-input.is-attention{ border-color:#fbbf24; box-shadow:0 0 0 3px rgba(251,191,36,.35); } .muted{color:var(--muted)} .site-footer{border-top:1px solid var(--border);margin-top:28px} .site-footer p{color:#93a1b5} /* ========== CATEGORIES ========== */ .cat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px} .cat-card{ position:relative; overflow:hidden; height:120px; display:flex; align-items:flex-end; justify-content:flex-start; padding:12px; border:1px solid var(--border); border-radius:14px; background:#141b30; text-decoration:none; color:white; font-weight:600 } .cat-card:hover{outline:2px solid #2b3b60} .cat-card .cat-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(1.05) contrast(1.05); transform:scale(1.02)} .cat-card::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.0),rgba(0,0,0,.45))} .cat-card .cat-name{position:relative; z-index:1; font-weight:800; text-shadow:0 1px 2px rgba(0,0,0,.35); font-size: 24px} .legal-grid-offer {width: 100%;} .legal-card-subtitle {float: right;} /* ========== GRID ========== */ .main-grid{display:grid;grid-template-columns:1fr 360px;gap:18px} @media (max-width:980px){.main-grid{grid-template-columns:1fr}} /* ========== PRODUCTS ========== */ .products-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px} .product-card{border:1px solid var(--border);border-radius:16px;overflow:hidden;background:#12192b;display:flex;} .product-thumb{position:relative;background:#0e1424;display:flex;align-items:center;justify-content:center;width:130px; height: 156px} .product-thumb img{max-width:100%;max-height:100%} .badge-sale{position:absolute;top:10px;left:10px;background:var(--danger);color:#fff;padding:4px 8px;border-radius:999px;font-size:12px} .product-info{padding:12px} .product-title{margin:0 0 8px;font-size:16px} .product-bottom{display:grid;gap:10px;align-items:center;margin-top: 40px;} .product-price{font-weight:800} #obImg{width: 100px; height: auto; object-fit:cover; filter:saturate(.75) brightness(.9)} .qty-buy{display:flex;align-items:center;gap:8px} .btn-qty{ width:28px; height:32px; border-radius:8px; border:1px solid var(--border); background: var(--panel); /* было #1a2340 */ color: var(--text); /* было #cbd5e1 */ cursor:pointer; font-weight:800; transition: background .15s ease, border-color .15s ease, transform .05s ease; } .qty-input{ width:48px; height:32px; border-radius:8px; border:1px solid var(--border); background: var(--bg); /* было #0f1628 */ color: var(--text); /* было #e2e8f0 */ text-align:center; font-weight:700; } .btn-qty:hover { background: color-mix(in srgb, var(--panel) 80%, white 20%); } /* ====== Светлая тема: белый фон и тёмный текст где нужно ====== */ :root[data-theme="light"] .qty-input{ background:#ffffff; /* явный белый */ color:#0f172a; /* чёрный/тёмно-синий текст */ border-color: var(--border); } :root[data-theme="light"] .btn-qty{ background:#f1f5f9; /* светло-серый, чтобы кнопки не «проваливались» */ color:#0f172a; border-color: var(--border); } :root[data-theme="light"] .btn-qty:hover{ background:#e5e7eb; } .btn-qty:active{ transform: translateY(1px) } /* ========== ORDER BOX (desktop default) ========== */ .order-box{position:sticky;top:76px;border:1px solid var(--border);border-radius:16px;padding:16px;background:var(--panel);height:fit-content;will-change:transform} .ob-head{display:flex;align-items:center;justify-content:space-between;gap:10px;font-weight:800;margin-bottom:10px} .ob-close{ width:32px;height:32px;border-radius:8px;border:1px solid var(--border); background:#1a2340;color:#cbd5e1;cursor:pointer;font-weight:800;line-height:1; } .ob-field{margin-bottom:12px} .ob-field label{display:block;margin-bottom:6px;color:#cbd5e1} .ob-input{width:100%;height:40px;border-radius:10px;border:1px solid var(--border);background:#0f1628;color:#e5e7eb;padding:0 12px} .ob-hint{margin-top:8px;font-size:12px;color:#fbbf24;background:rgba(251,191,36,.12);border:1px dashed #7c650a;padding:8px;border-radius:8px} .ob-product-empty{padding:16px;border:1px dashed var(--border);border-radius:12px;color:var(--muted);text-align:center} .ob-product-picked{display:flex;gap:12px} .ob-product .hidden{display:none} .ob-meta{flex:1} .ob-title{font-weight:700;margin-bottom:6px} .ob-row{display:flex;align-items:center;justify-content:space-between;margin:8px 0} .ob-price{font-weight:800} .ob-guarantee{margin-top:12px;color:var(--accent-2);font-weight:600} /* ========== CHECKOUT ========== */ .breadcrumbs{color:var(--muted);margin:8px 0 10px} .breadcrumbs a{color:var(--muted);text-decoration:none} .page-title{margin:6px 0 14px} .checkout-grid{display:grid;grid-template-columns:1fr 360px;gap:18px} @media (max-width: 980px){ .checkout-grid{grid-template-columns:1fr} } .checkout-form{border:1px solid var(--border);border-radius:16px;background:var(--panel);padding:16px} .field{margin-bottom:12px} .label{display:block;margin:0 0 6px;color:#cbd5e1} .input{width:100%;height:44px;border-radius:10px;border:1px solid var(--border);background:#0f1628;color:#e5e7eb;padding:0 12px} .checkbox{display:flex;gap:10px;align-items:flex-start;margin:12px 0;color:#cbd5e1} .checkbox input{margin-top:4px} .subhead{font-size:18px;margin:14px 0 10px} .pay-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px} @media (max-width: 640px){ .pay-grid{grid-template-columns:1fr} } .pay-item{display:block} .pay-item input{display:none} .pi-card{border:1px solid var(--border);border-radius:14px;padding:14px;background:#12192b;display:flex;align-items:center;justify-content:space-between;gap:12px} .pay-item input:checked + .pi-card{outline:2px solid #2b3b60} .pi-left{display:flex;flex-direction:column;gap:6px} .pi-name{font-weight:700} .pi-badge{display:inline-block;background:#3b2b0a;color:#facc15;border:1px solid #7c650a;padding:2px 8px;border-radius:999px;font-size:12px} .pi-logos{color:#cbd5e1;font-weight:600} .form-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:16px} .checkout-summary{height:fit-content} .cs-card{border:1px solid var(--border);border-radius:16px;background:var(--panel);padding:14px} .cs-product{display:flex;gap:12px;margin-bottom:10px} .cs-img{width:96px;height:96px;border-radius:12px;object-fit:cover;background:#0e1424;border:1px solid var(--border)} .cs-meta{flex:1} .cs-title{font-weight:800;margin-bottom:4px} .cs-desc{color:#9aa7bf;font-size:14px} .cs-qty-row{display:flex;align-items:center;justify-content:space-between;margin-top:10px} .cs-summary-row{display:flex;align-items:center;justify-content:space-between;margin-top:12px;font-weight:800} .cs-promocode{display:inline-block;margin-top:8px;color:#93c5fd;text-decoration:none} /* ========== FAQ ========== */ .faq-section{display:flex;flex-direction:column;gap:10px} .faq-item{border:1px solid var(--border);border-radius:14px;background:#12192b;overflow:hidden} .faq-item[open]{outline:2px solid #2b3b60} .faq-question{list-style:none;cursor:pointer;padding:14px 16px;font-weight:700;position:relative;color:#e5e7eb} .faq-question::-webkit-details-marker{display:none} .faq-question::after{content:"";position:absolute;right:16px;top:50%;width:10px;height:10px;border-right:2px solid #94a3b8;border-bottom:2px solid #94a3b8;transform:translateY(-50%) rotate(-45deg);transition:.2s} .faq-item[open] .faq-question::after{transform:translateY(-50%) rotate(45deg)} .faq-answer{padding:0 16px 16px;color:#cbd5e1} /* ========== OFFER / LEGAL ========== */ .legal-grid{display:grid; grid-template-columns: 260px 1fr; gap:18px} @media (max-width: 980px){ .legal-grid{ grid-template-columns: 1fr; } } .toc{position:sticky; top:76px; align-self:start; border:1px solid var(--border); border-radius:16px; background:var(--panel); padding:14px} .toc-title{font-weight:800;margin-bottom:10px} .toc nav{display:flex;flex-direction:column;gap:8px} .toc a{color:#cbd5e1; text-decoration:none; padding:6px 8px; border-radius:10px; border:1px solid transparent} .toc a:hover{background:#141b30;border-color:#23304a} .legal-card{border:1px solid var(--border); border-radius:16px; background:var(--panel); padding:16px} .legal-section{margin:10px 0 18px} .legal-section h2{margin:0 0 8px; font-size:18px} .legal-section p, .legal-section li{color:#cbd5e1} .legal-section ul{padding-left:18px} .legal-contacts > div{margin:4px 0} /* ========== CONTACTS ========== */ .contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px} @media (max-width: 980px){ .contact-grid{ grid-template-columns:1fr; } } .contact-card{border:1px solid var(--border); border-radius:16px; background:var(--panel); padding:16px} .cc-head{display:flex; align-items:center; gap:10px; margin-bottom:10px} .cc-head.small{margin-bottom:6px} .cc-icon{width:36px; height:36px; display:grid; place-items:center; background:#12192b; border:1px solid var(--border); border-radius:10px; font-size:18px} .cc-title{font-weight:800; font-size:18px} .cc-body{display:flex; flex-direction:column; gap:12px} .cc-line{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 0; border-top:1px dashed var(--border)} .cc-line:first-child{border-top:none} .cc-label{color:#cbd5e1} .cc-value{display:flex; align-items:center; gap:10px; font-weight:700} .cc-value code{background:#0f1628; border:1px solid var(--border); padding:6px 8px; border-radius:8px; color:#e5e7eb} .cc-actions{display:flex; gap:10px; margin-top:6px} .btn-copy{padding:6px 10px} .contact-bottom{margin-top:18px; display:grid; grid-template-columns: 2fr 1fr; gap:18px} @media (max-width: 980px){ .contact-bottom{ grid-template-columns:1fr; } } .contact-note, .contact-email{border:1px solid var(--border); border-radius:16px; background:var(--panel); padding:16px} .contact-note h3{margin:0 0 8px} .contact-note p{margin:0; color:#cbd5e1} .contact-email .cc-value{font-weight:700} .contact-email a{color:#93c5fd; text-decoration:none} /* ========== MOBILE TWEAKS (global) ========== */ @media (max-width: 640px){ .container{padding:16px} .header-row{gap:12px; flex-wrap:wrap} .brand{font-size:18px} .main-nav{order:3; width:100%; display:flex; gap:8px; overflow-x:auto; -webkit-overflow-scrolling: touch; scrollbar-width:none; padding-bottom:6px; margin-top:4px} .main-nav::-webkit-scrollbar{display:none} .main-nav a{white-space:nowrap; padding:8px 10px} .header-actions{margin-left:0} .hero{padding:18px} .hero h1{font-size:28px} .hero p{font-size:14px} .product-thumb{height:170px} .product-title{font-size:15px} .qty-input{width:56px;height:36px} .btn-qty{height:36px} .product-bottom{gap:12px} } @media (max-width: 480px){ .cat-row{grid-template-columns: repeat(2, 1fr)} .cat-card{height:100px; padding:10px} .cat-card .cat-name{font-size:14px} } /* ========== MOBILE: FAB CART & DRAWER ========== */ .fab-cart{ display:none; position:fixed; right:16px; bottom:16px; z-index:90; align-items:center; justify-content:center; width:56px; height:56px; border-radius:999px; background:var(--accent); color:#111827; border:0; box-shadow:0 6px 20px rgba(0,0,0,.35) } .fab-cart .fab-badge{ position:absolute; top:-6px; right:-6px; min-width:20px; height:20px; padding:0 6px; border-radius:999px; background:#ef4444; color:#fff; font-size:12px; font-weight:800; display:flex; align-items:center; justify-content:center } @keyframes pulse-glow{ 0%{box-shadow:0 0 0 0 rgba(251,191,36,.8)} 70%{box-shadow:0 0 0 16px rgba(251,191,36,0)} 100%{box-shadow:0 0 0 0 rgba(251,191,36,0)} } .fab-cart.blink{ animation:pulse-glow 1s ease-out 2 } @media (max-width:980px){ .fab-cart.show{ display:inline-flex } } /* Drawer на мобилке */ @media (max-width:980px){ .order-box{ position:fixed !important; left:0; right:0; bottom:0; z-index:80; margin:0; border-radius:16px 16px 0 0; transform: translateY(110%) !important; transition: transform .28s ease, box-shadow .28s ease; box-shadow: 0 -10px 30px rgba(0,0,0,.35); display: none; } .order-box.open{ transform: translateY(0) !important } .ob-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:75; opacity:0; pointer-events:none; transition:opacity .2s } .ob-backdrop.open{ opacity:1; pointer-events:auto } } /* ===== Auth Modal ===== */ .hidden{display:none !important} .auth-modal{position:fixed; inset:0; z-index:120; pointer-events:none} .auth-modal.open{pointer-events:auto} .auth-backdrop{position:absolute; inset:0; background:rgba(0,0,0,.6); opacity:0; transition:opacity .2s} .auth-modal.open .auth-backdrop{opacity:1} .modal-card{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) scale(.96); width:100%; max-width:420px; border:1px solid var(--border); border-radius:16px; background:var(--panel); padding:18px; opacity:0; transition:transform .2s, opacity .2s } .auth-modal.open .modal-card{opacity:1; transform:translate(-50%,-50%) scale(1)} .modal-close{ position:absolute; top:10px; right:10px; width:32px; height:32px; border-radius:8px; border:1px solid var(--border); background:#1a2340; color:#cbd5e1; cursor:pointer; font-weight:800 } .modal-title{margin:4px 0 10px} .auth-tabs{display:flex; gap:8px; margin-bottom:12px} .auth-tab{ flex:1; padding:10px; border-radius:10px; border:1px solid var(--border); background:#12192b; color:var(--text); cursor:pointer } .auth-tab.active{outline:2px solid #2b3b60} .auth-form{display:none} .auth-form.visible{display:block} .form-row{display:flex; flex-direction:column; gap:6px; margin-bottom:10px} .form-error{min-height:18px; color:#ef4444; font-size:14px; margin:2px 0 8px} .auth-success{display:none; text-align:center; padding:14px} .auth-success.visible{display:block} .success-icon{ width:56px; height:56px; margin:6px auto 10px; border-radius:999px; display:grid; place-items:center; background:#063; color:#c6f6d5; font-weight:800; font-size:28px } /* Блокировка скролла фона при открытой модалке */ body.modal-open{overflow:hidden} /* ===== PAYMENT OPTIONS (обновлено) ===== */ .pay-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px} @media (max-width:640px){.pay-grid{grid-template-columns:1fr}} .pay-option{display:block; position:relative} .pay-option input{position:absolute; inset:0; width:0; height:0; opacity:0; pointer-events:none} .po-card{ border:1px solid var(--border); border-radius:14px; background:#12192b; padding:14px; display:grid; grid-template-rows:auto 1fr auto; min-height:150px; gap:6px; transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .po-top{display:flex; align-items:center; justify-content:space-between; gap:10px} .po-name{font-weight:800} .po-badge{ font-size:12px; border:1px solid #7c650a; color:#facc15; background:#3b2b0a; padding:2px 8px; border-radius:999px; white-space:nowrap } .po-badge.alt{border-color:#0b6a46; background:#083d2d; color:#86efac} .po-desc{color:#9aa7bf; font-size:14px} .po-logos{margin-top:6px; display:flex; align-items:center; gap:8px} .logo{ border:1px solid var(--border); background:#0f1628; color:#cbd5e1; border-radius:8px; padding:6px 10px; font-weight:700; font-size:12px } .pay-option:hover .po-card{border-color:#2b3b60; transform:translateY(-1px)} .pay-option input:checked + .po-card{ outline:2px solid #2b3b60; } .pay-option input:focus-visible + .po-card{outline:2px solid #3b82f6} /* =================== LIGHT THEME OVERRIDES =================== */ /* ссылки/навигация */ :root[data-theme="light"] .main-nav a:hover{ background:#f8fafc } /* кнопки */ :root[data-theme="light"] .btn{ background:#f1f5f9; color:#0f172a; border-color:#e2e8f0; } :root[data-theme="light"] .btn:hover{ border-color:#cbd5e1 } :root[data-theme="light"] .btn-primary{ background:#e2e8f0; border-color:#cbd5e1; color:#0f172a; } :root[data-theme="light"] .btn-primary:hover{ background:#e5e7eb } :root[data-theme="light"] .btn-ghost{ background:transparent; color:#0f172a } /* карточки/панели */ :root[data-theme="light"] .product-card, :root[data-theme="light"] .checkout-form, :root[data-theme="light"] .cs-card, :root[data-theme="light"] .contact-card, :root[data-theme="light"] .contact-note, :root[data-theme="light"] .contact-email, :root[data-theme="light"] .legal-card, :root[data-theme="light"] .toc{ background: #ffffff; border-color: var(--border); } /* «тёмные» блоки с жёстким цветом — осветлим */ :root[data-theme="light"] .product-thumb, :root[data-theme="light"] .cs-img{ background:#f8fafc; border-color:var(--border) } :root[data-theme="light"] .pi-card, :root[data-theme="light"] .po-card{ background:#ffffff } :root[data-theme="light"] .input, :root[data-theme="light"] .ob-input{ background:#ffffff; color:#0f172a; border-color:var(--border); } :root[data-theme="light"] .cc-icon{ background:#f8fafc; border-color:var(--border) } :root[data-theme="light"] .toc a:hover{ background:#f8fafc; border-color:var(--border) } /* тексты/подписи */ :root[data-theme="light"] .muted{ color:#64748b } :root[data-theme="light"] .cs-desc{ color:#64748b } /* категории */ :root[data-theme="light"] .cat-card{ background:#f8fafc } :root[data-theme="light"] .cat-card::after{ background: linear-gradient(180deg, rgba(255,255,255,0), rgba(0,0,0,.08)); } /* FAQ */ :root[data-theme="light"] .faq-item{ background:#ffffff } :root[data-theme="light"] .faq-question{ color:#0f172a } :root[data-theme="light"] .faq-question::after{ border-color:#64748b } :root[data-theme="light"] .faq-answer{ color:#334155 } .header-actions{ margin-left:auto; display:flex; /* <— было только margin-left:auto */ align-items:center; gap:10px; /* одинаковый отступ между кнопками */ } /* компактная квадратная кнопка-переключатель темы */ .theme-toggle{ display:inline-flex; align-items:center; } .theme-btn{ -webkit-appearance: none; appearance: none; display:inline-flex; align-items:center; justify-content:center; width:40px; /* такая же высота, как у .btn с .btn-lg=нет */ height:40px; padding:0; /* чтобы иконка была по центру */ border-radius:12px; border:1px solid var(--border); background:var(--panel); color:var(--text); line-height:1; /* убираем влияние baseline */ cursor:pointer; } .theme-btn:focus-visible{ outline:2px solid #3b82f6; outline-offset:2px } .theme-btn:hover{ border-color:#cbd5e1 } /* светлая тема — фон/граница в тон .btn */ :root[data-theme="light"] .theme-btn{ background:#f8fafc; border-color:#e5e7eb; color:#0f172a; } /* небольшое выравнивание svg */ .theme-btn svg{ display:block; /* убирает лишний нижний зазор у inline-svg */ width:18px; height:18px; } /* Drawer на мобилке */ @media (max-width:980px){ .order-box{ position:fixed !important; left:0; right:0; bottom:0; z-index:80; margin:0; border-radius:16px 16px 0 0; transform: translateY(110%) !important; /* уезжает вниз */ transition: transform .28s ease, box-shadow .28s ease; box-shadow: 0 -10px 30px rgba(0,0,0,.35); /* ВАЖНО: не прячем display — иначе класс .open не поможет */ display:block; } .order-box.open{ transform: translateY(0) !important; display:block; /* на всякий случай (перебивает старое правило) */ } /* опционально: затемнение фона, если используешь .ob-backdrop */ .ob-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:75; opacity:0; pointer-events:none; transition:opacity .2s; } .ob-backdrop.open{ opacity:1; pointer-events:auto } } /* MOBILE DRAWER — скрыт по умолчанию, виден только с .open */ @media (max-width:980px){ .order-box{ position:fixed !important; left:0; right:0; bottom:0; z-index:80; margin:0; border-radius:16px 16px 0 0; transform: translateY(100%); /* полностью за пределами экрана */ opacity:0; visibility:hidden; transition: transform .28s ease, opacity .2s ease, visibility 0s linear .2s; box-shadow:0 -10px 30px rgba(0,0,0,.35); display:block; /* обязательно, чтобы анимация работала */ background:var(--panel); } .order-box.open{ transform: translateY(0); opacity:1; visibility:visible; transition: transform .28s ease, opacity .2s ease; } /* подложка */ .ob-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:75; opacity:0; pointer-events:none; transition:opacity .2s ease; } .ob-backdrop.open{ opacity:1; pointer-events:auto } } /* [limits] модалка проверки лимитов */ .limits-modal { z-index: 120; } .limits-card{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(520px, 92%); border:1px solid var(--border); border-radius:16px; background:var(--panel); padding:16px; box-shadow: 0 10px 40px rgba(0,0,0,.35); } .limits-hero{ display:flex; align-items:center; gap:12px; margin-bottom:10px; } .limits-icon{ width:42px; height:42px; border-radius:10px; display:grid; place-items:center; background:#3b0a0a; color:#fca5a5; border:1px solid #7f1d1d; font-size:22px; } .limits-hero h3{ margin:0 } .limits-details{ display:grid; gap:8px; margin:10px 0 6px } .limit-row{ display:flex; gap:8px } .limit-key{ width:110px; color:var(--muted) } .limit-val{ flex:1 } .limit-note{ background:#101726; border:1px dashed var(--border); padding:8px 10px; border-radius:10px; color:#cbd5e1; } .limits-actions{ display:flex; justify-content:flex-end; margin-top:10px }