/* Word tiles: the phrase comes first, settings follow */
.passphrase-generator-page{--a:#9a62da;background:radial-gradient(ellipse 70% 200px at 50% 0,#2c124a,transparent),#18131d;border-radius:18px}
.passphrase-generator-page>h1{text-align:center;justify-content:center;font-size:clamp(1.9rem,3.6vw,2.8rem)}.passphrase-generator-page>p{text-align:center;max-width:62ch;margin-inline:auto;color:#cbbfd8}
.passphrase-generator-page .generator-workspace{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:18px;align-items:start}
.passphrase-generator-page .generator-results{order:-1;position:sticky;top:90px;background:#190f24;border:1px solid #4b227a;border-radius:16px}
.passphrase-generator-page .generator-settings{background:#1e1725;border:1px solid #423451;border-radius:16px}
.passphrase-generator-page #generateBtn{background:linear-gradient(135deg,#ac7de1,#7d35d0);color:#160925;border:0;font-weight:800;font-size:1.05rem}
.passphrase-generator-page #passphraseList{font:600 1.08rem/1.7 ui-monospace,Consolas,monospace;color:#d4bdef}.passphrase-generator-page #passphraseList>*{background:#100a17;border:1px dashed #582c8a;border-radius:10px;padding:10px 12px;margin-bottom:8px;overflow-wrap:anywhere}
.passphrase-generator-page .meter-bar{height:12px;border-radius:3px}
@media(max-width:900px){.passphrase-generator-page .generator-workspace{grid-template-columns:minmax(0,1fr)}.passphrase-generator-page .generator-results{position:static}}
.passphrase-generator-page #generateBtn{background:linear-gradient(135deg,#ac7de1,#7d35d0)!important;color:#160925!important;border:0!important}

/* Recommended pass: the result is the first thing you see */
.passphrase-generator-page{padding:22px}
.passphrase-generator-page h1::before{display:none!important}
.passphrase-generator-page>p:first-of-type{text-align:left;margin-left:0}
.passphrase-generator-page .generator-results{grid-template-columns:minmax(0,1fr) minmax(220px,300px);padding:20px;gap:14px 20px}
.passphrase-generator-page .output{order:-2;grid-column:1;grid-row:1}
.passphrase-generator-page .entropy-meter{grid-column:2;grid-row:1 / span 3}
.passphrase-generator-page .generator-actions{grid-column:1;grid-row:2;display:flex;flex-wrap:wrap;gap:10px}
.passphrase-generator-page .copy-controls{grid-column:1;grid-row:3;display:flex;flex-wrap:wrap;gap:8px}
.passphrase-generator-page .copy-controls button{padding:7px 12px;font-size:.88rem}
.passphrase-generator-page #passphraseList{margin-top:8px}
.passphrase-generator-page input{font:600 clamp(1.05rem,2vw,1.5rem)/1.4 ui-monospace,Consolas,monospace;padding:14px;background:#08050d;color:#f0e6fb;border:1px solid #5b3a85;border-radius:10px;width:100%;min-width:0}
.passphrase-generator-page .generator-settings{margin-top:2px}
@media(max-width:760px){.passphrase-generator-page .generator-results{grid-template-columns:minmax(0,1fr)}.passphrase-generator-page .entropy-meter{grid-column:1;grid-row:auto}.passphrase-generator-page .output,.passphrase-generator-page .generator-actions,.passphrase-generator-page .copy-controls{grid-row:auto}}

.passphrase-generator-page .generator-workspace{display:flex!important;flex-direction:column!important;gap:16px}
.passphrase-generator-page .generator-results,.passphrase-generator-page .generator-settings{width:100%!important;max-width:none!important;flex:none!important}
.passphrase-generator-page .generator-results{order:-1!important;display:grid!important}
.passphrase-generator-page .output label{display:flex;align-items:center;gap:8px;text-align:left;justify-content:flex-start}
.passphrase-generator-page .output input[type=checkbox]{width:auto;flex:none}
.passphrase-generator-page #passphraseList input{flex:1 1 auto}
.passphrase-generator-page .checkboxes label{display:flex!important;align-items:center;gap:8px;text-align:left;justify-content:flex-start}
.passphrase-generator-page .checkboxes input[type=checkbox]{width:auto;flex:none;margin:0}
.passphrase-generator-page #passphraseList button{white-space:nowrap;flex:none;width:auto}
.passphrase-generator-page h1{justify-content:flex-start;text-align:left}

.passphrase-generator-page [hidden]{display:none!important}
.passphrase-generator-page>h1,.passphrase-generator-page h1{justify-content:flex-start!important;text-align:left}
.passphrase-generator-page fieldset{position:relative;margin:0;padding:16px!important;border:1px solid #4c3c5f!important;border-radius:12px;background:#1c1427}
.passphrase-generator-page legend{float:left;width:100%;margin:0 0 10px;padding:0;font-weight:700;color:#e8dcf6}.passphrase-generator-page legend+*{clear:both}
.passphrase-generator-page .controls{align-items:start}
.passphrase-generator-page .settings-note label{display:flex;align-items:center;gap:8px;text-align:left}.passphrase-generator-page .settings-note input{width:auto;flex:none;margin:0}
.passphrase-generator-page .generator-actions #resetBtn{order:2}
.passphrase-generator-page #generateBtn{color:#160a26;flex:0 1 280px}
.passphrase-generator-page #copyBtn,.passphrase-generator-page #clearBtn{display:none}
.pp-why{margin-top:10px;font-size:.88rem;color:#c7bdd8}.pp-why summary{cursor:pointer;font-weight:600}
.passphrase-generator-page .checkboxes label[hidden],.passphrase-generator-page .checkboxes input[hidden]{display:none!important}
.passphrase-generator-page .generator-results{position:static!important}