:root {
  color-scheme: dark;
  --bg: #08070b;
  --panel: rgba(255,255,255,.075);
  --line: rgba(255,255,255,.14);
  --text: #f7f3ea;
  --muted: #b9b0a2;
  --gold: #d7af59;
  --gold2: #ffdf8a;
  --danger: #ff7676;
  --ok: #80f0b0;
}
* { box-sizing: border-box; }
html, body { max-width: 100%; overflow-x: hidden; }
[hidden] { display: none !important; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 15% 15%, rgba(215,175,89,.24), transparent 32rem),
    radial-gradient(circle at 80% 20%, rgba(120,88,255,.18), transparent 28rem),
    linear-gradient(135deg, #050507, #101018 60%, #090807);
}
.shell { width: min(1060px, calc(100% - 32px)); margin: 0 auto; padding: 32px 0; }
.hero { display: grid; grid-template-columns: 1fr; gap: 14px; align-items: end; margin-bottom: 20px; }
.kicker { color: var(--gold2); text-transform: uppercase; letter-spacing: .18em; font-size: 12px; font-weight: 800; }
h1 { font-size: clamp(30px, 4.2vw, 48px); line-height: 1; margin: 0 0 10px; max-width: 760px; }
.muted { color: var(--muted); font-size: 16px; line-height: 1.45; max-width: 760px; }
.security-card, .panel {
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.105), rgba(255,255,255,.055));
  box-shadow: 0 24px 80px rgba(0,0,0,.35);
  backdrop-filter: blur(18px);
  border-radius: 28px;
}
.security-card { padding: 24px; }
.security-card span, .security-card small { display:block; color: var(--muted); }
.security-card strong { display:block; margin: 10px 0; color: var(--gold2); font-size: 24px; }
.panel { padding: 24px; overflow: hidden; display: flex; flex-direction: column; }
.tabs { display:flex; gap:10px; margin-bottom: 22px; }
.tab, button, input, select, textarea { font: inherit; }
.tab, .advanced button {
  border: 1px solid var(--line); background: rgba(255,255,255,.06); color: var(--text);
  border-radius: 999px; padding: 10px 14px; cursor: pointer;
}
.tab.active { background: linear-gradient(135deg, var(--gold), var(--gold2)); color: #15110a; font-weight: 800; }
form { display: grid; gap: 18px; overflow: visible; min-height: 0; padding-right: 0; }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
label { display: grid; gap: 8px; color: var(--muted); font-weight: 700; }
input, select, textarea {
  width: 100%; border: 1px solid var(--line); border-radius: 18px; padding: 14px 15px;
  background: rgba(0,0,0,.28); color: var(--text); outline: none;
}
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--gold2) 50%), linear-gradient(135deg, var(--gold2) 50%, transparent 50%); background-position: calc(100% - 20px) 21px, calc(100% - 13px) 21px; background-size: 7px 7px; background-repeat: no-repeat; }
textarea { resize: vertical; min-height: 150px; }
input:focus, select:focus, textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(215,175,89,.12); }

