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

    :root {
      --color-primary: #2563EB;
      --color-secondary: #3B82F6;
      --color-fg: #1E293B;
      --color-text-secondary: #64748B;
      --color-surface: rgba(255,255,255,0.72);
      --color-border: rgba(255,255,255,0.45);
      --color-success: #10B981;
      --color-warning: #F59E0B;
      --color-danger: #EF4444;
      --radius-sm: 10px;
      --radius-md: 16px;
      --radius-lg: 22px;
      --shadow-glass: 0 8px 32px rgba(0,0,0,0.06), 0 2px 8px rgba(0,0,0,0.04);
      --transition: 180ms cubic-bezier(0.4,0,0.2,1);
      --font-mono: 'SF Mono','Fira Code','Consolas','Monaco',monospace;
    }

    body {
      font-family: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
      background: linear-gradient(135deg, #E0E7FF 0%, #DBEAFE 30%, #F0FDF4 60%, #FEF3C7 100%);
      background-attachment: fixed;
      min-height: 100dvh;
      display: flex;
      flex-direction: column;
      align-items: center;
      color: var(--color-fg);
      -webkit-font-smoothing: antialiased;
    }

    .bg-decoration { position:fixed; border-radius:50%; filter:blur(80px); opacity:0.55; pointer-events:none; z-index:0; }
    .bg-decoration:nth-child(1) { width:340px; height:340px; background:#BFDBFE; top:-80px; right:-80px; }
    .bg-decoration:nth-child(2) { width:260px; height:260px; background:#FDE68A; bottom:-60px; left:-60px; }
    .bg-decoration:nth-child(3) { width:200px; height:200px; background:#A7F3D0; top:50%; left:50%; transform:translate(-50%,-50%); }

    .page-wrapper {
      flex:1;
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      padding:20px;
      width:100%;
    }

    .container {
      position:relative;
      z-index:1;
      width:100%;
      max-width:500px;
      display:flex;
      flex-direction:column;
      gap:16px;
    }

    .card {
      background:var(--color-surface);
      backdrop-filter:blur(18px);
      -webkit-backdrop-filter:blur(18px);
      border:1px solid var(--color-border);
      border-radius:var(--radius-lg);
      padding:28px;
      box-shadow:var(--shadow-glass);
    }

    .site-header {
      display:flex;
      align-items:center;
      gap:12px;
      padding:0 4px;
      margin-bottom:4px;
      position:relative;
      z-index:10;
      overflow:visible;
    }
    .site-logo {
      width:42px; height:42px;
      background:linear-gradient(135deg, #2563EB, #4F46E5);
      border-radius:12px;
      display:flex; align-items:center; justify-content:center;
      flex-shrink:0;
      box-shadow:0 4px 14px rgba(37,99,235,0.25);
    }
    .site-logo svg { width:24px; height:24px; }
    .site-name {
      font-size:1.3rem; font-weight:700; letter-spacing:-0.02em;
      color:var(--color-fg);
      margin-right:auto;
    }

    .password-display {
      position:relative;
      background:rgba(255,255,255,0.55);
      backdrop-filter:blur(8px);
      -webkit-backdrop-filter:blur(8px);
      border:1px solid rgba(0,0,0,0.06);
      border-radius:var(--radius-md);
      padding:16px 50px 16px 18px;
      display:flex; align-items:center;
      min-height:58px;
      transition:border-color var(--transition);
    }
    .password-display:focus-within {
      border-color:var(--color-primary);
      box-shadow:0 0 0 3px rgba(37,99,235,0.12);
    }
    .password-text {
      flex:1;
      font-family:var(--font-mono);
      font-size:1.15rem; font-weight:600;
      letter-spacing:0.04em; color:var(--color-fg);
      word-break:break-all; line-height:1.4;
      user-select:all;
    }
    .password-placeholder { color:#CBD5E1; font-family:var(--font-mono); font-size:1rem; user-select:none; }
    .btn-copy {
      position:absolute; right:8px; top:50%; transform:translateY(-50%);
      width:38px; height:38px; border-radius:10px; border:none;
      background:rgba(37,99,235,0.08); color:var(--color-primary);
      cursor:pointer; display:flex; align-items:center; justify-content:center;
      transition:all var(--transition); flex-shrink:0;
    }
    .btn-copy:hover { background:var(--color-primary); color:#fff; }
    .btn-copy:active { transform:translateY(-50%) scale(0.93); }
    .btn-copy.copied { background:var(--color-success); color:#fff; }
    .btn-copy svg { width:18px; height:18px; }

    .strength-meter { margin-top:16px; }
    .strength-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
    .strength-label { font-size:0.8rem; font-weight:600; text-transform:uppercase; letter-spacing:0.05em; color:var(--color-text-secondary); }
    .strength-value { font-size:0.8rem; font-weight:600; }
    .strength-bar-track { height:6px; background:rgba(0,0,0,0.06); border-radius:99px; overflow:hidden; }
    .strength-bar-fill {
      height:100%; border-radius:99px;
      transition:width 350ms cubic-bezier(0.4,0,0.2,1), background 350ms cubic-bezier(0.4,0,0.2,1);
      width:0%;
    }

    .section-title {
      font-size:0.75rem; font-weight:600; text-transform:uppercase;
      letter-spacing:0.06em; color:var(--color-text-secondary); margin-bottom:12px;
    }

    .range-row { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:4px; }
    .slider-group { flex:1; margin-right:12px; position:relative; }
    .slider-group input[type="range"] { width:100%; }
    .slider-group .tick-marks { position:relative; z-index:1; }
    .range-value { font-size:1.5rem; font-weight:700; color:var(--color-primary); font-variant-numeric:tabular-nums; min-width:32px; text-align:right; }

    input[type="range"] {
      -webkit-appearance:none; width:100%; height:8px; border-radius:99px;
      background:linear-gradient(to right, var(--color-primary) 0%, var(--color-primary) 50%, rgba(0,0,0,0.08) 50%, rgba(0,0,0,0.08) 100%);
      outline:none; cursor:pointer; margin:8px 0;
      --thumb-size: 24px;
    }
    input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance:none; width:var(--thumb-size); height:var(--thumb-size); border-radius:50%;
      background:#fff; border:2px solid var(--color-primary);
      box-shadow:0 2px 8px rgba(0,0,0,0.12); cursor:pointer; margin-top:-8px;
      transition:box-shadow var(--transition), transform var(--transition);
    }
    input[type="range"]::-webkit-slider-thumb:hover { box-shadow:0 4px 16px rgba(37,99,235,0.35); transform:scale(1.1); }
    input[type="range"]::-webkit-slider-thumb:active { transform:scale(1.05); box-shadow:0 2px 12px rgba(37,99,235,0.3); }

    .tick-marks { display:flex; justify-content:space-between; padding:0 calc(var(--thumb-size, 24px) / 2); margin-top:2px; box-sizing:border-box; }
    .tick-marks span { font-size:0.65rem; font-weight:500; color:#94A3B8; cursor:pointer; transition:color var(--transition); padding:0; border-radius:4px; min-width:20px; text-align:center; }
    .tick-marks span:hover { color:var(--color-primary); }

    .option-section { margin-top:20px; }
    .option-item {
      display:flex; align-items:center; gap:12px;
      padding:10px 14px; border-radius:var(--radius-sm);
      cursor:pointer; transition:background var(--transition); user-select:none;
    }
    .option-item:hover { background:rgba(37,99,235,0.04); }
    .option-item input[type="checkbox"] { display:none; }
    .opt-check {
      width:20px; height:20px; border-radius:6px;
      border:2px solid #CBD5E1; flex-shrink:0;
      display:flex; align-items:center; justify-content:center;
      transition:all var(--transition); background:#fff;
    }
    .option-item input:checked + .opt-check {
      background:var(--color-primary); border-color:var(--color-primary);
    }
    .option-item input:checked + .opt-check::after {
      content:''; display:block; width:6px; height:10px;
      border:solid #fff; border-width:0 2px 2px 0;
      transform:rotate(45deg); margin-top:-1px;
    }
    .opt-label { font-size:0.9rem; font-weight:500; color:var(--color-fg); }
    .opt-hint {
      margin-left:auto; font-size:0.72rem; color:var(--color-text-secondary);
      font-family:var(--font-mono); padding:2px 8px;
      background:rgba(0,0,0,0.03); border-radius:5px;
      cursor:help; position:relative;
    }
    .opt-hint::after {
      content:attr(data-tooltip);
      position:absolute; bottom:calc(100% + 8px); right:0;
      background:var(--color-fg); color:#fff;
      padding:8px 12px; border-radius:8px;
      font-size:0.75rem; font-family:'Inter',sans-serif;
      white-space:nowrap; pointer-events:none;
      opacity:0; transition:opacity 200ms;
      box-shadow:0 4px 12px rgba(0,0,0,0.15);
      z-index:10;
    }
    .opt-hint:hover::after { opacity:1; }

    .btn-adv {
      display:flex; align-items:center; justify-content:space-between;
      width:100%; padding:10px 14px; border:none; border-radius:var(--radius-sm);
      background:transparent; color:var(--color-text-secondary); cursor:pointer;
      font-family:'Inter',sans-serif; font-size:0.85rem; font-weight:500;
      margin-top:4px; transition:all var(--transition);
    }
    .btn-adv:hover { background:rgba(37,99,235,0.04); color:var(--color-primary); }
    .btn-adv svg { transition:transform var(--transition); width:16px; height:16px; }
    .btn-adv.open svg { transform:rotate(180deg); }
    .btn-adv.disabled { opacity:0.45; cursor:default; }
    .btn-adv.disabled:hover { background:transparent; color:var(--color-text-secondary); }

    .advanced-settings {
      max-height:0; overflow:hidden;
      transition:max-height 350ms cubic-bezier(0.4,0,0.2,1), padding 350ms cubic-bezier(0.4,0,0.2,1), margin 350ms cubic-bezier(0.4,0,0.2,1);
      padding:0 14px; margin:0;
    }
    .advanced-settings.open {
      max-height:600px;
      padding:12px 14px;
      margin:6px 0 0;
    }
    .adv-notice {
      font-size:0.72rem; color:#DC2626; margin-bottom:8px;
      padding:6px 10px; background:rgba(220,38,38,0.06);
      border-radius:6px; display:none;
    }
    .adv-notice.show { display:block; }
    .adv-hint {
      font-size:0.7rem; color:var(--color-text-secondary); margin-bottom:8px;
    }
    .symbol-grid {
      display:grid;
      grid-template-columns:repeat(6, 1fr);
      gap:6px;
      opacity:1; transition:opacity var(--transition);
    }
    .symbol-grid.inactive { opacity:0.5; pointer-events:none; }
    .sym-tag {
      display:flex; align-items:center; justify-content:center;
      padding:6px 4px; border-radius:6px;
      border:1px solid #CBD5E1; background:#fff;
      font-family:var(--font-mono); font-size:0.85rem;
      cursor:pointer; user-select:none;
      transition:all var(--transition);
    }
    .symbol-grid.inactive .sym-tag { cursor:default; }
    .symbol-grid:not(.inactive) .sym-tag:hover { border-color:var(--color-primary); }
    .sym-tag.selected {
      background:var(--color-primary); color:#fff; border-color:var(--color-primary);
    }

    .btn-reset {
      width:100%; padding:10px; border:1px solid #CBD5E1; border-radius:var(--radius-sm);
      background:transparent; color:var(--color-text-secondary);
      cursor:pointer; font-family:'Inter',sans-serif; font-size:0.8rem;
      margin-top:6px; transition:all var(--transition);
    }
    .btn-reset:hover { border-color:var(--color-danger); color:var(--color-danger); background:rgba(239,68,68,0.04); }

    .btn-generate {
      width:100%; padding:14px; border:none; border-radius:var(--radius-md);
      background:linear-gradient(135deg, var(--color-primary), #1D4ED8);
      color:#fff; font-family:'Inter',sans-serif; font-size:1rem; font-weight:600;
      cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px;
      transition:all var(--transition);
      box-shadow:0 4px 18px rgba(37,99,235,0.25);
    }
    .btn-generate:hover { transform:translateY(-1px); box-shadow:0 8px 28px rgba(37,99,235,0.35); }
    .btn-generate:active { transform:translateY(0); box-shadow:0 2px 12px rgba(37,99,235,0.2); }
    .btn-generate svg { width:20px; height:20px; transition:transform 400ms cubic-bezier(0.4,0,0.2,1); }
    .btn-generate:active svg { transform:rotate(180deg); }

    .multi-results { display:none; flex-direction:column; gap:8px; }
    .multi-results.show { display:flex; }
    .result-item {
      display:flex; align-items:center; gap:10px;
      background:var(--color-surface);
      backdrop-filter:blur(18px);
      -webkit-backdrop-filter:blur(18px);
      border:1px solid var(--color-border);
      border-radius:var(--radius-sm);
      padding:10px 14px; box-shadow:var(--shadow-glass);
    }
    .result-index {
      font-size:0.7rem; font-weight:700; color:var(--color-text-secondary);
      min-width:20px; flex-shrink:0;
    }
    .result-password {
      flex:1; font-family:var(--font-mono);
      font-size:0.9rem; font-weight:500; letter-spacing:0.03em;
      word-break:break-all; line-height:1.4;
    }
    .result-copy {
      flex-shrink:0; width:32px; height:32px; border-radius:8px; border:none;
      background:rgba(37,99,235,0.08); color:var(--color-primary);
      cursor:pointer; display:flex; align-items:center; justify-content:center;
      transition:all var(--transition);
    }
    .result-copy svg { width:15px; height:15px; }
    .result-copy:hover { background:var(--color-primary); color:#fff; }
    .btn-copy-all {
      width:100%; padding:10px; border:1px solid var(--color-primary); border-radius:var(--radius-sm);
      background:transparent; color:var(--color-primary);
      cursor:pointer; font-family:'Inter',sans-serif; font-size:0.85rem; font-weight:500;
      transition:all var(--transition);
    }
    .btn-copy-all:hover { background:var(--color-primary); color:#fff; }

    .footer-text {
      text-align:center; font-size:0.72rem; color:#94A3B8; margin-top:4px;
    }
    .help-toggle {
      display:inline-block; margin-left:4px; color:var(--color-primary);
      cursor:pointer; font-weight:500; text-decoration:underline;
      font-size:0.72rem; border:none; background:none; font-family:inherit;
    }
    .help-toggle:hover { color:#1D4ED8; }

    .help-section {
      display:none;
      width:100%; max-width:700px;
      margin:0 auto 20px; padding:0 20px;
    }
    .help-section.show { display:block; }
    .help-content {
      background:var(--color-surface);
      backdrop-filter:blur(18px);
      -webkit-backdrop-filter:blur(18px);
      border:1px solid var(--color-border);
      border-radius:var(--radius-lg);
      padding:32px 28px;
      box-shadow:var(--shadow-glass);
      font-size:0.92rem; line-height:1.75; color:#334155;
    }
    .help-content h2 {
      font-size:1.3rem; font-weight:700; margin:28px 0 12px; color:var(--color-fg);
    }
    .help-content h2:first-child { margin-top:0; }
    .help-content h3 {
      font-size:1.05rem; font-weight:600; margin:20px 0 8px; color:var(--color-fg);
    }
    .help-content p { margin-bottom:12px; }
    .help-content ul, .help-content ol { margin:8px 0 16px 20px; }
    .help-content li { margin-bottom:6px; }
    .help-content strong { color:var(--color-fg); }
    .help-content code {
      background:rgba(37,99,235,0.08); color:var(--color-primary);
      padding:2px 6px; border-radius:4px; font-family:var(--font-mono); font-size:0.85em;
    }

    .ad-section {
      width:100%; max-width:500px; margin:0; padding:0 20px;
      position:relative; z-index:1;
    }
    .ad-box {
      position:relative;
      background:var(--color-surface);
      backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
      border:1px solid var(--color-border); border-radius:var(--radius-sm);
      padding:8px 14px; display:flex; align-items:center; gap:8px;
      font-size:0.8rem; color:var(--color-text-secondary);
      box-shadow:var(--shadow-glass);
      overflow:hidden;
    }
    .ad-box::before {
      content:'';
      position:absolute; top:-1px; left:-1px; right:-1px; bottom:-1px;
      z-index:-1;
      border-radius:calc(var(--radius-sm) + 1px);
      background:linear-gradient(45deg, #2563EB, #3B82F6, #4F46E5, #06B6D4, #2563EB);
      background-size:400% 400%;
      animation:adGlow 4s ease-in-out infinite;
      opacity:0.25;
    }
    .ad-box::after {
      content:'';
      position:absolute; inset:1px; z-index:-1;
      border-radius:calc(var(--radius-sm) - 1px);
      background:var(--color-surface);
      backdrop-filter:blur(18px);
      -webkit-backdrop-filter:blur(18px);
    }
    @keyframes adGlow {
      0%, 100% { background-position:0% 50%; opacity:0.15; }
      50% { background-position:100% 50%; opacity:0.6; }
    }
    .ad-badge {
      position:absolute; top:0; left:0; z-index:2;
      font-size:0.5rem; font-weight:700; letter-spacing:0.04em;
      color:rgba(255,255,255,0.9); padding:2px 6px 2px 4px;
      background:linear-gradient(135deg, #64748B, #475569);
      border-radius:0 0 6px 0; line-height:1.3;
    }
    .ad-link {
      position:relative; z-index:1;
      color:#475569; text-decoration:none; white-space:nowrap;
      overflow:hidden; text-overflow:ellipsis; transition:color var(--transition);
      padding-left:20px;
    }
    .ad-link:hover { color:var(--color-primary); text-decoration:none; }
    .ad-cta {
      position:relative; z-index:1;
      flex-shrink:0; font-size:0.72rem; font-weight:600;
      color:#fff; padding:4px 10px; border-radius:4px;
      background:var(--color-primary); cursor:pointer;
      transition:all var(--transition); text-decoration:none;
    }
    .ad-cta:hover { background:#1D4ED8; transform:scale(1.02); }

    .site-footer {
      width:100%; padding:16px 20px 24px; text-align:center; flex-shrink:0;
    }
    .footer-copyright { font-size:0.7rem; color:#94A3B8; line-height:1.6; }
    .footer-icp { display:none; font-size:0.7rem; color:#94A3B8; margin-top:4px; }

    .toast {
      position:fixed; top:20px; left:50%;
      transform:translateX(-50%) translateY(-120px);
      background:var(--color-fg); color:#fff;
      padding:12px 24px; border-radius:99px;
      font-size:0.85rem; font-weight:500;
      z-index:100; pointer-events:none;
      transition:transform 300ms cubic-bezier(0.16,1,0.3,1);
      box-shadow:0 8px 32px rgba(0,0,0,0.18);
    }
    .toast.show { transform:translateX(-50%) translateY(0); }

    @media (max-width: 480px) {
      .page-wrapper { padding:12px; padding-top:30px; }
      .container { gap:12px; }
      .card { padding:20px 18px; border-radius:var(--radius-md); }
      .password-text { font-size:1rem; }
      .site-name { font-size:1.15rem; }
      .site-logo { width:36px; height:36px; }
      .site-logo svg { width:21px; height:21px; }
      .option-item { padding:8px 10px; }
      .btn-generate { padding:12px; font-size:0.95rem; }
      .help-content { padding:24px 18px; font-size:0.85rem; }
      .ad-section { max-width:none; padding:0 12px; }
      .site-footer { padding:14px 16px 20px; }
      .symbol-grid { grid-template-columns:repeat(6, 1fr); gap:4px; }
      .sym-tag { font-size:0.75rem; }
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { transition-duration:0ms !important; animation-duration:0ms !important; }
    }

    .lang-switcher { position:relative; flex-shrink:0; }
    .lang-btn {
      display:flex; align-items:center; gap:6px;
      padding:6px 10px;
      background:var(--color-surface);
      backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
      border:1px solid var(--color-border); border-radius:var(--radius-sm);
      cursor:pointer; font-family:'Inter',sans-serif;
      font-size:0.78rem; font-weight:600; letter-spacing:0.02em;
      color:var(--color-fg); box-shadow:var(--shadow-glass);
      transition:all var(--transition);
    }
    .lang-btn:hover { background:rgba(37,99,235,0.06); color:var(--color-primary); }
    .lang-btn svg { width:14px; height:14px; }
    .lang-dropdown {
      position:absolute; top:calc(100% + 6px); right:0;
      display:none;
      background:var(--color-surface);
      backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
      border:1px solid var(--color-border); border-radius:var(--radius-md);
      padding:5px; box-shadow:var(--shadow-glass);
      min-width:170px; max-height:380px; overflow-y:auto;
    }
    .lang-dropdown.open { display:block; }
    .lang-dropdown button {
      display:flex; align-items:center; justify-content:space-between; gap:8px;
      width:100%; padding:8px 11px; border:none; background:transparent;
      text-align:left; font-size:0.84rem; cursor:pointer; border-radius:6px;
      color:var(--color-fg); font-family:'Inter',sans-serif;
      transition:background var(--transition);
    }
    .lang-dropdown button:hover { background:rgba(37,99,235,0.06); }
    .lang-dropdown button.active {
      background:rgba(37,99,235,0.1); color:var(--color-primary); font-weight:600;
    }
    .lang-dropdown .check { opacity:0; color:var(--color-primary); font-weight:700; }
    .lang-dropdown button.active .check { opacity:1; }

    @media (max-width: 480px) {
      .lang-btn { padding:5px 8px; font-size:0.72rem; }
      .lang-dropdown { min-width:150px; max-height:300px; }
    }