:root{ --bg:#f7f8fb; --panel:#ffffff; --text:#1a1d29; --muted:#5d6378; --accent:#5b7cfa; --accent-2:#7c5bfa; --border:#e6e8ef; --border-strong:rgba(0,0,0,.22); --border-stronger:rgba(0,0,0,.35); --shadow:0 10px 30px rgba(26,29,41,.07); --bg-dark:#0b0c10; --panel-dark:#12141b; --text-dark:#eceff4; --muted-dark:#aeb3c2; --border-dark:rgba(255,255,255,.12); --dur-fast:.18s; --dur-med:.35s; --dur-slow:.6s; --e1:cubic-bezier(.22,.61,.36,1); --e2:cubic-bezier(.16,.84,.44,1); }
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--text-dark);background:var(--bg-dark)}
.theme-light{ color:var(--text); background: radial-gradient(900px 360px at 15% -10%, rgba(91,124,250,.12), transparent 60%), radial-gradient(700px 260px at 85% -10%, rgba(124,91,250,.10), transparent 60%), linear-gradient(#f9faff,#f6f7fc); }
*,*::before,*::after{box-sizing:border-box}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
.site-header{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;padding:14px 22px;background:rgba(255,255,255,.7);backdrop-filter:saturate(1.2) blur(8px);border-bottom:1.5px solid var(--border-strong)}
.brand{display:flex;align-items:center;gap:10px;font-weight:800}
.brand-logo{width:30px;height:30px;border-radius:8px;object-fit:cover;box-shadow:var(--shadow)}
.brand-text{font-weight:900;letter-spacing:.6px}
.nav{display:flex;gap:18px;align-items:center}
.nav a{opacity:.85;padding:6px 4px;border-radius:8px;transition:color var(--dur-fast) var(--e1),opacity var(--dur-fast) var(--e1)}
.nav a:hover,.nav a.active{opacity:1;color:var(--accent)}
.nav-toggle{display:none;background:transparent;border:0;font-size:24px}
.hero{position:relative;padding:90px 22px 24px;border-bottom:1.5px solid var(--border-strong);overflow:hidden}
.hero-inner{max-width:1100px;margin:0 auto;text-align:center;position:relative;z-index:2}
.hero-title{font-weight:900;font-size:clamp(34px,6vw,60px);line-height:1.06}
.hero-title .accent{ background:linear-gradient(90deg,var(--accent),var(--accent-2),var(--accent)); -webkit-background-clip:text;background-clip:text;color:transparent; background-size:200% 100%; animation:accent-pan 6s linear infinite; }
@keyframes accent-pan{0%{background-position:0 0}100%{background-position:200% 0}}
.hero::before,.hero::after{ content:""; position:absolute; filter:blur(26px); z-index:1; pointer-events:none; opacity:.55; background:radial-gradient(closest-side, rgba(99,102,241,.22), transparent 60%); border-radius:50%; transform:translate3d(0,0,0); }
.hero::before{width:540px;height:540px;top:-220px;left:-120px;animation:blobA 18s var(--e2) infinite alternate}
.hero::after {width:420px;height:420px;right:-120px;top:-160px;animation:blobB 22s var(--e2) infinite alternate}
@keyframes blobA{from{transform:translate(0,0)}to{transform:translate(30px,16px)}}
@keyframes blobB{from{transform:translate(0,0)}to{transform:translate(-24px,24px)}}
.search-wrap{display:flex;justify-content:center;padding:22px}
.search{width:min(820px,92%);padding:14px 16px;border-radius:12px;border:1.5px solid var(--border-strong);background:var(--panel);color:var(--text);outline:0;transition:border-color var(--dur-fast) var(--e1), box-shadow var(--dur-fast) var(--e1)}
.search::placeholder{color:#9aa1b2}
.search:focus-visible{border-color:var(--accent);box-shadow:0 0 0 4px rgba(91,124,250,.18)}
.section-title{max-width:1100px;margin:34px auto 16px;padding:0 22px;font-size:22px}
.grid{max-width:1100px;margin:0 auto 30px;display:grid;gap:40px;padding:0 22px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.vlist{display:flex;flex-direction:column;gap:20px}
.card{ position:relative;padding:18px;border-radius:16px;background:var(--panel); border:1.5px solid var(--border-strong);box-shadow:var(--shadow); transition:transform var(--dur-fast) var(--e1),border var(--dur-fast) var(--e1),box-shadow var(--dur-med) var(--e2),background var(--dur-med) var(--e2); will-change:transform, box-shadow; overflow:hidden; }
.card::before{ content:""; position:absolute; inset:-1px; border-radius:16px; pointer-events:none; background:linear-gradient(120deg, transparent 40%, rgba(255,255,255,.65) 50%, transparent 60%); transform:translateX(-140%); transition:transform .6s var(--e2); }
.card:hover{transform:translateY(-2px);border-color:var(--border-stronger)}
.card:hover::before{transform:translateX(140%)}
.card h3{font-size:18px;margin:0;font-weight:800}
.card.disabled{opacity:.75;cursor:not-allowed}
.badge{position:absolute;top:12px;right:12px;font-size:11px;font-weight:800;text-transform:uppercase;padding:6px 8px;border-radius:999px;border:1.5px dashed var(--border-stronger);color:#3e49c9;background:rgba(123,145,255,.12)}
.icon{width:38px;height:38px;border-radius:10px;border:1.5px solid var(--border-strong);background:#f2f4fb;display:grid;place-items:center;overflow:hidden}
.icon.calc{background:linear-gradient(135deg,rgba(123,145,255,.22),transparent),#f2f4fb}
.icon.convert{background:linear-gradient(135deg,rgba(91,124,250,.22),transparent),#f2f4fb}
.icon.game{background:linear-gradient(135deg,rgba(124,91,250,.22),transparent),#f2f4fb}
.icon-img{ width:70%; height:70%; object-fit:contain; filter:none; transition:transform .2s ease; }
.card:hover .icon-img{ transform:scale(1.04) }
.site-footer{border-top:1.5px solid var(--border-strong);padding:30px 22px;background:#fff;margin-top:26px;color:var(--muted)}
.footer-grid{max-width:1100px;margin:0 auto;display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.footer-grid h4{margin:0 0 8px 0}
.footer-grid a{display:block;margin:4px 0;color:inherit}
.legal{text-align:center;margin-top:14px;font-size:13px}
@media (max-width:900px){ .nav{display:none;position:absolute;top:60px;right:12px;background:var(--panel);border:1.5px solid var(--border-strong);padding:12px;border-radius:12px;flex-direction:column;box-shadow:var(--shadow)}
.nav a{padding:8px 6px}
.nav-toggle{display:block}
}
body.home #tools .grid, body.home .vlist{ perspective:1200px; perspective-origin:50% 40%; }
body.home .card{ border:1px solid rgba(16,24,40,.08); background:var(--panel); --rx:0deg; --ry:0deg; --ty:0px; --scale:1; transform:translateY(var(--ty)) rotateX(var(--rx)) rotateY(var(--ry)) scale(var(--scale)); transform-style:preserve-3d; box-shadow:0 1px 0 rgba(16,24,40,.04), 0 8px 20px rgba(16,24,40,.06), 0 20px 40px rgba(16,24,40,.04); }
body.home .card::after{content:"";position:absolute;inset:0;border-radius:16px;pointer-events:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.65)}
@media (hover:hover) and (pointer:fine){ body.home .card:hover{ --ty:-6px;border-color:rgba(16,24,40,.12); box-shadow:0 6px 14px rgba(16,24,40,.10), 22px 46px rgba(16,24,40,.12), 0 0 0 8px var(--glow,transparent); }
}
body.home .card.is-press{ --scale:.985; --ty:0px; box-shadow:0 4px 10px rgba(16,24,40,.12), 0 10px 24px rgba(16,24,40,.10), 0 0 0 4px var(--glow,transparent); }
body.home .icon{ background:linear-gradient(180deg,rgba(255,255,255,.8),rgba(255,255,255,.35)), var(--icon-bg,#eef2ff); border:1px solid rgba(0,0,0,.08); box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 6px 16px var(--icon-shadow, rgba(91,124,250,.18)); }
body.home .badge{font-weight:800;letter-spacing:.3px;border:1.5px dashed rgba(99,102,241,.55);background:rgba(99,102,241,.10);color:#6366f1}
body.home .card[data-hue="blue"] { --glow:rgba(59,130,246,.11); --icon-bg:linear-gradient(135deg,#dbeafe,#eef2ff); --icon-shadow:rgba(59,130,246,.22) }
body.home .card[data-hue="indigo"] { --glow:rgba(99,102,241,.12); --icon-bg:linear-gradient(135deg,#e0e7ff,#f5f3ff); --icon-shadow:rgba(99,102,241,.24) }
body.home .card[data-hue="teal"] { --glow:rgba(45,212,191,.12); --icon-bg:linear-gradient(135deg,#d1fae5,#ecfeff); --icon-shadow:rgba(13,148,136,.22) }
body.home .card[data-hue="pink"] { --glow:rgba(236,72,153,.12); --icon-bg:linear-gradient(135deg,#fde2f3,#fff1f6); --icon-shadow:rgba(236,72,153,.24) }
.tools{ padding:20px 22px 10px; }
.tools .grid{gap:26px}
.tools .grid .card{padding:20px}
.tools .card label{display:block;font-weight:600;margin:0 0 6px;color:#3b4256}
.tools .card .field,.tools .card .row{display:grid;gap:12px}
.tools .card .row{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.tools .card input[type="text"], .tools .card input[type="number"], .tools .card input[type="email"], .tools .card input[type="date"], .tools .card input[type="time"], .tools .card input[type="file"], .tools .card textarea, .tools .card select, .tools .search{ appearance:none;height:44px;width:100%;padding:10px 12px;border-radius:12px; border:1.5px solid var(--border-strong);background:linear-gradient(#ffffff,#fafcff); color:var(--text);outline:0;transition:border-color var(--dur-fast) var(--e1), box-shadow var(--dur-fast) var(--e1), transform .02s; box-shadow:inset 0 1px 0 rgba(255,255,255,.9); }
.tools .card textarea{height:auto;min-height:90px;resize:vertical}
.tools .card input:focus-visible, .tools .card select:focus-visible, .tools .card textarea:focus-visible{ border-color:var(--accent);box-shadow:0 0 0 4px rgba(91,124,250,.18), inset 0 1px 0 rgba(255,255,255,.9) }
.tools .card select{ background-image: linear-gradient(#ffffff,#fafcff), url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="%2366708b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>'); background-repeat:no-repeat,no-repeat; background-position:0 0,right 12px center; background-size:auto,18px 18px; padding-right:40px; }
.tools .card .btn,.tools .btn{ position:relative;overflow:hidden; display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 16px; font-weight:800;border-radius:12px;border:1.5px solid var(--border-strong); background:#ffffff;color:#141824;cursor:pointer; transition:transform .06s, box-shadow var(--dur-med) var(--e2), background var(--dur-med) var(--e2), border-color var(--dur-med) var(--e2); box-shadow:0 2px 4px rgba(16,24,40,.05); }
.tools .card .btn:hover{transform:translateY(-1px);border-color:var(--border-stronger)}
.tools .card .btn:active{transform:translateY(0)}
.tools .card .btn.primary{ border-color:transparent;background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#fff; box-shadow:0 10px 22px rgba(91,124,250,.25); }
.btn .ripple{ position:absolute; inset:auto; pointer-events:none; width:12px; height:12px; border-radius:50%; transform:translate(-50%, -50%) scale(0); background:rgba(255,255,255,.45); animation:ripple .6s ease-out forwards; }
@keyframes ripple{to{opacity:0; transform:translate(-50%, -50%) scale(18)}}
.tools .card .dropzone{ border-radius:14px;padding:18px;text-align:center;border:1.5px dashed var(--border-strong); background:linear-gradient(180deg, rgba(91,124,250,.06), rgba(91,124,250,.03)), var(--panel); transition:border-color var(--dur-med) var(--e2), background var(--dur-med) var(--e2), box-shadow var(--dur-med) var(--e2); }
.tools .card .dropzone:hover{ border-color:var(--accent); background:linear-gradient(180deg, rgba(91,124,250,.09), rgba(91,124,250,.05)), var(--panel); box-shadow:0 8px 24px rgba(91,124,250,.12); }
.tools .card .muted,.tools .card #status{color:var(--muted);font-size:13px}
.tools .card table{ width:100%;border-collapse:separate;border-spacing:0;margin-top:10px;background:#fff; border:1px solid var(--border-strong);border-radius:12px;overflow:hidden;box-shadow:0 8px 20px rgba(16,24,40,.05) }
.tools .card table thead th{ text-align:left;padding:12px 14px;background:linear-gradient(180deg,#f7f9ff,#eef2ff); color:#1a1d29;font-weight:800;border-bottom:1px solid var(--border) }
.tools .card table tbody td{padding:12px 14px;border-bottom:1px solid var(--border)}
.tools .card table tbody tr:nth-child(odd){background:#fbfcff}
.tools .card table tbody tr:hover{background:#f6f8ff}
.tools .card input[type="radio"],.tools .card input[type="checkbox"]{ appearance:none;width:18px;height:18px;margin:0 6px 0 0;border:1.5px solid var(--border-strong);border-radius:6px; background:#fff;vertical-align:middle;display:inline-grid;place-items:center;transition:border-color var(--dur-fast) var(--e1), box-shadow var(--dur-fast) var(--e1), background var(--dur-fast) var(--e1); }
.tools .card input[type="radio"]{border-radius:999px}
.tools .card input[type="radio"]:checked,.tools .card input[type="checkbox"]:checked{ background:linear-gradient(90deg,var(--accent),var(--accent-2));border-color:transparent;box-shadow:0 0 0 3px rgba(91,124,250,.18) }
.tools .card input[type="checkbox"]:checked::after{content:"";width:8px;height:8px;transform:rotate(45deg);border-right:2px solid #fff;border-bottom:2px solid #fff;margin-top:-1px}
.tools .card input[type="radio"]:checked::after{content:"";width:8px;height:8px;border-radius:50%;background:#fff}
.tool-title{display:flex;align-items:center;gap:10px;font-weight:900;font-size:24px;line-height:1.2;margin:0 0 8px}
.tool-title .tool-icon{width:28px;height:28px;object-fit:contain;filter:drop-shadow(0 1px 0 rgba(255,255,255,.8))}
.reveal{opacity:0; transform:translateY(12px); transition:opacity var(--dur-slow) var(--e2), transform var(--dur-slow) var(--e2)}
.reveal.is-in{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){ .hero::before,.hero::after,.hero-title .accent{animation:none}
.card::before{display:none}
.reveal{transition:none}
}
.tool-hero{ position:relative; padding:64px 22px; border-bottom:1.5px solid var(--border-strong); overflow:hidden }
.tool-hero .hero-inner{max-width:1100px;margin:0 auto;text-align:center;position:relative;z-index:2}
.tool-hero .hero-title{ margin:0; font-weight:900; font-size:clamp(34px,6vw,58px) }
.tool-hero .hero-sub{ color:var(--muted); max-width:860px; margin:10px auto 0 }
.tool-hero[data-theme="indigo"] { --t1:#6366f1; --t2:#a78bfa }
.tool-hero[data-theme="fuchsia"] { --t1:#d946ef; --t2:#8b5cf6 }
.tool-hero[data-theme="orange"] { --t1:#f59e0b; --t2:#fb923c }
.tool-hero[data-theme="cyan"] { --t1:#06b6d4; --t2:#60a5fa }
.tool-hero[data-theme="emerald"] { --t1:#10b981; --t2:#22c55e }
.tool-hero[data-theme="purple"] { --t1:#8b5cf6; --t2:#6366f1 }
.tool-hero[data-theme="blue"] { --t1:#3b82f6; --t2:#60a5fa }
.tool-hero::after{ content:""; position:absolute; inset:-20% -10% auto -10%; height:240px; background:radial-gradient(600px 220px at 20% 10%, color-mix(in oklab, var(--t1) 22%, transparent), transparent 60%), radial-gradient(460px 180px at 80% 0%, color-mix(in oklab, var(--t2) 18%, transparent), transparent 60%); pointer-events:none; filter:blur(6px); }
.info-card{ padding:14px; border:1px solid var(--border-strong); border-radius:12px; background:#fff; box-shadow:0 6px 18px rgba(16,24,40,.06) }
.info-card h3{ margin:0 0 8px; font-size:18px; font-weight:900 }
.tip-list{ margin:8px 0 0 18px }
.tip-list li{ margin:6px 0 }
.related-grid{ display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)) }
.link-card{ display:grid; gap:6px; padding:12px; border-radius:12px; border:1.5px solid var(--border-strong); background:linear-gradient(180deg,#ffffff,#fafcff); }
.link-card small{ color:var(--muted); font-size:12px }
.link-card .go{ justify-self:start }
/* New styles for upload/download bar */
.status-bar-container { position: fixed; bottom: 0; left: 0; width: 100%; z-index: 1000; padding: 10px; background-color: transparent; }
.status-bar { height: 6px; width: 0; background-color: var(--accent); transition: width 0.3s ease-out; }
.status-message {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.75);
  color: #fff;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 14px;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  white-space: nowrap;
}
.status-message.show { opacity: 1; }

/* Existing media query adjustments for mobile */
@media (max-width:900px){
  .nav{display:none;position:absolute;top:60px;right:12px;background:var(--panel);border:1.5px solid var(--border-strong);padding:12px;border-radius:12px;flex-direction:column;box-shadow:var(--shadow)}
  .nav a{padding:8px 6px}
  .nav-toggle{display:block}
}
@media (max-width: 600px) {
  .site-header{flex-direction: column; align-items: stretch; gap: 10px;}
  .brand{align-self: flex-start;}
  .nav-right{margin-top: 10px; gap: 10px;}
  .hero-title{font-size: clamp(28px, 8vw, 40px);}
  .grid{padding: 0 10px;}
}
@media (max-width: 480px) {
  .tools .card .row{grid-template-columns: 1fr;}
}