/* monkey3three tools - shared styles for /tools/ pages */
:root { --accent:#7a0f24; --accent-2:#b31b2b; --text-main:#fff5f6; --text-muted:#d6b2b6; }
* { box-sizing: border-box; }
html, body { margin:0; min-height:100%; }
body { font-family:'Nunito', 'Segoe UI', Roboto, sans-serif; color:var(--text-main); background:radial-gradient(circle at top left, rgba(109,94,247,0.18), transparent 24%), radial-gradient(circle at bottom right, rgba(0,212,255,0.16), transparent 24%), linear-gradient(135deg, #09090b 0%, #111116 45%, #0d0d0f 100%); }
body::before { content:''; position:fixed; inset:0; pointer-events:none; background-image:radial-gradient(rgba(255,255,255,0.06) 0.8px, transparent 0.8px); background-size:20px 20px; opacity:0.04; }
.page-shell { position:relative; min-height:100vh; width:100%; display:flex; align-items:center; justify-content:center; padding:24px; overflow:hidden; }
.tunnel-layer { position:absolute; inset:0; pointer-events:none; background-size:cover; background-position:center; background-repeat:no-repeat; filter:saturate(0.85) brightness(0.6); }
.tunnel-layer::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg, rgba(34, 8, 12, 0.56), rgba(70, 12, 18, 0.4)); }
.content-card { position:relative; z-index:1; width:min(100%, 900px); padding:32px; }
.brand { margin:0 0 10px; text-align:center; font-size:clamp(3rem, 6vw, 4.4rem); font-weight:800; letter-spacing:-0.03em; }
.brand span { color:transparent; background:linear-gradient(135deg, var(--accent), var(--accent-2)); -webkit-background-clip:text; background-clip:text; }
.tool-brand { font-size:clamp(2rem, 4.5vw, 3rem); }
.section-label { margin:0 0 18px; text-align:center; color:#f4f4f7; font-weight:700; letter-spacing:0.24em; text-transform:uppercase; }
.site-header { display:flex; justify-content:center; align-items:center; width:100%; }
.brand-media { display:block; width:auto; max-width:min(100%, 600px); max-height:200px; object-fit:contain; margin:0 auto; }
.brand-image, .brand-video { height:auto; }

/* directory */
.tools-search { position:relative; margin:0 0 16px; }
.tools-search input { width:100%; padding:13px 20px 13px 46px; border:1px solid rgba(255,255,255,0.14); border-radius:999px; background:rgba(255,255,255,0.08); color:var(--text-main); font-size:1rem; outline:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M23.707 22.293l-5.969-5.969a10.016 10.016 0 1 0-1.414 1.414l5.969 5.969a1 1 0 0 0 1.414-1.414zM10 18a8 8 0 1 1 8-8 8.009 8.009 0 0 1-8 8z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:18px center; background-size:18px; }
.tools-search input:focus { border-color:rgba(255,255,255,0.28); box-shadow:0 0 0 3px rgba(255,255,255,0.08); }
.tools-search input::placeholder { color:var(--text-muted); }
.grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; }
.tile { display:flex; align-items:center; gap:12px; padding:14px; text-decoration:none; color:var(--text-main); background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12); border-radius:16px; transition:transform 180ms ease, background 180ms ease, border-color 180ms ease; }
.tile:hover, .tile:focus-visible { transform:translateY(-2px); background:rgba(255,255,255,0.12); border-color:rgba(255,255,255,0.24); }
.tile.hidden { display:none; }
.tile i { font-size:1.2rem; width:26px; text-align:center; color:#ffb9c4; }
.tile .tile-body { display:flex; flex-direction:column; gap:2px; min-width:0; }
.tile .tile-name { font-weight:800; }
.tile .tile-desc { color:var(--text-muted); font-size:0.85rem; line-height:1.35; }
.tools-empty { text-align:center; color:var(--text-muted); padding:24px 10px; border:1px dashed rgba(255,255,255,0.16); border-radius:16px; }
.tools-empty.hidden { display:none; }

/* tool page */
.tool-panel { background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12); border-radius:16px; padding:18px; }
.tool-label { display:block; font-weight:700; margin:0 0 6px; }
.tool-textarea, .tool-input, .tool-select { width:100%; background:rgba(0,0,0,0.35); border:1px solid rgba(255,255,255,0.14); border-radius:12px; color:var(--text-main); font:inherit; padding:12px 14px; }
.tool-textarea { min-height:170px; resize:vertical; font-family:'Courier New', monospace; font-size:0.95rem; line-height:1.45; }
.tool-input, .tool-select { padding:10px 12px; }
.tool-input:focus, .tool-textarea:focus, .tool-select:focus { outline:none; border-color:rgba(255,255,255,0.32); }
.tool-select option { background:#141418; }
.tool-row { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.tool-grid2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.tool-actions { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 0; }
.tool-btn { padding:10px 16px; border-radius:999px; border:1px solid rgba(255,255,255,0.16); background:rgba(255,255,255,0.08); color:var(--text-main); font-weight:700; font-size:0.9rem; font-family:inherit; cursor:pointer; transition:background 150ms ease, border-color 150ms ease, transform 150ms ease; }
.tool-btn:hover { background:rgba(255,255,255,0.14); border-color:rgba(255,255,255,0.26); }
.tool-btn:active { transform:translateY(1px); }
.tool-btn.primary { background:linear-gradient(135deg, var(--accent), var(--accent-2)); border-color:transparent; }
.tool-btn.primary:hover { transform:translateY(-1px); filter:brightness(1.08); }
.tool-check { display:inline-flex; align-items:center; gap:7px; font-size:0.9rem; color:var(--text-main); cursor:pointer; user-select:none; }
.tool-check input { accent-color:var(--accent-2); }
.tool-out { white-space:pre-wrap; word-break:break-word; background:rgba(0,0,0,0.35); border:1px dashed rgba(255,255,255,0.16); border-radius:12px; padding:12px 14px; font-family:'Courier New', monospace; font-size:0.92rem; line-height:1.5; min-height:56px; max-height:420px; overflow:auto; }
.tool-out.error { border-color:rgba(255,99,99,0.55); color:#ffb4b4; }
.tool-msg { min-height:1.2em; margin-top:8px; font-size:0.87rem; color:var(--text-muted); }
.tool-msg.ok { color:#8fe3a8; }
.tool-msg.err { color:#ff9a9a; }
.tool-note { color:var(--text-muted); font-size:0.85rem; margin-top:10px; }
.tool-back { text-align:center; margin-top:22px; }
.tool-back a { color:#ffb3c0; font-weight:700; text-decoration:none; }
.tool-back a:hover { text-decoration:underline; }
.tool-drop { border:2px dashed rgba(255,255,255,0.22); border-radius:14px; padding:26px 14px; text-align:center; color:var(--text-muted); cursor:pointer; transition:border-color 150ms ease, background 150ms ease; }
.tool-drop:hover, .tool-drop.over { border-color:rgba(255,179,192,0.6); background:rgba(255,255,255,0.05); }
.tool-preview { display:block; max-width:100%; max-height:240px; margin:12px auto 0; border-radius:10px; background:repeating-conic-gradient(rgba(255,255,255,0.10) 0% 25%, transparent 0% 50%) 0 0/18px 18px; }
.diff-line { display:block; padding:1px 6px; border-radius:6px; }
.diff-add { background:rgba(64,196,120,0.18); color:#b8f0cd; }
.diff-del { background:rgba(255,96,96,0.16); color:#ffc9c9; }
.diff-same { color:var(--text-muted); }
.stat-pills { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.stat-pill { background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.14); border-radius:999px; padding:6px 12px; font-size:0.85rem; font-weight:700; }
.meter { height:8px; border-radius:999px; background:rgba(255,255,255,0.10); overflow:hidden; margin-top:10px; }
.meter span { display:block; height:100%; width:0; background:linear-gradient(90deg, var(--accent), var(--accent-2)); transition:width 200ms ease; }

@media (max-width:640px) {
  .content-card { padding:24px; }
  .grid { grid-template-columns:1fr; }
  .tool-grid2 { grid-template-columns:1fr; }
}