:root{ --bg1: #e6f0ff; --bg2: #f8f9ff; --accent1: #2563eb; --accent2: #7c3aed; --card-bg: rgba(255,255,255,0.95); --muted: #6b7280; --radius: 12px; }

*{box-sizing:border-box;}

body{ font-family: 'Inter', system-ui, Arial, sans-serif; margin:0; background: linear-gradient(135deg,var(--bg1), var(--bg2)); -webkit-font-smoothing:antialiased; color:#0f172a; min-height:100vh; display:flex; flex-direction:column; }
header.site-header{ display:flex; align-items:center; justify-content:center; padding:18px 28px; background: linear-gradient(90deg,var(--accent1),var(--accent2)); color:white; box-shadow:0 6px 18px rgba(15,23,42,0.12); }
.brand{ display:flex; align-items:center; gap:12px; }
.logo{ width:42px; height:42px; border-radius:10px; background:rgba(255,255,255,0.18); display:flex; align-items:center; justify-content:center; font-weight:700; color:white; box-shadow:0 4px 10px rgba(0,0,0,0.08); }
nav.top-nav { display:flex; gap:12px; align-items:center; }
.nav-btn{ background:transparent; border:1px solid rgba(255,255,255,0.15); color:white; padding:8px 12px; border-radius:8px; cursor:pointer; font-weight:600; outline:none; }
.nav-btn:hover{ transform:translateY(-2px); box-shadow:0 6px 18px rgba(0,0,0,0.12); }
.wrap { width:94%; max-width:1100px; margin:28px auto; display:grid; grid-template-columns: 1fr 420px; gap:26px; align-items:start; }
@media (max-width:900px){ .wrap { grid-template-columns: 1fr; } .aside { order:2 } }
.card { background:var(--card-bg); border-radius:var(--radius); padding:22px; box-shadow:0 6px 20px rgba(12, 18, 39, 0.06); border: 1px solid rgba(15,23,42,0.04); }
h1.page-title{ margin:0 0 10px 0; font-size:22px; color:#0074cd; }
p.lead{ margin:0 0 18px 0; color:#07476f; font-weight:600;}
form.fieldset { display:flex; gap:12px; flex-direction:column; }
.product-label { color:#0e87d3; font-weight:900 !important; }
input[type="text"]{ padding:12px 14px; border-radius:10px; border:1px solid rgba(15,23,42,0.08); font-size:15px; background:linear-gradient(180deg, white, #fbfdff); outline:none; }
.actions { display:flex; gap:10px; margin-top:8px; }
.btn-create{ background:linear-gradient(90deg,var(--accent1),#1e90ff); color:white; border:none; padding:11px 16px; border-radius:10px; cursor:pointer; font-weight:700; } 
.btn-copy{ background:linear-gradient(90deg,var(--accent1),#1e90ff); color:white; border:none; padding:11px 16px; border-radius:10px; cursor:pointer; font-weight:700; }
.btn-ghost{ background:transparent; border:1px solid rgba(15,23,42,0.06); padding:11px 14px; border-radius:10px; cursor:pointer; }
.btn-modal-primary{background:linear-gradient(90deg,var(--accent1),#1e90ff); color:white; border:none; padding:11px 16px; border-radius:10px; cursor:pointer; font-weight:700; transition:all 0.2s ease;}
.btn-modal-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,0.12); }
.btn-login-modal { background: linear-gradient(90deg, var(--accent1), var(--accent2)); color: white; border: none; padding: 11px 16px; border-radius: 10px; cursor: pointer; font-weight: 700; transition: all 0.2s ease; } 
.btn-login-modal:hover {   transform: translateY(-2px);   box-shadow: 0 6px 18px rgba(0,0,0,0.12); }
#loginModal .login-modal-title { font-size: 18px; font-weight: 700; color: #7c3aed; margin-bottom: 8px; text-align: center; }


.result { margin-top:18px; padding:16px; background:linear-gradient(180deg,#ffffff,#fbfdff); border-radius:10px; border:1px solid rgba(15,23,42,0.04); }
.result .meta { margin-bottom:12px; }
.result h3 { margin:12px 0; color:#2563eb; }
.result-desc { margin:12px 0; color:#1e293b; }
.result-tags { margin:12px 0; color:#7c3aed; font-weight:600; }




.aside { display:flex; flex-direction:column; gap:14px; }
.plan-card { background: linear-gradient(180deg, rgba(255,255,255,0.95), #fff); padding:16px; font-weight:700; color:#0054ff; border-radius:12px; border:1px solid rgba(15,23,42,0.04); }
.plan-title{ font-weight:700; color:#2057c7; font-size:16px; margin-bottom:8px; }
.plan-price { font-size: 18px; text-shadow: 0 0 5px #003cb7, 0 0 10px #003cb7, 0 0 15px #003cb7, 0 0 20px #003cb7; top: -18px; left: 77px; position: relative; line-height: 0.1; color: #cdeeff; animation: bounce 1s infinite alternate;}

@keyframes bounce { 0% { transform: translateY(0); } 100% { transform: translateY(-5px); } }

.plan-cta { margin-top:10px; }
.plan-cta button{ width:100%; padding:10px; border-radius:10px; font-weight:700; border:none; background:linear-gradient(90deg,#4f46e5,#06b6d4); color:white; cursor:pointer; }

.trust-section { background: linear-gradient(180deg, rgba(255,255,255,0.95), #fff); padding:16px; font-weight:700; color:#0054ff; border-radius:12px; border:1px solid rgba(15,23,42,0.04); }
.trust-section .trust-title { font-weight:700; color:#2057c7; font-size:16px; margin-bottom:8px; }
.trust-section .trust-meta { font-weight:700; font-size:16px; color:#0054ff; line-height:1.5; }


.license-card { background: linear-gradient(180deg, rgba(255,255,255,0.95), #fff); padding:16px; font-weight:700; color:#0054ff; border-radius:12px; border:1px solid rgba(15,23,42,0.04); }
.license-card .license-title { font-weight:700; color:#2057c7; font-size:16px; margin-bottom:8px; }
.license-card .license-meta { font-weight:700; font-size:16px; color:#0054ff; line-height:1.5; }


.free-plan-card { background: linear-gradient(180deg, rgba(255,255,255,0.95), #fff); padding:16px; font-weight:700; color:#0054ff; border-radius:12px; border:1px solid rgba(15,23,42,0.04); }
.free-plan-title { font-weight:700; color:#2057c7; font-size:16px; margin-bottom:8px; }
.free-plan-meta { font-weight:700; color:#0054ff; font-size:16px; line-height:1.5; }
.plan-desc { margin-top:10px; font-weight:700; font-size:14px; color:#4985ff; }





.modal { display:none; position:fixed; z-index:1000; left:0; top:0; width:100%; height:100%; overflow:auto; background:rgba(0,0,0,0.4); }
.modal-content { background:white; margin:10% auto; padding:20px; color:#0074cd; font-weight:600; border-radius:12px; width:320px; text-align:center; }
.modal-content h3 { font-size:18px; font-weight:700; color:#2057c7; margin-bottom:8px; text-align:center; }
.modal-content input{ width:90%; padding:8px; margin:8px 0; border-radius:8px; border:1px solid #7c3aed; outline: none; }
#proModal .close { float: right; font-size: 22px; color: #2057c7 !important; cursor: pointer; }
.close-login { float: right; font-size: 22px; color: #7c3aed; cursor: pointer; }
.modal-content .close { color:#7c3aed; !important; font-size:22px; cursor:pointer; float:right; }



button, .nav-btn { transition: all .18s ease; }
.result pre { white-space:pre-wrap; word-break:break-word; }







/* Info boxes and popup */

.info-boxes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 20px 0; }
.info-box { background: #ffffff; color:#0f172a; padding: 12px 16px; border-radius: 12px; box-shadow: 0 3px 8px rgba(0,0,0,0.21); cursor: pointer; font-weight: 600; text-align: center; transition: all 0.2s ease; font-size: 14px; position: relative; }
.info-box:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0,0,0,0.12); background: #f0f7ff; }
.info-box::after { content: attr(data-tooltip); position: absolute; bottom: 120%; left: 50%; transform: translateX(-50%); background: #333; color: #fff; padding: 6px 10px; border-radius: 6px; font-size: 12px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; }
.info-box:hover::after { opacity: 1; }
.popup { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #fff; border-radius: 12px; box-shadow: 0 6px 18px rgba(0,0,0,0.2); padding: 20px; z-index: 1000; min-width: 250px; text-align: center; }
.popup button { margin-top: 12px; background: #f44336; color: #fff; border: none; padding: 6px 12px; border-radius: 6px; cursor: pointer; }


.about-box { text-align: center; padding: 25px; }
.about-box h3 { margin-bottom: 13px; margin-top: 15px; color: #5e00ff; font-weight: 700; font-size: 18px; text-align: center; }
.about-box p { margin-top: 0px; margin-bottom: 32px; line-height: 2.1; color: #7e5abd; }
.about-list { list-style: none; padding: 0; margin-top: 15px; text-align: left; line-height: 1.8; }
.about-list li { margin-bottom: 10px; margin-top: 15px; padding-left: 20px; color: #7e5abd; }
.advantages-title { margin-bottom: 15px !important; margin-top: 15px !important; color: #5e00ff !important; font-weight: 700 !important; font-size: 18px !important; text-align: center !important; line-height: 1.4 !important; }


.contact-box { text-align: center; padding: 20px; }
.contact-box h3 { margin-bottom: 15px; color: #5e00ff; font-weight: 700; font-size: 18px; }
.contact-mail { display: inline-block; padding: 10px 20px; background: linear-gradient(90deg, #5e00ff, #7e5abd); color: white; font-weight: bold; border-radius: 8px; text-decoration: none; transition: 0.3s ease; }
.contact-mail:hover { background: linear-gradient(90deg, #7e5abd, #5e00ff ); }


.privacy-box { text-align: center; padding: 20px; }
.privacy-box h3 { margin-bottom: 15px; color: #5e00ff; font-weight: 700; font-size: 18px; }
.privacy-box p { line-height: 2.1; color: #7e5abd; margin-bottom: 15px; margin-top: 20px; }


.terms-box h3 { margin-bottom: 15px; color: #5e00ff; font-weight:700; font-size: 18px; }
.terms-box p { margin-top: 20px; margin-bottom: 15px; line-height: 2; white-space: pre-line; color: #7e5abd; }


.policy-box { text-align: center; padding: 20px; }
.policy-box h3 { margin-bottom: 15px; color: #5e00ff; font-weight:700; font-size: 18px; }
.policy-box p { line-height: 2.1; color: #7e5abd; margin-bottom: 15px;  margin-top: 20px; }


.update-box { text-align: center; padding: 20px; } 
.update-box h3 { margin-bottom: 15px; color: #5e00ff; font-weight: 700; font-size: 18px; } 
.update-box p { line-height: 2.1; color: #7e5abd; margin-bottom: 15px;  margin-top: 20px; }


.site-foot { font-family: 'Poppins', sans-serif; font-size: 14px; text-align: center; padding: 20px 10px;}
.site-foot a { color: #300083; text-decoration: none; font-weight: 600; padding: 2px 6px; border-radius: 4px; background-color: rgba(124, 58, 237, 0.1); box-shadow: 0 2px 8px rgba(124, 58, 237, 0.4); transition: 0.3s;}
.site-foot a:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(124, 58, 237, 0.6);}
.site-foot span.copy { color: #300083; background-color: rgba(124, 58, 237, 0.1); padding: 2px 6px; border-radius: 4px; font-weight: 700; box-shadow: 0 2px 8px rgba(124, 58, 237, 0.4);}
.site-foot span.copy:hover {transform: translateY(-2px); box-shadow: 0 4px 12px rgba(124, 58, 237, 0.6);}
footer.site-foot { margin-top:auto; padding:18px 24px; text-align:center; color:var(--muted); font-size:14px; }










/* ================== TABLET (max 922px) ==================== */


@media (max-width: 922px) {


.wrap { grid-template-columns: 1fr !important; }


.aside { order: 2 !important; }


header.site-header { flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; }



footer.site-foot { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; padding: 12px 14px !important; text-align: left !important; font-size: 13px !important; }
 
.site-foot a { display: block !important; position: relative !important; top: -18px !important; margin-bottom: 4px !important; padding: 4px 8px !important; font-size: 13px !important; }

footer.site-foot .copy { display: block !important; position: relative !important; top: -18px !important; margin-bottom: 6px !important; font-size: 13px !important; text-align: left !important; }





.logo { width: 36px !important; height: 36px !important; }


h1.page-title { font-size: 20px !important; }


p.lead { font-size: 14px !important; }





.plan-card { position: relative !important; padding: 14px !important; font-size: 14px !important; }


.plan-price { position: absolute !important; font-size: 18px !important; text-shadow: 0 0 5px #003cb7,  0 0 10px #003cb7,  0 0 15px #003cb7,  0 0 20px #003cb7; color: #cdeeff; animation: bounce 1s infinite alternate; top: 22px !important; left: 92px !important; }


@keyframes bounce {  0% { transform: translateY(0); }  100% { transform: translateY(-5px); }  }




.free-plan-card { padding: 14px !important; font-size: 14px !important; }

.license-card { padding: 14px !important; font-size: 14px !important; }

.trust-section { padding: 14px !important; font-size: 14px !important; }



.modal-content { width: 40% !important; padding: 16px !important; }




#loginModal .modal-content { width: 40% !important; padding: 16px !important; } 

#loginModal .close-login { font-size: 20px !important; } 

#loginModal input { font-size: 14px !important; padding: 10px !important; } 

#loginModal .btn-login-modal { font-size: 14px !important; padding: 10px 14px !important; margin-top: 7px !important; }



#languageSelect { position: absolute !important; top: -81px !important; right: -9px !important; z-index: 10 !important; }





.info-boxes { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }

.info-box { font-size: 13px !important; padding: 10px !important; }

.info-box::after { bottom: 100% !important; opacity: 0 !important; pointer-events: none !important; }

.popup { min-width: 180px !important; max-width: 90% !important; padding: 12px !important; font-size: 13px !important; line-height: 1.3 !important; white-space: nowrap !important;  overflow-x: auto !important; }







#aiChatIcon { width: 60px !important; height: 60px !important; font-size: 28px !important; bottom: 15px !important; right: 15px !important; }

#aiChatBox { width: 90% !important; right: 5% !important; bottom: 100px !important; height: 400px !important; }

#aiChatHeader { font-size: 14px !important; padding: 8px !important; }

#aiChatClose { font-size: 14px !important; color: white !important; }

#chatMessages { padding: 8px !important; }

#chatInput { padding: 8px !important; }

#sendChat { padding: 0 10px !important; }







nav.top-nav { width: 100% !important; display: flex !important; justify-content: flex-start !important; flex-wrap: wrap !important; gap: 8px !important; }


.brand { flex-direction: column !important; align-items: flex-start !important; }


}












/* ================== PHONE (max 600px) ===================== */


@media (max-width: 600px) {


.wrap { grid-template-columns: 1fr !important; }


header.site-header { flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; }




footer.site-foot { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 6px !important; padding: 12px 14px !important; text-align: left !important; font-size: 12px !important; }

.site-foot a { display: block !important; position: relative !important; top: -22px !important; margin-bottom: 4px !important; padding: 4px 8px !important; font-size: 12px !important; }

footer.site-foot .copy { display: block !important; position: relative !important; top: -22px !important; margin-bottom: 6px !important; font-size: 12px !important; text-align: left !important; }





.logo { width: 36px !important; height: 36px !important; }


h1.page-title { font-size: 20px !important; }


p.lead { font-size: 14px !important; }



.plan-card { position: relative !important; padding: 14px !important; font-size: 14px !important; }


.plan-price { position: absolute !important; font-size: 18px !important; text-shadow: 0 0 3px #003cb7, 0 0 6px #003cb7, 0 0 9px #003cb7, 0 0 12px #003cb7; color: #cdeeff; top: 22px !important; left: 90px !important; animation: bounce 1s infinite alternate; }


@keyframes bounce {  0% { transform: translateY(0); }  100% { transform: translateY(-3px); } }  



.free-plan-card { padding: 14px !important; font-size: 14px !important; }

.license-card { padding: 14px !important; font-size: 14px !important; }

.trust-section { padding: 14px !important; font-size: 14px !important; }






.modal-content { width: 61% !important; padding: 16px !important; }





#loginModal .modal-content { width: 65% !important; padding: 12px !important;}

#loginModal .close-login { font-size: 18px !important; }

#loginModal input { font-size: 13px !important; padding: 8px !important; }

#loginModal .btn-login-modal { font-size: 13px !important; padding: 8px 12px !important; margin-top: 7px !important; }





#languageSelect { position: absolute !important; top: -86px !important; right: -4px !important; z-index: 10 !important; }






.info-boxes { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }

.info-box { font-size: 13px !important; padding: 10px !important; }

.info-box::after { bottom: 100% !important; opacity: 0 !important; pointer-events: none !important; }

.popup { min-width: 180px !important; max-width: 90% !important; padding: 8px !important; font-size: 14px !important; line-height: 1.3 !important; white-space: break-spaces !important; overflow-x: auto !important; }









#aiChatIcon { position: sticky !important; width: 50px !important; height: 50px !important; font-size: 24px !important; bottom: 15px !important; right: 15px !important;}

#aiChatBox { width: 90% !important; max-width: none !important; height: 350px !important; bottom: 70px !important; right: 5% !important; }

#aiChatHeader { font-size: 14px !important; padding: 8px !important; }

#aiChatClose { font-size: 14px !important; }

#chatMessages { padding: 8px !important; }

#chatInput { padding: 8px !important; }

#sendChat { padding: 0 10px !important; }







nav.top-nav { width: 100% !important; display: flex !important; justify-content: flex-start !important; flex-wrap: wrap !important; gap: 8px !important; }


.brand { flex-direction: column !important; align-items: flex-start !important; }


}