.label-row { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-weight: 800; margin-bottom: 8px; }
.label-row small, .security-level small { font-weight: 600; color: var(--muted); }
.word-section { display: grid; gap: 8px; }
.word-grid { display: flex; flex-wrap: wrap; gap: 10px; overflow: visible; padding: 0 0 4px; min-width: 0; max-width: 100%; align-items: stretch; }
.word-box, .add-word { flex: 1 1 150px; min-width: 130px; max-width: 220px; }
.word-box { position: relative; }
.word-box .word-input { height: 100%; padding-right: 38px; }
.remove-word {
  position: absolute; right: 9px; top: 50%; transform: translateY(-50%);
  width: 24px; height: 24px; border: 1px solid rgba(255,255,255,.12); border-radius: 999px;
  background: rgba(255,255,255,.05); color: rgba(185,176,162,.8); cursor: pointer; line-height: 20px; padding: 0;
  font-size: 16px; font-weight: 700; display: grid; place-items: center;
}
.remove-word:hover { color: #15110a; border-color: var(--gold2); background: linear-gradient(135deg, var(--gold), var(--gold2)); }
.add-word { border: 1px dashed rgba(255,223,138,.34); background: rgba(255,255,255,.04); color: var(--gold2); border-radius: 18px; padding: 14px 15px; cursor: pointer; white-space: nowrap; font-weight: 800; min-height: 51px; }
.add-word:hover { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(215,175,89,.12); }
.fake-suggest, .fake-menu {
  position: absolute; z-index: 5000; left: 0; right: 0; top: calc(100% + 8px);
  border: 1px solid rgba(255,223,138,.32); border-radius: 18px; padding: 7px;
  background: rgba(12,10,14,.96); box-shadow: 0 18px 55px rgba(0,0,0,.5);
  backdrop-filter: blur(18px); max-height: var(--menu-max-height, 260px); overflow-y: auto;
}
.fake-select.drop-up .fake-menu { top: auto; bottom: calc(100% + 8px); }

.portal-suggest { position: fixed; left: 8px; right: auto; top: 0; bottom: auto; width: 180px; max-height: 260px; overflow: auto; z-index: 99999; }
.fake-suggest button, .fake-menu button {
  display: flex; width: 100%; justify-content: space-between; gap: 10px; align-items: center;
  text-align: left; border: 0; border-radius: 12px;
  padding: 10px 11px; cursor: pointer; color: var(--text); background: transparent;
}
.fake-menu small { color: var(--muted); font-weight: 700; }
.fake-suggest button:hover, .fake-suggest button.top, .fake-menu button:hover {
  background: linear-gradient(135deg, rgba(215,175,89,.95), rgba(255,223,138,.95)); color: #15110a; font-weight: 900;
}
.fake-select { position: relative; }
.fake-select-trigger {
  width: 100%; border: 1px solid var(--line); border-radius: 18px; padding: 14px 15px;
  background: rgba(0,0,0,.28); color: var(--text); text-align: left; cursor: pointer;
}
.fake-select-trigger { position: relative; padding-right: 44px; }
.fake-select-trigger::after {
  content: ''; position: absolute; right: 18px; top: 50%; width: 9px; height: 9px;
  border-right: 2px solid var(--gold2); border-bottom: 2px solid var(--gold2);
  transform: translateY(-65%) rotate(45deg); pointer-events: none;
}
.fake-select-trigger:focus, .fake-select-trigger:hover { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(215,175,89,.12); }

.fake-menu { scrollbar-width: thin; scrollbar-color: rgba(255,223,138,.45) rgba(255,255,255,.06); }
.fake-menu::-webkit-scrollbar { width: 8px; }
.fake-menu::-webkit-scrollbar-thumb { background: rgba(255,223,138,.38); border-radius: 999px; }
.fake-menu::-webkit-scrollbar-track { background: rgba(255,255,255,.04); border-radius: 999px; }

.security-level { border-top: 1px solid var(--line); padding-top: 14px; }

.primary {
  border: none; border-radius: 18px; padding: 16px 18px; cursor: pointer;
  background: linear-gradient(135deg, var(--gold), var(--gold2)); color: #15110a; font-weight: 900;
}
.primary:disabled { filter: grayscale(.8); opacity: .55; cursor: wait; }
.bruteforce-hint { margin-top: -10px; color: rgba(185,176,162,.78); font-size: 12px; line-height: 1.4; }
.advanced { border-top: 1px solid var(--line); padding-top: 14px; }
#advancedBody { margin-top: 14px; }
.progress {
  margin-top: 24px; border: 1px solid var(--line); border-radius: 24px; padding: 18px;
  display: grid; grid-template-columns: 54px 1fr; gap: 16px; align-items: center;
  background: rgba(0,0,0,.24);
}
.ring { width: 54px; height: 54px; border-radius: 50%; border: 4px solid rgba(255,255,255,.15); border-top-color: var(--gold2); animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.progress p { margin: 6px 0 10px; color: var(--muted); }
.bar { height: 10px; background: rgba(255,255,255,.12); border-radius: 999px; overflow: hidden; }
.bar span { display:block; height: 100%; width: 8%; background: linear-gradient(90deg, var(--gold), var(--gold2)); animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 50% { width: 92%; } }
.result { margin-top: 18px; white-space: pre-wrap; border-radius: 18px; padding: 16px 54px 16px 16px; background: rgba(0,0,0,.35); border: 1px solid var(--line); color: var(--ok); position: relative; min-height: 52px; }
.result.error { color: var(--danger); }
.result-copy { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid rgba(255,223,138,.18); background: rgba(255,255,255,.07); color: rgba(255,248,232,.9); border-radius: 10px; padding: 0; cursor: pointer; opacity: .82; transition: opacity .16s ease, transform .16s ease, background .16s ease; }
.result-copy:hover { opacity: 1; transform: translateY(-1px); background: rgba(255,255,255,.12); }
.result-copy svg { width: 15px; height: 15px; display: block; }
@media (max-width: 900px) { .word-box, .add-word { flex-basis: 145px; } }
@media (max-width: 760px) { .hero, .grid { grid-template-columns: 1fr; } .word-box, .add-word { flex-basis: 100%; max-width: none; } .shell { padding: 24px 0; } .label-row { display: grid; } }

.crypto-progress { grid-template-columns: 86px 1fr; overflow: hidden; position: relative; min-height: 132px; }
.crypto-progress::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255,223,138,.06) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,223,138,.045) 1px, transparent 1px),
    radial-gradient(circle at 78% 28%, rgba(120,88,255,.22), transparent 20rem),
    radial-gradient(circle at 18% 72%, rgba(215,175,89,.16), transparent 18rem);
  background-size: 34px 34px, 34px 34px, auto, auto;
}
.crypto-progress > * { position: relative; z-index: 1; }

