/* ===== OutilsBox — design system ===== */
:root{
  --bg:#f5f6fa; --surface:#ffffff; --surface-2:#f0f2f7; --border:#e3e6ee;
  --text:#1a1d29; --muted:#606883; --primary:#4f46e5; --primary-600:#4338ca;
  --primary-soft:#eef0ff; --accent:#0ea5e9; --success:#16a34a; --danger:#dc2626;
  --shadow:0 1px 3px rgba(20,23,40,.06),0 8px 24px rgba(20,23,40,.06);
  --shadow-lg:0 12px 40px rgba(20,23,40,.14);
  --radius:16px; --radius-sm:10px; --maxw:1180px;
  --sidebar-w:260px;
}
[data-theme="dark"]{
  --bg:#0c0e16; --surface:#151826; --surface-2:#1c2032; --border:#262b40;
  --text:#eef1f8; --muted:#9aa3c0; --primary:#7c83ff; --primary-600:#6a72ff;
  --primary-soft:#1c1f3a; --accent:#38bdf8;
  --shadow:0 1px 3px rgba(0,0,0,.4),0 10px 30px rgba(0,0,0,.35);
  --shadow-lg:0 16px 50px rgba(0,0,0,.55);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:var(--bg);color:var(--text);line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{line-height:1.2;margin:0 0 .4em}
.skip-link{position:absolute;left:-999px;top:0;background:var(--primary);color:#fff;padding:8px 14px;border-radius:0 0 8px 0;z-index:100}
.skip-link:focus{left:0}

/* Topbar */
.topbar{
  position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:14px;
  padding:12px 20px;background:var(--surface);border-bottom:1px solid var(--border);
}
.brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:1.15rem;color:var(--text)}
.brand:hover{text-decoration:none}
.brand-logo{font-size:1.4rem}
.brand-name b{color:var(--primary)}
.search-wrap{position:relative;flex:1;max-width:520px;margin:0 auto}
#globalSearch{
  width:100%;padding:11px 16px;border:1px solid var(--border);border-radius:999px;
  background:var(--surface-2);color:var(--text);font-size:.95rem;outline:none;
}
#globalSearch:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
.search-results{
  position:absolute;top:calc(100% + 8px);left:0;right:0;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:var(--shadow-lg);
  max-height:60vh;overflow:auto;z-index:50;padding:6px;
}
.search-results a{display:block;padding:10px 12px;border-radius:8px;color:var(--text)}
.search-results a:hover,.search-results a.active{background:var(--primary-soft);text-decoration:none}
.search-results .sr-cat{font-size:.75rem;color:var(--muted)}
.icon-btn{
  background:var(--surface-2);border:1px solid var(--border);border-radius:10px;
  width:42px;height:42px;font-size:1.1rem;cursor:pointer;color:var(--text);flex:none;
}
.icon-btn:hover{background:var(--primary-soft)}
.menu-toggle{display:none}

/* Layout */
.layout{display:flex;gap:24px;max-width:var(--maxw);margin:0 auto;padding:22px 20px;align-items:flex-start}
.sidebar{
  width:var(--sidebar-w);flex:none;position:sticky;top:78px;
  max-height:calc(100vh - 96px);overflow:auto;
}
#categoryNav{display:flex;flex-direction:column;gap:2px}
.nav-cat{
  display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;
  color:var(--text);font-weight:600;font-size:.92rem;cursor:pointer;border:none;background:none;text-align:left;width:100%;
}
.nav-cat:hover{background:var(--surface-2);text-decoration:none}
.nav-cat.active{background:var(--primary-soft);color:var(--primary)}
.nav-cat .cat-count{margin-left:auto;font-size:.75rem;color:var(--muted);background:var(--surface-2);padding:1px 8px;border-radius:999px}
.content{flex:1;min-width:0}

