*{
   box-sizing:border-box;
}

html,
body
{
   margin:0;
   padding:0;
   width:100%;
   min-height:100vh;
   font-family:Arial,sans-serif;
   background:url(images/dce659269993ee5c55a0543ecd2f159e.gif) center center / cover no-repeat fixed;
   color:#fff;
   overflow-x:hidden;
}

body:before
{
   content:"";
   position:fixed;
   inset:0;
   z-index:-1;
   background:radial-gradient(circle at top, rgba(118,64,255,0.2), transparent 34%), linear-gradient(180deg, rgba(2,4,18,0.22), rgba(2,4,18,0.76));
   pointer-events:none;
}

body.modal-open
{
   overflow:hidden;
}

a
{
   color:inherit;
   text-decoration:none;
}

button,
a
{
   -webkit-tap-highlight-color:transparent;
}

img
{
   display:block;
   width:100%;
   height:auto;
   border:0;
}

.site-header
{
   position:fixed;
   top:0;
   left:0;
   right:0;
   z-index:9000;
   background:linear-gradient(180deg, rgba(5,7,24,0.95), rgba(5,7,24,0.82));
   border-bottom:1px solid rgba(255,255,255,0.13);
   box-shadow:0 14px 42px rgba(0,0,0,0.38), 0 0 34px rgba(118,64,255,0.14);
   backdrop-filter:blur(16px);
   -webkit-backdrop-filter:blur(16px);
}

.site-header:after
{
   content:"";
   position:absolute;
   left:0;
   right:0;
   bottom:-1px;
   height:1px;
   background:linear-gradient(90deg, transparent, rgba(255,58,173,0.78), rgba(0,219,255,0.76), transparent);
   pointer-events:none;
}

.site-header-inner
{
   width:100%;
   max-width:1120px;
   min-height:74px;
   margin:0 auto;
   padding:10px 18px;
   display:flex;
   align-items:center;
   justify-content:space-between;
   gap:16px;
}

.header-brand
{
   width:132px;
   display:flex;
   align-items:center;
   filter:drop-shadow(0 0 16px rgba(255,255,255,0.18));
}

.menu-toggle
{
   position:relative;
   min-width:142px;
   padding:12px 19px;
   display:inline-flex;
   align-items:center;
   justify-content:center;
   gap:10px;
   border:1px solid rgba(255,255,255,0.28);
   border-radius:999px;
   background:linear-gradient(135deg, rgba(255,58,173,0.98), rgba(118,64,255,0.98) 52%, rgba(0,219,255,0.96));
   color:#fff;
   font-size:15px;
   font-weight:800;
   letter-spacing:0.45px;
   text-transform:uppercase;
   cursor:pointer;
   box-shadow:0 0 18px rgba(255,58,173,0.36), 0 0 30px rgba(0,219,255,0.18), 0 12px 24px rgba(0,0,0,0.36);
   text-shadow:0 1px 2px rgba(0,0,0,0.35);
   overflow:hidden;
   transition:transform 0.22s ease, box-shadow 0.22s ease, filter 0.22s ease, border-color 0.22s ease;
}

.menu-toggle:before
{
   content:"";
   position:absolute;
   top:0;
   left:-130%;
   width:76%;
   height:100%;
   background:linear-gradient(90deg, transparent, rgba(255,255,255,0.38), transparent);
   transform:skewX(-18deg);
   transition:left 0.58s ease;
   pointer-events:none;
}

.menu-toggle:hover
{
   transform:translateY(-2px) scale(1.025);
   border-color:rgba(255,255,255,0.45);
   box-shadow:0 0 24px rgba(255,58,173,0.58), 0 0 44px rgba(0,219,255,0.32), 0 16px 32px rgba(0,0,0,0.44);
   filter:saturate(1.14) brightness(1.05);
}

.menu-toggle:hover:before
{
   left:145%;
}

.menu-toggle:active
{
   transform:translateY(0) scale(0.97);
}

.menu-toggle-lines
{
   position:relative;
   z-index:1;
   width:24px;
   height:18px;
   display:flex;
   flex-direction:column;
   justify-content:space-between;
}

.menu-toggle-lines span
{
   display:block;
   height:2px;
   border-radius:10px;
   background:#fff;
   box-shadow:0 0 8px rgba(255,255,255,0.45);
   transition:transform 0.25s ease, opacity 0.2s ease;
}

.menu-toggle > span:last-child
{
   position:relative;
   z-index:1;
}

.site-header.menu-open .menu-toggle-lines span:nth-child(1)
{
   transform:translateY(8px) rotate(45deg);
}

.site-header.menu-open .menu-toggle-lines span:nth-child(2)
{
   opacity:0;
}

.site-header.menu-open .menu-toggle-lines span:nth-child(3)
{
   transform:translateY(-8px) rotate(-45deg);
}

.main-menu
{
   max-height:0;
   overflow:hidden;
   opacity:0;
   transform:translateY(-8px);
   transition:max-height 0.32s ease, opacity 0.22s ease, transform 0.28s ease;
}

.site-header.menu-open .main-menu
{
   max-height:720px;
   opacity:1;
   transform:translateY(0);
}

.main-menu-inner
{
   width:100%;
   max-width:640px;
   margin:0 auto;
   padding:4px 18px 20px;
   display:flex;
   flex-direction:column;
   gap:10px;
}

.menu-action
{
   position:relative;
   width:100%;
   min-height:64px;
   padding:11px 15px;
   display:flex;
   align-items:center;
   gap:14px;
   border:1px solid rgba(255,255,255,0.16);
   border-radius:20px;
   background:linear-gradient(135deg, rgba(255,255,255,0.13), rgba(255,255,255,0.06));
   color:#fff;
   font-family:Arial,sans-serif;
   text-align:left;
   cursor:pointer;
   box-shadow:0 10px 24px rgba(0,0,0,0.22);
   overflow:hidden;
   transition:transform 0.22s ease, border-color 0.22s ease, background 0.22s ease, box-shadow 0.22s ease;
}

