*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
  --bg:#0b0b0f;
  --glass:rgba(255,255,255,.04);
  --glass-border:rgba(255,255,255,.1);
  --glass-border-hi:rgba(255,255,255,.18);
  --glass-shine:rgba(255,255,255,.06);
  --input-bg:rgba(255,255,255,.035);
  --input-border:rgba(255,255,255,.08);
  --input-focus:rgba(255,255,255,.18);
  --t1:#f2f2f4;
  --t2:#b4b4be;
  --t3:#6e6e7a;
  --accent:#00e2ff;
  --accent-border:rgba(0,226,255,.25);
  --r:10px;
  --ff:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace
}

html{font-size:16px;-webkit-font-smoothing:antialiased}
body{font-family:var(--ff);background:var(--bg);color:var(--t1);min-height:100vh;min-height:100dvh;overflow-x:hidden;
  background-image:radial-gradient(ellipse 80% 60% at 50% 40%,rgba(20,20,30,1),var(--bg))}
::selection{background:rgba(0,226,255,.2);color:#fff}
.mono{font-family:var(--mono)}

.shell{display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:100vh;min-height:100dvh;padding:40px 20px 48px;gap:24px}

.glass{
  background:var(--glass);
  border:1px solid var(--glass-border);
  backdrop-filter:blur(20px) saturate(1.1);
  -webkit-backdrop-filter:blur(20px) saturate(1.1);
  box-shadow:
    inset 0 1px 0 var(--glass-shine),
    inset 0 0 0 1px rgba(255,255,255,.02),
    0 8px 32px -8px rgba(0,0,0,.5)}

.dialog{width:100%;max-width:440px;border-radius:16px;padding:36px 32px}

.dialog-head{display:flex;align-items:center;gap:14px;margin-bottom:32px}
.dialog-icon{width:36px;height:36px;color:var(--accent);flex-shrink:0}
.dialog-title{font-size:1.15rem;font-weight:700;letter-spacing:-.03em;color:#fff}
.dialog-sub{font-size:.76rem;color:var(--t3);margin-top:3px}

.fields{display:flex;flex-direction:column;gap:18px}
.f{display:flex;flex-direction:column;position:relative}
.f label{font-size:.77rem;font-weight:600;color:var(--t2);margin-bottom:7px;letter-spacing:.02em}
.opt{font-weight:400;color:var(--t3)}

.f input[type="text"],
.f input[type="password"],
.f input[type="number"],
.sel{
  width:100%;padding:13px 15px;
  background:var(--input-bg);
  border:1px solid var(--input-border);
  border-radius:var(--r);
  color:var(--t1);font-size:16px;outline:none;
  transition:border-color .2s,box-shadow .2s;
  -webkit-appearance:none}
.f input:focus,.sel:focus{
  border-color:var(--input-focus);
  box-shadow:0 0 0 3px rgba(255,255,255,.03)}
.f input::placeholder{color:var(--t3);font-family:var(--ff)}
.f input[type="number"]{-moz-appearance:textfield}
.f input[type="number"]::-webkit-inner-spin-button,
.f input[type="number"]::-webkit-outer-spin-button{opacity:1}

.domain-row{display:flex;align-items:center;position:relative}
.domain-row input{flex:1;min-width:0}
.domain-pick{width:42px;height:42px;flex-shrink:0;
  padding:0;
  text-align:center;text-align-last:center;
  background-color:rgba(255,255,255,.06);
  background-image:url("assets/chevron.svg");
  background-repeat:no-repeat;background-position:center;background-size:14px;
  border:1px solid var(--input-border);
  border-radius:50%;
  color:transparent;font-size:0;cursor:pointer;
  -webkit-appearance:none;appearance:none;outline:none;
  -webkit-tap-highlight-color:transparent;
  margin-left:8px}
.domain-pick:hover,.domain-pick:focus{background-color:rgba(255,255,255,.1);border-color:var(--input-focus)}
.domain-pick option{background:#16161f;color:var(--t1);font-size:.84rem}

.domain-pick-desktop{display:none}
.domain-pick-mobile{display:block}

.domain-dropdown{display:none;position:absolute;top:100%;right:0;z-index:100;
  width:200px;margin-top:6px;max-height:260px;overflow-y:auto;
  background:rgba(16,16,22,.95);
  border:1px solid var(--glass-border);
  border-radius:var(--r);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  box-shadow:0 12px 40px -8px rgba(0,0,0,.7);
  overscroll-behavior:contain}
.domain-dropdown.show{display:block}
.domain-dropdown .dd-item{padding:10px 14px;font-size:.82rem;color:var(--t2);
  cursor:pointer;border-bottom:1px solid rgba(255,255,255,.04);
  transition:background .1s,color .1s}
.domain-dropdown .dd-item:last-child{border-bottom:none}
.domain-dropdown .dd-item:hover{background:rgba(255,255,255,.06);color:var(--t1)}
.domain-dropdown .dd-item.active{background:rgba(0,226,255,.08);color:var(--accent)}
.domain-dropdown::-webkit-scrollbar{width:5px}
.domain-dropdown::-webkit-scrollbar-track{background:transparent}
.domain-dropdown::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:3px}

@media(hover:hover) and (pointer:fine){
  .domain-pick-desktop{display:block}
  .domain-pick-mobile{display:none}
}

.sel{appearance:none;cursor:pointer;font-family:var(--mono);font-size:.84rem;padding-right:36px;
  background-image:url("assets/chevron.svg");
  background-repeat:no-repeat;background-position:right 12px center}
.sel option{background:#16161f;color:var(--t1)}

.hint{font-size:.7rem;color:var(--accent);font-family:var(--mono);
  opacity:0;max-height:0;overflow:hidden;transition:all .2s}
.hint.show{opacity:1;max-height:24px;margin-top:6px}

.adv{border:none}
.adv summary{font-size:.75rem;font-weight:600;color:var(--t3);cursor:pointer;padding:2px 0;
  list-style:none;user-select:none;-webkit-tap-highlight-color:transparent;transition:color .15s}
.adv summary::-webkit-details-marker{display:none}
.adv summary::after{content:" \25BE";font-size:.65rem;margin-left:2px}
.adv[open] summary{color:var(--t2)}
.adv summary:hover{color:var(--t2)}
.adv-body{padding-top:16px}
.adv-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}

.actions{display:flex;gap:8px;margin-top:22px}

.btn-gen{flex:1;padding:14px 24px;background:var(--accent);color:#000;
  font-family:var(--ff);font-size:.88rem;font-weight:700;letter-spacing:-.01em;
  border:none;border-radius:var(--r);cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:9px;
  min-height:50px;transition:all .15s;-webkit-tap-highlight-color:transparent;
  box-shadow:0 2px 12px -2px rgba(0,226,255,.2)}
.btn-gen:hover:not(:disabled){opacity:.88;box-shadow:0 4px 20px -4px rgba(0,226,255,.3)}
.btn-gen:active:not(:disabled){transform:scale(.98)}
.btn-gen:disabled{opacity:.2;cursor:not-allowed;box-shadow:none}

.btn-clear{width:50px;min-height:50px;display:flex;align-items:center;justify-content:center;
  background:var(--glass);border:1px solid var(--glass-border);border-radius:var(--r);
  color:var(--t3);cursor:pointer;transition:all .15s;-webkit-tap-highlight-color:transparent}
.btn-clear:hover{color:var(--t2);border-color:var(--glass-border-hi)}
.btn-clear svg{display:block}

.spin{display:none;width:16px;height:16px;border:2.5px solid rgba(0,0,0,.12);
  border-top-color:#000;border-radius:50%;animation:spin .5s linear infinite}
.spin.show{display:block}
@keyframes spin{to{transform:rotate(360deg)}}

.result{margin-top:22px;display:none}
.result.show{display:block;animation:fadeUp .3s ease-out}
.result-bar{display:flex;align-items:center;gap:4px;
  background:rgba(0,226,255,.04);
  border:1px solid var(--accent-border);border-radius:var(--r);
  padding:5px 5px 5px 15px}
.result-pw{flex:1;background:none;border:none;color:var(--accent);
  font-size:.9rem;font-weight:600;letter-spacing:.04em;outline:none;min-width:0;padding:9px 0}

.r-btn{width:38px;height:38px;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);border-radius:8px;
  color:var(--t3);cursor:pointer;transition:all .15s;flex-shrink:0;-webkit-tap-highlight-color:transparent}
.r-btn:hover{color:var(--t1);background:rgba(255,255,255,.07)}
.r-btn.copied{color:var(--accent);background:rgba(0,226,255,.08);border-color:var(--accent-border)}
.r-btn.showing{color:var(--t1)}

.eye-hide{display:none}
.r-btn.showing .eye-show{display:none}
.r-btn.showing .eye-hide{display:block}
.ico-check{display:none}
.r-btn.copied .ico-copy{display:none}
.r-btn.copied .ico-check{display:block}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;width:100%;max-width:440px}

.c{border-radius:14px;padding:24px 18px;text-align:center;
  background:var(--glass);
  border:1px solid var(--glass-border);
  backdrop-filter:blur(20px) saturate(1.1);
  -webkit-backdrop-filter:blur(20px) saturate(1.1);
  box-shadow:inset 0 1px 0 var(--glass-shine);
  transition:border-color .2s,transform .2s}
.c:hover{border-color:var(--glass-border-hi);transform:translateY(-2px)}

.c-ico{color:var(--accent);margin-bottom:12px;opacity:.5}
.c h3{font-size:.8rem;font-weight:700;margin-bottom:5px;color:var(--t1)}
.c p{font-size:.7rem;color:var(--t2);line-height:1.6}

.save-warning{font-size:.72rem;color:var(--t2);text-align:center;max-width:400px;line-height:1.6;
  padding:12px 16px;border:1px solid rgba(255,255,255,.06);border-radius:10px;background:rgba(255,255,255,.02)}

.trust{font-size:.68rem;color:var(--t3);text-align:center;line-height:1.7}

@keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

@media(max-width:500px){
  .shell{padding:20px 12px 36px;justify-content:flex-start;padding-top:max(20px,env(safe-area-inset-top));
    padding-bottom:max(36px,env(safe-area-inset-bottom));gap:20px}
  .dialog{padding:24px 18px;border-radius:14px}
  .dialog-head{gap:12px;margin-bottom:24px}
  .dialog-icon{width:32px;height:32px}
  .dialog-title{font-size:1.05rem}
  .dialog-sub{font-size:.72rem}
  .fields{gap:16px}
  .f label{font-size:.75rem;margin-bottom:6px}
  .adv-row{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr;gap:8px}
  .c{padding:18px 16px;border-radius:12px;text-align:left;display:flex;align-items:center;gap:14px}
  .c-ico{margin-bottom:0;flex-shrink:0}
  .c h3{font-size:.78rem;margin-bottom:2px}
  .c p{font-size:.68rem}
  .btn-gen{min-height:52px;font-size:.9rem}
  .btn-clear{width:52px;min-height:52px}
  .r-btn{width:44px;height:44px}
  .f input[type="text"],
  .f input[type="password"],
  .f input[type="number"],
  .sel{padding:14px 15px;font-size:16px}
  .domain-pick{width:44px;height:44px}
  .result-bar{padding:4px 4px 4px 12px}
  .result-pw{font-size:.82rem}
  .save-warning{font-size:.68rem;padding:10px 14px}
  .trust{font-size:.64rem}
  .actions{margin-top:18px}
}