@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-primary-bg:#1a73e8;
--btn-primary-text:#ffffff;
--btn-primary-hover:#1b66c9;
--btn-secondary-bg:transparent;
--btn-secondary-text:#1a73e8;
--btn-secondary-hover:#f8f9fa;
--badge-border:#00000010}
@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-primary-bg:#8ab4f8;
--btn-primary-text:#202124;
--btn-primary-hover:#aecbfa;
--btn-secondary-bg:transparent;
--btn-secondary-text:#8ab4f8;
--btn-secondary-hover:#3c4043;
--badge-border:transparent}
}
*{
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}
.chrome-native-modal{
width:520px;
background:var(--modal-bg);
border-radius:8px;
box-shadow:0 4px 6px rgba(0,0,0,0.1),0 1px 3px rgba(0,0,0,0.08);
overflow:hidden;
display:flex;
flex-direction:column}
.modal-header{
display:flex;
align-items:center;
padding:24px 24px 16px 24px}
.title{
font-size:16px;
font-weight:500;
color:var(--text-primary);
line-height:24px}
.modal-divider{
height:1px;
background:var(--border-color);
margin:0 24px}
.modal-body{
padding:0 24px 24px 24px}
.title-sub{
font-size:14px;
line-height:22px;
color:var(--text-secondary);
margin-bottom:20px}
.modal-disclaimer{
font-size:12px;
color:var(--text-disclaimer);
line-height:18px}
.modal-disclaimer a{
color:var(--link-color);
text-decoration:none}
.modal-disclaimer a:hover{
text-decoration:underline}
.modal-footer{
display:flex;
justify-content:space-between;
align-items:center;
padding:16px 24px 20px 24px;
background:var(--modal-bg)}
.footer-left{
display:flex;
align-items:center}
.badge-img{
height:35px;
width:auto;
display:block;
cursor:pointer}
.footer-right{
display:flex;
gap:8px;
align-items:center}
.btn-cancel,.btn-add{
font-family:'Roboto',sans-serif;
font-size:13px;
font-weight:500;
height:32px;
padding:0 16px;
border-radius:4px;
cursor:pointer;
border:none;
outline:none;
line-height:32px;
transition:background 0.1s,box-shadow 0.1s}
.btn-cancel{
background:var(--btn-secondary-bg);
color:var(--btn-secondary-text);
border:1px solid var(--border-color)}
.btn-cancel:hover{
background:var(--btn-secondary-hover)}
.btn-add{
background:var(--btn-primary-bg);
color:var(--btn-primary-text)}
.btn-add:hover{
background:var(--btn-primary-hover);
box-shadow:0 1px 2px rgba(0,0,0,0.15)}
@media (max-width:540px){
.chrome-native-modal{
width:100%;
margin:16px;
border-radius:8px}
.modal-footer{
flex-direction:column;
align-items:stretch;
gap:16px}
.footer-left{
justify-content:center}
.footer-right{
justify-content:flex-end}
}