@charset "UTF-8";
:root{
--body-bg:#f1f3f4;
--modal-bg:#ffffff;
--text-primary:#202124;
--text-secondary:#3c4043;
--text-disclaimer:#5f6368;
--border-color:#dadce0;
--link-color:#1a73e8;
--btn-green:#449e62;
--btn-green-hover:#3b8a55;
--badge-border:#00000010;
--pulse-color:rgba(68,158,98,0.4);
--pulse-color-fade:rgba(68,158,98,0)}
@media (prefers-color-scheme:dark){
:root{
--body-bg:#202124;
--modal-bg:#292a2d;
--text-primary:#e8eaed;
--text-secondary:#e8eaed;
--text-disclaimer:#9aa0a6;
--border-color:#3c4043;
--link-color:#8ab4f8;
--btn-green:#81c995;
--btn-green-hover:#5bb974;
--badge-border:transparent;
--pulse-color:rgba(129,201,149,0.4);
--pulse-color-fade:rgba(129,201,149,0)}
}
*{
margin:0;
padding:0;
box-sizing:border-box}
html,body{
height:100%}
body{
background:var(--body-bg);
display:flex;
justify-content:center;
align-items:flex-start;
padding-top:12vh;
font-family:'Roboto','Segoe UI',Tahoma,sans-serif;
color:var(--text-primary);
transition:background 0.2s,color 0.2s}
.premium-modal{
width:480px;
background:var(--modal-bg);
border-radius:16px;
box-shadow:0 10px 30px rgba(0,0,0,0.12),0 4px 10px rgba(0,0,0,0.06);
overflow:hidden;
display:flex;
flex-direction:column;
text-align:center;
padding:36px 32px 28px 32px;
position:relative}
.premium-modal::before{
content:'';
position:absolute;
top:0;
left:0;
right:0;
height:6px;
background:linear-gradient(90deg,#449e62,#81c995)}
.modal-header{
display:flex;
flex-direction:column;
align-items:center;
padding-bottom:16px}
.header-logo{
width:72px;
height:72px;
border-radius:16px;
margin-bottom:20px;
box-shadow:0 4px 12px rgba(0,0,0,0.08)}
.title{
font-size:24px;
font-weight:700;
color:var(--text-primary);
line-height:1.3}
.modal-body{
padding-bottom:24px}
.title-sub{
font-size:15px;
line-height:24px;
color:var(--text-secondary)}
.modal-footer{
display:flex;
flex-direction:column;
align-items:center}
@keyframes pulse-cta{
0%{
box-shadow:0 0 0 0 var(--pulse-color)}
70%{
box-shadow:0 0 0 16px var(--pulse-color-fade)}
100%{
box-shadow:0 0 0 0 var(--pulse-color-fade)}
}
.btn-download{
background:linear-gradient(180deg,#4db36f 0%,#449e62 100%);
border:none;
border-radius:10px;
color:#ffffff;
padding:16px 24px;
cursor:pointer;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
width:100%;
max-width:320px;
transition:transform 0.1s,box-shadow 0.2s;
margin-bottom:20px;
animation:pulse-cta 2s infinite ease-in-out}
@media (prefers-color-scheme:dark){
.btn-download{
color:#202124}
}
.btn-download:hover{
background:linear-gradient(180deg,#449e62 0%,#3b8a55 100%);
animation:none;
transform:translateY(-2px);
box-shadow:0 6px 20px rgba(68,158,98,0.4)}
.btn-main-text{
font-size:20px;
font-weight:600;
line-height:1.2;
margin-bottom:2px}
.btn-sub-text{
font-size:12px;
font-weight:400;
opacity:0.95}
.modal-disclaimer{
font-size:11px;
color:#9aa0a6;
line-height:18px;
margin-bottom:24px;
max-width:90%}
.modal-disclaimer a{
color:var(--link-color);
text-decoration:none}
.modal-disclaimer a:hover{
text-decoration:underline}
.badge-container{
display:flex;
justify-content:center;
width:100%}
.badge-img{
height:40px;
width:auto;
display:block;
cursor:pointer;
transition:opacity 0.15s}
.badge-img:hover{
opacity:0.85}
@media (max-width:520px){
.premium-modal{
width:100%;
margin:16px;
padding:28px 20px 24px 20px}
.btn-download{
max-width:100%}
}