.menu-action:before
{
   content:"";
   position:absolute;
   inset:0;
   background:linear-gradient(135deg, rgba(255,58,173,0.22), rgba(118,64,255,0.16) 48%, rgba(0,219,255,0.2));
   opacity:0;
   transition:opacity 0.22s ease;
   pointer-events:none;
}

.menu-action:after
{
   content:"";
   position:absolute;
   top:0;
   left:-90%;
   width:48%;
   height:100%;
   background:linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
   transform:skewX(-18deg);
   transition:left 0.55s ease;
   pointer-events:none;
}

.menu-action:hover
{
   transform:translateX(4px) translateY(-1px);
   border-color:rgba(255,255,255,0.34);
   background:linear-gradient(135deg, rgba(255,255,255,0.18), rgba(255,255,255,0.08));
   box-shadow:0 14px 30px rgba(0,0,0,0.34), 0 0 24px rgba(118,64,255,0.18);
}

.menu-action:hover:before
{
   opacity:1;
}

.menu-action:hover:after
{
   left:126%;
}

.menu-action:active
{
   transform:translateX(1px) scale(0.99);
}

.menu-action-icon
{
   position:relative;
   z-index:1;
   width:42px;
   height:42px;
   flex:0 0 42px;
   display:inline-flex;
   align-items:center;
   justify-content:center;
   border-radius:15px;
   background:linear-gradient(135deg, rgba(255,58,173,0.98), rgba(118,64,255,0.98) 52%, rgba(0,219,255,0.96));
   color:#fff;
   font-size:18px;
   font-weight:800;
   box-shadow:0 0 18px rgba(255,58,173,0.26), inset 0 0 10px rgba(255,255,255,0.18);
}

.menu-action-text
{
   position:relative;
   z-index:1;
   display:flex;
   flex-direction:column;
   gap:3px;
   min-width:0;
}

.menu-action-text strong
{
   font-size:16px;
   line-height:1.15;
   letter-spacing:0.2px;
}

.menu-action-text small
{
   color:rgba(255,255,255,0.68);
   font-size:13px;
   line-height:1.25;
}

.main-wrapper
{
   width:100%;
   max-width:900px;
   margin:0 auto;
   padding:132px 15px 50px;
   display:flex;
   flex-direction:column;
   align-items:center;
   gap:28px;
   transition:padding-top 0.3s ease;
}


.site-header.menu-open + .main-wrapper
{
   padding-top:770px;
}

.top-actions
{
   width:100%;
   max-width:700px;
   display:grid;
   grid-template-columns:repeat(2, minmax(0, 1fr));
   gap:14px;
   margin-top:50px;
}

.top-action
{
   position:relative;
   min-height:78px;
   padding:14px 16px;
   display:flex;
   align-items:center;
   justify-content:center;
   gap:13px;
   border:1px solid rgba(255,255,255,0.22);
   border-radius:22px;
   background:linear-gradient(135deg, rgba(255,58,173,0.96), rgba(118,64,255,0.96) 52%, rgba(0,219,255,0.92));
   color:#fff;
   box-shadow:0 18px 38px rgba(0,0,0,0.36), 0 0 28px rgba(118,64,255,0.26);
   overflow:hidden;
   text-align:left;
   text-shadow:0 1px 2px rgba(0,0,0,0.32);
   transition:transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease, filter 0.24s ease;
}

.top-action:before
{
   content:"";
   position:absolute;
   top:0;
   left:-115%;
   width:68%;
   height:100%;
   background:linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
   transform:skewX(-18deg);
   transition:left 0.62s ease;
   pointer-events:none;
}

.top-action:after
{
   content:"";
   position:absolute;
   inset:1px;
   border-radius:21px;
   background:linear-gradient(180deg, rgba(255,255,255,0.18), transparent 52%);
   pointer-events:none;
}

.top-action:hover
{
   transform:translateY(-3px) scale(1.02);
   border-color:rgba(255,255,255,0.42);
   box-shadow:0 22px 46px rgba(0,0,0,0.44), 0 0 34px rgba(255,58,173,0.34), 0 0 42px rgba(0,219,255,0.24);
   filter:saturate(1.12) brightness(1.04);
}

.top-action:hover:before
{
   left:138%;
}

.top-action:active
{
   transform:translateY(0) scale(0.98);
}

.top-action-icon
{
   position:relative;
   z-index:1;
   width:46px;
   height:46px;
   flex:0 0 46px;
   display:inline-flex;
   align-items:center;
   justify-content:center;
   border-radius:16px;
   background:rgba(255,255,255,0.16);
   border:1px solid rgba(255,255,255,0.18);
   box-shadow:inset 0 0 12px rgba(255,255,255,0.16), 0 8px 18px rgba(0,0,0,0.2);
   font-size:19px;
   font-weight:900;
}

.top-action-text
{
   position:relative;
   z-index:1;
   display:flex;
   flex-direction:column;
   gap:4px;
   min-width:0;
}

.top-action-text strong
{
   font-size:18px;
   line-height:1.1;
   letter-spacing:0.25px;
}

.top-action-text small
{
   color:rgba(255,255,255,0.78);
   font-size:13px;
   line-height:1.25;
}

.notice-section
{
   width:100%;
   max-width:820px;
   display:grid;
   grid-template-columns:repeat(2, minmax(0, 1fr));
   gap:16px;
}

.notice-card
{
   position:relative;
   min-height:174px;
   padding:22px;
   display:flex;
   align-items:flex-start;
   gap:16px;
   border-radius:24px;
   background:linear-gradient(135deg, rgba(255,255,255,0.12), rgba(255,255,255,0.055));
   border:1px solid rgba(255,255,255,0.15);
   box-shadow:0 18px 44px rgba(0,0,0,0.28), inset 0 0 30px rgba(255,255,255,0.035);
   backdrop-filter:blur(10px);
   -webkit-backdrop-filter:blur(10px);
   overflow:hidden;
}

