/* PixKit — style.css v1.0.0 | Theme colors come from site-settings.js and are applied to these variables on load. */
:root{
  --primary:#7c3aed; --secondary:#2563eb; --accent:#ec4899; --accent2:#f97316;
  --bg:#f6f4ff; --card:rgba(255,255,255,.82); --text:#1f2937; --muted:#6b7280;
  --border:#e5e7eb; --shadow:0 10px 30px rgba(124,58,237,.14); --radius:18px;
}
[data-theme="dark"]{
  --bg:#111827; --card:rgba(31,41,55,.85); --text:#f3f4f6; --muted:#9ca3af;
  --border:#374151; --shadow:0 10px 30px rgba(0,0,0,.4);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:'Poppins',system-ui,Arial,sans-serif;background:var(--bg);color:var(--text);line-height:1.6}
img,canvas{max-width:100%}
a{color:var(--secondary)}
.container{max-width:1100px;margin:0 auto;padding:0 20px}
.section{padding:56px 0}
.section-sub{color:var(--muted);margin-top:-8px}
/* Justified paragraphs (v1.7.1): article and description paragraphs align
   to both edges; hyphenation keeps the spacing even. */
.article-body p,.section-sub{text-align:justify;hyphens:auto}
/* Header */
.site-header{position:sticky;top:0;z-index:50;background:var(--card);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
.nav-row{display:flex;align-items:center;gap:20px;min-height:64px}
.logo{font-weight:800;font-size:24px;text-decoration:none;color:var(--text);display:flex;align-items:center;gap:8px}
.logo-mark{display:inline-flex;width:38px;height:38px;border-radius:12px;align-items:center;justify-content:center;color:#fff;background:linear-gradient(135deg,var(--primary),var(--accent))}
.main-nav{margin-left:auto;display:flex;gap:10px}
.main-nav a,.nav-drop-btn{display:inline-flex;align-items:center;padding:9px 16px;border-radius:999px;border:1.5px solid var(--border);background:var(--card);text-decoration:none;color:var(--text);font-family:inherit;font-weight:700;font-size:15px;cursor:pointer;transition:transform .15s,box-shadow .15s,border-color .15s,color .15s}
.main-nav a:hover,.nav-drop-btn:hover,.nav-dropdown.open .nav-drop-btn{border-color:var(--primary);color:var(--primary);transform:translateY(-1px);box-shadow:var(--shadow)}
/* Tools dropdown (v1.6.2): the Tools nav button opens a menu with every
   tool name; each item links to that tool's own page. Hover opens it on
   desktop; tap/click toggles it (JS adds .open) for touch. */
.nav-dropdown{position:relative}
.nav-drop-btn .drop-caret{margin-left:6px;font-size:12px;transition:transform .2s}
.nav-dropdown.open .drop-caret{transform:rotate(180deg)}
.nav-dropdown-menu{position:absolute;top:calc(100% + 10px);left:0;z-index:60;display:none;grid-template-columns:1fr 1fr;gap:2px;min-width:480px;max-height:70vh;overflow:auto;padding:10px;border:1px solid var(--border);border-radius:16px;background:var(--card);box-shadow:0 18px 40px rgba(0,0,0,.22)}
.nav-dropdown-menu::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px}
.nav-dropdown:hover .nav-dropdown-menu,.nav-dropdown.open .nav-dropdown-menu{display:grid}
.nav-dropdown-menu a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;text-decoration:none;color:var(--text);font-size:14px;font-weight:600;line-height:1.35}
.nav-dropdown-menu a:hover{background:rgba(124,58,237,.1);color:var(--primary)}
.nav-dropdown-menu a i{flex:none;width:18px;text-align:center;color:var(--primary);font-size:15px}
.nav-dropdown-menu a.menu-all{grid-column:1/-1;border-bottom:1px solid var(--border);border-radius:10px 10px 0 0;margin-bottom:4px;font-weight:700}
.icon-btn{border:1px solid var(--border);background:var(--card);color:var(--text);border-radius:50%;width:42px;height:42px;cursor:pointer;font-size:17px}
/* Buttons */
.btn{display:inline-flex;align-items:center;gap:8px;border:0;border-radius:12px;padding:13px 22px;font-size:16px;font-weight:700;cursor:pointer;text-decoration:none;background:#e5e7eb;color:#111827;transition:transform .15s,box-shadow .15s,filter .15s}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}
/* Glossy red action button (v1.5.1): bright red top fading to deep red, white
   gloss on the upper half, and a light sweep crossing the button every few
   seconds. One rule styles every primary action button on the homepage and
   all 21 tool pages, plus the hero CTA. */
.btn-primary{position:relative;overflow:hidden;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.28);border:1px solid #b91c1c;border-radius:14px;background:linear-gradient(180deg,#ff6b5e 0%,#f84040 38%,#e11d2e 62%,#c81e2b 100%)}
.btn-primary::before{content:"";position:absolute;left:3%;right:3%;top:2px;height:46%;border-radius:10px;background:linear-gradient(rgba(255,255,255,.55),rgba(255,255,255,.06));pointer-events:none}
.btn-primary::after{content:"";position:absolute;top:-10%;bottom:-10%;width:38%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.6),transparent);transform:skewX(-20deg) translateX(-320%);animation:btnShine 4s ease-in-out infinite;pointer-events:none}
@keyframes btnShine{0%,55%{transform:skewX(-20deg) translateX(-320%)}90%,100%{transform:skewX(-20deg) translateX(420%)}}
.btn-primary:hover{filter:brightness(1.06)}
.btn-primary:disabled::after{animation:none}
@media (prefers-reduced-motion:reduce){.btn-primary::after{animation:none}}
.btn-lg{padding:16px 30px;font-size:18px}
.btn-ghost{background:transparent;border:1.5px solid var(--border);color:var(--text)}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin:16px 0}
/* Hero */
.hero{padding:64px 0 20px;background:linear-gradient(120deg,rgba(124,58,237,.12),rgba(37,99,235,.10),rgba(236,72,153,.12),rgba(249,115,22,.10))}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:32px;align-items:center}
.hero h1{font-size:44px;line-height:1.2;margin:0 0 14px}
.hero-note{color:var(--muted);font-size:14px}
.hero-art svg{width:100%;height:auto}
.hero-art{position:relative;overflow:hidden;padding:12px;border:3px solid transparent;border-radius:28px;background:linear-gradient(145deg,#ffffff,#e2e2ec) padding-box,linear-gradient(135deg,#7c3aed,#ec4899,#f97316,#7c3aed) border-box;box-shadow:inset 0 2px 2px rgba(255,255,255,.95),inset 0 -4px 8px rgba(0,0,0,.18),0 20px 40px rgba(0,0,0,.22)}
.hero-art img{position:relative;z-index:1;display:block;width:100%;height:auto;border-radius:18px}
/* Hero slideshow (v1.6.0): 4 demo pictures, 6 seconds each, infinite loop */
.hero-slides{position:relative;z-index:1;border-radius:18px;overflow:hidden;aspect-ratio:16/9;background:#e5e7eb}
.hero-slide{position:absolute;inset:0;display:block;opacity:0;transition:opacity .8s ease;pointer-events:none}
.hero-slide.active{opacity:1;pointer-events:auto}
.hero-slide img{display:block;width:100%;height:100%;object-fit:cover}
.hero-slide .slide-label{position:absolute;top:12px;left:12px;z-index:2;padding:6px 12px;border-radius:999px;background:rgba(17,24,39,.78);color:#fff;font-size:13px;font-weight:700}
.hero-slide .slide-cta{position:absolute;bottom:12px;left:12px;z-index:2;padding:7px 14px;border-radius:999px;background:#e11d2e;color:#fff;font-size:13px;font-weight:700;box-shadow:0 4px 12px rgba(0,0,0,.3)}
.hero-dots{position:absolute;bottom:12px;right:12px;z-index:3;display:flex;gap:8px}
.hero-dots button{width:11px;height:11px;padding:0;border:2px solid rgba(255,255,255,.9);border-radius:50%;background:rgba(0,0,0,.25);cursor:pointer}
.hero-dots button.active{background:#fff}
.hero-arrow{position:absolute;top:50%;z-index:3;width:36px;height:36px;margin-top:-18px;border:0;border-radius:50%;background:rgba(17,24,39,.55);color:#fff;font-size:16px;cursor:pointer;opacity:0;transition:opacity .2s,background .2s;display:flex;align-items:center;justify-content:center}
.hero-slides:hover .hero-arrow,.hero-arrow:focus-visible{opacity:1}
.hero-arrow:hover{background:rgba(17,24,39,.8)}
.hero-arrow.prev{left:10px}
.hero-arrow.next{right:10px}
@media (prefers-reduced-motion:reduce){.hero-slide{transition:none}}
/* Blog articles (v1.6.0) */
.article-meta{color:var(--muted);font-size:14px}
.article-img{width:100%;height:auto;border-radius:14px;margin:8px 0 20px}
.article-body h2{margin-top:28px}
.hero-art::after{content:"";position:absolute;top:-20%;bottom:-20%;width:45%;z-index:2;pointer-events:none;background:linear-gradient(105deg,transparent,rgba(255,255,255,.65),transparent);transform:skewX(-20deg) translateX(-280%);animation:heroShine 4s ease-in-out infinite}
@keyframes heroShine{0%,55%{transform:skewX(-20deg) translateX(-280%)}90%,100%{transform:skewX(-20deg) translateX(380%)}}
/* Hero border light (v1.6.2): a bright segment travels around the frame
   like a train on a loop, on top of the new contrast gradient stroke.
   v1.6.3: bigger light (thicker ring, longer segment, stronger glow);
   the same beam is now shared with the tool card pictures. */
@property --beamAngle{syntax:"<angle>";initial-value:0deg;inherits:false}
.hero-art::before{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;border-radius:28px;padding:6px;background:conic-gradient(from var(--beamAngle),transparent 0deg,transparent 260deg,#ffffff 310deg,#ffd166 345deg,transparent 360deg);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;filter:drop-shadow(0 0 10px rgba(255,255,255,.95));animation:beamSpin 4s linear infinite}
@keyframes beamSpin{to{--beamAngle:360deg}}
@media (prefers-reduced-motion:reduce){.hero-art::after,.hero-art::before{animation:none}}
/* Tool cards */
.tools-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;margin-top:28px}
.tool-card{background:var(--card);backdrop-filter:blur(12px);border:1px solid var(--border);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);cursor:pointer;transition:transform .18s,box-shadow .18s;text-align:left}
.tool-card:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(124,58,237,.22)}
/* Attractive animated tool icon (v1.6.2): circular 3-colour gradient badge
   with a soft pulse and a bright segment that travels around it. */
.tool-card .tool-icon{position:relative;font-size:28px;width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;background:linear-gradient(135deg,#7c3aed,#ec4899 55%,#f97316);margin-bottom:12px;box-shadow:0 10px 20px rgba(124,58,237,.35),inset 0 2px 3px rgba(255,255,255,.55),inset 0 -3px 6px rgba(0,0,0,.2);animation:iconPulse 2.6s ease-in-out infinite}
.tool-card .tool-icon::before{content:"";position:absolute;inset:-6px;border-radius:50%;padding:3px;background:conic-gradient(from 0deg,transparent 0deg,transparent 270deg,#fff 315deg,#ffd166 345deg,transparent 360deg);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;animation:iconRingSpin 5s linear infinite;pointer-events:none}
@keyframes iconRingSpin{to{transform:rotate(360deg)}}
@keyframes iconPulse{0%,100%{transform:scale(1);box-shadow:0 10px 20px rgba(124,58,237,.35),inset 0 2px 3px rgba(255,255,255,.55),inset 0 -3px 6px rgba(0,0,0,.2)}50%{transform:scale(1.07);box-shadow:0 12px 26px rgba(236,72,153,.45),inset 0 2px 3px rgba(255,255,255,.55),inset 0 -3px 6px rgba(0,0,0,.2)}}
@media (prefers-reduced-motion:reduce){.tool-card .tool-icon,.tool-card .tool-icon::before{animation:none}}
.tool-card .card-img{width:100%;height:118px;object-fit:cover;border-radius:10px;border:2px solid rgba(255,255,255,.9);background:#f3f4f6;display:block}
/* Card picture frame (v1.6.1): slightly smaller picture, white stroke,
   embossed frame like the hero. v1.6.3: the orbiting dot is gone; the
   frame now carries the same train-loop stroke light as the hero. */
.card-img-wrap{position:relative;display:block;width:94%;margin:0 auto 14px;padding:6px;border-radius:16px;background:linear-gradient(145deg,#ffffff,#e2e2ec);box-shadow:inset 0 2px 2px rgba(255,255,255,.95),inset 0 -4px 8px rgba(0,0,0,.18),0 12px 24px rgba(0,0,0,.18)}
.card-img-wrap .card-img{margin:0}
.card-img-wrap::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:16px;padding:6px;background:conic-gradient(from var(--beamAngle),transparent 0deg,transparent 260deg,#ffffff 310deg,#ffd166 345deg,transparent 360deg);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;filter:drop-shadow(0 0 8px rgba(255,255,255,.9));animation:beamSpin 5s linear infinite}
@media (prefers-reduced-motion:reduce){.card-img-wrap::before{animation:none}}
.tool-card h3{margin:0 0 8px;font-size:18px}
.tool-card p{color:var(--muted);margin:0 0 12px}
.tool-card .card-cta{font-weight:700;color:var(--primary)}
.tool-card.active{outline:3px solid var(--primary)}
/* Workspace + panels */
.workspace-section{background:linear-gradient(180deg,transparent,rgba(124,58,237,.06))}
.tool-panel{display:none;background:var(--card);backdrop-filter:blur(12px);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:28px;margin-top:24px}
.tool-panel.active{display:block}
.tool-panel h3{font-size:24px;margin-top:0}
.dropzone{border:2px dashed var(--primary);border-radius:var(--radius);padding:32px;text-align:center;cursor:pointer;background:rgba(124,58,237,.05);transition:background .15s}
.dropzone.drag{background:rgba(124,58,237,.15)}
.dropzone i{font-size:34px;color:var(--primary)}
.dropzone p{font-weight:700;margin:8px 0 0}
.dropzone small{color:var(--muted)}
.file-input-hidden{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.preview-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:20px 0}
.preview-row figure{margin:0}
.preview-row figcaption{font-weight:700;margin-bottom:8px}
.preview-row img,.preview-row canvas{display:block;width:100%;height:auto;border:1px solid var(--border);border-radius:12px;background:#fff}
.checker{background:repeating-conic-gradient(#ddd 0% 25%,#fff 0% 50%) 0 0/20px 20px;border-radius:12px}
.checker img{background:transparent}
.controls{display:flex;flex-wrap:wrap;gap:18px;align-items:end;margin:16px 0}
.controls label{font-weight:600;display:flex;flex-direction:column;gap:6px}
.controls label input[type="range"]{width:200px}
.controls select,.controls input[type="number"],.controls input[type="text"]{padding:10px 12px;border-radius:10px;border:1px solid var(--border);background:var(--card);color:var(--text);font-size:15px}
.inline-controls{display:flex;gap:12px;flex-wrap:wrap}
fieldset.controls{border:1px solid var(--border);border-radius:12px}
fieldset.controls label{flex-direction:row;align-items:center}
.file-list{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
.file-list span{background:rgba(124,58,237,.1);border-radius:20px;padding:6px 14px;font-size:14px}
.progress{height:10px;background:var(--border);border-radius:20px;overflow:hidden;margin:14px 0}
.progress .bar{height:100%;width:0;background:linear-gradient(90deg,var(--primary),var(--accent));transition:width .2s}
.msg{color:var(--muted);min-height:20px}
.results-table{width:100%;border-collapse:collapse;margin:14px 0;font-size:15px}
.results-table th,.results-table td{border:1px solid var(--border);padding:10px;text-align:left}
.results-table th{background:rgba(124,58,237,.1)}
.crop-box{max-height:380px;min-height:200px;overflow:hidden;border:1px solid var(--border);border-radius:12px;margin:16px 0;background:#111}
.crop-box img{max-width:100%;display:block}
/* Steps, features */
.steps-grid,.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin-top:24px}
.step-card,.feature-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow)}
.step-num{display:inline-flex;width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff;font-weight:800;align-items:center;justify-content:center;font-size:19px}
.feature-card i{font-size:30px;color:var(--primary)}
.seo-content h3{margin-top:28px}
/* FAQ */
.faq-list{display:grid;gap:12px;margin-top:24px}
.faq-item{background:var(--card);border:1px solid var(--border);border-radius:14px;overflow:hidden}
.faq-q{width:100%;text-align:left;background:none;border:0;padding:18px;font-size:17px;font-weight:700;color:var(--text);cursor:pointer;display:flex;justify-content:space-between;gap:12px}
.faq-a{display:none;padding:0 18px 18px;color:var(--muted)}
.faq-item.open .faq-a{display:block}
/* Footer */
.site-footer{background:#1f2937;color:#d1d5db;padding:48px 0 20px;margin-top:40px}
.site-footer h3{color:#fff}
.site-footer a{color:#c4b5fd}
.footer-grid{display:grid;grid-template-columns:1.2fr .8fr 1.2fr;gap:28px}
.footer-links{list-style:none;padding:0}
.footer-links li{margin:8px 0}
.privacy-note{font-weight:600;color:#fff}
.changelog{font-size:14px;color:#9ca3af}
.copyright{text-align:center;color:#9ca3af;margin-top:32px}
/* Toast */
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(80px);background:#111827;color:#fff;padding:14px 24px;border-radius:12px;box-shadow:var(--shadow);opacity:0;transition:.25s;z-index:100;max-width:90vw;text-align:center}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1}
.toast.ok{background:#15803d}
/* Responsive */
@media(max-width:900px){
  .hero-grid,.preview-row,.footer-grid{grid-template-columns:1fr}
  .hero h1{font-size:32px}
  .main-nav{display:none}
}
@media(max-width:600px){
  .btn{width:100%;justify-content:center}
  .controls label input[type="range"]{width:100%}
}

/* Embossed buttons (new tools): raised 3D look on top of the brand gradient */
.btn-emboss{box-shadow:0 5px 0 rgba(0,0,0,.28),0 12px 20px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.55)}
.btn-emboss:hover{transform:translateY(-2px);box-shadow:0 7px 0 rgba(0,0,0,.28),0 14px 22px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.55)}
.btn-emboss:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(0,0,0,.28),0 5px 10px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.55)}
.btn-emboss:disabled{box-shadow:none}

/* Multi-page: tool cards are now links to each tool's own page */
a.tool-card{text-decoration:none;color:inherit}