/* =============================================
   CodeToFun — JavaScript DeObfuscator
   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 — JS DeObfuscator (emerald theme)
   ============================================= */
.tool-page{background:linear-gradient(135deg,#ecfdf5,#ccfbf1);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:#d1fae5;color:#047857;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:#059669}
.toolbar-btn.tb-example:hover{background:#047857}
.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:#059669;cursor:pointer}

.analysis-box{display:none;align-items:center;gap:.75rem;background:#ecfdf5;border:2px solid #a7f3d0;padding:.5rem 1rem;border-radius:.5rem;margin-left:auto}
.analysis-box.visible{display:flex}
.analysis-box svg{width:1.25rem;height:1.25rem;color:#059669;flex-shrink:0}
.analysis-main{display:flex;flex-direction:column}
.analysis-main .label{font-size:.688rem;color:#047857;font-weight:600}
.analysis-main .value{font-size:1.125rem;font-weight:800}
.analysis-main .value.lvl-high{color:#dc2626}
.analysis-main .value.lvl-medium{color:#ea580c}
.analysis-main .value.lvl-low{color:#ca8a04}
.analysis-main .value.lvl-none{color:#16a34a}
.analysis-divider{width:1px;height:2rem;background:#a7f3d0}
.analysis-read{display:none;flex-direction:column}
.analysis-read.visible{display:flex}
.analysis-read .label{font-size:.688rem;color:#047857}
.analysis-read .value{font-size:.813rem;font-weight:700;color:#065f46}

/* --- 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-active{background:#ecfdf5;border-top-color:#a7f3d0}
.panel-stats.output-stats-default{background:#f8fafc}
.panel-stats .separator{color:#cbd5e1}
.panel-stats.input-stats strong{color:#059669;font-weight:700}
.panel-stats .obf-high{color:#dc2626;font-weight:700}
.panel-stats .obf-medium{color:#ea580c;font-weight:700}
.panel-stats .obf-low{color:#ca8a04;font-weight:700}
.panel-stats .obf-none{color:#16a34a;font-weight:700}
.panel-stats.output-stats-active strong{color:#059669;font-weight:700}
.panel-stats.output-stats-default strong{color:#64748b;font-weight:700}

/* --- Summary Bar --- */
.summary-bar{display:none;background:#ecfdf5;border-top:1px solid #a7f3d0;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:#059669}
.summary-bar .note{color:#64748b;font-weight:400;display:flex;align-items:center;gap:.25rem}
.summary-bar .note svg{width:.75rem;height:.75rem;color:#64748b}

/* --- 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-emerald{background:#d1fae5;color:#059669}
.tool-feature-icon.feat-blue{background:#dbeafe;color:#2563eb}
.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:#059669;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:#059669;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:#fee2e2;color:#b91c1c}
.example-badge.after{background:#d1fae5;color:#047857}
.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;border:1px solid #334155}
.example-code.code-obfuscated{color:#c084fc;white-space:pre-wrap;word-break:break-all}
.example-code.code-readable{color:#4ade80;white-space:pre}

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

/* --- Why Deobfuscate --- */
.why-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}
.why-section 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-emerald{background:#ecfdf5;border-color:#a7f3d0}
.why-emerald h4 svg{color:#059669}
.why-blue{background:#eff6ff;border-color:#bfdbfe}
.why-blue h4 svg{color:#2563eb}
.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}

/* --- Legal Notice --- */
.legal-notice{background:linear-gradient(135deg,#fffbeb,#fff7ed);border-radius:.75rem;padding:1.5rem;box-shadow:0 4px 12px rgba(0,0,0,.06);border:2px solid #fde68a;margin-bottom:2rem;display:flex;align-items:flex-start;gap:1rem}
.legal-icon{flex-shrink:0;background:#fef3c7;padding:.75rem;border-radius:.5rem;display:flex;align-items:center;justify-content:center}
.legal-icon svg{width:1.5rem;height:1.5rem;color:#d97706}
.legal-notice h3{font-size:1rem;font-weight:700;color:#0f172a;margin-bottom:.5rem}
.legal-notice p{font-size:.875rem;color:#334155;line-height:1.6;margin-bottom:.5rem}
.legal-notice strong{color:#0f172a}
.legal-list{list-style:disc;padding-left:1.5rem;display:flex;flex-direction:column;gap:.25rem;font-size:.875rem;color:#334155}

/* --- Limitations --- */
.limitations-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}
.limitations-section h2{font-size:1.5rem;font-weight:800;color:#0f172a;margin-bottom:1rem}
.limit-card{padding:1rem;border-radius:.5rem;border:1px solid;margin-bottom:1rem}
.limit-card h4{font-size:.938rem;font-weight:600;color:#0f172a;margin-bottom:.5rem;display:flex;align-items:center;gap:.5rem}
.limit-card h4 svg{width:1.125rem;height:1.125rem}
.limit-card.can-recover{background:#fefce8;border-color:#fde68a}
.limit-card.can-recover h4 svg{color:#ca8a04}
.limit-card.cannot-recover{background:#fef2f2;border-color:#fecaca}
.limit-card.cannot-recover h4 svg{color:#dc2626}
.limit-list{list-style:disc;padding-left:1.5rem;display:flex;flex-direction:column;gap:.25rem;font-size:.875rem;color:#334155}
.limitations-section .note-text{font-size:.813rem;color:#64748b;font-style:italic}

/* --- FAQ Section --- */
.faq-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}
.faq-section h2{font-size:1.5rem;font-weight:800;color:#0f172a;margin-bottom:1.5rem}
.faq-list{display:flex;flex-direction:column;gap:1.5rem}
.faq-item h3{font-size:.938rem;font-weight:600;color:#0f172a;margin-bottom:.5rem}
.faq-item p{font-size:.875rem;color:#475569;line-height:1.6}

/* =============================================
   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}
  .transform-grid{grid-template-columns:1fr 1fr}
  .why-section{padding:2.5rem}
  .why-grid{grid-template-columns:1fr 1fr}
  .limitations-section{padding:2.5rem}
  .faq-section{padding:2.5rem}
}
@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-section h2,.limitations-section h2,.example-section h2,.faq-section h2{font-size:1.75rem}
}