.notice-card:before
{
   content:"";
   position:absolute;
   inset:0;
   background:radial-gradient(circle at top left, rgba(255,58,173,0.2), transparent 42%), radial-gradient(circle at bottom right, rgba(0,219,255,0.18), transparent 42%);
   opacity:0.88;
   pointer-events:none;
}

.notice-card > *
{
   position:relative;
   z-index:1;
}

.notice-icon
{
   width:48px;
   height:48px;
   flex:0 0 48px;
   display:flex;
   align-items:center;
   justify-content:center;
   border-radius:17px;
   background:linear-gradient(135deg, rgba(255,58,173,0.96), rgba(118,64,255,0.96) 52%, rgba(0,219,255,0.92));
   color:#fff;
   font-size:21px;
   font-weight:900;
   box-shadow:0 0 24px rgba(118,64,255,0.28);
}

.notice-card h2
{
   margin:0 0 10px;
   font-size:22px;
   line-height:1.18;
   text-shadow:0 0 16px rgba(0,219,255,0.16);
}

.notice-card p
{
   margin:0;
   color:rgba(255,255,255,0.76);
   font-size:15px;
   line-height:1.55;
}

.radio-section
{
   width:100%;
   max-width:760px;
   display:flex;
   flex-direction:column;
   align-items:center;
   gap:14px;
}

.radio-toggle
{
   position:relative;
   width:100%;
   min-height:82px;
   padding:15px 18px;
   display:flex;
   align-items:center;
   justify-content:center;
   gap:14px;
   border:1px solid rgba(255,255,255,0.24);
   border-radius:24px;
   background:linear-gradient(135deg, rgba(255,58,173,0.96), rgba(118,64,255,0.96) 52%, rgba(0,219,255,0.92));
   color:#fff;
   font-family:Arial,sans-serif;
   cursor:pointer;
   box-shadow:0 18px 38px rgba(0,0,0,0.36), 0 0 28px rgba(118,64,255,0.26);
   overflow:hidden;
   text-align:left;
   text-shadow:0 1px 2px rgba(0,0,0,0.32);
   transition:transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease, filter 0.24s ease;
}

.radio-toggle:before
{
   content:"";
   position:absolute;
   top:0;
   left:-115%;
   width:68%;
   height:100%;
   background:linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
   transform:skewX(-18deg);
   transition:left 0.62s ease;
   pointer-events:none;
}

.radio-toggle:after
{
   content:"";
   position:absolute;
   inset:1px;
   border-radius:23px;
   background:linear-gradient(180deg, rgba(255,255,255,0.18), transparent 52%);
   pointer-events:none;
}

.radio-toggle:hover
{
   transform:translateY(-3px) scale(1.015);
   border-color:rgba(255,255,255,0.44);
   box-shadow:0 22px 46px rgba(0,0,0,0.44), 0 0 34px rgba(255,58,173,0.34), 0 0 42px rgba(0,219,255,0.24);
   filter:saturate(1.12) brightness(1.04);
}

.radio-toggle:hover:before
{
   left:138%;
}

.radio-toggle-icon
{
   position:relative;
   z-index:1;
   width:48px;
   height:48px;
   flex:0 0 48px;
   display:flex;
   align-items:center;
   justify-content:center;
   border-radius:17px;
   background:rgba(255,255,255,0.16);
   border:1px solid rgba(255,255,255,0.18);
   box-shadow:inset 0 0 12px rgba(255,255,255,0.16), 0 8px 18px rgba(0,0,0,0.2);
   font-size:24px;
   font-weight:900;
}

.radio-toggle-text
{
   position:relative;
   z-index:1;
   display:flex;
   flex-direction:column;
   gap:4px;
}

.radio-toggle-text strong
{
   font-size:20px;
   line-height:1.1;
}

.radio-toggle-text small
{
   color:rgba(255,255,255,0.78);
   font-size:13px;
   line-height:1.25;
}

.radio-player-box
{
   width:100%;
   max-height:0;
   opacity:0;
   overflow:hidden;
   border-radius:26px;
   background:rgba(0,0,0,0.58);
   border:1px solid rgba(255,255,255,0.14);
   box-shadow:0 18px 46px rgba(0,0,0,0.3);
   backdrop-filter:blur(10px);
   -webkit-backdrop-filter:blur(10px);
   transform:translateY(-8px);
   transition:max-height 0.34s ease, opacity 0.25s ease, transform 0.28s ease, padding 0.28s ease;
}

.radio-player-box.active
{
   max-height:300px;
   opacity:1;
   padding:14px;
   transform:translateY(0);
}

.radio-player-header
{
   display:flex;
   align-items:center;
   justify-content:space-between;
   gap:14px;
   padding:4px 6px 12px;
}

.radio-player-header span
{
   display:inline-flex;
   margin-bottom:4px;
   color:#8ff4ff;
   font-size:12px;
   font-weight:800;
   letter-spacing:1px;
   text-transform:uppercase;
}

.radio-player-header h2
{
   margin:0;
   font-size:22px;
   line-height:1.15;
}

.radio-player-header strong
{
   padding:7px 12px;
   border-radius:999px;
   background:rgba(255,58,173,0.18);
   border:1px solid rgba(255,255,255,0.16);
   color:#fff;
   font-size:12px;
   letter-spacing:1px;
   text-transform:uppercase;
   box-shadow:0 0 18px rgba(255,58,173,0.24);
}

.radio-frame-wrap
{
   overflow:hidden;
   border-radius:18px;
   border:1px solid rgba(255,255,255,0.12);
   background:#050814;
   box-shadow:inset 0 0 20px rgba(255,255,255,0.04);
}

