:root{--color-bg: #f1f4ff;--color-layer: #ffffff;--color-layer-soft: #eef2ff;--color-text: #0f172a;--color-muted: #5b678a;--color-accent: #4f46e5;--color-accent-strong: #4338ca;--color-accent-soft: rgba(79, 70, 229, .08);--color-success: #10b981;--color-error: #ef4444;--color-border: rgba(79, 70, 229, .14);--shadow-md: 0 18px 40px rgba(15, 23, 42, .12);--shadow-sm: 0 10px 24px rgba(15, 23, 42, .08);--radius-xl: 28px;--radius-lg: 20px;--radius-md: 14px;--transition: .2s ease;--font-sans: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif}[data-theme=dark]{--color-bg: #040711;--color-layer: rgba(15, 23, 42, .75);--color-layer-soft: rgba(79, 70, 229, .12);--color-text: #e2e8f0;--color-muted: #94a3b8;--color-border: rgba(148, 163, 184, .2);--shadow-md: 0 24px 60px rgba(8, 11, 24, .45);--shadow-sm: 0 16px 32px rgba(8, 11, 24, .35)}*{box-sizing:border-box}body{margin:0;min-height:100vh;font-family:var(--font-sans);background:radial-gradient(120% 120% at 100% 0%,rgba(79,70,229,.15) 0%,transparent 55%),var(--color-bg);color:var(--color-text);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.container{width:min(100% - 40px,1160px);margin:0 auto}.card{background:var(--color-layer);border-radius:var(--radius-xl);border:1px solid var(--color-border);box-shadow:var(--shadow-md);backdrop-filter:blur(18px)}button{border:none;border-radius:999px;padding:.75rem 1.5rem;cursor:pointer;transition:transform var(--transition),box-shadow var(--transition),background var(--transition);font-weight:600}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--color-accent);outline-offset:3px}button.primary{background:linear-gradient(135deg,var(--color-accent),var(--color-accent-strong));color:#f8fafc;box-shadow:var(--shadow-sm)}button.primary:hover{transform:translateY(-2px);box-shadow:0 22px 42px #4f46e540}button.primary:active{transform:translateY(0);box-shadow:var(--shadow-sm)}button.secondary,.secondary{background:var(--color-layer-soft);border:1px solid var(--color-border);color:var(--color-text);padding:.6rem 1.25rem}.chip{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;border-radius:999px;border:1px solid rgba(79,70,229,.18);background:#4f46e514;color:var(--color-text);padding:.55rem 1.15rem;font-weight:600;font-size:.95rem;line-height:1;min-height:42px;cursor:pointer;white-space:nowrap;transition:background var(--transition),border-color var(--transition),transform var(--transition)}.chip:hover{background:#4f46e524;border-color:#4f46e54d;transform:translateY(-1px)}.chip .chip-icon{font-size:1rem;line-height:1}.chip .chip-text{white-space:nowrap}.chip .chip-text{display:inline-flex;align-items:center}.chip-soft{cursor:default;background:#4f46e51f;border-color:#4f46e51f;pointer-events:none}.chip-soft .chip-text{font-weight:600}.chip-soft:hover{background:#4f46e51f;border-color:#4f46e51f;transform:none}.site-header{position:sticky;top:0;z-index:40;backdrop-filter:blur(20px);background:#f1f4ffd9;border-bottom:1px solid var(--color-border)}[data-theme=dark] .site-header{background:#080d1acc}.site-header .top-row{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:1.1rem 0}.brand{display:grid;gap:.35rem}.brand h1{margin:0;font-size:clamp(1.35rem,2.6vw,1.8rem);font-weight:700}.brand span{font-size:.95rem;color:var(--color-muted)}.header-actions{display:flex;align-items:center;gap:.65rem}nav.tool-nav{display:flex;overflow-x:auto;gap:.65rem;padding:0 0 1.25rem;scrollbar-width:none}nav.tool-nav::-webkit-scrollbar{display:none}.tool-link{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;gap:.35rem;padding:.45rem .95rem;min-height:40px;border-radius:12px;border:1px solid rgba(79,70,229,.16);background:#4f46e50f;color:var(--color-text);font-weight:600;font-size:.95rem;transition:background var(--transition),transform var(--transition),border-color var(--transition)}.tool-link:hover{transform:translateY(-1px);background:#4f46e51f;border-color:#4f46e54d}.tool-link.active{background:linear-gradient(135deg,var(--color-accent),var(--color-accent-strong));color:#f8fafc;box-shadow:var(--shadow-sm)}main#page{padding:2.5rem 0 5rem}.home-hero{margin:2rem auto 3rem;padding:clamp(2rem,4vw,3.4rem);position:relative;overflow:hidden}.home-hero:after{content:"";position:absolute;inset:0;background:radial-gradient(120% 120% at 100% 0%,rgba(79,70,229,.16) 0%,transparent 60%);pointer-events:none}.home-hero h1{margin:0 0 1rem;font-size:clamp(2rem,5vw,2.8rem);font-weight:700}.home-hero p{margin:0;color:var(--color-muted);max-width:620px;line-height:1.65}.hero-description{font-size:1.05rem;margin-top:.75rem}.hero-actions{display:flex;flex-wrap:wrap;gap:.9rem;align-items:center;margin:2rem 0 1.5rem}.hero-bullets{list-style:none;padding:0;margin:0;display:grid;gap:.6rem;font-size:1rem;color:var(--color-muted)}.home-tools .tools-grid{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}.tool-card{padding:1.75rem;border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);transition:transform var(--transition),box-shadow var(--transition)}.tool-card:hover,.tool-card:focus-within{transform:translateY(-4px);box-shadow:0 26px 60px #0f172a2e}.tool-card h3{margin:1rem 0 .35rem;font-size:1.2rem}.tool-card p{margin:0;color:var(--color-muted);line-height:1.5}.tool-icon{width:3rem;height:3rem;border-radius:18px;display:grid;place-items:center;background:#4f46e524;font-size:1.35rem}.home-how,.home-faq,.home-privacy,.home-recent{margin:3.5rem auto}.home-how .card,.home-faq .card,.home-privacy.card,.home-recent.card{padding:clamp(1.8rem,4vw,2.6rem)}.home-how h2,.home-faq h2,.home-privacy h2,.home-recent h2{margin-top:0;font-size:clamp(1.55rem,3vw,1.9rem)}.home-how ol{margin:1.1rem 0 0;padding-left:1.4rem;color:var(--color-muted);line-height:1.65}.faq-list{margin:0;display:grid;gap:1rem}.faq-list dt{font-weight:600;font-size:1.05rem}.faq-list dd{margin:.35rem 0 0;color:var(--color-muted);line-height:1.6}.recent-list{display:grid;gap:.75rem}.file-list-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.2rem;border-radius:var(--radius-md);background:var(--color-layer-soft);border:1px solid var(--color-border)}.file-list-row strong{display:block;font-weight:600}.file-list-row span{font-size:.9rem;color:var(--color-muted)}.tool-panel{width:min(100% - 40px,1100px);margin:2rem auto 4rem;padding:clamp(2.2rem,4vw,3rem);background:var(--color-layer);border-radius:var(--radius-xl);border:1px solid var(--color-border);box-shadow:var(--shadow-md)}.tool-header{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:1.5rem;margin-bottom:2rem}.tool-header h1{margin:0 0 .6rem;font-size:clamp(1.8rem,4vw,2.4rem)}.tool-header p{margin:0;color:var(--color-muted);max-width:560px;line-height:1.6}.tool-meta{display:inline-flex;align-items:center;gap:.35rem;padding:.45rem 1rem;border-radius:999px;background:var(--color-accent-soft);color:var(--color-accent-strong);font-weight:600;font-size:.95rem}.tool-layout{display:grid;gap:2.2rem}.tool-output{display:grid;gap:1.5rem;align-content:start}.tool-inputs{display:grid;gap:1.2rem}.field,.range,.dropzone{display:grid;gap:.55rem}.field span,.range-label{font-weight:600}.field select,.field input,.range input,input[type=text],input[type=number]{width:100%;padding:.75rem 1rem;border-radius:var(--radius-md);border:1px solid var(--color-border);background:var(--color-layer-soft);color:var(--color-text);transition:border var(--transition),box-shadow var(--transition)}.range-output{font-size:.9rem;color:var(--color-muted)}.dropzone{padding:clamp(1.6rem,3vw,2.2rem);border:2px dashed rgba(79,70,229,.2);border-radius:var(--radius-lg);background:#4f46e50f;text-align:center;color:var(--color-muted);transition:border-color var(--transition),background var(--transition),transform var(--transition)}.dropzone-inner{display:grid;gap:.75rem;place-items:center;cursor:pointer}.dropzone-icon{width:64px;height:64px;border-radius:20px;display:grid;place-items:center;background:#4f46e51f;font-size:1.8rem}.dropzone p{margin:0;font-weight:600;color:var(--color-text)}.dropzone-description{font-size:.95rem;color:var(--color-muted)}.dropzone.dropzone-active{border-color:var(--color-accent);background:#4f46e51f;transform:translateY(-2px)}.upload-list{display:grid;gap:.75rem;margin-top:.75rem}.upload-empty{margin:0;color:var(--color-muted);font-size:.95rem}.upload-item{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.8rem 1rem;border-radius:var(--radius-md);background:var(--color-layer-soft);border:1px solid var(--color-border)}.upload-item strong{display:block;font-weight:600}.upload-item span{font-size:.85rem;color:var(--color-muted)}.upload-item.active{border-color:var(--color-accent);background:#4f46e51f}.action-row{display:flex;gap:.75rem;align-items:center}.action-row button{min-width:160px}.progress{display:grid;gap:.5rem}.progress label{font-weight:600}progress{width:100%;height:.9rem;border-radius:999px;overflow:hidden;border:none;background:#4f46e51f}progress::-webkit-progress-bar{background:#4f46e51f}progress::-webkit-progress-value{background:linear-gradient(135deg,var(--color-accent),var(--color-accent-strong))}progress::-moz-progress-bar{background:linear-gradient(135deg,var(--color-accent),var(--color-accent-strong))}.result{display:grid;gap:.6rem;padding:1.2rem;border-radius:var(--radius-md);background:var(--color-layer-soft);border:1px solid var(--color-border)}.result p{margin:0;color:var(--color-muted)}.file-actions{display:inline-flex;gap:.5rem}.thumb-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1.2rem;margin-top:1.5rem}.thumb-card{border-radius:var(--radius-md);border:1px solid var(--color-border);background:var(--color-layer-soft);padding:.9rem;display:grid;gap:.6rem;box-shadow:var(--shadow-sm)}.thumb{aspect-ratio:3 / 4;border-radius:var(--radius-md);overflow:hidden;background:#4f46e514;display:grid;place-items:center}.thumb img{width:100%;height:auto;display:block}.thumb-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.35rem}.thumb-actions button{padding:.45rem 0;background:#4f46e517;border-radius:12px;border:1px solid rgba(79,70,229,.18)}.toast-container{position:fixed;inset:auto 0 2rem;display:grid;justify-content:center;gap:.85rem;pointer-events:none;z-index:60}.toast{pointer-events:auto;padding:.9rem 1.4rem;border-radius:var(--radius-lg);background:var(--color-layer);border:1px solid var(--color-border);box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:.75rem}.toast-info{border-left:4px solid var(--color-accent)}.toast-success{border-left:4px solid var(--color-success)}.toast-error{border-left:4px solid var(--color-error)}.site-footer{border-top:1px solid var(--color-border);padding:2.5rem 0 3.5rem;background:#ffffffd9}[data-theme=dark] .site-footer{background:#0a0e1ccc}.site-footer p{margin:0;color:var(--color-muted)}.footer-links{margin-top:1rem;display:flex;flex-wrap:wrap;gap:.85rem}.footer-links a{color:var(--color-accent-strong);text-decoration:underline}.legal h1,.legal h2{color:inherit}.legal{margin:3rem auto 5rem;padding:clamp(2rem,4vw,3rem);background:var(--color-layer);border-radius:var(--radius-xl);border:1px solid var(--color-border);box-shadow:var(--shadow-md);line-height:1.75}.legal h1{margin-top:0;font-size:clamp(1.9rem,4vw,2.4rem)}.legal h2{margin-top:2.5rem;font-size:clamp(1.3rem,3vw,1.6rem)}.hint{font-size:.9rem;color:var(--color-muted)}@media (min-width: 960px){.tool-layout{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}}@media (max-width: 768px){.container{width:min(100% - 28px,100%)}nav.tool-nav{padding-bottom:1.1rem}.tool-panel{padding:1.8rem 1.4rem 2.4rem}.tool-header{flex-direction:column}.dropzone{padding:1.6rem}}[data-theme=light] body,[data-theme=dark] body{background-color:var(--color-bg)}.theme-toggle{display:inline-flex;align-items:center;gap:.5rem;padding:.35rem .75rem;border-radius:999px;border:1px solid var(--color-border);background:var(--color-surface);cursor:pointer}.theme-toggle span{font-size:.85rem;font-weight:600}