.pnp-password-app {
  --pnp-orange: #ff6a00;
  --pnp-orange-2: #ff8a00;
  --pnp-ink: #171717;
  --pnp-muted: #6b7280;
  --pnp-line: #e5e7eb;
  --pnp-soft: #f7f7f8;
  --pnp-white: #fff;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--pnp-ink);
  padding: 54px 18px 64px;
}

.pnp-password-app * { box-sizing: border-box; }
.pnp-shell { width: min(920px, 100%); margin: 0 auto; }
.pnp-head { text-align: center; max-width: 720px; margin: 0 auto 28px; }
.pnp-kicker { display: inline-flex; padding: 7px 12px; border: 1px solid #ffd8bf; background: #fff6ef; color: #c44f00; border-radius: 999px; font-size: 13px; font-weight: 800; letter-spacing: .02em; }
.pnp-head h1 { margin: 14px 0 10px; font-size: clamp(34px, 5vw, 58px); line-height: .98; letter-spacing: -.045em; }
.pnp-head p { margin: 0 auto; max-width: 650px; color: var(--pnp-muted); font-size: 17px; line-height: 1.6; }

.pnp-card { background: var(--pnp-white); border: 1px solid var(--pnp-line); border-radius: 28px; box-shadow: 0 24px 70px rgba(0,0,0,.07); padding: 28px; }
.pnp-result-wrap > label { display:block; font-weight: 800; margin-bottom: 9px; font-size: 14px; }
.pnp-result-row { display: grid; grid-template-columns: 1fr 54px; gap: 10px; }
.pnp-output { width:100%; height: 60px; border: 2px solid #dfe2e7; background: #fbfbfc; border-radius: 16px; padding: 0 16px; font: 700 20px/1.2 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; letter-spacing: .02em; color:#141414; outline:none; }
.pnp-output:focus { border-color: var(--pnp-orange); box-shadow:0 0 0 4px rgba(255,106,0,.10); }
.pnp-icon-btn { border:0; border-radius:16px; background:#151515; color:white; font-size:25px; cursor:pointer; transition:.18s ease; }
.pnp-icon-btn:hover { transform:translateY(-1px); background:#000; }

.pnp-strength { margin-top: 14px; }
.pnp-strength-bar { height: 8px; background: #eceef1; border-radius: 999px; overflow:hidden; }
.pnp-strength-bar span { display:block; height:100%; width:0; border-radius:inherit; background: var(--pnp-orange); transition: width .25s ease, background .25s ease; }
.pnp-strength-meta { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:8px; font-size:13px; color:var(--pnp-muted); }
.pnp-strength-meta strong { color:var(--pnp-ink); }

.pnp-modes { margin: 24px 0; display:grid; grid-template-columns:repeat(3,1fr); gap:9px; padding:6px; background:var(--pnp-soft); border-radius:16px; }
.pnp-mode { border:0; background:transparent; border-radius:12px; padding:12px 10px; font-weight:800; color:#5d6169; cursor:pointer; }
.pnp-mode.is-active { background:#fff; color:#151515; box-shadow:0 5px 18px rgba(0,0,0,.08); }

.pnp-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.pnp-control, .pnp-check { border:1px solid var(--pnp-line); background:#fff; border-radius:16px; }
.pnp-control { padding:17px; }
.pnp-control--wide, .pnp-check--wide { grid-column:1 / -1; }
.pnp-control-head { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:12px; }
.pnp-control-head label { font-weight:800; }
.pnp-control-head output { min-width:42px; text-align:center; padding:6px 8px; border-radius:10px; background:#151515; color:#fff; font-weight:800; }
.pnp-control input[type="range"] { width:100%; accent-color:var(--pnp-orange); }
.pnp-range-labels { display:flex; justify-content:space-between; font-size:12px; color:#969aa2; margin-top:6px; }

.pnp-check { position:relative; display:flex; gap:12px; align-items:center; padding:16px; cursor:pointer; }
.pnp-check input { position:absolute; opacity:0; pointer-events:none; }
.pnp-check-ui { width:22px; height:22px; flex:0 0 22px; border:2px solid #cfd3d9; border-radius:7px; position:relative; transition:.18s ease; }
.pnp-check input:checked + .pnp-check-ui { border-color:var(--pnp-orange); background:var(--pnp-orange); }
.pnp-check input:checked + .pnp-check-ui::after { content:""; position:absolute; left:6px; top:2px; width:6px; height:11px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg); }
.pnp-check span:last-child { display:flex; flex-direction:column; gap:2px; }
.pnp-check strong { font-size:14px; }
.pnp-check small { color:var(--pnp-muted); font-size:12px; }

.pnp-actions { display:grid; grid-template-columns:1fr auto; gap:10px; margin-top:18px; }
.pnp-btn { min-height:52px; border-radius:15px; padding:0 20px; font-weight:900; border:1px solid transparent; cursor:pointer; transition:.18s ease; }
.pnp-btn--primary { color:#fff; background:linear-gradient(135deg,var(--pnp-orange),var(--pnp-orange-2)); box-shadow:0 10px 24px rgba(255,106,0,.22); }
.pnp-btn--primary:hover { transform:translateY(-1px); }
.pnp-btn--secondary { background:#fff; border-color:#d9dce1; color:#161616; }

.pnp-batch { margin-top:18px; border-top:1px solid var(--pnp-line); padding-top:18px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.pnp-batch div { display:flex; flex-direction:column; gap:3px; }
.pnp-batch span { color:var(--pnp-muted); font-size:13px; }
.pnp-text-btn { border:0; background:#fff2e8; color:#c84e00; font-weight:900; border-radius:12px; padding:10px 13px; cursor:pointer; white-space:nowrap; }
.pnp-batch-list { margin-top:12px; display:grid; gap:8px; }
.pnp-batch-item { display:grid; grid-template-columns:1fr auto; align-items:center; gap:10px; background:#fafafa; border:1px solid var(--pnp-line); border-radius:13px; padding:11px 12px; }
.pnp-batch-item code { overflow-wrap:anywhere; font-size:13px; }
.pnp-batch-copy { border:0; background:#171717; color:#fff; border-radius:9px; padding:7px 10px; font-weight:800; cursor:pointer; }

.pnp-note { display:flex; gap:11px; align-items:flex-start; margin-top:20px; padding:15px 16px; background:#f5faf6; border:1px solid #d9eadc; border-radius:15px; color:#3d5141; }
.pnp-note p { margin:0; font-size:13px; line-height:1.55; }
.pnp-note-icon { width:24px; height:24px; border-radius:50%; display:grid; place-items:center; background:#dff1e3; font-weight:900; flex:0 0 24px; }
.pnp-footer-note { text-align:center; margin-top:18px; font-size:13px; color:#8a8d93; }
.pnp-footer-note a { color:#c74f00; font-weight:800; text-decoration:none; margin-left:4px; }
.pnp-toast { position:fixed; left:50%; bottom:28px; transform:translate(-50%,20px); opacity:0; pointer-events:none; background:#151515; color:#fff; border-radius:999px; padding:10px 16px; font-weight:800; font-size:13px; transition:.2s ease; z-index:99999; }
.pnp-toast.is-show { transform:translate(-50%,0); opacity:1; }

@media (max-width: 720px) {
  .pnp-password-app { padding:30px 12px 44px; }
  .pnp-card { padding:18px; border-radius:22px; }
  .pnp-head h1 { font-size:clamp(34px, 10vw, 46px); }
  .pnp-head p { font-size:15px; }
  .pnp-modes { grid-template-columns:1fr; }
  .pnp-grid { grid-template-columns:1fr; }
  .pnp-control--wide, .pnp-check--wide { grid-column:auto; }
  .pnp-actions { grid-template-columns:1fr; }
  .pnp-btn--secondary { min-height:48px; }
}

@media (max-width: 480px) {
  .pnp-result-row { grid-template-columns:1fr 48px; gap:7px; }
  .pnp-output { font-size:16px; height:56px; padding:0 12px; }
  .pnp-icon-btn { border-radius:14px; font-size:21px; }
  .pnp-strength-meta { align-items:flex-start; flex-direction:column; gap:2px; }
  .pnp-batch { align-items:flex-start; flex-direction:column; }
}