.radio-frame-wrap iframe
{
   width:100%;
   height:170px;
   display:block;
   border:0;
}

.blog-frame
{
   width:100%;
   background:rgba(0,0,0,0.55);
   border-radius:18px;
   overflow:hidden;
   border:1px solid rgba(255,255,255,0.12);
   backdrop-filter:blur(6px);
   -webkit-backdrop-filter:blur(6px);
   box-shadow:0 18px 46px rgba(0,0,0,0.28);
}

.blog-frame
{
   max-width:700px;
   padding:12px;
}

.blog-frame iframe
{
   width:100%;
   height:450px;
   border:0;
   border-radius:12px;
   background:#000;
}

.help-section
{
   width:100%;
   max-width:820px;
}

.help-card
{
   position:relative;
   width:100%;
   padding:26px;
   display:flex;
   align-items:center;
   justify-content:space-between;
   gap:20px;
   border-radius:28px;
   background:radial-gradient(circle at top left, rgba(255,58,173,0.2), transparent 38%), radial-gradient(circle at bottom right, rgba(0,219,255,0.18), transparent 38%), rgba(0,0,0,0.55);
   border:1px solid rgba(255,255,255,0.15);
   box-shadow:0 18px 46px rgba(0,0,0,0.3), inset 0 0 30px rgba(255,255,255,0.035);
   backdrop-filter:blur(10px);
   -webkit-backdrop-filter:blur(10px);
   overflow:hidden;
}

.help-card-content
{
   max-width:560px;
}

.help-badge
{
   display:inline-flex;
   margin-bottom:12px;
   padding:7px 14px;
   border-radius:999px;
   background:rgba(255,255,255,0.12);
   border:1px solid rgba(255,255,255,0.18);
   color:#dff9ff;
   font-size:12px;
   font-weight:800;
   letter-spacing:1px;
   text-transform:uppercase;
}

.help-card h2
{
   margin:0 0 10px;
   font-size:28px;
   line-height:1.15;
}

.help-card p
{
   margin:0;
   color:rgba(255,255,255,0.76);
   font-size:15px;
   line-height:1.6;
}

.help-button
{
   position:relative;
   min-width:210px;
   min-height:58px;
   padding:13px 18px;
   border:1px solid rgba(255,255,255,0.24);
   border-radius:999px;
   background:linear-gradient(135deg, rgba(255,58,173,0.96), rgba(118,64,255,0.96) 52%, rgba(0,219,255,0.92));
   color:#fff;
   font-family:Arial,sans-serif;
   font-size:14px;
   font-weight:800;
   letter-spacing:0.35px;
   cursor:pointer;
   box-shadow:0 14px 30px rgba(0,0,0,0.34), 0 0 24px rgba(118,64,255,0.24);
   overflow:hidden;
   transition:transform 0.22s ease, box-shadow 0.22s ease, filter 0.22s ease;
}

.help-button:hover
{
   transform:translateY(-2px);
   box-shadow:0 18px 36px rgba(0,0,0,0.42), 0 0 32px rgba(0,219,255,0.28);
   filter:saturate(1.12) brightness(1.04);
}

.help-document-frame
{
   height:72vh;
   min-height:560px;
}

.footer
{
   width:100%;
   display:flex;
   flex-direction:column;
   align-items:center;
   gap:14px;
   padding-top:10px;
   text-align:center;
   font-size:15px;
}

.footer-repair-bar
{
   width:100%;
   max-width:820px;
   padding:16px 18px;
   display:flex;
   align-items:center;
   justify-content:space-between;
   gap:16px;
   border-radius:22px;
   background:linear-gradient(135deg, rgba(255,58,173,0.18), rgba(118,64,255,0.16) 52%, rgba(0,219,255,0.16)), rgba(0,0,0,0.58);
   border:1px solid rgba(255,255,255,0.16);
   box-shadow:0 16px 38px rgba(0,0,0,0.3), inset 0 0 26px rgba(255,255,255,0.035);
   backdrop-filter:blur(10px);
   -webkit-backdrop-filter:blur(10px);
}

.footer-repair-text
{
   display:flex;
   flex-direction:column;
   gap:5px;
   text-align:left;
}

.footer-repair-text strong
{
   font-size:16px;
   line-height:1.2;
}

.footer-repair-text span
{
   color:rgba(255,255,255,0.72);
   font-size:13px;
   line-height:1.45;
}

.footer-repair-button
{
   position:relative;
   min-width:210px;
   padding:12px 17px;
   display:inline-flex;
   align-items:center;
   justify-content:center;
   border-radius:999px;
   background:linear-gradient(135deg, rgba(255,58,173,0.98), rgba(118,64,255,0.98) 52%, rgba(0,219,255,0.96));
   border:1px solid rgba(255,255,255,0.24);
   color:#fff;
   font-size:13px;
   font-weight:800;
   letter-spacing:0.25px;
   box-shadow:0 12px 26px rgba(0,0,0,0.34), 0 0 22px rgba(118,64,255,0.24);
   overflow:hidden;
   transition:transform 0.22s ease, box-shadow 0.22s ease, filter 0.22s ease;
}

.footer-repair-button:before
{
   content:"";
   position:absolute;
   top:0;
   left:-120%;
   width:64%;
   height:100%;
   background:linear-gradient(90deg, transparent, rgba(255,255,255,0.34), transparent);
   transform:skewX(-18deg);
   transition:left 0.58s ease;
   pointer-events:none;
}

.footer-repair-button:hover
{
   transform:translateY(-2px);
   box-shadow:0 16px 32px rgba(0,0,0,0.42), 0 0 30px rgba(0,219,255,0.28);
   filter:saturate(1.12) brightness(1.04);
}

.footer-repair-button:hover:before
{
   left:140%;
}

.footer-copy
{
   width:100%;
   opacity:0.82;
}

