/* STEK shop chrome — shared cached stylesheet. Do not duplicate in page <style>. */
:root {
--accent: #00ff88; --accent-dark: #00cc77; --accent-glow: rgba(0, 255, 136, 0.4);
--bg-primary: #020a04; --bg-secondary: #0a1a0a; --bg-glass: rgba(0, 20, 8, 0.6);
--bg-card: rgba(0, 12, 4, 0.75); --border-subtle: rgba(0, 255, 136, 0.12);
--border-strong: rgba(0, 255, 136, 0.35); --text-primary: #e0ffe0;
--text-secondary: #b0e0b0; --text-muted: #7a9f7a; --warning: #ffaa00; --danger: #ff4444;
--radius-sm: 8px; --radius-md: 14px; --radius-lg: 20px; --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { max-width: 100%; overflow-x: hidden; }
body {
font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
background: var(--bg-primary); color: var(--text-primary); display: flex;
height: 100vh; overflow: hidden; overflow-x: hidden; max-width: 100%;
-webkit-font-smoothing: antialiased;
animation: pageEnter 0.5s cubic-bezier(0.16, 1, 0.3, 1);
overscroll-behavior-x: none;
}
@keyframes pageEnter { from { opacity: 0; } to { opacity: 1; } }
body.page-exit { animation: pageExit 0.35s ease forwards; pointer-events: none; }
@keyframes pageExit { from { opacity: 1; } to { opacity: 0; } }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: rgba(0,0,0,0.3); }
::-webkit-scrollbar-thumb { background: rgba(0,255,136,0.15); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0,255,136,0.3); }
.sidebar { width: 70px; background: transparent; display: flex; flex-direction: column; align-items: center; padding: 20px 0; z-index: 10; flex-shrink: 0; }
@media (max-width: 768px) { .sidebar { display: none; } }
.sidebar button { width: 50px; height: 50px; background: transparent; border: none; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all var(--transition); margin-bottom: 12px; position: relative; }
.sidebar button svg { width: 24px; height: 24px; fill: #aaa; transition: all var(--transition); }
.sidebar button.active { background: rgba(0,255,136,0.1); box-shadow: inset 0 0 0 1px var(--border-subtle); }
.sidebar button.active svg { fill: var(--accent); filter: drop-shadow(0 0 8px var(--accent-glow)); }
.sidebar button:hover { background: rgba(255,255,255,0.05); transform: translateY(-2px); }
.sidebar button.hidden-btn { display: none; }
.main { flex: 1; min-width: 0; width: 100%; max-width: 100%; position: relative; display: flex; flex-direction: column; align-items: center; overflow-y: auto; overflow-x: hidden; padding: 60px 20px 80px; overscroll-behavior-x: none; }
canvas#logoBgCanvas, canvas#bgCanvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }
canvas#logoBgCanvas { z-index: -2; } canvas#bgCanvas { z-index: -1; }
.ip-info-bar {
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
text-align: center; font-size: 0.8rem; color: rgba(255,255,255,0.35);
background: transparent; padding: 8px; letter-spacing: 0.5px; pointer-events: none;
min-height: 1.6em;
}
.notification-banner {
position: fixed;
top: 40px;
left: 50%;
transform: translateX(-50%);
background: rgba(0,16,6,0.95);
backdrop-filter: blur(20px);
border: 1px solid;
border-radius: 14px;
padding: 12px 20px;
z-index: 9000;
max-width: 500px;
width: calc(100% - 40px);
box-shadow: 0 8px 30px rgba(0,0,0,0.5);
animation: slideDown 0.5s cubic-bezier(0.4,0,0.2,1);
}
@keyframes slideDown {
from { opacity: 0; transform: translate(-50%, -20px); }
to { opacity: 1; transform: translate(-50%, 0); }
}
.notification-banner .n-title { font-weight: 700; margin-bottom: 4px; font-size: 0.95rem; }
.notification-banner .n-text { font-size: 0.85rem; color: #e0ffe0; line-height: 1.4; word-wrap: break-word; }
.notification-banner .n-close { background: none; border: none; color: rgba(255,255,255,0.5); font-size: 1.5rem; cursor: pointer; padding: 0 0 0 10px; line-height: 1; }
.notification-banner .n-close:hover { color: #fff; }
.page-title {
font-size: 2.2rem; font-weight: 800; text-align: center;
background: linear-gradient(135deg, #00ff88 0%, #00cc77 50%, #00ffaa 100%);
background-size: 200% 200%; animation: gradientShift 4s ease infinite;
-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
margin: 20px 0 24px; letter-spacing: -0.5px; filter: drop-shadow(0 0 20px rgba(0,255,136,0.4));
z-index: 2; position: relative;
}
@keyframes gradientShift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.page-title .emoji-standard { font-size: 2.2rem; display: inline-block; -webkit-text-fill-color: initial; color: initial; background: none; filter: none; animation: pulse 2s ease-in-out infinite; }
.page-title { display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; }
.page-title .title-icon { width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center; color:#10b981; flex-shrink:0; -webkit-text-fill-color:initial; background:none; filter:drop-shadow(0 0 6px rgba(16,185,129,0.25)); animation:none; }
.page-title .title-icon svg { width:24px; height:24px; }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
.best-server-banner {
z-index: 10; background: var(--bg-glass); backdrop-filter: blur(24px) saturate(180%);
-webkit-backdrop-filter: blur(24px) saturate(180%); border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg); padding: 18px 24px; margin: 0 auto 24px; display: none;
align-items: center; gap: 16px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 40px rgba(0, 255, 136, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.05);
width: fit-content; max-width: 90vw; position: relative; overflow: hidden; animation: slideInDown 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes slideInDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }
.best-server-banner::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(0,255,136,0.1), transparent); animation: shimmer 3s ease-in-out infinite; pointer-events: none; }
@keyframes shimmer { 0% { left: -100%; } 100% { left: 100%; } }
.best-server-banner.visible { display: flex; }
.best-server-banner.loading { display: flex; min-width: 320px; min-height: 80px; }
.best-server-banner .flag { font-size: 2.5rem; line-height: 1; filter: drop-shadow(0 4px 12px rgba(0,0,0,0.3)); animation: flagWave 3s ease-in-out infinite; flex-shrink: 0; }
@keyframes flagWave { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
.best-server-banner .info { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.best-server-banner .info .title { font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1.5px; font-weight: 600; }
.best-server-banner .info .row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.best-server-banner .info .name { font-size: 1.25rem; font-weight: 700; color: #fff; text-shadow: 0 0 20px rgba(0,255,136,0.3); }
.best-server-banner .info .type-text { font-size: 0.8rem; color: var(--accent); font-weight: 600; background: rgba(0,255,136,0.1); padding: 2px 8px; border-radius: 6px; border: 1px solid var(--border-subtle); }
.best-server-banner .info .ping { font-size: 0.75rem; color: var(--text-secondary); display: flex; align-items: center; gap: 4px; }
.best-server-banner .best-status { font-size: 0.85rem; display: flex; align-items: center; gap: 6px; margin-left: auto; padding-left: 12px; border-left: 1px solid var(--border-subtle); flex-shrink: 0; }
.best-server-banner .status-dot { width: 10px; height: 10px; border-radius: 50%; position: relative; }
.best-server-banner .status-dot.online { background: var(--accent); box-shadow: 0 0 12px var(--accent-glow); }
.best-server-banner .status-dot.online::before { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--accent); animation: ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite; }
@keyframes ping { 0% { transform: scale(1); opacity: 1; } 75%, 100% { transform: scale(2); opacity: 0; } }
.best-server-banner .status-dot.offline { background: var(--danger); box-shadow: 0 0 12px rgba(255,68,68,0.6); }
.skeleton-line { background: linear-gradient(90deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.05) 100%); background-size: 200% 100%; animation: skeleton-loading 1.5s ease-in-out infinite; border-radius: 6px; }
@keyframes skeleton-loading { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.skeleton-flag { width: 50px; height: 50px; border-radius: 12px; }
.skeleton-text { height: 14px; margin: 4px 0; }
.skeleton-text.w-40 { width: 40%; } .skeleton-text.w-60 { width: 60%; } .skeleton-text.w-80 { width: 80%; }
.feed-card, .guide-section { background:rgba(0,12,4,0.85); backdrop-filter:blur(20px); border:1px solid rgba(0,255,136,0.15); border-radius:14px; padding:18px; margin-bottom:14px; text-align:left; box-shadow:0 4px 20px rgba(0,0,0,0.4); }
.feed-card-title, .guide-section h3 { color:#00ff88; font-size:1.05rem; font-weight:700; margin-bottom:10px; }
.feed-card-text { color:#b0e0b0; font-size:0.9rem; line-height:1.55; white-space:pre-wrap; word-wrap:break-word; }
.feed-card.feed-danger { border-color:rgba(255,68,68,0.35); }
.feed-card.feed-warning { border-color:rgba(255,170,0,0.35); }
.feed-card.feed-success { border-color:rgba(0,255,136,0.35); }
.feed-card.feed-info { border-color:rgba(74,158,255,0.35); }
.feed-empty, .feed-loading { color:#8aad8a; text-align:center; padding:24px 12px; font-size:0.95rem; }
.guide-hint { background:rgba(0,255,136,0.05); border:1px solid rgba(0,255,136,0.2); border-radius:12px; padding:14px; color:#b0e0b0; font-size:0.9rem; margin-bottom:14px; line-height:1.5; }
.guide-steps { color:#b0e0b0; font-size:0.9rem; line-height:1.6; padding-left:20px; margin:0; }
.guide-steps li { margin-bottom:8px; }
.guide-steps a { color:#00ff88; }
.guide-sub-block { background:rgba(0,255,136,0.04); border:1px solid rgba(0,255,136,0.2); border-radius:12px; padding:14px; margin-bottom:14px; }
.guide-sub-block.inactive { opacity:0.65; border-color:rgba(255,68,68,0.25); }
.guide-sub-title { color:#fff; font-weight:600; margin-bottom:10px; font-size:0.95rem; }
.guide-link-row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.guide-link-input { flex:1; min-width:180px; background:rgba(255,255,255,0.05); border:1px solid rgba(0,255,136,0.25); border-radius:8px; padding:10px; color:#e0ffe0; font-family:monospace; font-size:0.8rem; }
.happ-btn-inline { background:linear-gradient(135deg,#ff6600,#ff4400)!important; color:#fff!important; border:none!important; }
.guide-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.map-wrapper {
width: 100%; max-width: 1000px; border-radius: var(--radius-lg); overflow: hidden;
border: 1px solid var(--border-subtle); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 40px rgba(0, 255, 136, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.05);
background: var(--bg-secondary); position: relative; z-index: 5; height: 580px; transition: all var(--transition);
}
.map-wrapper:hover { box-shadow: 0 25px 70px rgba(0, 0, 0, 0.7), 0 0 50px rgba(0, 255, 136, 0.2); }
#map { width: 100%; height: 100%; }
.custom-marker {
display: flex; align-items: center; justify-content: center; width: 34px; height: 34px;
background: var(--bg-card); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
border: 2px solid var(--border-strong); border-radius: 50%; font-size: 1.1rem;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5), 0 0 16px var(--accent-glow);
transition: all var(--transition); cursor: pointer; position: relative;
}
.custom-marker::before { content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--accent); opacity: 0; animation: markerPing 2s cubic-bezier(0, 0, 0.2, 1) infinite; }
@keyframes markerPing { 0% { transform: scale(0.8); opacity: 0.8; } 100% { transform: scale(1.5); opacity: 0; } }
.custom-marker.offline { border-color: rgba(255, 68, 68, 0.6); box-shadow: 0 4px 16px rgba(0,0,0,0.5), 0 0 16px rgba(255,68,68,0.4); }
.custom-marker.offline::before { border-color: var(--danger); animation: markerPingRed 2s cubic-bezier(0, 0, 0.2, 1) infinite; }
@keyframes markerPingRed { 0% { transform: scale(0.8); opacity: 0.8; } 100% { transform: scale(1.5); opacity: 0; } }
.custom-marker.highlight { transform: scale(1.3); border-color: var(--warning); box-shadow: 0 4px 24px rgba(255, 170, 0, 0.8); z-index: 1000 !important; }
.custom-marker.highlight::before { border-color: var(--warning); }
.servers-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; width: 100%; max-width: 1000px; margin-top: 24px; z-index: 2; }
.server-card {
background: var(--bg-glass); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%);
border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 14px 16px;
display: flex; align-items: center; gap: 12px; cursor: pointer; transition: all var(--transition);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); position: relative; overflow: hidden; min-width: 0;
animation: fadeInUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
.server-card:nth-child(1) { animation-delay: 0.05s; } .server-card:nth-child(2) { animation-delay: 0.1s; }
.server-card:nth-child(3) { animation-delay: 0.15s; } .server-card:nth-child(4) { animation-delay: 0.2s; } .server-card:nth-child(5) { animation-delay: 0.25s; }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.server-card::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(0,255,136,0.08), transparent); transition: left 0.6s ease; }
.server-card:hover::before { left: 100%; }
.server-card:hover { border-color: var(--accent); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5), 0 0 30px var(--accent-glow); transform: translateY(-4px); }
.server-card.active-card { border-color: var(--warning); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5), 0 0 30px rgba(255, 170, 0, 0.5); }
.server-emoji { font-size: 1.5rem; display: flex; align-items: center; line-height: 1; filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3)); flex-shrink: 0; }
.server-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; overflow: hidden; }
.server-info .country { font-weight: 600; color: #fff; font-size: 0.9rem; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.server-info .details { font-size: 0.72rem; color: var(--text-muted); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.server-info .type-badge { display: inline-block; background: rgba(0,255,136,0.15); border: 1px solid var(--border-subtle); border-radius: 6px; padding: 2px 8px; font-size: 0.62rem; color: var(--accent); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; white-space: nowrap; }
.server-info .type-badge.cdn { background: rgba(255,170,0,0.15); border-color: rgba(255,170,0,0.3); color: var(--warning); }
.server-info .speed { font-weight: 600; color: var(--accent); font-size: 0.75rem; white-space: nowrap; display: flex; align-items: center; gap: 4px; }
.server-status { font-size: 0.72rem; font-weight: 600; white-space: nowrap; display: flex; align-items: center; gap: 6px; flex-shrink: 0; padding: 4px 10px; border-radius: 20px; background: rgba(0, 255, 136, 0.1); border: 1px solid var(--border-subtle); }
.server-status.offline { background: rgba(255, 68, 68, 0.1); border-color: rgba(255, 68, 68, 0.3); color: var(--danger); }
.status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; position: relative; flex-shrink: 0; }
.status-dot.online { background: var(--accent); box-shadow: 0 0 8px var(--accent-glow); }
.status-dot.offline { background: var(--danger); box-shadow: 0 0 8px rgba(255,68,68,0.6); }
@media (max-width: 768px) {
.main { padding: 35px 8px calc(92px + env(safe-area-inset-bottom, 0px)); touch-action: pan-y; }
.page-title { font-size: 1.1rem; margin: 0 0 6px 0; }
.page-title .emoji-standard, .page-title .title-icon { font-size: 1.1rem; }
.page-title .title-icon { width: 20px; height: 20px; }
.page-title .title-icon svg { width: 18px; height: 18px; }
.best-server-banner {
display: flex !important; flex-direction: row !important; align-items: center !important;
justify-content: space-between !important; padding: 8px 12px !important; gap: 8px !important;
width: 100% !important; margin: 0 0 8px 0 !important; border-radius: 12px !important;
}
.best-server-banner .flag { font-size: 1.6rem !important; margin: 0 !important; }
.best-server-banner .info { flex: 1 !important; display: flex !important; flex-direction: column !important; gap: 1px !important; }
.best-server-banner .info .title { display: block !important; font-size: 0.7rem; margin-bottom: 2px; }
.best-server-banner .info .row { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 2px !important; }
.best-server-banner .info .name { font-size: 0.9rem !important; font-weight: 700 !important; color: #fff !important; line-height: 1.2 !important; }
.best-server-banner .info .type-text { font-size: 0.65rem !important; padding: 1px 6px !important; }
.best-server-banner .info .ping { display: none !important; }
.best-server-banner .best-status { margin: 0 !important; padding: 0 !important; border: none !important; font-size: 0.7rem !important; flex-direction: row !important; gap: 4px !important; }
.best-server-banner .status-dot { width: 8px !important; height: 8px !important; }
.map-wrapper { height: 260px; min-height: 260px; border-radius: 12px; width: 100%; margin-bottom: 8px; }
.servers-grid { grid-template-columns: 1fr; gap: 6px; width: 100%; margin-top: 0; }
.server-card { flex-direction: row; align-items: center; padding: 8px 10px; gap: 8px; }
.server-emoji { font-size: 1.2rem; }
.server-info { gap: 2px; }
.server-info .country { font-size: 0.85rem; }
.server-info .details { font-size: 0.7rem; gap: 6px; }
.server-info .speed { font-size: 0.7rem; }
.server-status { padding: 3px 8px; font-size: 0.7rem; }
}
@media (max-width: 450px) {
.map-wrapper { height: 240px; min-height: 240px; }
.server-card { padding: 7px 8px; gap: 6px; }
.server-emoji { font-size: 1.1rem; }
.best-server-banner { padding: 6px 10px !important; }
.page-title { font-size: 1rem; }
.best-server-banner .info .name { font-size: 0.85rem !important; }
}
@media (min-width: 769px) {
.servers-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.server-card { padding: 12px 14px; gap: 12px; align-items: center; }
.server-emoji { font-size: 1.4rem; }
.server-info .country { font-size: 0.9rem; }
.server-info .details { font-size: 0.75rem; gap: 8px; flex-wrap: wrap; }
.server-info .speed { font-size: 0.75rem; }
.server-status { padding: 4px 10px; font-size: 0.75rem; }
}
.mobile-nav {
display:none; position:fixed; bottom:0; left:0; right:0; z-index:1000;
justify-content:space-around; align-items:stretch; gap:1px;
padding:8px 2px calc(8px + env(safe-area-inset-bottom, 0px));
background:rgba(13,14,18,0.97); backdrop-filter:blur(20px) saturate(140%);
-webkit-backdrop-filter:blur(20px) saturate(140%);
border-top:1px solid rgba(255,255,255,0.12);
box-shadow:0 -4px 24px rgba(0,0,0,0.55);
pointer-events:auto;
}
@media (max-width:768px) { .mobile-nav { display:flex; } }
.mobile-nav button {
pointer-events:auto; background:transparent; border:none; color:rgba(255,255,255,0.88);
display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
font-size:0.58rem; font-weight:600; padding:4px 1px; transition: all var(--transition);
text-align:center; flex:1; min-width:0; max-width:72px; line-height:1.15;
text-shadow:0 1px 3px rgba(0,0,0,0.85); -webkit-tap-highlight-color:transparent;
}
.mobile-nav button.active { color:var(--accent); text-shadow:0 0 8px rgba(0,255,136,0.4), 0 1px 3px rgba(0,0,0,0.85); }
.mobile-nav button svg { width:20px; height:20px; fill:currentColor; flex-shrink:0; filter:drop-shadow(0 1px 2px rgba(0,0,0,0.75)); }
.mobile-nav button.active svg { filter:drop-shadow(0 0 5px rgba(0,255,136,0.45)) drop-shadow(0 1px 2px rgba(0,0,0,0.75)); }
.mobile-nav button.hidden-btn { display:none; }
.register-overlay, .ticket-overlay, .admin-overlay, .spam-overlay, .menu-overlay, .guest-overlay { display:flex; position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.85); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); z-index:2000; align-items:center; justify-content:center; padding:20px; opacity:0; visibility:hidden; pointer-events:none; transition:opacity 0.2s ease; }
.register-overlay.active, .ticket-overlay.active, .admin-overlay.active, .spam-overlay.active, .menu-overlay.active, .guest-overlay.active { opacity:1; visibility:visible; pointer-events:auto; }
.register-modal, .ticket-modal, .admin-modal, .spam-modal, .menu-modal, .guest-modal {
background: rgba(0,16,6,0.98); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
padding: 30px; max-width: 500px; width: 100%; max-height: 85vh; overflow-y: auto; color: #fff;
box-shadow: 0 25px 80px rgba(0,0,0,0.8), 0 0 40px var(--accent-glow); 
}
@media (max-width:768px) { .ticket-modal { max-width:95vw; } }
@media (min-width:769px) { .ticket-modal { max-width:650px; } }
.register-modal { text-align:center; }
.register-modal input, .ticket-modal input, .ticket-modal textarea, .admin-modal input, .admin-modal textarea, .guest-modal input {
background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius-sm);
padding: 12px 16px; color: var(--text-primary); font-size: 1rem; width: 100%; outline: none; margin-bottom: 12px; transition: all var(--transition);
}
.register-modal input:focus, .ticket-modal input:focus, .ticket-modal textarea:focus, .admin-modal input:focus, .admin-modal textarea:focus, .guest-modal input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0,255,136,0.1); }
.register-modal input { text-align:center; }
.ticket-modal textarea { min-height:80px; resize: vertical; }
.register-modal button, .ticket-modal button, .admin-modal button, .spam-modal button, .menu-modal button, .guest-modal button {
background: rgba(22,24,30,0.88); color: #eef0f3; border: 1px solid rgba(255,255,255,0.12);
padding: 12px 24px; border-radius: var(--radius-sm); font-weight: 600; cursor: pointer; font-size: 0.9rem;
box-shadow: 0 3px 12px rgba(0,0,0,0.35); width: 100%; margin-top: 8px; transition: all var(--transition);
}
.register-modal button:hover, .ticket-modal button:hover, .admin-modal button:hover, .spam-modal button:hover, .menu-modal button:hover, .guest-modal button:hover { transform: translateY(-2px); box-shadow: 0 6px 25px var(--accent-glow); }
.register-modal button.secondary, .ticket-modal button.secondary, .admin-modal button.secondary, .spam-modal button.secondary, .menu-modal button.secondary, .guest-modal button.secondary { background: rgba(255,255,255,0.08); color: #fff; margin-top: 4px; box-shadow: none; }
.credentials { background:rgba(0,0,0,0.3); border-radius:8px; padding:12px; margin:12px 0; font-family:monospace; word-break:break-all; }
.ticket-list { display:flex; flex-direction:column; gap:12px; }
.ticket-card { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius-sm); padding: 12px; cursor: pointer; transition: all var(--transition); word-wrap: break-word; }
.ticket-card:hover { background: rgba(255,255,255,0.1); transform: translateX(4px); border-color: var(--accent); }
.ticket-card .ticket-id { font-family:monospace; color:#b0b0b0; word-wrap: break-word; }
.ticket-card .ticket-status { font-size:0.8rem; }
.ticket-card .ticket-preview { font-size:0.85rem; color:#ccc; margin-top:4px; word-wrap: break-word; }
.ticket-card .ticket-time {
font-family: 'SF Mono', Monaco, 'Inconsolata', 'Courier New', monospace;
font-size: 0.7rem;
color: rgba(255,255,255,0.45);
margin-top: 4px;
letter-spacing: 0.5px;
opacity: 0.85;
}
.ticket-card .ticket-read { font-size:0.8rem; margin-top:4px; }
.ticket-detail { background: rgba(24,28,36,0.96); border: 1px solid rgba(255,255,255,0.14); border-radius: 14px; padding: 18px; margin-bottom: 16px; word-wrap: break-word; color: #eef0f3; }
.ticket-detail h4 { color: #ffffff; margin-bottom: 10px; word-wrap: break-word; font-weight: 600; }
.ticket-detail label, .ticket-detail .ticket-meta { color: #cbd5e1 !important; }
.chat-messages { max-height: 320px; overflow-y: auto; margin-bottom: 14px; padding: 14px; border-radius: 12px; background: rgba(15,18,24,0.85); border: 1px solid rgba(255,255,255,0.1); }
.chat-message { margin-bottom: 12px; display: flex; flex-direction: column; }
.chat-message.user { align-items: flex-end; }
.chat-message.admin { align-items: flex-start; }
.chat-bubble { padding: 11px 15px; border-radius: 14px; max-width: 85%; word-break: break-word; white-space: pre-wrap; color: #f8fafc; line-height: 1.45; font-size: 0.95rem; }
.chat-message.user .chat-bubble { background: rgba(16,185,129,0.28); border: 1px solid rgba(16,185,129,0.5); border-radius: 14px 14px 4px 14px; }
.chat-message.admin .chat-bubble { background: rgba(251,146,60,0.22); border: 1px solid rgba(251,146,60,0.45); border-radius: 14px 14px 14px 4px; }
.ticket-modal textarea, .ticket-reply-input, #replyMessage { background: rgba(255,255,255,0.09) !important; border: 1px solid rgba(255,255,255,0.18) !important; color: #f1f5f9 !important; border-radius: 10px !important; padding: 12px !important; width: 100% !important; resize: vertical; margin-bottom: 8px; }
.ticket-modal textarea::placeholder, .ticket-reply-input::placeholder, #replyMessage::placeholder { color: #94a3b8 !important; }
.chat-time, .chat-time-fancy { font-size: 0.72rem; color: #94a3b8 !important; margin-top: 5px; opacity: 1 !important; letter-spacing: 0.3px; }
.ticket-controls { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.ticket-controls button { padding: 6px 12px; font-size: 0.8rem; white-space: nowrap; }
.spam-modal { text-align:center; font-family:'Courier New', monospace; color: var(--accent); border-color: #ff6600; box-shadow: 0 0 25px rgba(255,102,0,0.5); }
.spam-modal h3 { color:#ff6600; text-shadow:0 0 6px #ff6600; }
.badge { position: absolute; top: -4px; right: -4px; background: var(--danger); color: #fff; border-radius: 50%; width: 18px; height: 18px; font-size: 0.65rem; display: none; align-items: center; justify-content: center; pointer-events: none; font-weight: 700; }
.badge.visible { display: flex; }
.ticket-list-scroll { max-height: 400px; overflow-y: auto; mask-image: linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%); -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%); padding: 12px 0; }
.has-new-message { border-left: 3px solid var(--warning) !important; }
.ticket-btn { background: rgba(0,255,136,0.08); border: 1px solid var(--border-subtle); color: var(--accent); border-radius: var(--radius-sm); padding: 8px 14px; font-size: 0.8rem; font-weight: 600; cursor: pointer; transition: all var(--transition); text-align: center; width: 100%; margin-top: 8px; white-space: nowrap; }
.ticket-btn:hover { background: rgba(0,255,136,0.15); border-color: var(--accent); transform: translateY(-1px); }
.ticket-btn.danger { border-color: rgba(255,68,68,0.3); color: var(--danger); background: rgba(255,68,68,0.08); }
.ticket-btn.danger:hover { background: rgba(255,68,68,0.15); }
.ticket-btn.warning { border-color: rgba(255,170,0,0.3); color: var(--warning); background: rgba(255,170,0,0.08); }
.ticket-btn.warning:hover { background: rgba(255,170,0,0.15); }
.tariff-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:20px; }
.tariff-card { background: rgba(0,255,136,0.04); border: 1px solid var(--border-subtle); border-radius: 12px; padding: 14px; cursor: pointer; transition: all var(--transition); text-align: center; position: relative; }
.tariff-card:hover, .tariff-card.selected { border-color: var(--accent); background: rgba(0,255,136,0.1); transform: translateY(-2px); box-shadow: 0 4px 20px var(--accent-glow); }
.tariff-card.promo-match { border-color: rgba(0,255,136,0.55); box-shadow: 0 0 0 1px rgba(0,255,136,0.25), 0 4px 16px rgba(0,255,136,0.12); }
.tariff-card.promo-match::after { content: '🎟️ скидка'; position: absolute; top: 6px; right: 6px; font-size: 0.65rem; font-weight: 700; color: #00ff88; background: rgba(0,255,136,0.12); border: 1px solid rgba(0,255,136,0.3); border-radius: 6px; padding: 2px 5px; }
.tariff-card.promo-miss { opacity: 0.42; filter: grayscale(0.25); }
.tariff-card.promo-miss:hover { opacity: 0.7; }
.tariff-days { font-size:1.2rem; font-weight:700; color:#fff; }
.tariff-price { font-size:0.85rem; color: var(--accent); margin-top:4px; }
.tariff-price-rub { font-size:0.75rem; color:#ffaa00; margin-top:2px; }
.gift-link-code { font-family:monospace; font-size:0.75rem; background:rgba(0,0,0,0.35); border:1px solid rgba(255,255,255,0.08); padding:8px 10px; border-radius:8px; cursor:pointer; word-break:break-all; color:#cceecc; margin:4px 0 8px; }
.gift-link-code:hover { border-color:rgba(0,255,136,0.35); color:#fff; }
.gift-tariff-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:10px 0; }
.gift-tariff-btn { padding:10px 8px; border-radius:10px; cursor:pointer; font-size:0.82rem; text-align:center; line-height:1.35; width:100%; }
.gift-pay-row { display:flex; gap:8px; flex-wrap:wrap; margin:10px 0; }
.gift-pay-btn { flex:1; min-width:90px; padding:9px 10px; border-radius:10px; cursor:pointer; font-size:0.8rem; }
.gift-tariff-btn.sel, .gift-pay-btn.sel { border-color:rgba(16,185,129,0.45) !important; background:rgba(28,31,38,0.95) !important; color:#eef0f3 !important; box-shadow:0 4px 16px rgba(16,185,129,0.18) !important; }
.gift-tariff-btn .gift-price-usdt { color:#10b981; font-size:0.78rem; font-weight:600; }
.gift-tariff-btn .gift-price-rub { color:#b8c0cc; font-size:0.72rem; }
.gift-item { padding:12px 0; border-bottom:1px solid rgba(255,255,255,0.06); }
.gift-item:last-child { border-bottom:none; }
.wallet-info { background: rgba(0,255,136,0.03); border: 1px solid var(--border-subtle); border-radius: 10px; padding: 14px; margin-bottom: 16px; word-break:break-all; font-size:0.8rem; color: var(--text-secondary); text-align:left; }
.wallet-info span { color: var(--accent); font-weight:600; cursor:pointer; }
.rub-payment-info { background:rgba(255,170,0,0.05); border:1px solid rgba(255,170,0,0.2); border-radius:12px; padding:14px; margin-bottom:16px; text-align:left; }
.rub-payment-info .rub-label { color:#ffaa00; font-weight:600; margin-bottom:6px; }
.rub-payment-info .rub-value { color:#fff; font-size:1.1rem; }
.payment-status { font-size:0.85rem; color: var(--warning); margin-top:10px; }
.payment-status.success { color: var(--accent); }
.comment-warning { color: var(--danger); font-size:0.75rem; margin-top:6px; display:none; }
.step-hidden { display:none !important; }
.config-card { background: rgba(0,255,136,0.04); border: 1px solid var(--border-subtle); border-radius: 12px; padding: 16px; margin-bottom: 12px; word-wrap: break-word; }
.config-card.active { border-left:3px solid var(--accent); }
.config-card.inactive { border-left:3px solid var(--danger); opacity:0.7; }
.config-header { display:flex; justify-content:space-between; align-items:center; }
.config-link { color: var(--accent); word-break:break-all; cursor:pointer; font-size:0.85rem; }
.config-days { font-weight:600; color:#fff; }
.config-status { font-size:0.8rem; }
.config-progress { height: 6px; background: rgba(255,255,255,0.05); border-radius: 3px; margin: 8px 0; overflow: hidden; }
.config-progress-bar { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-dark)); border-radius: 3px; transition: width 0.4s ease; box-shadow: 0 0 8px var(--accent-glow); }
.config-actions { display:flex; gap:8px; margin-top:8px; flex-wrap: wrap; }
.btn-small { padding: 6px 12px; font-size: 0.8rem; background: rgba(22,24,30,0.88); color: #eef0f3; border: 1px solid rgba(255,255,255,0.12); border-radius: 8px; cursor: pointer; font-weight: 600; transition: all var(--transition); white-space: nowrap; }
.btn-small:hover { transform: translateY(-1px); box-shadow: 0 4px 12px var(--accent-glow); }
.btn-small.secondary { background: rgba(255,255,255,0.1); color: #fff; border: 1px solid var(--border-subtle); }
.btn-small.danger { background: #ff4444; color: #fff; }
.btn-small.warning { background: #ffaa00; color: #000; }
.badge-count { background: var(--danger); border-radius:50%; padding:2px 6px; font-size:0.7rem; margin-left:4px; display:none; font-weight: 700; }
.config-instructions { background: rgba(255,255,255,0.03); border: 1px dashed rgba(255,255,255,0.2); border-radius:8px; padding:12px; margin-top:12px; font-size:0.85rem; color:#ccc; white-space:pre-wrap; word-wrap: break-word; }
.retro-btn { background: rgba(22,24,30,0.88); color: #eef0f3; border: 1px solid rgba(255,255,255,0.12); padding: 12px 24px; border-radius: 10px; font-weight: 700; cursor: pointer; font-size: 0.9rem; box-shadow: 0 3px 12px rgba(0,0,0,0.35); width: 100%; margin-top: 8px; transition: all var(--transition); white-space: nowrap; }
.retro-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 25px var(--accent-glow); }
.retro-btn.secondary { background: rgba(255,255,255,0.08); color: #fff; box-shadow: none; }
.toast { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); background: rgba(0,12,4,0.98); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--accent); border-radius: var(--radius-md); padding: 24px 32px; text-align:center; color: var(--accent); font-size: 1rem; z-index:20000; display:none; box-shadow: 0 10px 40px rgba(0,255,136,0.4); font-weight: 600; max-width: 90vw; word-wrap: break-word; pointer-events:none; }
.toast.error { border-color: var(--danger); color: var(--danger); box-shadow: 0 10px 40px rgba(255,68,68,0.4); }
.toast.show { display:block; animation: toastPop 0.3s ease; }
@keyframes toastPop { from{opacity:0;transform:translate(-50%,-50%) scale(0.9);} to{opacity:1;transform:translate(-50%,-50%) scale(1);} }
.config-countdown { display: flex; justify-content: space-between; align-items: baseline; margin: 6px 0 10px; font-size: 0.9rem; }
.config-remaining-days { font-weight: 700; color: #fff; background: rgba(0,255,136,0.1); padding: 4px 10px; border-radius: 8px; border: 1px solid var(--border-subtle); white-space: nowrap; }
.config-expire-date { color: var(--text-muted); font-size: 0.8rem; }
@media (max-width: 450px) { .config-countdown { flex-direction: column; align-items: flex-start; gap: 4px; } .config-remaining-days { font-size: 0.8rem; padding: 3px 8px; } .config-expire-date { font-size: 0.75rem; } }
.auth-required-modal { background:rgba(0,16,6,0.98); backdrop-filter:blur(30px); border:1px solid rgba(0,255,136,0.3); border-radius:20px; padding:30px; max-width:400px; width:90%; text-align:center; color:#fff; box-shadow:0 20px 60px rgba(0,0,0,0.8), 0 0 40px rgba(0,255,136,0.2); animation:modalSlideUp 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
.auth-required-modal h3 { margin-bottom:16px; color:#00ff88; text-shadow:0 0 20px rgba(0,255,136,0.5); word-wrap: break-word; }
.auth-required-modal p { margin-bottom:24px; color:#b0e0b0; word-wrap: break-word; }
.auth-required-modal .btn-row { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.auth-required-modal .btn { min-width:120px; white-space: nowrap; }
@keyframes modalSlideUp { from { opacity:0; transform:translateY(40px) scale(0.95); } to { opacity:1; transform:translateY(0) scale(1); } }
.btn { width:100%; padding:16px; background: rgba(22,24,30,0.88); color:#eef0f3; border:1px solid rgba(255,255,255,0.12); border-radius:14px; font-weight:600; font-size:1.1rem; cursor:pointer; box-shadow:0 3px 12px rgba(0,0,0,0.35); transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1); white-space: normal; line-height:1.3; }
.btn:hover { transform:translateY(-2px); border-color:rgba(16,185,129,0.45); background:rgba(28,31,38,0.95); box-shadow:0 6px 20px rgba(0,0,0,0.45); }
.btn:active { transform:scale(0.97); }
.btn:disabled { opacity:0.5; cursor:default; }
.btn.secondary { background:rgba(255,255,255,0.08); color:#b0e0b0; border:1px solid rgba(255,255,255,0.1); box-shadow:none; }
.btn.rub { background:linear-gradient(135deg, #ffaa00, #ff8800); color:#000; }
.btn.rub:hover { box-shadow:0 8px 25px rgba(255,170,0,0.4); }
.chat-fab {
position: fixed; bottom: 80px; right: 20px; z-index: 9990;
width: 48px; height: 48px;
background: transparent !important;
border: none !important; border-radius: 0;
box-shadow: none !important;
display: flex; align-items: center; justify-content: center;
cursor: pointer; transition: transform 0.2s, opacity 0.2s;
}
.chat-fab:hover { transform: scale(1.1); background: transparent !important; border: none !important; box-shadow: none !important; }
.chat-fab.hidden { display: none; }
.chat-fab svg { width: 32px; height: 32px; fill: none !important; stroke: rgba(0,255,136,0.95); stroke-width: 1.8; }
.chat-fab.has-new { animation: chatIconPulse 1.5s ease-in-out infinite; }
@keyframes chatIconPulse { 0%,100%{opacity:1} 50%{opacity:0.55} }
.tg-bot-fab {
position: fixed; bottom: 132px; right: 20px; z-index: 9998;
width: 48px; height: 48px;
background: transparent !important;
border: none !important; border-radius: 0;
display: flex; align-items: center; justify-content: center;
box-shadow: none !important;
transition: transform 0.2s, opacity 0.2s;
text-decoration: none; backdrop-filter: none;
}
.tg-bot-fab:hover {
transform: scale(1.1);
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
.tg-bot-fab svg {
width: 32px; height: 32px;
fill: none !important;
stroke: rgba(0,136,204,0.95);
stroke-width: 1.8;
}
.modal-header-row { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; margin-bottom:12px; flex-wrap:wrap; }
.modal-close-btn { flex-shrink:0; background:none; border:none; color:#fff; font-size:1.5rem; cursor:pointer; line-height:1; padding:0; }
.admin-modal, .register-modal, .ticket-modal, .menu-modal, .guest-modal { overflow-x:hidden; word-break:break-word; box-sizing:border-box; }
.tariff-price-rub { font-size:0.85rem; color:#ffaa00; margin-top:4px; font-weight:600; }
@keyframes chatGlow { 0%, 100% { box-shadow: 0 0 8px rgba(0,255,136,0.5); } 50% { box-shadow: 0 0 25px rgba(0,255,136,1); } }
.chat-window {
position: fixed; bottom: 120px; right: 20px; width: 380px; max-width: calc(100vw - 40px);
background: rgba(0,12,4,0.97); backdrop-filter: blur(30px);
border: 1px solid rgba(0,255,136,0.25); border-radius: 22px;
box-shadow: 0 15px 50px rgba(0,0,0,0.8), 0 0 40px rgba(0,255,136,0.2);
z-index: 9998; display: none; flex-direction: column; overflow: hidden;
}
.chat-window.open { display: flex; animation: chatSlideUp 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
@keyframes chatSlideUp { from { opacity:0; transform: translateY(30px); } to { opacity:1; transform: translateY(0); } }
.chat-window .chat-header { padding: 14px 18px; display: flex; justify-content: space-between; align-items: center; color: var(--accent); font-weight: 600; border-bottom: 1px solid rgba(0,255,136,0.15); background: rgba(0,255,136,0.08); }
.chat-window .chat-body { padding: 12px 16px; display: flex; flex-direction: column; }
.chat-window .chat-messages { height: 280px; overflow-y: auto; margin-bottom: 10px; font-size: 0.85rem; color: #ddd; background: rgba(0,0,0,0.3); border-radius: 14px; padding: 10px; }
.chat-window .chat-messages .msg {
margin-bottom: 4px;
padding: 4px 8px;
border-radius: 8px;
background: rgba(0,255,136,0.03);
word-break: break-word;
white-space: pre-wrap;
line-height: 1.3;
font-size: 0.82rem;
}
.chat-window .chat-messages .sender {
font-weight: 600;
font-size: 0.78rem;
margin-right: 4px;
}
.chat-window .chat-messages .sender.admin {
color: #ff4444;
font-weight: 700;
}
.chat-window .chat-messages .sender.moderator {
color: #ffaa00;
font-weight: 700;
}
.chat-window .chat-messages .sender.user {
color: #8aad8a;
}
.chat-window .chat-messages .sender.self {
color: #00ff88;
font-weight: 600;
}
.chat-window .chat-messages .chat-time-compact {
font-family: 'SF Mono', Monaco, 'Inconsolata', 'Courier New', monospace;
font-size: 0.65rem;
color: rgba(255,255,255,0.45);
margin-left: 4px;
opacity: 0.7;
letter-spacing: 0.3px;
}
.chat-window .chat-messages .msg-text {
display: inline;
word-break: break-word;
white-space: pre-wrap;
line-height: 1.3;
}
.chat-input-area { display: flex; align-items: center; gap: 8px; background: rgba(0,255,136,0.05); border: 1px solid rgba(0,255,136,0.2); border-radius: 16px; padding: 6px 8px; width: 100%; box-sizing: border-box; }
.chat-input-area select { width: 72px; font-size: 0.75rem; padding: 8px 4px; background: rgba(0,0,0,0.4); border: 1px solid rgba(0,255,136,0.2); color: var(--text-primary); border-radius: 8px; outline: none; cursor: pointer; }
.chat-input-area input { flex: 1; padding: 10px 12px; background: rgba(0,0,0,0.3); border: 1px solid rgba(0,255,136,0.15); border-radius: 12px; color: var(--text-primary); font-size: 0.9rem; outline: none; min-width: 0; }
.chat-input-area input:focus { border-color: var(--accent); }
.chat-input-area .chat-send-btn { width: 40px; height: 40px; border-radius: 50%; background: rgba(22,24,30,0.88); border: 1px solid rgba(255,255,255,0.12); color: #eef0f3; font-size: 1.2rem; font-weight: bold; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 3px 12px rgba(0,0,0,0.35); flex-shrink: 0; }
#chatAdminPrivate { margin-top: 6px; }
#chatAdminPrivate input { width: 100%; padding: 8px 12px; background: rgba(0,0,0,0.3); border: 1px solid rgba(0,255,136,0.15); border-radius: 8px; color: var(--text-primary); font-size: 0.8rem; }
.visitors-table { width:100%; border-collapse:collapse; color:#ccc; font-size:0.8rem; }
.visitors-table th { border-bottom:1px solid #333; padding:8px; text-align:left; }
.visitors-table td { border-bottom:1px solid #222; padding:8px; word-wrap: break-word; }
.leaflet-popup-content-wrapper {
background: var(--bg-card) !important;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid var(--border-subtle) !important;
border-radius: 8px !important;
box-shadow: 0 10px 40px rgba(0,0,0,0.6), 0 0 20px var(--accent-glow) !important;
color: var(--text-primary) !important;
padding: 0 !important;
}
.leaflet-popup-tip {
background: var(--bg-card) !important;
border: 1px solid var(--border-subtle) !important;
width: 12px !important;
height: 12px !important;
}
.leaflet-popup-content {
margin: 8px 12px !important;
font-family: 'Inter', sans-serif !important;
font-size: 0.8rem !important;
line-height: 1.3 !important;
}
.pwa-install-banner {
position: fixed; bottom: 12px; left: 12px;
background: rgba(0, 20, 8, 0.7); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(0, 255, 136, 0.15); border-radius: 10px;
padding: 8px 12px; display: none; align-items: center; gap: 8px;
box-shadow: 0 4px 16px rgba(0,0,0,0.4); z-index: 9996; opacity: 0.75;
transition: opacity 0.3s, transform 0.3s; max-width: 280px; font-size: 0.75rem;
}
.pwa-install-banner:hover { opacity: 1; }
.pwa-install-banner.visible { display: flex; animation: pwaFadeIn 0.5s ease; }
@keyframes pwaFadeIn { from { opacity: 0; transform: translateX(-20px); } to { opacity: 0.75; transform: translateX(0); } }
.pwa-install-banner .pwa-icon { font-size: 1rem; }
.pwa-install-banner .pwa-text { color: var(--text-secondary); flex: 1; line-height: 1.3; }
.pwa-install-banner .pwa-text b { color: var(--accent); }
.pwa-install-banner .pwa-btn { background: rgba(22,24,30,0.88); color: #eef0f3; border: 1px solid rgba(255,255,255,0.12); padding: 4px 10px; border-radius: 6px; font-weight: 700; font-size: 0.7rem; cursor: pointer; white-space: nowrap; }
.pwa-install-banner .pwa-close { background: none; border: none; color: var(--text-muted); font-size: 0.9rem; cursor: pointer; padding: 2px 4px; line-height: 1; }
@media (max-width: 768px) {
.pwa-install-banner { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); left: 8px; right: 8px; max-width: none; padding: 6px 10px; font-size: 0.7rem; }
.chat-fab { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); right: 4px; width: 42px; height: 42px; }
.tg-bot-fab { bottom: calc(128px + env(safe-area-inset-bottom, 0px)); right: 4px; width: 42px; height: 42px; }
.tg-bot-fab svg { width: 28px; height: 28px; }
.chat-fab svg { width: 28px; height: 28px; }
.chat-window { bottom: calc(86px + env(safe-area-inset-bottom, 0px)); right: 5px; width: calc(100vw - 20px); }
.chat-input-area { gap: 6px; padding: 4px 6px; }
.chat-input-area select { width: 60px; font-size: 0.7rem; padding: 6px 2px; }
.chat-input-area input { padding: 8px 10px; font-size: 0.8rem; }
.chat-input-area .chat-send-btn { width: 36px; height: 36px; font-size: 1rem; }
}
/* Обновлённые стили для пароля и eye-icon — как на главной */
.password-wrapper {
position: relative;
margin-bottom: 12px;
width: 100%;
}
.password-wrapper input {
width: 100%;
box-sizing: border-box;
margin-bottom: 0 !important;
}
.password-wrapper input[type="password"]::-ms-reveal,
.password-wrapper input[type="password"]::-ms-clear {
display: none;
}
.password-wrapper input[type="password"]::-webkit-textfield-decoration-container {
display: none !important;
}
.password-wrapper input[type="password"]::-webkit-credentials-auto-fill-button {
visibility: hidden !important;
pointer-events: none !important;
width: 0 !important;
height: 0 !important;
margin: 0 !important;
}
.password-wrapper input[type="password"] {
padding-right: 46px !important;
}

.admin-modal .password-wrapper,
.register-modal .password-wrapper,
.guest-modal .password-wrapper {
margin-bottom: 12px;
}
.password-wrapper .pass-eye {
display: flex;
position: absolute;
right: 6px;
top: 50%;
transform: translateY(-50%);
width: 36px;
height: 36px;
cursor: pointer;
color: rgba(255,255,255,0.45);
background: none;
border: none;
padding: 0;
align-items: center;
justify-content: center;
z-index: 2;
transition: color 0.2s;
}
.password-wrapper .pass-eye:hover {
color: rgba(255,255,255,0.75);
}
.password-wrapper .pass-eye svg {
width: 20px;
height: 20px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
pointer-events: none;
}
html[data-theme="light"] .password-wrapper .pass-eye { color: rgba(0,0,0,0.55) !important; }
html[data-theme="light"] .password-wrapper .pass-eye:hover { color: rgba(0,0,0,0.85) !important; }

@media (max-width: 768px) {
.password-wrapper input {
padding-right: 44px !important;
}
.password-wrapper .pass-eye {
display: flex;
}
}
.agreement-overlay { display: flex; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.7); backdrop-filter:blur(10px); z-index: 3000; align-items: center; justify-content: center; opacity:0; visibility:hidden; pointer-events: none; transition: opacity 0.2s ease; }
.agreement-overlay.active { opacity:1; visibility:visible; pointer-events: auto; }
.agreement-modal { background: rgba(0,16,6,0.95); border: 1px solid rgba(0,255,136,0.2); border-radius: 16px; padding: 30px; max-width: 450px; width: 90%; max-height: 80vh; overflow-y: auto; color: #fff; pointer-events: auto; box-shadow: 0 0 30px rgba(0,0,0,0.8); word-wrap: break-word; }
.currency-selector {
display: flex;
gap: 8px;
margin: 16px 0;
background: rgba(0,0,0,0.3);
padding: 4px;
border-radius: 10px;
}
.currency-btn {
flex: 1;
padding: 10px;
background: transparent;
border: none;
color: #8aad8a;
font-weight: 600;
cursor: pointer;
border-radius: 8px;
transition: all 0.2s;
}
.currency-btn.active {
background: rgba(28,31,38,0.95);
color: #10b981;
border: 1px solid rgba(16,185,129,0.45);
box-shadow: 0 0 12px rgba(16,185,129,0.15);
}
.currency-btn.rub.active {
background: linear-gradient(135deg, #ffaa00, #ff8800);
}
.promo-code-block {
margin: 12px 0;
padding: 14px;
background: rgba(0,255,136,0.03);
border: 1px dashed rgba(0,255,136,0.3);
border-radius: 12px;
}
.promo-code-label {
font-size: 0.85rem;
color: #8aad8a;
margin-bottom: 8px;
display: flex;
align-items: center;
gap: 6px;
}
.promo-code-input-row {
display: flex;
gap: 8px;
align-items: stretch;
}
.promo-code-input-row input {
flex: 1;
padding: 12px 16px;
background: rgba(255,255,255,0.08);
border: 2px solid rgba(255,255,255,0.2);
border-radius: 10px;
color: #e0ffe0;
font-size: 1.1rem;
font-family: 'Segoe UI', system-ui, sans-serif;
font-weight: 700;
letter-spacing: 1px;
min-height: 48px;
min-width: 0;
}
.promo-code-input-row input::placeholder {
color: rgba(255,255,255,0.35);
font-weight: 400;
font-size: 0.9rem;
}
.promo-code-input-row input:focus {
border-color: #00ff88;
outline: none;
box-shadow: 0 0 15px rgba(0,255,136,0.3);
background: rgba(255,255,255,0.1);
}
.promo-code-input-row button {
padding: 10px 16px;
background: rgba(22,24,30,0.88);
color: #eef0f3;
border: 1px solid rgba(255,255,255,0.12);
border-radius: 10px;
font-weight: 600;
cursor: pointer;
font-size: 0.85rem;
white-space: nowrap;
transition: all 0.3s;
min-height: 48px;
flex-shrink: 0;
width: auto;
}
.promo-code-input-row button:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0,255,136,0.4);
}
.promo-discount-display {
margin-top: 10px;
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.promo-discount-badge {
display: inline-block;
background: rgba(16,185,129,0.12);
color: #10b981;
border: 1px solid rgba(16,185,129,0.28);
padding: 4px 12px;
border-radius: 8px;
font-weight: 700;
font-size: 0.9rem;
box-shadow: 0 2px 8px rgba(0,255,136,0.3);
white-space: nowrap;
flex-shrink: 0;
line-height: 1.2;
text-align: center;
min-width: 48px;
}
.promo-original-price {
color: #888;
font-size: 0.9rem;
text-decoration: line-through;
}
.promo-final-price {
color: #00ff88;
font-weight: 700;
font-size: 1.2rem;
}
.promo-remove-btn {
background: none;
border: none;
color: #ff4444;
cursor: pointer;
font-size: 0.8rem;
padding: 4px 8px;
}
.free-promo-block {
display: none;
background: linear-gradient(135deg, rgba(0,255,136,0.1), rgba(0,204,119,0.1));
border: 1px solid rgba(0,255,136,0.4);
border-radius: 14px;
padding: 20px;
margin-bottom: 12px;
text-align: center;
box-shadow: 0 0 30px rgba(0,255,136,0.2);
animation: freePromoPulse 2s ease-in-out infinite;
}
@keyframes freePromoPulse {
0%, 100% { box-shadow: 0 0 20px rgba(0,255,136,0.2); }
50% { box-shadow: 0 0 40px rgba(0,255,136,0.4); }
}
.free-promo-icon { font-size: 2.5rem; margin-bottom: 8px; }
.free-promo-title { color: #00ff88; font-weight: 700; font-size: 1.15rem; margin-bottom: 8px; text-shadow: 0 0 15px rgba(0,255,136,0.5); }
.free-promo-desc { color: #b0e0b0; font-size: 0.85rem; margin-bottom: 14px; line-height: 1.4; }
.free-promo-btn {
width: 100%;
padding: 14px;
background: rgba(22,24,30,0.88);
color: #eef0f3;
border: 1px solid rgba(255,255,255,0.12);
border-radius: 12px;
font-weight: 700;
font-size: 1rem;
cursor: pointer;
box-shadow: 0 3px 12px rgba(0,0,0,0.35);
transition: all 0.3s;
}
.free-promo-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(0,255,136,0.6); }
.payment-actions-block { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.tariff-pay-actions { margin: 12px 0 4px; text-align: center; }
.tariff-pay-hint { color: #8aad8a; font-size: 0.88rem; padding: 10px 4px; }
.tariff-pay-buttons { display: flex; flex-direction: column; gap: 8px; }
.tariff-pay-buttons .btn { margin-top: 0 !important; }
.pay-method-usdt { background: linear-gradient(135deg, #0088cc, #006daa) !important; color: #fff !important; border: none !important; }
.pay-method-rub { background: linear-gradient(135deg, rgba(255,170,0,0.18), rgba(255,136,0,0.12)) !important; color: #ffaa00 !important; border: 1px solid rgba(255,170,0,0.45) !important; font-weight: 600; }
#paymentOverlay .btn.pay-method-rub, #paymentOverlay .btn.pay-method-rub:hover { background: linear-gradient(135deg, rgba(255,170,0,0.18), rgba(255,136,0,0.12)) !important; color: #ffaa00 !important; border: 1px solid rgba(255,170,0,0.45) !important; box-shadow: 0 3px 12px rgba(0,0,0,0.35) !important; transform: none !important; }
.tariff-pay-loading { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px; color: #8aad8a; font-size: 0.9rem; }
.payment-spinner { width: 28px; height: 28px; border: 3px solid rgba(0,255,136,0.2); border-top-color: #00ff88; border-radius: 50%; animation: paySpin 0.8s linear infinite; }
@keyframes paySpin { to { transform: rotate(360deg); } }
#paymentOverlay .currency-selector { display: none !important; }
.pay-tonkeeper-btn {
width: 100%;
padding: 14px;
background: linear-gradient(135deg, #0088cc, #0066aa);
color: #fff;
border: none;
border-radius: 12px;
font-weight: 600;
font-size: 0.95rem;
cursor: pointer;
box-shadow: 0 4px 15px rgba(0,136,204,0.3);
transition: all 0.3s;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.pay-tonkeeper-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0,136,204,0.5); }
.pay-rub-btn {
width: 100%;
padding: 14px;
background: linear-gradient(135deg, #ffaa00, #ff8800);
color: #000;
border: none;
border-radius: 12px;
font-weight: 600;
font-size: 0.95rem;
cursor: pointer;
box-shadow: 0 4px 15px rgba(255,170,0,0.3);
transition: all 0.3s;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.pay-rub-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(255,170,0,0.5); }
.copy-details-btn {
width: 100%;
padding: 12px;
background: rgba(0,255,136,0.12);
color: #00ff88;
border: 1px solid rgba(0,255,136,0.3);
border-radius: 12px;
font-weight: 500;
font-size: 0.9rem;
cursor: pointer;
transition: all 0.3s;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.copy-details-btn:hover { background: rgba(0,255,136,0.2); border-color: #00ff88; }
.modal-header-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
padding-bottom: 12px;
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.modal-header-row h3 {
margin: 0;
font-size: 1.3rem;
color: #00ff88;
}
.modal-close-btn {
background: none;
border: none;
color: rgba(255,255,255,0.5);
font-size: 1.5rem;
cursor: pointer;
padding: 4px 10px;
border-radius: 8px;
transition: all 0.2s;
}
.modal-close-btn:hover {
background: rgba(255,255,255,0.08);
color: #fff;
}
.back-btn {
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.1);
color: #b0e0b0;
padding: 6px 12px;
border-radius: 8px;
cursor: pointer;
font-size: 0.8rem;
display: inline-flex;
align-items: center;
gap: 4px;
transition: all 0.2s;
}
.back-btn:hover {
background: rgba(255,255,255,0.1);
color: #fff;
border-color: rgba(255,255,255,0.2);
}
.history-item {
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 10px;
padding: 12px;
margin-bottom: 8px;
}
.history-item-header {
display: flex;
justify-content: space-between;
margin-bottom: 6px;
}
.history-item-type {
font-weight: 600;
color: #00ff88;
}
.history-item-time {
font-family: 'SF Mono', Monaco, monospace;
font-size: 0.75rem;
color: rgba(255,255,255,0.45);
}

.rw-tabs {
display: flex;
gap: 4px;
margin-bottom: 16px;
background: rgba(0,0,0,0.3);
padding: 4px;
border-radius: 10px;
flex-wrap: wrap;
}
.rw-tab {
flex: 1;
min-width: 100px;
padding: 10px 8px;
background: transparent;
border: none;
color: #8aad8a;
font-size: 0.85rem;
font-weight: 500;
cursor: pointer;
border-radius: 8px;
transition: all 0.2s;
text-align: center;
}
.rw-tab:hover { color: #fff; background: rgba(255,255,255,0.05); }
.rw-tab.active { background: rgba(0,255,136,0.15); color: #00ff88; font-weight: 600; }
.rw-issue-form {
background: rgba(0,255,136,0.03);
border: 1px solid rgba(0,255,136,0.15);
border-radius: 12px;
padding: 16px;
margin-bottom: 16px;
}
.rw-issue-form input, .rw-issue-form select {
width: 100%;
padding: 10px 14px;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.15);
border-radius: 8px;
color: #e0ffe0;
font-size: 0.9rem;
margin-bottom: 10px;
box-sizing: border-box;
}
.quick-extend-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin-bottom: 4px; }
@media (max-width: 520px) {
.quick-extend-grid { grid-template-columns: repeat(3, 1fr); gap: 3px; }
.quick-extend-btn { padding: 2px 3px; font-size: 0.58rem; border-radius: 4px; line-height: 1.15; min-height: 0; }
}
@media (min-width: 521px) { .quick-extend-grid { grid-template-columns: repeat(6, 1fr); } }
.quick-extend-btn {
padding: 4px 6px;
background: rgba(0,255,136,0.1);
border: 1px solid rgba(0,255,136,0.3);
border-radius: 6px;
color: #00ff88;
font-size: 0.68rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
width: 100%;
margin: 0;
box-shadow: none;
white-space: nowrap;
}
.quick-extend-btn:hover { background: rgba(0,255,136,0.22); transform: none; }
.admin-modal .quick-extend-btn,
.admin-modal .btn-small {
width: auto;
margin-top: 0;
box-shadow: none;
}
.admin-modal .btn-small { padding: 5px 10px; font-size: 0.75rem; }
.admin-modal .config-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
#adminConfigsOverlay .admin-modal { max-width: min(800px, 96vw) !important; overflow-x: hidden; }
#rwTabContent { max-height: 55vh; overflow-y: auto; overflow-x: hidden; word-break: break-word; }

.history-item-details {
font-size: 0.85rem;
color: #b0e0b0;
word-wrap: break-word;
}
.captcha-block {
background: rgba(255,170,0,0.05);
border: 1px dashed rgba(255,170,0,0.3);
border-radius: 10px;
padding: 12px;
margin-bottom: 12px;
text-align: center;
}
.captcha-question {
color: #ffaa00;
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 8px;
}
.captcha-input {
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,170,0,0.3);
border-radius: 8px;
padding: 8px 12px;
color: #fff;
font-size: 1rem;
width: 100px;
text-align: center;
outline: none;
}
.captcha-input:focus { border-color: #ffaa00; }
.captcha-refresh {
background: none;
border: none;
color: #8aad8a;
cursor: pointer;
font-size: 0.8rem;
margin-left: 8px;
}
.captcha-refresh:hover { color: #fff; }
.guest-credentials-modal {
background: linear-gradient(135deg, rgba(255,68,68,0.1), rgba(255,170,0,0.1));
border: 2px solid #ff4444;
border-radius: 20px;
padding: 30px;
max-width: 500px;
width: 90%;
text-align: center;
box-shadow: 0 0 50px rgba(255,68,68,0.5);
animation: modalSlideUp 0.5s cubic-bezier(0.4,0,0.2,1), pulseRed 2s ease-in-out infinite;
}
@keyframes pulseRed {
0%, 100% { box-shadow: 0 0 30px rgba(255,68,68,0.3); }
50% { box-shadow: 0 0 60px rgba(255,68,68,0.7); }
}
.guest-warning-title {
color: #ff4444;
font-size: 1.5rem;
font-weight: 800;
margin-bottom: 12px;
text-shadow: 0 0 20px rgba(255,68,68,0.5);
}
.guest-warning-text {
color: #ffccaa;
font-size: 0.95rem;
margin-bottom: 20px;
line-height: 1.5;
}
.guest-credentials {
background: rgba(0,0,0,0.5);
border: 1px solid rgba(255,255,255,0.2);
border-radius: 12px;
padding: 16px;
margin: 16px 0;
text-align: left;
}
.guest-cred-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 0;
border-bottom: 1px solid rgba(255,255,255,0.1);
}
.guest-cred-row:last-child { border-bottom: none; }
.guest-cred-label {
color: #8aad8a;
font-size: 0.85rem;
}
.guest-cred-value {
color: #fff;
font-family: monospace;
font-weight: 600;
font-size: 0.95rem;
cursor: pointer;
padding: 2px 8px;
background: rgba(0,255,136,0.1);
border-radius: 6px;
}
.guest-cred-value:hover { background: rgba(0,255,136,0.2); }
.cred-ack-label {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  color: #e8ffe8;
}
.guest-credentials-modal--quick {
  padding: 22px 16px 0;
  max-width: min(500px, 100%);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  max-height: min(88vh, 680px);
  overflow: hidden;
}
.guest-credentials-modal--quick .guest-cred-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 8px;
}
.guest-credentials-modal--quick .guest-cred-row--code {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  text-align: center;
  border-bottom: none;
  padding: 0;
}
.guest-credentials-modal--quick .guest-cred-label {
  width: 100%;
  font-size: 0.9rem;
  text-align: center;
}
.guest-credentials-modal--quick .guest-cred-code {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 10px;
  font-size: 1rem;
  line-height: 1.35;
  word-break: break-all;
  text-align: center;
}
.guest-credentials-modal--quick .guest-quick-actions,
.guest-credentials-modal--quick .guest-cred-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 0 0 auto;
  position: relative;
  bottom: auto;
  z-index: 5;
  margin: 0 -16px 0;
  padding: 12px 16px 18px;
  width: auto;
  background: rgba(12,4,4,0.98);
  border-top: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 -8px 24px rgba(0,0,0,0.35);
}
.guest-credentials-modal--quick .guest-quick-actions .btn,
.guest-credentials-modal--quick .guest-cred-actions .btn {
  width: 100%;
  margin: 0 !important;
  white-space: normal !important;
  overflow: visible !important;
  line-height: 1.35 !important;
  font-size: 0.92rem !important;
  padding: 13px 14px !important;
  min-height: 48px;
  height: auto;
}
.guest-credentials-modal--quick .cred-ack-label {
  margin: 0 !important;
  position: relative;
  z-index: 6;
}
html[data-theme="light"] .guest-credentials-modal--quick .guest-cred-actions,
html[data-theme="light"] .guest-credentials-modal--quick .guest-quick-actions {
  background: #fff7f7 !important;
  border-top-color: rgba(225, 29, 72, 0.18) !important;
  box-shadow: 0 -8px 20px rgba(16,24,40,0.08) !important;
}
.maintenance-overlay {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.97);
backdrop-filter: blur(20px);
z-index: 99999;
display: none;
align-items: center;
justify-content: center;
text-align: center;
padding: 20px;
}
.maintenance-overlay.active {
display: flex;
animation: fadeIn 0.5s ease;
}
.maintenance-box {
max-width: 500px;
width: 100%;
}
.maintenance-icon {
margin-bottom: 16px;
animation: pulse 2s ease-in-out infinite;
filter: drop-shadow(0 0 24px rgba(255,170,0,0.45));
line-height: 0;
}
.maintenance-icon img, .stek-engineer-cat {
  display: block;
  margin: 0 auto;
  width: 160px;
  height: 160px;
}
@media (max-width:480px) {
  .maintenance-icon img, .stek-engineer-cat {
    width: 140px;
    height: 140px;
  }
}

.maintenance-title {
font-size: 2rem;
color: #ffaa00;
margin-bottom: 12px;
font-weight: 700;
text-shadow: 0 0 20px rgba(255,170,0,0.3);
}
.maintenance-text {
color: #b0e0b0;
margin-bottom: 20px;
line-height: 1.6;
font-size: 1rem;
}
.maintenance-admin-section {
margin-top: 24px;
padding-top: 20px;
border-top: 1px solid rgba(255,255,255,0.1);
display: none;
}
.maintenance-admin-section.visible {
display: block;
animation: slideDown 0.3s ease;
}
.maintenance-admin-section input {
width: 100%;
padding: 12px 16px;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.15);
border-radius: 10px;
color: #fff;
margin-bottom: 10px;
font-size: 1rem;
}
.maintenance-admin-section input:focus {
border-color: #00ff88;
outline: none;
}
.maintenance-admin-section button {
width: 100%;
padding: 12px;
background: rgba(22,24,30,0.88);
color: #eef0f3;
border: 1px solid rgba(255,255,255,0.12);
border-radius: 10px;
font-weight: 600;
cursor: pointer;
}
.maintenance-admin-toggle {
background: none;
border: none;
color: rgba(255,255,255,0.3);
font-size: 0.75rem;
cursor: pointer;
margin-top: 16px;
padding: 4px 10px;
}
.maintenance-admin-toggle:hover {
color: rgba(255,255,255,0.6);
}
.maintenance-passkey-btn {
background: rgba(22,24,30,0.88) !important;
color: #eef0f3 !important;
}
.role-badge {
display: inline-block;
padding: 2px 8px;
border-radius: 6px;
font-size: 0.7rem;
font-weight: 700;
margin-left: 6px;
}
.role-badge.admin {
background: linear-gradient(135deg, #ff4444, #cc0000);
color: #fff;
}
.role-badge.moderator {
background: linear-gradient(135deg, #ffaa00, #ff8800);
color: #000;
}
.role-selector {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin: 12px 0;
}
.role-option {
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.15);
border-radius: 10px;
padding: 10px;
cursor: pointer;
transition: all 0.2s;
text-align: center;
}
.role-option:hover, .role-option.selected {
border-color: #00ff88;
background: rgba(0,255,136,0.1);
}
.role-option .role-title {
font-weight: 600;
color: #fff;
margin-bottom: 4px;
}
.role-option .role-desc {
font-size: 0.7rem;
color: #8aad8a;
}
.moderator-permissions {
background: rgba(255,170,0,0.05);
border: 1px solid rgba(255,170,0,0.2);
border-radius: 10px;
padding: 12px;
margin-top: 10px;
}
.moderator-permissions label {
display: flex;
align-items: center;
gap: 8px;
color: #e0ffe0;
font-size: 0.85rem;
margin-bottom: 6px;
cursor: pointer;
}
.moderator-permissions input[type="checkbox"] {
width: auto;
margin: 0;
}
.stats-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:12px; margin-bottom:16px; }
.stat-card { background:rgba(0,255,136,0.05); border:1px solid rgba(0,255,136,0.2); border-radius:10px; padding:12px; text-align:center; }
.stat-value { font-size:1.5rem; font-weight:700; color:#00ff88; }
.stat-label { font-size:0.75rem; color:#7a9f7a; margin-top:4px; }
.compact-users-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 8px;
margin-top: 12px;
max-height: 50vh;
overflow-y: auto;
overflow-x: hidden;
}
.compact-user-card {
background: rgba(0,255,136,0.03);
border: 1px solid rgba(0,255,136,0.15);
border-radius: 10px;
padding: 10px;
font-size: 0.8rem;
position: relative;
transition: all 0.3s;
cursor: pointer;
overflow: hidden;
}
.compact-user-card:hover {
border-color: #00ff88;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,255,136,0.2);
}
.compact-user-card.banned {
border-color: rgba(255,68,68,0.3);
background: rgba(255,68,68,0.05);
}
.compact-user-card.banned:hover {
border-color: #ff4444;
box-shadow: 0 4px 12px rgba(255,68,68,0.2);
}
.compact-user-card .user-status-dot {
position: absolute; top: 8px; right: 8px;
width: 8px; height: 8px; border-radius: 50%;
}
.compact-user-card .user-status-dot.active { background: #00ff88; box-shadow: 0 0 8px #00ff88; }
.compact-user-card .user-status-dot.banned { background: #ff4444; box-shadow: 0 0 8px #ff4444; }
.compact-user-card .user-login {
font-weight: 700; font-size: 0.85rem; margin-bottom: 4px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
padding-right: 16px; color: #fff;
}
.compact-user-card .user-status-text { font-size: 0.7rem; margin-bottom: 6px; }
.compact-user-card .user-balance { font-size: 0.7rem; color: #00ff88; font-weight: 600; }
.compact-user-card .user-ip {
font-size: 0.65rem; color: #555; margin-top: 4px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: monospace;
}
.compact-user-card .user-role { font-size: 0.65rem; color: #ffaa00; font-weight: 600; margin-top: 2px; }
@media (max-width: 520px) {
.compact-users-grid { grid-template-columns: 1fr; gap: 6px; max-height: none; }
.compact-user-card {
display: grid;
grid-template-columns: 1fr auto;
grid-template-rows: auto auto;
gap: 2px 8px;
padding: 8px 10px;
border-radius: 8px;
}
.compact-user-card .user-status-dot { top: 10px; right: 10px; width: 6px; height: 6px; }
.compact-user-card .user-login { grid-column: 1 / -1; font-size: 0.78rem; margin-bottom: 0; padding-right: 12px; }
.compact-user-card .user-status-text { font-size: 0.65rem; margin: 0; }
.compact-user-card .user-balance { font-size: 0.65rem; text-align: right; }
.compact-user-card .user-role { grid-column: 1 / -1; font-size: 0.6rem; margin: 0; }
.compact-user-card .user-ip { grid-column: 1 / -1; font-size: 0.58rem; margin-top: 0; color: #666; }
#adminUsersOverlay .stats-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 10px; }
#adminUsersOverlay .stat-card { padding: 8px 4px; border-radius: 8px; }
#adminUsersOverlay .stat-value { font-size: 1.15rem; }
#adminUsersOverlay .stat-label { font-size: 0.62rem; }
#adminUsersOverlay .search-input { padding: 8px 10px; font-size: 0.85rem; margin-bottom: 8px; }
}
#adminUsersOverlay .admin-modal { max-width: min(720px, 96vw) !important; overflow-x: hidden; }
.extend-mode-banner {
background: rgba(255,170,0,0.08);
border: 1px solid rgba(255,170,0,0.25);
border-radius: 8px;
padding: 8px 12px;
margin-bottom: 12px;
font-size: 0.82rem;
color: #ffcc66;
text-align: left;
}
#adminUsersOverlay .admin-modal { max-width: min(720px, 96vw) !important; overflow-x: hidden; }
.tg-bind-modal { text-align: center; }
.tg-bind-modal .modal-header-row { text-align: left; margin-bottom: 12px; }
.tg-bind-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.search-input {
width: 100%; box-sizing: border-box; padding: 10px 12px;
background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.15);
border-radius: 10px; color: #e0ffe0; margin-bottom: 12px;
}
.admin-dashboard {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
gap: 10px;
margin: 16px 0;
}
.admin-dashboard-item {
background: rgba(0,255,136,0.04);
border: 1px solid rgba(0,255,136,0.15);
border-radius: 14px;
padding: 16px 10px;
text-align: center;
cursor: pointer;
transition: all 0.3s;
position: relative;
overflow: hidden;
}
.admin-dashboard-item::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, #00ff88, transparent);
opacity: 0;
transition: opacity 0.3s;
}
.admin-dashboard-item:hover {
border-color: #00ff88;
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(0,255,136,0.2);
background: rgba(0,255,136,0.08);
}
.admin-dashboard-item:hover::before { opacity: 1; }
.admin-dashboard-item .dash-icon {
font-size: 1.6rem;
margin-bottom: 6px;
filter: drop-shadow(0 0 6px rgba(0,255,136,0.3));
}
.admin-dashboard-item .dash-label {
font-size: 0.8rem;
color: #fff;
font-weight: 500;
word-wrap: break-word;
}
.admin-dashboard-item .dash-badge {
position: absolute;
top: 6px; right: 6px;
background: #ff4444;
color: #fff;
padding: 2px 7px;
border-radius: 10px;
font-size: 0.7rem;
font-weight: 700;
box-shadow: 0 2px 6px rgba(255,68,68,0.4);
display: none;
}
.admin-dashboard-item .dash-badge.visible { display: block; }

/* === UNIFIED USER MENU STYLE === */
.user-menu-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:14px; }
.user-menu-item { background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.08); border-radius:14px; padding:14px 12px; text-align:left; cursor:pointer; transition:all 0.25s; display:flex; flex-direction:column; gap:4px; }
.user-menu-item:hover,.user-menu-item:active { border-color:rgba(0,255,136,0.35); background:rgba(0,255,136,0.06); transform:translateY(-2px); }
.user-menu-item .item-icon { font-size:1.4rem; }
.user-menu-item .item-label { font-size:0.82rem; font-weight:600; color:#fff; }
.user-menu-item .item-desc { font-size:0.7rem; color:#7a9f7a; }

/* === IMPROVED CHAT === */
.chat-window { border:1px solid rgba(0,255,136,0.2)!important; border-radius:18px 18px 4px 18px!important; box-shadow:0 20px 60px rgba(0,0,0,0.7)!important; overflow:hidden!important; }
.chat-message { max-width:85%; word-break:break-word; white-space:pre-wrap; }
.chat-message.own { margin-left:auto; background:rgba(0,255,136,0.15)!important; border-radius:16px 16px 4px 16px!important; }
.chat-message.other { margin-right:auto; background:rgba(255,255,255,0.05)!important; border-radius:16px 16px 16px 4px!important; }
.chat-send-btn { background:rgba(22,24,30,0.88)!important; color:#eef0f3!important; font-weight:700!important; border-radius:10px!important; border:1px solid rgba(255,255,255,0.12)!important; }
.chat-input-area input { border-radius:10px!important; border:1px solid rgba(0,255,136,0.2)!important; }
.chat-input-area input:focus { border-color:rgba(0,255,136,0.5)!important; outline:none!important; }
.currency-selector { display:flex; gap:8px; margin-bottom:16px; justify-content:center; }
.currency-btn { flex:1; padding:12px; border-radius:12px; border:2px solid rgba(255,255,255,0.12); background:rgba(255,255,255,0.04); color:#aaa; font-weight:600; cursor:pointer; transition:all 0.2s; }
.currency-btn.active { border-color:#00ff88; background:rgba(0,255,136,0.12); color:#00ff88; }
.currency-btn.rub.active { border-color:#ffaa00; background:rgba(255,170,0,0.12); color:#ffaa00; }

body.page-fade-out { opacity:0; }
body.page-fade-in { animation: pageFadeIn 0.5s ease forwards; }
@keyframes pageFadeIn { from { opacity:0; } to { opacity:1; } }
.center-block { display:flex; flex-direction:column; align-items:center; gap:16px; position:relative; z-index:2; margin-top:4vh; max-width:420px; width:100%; margin-left:auto; margin-right:auto; }
.main.instruction-main { min-height:calc(100vh - 80px); }
.instruction-page { width:100%; display:flex; flex-direction:column; align-items:center; }

/* Profile header: nick + compact login + balance */
.instr-profile-bar {
  width: 100%; box-sizing: border-box; margin: 0 0 12px;
  padding: 12px 14px; border-radius: 14px;
  background: rgba(22,24,30,0.78); border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 8px 28px rgba(0,0,0,0.35);
  display: flex; flex-direction: column; align-items: stretch; gap: 0;
  position: relative; overflow: visible; z-index: 5;
  isolation: isolate;
}
.instr-profile-bar::before {
  content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 2px;
  background: linear-gradient(90deg, transparent, #10b981, transparent); opacity: .85;
  pointer-events: none; z-index: 0;
}
.instr-profile-avatar {
  width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(145deg, rgba(16,185,129,0.28), rgba(5,150,105,0.1));
  border: 1.5px solid rgba(16,185,129,0.45);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.05rem; color: #10b981;
  text-transform: uppercase; letter-spacing: -0.02em;
  box-shadow: 0 0 18px rgba(16,185,129,0.18), inset 0 1px 0 rgba(255,255,255,0.06);
  position: relative; z-index: 1;
}
.instr-profile-bar.is-guest .instr-profile-avatar {
  filter: blur(6px); color: #9aa3b2; user-select: none;
}
html[data-theme="light"] .instr-profile-avatar {
  background: linear-gradient(145deg, #ecfdf5, #d1fae5);
  border-color: rgba(16,185,129,0.35); color: #047857;
}
.instr-profile-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  position: relative; z-index: 1; width: 100%;
}
.instr-profile-left, .instr-profile-right {
  display: flex; flex-direction: column; gap: 3px; min-width: 0; position: relative; z-index: 1;
  flex: 1 1 0;
}
.instr-profile-right { align-items: flex-end; text-align: right; }
.instr-profile-label {
  font-size: 0.68rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: #6b7f6b;
}
.instr-profile-nick {
  font-size: 1.05rem; font-weight: 800; color: #eef0f3; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 38vw;
}
.instr-profile-balance {
  font-size: 1.15rem; font-weight: 800; color: #10b981; line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
/* Блюр ник/баланс для гостя */
.instr-profile-bar.is-guest .instr-profile-nick,
.instr-profile-bar.is-guest .instr-profile-balance {
  filter: blur(7px);
  user-select: none;
  color: #9aa3b2;
  pointer-events: none;
}
/* Вход: тот же блюр что у баланса; активна только когда есть конфиг */
.instr-profile-bar.has-no-config .instr-profile-login {
  filter: blur(7px);
  user-select: none;
  color: #9aa3b2;
  pointer-events: none !important;
  cursor: default;
}
.instr-profile-bar:not(.has-no-config) .instr-profile-login {
  filter: none;
  pointer-events: auto !important;
  cursor: pointer;
}
.instr-profile-bar .instr-profile-login {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  align-self: center;
  width: auto !important;
  min-width: 52px;
  max-width: none;
  height: 32px;
  min-height: 32px !important;
  margin: 0;
  padding: 0 12px !important;
  border-radius: 16px;
  border: 1px solid rgba(16,185,129,0.5);
  background: rgba(16,185,129,0.16);
  color: #e8fff0;
  font-weight: 700;
  font-size: 0.75rem;
  font-family: inherit;
  line-height: 1;
  cursor: pointer;
  position: relative;
  z-index: 6;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: background .2s ease, border-color .2s ease, transform .15s ease;
}
.instr-profile-bar .instr-profile-login:hover {
  background: rgba(16,185,129,0.24);
  border-color: rgba(16,185,129,0.65);
}
.instr-profile-bar .instr-profile-login:active { transform: scale(0.97); }
html[data-theme="light"] .instr-profile-bar {
  background: #fff; border-color: rgba(16,24,40,0.1); box-shadow: 0 8px 24px rgba(16,24,40,0.08);
}
html[data-theme="light"] .instr-profile-nick { color: #10151c; }
html[data-theme="light"] .instr-profile-label { color: #8a93a0; }
html[data-theme="light"] .instr-profile-bar .instr-profile-login {
  background: #ecfdf5;
  color: #065f46;
  border-color: rgba(16,185,129,0.45);
  box-shadow: 0 1px 6px rgba(16,24,40,0.08);
}
.instruction-page .page-title { display: none !important; }

.instruction-page .page-title { margin:24px 0 18px; }
@media (max-width:768px) {
.main.instruction-main { padding: 6px 10px 0 !important; padding-top: calc(env(safe-area-inset-top, 0px) + 58px) !important; min-height: auto !important; height: auto !important; overflow: visible !important; display: block !important; }
.main.instruction-main > .center-block.instruction-page {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
  width: 100% !important;
  max-width: 480px !important;
  margin: 0 auto !important;
  gap: 10px !important;
  z-index: 2 !important;
  padding-top: 0 !important;
  padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)) !important;
}
.main.instruction-main .instruction-page .page-title { margin: 4px 0 2px !important; }
}
.center-block.instruction-page { max-width: 520px; }
.logo-icon { width:56px; height:56px; margin:0 auto 12px; background:rgba(0,255,136,0.05); border-radius:50%; display:flex; align-items:center; justify-content:center; animation:pulse 2s ease-in-out infinite; box-shadow:0 0 20px rgba(0,255,136,0.2), inset 0 0 14px rgba(0,255,136,0.08); }
.logo-icon img, .logo-icon svg { width:42px; height:42px; }
@media (min-width:769px) {
.logo-icon { width:84px; height:84px; }
.logo-icon img, .logo-icon svg { width:76px; height:76px; }
}
.rocket { animation:flyRocket 1.5s ease-in-out infinite; }
@keyframes flyRocket { 0%,100%{ transform:translate(14px,36px) rotate(-30deg); } 50%{ transform:translate(18px,30px) rotate(-25deg); } }
@keyframes pulse { 0%,100%{ box-shadow:0 0 0 0 rgba(0,255,136,0.35), 0 0 20px rgba(0,255,136,0.2), inset 0 0 14px rgba(0,255,136,0.08); } 50%{ box-shadow:0 0 0 10px rgba(0,255,136,0), 0 0 20px rgba(0,255,136,0.2), inset 0 0 14px rgba(0,255,136,0.08); } }
.login-card {
background: rgba(13,14,18,0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255,255,255,0.08); border-radius: 16px;
padding: 28px 28px 32px; width: 100%; max-width: 400px; text-align: center;
box-shadow: 0 10px 40px rgba(0,0,0,0.55); position: relative;
}
@media (max-width:450px) { .login-card { padding:22px 18px 26px; max-width:92%; } }
.login-card h1 { font-size:1.35rem; font-weight:700; margin-bottom:10px; background:linear-gradient(135deg, #10b981, #059669); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.login-card .login-sub { color:#7a9f7a; margin-bottom:18px; font-size:0.88rem; line-height:1.45; }
.input-wrapper { background: rgba(22,24,30,0.75); border:1px solid rgba(255,255,255,0.08); border-radius:14px; padding:6px; margin-bottom:24px; transition:all 0.3s ease; }
.input-wrapper:focus-within { border-color:#10b981; box-shadow:0 0 12px rgba(16,185,129,0.15); }
.input-wrapper input { width:100%; background:transparent; border:none; padding:14px 12px; color:#eef0f3; font-size:1.1rem; text-align:center; letter-spacing:2px; outline:none; }
.input-wrapper input::placeholder { color:#7a9f7a; }
.sub-code-btn { width:100%; padding:13px 16px; background: var(--stek-btn-bg, rgba(22,24,30,0.88)); color: var(--stek-btn-text, #eef0f3); border:1px solid var(--stek-btn-border, rgba(255,255,255,0.12)); border-radius:12px; font-weight:600; font-size:0.95rem; cursor:pointer; box-shadow: 0 3px 12px rgba(0,0,0,0.35); transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease; }
.sub-code-btn:hover { transform:translateY(-2px); border-color: rgba(16,185,129,0.45); background: rgba(28,31,38,0.95); box-shadow: 0 6px 20px rgba(0,0,0,0.45), 0 0 14px rgba(16,185,129,0.12); }
.sub-code-btn:active { transform:scale(0.97); }
.sub-code-btn:disabled { opacity:0.5; cursor:default; }
.floating-error {
position: fixed; top: 20px; left: 50%; transform: translateX(-50%);
background: rgba(255,68,68,0.15); backdrop-filter: blur(15px);
border: 1px solid rgba(255,68,68,0.5); border-radius: 14px;
padding: 14px 24px; color: #ff4444; font-size: 0.95rem;
z-index: 12000; display: none; text-align: center;
box-shadow: 0 0 20px rgba(255,68,68,0.3); word-wrap: break-word; max-width: 90vw;
}
.floating-error.show { display: block; animation: fadeIn 0.3s ease; }
/* Модалка персонального кода: одна обводка + статус ошибки внутри */
#personalCodeOverlay .input-wrapper {
  border: 1px solid rgba(255,255,255,0.14) !important;
  box-shadow: none !important;
  background: rgba(22,24,30,0.92) !important;
  outline: none !important;
}
#personalCodeOverlay .input-wrapper:focus-within {
  border-color: #10b981 !important;
  box-shadow: 0 0 0 1px rgba(16,185,129,0.35) !important;
}
#personalCodeOverlay .input-wrapper input {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  -webkit-appearance: none;
  appearance: none;
}
html[data-theme="light"] #personalCodeOverlay .input-wrapper {
  background: #ffffff !important;
  border: 1px solid rgba(16,24,40,0.14) !important;
  box-shadow: 0 2px 10px rgba(16,24,40,0.06) !important;
}
html[data-theme="light"] #personalCodeOverlay .input-wrapper:focus-within {
  border-color: #10b981 !important;
  box-shadow: 0 0 0 2px rgba(16,185,129,0.22) !important;
}
html[data-theme="light"] #personalCodeOverlay .input-wrapper input {
  color: #10151c !important;
  background: transparent !important;
  -webkit-text-fill-color: #10151c !important;
}
html[data-theme="light"] #personalCodeOverlay .input-wrapper input::placeholder {
  color: #9aa3b0 !important;
  -webkit-text-fill-color: #9aa3b0 !important;
  opacity: 1;
}
#personalCodeOverlay #personalCodeStatus {
  color: #ff6b6b;
  font-size: 0.82rem;
  line-height: 1.4;
  min-height: 1.2em;
  margin: 0 0 12px;
  text-align: center;
}

/* ═══ SYNC MAIN SITE DESIGN v4 ═══ */
:root {
--bg-primary: #0d0e12; --bg-secondary: #14161b; --bg-glass: rgba(22, 24, 30, 0.7);
--bg-card: rgba(22, 24, 30, 0.7); --border-subtle: rgba(255, 255, 255, 0.08);
--text-primary: #eef0f3; --text-secondary: #a8b0bc; --text-muted: #6b7280;
}
body { background: #0d0e12 !important; color: #eef0f3 !important; }
.feed-card, .guide-section, .feature-card, .pricing-card, .config-card, .referral-block, .offer-block {
background: rgba(22,24,30,0.7) !important; backdrop-filter: blur(12px) !important;
-webkit-backdrop-filter: blur(12px) !important; border: 1px solid rgba(255,255,255,0.08) !important;
box-shadow: 0 4px 20px rgba(0,0,0,0.4) !important;
}
.pricing-card.popular { border: 1px solid #10b981 !important; box-shadow: 0 0 15px rgba(16,185,129,0.2) !important; transform: scale(1.03); z-index: 2; }
.tariff-card.popular { border: 1px solid var(--border-subtle) !important; box-shadow: none !important; transform: none !important; }
#paymentOverlay .popular-badge { display: none !important; }
.register-overlay, .ticket-overlay, .admin-overlay, .spam-overlay, .menu-overlay, .guest-overlay {
background: rgba(6,7,9,0.96) !important; backdrop-filter: blur(22px) saturate(110%) !important;
-webkit-backdrop-filter: blur(22px) saturate(110%) !important;
}
.register-modal, .ticket-modal, .admin-modal, .spam-modal, .menu-modal, .guest-modal {
background: linear-gradient(165deg, rgba(28,32,40,0.98), rgba(22,26,34,0.98)) !important;
border: 1px solid rgba(255,255,255,0.12) !important;
box-shadow: 0 24px 60px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.06) !important;
color: #eef0f3 !important;
}
@media (max-width: 768px) {
.admin-overlay, .ticket-overlay, .register-overlay, .menu-overlay, .guest-overlay { padding: 12px !important; }
#paymentOverlay .admin-modal { padding: 18px 14px !important; width: calc(100vw - 16px) !important; max-width: calc(100vw - 16px) !important; }
#paymentOverlay .tariff-grid { gap: 8px; margin-bottom: 12px; }
#paymentOverlay .tariff-card { padding: 11px 6px; }
#paymentOverlay .tariff-days { font-size: 0.88rem; }
#paymentOverlay .tariff-price-rub { font-size: 0.82rem; margin-top: 2px; }
#paymentOverlay .tariff-price { font-size: 0.72rem; margin-top: 1px; }
#paymentOverlay .promo-code-block { padding: 10px; margin: 8px 0; }
#paymentOverlay .promo-code-input-row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  align-items: stretch !important;
  width: 100% !important;
}
#paymentOverlay .promo-code-input-row input {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  font-size: 0.85rem;
  padding: 10px;
  min-height: 42px;
  letter-spacing: 0;
  box-sizing: border-box !important;
}
#paymentOverlay .promo-code-input-row button {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
  padding: 0 14px !important;
  font-size: 0.78rem !important;
  min-height: 42px !important;
  min-width: 96px !important;
  margin-top: 0 !important;
  white-space: nowrap !important;
}
#paymentOverlay .btn, #paymentOverlay .btn.secondary { margin-top: 6px; }
.admin-modal, .ticket-modal, .register-modal, .menu-modal, .guest-modal { padding: 18px 14px !important; max-width: calc(100vw - 16px) !important; width: calc(100vw - 16px) !important; }
}
body::before {
content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.6;
background-image: linear-gradient(rgba(255,255,255,0.055) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.055) 1px, transparent 1px);
background-size: 32px 32px;
-webkit-mask-image: radial-gradient(ellipse 92% 82% at 50% 28%, #000 22%, transparent 100%);
mask-image: radial-gradient(ellipse 92% 82% at 50% 28%, #000 22%, transparent 100%);
}
@media (min-width: 769px) {
body::before {
opacity: 0.38;
background-image: linear-gradient(rgba(255,255,255,0.055) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.055) 1px, transparent 1px);
}
}
/* === UNIFIED MODAL UI v6 === */
/* === UI FIX v7: FAB stack, pass-eye, tickets, modal header === */
.tg-bot-fab { position: fixed !important; bottom: 136px !important; right: 12px !important; z-index: 9991 !important; width: 48px !important; height: 48px !important; background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; display: flex !important; align-items: center !important; justify-content: center !important; text-decoration: none !important; }
.tg-bot-fab svg { width: 32px !important; height: 32px !important; fill: none !important; stroke: rgba(0,136,204,0.95) !important; stroke-width: 1.8 !important; animation: tgBotFabNudge 2.6s ease-in-out infinite; transform-origin: center bottom; }
.tg-bot-fab:hover svg { animation-play-state: paused; transform: scale(1.12); }


/* TG tip: fixed sibling — не ломает другие fixed-иконки (sidebar/FAB) через overflow */
.tg-bot-fab-wrap{position:fixed!important;bottom:136px!important;right:12px!important;z-index:9991!important;width:48px;height:48px;pointer-events:none;overflow:visible!important}
.tg-bot-fab-wrap .tg-bot-fab{pointer-events:auto;position:relative!important;bottom:auto!important;right:auto!important;width:100%!important;height:100%!important}
@media(max-width:768px){.tg-bot-fab-wrap{bottom:136px!important;right:6px!important;width:48px;height:48px}}
.tg-bot-fab-tip {
position: fixed !important; right: 68px !important; bottom: 142px !important; top: auto !important; left: auto !important;
transform: none !important; width: max-content; max-width: min(220px, calc(100vw - 90px));
padding: 10px 28px 10px 10px; border-radius: 12px;
background: rgba(6, 18, 28, 0.94); border: 1px solid rgba(0, 170, 255, 0.35);
color: #e8f6ff; font-size: 0.72rem; line-height: 1.35; font-weight: 500;
box-shadow: 0 8px 24px rgba(0,0,0,0.45); pointer-events: auto; z-index: 9992 !important;
text-align: left; opacity: 0; visibility: hidden;
transition: opacity .35s ease, visibility .35s;
}
.tg-bot-fab-tip.visible {
opacity: 1; visibility: visible; transform: none !important;
animation: none;
}
.tg-bot-fab-tip::after {
content: ''; position: absolute; right: -6px; top: 50%; transform: translateY(-50%);
border: 6px solid transparent; border-left-color: rgba(0, 170, 255, 0.45); border-right: 0;
}
.tg-bot-fab-tip-close {
position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; padding: 0;
border: none; border-radius: 6px; background: transparent; color: #9ec9e8;
font-size: 1rem; line-height: 1; cursor: pointer; display: flex; align-items: center;
justify-content: center; z-index: 3;
}
.tg-bot-fab-tip-close:hover { color: #fff; background: rgba(255,255,255,0.08); }
@media(max-width:768px){
.tg-bot-fab-tip { right: 58px !important; bottom: 138px !important; max-width: min(148px, calc(100vw - 70px)); font-size: 0.62rem; line-height: 1.25; padding: 6px 22px 6px 7px; border-radius: 10px; }
.tg-bot-fab-tip-close { top: 2px; right: 2px; width: 18px; height: 18px; font-size: 0.9rem; }
}
body.modal-open .tg-bot-fab-wrap,
body.modal-open .tg-bot-fab-tip {
  pointer-events: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

@keyframes tgBotFabNudge {
0%, 68%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
72% { transform: translateY(-5px) rotate(-8deg) scale(1.06); }
76% { transform: translateY(-5px) rotate(8deg) scale(1.06); }
80% { transform: translateY(-3px) rotate(-5deg) scale(1.04); }
84% { transform: translateY(-3px) rotate(5deg) scale(1.04); }
88% { transform: translateY(-1px) rotate(0deg) scale(1.02); }
92% { transform: translateY(0) rotate(0deg) scale(1); }
}
@keyframes tgBotTipPulse {
0%, 100% { opacity: 0.92; }
50% { opacity: 1; }
}
.chat-fab { right: 12px !important; bottom: 80px !important; width: 48px !important; height: 48px !important; }
@media (max-width: 768px) {
.tg-bot-fab, .chat-fab { right: 6px !important; width: 48px !important; height: 48px !important; }
.tg-bot-fab { bottom: 136px !important; }
.chat-fab { bottom: 72px !important; }
.tg-bot-fab-tip { max-width: min(148px, calc(100vw - 64px)); font-size: 0.62rem; line-height: 1.25; padding: 6px 22px 6px 7px; border-radius: 10px; }
.tg-bot-fab-tip-close { top: 2px; right: 2px; width: 18px; height: 18px; font-size: 0.9rem; }
}
.modal-header-row { flex-wrap: nowrap !important; overflow: visible !important; display: flex !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; box-sizing: border-box !important; gap: 8px !important; }
.modal-header-row h3 { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; min-width: 0 !important; flex: 1 1 auto !important; margin: 0 !important; }
.modal-top-actions { flex-shrink: 0 !important; margin-left: auto !important; display: flex !important; align-items: center !important; gap: 6px !important; width: auto !important; }
.admin-modal .modal-top-actions .modal-back-btn, .admin-modal .modal-top-actions .modal-close-btn, .ticket-modal .modal-top-actions .modal-back-btn, .ticket-modal .modal-top-actions .modal-close-btn, .agreement-modal .modal-top-actions .modal-back-btn, .agreement-modal .modal-top-actions .modal-close-btn, .guest-modal .modal-top-actions .modal-back-btn, .guest-modal .modal-top-actions .modal-close-btn { width: 36px !important; min-width: 36px !important; max-width: 36px !important; height: 36px !important; margin: 0 !important; padding: 0 !important; flex: 0 0 36px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; box-shadow: none !important; background: rgba(255,255,255,0.06) !important; border: 1px solid rgba(255,255,255,0.1) !important; color: #eef0f3 !important; cursor: pointer !important; pointer-events: auto !important; position: relative !important; z-index: 2 !important; transform: none !important; font-size: 1.1rem !important; font-weight: 500 !important; border-radius: 10px !important; }
.guest-modal .modal-top-actions .modal-back-btn::after, .guest-modal .modal-top-actions .modal-close-btn::after { display: none !important; content: none !important; }
.guest-modal .modal-top-actions .modal-back-btn:hover, .guest-modal .modal-top-actions .modal-close-btn:hover { transform: none !important; background: rgba(255,255,255,0.11) !important; border-color: rgba(16,185,129,0.35) !important; }
.admin-modal, .ticket-modal { padding-left: 16px !important; padding-right: 16px !important; box-sizing: border-box !important; overflow-x: visible !important; }
#adminActionPasswordOverlay .password-wrapper, .admin-modal .password-wrapper, .ticket-modal .password-wrapper, .register-modal .password-wrapper, .guest-modal .password-wrapper { position: relative !important; text-align: left !important; }
#adminActionPasswordOverlay .password-wrapper input, .admin-modal .password-wrapper input, .ticket-modal .password-wrapper input, .register-modal .password-wrapper input, .guest-modal .password-wrapper input { padding-right: 46px !important; width: 100% !important; box-sizing: border-box !important; margin-bottom: 0 !important; }
#adminActionPasswordOverlay .password-wrapper .pass-eye, .admin-modal .password-wrapper .pass-eye, .ticket-modal .password-wrapper .pass-eye, .register-modal .password-wrapper .pass-eye, .guest-modal .password-wrapper .pass-eye {
display: flex !important; position: absolute !important; right: 10px !important; top: 50% !important; transform: translateY(-50%) !important;
width: 32px !important; height: 32px !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important;
background: transparent !important; border: none !important; box-shadow: none !important; color: rgba(255,255,255,0.45) !important; font-weight: 400 !important; cursor: pointer !important; z-index: 3 !important; align-items: center !important; justify-content: center !important;
}
#adminActionPasswordOverlay .password-wrapper .pass-eye:hover, .admin-modal .password-wrapper .pass-eye:hover, .ticket-modal .password-wrapper .pass-eye:hover, .register-modal .password-wrapper .pass-eye:hover, .guest-modal .password-wrapper .pass-eye:hover { color: rgba(255,255,255,0.75) !important; transform: translateY(-50%) !important; box-shadow: none !important; }
#adminActionPasswordOverlay .password-wrapper .pass-eye svg, .admin-modal .password-wrapper .pass-eye svg, .ticket-modal .password-wrapper .pass-eye svg, .register-modal .password-wrapper .pass-eye svg, .guest-modal .password-wrapper .pass-eye svg { width: 20px !important; height: 20px !important; pointer-events: none !important; }
.ticket-modal .ticket-btn, .ticket-overlay .ticket-btn, #userTicketModal .ticket-btn, #adminTicketsModal .ticket-btn {
background: rgba(22,24,30,0.95) !important; color: #eef0f3 !important; border: 1px solid rgba(255,255,255,0.12) !important;
box-shadow: none !important; font-weight: 600 !important; border-radius: 10px !important; transform: none !important;
}
.ticket-modal .ticket-btn:hover, .ticket-overlay .ticket-btn:hover, #userTicketModal .ticket-btn:hover, #adminTicketsModal .ticket-btn:hover {
background: rgba(30,32,38,0.98) !important; border-color: rgba(16,185,129,0.35) !important; transform: none !important; box-shadow: none !important;
}
.ticket-modal .ticket-btn.danger, #userTicketModal .ticket-btn.danger, #adminTicketsModal .ticket-btn.danger { background: rgba(255,68,68,0.12) !important; border-color: rgba(255,68,68,0.35) !important; color: #ff8888 !important; }
.ticket-modal .ticket-btn.warning, #userTicketModal .ticket-btn.warning, #adminTicketsModal .ticket-btn.warning { background: rgba(255,170,0,0.12) !important; border-color: rgba(255,170,0,0.35) !important; color: #ffcc66 !important; }

.modal-header-row { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:14px; padding-bottom:12px; border-bottom:1px solid rgba(255,255,255,0.08); }
.modal-header-row h3 { margin:0; font-size:1.05rem; color:#eef0f3; font-weight:700; flex:1; min-width:0; text-align:left; }
.modal-top-actions { display:flex; align-items:center; gap:6px; flex-shrink:0; }
.modal-back-btn, .modal-close-btn { flex-shrink:0; width:36px; height:36px; padding:0 !important; margin:0 !important; background:rgba(255,255,255,0.06) !important; border:1px solid rgba(255,255,255,0.1) !important; color:#eef0f3 !important; font-size:1.1rem !important; cursor:pointer; line-height:1; border-radius:10px !important; box-shadow:none !important; font-weight:500 !important; display:inline-flex; align-items:center; justify-content:center; transition:all .2s; }
.modal-back-btn:hover, .modal-close-btn:hover { background:rgba(255,255,255,0.11) !important; border-color:rgba(16,185,129,0.35) !important; transform:none !important; }
.config-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:12px; width:100%; }
.config-actions .btn-small, .config-actions button { width:100% !important; margin:0 !important; min-height:40px; }
.config-actions .config-btn-full { grid-column:1 / -1; }

/* ─── Empty configs (cat) + per-config guides in menu ─── */
#configsOverlay #userConfigsList .ucfg-empty-wrap{position:relative; min-height:210px; margin:6px 0 4px; display:flex; align-items:center; justify-content:center;}
#configsOverlay #userConfigsList .ucfg-empty-blur{
  position:absolute; inset:0; border-radius:14px; pointer-events:none;
  background:
    linear-gradient(165deg, rgba(22,24,30,0.5), rgba(13,14,18,0.55)),
    repeating-linear-gradient(0deg, transparent, transparent 11px, rgba(16,185,129,0.04) 11px, rgba(16,185,129,0.04) 12px);
  filter: blur(6px); opacity:0.55;
}
#configsOverlay #userConfigsList .ucfg-empty-visual{
  position:relative; z-index:1; text-align:center; padding:22px 14px 18px; width:100%; max-width:320px;
  border-radius:14px; border:1px solid rgba(0,255,136,0.22);
  background:linear-gradient(165deg, rgba(22,24,30,0.96), rgba(13,14,18,0.98));
  box-shadow:0 12px 32px rgba(0,0,0,0.45);
}
#configsOverlay #userConfigsList .ucfg-empty-emoji{font-size:0; line-height:0; margin-bottom:8px; filter:drop-shadow(0 0 10px rgba(16,185,129,0.3))}
#configsOverlay #userConfigsList .ucfg-empty-title{font-size:1.02rem; font-weight:800; color:#fff; margin-bottom:6px}
#configsOverlay #userConfigsList .ucfg-empty-text{font-size:0.76rem; color:#9aa3b2; line-height:1.45}
#configsOverlay #userConfigsList .ucfg-config-block{margin-bottom:4px}
#configsOverlay #userConfigsList .ucfg-sep{
  display:flex; align-items:center; gap:10px; margin:14px 2px 16px; color:#6b7f6b;
  font-size:0.68rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
}
#configsOverlay #userConfigsList .ucfg-sep::before,
#configsOverlay #userConfigsList .ucfg-sep::after{content:''; flex:1; height:1px; background:linear-gradient(90deg, transparent, rgba(0,255,136,0.28), transparent)}
#configsOverlay #userConfigsList .sub-guide--compact{
  margin-top:8px; padding:12px 12px 10px; border-radius:12px;
  background:rgba(12,18,16,0.72); border:1px solid rgba(0,255,136,0.14);
}
#configsOverlay #userConfigsList .sub-guide--compact .sub-guide-title{font-size:0.9rem; font-weight:800; color:#10b981; margin-bottom:4px; display:flex; flex-wrap:wrap; align-items:center; gap:6px}
#configsOverlay #userConfigsList .sub-guide--compact .sg-nick{color:#8aad8a; font-weight:600; font-size:0.75rem}
#configsOverlay #userConfigsList .sub-guide--compact .sub-guide-sub{font-size:0.7rem; color:#8aad8a; margin-bottom:8px; line-height:1.35}
#configsOverlay #userConfigsList .sub-guide--compact .client-switcher{display:flex; gap:6px; margin-bottom:6px}
#configsOverlay #userConfigsList .sub-guide--compact .client-tab{
  flex:1; min-width:0; padding:8px; border-radius:10px; border:1px solid rgba(255,255,255,0.1);
  background:rgba(255,255,255,0.04); color:#cfe8d4; font-size:0.7rem; font-weight:700; cursor:pointer; text-align:left; font-family:inherit;
}
#configsOverlay #userConfigsList .sub-guide--compact .client-tab.active{border-color:rgba(16,185,129,0.55); background:rgba(16,185,129,0.12); color:#fff}
#configsOverlay #userConfigsList .sub-guide--compact .tab-hint{display:block; font-size:0.6rem; font-weight:500; color:#8aad8a; margin-top:2px}
#configsOverlay #userConfigsList .sub-guide--compact .switcher-note{font-size:0.66rem; color:#7a9f7a; line-height:1.35; margin:0 0 8px}
#configsOverlay #userConfigsList .sub-guide--compact .guide-steps-v{margin:0;padding:0}
#configsOverlay #userConfigsList .sub-guide--compact .guide-step{display:flex;gap:10px;padding-bottom:12px}
#configsOverlay #userConfigsList .sub-guide--compact .guide-step:last-child{padding-bottom:0}
#configsOverlay #userConfigsList .sub-guide--compact .guide-step-rail{display:flex;flex-direction:column;align-items:center;width:26px;flex-shrink:0}
#configsOverlay #userConfigsList .sub-guide--compact .guide-step-num{
  width:26px;height:26px;border-radius:50%;border:1.5px solid #00ff88;color:#fff;font-size:0.68rem;font-weight:800;
  display:flex;align-items:center;justify-content:center;background:rgba(16,185,129,0.14);
}
#configsOverlay #userConfigsList .sub-guide--compact .guide-step-line{flex:1;width:0;border-left:2px dashed rgba(0,255,136,0.35);margin:4px 0;min-height:8px}
#configsOverlay #userConfigsList .sub-guide--compact .guide-step:last-child .guide-step-line{display:none}
#configsOverlay #userConfigsList .sub-guide--compact .guide-step-body{flex:1;min-width:0}
#configsOverlay #userConfigsList .sub-guide--compact .guide-step-title{font-size:0.78rem;font-weight:800;color:#fff;margin-bottom:4px}
#configsOverlay #userConfigsList .sub-guide--compact .guide-step-desc{font-size:0.7rem;color:#9aa3b2;line-height:1.4;margin-bottom:8px}
#configsOverlay #userConfigsList .sub-guide--compact .guide-step-desc .accent{color:#10b981;font-weight:700}
#configsOverlay #userConfigsList .sub-guide--compact .guide-dl-row{display:flex;flex-direction:column;gap:6px}
#configsOverlay #userConfigsList .sub-guide--compact .guide-btn{
  display:flex;align-items:center;justify-content:center;gap:6px;width:100%;min-height:36px;padding:8px 10px;margin:0;
  border-radius:10px;background:rgba(22,24,30,0.92);color:#eef0f3;border:1px solid rgba(255,255,255,0.12);
  font-size:0.7rem;font-weight:600;font-family:inherit;cursor:pointer;
}
#configsOverlay #userConfigsList .sub-guide--compact .guide-btn.happ{border-color:rgba(16,185,129,0.45);background:rgba(16,185,129,0.14)}
#configsOverlay #userConfigsList .sub-guide--compact .guide-btn.incy{border-color:rgba(59,130,246,0.45);background:rgba(59,130,246,0.14)}
#configsOverlay #userConfigsList .sub-guide--compact .guide-btn.v2raytun{border-color:rgba(245,158,11,0.5);background:rgba(245,158,11,0.14);color:#fbbf24}
.client-tab-ico{width:14px;height:14px;display:inline-block;vertical-align:-2px;margin-right:5px;flex-shrink:0}
.guide-btn.v2raytun{
  border-color:rgba(245,158,11,.5);background:rgba(245,158,11,.14);color:#fbbf24;
}

#configsOverlay #userConfigsList .sub-guide--compact .guide-btn svg{width:14px;height:14px;flex-shrink:0}



#configsOverlay #userConfigsList .sg-for-nick,
#instrConfigsRoot .sg-for-nick {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: #9bbf9b !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  margin: 4px 0 6px !important;
  position: relative !important;
  z-index: 2 !important;
  word-break: break-all;
}
#configsOverlay #userConfigsList .sg-for-nick-name,
#instrConfigsRoot .sg-for-nick-name,
#configsOverlay #userConfigsList .sg-for-nick b,
#instrConfigsRoot .sg-for-nick b {
  color: #e8fff0 !important;
  font-weight: 800 !important;
}
#configsOverlay #userConfigsList .sg-code-hint,
#instrConfigsRoot .sg-code-hint {
  display: block !important;
  visibility: visible !important;
  color: rgba(255,255,255,0.45) !important;
  font-size: 0.74rem !important;
  margin: 0 0 10px !important;
  position: relative !important;
  z-index: 2 !important;
}
.instr-profile-bar .instr-profile-login {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}
.instr-profile-bar.has-no-config .instr-profile-login {
  display: inline-flex !important;
  filter: blur(7px);
  pointer-events: none !important;
  cursor: default;
}
.instr-profile-bar:not(.has-no-config) .instr-profile-login {
  filter: none;
  pointer-events: auto !important;
  cursor: pointer;
}
.instr-profile-bar.is-guest .instr-profile-right .instr-profile-balance { display: block; }

#configsOverlay #userConfigsList .sg-for-nick,
#instrConfigsRoot .sg-for-nick {
  color: #8aad8a; font-size: 0.78rem; font-weight: 500; line-height: 1.35;
  margin: 2px 0 6px; position: relative; z-index: 1; word-break: break-all;
}
#configsOverlay #userConfigsList .sg-for-nick b,
#instrConfigsRoot .sg-for-nick b { color: #cfe8d4; font-weight: 700; }
#configsOverlay #userConfigsList .sg-code-hint,
#instrConfigsRoot .sg-code-hint {
  color: rgba(255,255,255,0.45); font-size: 0.72rem; font-weight: 500; line-height: 1.4; margin: 0 0 8px; position: relative; z-index: 1;
}
#instrConfigsRoot .sg-for-nick { font-size: 0.85rem; margin-bottom: 8px; }
#instrConfigsRoot .sg-code-hint { font-size: 0.75rem; margin-bottom: 10px; }

/* ─── My configs: flat buttons like /popular, no glow ─── */
#configsOverlay .admin-modal button.cfg-act,
#configsOverlay .admin-modal button.guide-btn,
#configsOverlay .admin-modal button.client-tab,
#configsOverlay .admin-modal button.dev-del,
#configsOverlay .admin-modal button.dev-reissue-btn,
#configsOverlay #userConfigsList .guide-btn,
#configsOverlay #userConfigsList .client-tab,
#configsOverlay #userConfigsList .cfg-act,
#configsOverlay #userConfigsList .dev-del,
#configsOverlay #userConfigsList .dev-reissue-btn {
  background: rgba(22,24,30,0.92) !important;
  background-image: none !important;
  color: #eef0f3 !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  box-shadow: none !important;
  filter: none !important;
  text-shadow: none !important;
  transform: none !important;
}
#configsOverlay #userConfigsList .guide-btn:hover,
#configsOverlay #userConfigsList .client-tab:hover,
#configsOverlay #userConfigsList .cfg-act:hover,
#configsOverlay .admin-modal button.guide-btn:hover,
#configsOverlay .admin-modal button.client-tab:hover,
#configsOverlay .admin-modal button.cfg-act:hover {
  background: rgba(28,31,38,0.95) !important;
  background-image: none !important;
  border-color: rgba(16,185,129,0.35) !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
}
#configsOverlay #userConfigsList .guide-btn.happ,
#configsOverlay .admin-modal button.guide-btn.happ {
  border-color: rgba(16,185,129,0.45) !important;
  background: rgba(16,185,129,0.12) !important;
  color: #eef0f3 !important;
  box-shadow: none !important;
}
#configsOverlay #userConfigsList .guide-btn.incy,
#configsOverlay .admin-modal button.guide-btn.incy {
  border-color: rgba(59,130,246,0.45) !important;
  background: rgba(59,130,246,0.12) !important;
  color: #eef0f3 !important;
  box-shadow: none !important;
}
#configsOverlay #userConfigsList .guide-btn.secondary,
#configsOverlay .admin-modal button.guide-btn.secondary {
  background: rgba(22,24,30,0.92) !important;
  color: #b8c0cc !important;
  box-shadow: none !important;
}
#configsOverlay #userConfigsList .client-tab.active,
#configsOverlay .admin-modal button.client-tab.active {
  background: rgba(16,185,129,0.16) !important;
  color: #fff !important;
  border-color: rgba(16,185,129,0.45) !important;
  box-shadow: none !important;
}
#configsOverlay #userConfigsList .guide-btn::after,
#configsOverlay #userConfigsList .client-tab::after,
#configsOverlay #userConfigsList .cfg-act::after { display: none !important; content: none !important; }
#configsOverlay #userConfigsList .sg-nick-block { width: 100%; margin: 2px 0 8px; }
#configsOverlay #userConfigsList .sg-nick { color: #8aad8a; font-weight: 600; font-size: 0.78rem; word-break: break-all; }
#configsOverlay #userConfigsList .sg-code-hint { color: rgba(255,255,255,0.45); font-size: 0.68rem; font-weight: 500; line-height: 1.35; margin-top: 3px; }

#instrConfigsRoot .sg-nick-block { width: 100%; margin: 2px 0 10px; position: relative; z-index: 1; }
#instrConfigsRoot .sg-nick { color: #8aad8a; font-weight: 600; font-size: 0.85rem; word-break: break-all; }
#instrConfigsRoot .sg-code-hint { color: rgba(255,255,255,0.45); font-size: 0.75rem; font-weight: 500; line-height: 1.4; margin-top: 4px; }
#instrConfigsRoot .guide-btn,
#instrConfigsRoot .client-tab {
  box-shadow: none !important;
  filter: none !important;
}
#instrConfigsRoot .guide-btn:hover,
#instrConfigsRoot .client-tab:hover {
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
}
#instrConfigsRoot .guide-btn::after { display: none !important; content: none !important; }
#instrConfigsRoot .client-switcher,
#instrConfigsRoot .client-tab,
#instrConfigsRoot .sub-guide-steps { position: relative; z-index: 2; pointer-events: auto !important; }
#instrConfigsRoot .sub-guide { overflow: visible; }
html[data-theme="light"] #configsOverlay #userConfigsList .ucfg-empty-visual{background:#fff;border-color:rgba(16,24,40,0.1)}
html[data-theme="light"] #configsOverlay #userConfigsList .ucfg-empty-title{color:#10151c}
html[data-theme="light"] #configsOverlay #userConfigsList .ucfg-empty-text{color:#5b6470}
html[data-theme="light"] #configsOverlay #userConfigsList .sub-guide--compact{background:#fff;border-color:rgba(16,24,40,0.1)}
/* Light: Happ/INCY tabs + «Добавить в Happ» readable */
html[data-theme="light"] #configsOverlay #userConfigsList .client-tab,
html[data-theme="light"] #configsOverlay .admin-modal button.client-tab {
  background: #f1f5f9 !important;
  color: #334155 !important;
  border-color: rgba(16,24,40,0.12) !important;
}
html[data-theme="light"] #configsOverlay #userConfigsList .client-tab .tab-hint,
html[data-theme="light"] #configsOverlay .admin-modal button.client-tab .tab-hint {
  color: #64748b !important;
}
html[data-theme="light"] #configsOverlay #userConfigsList .client-tab.active,
html[data-theme="light"] #configsOverlay .admin-modal button.client-tab.active {
  background: rgba(16,185,129,0.14) !important;
  color: #065f46 !important;
  border-color: rgba(16,185,129,0.45) !important;
}
html[data-theme="light"] #configsOverlay #userConfigsList .client-tab.active .tab-hint,
html[data-theme="light"] #configsOverlay .admin-modal button.client-tab.active .tab-hint {
  color: #047857 !important;
}
html[data-theme="light"] #configsOverlay #userConfigsList .guide-btn,
html[data-theme="light"] #configsOverlay #userConfigsList .guide-btn.secondary,
html[data-theme="light"] #configsOverlay #userConfigsList .guide-btn.happ,
html[data-theme="light"] #configsOverlay #userConfigsList .guide-btn.incy,
html[data-theme="light"] #configsOverlay .admin-modal button.guide-btn,
html[data-theme="light"] #configsOverlay .admin-modal button.guide-btn.happ,
html[data-theme="light"] #configsOverlay .admin-modal button.guide-btn.incy {
  background: #ffffff !important;
  background-image: none !important;
  color: #0f172a !important;
  border: 1px solid rgba(16,24,40,0.14) !important;
  box-shadow: 0 3px 12px rgba(16,24,40,0.08) !important;
}
html[data-theme="light"] #configsOverlay #userConfigsList .guide-btn.happ,
html[data-theme="light"] #configsOverlay .admin-modal button.guide-btn.happ {
  background: #ecfdf5 !important;
  color: #065f46 !important;
  border-color: rgba(16,185,129,0.45) !important;
}
html[data-theme="light"] #configsOverlay #userConfigsList .guide-btn.incy,
html[data-theme="light"] #configsOverlay .admin-modal button.guide-btn.incy {
  background: #eff6ff !important;
  color: #1e40af !important;
  border-color: rgba(59,130,246,0.4) !important;
}
html[data-theme="light"] #configsOverlay #userConfigsList .guide-btn.v2raytun,
html[data-theme="light"] #configsOverlay .admin-modal button.guide-btn.v2raytun {
  background: #fffbeb !important;
  color: #b45309 !important;
  border-color: rgba(217,119,6,0.4) !important;
}
html[data-theme="light"] #configsOverlay #userConfigsList .guide-btn svg,
html[data-theme="light"] #configsOverlay .admin-modal button.guide-btn svg {
  color: inherit !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}
html[data-theme="light"] #configsOverlay #userConfigsList .guide-step-title,
html[data-theme="light"] #configsOverlay .admin-modal .guide-step-title { color: #10151c !important; }
html[data-theme="light"] #configsOverlay #userConfigsList .guide-step-desc,
html[data-theme="light"] #configsOverlay #userConfigsList .sub-guide-sub,
html[data-theme="light"] #configsOverlay #userConfigsList .switcher-note,
html[data-theme="light"] #configsOverlay #userConfigsList .sg-code-hint,
html[data-theme="light"] #configsOverlay #userConfigsList .sg-for-nick {
  color: #5b6470 !important;
}
html[data-theme="light"] #configsOverlay #userConfigsList .sg-for-nick b,
html[data-theme="light"] #configsOverlay #userConfigsList .sg-for-nick-name { color: #0f172a !important; }
html[data-theme="light"] #configsOverlay #userConfigsList .sub-guide-title { color: #047857 !important; }

/* Per-config guides on /popular */
#instrConfigsRoot .ucfg-config-block{margin-bottom:6px}
#instrConfigsRoot .ucfg-sep{
  display:flex; align-items:center; gap:12px; margin:18px 4px 20px; color:#6b7f6b;
  font-size:0.72rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
}
#instrConfigsRoot .ucfg-sep::before,
#instrConfigsRoot .ucfg-sep::after{content:''; flex:1; height:1px; background:linear-gradient(90deg, transparent, rgba(0,255,136,0.3), transparent)}
#instrConfigsRoot .sub-guide{
  margin-top:10px; padding:16px 14px; border-radius:16px; position:relative; overflow:hidden;
  background:rgba(22,24,30,0.78); border:1px solid rgba(255,255,255,0.08); box-shadow:0 8px 28px rgba(0,0,0,0.4);
}
#instrConfigsRoot .sub-guide-title{display:flex;flex-wrap:wrap;align-items:center;gap:8px;color:#10b981;font-size:1.05rem;font-weight:800;margin-bottom:4px;position:relative;z-index:1}
#instrConfigsRoot .sub-guide .sg-nick{color:#8aad8a;font-weight:600;font-size:0.85rem}
#instrConfigsRoot .sub-guide-sub{font-size:0.82rem;color:#8aad8a;margin-bottom:12px;line-height:1.45;position:relative;z-index:1}
#instrConfigsRoot .client-switcher{display:flex;gap:8px;margin-bottom:8px;position:relative;z-index:1}
#instrConfigsRoot .client-tab{
  flex:1;border:1px solid rgba(255,255,255,0.1);background:rgba(0,0,0,0.28);color:#9aa3b2;
  padding:11px 10px;border-radius:12px;font-weight:700;font-size:0.85rem;cursor:pointer;text-align:left;font-family:inherit;
}
#instrConfigsRoot .client-tab.active{background:rgba(16,185,129,0.16);color:#fff;border-color:rgba(16,185,129,0.45)}
#instrConfigsRoot .client-tab .tab-hint{display:block;font-size:0.7rem;font-weight:500;color:#7a9f7a;margin-top:3px}
#instrConfigsRoot .switcher-note{font-size:0.72rem;color:#6b7280;text-align:center;margin:0 0 16px;line-height:1.4;position:relative;z-index:1}
#instrConfigsRoot .guide-steps-v{position:relative;z-index:1;padding-left:2px;margin:0}
#instrConfigsRoot .guide-step{display:flex;gap:14px;position:relative;padding-bottom:26px}
#instrConfigsRoot .guide-step:last-child{padding-bottom:2px}
#instrConfigsRoot .guide-step-rail{display:flex;flex-direction:column;align-items:center;width:36px;flex-shrink:0}
#instrConfigsRoot .guide-step-num{
  width:36px;height:36px;border-radius:50%;border:1.5px solid #00ff88;color:#fff;font-size:0.85rem;font-weight:800;
  display:flex;align-items:center;justify-content:center;background:rgba(16,185,129,0.14);flex-shrink:0;
}
#instrConfigsRoot .guide-step-line{flex:1;width:0;border-left:2px dashed rgba(0,255,136,0.45);margin:6px 0;min-height:18px}
#instrConfigsRoot .guide-step:last-child .guide-step-line{display:none}
#instrConfigsRoot .guide-step-body{flex:1;min-width:0;padding-top:4px}
#instrConfigsRoot .guide-step-title{font-size:0.98rem;font-weight:800;color:#fff;margin-bottom:6px}
#instrConfigsRoot .guide-step-desc{font-size:0.8rem;color:#9aa3b2;line-height:1.55;margin-bottom:12px}
#instrConfigsRoot .guide-step-desc .accent{color:#10b981;font-weight:700}
#instrConfigsRoot .guide-dl-row{display:flex;flex-direction:column;gap:10px}
#instrConfigsRoot .guide-btn{
  display:flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;width:100%!important;
  min-height:48px!important;padding:13px 16px!important;margin:0!important;border-radius:12px!important;
  background:rgba(22,24,30,0.92)!important;color:#eef0f3!important;border:1px solid rgba(255,255,255,0.12)!important;
  box-shadow:0 3px 12px rgba(0,0,0,0.35)!important;font-size:0.9rem!important;font-weight:600!important;font-family:inherit!important;cursor:pointer!important;
}
#instrConfigsRoot .guide-btn.happ{border-color:rgba(16,185,129,0.45)!important;background:rgba(16,185,129,0.14)!important}
#instrConfigsRoot .guide-btn.incy{border-color:rgba(59,130,246,0.45)!important;background:rgba(59,130,246,0.14)!important}
#instrConfigsRoot .guide-btn svg{width:18px;height:18px;flex-shrink:0}

/* ─── Мои конфиг VPN — 1:1 как в Webapp ─── */
#configsOverlay #userConfigsList .ucfg-hint, #instrConfigsRoot .ucfg-hint,
#businessOverlay #businessPanelContent .ucfg-hint {
  margin-bottom: 14px; padding: 12px 14px; background: rgba(0,100,160,0.18);
  border: 1px solid rgba(0,136,204,0.45); border-radius: 12px; color: #b0d4e8;
  font-size: 0.85rem; line-height: 1.5;
  display: flex; gap: 10px; align-items: flex-start;
}
#configsOverlay #userConfigsList .ucfg-hint-ico, #instrConfigsRoot .ucfg-hint-ico,
#businessOverlay #businessPanelContent .ucfg-hint-ico {
  flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px; border-radius: 4px;
  background: #3b82f6; color: #fff; font-size: 11px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center; font-style: italic;
}
#configsOverlay #userConfigsList .ucfg-empty, #instrConfigsRoot .ucfg-empty,
#businessOverlay #businessPanelContent .ucfg-empty { color: #8aad8a; text-align: center; padding: 18px 8px; font-size: 0.9rem; }
#configsOverlay #userConfigsList .cfg-box, #instrConfigsRoot .cfg-box,
#businessOverlay #businessPanelContent .cfg-box {
  background: rgba(22,24,30,0.85); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px; padding: 13px; margin-bottom: 10px; word-wrap: break-word;
  position: relative; transition: border-color .2s, box-shadow .2s, background .2s;
}
#configsOverlay #userConfigsList .cfg-box--locked, #instrConfigsRoot .cfg-box--locked,
#businessOverlay #businessPanelContent .cfg-box--locked {
  border-color: rgba(255,96,96,0.55) !important;
  box-shadow: 0 0 0 1px rgba(255,80,80,0.16), 0 14px 36px rgba(160,24,24,0.24) !important;
  background: linear-gradient(165deg, rgba(46,12,14,0.96), rgba(18,10,12,0.98)) !important;
  overflow: visible;
}
#configsOverlay #userConfigsList .cfg-box--locked .cfg-head, #instrConfigsRoot .cfg-box--locked .cfg-head,
#businessOverlay #businessPanelContent .cfg-box--locked .cfg-head {
  align-items: center;
  overflow: visible;
  min-height: 28px;
}
#configsOverlay #userConfigsList .cfg-head > span:not(.cfg-badge):not(.badge), #instrConfigsRoot .cfg-head > span:not(.cfg-badge):not(.badge),
#businessOverlay #businessPanelContent .cfg-head > span:not(.cfg-badge):not(.badge) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#configsOverlay #userConfigsList .cfg-head .cfg-badge, #instrConfigsRoot .cfg-head .cfg-badge,
#businessOverlay #businessPanelContent .cfg-head .cfg-badge,
#configsOverlay #userConfigsList .cfg-head .badge, #instrConfigsRoot .cfg-head .badge,
#businessOverlay #businessPanelContent .cfg-head .badge {
  position: static !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  bottom: auto !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 4px 10px !important;
  margin: 0 !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  pointer-events: auto !important;
  box-shadow: none !important;
  transform: none !important;
  align-self: center !important;
  z-index: 1;
}
#configsOverlay #userConfigsList .cfg-badge.badge-g, #instrConfigsRoot .cfg-badge.badge-g,
#businessOverlay #businessPanelContent .cfg-badge.badge-g,
#configsOverlay #userConfigsList .cfg-head .badge.badge-g, #instrConfigsRoot .cfg-head .badge.badge-g,
#businessOverlay #businessPanelContent .cfg-head .badge.badge-g {
  background: rgba(16,185,129,0.15) !important;
  color: #10b981 !important;
}
#configsOverlay #userConfigsList .cfg-badge.badge-r, #instrConfigsRoot .cfg-badge.badge-r,
#businessOverlay #businessPanelContent .cfg-badge.badge-r,
#configsOverlay #userConfigsList .cfg-head .badge.badge-r, #instrConfigsRoot .cfg-head .badge.badge-r,
#businessOverlay #businessPanelContent .cfg-head .badge.badge-r {
  background: rgba(255,68,68,0.15) !important;
  color: #ff6666 !important;
}
#configsOverlay #userConfigsList .sub-info-item.cfg-frost, #instrConfigsRoot .sub-info-item.cfg-frost,
#businessOverlay #businessPanelContent .sub-info-item.cfg-frost {
  position: relative;
  filter: blur(2.4px) saturate(0.75);
  opacity: 0.42;
  pointer-events: none;
  user-select: none;
}
#configsOverlay #userConfigsList .sub-info-item.cfg-frost::after, #instrConfigsRoot .sub-info-item.cfg-frost::after,
#businessOverlay #businessPanelContent .sub-info-item.cfg-frost::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: rgba(40,8,10,0.35);
  pointer-events: none;
}
#configsOverlay #userConfigsList .cfg-dim, #instrConfigsRoot .cfg-dim,
#businessOverlay #businessPanelContent .cfg-dim {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  isolation: isolate;
  margin: 0 0 2px;
  pointer-events: none;
  user-select: none;
}
#configsOverlay #userConfigsList .cfg-dim::after, #instrConfigsRoot .cfg-dim::after,
#businessOverlay #businessPanelContent .cfg-dim::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(55,10,14,0.45) 0%, rgba(28,6,8,0.72) 100%);
  pointer-events: none;
  z-index: 1;
}
#configsOverlay #userConfigsList .cfg-dim-inner, #instrConfigsRoot .cfg-dim-inner,
#businessOverlay #businessPanelContent .cfg-dim-inner {
  filter: blur(4px) saturate(0.65);
  opacity: 0.32;
}
#configsOverlay #userConfigsList .cfg-act--renew, #instrConfigsRoot .cfg-act--renew,
#businessOverlay #businessPanelContent .cfg-act--renew {
  flex: 1 1 100% !important;
  min-height: 46px !important;
  margin-top: 10px !important;
  border-color: rgba(248,113,113,0.38) !important;
  background: rgba(248,113,113,0.09) !important;
  color: #e8b4b4 !important;
  box-shadow: none !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  pointer-events: auto !important;
  filter: none !important;
  opacity: 1 !important;
  cursor: pointer !important;
  position: relative;
  z-index: 2;
}
#configsOverlay #userConfigsList .cfg-act--renew:hover, #instrConfigsRoot .cfg-act--renew:hover,
#businessOverlay #businessPanelContent .cfg-act--renew:hover {
  background: rgba(248,113,113,0.14) !important;
  border-color: rgba(248,113,113,0.55) !important;
}
#configsOverlay #userConfigsList .cfg-head, #instrConfigsRoot .cfg-head,
#businessOverlay #businessPanelContent .cfg-head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
}
#configsOverlay #userConfigsList .cfg-head .dot, #instrConfigsRoot .cfg-head .dot,
#businessOverlay #businessPanelContent .cfg-head .dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
#configsOverlay #userConfigsList .cfg-head .dot.on, #instrConfigsRoot .cfg-head .dot.on,
#businessOverlay #businessPanelContent .cfg-head .dot.on {
  background: #10b981; box-shadow: 0 0 8px rgba(16,185,129,0.55);
}
#configsOverlay #userConfigsList .cfg-head .dot.off, #instrConfigsRoot .cfg-head .dot.off,
#businessOverlay #businessPanelContent .cfg-head .dot.off { background: #ff4444; }
#configsOverlay #userConfigsList .sub-info-grid, #instrConfigsRoot .sub-info-grid,
#businessOverlay #businessPanelContent .sub-info-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 4px 0 12px;
}
#configsOverlay #userConfigsList .sub-info-item, #instrConfigsRoot .sub-info-item,
#businessOverlay #businessPanelContent .sub-info-item {
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px; padding: 14px 10px; text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 72px;
}
#configsOverlay #userConfigsList .sub-info-label, #instrConfigsRoot .sub-info-label,
#businessOverlay #businessPanelContent .sub-info-label {
  font-size: 10px; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.5px;
  font-weight: 500; margin-bottom: 8px;
}
#configsOverlay #userConfigsList .sub-info-value, #instrConfigsRoot .sub-info-value,
#businessOverlay #businessPanelContent .sub-info-value {
  font-size: 14px; font-weight: 600; color: #fff; word-break: break-word; line-height: 1.25;
}
#configsOverlay #userConfigsList .sub-info-sub, #instrConfigsRoot .sub-info-sub,
#businessOverlay #businessPanelContent .sub-info-sub {
  font-size: 11px; color: #9ca3af; margin-top: 4px; font-weight: 500;
}
/* Кольцевые индикаторы: дни / трафик */
.sub-info-item.sub-ring-item {
  min-height: 112px; padding: 10px 8px 8px;
}
.sub-ring-wrap {
  position: relative; width: 72px; height: 72px; margin: 0 auto 4px;
}
.sub-ring {
  width: 72px; height: 72px; transform: rotate(-90deg); display: block;
}
.sub-ring-bg { fill: none; stroke: rgba(255,255,255,0.08); stroke-width: 7; }
.sub-ring-fill {
  fill: none; stroke: #10b981; stroke-width: 7; stroke-linecap: round;
  transition: stroke-dashoffset 0.8s cubic-bezier(0.4,0,0.2,1), stroke 0.3s;
}
.sub-ring-item.state-warn .sub-ring-fill { stroke: #ffaa00; }
.sub-ring-item.state-off .sub-ring-fill { stroke: #ff6666; }
.sub-ring-center {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; line-height: 1; pointer-events: none;
}
.sub-ring-num {
  font-size: 1.2rem; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums;
}
.sub-ring-lbl {
  font-size: 0.56rem; font-weight: 600; color: #8aad8a; text-transform: uppercase;
  letter-spacing: 0.04em; margin-top: 2px;
}
.sub-ring-item.state-off .sub-ring-num { font-size: 1rem; color: #ff8888; }
.sub-info-item.sub-ring-item .sub-info-sub {
  margin-top: 2px; font-size: 10px; line-height: 1.3; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
html[data-theme="light"] .sub-ring-bg { stroke: rgba(16,24,40,0.1); }
html[data-theme="light"] .sub-ring-num { color: #10151c; }
html[data-theme="light"] .sub-ring-lbl { color: #6b7280; }
html[data-theme="light"] .sub-ring-item.state-off .sub-ring-num { color: #dc2626; }
#configsOverlay #userConfigsList .sub-status-badge, #instrConfigsRoot .sub-status-badge,
#businessOverlay #businessPanelContent .sub-status-badge {
  display: inline-block; padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 600;
}
#configsOverlay #userConfigsList .sub-status-badge.on, #instrConfigsRoot .sub-status-badge.on,
#businessOverlay #businessPanelContent .sub-status-badge.on { background: rgba(16,185,129,0.18); color: #34d399; }
#configsOverlay #userConfigsList .sub-status-badge.off, #instrConfigsRoot .sub-status-badge.off,
#businessOverlay #businessPanelContent .sub-status-badge.off { background: rgba(255,68,68,0.16); color: #f87171; }
#configsOverlay #userConfigsList .sub-info-grid.expired .sub-info-item, #instrConfigsRoot .sub-info-grid.expired .sub-info-item,
#businessOverlay #businessPanelContent .sub-info-grid.expired .sub-info-item {
  border-color: rgba(255,68,68,0.28); background: rgba(255,68,68,0.05);
}
#configsOverlay #userConfigsList .cfg-link, #instrConfigsRoot .cfg-link,
#businessOverlay #businessPanelContent .cfg-link {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px; color: #8aad8a; word-break: break-all; line-height: 1.4;
  background: rgba(0,0,0,0.3); padding: 6px 8px; border-radius: 6px; margin-bottom: 6px;
}
#configsOverlay #userConfigsList .cfg-actions, #instrConfigsRoot .cfg-actions,
#businessOverlay #businessPanelContent .cfg-actions {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px;
}
#configsOverlay #userConfigsList .cfg-act, #instrConfigsRoot .cfg-act,
#businessOverlay #businessPanelContent .cfg-act {
  display: inline-flex !important; align-items: center; justify-content: center; gap: 5px;
  flex: 1 1 calc(50% - 6px); min-width: 0; min-height: 36px !important;
  padding: 8px 10px !important; margin: 0 !important; width: auto !important;
  border-radius: 10px !important; border: 1px solid rgba(255,255,255,0.1) !important;
  background: rgba(255,255,255,0.05) !important; color: #e8eef2 !important;
  font-family: inherit; font-size: 12px !important; font-weight: 650 !important;
  cursor: pointer; line-height: 1.15; white-space: nowrap;
  box-shadow: none !important; transform: none !important;
}
#configsOverlay #userConfigsList .cfg-act:hover, #instrConfigsRoot .cfg-act:hover,
#businessOverlay #businessPanelContent .cfg-act:hover {
  background: rgba(255,255,255,0.08) !important; border-color: rgba(16,185,129,0.3) !important;
  transform: none !important; box-shadow: none !important;
}
#configsOverlay #userConfigsList .cfg-act-ico, #instrConfigsRoot .cfg-act-ico,
#businessOverlay #businessPanelContent .cfg-act-ico { font-size: 13px; line-height: 1; flex-shrink: 0; }
#configsOverlay #userConfigsList .cfg-act-label, #instrConfigsRoot .cfg-act-label,
#businessOverlay #businessPanelContent .cfg-act-label { overflow: hidden; text-overflow: ellipsis; }
#configsOverlay #userConfigsList .cfg-act--warn, #instrConfigsRoot .cfg-act--warn,
#businessOverlay #businessPanelContent .cfg-act--warn {
  border-color: rgba(255,170,0,0.35) !important;
  background: rgba(255,170,0,0.1) !important;
  color: #ffc14d !important;
}
#configsOverlay #userConfigsList .cfg-act--danger, #instrConfigsRoot .cfg-act--danger,
#businessOverlay #businessPanelContent .cfg-act--danger {
  border-color: rgba(255,68,68,0.4) !important;
  background: rgba(255,68,68,0.1) !important;
  color: #ff8888 !important;
}
#configsOverlay #userConfigsList .cfg-act--primary, #instrConfigsRoot .cfg-act--primary,
#businessOverlay #businessPanelContent .cfg-act--primary {
  flex: 1 1 100%;
  min-height: 40px !important; padding: 10px 12px !important;
  border-color: rgba(16,185,129,0.4) !important;
  background: rgba(16,185,129,0.12) !important;
  color: #34d399 !important; font-size: 13px !important; font-weight: 700 !important;
}
#configsOverlay #userConfigsList .cfg-devices-off, #instrConfigsRoot .cfg-devices-off,
#businessOverlay #businessPanelContent .cfg-devices-off {
  flex: 1 1 100%; margin-top: 2px; padding: 8px 10px; border-radius: 10px;
  font-size: 11px; color: #8aad8a; line-height: 1.4; text-align: center;
  background: rgba(255,255,255,0.03); border: 1px dashed rgba(255,255,255,0.1);
}
#configsOverlay #userConfigsList .ucfg-note, #instrConfigsRoot .ucfg-note,
#businessOverlay #businessPanelContent .ucfg-note {
  font-size: 11px; color: #8aad8a; margin: 0 0 8px; line-height: 1.35;
}
#configsOverlay #userConfigsList .ucfg-code, #instrConfigsRoot .ucfg-code,
#businessOverlay #businessPanelContent .ucfg-code {
  margin: 8px 0 6px; background: rgba(255,255,255,0.03); border: 1px dashed rgba(255,255,255,0.22);
  border-radius: 8px; padding: 10px 12px; font-size: 0.85rem; color: #ccc;
}
#configsOverlay #userConfigsList .ucfg-code b, #instrConfigsRoot .ucfg-code b,
#businessOverlay #businessPanelContent .ucfg-code b { color: #00ff88; }
#businessOverlay #businessPanelContent .biz-meta-line {
  font-size: 11px; color: #8aad8a; margin-bottom: 4px; line-height: 1.4;
}
#businessOverlay #businessPanelContent .biz-meta-line b { color: #c8f0d8; font-weight: 700; }
#businessOverlay #businessPanelContent .biz-meta-line.assigned b { color: #7ab8d4; }
#businessOverlay #businessPanelContent .biz-meta-line.servers b { color: #c8e0f0; }
#configsOverlay #userConfigsList .cfg-num, #instrConfigsRoot .cfg-num,
#businessOverlay #businessPanelContent .cfg-num {
  font-weight: 800; color: #00ff88; font-size: 0.78rem; letter-spacing: 0.04em;
  text-transform: uppercase; margin-bottom: 2px;
}
#configsOverlay #userConfigsList .cfg-title, #instrConfigsRoot .cfg-title,
#businessOverlay #businessPanelContent .cfg-title {
  font-weight: 700; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#configsOverlay #userConfigsList .sub-info-label, #instrConfigsRoot .sub-info-label,
#businessOverlay #businessPanelContent .sub-info-label {
  color: #c5cdd8 !important; font-weight: 600;
}
#configsOverlay #userConfigsList .sub-info-grid.expired .sub-info-label, #instrConfigsRoot .sub-info-grid.expired .sub-info-label,
#businessOverlay #businessPanelContent .sub-info-grid.expired .sub-info-label {
  color: #fecaca !important;
}
#configsOverlay #userConfigsList .sub-info-grid.expired .sub-info-value, #instrConfigsRoot .sub-info-grid.expired .sub-info-value,
#businessOverlay #businessPanelContent .sub-info-grid.expired .sub-info-value,
#configsOverlay #userConfigsList .sub-info-grid.expired .sub-info-sub, #instrConfigsRoot .sub-info-grid.expired .sub-info-sub,
#businessOverlay #businessPanelContent .sub-info-grid.expired .sub-info-sub {
  color: #fecaca !important;
}

/* ─── Light theme: конфиги читаемые на белом фоне ─── */
html[data-theme="light"] #configsOverlay #userConfigsList .cfg-box, html[data-theme="light"] #instrConfigsRoot .cfg-box,
html[data-theme="light"] #businessOverlay #businessPanelContent .cfg-box {
  background: #ffffff !important;
  border: 1px solid rgba(16,24,40,0.14) !important;
  box-shadow: 0 4px 18px rgba(16,24,40,0.08) !important;
  color: #1a2330 !important;
  opacity: 1 !important;
}
html[data-theme="light"] #configsOverlay #userConfigsList .cfg-box--locked, html[data-theme="light"] #instrConfigsRoot .cfg-box--locked,
html[data-theme="light"] #businessOverlay #businessPanelContent .cfg-box--locked {
  background: linear-gradient(165deg, #fff7f7, #ffefef) !important;
  border-color: rgba(220,38,38,0.4) !important;
  box-shadow: 0 0 0 1px rgba(220,38,38,0.12), 0 10px 28px rgba(220,38,38,0.1) !important;
}
html[data-theme="light"] #configsOverlay #userConfigsList .cfg-box :where(div,span,p,b,strong,a,small,label),
html[data-theme="light"] #instrConfigsRoot .cfg-box :where(div,span,p,b,strong,a,small,label),
html[data-theme="light"] #businessOverlay #businessPanelContent .cfg-box :where(div,span,p,b,strong,a,small,label) {
  color: #1a2330 !important;
}
html[data-theme="light"] #configsOverlay #userConfigsList .cfg-num, html[data-theme="light"] #instrConfigsRoot .cfg-num,
html[data-theme="light"] #businessOverlay #businessPanelContent .cfg-num {
  color: #047857 !important;
}
html[data-theme="light"] #configsOverlay #userConfigsList .cfg-title, html[data-theme="light"] #instrConfigsRoot .cfg-title,
html[data-theme="light"] #businessOverlay #businessPanelContent .cfg-title {
  color: #111827 !important;
}
html[data-theme="light"] #configsOverlay #userConfigsList .sub-info-item, html[data-theme="light"] #instrConfigsRoot .sub-info-item,
html[data-theme="light"] #businessOverlay #businessPanelContent .sub-info-item {
  background: #f3f5f8 !important;
  border-color: rgba(16,24,40,0.12) !important;
}
html[data-theme="light"] #configsOverlay #userConfigsList .sub-info-label, html[data-theme="light"] #instrConfigsRoot .sub-info-label,
html[data-theme="light"] #businessOverlay #businessPanelContent .sub-info-label {
  color: #5b6572 !important;
}
html[data-theme="light"] #configsOverlay #userConfigsList .sub-info-value, html[data-theme="light"] #instrConfigsRoot .sub-info-value,
html[data-theme="light"] #businessOverlay #businessPanelContent .sub-info-value {
  color: #111827 !important;
}
html[data-theme="light"] #configsOverlay #userConfigsList .sub-info-sub, html[data-theme="light"] #instrConfigsRoot .sub-info-sub,
html[data-theme="light"] #businessOverlay #businessPanelContent .sub-info-sub {
  color: #6b7280 !important;
}
html[data-theme="light"] #configsOverlay #userConfigsList .sub-info-grid.expired .sub-info-item, html[data-theme="light"] #instrConfigsRoot .sub-info-grid.expired .sub-info-item,
html[data-theme="light"] #businessOverlay #businessPanelContent .sub-info-grid.expired .sub-info-item {
  background: #fef2f2 !important;
  border-color: rgba(220,38,38,0.28) !important;
}
html[data-theme="light"] #configsOverlay #userConfigsList .sub-info-grid.expired .sub-info-label, html[data-theme="light"] #instrConfigsRoot .sub-info-grid.expired .sub-info-label,
html[data-theme="light"] #businessOverlay #businessPanelContent .sub-info-grid.expired .sub-info-label,
html[data-theme="light"] #configsOverlay #userConfigsList .sub-info-grid.expired .sub-info-value, html[data-theme="light"] #instrConfigsRoot .sub-info-grid.expired .sub-info-value,
html[data-theme="light"] #businessOverlay #businessPanelContent .sub-info-grid.expired .sub-info-value,
html[data-theme="light"] #configsOverlay #userConfigsList .sub-info-grid.expired .sub-info-sub, html[data-theme="light"] #instrConfigsRoot .sub-info-grid.expired .sub-info-sub,
html[data-theme="light"] #businessOverlay #businessPanelContent .sub-info-grid.expired .sub-info-sub {
  color: #b91c1c !important;
}
html[data-theme="light"] #configsOverlay #userConfigsList .sub-status-badge.on, html[data-theme="light"] #instrConfigsRoot .sub-status-badge.on,
html[data-theme="light"] #businessOverlay #businessPanelContent .sub-status-badge.on {
  background: rgba(16,185,129,0.16) !important;
  color: #047857 !important;
}
html[data-theme="light"] #configsOverlay #userConfigsList .sub-status-badge.off, html[data-theme="light"] #instrConfigsRoot .sub-status-badge.off,
html[data-theme="light"] #businessOverlay #businessPanelContent .sub-status-badge.off {
  background: rgba(220,38,38,0.12) !important;
  color: #dc2626 !important;
}
html[data-theme="light"] #configsOverlay #userConfigsList .cfg-act, html[data-theme="light"] #instrConfigsRoot .cfg-act,
html[data-theme="light"] #businessOverlay #businessPanelContent .cfg-act {
  background: #eef1f5 !important;
  border-color: rgba(16,24,40,0.16) !important;
  color: #1a2330 !important;
}
html[data-theme="light"] #configsOverlay #userConfigsList .cfg-act:hover, html[data-theme="light"] #instrConfigsRoot .cfg-act:hover,
html[data-theme="light"] #businessOverlay #businessPanelContent .cfg-act:hover {
  background: #e8f8f0 !important;
  border-color: rgba(5,150,105,0.4) !important;
}
html[data-theme="light"] #configsOverlay #userConfigsList .cfg-act--renew, html[data-theme="light"] #instrConfigsRoot .cfg-act--renew,
html[data-theme="light"] #businessOverlay #businessPanelContent .cfg-act--renew {
  background: #fff5f5 !important;
  border-color: rgba(220,38,38,0.28) !important;
  color: #9f6b6b !important;
  box-shadow: none !important;
}
html[data-theme="light"] #configsOverlay #userConfigsList .cfg-act--primary, html[data-theme="light"] #instrConfigsRoot .cfg-act--primary,
html[data-theme="light"] #businessOverlay #businessPanelContent .cfg-act--primary {
  background: rgba(16,185,129,0.14) !important;
  border-color: rgba(5,150,105,0.4) !important;
  color: #047857 !important;
}
html[data-theme="light"] #configsOverlay #userConfigsList .cfg-act--warn, html[data-theme="light"] #instrConfigsRoot .cfg-act--warn,
html[data-theme="light"] #businessOverlay #businessPanelContent .cfg-act--warn {
  background: rgba(245,158,11,0.12) !important;
  border-color: rgba(245,158,11,0.4) !important;
  color: #b45309 !important;
}
html[data-theme="light"] #configsOverlay #userConfigsList .cfg-act--danger, html[data-theme="light"] #instrConfigsRoot .cfg-act--danger,
html[data-theme="light"] #businessOverlay #businessPanelContent .cfg-act--danger {
  background: rgba(220,38,38,0.08) !important;
  border-color: rgba(220,38,38,0.35) !important;
  color: #dc2626 !important;
}
html[data-theme="light"] #configsOverlay #userConfigsList .cfg-link, html[data-theme="light"] #instrConfigsRoot .cfg-link,
html[data-theme="light"] #businessOverlay #businessPanelContent .cfg-link {
  background: #f3f5f8 !important;
  color: #374151 !important;
}
html[data-theme="light"] #configsOverlay #userConfigsList .ucfg-code, html[data-theme="light"] #instrConfigsRoot .ucfg-code,
html[data-theme="light"] #businessOverlay #businessPanelContent .ucfg-code {
  background: #f0fdf4 !important;
  border-color: rgba(5,150,105,0.35) !important;
  color: #1a2330 !important;
}
html[data-theme="light"] #configsOverlay #userConfigsList .ucfg-code b, html[data-theme="light"] #instrConfigsRoot .ucfg-code b,
html[data-theme="light"] #businessOverlay #businessPanelContent .ucfg-code b {
  color: #047857 !important;
}
html[data-theme="light"] #businessOverlay #businessPanelContent .biz-meta-line {
  color: #4b5563 !important;
}
html[data-theme="light"] #businessOverlay #businessPanelContent .biz-meta-line b,
html[data-theme="light"] #businessOverlay #businessPanelContent .biz-meta-line.assigned b,
html[data-theme="light"] #businessOverlay #businessPanelContent .biz-meta-line.servers b {
  color: #111827 !important;
}
html[data-theme="light"] #configsOverlay #userConfigsList .cfg-devices-off, html[data-theme="light"] #instrConfigsRoot .cfg-devices-off,
html[data-theme="light"] #businessOverlay #businessPanelContent .cfg-devices-off,
html[data-theme="light"] #configsOverlay #userConfigsList .ucfg-note, html[data-theme="light"] #instrConfigsRoot .ucfg-note,
html[data-theme="light"] #businessOverlay #businessPanelContent .ucfg-note,
html[data-theme="light"] #configsOverlay #userConfigsList .ucfg-hint, html[data-theme="light"] #instrConfigsRoot .ucfg-hint,
html[data-theme="light"] #businessOverlay #businessPanelContent .ucfg-hint {
  color: #1e4a66 !important;
  background: rgba(0,120,180,0.08) !important;
  border: 1px solid rgba(0,136,204,0.35) !important;
}
html[data-theme="light"] #configsOverlay #userConfigsList .cfg-badge.badge-g, html[data-theme="light"] #instrConfigsRoot .cfg-badge.badge-g,
html[data-theme="light"] #businessOverlay #businessPanelContent .cfg-badge.badge-g {
  background: rgba(16,185,129,0.15) !important;
  color: #047857 !important;
}
html[data-theme="light"] #configsOverlay #userConfigsList .cfg-badge.badge-r, html[data-theme="light"] #instrConfigsRoot .cfg-badge.badge-r,
html[data-theme="light"] #businessOverlay #businessPanelContent .cfg-badge.badge-r {
  background: rgba(220,38,38,0.12) !important;
  color: #dc2626 !important;
}
html[data-theme="light"] #configsOverlay #userConfigsList .cfg-dim::after, html[data-theme="light"] #instrConfigsRoot .cfg-dim::after,
html[data-theme="light"] #businessOverlay #businessPanelContent .cfg-dim::after {
  background: linear-gradient(180deg, rgba(254,226,226,0.5) 0%, rgba(254,202,202,0.72) 100%) !important;
}
html[data-theme="light"] #configsOverlay #userConfigsList .cfg-dim-inner, html[data-theme="light"] #instrConfigsRoot .cfg-dim-inner,
html[data-theme="light"] #businessOverlay #businessPanelContent .cfg-dim-inner {
  filter: blur(2px) saturate(0.85);
  opacity: 0.55;
}
html[data-theme="light"] #configsOverlay #userConfigsList .sub-info-item.cfg-frost, html[data-theme="light"] #instrConfigsRoot .sub-info-item.cfg-frost,
html[data-theme="light"] #businessOverlay #businessPanelContent .sub-info-item.cfg-frost {
  opacity: 0.55;
  filter: blur(1.2px);
}
html[data-theme="light"] #configsOverlay #userConfigsList .sub-info-item.cfg-frost::after, html[data-theme="light"] #instrConfigsRoot .sub-info-item.cfg-frost::after,
html[data-theme="light"] #businessOverlay #businessPanelContent .sub-info-item.cfg-frost::after {
  background: rgba(254,226,226,0.45);
}
#configsOverlay #userConfigsList .dev-card, #instrConfigsRoot .dev-card,
#businessOverlay #businessPanelContent .dev-card {
  background: rgba(0,0,0,0.22); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px; padding: 12px; margin-bottom: 8px;
}
#configsOverlay #userConfigsList .dev-card-top, #instrConfigsRoot .dev-card-top,
#businessOverlay #businessPanelContent .dev-card-top {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 8px;
}
#configsOverlay #userConfigsList .dev-platform, #instrConfigsRoot .dev-platform,
#businessOverlay #businessPanelContent .dev-platform {
  font-size: 14px; font-weight: 700; color: #fff; display: flex; align-items: center; gap: 6px;
}
#configsOverlay #userConfigsList .dev-hwid, #instrConfigsRoot .dev-hwid,
#businessOverlay #businessPanelContent .dev-hwid {
  font-size: 11px; color: #8aad8a; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  word-break: break-all;
}
#configsOverlay #userConfigsList .dev-meta, #instrConfigsRoot .dev-meta,
#businessOverlay #businessPanelContent .dev-meta { display: grid; gap: 4px; font-size: 12px; color: #b8c0c8; }
#configsOverlay #userConfigsList .dev-meta b, #instrConfigsRoot .dev-meta b,
#businessOverlay #businessPanelContent .dev-meta b {
  color: #8aad8a; font-weight: 600; min-width: 72px; display: inline-block;
}
#configsOverlay #userConfigsList .dev-del, #instrConfigsRoot .dev-del,
#businessOverlay #businessPanelContent .dev-del {
  flex-shrink: 0; border: 1px solid rgba(255,68,68,0.35) !important;
  background: rgba(255,68,68,0.1) !important; color: #ff6666 !important;
  border-radius: 8px !important; padding: 6px 10px !important; font-size: 11px !important;
  font-weight: 700 !important; cursor: pointer; margin: 0 !important; min-height: 0 !important;
  width: auto !important; box-shadow: none !important;
}
#configsOverlay #userConfigsList .dev-section-desc, #instrConfigsRoot .dev-section-desc,
#businessOverlay #businessPanelContent .dev-section-desc {
  font-size: 12px; line-height: 1.45; color: #a8b0b8; margin: 0 0 12px;
}
#configsOverlay #userConfigsList .dev-owner-lock, #instrConfigsRoot .dev-owner-lock,
#businessOverlay #businessPanelContent .dev-owner-lock {
  position: relative; border-radius: 14px; overflow: hidden; margin-bottom: 4px;
}
#configsOverlay #userConfigsList .dev-owner-lock-inner, #instrConfigsRoot .dev-owner-lock-inner,
#businessOverlay #businessPanelContent .dev-owner-lock-inner {
  filter: blur(5px); opacity: 0.42; pointer-events: none; user-select: none;
}
#configsOverlay #userConfigsList .dev-owner-lock-msg, #instrConfigsRoot .dev-owner-lock-msg,
#businessOverlay #businessPanelContent .dev-owner-lock-msg {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 18px 14px;
  font-size: 14px; font-weight: 700; color: #eef0f3;
  background: rgba(8,10,14,0.35);
  letter-spacing: 0.02em;
}
html[data-theme="light"] #configsOverlay #userConfigsList .dev-owner-lock-msg, html[data-theme="light"] #instrConfigsRoot .dev-owner-lock-msg,
html[data-theme="light"] #businessOverlay #businessPanelContent .dev-owner-lock-msg {
  color: #1a2330; background: rgba(255,255,255,0.35);
}
#configsOverlay #userConfigsList .dev-reissue, #instrConfigsRoot .dev-reissue,
#businessOverlay #businessPanelContent .dev-reissue {
  margin-top: 14px; padding: 14px; border-radius: 14px;
  background: rgba(18,20,24,0.92); border: 1px solid rgba(255,255,255,0.08);
}
#configsOverlay #userConfigsList .dev-reissue-title, #instrConfigsRoot .dev-reissue-title,
#businessOverlay #businessPanelContent .dev-reissue-title {
  font-size: 14px; font-weight: 700; color: #fff; margin: 0 0 10px;
}
#configsOverlay #userConfigsList .dev-reissue-warn, #instrConfigsRoot .dev-reissue-warn,
#businessOverlay #businessPanelContent .dev-reissue-warn {
  font-size: 12px; line-height: 1.45; color: #d4b896;
  background: rgba(255,255,255,0.04); border-radius: 10px; padding: 10px 12px; margin: 0 0 12px;
}
#configsOverlay #userConfigsList .dev-reissue-warn p, #instrConfigsRoot .dev-reissue-warn p,
#businessOverlay #businessPanelContent .dev-reissue-warn p { margin: 0; }
#configsOverlay #userConfigsList .dev-reissue-warn p + p, #instrConfigsRoot .dev-reissue-warn p + p,
#businessOverlay #businessPanelContent .dev-reissue-warn p + p { margin-top: 8px; }
#configsOverlay #userConfigsList .dev-reissue-btn, #instrConfigsRoot .dev-reissue-btn,
#businessOverlay #businessPanelContent .dev-reissue-btn {
  width: 100% !important; margin: 0 !important; min-height: 44px !important;
  display: flex !important; align-items: center; justify-content: center; gap: 8px;
  border: none !important; border-radius: 12px !important;
  background: #e8c84a !important; color: #141414 !important;
  font-size: 13px !important; font-weight: 700 !important; cursor: pointer;
  box-shadow: none !important;
}
#configsOverlay #userConfigsList .dev-reissue-btn:disabled, #instrConfigsRoot .dev-reissue-btn:disabled,
#businessOverlay #businessPanelContent .dev-reissue-btn:disabled { opacity: 0.65; cursor: wait; }
#configsOverlay #userConfigsList .dev-reissue-btn svg, #instrConfigsRoot .dev-reissue-btn svg,
#businessOverlay #businessPanelContent .dev-reissue-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
html[data-theme="light"] #configsOverlay #userConfigsList .dev-section-desc, html[data-theme="light"] #instrConfigsRoot .dev-section-desc,
html[data-theme="light"] #businessOverlay #businessPanelContent .dev-section-desc { color: #5b6570; }
html[data-theme="light"] #configsOverlay #userConfigsList .dev-reissue, html[data-theme="light"] #instrConfigsRoot .dev-reissue,
html[data-theme="light"] #businessOverlay #businessPanelContent .dev-reissue {
  background: #f4f5f7; border-color: rgba(16,24,40,0.1);
}
html[data-theme="light"] #configsOverlay #userConfigsList .dev-reissue-title, html[data-theme="light"] #instrConfigsRoot .dev-reissue-title,
html[data-theme="light"] #businessOverlay #businessPanelContent .dev-reissue-title { color: #1a2330; }
html[data-theme="light"] #configsOverlay #userConfigsList .dev-reissue-warn, html[data-theme="light"] #instrConfigsRoot .dev-reissue-warn,
html[data-theme="light"] #businessOverlay #businessPanelContent .dev-reissue-warn {
  color: #8a6a3a; background: rgba(232,200,74,0.12);
}

.admin-modal .btn, .admin-modal .btn-small, .admin-modal button.secondary, .ticket-modal .btn, .register-modal .btn, .menu-modal .btn, .guest-modal .btn, #paymentOverlay .promo-code-input-row button { background:rgba(22,24,30,0.95) !important; color:#eef0f3 !important; border:1px solid rgba(255,255,255,0.12) !important; box-shadow:none !important; font-weight:600 !important; }
.admin-modal .btn:hover, .admin-modal .btn-small:hover, .admin-modal button.secondary:hover, .ticket-modal .btn:hover, .register-modal .btn:hover, #paymentOverlay .promo-code-input-row button:hover { background:rgba(30,32,38,0.98) !important; border-color:rgba(16,185,129,0.35) !important; }
.admin-modal .btn-small.danger, .admin-modal .btn.danger { background:rgba(255,68,68,0.12) !important; border-color:rgba(255,68,68,0.35) !important; color:#ff8888 !important; }
.admin-modal .btn-small.warning, .admin-modal .btn.warning { background:rgba(255,170,0,0.12) !important; border-color:rgba(255,170,0,0.35) !important; color:#ffcc66 !important; }
/* ═══ STEK CHAT — glass + matrix (в стиле фона сайта) ═══ */
@keyframes chatSlideUp { from { opacity:0; transform: translateY(24px) scale(0.98); } to { opacity:1; transform: translateY(0) scale(1); } }
@keyframes chatLivePulse { 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.45; transform:scale(.82); } }
@keyframes chatFabGlow { 0%,100%{ filter: drop-shadow(0 0 6px rgba(16,185,129,.35)); } 50%{ filter: drop-shadow(0 0 14px rgba(16,185,129,.65)); } }
.chat-fab { position: fixed; bottom: 80px; right: 20px; z-index: 9990; width: 48px; height: 48px; background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform .25s, opacity .25s; }
.chat-fab:hover { transform: scale(1.1) translateY(-2px); background: transparent !important; border: none !important; box-shadow: none !important; }
.chat-fab.hidden { display: none; }
.chat-fab svg { width: 32px; height: 32px; fill: none !important; stroke: rgba(16,185,129,.95); stroke-width: 1.8; }
.chat-fab.has-new { animation: chatFabGlow 1.6s ease-in-out infinite; }
.chat-window { position: fixed; bottom: 120px; right: 20px; width: 390px; max-width: calc(100vw - 40px); z-index: 9998; display: none; flex-direction: column; overflow: hidden; border-radius: 20px 20px 8px 20px; border: 1px solid rgba(16, 185, 129, 0.2); background: linear-gradient(155deg, rgba(22,24,30,.94) 0%, rgba(13,14,18,.97) 55%, rgba(10,12,16,.98) 100%); backdrop-filter: blur(26px) saturate(1.15); -webkit-backdrop-filter: blur(26px) saturate(1.15); box-shadow: 0 28px 70px rgba(0,0,0,.72), 0 0 0 1px rgba(255,255,255,.04) inset, 0 0 56px rgba(16,185,129,.07); isolation: isolate; }
.chat-window::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0; background: linear-gradient(rgba(16,185,129,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(16,185,129,.035) 1px, transparent 1px); background-size: 20px 20px; opacity: .5; }
.chat-window::after { content: ''; position: absolute; top: 0; left: 8%; right: 8%; height: 1px; z-index: 2; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(16,185,129,.5), transparent); }
.chat-window.open { display: flex; animation: chatSlideUp .45s cubic-bezier(.16,1,.3,1); }
.chat-window .chat-header, .chat-window .chat-body { position: relative; z-index: 1; }
.chat-window .chat-header { padding: 13px 16px; display: flex; justify-content: space-between; align-items: center; background: rgba(16,185,129,.05); border-bottom: 1px solid rgba(255,255,255,.06); color: var(--accent, #00ff88); font-weight: 700; font-size: .9rem; letter-spacing: .03em; }
.chat-window .chat-header .chat-title { display: inline-flex; align-items: center; gap: 9px; }
.chat-window .chat-header .chat-live-dot { width: 7px; height: 7px; border-radius: 50%; background: #10b981; box-shadow: 0 0 10px rgba(16,185,129,.85); animation: chatLivePulse 2.2s ease-in-out infinite; flex-shrink: 0; }
.chat-window .chat-header .chat-close-btn { width: 32px; height: 32px; border-radius: 10px; border: 1px solid rgba(255,255,255,.08) !important; background: rgba(255,255,255,.04) !important; color: var(--text-secondary, #a8b0bc) !important; font-size: 1rem !important; line-height: 1; cursor: pointer; transition: background .2s, border-color .2s, color .2s; }
.chat-window .chat-header .chat-close-btn:hover { background: rgba(255,68,68,.1) !important; border-color: rgba(255,68,68,.35) !important; color: #ff8888 !important; }
.chat-window .chat-body { padding: 12px 14px 14px; display: flex; flex-direction: column; }
.chat-window .chat-messages { height: 288px; overflow-y: auto; margin-bottom: 10px; padding: 10px 10px 8px; border-radius: 14px; background-color: rgba(0,0,0,.32); background-image: linear-gradient(rgba(16,185,129,.028) 1px, transparent 1px), linear-gradient(90deg, rgba(16,185,129,.028) 1px, transparent 1px); background-size: 16px 16px; border: 1px solid rgba(255,255,255,.05); font-size: .84rem; color: var(--text-secondary, #a8b0bc); scrollbar-width: thin; scrollbar-color: rgba(16,185,129,.22) transparent; }
.chat-window .chat-messages::-webkit-scrollbar { width: 5px; }
.chat-window .chat-messages::-webkit-scrollbar-thumb { background: rgba(16,185,129,.2); border-radius: 4px; }
.chat-window .chat-messages .msg { margin-bottom: 6px; padding: 7px 10px; border-radius: 11px 11px 11px 4px; background: rgba(255,255,255,.028); border: 1px solid rgba(255,255,255,.05); border-left: 2px solid rgba(138,173,138,.3); word-break: break-word; white-space: pre-wrap; line-height: 1.35; font-size: .82rem; }
.chat-window .chat-messages .msg:has(.sender.self) { border-left-color: rgba(16,185,129,.55); background: rgba(16,185,129,.06); border-radius: 11px 11px 4px 11px; }
.chat-window .chat-messages .sender { font-weight: 600; font-size: .76rem; margin-right: 5px; }
.chat-window .chat-messages .sender.admin { color: #ff6666; font-weight: 700; }
.chat-window .chat-messages .sender.moderator { color: #ffaa00; font-weight: 700; }
.chat-window .chat-messages .sender.user { color: #8aad8a; }
.chat-window .chat-messages .sender.self { color: var(--accent, #00ff88); font-weight: 600; }
.chat-window .chat-messages .chat-time-compact { font-family: 'SF Mono', Monaco, 'Courier New', monospace; font-size: .62rem; color: #6b8f6b; margin-left: 4px; opacity: .75; letter-spacing: 0.3px; }
.chat-window .chat-messages .msg-text { display: inline; word-break: break-word; white-space: pre-wrap; color: var(--text-primary, #eef0f3); line-height: 1.3; }
.chat-input-area { display: flex; align-items: center; gap: 8px; background: rgba(22,24,30,.65); border: 1px solid rgba(255,255,255,.08); border-radius: 14px; padding: 6px 8px; width: 100%; box-sizing: border-box; box-shadow: 0 0 0 1px rgba(16,185,129,.06) inset; }
.chat-input-area select { width: 74px; font-size: .72rem; padding: 8px 4px; background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.08); color: var(--text-primary, #eef0f3); border-radius: 10px; outline: none; cursor: pointer; }
.chat-input-area select:focus { border-color: rgba(16,185,129,.4); }
.chat-input-area input { flex: 1; padding: 10px 12px; min-width: 0; background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.07); border-radius: 11px; color: var(--text-primary, #eef0f3); font-size: .88rem; outline: none; transition: border-color .2s, box-shadow .2s; }
.chat-input-area input::placeholder { color: var(--text-muted, #6b7280); }
.chat-input-area input:focus { border-color: rgba(16,185,129,.45) !important; box-shadow: 0 0 0 3px rgba(16,185,129,.08); outline: none !important; }
.chat-input-area .chat-send-btn { width: 40px; height: 40px; flex-shrink: 0; border-radius: 12px; background: rgba(22,24,30,0.88) !important; border: 1px solid rgba(255,255,255,0.12) !important; color: #eef0f3 !important; font-size: 1.05rem; font-weight: 700 !important; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 3px 12px rgba(0,0,0,0.35); transition: transform .2s, box-shadow .2s; }
.chat-input-area .chat-send-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(16,185,129,.4); }
#chatAdminPrivate { margin-top: 6px; }
#chatAdminPrivate input { width: 100%; padding: 8px 12px; background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.08); border-radius: 10px; color: var(--text-primary, #eef0f3); font-size: .8rem; }
#chatAdminControls { margin-top: 8px; text-align: right; }
#chatAdminControls .ticket-btn.danger, #chatAdminControls button.danger { background: rgba(255,68,68,.08) !important; border: 1px solid rgba(255,68,68,.28) !important; color: #ff8888 !important; border-radius: 10px !important; padding: 7px 14px !important; font-size: .78rem !important; font-weight: 600; transition: background .2s, border-color .2s; }
#chatAdminControls .ticket-btn.danger:hover, #chatAdminControls button.danger:hover { background: rgba(255,68,68,.15) !important; border-color: rgba(255,68,68,.45) !important; }
.chat-message { max-width: 85%; word-break: break-word; white-space: pre-wrap; }
.chat-message.own { margin-left: auto; background: rgba(16,185,129,.12) !important; border-radius: 14px 14px 4px 14px !important; }
.chat-message.other { margin-right: auto; background: rgba(255,255,255,.04) !important; border-radius: 14px 14px 14px 4px !important; }
@media (max-width: 768px) { .chat-window { bottom: 90px; right: 5px; width: calc(100vw - 20px); border-radius: 18px 18px 6px 18px; } .chat-fab { bottom: 72px; right: 6px; width: 48px; height: 48px; background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; } .chat-window .chat-messages { height: 240px; } .chat-input-area { gap: 6px; padding: 5px 6px; } .chat-input-area select { width: 62px; font-size: .68rem; padding: 6px 2px; } .chat-input-area input { padding: 8px 10px; font-size: .82rem; } .chat-input-area .chat-send-btn { width: 36px; height: 36px; font-size: .95rem; } }
.menu-modal, #adminPanelModal.admin-modal { overscroll-behavior: contain; }
#userMenuModal.menu-modal, #adminPanelModal.admin-modal {
background: rgba(13,14,18,0.98) !important;
max-width: 500px !important; width: calc(100% - 24px) !important;
box-shadow: 0 20px 50px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.06) !important;
border: 1px solid rgba(255,255,255,0.06) !important;
}
#userMenuModal.menu-modal {
padding: 16px 18px !important;
max-height: 76vh !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch;
}
#userMenuModal.menu-modal > div:first-child { margin-bottom: 12px !important; padding-bottom: 10px !important; }
#userMenuModal.menu-modal > div:nth-child(2) { gap: 8px !important; margin-bottom: 10px !important; }
#userMenuModal.menu-modal > div:nth-child(2) button { padding: 11px 10px !important; border-radius: 12px !important; }
#userMenuModal.menu-modal > button { margin-bottom: 6px !important; }
#adminPanelModal.admin-modal {
padding: 24px 20px !important;
max-height: 85vh !important;
overflow-y: auto !important;
}
@media (max-width: 768px) {
#userMenuModal.menu-modal { max-height: 66vh !important; padding: 12px 14px !important; }
}
.menu-modal button, .admin-modal button { width: 100% !important; margin-top: 0 !important; box-shadow: none !important; }
/* Промокод в оплате/меню: input + кнопка в ряд, не ломается от width:100% у .admin-modal button */
#paymentOverlay .promo-code-block,
#userPromoOverlay .promo-code-block {
  box-sizing: border-box !important;
  max-width: 100% !important;
  overflow: hidden !important;
}
#paymentOverlay .promo-code-input-row,
#userPromoOverlay .promo-code-input-row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
#paymentOverlay .promo-code-input-row input,
#paymentOverlay .admin-modal .promo-code-input-row input,
#userPromoOverlay .promo-code-input-row input {
  flex: 1 1 0 !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: none !important;
  box-sizing: border-box !important;
}
#paymentOverlay .promo-code-input-row button,
#paymentOverlay .admin-modal .promo-code-input-row button,
#paymentOverlay .admin-modal button.promo-apply-btn,
#userPromoOverlay .promo-code-input-row button {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 88px !important;
  max-width: 42% !important;
  margin-top: 0 !important;
  padding: 0 12px !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}
#userMenuModal.menu-modal button { background: transparent !important; font-weight: inherit !important; color: inherit !important; }
#userMenuModal.menu-modal button[style] { width: 100% !important; }
.admin-role-badge{ display:inline-flex; align-items:center; font-size:.65rem; font-weight:700; padding:2px 8px; border-radius:20px; background:rgba(16,185,129,.12); color:var(--accent); border:1px solid rgba(16,185,129,.25); }
.admin-toggle-card{ display:flex; justify-content:space-between; align-items:center; gap:8px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); border-radius:10px; padding:10px 12px; margin-bottom:8px; }
.admin-toggle-card.warn{ background:rgba(255,170,0,.06); border-color:rgba(255,170,0,.25); }
.switch{ position:relative; display:inline-block; width:44px; height:24px; flex-shrink:0; cursor:pointer; }
.switch input{ opacity:0; width:0; height:0; position:absolute; }
.switch-track{ position:absolute; top:0; left:0; right:0; bottom:0; background:#2a2d34; border-radius:26px; transition:.3s; }
.switch-dot{ position:absolute; height:18px; width:18px; left:3px; bottom:3px; background:#fff; border-radius:50%; transition:.3s; box-shadow:0 1px 3px rgba(0,0,0,.4); }
#adminPanelModal .admin-dashboard { grid-template-columns: repeat(3,1fr) !important; gap: 5px !important; }
.admin-dashboard-item { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); padding: 10px 4px !important; border-radius: 10px !important; }
.admin-dashboard-item .dash-icon{ width:30px; height:30px; margin:0 auto 5px; border-radius:8px; display:flex; align-items:center; justify-content:center; background:rgba(16,185,129,.1); color:#10b981; filter:none; }
.admin-dashboard-item .dash-icon svg{ width:15px; height:15px; }
.admin-dashboard-item .dash-label{ font-size:0.68rem !important; line-height:1.2; }
.quick-extend-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
@media (max-width: 520px) {
.quick-extend-grid { grid-template-columns: repeat(2, 1fr); gap: 4px; }
.quick-extend-btn { padding: 6px 4px; font-size: 0.62rem; white-space: normal; min-height: 28px; }
.rw-tabs { flex-direction: column; gap: 3px; }
.rw-tab { min-width: 0; width: 100%; padding: 9px 10px; font-size: 0.78rem; }
}
@media (min-width: 700px) { .quick-extend-grid { grid-template-columns: repeat(6, 1fr); } }
#adminConfigsOverlay .admin-modal { max-width: min(860px, 98vw) !important; padding: 16px 12px !important; overflow-x: hidden; }
@media (max-width: 768px) {
.pricing-grid { grid-template-columns: 1fr; gap: 12px; }
.pricing-card { padding: 16px 14px; display: flex; flex-direction: column; }
.pricing-card.popular { transform: none; }
.pricing-period { order: 1; } .pricing-price { order: 2; font-size: 1.55rem; } .pricing-price-rub { order: 3; margin-bottom: 10px; }
.pricing-features { order: 4; margin-bottom: 12px; font-size: 0.78rem; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; }
.pricing-btn { order: 5; padding: 10px; }
}

/* Business tariff UI — как на главной (САМ САЙТ) */
.sbp-mark { display:inline-flex; align-items:center; gap:6px; padding:0; border:none; background:transparent; box-shadow:none; line-height:1; flex-shrink:0; vertical-align:middle; }
.sbp-mark svg { height:28px; width:auto; display:block; flex-shrink:0; }
.sbp-mark-txt { font-size:0.78rem; font-weight:800; color:#e4e9f2; letter-spacing:0.02em; line-height:1; text-transform:lowercase; }
.business-slot-toggle { display:flex; gap:6px; justify-content:center; margin:0 0 12px; flex-wrap:wrap; width:100%; }
.business-slot-btn { flex:1; min-width:0; padding:8px 6px; font-size:0.72rem; font-weight:600; line-height:1.25; border-radius:10px; border:1px solid rgba(255,255,255,0.14) !important; background:rgba(0,0,0,0.35) !important; color:#9bb5a4 !important; cursor:pointer; transition:border-color .2s, background .2s, color .2s, box-shadow .2s, opacity .2s; opacity:0.7; box-shadow:none !important; position:relative; overflow:visible !important; transform:none !important; }
.business-slot-btn::after { display:none !important; }
.business-slot-btn.active { opacity:1; border:2px solid #10b981 !important; background:rgba(16,185,129,0.22) !important; color:#fff !important; box-shadow:0 0 0 2px rgba(16,185,129,0.4), 0 4px 16px rgba(16,185,129,0.2) !important; }
#businessPricingCard .business-slot-btn.active::before { content:'✓ '; }
#paymentOverlay .business-slot-btn { padding:10px 8px; font-size:0.78rem; font-weight:600; opacity:0.72; background:rgba(0,0,0,0.35) !important; border:1px solid rgba(255,255,255,0.14) !important; color:#a8c4b0 !important; box-shadow:none !important; }
#paymentOverlay .business-slot-btn.active { opacity:1; background:rgba(16,185,129,0.2) !important; border-color:#10b981 !important; color:#fff !important; box-shadow:0 0 0 2px rgba(16,185,129,0.35), 0 4px 14px rgba(16,185,129,0.15) !important; }
#paymentOverlay .biz-checkout-card { text-align:left; padding:16px 14px; cursor:default; }
#paymentOverlay .biz-checkout-title { text-align:center; font-size:1.05rem; font-weight:700; color:#00ff88; margin-bottom:10px; }
#paymentOverlay .biz-checkout-desc { font-size:0.8rem; line-height:1.45; color:#b8c8bc; margin:0 0 12px; padding:12px; border-radius:12px; background:rgba(0,0,0,0.28); border:1px solid rgba(255,255,255,0.08); }
#paymentOverlay .biz-checkout-desc b { color:#eef0f3; font-weight:600; }
#paymentOverlay .biz-checkout-desc ul { margin:8px 0 0; padding:0 0 0 18px; }
#paymentOverlay .biz-checkout-desc li { margin:4px 0; }
#paymentOverlay .biz-checkout-summary { text-align:center; margin-top:10px; padding:12px 10px; border-radius:12px; background:rgba(255,170,0,0.08); border:1px solid rgba(255,170,0,0.28); }
#paymentOverlay .biz-checkout-summary-label { font-size:0.72rem; color:#c9a46a; margin-bottom:4px; text-transform:uppercase; letter-spacing:.04em; }
#paymentOverlay .biz-checkout-summary-main { font-size:1.15rem; font-weight:800; color:#ffaa00; }
#paymentOverlay .biz-checkout-summary-sub { font-size:0.85rem; color:#8fd4b8; margin-top:3px; }

/* STEK UNIFIED UI v2 — glass buttons + shimmer hover + feed cards */
:root { --stek-btn-bg: rgba(22,24,30,0.88); --stek-btn-border: rgba(255,255,255,0.12); --stek-btn-text: #eef0f3; --stek-btn-accent: #10b981; }
.btn, .btn-small, .pricing-btn, .hero-cta, .referral-btn, .retro-btn, .free-promo-btn, .quick-extend-btn, .menu-footer-btn, .guide-actions .btn, .promo-code-input-row button, .ticket-btn, .back-btn, .currency-btn, .register-modal button, .ticket-modal button, .guest-modal button, .menu-modal button:not(.menu-item), .spam-modal button, .admin-modal .btn, .admin-modal .btn-small, .admin-modal button.secondary, #paymentOverlay .btn, #paymentOverlay .btn.secondary, .gift-tariff-btn, .gift-pay-btn { background: var(--stek-btn-bg) !important; color: var(--stek-btn-text) !important; border: 1px solid var(--stek-btn-border) !important; box-shadow: 0 3px 12px rgba(0,0,0,0.35) !important; font-weight: 600 !important; position: relative !important; overflow: hidden !important; transform: none; transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease !important; }
.btn::after, .btn-small::after, .pricing-btn::after, .hero-cta::after, .referral-btn::after, .retro-btn::after, .free-promo-btn::after, .quick-extend-btn::after, .menu-footer-btn::after, .promo-code-input-row button::after, .ticket-btn::after, .back-btn::after, .currency-btn::after, .register-modal button::after, .ticket-modal button::after, .guest-modal button::after, .menu-modal button:not(.menu-item)::after, .gift-tariff-btn::after, .gift-pay-btn::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 30%, rgba(16,185,129,0.22) 48%, rgba(52,211,153,0.12) 52%, transparent 70%); transform: translateX(-130%); transition: transform 0.55s ease; pointer-events: none; z-index: 0; }
.btn > *, .btn-small > *, .pricing-btn > *, .hero-cta > *, .referral-btn > *, .retro-btn > *, .free-promo-btn > *, .quick-extend-btn > *, .menu-footer-btn > * { position: relative; z-index: 1; }
.btn:hover, .btn-small:hover, .pricing-btn:hover, .hero-cta:hover, .referral-btn:hover, .retro-btn:hover, .free-promo-btn:hover, .quick-extend-btn:hover, .menu-footer-btn:hover, .promo-code-input-row button:hover, .ticket-btn:hover, .back-btn:hover, .currency-btn:hover, .register-modal button:hover, .ticket-modal button:hover, .guest-modal button:hover, .menu-modal button:not(.menu-item):hover, .admin-modal .btn:hover, .admin-modal .btn-small:hover, #paymentOverlay .btn:hover, .gift-tariff-btn:hover, .gift-pay-btn:hover { border-color: rgba(16,185,129,0.45) !important; background: rgba(28,31,38,0.95) !important; box-shadow: 0 6px 20px rgba(0,0,0,0.45), 0 0 14px rgba(16,185,129,0.12) !important; transform: translateY(-2px) !important; }
.btn:hover::after, .btn-small:hover::after, .pricing-btn:hover::after, .hero-cta:hover::after, .referral-btn:hover::after, .retro-btn:hover::after, .free-promo-btn:hover::after, .quick-extend-btn:hover::after, .menu-footer-btn:hover::after, .promo-code-input-row button:hover::after, .ticket-btn:hover::after, .back-btn:hover::after, .currency-btn:hover::after, .register-modal button:hover::after, .ticket-modal button:hover::after, .guest-modal button:hover::after, .menu-modal button:not(.menu-item):hover::after, .gift-tariff-btn:hover::after, .gift-pay-btn:hover::after { transform: translateX(130%); }
.btn.secondary, .btn-small.secondary, .retro-btn.secondary, .menu-footer-btn, .currency-btn { color: #b8c0cc !important; }
.btn:disabled, .btn-small:disabled, .pricing-btn:disabled { opacity: 0.45 !important; transform: none !important; pointer-events: none; }
.btn-small.danger, .btn.danger, .menu-footer-btn.danger, .ticket-btn.danger { background: rgba(255,68,68,0.1) !important; border-color: rgba(255,68,68,0.35) !important; color: #ffaaaa !important; }
.btn-small.warning, .btn.warning, .ticket-btn.warning { background: rgba(255,170,0,0.1) !important; border-color: rgba(255,170,0,0.35) !important; color: #ffcc88 !important; }
.rw-tab { background: rgba(22,24,30,0.75) !important; border: 1px solid rgba(255,255,255,0.1) !important; color: #b0b8c4 !important; box-shadow: none !important; position: relative; overflow: hidden; }
.rw-tab.active { background: rgba(28,31,38,0.95) !important; border-color: rgba(16,185,129,0.45) !important; color: #10b981 !important; box-shadow: 0 0 12px rgba(16,185,129,0.15) !important; }
.rw-tab::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(16,185,129,0.15) 50%, transparent 65%); transform: translateX(-120%); transition: transform 0.5s ease; pointer-events: none; }
.rw-tab:hover::after { transform: translateX(120%); }
.quick-extend-btn { font-size: 0.68rem !important; padding: 6px 4px !important; min-height: 28px; }
.menu-footer-btn { flex: 1; padding: 12px 16px !important; border-radius: 12px !important; font-size: 0.9rem !important; cursor: pointer; width: auto !important; margin-top: 0 !important; }
.hero-cta { padding: 14px 32px !important; font-size: 1rem !important; border-radius: 14px !important; text-decoration: none !important; display: inline-block; background: rgba(22,24,30,0.42) !important; }
.pricing-btn { padding: 11px !important; font-size: 0.9rem !important; border-radius: 10px !important; }
.feed-card, .guide-section { position: relative; overflow: hidden; transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.25s ease !important; }
.feed-card::before, .guide-section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, #10b981, transparent); opacity: 0; transition: opacity 0.3s; }
.feed-card::after, .guide-section::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(16,185,129,0.08) 50%, transparent 65%); transform: translateX(-120%); transition: transform 0.65s ease; pointer-events: none; }
.feed-card:hover, .guide-section:hover { transform: translateY(-3px); border-color: rgba(16,185,129,0.35) !important; box-shadow: 0 10px 28px rgba(0,0,0,0.45), 0 0 16px rgba(16,185,129,0.1) !important; }
.feed-card:hover::before, .guide-section:hover::before { opacity: 1; }
.feed-card:hover::after, .guide-section:hover::after { transform: translateX(120%); }
.feature-card::after, .pricing-card::after, .server-card::after, .news-card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(105deg, transparent 30%, rgba(16,185,129,0.18) 48%, rgba(52,211,153,0.08) 52%, transparent 70%); transform: translateX(-100%); transition: transform 0.55s ease; pointer-events: none; z-index: 0; }
.feature-card:hover::after, .pricing-card:hover::after, .server-card:hover::after, .news-card:hover::after { transform: translateX(100%); }
.pricing-card, .feature-card, .server-card, .news-card { overflow: hidden !important; }
.pricing-card > *, .feature-card > *, .server-card > *, .news-card > * { position: relative; z-index: 1; }
.pricing-card::before, .feature-card::before, .server-card::before, .news-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, #10b981, transparent); opacity: 0; transition: opacity 0.3s; pointer-events: none; z-index: 1; }
.pricing-card:hover::before, .feature-card:hover::before, .server-card:hover::before, .news-card:hover::before { opacity: 1; }
.pricing-card:hover, .feature-card:hover, .server-card:hover, .news-card:hover { transform: translateY(-3px) !important; border-color: rgba(16,185,129,0.35) !important; box-shadow: 0 10px 28px rgba(0,0,0,0.45), 0 0 16px rgba(16,185,129,0.1) !important; }
.pricing-card.popular:hover { transform: translateY(-3px) scale(1.02) !important; box-shadow: 0 12px 32px rgba(0,0,0,0.5), 0 0 20px rgba(16,185,129,0.22) !important; }
.news-card .news-tag { background: rgba(16,185,129,0.08) !important; border: 1px solid rgba(16,185,129,0.25) !important; color: #10b981 !important; box-shadow: none !important; border-radius: 8px; }
.news-card .news-headline { color: #eef0f3 !important; text-shadow: none !important; font-size: 1.05rem !important; }
.news-card .news-icon { font-size: 1.75rem !important; filter: none !important; }
.pay-tonkeeper-btn { background: rgba(0,100,160,0.25) !important; border: 1px solid rgba(0,136,204,0.45) !important; color: #e0f4ff !important; box-shadow: 0 3px 12px rgba(0,0,0,0.35) !important; }
/* END STEK UNIFIED UI v2 */
/* POPULAR — instruction page scrolls normally (login is a modal now) */
@media (max-width:768px) {
body:has(.main.instruction-main) .main.instruction-main > .center-block.instruction-page {
position: relative !important;
left: auto !important;
transform: none !important;
bottom: auto !important;
width: 100% !important;
max-width: 480px !important;
margin: 0 auto !important;
z-index: 2 !important;
padding-top: 0 !important;
padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)) !important;
}
body:has(.main.instruction-main) .main.instruction-main {
  padding-top: calc(env(safe-area-inset-top, 0px) + 58px) !important;
}
}


/* ═══════════ THEME TOGGLE + LIGHT THEME ═══════════ */
.theme-toggle{position:fixed;top:calc(env(safe-area-inset-top,0px) + 10px);right:12px;z-index:1200;width:42px;height:42px;border-radius:50%;border:none;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--accent);box-shadow:none;transition:transform .25s ease,color .3s;padding:0}
.theme-toggle:hover{border-color:transparent;background:transparent}
.theme-toggle:active{transform:scale(0.88) rotate(-18deg)}
.theme-toggle svg{width:21px;height:21px;position:absolute;transition:opacity .3s ease,transform .45s cubic-bezier(.34,1.56,.64,1)}
.theme-toggle .tt-sun{opacity:0;transform:rotate(-90deg) scale(.4)}
.theme-toggle .tt-moon{opacity:1;transform:rotate(0) scale(1)}
html[data-theme="light"] .theme-toggle .tt-sun{opacity:1;transform:rotate(0) scale(1)}
html[data-theme="light"] .theme-toggle .tt-moon{opacity:0;transform:rotate(90deg) scale(.4)}
@media (max-width:768px){.theme-toggle{width:40px;height:40px}}
/* «Вход» перенесена в карточку аккаунта — плавающую у луны скрываем */
body > #instrLoginBtn.instr-login-btn,
#instrLoginBtn.instr-login-btn,
.instr-login-btn{
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
}
#instrLoginBtn.instr-login-btn.is-hidden,
.instr-login-btn.is-hidden{
  display: none !important;
}
#instrLoginBtn.instr-login-btn:focus,
#instrLoginBtn.instr-login-btn:focus-visible,
#instrLoginBtn.instr-login-btn:active,
.instr-login-btn:focus,
.instr-login-btn:focus-visible,
.instr-login-btn:active{
  display: none !important;
}
@media (max-width:768px){
  .theme-toggle{ top: calc(env(safe-area-inset-top,0px) + 8px) !important; right: 10px !important; }
  body > #instrLoginBtn.instr-login-btn,
  #instrLoginBtn.instr-login-btn,
  .instr-login-btn{
    display: none !important;
  }
  #instrLoginBtn.instr-login-btn:focus,
  #instrLoginBtn.instr-login-btn:focus-visible,
  #instrLoginBtn.instr-login-btn:active,
  .instr-login-btn:focus,
  .instr-login-btn:focus-visible,
  .instr-login-btn:active,
  #instrLoginBtn.instr-login-btn:hover,
  .instr-login-btn:hover{
    display: none !important;
  }
}
html[data-theme="light"] #instrLoginBtn.instr-login-btn,
html[data-theme="light"] .instr-login-btn{
  display: none !important;
}

/* Instruction page: центр, без сжатия вправо */
.main.instruction-main{
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
  max-width: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  box-sizing: border-box !important;
  padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important;
}
.main.instruction-main > .center-block.instruction-page{
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
  width: 100% !important;
  max-width: 520px !important;
  margin: 12px auto 0 !important;
  align-self: center !important;
  box-sizing: border-box !important;
  padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
}
@media (max-width:768px){
  .main.instruction-main{
    padding: 6px 10px 0 !important;
    padding-top: calc(env(safe-area-inset-top, 0px) + 58px) !important;
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .main.instruction-main > .center-block.instruction-page{
    margin: 0 auto !important;
    gap: 10px !important;
    padding-top: 0 !important;
    padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .instr-profile-bar {
    margin: 0 0 12px !important;
    padding: 12px 12px !important;
    gap: 0 !important;
  }
  .instr-profile-bar .instr-profile-login {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 6 !important;
    width: auto !important;
    min-width: 48px !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 11px !important;
    font-size: 0.72rem !important;
    border-radius: 15px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25) !important;
  }
  .instr-profile-bar.has-no-config .instr-profile-login {
    filter: blur(7px) !important;
    pointer-events: none !important;
    cursor: default !important;
  }
  .instr-profile-bar:not(.has-no-config) .instr-profile-login {
    filter: none !important;
    pointer-events: auto !important;
    cursor: pointer !important;
  }
  .instr-profile-nick { font-size: 0.98rem !important; max-width: 46vw !important; }
  .instr-profile-balance { font-size: 1.02rem !important; }
  .instr-profile-avatar { width: 36px !important; height: 36px !important; font-size: 0.92rem !important; }
  .instr-workspace.has-no-config { min-height: min(58vh, 480px) !important; }
}

/* Workspace: конфиги + инструкция + empty gate */
.instr-workspace{position:relative; width:100%; max-width:100%; box-sizing:border-box;}
.instr-content{display:flex; flex-direction:column; gap:14px; width:100%;}
.instr-workspace.has-no-config{
  min-height: min(70vh, 640px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.instr-workspace.has-no-config .instr-content{
  position: absolute;
  inset: 0;
  overflow: hidden;
  filter: blur(7px);
  opacity: 0.32;
  pointer-events: none;
  user-select: none;
}
.instr-empty-gate{
  display: none;
  position: relative;
  z-index: 5;
  width: 100%;
  align-items: center;
  justify-content: center;
  padding: 18px 10px;
  text-align: center;
}
.instr-workspace.has-no-config .instr-empty-gate{display:flex;}
.instr-empty-card{
  width:100%; max-width:360px; padding:28px 22px 24px; border-radius:18px;
  background:linear-gradient(165deg, rgba(22,24,30,0.96), rgba(13,14,18,0.98));
  border:1px solid rgba(16,185,129,0.28);
  box-shadow:0 20px 50px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.04);
  position:relative; overflow:hidden;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.instr-empty-card::before{
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, transparent, #10b981, transparent);
}
.instr-empty-emoji{font-size:0; line-height:0; margin-bottom:10px; filter:drop-shadow(0 0 12px rgba(16,185,129,0.35))}
.instr-empty-emoji .stek-sad-cat,.ucfg-empty-emoji .stek-sad-cat{display:block;margin:0 auto;width:88px;height:88px}
#configsOverlay #userConfigsList .ucfg-empty-emoji .stek-sad-cat{width:72px;height:72px}
.instr-empty-title{font-size:1.15rem; font-weight:800; color:#fff; margin-bottom:8px}
.instr-empty-text{font-size:0.88rem; color:#9aa3b2; line-height:1.5; margin-bottom:18px}
.instr-empty-actions{display:flex; flex-direction:column; gap:10px}
.instr-empty-features{
  list-style:none; margin:0 0 18px; padding:0; display:flex; flex-direction:column; gap:8px; text-align:left;
}
.instr-empty-features li{
  display:flex; align-items:center; gap:10px; font-size:0.82rem; color:#b0c4b8; line-height:1.35;
  padding:8px 10px; border-radius:10px; background:rgba(16,185,129,0.06); border:1px solid rgba(16,185,129,0.12);
}
.instr-empty-features li span{font-size:1.05rem; flex-shrink:0; line-height:1}
html[data-theme="light"] .instr-empty-features li{color:#47515e; background:#f4fbf8; border-color:rgba(16,185,129,0.18)}

html[data-theme="light"] .instr-empty-card{background:#fff; border-color:rgba(16,24,40,0.12); box-shadow:0 12px 36px rgba(16,24,40,0.12)}
html[data-theme="light"] .instr-empty-title{color:#10151c}
html[data-theme="light"] .instr-empty-text{color:#5b6470}

/* Guide (webapp → popular, стиль главной с полосками) */
.instr-page .sub-guide, #instrGuideRoot .sub-guide{
  background:rgba(22,24,30,0.78); border:1px solid rgba(255,255,255,0.08); border-radius:16px;
  padding:16px 14px; margin:0; position:relative; overflow:hidden;
  box-shadow:0 8px 28px rgba(0,0,0,0.4);
}
#instrGuideRoot .sub-guide::before{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.45;
  background:
    linear-gradient(rgba(16,185,129,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16,185,129,.04) 1px, transparent 1px);
  background-size:22px 22px;
}
#instrGuideRoot .sub-guide::after{
  content:''; position:absolute; top:0; left:10%; right:10%; height:2px;
  background:linear-gradient(90deg, transparent, #10b981, transparent); opacity:.85;
}
#instrGuideRoot .sub-guide-title,
#instrGuideRoot .sub-guide-sub,
#instrGuideRoot .client-switcher,
#instrGuideRoot .switcher-note,
#instrGuideRoot .guide-steps-v{position:relative; z-index:1}
#instrGuideRoot .sub-guide-title{display:flex;align-items:center;gap:8px;color:#10b981;font-size:1.05rem;font-weight:800;margin-bottom:4px}
#instrGuideRoot .sub-guide-sub{font-size:0.82rem;color:#8aad8a;margin-bottom:12px;line-height:1.45}
#instrGuideRoot .client-switcher{display:flex;gap:8px;margin-bottom:8px}
#instrGuideRoot .client-tab{
  flex:1;border:1px solid rgba(255,255,255,0.1);background:rgba(0,0,0,0.28);color:#9aa3b2;
  padding:11px 10px;border-radius:12px;font-weight:700;font-size:0.85rem;cursor:pointer;
  text-align:left;transition:all .2s ease;font-family:inherit;
}
#instrGuideRoot .client-tab .tab-hint{display:block;font-size:0.7rem;font-weight:500;color:#7a9f7a;margin-top:3px}
#instrGuideRoot .client-tab.active{
  background:rgba(16,185,129,0.16);color:#fff;border-color:rgba(16,185,129,0.45);
  box-shadow:0 0 0 1px rgba(16,185,129,0.2), 0 0 18px rgba(16,185,129,0.12);
}
#instrGuideRoot .client-tab.active .tab-hint{color:rgba(16,185,129,0.95)}
#instrGuideRoot .switcher-note{font-size:0.72rem;color:#6b7280;text-align:center;margin:0 0 16px;line-height:1.4}
#instrGuideRoot .guide-steps-v{position:relative;padding-left:2px;margin:0}
#instrGuideRoot .guide-step{display:flex;gap:14px;position:relative;padding-bottom:26px}
#instrGuideRoot .guide-step:last-child{padding-bottom:2px}
#instrGuideRoot .guide-step-rail{display:flex;flex-direction:column;align-items:center;width:36px;flex-shrink:0}
#instrGuideRoot .guide-step-num{
  width:36px;height:36px;border-radius:50%;border:1.5px solid #00ff88;
  color:#fff;font-size:0.85rem;font-weight:800;display:flex;align-items:center;justify-content:center;
  background:rgba(16,185,129,0.14);z-index:1;flex-shrink:0;
  box-shadow:0 0 12px rgba(0,255,136,0.25);
}
#instrGuideRoot .guide-step-line{
  flex:1;width:0;border-left:2px dashed rgba(0,255,136,0.45);margin:6px 0;min-height:18px;
}
#instrGuideRoot .guide-step:last-child .guide-step-line{display:none}
#instrGuideRoot .guide-step-body{flex:1;min-width:0;padding-top:4px}
#instrGuideRoot .guide-step-title{font-size:0.98rem;font-weight:800;color:#fff;margin-bottom:6px;line-height:1.25}
#instrGuideRoot .guide-step-desc{font-size:0.8rem;color:#9aa3b2;line-height:1.55;margin-bottom:12px}
#instrGuideRoot .guide-step-desc .accent{color:#10b981;font-weight:700}
#instrGuideRoot .guide-dl-row{display:flex;flex-direction:column;gap:10px}
/* Кнопки инструкции / empty / модалки = STEK glass (без .instr-login-btn!) */
#instrGuideRoot .guide-btn,
#instrEmptyGate .btn,
#instrEmptyGate .btn.secondary,
#instrEmptyGate .instr-empty-actions .btn,
#personalCodeOverlay .sub-code-btn,
#personalCodeOverlay .btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  min-height: 48px !important;
  padding: 13px 16px !important;
  margin: 0 !important;
  border-radius: 12px !important;
  background: rgba(22,24,30,0.92) !important;
  background-image: none !important;
  color: #eef0f3 !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  box-shadow: 0 3px 12px rgba(0,0,0,0.35) !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  font-family: inherit !important;
  line-height: 1.2 !important;
  cursor: pointer !important;
  text-decoration: none !important;
  position: relative !important;
  overflow: hidden !important;
  transform: none !important;
  touch-action: manipulation;
  white-space: normal !important;
  transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease !important;
}
#instrGuideRoot .guide-btn::after,
#instrEmptyGate .btn::after,
#personalCodeOverlay .sub-code-btn::after {
  content: '' !important;
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(16,185,129,0.22) 48%, rgba(52,211,153,0.12) 52%, transparent 70%);
  transform: translateX(-130%);
  transition: transform 0.55s ease;
  pointer-events: none;
  z-index: 0;
}
#instrGuideRoot .guide-btn:hover,
#instrEmptyGate .btn:hover,
#personalCodeOverlay .sub-code-btn:hover {
  border-color: rgba(16,185,129,0.45) !important;
  background: rgba(28,31,38,0.95) !important;
  background-image: none !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.45), 0 0 14px rgba(16,185,129,0.12) !important;
  transform: translateY(-2px) !important;
  color: #eef0f3 !important;
}
html[data-theme="light"] #instrGuideRoot .guide-btn:hover,
html[data-theme="light"] #instrEmptyGate .btn:hover,
html[data-theme="light"] #personalCodeOverlay .sub-code-btn:hover {
  background: #f4fbf8 !important;
  color: #10151c !important;
}
#instrGuideRoot .guide-btn:hover::after,
#instrEmptyGate .btn:hover::after,
#personalCodeOverlay .sub-code-btn:hover::after { transform: translateX(130%); }
#instrGuideRoot .guide-btn svg {
  position: relative;
  z-index: 1;
  width: 18px !important;
  height: 18px !important;
  max-width: 18px !important;
  max-height: 18px !important;
  flex-shrink: 0;
  display: block;
}
#instrEmptyGate .btn > *,
#personalCodeOverlay .sub-code-btn > * { position: relative; z-index: 1; }
#instrGuideRoot .guide-btn.secondary,
#instrEmptyGate .btn.secondary {
  color: #b8c0cc !important;
  background: rgba(22,24,30,0.92) !important;
  background-image: none !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
}
#instrGuideRoot .guide-btn.happ {
  border-color: rgba(255,102,0,0.4) !important;
  color: #ffb07a !important;
  background: rgba(22,24,30,0.88) !important;
  background-image: none !important;
}
#instrGuideRoot .guide-btn.incy {
  border-color: rgba(59,130,246,0.4) !important;
  color: #93c5fd !important;
  background: rgba(22,24,30,0.88) !important;
  background-image: none !important;
}
#instrConfigsRoot .cfg-box{margin-bottom:12px}
#instrConfigsRoot .cfg-box:last-child{margin-bottom:0}
#personalCodeOverlay .login-card{margin:0 auto; max-width:100%}
html[data-theme="light"] #instrGuideRoot .sub-guide{background:#fff !important;border-color:rgba(16,24,40,0.1)!important}
html[data-theme="light"] #instrGuideRoot .guide-step-title{color:#10151c!important}
html[data-theme="light"] #instrGuideRoot .client-tab{background:#f4f6fa;color:#334155}
html[data-theme="light"] #instrGuideRoot .client-tab.active{background:rgba(16,185,129,0.12);color:#047857}
html[data-theme="light"] #instrGuideRoot .client-tab .tab-hint{color:#64748b !important}
html[data-theme="light"] #instrGuideRoot .client-tab.active .tab-hint{color:#047857 !important}
html[data-theme="light"] #instrGuideRoot .guide-btn,
html[data-theme="light"] #instrEmptyGate .btn,
html[data-theme="light"] #personalCodeOverlay .sub-code-btn{
  background:#ffffff !important; background-image:none !important; color:#10151c !important; border:1px solid rgba(16,24,40,0.12) !important;
  box-shadow:0 3px 12px rgba(16,24,40,0.08) !important;
}
html[data-theme="light"] #instrGuideRoot .guide-btn.happ{color:#c2410c !important; border-color:rgba(234,88,12,0.35) !important}
html[data-theme="light"] #instrGuideRoot .guide-btn.incy{color:#1d4ed8 !important; border-color:rgba(59,130,246,0.35) !important}
html[data-theme="light"] #instrGuideRoot .guide-btn.secondary,
html[data-theme="light"] #instrEmptyGate .btn.secondary{color:#47515e !important}
html[data-theme="light"]{
--accent:#059669;--accent-dark:#047857;--accent-glow:rgba(16,185,129,0.30);
--bg-primary:#eef1f6;--bg-secondary:#ffffff;--bg-glass:rgba(255,255,255,0.75);
--bg-card:rgba(255,255,255,0.9);--border-subtle:rgba(16,24,40,0.10);
--border-strong:rgba(16,185,129,0.38);--text-primary:#131a22;
--text-secondary:#47515e;--text-muted:#6b7480;color-scheme:light;background:#eef1f6;
}
html[data-theme="light"] body{
  background:
    linear-gradient(rgba(16,24,40,0.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(16,24,40,0.05) 1px,transparent 1px),
    radial-gradient(ellipse 90% 70% at 50% 0%,#eff4fb 0%,#e6ecf4 58%,#dfe6ef 100%) !important;
  background-size:36px 36px,36px 36px,100% 100% !important;
  background-attachment:fixed !important;
  color:var(--text-primary) !important;
}
html[data-theme="light"] #bgCanvas{opacity:.9}
html[data-theme="light"] #logoBgCanvas{opacity:.7}
/* Логотип на светлой теме: зелёное свечение + рамка, анимация как на тёмной */
html[data-theme="light"] .logo-icon{
  background:#ffffff !important;
  border:1.5px solid rgba(16,185,129,0.45) !important;
  animation:pulseLightLogo 2s ease-in-out infinite !important;
}
html[data-theme="light"] .logo-icon img,
html[data-theme="light"] .logo-icon .stek-brand-logo{
  border-radius:50%;
  background:transparent;
  box-shadow:none;
  opacity:0.88;
  filter:brightness(1.55) contrast(0.72) saturate(0.92);
}
@keyframes pulseLightLogo{
  0%,100%{transform:scale(1);box-shadow:0 0 18px rgba(16,185,129,0.32),0 0 0 3px rgba(16,185,129,0.12),inset 0 0 12px rgba(16,185,129,0.08)}
  50%{transform:scale(1.06);box-shadow:0 0 28px rgba(16,185,129,0.48),0 0 0 5px rgba(16,185,129,0.18),inset 0 0 14px rgba(16,185,129,0.12)}
}
html[data-theme="light"] ::-webkit-scrollbar-track{background:rgba(16,24,40,0.05)}
html[data-theme="light"] ::-webkit-scrollbar-thumb{background:rgba(16,185,129,0.30)}
html[data-theme="light"] .ip-info-bar{color:rgba(20,26,38,0.5) !important}
html[data-theme="light"] .sidebar button:hover{background:rgba(16,24,40,0.05) !important}
html[data-theme="light"] .sidebar button svg{fill:#7a8494}
html[data-theme="light"] .mobile-nav{background:rgba(255,255,255,0.98) !important;border-top-color:rgba(16,24,40,0.10) !important;box-shadow:0 -4px 20px rgba(16,24,40,0.08) !important}
html[data-theme="light"] .mobile-nav button{color:#5a6474;text-shadow:none}
html[data-theme="light"] .mobile-nav button svg{filter:none}
html[data-theme="light"] .mobile-nav button.active{color:var(--accent)}
html[data-theme="light"] .mobile-nav button.active svg{filter:drop-shadow(0 0 4px rgba(16,185,129,0.35))}
/* surfaces -> white cards */

html[data-theme="light"] .guest-credentials-modal {
  background: #fff7f7 !important;
  border: 2px solid #e11d48 !important;
  box-shadow: 0 10px 32px rgba(225, 29, 72, 0.16) !important;
  animation: modalSlideUp 0.45s cubic-bezier(0.4,0,0.2,1) !important;
}
html[data-theme="light"] .guest-warning-title {
  color: #b91c1c !important;
  text-shadow: none !important;
}
html[data-theme="light"] .guest-warning-text {
  color: #334155 !important;
}
html[data-theme="light"] .guest-warning-text b {
  color: #b91c1c !important;
}
html[data-theme="light"] .guest-credentials {
  background: #f1f5f9 !important;
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
}
html[data-theme="light"] .guest-cred-label {
  color: #64748b !important;
}
html[data-theme="light"] .guest-cred-value,
html[data-theme="light"] .guest-cred-code {
  color: #065f46 !important;
  background: rgba(16, 185, 129, 0.14) !important;
}
html[data-theme="light"] .cred-ack-label {
  background: #f0fbf6 !important;
  border: 1px solid rgba(16, 185, 129, 0.28) !important;
  color: #065f46 !important;
}
html[data-theme="light"] .guest-credentials-modal .btn-guest-continue {
  background: #fff7ed !important;
  color: #c2410c !important;
  border: 1px solid rgba(234, 88, 12, 0.45) !important;
}
html[data-theme="light"] .guest-credentials-modal .btn-guest-continue:disabled,
html[data-theme="light"] #codeLoginContinueBtn:disabled {
  opacity: 0.6 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}
#codeLoginContinueBtn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

html[data-theme="light"] :is(.feed-card,.guide-section,.guide-hint,.guide-sub-block,.best-server-banner,.server-card,.server-info,.register-modal,.ticket-modal,.admin-modal,.spam-modal,.menu-modal,.guest-modal,.agreement-modal,.auth-required-modal,.chat-window,.toast,.modal-content,.compact-user-card,.user-menu,.user-menu-item,.free-promo,.card,.tariff-card,.config-card,.stat-card,.wallet-info,.rw-panel,.reward-panel,.captcha-modal,.ticket-card,.login-card,.input-wrapper){background:#ffffff !important;border:1px solid rgba(16,24,40,0.10) !important;box-shadow:0 6px 22px rgba(16,24,40,0.07) !important}
/* inner dark boxes -> light grey */
html[data-theme="light"] :is(.credentials,.ticket-detail,.chat-messages,.config-instructions,.chat-input-area){background:#f1f4f8 !important;color:#141a21 !important;border-color:rgba(16,24,40,0.12) !important}
/* inputs */
html[data-theme="light"] input,html[data-theme="light"] textarea,html[data-theme="light"] select,html[data-theme="light"] .guide-link-input{background:#f3f5f9 !important;color:#141a21 !important;border-color:rgba(16,24,40,0.14) !important}
html[data-theme="light"] input::placeholder,html[data-theme="light"] textarea::placeholder{color:#9aa3b0 !important}
/* /popular: поле персонального кода — без тёмной подложки под светлым input */
html[data-theme="light"] #personalCodeOverlay .input-wrapper{
  background:#ffffff !important;
  border:1px solid rgba(16,24,40,0.14) !important;
  box-shadow:0 2px 10px rgba(16,24,40,0.06) !important;
  padding:0 !important;
}
html[data-theme="light"] #personalCodeOverlay .input-wrapper:focus-within{
  border-color:#10b981 !important;
  box-shadow:0 0 0 2px rgba(16,185,129,0.22) !important;
}
html[data-theme="light"] #personalCodeOverlay .input-wrapper input{
  background:transparent !important;
  color:#10151c !important;
  -webkit-text-fill-color:#10151c !important;
  border-radius:14px !important;
}
html[data-theme="light"] #personalCodeOverlay .input-wrapper input::placeholder{
  color:#9aa3b0 !important;
  -webkit-text-fill-color:#9aa3b0 !important;
  opacity:1;
}
/* overlays behind modals */
html[data-theme="light"] :is(.register-overlay,.ticket-overlay,.admin-overlay,.spam-overlay,.menu-overlay,.guest-overlay,.agreement-overlay){background:rgba(18,24,36,0.45) !important}
/* secondary buttons */
html[data-theme="light"] :is(.btn.secondary,.retro-btn.secondary,.btn-small.secondary,.register-modal button.secondary,.ticket-modal button.secondary,.admin-modal button.secondary,.spam-modal button.secondary,.menu-modal button.secondary,.guest-modal button.secondary){background:rgba(16,185,129,0.10) !important;color:#047857 !important;border:1px solid rgba(16,185,129,0.28) !important}
html[data-theme="light"] .notification-banner .n-close{color:rgba(20,26,38,0.45) !important}
/* Уведомления на белой теме — мягкие цвета по типу */
html[data-theme="light"] .notification-banner{
  background:#ffffff !important;
  border:1px solid rgba(16,24,40,0.12) !important;
  box-shadow:0 8px 26px rgba(16,24,40,0.10) !important;
}
html[data-theme="light"] .notification-banner .n-text{color:#4b5563 !important}
html[data-theme="light"] .notification-banner.nb-info,
html[data-theme="light"] .notification-banner[data-type="info"]{
  background:#f0f9ff !important;border-color:#7dd3fc !important;
  box-shadow:0 8px 24px rgba(14,165,233,0.10) !important;
}
html[data-theme="light"] .notification-banner.nb-info .n-title,
html[data-theme="light"] .notification-banner[data-type="info"] .n-title{color:#0369a1 !important}
html[data-theme="light"] .notification-banner.nb-success,
html[data-theme="light"] .notification-banner[data-type="success"]{
  background:#f0fdf4 !important;border-color:#86efac !important;
  box-shadow:0 8px 24px rgba(16,185,129,0.10) !important;
}
html[data-theme="light"] .notification-banner.nb-success .n-title,
html[data-theme="light"] .notification-banner[data-type="success"] .n-title{color:#047857 !important}
html[data-theme="light"] .notification-banner.nb-warning,
html[data-theme="light"] .notification-banner[data-type="warning"]{
  background:#fffbeb !important;border-color:#fcd34d !important;
  box-shadow:0 8px 24px rgba(245,158,11,0.12) !important;
}
html[data-theme="light"] .notification-banner.nb-warning .n-title,
html[data-theme="light"] .notification-banner[data-type="warning"] .n-title{color:#b45309 !important}
html[data-theme="light"] .notification-banner.nb-danger,
html[data-theme="light"] .notification-banner[data-type="danger"]{
  background:#fff5f5 !important;border-color:#f0a8a8 !important;
  box-shadow:0 8px 26px rgba(185,28,28,0.10),0 0 0 1px rgba(220,38,38,0.06) !important;
}
html[data-theme="light"] .notification-banner.nb-danger .n-title,
html[data-theme="light"] .notification-banner[data-type="danger"] .n-title{color:#b91c1c !important}
html[data-theme="light"] .notification-banner.nb-danger .n-text,
html[data-theme="light"] .notification-banner[data-type="danger"] .n-text{color:#7f1d1d !important}
html[data-theme="light"] .notification-banner.nb-danger .n-close,
html[data-theme="light"] .notification-banner[data-type="danger"] .n-close{color:rgba(185,28,28,0.45) !important}
/* text: flip light text to dark inside light surfaces (accents/buttons/badges kept) */
html[data-theme="light"] :where(.main,.center-block,.feed-card,.guide-section,.guide-hint,.guide-sub-block,.card,.modal-content,.register-modal,.ticket-modal,.admin-modal,.spam-modal,.menu-modal,.guest-modal,.agreement-modal,.auth-required-modal,.chat-window,.toast,.best-server-banner,.server-info,.server-card,.compact-user-card,.user-menu,.user-menu-item,.free-promo,.visitors-table,.tariff-card,.config-card,.stat-card,.wallet-info,.rw-panel,.reward-panel,.captcha-modal,.ticket-card,.login-card) :where(p,span,div,li,td,th,label,h1,h2,h3,h4,h5,h6,a,strong,b,em,small,figcaption,dt,dd):not(button):not([class*="btn"]):not([class*="badge"]):not([class*="pill"]):not([class*="chip"]):not([class*="tag"]):not([class*="dot"]):not([class*="tab"]):not([class*="status"]):not(.type-text):not(.type-badge){color:#20293a !important}
html[data-theme="light"] .login-card .login-sub,html[data-theme="light"] .user-menu-item .item-desc{color:#5b6470 !important}
/* === light theme: menus, close/back, buttons, tariff, referral, offer === */
html[data-theme="light"]{--stek-btn-bg:#ffffff;--stek-btn-border:rgba(16,24,40,0.12);--stek-btn-text:#10151c;}
html[data-theme="light"] :is(.btn,.btn-small,.retro-btn,.free-promo-btn,.quick-extend-btn,.menu-footer-btn,.ticket-btn,.back-btn,.currency-btn):hover{background:#f4fbf8 !important;border-color:rgba(16,185,129,0.45) !important;box-shadow:0 6px 18px rgba(16,24,40,0.10) !important;color:#10151c !important}
html[data-theme="light"] :is(.modal-close-btn,.modal-back-btn){background:rgba(16,24,40,0.06) !important;color:#20293a !important;border-color:rgba(16,24,40,0.16) !important}
html[data-theme="light"] :is(.modal-close-btn,.modal-back-btn):hover{background:rgba(16,24,40,0.12) !important;border-color:rgba(16,185,129,0.4) !important}
html[data-theme="light"] :is(.offer-block,.referral-block){background:#ffffff !important;border:1px solid rgba(16,24,40,0.10) !important;box-shadow:0 6px 22px rgba(16,24,40,0.07) !important}
html[data-theme="light"] :is(.offer-block,.referral-block) :where(p,span,div,a,b,strong,h3,h4,li){color:#20293a !important}
html[data-theme="light"] .referral-title{color:#10151c !important}
html[data-theme="light"] :is(.tariff-card.selected,.tariff-card:hover,.tc.sel,.tc.selected,.gift-tariff-btn.sel,.gift-pay-btn.sel){background:#eafaf2 !important;border-color:#10b981 !important;box-shadow:0 0 0 2px rgba(16,185,129,0.5),0 6px 18px rgba(16,185,129,0.18) !important}
html[data-theme="light"] :is(#userMenuModal,.menu-modal) button{background:#f4f6fa !important;border:1px solid rgba(16,24,40,0.10) !important;color:#20293a !important}
html[data-theme="light"] :is(#userMenuModal,.menu-modal) button:hover{background:#eafaf2 !important;border-color:rgba(16,185,129,0.4) !important}
html[data-theme="light"] :is(#userMenuModal,.menu-modal) button *{color:#20293a !important}
html[data-theme="light"] #userMenuModal [style*="#fff"],html[data-theme="light"] #userMenuModal [style*="#7a9f7a"]{color:#20293a !important}
/* modal buttons (dark glass -> light) + modal header text */
html[data-theme="light"] :is(.admin-modal,.ticket-modal,.register-modal,.menu-modal,.guest-modal,.agreement-modal,.spam-modal) button:not(.modal-close-btn):not(.modal-back-btn):not(.menu-item):not(.danger):not(.warning):not(.pass-eye){background:#f4f6fa !important;color:#10151c !important;border:1px solid rgba(16,24,40,0.14) !important;text-shadow:none !important}
html[data-theme="light"] :is(.admin-modal,.ticket-modal,.register-modal,.menu-modal,.guest-modal,.agreement-modal,.spam-modal) button:not(.modal-close-btn):not(.modal-back-btn):not(.menu-item):not(.danger):not(.warning):not(.pass-eye):hover{background:#eafaf2 !important;border-color:rgba(16,185,129,0.4) !important;color:#10151c !important}
html[data-theme="light"] #paymentOverlay .promo-code-input-row button{background:#f4f6fa !important;color:#10151c !important;border:1px solid rgba(16,24,40,0.14) !important}
html[data-theme="light"] :is(.ticket-modal,.ticket-overlay) .ticket-btn:not(.danger):not(.warning),html[data-theme="light"] #userTicketModal .ticket-btn:not(.danger):not(.warning),html[data-theme="light"] #adminTicketsModal .ticket-btn:not(.danger):not(.warning){background:#f4f6fa !important;color:#10151c !important;border:1px solid rgba(16,24,40,0.14) !important}
html[data-theme="light"] #userTicketModal .ticket-btn:not(.danger):not(.warning):hover,html[data-theme="light"] #adminTicketsModal .ticket-btn:not(.danger):not(.warning):hover{background:#eafaf2 !important;border-color:rgba(16,185,129,0.4) !important;color:#10151c !important}
html[data-theme="light"] .modal-header-row{border-bottom-color:rgba(16,24,40,0.10) !important}
html[data-theme="light"] .modal-header-row h3{color:#10151c !important}
/* light: user/admin menu containers (override dark id-specific bg) */
html[data-theme="light"] #userMenuModal.menu-modal,html[data-theme="light"] #adminPanelModal.admin-modal{background:#ffffff !important;border:1px solid rgba(16,24,40,0.10) !important;box-shadow:0 12px 40px rgba(16,24,40,0.12) !important}
/* light: back/close arrows — high specificity */
html[data-theme="light"] :is(.admin-modal,.ticket-modal,.agreement-modal,.register-modal,.guest-modal,.spam-modal,.menu-modal) .modal-top-actions :is(.modal-back-btn,.modal-close-btn),html[data-theme="light"] .modal-header-row :is(.modal-back-btn,.modal-close-btn){background:rgba(16,24,40,0.08) !important;color:#10151c !important;border:1px solid rgba(16,24,40,0.22) !important;box-shadow:0 1px 4px rgba(16,24,40,0.08) !important}
html[data-theme="light"] :is(.admin-modal,.ticket-modal,.agreement-modal,.register-modal,.guest-modal,.spam-modal,.menu-modal) .modal-top-actions :is(.modal-back-btn,.modal-close-btn):hover,html[data-theme="light"] .modal-header-row :is(.modal-back-btn,.modal-close-btn):hover{background:rgba(16,24,40,0.14) !important;border-color:rgba(16,185,129,0.45) !important;color:#10151c !important}
/* light: user menu grid buttons */
html[data-theme="light"] #userMenuModal.menu-modal button,html[data-theme="light"] #userMenuModal.menu-modal button[style]{background:#f4f6fa !important;border:1px solid rgba(16,24,40,0.10) !important;color:#20293a !important;box-shadow:none !important}
html[data-theme="light"] #userMenuModal.menu-modal button:hover{background:#eafaf2 !important;border-color:rgba(16,185,129,0.4) !important}
html[data-theme="light"] #userMenuModal.menu-modal button span[style*="color:#fff"],html[data-theme="light"] #userMenuModal.menu-modal button span[style*="color: #fff"]{color:#20293a !important}
html[data-theme="light"] #userMenuModal.menu-modal button span[style*="#7a9f7a"]{color:#6b7480 !important}
html[data-theme="light"] #userMenuModal [style*="color:#fff"],html[data-theme="light"] #userMenuModal [style*="color: #fff"],html[data-theme="light"] #userMenuModal [style*="#7a9f7a"]{color:#20293a !important}
html[data-theme="light"] #userMenuModal [style*="rgba(255,255,255,0.07)"]{border-bottom-color:rgba(16,24,40,0.10) !important}
html[data-theme="light"] #userBalanceDisplay,html[data-theme="light"] #userBalanceDisplay span{color:#059669 !important}
/* light: admin panel */
html[data-theme="light"] #adminPanelModal [style*="color:#fff"],html[data-theme="light"] #adminPanelModal [style*="color: #fff"],html[data-theme="light"] #adminPanelModal [style*="#8aad8a"],html[data-theme="light"] #adminPanelModal [style*="#b0e0b0"],html[data-theme="light"] #adminPanelModal [style*="color:#555"],html[data-theme="light"] #adminPanelModal [style*="color: #555"]{color:#20293a !important}
html[data-theme="light"] #adminPanelModal [style*="#ffaa00"]{color:#b45309 !important}
html[data-theme="light"] #adminPanelModal .dash-label{color:#20293a !important}
html[data-theme="light"] #adminPanelModal .admin-dashboard-item{background:#f4f6fa !important;border:1px solid rgba(16,24,40,0.10) !important}
html[data-theme="light"] #adminPanelModal .admin-dashboard-item:hover{background:#eafaf2 !important;border-color:rgba(16,185,129,0.35) !important}
html[data-theme="light"] #adminPanelModal #notificationsControlSection,html[data-theme="light"] #adminPanelModal [style*="rgba(0,255,136,0.03)"]{background:rgba(16,185,129,0.06) !important;border-color:rgba(16,185,129,0.22) !important}
/* light: news cards -> white */
html[data-theme="light"] .news-card{background:rgba(255,255,255,0.25) !important;border:1px solid rgba(16,24,40,0.07) !important;box-shadow:none !important;backdrop-filter:blur(4px) !important;-webkit-backdrop-filter:blur(4px) !important}
html[data-theme="light"] .news-card .news-headline{color:#10151c !important}
html[data-theme="light"] .news-card .news-text{color:#4b545f !important}
html[data-theme="light"] .news-card .news-date{color:#6b7480 !important}
/* light: globe map popup -> readable */
html[data-theme="light"] .globe-popup{background:rgba(255,255,255,0.97) !important;border:1px solid rgba(16,185,129,0.35) !important;box-shadow:0 8px 26px rgba(16,24,40,0.16),0 0 14px rgba(16,185,129,0.10) !important}
html[data-theme="light"] .globe-popup::after{background:rgba(255,255,255,0.97) !important;border-right-color:rgba(16,185,129,0.35) !important;border-bottom-color:rgba(16,185,129,0.35) !important}
html[data-theme="light"] .globe-popup .gp-name{color:#10151c !important}
html[data-theme="light"] .globe-popup .gp-meta{color:#5b6470 !important}
html[data-theme="light"] .globe-popup .gp-status.online{color:#059669 !important;background:rgba(16,185,129,0.10) !important}
html[data-theme="light"] .globe-popup .gp-status.offline{color:#dc2626 !important;background:rgba(220,38,38,0.08) !important}
/* business slot/device buttons — high contrast on light theme */
html[data-theme="light"] .business-slot-btn,
html[data-theme="light"] #paymentOverlay .business-slot-btn,
html[data-theme="light"] #businessPricingCard .business-slot-btn,
html[data-theme="light"] #bizCreateDevicesToggle .business-slot-btn{
  background:#e8edf3 !important;
  border:1px solid rgba(16,24,40,0.18) !important;
  color:#1a2330 !important;
  opacity:1 !important;
  box-shadow:none !important;
}
html[data-theme="light"] .business-slot-btn.active,
html[data-theme="light"] #paymentOverlay .business-slot-btn.active,
html[data-theme="light"] #businessPricingCard .business-slot-btn.active,
html[data-theme="light"] #bizCreateDevicesToggle .business-slot-btn.active{
  background:#bbf7d0 !important;
  border:2px solid #059669 !important;
  color:#064e3b !important;
  box-shadow:0 0 0 2px rgba(5,150,105,0.28) !important;
  opacity:1 !important;
}
html[data-theme="light"] #businessPricingCard .business-slot-btn.active::before{color:#064e3b}
html[data-theme="light"] #paymentOverlay .biz-checkout-title{color:#047857 !important}
html[data-theme="light"] #paymentOverlay .biz-checkout-desc{
  background:#f1f4f8 !important;color:#3d4654 !important;border-color:rgba(16,24,40,0.12) !important;
}
html[data-theme="light"] #paymentOverlay .biz-checkout-desc b{color:#10151c !important}
html[data-theme="light"] #paymentOverlay .biz-checkout-summary-label{color:#92400e !important}
html[data-theme="light"] #paymentOverlay .biz-checkout-summary-main{color:#b45309 !important}
html[data-theme="light"] #paymentOverlay .biz-checkout-summary-sub{color:#047857 !important}
/* === full light theme polish: map, nav, pills, markers === */
html[data-theme="light"] .sidebar button svg{fill:#334155 !important}
html[data-theme="light"] .sidebar button.active{background:rgba(16,185,129,0.14) !important}
html[data-theme="light"] .sidebar button.active svg{fill:#059669 !important;filter:drop-shadow(0 0 6px rgba(5,150,105,0.35))}
html[data-theme="light"] .sidebar button:hover{background:rgba(16,185,129,0.10) !important}
html[data-theme="light"] .mobile-nav button{color:#334155 !important}
html[data-theme="light"] .mobile-nav button.active{color:#059669 !important}
html[data-theme="light"] .trust-pill{
  background:rgba(16,185,129,0.12) !important;border:1px solid rgba(5,150,105,0.40) !important;
  color:#065f46 !important;
}
html[data-theme="light"] .trust-pill svg{color:#059669 !important}
html[data-theme="light"] .action-btn{
  background:#ffffff !important;color:#10151c !important;
  border:1px solid rgba(16,24,40,0.12) !important;
  box-shadow:0 4px 16px rgba(16,24,40,0.08) !important;
}
html[data-theme="light"] .action-btn:hover{
  border-color:rgba(5,150,105,0.45) !important;background:#f0fdf6 !important;color:#10151c !important;
}
html[data-theme="light"] .action-btn .icon{color:#059669 !important}
html[data-theme="light"] .feature-icon{
  background:rgba(16,185,129,0.16) !important;color:#047857 !important;filter:none !important;
}
html[data-theme="light"] .map-wrapper{
  border:1px solid rgba(16,24,40,0.12) !important;
  box-shadow:0 12px 36px rgba(16,24,40,0.12),0 0 0 1px rgba(16,185,129,0.12) !important;
  background:#f8fafc !important;
}
html[data-theme="light"] .custom-marker,
html[data-theme="light"] .map-marker{
  background:#ffffff !important;color:#0f172a !important;border-color:#059669 !important;
  box-shadow:0 4px 14px rgba(16,24,40,0.18),0 0 14px rgba(5,150,105,0.35) !important;
  -webkit-text-fill-color:#0f172a;text-shadow:0 0 1px rgba(255,255,255,0.9);
}
html[data-theme="light"] .custom-marker.offline,
html[data-theme="light"] .map-marker.offline{
  border-color:#dc2626 !important;
  box-shadow:0 4px 14px rgba(220,38,38,0.25),0 0 12px rgba(220,38,38,0.3) !important;
}
html[data-theme="light"] .leaflet-control-zoom a{
  background:#ffffff !important;color:#0f172a !important;
  border-color:rgba(16,24,40,0.16) !important;
  box-shadow:0 2px 8px rgba(16,24,40,0.12) !important;
}
html[data-theme="light"] .leaflet-control-zoom a:hover{
  background:#ecfdf5 !important;color:#047857 !important;border-color:rgba(5,150,105,0.4) !important;
}
html[data-theme="light"] .server-info .country{color:#10151c !important}
html[data-theme="light"] .leaflet-popup-content [style*="color:#fff"],
html[data-theme="light"] .leaflet-popup-content [style*="color: #fff"]{color:#10151c !important}
html[data-theme="light"] #businessPricingCard button.business-slot-btn,
html[data-theme="light"] #businessPricingCard button.business-slot-btn[data-slots],
html[data-theme="light"] #businessPricingCard button.business-slot-btn[data-devices]{
  background:#e8edf3 !important;border:1px solid rgba(16,24,40,0.18) !important;
  color:#1a2330 !important;-webkit-text-fill-color:#1a2330 !important;opacity:1 !important;
}
html[data-theme="light"] #businessPricingCard button.business-slot-btn.active,
html[data-theme="light"] #businessPricingCard button.business-slot-btn.active[data-slots],
html[data-theme="light"] #businessPricingCard button.business-slot-btn.active[data-devices]{
  background:#86efac !important;border:2px solid #047857 !important;
  color:#064e3b !important;-webkit-text-fill-color:#064e3b !important;
  box-shadow:0 0 0 2px rgba(5,150,105,0.28) !important;opacity:1 !important;font-weight:700 !important;
}
html[data-theme="light"] #businessPricingCard .business-slot-btn.active::before{color:#064e3b !important;-webkit-text-fill-color:#064e3b !important}
html[data-theme="light"] .ip-info-bar{color:#475569 !important}

/* === MOBILE MENU / OVERLAY FIX (Android Chrome) === */
.register-overlay, .ticket-overlay, .admin-overlay, .spam-overlay,
.menu-overlay, .guest-overlay, .agreement-overlay, .maintenance-overlay {
  display: none !important;
  pointer-events: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.register-overlay.active, .ticket-overlay.active, .admin-overlay.active,
.spam-overlay.active, .menu-overlay.active, .guest-overlay.active,
.agreement-overlay.active, .maintenance-overlay.active {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  -webkit-backdrop-filter: blur(22px) saturate(110%) !important;
  backdrop-filter: blur(22px) saturate(110%) !important;
}
.mobile-nav {
  z-index: 1500 !important;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.register-overlay.active, .ticket-overlay.active, .admin-overlay.active,
.spam-overlay.active, .menu-overlay.active, .guest-overlay.active,
.agreement-overlay.active, .maintenance-overlay.active {
  z-index: 10000 !important;
}
#personalCodeOverlay.guest-overlay.active { z-index: 10050 !important; }
.mobile-nav button {
  min-height: 48px !important;
  touch-action: manipulation;
  position: relative;
  z-index: 1;
  pointer-events: auto !important;
}
#userMenuModal.menu-modal button {
  width: 100% !important;
  min-height: 48px !important;
  padding: 12px 10px !important;
  box-sizing: border-box !important;
  touch-action: manipulation;
}
body.modal-open .chat-fab,
body.modal-open .tg-bot-fab,
body.modal-open .pwa-install-banner {
  pointer-events: none !important;
  visibility: hidden !important;
}
body.modal-open {
  overflow: hidden !important;
  overscroll-behavior: none;
}
@media (max-width: 768px) {
  .menu-modal, #userMenuModal.menu-modal {
    max-height: min(78vh, 640px) !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  .center-block, .main {
    padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important;
  }
}
/* Popular light theme: instruction guides readable (#instrConfigsRoot) */
html[data-theme="light"] #instrConfigsRoot .sub-guide {
  background: #ffffff !important;
  border-color: rgba(16,24,40,0.1) !important;
  box-shadow: 0 8px 24px rgba(16,24,40,0.08) !important;
}
html[data-theme="light"] #instrConfigsRoot .sub-guide-title { color: #047857 !important; }
html[data-theme="light"] #instrConfigsRoot .sg-for-nick,
html[data-theme="light"] #configsOverlay #userConfigsList .sg-for-nick {
  color: #3f5a4a !important;
}
html[data-theme="light"] #instrConfigsRoot .sg-for-nick-name,
html[data-theme="light"] #instrConfigsRoot .sg-for-nick b,
html[data-theme="light"] #configsOverlay #userConfigsList .sg-for-nick-name,
html[data-theme="light"] #configsOverlay #userConfigsList .sg-for-nick b {
  color: #0f172a !important;
}
html[data-theme="light"] #instrConfigsRoot .sg-code-hint,
html[data-theme="light"] #instrConfigsRoot .sub-guide-sub,
html[data-theme="light"] #instrConfigsRoot .switcher-note,
html[data-theme="light"] #instrConfigsRoot .guide-step-desc,
html[data-theme="light"] #instrConfigsRoot .client-tab .tab-hint {
  color: #5b6470 !important;
}
html[data-theme="light"] #instrConfigsRoot .guide-step-title { color: #10151c !important; }
html[data-theme="light"] #instrConfigsRoot .guide-step-num {
  color: #047857 !important;
  background: rgba(16,185,129,0.12) !important;
  border-color: rgba(16,185,129,0.4) !important;
}
html[data-theme="light"] #instrConfigsRoot .client-tab {
  background: #f1f5f9 !important;
  color: #334155 !important;
  border-color: rgba(16,24,40,0.12) !important;
}
html[data-theme="light"] #instrConfigsRoot .client-tab.active {
  background: rgba(16,185,129,0.14) !important;
  color: #065f46 !important;
  border-color: rgba(16,185,129,0.45) !important;
}
html[data-theme="light"] #instrConfigsRoot .client-tab.active .tab-hint { color: #047857 !important; }
html[data-theme="light"] #instrConfigsRoot .guide-btn,
html[data-theme="light"] #instrConfigsRoot .guide-btn.secondary,
html[data-theme="light"] #instrConfigsRoot .guide-btn.happ,
html[data-theme="light"] #instrConfigsRoot .guide-btn.incy {
  background: #ffffff !important;
  background-image: none !important;
  color: #0f172a !important;
  border: 1px solid rgba(16,24,40,0.14) !important;
  box-shadow: 0 3px 12px rgba(16,24,40,0.08) !important;
}
html[data-theme="light"] #instrConfigsRoot .guide-btn.happ {
  background: #ecfdf5 !important;
  color: #065f46 !important;
  border-color: rgba(16,185,129,0.4) !important;
}
html[data-theme="light"] #instrConfigsRoot .guide-btn.incy {
  background: #eff6ff !important;
  color: #1e40af !important;
  border-color: rgba(59,130,246,0.4) !important;
}
html[data-theme="light"] #instrConfigsRoot .guide-btn svg {
  color: inherit !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}
html[data-theme="light"] #configsOverlay #userConfigsList .sub-guide--compact .guide-btn,
html[data-theme="light"] #configsOverlay #userConfigsList .sub-guide--compact .client-tab {
  background: #ffffff !important;
  color: #0f172a !important;
  border-color: rgba(16,24,40,0.14) !important;
}
html[data-theme="light"] #configsOverlay #userConfigsList .sub-guide--compact .client-tab.active {
  background: rgba(16,185,129,0.12) !important;
  color: #065f46 !important;
}
html[data-theme="light"] #configsOverlay #userConfigsList .sub-guide--compact .guide-btn.happ {
  background: #ecfdf5 !important;
  color: #065f46 !important;
}
html[data-theme="light"] #configsOverlay #userConfigsList .sub-guide--compact .guide-btn.incy {
  background: #eff6ff !important;
  color: #1e40af !important;
}
/* === END MOBILE FIX === */

/* === FLAT ON SITE BG: no card chrome (news keeps cards) === */
#configsOverlay #userConfigsList .cfg-box,
#instrConfigsRoot .cfg-box,
#businessOverlay #businessPanelContent .cfg-box,
.cfg-box,
#configsOverlay #userConfigsList .cfg-box--locked,
#instrConfigsRoot .cfg-box--locked,
#businessOverlay #businessPanelContent .cfg-box--locked,
.cfg-box--locked,
#configsOverlay #userConfigsList .sub-guide,
#configsOverlay #userConfigsList .sub-guide--compact,
#instrConfigsRoot .sub-guide,
.sub-guide,
.sub-guide--compact,
.guide-section,
.guide-hint,
.guide-sub-block,
.config-card,
.server-card,
#configsOverlay #userConfigsList .sub-info-item,
#instrConfigsRoot .sub-info-item,
#businessOverlay #businessPanelContent .sub-info-item,
.sub-info-item,
.srv-row,
.tg-profile-card,
.balance-card {
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  outline: none !important;
}
.server-card::before,
.server-card::after,
.guide-section::before,
.guide-section::after,
.feed-card::before,
.feed-card::after {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
}
.server-card:hover,
.server-card.active-card,
.srv-row:hover,
.cfg-box:hover {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  transform: none !important;
}
#configsOverlay #userConfigsList .sub-info-grid.expired .sub-info-item,
#instrConfigsRoot .sub-info-grid.expired .sub-info-item,
#businessOverlay #businessPanelContent .sub-info-grid.expired .sub-info-item,
.sub-info-grid.expired .sub-info-item {
  background: transparent !important;
  box-shadow: none !important;
  /* keep cross visible: do not wipe borders globally; cells use border:none in cross block */
  border-color: transparent !important;
}
#configsOverlay #userConfigsList .sub-info-grid.expired::before,
#instrConfigsRoot .sub-info-grid.expired::before,
#businessOverlay #businessPanelContent .sub-info-grid.expired::before,
.sub-info-grid.expired::before,
#configsOverlay #userConfigsList .sub-info-grid.expired::after,
#instrConfigsRoot .sub-info-grid.expired::after,
#businessOverlay #businessPanelContent .sub-info-grid.expired::after,
.sub-info-grid.expired::after {
  content: '' !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
}
#configsOverlay #userConfigsList .cfg-dim::after,
#instrConfigsRoot .cfg-dim::after,
#businessOverlay #businessPanelContent .cfg-dim::after,
.cfg-dim::after,
#configsOverlay #userConfigsList .sub-info-item.cfg-frost::after,
#instrConfigsRoot .sub-info-item.cfg-frost::after,
#businessOverlay #businessPanelContent .sub-info-item.cfg-frost::after,
.sub-info-item.cfg-frost::after {
  background: transparent !important;
  box-shadow: none !important;
}
.config-card.active,
.config-card.inactive {
  border: none !important;
  border-left: none !important;
  background: transparent !important;
}
.server-status {
  background: transparent !important;
  border: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Account bar on /popular — normal card, login centered */
.instr-profile-bar {
  background: rgba(22, 24, 30, 0.72) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border-radius: 14px !important;
  margin: 0 0 16px !important;
  padding: 12px 14px !important;
  position: relative !important;
}
.instr-profile-bar::before {
  display: block !important;
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 14% !important;
  right: 14% !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(16,185,129,0.55), transparent) !important;
  opacity: 0.7 !important;
  pointer-events: none !important;
  z-index: 1 !important;
}
.instr-profile-bar::after {
  display: none !important;
  content: none !important;
}
.instr-profile-row {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center !important;
  column-gap: 10px !important;
  width: 100% !important;
  position: relative !important;
  z-index: 2 !important;
}
.instr-profile-avatar {
  grid-column: 1 !important;
  grid-row: 1 !important;
  justify-self: start !important;
  align-self: center !important;
  z-index: 2 !important;
}
.instr-profile-left {
  grid-column: 1 !important;
  grid-row: 1 !important;
  justify-self: start !important;
  margin-left: 52px !important;
  max-width: calc(100% - 52px) !important;
  flex: none !important;
}
@media (max-width: 768px) {
  .instr-profile-left {
    margin-left: 46px !important;
    max-width: calc(100% - 46px) !important;
  }
}
.instr-profile-login,
.instr-profile-bar .instr-profile-login {
  grid-column: 2 !important;
  grid-row: 1 !important;
  justify-self: center !important;
  align-self: center !important;
  position: relative !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  margin: 0 !important;
  background: rgba(16,185,129,0.12) !important;
  border: 1px solid rgba(16,185,129,0.4) !important;
  color: #e8fff0 !important;
  box-shadow: none !important;
  z-index: 3 !important;
}
.instr-profile-bar .instr-profile-login:hover {
  background: rgba(16,185,129,0.2) !important;
  border-color: rgba(16,185,129,0.55) !important;
}
.instr-profile-right {
  grid-column: 3 !important;
  grid-row: 1 !important;
  justify-self: end !important;
  flex: none !important;
}

/* Soft glass server cards + best-server (BG readable) */
.server-card,
.srv-row {
  background: rgba(14, 18, 24, 0.22) !important;
  background-image: linear-gradient(145deg, rgba(255,255,255,0.045) 0%, transparent 45%, rgba(16,185,129,0.035) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 16px !important;
  box-shadow:
    0 6px 22px rgba(0, 0, 0, 0.26),
    0 1px 0 rgba(255, 255, 255, 0.045) inset,
    0 0 0 1px rgba(0, 0, 0, 0.1) inset !important;
  backdrop-filter: blur(14px) saturate(135%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(135%) !important;
  outline: none !important;
  position: relative !important;
  overflow: hidden !important;
  transition: border-color .22s ease, box-shadow .22s ease, background .22s ease, transform .22s ease !important;
}
.server-card::before,
.srv-row::before {
  display: block !important;
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  opacity: 0.5 !important;
  background: radial-gradient(120% 80% at 8% 0%, rgba(16,185,129,0.08), transparent 55%) !important;
  box-shadow: none !important;
  animation: none !important;
}
.server-card::after,
.srv-row::after {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
}
.server-card:hover,
.server-card.active-card,
.srv-row:hover {
  background: rgba(18, 24, 30, 0.32) !important;
  background-image: linear-gradient(145deg, rgba(255,255,255,0.055) 0%, transparent 45%, rgba(16,185,129,0.05) 100%) !important;
  border: 1px solid rgba(16, 185, 129, 0.22) !important;
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.3),
    0 0 22px rgba(16, 185, 129, 0.07),
    0 1px 0 rgba(255, 255, 255, 0.05) inset !important;
  transform: translateY(-2px) !important;
}
.server-card.active-card {
  border-color: rgba(16, 185, 129, 0.32) !important;
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.32),
    0 0 26px rgba(16, 185, 129, 0.1),
    0 1px 0 rgba(255, 255, 255, 0.05) inset !important;
}

.best-server-banner {
  background: rgba(14, 18, 24, 0.26) !important;
  background-image: linear-gradient(120deg, rgba(16,185,129,0.1) 0%, rgba(255,255,255,0.035) 38%, transparent 100%) !important;
  border: 1px solid rgba(16, 185, 129, 0.22) !important;
  box-shadow:
    0 10px 36px rgba(0, 0, 0, 0.32),
    0 0 30px rgba(16, 185, 129, 0.1),
    0 1px 0 rgba(255, 255, 255, 0.06) inset !important;
  backdrop-filter: blur(18px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(150%) !important;
  border-radius: 20px !important;
  outline: none !important;
}
.best-server-banner::before {
  display: block !important;
  content: '' !important;
  opacity: 0.55 !important;
}
.best-server-banner:hover {
  border-color: rgba(16, 185, 129, 0.34) !important;
  box-shadow:
    0 14px 40px rgba(0, 0, 0, 0.36),
    0 0 34px rgba(16, 185, 129, 0.14),
    0 1px 0 rgba(255, 255, 255, 0.07) inset !important;
  transform: translateY(-1px) !important;
  background: rgba(16, 22, 28, 0.34) !important;
  background-image: linear-gradient(120deg, rgba(16,185,129,0.12) 0%, rgba(255,255,255,0.04) 38%, transparent 100%) !important;
}

/* Pricing cards — same soft glass as servers; hover effects kept below */
.pricing-card {
  background: rgba(14, 18, 24, 0.22) !important;
  background-image: linear-gradient(145deg, rgba(255,255,255,0.045) 0%, transparent 45%, rgba(16,185,129,0.035) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 16px !important;
  box-shadow:
    0 6px 22px rgba(0, 0, 0, 0.22),
    0 1px 0 rgba(255, 255, 255, 0.045) inset,
    0 0 0 1px rgba(0, 0, 0, 0.08) inset !important;
  backdrop-filter: blur(14px) saturate(135%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(135%) !important;
}
.pricing-card.popular {
  background: rgba(14, 18, 24, 0.26) !important;
  background-image: linear-gradient(145deg, rgba(16,185,129,0.08) 0%, transparent 50%, rgba(255,255,255,0.03) 100%) !important;
  border: 1px solid rgba(16, 185, 129, 0.42) !important;
  box-shadow:
    0 6px 22px rgba(0, 0, 0, 0.24),
    0 0 18px rgba(16, 185, 129, 0.1),
    0 1px 0 rgba(255, 255, 255, 0.05) inset !important;
}

html[data-theme="light"] .pricing-card,
html[data-theme="light"] .pricing-card.popular {
  background: rgba(255, 255, 255, 0.18) !important;
  background-image: linear-gradient(145deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0.14) 100%) !important;
  border: 1px solid rgba(16, 24, 40, 0.08) !important;
  box-shadow: 0 6px 20px rgba(16, 24, 40, 0.05), 0 1px 0 rgba(255,255,255,0.55) inset !important;
  backdrop-filter: blur(12px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(140%) !important;
}
html[data-theme="light"] .pricing-card.popular {
  border-color: rgba(16, 185, 129, 0.35) !important;
  box-shadow: 0 6px 22px rgba(16, 24, 40, 0.06), 0 0 16px rgba(16, 185, 129, 0.08) !important;
}
.pricing-card:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(16, 185, 129, 0.35) !important;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.45), 0 0 16px rgba(16, 185, 129, 0.14) !important;
  background: rgba(18, 24, 30, 0.2) !important;
}
.pricing-card.popular:hover {
  transform: translateY(-4px) scale(1.02) !important;
  border-color: rgba(16, 185, 129, 0.5) !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.48), 0 0 22px rgba(16, 185, 129, 0.28) !important;
}
.pricing-card:hover::before {
  opacity: 1 !important;
}
.pricing-card:hover::after {
  transform: translateX(100%) !important;
}

/* Personal-code hint — restore blue outline banner everywhere */
#configsOverlay #userConfigsList .ucfg-hint,
#instrConfigsRoot .ucfg-hint,
#businessOverlay #businessPanelContent .ucfg-hint,
.ucfg-hint {
  display: flex !important;
  gap: 10px !important;
  align-items: flex-start !important;
  margin-bottom: 14px !important;
  padding: 12px 14px !important;
  background: rgba(0, 100, 160, 0.18) !important;
  border: 1px solid rgba(0, 136, 204, 0.45) !important;
  border-radius: 12px !important;
  color: #b0d4e8 !important;
  font-size: 0.85rem !important;
  line-height: 1.5 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* My configs — cleaner hierarchy without heavy cards */
#configsOverlay #userConfigsList .cfg-box,
#instrConfigsRoot .cfg-box,
#businessOverlay #businessPanelContent .cfg-box,
.cfg-box {
  padding: 14px 2px 16px !important;
  margin-bottom: 18px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 0 !important;
}
#configsOverlay #userConfigsList .cfg-box:last-child,
#instrConfigsRoot .cfg-box:last-child,
#businessOverlay #businessPanelContent .cfg-box:last-child,
.cfg-box:last-child {
  border-bottom: none !important;
  margin-bottom: 8px !important;
}
#configsOverlay #userConfigsList .cfg-box--locked,
#instrConfigsRoot .cfg-box--locked,
#businessOverlay #businessPanelContent .cfg-box--locked,
.cfg-box--locked {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(255, 80, 80, 0.18) !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
#configsOverlay #userConfigsList .sub-guide,
#configsOverlay #userConfigsList .sub-guide--compact,
#instrConfigsRoot .sub-guide,
.sub-guide,
.sub-guide--compact {
  padding: 12px 2px 4px !important;
  margin-top: 6px !important;
  margin-bottom: 8px !important;
}
#configsOverlay #userConfigsList .cfg-head,
#instrConfigsRoot .cfg-head,
.cfg-head {
  margin-bottom: 10px !important;
}
/* Config info grid — even cross + proportional cells (active & expired) */
#configsOverlay #userConfigsList .sub-info-grid,
#instrConfigsRoot .sub-info-grid,
#businessOverlay #businessPanelContent .sub-info-grid,
.sub-info-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
  gap: 0 !important;
  margin: 8px 0 14px !important;
  min-height: 268px !important;
  position: relative !important;
  isolation: isolate !important;
  border: 1px solid rgba(16, 185, 129, 0.26) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: transparent !important;
  align-items: stretch !important;
  justify-items: stretch !important;
  box-shadow: 0 0 14px rgba(16, 185, 129, 0.07) !important;
}
/* Vertical cross — soft, geometric center */
#configsOverlay #userConfigsList .sub-info-grid::before,
#instrConfigsRoot .sub-info-grid::before,
#businessOverlay #businessPanelContent .sub-info-grid::before,
.sub-info-grid::before {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 50% !important;
  width: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: translateX(-50%) !important;
  background: rgba(16, 185, 129, 0.42) !important;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.35), 0 0 16px rgba(16, 185, 129, 0.16) !important;
  filter: none !important;
  z-index: 8 !important;
  pointer-events: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}
/* Horizontal cross — soft, geometric center */
#configsOverlay #userConfigsList .sub-info-grid::after,
#instrConfigsRoot .sub-info-grid::after,
#businessOverlay #businessPanelContent .sub-info-grid::after,
.sub-info-grid::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 50% !important;
  height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: translateY(-50%) !important;
  background: rgba(16, 185, 129, 0.42) !important;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.35), 0 0 16px rgba(16, 185, 129, 0.16) !important;
  filter: none !important;
  z-index: 8 !important;
  pointer-events: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}
/* Expired: muted rose glow (site palette) + soft red cross */
#configsOverlay #userConfigsList .sub-info-grid.expired,
#instrConfigsRoot .sub-info-grid.expired,
#businessOverlay #businessPanelContent .sub-info-grid.expired,
.sub-info-grid.expired {
  border-color: rgba(248, 113, 113, 0.32) !important;
  box-shadow:
    0 0 0 1px rgba(248, 113, 113, 0.12),
    0 0 18px rgba(248, 113, 113, 0.16),
    0 0 36px rgba(248, 113, 113, 0.08) !important;
}
#configsOverlay #userConfigsList .sub-info-grid.expired::before,
#instrConfigsRoot .sub-info-grid.expired::before,
#businessOverlay #businessPanelContent .sub-info-grid.expired::before,
.sub-info-grid.expired::before,
#configsOverlay #userConfigsList .sub-info-grid.expired::after,
#instrConfigsRoot .sub-info-grid.expired::after,
#businessOverlay #businessPanelContent .sub-info-grid.expired::after,
.sub-info-grid.expired::after {
  background: rgba(248, 113, 113, 0.32) !important;
  box-shadow: 0 0 8px rgba(248, 113, 113, 0.28), 0 0 16px rgba(248, 113, 113, 0.12) !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
}
#configsOverlay #userConfigsList .sub-info-item,
#instrConfigsRoot .sub-info-item,
#businessOverlay #businessPanelContent .sub-info-item,
.sub-info-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  min-height: 0 !important;
  height: 100% !important;
  width: 100% !important;
  padding: 12px 10px !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  position: relative !important;
  z-index: 1 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}
#configsOverlay #userConfigsList .sub-info-item.sub-ring-item,
#instrConfigsRoot .sub-info-item.sub-ring-item,
#businessOverlay #businessPanelContent .sub-info-item.sub-ring-item,
.sub-info-item.sub-ring-item {
  min-height: 0 !important;
  padding: 10px 8px !important;
}
#configsOverlay #userConfigsList .sub-info-label,
#instrConfigsRoot .sub-info-label,
#businessOverlay #businessPanelContent .sub-info-label,
.sub-info-label {
  width: 100% !important;
  text-align: center !important;
  margin: 0 0 8px !important;
  flex-shrink: 0 !important;
}
#configsOverlay #userConfigsList .sub-info-value,
#instrConfigsRoot .sub-info-value,
#businessOverlay #businessPanelContent .sub-info-value,
.sub-info-value {
  text-align: center !important;
  max-width: 100% !important;
  margin: 0 auto !important;
}
#configsOverlay #userConfigsList .sub-status-badge,
#instrConfigsRoot .sub-status-badge,
#businessOverlay #businessPanelContent .sub-status-badge,
.sub-status-badge {
  margin: 0 auto !important;
}
#configsOverlay #userConfigsList .sub-ring-wrap,
#instrConfigsRoot .sub-ring-wrap,
#businessOverlay #businessPanelContent .sub-ring-wrap,
.sub-ring-wrap {
  width: 72px !important;
  height: 72px !important;
  margin: 0 auto 6px !important;
  flex-shrink: 0 !important;
}
#configsOverlay #userConfigsList .sub-info-item.sub-ring-item .sub-info-sub,
#instrConfigsRoot .sub-info-item.sub-ring-item .sub-info-sub,
#businessOverlay #businessPanelContent .sub-info-item.sub-ring-item .sub-info-sub,
.sub-info-item.sub-ring-item .sub-info-sub {
  width: 100% !important;
  text-align: center !important;
  white-space: normal !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  flex-shrink: 0 !important;
}

/* Nick — full text, wraps on phone; soft outline */
#configsOverlay #userConfigsList .sub-info-item:first-child .sub-info-value,
#instrConfigsRoot .sub-info-item:first-child .sub-info-value,
#businessOverlay #businessPanelContent .sub-info-item:first-child .sub-info-value,
.sub-info-item:first-child .sub-info-value {
  display: inline-block !important;
  max-width: 100% !important;
  width: auto !important;
  padding: 5px 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.025) !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
  word-break: break-all !important;
  overflow-wrap: anywhere !important;
  line-height: 1.3 !important;
  font-size: 12px !important;
  hyphens: none !important;
}
#configsOverlay #userConfigsList .sub-info-grid.expired .sub-info-item:first-child .sub-info-value,
#instrConfigsRoot .sub-info-grid.expired .sub-info-item:first-child .sub-info-value,
#businessOverlay #businessPanelContent .sub-info-grid.expired .sub-info-item:first-child .sub-info-value,
.sub-info-grid.expired .sub-info-item:first-child .sub-info-value {
  border-color: rgba(248, 113, 113, 0.22) !important;
  background: rgba(248, 113, 113, 0.05) !important;
}

/* Unified config glass — collections family, one clear layer */
#configsOverlay #userConfigsList .sub-info-grid,
#instrConfigsRoot .sub-info-grid,
#businessOverlay #businessPanelContent .sub-info-grid,
.sub-info-grid {
  background: rgba(255, 255, 255, 0.028) !important;
  background-image: none !important;
  backdrop-filter: blur(2px) !important;
  -webkit-backdrop-filter: blur(2px) !important;
}
#configsOverlay #userConfigsList .sub-info-grid.expired,
#instrConfigsRoot .sub-info-grid.expired,
#businessOverlay #businessPanelContent .sub-info-grid.expired,
.sub-info-grid.expired {
  background: rgba(248, 113, 113, 0.028) !important;
}
/* Config grid cells — transparent (glass on parent grid) */
#configsOverlay #userConfigsList .sub-info-grid .sub-info-item,
#instrConfigsRoot .sub-info-grid .sub-info-item,
#businessOverlay #businessPanelContent .sub-info-grid .sub-info-item,
.sub-info-grid .sub-info-item {
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
#configsOverlay #userConfigsList .sub-info-grid.expired .sub-info-item,
#instrConfigsRoot .sub-info-grid.expired .sub-info-item,
#businessOverlay #businessPanelContent .sub-info-grid.expired .sub-info-item,
.sub-info-grid.expired .sub-info-item {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
/* Ring centers — same glass, no matte gradient */
#configsOverlay #userConfigsList .sub-ring-center,
#instrConfigsRoot .sub-ring-center,
#businessOverlay #businessPanelContent .sub-ring-center,
.sub-ring-center {
  inset: 11px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.028) !important;
  background-image: none !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  box-shadow: none !important;
  backdrop-filter: blur(2px) !important;
  -webkit-backdrop-filter: blur(2px) !important;
}
html[data-theme="light"] .sub-ring-center,
html[data-theme="light"] #configsOverlay #userConfigsList .sub-ring-center,
html[data-theme="light"] #instrConfigsRoot .sub-ring-center,
html[data-theme="light"] #businessOverlay #businessPanelContent .sub-ring-center {
  background: rgba(255, 255, 255, 0.22) !important;
  background-image: none !important;
  border: 1px solid rgba(16, 24, 40, 0.08) !important;
  box-shadow: none !important;
  backdrop-filter: blur(3px) !important;
  -webkit-backdrop-filter: blur(3px) !important;
}
#configsOverlay #userConfigsList .sub-info-item:first-child .sub-info-value,
#instrConfigsRoot .sub-info-item:first-child .sub-info-value,
#businessOverlay #businessPanelContent .sub-info-item:first-child .sub-info-value,
.sub-info-item:first-child .sub-info-value {
  background: rgba(255, 255, 255, 0.04) !important;
  background-image: none !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
#configsOverlay #userConfigsList .sub-status-badge,
#instrConfigsRoot .sub-status-badge,
#businessOverlay #businessPanelContent .sub-status-badge,
.sub-status-badge {
  background: transparent !important;
  background-image: none !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
#configsOverlay #userConfigsList .sub-status-badge.on,
#instrConfigsRoot .sub-status-badge.on,
#businessOverlay #businessPanelContent .sub-status-badge.on,
.sub-status-badge.on {
  background: rgba(16, 185, 129, 0.1) !important;
  border-color: rgba(16, 185, 129, 0.3) !important;
  color: #34d399 !important;
}
#configsOverlay #userConfigsList .sub-status-badge.off,
#instrConfigsRoot .sub-status-badge.off,
#businessOverlay #businessPanelContent .sub-status-badge.off,
.sub-status-badge.off {
  background: rgba(248, 113, 113, 0.08) !important;
  border-color: rgba(248, 113, 113, 0.28) !important;
  color: #f87171 !important;
}
html[data-theme="light"] .sub-info-grid .sub-info-item,
html[data-theme="light"] #configsOverlay #userConfigsList .sub-info-grid .sub-info-item,
html[data-theme="light"] #instrConfigsRoot .sub-info-grid .sub-info-item,
html[data-theme="light"] #businessOverlay #businessPanelContent .sub-info-grid .sub-info-item {
  background: rgba(255, 255, 255, 0.14) !important;
  backdrop-filter: blur(2px) !important;
  -webkit-backdrop-filter: blur(2px) !important;
}

html[data-theme="light"] .sub-info-item:first-child .sub-info-value,
html[data-theme="light"] #configsOverlay #userConfigsList .sub-info-item:first-child .sub-info-value,
html[data-theme="light"] #instrConfigsRoot .sub-info-item:first-child .sub-info-value,
html[data-theme="light"] #businessOverlay #businessPanelContent .sub-info-item:first-child .sub-info-value {
  background: rgba(255, 255, 255, 0.22) !important;
  background-image: none !important;
  border: 1px solid rgba(16, 24, 40, 0.08) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: #1a2330 !important;
}
html[data-theme="light"] .sub-status-badge,
html[data-theme="light"] #configsOverlay #userConfigsList .sub-status-badge,
html[data-theme="light"] #instrConfigsRoot .sub-status-badge,
html[data-theme="light"] #businessOverlay #businessPanelContent .sub-status-badge {
  background: rgba(255, 255, 255, 0.2) !important;
  border: 1px solid rgba(16, 24, 40, 0.08) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html[data-theme="light"] .sub-status-badge.on,
html[data-theme="light"] #configsOverlay #userConfigsList .sub-status-badge.on,
html[data-theme="light"] #instrConfigsRoot .sub-status-badge.on,
html[data-theme="light"] #businessOverlay #businessPanelContent .sub-status-badge.on {
  background: rgba(16, 185, 129, 0.1) !important;
  border-color: rgba(16, 185, 129, 0.28) !important;
  color: #047857 !important;
}
html[data-theme="light"] .sub-status-badge.off,
html[data-theme="light"] #configsOverlay #userConfigsList .sub-status-badge.off,
html[data-theme="light"] #instrConfigsRoot .sub-status-badge.off,
html[data-theme="light"] #businessOverlay #businessPanelContent .sub-status-badge.off {
  background: rgba(248, 113, 113, 0.08) !important;
  border-color: rgba(220, 38, 38, 0.22) !important;
  color: #b91c1c !important;
}

/* Renew — muted rose, doesn't overpower status reds */
#configsOverlay #userConfigsList .cfg-act--renew,
#instrConfigsRoot .cfg-act--renew,
#businessOverlay #businessPanelContent .cfg-act--renew,
.cfg-act--renew {
  border-color: rgba(248, 113, 113, 0.38) !important;
  background: rgba(248, 113, 113, 0.09) !important;
  color: #e8b4b4 !important;
  box-shadow: none !important;
}
#configsOverlay #userConfigsList .cfg-act--renew:hover,
#instrConfigsRoot .cfg-act--renew:hover,
#businessOverlay #businessPanelContent .cfg-act--renew:hover,
.cfg-act--renew:hover {
  background: rgba(248, 113, 113, 0.14) !important;
  border-color: rgba(248, 113, 113, 0.55) !important;
  color: #f0c4c4 !important;
}

/* News: unified soft glass — slightly clearer */
.news-card {
  background: rgba(255, 255, 255, 0.028) !important;
  backdrop-filter: blur(2px) !important;
  -webkit-backdrop-filter: blur(2px) !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  padding: 18px !important;
}
.news-card:hover {
  background: rgba(255, 255, 255, 0.045) !important;
  border-color: rgba(16, 185, 129, 0.28) !important;
  box-shadow: none !important;
  transform: translateY(-2px) !important;
}

html[data-theme="light"] .cfg-box,
html[data-theme="light"] #configsOverlay #userConfigsList .cfg-box,
html[data-theme="light"] #instrConfigsRoot .cfg-box,
html[data-theme="light"] #businessOverlay #businessPanelContent .cfg-box,
html[data-theme="light"] .cfg-box--locked,
html[data-theme="light"] #configsOverlay #userConfigsList .cfg-box--locked,
html[data-theme="light"] #instrConfigsRoot .cfg-box--locked,
html[data-theme="light"] #businessOverlay #businessPanelContent .cfg-box--locked,
html[data-theme="light"] .sub-guide,
html[data-theme="light"] #instrConfigsRoot .sub-guide,
html[data-theme="light"] #configsOverlay #userConfigsList .sub-guide--compact,
html[data-theme="light"] .guide-section,
html[data-theme="light"] .guide-hint,
html[data-theme="light"] .guide-sub-block,
html[data-theme="light"] .config-card,
html[data-theme="light"] .server-card,
html[data-theme="light"] .sub-info-item,
html[data-theme="light"] #configsOverlay #userConfigsList .sub-info-item,
html[data-theme="light"] #instrConfigsRoot .sub-info-item,
html[data-theme="light"] #businessOverlay #businessPanelContent .sub-info-item,
html[data-theme="light"] .srv-row,
html[data-theme="light"] .tg-profile-card,
html[data-theme="light"] .balance-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html[data-theme="light"] .instr-profile-bar {
  background: #ffffff !important;
  border: 1px solid rgba(16, 24, 40, 0.1) !important;
  box-shadow: 0 6px 20px rgba(16, 24, 40, 0.07) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html[data-theme="light"] .instr-profile-bar .instr-profile-login {
  background: #ecfdf5 !important;
  border: 1px solid rgba(5,150,105,0.35) !important;
  color: #047857 !important;
  box-shadow: none !important;
}
html[data-theme="light"] .sub-info-grid,
html[data-theme="light"] #configsOverlay #userConfigsList .sub-info-grid,
html[data-theme="light"] #instrConfigsRoot .sub-info-grid,
html[data-theme="light"] #businessOverlay #businessPanelContent .sub-info-grid {
  border: 1px solid rgba(5, 150, 105, 0.28) !important;
  min-height: 268px !important;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.08) !important;
}
html[data-theme="light"] .sub-info-grid.expired,
html[data-theme="light"] #configsOverlay #userConfigsList .sub-info-grid.expired,
html[data-theme="light"] #instrConfigsRoot .sub-info-grid.expired,
html[data-theme="light"] #businessOverlay #businessPanelContent .sub-info-grid.expired {
  border-color: rgba(220, 38, 38, 0.28) !important;
  box-shadow:
    0 0 0 1px rgba(220, 38, 38, 0.08),
    0 0 16px rgba(220, 38, 38, 0.12) !important;
}
html[data-theme="light"] .sub-info-grid::before,
html[data-theme="light"] .sub-info-grid::after,
html[data-theme="light"] #configsOverlay #userConfigsList .sub-info-grid::before,
html[data-theme="light"] #configsOverlay #userConfigsList .sub-info-grid::after,
html[data-theme="light"] #instrConfigsRoot .sub-info-grid::before,
html[data-theme="light"] #instrConfigsRoot .sub-info-grid::after,
html[data-theme="light"] #businessOverlay #businessPanelContent .sub-info-grid::before,
html[data-theme="light"] #businessOverlay #businessPanelContent .sub-info-grid::after {
  background: rgba(5, 150, 105, 0.35) !important;
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.22) !important;
  opacity: 1 !important;
  visibility: visible !important;
}
html[data-theme="light"] .sub-info-grid.expired::before,
html[data-theme="light"] .sub-info-grid.expired::after,
html[data-theme="light"] #configsOverlay #userConfigsList .sub-info-grid.expired::before,
html[data-theme="light"] #configsOverlay #userConfigsList .sub-info-grid.expired::after,
html[data-theme="light"] #instrConfigsRoot .sub-info-grid.expired::before,
html[data-theme="light"] #instrConfigsRoot .sub-info-grid.expired::after {
  background: rgba(220, 38, 38, 0.22) !important;
  opacity: 1 !important;
  visibility: visible !important;
}
html[data-theme="light"] .sub-info-item:first-child .sub-info-value,
html[data-theme="light"] #configsOverlay #userConfigsList .sub-info-item:first-child .sub-info-value,
html[data-theme="light"] #instrConfigsRoot .sub-info-item:first-child .sub-info-value {
  border: 1px solid rgba(16,24,40,0.08) !important;
  background: rgba(255,255,255,0.55) !important;
  color: #1a2330 !important;
  white-space: normal !important;
  word-break: break-all !important;
  overflow-wrap: anywhere !important;
  text-overflow: clip !important;
}
html[data-theme="light"] .cfg-act--renew,
html[data-theme="light"] #configsOverlay #userConfigsList .cfg-act--renew,
html[data-theme="light"] #instrConfigsRoot .cfg-act--renew,
html[data-theme="light"] #businessOverlay #businessPanelContent .cfg-act--renew {
  background: #fff5f5 !important;
  border-color: rgba(220, 38, 38, 0.28) !important;
  color: #9f6b6b !important;
  box-shadow: none !important;
}
html[data-theme="light"] .server-card,
html[data-theme="light"] .srv-row {
  background: rgba(255, 255, 255, 0.18) !important;
  background-image: linear-gradient(145deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0.18) 100%) !important;
  border: 1px solid rgba(16, 24, 40, 0.08) !important;
  box-shadow: 0 6px 20px rgba(16, 24, 40, 0.06), 0 1px 0 rgba(255,255,255,0.65) inset !important;
  backdrop-filter: blur(12px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(140%) !important;
}
html[data-theme="light"] .server-card:hover,
html[data-theme="light"] .server-card.active-card,
html[data-theme="light"] .srv-row:hover {
  background: rgba(255, 255, 255, 0.28) !important;
  border-color: rgba(16, 185, 129, 0.28) !important;
  box-shadow: 0 10px 26px rgba(16, 24, 40, 0.09), 0 0 16px rgba(16, 185, 129, 0.08) !important;
  transform: translateY(-2px) !important;
}
html[data-theme="light"] .best-server-banner {
  background: rgba(255, 255, 255, 0.2) !important;
  background-image: linear-gradient(120deg, rgba(16,185,129,0.08) 0%, rgba(255,255,255,0.55) 45%, transparent 100%) !important;
  border: 1px solid rgba(16, 185, 129, 0.2) !important;
  box-shadow: 0 8px 28px rgba(16, 24, 40, 0.08), 0 0 20px rgba(16, 185, 129, 0.06) !important;
  backdrop-filter: blur(14px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(140%) !important;
  border-radius: 20px !important;
}
html[data-theme="light"] .best-server-banner:hover {
  background: rgba(255, 255, 255, 0.3) !important;
  border-color: rgba(16, 185, 129, 0.3) !important;
  box-shadow: 0 12px 32px rgba(16, 24, 40, 0.1), 0 0 24px rgba(16, 185, 129, 0.09) !important;
}
html[data-theme="light"] #configsOverlay #userConfigsList .ucfg-hint,
html[data-theme="light"] #instrConfigsRoot .ucfg-hint,
html[data-theme="light"] #businessOverlay #businessPanelContent .ucfg-hint,
html[data-theme="light"] .ucfg-hint {
  background: rgba(0, 120, 180, 0.08) !important;
  border: 1px solid rgba(0, 136, 204, 0.35) !important;
  color: #1e4a66 !important;
  box-shadow: none !important;
}
html[data-theme="light"] #configsOverlay #userConfigsList .cfg-box,
html[data-theme="light"] #instrConfigsRoot .cfg-box,
html[data-theme="light"] #businessOverlay #businessPanelContent .cfg-box,
html[data-theme="light"] .cfg-box {
  border-bottom: 1px solid rgba(16, 24, 40, 0.08) !important;
}
html[data-theme="light"] .news-card {
  background: rgba(255, 255, 255, 0.25) !important;
  border: 1px solid rgba(16, 24, 40, 0.07) !important;
  box-shadow: none !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}
/* === END FLAT ON SITE BG === */

/* Wide screens only: Inter is loaded by a matchMedia gate in <head> */
@media (min-width: 769px) {
  body { font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif; }
}

/* === overlay buttons / glass (wins via !important) === */
/* STEK UNIFIED UI v2 — glass buttons + shimmer hover + feed cards */
:root {
  --stek-btn-bg: rgba(22, 24, 30, 0.88);
  --stek-btn-border: rgba(255, 255, 255, 0.12);
  --stek-btn-text: #eef0f3;
  --stek-btn-accent: #10b981;
}

/* Shimmer mixin via ::after */
.btn, .btn-small, .pricing-btn, .hero-cta, .referral-btn, .retro-btn,
.free-promo-btn, .quick-extend-btn, .menu-footer-btn, .guide-actions .btn,
.promo-code-input-row button, .ticket-btn, .back-btn, .currency-btn,
.register-modal button, .ticket-modal button, .guest-modal button,
.menu-modal button:not(.menu-item), .spam-modal button,
.admin-modal .btn, .admin-modal .btn-small, .admin-modal button.secondary,
#paymentOverlay .btn, #paymentOverlay .btn.secondary {
  background: var(--stek-btn-bg) !important;
  color: var(--stek-btn-text) !important;
  border: 1px solid var(--stek-btn-border) !important;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.35) !important;
  font-weight: 600 !important;
  position: relative !important;
  overflow: hidden !important;
  transform: none;
  transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease !important;
}

.btn::after, .btn-small::after, .pricing-btn::after, .hero-cta::after,
.referral-btn::after, .retro-btn::after, .free-promo-btn::after,
.quick-extend-btn::after, .menu-footer-btn::after,
.promo-code-input-row button::after, .ticket-btn::after, .back-btn::after,
.currency-btn::after, .register-modal button::after, .ticket-modal button::after,
.guest-modal button::after, .menu-modal button:not(.menu-item)::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(16, 185, 129, 0.22) 48%, rgba(52, 211, 153, 0.12) 52%, transparent 70%);
  transform: translateX(-130%);
  transition: transform 0.55s ease;
  pointer-events: none;
  z-index: 0;
}

.btn > *, .btn-small > *, .pricing-btn > *, .hero-cta > *, .referral-btn > *,
.retro-btn > *, .free-promo-btn > *, .quick-extend-btn > *, .menu-footer-btn > * {
  position: relative;
  z-index: 1;
}

.btn:hover, .btn-small:hover, .pricing-btn:hover, .hero-cta:hover,
.referral-btn:hover, .retro-btn:hover, .free-promo-btn:hover,
.quick-extend-btn:hover, .menu-footer-btn:hover,
.promo-code-input-row button:hover, .ticket-btn:hover, .back-btn:hover,
.currency-btn:hover, .register-modal button:hover, .ticket-modal button:hover,
.guest-modal button:hover, .menu-modal button:not(.menu-item):hover,
.admin-modal .btn:hover, .admin-modal .btn-small:hover,
#paymentOverlay .btn:hover {
  border-color: rgba(16, 185, 129, 0.45) !important;
  background: rgba(28, 31, 38, 0.95) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45), 0 0 14px rgba(16, 185, 129, 0.12) !important;
  transform: translateY(-2px) !important;
}

.btn:hover::after, .btn-small:hover::after, .pricing-btn:hover::after,
.hero-cta:hover::after, .referral-btn:hover::after, .retro-btn:hover::after,
.free-promo-btn:hover::after, .quick-extend-btn:hover::after,
.menu-footer-btn:hover::after, .promo-code-input-row button:hover::after,
.ticket-btn:hover::after, .back-btn:hover::after, .currency-btn:hover::after,
.register-modal button:hover::after, .ticket-modal button:hover::after,
.guest-modal button:hover::after, .menu-modal button:not(.menu-item):hover::after {
  transform: translateX(130%);
}

.btn.secondary, .btn-small.secondary, .retro-btn.secondary,
.menu-footer-btn, .currency-btn {
  color: #b8c0cc !important;
}

.btn:disabled, .btn-small:disabled, .pricing-btn:disabled {
  opacity: 0.45 !important;
  transform: none !important;
  pointer-events: none;
}

.btn-small.danger, .btn.danger, .menu-footer-btn.danger, .ticket-btn.danger {
  background: rgba(255, 68, 68, 0.1) !important;
  border-color: rgba(255, 68, 68, 0.35) !important;
  color: #ffaaaa !important;
}

.btn-small.warning, .btn.warning, .ticket-btn.warning {
  background: rgba(255, 170, 0, 0.1) !important;
  border-color: rgba(255, 170, 0, 0.35) !important;
  color: #ffcc88 !important;
}

/* RW tabs — glass style */
.rw-tab {
  background: rgba(22, 24, 30, 0.75) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #b0b8c4 !important;
  box-shadow: none !important;
  position: relative;
  overflow: hidden;
}
.rw-tab.active {
  background: rgba(28, 31, 38, 0.95) !important;
  border-color: rgba(16, 185, 129, 0.45) !important;
  color: #10b981 !important;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.15) !important;
}
.rw-tab::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(16, 185, 129, 0.15) 50%, transparent 65%);
  transform: translateX(-120%);
  transition: transform 0.5s ease;
  pointer-events: none;
}
.rw-tab:hover::after { transform: translateX(120%); }

.quick-extend-btn {
  font-size: 0.68rem !important;
  padding: 6px 4px !important;
  min-height: 28px;
}

.menu-footer-btn {
  flex: 1;
  padding: 12px 16px !important;
  border-radius: 12px !important;
  font-size: 0.9rem !important;
  cursor: pointer;
  width: auto !important;
  margin-top: 0 !important;
}

.hero-cta {
  padding: 14px 32px !important;
  font-size: 1rem !important;
  border-radius: 14px !important;
  text-decoration: none !important;
  display: inline-block;
}

.pricing-btn {
  padding: 11px !important;
  font-size: 0.9rem !important;
  border-radius: 10px !important;
}

/* Feed cards hover (guide/server flat — no card chrome) */
.feed-card {
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.25s ease !important;
}
.feed-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #10b981, transparent);
  opacity: 0;
  transition: opacity 0.3s;
}
.feed-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(16, 185, 129, 0.08) 50%, transparent 65%);
  transform: translateX(-120%);
  transition: transform 0.65s ease;
  pointer-events: none;
}
.feed-card:hover {
  transform: translateY(-3px);
  border-color: rgba(16, 185, 129, 0.35) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45), 0 0 16px rgba(16, 185, 129, 0.1) !important;
}
.feed-card:hover::before { opacity: 1; }
.feed-card:hover::after { transform: translateX(120%); }

.guide-section,
.cfg-box,
.sub-guide,
.sub-info-item,
.config-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.server-card,
.srv-row {
  background: rgba(14, 18, 24, 0.22) !important;
  background-image: linear-gradient(145deg, rgba(255,255,255,0.045) 0%, transparent 45%, rgba(16,185,129,0.035) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 16px !important;
  box-shadow:
    0 6px 22px rgba(0, 0, 0, 0.26),
    0 1px 0 rgba(255, 255, 255, 0.045) inset !important;
  backdrop-filter: blur(14px) saturate(135%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(135%) !important;
  position: relative !important;
  overflow: hidden !important;
}
.server-card:hover,
.server-card.active-card,
.srv-row:hover {
  background: rgba(18, 24, 30, 0.32) !important;
  background-image: linear-gradient(145deg, rgba(255,255,255,0.055) 0%, transparent 45%, rgba(16,185,129,0.05) 100%) !important;
  border: 1px solid rgba(16, 185, 129, 0.22) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3), 0 0 22px rgba(16, 185, 129, 0.07) !important;
  transform: translateY(-2px) !important;
}
.server-card::before,
.srv-row::before {
  display: block !important;
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  opacity: 0.5 !important;
  background: radial-gradient(120% 80% at 8% 0%, rgba(16,185,129,0.08), transparent 55%) !important;
}
.server-card::after,
.srv-row::after {
  display: none !important;
  content: none !important;
}
.instr-profile-bar {
  background: rgba(22, 24, 30, 0.72) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border-radius: 14px !important;
  margin-bottom: 16px !important;
  position: relative !important;
}
.instr-profile-bar::before {
  display: block !important;
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 14% !important;
  right: 14% !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(16,185,129,0.55), transparent) !important;
  opacity: 0.7 !important;
}
.instr-profile-bar::after {
  display: none !important;
  content: none !important;
}
.instr-profile-row {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center !important;
}
.best-server-banner {
  background: rgba(14, 18, 24, 0.26) !important;
  background-image: linear-gradient(120deg, rgba(16,185,129,0.1) 0%, rgba(255,255,255,0.035) 38%, transparent 100%) !important;
  border: 1px solid rgba(16, 185, 129, 0.22) !important;
  box-shadow:
    0 10px 36px rgba(0, 0, 0, 0.32),
    0 0 30px rgba(16, 185, 129, 0.1),
    0 1px 0 rgba(255, 255, 255, 0.06) inset !important;
  backdrop-filter: blur(18px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(150%) !important;
  border-radius: 20px !important;
}


/* Pricing cards — same soft glass as servers; hover effects kept below */
.pricing-card {
  background: rgba(14, 18, 24, 0.22) !important;
  background-image: linear-gradient(145deg, rgba(255,255,255,0.045) 0%, transparent 45%, rgba(16,185,129,0.035) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 16px !important;
  box-shadow:
    0 6px 22px rgba(0, 0, 0, 0.22),
    0 1px 0 rgba(255, 255, 255, 0.045) inset,
    0 0 0 1px rgba(0, 0, 0, 0.08) inset !important;
  backdrop-filter: blur(14px) saturate(135%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(135%) !important;
}
.pricing-card.popular {
  background: rgba(14, 18, 24, 0.26) !important;
  background-image: linear-gradient(145deg, rgba(16,185,129,0.08) 0%, transparent 50%, rgba(255,255,255,0.03) 100%) !important;
  border: 1px solid rgba(16, 185, 129, 0.42) !important;
  box-shadow:
    0 6px 22px rgba(0, 0, 0, 0.24),
    0 0 18px rgba(16, 185, 129, 0.1),
    0 1px 0 rgba(255, 255, 255, 0.05) inset !important;
}

html[data-theme="light"] .pricing-card,
html[data-theme="light"] .pricing-card.popular {
  background: rgba(255, 255, 255, 0.18) !important;
  background-image: linear-gradient(145deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0.14) 100%) !important;
  border: 1px solid rgba(16, 24, 40, 0.08) !important;
  box-shadow: 0 6px 20px rgba(16, 24, 40, 0.05), 0 1px 0 rgba(255,255,255,0.55) inset !important;
  backdrop-filter: blur(12px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(140%) !important;
}
html[data-theme="light"] .pricing-card.popular {
  border-color: rgba(16, 185, 129, 0.35) !important;
  box-shadow: 0 6px 22px rgba(16, 24, 40, 0.06), 0 0 16px rgba(16, 185, 129, 0.08) !important;
}

.ucfg-hint {
  background: rgba(0, 100, 160, 0.18) !important;
  border: 1px solid rgba(0, 136, 204, 0.45) !important;
  border-radius: 12px !important;
  color: #b0d4e8 !important;
  box-shadow: none !important;
}
.sub-info-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
  gap: 0 !important;
  min-height: 268px !important;
  position: relative !important;
  isolation: isolate !important;
  border: 1px solid rgba(16, 185, 129, 0.26) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: rgba(255, 255, 255, 0.028) !important;
  background-image: none !important;
  backdrop-filter: blur(2px) !important;
  -webkit-backdrop-filter: blur(2px) !important;
  box-shadow: 0 0 14px rgba(16, 185, 129, 0.07) !important;
}
.sub-info-grid::before {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  top: 0; bottom: 0; left: 50%;
  width: 1px !important;
  transform: translateX(-50%);
  background: rgba(16, 185, 129, 0.42) !important;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.35), 0 0 16px rgba(16, 185, 129, 0.16) !important;
  z-index: 8 !important;
  pointer-events: none !important;
  opacity: 1 !important;
}
.sub-info-grid::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  left: 0; right: 0; top: 50%;
  height: 1px !important;
  transform: translateY(-50%);
  background: rgba(16, 185, 129, 0.42) !important;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.35), 0 0 16px rgba(16, 185, 129, 0.16) !important;
  z-index: 8 !important;
  pointer-events: none !important;
  opacity: 1 !important;
}
.sub-info-grid.expired {
  border-color: rgba(248, 113, 113, 0.32) !important;
  background: rgba(248, 113, 113, 0.028) !important;
  box-shadow:
    0 0 0 1px rgba(248, 113, 113, 0.12),
    0 0 18px rgba(248, 113, 113, 0.16),
    0 0 36px rgba(248, 113, 113, 0.08) !important;
}
.sub-info-grid.expired::before,
.sub-info-grid.expired::after {
  background: rgba(248, 113, 113, 0.32) !important;
  box-shadow: 0 0 8px rgba(248, 113, 113, 0.28), 0 0 16px rgba(248, 113, 113, 0.12) !important;
}
.sub-info-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  position: relative !important;
  z-index: 1 !important;
}
.sub-info-item:first-child .sub-info-value {
  display: inline-block !important;
  max-width: 100% !important;
  padding: 5px 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.025) !important;
  white-space: normal !important;
  word-break: break-all !important;
  overflow-wrap: anywhere !important;
  text-overflow: clip !important;
  line-height: 1.3 !important;
  font-size: 12px !important;
}

/* Unified config glass — collections family, one clear layer */
#configsOverlay #userConfigsList .sub-info-grid,
#instrConfigsRoot .sub-info-grid,
#businessOverlay #businessPanelContent .sub-info-grid,
.sub-info-grid {
  background: rgba(255, 255, 255, 0.028) !important;
  background-image: none !important;
  backdrop-filter: blur(2px) !important;
  -webkit-backdrop-filter: blur(2px) !important;
}
#configsOverlay #userConfigsList .sub-info-grid.expired,
#instrConfigsRoot .sub-info-grid.expired,
#businessOverlay #businessPanelContent .sub-info-grid.expired,
.sub-info-grid.expired {
  background: rgba(248, 113, 113, 0.028) !important;
}
/* Config grid cells — transparent (glass on parent grid) */
#configsOverlay #userConfigsList .sub-info-grid .sub-info-item,
#instrConfigsRoot .sub-info-grid .sub-info-item,
#businessOverlay #businessPanelContent .sub-info-grid .sub-info-item,
.sub-info-grid .sub-info-item {
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
#configsOverlay #userConfigsList .sub-info-grid.expired .sub-info-item,
#instrConfigsRoot .sub-info-grid.expired .sub-info-item,
#businessOverlay #businessPanelContent .sub-info-grid.expired .sub-info-item,
.sub-info-grid.expired .sub-info-item {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
/* Ring centers — same glass, no matte gradient */
#configsOverlay #userConfigsList .sub-ring-center,
#instrConfigsRoot .sub-ring-center,
#businessOverlay #businessPanelContent .sub-ring-center,
.sub-ring-center {
  inset: 11px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.028) !important;
  background-image: none !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  box-shadow: none !important;
  backdrop-filter: blur(2px) !important;
  -webkit-backdrop-filter: blur(2px) !important;
}
html[data-theme="light"] .sub-ring-center,
html[data-theme="light"] #configsOverlay #userConfigsList .sub-ring-center,
html[data-theme="light"] #instrConfigsRoot .sub-ring-center,
html[data-theme="light"] #businessOverlay #businessPanelContent .sub-ring-center {
  background: rgba(255, 255, 255, 0.22) !important;
  background-image: none !important;
  border: 1px solid rgba(16, 24, 40, 0.08) !important;
  box-shadow: none !important;
  backdrop-filter: blur(3px) !important;
  -webkit-backdrop-filter: blur(3px) !important;
}
#configsOverlay #userConfigsList .sub-info-item:first-child .sub-info-value,
#instrConfigsRoot .sub-info-item:first-child .sub-info-value,
#businessOverlay #businessPanelContent .sub-info-item:first-child .sub-info-value,
.sub-info-item:first-child .sub-info-value {
  background: rgba(255, 255, 255, 0.04) !important;
  background-image: none !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
#configsOverlay #userConfigsList .sub-status-badge,
#instrConfigsRoot .sub-status-badge,
#businessOverlay #businessPanelContent .sub-status-badge,
.sub-status-badge {
  background: transparent !important;
  background-image: none !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
#configsOverlay #userConfigsList .sub-status-badge.on,
#instrConfigsRoot .sub-status-badge.on,
#businessOverlay #businessPanelContent .sub-status-badge.on,
.sub-status-badge.on {
  background: rgba(16, 185, 129, 0.1) !important;
  border-color: rgba(16, 185, 129, 0.3) !important;
  color: #34d399 !important;
}
#configsOverlay #userConfigsList .sub-status-badge.off,
#instrConfigsRoot .sub-status-badge.off,
#businessOverlay #businessPanelContent .sub-status-badge.off,
.sub-status-badge.off {
  background: rgba(248, 113, 113, 0.08) !important;
  border-color: rgba(248, 113, 113, 0.28) !important;
  color: #f87171 !important;
}
html[data-theme="light"] .sub-info-grid .sub-info-item,
html[data-theme="light"] #configsOverlay #userConfigsList .sub-info-grid .sub-info-item,
html[data-theme="light"] #instrConfigsRoot .sub-info-grid .sub-info-item,
html[data-theme="light"] #businessOverlay #businessPanelContent .sub-info-grid .sub-info-item {
  background: rgba(255, 255, 255, 0.14) !important;
  backdrop-filter: blur(2px) !important;
  -webkit-backdrop-filter: blur(2px) !important;
}

html[data-theme="light"] .sub-info-item:first-child .sub-info-value,
html[data-theme="light"] #configsOverlay #userConfigsList .sub-info-item:first-child .sub-info-value,
html[data-theme="light"] #instrConfigsRoot .sub-info-item:first-child .sub-info-value,
html[data-theme="light"] #businessOverlay #businessPanelContent .sub-info-item:first-child .sub-info-value {
  background: rgba(255, 255, 255, 0.22) !important;
  background-image: none !important;
  border: 1px solid rgba(16, 24, 40, 0.08) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: #1a2330 !important;
}
html[data-theme="light"] .sub-status-badge,
html[data-theme="light"] #configsOverlay #userConfigsList .sub-status-badge,
html[data-theme="light"] #instrConfigsRoot .sub-status-badge,
html[data-theme="light"] #businessOverlay #businessPanelContent .sub-status-badge {
  background: rgba(255, 255, 255, 0.2) !important;
  border: 1px solid rgba(16, 24, 40, 0.08) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html[data-theme="light"] .sub-status-badge.on,
html[data-theme="light"] #configsOverlay #userConfigsList .sub-status-badge.on,
html[data-theme="light"] #instrConfigsRoot .sub-status-badge.on,
html[data-theme="light"] #businessOverlay #businessPanelContent .sub-status-badge.on {
  background: rgba(16, 185, 129, 0.1) !important;
  border-color: rgba(16, 185, 129, 0.28) !important;
  color: #047857 !important;
}
html[data-theme="light"] .sub-status-badge.off,
html[data-theme="light"] #configsOverlay #userConfigsList .sub-status-badge.off,
html[data-theme="light"] #instrConfigsRoot .sub-status-badge.off,
html[data-theme="light"] #businessOverlay #businessPanelContent .sub-status-badge.off {
  background: rgba(248, 113, 113, 0.08) !important;
  border-color: rgba(220, 38, 38, 0.22) !important;
  color: #b91c1c !important;
}

#configsOverlay #userConfigsList .sub-info-grid > .sub-info-item:not(.sub-ring-item),
#instrConfigsRoot .sub-info-grid > .sub-info-item:not(.sub-ring-item),
#businessOverlay #businessPanelContent .sub-info-grid > .sub-info-item:not(.sub-ring-item),
.sub-info-grid > .sub-info-item:not(.sub-ring-item) {
  justify-content: center !important;
}
.sub-info-value:has(> .sub-last-online) {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  width: 100%;
}
#configsOverlay #userConfigsList .sub-last-online,
#instrConfigsRoot .sub-last-online,
#businessOverlay #businessPanelContent .sub-last-online,
.sub-last-online {
  display: block;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: #8b96a3;
  line-height: 1.3;
  max-width: 12em;
  text-align: center;
}
#configsOverlay #userConfigsList .sub-last-online.is-recent,
#instrConfigsRoot .sub-last-online.is-recent,
#businessOverlay #businessPanelContent .sub-last-online.is-recent,
.sub-last-online.is-recent {
  color: #34d399;
}
#configsOverlay #userConfigsList .sub-last-online.is-never,
#instrConfigsRoot .sub-last-online.is-never,
#businessOverlay #businessPanelContent .sub-last-online.is-never,
.sub-last-online.is-never {
  color: #8b96a3;
  opacity: 0.92;
}
html[data-theme="light"] .sub-last-online,
html[data-theme="light"] #configsOverlay #userConfigsList .sub-last-online,
html[data-theme="light"] #instrConfigsRoot .sub-last-online,
html[data-theme="light"] #businessOverlay #businessPanelContent .sub-last-online {
  color: #6b7280 !important;
}
html[data-theme="light"] .sub-last-online.is-recent,
html[data-theme="light"] #configsOverlay #userConfigsList .sub-last-online.is-recent,
html[data-theme="light"] #instrConfigsRoot .sub-last-online.is-recent,
html[data-theme="light"] #businessOverlay #businessPanelContent .sub-last-online.is-recent {
  color: #047857 !important;
}

.cfg-act--renew {
  border-color: rgba(248, 113, 113, 0.38) !important;
  background: rgba(248, 113, 113, 0.09) !important;
  color: #e8b4b4 !important;
  box-shadow: none !important;
}
.guide-section:hover {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  transform: none !important;
}
.guide-section::before,
.guide-section::after {
  display: none !important;
  content: none !important;
}

.feature-card::after, .pricing-card::after, .news-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(105deg, transparent 30%, rgba(16, 185, 129, 0.18) 48%, rgba(52, 211, 153, 0.08) 52%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.55s ease;
  pointer-events: none;
  z-index: 0;
}
.feature-card:hover::after, .pricing-card:hover::after, .news-card:hover::after {
  transform: translateX(100%);
}
.pricing-card, .feature-card, .news-card { overflow: hidden !important; }
.pricing-card > *, .feature-card > *, .news-card > * { position: relative; z-index: 1; }
.pricing-card::before, .feature-card::before, .news-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #10b981, transparent);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
  z-index: 1;
}
.pricing-card:hover::before, .feature-card:hover::before, .news-card:hover::before { opacity: 1; }
.pricing-card:hover, .feature-card:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(16, 185, 129, 0.35) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45), 0 0 16px rgba(16, 185, 129, 0.1) !important;
}
.news-card:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(16, 185, 129, 0.35) !important;
  background: rgba(255, 255, 255, 0.065) !important;
  box-shadow: none !important;
}
.pricing-card.popular:hover {
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5), 0 0 20px rgba(16, 185, 129, 0.22) !important;
}
.news-card {
  background: rgba(255, 255, 255, 0.028) !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  backdrop-filter: blur(2px) !important;
  -webkit-backdrop-filter: blur(2px) !important;
}
.news-card .news-tag {
  background: rgba(16, 185, 129, 0.08) !important;
  border: 1px solid rgba(16, 185, 129, 0.25) !important;
  color: #10b981 !important;
  box-shadow: none !important;
  border-radius: 8px;
}
.news-card .news-headline { color: #eef0f3 !important; text-shadow: none !important; font-size: 1.05rem !important; }
.news-card .news-icon { font-size: 1.75rem !important; filter: none !important; }

.pay-tonkeeper-btn {
  background: rgba(0, 100, 160, 0.25) !important;
  border: 1px solid rgba(0, 136, 204, 0.45) !important;
  color: #e0f4ff !important;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.35) !important;
}

/* === HOME / NEWS extras (from landing + collections; popular dump missed these) === */
.mini-logo {
  width: 82px; height: 82px; margin: 0 auto 12px;
  background: rgba(255,255,255,0.04); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  animation: pulse 2s ease-in-out infinite;
  box-shadow: 0 4px 16px rgba(0,0,0,0.28), inset 0 0 12px rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
}
.mini-logo img, .mini-logo .stek-brand-logo, .mini-logo svg {
  width: 69px; height: 69px; object-fit: contain; display: block;
}
@media (max-width: 768px) {
  .main .mini-logo { width: 82px; height: 82px; margin: 0 auto 12px; }
  .main .mini-logo img, .main .mini-logo .stek-brand-logo, .main .mini-logo svg {
    width: 69px; height: 69px;
  }
}
html[data-theme="light"] .mini-logo {
  background: #f3f4f6 !important;
  border: 1.5px solid rgba(16,24,40,0.08) !important;
  box-shadow: 0 4px 14px rgba(16,24,40,0.06) !important;
}
html[data-theme="light"] .mini-logo img,
html[data-theme="light"] .mini-logo .stek-brand-logo,
html[data-theme="light"] .mini-logo svg {
  background: transparent !important;
  border-radius: 50%;
  opacity: 0.88;
  filter: brightness(1.55) contrast(0.72) saturate(0.92);
}
.rocket { animation:flyRocket 1.5s ease-in-out infinite; }
@keyframes flyRocket { 0%,100%{ transform:translate(14px,36px) rotate(-30deg); } 50%{ transform:translate(18px,30px) rotate(-25deg); } }
.hero-section { text-align:center; margin:20px 0 30px; }
.hero-title { font-size: 2.5rem; font-weight: 700; background: linear-gradient(135deg, #00ff88 0%, #00cc77 50%, #00ff88 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; filter: drop-shadow(0 0 24px rgba(0,255,136,0.45)) drop-shadow(0 4px 8px rgba(0,0,0,0.5)); margin-bottom: 12px; font-family: 'Courier New', monospace; letter-spacing: 2px; animation: shinePulse 4.5s ease-in-out infinite; }
@keyframes shinePulse { 0%,100% { opacity: 1; } 50% { opacity: 0.88; } }
@media (prefers-reduced-motion: reduce) { .hero-title { animation: none !important; } }
@media (max-width:768px) {
  .hero-title { font-size: 1.55rem; letter-spacing: 0; max-width: 100%; padding: 0 6px; overflow-wrap: anywhere; }
}
.hero-subtitle { font-size: 1.1rem; color: #b0e0b0; max-width: 600px; margin:0 auto 24px; text-shadow:0 2px 4px rgba(0,0,0,0.5); line-height: 1.5; padding: 0 10px; word-wrap: break-word; }
@media (max-width:768px) { .hero-subtitle { font-size: 0.95rem; } }
.trust-bar { display:flex; justify-content:center; gap:8px; flex-wrap:wrap; margin:0 0 18px; }
.trust-pill { display:inline-flex; align-items:center; gap:6px; background:rgba(16,185,129,0.07); border:1px solid rgba(16,185,129,0.18); color:#a8b0bc; font-size:0.74rem; font-weight:600; padding:5px 12px; border-radius:20px; }
.trust-pill svg { width:13px; height:13px; color:#10b981; flex-shrink:0; }
.hero-cta { display:inline-block; background:rgba(22,24,30,0.42); color:#eef0f3; padding:16px 36px; border-radius:16px; font-weight:600; font-size:1.1rem; text-decoration:none; box-shadow:0 3px 12px rgba(0,0,0,0.35); transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1); cursor:pointer; position:relative; overflow:hidden; border: 1px solid rgba(255,255,255,0.12); white-space: nowrap; }
.hero-cta::before { content:''; position:absolute; top:0; left:-100%; width:100%; height:100%; background:linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent); transition:left 0.5s; }
.hero-cta:hover { transform:translateY(-2px); background:rgba(28,31,38,0.95); border-color:rgba(16,185,129,0.45); box-shadow:0 6px 20px rgba(0,0,0,0.45); }
.hero-cta:hover::before { left:100%; }
.action-btn-container { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; max-width:480px; width:100%; margin:14px auto; }
.action-btn { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; background:rgba(22,24,30,0.7); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,0.08); border-radius:12px; padding:10px 6px; color:#fff; font-weight:600; font-size:0.72rem; line-height:1.2; text-decoration:none; box-shadow:0 3px 10px rgba(0,0,0,0.3); transition:all 0.25s cubic-bezier(0.4, 0, 0.2, 1); cursor:pointer; white-space: normal; text-align:center; position:relative; overflow:hidden; }
.action-btn::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg, rgba(16,185,129,.1), transparent 60%); opacity:0; transition:opacity .3s; }
.action-btn:hover { border-color:rgba(16,185,129,0.45); background:rgba(28,31,38,0.85); box-shadow:0 8px 18px rgba(0,0,0,0.4), 0 0 10px rgba(16,185,129,0.14); transform:translateY(-2px); }
.action-btn:hover::before { opacity:1; }
.action-btn .icon { width:22px; height:22px; display:flex; align-items:center; justify-content:center; color:#10b981; }
.action-btn .icon svg { width:18px; height:18px; filter:drop-shadow(0 0 4px rgba(16,185,129,0.3)); }
@media (max-width:480px) { .action-btn-container { grid-template-columns:1fr 1fr 1fr; gap:6px; max-width:340px; } .action-btn { font-size:0.65rem; padding:8px 4px; border-radius:10px; } .action-btn .icon svg { width:16px; height:16px; } }
.home-flow { width:100%; max-width:1000px; }
.features-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:6px 20px; width:100%; max-width:1000px; margin:20px 0 4px; }
.feature-card { background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; border:none; border-radius:0; padding:10px 6px; text-align:center; transition:opacity 0.25s ease; position:relative; overflow:visible; box-shadow:none; }
.feature-card::before { display:none; }
.feature-card:hover { transform:none; box-shadow:none; border-color:transparent; opacity:0.92; }
.feature-icon { width:40px; height:40px; margin:0 auto 10px; border-radius:50%; background:rgba(16,185,129,0.1); display:flex; align-items:center; justify-content:center; color:#10b981; filter:drop-shadow(0 0 6px rgba(16,185,129,0.2)); }
.feature-icon svg { width:20px; height:20px; }
.feature-title { font-weight:600; color:#fff; margin-bottom:5px; font-size:0.88rem; text-shadow:none; word-wrap:break-word; }
.feature-desc { color:#8aad8a; font-size:0.78rem; line-height:1.45; word-wrap:break-word; max-width:220px; margin:0 auto; }
.steps-section { width:100%; max-width:1000px; margin:32px 0 8px; padding:0; position:relative; z-index:2; }
.steps-header { font-size:clamp(1.3rem, 2.5vw, 1.75rem); font-weight:800; line-height:1.3; margin-bottom:32px; color:#fff; letter-spacing:-0.02em; text-align:center; }
.steps-header .steps-accent { color:var(--accent); text-shadow:0 0 20px rgba(0,255,136,0.35); }
.steps-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:0; position:relative; }
.steps-grid::before { content:''; position:absolute; top:24px; left:12%; right:12%; height:1px; background:linear-gradient(90deg, transparent, rgba(0,255,136,0.2) 15%, rgba(0,255,136,0.2) 85%, transparent); pointer-events:none; }
.step-item { display:flex; flex-direction:column; align-items:center; text-align:center; padding:0 10px; }
.step-num { width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:0.95rem; font-weight:800; color:var(--accent); background:rgba(0,255,136,0.08); border:1.5px solid rgba(0,255,136,0.28); box-shadow:0 0 16px rgba(0,255,136,0.1); margin-bottom:16px; flex-shrink:0; letter-spacing:0.02em; position:relative; z-index:1; }
.step-body { max-width:210px; }
.step-title { font-size:0.95rem; font-weight:700; color:#fff; margin-bottom:7px; line-height:1.3; }
.step-desc { font-size:0.78rem; color:#8aad8a; line-height:1.5; word-wrap:break-word; margin:0; }
@media (max-width:900px) {
.features-grid { grid-template-columns:repeat(2, 1fr); gap:10px 16px; margin:18px 0 4px; }
.feature-desc { max-width:none; font-size:0.76rem; }
.steps-grid { grid-template-columns:repeat(2, 1fr); gap:28px 16px; }
.steps-grid::before { display:none; }
.steps-header { margin-bottom:24px; }
.step-item { align-items:flex-start; text-align:left; padding:0 4px; }
.step-num { margin-bottom:12px; }
.step-body { max-width:none; }
}
@media (max-width:560px) {
.features-grid { grid-template-columns:1fr 1fr; gap:8px 12px; }
.feature-icon { width:36px; height:36px; margin-bottom:8px; }
.feature-icon svg { width:18px; height:18px; }
.feature-title { font-size:0.82rem; }
.feature-desc { font-size:0.72rem; line-height:1.4; }
.steps-section { margin:24px 0 4px; }
.steps-grid { grid-template-columns:1fr; gap:18px; }
.steps-grid::before { top: 0; bottom: 0; left: 21px; right: auto; width: 1px; height: auto; background: linear-gradient(180deg, transparent, rgba(0,255,136,0.22) 15%, rgba(0,255,136,0.22) 85%, transparent); display:block; }
.step-item { flex-direction:row; align-items:flex-start; gap:14px; padding:0; }
.step-body { flex:1; min-width:0; max-width:none; }
.step-num { width:42px; height:42px; font-size:0.88rem; margin-bottom:0; margin-top:1px; }
.step-title { font-size:0.92rem; margin-bottom:5px; }
.step-desc { font-size:0.76rem; }
}
.pricing-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:12px; width:100%; max-width:1120px; margin:30px 0; align-items:stretch; }
@media (min-width: 1100px) {
.pricing-grid { grid-template-columns:repeat(5, 1fr); }
}
.pricing-card { background:rgba(22,24,30,0.7); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,0.08); border-radius:14px; padding:14px 12px; text-align:center; position:relative; transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow:0 4px 20px rgba(0,0,0,0.4); overflow:hidden; display:flex; flex-direction:column; height:100%; min-height:0; }
.pricing-card.popular { background:rgba(22,24,30,0.7); border:1px solid rgba(16,185,129,0.45); box-shadow:0 0 12px rgba(16,185,129,0.12); z-index:2; }
@media (min-width: 769px) {
  .pricing-card.popular { transform: scale(1.02); }
}
.popular-badge { position:relative; top:auto; left:auto; transform:none; display:inline-flex; align-items:center; gap:4px; background:rgba(16,185,129,0.1); border:1px solid rgba(16,185,129,0.28); color:#8fd4b8; padding:3px 9px; border-radius:10px; font-size:0.58rem; font-weight:700; letter-spacing:.8px; text-transform:uppercase; box-shadow:none; white-space:nowrap; z-index:2; margin:0 auto 6px; width:fit-content; }
.popular-badge svg { width:10px; height:10px; opacity:0.85; }
.popular-badge.sm { padding:2px 8px; font-size:0.54rem; margin-bottom:6px; }
.popular-badge.sm svg { width:9px; height:9px; }
.pricing-card:hover { transform:translateY(-4px); box-shadow:0 14px 32px rgba(0,0,0,0.5), 0 0 14px rgba(16,185,129,0.14); border-color:rgba(16,185,129,0.35); }
.pricing-card.popular:hover { transform:translateY(-4px) scale(1.03); box-shadow:0 16px 36px rgba(0,0,0,0.5), 0 0 22px rgba(16,185,129,0.3); }
.pricing-period { font-size:0.95rem; font-weight:600; color:#00ff88; margin-bottom:6px; text-shadow:0 0 15px rgba(0,255,136,0.4); word-wrap: break-word; }
.pricing-price { font-size:1.15rem; font-weight:700; color:#fff; margin-bottom:8px; text-shadow:0 4px 8px rgba(0,0,0,0.5); word-wrap: break-word; }
.pricing-price small { font-size:0.75rem; color:#7a9f7a; }
.pricing-price-rub { display:inline-flex; align-items:center; justify-content:center; gap:6px; font-size:1.55rem; color:#ffaa00; margin-bottom:8px; font-weight:800; }
.pricing-price-rub small { font-size:0.7rem; color:#888; }
.sbp-mark { display:inline-flex; align-items:center; gap:5px; padding:0; border:none; background:transparent; box-shadow:none; line-height:1; flex-shrink:0; vertical-align:middle; }
.sbp-mark svg { height:22px; width:auto; display:block; flex-shrink:0; }
.sbp-mark-txt { font-size:0.72rem; font-weight:800; color:#e4e9f2; letter-spacing:0.02em; line-height:1; text-transform:lowercase; }
.business-slot-toggle { display:flex; gap:5px; justify-content:center; margin:0 0 6px; flex-wrap:wrap; width:100%; flex-shrink:0; }
.business-slot-btn { flex:1; min-width:0; padding:5px 4px; font-size:0.66rem; font-weight:600; line-height:1.15; border-radius:8px; border:1px solid rgba(255,255,255,0.14) !important; background:rgba(0,0,0,0.35) !important; color:#9bb5a4 !important; cursor:pointer; transition:border-color .2s, background .2s, color .2s, box-shadow .2s, opacity .2s; opacity:0.7; box-shadow:none !important; }
.business-slot-btn.active { opacity:1; border:2px solid #10b981 !important; background:rgba(16,185,129,0.22) !important; color:#fff !important; box-shadow:0 0 0 2px rgba(16,185,129,0.4), 0 4px 16px rgba(16,185,129,0.2) !important; }
#businessPricingCard .business-slot-btn.active::before { content:'✓ '; }
#businessPricingCard { padding:12px 10px; position:relative; }
#businessPricingCard .pricing-features {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 0;
  font-size: 0.7rem;
  flex: 1 1 auto;
  grid-template-columns: none;
}
#businessPricingCard .pricing-features li {
  margin-bottom: 0;
  align-items: flex-start;
  line-height: 1.3;
  gap: 5px;
}
#businessPricingCard.biz-owned {
  border-color: rgba(16,185,129,0.35) !important;
  box-shadow: 0 0 0 1px rgba(16,185,129,0.18), 0 8px 24px rgba(0,0,0,0.35) !important;
}
#businessPricingCard.biz-owned .pricing-price-rub,
#businessPricingCard.biz-owned .pricing-price,
#businessPricingCard.biz-owned .business-slot-toggle {
  filter: blur(5.5px);
  opacity: 0.42;
  pointer-events: none !important;
  user-select: none;
}
#businessPricingCard .biz-owned-badge {
  display: none;
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  z-index: 3;
  width: calc(100% - 28px);
  padding: 10px 12px;
  border-radius: 12px;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.35;
  color: #e8fff3;
  background: rgba(8,18,14,0.88);
  border: 1px solid rgba(16,185,129,0.45);
  box-shadow: 0 8px 22px rgba(0,0,0,0.35);
  pointer-events: none;
}
#businessPricingCard.biz-owned .biz-owned-badge { display: block; }
#businessPricingCard.biz-owned .pricing-btn {
  background: rgba(16,185,129,0.12) !important;
  border-color: rgba(16,185,129,0.4) !important;
  color: #00ff88 !important;
  cursor: pointer;
}
html[data-theme="light"] #businessPricingCard.biz-owned .biz-owned-badge {
  color: #065f46;
  background: rgba(255,255,255,0.94);
  border-color: rgba(5,150,105,0.4);
  box-shadow: 0 8px 22px rgba(16,24,40,0.12);
}
html[data-theme="light"] #businessPricingCard.biz-owned .pricing-btn {
  background: #ecfdf5 !important;
  border-color: rgba(5,150,105,0.4) !important;
  color: #047857 !important;
}
#paymentOverlay .business-slot-btn { padding:10px 8px; font-size:0.78rem; font-weight:600; opacity:0.72; background:rgba(0,0,0,0.35) !important; border:1px solid rgba(255,255,255,0.14) !important; color:#a8c4b0 !important; box-shadow:none !important; }
#paymentOverlay .business-slot-btn.active { opacity:1; background:rgba(16,185,129,0.2) !important; border-color:#10b981 !important; color:#fff !important; box-shadow:0 0 0 2px rgba(16,185,129,0.35), 0 4px 14px rgba(16,185,129,0.15) !important; }
#paymentOverlay .biz-checkout-card { text-align:left; padding:16px 14px; cursor:default; }
#paymentOverlay .biz-checkout-title { text-align:center; font-size:1.05rem; font-weight:700; color:#00ff88; margin-bottom:10px; }
#paymentOverlay .biz-checkout-desc { font-size:0.8rem; line-height:1.45; color:#b8c8bc; margin:0 0 12px; padding:12px; border-radius:12px; background:rgba(0,0,0,0.28); border:1px solid rgba(255,255,255,0.08); }
#paymentOverlay .biz-checkout-desc b { color:#eef0f3; font-weight:600; }
#paymentOverlay .biz-checkout-desc ul { margin:8px 0 0; padding:0 0 0 18px; }
#paymentOverlay .biz-checkout-desc li { margin:4px 0; }
#paymentOverlay .biz-checkout-summary { text-align:center; margin-top:10px; padding:12px 10px; border-radius:12px; background:rgba(255,170,0,0.08); border:1px solid rgba(255,170,0,0.28); }
#paymentOverlay .biz-checkout-summary-label { font-size:0.72rem; color:#c9a46a; margin-bottom:4px; text-transform:uppercase; letter-spacing:.04em; }
#paymentOverlay .biz-checkout-summary-main { font-size:1.15rem; font-weight:800; color:#ffaa00; }
#paymentOverlay .biz-checkout-summary-sub { font-size:0.85rem; color:#8fd4b8; margin-top:3px; }
.gift-link-code { font-family:monospace; font-size:0.75rem; background:rgba(0,0,0,0.35); border:1px solid rgba(255,255,255,0.08); padding:8px 10px; border-radius:8px; cursor:pointer; word-break:break-all; color:#cceecc; margin:4px 0 8px; }
.gift-link-code:hover { border-color:rgba(0,255,136,0.35); color:#fff; }
.gift-tariff-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:10px 0; }
.gift-tariff-btn { padding:10px 8px; border-radius:10px; cursor:pointer; font-size:0.82rem; text-align:center; line-height:1.35; width:100%; }
.gift-pay-row { display:flex; gap:8px; flex-wrap:wrap; margin:10px 0; }
.gift-pay-btn { flex:1; min-width:90px; padding:9px 10px; border-radius:10px; cursor:pointer; font-size:0.8rem; }
.gift-tariff-btn.sel, .gift-pay-btn.sel { border-color:rgba(16,185,129,0.45) !important; background:rgba(28,31,38,0.95) !important; color:#eef0f3 !important; box-shadow:0 4px 16px rgba(16,185,129,0.18) !important; }
.gift-tariff-btn .gift-price-usdt { color:#10b981; font-size:0.78rem; font-weight:600; }
.gift-tariff-btn .gift-price-rub { color:#b8c0cc; font-size:0.72rem; }
.gift-item { padding:12px 0; border-bottom:1px solid rgba(255,255,255,0.06); }
.gift-item:last-child { border-bottom:none; }
.pricing-features { list-style:none; text-align:left; margin:0 0 0; color:#b0e0b0; font-size:0.8rem; flex:1 1 auto; }
.pricing-features li { margin-bottom:4px; display:flex; align-items:center; gap:6px; word-wrap: break-word; }
.li-ico { width:16px; height:16px; flex-shrink:0; display:inline-block; background-repeat:no-repeat; background-position:center; background-size:contain; }
.li-ico.ok { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310b981' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.2'/%3E%3Cpath d='M8.2 12.3l2.6 2.6 5-5.4'/%3E%3C/svg%3E"); }
.li-ico.hot { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f5a524' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.5c1.5 2.5-1 4-1 6.5 0 1.3 1 2 2 2 1.3 0 2.2-1.1 2-2.5 2 1.5 3.5 4 3.5 6.5a6.5 6.5 0 11-13 0c0-3 1.7-5 2.7-7 .6-1.3 1.3-3.2 1.3-5.5z'/%3E%3C/svg%3E"); }
.pricing-btn { width:100%; padding:10px; margin-top:auto; background:rgba(22,24,30,0.88); color:#eef0f3; border:1px solid rgba(255,255,255,0.12); border-radius:10px; font-weight:600; cursor:pointer; box-shadow:0 3px 12px rgba(0,0,0,0.35); transition:all 0.3s; font-size:0.9rem; white-space: nowrap; flex-shrink:0; }
.pricing-btn:hover { transform:translateY(-2px); background:rgba(28,31,38,0.95); border-color:rgba(16,185,129,0.45); box-shadow:0 6px 20px rgba(0,0,0,0.45); }
.offer-block { max-width: 1000px; width: 100%; margin: 20px auto; padding: 16px 20px; background: rgba(22,24,30,0.7); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; text-align: center; color: var(--text-secondary); font-size: 0.9rem; line-height: 1.5; box-shadow:0 4px 20px rgba(0,0,0,0.4); word-wrap: break-word; }
.offer-block a { color: #00ff88; text-decoration: underline; cursor: pointer; font-weight:600; }
.site-footer { text-align: center; padding: 20px; color: #7a9f7a; font-size: 0.85rem; border-top: 1px solid rgba(0,255,136,0.1); margin-top: 30px; width: 100%; word-wrap: break-word; }
.page-scroll-end { width: 100%; height: 40px; flex-shrink: 0; pointer-events: none; }
.site-footer a { color: #00ff88; text-decoration: none; cursor: pointer; }
.referral-block { background:rgba(22,24,30,0.7); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,0.08); border-radius:16px; padding:28px 24px; text-align:center; max-width:600px; width:100%; margin:30px auto; box-shadow:0 8px 24px rgba(0,0,0,0.4); position:relative; overflow:visible; }
.referral-block::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg, transparent, #00ff88, transparent); border-radius: 16px 16px 0 0; }
.referral-title { font-size:1.4rem; font-weight:700; color:#fff; margin-bottom:14px; text-shadow:0 2px 8px rgba(0,0,0,0.5); word-wrap: break-word; }
.referral-text { color:#e0ffe0; margin-bottom:20px; font-size:1.05rem; line-height:1.5; word-wrap: break-word; }
.referral-text b { color:#00ff88; font-size:1.15rem; }
.referral-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: rgba(22,24,30,0.88); color: #eef0f3; padding: 14px 36px; border-radius: 12px; font-weight: 600; font-size: 1.05rem; border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 3px 12px rgba(0,0,0,0.35); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; position: relative; overflow: hidden; white-space: nowrap; }
.referral-btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent); transition: left 0.5s; }
.referral-btn:hover { transform: translateY(-2px); background: rgba(28,31,38,0.95); border-color: rgba(16,185,129,0.45); box-shadow: 0 6px 20px rgba(0,0,0,0.45); }
.referral-btn:hover::before { left: 100%; }
@media (max-width:768px) {
  .home-flow, .features-grid, .pricing-grid, .steps-section, .hero-section, .offer-block, .referral-block, .site-footer {
    width: 100%; max-width: 100%; min-width: 0; margin-left: 0; margin-right: 0; box-sizing: border-box;
  }
  .referral-block { padding: 24px 16px; margin-top: 24px; margin-bottom: 24px; }
  .referral-title { font-size: 1.25rem; }
  .referral-text { font-size: 0.95rem; }
  .referral-btn { width: 100%; padding: 16px; white-space: normal; }
  .offer-block { margin-top: 16px; margin-bottom: 16px; padding: 14px; font-size: 0.85rem; }
  .site-footer { padding: 16px; font-size: 0.8rem; }
  .hero-cta { white-space: normal; max-width: 100%; }
  .pricing-card.popular, .pricing-card.popular:hover, .hero-cta:hover, .referral-btn:hover {
    transform: none !important;
  }
}

.main .features-grid .feature-card {
  background: transparent !important; border: none !important; box-shadow: none !important; overflow: visible !important;
}
.main .features-grid .feature-card::before,
.main .features-grid .feature-card::after { display: none !important; }
.main .features-grid .feature-card:hover {
  transform: none !important; box-shadow: none !important; border-color: transparent !important;
}

.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}
.news-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
  position: relative;
}
.news-card .news-icon { margin-bottom: 4px; line-height: 1; }
.news-card .news-headline { font-weight: 700; line-height: 1.3; word-wrap: break-word; }
.news-card .news-date { font-size: 0.8rem; color: #7a9f7a; font-weight: 500; }
.news-card .news-text {
  color: #b0e0b0; font-size: 0.95rem; line-height: 1.6; flex: 1;
  word-wrap: break-word;
}
.news-card .news-tag {
  display: inline-block; padding: 5px 12px; font-size: 0.75rem;
  text-transform: uppercase; letter-spacing: 0.5px; align-self: flex-start;
  white-space: nowrap;
}
@media (max-width: 768px) {
  .news-grid { grid-template-columns: 1fr; gap: 16px; }
}

/* landing page (STEK v2) specifics */
html[data-theme="light"]{--stek-btn-bg:#ffffff;--stek-btn-border:rgba(16,24,40,0.12);--stek-btn-text:#10151c;}
html[data-theme="light"] :is(.feature-card,.pricing-card,.pricing-card.popular,.action-btn){background:#ffffff !important;border:1px solid rgba(16,24,40,0.10) !important;box-shadow:0 6px 22px rgba(16,24,40,0.07) !important}
html[data-theme="light"] .main .features-grid .feature-card{background:transparent !important;border:none !important;box-shadow:none !important}
html[data-theme="light"] :is(.btn,.btn-small,.pricing-btn,.hero-cta,.referral-btn,.retro-btn,.free-promo-btn,.quick-extend-btn,.menu-footer-btn,.ticket-btn,.back-btn,.currency-btn,.action-btn):hover{background:#f4fbf8 !important;border-color:rgba(16,185,129,0.45) !important;box-shadow:0 6px 18px rgba(16,24,40,0.10) !important;color:#10151c !important}
html[data-theme="light"] :is(.features-grid,.pricing-grid,.action-btn-container) :where(p,span,div,li,strong,b,small,h1,h2,h3,h4){color:#20293a !important}
html[data-theme="light"] .steps-header{color:#20293a !important}
html[data-theme="light"] .steps-header .steps-accent{color:#00a862 !important;text-shadow:none}
html[data-theme="light"] .step-title{color:#20293a !important}
html[data-theme="light"] .step-desc{color:#4b5565 !important}
html[data-theme="light"] .step-num{color:#00a862 !important;background:rgba(0,255,136,0.08) !important;border-color:rgba(0,168,98,0.3) !important;box-shadow:0 0 12px rgba(0,255,136,0.08) !important}
html[data-theme="light"] .steps-grid::before{background:linear-gradient(90deg, transparent, rgba(0,168,98,0.18) 15%, rgba(0,168,98,0.18) 85%, transparent) !important}
@media (max-width:560px){html[data-theme="light"] .steps-grid::before{background:linear-gradient(180deg, transparent, rgba(0,168,98,0.18) 15%, rgba(0,168,98,0.18) 85%, transparent) !important}}
html[data-theme="light"] .feature-desc,html[data-theme="light"] .pricing-price-rub small{color:#5b6470 !important}
html[data-theme="light"] .sbp-mark-txt{color:#1A1744}
html[data-theme="light"] .pricing-price,html[data-theme="light"] .pricing-period{color:#10151c !important}

/* Main page — glass buttons from old landing, no neon fills */
.main .hero-cta,
.main .action-btn,
.main .offer-block,
.main .referral-block {
  backdrop-filter: blur(2px) !important;
  -webkit-backdrop-filter: blur(2px) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.12) !important;
}
.hero-cta,
.main .hero-cta { background: rgba(22,24,30,0.42) !important; color: #eef0f3 !important; }
.main .pricing-btn,
.main .referral-btn {
  background: var(--stek-btn-bg, rgba(22,24,30,0.88)) !important;
  color: var(--stek-btn-text, #eef0f3) !important;
  border: 1px solid var(--stek-btn-border, rgba(255,255,255,0.12)) !important;
  box-shadow: 0 3px 12px rgba(0,0,0,0.35) !important;
  font-weight: 600 !important;
}
.main .hero-cta:hover,
.main .pricing-btn:hover,
.main .referral-btn:hover {
  background: rgba(28,31,38,0.95) !important;
  color: #eef0f3 !important;
  border-color: rgba(16,185,129,0.45) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.45), 0 0 14px rgba(16,185,129,0.12) !important;
}
html[data-theme="light"] .main .hero-cta,
html[data-theme="light"] .hero-cta,
html[data-theme="light"] .pricing-btn,
html[data-theme="light"] .main .pricing-btn,
html[data-theme="light"] .referral-btn,
html[data-theme="light"] .main .referral-btn {
  background: #ffffff !important;
  color: #10151c !important;
  border: 1px solid rgba(16,24,40,0.12) !important;
  box-shadow: 0 3px 14px rgba(16,24,40,0.08) !important;
}
html[data-theme="light"] .main .hero-cta:hover,
html[data-theme="light"] .hero-cta:hover,
html[data-theme="light"] .pricing-btn:hover,
html[data-theme="light"] .main .pricing-btn:hover,
html[data-theme="light"] .referral-btn:hover,
html[data-theme="light"] .main .referral-btn:hover {
  background: #f4fbf8 !important;
  border-color: rgba(16,185,129,0.45) !important;
  box-shadow: 0 6px 18px rgba(16,24,40,0.10) !important;
  color: #10151c !important;
}
.main .action-btn { background: rgba(22,24,30,0.38) !important; }
.main .action-btn:hover { background: rgba(28,31,38,0.52) !important; }
.main .offer-block { background: rgba(22,24,30,0.38) !important; }
.main .referral-block { background: rgba(22,24,30,0.38) !important; }
.main .pricing-card {
  background: rgba(22,24,30,0.38) !important;
  background-image: none !important;
  backdrop-filter: blur(2px) !important;
  -webkit-backdrop-filter: blur(2px) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.15) !important;
}
.main .pricing-card.popular {
  background: rgba(22,24,30,0.38) !important;
  background-image: none !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.15) !important;
}
.main .pricing-card:hover,
.main .pricing-card.popular:hover {
  background: rgba(22,24,30,0.42) !important;
  transform: translateY(-2px) !important;
  border-color: rgba(255,255,255,0.12) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2) !important;
}
html[data-theme="light"] .main .action-btn,
html[data-theme="light"] .main .pricing-card,
html[data-theme="light"] .main .pricing-card.popular {
  background: #ffffff !important;
  border: 1px solid rgba(16,24,40,0.10) !important;
  box-shadow: 0 6px 22px rgba(16,24,40,0.07) !important;
}
html[data-theme="light"] .main .action-btn:hover,
html[data-theme="light"] .main .pricing-card:hover,
html[data-theme="light"] .main .pricing-card.popular:hover {
  background: #f4fbf8 !important;
  border-color: rgba(16,185,129,0.45) !important;
  box-shadow: 0 6px 18px rgba(16,24,40,0.10) !important;
}
html[data-theme="light"] .main .offer-block,
html[data-theme="light"] .main .referral-block {
  background: #ffffff !important;
  box-shadow: 0 6px 22px rgba(16,24,40,0.07) !important;
}

.admin-console-submit {
  background: var(--stek-btn-bg, rgba(22,24,30,0.88)) !important;
  color: var(--stek-btn-text, #eef0f3) !important;
  border: 1px solid var(--stek-btn-border, rgba(255,255,255,0.12)) !important;
  box-shadow: 0 3px 12px rgba(0,0,0,0.35) !important;
  font-weight: 600 !important;
}
.admin-console-submit:hover {
  background: rgba(28,31,38,0.95) !important;
  border-color: rgba(16,185,129,0.45) !important;
  color: #eef0f3 !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.45) !important;
}
html[data-theme="light"] .admin-console-submit,
html[data-theme="light"] .admin-console-submit:hover {
  background: #ffffff !important;
  color: #10151c !important;
  border: 1px solid rgba(16,24,40,0.12) !important;
}

/* Выдать USDT: input + кнопка в ряд. .admin-modal button { width:100% } сжимал поле до спиннера. */
.admin-modal .admin-grant-row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  gap: 8px !important;
  width: 100% !important;
  margin-bottom: 10px !important;
  box-sizing: border-box !important;
}
.admin-modal .admin-grant-row input,
.admin-modal .admin-grant-row .admin-grant-input,
.admin-modal input.admin-grant-input {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 140px !important;
  max-width: none !important;
  margin-bottom: 0 !important;
  padding: 10px 12px !important;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  color: #fff;
  box-sizing: border-box !important;
}
.admin-modal .admin-grant-row button,
.admin-modal .admin-grant-row .admin-grant-btn,
.admin-modal button.admin-grant-btn {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 110px !important;
  max-width: none !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 10px 14px !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}
html[data-theme="light"] .admin-modal .admin-grant-row .admin-grant-input {
  background: rgba(255,255,255,0.92);
  color: #10151c;
  border-color: rgba(16,24,40,0.16);
}