.crypto-progress .crypto-orb,
.crypto-progress > div:last-child {
  position: relative;
  z-index: 2;
}
.crypto-progress > div:last-child {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 14px 16px;
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(8,7,11,.94), rgba(12,11,17,.88)),
    radial-gradient(circle at 85% 15%, rgba(215,175,89,.18), transparent 12rem);
  border: 1px solid rgba(255,223,138,.14);
  box-shadow: 0 18px 54px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.07);
  backdrop-filter: blur(14px);
}
.crypto-progress strong {
  color: rgba(255,248,232,.96);
  text-shadow: 0 2px 18px rgba(0,0,0,.75);
}
.crypto-progress p {
  color: rgba(235,226,210,.86);
  text-shadow: 0 1px 12px rgba(0,0,0,.72);
}

.scene-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.crypto-orb { width: 78px; height: 78px; display: grid; place-items: center; perspective: 400px; border-radius: 22px; background: linear-gradient(135deg, rgba(8,7,11,.92), rgba(12,11,17,.82)); border: 1px solid rgba(255,223,138,.13); box-shadow: 0 16px 44px rgba(0,0,0,.44), inset 0 1px 0 rgba(255,255,255,.06); backdrop-filter: blur(12px); }
.crypto-orb svg { width: 78px; height: 78px; filter: drop-shadow(0 0 18px rgba(215,175,89,.26)); animation: tilt3d 3.8s ease-in-out infinite; }
.crypto-orb .orbit { fill: none; stroke: rgba(255,223,138,.35); stroke-width: 2; stroke-dasharray: 10 8; transform-origin: 60px 60px; }
.crypto-orb .orbit-a { animation: spin-svg 4s linear infinite; }
.crypto-orb .orbit-b { animation: spin-svg 2.6s linear infinite reverse; stroke: rgba(255,255,255,.22); }
.crypto-orb .core { fill: url(#goldFlow); }
.crypto-orb .dot { fill: var(--gold2); transform-origin: 60px 60px; }
.crypto-orb .dot-a { animation: spin-svg 2.2s linear infinite; }
.crypto-orb .dot-b { animation: spin-svg 3.1s linear infinite reverse; }
.crypto-orb .pulse-path { fill: none; stroke: url(#goldFlow); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 24 80; animation: dash-flow 1.8s linear infinite; opacity: .9; }
.progress-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; }
.progress-chips span { font-size: 11px; color: rgba(255,223,138,.92); border: 1px solid rgba(255,223,138,.22); background: rgba(255,223,138,.06); border-radius: 999px; padding: 5px 8px; }
@keyframes slow-rotate { to { transform: rotate(360deg); } }
@keyframes spin-svg { to { transform: rotate(360deg); } }
@keyframes dash-flow { to { stroke-dashoffset: -104; } }
@keyframes tilt3d { 0%,100% { transform: rotateX(0) rotateY(0); } 50% { transform: rotateX(13deg) rotateY(-17deg); } }

.entropy-modal { position: fixed; inset: 0; z-index: 200000; }
.entropy-bg {
  position: absolute; inset: 0; display: grid; place-items: center; padding: 24px;
  background:
    radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255,223,138,.22), transparent 18rem),
    radial-gradient(circle at 20% 80%, rgba(120,88,255,.22), transparent 28rem),
    linear-gradient(135deg, rgba(5,5,8,.98), rgba(14,10,20,.98));
  cursor: crosshair; user-select: none; -webkit-user-select: none; touch-action: none; overflow: hidden;
}
.entropy-bg::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(circle at center, black, transparent 75%);
}
.entropy-card {
  position: relative; z-index: 1; width: min(420px, 100%); text-align: center; border: 1px solid rgba(255,223,138,.26);
  border-radius: 28px; padding: 28px; background: rgba(8,7,11,.82); box-shadow: 0 30px 100px rgba(0,0,0,.55); backdrop-filter: blur(18px);
  overflow: hidden; isolation: isolate;
}
.entropy-card::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 50% 0%, rgba(255,223,138,.16), transparent 45%), linear-gradient(135deg, rgba(255,255,255,.08), transparent); }
.entropy-card strong { display: block; font-size: 22px; margin: 10px 0; }
.entropy-card p { color: var(--muted); margin: 0 0 18px; line-height: 1.45; }
.entropy-sigil { width: 66px; height: 66px; margin: 0 auto; border-radius: 22px 22px 26px 26px; background: linear-gradient(135deg, var(--gold), var(--gold2)); box-shadow: 0 0 40px rgba(255,223,138,.22); position: relative; overflow: hidden; }
.entropy-sigil::before { content: ''; position: absolute; inset: 14px 20px 18px; border: 3px solid rgba(10,8,12,.78); border-top-left-radius: 14px; border-top-right-radius: 14px; border-bottom: 0; }
.entropy-sigil::after { content: ''; position: absolute; left: 19px; right: 19px; top: 32px; height: 16px; border-radius: 999px; background: rgba(10,8,12,.78); box-shadow: 0 0 18px rgba(255,255,255,.18); }
.entropy-meter { height: 10px; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,.12); }
.entropy-meter span { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, var(--gold), var(--gold2)); transition: width .18s ease; }
.entropy-card small { display: block; color: rgba(255,255,255,.62); margin-top: 10px; }
@keyframes entropy-spin { to { transform: rotate(360deg); } }

