/*
====================================================
Project Name	: © EntropyX - Secure Password Meter & Generator
Version		: 1.7
Developed	: 20 August 2026
Author		: Abednego Dinarim Siregar / Microsoft 365 Copilot with GPT 5.6 Deep Think.
Lisensi		: You may not copy, steal, modify, reverse engineer, redistribute, sell, or use any part of the application, code, design, brand, or included materials without the owner’s written permission, except where expressly permitted by applicable law.
====================================================
*/

:root{--bg:#fff8ef;--panel:#fff;--text:#24233a;--muted:#6e6b82;--cyan:#1266f1;--violet:#7c4dff;--green:#19a974;--amber:#ffae19;--red:#ef476f;--line:#dfe4f1;--shadow:0 18px 50px rgba(52,46,86,.13);--blob:#ff7a45}
html[data-theme="dark"]{--bg:#17162a;--panel:#24213a;--text:#f7f5ff;--muted:#b7b2c9;--cyan:#68a4ff;--violet:#b597ff;--green:#42dc9d;--amber:#ffc85c;--red:#ff7692;--line:#3b3654;--shadow:0 20px 55px rgba(0,0,0,.28);--blob:#ff8858}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-height:100vh;background:var(--bg);color:var(--text);font:500 16px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif;overflow-x:hidden;transition:.25s;background-image:radial-gradient(circle at 6% 12%,color-mix(in srgb,var(--blob) 18%,transparent) 0 90px,transparent 92px),radial-gradient(circle at 94% 25%,color-mix(in srgb,var(--violet) 15%,transparent) 0 125px,transparent 127px)}
body:before,body:after{content:"";position:fixed;z-index:-1;border-radius:50%;filter:blur(1px);pointer-events:none;animation:float 7s ease-in-out infinite}body:before{width:120px;height:120px;background:color-mix(in srgb,var(--amber) 24%,transparent);left:-30px;bottom:8%}body:after{width:95px;height:95px;background:color-mix(in srgb,var(--cyan) 18%,transparent);right:3%;bottom:5%;animation-delay:-3s}.shell{width:min(1160px,calc(100% - 30px));margin:auto;padding:24px 0 46px}header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:32px}.brand{display:flex;align-items:center;gap:12px}.orb{width:46px;height:46px;border-radius:15px 15px 19px 12px;background:linear-gradient(145deg,var(--blob),#ffb52e);box-shadow:0 9px 22px color-mix(in srgb,var(--blob) 28%,transparent);position:relative;transform:rotate(-8deg)}.orb:before,.orb:after{content:"";position:absolute;background:#fff;border-radius:50%}.orb:before{width:9px;height:12px;left:12px;top:13px;box-shadow:17px 0 0 #fff}.orb:after{width:18px;height:8px;left:14px;bottom:9px;border-radius:0 0 18px 18px}.brand strong{font-size:1.3rem;letter-spacing:.04em}.brand small{display:block;color:var(--muted)}.tools{display:flex;gap:8px}.iconbtn,button,.select{min-height:42px;border:1px solid var(--line);border-radius:14px;background:var(--panel);color:var(--text);padding:0 14px;font:700 .9rem/1 system-ui,-apple-system,"Segoe UI",sans-serif;cursor:pointer;box-shadow:0 5px 14px rgba(52,46,86,.06);transition:.2s}.iconbtn:hover,button:hover,.select:hover{transform:translateY(-2px);border-color:var(--violet);box-shadow:0 10px 22px color-mix(in srgb,var(--violet) 14%,transparent)}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid color-mix(in srgb,var(--cyan) 35%,transparent);outline-offset:2px}.hero{position:relative;display:block;min-height:330px;margin:46px 0 34px;padding:34px 340px 36px 0}.hero:after{content:"🔐";position:absolute;right:24px;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:250px;height:210px;border-radius:48% 52% 55% 45%/55% 40% 60% 45%;background:linear-gradient(145deg,#ffd75e,var(--blob));font-size:6.5rem;box-shadow:var(--shadow);animation:heroFloat 5s ease-in-out infinite}.eyebrow{display:inline-flex;width:auto;color:var(--violet);background:color-mix(in srgb,var(--violet) 10%,transparent);border-radius:999px;padding:7px 12px;font-size:.74rem;font-weight:800;letter-spacing:.12em}.hero h1{max-width:760px;font-size:clamp(2.35rem,5vw,4.75rem);line-height:1.04;margin:16px 0 18px;letter-spacing:-.035em}.hero h1 span{color:var(--blob);position:relative}.hero p{max-width:700px;margin:0 0 18px;color:var(--muted);font-size:1.04rem}.privacy{display:inline-flex;align-items:center;gap:8px;background:color-mix(in srgb,var(--green) 10%,transparent);color:var(--green);border-radius:999px;padding:8px 13px;font-weight:750}.dot{width:9px;height:9px;background:currentColor;border-radius:50%}.grid{display:grid;grid-template-columns:1.06fr .94fr;gap:20px}.card{position:relative;overflow:hidden;background:var(--panel);border:1px solid var(--line);border-radius:28px;padding:24px;box-shadow:var(--shadow)}.card:before{content:"";position:absolute;width:95px;height:95px;border-radius:50%;right:-42px;top:-45px;background:color-mix(in srgb,var(--amber) 24%,transparent)}.card h2{font-size:1rem;margin:0 0 19px;color:var(--violet);letter-spacing:.06em}.pwrow{display:grid;grid-template-columns:1fr auto auto;gap:9px}.inputwrap{position:relative}.inputwrap input{width:100%;height:56px;border:2px solid var(--line);border-radius:16px;background:var(--bg);color:var(--text);padding:0 48px 0 15px;font:700 1rem ui-monospace,Consolas,monospace}.inputwrap input:focus{border-color:var(--cyan)}.eye{position:absolute;right:7px;top:7px;width:40px;border:0;background:transparent;box-shadow:none}.primary{border:0;background:linear-gradient(135deg,var(--blob),#ffb52e);color:#2c1731;font-weight:850}.meter{height:13px;background:var(--line);border-radius:999px;overflow:hidden;margin:20px 0 13px}.meter>i{display:block;width:0;height:100%;border-radius:999px;background:var(--red);transition:.35s}.resultline{display:flex;justify-content:space-between}.strength{font-size:1.45rem;font-weight:900}.score{color:var(--muted);font-size:.85rem}.analogy{min-height:48px;color:var(--muted);background:var(--bg);border-radius:15px;padding:12px 14px}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.stat{padding:13px;border:1px solid var(--line);border-radius:17px;background:var(--panel)}.stat b{display:block;font-size:1.03rem}.stat span{font-size:.75rem;color:var(--muted)}.checks{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:11px}.check{padding:9px 5px;text-align:center;border:1px solid var(--line);border-radius:12px;color:var(--muted);font-size:.78rem;font-weight:800}.check.on{color:var(--green);border-color:var(--green);background:color-mix(in srgb,var(--green) 8%,transparent)}.tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:5px;background:var(--bg);border-radius:16px;margin-bottom:18px}.tab{border:0;box-shadow:none;background:transparent}.tab.active{background:var(--panel);color:var(--violet);box-shadow:0 5px 14px rgba(52,46,86,.09)}.panel[hidden]{display:none}.control{margin:17px 0}.controlhead{display:flex;justify-content:space-between;margin-bottom:8px}.controlhead span:last-child{color:var(--violet);font-family:ui-monospace,monospace;font-weight:900}input[type=range]{width:100%;accent-color:var(--blob)}.options{display:grid;grid-template-columns:1fr 1fr;gap:9px}.option{display:flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:15px;padding:11px;background:var(--bg);font-size:.87rem;font-weight:700}.option input{width:17px;height:17px;accent-color:var(--blob)}.generate{width:100%;height:51px;margin-top:18px}.note{font-size:.76rem;color:var(--muted);margin:14px 0 0}.pinmsg{padding:18px;border:2px dashed var(--violet);border-radius:16px;color:var(--muted);margin-top:16px}.toast{position:fixed;z-index:10;left:50%;bottom:22px;translate:-50% 110px;background:#27243d;color:#fff;padding:12px 18px;border-radius:999px;box-shadow:var(--shadow);transition:.25s}.toast.show{translate:-50% 0}footer{text-align:center;color:var(--muted);font-size:.78rem;margin-top:25px}@keyframes float{50%{transform:translateY(-10px) rotate(2deg)}}@keyframes heroFloat{0%,100%{transform:translateY(-50%) rotate(-2deg)}50%{transform:translateY(calc(-50% - 10px)) rotate(2deg)}}@media(max-width:850px){.hero{min-height:auto;margin:30px 0;padding:26px 0}.hero:after{display:none}.grid{grid-template-columns:1fr}.stats{grid-template-columns:1fr 1fr}}@media(max-width:560px){.shell{width:calc(100% - 18px);padding-top:12px}header{align-items:flex-start}.brand small{display:none}.tools{flex-direction:column}.pwrow{grid-template-columns:1fr 1fr}.inputwrap{grid-column:1/-1}.stats{grid-template-columns:1fr}.checks{grid-template-columns:1fr 1fr}.hero h1{font-size:clamp(2.25rem,12vw,3.4rem)}.card{padding:17px;border-radius:22px}}
/* Additional Lemon motion layer: decorative only, no layout or feature changes. */
.brand{animation:lemonDrop .65s cubic-bezier(.2,.8,.2,1) both}.tools{animation:lemonDrop .65s .08s cubic-bezier(.2,.8,.2,1) both}.eyebrow{animation:lemonPop .7s .12s cubic-bezier(.2,.9,.2,1.2) both}.hero h1{animation:lemonRise .75s .18s both}.hero p,.privacy{animation:lemonRise .75s .28s both}.privacy .dot{animation:lemonPulse 1.8s ease-in-out infinite}.grid .card{animation:lemonCard .72s .32s cubic-bezier(.2,.8,.2,1) both}.grid .card:nth-child(2){animation-delay:.43s}.card:before{animation:lemonBubble 5s ease-in-out infinite}.orb{animation:lemonWiggle 4.8s ease-in-out infinite}.hero h1 span:after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:4px;border-radius:99px;background:linear-gradient(90deg,transparent,var(--amber),var(--blob),transparent);transform-origin:left;animation:lemonUnderline 1s .55s both}.primary{position:relative;overflow:hidden}.primary:after{content:"";position:absolute;inset:-60% auto -60% -35%;width:22%;transform:rotate(18deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);animation:lemonShine 4.2s 1.1s ease-in-out infinite}.meter>i{position:relative;overflow:hidden}.meter>i:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);translate:-100% 0;animation:lemonMeter 2.2s ease-in-out infinite}.option:hover,.check:hover,.stat:hover{transform:translateY(-3px);box-shadow:0 9px 18px color-mix(in srgb,var(--violet) 10%,transparent);transition:transform .2s,box-shadow .2s}.toast.show{animation:lemonToast .35s cubic-bezier(.2,.9,.2,1.2)}
@keyframes lemonDrop{from{opacity:0;transform:translateY(-18px)}to{opacity:1;transform:none}}@keyframes lemonRise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}@keyframes lemonPop{from{opacity:0;transform:scale(.82)}to{opacity:1;transform:scale(1)}}@keyframes lemonCard{from{opacity:0;transform:translateY(30px) scale(.98)}to{opacity:1;transform:none}}@keyframes lemonPulse{50%{scale:1.45;box-shadow:0 0 0 8px color-mix(in srgb,var(--green) 12%,transparent)}}@keyframes lemonBubble{50%{transform:translate(-10px,12px) scale(1.12)}}@keyframes lemonWiggle{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(4deg) translateY(-4px)}}@keyframes lemonUnderline{from{transform:scaleX(0)}to{transform:scaleX(1)}}@keyframes lemonShine{0%,65%{left:-35%}100%{left:125%}}@keyframes lemonMeter{0%,30%{translate:-100% 0}80%,100%{translate:100% 0}}@keyframes lemonToast{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
@media(max-width:560px){.option:hover,.check:hover,.stat:hover{transform:none}.hero h1 span:after{height:3px;bottom:-3px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}


.entropyx-copyright{margin:36px auto 0;padding:22px 16px;text-align:center;font-family:inherit;color:inherit;opacity:.82;font-size:.82rem;line-height:1.6}
.entropyx-copyright__links{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 20px;margin-top:7px}
.entropyx-copyright a{color:inherit;text-decoration:none;border-bottom:1px solid transparent;transition:color .2s ease,border-color .2s ease}
.entropyx-copyright a:hover,.entropyx-copyright a:focus-visible{color:var(--neon-primary,var(--neon-cyan,var(--primary,var(--cyan,var(--violet,currentColor)))));border-bottom-color:currentColor;outline:none}
.brand-home{color:inherit;text-decoration:none;border-radius:14px}.brand-home:focus-visible{outline:3px solid color-mix(in srgb,var(--cyan) 35%,transparent);outline-offset:3px}.meter>i.meter-0{width:0}.meter>i.meter-14{width:14%;background:var(--red)}.meter>i.meter-30{width:30%;background:var(--red)}.meter>i.meter-55{width:55%;background:var(--amber)}.meter>i.meter-78{width:78%;background:var(--green)}.meter>i.meter-100{width:100%;background:var(--cyan)}