/*
====================================================
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-void:#05070d;
  --bg-panel:rgba(13,18,32,.72);
  --bg-panel-solid:#0d1220;
  --border-soft:rgba(0,240,255,.14);
  --neon-cyan:#00f0ff;
  --neon-violet:#b026ff;
  --neon-magenta:#ff2bd6;
  --neon-green:#39ff14;
  --neon-amber:#ffb84d;
  --neon-red:#ff3355;
  --text-primary:#e8f7ff;
  --text-dim:#8a9bb3;
  --field-bg:#080b14;
  --shadow-glow:0 0 24px rgba(0,240,255,.12);
  --radius-lg:18px;
  --radius-md:12px;
  --mono:ui-monospace,'Cascadia Code','Cascadia Mono','SFMono-Regular',Consolas,'Liberation Mono',Menlo,monospace;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}
html[data-theme="light"]{
  --bg-void:#eef2f9;
  --bg-panel:rgba(255,255,255,.86);
  --bg-panel-solid:#ffffff;
  --border-soft:rgba(90,60,200,.16);
  --neon-cyan:#0091a8;
  --neon-violet:#7a1fd6;
  --neon-magenta:#c8189e;
  --neon-green:#0d8a3c;
  --neon-amber:#a86400;
  --neon-red:#c81e3a;
  --text-primary:#0b1220;
  --text-dim:#4c5872;
  --field-bg:#f5f7fc;
  --shadow-glow:0 0 24px rgba(122,31,214,.08);
}
*,*::before,*::after{box-sizing:border-box;}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important;}
}
html,body{height:100%;}
body{
  margin:0;
  min-height:100vh;
  background:var(--bg-void);
  color:var(--text-primary);
  font-family:var(--sans);
  line-height:1.5;
  overflow-x:hidden;
  transition:background .4s ease,color .4s ease;
  position:relative;
}
body::before{
  content:"";
  position:fixed;inset:0;
  background-image:
    linear-gradient(var(--border-soft) 1px,transparent 1px),
    linear-gradient(90deg,var(--border-soft) 1px,transparent 1px);
  background-size:42px 42px;
  opacity:.35;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 40%,transparent 100%);
  pointer-events:none;
  z-index:0;
}
body::after{
  content:"";
  position:fixed;inset:-20% -20% auto -20%;height:60vh;
  background:radial-gradient(closest-side,rgba(0,240,255,.10),transparent 70%),
             radial-gradient(closest-side,rgba(176,38,255,.08),transparent 70%);
  background-position:10% 0%,90% 10%;
  background-repeat:no-repeat;
  background-size:60% 100%,55% 100%;
  filter:blur(10px);
  pointer-events:none;
  z-index:0;
  animation:drift 22s ease-in-out infinite alternate;
}
@keyframes drift{from{transform:translateY(0) scale(1);}to{transform:translateY(3%) scale(1.03);}}

.wrap{position:relative;z-index:1;max-width:1180px;margin:0 auto;padding:20px 20px 60px;}

/* ---------- Header ---------- */
header.top{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:18px 4px 26px;}
.brand{display:flex;align-items:center;gap:12px;}
.brand-mark{
  width:42px;height:42px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,rgba(0,240,255,.16),rgba(176,38,255,.16));
  border:1px solid var(--border-soft);
  box-shadow:var(--shadow-glow);
}
.brand-name{
  font-family:var(--sans);font-weight:800;font-size:22px;
  letter-spacing:.14em;text-transform:uppercase;margin:0;
  background:linear-gradient(90deg,var(--neon-cyan),var(--neon-violet));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.brand-tag{margin:0;font-size:12px;color:var(--text-dim);letter-spacing:.03em;}
.top-controls{display:flex;align-items:center;gap:10px;}
.icon-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:40px;padding:0 14px;border-radius:999px;
  background:var(--bg-panel);border:1px solid var(--border-soft);
  color:var(--text-primary);cursor:pointer;font:inherit;font-size:12.5px;font-weight:600;
  letter-spacing:.03em;transition:box-shadow .2s ease,transform .2s ease,border-color .2s ease;
}
.icon-btn:hover{box-shadow:var(--shadow-glow);border-color:var(--neon-cyan);}
.icon-btn:active{transform:scale(.96);}
.icon-btn svg{width:16px;height:16px;flex:none;}
.icon-btn:focus-visible,button:focus-visible,input:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--neon-cyan);outline-offset:2px;
}

