/* Basic layout & theme */
:root{
  --accent:#8a2be2;
  --bg:#ffffff;
  --muted:#666;
  --card-bg:#f9f9fb;
  --max-width:900px;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family: Arial, Helvetica, sans-serif;
  background: linear-gradient(135deg,#8a2be2 0%, #5a0fb7 100%);
  color:#222;
  -webkit-font-smoothing:antialiased;
}

header.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between; /* keep logo left, icons right */
  padding: 10px 16px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  position: sticky;
  top: 0;
  z-index: 200;
}

/* Logo stays on the left */
.logo img {
  max-width: 150px;
}

/* Centered nav links */
.nav-links {
  list-style: none;
  display: flex;
  margin: 0;
  padding: 0;
  position: absolute;
  left: 50%;
  transform: translateX(-50%); /* center horizontally */
}

.nav-links li {
  margin: 0 15px;
}

.nav-links a {
  text-decoration: none;
  color: #4a00e0;
  font-size: 1.1em;
  transition: 0.3s;
}

.nav-links a:hover {
  color: #1e90ff;
}

/* Icons stay on the right */
.nav-icons {
  display: flex;
  gap: 15px;
}

.nav-icons a {
  color: #4a00e0;
  font-size: 1.5em;
  text-decoration: none;
  transition: 0.3s;
}

.nav-icons a:hover {
  color: #1e90ff;
}


/* Main container */
main{padding:28px 16px 80px}
.container{
  max-width:var(--max-width);
  margin:0 auto;
  background:var(--bg);
  border-radius:12px;
  padding:26px;
  box-shadow:0 10px 30px rgba(0,0,0,0.12);
  text-align:center;
}

h1{margin:0 0 14px;font-size:1.6rem;color:var(--accent)}
.form-row{display:flex;gap:12px;justify-content:center;align-items:center;margin-bottom:14px;flex-wrap:wrap}
input[type="text"]{
  width:420px; max-width:90%;
  padding:12px 14px;border-radius:8px;border:1px solid #ddd;font-size:1rem;
}
select{padding:12px 10px;border-radius:8px;border:1px solid #ddd}

/* Button */
.btn{
  padding:10px 18px;border-radius:8px;border:none;background:var(--accent);color:#fff;font-weight:700;cursor:pointer;
  box-shadow:0 6px 18px rgba(138,43,226,0.28);
}
.btn[disabled]{opacity:0.6;cursor:not-allowed}

/* Progress wrapper */
.progress-wrapper{margin:18px auto 6px; text-align:center}
.progress-text{color:#333;font-weight:600;margin-top:8px}
.progress-circle{
  width:160px;height:160px;border-radius:50%;
  background: conic-gradient(#E5E5E5 0deg, #E5E5E5 360deg);
  margin:0 auto; position:relative; transition:background 200ms linear;
  box-shadow:0 10px 24px rgba(0,0,0,0.08);
}
.progress-center{
  position:absolute;width:124px;height:124px;left:18px;top:18px;border-radius:50%;
  background:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--accent);font-size:1.3rem;
  box-shadow:0 6px 14px rgba(0,0,0,0.04)
}

/* Ideas list */
.ideas-list{max-width:760px;margin:18px auto 0;text-align:left}
.idea-item{
  display:flex;justify-content:space-between;align-items:center;padding:12px 14px;margin-bottom:10px;background:var(--card-bg);border-radius:8px;
}
.idea-text{flex:1;margin-right:10px;color:#111}
.copy-btn{padding:8px 12px;border-radius:6px;border:none;background:var(--accent);color:#fff;cursor:pointer;font-weight:600}

/* Description & footer */
.description-box{max-width:var(--max-width);margin:20px auto;padding:18px;border-radius:10px;background:rgba(255,255,255,0.9);text-align:center;border:1px dotted rgba(0,0,0,0.06)}
.footer{position:fixed;right:18px;bottom:18px}

/* Responsive */
@media (max-width:640px){
  .progress-circle{width:120px;height:120px}
  .progress-center{width:92px;height:92px;left:14px;top:14px;font-size:1.1rem}
  .form-row{flex-direction:column}
  input[type="text"]{width:92%}
}

/* === Ad Containers === */
.ad-container {
  max-width: 728px; /* standard responsive ad width */
  margin: 24px auto;
  text-align: center;
  padding: 8px 0;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
}

.ad-container ins.adsbygoogle {
  display: block !important;
  margin: 0 auto;
  text-align: center;
}

@media (max-width: 640px) {
  .ad-container {
    max-width: 100%;
    margin: 16px auto;
    box-shadow: none;
    border-radius: 6px;
  }
}

/* === Ad Containers === */
.ad-container {
  max-width: 728px; /* standard responsive ad width */
  margin: 24px auto;
  text-align: center;
  padding: 8px 0;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
}

.ad-container ins.adsbygoogle {
  display: block !important;
  margin: 0 auto;
  text-align: center;
}

@media (max-width: 640px) {
  .ad-container {
    max-width: 100%;
    margin: 16px auto;
    box-shadow: none;
    border-radius: 6px;
  }
}


/* Remove Sticky Ad CSS */
/* Removed .sticky-ad and .close-btn styles */