.site-modal
{
   position:fixed;
   inset:0;
   z-index:9999;
   display:none;
   justify-content:center;
   align-items:center;
   padding:22px;
   background:rgba(0,0,0,0.72);
   backdrop-filter:blur(9px);
   -webkit-backdrop-filter:blur(9px);
}

.site-modal.active
{
   display:flex;
}

.site-modal-window
{
   position:relative;
   width:100%;
   max-width:680px;
   max-height:88vh;
   overflow:auto;
   padding:34px;
   border-radius:26px;
   background:radial-gradient(circle at top left, rgba(255,58,173,0.28), transparent 34%), radial-gradient(circle at top right, rgba(0,219,255,0.22), transparent 32%), rgba(8,10,28,0.94);
   border:1px solid rgba(255,255,255,0.18);
   box-shadow:0 0 40px rgba(118,64,255,0.24), 0 25px 70px rgba(0,0,0,0.62);
   animation:siteModalIn 0.22s ease-out;
}


.document-modal-window
{
   max-width:1040px;
   width:min(1040px, 96vw);
   max-height:92vh;
   padding:30px;
}

.document-modal-window .site-modal-header
{
   padding:6px 52px 18px;
}

.document-modal-window .site-modal-header h2
{
   font-size:34px;
}

.document-modal-window .site-modal-header p
{
   max-width:720px;
}

.document-frame
{
   width:100%;
   height:68vh;
   min-height:520px;
   border-radius:20px;
   overflow:hidden;
   background:#fff;
   border:1px solid rgba(255,255,255,0.18);
   box-shadow:inset 0 0 0 1px rgba(255,255,255,0.08), 0 14px 34px rgba(0,0,0,0.28);
}

.document-frame iframe
{
   width:100%;
   height:100%;
   display:block;
   border:0;
   background:#fff;
}

.support-modal-window
{
   max-width:560px;
}

@keyframes siteModalIn
{
   from
   {
      opacity:0;
      transform:translateY(16px) scale(0.96);
   }

   to
   {
      opacity:1;
      transform:translateY(0) scale(1);
   }
}

.site-modal-close
{
   position:absolute;
   top:14px;
   right:14px;
   width:42px;
   height:42px;
   border:1px solid rgba(255,255,255,0.18);
   border-radius:50%;
   background:rgba(255,255,255,0.1);
   color:#fff;
   font-size:30px;
   line-height:1;
   cursor:pointer;
   transition:background 0.2s ease, transform 0.2s ease;
}

.site-modal-close:hover
{
   background:rgba(255,255,255,0.2);
   transform:rotate(90deg);
}

.site-modal-header
{
   text-align:center;
   padding:8px 18px 20px;
}

.site-modal-badge
{
   display:inline-flex;
   margin-bottom:14px;
   padding:7px 16px;
   border-radius:999px;
   background:rgba(255,255,255,0.12);
   border:1px solid rgba(255,255,255,0.18);
   color:#dff9ff;
   font-size:13px;
   font-weight:700;
   letter-spacing:1.2px;
   text-transform:uppercase;
}

.site-modal-header h2
{
   margin:0 0 12px;
   font-size:38px;
   line-height:1.1;
   text-shadow:0 0 18px rgba(0,219,255,0.28);
}

.site-modal-header p
{
   max-width:520px;
   margin:0 auto;
   color:rgba(255,255,255,0.78);
   font-size:16px;
   line-height:1.6;
}

.site-modal-content
{
   margin-top:8px;
}

.modal-placeholder
{
   min-height:190px;
   padding:28px;
   display:flex;
   flex-direction:column;
   justify-content:center;
   align-items:center;
   gap:10px;
   text-align:center;
   border:1px dashed rgba(255,255,255,0.24);
   border-radius:20px;
   background:rgba(255,255,255,0.07);
}

.modal-placeholder strong
{
   font-size:22px;
}

.modal-placeholder span
{
   max-width:460px;
   color:rgba(255,255,255,0.72);
   font-size:15px;
   line-height:1.55;
}

.stripe-box
{
   width:100%;
   max-width:360px;
   margin:0 auto;
   padding:22px 12px;
   display:flex;
   justify-content:center;
   overflow:hidden;
   border-radius:20px;
   background:rgba(255,255,255,0.07);
   border:1px solid rgba(255,255,255,0.12);
}

@media (max-width:768px)
{
   .site-header-inner
   {
      min-height:68px;
      padding:9px 14px;
   }

   .header-brand
   {
      width:116px;
   }

   .menu-toggle
   {
      min-width:124px;
      padding:11px 16px;
      font-size:14px;
   }

   .main-menu-inner
   {
      max-width:520px;
      padding:4px 14px 16px;
      gap:9px;
   }

   .menu-action
   {
      min-height:60px;
      border-radius:18px;
   }

   .menu-action-icon
   {
      width:39px;
      height:39px;
      flex-basis:39px;
      border-radius:14px;
   }

   .main-wrapper
   {
      gap:24px;
      padding:122px 14px 40px;
   }

   .site-header.menu-open + .main-wrapper
   {
      padding-top:700px;
   }

   .top-actions
   {
      max-width:620px;
      gap:12px;
   }

   .top-action
   {
      min-height:72px;
      padding:13px 14px;
      border-radius:20px;
   }

   .top-action-icon
   {
      width:42px;
      height:42px;
      flex-basis:42px;
      border-radius:15px;
   }

   .top-action-text strong
   {
      font-size:16px;
   }

   .blog-frame iframe
   {
      height:320px;
   }

   .site-modal-window
   {
      padding:30px 22px;
   }

   .document-modal-window
   {
      width:min(960px, 96vw);
      padding:26px 18px 18px;
   }

   .document-modal-window .site-modal-header
   {
      padding:8px 46px 16px;
   }

   .document-frame
   {
      height:70vh;
      min-height:480px;
      border-radius:18px;
   }

   .site-modal-header h2
   {
      font-size:32px;
   }
}

