/*=== RESET ===*/
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/*=== BASE ===*/
:root{
  --bg:#FFFFFF;
  --fg:#111111;
  --red:#CC0000;
  --red-hover:#990000;
  --red-light:rgba(204,0,0,0.1);
  --border:#e0e0e0;
  --muted:#888888;
  --surface:#fafafa;
  --radius:6px;
  --space-xs:0.4rem;
  --space-sm:0.7rem;
  --space-md:1.2rem;
  --space-lg:2rem;
  --space-xl:3rem;
  --space-2xl:4rem;
  --fs-xs:0.875rem;
  --fs-sm:0.95rem;
  --fs-md:1.05rem;
  --fs-lg:1.25rem;
  --fs-xl:1.7rem;
  --fs-2xl:2.4rem;
  --fs-3xl:3rem;
  --sidebar-w:56px;
  --panel-w:290px;
  --transition-fast:0.15s ease;
  --transition-smooth:0.3s cubic-bezier(0.4,0,0.2,1);
}

html{font-size:16px;scroll-behavior:smooth}
body{
  font-family:'JetBrains Mono','Courier New',monospace;
  background:var(--bg);
  color:var(--fg);
  line-height:1.6;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

a{color:var(--red);text-decoration:none;transition:color 0.15s}
a:hover{color:var(--red-hover)}

/*=== NAV ===*/
nav{
  position:sticky;top:0;z-index:100;
  background:var(--bg);
  border-bottom:1px solid var(--border);
}
nav .nav-inner{
  display:flex;align-items:center;justify-content:space-between;
  padding:0.5rem var(--space-sm);
  max-width:1000px;margin:0 auto;
}
nav .logo{
  font-size:var(--fs-lg);font-weight:800;color:var(--fg);
  letter-spacing:-0.5px;
}
nav .logo span{color:var(--red)}
nav .links{display:flex;gap:1.5rem;font-size:var(--fs-sm)}
nav .links a{color:var(--fg);font-weight:500}
nav .links a:hover{color:var(--red)}
nav .burger{display:none;background:none;border:none;cursor:pointer;font-size:1.4rem;color:var(--fg)}

@media(max-width:768px){
  nav .links{display:none}
  nav .burger{display:block}
  nav.open .links{
    display:flex;flex-direction:column;
    position:absolute;top:100%;left:0;right:0;
    background:var(--bg);padding:var(--space-md);
    border-bottom:1px solid var(--border);
    gap:0.8rem;
    animation:slideDown 0.25s ease;
  }
}

@keyframes slideDown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}

/*=== CONTAINER ===*/
.container{max-width:1000px;margin:0 auto;padding:var(--space-lg) var(--space-md)}

/*=== PAGE TRANSITIONS ===*/
.page-section{animation:slideUp 0.4s cubic-bezier(0.4,0,0.2,1)}
@keyframes slideUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

/*=== BUTTONS ===*/
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:0.4rem;
  padding:0.6rem 1.2rem;
  font-family:inherit;font-size:var(--fs-sm);font-weight:600;
  border:none;border-radius:var(--radius);
  cursor:pointer;transition:all var(--transition-fast);
  white-space:nowrap;
}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{background:var(--red-hover);transform:translateY(-1px)}
.btn-outline{background:transparent;color:var(--red);border:1.5px solid var(--red)}
.btn-outline:hover{background:var(--red-light)}
.btn-ghost{background:transparent;color:var(--fg);border:1px solid var(--border)}
.btn-ghost:hover{background:var(--surface)}
.btn:disabled{opacity:0.5;cursor:not-allowed}
.btn-sm{padding:0.35rem 0.7rem;font-size:var(--fs-xs)}
.btn-lg{padding:0.8rem 2rem;font-size:var(--fs-md)}

/*=== FORM ELEMENTS ===*/
label{font-size:var(--fs-xs);font-weight:600;color:var(--muted);display:block;margin-bottom:0.3rem;text-transform:uppercase;letter-spacing:0.5px}
input[type="text"],
input[type="email"],
input[type="number"],
input[type="file"],
textarea,
select{
  width:100%;padding:0.5rem 0.6rem;
  font-family:inherit;font-size:var(--fs-sm);
  border:1px solid var(--border);border-radius:var(--radius);
  background:var(--bg);color:var(--fg);
  transition:border-color 0.15s;
}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--red)}
input[type="range"]{width:100%;accent-color:var(--red)}
input[type="color"]{width:100%;height:2.2rem;border:1px solid var(--border);border-radius:var(--radius);padding:2px;cursor:pointer;background:var(--bg)}
input[type="checkbox"]{accent-color:var(--red)}
textarea{resize:vertical;min-height:80px}

