body {
  background: #f7f9fc;
  font-family: 'Roboto', 'Calibri', Arial, sans-serif;
  color: #222;
  margin: 0;
}

header,
.site-header {
  background: #2563eb;
  color: #fff;
  text-align: center;
  padding: 0.8em 0 0.4em 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  border-radius: 0;
  margin-bottom: 0.2em;
  width: 100vw;
  max-width: 100vw;
  margin-left: 0;
  margin-right: 0;
  position: relative;
  left: 50%;
  right: 50%;
  transform: translate(-50%, 0);
}

.logo {
  height: 56px;
  margin-bottom: 0.5em;
  border-radius: 8px;
  background: #fff;
  padding: 0.5em;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.site-title {
  font-size: 1.6em;
  font-weight: 700;
  margin: 0.1em 0;
  letter-spacing: 0.03em;
}

.subtitle {
  font-size: 1em;
  margin: 0.1em 0;
}

header {
  background: #2563eb;
  color: #fff;
  text-align: center;
  padding: 2em 0 1em 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  border-radius: 12px;
  margin-bottom: 2em;
}

.resume-preview,
.container,
.form-panel {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
  padding: 2em;
  margin: 0.5em auto;       /* Much less space above/below panels */
  max-width: 900px;
}

h1, h2, h3 {
  font-family: 'Roboto', 'Calibri', Arial, sans-serif;
  font-weight: bold;
  letter-spacing: 0.02em;
}

button, input, select, textarea {
  border-radius: 6px;
  border: 1px solid #d1d5db;
  padding: 0.6em 1em;
  font-size: 1em;
  transition: box-shadow 0.2s;
  font-family: inherit;
}

button:hover {
  box-shadow: 0 2px 8px rgba(37,99,235,0.12);
  background: #2563eb;
  color: #fff;
}

section {
  margin-bottom: 1.5em;
}

.resume-preview ul {
  margin: 0.5em 0 0.5em 1.5em;
  padding: 0;
}

.resume-preview li {
  margin-bottom: 0.3em;
}

.resume-preview .personal-info p {
  margin: 0.2em 0;
  font-size: 1em;
}

body{font-family:'Segoe UI',sans-serif;margin:0;padding:0;background-color:#f4f6f8;color:#333}.container{display:flex;flex-wrap:wrap;gap:30px;padding:30px;max-width:1400px;margin:auto}.preview,form{background-color:#fff;padding:25px;border-radius:10px;box-shadow:0 2px 10px rgba(0,0,0,.05);flex:1;min-width:280px;max-width:100%}h2,h3{border-bottom:1px solid #ddd;padding-bottom:5px}input,select,textarea{width:100%;padding:8px;margin:5px 0 15px;border:1px solid #ccc;border-radius:5px;font-size:16px;box-sizing:border-box}input:focus,select:focus,textarea:focus{outline:#007bff solid 2px;border-color:#007bff}.dynamic-section{padding:10px;border:1px dashed #ccc;margin-bottom:15px;border-radius:5px}button{padding:8px 14px;border:none;border-radius:5px;margin-top:5px;cursor:pointer;font-size:16px;transition:background .2s}button[type=button]{background-color:#007bff;color:#fff}button[type=button]:focus,button[type=button]:hover{background-color:#0056b3}.remove-btn{background-color:#dc3545;color:#fff}.remove-btn:focus,.remove-btn:hover{background-color:#c82333}ul{list-style:disc;padding-left:20px}ul li{margin-bottom:8px}.resume-section{margin-bottom:20px}.resume-section h3{color:#0056b3;margin-top:20px}.resume-preview h2{font-size:28px;margin-bottom:5px;text-transform:capitalize;font-family:Georgia,serif}.resume-preview li,.resume-preview p{font-size:16px;text-align:justify}.resume-preview h2,.resume-preview .personal-info{text-align:center;margin-left:auto;margin-right:auto}.resume-preview .personal-info p{text-align:center;margin:.2em 0}.hidden{display:none!important}@media print{body *{visibility:hidden!important;box-shadow:none!important;background:0 0!important}#resume-preview,#resume-preview *{visibility:visible!important;color:#000!important;background:#fff!important;box-shadow:none!important}#resume-preview{position:absolute;left:0;top:0;width:100%;margin:0;padding:0;min-width:0;box-shadow:none}#resume-preview [type=button],#resume-preview button{display:none!important}}@media (max-width:768px){.container{flex-direction:column;padding:15px}.preview,form{min-width:0;padding:10px}}.iti{width:100%}

/* Consistent resume font, size, and spacing for global best practice */

body,
.resume-preview,
#resume-preview-content {
  font-family: "Calibri", "Arial", "Helvetica Neue", Helvetica, sans-serif;
  font-size: 16px;
  color: #222;
  line-height: 1.5;
  letter-spacing: 0.01em;
}

.resume-preview h2,
.resume-preview h3 {
  font-family: "Calibri", "Arial", "Helvetica Neue", Helvetica, sans-serif;
  font-weight: bold;
  margin-top: 1.2em;
  margin-bottom: 0.5em;
  font-size: 1.4em;
  letter-spacing: 0.02em;
}

.resume-preview section {
  margin-bottom: 1.2em;
}

.resume-preview ul {
  margin: 0.5em 0 0.5em 1.5em;
  padding: 0;
}

.resume-preview li {
  margin-bottom: 0.3em;
}

.resume-preview .personal-info p {
  margin: 0.2em 0;
  font-size: 1em;
}

input, select, textarea {
  font-family: "Calibri", "Arial", "Helvetica Neue", Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0.01em;
}

.rating-stars span {
  font-size: 2em;
  cursor: pointer;
  color: #d1d5db;
  transition: color 0.2s;
}
.rating-stars .active {
  color: #fbbf24;
}
#rating-comment {
  font-family: inherit;
  font-size: 1em;
  resize: vertical;
}

