:root{
  --accent: #0a3d62; --accent-2: #07517d; --bg: #f4f7fa; --line: #dde3ea; --text: #1c232b; --muted: #647085;
}

.content{ padding: 22px; }

.intro{ display: flex; align-items: flex-start; gap: 12px; margin-bottom: 18px; padding: 13px 15px; background: #eef4f8; border: 1px solid #dbe6ee; border-radius: 10px; }
.intro-icon{ width: 22px; height: 22px; flex-shrink: 0; color: var(--accent-2); }
.intro-title{ font-weight: 700; font-size: 13.5px; color: var(--text); }
.intro-sub{ font-size: 12px; color: var(--muted); margin-top: 2px; line-height: 1.4; }

.controls{ display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.field{ flex: 1; min-width: 180px; }
.field label{ display: block; margin-bottom: 6px; font-weight: 700; font-size: 13px; color: var(--text); }
.field input{ width: 100%; padding: 11px 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; box-sizing: border-box; font-family: inherit; background: #fff; }
.field input:focus{ outline: none; border-color: var(--accent-2); box-shadow: 0 0 0 3px rgba(7,81,125,.12); }
.field .hint{ font-size: 11.5px; color: var(--muted); margin-top: 4px; }

.btns{ display: flex; gap: 10px; }
.app{ padding: 11px 20px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; border: none; border-radius: 8px; cursor: pointer; font-weight: 600; font-size: 13.5px; font-family: inherit; transition: filter .15s ease, transform .1s ease, box-shadow .15s ease; white-space: nowrap; box-shadow: 0 2px 8px rgba(10,61,98,.25); display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.btn-icon{ width: 15px; height: 15px; flex-shrink: 0; }
.app:hover{ filter: brightness(1.08); box-shadow: 0 4px 12px rgba(10,61,98,.32); }
.app:active{ transform: scale(.97); }
.app:disabled{ opacity: .6; cursor: default; filter: none; box-shadow: none; }
.app.ghost{ background: #fff; color: var(--accent-2); border: 1px solid var(--accent-2); box-shadow: none; }
.app.ghost:hover{ background: #eef4f8; filter: none; }

@media (max-width: 560px){
  .controls{ flex-direction: column; align-items: stretch; }
  .btns .app{ flex: 1; }
}

.result-box{ margin-top: 20px; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 18px; min-height: 130px; }

.loader{ text-align: center; color: var(--muted); animation: fg-pulse 1s infinite; padding: 30px 0; }
@keyframes fg-pulse{ 0%{ opacity: .35; } 50%{ opacity: 1; } 100%{ opacity: .35; } }
@keyframes fg-fade{ from{ opacity: 0; transform: translateY(4px); } to{ opacity: 1; transform: translateY(0); } }

.grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }

.offline-note{ grid-column: 1 / -1; background: #fdf3e0; border: 1px solid #f0d9a3; color: #8a5b13; border-radius: 8px; padding: 10px 14px; font-size: 12.5px; font-weight: 600; }

/* ---------- Skeleton loading cards ---------- */
.skeleton-card{ background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 20px 16px 16px; min-height: 92px; }
.skeleton-line{ height: 10px; border-radius: 6px; margin-bottom: 9px; background: linear-gradient(90deg, #e7ecf1 25%, #f4f7fa 37%, #e7ecf1 63%); background-size: 400% 100%; animation: fg-shimmer 1.4s ease infinite; }
.skeleton-line.short{ width: 55%; margin-bottom: 0; }
@keyframes fg-shimmer{ 0%{ background-position: 100% 50%; } 100%{ background-position: 0 50%; } }

/* ---------- Fact card ---------- */
.fact-card{ position: relative; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 20px 16px 14px; display: flex; flex-direction: column; gap: 8px; animation: fg-fade .3s ease-in; transition: transform .15s ease, box-shadow .15s ease; }
.fact-card:hover{ transform: translateY(-2px); box-shadow: 0 10px 22px rgba(10,61,98,.14); }
.fact-badge{ position: absolute; top: -11px; left: 14px; width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; font-size: 11.5px; font-weight: 800; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(10,61,98,.35); }
.fact-text{ margin-top: 6px; font-size: 14.5px; font-weight: 600; line-height: 1.55; color: var(--text); }
.fact-source{ font-size: 11px; color: var(--muted); }
.fact-source.offline{ color: #a3730f; }
.fact-foot{ display: flex; justify-content: flex-end; margin-top: 2px; }

.copy-btn{ padding: 6px 12px; font-size: 11.5px; font-weight: 600; background: #eef4f8; color: var(--accent-2); border: 1px solid var(--line); border-radius: 6px; cursor: pointer; font-family: inherit; transition: background .15s ease, color .15s ease; }
.copy-btn:hover{ background: var(--accent-2); color: #fff; border-color: var(--accent-2); }
.copy-btn.copied{ background: #1f9d55; color: #fff; border-color: #1f9d55; }