/*=== CARD ===*/
.card{
  background:var(--bg);border:1px solid var(--border);
  border-radius:var(--radius);padding:var(--space-md);
  transition:border-color var(--transition-fast),box-shadow var(--transition-fast);
}
.card:hover{border-color:var(--red);box-shadow:0 2px 8px rgba(0,0,0,0.06)}

/*=== HERO ===*/
.hero{
  text-align:center;
  padding:var(--space-2xl) var(--space-md) var(--space-xl);
}
.hero h1{font-size:var(--fs-3xl);font-weight:800;letter-spacing:-1.5px;line-height:1.2}
.hero h1 span{color:var(--red)}
.hero p{color:var(--muted);margin-top:var(--space-sm);font-size:var(--fs-md);max-width:600px;margin-left:auto;margin-right:auto;line-height:1.6}
.hero p span{color:var(--red);font-weight:600}
.hero .btn{margin-top:var(--space-md)}

/*=== FEATURES ===*/
.features{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:var(--space-md);padding:var(--space-md) 0;
}
.feature{
  border:1px solid var(--border);border-radius:var(--radius);
  padding:var(--space-md);text-align:center;
  transition:all var(--transition-fast);
}
.feature:hover{border-color:var(--red);transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.05)}
.feature .icon{font-size:2rem;margin-bottom:0.6rem}
.feature h3{font-size:var(--fs-sm);font-weight:700;margin-bottom:0.3rem}
.feature p{font-size:var(--fs-xs);color:var(--muted)}

/* Steps */
.steps-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:var(--space-md);padding:var(--space-md) 0;
}
.step-card{
  border:1px solid var(--border);border-radius:var(--radius);
  padding:var(--space-md);text-align:center;
  position:relative;
}
.step-number{
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:50%;
  background:var(--red);color:#fff;
  font-weight:800;font-size:var(--fs-sm);
  margin-bottom:0.5rem;
}
.step-card h3{font-size:var(--fs-sm);font-weight:700;margin-bottom:0.3rem}
.step-card p{font-size:var(--fs-xs);color:var(--muted)}

/*=== TABLES ===*/
.feature-table,.comparison-table{
  width:100%;border-collapse:collapse;
  font-size:var(--fs-sm);margin:var(--space-md) 0;
}
.feature-table th,.comparison-table th{
  background:var(--surface);text-align:left;
  padding:0.7rem;font-weight:700;font-size:var(--fs-xs);
  text-transform:uppercase;letter-spacing:0.5px;
  border-bottom:2px solid var(--border);color:var(--muted);
}
.feature-table td,.comparison-table td{
  padding:0.6rem 0.7rem;
  border-bottom:1px solid var(--border);
}
.feature-table tr:hover td,.comparison-table tr:hover td{
  background:var(--surface);
}
.comparison-table td:nth-child(2){color:var(--red);font-weight:600}

/* Use case grid */
.usecase-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:var(--space-md);padding:var(--space-md) 0;
}
.usecase-grid .card{
  text-align:center;padding:var(--space-md);
  font-size:var(--fs-sm);font-weight:600;
}

/* FAQ */
details{
  border:1px solid var(--border);border-radius:var(--radius);
  margin-bottom:0.5rem;
  transition:border-color var(--transition-fast);
}
details:hover{border-color:var(--red)}
details summary{
  padding:0.7rem;cursor:pointer;font-size:var(--fs-sm);font-weight:600;
  outline:none;
}
details summary::marker{color:var(--red)}
details .faq-content{padding:0 var(--space-sm) var(--space-sm);font-size:var(--fs-xs);color:var(--muted)}

/* CTA */
.cta-section{
  text-align:center;padding:var(--space-xl) var(--space-md);
  border-top:1px solid var(--border);
}

/* Section headings */
.section-heading{
  font-size:var(--fs-xl);font-weight:800;margin-bottom:var(--space-sm);
  letter-spacing:-0.5px;
}
.section-heading span{color:var(--red)}
.section-subtitle{font-size:var(--fs-sm);color:var(--muted);margin-bottom:var(--space-md)}

/*=== FOOTER ===*/
footer{
  padding:var(--space-lg) var(--space-md);
  border-top:1px solid var(--border);
  font-size:var(--fs-xs);color:var(--muted);
  margin-top:var(--space-xl);
}
.footer-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:var(--space-md);
  max-width:1000px;margin:0 auto;
}
.footer-col h4{font-size:var(--fs-sm);font-weight:700;margin-bottom:0.5rem;color:var(--fg)}
.footer-col h4 span{color:var(--red)}
.footer-col p{line-height:1.5}
.footer-col a{display:block;color:var(--muted);font-size:var(--fs-xs);padding:0.15rem 0;transition:color 0.15s}
.footer-col a:hover{color:var(--red)}
.footer-bottom{
  text-align:center;margin-top:var(--space-md);
  padding-top:var(--space-md);border-top:1px solid var(--border);
}

