@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Montserrat:wght@400;500;600;700;800&family=Playfair+Display:wght@600;700&family=Roboto+Slab:wght@400;500;700&family=Pacifico&family=Source+Sans+3:wght@400;500;600;700;800&display=swap");

.font-finder-root {
  position: relative;
  display: block;
  width: 100%;
  min-height: 100vh;
  overflow-x: hidden;
}



.font-finder-root {--bg: #060913;
  --card: rgba(255, 255, 255, 0.07);
  --card-border: rgba(255, 255, 255, 0.12);
  --text: #f6f8ff;
  --muted: rgba(246, 248, 255, 0.65);
  --accent: #7c5cff;
  --accent-2: #23d5ab;
  --shadow: 0 20px 70px rgba(0, 0, 0, 0.35);
  --radius: 28px;}

.font-finder-root * {box-sizing: border-box;}

.font-finder-root, .font-finder-root {margin: 0;
  min-height: 100%;}

.font-finder-root {font-family: "Inter", sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at top left, rgba(124, 92, 255, 0.22), transparent 28%),
    radial-gradient(circle at bottom right, rgba(35, 213, 171, 0.16), transparent 25%),
    linear-gradient(180deg, #08111f 0%, #050811 100%);
  overflow-x: hidden;}

.font-finder-root .bg-orb {position: fixed;
  border-radius: 999px;
  filter: blur(32px);
  opacity: 0.45;
  pointer-events: none;
  z-index: 0;}

.font-finder-root .orb-1 {width: 280px;
  height: 280px;
  top: -60px;
  right: -70px;
  background: rgba(124, 92, 255, 0.35);}

.font-finder-root .orb-2 {width: 240px;
  height: 240px;
  bottom: 40px;
  left: -80px;
  background: rgba(35, 213, 171, 0.22);}

.font-finder-root .orb-3 {width: 180px;
  height: 180px;
  top: 45%;
  left: 40%;
  background: rgba(255, 255, 255, 0.08);}

.font-finder-root .app {position: relative;
  z-index: 1;
  width: min(1180px, calc(100% - 24px));
  margin: 0 auto;
  padding: 28px 0 44px;}

.font-finder-root .hero {display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 20px;
  align-items: stretch;
  margin-bottom: 22px;}

.font-finder-root .hero-copy {padding: 6px 0;}

.font-finder-root .badge {display: inline-flex;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  color: var(--accent-2);
  font-weight: 700;
  letter-spacing: 0.02em;
  font-size: 0.82rem;}

.font-finder-root .hero h1 {margin: 14px 0 10px;
  font-size: clamp(2.2rem, 4vw, 4.8rem);
  line-height: 0.98;
  letter-spacing: -0.05em;
  max-width: 12ch;}

.font-finder-root .hero p {margin: 0;
  max-width: 62ch;
  color: var(--muted);
  line-height: 1.7;
  font-size: 1rem;}

.font-finder-root .hero-card {display: grid;
  gap: 14px;}

.font-finder-root .mini-card {display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 18px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(124, 92, 255, 0.18), rgba(35, 213, 171, 0.08));
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: var(--shadow);}

.font-finder-root .mini-card h3 {margin: 0 0 6px;
  font-size: 1rem;}

.font-finder-root .mini-card p {margin: 0;
  color: var(--muted);
  line-height: 1.5;
  font-size: 0.92rem;}

.font-finder-root .mini-icon {width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 1rem;}

.font-finder-root .glass {background: var(--card);
  border: 1px solid var(--card-border);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
  border-radius: var(--radius);}

.font-finder-root .upload-panel, .font-finder-root .panel {padding: 20px;}

.font-finder-root .upload-panel {margin-bottom: 22px;}

.font-finder-root .upload-zone {min-height: 270px;
  border-radius: 24px;
  border: 1.5px dashed rgba(255, 255, 255, 0.18);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02));
  display: grid;
  place-items: center;
  text-align: center;
  padding: 20px;
  transition: 0.25s ease;
  cursor: pointer;}

.font-finder-root .upload-zone:hover {transform: translateY(-2px);
  border-color: rgba(124, 92, 255, 0.45);}

.font-finder-root .upload-zone.dragover {border-color: var(--accent-2);
  background: rgba(35, 213, 171, 0.08);}

.font-finder-root .upload-icon {width: 72px;
  height: 72px;
  border-radius: 24px;
  display: grid;
  place-items: center;
  font-size: 1.7rem;
  margin-bottom: 12px;
  background: linear-gradient(135deg, rgba(124, 92, 255, 0.22), rgba(35, 213, 171, 0.12));
  border: 1px solid rgba(255, 255, 255, 0.1);}

