:root {
  --bg: #eef3f8;
  --panel: #ffffff;
  --panel-soft: #f7f9fc;
  --border: #d5dee8;
  --text: #243447;
  --muted: #617487;
  --link: #336699;
  --accent: #dce8f5;
  --shadow: 0 10px 30px rgba(39, 62, 84, 0.08);
}
* { box-sizing: border-box; }
body { margin: 0; font-family: Arial, Helvetica, sans-serif; color: var(--text); background: linear-gradient(180deg, #f7fbff 0%, var(--bg) 100%); }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
.wrap { width: min(1100px, calc(100% - 32px)); margin: 0 auto; }
.site-header { background: #f8fbff; border-bottom: 1px solid var(--border); position: sticky; top:0; z-index:10; }
.topbar { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:14px 0; }
.brand { display:flex; flex-direction:column; color: var(--text); text-decoration:none; }
.brand-kicker { font-size:12px; text-transform:uppercase; letter-spacing:.16em; color:#6f86a0; }
.brand-title { font-size:24px; font-weight:700; }
.nav { display:flex; gap:16px; flex-wrap:wrap; }
.nav a { padding:8px 10px; border-radius:8px; }
.nav a:hover { background: var(--accent); text-decoration:none; }
.hero { padding: 42px 0 30px; }
.hero-grid { display:grid; grid-template-columns: 1.2fr .8fr; gap:24px; }
.card { background: var(--panel); border:1px solid var(--border); border-radius:16px; box-shadow: var(--shadow); }
.hero-copy { padding:28px; }
.hero-copy h1 { font-size: 42px; line-height:1.1; margin: 8px 0 12px; }
.hero-copy p { color: var(--muted); font-size: 18px; line-height:1.7; }
.kicker { display:inline-block; font-size:12px; text-transform:uppercase; letter-spacing:.16em; color:#6f86a0; }
.search-panel { padding:22px; }
.search-panel h2, .section-head h2 { margin: 0 0 8px; }
.grid-2 { display:grid; grid-template-columns: repeat(2, 1fr); gap:24px; }
.section { padding: 10px 0 34px; }
.section-head { margin-bottom: 16px; }
.section-head p { color: var(--muted); margin:0; }
.category-list, .guide-list, .result-list { display:grid; gap:14px; }
.category-card, .guide-card, .result-card { padding:18px; background:var(--panel); border:1px solid var(--border); border-radius:14px; box-shadow: var(--shadow); }
.category-card p, .guide-card p, .result-card p, .meta, .muted { color: var(--muted); }
.guide-card h3, .result-card h3 { margin:8px 0; font-size: 22px; }
.filters { display:flex; gap:10px; flex-wrap:wrap; margin: 16px 0; }
.filters input, .filters select { padding: 10px 12px; border-radius:10px; border:1px solid #c8d4df; background:#fff; min-height:42px; }
.filters button { padding: 10px 14px; border-radius:10px; border:1px solid #aec5da; background:#e9f2fa; color:#24405d; cursor:pointer; }
.search-fallback { margin-top: 18px; padding: 18px; border:1px solid #cfe0ef; background:#f7fbff; border-radius:14px; }
.tags { display:flex; flex-wrap:wrap; gap:8px; margin-top: 12px; }
.tag { font-size:12px; padding:6px 9px; border-radius:999px; background:#edf4fb; border:1px solid #d6e3f0; color:#4b6680; }
.article-layout { display:grid; grid-template-columns: 1fr 280px; gap:24px; padding: 30px 0 42px; }
.article-main { padding: 28px; }
.article-main h1 { font-size: 40px; line-height:1.15; margin: 6px 0 12px; }
.article-main p { line-height:1.8; font-size: 18px; color:#33485d; }
.sidebar { padding: 20px; }
.sidebar h3 { margin-top: 0; }
.sidebar ul { padding-left: 18px; margin: 0; }
.sidebar li { margin-bottom: 10px; }
.site-footer { margin-top: 28px; border-top: 1px solid var(--border); background:#f7fbff; }
.footer-grid { display:flex; justify-content:space-between; gap:20px; padding:22px 0; }
.footer-grid > div:last-child { display:flex; gap:12px; flex-wrap:wrap; align-content:flex-start; }
.gcse-shell { min-height: 110px; }
.empty-note { font-style: italic; color: #6a7e91; }
@media (max-width: 900px) {
  .hero-grid, .grid-2, .article-layout { grid-template-columns: 1fr; }
  .hero-copy h1, .article-main h1 { font-size: 34px; }
}



.hero-actions { display:flex; gap:12px; flex-wrap:wrap; margin: 22px 0 8px; }
.btn { display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding: 0 16px; border-radius: 12px; font-weight:700; text-decoration:none; }
.btn:hover { text-decoration:none; }
.btn-primary { background:#2f5f93; color:#fff; border:1px solid #2f5f93; }
.btn-primary:hover { background:#264f7a; border-color:#264f7a; }
.btn-secondary { background:#fff; color:#2f5f93; border:2px solid #3b6ea5; }
.btn-secondary:hover { background:#f0f6fd; }
.search-preview-box { display:grid; grid-template-columns: 1fr auto; gap:0; margin:16px 0 8px; }
.preview-input { min-height:50px; display:flex; align-items:center; padding:0 14px; border:1px solid #bfd2e6; border-right:0; border-radius:12px 0 0 12px; background:#fff; color:#718395; }
.preview-button { min-width:132px; min-height:50px; display:inline-flex; align-items:center; justify-content:center; border:2px solid #3b6ea5; border-radius:0 12px 12px 0; background:#fff; color:#2f5f93; font-weight:700; }
.preview-button:hover { background:#f0f6fd; text-decoration:none; }
.browse-head, .search-page-head, .local-results-head { display:flex; align-items:end; justify-content:space-between; gap:16px; }
.search-page-card { padding:24px; margin-bottom:20px; }
.search-page-intro { margin-bottom:12px; }
.search-page-section .gcse-shell-dedicated { min-height: 120px; }
.search-fallback-prominent { margin-top: 0; }

.gcse-shell-dedicated .gsc-search-box table,
.gcse-shell-dedicated .gsc-search-box tbody,
.gcse-shell-dedicated .gsc-search-box tr { width:100% !important; }
.gcse-shell-dedicated .gsc-search-box td.gsc-input { width:100% !important; }
.gcse-shell-dedicated .gsc-search-box td.gsc-search-button { width:1% !important; white-space:nowrap !important; }
.gcse-shell-dedicated .gsc-input-box { width:100% !important; }

@media (max-width: 700px) {
  .hero-actions, .browse-head, .search-page-head, .local-results-head { align-items:stretch; }
  .browse-head, .search-page-head, .local-results-head { flex-direction:column; }
  .search-preview-box { grid-template-columns: 1fr; gap:10px; }
  .preview-input { border-right:1px solid #bfd2e6; border-radius:12px; }
  .preview-button { width:100%; border-radius:12px; }
}


.hero-search { margin: 22px 0 8px; }
.search-row { display:grid; grid-template-columns: 1fr auto; gap:0; }
.search-row input {
  min-height:50px; padding:0 14px; border:1px solid #bfd2e6; border-right:0;
  border-radius:12px 0 0 12px; background:#fff; color:#33485d; font-size:16px;
}
.search-row button {
  min-width:132px; min-height:50px; padding:0 20px; border:2px solid #3b6ea5;
  border-radius:0 12px 12px 0; background:#fff; color:#2f5f93; font-weight:700; cursor:pointer;
}
.search-row button:hover { background:#f0f6fd; }
.search-row-large input { min-height:56px; font-size:17px; }
.search-row-large button { min-height:56px; }
.feature-list { margin:14px 0 0; padding-left:18px; color: var(--muted); line-height:1.8; }
.search-engine-card { padding:24px; margin-bottom:20px; }
.search-controls { display:flex; gap:14px; flex-wrap:wrap; margin-top:14px; }
.search-controls label { display:flex; flex-direction:column; gap:6px; color:var(--muted); font-size:14px; }
.search-controls select { min-width:180px; min-height:42px; padding: 10px 12px; border-radius:10px; border:1px solid #c8d4df; background:#fff; }
.search-suggestions { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:16px; }
.search-summary { margin: 0 0 14px; color: var(--muted); }
.search-result-list { gap:16px; }
.result-topline { display:flex; justify-content:space-between; gap:16px; align-items:center; flex-wrap:wrap; }
.result-path { color:#7a8fa4; font-size:14px; word-break:break-all; }
mark { background:#fff2a8; color:inherit; padding:0 2px; border-radius:3px; }
.tag-link:hover { text-decoration:none; background:#e4eef8; }
@media (max-width: 700px) {
  .search-row { grid-template-columns: 1fr; gap:10px; }
  .search-row input { border-right:1px solid #bfd2e6; border-radius:12px; }
  .search-row button { width:100%; border-radius:12px; min-width:0; }
}