/* =============================================
   CodeToFun — HTML Online Text Editor
   Self-contained, mobile-first responsive CSS
   ============================================= */

/* --- Reset & Base --- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,sans-serif;color:#1e293b;background:#fff;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{cursor:pointer;font-family:inherit;border:none;background:none}
code{font-family:"Courier New",Courier,monospace}
.container{max-width:1280px;margin:0 auto;padding:0 1rem}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-weight:600;font-size:.938rem;border-radius:.5rem;padding:.625rem 1.5rem;transition:all .2s ease;text-decoration:none;border:none;cursor:pointer;line-height:1.4}
a.btn-primary,button.btn-primary,.btn-primary{background:#2563eb;color:#fff}
a.btn-primary:hover,button.btn-primary:hover,.btn-primary:hover{background:#1d4ed8;color:#fff}
.btn-sm{padding:.5rem 1.25rem;font-size:.875rem}

/* ===================== HEADER ===================== */
.site-header{position:sticky;top:0;z-index:100;background:#fff;border-bottom:1px solid #e2e8f0;box-shadow:0 1px 3px rgba(0,0,0,.06)}
.header-inner{display:flex;justify-content:space-between;align-items:center;height:4rem}
.logo{display:flex;align-items:center;gap:.75rem}
.logo-icon{background:#2563eb;padding:.5rem;border-radius:.5rem;color:#fff;display:flex;align-items:center;justify-content:center}
.logo-text{display:flex;flex-direction:column;line-height:1.2}
.logo-name{font-size:1.125rem;font-weight:700;color:#0f172a}
.logo-tagline{font-size:.75rem;color:#64748b}
.desktop-nav{display:none;align-items:center;gap:2rem}
.desktop-nav a:not(.btn){color:#475569;font-weight:500;font-size:.938rem;transition:color .2s}
.desktop-nav a:not(.btn):hover{color:#2563eb}
.desktop-nav .btn-primary,.mobile-nav .btn-primary{background:#2563eb;color:#fff}
.desktop-nav .btn-primary:hover,.mobile-nav .btn-primary:hover{background:#1d4ed8;color:#fff}
.mobile-menu-btn{display:flex;padding:.5rem;color:#475569}
.mobile-nav{display:none;flex-direction:column;gap:1rem;padding:1rem;border-top:1px solid #e2e8f0;background:#fff}
.mobile-nav.open{display:flex}
.mobile-nav a:not(.btn){color:#475569;font-weight:500;font-size:.938rem;transition:color .2s}
.mobile-nav a:not(.btn):hover{color:#2563eb}

/* ===================== FOOTER ===================== */
.site-footer{background:#0f172a;color:#94a3b8;padding:3rem 0 0}
.footer-grid{display:grid;grid-template-columns:1fr;gap:2.5rem;margin-bottom:3rem}
.footer-brand p{color:#94a3b8;line-height:1.6;margin:1rem 0 1.5rem}
.footer-brand .logo-name{color:#fff}.footer-brand .logo-tagline{color:#94a3b8}
.follow-heading{color:#fff;font-size:.875rem;font-weight:600;margin-bottom:.75rem}
.social-links{display:flex;gap:.75rem;margin-bottom:1.5rem;flex-wrap:wrap}
.social-links a{background:#1e293b;padding:.625rem;border-radius:.5rem;transition:background .2s;display:flex;align-items:center;justify-content:center}
.social-links a:hover{background:#334155}
.trusted-badge{display:inline-flex;align-items:center;gap:.5rem;background:#1e293b;padding:.5rem 1rem;border-radius:.5rem;font-size:.875rem;border:1px solid #334155}
.trusted-badge .dot{width:.5rem;height:.5rem;border-radius:50%;background:#3b82f6}
.footer-links-col h4{color:#fff;font-size:.938rem;font-weight:600;margin-bottom:1rem}
.footer-links-col ul{display:flex;flex-direction:column;gap:.5rem}
.footer-links-col a{font-size:.875rem;transition:color .2s}
.footer-links-col a:hover{color:#60a5fa}
.footer-all-links ul{columns:2;column-gap:1.5rem}
.footer-all-links li{break-inside:avoid}
.footer-bottom{border-top:1px solid #1e293b;padding:2rem 0;display:flex;flex-direction:column;gap:1rem;align-items:center;text-align:center}
.footer-bottom p{font-size:.875rem;color:#94a3b8;display:flex;align-items:center;gap:.25rem;flex-wrap:wrap;justify-content:center}
.heart-icon{vertical-align:middle}
.footer-legal-links{display:flex;gap:1.5rem;font-size:.875rem}
.footer-legal-links a{transition:color .2s}.footer-legal-links a:hover{color:#60a5fa}

/* ===================== COOKIE NOTICE ===================== */
.cookie-notice{position:fixed;bottom:0;left:0;right:0;background:#0f172a;color:#cbd5e1;padding:1rem;display:flex;flex-direction:column;gap:.75rem;align-items:center;z-index:200;box-shadow:0 -4px 12px rgba(0,0,0,.15)}
.cookie-notice p{font-size:.813rem;text-align:center;line-height:1.5}
.cookie-notice a:not(.btn){color:#60a5fa;text-decoration:underline}
.cookie-notice .btn-primary{background:#2563eb;color:#fff}
.cookie-notice .btn-primary:hover{background:#1d4ed8;color:#fff}

/* =============================================
   HTML EDITOR — Full-screen IDE
   ============================================= */

/* --- Editor Workspace --- */
.editor-workspace{display:flex;flex-direction:column;height:calc(100vh - 4rem);background:#f8fafc;position:relative}

/* --- Editor Toolbar --- */
.editor-toolbar{background:#fff;border-bottom:1px solid #e2e8f0;padding:.5rem 1rem;display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap}
.editor-title{display:flex;align-items:center;gap:.5rem}
.editor-title h1{font-size:1.125rem;font-weight:700;color:#0f172a;display:none}
.editor-title .subtitle{font-size:.813rem;color:#64748b}

.toolbar-buttons{display:flex;align-items:center;gap:.5rem}
.ed-btn{display:inline-flex;align-items:center;gap:.375rem;padding:.5rem .875rem;border-radius:.5rem;font-weight:600;font-size:.813rem;font-family:inherit;cursor:pointer;transition:all .2s;border:none;color:#fff;white-space:nowrap}
.ed-btn svg{width:1rem;height:1rem;flex-shrink:0}
.ed-btn.btn-run{background:#16a34a}.ed-btn.btn-run:hover{background:#15803d}
.ed-btn.btn-save{background:#2563eb;position:relative}.ed-btn.btn-save:hover{background:#1d4ed8}
.ed-btn.btn-share{background:#9333ea}.ed-btn.btn-share:hover{background:#7e22ce}
.ed-btn.btn-fullscreen{background:#475569}.ed-btn.btn-fullscreen:hover{background:#334155}
.ed-btn .btn-text{display:none}

/* --- Save Dropdown --- */
.save-wrapper{position:relative}
.save-dropdown{display:none;position:absolute;top:calc(100% + .5rem);right:0;width:14rem;background:#fff;border:1px solid #e2e8f0;border-radius:.75rem;box-shadow:0 10px 25px rgba(0,0,0,.12);z-index:50;overflow:hidden}
.save-dropdown.open{display:block}
.save-dropdown-item{display:flex;align-items:center;gap:.75rem;width:100%;padding:.75rem 1rem;border:none;background:none;cursor:pointer;font-family:inherit;text-align:left;transition:background .15s}
.save-dropdown-item:first-child{border-bottom:1px solid #f1f5f9}
.save-dropdown-item:first-child:hover{background:#eff6ff}
.save-dropdown-item:last-child:hover{background:#f0fdf4}
.save-dropdown-item svg{flex-shrink:0}
.save-dropdown-item .item-label{font-weight:500;font-size:.875rem;color:#0f172a}
.save-dropdown-item .item-desc{font-size:.75rem;color:#64748b}
.save-dropdown-overlay{display:none;position:fixed;inset:0;z-index:40}
.save-dropdown-overlay.open{display:block}

/* --- Split Container --- */
.editor-split{flex:1;display:flex;flex-direction:column;overflow:hidden;position:relative}

/* --- Panels --- */
.editor-panel{display:flex;flex-direction:column;overflow:hidden;min-height:0}
.editor-panel.code-panel{flex:1;border-bottom:1px solid #e2e8f0;background:#fff}
.editor-panel.preview-panel{flex:1;background:#fff}

.panel-tab{background:#f1f5f9;padding:.5rem 1rem;border-bottom:1px solid #e2e8f0;display:flex;align-items:center;justify-content:space-between}
.panel-tab .tab-label{font-size:.813rem;font-weight:600;color:#475569}
.panel-tab .tab-info{font-size:.75rem;color:#94a3b8}

/* --- Code Textarea --- */
.code-area{flex:1;display:flex;flex-direction:column;overflow:hidden}
.code-textarea{flex:1;width:100%;padding:1rem;font-family:"Courier New",Courier,monospace;font-size:.875rem;line-height:1.7;resize:none;border:none;outline:none;background:#0f172a;color:#4ade80;caret-color:#4ade80;tab-size:2;white-space:pre;overflow:auto}
.code-textarea::placeholder{color:#475569}
.code-statusbar{background:#0f172a;padding:.375rem 1rem;border-top:1px solid #1e293b}
.code-statusbar p{font-size:.75rem;color:#94a3b8}

/* --- Preview iFrame --- */
.preview-frame{flex:1;width:100%;border:none;background:#fff}

/* --- Resize Handle --- */
.resize-handle{display:none}

/* =============================================
   BELOW-FOLD — SEO Content
   ============================================= */
.editor-content{background:#f8fafc;padding:2rem 0 0}

/* --- Features --- */
.tool-features{display:grid;grid-template-columns:1fr;gap:1.5rem;margin-bottom:2.5rem}
.tool-feature-card{background:#fff;border:1px solid #e2e8f0;border-radius:1rem;padding:1.75rem;text-align:center;box-shadow:0 1px 3px rgba(0,0,0,.04);transition:transform .2s,box-shadow .2s}
.tool-feature-card:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.08)}
.tool-feature-icon{width:3rem;height:3rem;border-radius:.75rem;display:flex;align-items:center;justify-content:center;margin:0 auto 1rem}
.feat-green{background:#dcfce7;color:#16a34a}
.feat-blue{background:#dbeafe;color:#2563eb}
.feat-purple{background:#f3e8ff;color:#9333ea}
.feat-orange{background:#ffedd5;color:#ea580c}
.tool-feature-card h3{font-size:1rem;font-weight:700;color:#0f172a;margin-bottom:.5rem}
.tool-feature-card p{font-size:.875rem;color:#64748b;line-height:1.6}

/* --- Section Headings --- */
.editor-content section{margin-bottom:2.5rem}
.editor-content h2{font-size:1.5rem;font-weight:800;color:#0f172a;margin-bottom:1.5rem;text-align:center}

/* --- How to Use --- */
.how-to-grid{display:grid;grid-template-columns:1fr;gap:1.5rem}
.how-to-grid > div{background:#fff;border:1px solid #e2e8f0;border-radius:1rem;padding:1.75rem}
.how-to-grid h3{font-weight:700;color:#0f172a;margin-bottom:1rem;font-size:1.125rem}
.quick-steps{display:flex;flex-direction:column;gap:1rem}
.quick-steps li{display:flex;align-items:flex-start;gap:1rem}
.step-number{width:2rem;height:2rem;border-radius:50%;background:linear-gradient(135deg,#16a34a,#059669);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.875rem;flex-shrink:0}
.quick-steps li span:last-child{color:#334155;line-height:1.6;padding-top:.25rem;font-size:.938rem}

.shortcut-list{display:flex;flex-direction:column;gap:.75rem}
.shortcut-list li{display:flex;align-items:center;gap:.75rem;color:#334155;font-size:.938rem}
.shortcut-list li .dot{color:#16a34a;font-weight:700}
.shortcut-list kbd{display:inline-flex;padding:.125rem .5rem;background:#f1f5f9;border:1px solid #cbd5e1;border-radius:.375rem;font-family:"Courier New",Courier,monospace;font-size:.813rem;color:#0f172a;box-shadow:0 1px 2px rgba(0,0,0,.06)}

/* --- Use Cases --- */
.use-grid{display:grid;grid-template-columns:1fr;gap:1.25rem}
.use-card{background:#fff;border:1px solid #e2e8f0;border-radius:1rem;padding:1.5rem;border-left:4px solid}
.use-card.use-green{border-left-color:#16a34a}
.use-card.use-blue{border-left-color:#2563eb}
.use-card.use-purple{border-left-color:#9333ea}
.use-card.use-orange{border-left-color:#ea580c}
.use-card h4{font-weight:700;color:#0f172a;margin-bottom:.5rem;display:flex;align-items:center;gap:.5rem;font-size:1rem}
.use-card h4 svg{flex-shrink:0}
.use-card p{font-size:.875rem;color:#64748b;line-height:1.6}

/* --- Tips --- */
.tips-grid{display:grid;grid-template-columns:1fr;gap:1.25rem}
.tip-item{display:flex;align-items:flex-start;gap:1rem;background:#fff;border:1px solid #e2e8f0;border-radius:1rem;padding:1.5rem}
.tip-num{width:2.25rem;height:2.25rem;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.938rem;flex-shrink:0;color:#fff}
.t-green{background:#16a34a}
.t-blue{background:#2563eb}
.t-purple{background:#9333ea}
.t-orange{background:#ea580c}
.tip-item h4{font-weight:700;color:#0f172a;margin-bottom:.25rem;font-size:1rem}
.tip-item p{font-size:.875rem;color:#64748b;line-height:1.6}

/* =============================================
   RESPONSIVE
   ============================================= */

/* 640px+ */
@media(min-width:640px){
  .ed-btn .btn-text{display:inline}
  .editor-title h1{display:block}
}

/* 768px+ */
@media(min-width:768px){
  .desktop-nav{display:flex}
  .mobile-menu-btn{display:none}
  .footer-grid{grid-template-columns:2fr 1fr 1fr}

  .editor-split{flex-direction:row}
  .editor-panel.code-panel{flex:1;border-bottom:none;border-right:1px solid #e2e8f0}
  .editor-panel.preview-panel{flex:1}

  .resize-handle{display:flex;position:absolute;top:0;bottom:0;width:6px;background:#cbd5e1;cursor:col-resize;z-index:10;transition:background .15s;align-items:center;justify-content:center}
  .resize-handle:hover,.resize-handle.active{background:#3b82f6}
  .resize-handle .grip-icon{background:#94a3b8;border-radius:9999px;padding:.25rem;transition:background .15s;display:flex;align-items:center;justify-content:center}
  .resize-handle:hover .grip-icon,.resize-handle.active .grip-icon{background:#3b82f6}
  .resize-handle .grip-icon svg{width:.75rem;height:.75rem;color:#fff}

  .tool-features{grid-template-columns:repeat(3,1fr)}
  .how-to-grid{grid-template-columns:1fr 1fr}
  .use-grid{grid-template-columns:1fr 1fr}
  .tips-grid{grid-template-columns:1fr 1fr}
}

/* 1024px+ */
@media(min-width:1024px){
  .container{padding:0 2rem}
  .footer-grid{grid-template-columns:2fr 1fr 1fr 2fr}
  .footer-all-links ul{columns:3}
  .use-grid{grid-template-columns:repeat(4,1fr)}
}