/* Ad slots */
.ad-slot{
  display:flex;align-items:center;justify-content:center;position:relative;
  background:repeating-linear-gradient(45deg,var(--surface-2),var(--surface-2) 12px,transparent 12px,transparent 24px);
  border:1px dashed var(--border);border-radius:12px;color:var(--muted);
  font-size:.8rem;letter-spacing:.03em;text-transform:uppercase;overflow:hidden;
}
.ad-slot .ad-label{background:var(--surface);padding:3px 10px;border-radius:999px;border:1px solid var(--border)}
.ad-leaderboard{max-width:var(--maxw);margin:14px auto 0;height:90px}
.ad-rail{margin-top:18px;height:600px}
.ad-inline{height:120px;margin:22px 0}
.ad-interstitial{height:250px;width:100%}
@media(max-width:900px){.ad-rail{display:none}.ad-leaderboard{height:60px}}

/* Hero / home */
.hero{
  background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff;
  border-radius:var(--radius);padding:38px 34px;margin-bottom:26px;box-shadow:var(--shadow);
}
.hero h1{font-size:2rem;margin-bottom:.3em}
.hero p{opacity:.92;max-width:640px;margin:0}
.section-title{display:flex;align-items:center;gap:10px;margin:30px 0 14px;font-size:1.25rem}
.section-title .emoji{font-size:1.3rem}
.section-title .count{font-size:.85rem;color:var(--muted);font-weight:500}

/* Tool grid */
.tool-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px}
.tool-card{
  display:flex;flex-direction:column;gap:6px;padding:16px;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:var(--shadow);
  color:var(--text);transition:transform .12s ease,border-color .12s ease,box-shadow .12s ease;position:relative;
}
.tool-card:hover{transform:translateY(-3px);border-color:var(--primary);text-decoration:none;box-shadow:var(--shadow-lg)}
.tool-card .t-icon{font-size:1.6rem}
.tool-card .t-name{font-weight:700;font-size:.98rem}
.tool-card .t-desc{font-size:.82rem;color:var(--muted)}
.tool-card .t-badge{position:absolute;top:10px;right:10px;font-size:.62rem;background:var(--primary-soft);color:var(--primary);padding:2px 7px;border-radius:999px;text-transform:uppercase;font-weight:700}
.tool-card .t-badge.t-badge-off{background:rgba(140,146,168,.22);color:var(--muted);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px dashed rgba(140,146,168,.5)}
.tool-card.t-card-off{opacity:.72}
.tool-card.t-card-off .t-icon{filter:blur(1.5px);opacity:.65}

/* Tool page */
.tool-header{margin-bottom:18px}
.breadcrumb{font-size:.82rem;color:var(--muted);margin-bottom:8px}
.breadcrumb a{color:var(--muted)}
.tool-header h1{font-size:1.7rem;display:flex;align-items:center;gap:10px}
.tool-header p{color:var(--muted);margin:.3em 0 0}
.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow);margin-bottom:18px}
.panel + .panel{margin-top:0}

/* Form controls */
.field{margin-bottom:14px;display:block}
.field > label{display:block;font-weight:600;font-size:.88rem;margin-bottom:6px}
.field .hint{font-weight:400;color:var(--muted);font-size:.8rem}
input[type=text],input[type=number],input[type=url],input[type=password],input[type=email],input[type=date],input[type=datetime-local],input[type=time],select,textarea{
  width:100%;padding:11px 13px;border:1px solid var(--border);border-radius:10px;
  background:var(--surface-2);color:var(--text);font-size:.95rem;font-family:inherit;outline:none;
}
input:focus,select:focus,textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
textarea{resize:vertical;min-height:120px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
textarea.mono,input.mono,pre.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.row{display:flex;gap:14px;flex-wrap:wrap}
.row > *{flex:1;min-width:160px}
.inline{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.check{display:flex;align-items:center;gap:8px;font-size:.9rem}
.check input{width:auto}
input[type=range]{width:100%}
input[type=color]{width:52px;height:42px;padding:2px;border-radius:10px;cursor:pointer}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 18px;border-radius:10px;border:1px solid var(--border);background:var(--surface-2);
  color:var(--text);font-weight:600;font-size:.92rem;cursor:pointer;font-family:inherit;transition:.12s;
}
.btn:hover{background:var(--primary-soft);text-decoration:none}
.btn-primary{background:var(--primary);border-color:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-600)}
.btn-ghost{background:none}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.btn-sm{padding:7px 12px;font-size:.82rem}