@media (max-width:480px)
{
   body
   {
      background-position:center top;
   }

   .site-header-inner
   {
      min-height:62px;
      padding:8px 10px;
   }

   .header-brand
   {
      width:102px;
   }

   .menu-toggle
   {
      min-width:108px;
      padding:10px 13px;
      gap:8px;
      font-size:12px;
      letter-spacing:0.25px;
   }

   .menu-toggle-lines
   {
      width:21px;
      height:16px;
   }

   .site-header.menu-open .menu-toggle-lines span:nth-child(1)
   {
      transform:translateY(7px) rotate(45deg);
   }

   .site-header.menu-open .menu-toggle-lines span:nth-child(3)
   {
      transform:translateY(-7px) rotate(-45deg);
   }

   .main-menu-inner
   {
      padding:3px 10px 13px;
      gap:8px;
   }

   .menu-action
   {
      min-height:58px;
      padding:10px 12px;
      gap:11px;
      border-radius:16px;
   }

   .menu-action:hover
   {
      transform:translateY(-1px);
   }

   .menu-action-icon
   {
      width:36px;
      height:36px;
      flex-basis:36px;
      border-radius:13px;
      font-size:16px;
   }

   .menu-action-text strong
   {
      font-size:14px;
   }

   .menu-action-text small
   {
      font-size:12px;
   }

   .main-wrapper
   {
      gap:20px;
      padding:108px 10px 35px;
   }

   .site-header.menu-open + .main-wrapper
   {
      padding-top:670px;
   }

   .top-actions
   {
      grid-template-columns:1fr;
      max-width:340px;
      gap:10px;
   }

   .top-action
   {
      min-height:64px;
      padding:11px 13px;
      border-radius:18px;
      justify-content:flex-start;
   }

   .top-action:hover
   {
      transform:translateY(-2px);
   }

   .top-action-icon
   {
      width:38px;
      height:38px;
      flex-basis:38px;
      border-radius:14px;
      font-size:17px;
   }

   .top-action-text strong
   {
      font-size:15px;
   }

   .top-action-text small
   {
      font-size:12px;
   }

   .radio-box
   {
      padding:8px;
   }

   .radio-box iframe
   {
      height:150px;
   }

   .blog-frame
   {
      padding:8px;
   }

   .blog-frame iframe
   {
      height:260px;
   }

   .footer
   {
      font-size:13px;
      line-height:1.5;
   }

   .footer-repair-bar
   {
      max-width:340px;
      padding:15px;
      flex-direction:column;
      align-items:stretch;
      gap:13px;
      border-radius:20px;
   }

   .footer-repair-text
   {
      text-align:center;
   }

   .footer-repair-text strong
   {
      font-size:15px;
   }

   .footer-repair-text span
   {
      font-size:12px;
   }

   .footer-repair-button
   {
      width:100%;
      min-width:0;
      padding:12px 14px;
      font-size:12px;
   }

   .site-modal
   {
      padding:12px;
      align-items:flex-start;
      overflow:auto;
   }

   .site-modal-window
   {
      max-height:none;
      margin:20px 0;
      padding:28px 16px 18px;
      border-radius:20px;
   }

   .site-modal-close
   {
      width:38px;
      height:38px;
      font-size:28px;
   }

   .site-modal-header
   {
      padding:12px 8px 18px;
   }

   .site-modal-header h2
   {
      font-size:28px;
   }

   .site-modal-header p
   {
      font-size:14px;
   }

   .modal-placeholder
   {
      min-height:160px;
      padding:20px 14px;
   }

   .modal-placeholder strong
   {
      font-size:19px;
   }

   .modal-placeholder span
   {
      font-size:14px;
   }

   .document-modal-window
   {
      width:100%;
      max-height:none;
      padding:24px 10px 12px;
      border-radius:20px;
   }

   .document-modal-window .site-modal-header
   {
      padding:10px 42px 14px;
   }

   .document-modal-window .site-modal-header h2
   {
      font-size:25px;
   }

   .document-modal-window .site-modal-header p
   {
      font-size:13px;
      line-height:1.45;
   }

   .document-frame
   {
      height:72vh;
      min-height:520px;
      border-radius:16px;
   }

   .document-frame iframe
   {
      height:100%;
   }

   .stripe-box
   {
      padding:16px 8px;
   }
}

.roadmap-list
{
   display:flex;
   flex-direction:column;
   gap:14px;
   text-align:left;
}

.roadmap-item
{
   display:flex;
   gap:14px;
   padding:16px;
   border-radius:18px;
   background:rgba(255,255,255,0.075);
   border:1px solid rgba(255,255,255,0.12);
   box-shadow:inset 0 0 22px rgba(255,255,255,0.03);
}

.roadmap-icon
{
   width:42px;
   height:42px;
   flex:0 0 42px;
   display:flex;
   align-items:center;
   justify-content:center;
   border-radius:14px;
   background:linear-gradient(135deg, rgba(255,58,173,0.98), rgba(118,64,255,0.98) 52%, rgba(0,219,255,0.96));
   color:#fff;
   font-size:13px;
   font-weight:800;
   box-shadow:0 0 20px rgba(118,64,255,0.28);
}

.roadmap-item strong
{
   display:block;
   font-size:17px;
   line-height:1.25;
   margin-bottom:6px;
}

.roadmap-item p
{
   margin:0;
   color:rgba(255,255,255,0.78);
   font-size:14px;
   line-height:1.55;
}

@media (max-width:480px)
{
   .roadmap-item
   {
      padding:14px;
      gap:12px;
   }

   .roadmap-icon
   {
      width:38px;
      height:38px;
      flex-basis:38px;
      font-size:12px;
   }

   .roadmap-item strong
   {
      font-size:15px;
   }

   .roadmap-item p
   {
      font-size:13px;
   }
}