.font-finder-root .upload-zone h2 {margin: 0 0 8px;
  font-size: 1.35rem;}

.font-finder-root .upload-zone p {margin: 0 0 16px;
  color: var(--muted);}

.font-finder-root .actions, .font-finder-root .tools-row, .font-finder-root .panel-head, .font-finder-root .font-card-head, .font-finder-root .progress-head {display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;}

.font-finder-root .actions {margin-top: 16px;}

.font-finder-root .btn {border: none;
  border-radius: 16px;
  padding: 12px 16px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: 0.22s ease;}

.font-finder-root .btn:hover {transform: translateY(-1px);}

.font-finder-root .btn:disabled {opacity: 0.55;
  cursor: not-allowed;
  transform: none;}

.font-finder-root .btn-primary {background: linear-gradient(135deg, var(--accent), #9a7dff);
  color: #fff;}

.font-finder-root .btn-secondary {background: linear-gradient(135deg, rgba(35, 213, 171, 0.98), rgba(19, 186, 150, 0.98));
  color: #051b16;}

.font-finder-root .btn-ghost {background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.09);}

.font-finder-root .grid {display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-bottom: 22px;}

.font-finder-root .panel-head {margin-bottom: 14px;}

.font-finder-root .panel-head h3 {margin: 0;
  font-size: 1.08rem;}

.font-finder-root .panel-head span {color: var(--muted);
  font-size: 0.92rem;}

.font-finder-root .preview-box {min-height: 220px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
  display: grid;
  place-items: center;}

.font-finder-root .preview-box img {width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;}

.font-finder-root .text-box {min-height: 220px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 18px;
  white-space: pre-wrap;
  line-height: 1.7;
  overflow: auto;}

.font-finder-root .placeholder {color: var(--muted);
  text-align: center;
  padding: 24px;
  margin: 0;}

.font-finder-root .tools-row {margin-bottom: 16px;}

.font-finder-root .tools-row input {flex: 1;
  min-width: 220px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  padding: 13px 14px;
  outline: none;
  font: inherit;}

.font-finder-root .tools-row input::placeholder {color: rgba(246, 248, 255, 0.45);}

.font-finder-root .font-grid {display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;}

.font-finder-root .font-card {border-radius: 22px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: 0.22s ease;}

.font-finder-root .font-card:hover {transform: translateY(-2px);
  border-color: rgba(124, 92, 255, 0.4);}

.font-finder-root .font-name {margin: 0;
  font-size: 1.02rem;}

.font-finder-root .font-meta {margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.84rem;}

.font-finder-root .font-sample {margin-top: 14px;
  padding: 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.03);
  min-height: 90px;
  display: flex;
  align-items: center;
  word-break: break-word;}

.font-finder-root .copy-btn {border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  padding: 8px 10px;
  border-radius: 12px;
  cursor: pointer;}

.font-finder-root .progress-wrap {margin-top: 16px;
  padding: 14px 0 2px;}

.font-finder-root .progress-bar {width: 100%;
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;}

.font-finder-root .progress-bar span {display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width 0.2s ease;}

.font-finder-root .progress-head {margin-bottom: 10px;
  color: var(--muted);
  font-size: 0.92rem;}

.font-finder-root .hidden {display: none !important;}

.font-finder-root .empty-state {grid-column: 1 / -1;
  border-radius: 18px;
  padding: 18px;
  text-align: center;
  color: var(--muted);
  border: 1px dashed rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.03);}

@media (max-width: 980px) {.font-finder-root .hero, .font-finder-root .grid, .font-finder-root .font-grid {grid-template-columns: 1fr;}

.font-finder-root .hero h1 {max-width: 14ch;}}

@media (max-width: 640px) {.font-finder-root .app {width: min(100% - 16px, 1180px);
    padding-top: 16px;}

.font-finder-root .upload-panel, .font-finder-root .panel, .font-finder-root .mini-card {padding: 16px;
    border-radius: 22px;}

.font-finder-root .upload-zone {min-height: 240px;}

.font-finder-root .tools-row, .font-finder-root .actions {flex-direction: column;
    align-items: stretch;}

.font-finder-root .btn, .font-finder-root .tools-row input {width: 100%;}

.font-finder-root .font-card-head {flex-direction: column;
    align-items: flex-start;}}