/* Zipfixy tool skin — loaded AFTER each tool's own styles.css, on every tool page.
   Re-skins the shared tool template (and QR3D's own token names) with the company look:
   dark, electric green, Space Grotesk + Inter, glow and motion. Only tokens + light touches,
   so each tool keeps its own layout. Added to pages by _zipfixy-build/scripts/apply_tool_skin.mjs */
:root,:root:not(#_){
  color-scheme:dark;
  --zg:#22ff88; --zg2:#00d96b; --zglow:rgba(34,255,136,.35); --zline:rgba(255,255,255,.09); --zline2:rgba(34,255,136,.28);
  --zease:cubic-bezier(.23,1,.32,1);
  /* shared tool template tokens */
  --accent:#22ff88; --accent-dark:#6bffb0; --accent-soft:rgba(34,255,136,.12);
  --accent-2:#ffb86b; --accent-2-ink:#ffc98f; --accent-2-soft:rgba(255,184,107,.12);
  --ok:#22ff88; --ok-soft:rgba(34,255,136,.12); --err:#ff8080; --err-soft:rgba(255,90,90,.12);
  --on-accent:#03130a;
  --bg:#050807; --bg-2:#0a100d; --card:#0e1512; --text:#f3f8f5; --text-soft:#9aa8a0; --border:rgba(255,255,255,.1);
  --serif:"Space Grotesk","Inter",system-ui,sans-serif; --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --chart-principal:#22ff88; --chart-interest:#ffb86b;
  /* QR3D token names */
  --accent-3:#7dffc0; --surface:#0e1512; --surface-2:#121c17; --line:rgba(255,255,255,.1); --line-2:rgba(34,255,136,.3);
  --muted:#9aa8a0; --warn:#ffcf6b; --bad:#ff8080; --ok-bg:rgba(34,255,136,.12); --warn-bg:rgba(255,207,107,.12); --bad-bg:rgba(255,90,90,.12);
  --display:"Space Grotesk","Inter",system-ui,sans-serif;
  --shadow-s:0 1px 2px rgba(0,0,0,.3),0 4px 14px rgba(0,0,0,.25); --shadow-m:0 20px 50px rgba(0,0,0,.45); --shadow-pop:0 10px 30px rgba(34,255,136,.28);
  --sel-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1.5 1.5 7 7l5.5-5.5' fill='none' stroke='%2322ff88' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
html{background:#050807}
body{background:#050807;color:var(--text);font-family:var(--sans);position:relative}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(620px circle at 88% -6%,rgba(34,255,136,.16),transparent 62%),radial-gradient(520px circle at -6% 60%,rgba(0,217,107,.08),transparent 60%),
  linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px) 0 0/64px 64px,linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px) 0 0/64px 64px;
  -webkit-mask-image:linear-gradient(#000,rgba(0,0,0,.5) 70%);mask-image:linear-gradient(#000,rgba(0,0,0,.5) 70%)}
::selection{background:rgba(34,255,136,.3);color:#fff}
:focus-visible{outline-color:var(--zg)}
h1,h2,h3,h4,.section-title,.section-title-sm{font-family:var(--serif);letter-spacing:-.02em}

/* header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(5,8,7,.72)!important;backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);border-bottom:1px solid var(--zline)!important;box-shadow:none;transition:background .3s,box-shadow .3s}
.site-header.z-scrolled{background:rgba(5,8,7,.92)!important;box-shadow:0 10px 40px rgba(0,0,0,.45)}
.site-header .brand,.site-header .brand-name{font-family:var(--serif);font-weight:700;letter-spacing:-.02em;color:var(--text)}
.site-header .brand svg{color:var(--zg);filter:drop-shadow(0 0 8px rgba(34,255,136,.45))}
.site-nav a{color:var(--text-soft);text-decoration:none;padding:6px 12px;border:1px solid var(--zline);border-radius:999px;transition:all .2s var(--zease)}
.site-nav a:hover{color:var(--zg);border-color:var(--zline2)}
.z-mark{display:inline-flex;align-items:center;gap:7px}
.z-mark svg{width:16px;height:16px;flex:none}

/* hero title of the tool */
.section--tool,.hero{position:relative}
.section-title{font-weight:700}
.section--tool .section-title,.hero h1{background:linear-gradient(100deg,#fff 0%,#fff 45%,var(--zg) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;animation:zrise .8s var(--zease) both}
.section--tool .section-sub,.hero .hero-sub,.hero p{animation:zrise .8s var(--zease) .12s both}
@keyframes zrise{from{opacity:0;transform:translateY(14px)}}

/* cards / panels */
.tool-card,.panel,.card{border-radius:20px;border-color:var(--zline)!important;background:linear-gradient(180deg,#121c17,#0e1512)!important;box-shadow:0 30px 70px rgba(0,0,0,.45),0 0 0 1px rgba(34,255,136,.05)}
.tool-card{animation:zrise .8s var(--zease) .2s both}
.step,.faq-item,.tool-link-card{background:linear-gradient(180deg,#121c17,#0e1512);border:1px solid var(--zline);border-radius:16px;transition:transform .3s var(--zease),border-color .3s,box-shadow .3s}
.step svg{color:var(--zg)}
.tool-link-card{position:relative;overflow:hidden}
.tool-link-card::after,.step::after{content:"";position:absolute;inset:0;background:radial-gradient(300px circle at var(--mx,50%) var(--my,0%),rgba(34,255,136,.13),transparent 60%);opacity:0;transition:opacity .3s;pointer-events:none}
.step{position:relative;overflow:hidden}
@media (hover:hover) and (pointer:fine){
  .tool-link-card:hover,.step:hover{transform:translateY(-4px);border-color:var(--zline2);box-shadow:0 20px 50px rgba(0,0,0,.4)}
  .tool-link-card:hover::after,.step:hover::after{opacity:1}
}
.tool-link-name{color:var(--text);font-family:var(--serif)}
.tool-link-card:hover .tool-link-name{color:var(--zg)}
.faq-item summary{font-family:var(--serif);font-weight:600}
.faq-item[open]{border-color:var(--zline2)}
.faq-item summary::after{color:var(--zg)}
.privacy-badge{display:inline-flex;gap:8px;align-items:center;padding:8px 16px;border:1px solid var(--zline2);border-radius:999px;background:rgba(34,255,136,.07);color:#c9ffe0}

/* buttons */
.btn,button.btn,a.btn{border-radius:999px;font-family:var(--sans);font-weight:600;transition:transform .18s var(--zease),box-shadow .2s,background .2s,color .2s,border-color .2s}
.btn-primary,.btn--primary{background:var(--zg)!important;color:#03130a!important;border-color:var(--zg)!important;box-shadow:0 10px 30px rgba(34,255,136,.25);position:relative;overflow:hidden}
.btn-primary::before,.btn--primary::before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.5) 50%,transparent 70%);transform:translateX(-130%);transition:transform .7s var(--zease);pointer-events:none}
@media (hover:hover) and (pointer:fine){
  .btn-primary:hover:not(:disabled),.btn--primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 0 0 6px rgba(34,255,136,.14),0 14px 40px rgba(34,255,136,.38)}
  .btn-primary:hover::before,.btn--primary:hover::before{transform:translateX(130%)}
  .btn-ghost:hover,.btn--ghost:hover{border-color:var(--zg)!important;color:var(--zg)!important}
}
.btn:active{transform:scale(.97)}
.btn-ghost,.btn--ghost{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.2);color:var(--text)}

/* form controls */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]),select,textarea{background-color:#080d0b;color:var(--text);border-color:var(--zline)}
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):focus,select:focus,textarea:focus{border-color:var(--zg);box-shadow:0 0 0 3px rgba(34,255,136,.15);outline:none}
input::placeholder,textarea::placeholder{color:#6f7d75}
input[type=checkbox],input[type=radio],input[type=range],progress{accent-color:var(--zg)}
select option{background:#0e1512;color:var(--text)}

/* footer */
.site-footer{background:#0a100d;border-top:1px solid var(--zline)}
.site-footer a:hover{color:var(--zg)}

/* motion helpers added by tool-skin.js */
.z-glow{position:fixed;left:0;top:0;width:520px;height:520px;border-radius:50%;pointer-events:none;z-index:-1;background:radial-gradient(circle,rgba(34,255,136,.08) 0%,rgba(34,255,136,.025) 40%,transparent 65%);opacity:0;transition:opacity .5s;will-change:transform}
body.z-pointer .z-glow{opacity:1}
.z-progress{position:fixed;left:0;top:0;height:2px;width:100%;background:var(--zg);transform-origin:left;transform:scaleX(0);z-index:70;box-shadow:0 0 12px var(--zg);pointer-events:none}
@supports (animation-timeline:scroll()){.z-progress{animation:zgrow linear both;animation-timeline:scroll(root)}}
@keyframes zgrow{to{transform:scaleX(1)}}
.z-reveal{opacity:0;transform:translateY(24px);transition:opacity .8s var(--zease),transform .8s var(--zease)}
.z-reveal.z-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .section--tool .section-title,.hero h1,.section--tool .section-sub,.hero p,.tool-card{animation:none}
  .z-reveal{opacity:1;transform:none;transition:none} .z-glow{display:none}
}

/* QR3D decorative blobs: green glows instead of coloured shapes */
.deco .blob{color:var(--zg)!important;opacity:.12!important;filter:blur(40px)}
.site-header .brand svg.brand-mark{color:#03130a;filter:none;box-shadow:0 0 18px rgba(34,255,136,.4)}

/* ===== Zipfixy header / breadcrumb / footer on tool pages (markup from apply_tool_skin.mjs) ===== */
.zx-wrap{width:min(1180px,100% - 32px);margin-inline:auto}
.zx-header{position:sticky;top:0;z-index:60;background:rgba(5,8,7,.78);backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);border-bottom:1px solid var(--zline);transition:background .3s,box-shadow .3s;font-family:var(--sans)}
.zx-header.z-scrolled{background:rgba(5,8,7,.93);box-shadow:0 10px 40px rgba(0,0,0,.45)}
.zx-nav{display:flex;align-items:center;gap:18px;min-height:64px}
.zx-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text)!important;font:700 1.3rem/1 "Space Grotesk","Inter",sans-serif;letter-spacing:-.02em;white-space:nowrap}
.zx-brand small{font:500 .78rem/1 "Inter",sans-serif;color:var(--text-soft);letter-spacing:0;padding:4px 9px;border:1px solid var(--zline);border-radius:999px}
.zx-mark{width:26px;height:26px;flex:none;filter:drop-shadow(0 0 9px rgba(34,255,136,.45))}
.zx-menu{display:flex;align-items:center;gap:18px;margin-left:auto}
.zx-menu>a{position:relative;color:var(--text-soft);text-decoration:none;font-size:.93rem;white-space:nowrap;transition:color .15s}
.zx-menu>a:not(.zx-cta)::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--zg);transform:scaleX(0);transform-origin:left;transition:transform .25s var(--zease);box-shadow:0 0 10px var(--zg)}
.zx-menu>a:not(.zx-cta):hover{color:var(--text)} .zx-menu>a:not(.zx-cta):hover::after{transform:scaleX(1)}
.zx-cta{background:var(--zg);color:#03130a!important;font-weight:600;padding:9px 18px;border-radius:999px;box-shadow:0 8px 26px rgba(34,255,136,.28);transition:transform .2s var(--zease),box-shadow .2s}
.zx-cta:hover{transform:translateY(-2px);box-shadow:0 0 0 5px rgba(34,255,136,.14),0 12px 34px rgba(34,255,136,.4)}
.zx-lang{position:relative;display:flex;align-items:center}
.zx-lang .lang-switch{margin:0;gap:4px}
.zx-lang .lang-switch a{color:var(--text-soft);font-size:.82rem;padding:5px 8px;border-radius:8px;text-decoration:none}
.zx-lang .lang-switch a.is-on{color:var(--zg);background:rgba(34,255,136,.1)}
.zx-burger{display:none;margin-left:auto;background:none;border:0;color:var(--text);font-size:1.6rem;line-height:1;padding:8px;cursor:pointer}
.zx-sub{border-top:1px solid rgba(255,255,255,.05)}
.zx-sub-in{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:40px;flex-wrap:wrap;padding:6px 0}
.zx-crumbs{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:.86rem;color:var(--text-soft)}
.zx-crumbs a{color:var(--text-soft);text-decoration:none;transition:color .15s}
.zx-crumbs a:hover{color:var(--zg)}
.zx-crumbs [aria-current]{color:var(--text);font-weight:600}
.zx-sep{opacity:.5}
.zx-anchors{display:flex;gap:6px;flex-wrap:wrap}
.zx-anchors a{font-size:.8rem;color:var(--text-soft);text-decoration:none;padding:4px 10px;border:1px solid var(--zline);border-radius:999px;transition:all .2s var(--zease)}
.zx-anchors a:hover{color:var(--zg);border-color:var(--zline2)}
.zx-footer{margin-top:56px;border-top:1px solid var(--zline);background:#0a100d;padding:52px 0 28px;font-family:var(--sans);position:relative}
.zx-f-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px}
.zx-footer h4{margin:0 0 12px;font:600 .78rem "Inter",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--text-soft)}
.zx-footer a{display:block;color:var(--text);text-decoration:none;padding:4px 0;font-size:.94rem}
.zx-footer a:hover{color:var(--zg)}
.zx-footer p{color:var(--text-soft);margin:12px 0 8px;font-size:.95rem}
.zx-footer .zx-brand{display:flex;padding:0}
.zx-f-legal{margin-top:32px;padding-top:16px;border-top:1px solid var(--zline);color:var(--text-soft);font-size:.85rem}
html{scroll-padding-top:120px}
@media (max-width:860px){
  .zx-burger{display:block}
  .zx-menu{display:none;position:absolute;left:0;right:0;top:64px;background:#050807;flex-direction:column;align-items:stretch;gap:0;padding:10px 16px 20px;border-bottom:1px solid var(--zline);margin:0}
  .zx-menu.open{display:flex} .zx-menu>a{padding:12px 0} .zx-menu>a::after{display:none}
  .zx-cta{text-align:center;margin-top:10px} .zx-lang{padding:8px 0}
  .zx-anchors{display:none} .zx-f-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){.zx-brand small{display:none}.zx-f-grid{grid-template-columns:1fr}.zx-crumbs{font-size:.8rem}}

/* "More tools" block: same layout on every tool (QR3D's own CSS never had it) */
.tools-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem;margin-top:1rem}
.tool-link-card{display:flex;flex-direction:column;gap:.35rem;padding:1.1rem 1.2rem;text-decoration:none;color:var(--text)}
.tool-link-name{font-weight:700;font-size:1.02rem}
.tool-link-desc{font-size:.87rem;line-height:1.5;color:var(--text-soft)}
@media (max-width:860px){.zx-menu{z-index:5;box-shadow:0 30px 60px rgba(0,0,0,.6)}}