/*=== EDITOR LAYOUT ===*/
.editor-wrap{
  display:flex;
  min-height:calc(100vh - 52px);
}
.editor-main{
  flex:1;display:flex;flex-direction:column;
  min-width:0;
}
.editor-preview{
  flex:1;display:flex;align-items:center;justify-content:center;
  padding:var(--space-md);
}
.editor-preview canvas{
  display:block;
  max-width:100%;max-height:calc(100vh - 160px);
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:#000;
}
.editor-preview-bar{
  text-align:center;padding:0.5rem;
  font-size:var(--fs-xs);color:var(--muted);
  border-top:1px solid var(--border);
}
.editor-preview-bar{
  text-align:center;padding:0.5rem;
  font-size:var(--fs-xs);color:var(--muted);
  border-top:1px solid var(--border);
}

/*=== SIDEBAR ===*/
.editor-sidebar{
  width:var(--sidebar-w);flex-shrink:0;
  display:flex;flex-direction:column;gap:0.15rem;
  border-right:1px solid var(--border);
  padding:var(--space-sm) 0;
  background:var(--surface);
}
.sidebar-icon{
  display:flex;flex-direction:column;align-items:center;
  gap:0.1rem;
  padding:0.7rem 0.2rem;
  background:none;border:none;cursor:pointer;
  font-family:inherit;font-size:var(--fs-xs);
  color:var(--muted);
  border-left:3px solid transparent;
  transition:all var(--transition-fast);
}
.sidebar-icon:hover{color:var(--fg);background:var(--red-light)}
.sidebar-icon.active{
  color:var(--red);
  border-left-color:var(--red);
  background:var(--red-light);
}
.sidebar-icon .sicon{font-size:1.3rem;margin-bottom:0.05rem}
.sidebar-icon .slabel{font-size:0.55rem;text-transform:uppercase;letter-spacing:0.5px}

/*=== PANEL ===*/
.editor-panel{
  width:0;overflow:hidden;
  transition:width var(--transition-smooth);
  background:var(--bg);
  border-right:1px solid var(--border);
  flex-shrink:0;
}
.editor-panel.open{width:var(--panel-w)}
.panel-content{
  width:var(--panel-w);padding:var(--space-sm);
  display:none;overflow-y:auto;
  max-height:calc(100vh - 80px);
}
.panel-content.active{display:block;animation:fadeSlideIn 0.25s ease}
@keyframes fadeSlideIn{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:translateX(0)}}

.ctrl-section{
  border:1px solid var(--border);border-radius:var(--radius);
  padding:0.8rem;margin-bottom:var(--space-sm);
}
.ctrl-section h4{
  font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;
  letter-spacing:0.5px;color:var(--muted);
  margin-bottom:0.6rem;padding-bottom:0.5rem;
  border-bottom:1px solid var(--border);
}
.ctrl-row{
  display:flex;gap:0.4rem;align-items:center;
  margin-bottom:0.5rem;
}
.ctrl-row label{font-size:var(--fs-xs);min-width:55px;margin-bottom:0}
.ctrl-row input,.ctrl-row select{flex:1}
.ctrl-row input[type="checkbox"]{flex:none;width:auto}