/* Magnetic-field entropy visual: replace old lock sigil with a compact field probe. */
.entropy-sigil {
  width: 72px; height: 72px; margin: 0 auto 4px; border-radius: 999px;
  background:
    radial-gradient(circle at center, rgba(255,223,138,.95) 0 4px, transparent 5px),
    repeating-radial-gradient(circle at center, rgba(72,216,255,.42) 0 1px, transparent 2px 11px),
    radial-gradient(circle at 50% 50%, rgba(215,175,89,.18), transparent 72%);
  border: 1px solid rgba(255,223,138,.28);
  box-shadow: 0 0 42px rgba(72,216,255,.14), inset 0 0 28px rgba(255,223,138,.09);
  position: relative; overflow: hidden;
}
.entropy-sigil::before,
.entropy-sigil::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 82%; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255,223,138,.9), transparent);
  border: 0; border-radius: 999px; transform-origin: center; box-shadow: 0 0 18px rgba(255,223,138,.3);
}
.entropy-sigil::before { transform: translate(-50%, -50%) rotate(22deg); }
.entropy-sigil::after { transform: translate(-50%, -50%) rotate(-38deg); }


/* Use the same readable glass background on the orb and the text block. */
.crypto-progress .crypto-orb,
.crypto-progress > div:last-child {
  background:
    linear-gradient(135deg, rgba(8,7,11,.94), rgba(12,11,17,.88)),
    radial-gradient(circle at 85% 15%, rgba(215,175,89,.18), transparent 12rem) !important;
  border: 1px solid rgba(255,223,138,.14) !important;
  box-shadow: 0 18px 54px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.07) !important;
  backdrop-filter: blur(14px);
}