@media (max-width: 900px) {
  .container {
    flex-direction: column;
  }
  aside {
    width: 100%;
    min-height: auto;
    padding: 1em 0;
  }
  .container > div {
    flex-direction: column;
    gap: 1em;
    padding: 1em;
  }
  #resume-preview {
    max-width: 100%;
    min-width: 0;
  }
  .main-content {
    flex-direction: column;
    gap: 1em;
  }
  .form-panel,
  .preview-panel {
    min-width: 0;
    width: 100%;
  }
  .site-header {
    max-width: 100%;
    border-radius: 0;
  }
}

.main-content {
  display: flex;
  gap: 2em;
  align-items: flex-start;
  padding: 0;
}

.form-panel,
.preview-panel {
  flex: 1 1 50%;
  min-width: 280px;
  max-width: 100%;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
  padding: 2em;
  margin: 0.5em auto;
}

/* Add any other selectors as needed for consistency */

.adsense-block {
  min-width: 300px;         /* Minimum width for standard ad units */
  max-width: 728px;         /* Maximum width for leaderboard ad units */
  width: 100%;              /* Responsive width */
  text-align: center;       /* Center the ad content */
  margin: 32px auto 0 auto; /* Space above, centered horizontally */
  background: transparent;  /* No background color */
  box-sizing: border-box;   /* Include padding/border in width */
  padding: 0;               /* No extra padding */
  border: none;             /* No border */
  overflow: visible;        /* Allow ad content to overflow if needed */
}

/* Responsive adjustments for mobile */
@media (max-width: 900px) {
  .adsense-block {
    min-width: 200px;
    max-width: 100%;
    margin: 24px auto 0 auto;
  }
}

/* Responsive styles for mobile */
@media (max-width: 900px) {
  .container {
    flex-direction: column;
    padding: 10px;
    gap: 0;
  }
  .main-content {
    flex-direction: column;
    gap: 1em;
    width: 100%;
  }
  .form-panel,
  .preview-panel {
    min-width: 0;
    width: 100%;
    max-width: 100%;
    padding: 1em;
    margin: 0.5em 0;
  }
  .site-header {
    max-width: 100vw;
    border-radius: 0;
    padding: 0.6em 0 0.2em 0;
  }
  .adsense-block {
    min-width: 200px;
    max-width: 100%;
    margin: 16px auto 0 auto;
  }
}

/* For very small screens */
@media (max-width: 600px) {
  .container {
    padding: 0 0.2em;
  }
  .form-panel,
  .preview-panel {
    padding: 0.5em;
  }
  .site-title {
    font-size: 1.2em;
  }
}