/* Template grid */
.template-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:0.4rem;
}
.template-grid.col3{grid-template-columns:1fr 1fr 1fr}
.template-btn{
  padding:0.5rem 0.3rem;font-family:inherit;font-size:var(--fs-xs);
  border:1px solid var(--border);border-radius:var(--radius);
  background:var(--bg);cursor:pointer;text-align:center;
  transition:all var(--transition-fast);
}
.template-btn:hover{border-color:var(--red)}
.template-btn.active{background:var(--red);color:#fff;border-color:var(--red)}

/* Overlay list */
.overlay-list{max-height:130px;overflow-y:auto}
.overlay-item{
  display:flex;align-items:center;justify-content:space-between;
  padding:0.35rem 0.5rem;font-size:var(--fs-xs);
  border:1px solid var(--border);border-radius:4px;
  margin-bottom:0.3rem;
}
.overlay-item .actions{display:flex;gap:0.2rem}
.overlay-item button{font-size:var(--fs-xs);padding:0.15rem 0.35rem}

/*=== EXPORT OVERLAY ===*/
.export-overlay{
  position:fixed;inset:0;
  background:rgba(17,17,17,0.94);
  z-index:9999;
  display:flex;align-items:center;justify-content:center;
  animation:fadeIn 0.35s ease;
}
.export-overlay.hidden{display:none}
.export-overlay-content{
  text-align:center;color:#fff;
  padding:var(--space-xl);max-width:420px;
}
.export-overlay-content .spinner{
  width:44px;height:44px;
  border:3px solid rgba(255,255,255,0.2);
  border-top-color:var(--red);
  border-radius:50%;animation:spin 0.8s linear infinite;
  margin:0 auto var(--space-md);
}
.export-overlay-content h3{
  font-size:var(--fs-xl);font-weight:700;margin-bottom:0.6rem;
}
.export-overlay-content p{
  font-size:var(--fs-xs);color:#aaa;margin-bottom:var(--space-md);line-height:1.5;
}
.export-overlay .progress-bar{
  height:6px;background:rgba(255,255,255,0.15);
  border-radius:3px;overflow:hidden;margin-bottom:0.4rem;
}
.export-overlay .progress-bar .fill{
  height:100%;background:var(--red);transition:width 0.5s;
  border-radius:3px;
}
.export-overlay .progress-text{font-size:var(--fs-sm);color:#fff;font-weight:600}

@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes spin{to{transform:rotate(360deg)}}

/*=== ABOUT / CONTACT / LEGAL ===*/
.page-section{padding:var(--space-lg) 0}
.page-section h1{font-size:var(--fs-2xl);font-weight:800;margin-bottom:var(--space-md);letter-spacing:-1px}
.page-section h2{font-size:var(--fs-lg);font-weight:700;margin:var(--space-md) 0 var(--space-sm)}
.page-section p{color:var(--muted);font-size:var(--fs-sm);max-width:650px;line-height:1.6}
.page-section ul{list-style:disc;padding-left:1.2rem;color:var(--muted);font-size:var(--fs-sm);line-height:1.6}
.contact-form{max-width:480px}
.contact-form .field{margin-bottom:1rem}

/*=== NOTIFICATION ===*/
.notif{
  position:fixed;bottom:1.5rem;right:1.5rem;
  padding:0.7rem 1.2rem;
  border-radius:var(--radius);
  font-size:var(--fs-xs);font-weight:600;
  background:var(--fg);color:var(--bg);
  z-index:1000;opacity:0;
  transform:translateY(10px);
  transition:all var(--transition-fast);
}
.notif.show{opacity:1;transform:translateY(0)}
.notif.error{background:var(--red);color:#fff}

/*=== SPINNER ===*/
.spinner{
  display:inline-block;width:14px;height:14px;
  border:2px solid var(--border);
  border-top-color:var(--red);
  border-radius:50%;animation:spin 0.6s linear infinite;
}

/*=== PROGRESS ===*/
.progress-bar{
  height:4px;background:var(--border);
  border-radius:2px;overflow:hidden;
}
.progress-bar .fill{
  height:100%;background:var(--red);
  transition:width 0.3s;
}

/*=== MOBILE ===*/
@media(max-width:900px){
  .editor-wrap{flex-direction:column}
  .editor-main{
    order:1;min-height:50vh;padding-bottom:60px;
  }
  .editor-sidebar{
    flex-direction:row;width:100%;height:56px;
    justify-content:space-around;gap:0;
    padding:0.2rem 0.3rem;
    border-right:none;border-top:1px solid var(--border);
    position:fixed;bottom:0;left:0;right:0;
    background:var(--surface);z-index:70;
  }
  .sidebar-icon{
    flex-direction:column;padding:0.3rem 0.2rem;
    border-left:none;border-bottom:3px solid transparent;
    min-width:44px;flex:1;max-width:64px;
  }
  .sidebar-icon.active{border-left:none;border-bottom-color:var(--red)}
  .sidebar-icon .sicon{font-size:1.1rem}
  .sidebar-icon .slabel{font-size:0.48rem}
  .editor-panel{
    position:fixed;left:0;top:40px;bottom:56px;z-index:50;
    box-shadow:2px 0 12px rgba(0,0,0,0.15);
    background:var(--bg);
    pointer-events:none;
  }
  .editor-panel.open{
    width:100%;max-width:300px;
    pointer-events:auto;
  }
  .panel-content{
    width:100%;max-width:300px;
    max-height:calc(100vh - 96px);
  }
}
@media(max-width:768px){
  .features,.steps-grid,.usecase-grid{grid-template-columns:1fr}
  .hero h1{font-size:var(--fs-2xl)}
  .section-heading{font-size:var(--fs-lg)}
  .editor-preview canvas{max-width:100%}
  .footer-grid{grid-template-columns:1fr 1fr}
  .editor-preview{padding:var(--space-sm)}
}
@media(max-width:600px){
  .hero h1{font-size:var(--fs-xl)}
  .footer-grid{grid-template-columns:1fr}
  .editor-panel.open{max-width:260px}
  .panel-content{max-width:260px}
  table.feature-table,table.comparison-table{font-size:var(--fs-xs)}
  table.feature-table td,table.comparison-table td{padding:0.4rem}
}