/* ===== MultiTools — shared styles (Enhanced UI v2) ===== */
:root{
  --bg:#f4f5f8; --surface:#ffffff; --surface2:#eef0f5; --line:#d8dce6;
  --fg:#0f0f12; --fg2:#555a66; --acc:#e50914; --acc-fg:#ffffff; --acc-weak:#fde8e9;
  --green:#12a150; --red:#e50914;
  --shadow:0 2px 8px rgba(15,15,18,.06),0 8px 24px rgba(15,15,18,.05);
  --shadow-lg:0 4px 16px rgba(15,15,18,.08),0 20px 48px rgba(15,15,18,.08);
  --shadow-glow:0 0 20px rgba(229,9,20,.15),0 8px 24px rgba(229,9,20,.1);
  --radius:16px; --maxw:1080px;
}
:root[data-theme="dark"]{
  --bg:#09090b; --surface:#121216; --surface2:#1a1a20; --line:#262630;
  --fg:#f2f3f7; --fg2:#9699a6; --acc:#e50914; --acc-fg:#ffffff; --acc-weak:#2e0b0e;
  --green:#3ecf8e; --red:#ff3842;
  --shadow:0 2px 8px rgba(0,0,0,.35),0 8px 24px rgba(0,0,0,.4);
  --shadow-lg:0 4px 16px rgba(0,0,0,.5),0 20px 48px rgba(0,0,0,.5);
  --shadow-glow:0 0 24px rgba(229,9,20,.2),0 8px 24px rgba(229,9,20,.15);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#09090b; --surface:#121216; --surface2:#1a1a20; --line:#262630;
    --fg:#f2f3f7; --fg2:#9699a6; --acc:#e50914; --acc-fg:#ffffff; --acc-weak:#2e0b0e;
    --green:#3ecf8e; --red:#ff3842;
    --shadow:0 2px 8px rgba(0,0,0,.35),0 8px 24px rgba(0,0,0,.4);
    --shadow-lg:0 4px 16px rgba(0,0,0,.5),0 20px 48px rgba(0,0,0,.5);
    --shadow-glow:0 0 24px rgba(229,9,20,.2),0 8px 24px rgba(229,9,20,.15);
  }
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{overflow-x:hidden;max-width:100vw}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--fg);font-family:-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased}
a{color:var(--acc);text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
.icon{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}

/* Header / nav */
header.site{position:sticky;top:0;z-index:100;background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);border-bottom:1px solid color-mix(in srgb,var(--line) 60%,transparent)}
header.site .wrap{position:relative}
.nav{display:flex;align-items:center;justify-content:space-between;gap:14px;height:64px}