/* ---------- Layout ---------- */
main{display:grid;grid-template-columns:1fr;gap:22px;}
@media(min-width:940px){main{grid-template-columns:0.95fr 1.05fr;align-items:start;}}

.card{
  background:var(--bg-panel);
  border:1px solid var(--border-soft);
  border-radius:var(--radius-lg);
  padding:24px;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 10px 40px rgba(0,0,0,.28);
  position:relative;
  overflow:hidden;
}
.card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--neon-cyan),transparent);
  opacity:.6;
}
.card h2{
  margin:0 0 18px;font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--text-dim);
  display:flex;align-items:center;gap:8px;
}
.card h2 svg{width:15px;height:15px;color:var(--neon-cyan);}

/* ---------- Password field ---------- */
.field-row{display:flex;gap:8px;align-items:stretch;}
.field-shell{
  flex:1;display:flex;align-items:center;gap:8px;
  background:var(--field-bg);border:1px solid var(--border-soft);
  border-radius:var(--radius-md);padding:0 6px 0 14px;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.field-shell:focus-within{border-color:var(--neon-cyan);box-shadow:var(--shadow-glow);}
#pwField{
  flex:1;border:0;background:transparent;color:var(--text-primary);
  font-family:var(--mono);font-size:16.5px;letter-spacing:.02em;
  padding:14px 4px;min-width:0;
}
#pwField::placeholder{color:var(--text-dim);font-family:var(--sans);}
.field-btn{
  flex:none;width:36px;height:36px;border-radius:8px;border:0;background:transparent;
  color:var(--text-dim);cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:color .2s ease,background .2s ease;
}
.field-btn:hover{color:var(--neon-cyan);background:rgba(0,240,255,.08);}
.field-btn svg{width:18px;height:18px;}
#genRefreshBtn{
  flex:none;width:52px;border-radius:var(--radius-md);border:1px solid var(--border-soft);
  background:linear-gradient(135deg,rgba(0,240,255,.14),rgba(176,38,255,.14));
  color:var(--neon-cyan);cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:transform .15s ease,box-shadow .2s ease;
}
#genRefreshBtn:hover{box-shadow:var(--shadow-glow);}
#genRefreshBtn:active svg{transform:rotate(180deg);}
#genRefreshBtn svg{width:20px;height:20px;transition:transform .35s ease;}

.copy-row{margin-top:10px;display:flex;justify-content:flex-end;}
#copyBtn{
  display:inline-flex;align-items:center;gap:7px;background:none;border:1px solid var(--border-soft);
  color:var(--text-dim);padding:8px 14px;border-radius:999px;font:inherit;font-size:12.5px;font-weight:600;
  cursor:pointer;transition:all .2s ease;
}
#copyBtn:hover{color:var(--neon-cyan);border-color:var(--neon-cyan);}
#copyBtn svg{width:14px;height:14px;}
.toast{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);
  background:var(--bg-panel-solid);border:1px solid var(--neon-cyan);color:var(--text-primary);
  padding:10px 20px;border-radius:999px;font-size:13px;font-weight:600;box-shadow:var(--shadow-glow);
  opacity:0;pointer-events:none;transition:opacity .25s ease,transform .25s ease;z-index:50;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* ---------- Meter visuals ---------- */
