/* 页面样式入口：引用公共样式 */
@import url('/static/common/css/style.css');

/* 覆盖顶部为蓝色样式（与早期风格一致） */

/* 优化按钮UI */
.beauty-btn { background: #4285f4; color: #fff; border: none; padding: 10px 22px; border-radius: 8px; font-size: 15px; font-family: inherit; cursor: pointer; box-shadow: 0 2px 8px rgba(66,133,244,0.18); transition: background .18s, box-shadow .2s, transform .08s; }
.beauty-btn:hover { background: #2568d6; box-shadow: 0 4px 12px rgba(66,133,244,0.28); }
.beauty-btn:active { transform: translateY(1px); }

/* 表单布局 */
.rs-form-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.rs-form-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.rs-label { min-width: 92px; font-weight: 600; color: #355; }
.rs-input { flex: 1; min-width: 220px; padding: 10px 12px; font-size: 15px; border: 1.5px solid #aac7fd; border-radius: 7px; background: #f8fbff; font-family: 'Consolas','Menlo',monospace; transition: border 0.2s, box-shadow 0.2s; }
.rs-input:focus { outline: none; border-color: #4285f4; box-shadow: 0 0 0 2px #d3e7ff; background: #f5faff; }
.rs-check { display: inline-flex; align-items: center; gap: 6px; margin-right: 14px; color: #444; }
.rs-tip { color: #888; font-size: 12px; }
.rs-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.rs-output { margin-top: 10px; }

/* 勾选框样式 */
.rs-check input[type="checkbox"] { width: 18px; height: 18px; accent-color: #4285f4; cursor: pointer; }
.rs-check input[type="checkbox"] { appearance: auto; -webkit-appearance: auto; border-radius: 4px; }

/* 文本域样式覆盖 */
#resultOutput.beauty-textarea { min-height: 120px; font-family: 'Consolas','Menlo',monospace; border: 1.5px solid #aac7fd; border-radius: 7px; background: #f8fbff; padding: 10px 12px; color: #222; }
#resultOutput.beauty-textarea:focus { outline: none; border-color: #4285f4; box-shadow: 0 0 0 2px #d3e7ff; background: #f5faff; }

/* 覆盖公共样式中的小屏折行策略：保持左右结构 */
@media (max-width: 680px) {
  .header { padding: 24px 0 20px 0; }
  .header-top { flex-direction: row !important; align-items: center; gap: 10px; }
  .header-left { flex: 1; }
  .header-right { width: auto !important; }
  .header-nav { width: auto !important; flex-wrap: nowrap !important; }
  .logo-text h1 { font-size: 1.4rem; }
  .logo-text p { font-size: .85rem; }
  .beauty-btn { width: 100%; }
}