@media (max-width:768px)
{
   .notice-section
   {
      max-width:620px;
      grid-template-columns:1fr;
      gap:12px;
   }

   .notice-card
   {
      min-height:auto;
      padding:19px;
      border-radius:22px;
   }

   .notice-card h2
   {
      font-size:20px;
   }

   .radio-section
   {
      max-width:620px;
   }

   .radio-toggle
   {
      min-height:74px;
      padding:13px 15px;
      border-radius:22px;
   }

   .radio-toggle-text strong
   {
      font-size:18px;
   }

   .help-card
   {
      flex-direction:column;
      align-items:flex-start;
      padding:22px;
      border-radius:24px;
   }

   .help-button
   {
      width:100%;
   }
}

@media (max-width:480px)
{
   .notice-section
   {
      max-width:340px;
   }

   .notice-card
   {
      padding:17px;
      gap:13px;
      border-radius:20px;
   }

   .notice-icon
   {
      width:40px;
      height:40px;
      flex-basis:40px;
      border-radius:14px;
      font-size:18px;
   }

   .notice-card h2
   {
      font-size:17px;
   }

   .notice-card p
   {
      font-size:13px;
      line-height:1.5;
   }

   .radio-section
   {
      max-width:340px;
   }

   .radio-toggle
   {
      min-height:66px;
      padding:12px 13px;
      justify-content:flex-start;
      border-radius:20px;
   }

   .radio-toggle-icon
   {
      width:40px;
      height:40px;
      flex-basis:40px;
      border-radius:14px;
      font-size:20px;
   }

   .radio-toggle-text strong
   {
      font-size:15px;
   }

   .radio-toggle-text small
   {
      font-size:12px;
   }

   .radio-player-box.active
   {
      padding:10px;
   }

   .radio-player-header h2
   {
      font-size:18px;
   }

   .radio-frame-wrap iframe
   {
      height:150px;
   }

   .help-card
   {
      max-width:340px;
      margin:0 auto;
      padding:18px;
      border-radius:22px;
   }

   .help-card h2
   {
      font-size:22px;
   }

   .help-card p
   {
      font-size:13px;
      line-height:1.55;
   }

   .help-button
   {
      min-width:0;
      min-height:54px;
      font-size:13px;
   }

   .help-document-frame
   {
      height:72vh;
      min-height:520px;
   }
}

/* ===== TopCzat: poprawione przyciski główne ===== */

.top-actions
{
   align-items:flex-start;
}

.chat-action-stack
{
   width:100%;
   display:flex;
   flex-direction:column;
   gap:10px;
}

.chat-action-stack .top-action
{
   width:100%;
}

