/* ============================================================================ */
/* Section 1: Variables & Base (Required)                                       */
/* ============================================================================ */

:root{
  --primary-blue:#0C223C;
  --primary-orange:#ff6b35;
  --primary-orange-600:#ff7f54;
  --primary-orange-700:#e85f2f;
  --white:#fff;
  --bg-50:#f8fafc;
  --bg-100:#f1f5f9;
  --bg-200:#e2e8f0;
  --bg-300:#cbd5e1;
  --text-600:#475569;
  --text-700:#334155;
  --text-800:#1e293b;
  --glass-bg:rgba(255,255,255,.85);
  --glass-border:rgba(255,255,255,.25);
  --shadow-sm:0 1px 2px rgba(0,0,0,.05);
  --shadow-md:0 4px 6px -1px rgba(0,0,0,.1);
  --shadow-lg:0 10px 15px -3px rgba(0,0,0,.1);
  --shadow-xl:0 20px 25px -5px rgba(0,0,0,.1);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif;
  color:var(--text-700);
  background:linear-gradient(135deg,var(--bg-50),var(--bg-100));
  line-height:1.6;
  overflow-x:hidden;
}

/* decorative background behind everything */
.bg-pattern{
  position:fixed;inset:0;opacity:.04;pointer-events:none;z-index:-1;
  background-image:
    radial-gradient(circle at 25% 25%, var(--primary-orange) 2px, transparent 2px),
    radial-gradient(circle at 75% 75%, var(--primary-orange) 1px, transparent 1px);
  background-size:50px 50px;
}

/* constrained content wrapper used all over */
.container{max-width:1200px;margin:0 auto;padding:0 1rem 2rem}

/* ============================================================================ */
/* Section 2: Header & Navigation (Fixed dark-blue band)                        */
/* ============================================================================ */

.header{
  position:fixed;top:0;left:0;width:100%;
  background:var(--primary-blue);color:var(--white);
  box-shadow:var(--shadow-lg);z-index:1000;
  padding:20px 0;min-height:112px;
}
.header-content{
  max-width:1200px;margin:0 auto;padding:0 1rem;
  display:flex;align-items:center;gap:20px;justify-content:center;
}
.header-icon{font-size:2rem;display:flex;align-items:center;justify-content:center}
.header-text{text-align:center}
.header h1{margin:0;font-size:1.9rem;font-weight:700;text-shadow:0 1px 2px rgba(0,0,0,.35)}
.header .subtitle{margin-top:4px;font-size:1rem;opacity:.9}

/* push main content below fixed header */
.main-content{margin-top:136px}

/* ============================================================================ */
/* Section 3: Cards & Sections (layout blocks)                                  */
/* ============================================================================ */

.glass-card{
  background:var(--glass-bg);backdrop-filter:blur(10px);
  border:1px solid var(--glass-border);border-radius:16px;
  padding:1.5rem;margin:1rem 0;box-shadow:var(--shadow-md);position:relative;overflow:hidden;
}
.glass-card::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--primary-orange),transparent);opacity:0;
  transition:opacity .25s ease;
}
.glass-card:hover{transform:translateY(-1px);box-shadow:var(--shadow-lg)}
.glass-card:hover::before{opacity:1}

.glass-card h2{margin-bottom:1rem;color:var(--text-800)}
.glass-card h3{margin:1.5rem 0 1rem 0;color:var(--text-800);font-size:1.1rem}
.glass-card ul{margin:1rem 0;padding-left:1.5rem}
.glass-card ul li{margin:.5rem 0;line-height:1.5}

.privacy-notice{
  background:rgba(255,107,53,.1);border:1px solid rgba(255,107,53,.3);border-radius:10px;
  padding:1rem;margin-top:1.5rem;color:var(--text-700);
}

.info-card{
  background:linear-gradient(135deg,#fff,var(--bg-50));
  border:1px solid var(--bg-200);border-left:4px solid var(--primary-orange);
  border-radius:12px;padding:1.25rem;margin:1.25rem 0;
}
.info-card h3{margin-bottom:1rem;color:var(--text-800)}
.info-card p{margin-bottom:1rem;line-height:1.6}

.instruction-steps{background:var(--bg-50);border:1px solid var(--bg-200);border-radius:8px;padding:1rem;margin:1rem 0}
.instruction-steps ol{margin:0;padding-left:1.5rem}
.instruction-steps li{margin:.75rem 0;line-height:1.5}
.instruction-steps code{
  background:rgba(0,0,0,.1);padding:.2rem .4rem;border-radius:4px;font-size:.9rem;
}

.important-note{
  background:rgba(59,130,246,.1);border:1px solid rgba(59,130,246,.3);border-radius:10px;
  padding:1rem;margin-top:1rem;color:var(--text-700);
}
.important-note code{
  background:rgba(59,130,246,.2);padding:.2rem .4rem;border-radius:4px;font-size:.9rem;
}

.pro-tip{
  background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.3);border-radius:10px;
  padding:1rem;margin-top:1rem;color:var(--text-700);
}