.result.decrypted-result {
  color: var(--text);
  padding: 18px 56px 72px 18px;
  font-size: 15px;
  line-height: 1.55;
}
.result-copy.copied {
  color: #15110a;
  background: linear-gradient(135deg, var(--gold), var(--gold2));
  border-color: transparent;
}
.result-copy.copied::after {
  content: 'Copied';
  position: absolute;
  right: 0;
  top: calc(100% + 7px);
  padding: 5px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  color: #15110a;
  background: var(--gold2);
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
}
.back-open {
  position: absolute;
  left: 16px;
  bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255,223,138,.22);
  border-radius: 999px;
  padding: 10px 14px;
  background: rgba(255,255,255,.08);
  color: rgba(255,248,232,.94);
  cursor: pointer;
  font-weight: 800;
}
.back-open:hover { background: rgba(255,255,255,.13); transform: translateY(-1px); }
.back-open svg { width: 17px; height: 17px; }
.panel.decrypted-state .tabs,
.panel.decrypted-state form,
.panel.decrypted-state .progress { display: none !important; }
.panel.decrypted-state .result { margin-top: 0; }

/* Expiry option. */
.expiry-option {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
}
.expiry-option select {
  appearance: none;
  width: 100%;
  min-height: 46px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.035)),
    rgba(0,0,0,.22);
  color: var(--text);
  padding: 0 14px;
  font: inherit;
  outline: none;
}
.expiry-option small { color: var(--muted); line-height: 1.35; }

/* Use one exact glass recipe for both crypto orb and progress text. */
.crypto-progress { --crypto-glass:
  linear-gradient(135deg, rgba(8,7,11,.94), rgba(12,11,17,.88)),
  radial-gradient(circle at 85% 15%, rgba(215,175,89,.18), transparent 12rem);
}
.crypto-progress .crypto-orb,
.crypto-progress > div:last-child {
  background: var(--crypto-glass) !important;
  border: 1px solid rgba(255,223,138,.14) !important;
  box-shadow: 0 18px 54px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.07) !important;
  backdrop-filter: blur(14px);
}

.result-shell.decrypted-result {
  display: grid;
  gap: 14px;
  margin-top: 18px;
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--text);
  white-space: normal;
  min-height: 0;
}
.decrypted-note {
  position: relative;
  min-height: 130px;
  white-space: pre-wrap;
  line-height: 1.58;
  color: rgba(255,248,232,.96);
  border: 1px solid rgba(255,223,138,.14);
  border-radius: 20px;
  padding: 18px 58px 18px 18px;
  background:
    linear-gradient(135deg, rgba(8,7,11,.94), rgba(12,11,17,.88)),
    radial-gradient(circle at 85% 15%, rgba(215,175,89,.14), transparent 16rem);
  box-shadow: 0 18px 54px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.06);
}
.result-shell .back-open {
  position: static;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255,223,138,.22);
  border-radius: 999px;
  padding: 10px 14px;
  background: rgba(255,255,255,.08);
  color: rgba(255,248,232,.94);
  cursor: pointer;
  font-weight: 800;
}
.result-shell .back-open:hover { background: rgba(255,255,255,.13); transform: translateY(-1px); }
.result-shell .back-open svg { width: 17px; height: 17px; }
.decrypted-note .result-copy {
  top: 14px;
  right: 14px;
}
.panel.decrypted-state .tabs,
.panel.decrypted-state form,
.panel.decrypted-state .progress { display: none !important; }
.panel.decrypted-state .result-shell { margin-top: 0; }

/* Final UI corrections: all option controls use the same custom select surface. */
.expiry-option .fake-select,
.security-level .fake-select { width: 100%; }
.expiry-option .fake-menu,
.security-level .fake-menu { min-width: 100%; }
.expiry-option .fake-select-trigger,
.security-level .fake-select-trigger { min-height: 46px; }

/* Final decrypted layout: back control is outside and above the note. */
#result.result-shell.decrypted-result {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 14px;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  white-space: normal !important;
  min-height: 0 !important;
}
#result.result-shell.decrypted-result .back-open {
  position: static !important;
  inset: auto !important;
  order: 0;
  justify-self: start;
  margin: 0 !important;
}
#result.result-shell.decrypted-result .decrypted-note {
  order: 1;
  display: block;
  width: 100%;
  min-height: 150px;
  color: rgba(255,248,232,.97);
  background:
    linear-gradient(135deg, rgba(8,7,11,.95), rgba(12,11,17,.89)),
    radial-gradient(circle at 85% 15%, rgba(215,175,89,.14), transparent 16rem) !important;
}


.inline-result {
  margin-top: 0;
  align-self: stretch;
  width: 100%;
  order: 999;
}