/* Dropzone */
.dropzone{
  border:2px dashed var(--border);border-radius:var(--radius);padding:34px 20px;text-align:center;
  color:var(--muted);cursor:pointer;background:var(--surface-2);transition:.12s;
}
.dropzone.drag,.dropzone:hover{border-color:var(--primary);background:var(--primary-soft);color:var(--primary)}
.dropzone .dz-icon{font-size:2.2rem}
.file-list{list-style:none;padding:0;margin:14px 0 0;display:flex;flex-direction:column;gap:8px}
.file-list li{display:flex;align-items:center;gap:10px;padding:9px 12px;background:var(--surface-2);border-radius:10px;font-size:.88rem}
.file-list li .fl-size{margin-left:auto;color:var(--muted);font-size:.8rem}
.file-list li .fl-del{cursor:pointer;color:var(--danger);border:none;background:none;font-size:1rem}
.file-list li[draggable=true]{cursor:grab}

/* Output */
.output{background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:14px;overflow:auto;max-height:460px}
pre.output{white-space:pre-wrap;word-break:break-word;font-family:ui-monospace,monospace;font-size:.86rem}
.result-note{font-size:.85rem;color:var(--muted);margin-top:8px}
.status{padding:10px 14px;border-radius:10px;font-size:.88rem;margin-top:10px}
.status.ok{background:rgba(22,163,74,.12);color:var(--success)}
.status.err{background:rgba(220,38,38,.12);color:var(--danger)}
.status.info{background:var(--primary-soft);color:var(--primary)}
.kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px}
.kpi .k{background:var(--surface-2);border-radius:10px;padding:14px;text-align:center}
.kpi .k b{display:block;font-size:1.5rem}
.kpi .k span{font-size:.78rem;color:var(--muted)}
table.data{width:100%;border-collapse:collapse;font-size:.86rem}
table.data th,table.data td{border:1px solid var(--border);padding:7px 10px;text-align:left}
table.data th{background:var(--surface-2)}
.swatch{height:60px;border-radius:10px;border:1px solid var(--border);cursor:pointer;display:flex;align-items:flex-end;padding:6px;font-size:.72rem;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.5)}

/* Modal */
.modal-backdrop{position:fixed;inset:0;background:rgba(6,8,16,.6);display:flex;align-items:center;justify-content:center;z-index:100;padding:20px}
.modal{background:var(--surface);border-radius:var(--radius);padding:22px;max-width:520px;width:100%;box-shadow:var(--shadow-lg);text-align:center}
.ad-note{color:var(--muted);font-size:.85rem;margin:14px 0}

/* Toast */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--text);color:var(--bg);padding:12px 20px;border-radius:999px;font-size:.9rem;z-index:200;box-shadow:var(--shadow-lg)}

/* Footer */
.footer{border-top:1px solid var(--border);background:var(--surface);margin-top:40px}
.footer-inner{max-width:var(--maxw);margin:0 auto;padding:22px 20px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:.85rem;color:var(--muted)}

/* Sidebar mobile */
.sidebar-backdrop{display:none}
@media(max-width:860px){
  .menu-toggle{display:block}
  .layout{padding:16px}
  .sidebar{
    position:fixed;top:0;left:0;bottom:0;width:280px;background:var(--surface);z-index:60;
    padding:18px;transform:translateX(-100%);transition:transform .2s;max-height:none;box-shadow:var(--shadow-lg);
  }
  .sidebar.open{transform:none}
  .sidebar-backdrop.open{display:block;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:55}
  .search-wrap{max-width:none}
  .brand-name{display:none}
}
.hidden{display:none!important}
[hidden]{display:none!important}