.faq-item{
  margin-bottom:1.5rem;padding-bottom:1rem;
  border-bottom:1px solid var(--bg-200);
}
.faq-item:last-child{
  border-bottom:none;margin-bottom:0;
}
.faq-question{
  color:var(--primary-orange);font-size:1rem;font-weight:600;margin-bottom:.5rem;
}
.faq-answer{
  color:var(--text-700);line-height:1.6;margin:0;
}

.copyright{
  text-align:center;padding:2rem 1rem;margin-top:2rem;
  border-top:1px solid var(--bg-200);color:var(--text-600);
}
.copyright p{margin:.25rem 0;font-size:.9rem}
.footer-subtitle{color:var(--text-500);font-size:.8rem}

.statcounter{
  text-align:center;margin:1rem 0;
}
.statcounter a{
  display:inline-block;
}
.statcounter img{
  border:none;
}

/* Collapsible sections */
.section{margin:1rem 0}
.section-header{
  display:flex;align-items:center;gap:.75rem;justify-content:space-between;
  background:#fff;border:1px solid var(--bg-200);border-radius:12px;
  padding:1rem;cursor:pointer;transition:box-shadow .2s, border-color .2s, background .2s;
}
.section-header:hover{background:var(--bg-50);border-color:var(--primary-orange);box-shadow:var(--shadow-sm)}
.section-header h3{font-size:1.05rem;font-weight:600;display:flex;align-items:center;gap:.5rem;color:var(--text-700)}
.section-count{
  background:var(--bg-300);color:#fff;font-size:.75rem;font-weight:700;
  padding:.2rem .5rem;border-radius:999px;min-width:1.5rem;text-align:center;
}
.section-toggle{
  margin-left:auto;font-size:1rem;line-height:1;color:var(--text-600);transform:rotate(0deg);
  transition:transform .25s ease, color .25s ease;border:none;background:none;cursor:pointer;
}
.section.expanded .section-toggle{transform:rotate(180deg);color:var(--primary-orange)}
.section-content{
  max-height:0;overflow:hidden;transition:max-height .35s cubic-bezier(.4,0,.2,1), padding .2s;
}
.section.expanded .section-content{max-height:2000px;padding-top:.75rem}

.section-actions{
  display:flex;gap:.5rem;margin-bottom:1rem;justify-content:flex-end;
}

/* checkbox lists */
.checkbox-list{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:.75rem;margin-top:.75rem}
.checkbox-item{
  display:flex;gap:.6rem;align-items:flex-start;background:#fff;border:1px solid var(--bg-200);border-radius:10px;
  padding:.75rem;cursor:pointer;transition:border-color .2s, background .2s;
}
.checkbox-item:hover{border-color:var(--primary-orange);background:var(--bg-50)}
.checkbox-wrapper{margin-top:.15rem}
.checkbox{width:18px;height:18px;cursor:pointer}
.checkbox-name{font-weight:600;color:var(--text-800)}
.checkbox-desc{font-size:.88rem;color:var(--text-600);margin-top:.15rem}

/* ============================================================================ */
/* Section 4: Forms & Inputs                                                    */
/* ============================================================================ */

.form-group{margin-bottom:1rem}
.form-label{display:block;font-weight:600;color:var(--text-700);margin-bottom:.45rem}
.form-select,.form-input{
  width:100%;padding:.75rem;border:2px solid var(--bg-200);border-radius:10px;background:#fff;font-size:1rem;
  transition:border-color .2s, box-shadow .2s;
}
.form-select:focus,.form-input:focus{outline:none;border-color:var(--primary-orange);box-shadow:0 0 0 3px rgba(255,107,53,.12)}
.form-input:disabled{background:var(--bg-100);color:var(--text-600);cursor:not-allowed}

/* ============================================================================ */
/* Section 5: Buttons & Actions                                                 */
/* ============================================================================ */

