.vf-font-library {
  max-width: 1180px;
  margin: 34px auto 64px;
  padding: 0 20px;
  color: #10233e;
}

.vf-font-library-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(230px, 330px);
  gap: 28px;
  align-items: end;
  padding: 34px;
  border: 1px solid #c7d8e8;
  border-radius: 22px;
  color: #eff8ff;
  background: radial-gradient(circle at 90% 15%, #1e8c9d 0, transparent 33%), linear-gradient(135deg, #10233e, #173c68);
  box-shadow: 0 16px 38px rgba(16, 35, 62, .14);
}

.vf-font-library-hero span {
  display: block;
  margin-bottom: 8px;
  color: #91f3dd;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .12em;
}

.vf-font-library-hero h1 {
  margin: 0;
  color: inherit;
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.08;
}

.vf-font-library-hero p {
  max-width: 700px;
  margin: 14px 0 0;
  color: #d5e7f5;
  font-size: 17px;
  line-height: 1.7;
}

.vf-font-library-free {
  margin: 0 !important;
  padding: 16px;
  border: 1px solid rgba(145, 243, 221, .45);
  border-radius: 14px;
  color: #fff !important;
  background: rgba(2, 16, 34, .34);
  font-size: 14px !important;
  font-weight: 700;
}

.vf-font-library-categories {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 18px 0 0;
  padding: 15px 18px;
  border: 1px solid #d3e0eb;
  border-radius: 17px;
  background: #f8fbfe;
}
.vf-font-library-categories > strong {
  flex: 0 0 auto;
  color: #244461;
  font-size: 13px;
  font-weight: 900;
}
.vf-font-library-categories > div {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  gap: 8px;
}
.vf-font-library-categories button {
  min-height: 36px;
  padding: 6px 12px;
  border: 1px solid #c2d3e2;
  border-radius: 999px;
  color: #294d69;
  background: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.vf-font-library-categories button:hover,
.vf-font-library-categories button:focus-visible {
  border-color: #087f73;
  color: #087f73;
  outline: none;
}
.vf-font-library-categories button.is-active {
  border-color: #087f73;
  color: #fff;
  background: #087f73;
}

.vf-font-library-controls {
  display: grid;
  grid-template-columns: 2fr 1.3fr minmax(155px, .8fr) auto auto;
  gap: 12px;
  align-items: end;
  margin: 22px 0 12px;
  padding: 18px;
  border: 1px solid #d3e0eb;
  border-radius: 17px;
  background: #f8fbfe;
}

.vf-font-library-controls label {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: #38516c;
  font-size: 12px;
  font-weight: 800;
}

.vf-font-library-controls input:not([type="range"]):not([type="color"]),
.vf-font-library-controls select {
  min-width: 0;
  height: 43px;
  padding: 8px 10px;
  border: 1px solid #b9cada;
  border-radius: 10px;
  color: #10233e;
  background: #fff;
  font: inherit;
}

.vf-font-library-controls input[type="range"] { width: 100%; accent-color: #087f73; }
.vf-font-library-controls input[type="color"] { width: 100%; height: 43px; padding: 3px; border: 1px solid #b9cada; border-radius: 10px; background: #fff; cursor: pointer; }
.vf-font-library-controls output { color: #087f73; font-size: 12px; font-weight: 900; }
.vf-font-library-controls .secondary-button { min-height: 43px; white-space: nowrap; }

.vf-font-library-count { margin: 0 0 16px; color: #536d88; font-size: 14px; font-weight: 800; }

.vf-font-library-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.vf-font-library-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 244px;
  overflow: hidden;
  border: 1px solid #cddce9;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 7px 19px rgba(24, 56, 88, .08);
}

.vf-font-library-card[hidden] { display: none; }

.vf-font-library-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 16px 10px;
}

.vf-font-library-card h2 { margin: 0; color: #10233e; font-size: 17px; }
.vf-font-library-card h2 a { color: inherit; text-decoration: none; }
.vf-font-library-card h2 a:hover { color: #087f73; text-decoration: underline; }
.vf-font-library-card-head span { flex: 0 0 auto; padding: 4px 7px; border-radius: 999px; color: #17677a; background: #e2f6f3; font-size: 11px; font-weight: 800; }

.vf-font-library-sample {
  flex: 1 1 auto;
  min-height: 98px;
  margin: 0;
  padding: 14px 16px;
  overflow-wrap: anywhere;
  color: var(--vf-font-preview-color, #10233e);
  font-size: var(--vf-font-preview-size, 38px);
  line-height: 1.16;
}

.vf-font-library-sources { margin: 0; padding: 0 16px 13px; color: #5c738b; font-size: 12px; line-height: 1.4; }
.vf-font-library-sources a { color: #087f73; font-weight: 800; text-decoration: none; }
.vf-font-library-sources a:hover { text-decoration: underline; }

.vf-font-library-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 13px 16px 16px;
  border-top: 1px solid #e2ebf2;
}

.vf-font-library-actions a { min-height: 39px; display: inline-flex; align-items: center; justify-content: center; padding: 7px 9px; text-align: center; font-size: 12px; line-height: 1.2; }

.vf-font-library-notice { margin: 20px 0 0; padding: 13px 15px; border-inline-start: 4px solid #087f73; border-radius: 8px; color: #49627b; background: #f0f8f7; line-height: 1.6; }

.vf-font-library-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 24px 0 0;
}
.vf-font-library-pagination button {
  min-width: 40px;
  min-height: 40px;
  padding: 7px 11px;
  border: 1px solid #bfd0df;
  border-radius: 10px;
  color: #173c68;
  background: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}
.vf-font-library-pagination button:hover:not(:disabled),
.vf-font-library-pagination button:focus-visible { border-color: #087f73; color: #087f73; outline: none; }
.vf-font-library-pagination button[aria-current="page"] { border-color: #087f73; color: #fff; background: #087f73; cursor: default; }
.vf-font-library-pagination button:disabled:not([aria-current="page"]) { color: #90a2b4; background: #eff4f7; cursor: not-allowed; }
.vf-font-library-ellipsis { padding: 0 3px; color: #5d748a; font-weight: 900; }

.vf-font-detail {
  max-width: 900px;
  margin: 36px auto 64px;
  padding: 0 20px;
  color: #10233e;
}
.vf-font-detail-back { margin: 0 0 14px; font-weight: 800; }
.vf-font-detail-back a { color: #087f73; text-decoration: none; }
.vf-font-detail > header { padding: 32px; border-radius: 20px; color: #eefaff; background: linear-gradient(135deg, #10233e, #1c507e); }
.vf-font-detail > header span { display: inline-block; padding: 5px 9px; border-radius: 999px; color: #d4fff4; background: rgba(0,0,0,.2); font-size: 12px; font-weight: 800; }
.vf-font-detail h1 { margin: 14px 0 8px; color: inherit; font-size: clamp(31px, 5vw, 54px); line-height: 1.08; }
.vf-font-detail > header p { max-width: 680px; margin: 0; color: #d6e9f7; line-height: 1.65; }
.vf-font-detail-controls { display: grid; grid-template-columns: minmax(0, 2fr) minmax(150px, 1fr) minmax(95px, .45fr) auto; gap: 12px; align-items: end; margin: 18px 0; padding: 15px; border: 1px solid #cedfea; border-radius: 16px; background: #f8fbfe; }
.vf-font-detail-controls label { display: grid; gap: 6px; min-width: 0; color: #38516c; font-size: 12px; font-weight: 800; }
.vf-font-detail-controls input:not([type="range"]):not([type="color"]) { min-width: 0; height: 43px; padding: 8px 10px; border: 1px solid #b9cada; border-radius: 10px; color: #10233e; background: #fff; font: inherit; }
.vf-font-detail-controls input[type="range"] { width: 100%; accent-color: #087f73; }
.vf-font-detail-controls input[type="color"] { width: 100%; height: 43px; padding: 3px; border: 1px solid #b9cada; border-radius: 10px; background: #fff; }
.vf-font-detail-controls output { color: #087f73; font-size: 12px; font-weight: 900; }
.vf-font-detail-controls .secondary-button { min-height: 43px; white-space: nowrap; }
.vf-font-detail-sample { margin: 18px 0; padding: 30px; border: 1px solid #cedfea; border-radius: 16px; color: #10233e; background: #fff; font-size: 58px; line-height: 1.1; overflow-wrap: anywhere; box-shadow: 0 8px 22px rgba(24,56,88,.08); }
.vf-font-detail section { margin-top: 18px; padding: 22px; border: 1px solid #d5e1eb; border-radius: 16px; background: #f9fcff; }
.vf-font-detail section h2 { margin: 0 0 10px; font-size: 21px; }
.vf-font-detail section p { margin: 0; color: #48627d; line-height: 1.7; }
.vf-font-detail-license { margin-bottom: 14px !important; }
.vf-font-detail-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.vf-font-detail-actions a { min-height: 43px; display: inline-flex; align-items: center; justify-content: center; padding: 8px 12px; text-align: center; }

/* Font Finder promotion: file stays in the visitor's browser until the
   destination page opens; choosing it here does not start a paid analysis. */
.vf-font-library-finder-promo { display:grid; grid-template-columns:minmax(0,1fr) minmax(270px,.8fr); gap:22px; align-items:center; margin:22px 0; padding:24px; border:1px solid #75b7dc; border-radius:20px; color:#eefaff; background:radial-gradient(circle at 88% 16%,rgba(89,206,237,.3),transparent 29%),linear-gradient(135deg,#0b263d,#12486e); box-shadow:0 14px 32px rgba(16,54,83,.15); }
.vf-font-library-finder-copy span { display:block; margin-bottom:7px; color:#8ce7ff; font-size:11px; font-weight:900; letter-spacing:.13em; }
.vf-font-library-finder-copy h2 { margin:0 0 9px; color:#fff; font-size:clamp(21px,3vw,29px); }
.vf-font-library-finder-copy p { max-width:660px; margin:0; color:#c8e4f4; line-height:1.65; }
.vf-font-library-finder-upload { position:relative; display:flex; min-height:150px; padding:18px; flex-direction:column; align-items:center; justify-content:center; gap:7px; border:2px dashed #83dcf1; border-radius:16px; color:#fff; background:rgba(2,19,35,.32); text-align:center; cursor:pointer; transition:background .2s,border-color .2s,transform .2s; }
.vf-font-library-finder-upload:hover,.vf-font-library-finder-promo.is-dragging .vf-font-library-finder-upload { border-color:#fff; background:rgba(8,68,100,.8); transform:translateY(-1px); }
.vf-font-library-finder-upload input { position:absolute; width:1px; height:1px; overflow:hidden; opacity:0; }
.vf-font-library-finder-upload span { display:grid; width:45px; height:45px; place-items:center; border-radius:13px; color:#0c3551; background:#9beaff; font-size:20px; font-weight:900; }
.vf-font-library-finder-upload strong { font-size:16px; }
.vf-font-library-finder-upload small { color:#c6e5f5; line-height:1.4; }
.vf-font-library-finder-status { grid-column:1 / -1; min-height:1.3em; margin:0; color:#b9f2db; font-size:13px; font-weight:800; }
.vf-font-library-finder-promo.is-preparing .vf-font-library-finder-upload { pointer-events:none; opacity:.72; }

@media (max-width: 1050px) {
  .vf-font-library-controls { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vf-font-library-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  .vf-font-library { margin-top: 20px; padding: 0 14px; }
  .vf-font-library-hero { grid-template-columns: 1fr; padding: 24px 20px; gap: 18px; }
  .vf-font-library-categories { align-items: flex-start; flex-direction: column; gap: 10px; padding: 14px; }
  .vf-font-library-controls { grid-template-columns: 1fr; padding: 14px; }
  .vf-font-library-grid { grid-template-columns: 1fr; }

  .vf-font-library-finder-promo { grid-template-columns:1fr; padding:20px; }
  .vf-font-library-actions { grid-template-columns: 1fr; }
  .vf-font-detail { margin-top: 22px; padding: 0 14px; }
  .vf-font-detail > header { padding: 24px 20px; }
  .vf-font-detail-controls { grid-template-columns: 1fr; }
  .vf-font-detail-sample { padding: 22px 18px; }
}