/* Marvel-Style Refined Brand Badge Logo (Pure CSS) */
.brand{display:inline-flex;align-items:center;text-decoration:none;transition:transform .2s ease}
.brand:hover{transform:scale(1.04)}
.brand-badge{display:inline-flex;align-items:center;font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;font-weight:900;text-transform:uppercase;font-size:16px;letter-spacing:1px;line-height:1;border-radius:6px;overflow:hidden;box-shadow:0 3px 14px rgba(229,9,20,.4);border:1px solid rgba(255,255,255,.15)}
.badge-multi{background:#E50914;color:#ffffff;padding:7px 11px;font-weight:900;letter-spacing:1.5px;text-shadow:0 1px 2px rgba(0,0,0,.3)}
.badge-tools{background:#09090B;color:#ffffff;padding:6px 11px;border-left:1px solid rgba(255,255,255,.2);font-weight:900;letter-spacing:1.5px}

.nav .links{display:none;gap:6px;margin-left:auto}
.nav .links a{color:var(--fg2);font-size:14px;font-weight:600;padding:8px 14px;border-radius:10px;transition:all .2s ease}
.nav .links a:hover,.nav .links a.active{color:var(--fg);background:var(--surface2);transform:translateY(-1px)}
.nav .right{margin-left:auto;display:flex;align-items:center;gap:10px}
.iconbtn{width:42px;height:42px;border:1px solid var(--line);background:var(--surface);color:var(--fg);border-radius:12px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease}
.iconbtn:hover{background:var(--surface2);border-color:var(--acc);transform:scale(1.05)}
.menu-toggle{display:flex}

/* Mobile Overlay */
.mobile-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(0,0,0,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:998;opacity:0;visibility:hidden;transition:opacity .3s cubic-bezier(0.16,1,0.3,1),visibility .3s}
.mobile-overlay.open{opacity:1;visibility:visible}

/* Mobile Side Drawer — modern glassmorphic panel */
.mobile-menu{position:fixed;top:-9999px;right:-9999px;left:-9999px;width:310px;max-width:88vw;height:100vh;background:color-mix(in srgb,var(--surface) 96%,transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-left:1px solid var(--line);z-index:9999;display:none;flex-direction:column;gap:4px;padding:20px 16px;box-shadow:-12px 0 40px rgba(0,0,0,.6);opacity:0;transition:transform .3s cubic-bezier(0.16,1,0.3,1),opacity .3s ease;overflow-y:auto}
.mobile-menu:not(.open){display:none!important;visibility:hidden!important;opacity:0!important;pointer-events:none!important;left:-9999px!important;top:-9999px!important;right:-9999px!important}
.mobile-menu.open{display:flex!important;visibility:visible!important;opacity:1!important;pointer-events:auto!important;right:0!important;top:0!important;left:auto!important;transform:translateX(0)!important}
.mobile-menu-header{display:flex;align-items:center;justify-content:space-between;padding-bottom:14px;margin-bottom:12px;border-bottom:1px solid var(--line)}
.mobile-menu-header .right-controls{display:flex;align-items:center;gap:8px}
.close-btn{width:36px;height:36px;border-radius:10px;border:1px solid var(--line);background:var(--surface2);color:var(--fg);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease}
.close-btn:hover{background:var(--line);transform:scale(1.05)}

.menu-cat{font-size:11px;font-weight:800;color:var(--fg2);text-transform:uppercase;letter-spacing:1px;padding:12px 12px 4px;margin-top:4px}
.mobile-menu a{color:var(--fg);font-weight:600;padding:10px 12px;border-radius:12px;font-size:14.5px;min-height:44px;display:flex;align-items:center;gap:12px;transition:all .2s ease;border:1px solid transparent}
.mobile-menu a svg{width:20px;height:20px;stroke:var(--fg2);flex-shrink:0;transition:stroke .2s ease}
.mobile-menu a:hover,.mobile-menu a.active{background:var(--surface2);color:var(--acc);border-color:color-mix(in srgb,var(--acc) 20%,transparent);transform:translateX(4px)}
.mobile-menu a:hover svg,.mobile-menu a.active svg{stroke:var(--acc)}

.pill-badge{font-size:10px;font-weight:900;text-transform:uppercase;padding:2px 7px;border-radius:12px;margin-left:auto;letter-spacing:.5px}
.pill-hot{background:var(--acc);color:#fff;box-shadow:0 2px 8px rgba(229,9,20,.4)}
.pill-new{background:var(--green);color:#fff;box-shadow:0 2px 8px rgba(18,161,80,.4)}

/* Motion & Animations — clean modern micro-interactions */
@keyframes pulseDrop{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@keyframes iconRotate{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes fadeSlideUp{0%{opacity:0;transform:translateY(20px)}100%{opacity:1;transform:translateY(0)}}
@keyframes activeGlow{0%,100%{box-shadow:0 0 10px rgba(229,9,20,0.5),0 3px 10px rgba(229,9,20,0.3)}50%{box-shadow:0 0 20px rgba(229,9,20,0.85),0 5px 16px rgba(229,9,20,0.5)}}
@keyframes btnShimmer{0%{transform:translateX(-100%) rotate(25deg)}100%{transform:translateX(250%) rotate(25deg)}}
@keyframes dropPulse{0%,100%{border-color:var(--line);box-shadow:var(--shadow)}50%{border-color:color-mix(in srgb,var(--acc) 40%,var(--line));box-shadow:var(--shadow-glow)}}
@keyframes gradientFlow{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes glowPulse{0%,100%{opacity:.4}50%{opacity:.8}}

/* Page Entrance */
.hero,.tool-head,.drop,.panel,.content,.grid{animation:fadeSlideUp .5s cubic-bezier(0.16,1,0.3,1) forwards}

/* Hero */
.hero{text-align:center;padding:48px 0 36px;position:relative}
.hero::before{content:'';position:absolute;top:-80px;left:50%;transform:translateX(-50%);width:500px;height:500px;background:radial-gradient(circle,color-mix(in srgb,var(--acc) 6%,transparent) 0%,transparent 70%);pointer-events:none;z-index:0}
.hero h1{font-size:32px;font-weight:800;letter-spacing:-.8px;line-height:1.25;position:relative;z-index:1}
.hero h1 b{background:linear-gradient(135deg,var(--acc),#ff6b35);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero p{color:var(--fg2);margin-top:14px;font-size:16.5px;line-height:1.65;max-width:620px;margin-left:auto;margin-right:auto;position:relative;z-index:1}
.trust{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:26px;position:relative;z-index:1}
.chip{display:inline-flex;align-items:center;gap:6px;background:color-mix(in srgb,var(--surface) 80%,transparent);backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:24px;padding:7px 15px;font-size:13px;color:var(--fg2);font-weight:600;box-shadow:0 2px 8px rgba(0,0,0,.04);transition:all .25s cubic-bezier(0.16,1,0.3,1)}
.chip:hover{transform:translateY(-2px) scale(1.03);border-color:var(--acc);color:var(--fg);box-shadow:var(--shadow-glow)}
.chip svg{width:16px;height:16px;stroke:var(--green)}

/* Tool cards grid (home) */
.grid{display:grid;grid-template-columns:1fr;gap:16px;margin-top:20px}
.card{display:flex;align-items:center;gap:16px;background:color-mix(in srgb,var(--surface) 85%,transparent);backdrop-filter:blur(8px);border:1px solid color-mix(in srgb,var(--line) 70%,transparent);border-radius:var(--radius);padding:18px 20px;box-shadow:var(--shadow);transition:all .3s cubic-bezier(0.16,1,0.3,1);min-height:84px;position:relative;overflow:hidden}
.card::before{content:'';position:absolute;inset:0;border-radius:var(--radius);opacity:0;transition:opacity .3s ease;background:linear-gradient(135deg,color-mix(in srgb,var(--acc) 5%,transparent),transparent)}
.card:hover{transform:translateY(-6px);border-color:var(--acc);box-shadow:var(--shadow-glow)}
.card:hover::before{opacity:1}
.card .ci{width:48px;height:48px;border-radius:14px;background:var(--acc-weak);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .3s cubic-bezier(0.16,1,0.3,1);position:relative;z-index:1}
.card:hover .ci{transform:scale(1.12) rotate(3deg);box-shadow:0 4px 16px rgba(229,9,20,.25)}
.card .ci svg{width:24px;height:24px;stroke:var(--acc)}
.card h3{font-size:17px;font-weight:700;color:var(--fg);position:relative;z-index:1}
.card p{font-size:13.5px;color:var(--fg2);margin-top:3px;position:relative;z-index:1}
.card .arrow{margin-left:auto;color:var(--fg2);transition:all .3s cubic-bezier(0.16,1,0.3,1);position:relative;z-index:1}
.card:hover .arrow{transform:translateX(6px);color:var(--acc)}

/* Tool page */
.tool-head{text-align:center;padding:36px 0 14px;position:relative}
.tool-head::before{content:'';position:absolute;top:-60px;left:50%;transform:translateX(-50%);width:400px;height:400px;background:radial-gradient(circle,color-mix(in srgb,var(--acc) 5%,transparent) 0%,transparent 70%);pointer-events:none;z-index:0}
.tool-head h1{font-size:30px;font-weight:800;letter-spacing:-.5px;position:relative;z-index:1}
.tool-head p{color:var(--fg2);margin-top:10px;max-width:620px;margin-left:auto;margin-right:auto;font-size:15.5px;line-height:1.6;position:relative;z-index:1}

.drop{border:2px dashed color-mix(in srgb,var(--line) 80%,transparent);border-radius:var(--radius);background:color-mix(in srgb,var(--surface) 70%,transparent);backdrop-filter:blur(8px);padding:48px 24px;text-align:center;cursor:pointer;transition:all .3s cubic-bezier(0.16,1,0.3,1);margin-top:20px;box-shadow:var(--shadow);animation:dropPulse 4s infinite ease-in-out;position:relative;overflow:hidden}
.drop::before{content:'';position:absolute;inset:0;border-radius:var(--radius);opacity:0;transition:opacity .3s ease;background:radial-gradient(circle at center,color-mix(in srgb,var(--acc) 8%,transparent),transparent 70%)}
.drop:hover,.drop.over{border-color:var(--acc);background:color-mix(in srgb,var(--acc-weak) 60%,var(--surface));transform:translateY(-4px);box-shadow:var(--shadow-glow)}
.drop:hover::before,.drop.over::before{opacity:1}
.drop .di{width:64px;height:64px;margin:0 auto;border-radius:18px;background:var(--acc-weak);display:flex;align-items:center;justify-content:center;transition:all .3s cubic-bezier(0.16,1,0.3,1);position:relative;z-index:1}
.drop:hover .di{animation:pulseDrop 1.2s infinite ease-in-out;box-shadow:0 4px 20px rgba(229,9,20,.3)}
.drop .di svg{width:30px;height:30px;stroke:var(--acc)}
.drop h2{font-size:18px;font-weight:700;margin-top:18px;position:relative;z-index:1}
.drop p{color:var(--fg2);font-size:14px;margin-top:6px;position:relative;z-index:1}
.drop input{display:none}

.panel{background:color-mix(in srgb,var(--surface) 85%,transparent);backdrop-filter:blur(8px);border:1px solid color-mix(in srgb,var(--line) 70%,transparent);border-radius:var(--radius);padding:22px;margin-top:20px;box-shadow:var(--shadow)}
.opts{display:flex;flex-wrap:wrap;gap:18px 24px;align-items:flex-end}
.opt{display:flex;flex-direction:column;gap:8px;font-size:13.5px}
.opt label{font-weight:600;color:var(--fg2)}
.opt .row{display:flex;align-items:center;gap:10px}
.opt input[type=range]{width:160px;accent-color:var(--acc);height:28px;cursor:pointer}
.opt input[type=number]{width:96px}
.opt input[type=text],.opt input[type=number],.opt select{background:var(--surface2);color:var(--fg);border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:14.5px;min-height:46px;transition:all .2s cubic-bezier(0.16,1,0.3,1)}
.opt input[type=text]:focus,.opt input[type=number]:focus,.opt select:focus{border-color:var(--acc);outline:none;box-shadow:0 0 0 3px rgba(229,9,20,.15),0 4px 12px rgba(229,9,20,.1)}
.opt select{cursor:pointer}
.opt .val{color:var(--acc);font-weight:700}
.seg{display:flex;flex-wrap:wrap;gap:8px}
.seg button{background:var(--surface2);color:var(--fg);border:1px solid var(--line);border-radius:10px;padding:10px 15px;font-size:13.5px;font-weight:600;cursor:pointer;min-height:44px;transition:all .25s cubic-bezier(0.16,1,0.3,1)}
.seg button:hover{border-color:var(--acc);transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.08)}
.seg button.on{background:var(--acc);color:var(--acc-fg);border-color:var(--acc);animation:activeGlow 2s infinite ease-in-out;transform:translateY(-2px) scale(1.02);box-shadow:0 4px 16px rgba(229,9,20,.35)}
.chkrow{display:flex;align-items:center;gap:10px}
.chkrow input{width:20px;height:20px;accent-color:var(--acc);cursor:pointer}

.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--acc);color:var(--acc-fg);border:none;border-radius:12px;padding:12px 22px;font-size:15px;font-weight:700;cursor:pointer;min-height:50px;transition:all .3s cubic-bezier(0.16,1,0.3,1);font-family:inherit;box-shadow:0 4px 16px rgba(229,9,20,.3)}
.btn::after{content:'';position:absolute;top:-50%;left:-50%;width:50%;height:200%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.3),transparent);transform:rotate(25deg);animation:btnShimmer 7s infinite cubic-bezier(0.4,0,0.2,1);pointer-events:none}
.btn:hover:not(:disabled){filter:brightness(1.1);transform:translateY(-3px) scale(1.02);box-shadow:0 8px 28px rgba(229,9,20,.45)}
.btn:active:not(:disabled){transform:translateY(1px) scale(.98);box-shadow:0 2px 8px rgba(229,9,20,.3)}
.btn.ghost{background:color-mix(in srgb,var(--surface) 80%,transparent);backdrop-filter:blur(8px);color:var(--fg);border:1px solid var(--line);box-shadow:none}
.btn.ghost::after{display:none}
.btn.ghost:hover{background:var(--surface2);border-color:var(--fg2);box-shadow:var(--shadow)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}

.summary{margin-top:16px;color:var(--fg2);font-weight:600;font-size:14.5px}
.results{display:grid;grid-template-columns:1fr;gap:16px;margin-top:18px}
.res{background:color-mix(in srgb,var(--surface) 85%,transparent);backdrop-filter:blur(8px);border:1px solid color-mix(in srgb,var(--line) 70%,transparent);border-radius:14px;padding:16px;display:flex;flex-wrap:wrap;gap:14px;align-items:center;box-shadow:var(--shadow);transition:all .25s ease}
.res:hover{box-shadow:var(--shadow-lg)}
.res.err{border-color:var(--red);background:color-mix(in srgb,var(--red) 8%,var(--surface))}
.res img{width:64px;height:64px;object-fit:cover;border-radius:10px;background:var(--surface2);flex-shrink:0}
.res .meta{flex:1;min-width:180px}
.res .meta .fn{font-weight:700;font-size:14.5px;color:var(--fg);word-break:break-all}
.res .meta .sz{font-size:13px;color:var(--fg2);margin-top:4px}
.res .meta .sz b{color:var(--green)}
.res a.dl,.res button.dl{margin-left:auto;background:color-mix(in srgb,var(--surface) 80%,transparent);color:var(--fg);border:1px solid var(--line);padding:9px 16px;border-radius:10px;font-weight:600;font-size:13.5px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;min-height:42px;transition:all .25s cubic-bezier(0.16,1,0.3,1)}
.res a.dl:hover,.res button.dl:hover{border-color:var(--acc);color:var(--acc);background:var(--acc-weak);transform:translateY(-1px);box-shadow:0 4px 12px rgba(229,9,20,.15)}

/* crop canvas & pdf editor canvas */
.cropwrap{margin-top:20px;text-align:center;position:relative;touch-action:none;user-select:none}
.cropwrap canvas{max-width:100%;border-radius:14px;border:1px solid var(--line);background:var(--surface2);box-shadow:var(--shadow)}

/* PDF Editor & Tool Specific Canvas Wrapper */
.pdf-toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:14px 18px;background:var(--surface2);border-radius:12px;border:1px solid var(--line);margin-bottom:16px}
.pdf-pages{display:flex;gap:12px;overflow-x:auto;padding:12px 4px;margin-bottom:16px}
.pdf-page-thumb{border:2px solid var(--line);border-radius:8px;padding:6px;background:var(--surface);cursor:pointer;flex-shrink:0;transition:all .25s cubic-bezier(0.16,1,0.3,1);text-align:center;font-size:12px;font-weight:700}
.pdf-page-thumb.active,.pdf-page-thumb:hover{border-color:var(--acc);transform:translateY(-2px);box-shadow:0 4px 14px rgba(229,9,20,.2)}
.pdf-page-thumb canvas{width:80px;height:auto;border-radius:4px;display:block;margin-bottom:4px}

.pdf-editor-container{position:relative;display:inline-block;max-width:100%;box-shadow:var(--shadow-lg);border-radius:12px;overflow:hidden;border:1px solid var(--line)}
.pdf-editor-container canvas{display:block;max-width:100%;height:auto}
.pdf-annotation-layer{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:auto;cursor:crosshair}

/* content sections */
.content{margin:36px 0;padding:28px 26px;background:color-mix(in srgb,var(--surface) 85%,transparent);backdrop-filter:blur(8px);border:1px solid color-mix(in srgb,var(--line) 70%,transparent);border-radius:var(--radius);box-shadow:var(--shadow);transition:box-shadow .3s ease}
.content:hover{box-shadow:var(--shadow-lg)}
.content h2{font-size:22px;font-weight:800;margin-bottom:14px;letter-spacing:-.3px}
.content h3{font-size:18px;font-weight:700;margin:24px 0 10px;letter-spacing:-.2px}
.content p{color:var(--fg2);margin-bottom:14px;line-height:1.7}
.content ol,.content ul{color:var(--fg2);margin:0 0 16px 22px;line-height:1.7}
.content li{margin-bottom:8px}
.faq details{background:var(--surface2);border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin-bottom:12px;transition:all .25s cubic-bezier(0.16,1,0.3,1)}
.faq details[open]{border-color:var(--acc);box-shadow:0 4px 16px rgba(229,9,20,.1)}
.faq summary{font-weight:700;cursor:pointer;list-style:none;font-size:15px;color:var(--fg)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';float:right;color:var(--acc);font-weight:700;font-size:18px;transition:transform .25s ease}
.faq details[open] summary::after{content:'\2212';transform:rotate(180deg)}
.faq p{margin:12px 0 0;color:var(--fg2);line-height:1.7}

/* btn small */
.btn.sm{min-height:36px;padding:6px 14px;font-size:13px;border-radius:8px}

/* busy/loading state */
.busy{display:inline-flex;align-items:center;gap:8px;color:var(--fg2);font-weight:600;font-size:13px}
.busy::before{content:'';width:16px;height:16px;border:2px solid var(--line);border-top-color:var(--acc);border-radius:50%;animation:spin .6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* progress bar */
.progress{height:4px;background:var(--surface2);border-radius:4px;overflow:hidden;margin-top:12px}
.progress-fill{height:100%;background:linear-gradient(90deg,var(--acc),#ff6b35);transition:width .3s;border-radius:4px}

/* toast notification */
.toast{position:fixed;bottom:24px;right:24px;z-index:10000;background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(12px);border:1px solid var(--line);border-radius:12px;padding:14px 20px;box-shadow:var(--shadow-lg);font-weight:600;font-size:14px;max-width:360px;transform:translateY(120%);opacity:0;transition:all .35s cubic-bezier(0.16,1,0.3,1)}
.toast.show{transform:translateY(0);opacity:1}
.toast.success{border-color:var(--green);color:var(--green)}
.toast.error{border-color:var(--red);color:var(--red)}

/* drop loaded state */
.drop.loaded{border-color:var(--green);animation:none}

/* selection */
::selection{background:rgba(229,9,20,.15);color:var(--fg)}

/* scrollbar */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--fg2)}

/* checkbox bigger touch target */
.chkrow{min-height:44px}
.chkrow input{width:22px;height:22px}

/* focus visible */
.iconbtn:focus-visible,.btn:focus-visible,.seg button:focus-visible{outline:2px solid var(--acc);outline-offset:2px}

/* footer */
footer.site{border-top:1px solid color-mix(in srgb,var(--line) 60%,transparent);margin-top:48px;background:color-mix(in srgb,var(--surface) 80%,transparent)}
.foot{display:flex;flex-wrap:wrap;gap:20px 32px;justify-content:space-between;padding:32px 0}
.foot .col h4{font-size:13px;color:var(--fg);margin-bottom:10px;text-transform:uppercase;letter-spacing:.8px;font-weight:700}
.foot .col a{display:block;color:var(--fg2);font-size:14.5px;padding:4px 0;transition:all .2s ease}
.foot .col a:hover{color:var(--acc);transform:translateX(3px)}
.foot .bottom{width:100%;border-top:1px solid var(--line);margin-top:12px;padding-top:18px;color:var(--fg2);font-size:13.5px;text-align:center}

/* responsive breakpoints */
@media (min-width:640px){
  .grid{grid-template-columns:1fr 1fr}
  .results{grid-template-columns:1fr 1fr}
  .hero h1{font-size:40px}
  .tool-head h1{font-size:34px}
  .content{padding:32px}
}
@media (min-width:900px){
  .nav .links{display:flex}
  .menu-toggle{display:none}
  .mobile-menu,.mobile-overlay{display:none!important;visibility:hidden!important;opacity:0!important;pointer-events:none!important}
  .grid{grid-template-columns:1fr 1fr 1fr}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto}}