.btn{
  appearance:none;border:none;border-radius:10px;padding:.75rem 1rem;font-weight:600;font-size:.95rem;
  background:#fff;color:var(--text-800);box-shadow:var(--shadow-sm);cursor:pointer;
  transition:transform .05s ease, box-shadow .2s ease, background .2s ease;display:inline-flex;align-items:center;
  justify-content:center;text-decoration:none;
}
.btn:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.6;cursor:not-allowed;transform:none}
.btn-primary{background:var(--primary-orange);color:#fff}
.btn-primary:hover{background:var(--primary-orange-600)}
.btn-primary:active{background:var(--primary-orange-700)}
.btn-secondary{background:var(--bg-200);color:var(--text-800)}
.btn-secondary:hover{background:var(--bg-300)}
.btn-danger{background:#ef4444;color:#fff}
.btn-danger:hover{background:#dc2626}
.btn-small{padding:.5rem .75rem;font-size:.85rem;border-radius:8px}

.action-buttons{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:.75rem;margin:1rem 0}

/* ============================================================================ */
/* Section 6: Filter Presets (Button Grid System)                               */
/* ============================================================================ */

.preset-buttons-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
}

.preset-button {
  background: #fff;
  border: 2px solid var(--bg-200);
  border-radius: 12px;
  padding: 1rem;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-height: 80px;
}

.preset-button:hover {
  border-color: var(--primary-orange);
  background: var(--bg-50);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.preset-button.active {
  border-color: var(--primary-orange);
  background: var(--primary-orange);
  color: white;
  box-shadow: var(--shadow-lg);
}

.preset-button.active:hover {
  background: var(--primary-orange-600);
  transform: translateY(-2px);
}

.preset-name {
  font-weight: 600;
  font-size: 1rem;
  color: var(--text-800);
}

.preset-button.active .preset-name {
  color: white;
}

.preset-desc {
  font-size: 0.875rem;
  color: var(--text-600);
  line-height: 1.4;
}

.preset-button.active .preset-desc {
  color: rgba(255, 255, 255, 0.9);
}

/* ============================================================================ */
/* Section 7: Output Area & Terms                                               */
/* ============================================================================ */

.output-area{margin:1.5rem 0}
.output-textarea{
  width:100%;min-height:180px;padding:1.25rem;border:2px solid var(--bg-200);border-radius:12px;
  background:var(--bg-50);font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Courier New", monospace;
  font-size:.9rem;resize:vertical;transition:border-color .2s, box-shadow .2s;line-height:1.5;
}
.output-textarea:focus{outline:none;border-color:var(--primary-orange);box-shadow:0 0 0 3px rgba(255,107,53,.12)}

.terms-agreement{font-size:.9rem;color:var(--text-600);text-align:center;margin:1rem 0;padding:1rem;
  background:var(--bg-50);border:1px solid var(--bg-200);border-radius:10px}
.terms-agreement a{color:var(--primary-orange);text-decoration:none}
.terms-agreement a:hover{text-decoration:underline}

/* generating spinner on buttons */
.generating{pointer-events:none;opacity:.8;position:relative}
.generating::after{
  content:"";position:absolute;right:12px;top:50%;transform:translateY(-50%);
  width:18px;height:18px;border:2px solid rgba(255,255,255,.85);border-top-color:transparent;
  border-radius:50%;animation:spin 1s linear infinite
}

/* ============================================================================ */
/* Section 8: Notification System */
/* ============================================================================ */

.notification{
  position:fixed;top:20px;right:20px;padding:12px 20px;border-radius:8px;
  color:white;font-weight:500;z-index:10000;max-width:350px;
  box-shadow:var(--shadow-lg);backdrop-filter:blur(10px);
}
.notification-success{background:var(--primary-orange)}
.notification-warning{background:#f59e0b}
.notification-info{background:#3b82f6}
.notification-error{background:#ef4444}

/* ============================================================================ */
/* Section 9: Legal Tab & Modal                                                 */
/* ============================================================================ */

.legal-tab{
  position:fixed;right:calc(50% - 600px + 1rem);bottom:0;
  background:var(--primary-orange);color:#fff;font-weight:600;font-size:.9rem;
  padding:.6rem 1.2rem;border-radius:12px 12px 0 0;cursor:pointer;box-shadow:0 -4px 12px rgba(0,0,0,.15);
  z-index:900;transition:transform .2s, background .2s;
}
.legal-tab:hover{transform:translateY(-2px);background:var(--primary-orange-700)}

.legal-popup-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;align-items:center;
  justify-content:center;z-index:1100;backdrop-filter:blur(5px);padding:1rem;
}
.legal-popup-overlay.active{display:flex}

.legal-popup{
  background:var(--glass-bg);backdrop-filter:blur(15px);border:1px solid var(--glass-border);
  border-radius:16px;max-width:600px;width:100%;max-height:80vh;overflow-y:auto;
  box-shadow:var(--shadow-xl);position:relative;animation:popupIn .3s ease-out;padding:2rem;
}
.legal-popup h3{margin-bottom:1rem;color:var(--text-800)}
.legal-popup p{margin-bottom:1rem;line-height:1.6}
.legal-popup-close{
  position:absolute;top:1rem;right:1rem;width:32px;height:32px;border:none;
  border-radius:8px;background:rgba(0,0,0,.1);color:var(--text-700);font-size:1.2rem;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .2s;
}
.legal-popup-close:hover{background:rgba(0,0,0,.2)}

/* ============================================================================ */
/* Section 10: Animations */
/* ============================================================================ */

@keyframes popupIn{
  from{opacity:0;transform:scale(.95) translateY(-10px)}
  to{opacity:1;transform:scale(1) translateY(0)}
}

@keyframes spin{
  to{transform:translateY(-50%) rotate(360deg)}
}

@keyframes fadeIn{
  from{opacity:0}
  to{opacity:1}
}

@keyframes slideInFromRight{
  from{transform:translateX(100px);opacity:0}
  to{transform:translateX(0);opacity:1}
}

/* ============================================================================ */
/* Section 11: Responsive Design */
/* ============================================================================ */

@media (max-width: 768px){
  .header{min-height:100px;padding:16px 0}
  .header-content{gap:12px}
  .header h1{font-size:1.6rem}
  .header .subtitle{font-size:.9rem}
  .main-content{margin-top:122px}
  .container{padding:0 .75rem 2rem}
  .checkbox-list{grid-template-columns:1fr}
  .action-buttons{grid-template-columns:1fr}
  
  .filter-row{
    grid-template-columns:1fr;gap:.5rem;
  }
  .filter-row .filter-actions{margin-top:.5rem;justify-content:center}
  
  .glass-card{padding:1.25rem}
  .info-card{padding:1rem}
  
  .section-header{padding:.8rem}
  .section-header h3{font-size:1rem}
}

@media (max-width: 1240px){
  .legal-tab{right:1rem}
}

@media (max-width: 480px){
  .header-content{flex-direction:column;text-align:center}
  .header-text{text-align:center}
  .main-content{margin-top:150px}
  .glass-card{padding:1rem}
  .info-card{padding:.8rem}
  
  .checkbox-list{grid-template-columns:1fr;gap:.5rem}
  .checkbox-item{padding:.6rem}
  
  .filter-row{padding:.8rem}
  .legal-popup{padding:1.5rem}
  
  .btn{padding:.6rem .8rem}
  .btn-small{padding:.4rem .6rem}
}

/* ============================================================================ */
/* Section 12: Print Styles */
/* ============================================================================ */

@media print{
  .header{position:static;background:#fff;color:#000;box-shadow:none}
  .main-content{margin-top:0}
  .glass-card{background:#fff;border:1px solid #ccc;box-shadow:none}
  .legal-tab{display:none}
  .btn{display:none}
  .section-toggle{display:none}
  .section-content{max-height:none !important;overflow:visible !important}
}

/* ============================================================================ */
/* Section 13: Accessibility Enhancements */
/* ============================================================================ */

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
}

@media (prefers-contrast: high){
  :root{
    --bg-200:#000;--bg-300:#333;--text-600:#000;--text-700:#000;--text-800:#000;
  }
}

/* Focus indicators */
.btn:focus-visible{outline:2px solid var(--primary-orange);outline-offset:2px}
.checkbox:focus-visible{outline:2px solid var(--primary-orange);outline-offset:2px}
.form-select:focus-visible,.form-input:focus-visible{outline:2px solid var(--primary-orange);outline-offset:2px}

/* High contrast mode compatibility */
@media (forced-colors: active){
  .glass-card{border:1px solid ButtonBorder}
  .btn-primary{background:ButtonFace;color:ButtonText;border:1px solid ButtonBorder}
}