/* =============================================
   CodeToFun — CSS Minifier
   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 — CSS Minifier
   ============================================= */
.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 & Status --- */
.settings-area{margin-top:1rem;padding-top:1rem;border-top:1px solid #e2e8f0;display:flex;flex-wrap:wrap;align-items:center;gap:1rem}
.options-group{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem}
.check-label{display:flex;align-items:center;gap:.5rem;cursor:pointer;font-size:.813rem;color:#334155;font-weight:500}
.check-label input[type="checkbox"]{width:1rem;height:1rem;accent-color:#2563eb;cursor:pointer}

.reduction-box{display:none;align-items:center;gap:.75rem;background:#f0fdf4;border:2px solid #bbf7d0;padding:.5rem 1rem;border-radius:.5rem;margin-left:auto}
.reduction-box.visible{display:flex}
.reduction-box svg{width:1.25rem;height:1.25rem;color:#16a34a;flex-shrink:0}
.reduction-main{display:flex;flex-direction:column}
.reduction-main .label{font-size:.688rem;color:#15803d;font-weight:600}
.reduction-main .value{font-size:1.125rem;font-weight:800;color:#166534}
.reduction-divider{width:1px;height:2rem;background:#bbf7d0}
.reduction-saved{display:flex;flex-direction:column}
.reduction-saved .label{font-size:.688rem;color:#15803d}
.reduction-saved .value{font-size:.813rem;font-weight:700;color:#166534}

/* --- 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;display:flex;align-items:center;gap:.5rem}
.panel-header h3 svg{width:1rem;height:1rem}

.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}

.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;background:#f0fdf4;border-top:1px solid #bbf7d0;padding:1rem 1.5rem;flex-wrap:wrap;align-items:center;gap:1.5rem;font-size:.875rem}
.summary-bar.visible{display:flex}
.summary-item{display:flex;align-items:center;gap:.5rem;color:#334155;font-weight:500}
.summary-bar svg{width:1rem;height:1rem;color:#16a34a}
.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-badge{font-size:.688rem;font-weight:700;padding:.25rem .5rem;border-radius:.25rem}
.example-badge.before{background:#dbeafe;color:#1d4ed8}
.example-badge.after{background:#dcfce7;color:#15803d}
.example-code{padding:1rem;border-radius:.5rem;overflow-x:auto;font-family:"Courier New",Courier,monospace;font-size:.75rem;line-height:1.7;background:#0f172a;color:#4ade80;border:1px solid #334155}
.example-code.code-break{white-space:pre-wrap;word-break:break-all}

.color-examples{margin-top:1.5rem;padding:1rem;background:#eff6ff;border:1px solid #bfdbfe;border-radius:.5rem}
.color-examples h4{font-size:.938rem;font-weight:600;color:#0f172a;margin-bottom:.75rem}
.color-grid{display:grid;grid-template-columns:1fr;gap:1rem;font-family:"Courier New",Courier,monospace;font-size:.813rem}
.color-grid p{font-size:.813rem;color:#475569;margin-bottom:.5rem;font-family:"Inter",sans-serif}
.color-grid code{display:block;margin-bottom:.25rem}
.color-grid code.c-blue{color:#1d4ed8}
.color-grid code.c-green{color:#15803d}

/* --- Why Minify (use cases) --- */
.why-minify{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}
.why-minify h2{font-size:1.5rem;font-weight:800;color:#0f172a;margin-bottom:1.5rem}
.why-grid{display:grid;grid-template-columns:1fr;gap:1rem}
.why-card{padding:1rem;border-radius:.5rem;border:1px solid}
.why-card h4{font-size:.938rem;font-weight:600;color:#0f172a;margin-bottom:.375rem;display:flex;align-items:center;gap:.5rem}
.why-card h4 svg{width:1.125rem;height:1.125rem}
.why-card p{font-size:.813rem;color:#475569}
.why-blue{background:#eff6ff;border-color:#bfdbfe}
.why-blue h4 svg{color:#2563eb}
.why-green{background:#f0fdf4;border-color:#bbf7d0}
.why-green h4 svg{color:#16a34a}
.why-purple{background:#faf5ff;border-color:#e9d5ff}
.why-purple h4 svg{color:#9333ea}
.why-orange{background:#fff7ed;border-color:#fed7aa}
.why-orange h4 svg{color:#ea580c}

/* --- Best Practices --- */
.practices-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}
.practices-section h2{font-size:1.5rem;font-weight:800;color:#0f172a;margin-bottom:1rem}
.practices-grid{display:grid;grid-template-columns:1fr;gap:2rem}
.practices-grid h3{font-size:1rem;font-weight:600;color:#0f172a;margin-bottom:.75rem}
.practices-list{display:flex;flex-direction:column;gap:.5rem}
.practices-list p{display:flex;align-items:flex-start;gap:.5rem;font-size:.875rem;color:#334155}
.practices-list .mark-ok{color:#16a34a;font-weight:700;flex-shrink:0}
.practices-list .mark-err{color:#dc2626;font-weight:700;flex-shrink:0}

/* --- 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}
  .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}
  .color-grid{grid-template-columns:1fr 1fr}
  .why-minify{padding:2.5rem}
  .why-grid{grid-template-columns:1fr 1fr}
  .practices-section{padding:2.5rem}
  .practices-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{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}
  .how-to-use h2,.why-minify h2,.practices-section h2,.example-section h2,.tips-section h2{font-size:1.75rem}
}