.meter-body{margin-top:22px;display:grid;gap:20px;}
.gauge-row{display:flex;align-items:center;gap:20px;flex-wrap:wrap;}
.gauge{flex:none;position:relative;width:118px;height:118px;}
.gauge svg{width:100%;height:100%;transform:rotate(-90deg);}
.gauge circle{fill:none;stroke-width:9;}
.gauge .track{stroke:var(--border-soft);}
.gauge .fill{
  stroke:var(--neon-red);stroke-linecap:round;
  stroke-dasharray:301.6;stroke-dashoffset:301.6;
  transition:stroke-dashoffset .6s cubic-bezier(.4,0,.2,1),stroke .6s ease;
  filter:drop-shadow(0 0 6px currentColor);
}
.gauge-label{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.gauge-label .score-word{font-size:11px;font-weight:700;letter-spacing:.05em;text-align:center;line-height:1.2;padding:0 8px;}
.gauge-label .score-bits{font-family:var(--mono);font-size:10px;color:var(--text-dim);margin-top:2px;}
.gauge.rainbow .fill{stroke:url(#rainbowGrad);animation:pulseGlow 1.6s ease-in-out infinite;}
@keyframes pulseGlow{0%,100%{filter:drop-shadow(0 0 6px rgba(255,255,255,.5));}50%{filter:drop-shadow(0 0 16px rgba(255,255,255,.9));}}

.meter-facts{flex:1;min-width:200px;display:grid;gap:10px;}
.fact-line{display:flex;justify-content:space-between;gap:10px;font-size:13px;}
.fact-line .k{color:var(--text-dim);}
.fact-line .v{font-family:var(--mono);font-weight:600;}

.crack-line{
  display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:var(--radius-md);
  background:rgba(0,240,255,.05);border:1px solid var(--border-soft);
}
.crack-line svg{width:18px;height:18px;color:var(--neon-cyan);flex:none;}
.crack-line .crack-val{font-family:var(--mono);font-weight:700;}

.chips{display:flex;gap:8px;flex-wrap:wrap;}
.chip{
  display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:999px;
  font-size:11.5px;font-weight:600;border:1px solid var(--border-soft);color:var(--text-dim);
  transition:all .2s ease;
}
.chip.on{color:var(--neon-green);border-color:var(--neon-green);background:rgba(57,255,20,.06);}
.chip .dot{width:6px;height:6px;border-radius:50%;background:currentColor;}

.metaphor{
  font-size:13.5px;line-height:1.55;padding:14px 16px;border-radius:var(--radius-md);
  border-left:3px solid var(--neon-cyan);background:rgba(0,240,255,.04);color:var(--text-primary);
}
.dict-warn{
  display:none;font-size:12.5px;line-height:1.5;padding:12px 14px;border-radius:var(--radius-md);
  border-left:3px solid var(--neon-amber);background:rgba(255,184,77,.08);color:var(--text-primary);
  align-items:flex-start;gap:8px;
}
.dict-warn.show{display:flex;}
.dict-warn svg{width:16px;height:16px;color:var(--neon-amber);flex:none;margin-top:1px;}

.pin-note{
  display:none;font-size:12.5px;padding:12px 14px;border-radius:var(--radius-md);
  background:rgba(176,38,255,.06);border:1px solid var(--border-soft);color:var(--text-dim);
}
.pin-note.show{display:block;}

/* ---------- Generator tabs ---------- */
.tabs{display:flex;gap:6px;background:var(--field-bg);border:1px solid var(--border-soft);padding:5px;border-radius:999px;margin-bottom:20px;}
.tab-btn{
  flex:1;border:0;background:transparent;color:var(--text-dim);padding:9px 6px;border-radius:999px;
  font:inherit;font-size:12.5px;font-weight:700;letter-spacing:.03em;cursor:pointer;transition:all .25s ease;
}
.tab-btn.active{background:linear-gradient(135deg,var(--neon-cyan),var(--neon-violet));color:#04101a;box-shadow:var(--shadow-glow);}
html[data-theme="light"] .tab-btn.active{color:#fff;}

.mode-panel{display:none;}
.mode-panel.active{display:grid;gap:20px;animation:fadeIn .3s ease;}
@keyframes fadeIn{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:translateY(0);}}

.control{display:grid;gap:8px;}
.control-head{display:flex;justify-content:space-between;align-items:baseline;}
.control-head label{font-size:12.5px;font-weight:700;letter-spacing:.03em;color:var(--text-primary);}
.control-head .val{font-family:var(--mono);font-size:12.5px;color:var(--neon-cyan);font-weight:700;}

input[type="range"]{
  -webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:999px;
  background:linear-gradient(90deg,var(--neon-cyan),var(--neon-violet));
  outline:none;cursor:pointer;
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;width:20px;height:20px;border-radius:50%;
  background:var(--bg-panel-solid);border:3px solid var(--neon-cyan);box-shadow:0 0 10px rgba(0,240,255,.6);cursor:pointer;
}
input[type="range"]::-moz-range-thumb{
  width:20px;height:20px;border-radius:50%;background:var(--bg-panel-solid);
  border:3px solid var(--neon-cyan);box-shadow:0 0 10px rgba(0,240,255,.6);cursor:pointer;
}

.check-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;}
.check-item{
  display:flex;align-items:center;gap:9px;padding:11px 12px;border-radius:var(--radius-md);
  background:var(--field-bg);border:1px solid var(--border-soft);cursor:pointer;font-size:13px;font-weight:600;
  transition:border-color .2s ease;user-select:none;
}
.check-item:has(input:checked){border-color:var(--neon-cyan);color:var(--neon-cyan);}
.check-item input{accent-color:var(--neon-cyan);width:16px;height:16px;flex:none;}
.check-item .sample{margin-left:auto;font-family:var(--mono);color:var(--text-dim);font-size:11px;}

.toggle-row{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-radius:var(--radius-md);background:var(--field-bg);border:1px solid var(--border-soft);}
.toggle-row span{font-size:13px;font-weight:600;}
.switch{position:relative;display:inline-block;width:42px;height:24px;flex:none;}
.switch input{opacity:0;width:0;height:0;}
.slider-pill{position:absolute;inset:0;background:var(--border-soft);border-radius:999px;cursor:pointer;transition:.25s;}
.slider-pill::before{content:"";position:absolute;height:18px;width:18px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.25s;}
.switch input:checked + .slider-pill{background:linear-gradient(90deg,var(--neon-cyan),var(--neon-violet));}
.switch input:checked + .slider-pill::before{transform:translateX(18px);}

.warn-inline{font-size:12px;color:var(--neon-amber);display:none;}
.warn-inline.show{display:block;}

footer.site-footer{margin-top:36px;text-align:center;color:var(--text-dim);font-size:12px;line-height:1.7;}
footer.site-footer svg{width:13px;height:13px;vertical-align:-2px;margin-right:4px;color:var(--neon-green);}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

@media(max-width:520px){
  .check-grid{grid-template-columns:1fr;}
  .brand-name{font-size:18px;}
  .card{padding:18px;}
}

/* Feature UX-SE-001..008: compact iPhone SE layout, CSS-only */
@media(max-width:390px){html{font-size:14px}body{overflow-x:hidden}.wrap{width:100%;padding:8px 9px calc(28px + env(safe-area-inset-bottom))}header.top{padding:7px 1px 11px;gap:7px;flex-wrap:nowrap}.brand{gap:7px;min-width:0}.brand-mark{width:34px;height:34px;border-radius:8px}.brand-name{font-size:15px;letter-spacing:.09em}.brand-tag{display:block;max-width:150px;font-size:9px;white-space:normal;line-height:1.2}.top-controls{gap:5px}.icon-btn{height:34px;padding:0 9px;font-size:11px}.icon-btn svg{width:14px;height:14px}main{gap:10px}.card{padding:13px;border-radius:14px}.card h2{margin-bottom:11px;font-size:11px}.field-row{gap:5px}.field-shell{padding-left:9px}#pwField{font-size:16px;padding:11px 2px}.field-btn{width:32px;height:32px}#genRefreshBtn{width:42px}.copy-row{margin-top:7px}.meter-body{margin-top:13px;gap:12px}.gauge-row{gap:12px;align-items:center}.gauge{width:88px;height:88px}.meter-facts{min-width:0;gap:7px}.fact-line{font-size:11px}.chips{gap:5px}.chip{padding:5px 7px;font-size:9.5px}.crack-line{padding:9px 10px;gap:7px;font-size:11px;flex-wrap:wrap}.metaphor,.dict-warn,.pin-note{padding:10px 11px;font-size:11px}.tabs{margin-bottom:13px}.tab-btn{padding:8px 3px;font-size:10.5px}.mode-panel.active{gap:13px}.check-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.check-item{padding:9px 8px;font-size:10.5px;min-width:0}.check-item .sample{font-size:9px}.toggle-row{padding:10px;font-size:11px}footer.site-footer{margin-top:20px;font-size:10px}.entropyx-copyright{margin-top:18px!important;padding:15px 7px!important}.entropyx-copyright__links{gap:6px 12px!important}}
@media(max-width:340px){.brand-tag{display:none}.brand-name{font-size:14px}.icon-btn span{display:none}.icon-btn{width:34px;padding:0}.gauge-row{align-items:flex-start}.gauge{width:78px;height:78px}}

.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}

/* External-file helpers: removes all inline style dependencies. */
.svg-defs{position:absolute;width:0;height:0;overflow:hidden}
.is-hidden{display:none!important}
.is-visually-hidden{visibility:hidden!important}
.char-types-label{font-size:12.5px;font-weight:700}
.brand-link{color:inherit;text-decoration:none;border-radius:12px}
.brand-link:focus-visible{outline:2px solid var(--neon-cyan);outline-offset:4px}
.copy-buffer{position:fixed;opacity:0;pointer-events:none;left:-9999px}
.gauge .fill.score-0,.gauge .fill.score-1{stroke:var(--neon-red)}
.gauge .fill.score-2{stroke:var(--neon-amber)}
.gauge .fill.score-3{stroke:var(--neon-cyan)}
.gauge .fill.score-4{stroke:var(--neon-green)}