/* =============================================
   CodeToFun — JSON Validator & Formatter
   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}

/* =============================================
   TOOL PAGE — JSON Validator
   ============================================= */
.tool-page{background:linear-gradient(135deg,#eff6ff,#e0e7ff);min-height:100vh}

.tool-page-header{text-align:center;padding:2rem 0 1.5rem}
.tool-badge{display:inline-flex;align-items:center;gap:.5rem;background:#dbeafe;color:#1d4ed8;padding:.5rem 1rem;border-radius:9999px;font-size:.875rem;font-weight:600;margin-bottom:1rem}
.tool-badge svg{width:1rem;height:1rem}
.tool-page-header h1{font-size:2rem;font-weight:800;color:#0f172a;margin-bottom:.75rem}
.tool-page-header p{font-size:1rem;color:#475569;max-width:48rem;margin:0 auto;line-height:1.7}

.tool-container{background:#fff;border-radius:1rem;box-shadow:0 10px 40px rgba(0,0,0,.08);border:1px solid #e2e8f0;overflow:hidden;margin-bottom:2rem}

/* --- Toolbar --- */
.tool-toolbar{background:#f8fafc;border-bottom:1px solid #e2e8f0;padding:1rem}
.toolbar-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem}
.toolbar-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}

.toolbar-btn{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;border-radius:.5rem;font-weight:600;font-size:.813rem;font-family:inherit;cursor:pointer;transition:all .2s ease;border:none;color:#fff;white-space:nowrap}
.toolbar-btn svg{width:1rem;height:1rem;flex-shrink:0}
.toolbar-btn:disabled{opacity:.45;cursor:not-allowed}
.toolbar-btn.tb-example{background:#9333ea}
.toolbar-btn.tb-example:hover{background:#7e22ce}
.toolbar-btn.tb-copy{background:#16a34a}
.toolbar-btn.tb-copy:hover:not(:disabled){background:#15803d}
.toolbar-btn.tb-copy.copied{background:#16a34a}
.toolbar-btn.tb-download{background:#4f46e5}
.toolbar-btn.tb-download:hover:not(:disabled){background:#4338ca}
.toolbar-btn.tb-clear{background:#dc2626}
.toolbar-btn.tb-clear:hover{background:#b91c1c}

.coffee-link{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:#ffdd00;color:#1e293b;border-radius:.5rem;font-weight:600;font-size:.813rem;transition:background .2s;box-shadow:0 2px 6px rgba(0,0,0,.1);white-space:nowrap}
.coffee-link:hover{background:#ffed4e}
.coffee-link svg{width:1rem;height:1rem}

/* --- Settings --- */
.settings-section{margin-top:1rem;padding-top:1rem;border-top:1px solid #e2e8f0}
.settings-heading{display:flex;align-items:center;gap:.5rem;margin-bottom:.75rem}
.settings-heading svg{width:1rem;height:1rem;color:#475569}
.settings-heading h4{font-size:.813rem;font-weight:600;color:#0f172a}

.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}

.setting-select-group{display:flex;flex-direction:column;gap:.25rem}
.setting-select-group label{font-size:.75rem;font-weight:600;color:#334155}
.setting-select-group select{padding:.5rem .75rem;border:1px solid #cbd5e1;border-radius:.5rem;font-size:.813rem;font-family:inherit;color:#1e293b;outline:none;transition:border-color .2s;background:#fff}
.setting-select-group select:focus{border-color:#2563eb;box-shadow:0 0 0 2px rgba(37,99,235,.15)}
.setting-select-group select:disabled{opacity:.5;background:#f1f5f9}

/* Beautify / Minify toggle */
.format-toggle-group{display:flex;flex-direction:column;gap:.25rem}
.format-toggle-group label{font-size:.75rem;font-weight:600;color:#334155}
.format-toggle{display:flex;gap:.375rem}
.format-toggle-btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:.375rem;padding:.5rem .75rem;border-radius:.5rem;font-size:.813rem;font-weight:600;font-family:inherit;border:none;cursor:pointer;transition:all .2s}
.format-toggle-btn svg{width:1rem;height:1rem}
.format-toggle-btn.active{background:#2563eb;color:#fff}
.format-toggle-btn:not(.active){background:#e2e8f0;color:#334155}
.format-toggle-btn:not(.active):hover{background:#cbd5e1}

/* Validation status */
.validation-status{display:flex;flex-direction:column;gap:.25rem}
.validation-status>label{font-size:.75rem;font-weight:600;color:#334155}
.status-box{padding:.5rem .75rem;border-radius:.5rem;border:2px solid #e2e8f0;display:flex;align-items:center;gap:.5rem;font-size:.813rem;font-weight:600}
.status-box svg{width:1.125rem;height:1.125rem;flex-shrink:0}
.status-box.status-idle{border-color:#e2e8f0}
.status-box.status-idle svg{color:#94a3b8}
.status-box.status-idle span{color:#64748b}
.status-box.status-valid{border-color:#bbf7d0;background:#f0fdf4}
.status-box.status-valid svg{color:#16a34a}
.status-box.status-valid span{color:#15803d}
.status-box.status-invalid{border-color:#fecaca;background:#fef2f2}
.status-box.status-invalid svg{color:#dc2626}
.status-box.status-invalid span{color:#b91c1c}

/* --- Panels --- */
.panels{display:grid;grid-template-columns:1fr}
.panel{border-bottom:1px solid #e2e8f0}
.panel:last-child{border-bottom:none}
.panel-header{background:#f1f5f9;padding:.75rem 1rem;border-bottom:1px solid #e2e8f0}
.panel-header h3{font-size:.875rem;font-weight:600;color:#0f172a}

.panel textarea{width:100%;min-height:20rem;padding:1rem;border:none;resize:vertical;font-family:"Courier New",Courier,monospace;font-size:.813rem;line-height:1.7;color:#1e293b;background:#fff;outline:none;tab-size:2}
.panel textarea::placeholder{color:#94a3b8}
.output-panel textarea{background:#f8fafc}

/* Error panel */
.error-panel{min-height:20rem;padding:1rem;overflow-y:auto;background:#fef2f2}
.error-card{display:flex;align-items:flex-start;gap:.75rem;padding:1rem;background:#fff;border:2px solid #fca5a5;border-radius:.5rem;margin-bottom:1rem}
.error-card svg{width:1.5rem;height:1.5rem;color:#dc2626;flex-shrink:0;margin-top:.125rem}
.error-card h4{font-weight:700;color:#7f1d1d;margin-bottom:.5rem;font-size:.875rem}
.error-card p{font-size:.813rem;color:#991b1b;margin-bottom:.25rem}
.error-card p:last-child{margin-bottom:0}

.mistakes-card{padding:1rem;background:#fff;border:1px solid #fcd34d;border-radius:.5rem}
.mistakes-card h4{font-weight:700;color:#78350f;margin-bottom:.75rem;font-size:.875rem;display:flex;align-items:center;gap:.5rem}
.mistakes-card h4 svg{width:1.125rem;height:1.125rem}
.mistakes-card li{display:flex;align-items:flex-start;gap:.5rem;font-size:.813rem;color:#92400e;margin-bottom:.5rem}
.mistakes-card li:last-child{margin-bottom:0}
.mistakes-card .dot{color:#d97706;font-weight:700;flex-shrink:0}
.mistakes-card code{background:#fef3c7;padding:.125rem .375rem;border-radius:.25rem;font-size:.75rem}

/* Panel stats */
.panel-stats{padding:.75rem 1rem;border-top:1px solid #e2e8f0;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;font-size:.75rem;color:#64748b}
.panel-stats.input-stats{background:#f8fafc}
.panel-stats.output-stats-valid{background:#f0fdf4;border-top-color:#bbf7d0}
.panel-stats.output-stats-default{background:#f8fafc}
.panel-stats .separator{color:#cbd5e1}
.panel-stats.input-stats strong{color:#2563eb;font-weight:700}
.panel-stats.output-stats-valid strong{color:#16a34a;font-weight:700}
.panel-stats.output-stats-default strong{color:#64748b;font-weight:700}

/* --- Summary Bar --- */
.summary-bar{display:none;border-top:1px solid;padding:1rem 1.5rem;flex-wrap:wrap;align-items:center;gap:1.5rem;font-size:.875rem}
.summary-bar.visible{display:flex}
.summary-bar.summary-valid{background:#f0fdf4;border-top-color:#bbf7d0}
.summary-bar.summary-invalid{background:#fef2f2;border-top-color:#fecaca}
.summary-item{display:flex;align-items:center;gap:.5rem;color:#334155;font-weight:500}
.summary-bar svg{width:1rem;height:1rem}
.summary-bar.summary-valid svg{color:#16a34a}
.summary-bar.summary-invalid svg{color:#dc2626}
.summary-bar .note{color:#64748b;font-weight:400}

/* --- Features --- */
.tool-features{display:grid;grid-template-columns:1fr;gap:1rem;margin-bottom:2rem}
.tool-feature-card{background:#fff;border-radius:.75rem;padding:1.5rem;box-shadow:0 4px 12px rgba(0,0,0,.06);border:1px solid #e2e8f0}
.tool-feature-icon{width:3rem;height:3rem;border-radius:.5rem;display:flex;align-items:center;justify-content:center;margin-bottom:1rem}
.tool-feature-icon svg{width:1.5rem;height:1.5rem}
.tool-feature-icon.feat-blue{background:#dbeafe;color:#2563eb}
.tool-feature-icon.feat-green{background:#dcfce7;color:#16a34a}
.tool-feature-icon.feat-purple{background:#f3e8ff;color:#9333ea}
.tool-feature-card h3{font-size:1rem;font-weight:700;color:#0f172a;margin-bottom:.5rem}
.tool-feature-card p{font-size:.875rem;color:#475569;line-height:1.6}

/* --- How to Use --- */
.how-to-use{background:#fff;border-radius:.75rem;padding:2rem 1.5rem;box-shadow:0 4px 12px rgba(0,0,0,.06);border:1px solid #e2e8f0;margin-bottom:2rem}
.how-to-use h2{font-size:1.5rem;font-weight:800;color:#0f172a;margin-bottom:1.5rem}
.how-to-grid{display:grid;grid-template-columns:1fr;gap:2rem}
.how-to-grid h3{font-size:1rem;font-weight:600;color:#0f172a;margin-bottom:.75rem}
.quick-steps{list-style:none;padding:0;display:flex;flex-direction:column;gap:.75rem}
.quick-steps li{display:flex;align-items:flex-start;gap:.75rem;color:#334155;font-size:.938rem;line-height:1.5}
.step-number{flex-shrink:0;width:1.5rem;height:1.5rem;background:#2563eb;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;margin-top:.125rem}
.mode-list{list-style:none;padding:0;display:flex;flex-direction:column;gap:.75rem}
.mode-list li{display:flex;align-items:flex-start;gap:.5rem;font-size:.875rem;color:#334155;line-height:1.6}
.mode-list .dot{color:#2563eb;font-weight:700;flex-shrink:0;margin-top:.125rem}
.mode-list strong{color:#0f172a}

/* --- Example Section --- */
.example-section{background:#fff;border-radius:.75rem;padding:2rem 1.5rem;box-shadow:0 4px 12px rgba(0,0,0,.06);border:1px solid #e2e8f0;margin-bottom:2rem}
.example-section h2{font-size:1.5rem;font-weight:800;color:#0f172a;margin-bottom:1rem}
.example-grid{display:grid;grid-template-columns:1fr;gap:1.5rem}
.example-label{display:flex;align-items:center;gap:.5rem;font-size:.938rem;font-weight:600;color:#0f172a;margin-bottom:.75rem}
.example-label svg{width:1.125rem;height:1.125rem}
.example-code{padding:1rem;border-radius:.5rem;overflow-x:auto;font-family:"Courier New",Courier,monospace;font-size:.75rem;line-height:1.7;white-space:pre;background:#0f172a;border:2px solid}
.example-code.code-invalid{color:#f87171;border-color:#fca5a5}
.example-code.code-valid{color:#4ade80;border-color:#86efac}

/* --- Use Cases --- */
.use-cases{background:#fff;border-radius:.75rem;padding:2rem 1.5rem;box-shadow:0 4px 12px rgba(0,0,0,.06);border:1px solid #e2e8f0;margin-bottom:2rem}
.use-cases h2{font-size:1.5rem;font-weight:800;color:#0f172a;margin-bottom:1.5rem}
.use-cases-grid{display:grid;grid-template-columns:1fr;gap:.75rem}
.use-case-card{padding:1rem;border-radius:.5rem;border:1px solid}
.use-case-card h4{font-size:.938rem;font-weight:600;color:#0f172a;margin-bottom:.375rem}
.use-case-card p{font-size:.813rem;color:#475569}
.uc-blue{background:#eff6ff;border-color:#bfdbfe}
.uc-green{background:#f0fdf4;border-color:#bbf7d0}
.uc-purple{background:#faf5ff;border-color:#e9d5ff}
.uc-orange{background:#fff7ed;border-color:#fed7aa}

/* --- JSON Rules Section --- */
.rules-section{background:linear-gradient(135deg,#eff6ff,#e0e7ff);border-radius:.75rem;padding:2rem 1.5rem;box-shadow:0 4px 12px rgba(0,0,0,.06);border:1px solid #bfdbfe;margin-bottom:2rem}
.rules-section h2{font-size:1.5rem;font-weight:800;color:#0f172a;margin-bottom:1rem}
.rules-grid{display:grid;grid-template-columns:1fr;gap:2rem}
.rules-grid h3{font-size:1rem;font-weight:600;color:#0f172a;margin-bottom:.75rem}
.rules-list{display:flex;flex-direction:column;gap:.5rem}
.rules-list p{display:flex;align-items:flex-start;gap:.5rem;font-size:.875rem;color:#334155}
.rules-list .mark-ok{color:#16a34a;font-weight:700;flex-shrink:0}
.rules-list .mark-err{color:#dc2626;font-weight:700;flex-shrink:0}
.rules-list code{background:#dbeafe;padding:.125rem .375rem;border-radius:.25rem;font-size:.75rem}

/* --- Tips Section --- */
.tips-section{background:#fff;border-radius:.75rem;padding:2rem 1.5rem;box-shadow:0 4px 12px rgba(0,0,0,.06);border:1px solid #e2e8f0;margin-bottom:2rem}
.tips-section h2{font-size:1.5rem;font-weight:800;color:#0f172a;margin-bottom:1rem}
.tips-grid{display:grid;grid-template-columns:1fr;gap:1rem}
.tip-item{display:flex;gap:.75rem}
.tip-num{flex-shrink:0;width:2rem;height:2rem;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.813rem}
.tip-num.t-blue{background:#dbeafe;color:#2563eb}
.tip-num.t-green{background:#dcfce7;color:#16a34a}
.tip-num.t-purple{background:#f3e8ff;color:#9333ea}
.tip-num.t-orange{background:#ffedd5;color:#ea580c}
.tip-item h4{font-size:.875rem;font-weight:600;color:#0f172a;margin-bottom:.25rem}
.tip-item p{font-size:.813rem;color:#64748b;line-height:1.5}

/* =============================================
   RESPONSIVE
   ============================================= */
@media(min-width:640px){
  .container{padding:0 1.5rem}
  .cookie-notice{flex-direction:row;justify-content:center}
  .tool-page-header h1{font-size:2.5rem}
  .tool-toolbar{padding:1rem 1.5rem}
  .settings-grid{grid-template-columns:1fr 1fr 2fr}
  .tool-features{grid-template-columns:repeat(3,1fr)}
  .how-to-use{padding:2.5rem}
  .how-to-grid{grid-template-columns:1fr 1fr}
  .example-section{padding:2.5rem}
  .example-grid{grid-template-columns:1fr 1fr}
  .use-cases{padding:2.5rem}
  .use-cases-grid{grid-template-columns:repeat(2,1fr)}
  .rules-section{padding:2.5rem}
  .rules-grid{grid-template-columns:1fr 1fr}
  .tips-section{padding:2.5rem}
  .tips-grid{grid-template-columns:1fr 1fr}
}
@media(min-width:768px){
  .container{padding:0 2rem}
  .desktop-nav{display:flex}
  .mobile-menu-btn{display:none}
  .footer-grid{grid-template-columns:repeat(2,1fr)}
  .footer-brand{grid-column:1/-1}
  .footer-bottom{flex-direction:row;justify-content:space-between;text-align:left}
  .tool-page-header{padding:2.5rem 0 2rem}
  .panels{grid-template-columns:1fr 1fr}
  .panel{border-bottom:none}
  .input-panel{border-right:1px solid #e2e8f0}
  .panel textarea,.error-panel{min-height:28rem}
}
@media(min-width:1024px){
  .footer-grid{grid-template-columns:2fr 1fr 2fr 1fr 1fr;gap:2rem}
  .footer-brand{grid-column:auto}
  .footer-all-links ul{columns:3}
  .tool-page-header h1{font-size:2.75rem}
  .tool-page-header p{font-size:1.125rem}
  .settings-grid{grid-template-columns:1fr 1fr 2fr}
  .how-to-use h2,.use-cases h2,.rules-section h2,.example-section h2,.tips-section h2{font-size:1.75rem}
  .use-cases-grid{grid-template-columns:repeat(4,1fr)}
}