/* 密码生成器 — 仅工具特有样式 */ /* 统计卡 */
.stats-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--yst-space-3); margin-bottom: var(--yst-space-4);
}
.stat-card { display: flex; align-items: center; gap: var(--yst-space-3); padding: var(--yst-space-4) var(--yst-space-5);
}
.stat-icon { width: 40px; height: 40px; flex-shrink: 0; background: var(--yst-brand-soft); color: var(--yst-brand); border-radius: var(--yst-radius); display: inline-flex; align-items: center; justify-content: center; font-size: 16px;
}
.stat-content { display: flex; flex-direction: column; gap: 2px; }
.stat-value { font: 700 22px/1 var(--yst-font); color: var(--yst-brand); letter-spacing: 1px; }
.stat-label { font-size: 12px; color: var(--yst-text-muted); letter-spacing: var(--yst-letter-spacing); } /* 密码显示区 */
.password-display-section { margin-bottom: var(--yst-space-4); } .password-box { display: flex; align-items: stretch; gap: var(--yst-space-2); background: var(--yst-bg-input); border: 2px solid var(--yst-border); border-radius: var(--yst-radius-md); padding: var(--yst-space-3); margin-bottom: var(--yst-space-4); transition: border-color var(--yst-dur) var(--yst-ease), box-shadow var(--yst-dur) var(--yst-ease);
}
.password-box:focus-within { border-color: var(--yst-brand); box-shadow: var(--yst-shadow-glow); } .password-text { flex: 1; min-width: 0; display: flex; align-items: center; padding: var(--yst-space-3); font: 600 clamp(15px, 2.4vw, 22px)/1.4 'JetBrains Mono', var(--yst-font-mono); color: var(--yst-text); word-break: break-all; user-select: all; letter-spacing: 0.04em;
}
.password-text .placeholder-text { color: var(--yst-text-muted); font-weight: 400; font-size: 14px; letter-spacing: 0;
} .password-actions { display: flex; gap: var(--yst-space-2); flex-shrink: 0; }
.action-btn { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--yst-border); border-radius: var(--yst-radius); background: var(--yst-bg-card); color: var(--yst-text-2); cursor: pointer; font-size: 16px; transition: all var(--yst-dur) var(--yst-ease);
}
.action-btn:hover { border-color: var(--yst-brand); color: var(--yst-brand); transform: translateY(-1px);
}
.action-btn.copy-btn:hover { background: var(--yst-success-bg); color: var(--yst-success); border-color: var(--yst-success); }
.action-btn.success { background: var(--yst-success-bg) !important; color: var(--yst-success) !important; border-color: var(--yst-success) !important; } /* 强度条 */
.strength-indicator { margin-bottom: var(--yst-space-4); }
.strength-bar { height: 8px; background: var(--yst-bg-subtle); border-radius: 999px; overflow: hidden; margin-bottom: var(--yst-space-2);
}
.strength-fill { height: 100%; background: var(--yst-text-light); border-radius: 4px; transition: width 400ms var(--yst-ease), background 200ms var(--yst-ease); width: 0%;
}
.strength-fill.weak { width: 25%; background: #ff5722; }
.strength-fill.fair { width: 50%; background: #ffb800; }
.strength-fill.good { width: 75%; background: #5fb878; }
.strength-fill.strong { width: 100%; background: var(--yst-brand); }
.strength-text { font-size: 13px; font-weight: 600; color: var(--yst-text-muted);
} /* 分析项 */
.password-analysis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--yst-space-2); padding: var(--yst-space-3); background: var(--yst-bg-subtle); border-radius: var(--yst-radius);
}
.analysis-item { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--yst-text-2);
}
.analysis-item i { color: var(--yst-brand); width: 16px; text-align: center; }
.analysis-item strong { color: var(--yst-text); font-weight: 700; } /* 控制面板 */
.control-panel { margin-bottom: var(--yst-space-4); }
.control-group { margin-bottom: var(--yst-space-5); }
.control-group:last-child { margin-bottom: 0; }
.control-group .yst-label, .control-group label { display: flex; align-items: center; gap: 8px; margin-bottom: var(--yst-space-3); font-size: 14px; font-weight: 600; color: var(--yst-text-2);
}
.control-group label i { color: var(--yst-brand); } /* 滑块 */
.slider { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; background: var(--yst-bg-subtle); border-radius: 999px; outline: none; cursor: pointer; margin-bottom: var(--yst-space-3);
}
.slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; background: var(--yst-brand); border-radius: 50%; cursor: pointer; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--yst-brand); transition: transform var(--yst-dur) var(--yst-ease);
}
.slider::-webkit-slider-thumb:hover { transform: scale(1.1); }
.slider::-moz-range-thumb { width: 18px; height: 18px; background: var(--yst-brand); border: 2px solid #fff; border-radius: 50%; cursor: pointer; box-shadow: 0 0 0 1px var(--yst-brand);
} /* 长度预设 */
.length-presets { display: flex; flex-wrap: wrap; gap: var(--yst-space-2); }
.preset-btn { flex: 1; min-width: 64px; padding: 8px 14px; background: var(--yst-bg-card); color: var(--yst-text-2); border: 1px solid var(--yst-border); border-radius: var(--yst-radius); font: 500 13px/1 var(--yst-font); cursor: pointer; transition: all var(--yst-dur) var(--yst-ease);
}
.preset-btn:hover { border-color: var(--yst-brand); color: var(--yst-brand); }
.preset-btn.active { background: var(--yst-brand); color: #fff; border-color: var(--yst-brand);
} /* 高级选项 */
.advanced-options { padding: 0; }
.toggle-advanced { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 14px; background: var(--yst-bg-subtle); color: var(--yst-text-2); border: 1px solid var(--yst-border); border-radius: var(--yst-radius); font: 600 14px/1 var(--yst-font); cursor: pointer; text-align: left; transition: all var(--yst-dur) var(--yst-ease);
}
.toggle-advanced:hover { background: var(--yst-bg-hover); border-color: var(--yst-brand); }
.toggle-advanced .toggle-icon { margin-left: auto; transition: transform var(--yst-dur) var(--yst-ease);
}
.toggle-advanced.active .toggle-icon { transform: rotate(180deg); }
.advanced-content { max-height: 0; overflow: hidden; transition: max-height var(--yst-dur) var(--yst-ease);
}
.advanced-content.show { max-height: 400px; padding-top: var(--yst-space-3); } .batch-controls .batch-input-wrapper { display: inline-flex; align-items: stretch; border: 1px solid var(--yst-border); border-radius: var(--yst-radius); overflow: hidden; background: var(--yst-bg-input);
}
.batch-btn { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border: none; background: var(--yst-bg-subtle); color: var(--yst-text-2); cursor: pointer; transition: all var(--yst-dur) var(--yst-ease);
}
.batch-btn:hover { background: var(--yst-brand-soft); color: var(--yst-brand); }
.batch-input { width: 70px; text-align: center; border: none; outline: none; background: transparent; color: var(--yst-text); font: 600 14px/1 var(--yst-font); appearance: textfield; -moz-appearance: textfield;
}
.batch-input::-webkit-outer-spin-button,
.batch-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* 生成按钮 */
.generate-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: var(--yst-space-3); height: 42px; padding: 0 24px; background: var(--yst-brand); color: #fff; border: 1px solid var(--yst-brand); border-radius: var(--yst-radius); font: 600 15px/1 var(--yst-font); letter-spacing: var(--yst-letter-spacing); cursor: pointer; transition: background var(--yst-dur) var(--yst-ease);
}
.generate-btn:hover { background: var(--yst-brand-hover); border-color: var(--yst-brand-hover);
}
.generate-btn:active { transform: translateY(1px); }
.generate-btn i { font-size: 14px; } /* 历史记录 */
.history-section { margin-bottom: var(--yst-space-4); }
.history-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--yst-space-4);
}
.history-header h3 { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; color: var(--yst-text);
}
.history-header h3 i { color: var(--yst-brand); }
.clear-history-btn { padding: 8px 12px; background: var(--yst-bg-subtle); color: var(--yst-text-muted); border: 1px solid var(--yst-border); border-radius: var(--yst-radius); cursor: pointer; transition: all var(--yst-dur) var(--yst-ease);
}
.clear-history-btn:hover { background: var(--yst-danger-bg); color: var(--yst-danger); border-color: var(--yst-danger); } .history-list { display: flex; flex-direction: column; gap: var(--yst-space-2); }
.history-empty { padding: var(--yst-space-8) var(--yst-space-4); text-align: center; color: var(--yst-text-muted);
}
.history-empty i { font-size: 36px; opacity: 0.3; margin-bottom: var(--yst-space-2); }
.history-empty p { margin: 0; font-size: 13px; } .history-item { display: flex; align-items: center; gap: var(--yst-space-3); padding: 10px var(--yst-space-3); background: var(--yst-bg-subtle); border: 1px solid var(--yst-border); border-radius: var(--yst-radius); transition: all var(--yst-dur) var(--yst-ease);
}
.history-item:hover { background: var(--yst-bg-hover); border-color: var(--yst-brand); }
.history-password { flex: 1; min-width: 0; font: 500 13px/1.4 'JetBrains Mono', var(--yst-font-mono); color: var(--yst-text); word-break: break-all;
}
.history-meta { font-size: 11px; color: var(--yst-text-muted); flex-shrink: 0;
}
.copy-history-btn { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--yst-border); border-radius: 6px; background: var(--yst-bg-card); color: var(--yst-text-muted); cursor: pointer; font-size: 12px; transition: all var(--yst-dur) var(--yst-ease);
}
.copy-history-btn:hover { border-color: var(--yst-brand); color: var(--yst-brand); } /* 安全建议 */
.security-tips { margin-bottom: var(--yst-space-4); }
.security-tips .section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--yst-space-4);
}
.security-tips .section-header h3 { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; color: var(--yst-text);
}
.security-tips .section-header h3 i { color: #f59e0b; }
.collapse-btn { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--yst-border); border-radius: var(--yst-radius); background: var(--yst-bg-card); color: var(--yst-text-muted); cursor: pointer; transition: all var(--yst-dur) var(--yst-ease);
}
.collapse-btn:hover { border-color: var(--yst-brand); color: var(--yst-brand); }
.collapse-btn .fa-chevron-up { transition: transform var(--yst-dur) var(--yst-ease); }
.tips-content.collapsed .collapse-btn .fa-chevron-up { transform: rotate(180deg); } .tips-content { overflow: hidden; transition: max-height var(--yst-dur) var(--yst-ease);
} .tips-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--yst-space-3);
}
.tip-card { position: relative; padding: var(--yst-space-4); background: var(--yst-bg-subtle); border: 1px solid var(--yst-border); border-radius: var(--yst-radius); text-align: center; transition: all var(--yst-dur) var(--yst-ease);
}
.tip-card:hover { transform: translateY(-3px); box-shadow: var(--yst-shadow); border-color: var(--yst-brand);
}
.tip-number { position: absolute; top: -8px; left: -8px; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; background: var(--yst-brand); color: #fff; border-radius: 50%; font: 700 11px/1 var(--yst-font);
}
.tip-card i { font-size: 24px; color: var(--yst-brand); margin-bottom: var(--yst-space-2);
}
.tip-card p { margin: 0; font-size: 13px; color: var(--yst-text-2); line-height: 1.5;
} /* Toast (兼容原 script.js) */
.toast { position: fixed; top: 80px; left: 50%; transform: translate(-50%, -20px); padding: 10px 20px; background: var(--yst-text); color: var(--yst-bg); border-radius: var(--yst-radius-pill); box-shadow: var(--yst-shadow-md); display: inline-flex; align-items: center; gap: 8px; font: 500 14px/1 var(--yst-font); opacity: 0; pointer-events: none; z-index: 9001; transition: all 250ms var(--yst-ease);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.error { background: var(--yst-danger); color: #fff; }
.toast i { font-size: 14px; } /* Loading */
.loading-overlay { position: fixed; inset: 0; background: rgba(11,16,32,0.6); backdrop-filter: blur(4px); display: none; align-items: center; justify-content: center; z-index: 9500;
}
.loading-overlay.show { display: flex; }
.loading-spinner { width: 48px; height: 48px; border: 4px solid rgba(255,255,255,0.2); border-top-color: #fff; border-radius: 50%; animation: spin 800ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } } /* 响应式 */
@media (max-width: 720px) { .password-box { flex-direction: column; } .password-actions { width: 100%; justify-content: stretch; } .password-actions .action-btn { flex: 1; } .stats-cards { grid-template-columns: 1fr; } .stat-card { padding: var(--yst-space-3); }
}