* { box-sizing: border-box; }
    body {
      margin: 0;
      font-family: Inter, Arial, sans-serif;
      background: #f5f5f7;
      color: #222;
    }
    .page {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
    }
    .nav-wrap { padding: 18px; position: sticky; top: 0; z-index: 50; background: rgba(245, 245, 247, 0.85); backdrop-filter: blur(10px); }
    .nav {
      max-width: 1560px; margin: 0 auto;
      background: #fff; border-radius: 22px;
      padding: 22px 28px; display: flex;
      align-items: center; justify-content: space-between;
      box-shadow: 0 1px 0 rgba(0,0,0,0.03);
    }
    .nav-left { display: flex; align-items: center; gap: 34px; }
    .logo { display: flex; align-items: center; }
    .logo img { height: 32px; }
    .nav-links { display: flex; gap: 28px; color: #222; font-size: 16px; }
    .nav-links a { text-decoration: none; color: inherit; }
    .nav-right { display: flex; align-items: center; gap: 16px; }
    .nav-right a { text-decoration: none; color: #222; font-size: 16px; font-weight: 500; cursor: pointer; }
    .btn-gradient {
      background: linear-gradient(90deg, #fdba74, #ea580c);
      color: #fff !important; padding: 12px 22px; border-radius: 999px;
      font-weight: 700; display: inline-flex; align-items: center; gap: 8px; border: none; cursor: pointer;
    }
    
    .hero { max-width: 1280px; margin: 0 auto; padding: 10px 20px 80px; width: 100%; }
    .hero-title {
      text-align: center; font-size: 68px; line-height: 0.95;
      font-weight: 800; letter-spacing: -2px; max-width: 820px;
      margin: 20px auto 28px; color: #2f3138;
    }
    .builder-wrap {
      display: flex; 
      justify-content: center; align-items: center; gap: 42px;
      max-width: 1180px; margin: 0 auto;
    }
    .quote {
      text-align: center; color: #555; font-size: 22px;
      line-height: 1.5; padding: 0 10px; max-width: 260px;
    }
    .quote strong { display: block; margin-top: 18px; font-size: 16px; color: #333; font-weight: 500; }
    
    .builder-card {
      flex: 1; min-width: 320px; max-width: 580px;
      background: #fff; border-radius: 36px; padding: 34px 36px 30px;
      box-shadow: 0 12px 40px rgba(0,0,0,0.04); border: 1px solid #ececf0;
    }
    
    /* MOBILE FIRST INPUT ROW - Tiiny.host style */
    .top-input-row {
      display: flex; width: 100%; border: 2px solid #eaebf0;
      border-radius: 12px; overflow: hidden; background: #fff; margin-bottom: 24px;
      flex-direction: row; /* Strict side-by-side even on mobile */
      align-items: stretch;
    }
    .site-input { 
      flex: 1; padding: 14px 18px; border: none; outline: none; 
      font-size: 16px; color: #444; width: 100%; 
      -webkit-appearance: none; appearance: none; /* remove iOS styling */
    }
    .domain-select {
      min-width: 130px; border: none; border-left: 2px solid #eaebf0;
      color: #ea580c; font-size: 15px; font-weight: 600; background: #fffaf5;
      padding: 0 12px; outline: none; cursor: pointer;
      -webkit-appearance: none; appearance: none;
    }
    /* Simple arrow custom indicator for the select */
    .domain-select-wrapper {
      position: relative;
      display: flex;
    }
    .domain-select-wrapper::after {
      content: "\25BE";
      position: absolute;
      right: 12px; top: 14px;
      color: #ea580c; pointer-events: none;
    }
    
    .tabs {
      display: flex; gap: 20px; margin-bottom: 24px; color: #6a6a72;
      font-size: 16px; align-items: center; border-bottom: 2px solid #eaebf0;
      padding-bottom: 0px; justify-content: flex-start;
    }
    .tab { padding-bottom: 12px; cursor: pointer; font-weight: 500; white-space: nowrap; transition: color 0.2s;}
    .tab:hover { color: #222; }
    .tab.active { color: #ea580c; border-bottom: 3px solid #ea580c; font-weight: 700; margin-bottom: -2px; }
    
    .tab-content { display: none; }
    .tab-content.active { display: block; }
    
    .biz-row { display:flex; gap:12px; margin-bottom:16px; flex-wrap: wrap; }
    .biz-row input { flex: 1; border: 2px solid #eaebf0; border-radius: 12px; margin:0; padding: 14px 16px; min-width: 140px; font-size:15px; }
    
    .prompt-box {
      border: 3px dashed #fed7aa; border-radius: 20px; padding: 24px;
      min-height: 200px; display: flex; flex-direction: column;
      justify-content: center; align-items: center; background: #fffaf5; text-align: center;
    }
    .prompt-box textarea {
      width: 100%; min-height: 120px; border: none; outline: none; resize: none;
      background: transparent; font-size: 20px; line-height: 1.5; text-align: center;
      color: #2f3138; font-family: inherit;
    }
    .prompt-box textarea::placeholder { color: #fdba74; font-weight: 400; }
    
    /* PDF/URL/Otros Tab Elements */
    .upload-box {
      border: 3px dashed #eaebf0; border-radius: 20px; padding: 40px 24px;
      text-align: center; background: #fcfcfd; cursor: pointer;
      color: #6a6a72; font-weight: 500; font-size: 16px;
      transition: border-color 0.15s, background 0.15s;
    }
    .upload-box:hover { border-color: #f97316; background: #fff9f5; }
    
    .generate-btn {
      margin-top: 24px; width: 100%;
      background: linear-gradient(90deg, #f97316, #ea580c); color: #fff;
      border: none; border-radius: 14px; padding: 18px 24px;
      font-size: 18px; font-weight: 700; cursor: pointer; box-shadow: 0 8px 18px rgba(234, 88, 12, 0.2);
      transition: transform 0.2s;
    }
    .generate-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 20px rgba(234, 88, 12, 0.3); }
    .generate-btn:disabled { opacity: 0.6; cursor: not-allowed; }
    
    .loading { display: none; margin-top: 18px; color: #ea580c; font-weight: 600; font-size: 15px; text-align: center; }
    .arrow-note { color: #f97316; font-size: 22px; text-align: center; line-height: 1.2; width: 120px; }
    .arrow { font-size: 64px; display: block; margin-top: 16px; }
    
    /* Hamburger Menu for Mobile */
    .menu-toggle { display: none; background: transparent; border: none; font-size: 28px; cursor: pointer; color: #222; }

    /* Success State Box */
    #success-box { display:none; text-align:center; padding: 20px 0; }
    
    @media (max-width: 1100px) {
      .quote, .arrow-note { display: none; }
      .hero-title { font-size: 52px; }
    }
    @media (max-width: 700px) {
      .nav { padding: 16px 20px; border-radius: 16px; flex-wrap: wrap; }
      .nav-links, .nav-right { display: none; width: 100%; flex-direction: column; text-align: center; gap: 16px; margin-top: 20px; padding-top: 20px; border-top: 1px solid #eaebf0; }
      .nav.mobile-open .nav-links, .nav.mobile-open .nav-right { display: flex; }
      .menu-toggle { display: block; order: 1; }
      .nav-left { gap: 16px; width: 100%; justify-content: space-between; }
      .logo { order: 2; margin: 0 auto; padding-right: 28px; }
      
      .hero { padding: 0px 16px 40px; }
      .hero-title { font-size: 38px; margin: 10px auto 26px; }
      .builder-card { padding: 24px 20px; border-radius: 24px; }
      
      /* Force inputs to stay strictly side-by-side on mobile */
      .top-input-row { flex-direction: row; border-radius: 12px; margin-bottom: 20px; }
      .site-input { padding: 14px 12px; font-size: 15px; }
      .domain-select { min-width: 120px; font-size: 14px; padding: 0 8px 0 12px; }
      .domain-select-wrapper::after { right: 8px; top: 12px; }
      
      .biz-row { flex-direction: column; gap: 10px; }
    }


    /* ========== SLOGAN SECTION ========== */
    .slogan-section { background: #fff; padding: 48px 20px; }
    .slogan-inner { max-width: 900px; margin: 0 auto; text-align: center; }
    .slogan-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #ea580c; margin: 0 0 16px; }
    .slogan-title { font-size: 32px; font-weight: 800; letter-spacing: -1px; color: #1a1a2e; margin: 0 0 16px; line-height: 1.1; }
    .slogan-sub { font-size: 16px; color: #6a6a72; line-height: 1.7; margin: 0 0 36px; }
    .slogan-pills { display: flex; flex-direction: column; gap: 12px; }
    .slogan-pill { display: flex; align-items: center; gap: 14px; background: #f5f5f7; border-radius: 14px; padding: 16px 20px; text-align: left; transition: transform 0.2s, box-shadow 0.2s; }
    .slogan-pill:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.08); }
    .pill-icon { font-size: 26px; flex-shrink: 0; }
    .slogan-pill strong { display: block; font-size: 14px; color: #2f3138; font-weight: 700; }
    .slogan-pill span { font-size: 13px; color: #6a6a72; margin-top: 2px; display: block; }

    /* ========== REVIEWS MARQUEE ========== */
    .reviews-section { background: #fffaf5; padding: 48px 0 40px; overflow: hidden; }
    .reviews-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #ea580c; text-align: center; margin: 0 0 12px; }
    .reviews-title { font-size: 30px; font-weight: 800; letter-spacing: -1px; color: #1a1a2e; text-align: center; margin: 0 0 10px; }
    .reviews-sub { font-size: 15px; color: #6a6a72; text-align: center; margin: 0 0 32px; padding: 0 20px; }
    .marquee-container { display: flex; flex-direction: column; gap: 16px; }
    .marquee-row { overflow: hidden; width: 100%; }
    .marquee-track { display: flex; gap: 16px; width: max-content; }
    .marquee-left { animation: scrollLeft 35s linear infinite; }
    .marquee-right { animation: scrollRight 35s linear infinite; }
    .marquee-container:hover .marquee-track { animation-play-state: paused; }
    @keyframes scrollLeft { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
    @keyframes scrollRight { 0% { transform: translateX(-50%); } 100% { transform: translateX(0); } }
    .review-card { background: #fff; border-radius: 18px; padding: 20px 22px; width: 280px; flex-shrink: 0; box-shadow: 0 2px 16px rgba(0,0,0,0.06); border: 1px solid #f0ece8; }
    .review-stars { color: #f97316; font-size: 13px; margin-bottom: 10px; letter-spacing: 2px; }
    .review-card p { font-size: 13px; color: #444; line-height: 1.6; margin: 0 0 14px; }
    .review-author { display: flex; align-items: center; gap: 10px; }
    .review-author strong { display: block; font-size: 13px; color: #2f3138; }
    .review-author span { font-size: 12px; color: #888; }
    .avatar { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #fff; flex-shrink: 0; }
    .av-blue   { background: #3b82f6; } .av-purple { background: #8b5cf6; } .av-green  { background: #10b981; }
    .av-orange { background: #f97316; } .av-pink   { background: #ec4899; } .av-teal   { background: #14b8a6; }
    .av-indigo { background: #6366f1; } .av-rose   { background: #f43f5e; } .av-amber  { background: #f59e0b; }
    .av-cyan   { background: #06b6d4; }

    /* ========== PRICING SECTION ========== */
    .pricing-section { background: #f5f5f7; padding: 48px 20px; }
    .pricing-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #ea580c; text-align: center; margin: 0 0 12px; }
    .pricing-title { font-size: 30px; font-weight: 800; letter-spacing: -1px; color: #1a1a2e; text-align: center; margin: 0 0 10px; }
    .pricing-sub { font-size: 14px; color: #6a6a72; text-align: center; margin: 0 0 24px; }
    .pricing-toggle-wrap { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 28px; flex-wrap: wrap; }
    .toggle-label { font-size: 14px; font-weight: 600; color: #444; }
    .toggle-switch { position: relative; display: inline-block; width: 52px; height: 28px; flex-shrink: 0; }
    .toggle-switch input { opacity: 0; width: 0; height: 0; }
    .toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background: #ccc; border-radius: 28px; transition: .3s; }
    .toggle-slider:before { position: absolute; content: ""; height: 22px; width: 22px; left: 3px; bottom: 3px; background: white; border-radius: 50%; transition: .3s; }
    input:checked + .toggle-slider { background: #ea580c; }
    input:checked + .toggle-slider:before { transform: translateX(24px); }
    .badge-save { background: #ea580c; color: #fff; font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 99px; white-space: nowrap; }
    /* Mobile: stacked single column cards */
    .pricing-cards { display: flex; flex-direction: column; gap: 16px; max-width: 520px; margin: 0 auto; }
    .pricing-card { background: #fff; border-radius: 20px; padding: 28px 24px; border: 2px solid #e8e8ec; transition: transform 0.2s, box-shadow 0.2s; position: relative; }
    .pricing-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,0.1); }
    .pricing-card-popular { border-color: #ea580c; }
    .plan-popular-badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: linear-gradient(90deg,#f97316,#ea580c); color: #fff; font-size: 11px; font-weight: 700; padding: 4px 14px; border-radius: 99px; white-space: nowrap; }
    .plan-name { font-size: 18px; font-weight: 800; color: #2f3138; margin-bottom: 12px; }
    .plan-price { display: flex; align-items: baseline; gap: 4px; margin-bottom: 6px; }
    .price-amount { font-size: 42px; font-weight: 800; color: #1a1a2e; letter-spacing: -2px; transition: all 0.3s; }
    .price-period { font-size: 14px; color: #888; font-weight: 500; }
    .plan-desc { font-size: 13px; color: #6a6a72; margin: 0 0 20px; line-height: 1.5; }
    .plan-btn { display: block; text-align: center; padding: 13px 20px; border-radius: 12px; font-size: 15px; font-weight: 700; text-decoration: none; transition: all 0.2s; margin-bottom: 20px; }
    .plan-btn-outline { border: 2px solid #eaebf0; color: #2f3138; background: #fff; }
    .plan-btn-outline:hover { border-color: #ea580c; color: #ea580c; }
    .plan-btn-primary { background: linear-gradient(90deg,#f97316,#ea580c); color: #fff; border: none; box-shadow: 0 6px 16px rgba(234,88,12,0.3); }
    .plan-btn-primary:hover { box-shadow: 0 8px 24px rgba(234,88,12,0.4); transform: translateY(-1px); }
    .plan-features { list-style: none; padding: 0; margin: 0; font-size: 13px; line-height: 2; }
    .feat-yes { color: #2f3138; } .feat-yes::before { content: "\2714  "; color: #10b981; font-weight: 700; }
    .feat-no  { color: #aaa;      } .feat-no::before  { content: "\2717  "; color: #ddd; font-weight: 700; }
    .pricing-note { text-align: center; margin-top: 28px; font-size: 13px; color: #6a6a72; }

    /* ========== FAQ SECTION ========== */
    .faq-section { background: #fff; padding: 48px 20px; }
    .faq-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #ea580c; text-align: center; margin: 0 0 12px; }
    .faq-title { font-size: 30px; font-weight: 800; letter-spacing: -1px; color: #1a1a2e; text-align: center; margin: 0 0 32px; }
    .faq-list { max-width: 760px; margin: 0 auto; }
    .faq-item { border-bottom: 1px solid #eaebf0; }
    .faq-q { width: 100%; text-align: left; background: none; border: none; padding: 18px 0; font-size: 15px; font-weight: 600; color: #2f3138; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; font-family: inherit; transition: color 0.2s; }
    .faq-q:hover { color: #ea580c; }
    .faq-icon { font-size: 20px; color: #ea580c; flex-shrink: 0; font-weight: 400; transition: transform 0.3s; }
    .faq-a { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; }
    .faq-a.open { max-height: 300px; }
    .faq-a p { padding: 0 0 18px; margin: 0; font-size: 14px; color: #6a6a72; line-height: 1.7; }

    /* ========== TABLET+ (min 640px) ========== */
    @media (min-width: 640px) {
      .slogan-title { font-size: 44px; letter-spacing: -1.5px; }
      .slogan-sub { font-size: 18px; }
      .slogan-pills { flex-direction: row; flex-wrap: wrap; justify-content: center; }
      .slogan-pill { min-width: 200px; }
      .slogan-section { padding: 64px 20px; }
      .reviews-title { font-size: 38px; }
      .reviews-section { padding: 64px 0 48px; }
      .pricing-title { font-size: 38px; }
      .pricing-section { padding: 64px 20px; }
      .pricing-cards { flex-direction: row; flex-wrap: wrap; max-width: 1160px; }
      .pricing-card { flex: 1; min-width: 200px; max-width: 260px; }
      .faq-title { font-size: 38px; }
      .faq-section { padding: 64px 20px; }
    }

    /* ========== DESKTOP (min 1024px) ========== */
    @media (min-width: 1024px) {
      .slogan-title { font-size: 56px; letter-spacing: -2px; }
      .slogan-sub { font-size: 19px; }
      .slogan-section { padding: 80px 20px; }
      .reviews-title { font-size: 46px; }
      .reviews-section { padding: 80px 0 60px; }
      .pricing-title { font-size: 46px; }
      .pricing-section { padding: 80px 20px; }
      .faq-title { font-size: 46px; }
      .faq-section { padding: 80px 20px; }
    }
    /* ========== LOADER ANIMATION (Rings) ========== */
    .loader-layer {
      position: fixed; inset: 0; background: #000; z-index: 10000;
      display: none; flex-direction: column; align-items: center; justify-content: center;
      text-align: center; padding: 20px;
    }
    .loader-wrap { display: flex; flex-direction: column; align-items: center; gap: 20px; }
    .pl { width: 6em; height: 6em; }
    .pl__ring { animation: ringA 2s linear infinite; }
    .pl__ring--a { stroke: #f42f25; }
    .pl__ring--b { animation-name: ringB; stroke: #f49725; }
    .pl__ring--c { animation-name: ringC; stroke: #255ff4; }
    .pl__ring--d { animation-name: ringD; stroke: #f42582; }
    @keyframes ringA {
      from, 4%   { stroke-dasharray: 0 660; stroke-width: 20; stroke-dashoffset: -330; }
      12%        { stroke-dasharray: 60 600; stroke-width: 30; stroke-dashoffset: -335; }
      32%        { stroke-dasharray: 60 600; stroke-width: 30; stroke-dashoffset: -595; }
      40%, 54%   { stroke-dasharray: 0 660; stroke-width: 20; stroke-dashoffset: -660; }
      62%        { stroke-dasharray: 60 600; stroke-width: 30; stroke-dashoffset: -665; }
      82%        { stroke-dasharray: 60 600; stroke-width: 30; stroke-dashoffset: -925; }
      90%, to    { stroke-dasharray: 0 660; stroke-width: 20; stroke-dashoffset: -990; }
    }
    @keyframes ringB {
      from, 12%  { stroke-dasharray: 0 220; stroke-width: 20; stroke-dashoffset: -110; }
      20%        { stroke-dasharray: 20 200; stroke-width: 30; stroke-dashoffset: -115; }
      40%        { stroke-dasharray: 20 200; stroke-width: 30; stroke-dashoffset: -195; }
      48%, 62%   { stroke-dasharray: 0 220; stroke-width: 20; stroke-dashoffset: -220; }
      70%        { stroke-dasharray: 20 200; stroke-width: 30; stroke-dashoffset: -225; }
      90%        { stroke-dasharray: 20 200; stroke-width: 30; stroke-dashoffset: -305; }
      98%, to    { stroke-dasharray: 0 220; stroke-width: 20; stroke-dashoffset: -330; }
    }
    @keyframes ringC {
      from       { stroke-dasharray: 0 440; stroke-width: 20; stroke-dashoffset: 0; }
      8%         { stroke-dasharray: 40 400; stroke-width: 30; stroke-dashoffset: -5; }
      28%        { stroke-dasharray: 40 400; stroke-width: 30; stroke-dashoffset: -175; }
      36%, 58%   { stroke-dasharray: 0 440; stroke-width: 20; stroke-dashoffset: -220; }
      66%        { stroke-dasharray: 40 400; stroke-width: 30; stroke-dashoffset: -225; }
      86%        { stroke-dasharray: 40 400; stroke-width: 30; stroke-dashoffset: -395; }
      94%, to    { stroke-dasharray: 0 440; stroke-width: 20; stroke-dashoffset: -440; }
    }
    @keyframes ringD {
      from, 8%   { stroke-dasharray: 0 440; stroke-width: 20; stroke-dashoffset: 0; }
      16%        { stroke-dasharray: 40 400; stroke-width: 30; stroke-dashoffset: -5; }
      36%        { stroke-dasharray: 40 400; stroke-width: 30; stroke-dashoffset: -175; }
      44%, 50%   { stroke-dasharray: 0 440; stroke-width: 20; stroke-dashoffset: -220; }
      58%        { stroke-dasharray: 40 400; stroke-width: 30; stroke-dashoffset: -225; }
      78%        { stroke-dasharray: 40 400; stroke-width: 30; stroke-dashoffset: -395; }
      86%, to    { stroke-dasharray: 0 440; stroke-width: 20; stroke-dashoffset: -440; }
    }
    .ldr-text { font-size: 13px; color: #666; font-family: Inter, sans-serif; }
    .ldr-dots::after {
      content: ""; animation: ldrDots 1.2s steps(4) infinite;
    }
    @keyframes ldrDots {
      0%  { content: ""; } 25% { content: "."; }
      50% { content: ".."; } 75% { content: "..."; }
    }

    /* ========== PALETTE SWATCHES ========== */
    .palette-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
    .palette-swatch { height:38px; border-radius:10px; border:2.5px solid transparent; overflow:hidden; display:flex; cursor:pointer; transition:transform 0.15s, border-color 0.15s; }
    .palette-swatch:hover { transform:scale(1.06); }
    .palette-swatch.selected { border-color:#ea580c; }
    .ps-half { flex:1; }
    /* ========== INLINE EDITS PANEL ========== */
    .sb-edits-panel { background:#fffaf5; border:2px solid #fed7aa; border-radius:12px; padding:12px 14px; }
    /* ========== EDITOR VIEW ========== */
    #editor-view {
      display: none; position: fixed; inset: 0; background: #fff; z-index: 5000;
      flex-direction: column; overflow: hidden;
    }
    .editor-header {
      height: 64px; border-bottom: 1px solid #eaebf0; display: flex; align-items: center;
      justify-content: space-between; padding: 0 20px; flex-shrink: 0;
    }
    .editor-body { flex: 1; display: flex; flex-direction: row; background: #f5f5f7; overflow: hidden; }
    .preview-container { flex: 1; position: relative; padding: 20px; display: flex; justify-content: center; }
    .preview-frame-wrap { 
      width: 100%; max-width: 1200px; height: 100%; border-radius: 16px; 
      background: #fff; box-shadow: 0 20px 50px rgba(0,0,0,0.1); 
      overflow: hidden; border: 4px solid #fff;
    }
    .preview-iframe { width: 100%; height: 100%; border: none; }
    
    .editor-sidebar {
      width: 360px; height: 100%; background: #fff; border-left: 1px solid #eaebf0;
      padding: 0; display: flex; flex-direction: column; flex-shrink: 0;
    }
    .sidebar-tabs { display: flex; border-bottom: 1px solid #eaebf0; }
    .sb-tab { flex: 1; padding: 16px; text-align: center; font-size: 14px; font-weight: 600; cursor: pointer; color: #6a6a72; }
    .sb-tab.active { color: #ea580c; border-bottom: 2px solid #ea580c; }
    .sidebar-content { flex: 1; overflow-y: auto; padding: 24px; }

    @media (max-width: 1024px) {
      .editor-body { flex-direction: column; }
      .editor-sidebar { width: 100%; height: 40%; border-left: none; border-top: 1px solid #eaebf0; }
      .preview-container { padding: 10px; }
    }