.top-action-chat
{
   isolation:isolate;
   border-color:rgba(255,255,255,0.38);
   background:linear-gradient(135deg, #ff35b5 0%, #7c42ff 48%, #04cfff 100%);
   box-shadow:
      0 18px 44px rgba(0,0,0,0.42),
      0 0 22px rgba(255,58,173,0.62),
      0 0 42px rgba(0,219,255,0.45);
   animation:topChatGlow 2.1s ease-in-out infinite;
}

.top-action-chat:before
{
   left:-95%;
   width:58%;
   background:linear-gradient(90deg, transparent, rgba(255,255,255,0.58), transparent);
   animation:topChatShine 2.6s ease-in-out infinite;
}

.top-action-chat:after
{
   background:
      radial-gradient(circle at 18% 20%, rgba(255,255,255,0.33), transparent 26%),
      linear-gradient(180deg, rgba(255,255,255,0.2), transparent 58%);
}

.top-action-chat .top-action-icon
{
   background:rgba(255,255,255,0.2);
   box-shadow:
      inset 0 0 16px rgba(255,255,255,0.25),
      0 0 18px rgba(255,255,255,0.22),
      0 8px 18px rgba(0,0,0,0.22);
   animation:topChatIconPulse 1.45s ease-in-out infinite;
}

.chat-repair-button
{
   position:relative;
   width:100%;
   min-height:52px;
   padding:12px 16px;
   display:flex;
   align-items:center;
   justify-content:center;
   gap:10px;
   border-radius:18px;
   border:1px solid rgba(255,255,255,0.2);
   background:
      linear-gradient(135deg, rgba(255,255,255,0.16), rgba(255,255,255,0.07)),
      rgba(4,7,24,0.86);
   color:#fff;
   font-size:15px;
   font-weight:800;
   line-height:1;
   text-align:center;
   text-shadow:0 1px 2px rgba(0,0,0,0.45);
   box-shadow:
      0 12px 28px rgba(0,0,0,0.36),
      inset 0 0 18px rgba(255,255,255,0.045);
   overflow:hidden;
   transform:translateZ(0);
   transition:transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease, filter 0.22s ease;
}

.chat-repair-button:before
{
   content:"";
   position:absolute;
   inset:0;
   background:linear-gradient(135deg, rgba(255,58,173,0.22), rgba(118,64,255,0.18) 50%, rgba(0,219,255,0.2));
   opacity:0.72;
   pointer-events:none;
}

.chat-repair-button:after
{
   content:"";
   position:absolute;
   top:0;
   left:-120%;
   width:62%;
   height:100%;
   background:linear-gradient(90deg, transparent, rgba(255,255,255,0.28), transparent);
   transform:skewX(-18deg);
   transition:left 0.58s ease;
   pointer-events:none;
}

.chat-repair-button:hover
{
   transform:translateY(-2px);
   border-color:rgba(255,255,255,0.34);
   box-shadow:
      0 16px 34px rgba(0,0,0,0.45),
      0 0 22px rgba(118,64,255,0.28),
      0 0 24px rgba(0,219,255,0.18);
   filter:saturate(1.1) brightness(1.04);
}

.chat-repair-button:hover:after
{
   left:140%;
}

.chat-repair-button:active
{
   transform:translateY(0) scale(0.98);
}

.chat-repair-button span
{
   position:relative;
   z-index:1;
}

.chat-repair-icon
{
   width:28px;
   height:28px;
   display:inline-flex;
   align-items:center;
   justify-content:center;
   border-radius:10px;
   background:linear-gradient(135deg, rgba(255,58,173,0.95), rgba(118,64,255,0.95) 52%, rgba(0,219,255,0.92));
   box-shadow:0 0 16px rgba(118,64,255,0.32);
   font-size:16px;
   font-weight:900;
}

@keyframes topChatGlow
{
   0%, 100%
   {
      box-shadow:
         0 18px 44px rgba(0,0,0,0.42),
         0 0 20px rgba(255,58,173,0.58),
         0 0 36px rgba(0,219,255,0.36);
      transform:translateY(0);
   }

   50%
   {
      box-shadow:
         0 22px 52px rgba(0,0,0,0.48),
         0 0 34px rgba(255,58,173,0.9),
         0 0 58px rgba(0,219,255,0.66);
      transform:translateY(-1px);
   }
}

@keyframes topChatShine
{
   0%, 45%
   {
      left:-105%;
   }

   70%, 100%
   {
      left:145%;
   }
}

@keyframes topChatIconPulse
{
   0%, 100%
   {
      transform:scale(1);
   }

   50%
   {
      transform:scale(1.08);
   }
}

@media (max-width:768px)
{
   .top-actions
   {
      align-items:stretch;
   }

   .chat-repair-button
   {
      min-height:50px;
      border-radius:17px;
      font-size:14px;
   }
}

@media (max-width:480px)
{
   .chat-action-stack
   {
      width:100%;
      max-width:340px;
      margin:0 auto;
      gap:9px;
   }

   .chat-repair-button
   {
      min-height:48px;
      padding:11px 14px;
      border-radius:16px;
      font-size:13px;
   }

   .chat-repair-icon
   {
      width:26px;
      height:26px;
      border-radius:9px;
      font-size:15px;
   }
}



/* Wymuszenie: wszystkie główne przyciski jeden pod drugim na PC i mobile */
.top-actions
{
   width:100%;
   max-width:430px !important;
   display:flex !important;
   flex-direction:column !important;
   align-items:stretch !important;
   justify-content:center !important;
   gap:12px !important;
   margin:50px auto 0 !important;
}

.chat-action-stack
{
   width:100%;
   display:flex !important;
   flex-direction:column !important;
   align-items:stretch !important;
   gap:12px !important;
}

.top-actions .top-action
{
   width:100% !important;
   min-height:78px;
   justify-content:flex-start !important;
}

.top-actions .top-action-icon
{
   margin-left:4px;
}

@media (max-width:768px)
{
   .top-actions
   {
      max-width:360px !important;
      display:flex !important;
      flex-direction:column !important;
      gap:10px !important;
      margin-top:42px !important;
   }

   .chat-action-stack
   {
      gap:10px !important;
   }

   .top-actions .top-action
   {
      width:100% !important;
      min-height:68px;
   }
}

@media (max-width:480px)
{
   .top-actions
   {
      max-width:340px !important;
      display:flex !important;
      flex-direction:column !important;
      gap:10px !important;
      margin-top:38px !important;
   }

   .chat-action-stack
   {
      width:100%;
      display:flex !important;
      flex-direction:column !important;
      gap:10px !important;
   }

   .top-actions .top-action
   {
      width:100% !important;
      min-height:64px;
      justify-content:flex-start !important;
   }
}


/* ===== TopCzat: rotujące hasła reklamowe nad przyciskami ===== */

.promo-slogan-section
{
   width:100%;
   max-width:820px;
   margin:22px auto -18px;
   padding:0 10px;
   display:flex;
   justify-content:center;
   align-items:center;
   text-align:center;
   background:transparent !important;
   margin-top: 50px;
}

.promo-slogan-text
{
   width:100%;
   min-height:48px;
   display:flex;
   align-items:center;
   justify-content:center;
   background:transparent !important;
   color:#fff;
   font-size:30px;
   font-weight:900;
   line-height:1.18;
   letter-spacing:0.35px;
   text-transform:uppercase;
   text-shadow:
      0 0 10px rgba(255,58,173,0.88),
      0 0 22px rgba(118,64,255,0.72),
      0 0 34px rgba(0,219,255,0.58),
      0 2px 4px rgba(0,0,0,0.78);
   opacity:0;
   transform:translateY(8px) scale(0.98);
   transition:opacity 0.28s ease, transform 0.28s ease;
   animation:promoSloganPulse 1.65s ease-in-out infinite;
}

.promo-slogan-text.promo-slogan-show
{
   opacity:1;
   transform:translateY(0) scale(1);
}

@keyframes promoSloganPulse
{
   0%, 100%
   {
      filter:brightness(1);
      text-shadow:
         0 0 10px rgba(255,58,173,0.82),
         0 0 22px rgba(118,64,255,0.68),
         0 0 34px rgba(0,219,255,0.52),
         0 2px 4px rgba(0,0,0,0.78);
   }

   50%
   {
      filter:brightness(1.2);
      text-shadow:
         0 0 16px rgba(255,58,173,1),
         0 0 34px rgba(118,64,255,0.92),
         0 0 52px rgba(0,219,255,0.82),
         0 2px 4px rgba(0,0,0,0.82);
   }
}

@media (max-width:768px)
{
   .promo-slogan-section
   {
      max-width:620px;
      margin:18px auto -14px;
      margin-top: 50px;
   }

   .promo-slogan-text
   {
      min-height:44px;
      font-size:24px;
   }
}

@media (max-width:480px)
{
   .promo-slogan-section
   {
      max-width:340px;
      margin:16px auto -14px;
      padding:0;
   }

   .promo-slogan-text
   {
      min-height:42px;
      font-size:19px;
      line-height:1.2;
      letter-spacing:0.2px;
   }
}