@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&display=swap');

body { font-family: 'Inter', sans-serif; }

#rewardModal { display: none; position: fixed; inset: 0; z-index: 100; justify-content: center; align-items: center; flex-direction: column; backdrop-filter: blur(10px); }
#rewardModal { background: rgba(0, 0, 0, 0.72); padding: 1rem; opacity: 0; transition: opacity 0.26s ease; }
#rewardModal.is-open { opacity: 1; }
#rewardModal.is-closing { opacity: 0; }
#rewardModalCard { transform: translateY(18px) scale(0.94); opacity: 0; transition: transform 0.28s ease, opacity 0.28s ease; transform-origin: top center; }
#rewardModal.is-open #rewardModalCard { transform: translateY(0) scale(1); opacity: 1; }
#rewardModal.is-closing #rewardModalCard { transform: translateY(-34px) scale(0.82); opacity: 0; }

.feature-panel { background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%); border: 2px dashed #e2e8f0; text-align: center; color: #94a3b8; }
.feature-panel--hero { min-height: 58px; }
.feature-panel--side { min-height: 320px; }
.tool-card { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.tool-card:hover { transform: translateY(-6px); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.05); }
.result-appear { animation: zoomIn 0.4s ease-out; }
@keyframes zoomIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
button:disabled { opacity: 0.5; cursor: not-allowed; transform: scale(1) !important; background-color: #94a3b8 !important; }

.logo-link { transition: transform 0.2s; }
.logo-link:hover { transform: scale(1.05); }
.footer-brand { font-size: 24px; line-height: 1; letter-spacing: -0.08em; font-weight: 900; color: #0f172a; }
.limit-bar { opacity: 0; transform: translateY(-8px) scale(0.96); pointer-events: none; transition: opacity 0.22s ease, transform 0.22s ease; }
.limit-bar.is-visible { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.limit-chip { min-width: 146px; height: 42px; }
.preview-panel { position: relative; overflow: hidden; }
.preview-loading { position: absolute; inset: 0; display: none; background: rgba(15, 23, 42, 0.78); color: white; align-items: center; justify-content: center; text-align: center; padding: 16px; z-index: 5; }
.preview-loading.is-visible { display: flex; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(18px); background: #0f172a; color: #fff; padding: 14px 18px; border-radius: 18px; font-size: 12px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; box-shadow: 0 18px 40px rgba(15, 23, 42, 0.28); opacity: 0; pointer-events: none; transition: opacity 0.24s ease, transform 0.24s ease; z-index: 120; text-align: center; }
.toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }

.spotlight-shell { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 16px; }
.spotlight-card { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-decoration: none; color: #475569; padding: 16px 20px; border-radius: 20px; background: rgba(255, 255, 255, 0.84); border: 1px solid #e2e8f0; box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; }
.spotlight-card:hover { transform: translateY(-2px); box-shadow: 0 16px 28px rgba(15, 23, 42, 0.1); border-color: #cbd5e1; }
.spotlight-badge { display: inline-block; padding: 6px 10px; border-radius: 999px; background: #eef2ff; color: #4f46e5; font-size: 10px; font-weight: 900; letter-spacing: 0.18em; text-transform: uppercase; }
.spotlight-title { font-size: 18px; font-weight: 900; color: #0f172a; letter-spacing: -0.04em; }
.spotlight-copy { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: #64748b; }
.feature-panel--hero .spotlight-card { gap: 3px; padding: 8px 14px; border-radius: 16px; max-width: 360px; }
.feature-panel--hero .spotlight-badge { padding: 5px 9px; font-size: 9px; }
.feature-panel--hero .spotlight-title { font-size: 14px; }
.feature-panel--hero .spotlight-copy { font-size: 9px; letter-spacing: 0.08em; }
.feature-panel--side .spotlight-card { width: min(100%, 240px); }
.feature-panel--side .spotlight-title { font-size: 16px; text-align: center; }
.feature-panel--side .spotlight-copy { font-size: 11px; letter-spacing: 0.1em; text-align: center; }

.lang-switch { position: relative; }
.lang-trigger { width: 42px; height: 42px; border-radius: 14px; border: 1px solid #e2e8f0; background: #fff; color: #475569; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 10px 22px rgba(15, 23, 42, 0.06); transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, color 0.18s ease; }
.lang-trigger:hover, .lang-trigger[aria-expanded="true"] { transform: translateY(-1px); box-shadow: 0 16px 28px rgba(15, 23, 42, 0.12); border-color: #cbd5e1; color: #0f172a; }
.lang-menu { position: absolute; top: calc(100% + 12px); right: 0; min-width: 180px; padding: 10px; border-radius: 20px; background: rgba(255, 255, 255, 0.98); border: 1px solid #e2e8f0; box-shadow: 0 24px 44px rgba(15, 23, 42, 0.14); opacity: 0; pointer-events: none; transform: translateY(-8px) scale(0.98); transition: opacity 0.18s ease, transform 0.18s ease; z-index: 70; }
.lang-menu.is-open { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); }
.lang-option { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 12px 14px; border-radius: 14px; color: #334155; text-decoration: none; font-size: 12px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; transition: background-color 0.18s ease, color 0.18s ease; }
.lang-option:hover { background: #f8fafc; color: #0f172a; }
.lang-option.is-active { background: #eef2ff; color: #4338ca; }
.lang-option-mark { font-size: 10px; letter-spacing: 0.18em; }

.nav-link { transition: color 0.18s ease; }
.nav-link:hover { color: #4f46e5; }
.nav-link.is-active { color: #4f46e5; }

.hero-shell { background: linear-gradient(135deg, rgba(245, 247, 251, 0.98), rgba(233, 239, 248, 0.98) 38%, rgba(251, 251, 255, 0.96) 100%); position: relative; overflow: hidden; box-shadow: inset 0 1px 0 rgba(255,255,255,0.75); }
.hero-shell::before { content: ""; position: absolute; inset: auto auto -58px -48px; width: 220px; height: 220px; border-radius: 999px; background: rgba(148, 163, 184, 0.10); filter: blur(18px); }
.hero-shell::after { content: ""; position: absolute; inset: 18px -46px auto auto; width: 220px; height: 220px; border-radius: 999px; background: rgba(191, 219, 254, 0.18); filter: blur(20px); }
.hero-content { position: relative; z-index: 1; }
.hero-tool-pill { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 0 16px; border-radius: 999px; font-size: 10px; font-weight: 900; letter-spacing: 0.2em; text-transform: uppercase; border: 1px solid rgba(148, 163, 184, 0.22); box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), inset 0 -12px 24px rgba(255,255,255,0.15); user-select: none; cursor: default; backdrop-filter: blur(10px); }
.hero-tool-pill--indigo { background: linear-gradient(135deg, rgba(246, 248, 255, 0.98), rgba(228, 235, 255, 0.95)); color: #5b5ae6; }
.hero-tool-pill--rose { background: linear-gradient(135deg, rgba(255, 247, 249, 0.98), rgba(255, 232, 238, 0.94)); color: #ef476f; }
.hero-tool-pill--slate { background: linear-gradient(135deg, rgba(248, 250, 252, 0.98), rgba(231, 236, 243, 0.94)); color: #334155; }
.tool-directory-card { transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease; }
.tool-directory-card:hover { transform: translateY(-4px); box-shadow: 0 18px 34px rgba(15, 23, 42, 0.08); border-color: #cbd5e1; }
.tool-directory-icon { width: 56px; height: 56px; border-radius: 18px; display: inline-flex; align-items: center; justify-content: center; }
.eyebrow-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; background: #eef2ff; color: #4338ca; font-size: 10px; font-weight: 900; letter-spacing: 0.2em; text-transform: uppercase; }
.content-card { border: 1px solid #e2e8f0; background: #fff; border-radius: 2rem; box-shadow: 0 4px 20px rgba(15, 23, 42, 0.03); }
.guide-card { border: 1px solid #e2e8f0; background: #f8fafc; border-radius: 1.5rem; }
.snippet-box { border: 1px solid #e2e8f0; background: #0f172a; color: #e2e8f0; border-radius: 1.5rem; font-family: "Consolas", "Courier New", monospace; }
.upload-dropzone { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 148px; width: 100%; padding: 24px; border-radius: 1.75rem; border: 1px dashed rgba(148, 163, 184, 0.42); background:
    radial-gradient(circle at top left, rgba(224, 231, 255, 0.42), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(243,247,253,0.96) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.96),
    inset 0 -20px 28px rgba(226, 232, 240, 0.28),
    0 10px 26px rgba(148, 163, 184, 0.08);
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.upload-dropzone::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 1.25rem;
  border: 1px solid rgba(255,255,255,0.74);
  pointer-events: none;
}
.upload-dropzone:hover {
  border-color: rgba(99, 102, 241, 0.42);
  background:
    radial-gradient(circle at top left, rgba(199, 210, 254, 0.5), transparent 36%),
    linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(238,242,255,0.96) 100%);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.98),
    inset 0 -18px 24px rgba(199, 210, 254, 0.2),
    0 18px 36px rgba(79, 70, 229, 0.1);
}
.upload-dropzone.is-dragover {
  border-color: rgba(79, 70, 229, 0.64);
  background:
    radial-gradient(circle at top left, rgba(165, 180, 252, 0.56), transparent 38%),
    linear-gradient(180deg, rgba(243,245,255,1) 0%, rgba(224,231,255,0.98) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -18px 24px rgba(165, 180, 252, 0.26),
    0 20px 38px rgba(79, 70, 229, 0.14);
}
.upload-dropzone--rose {
  background:
    radial-gradient(circle at top left, rgba(255, 228, 233, 0.42), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(255,246,248,0.96) 100%);
}
.upload-dropzone--rose:hover {
  border-color: rgba(244, 63, 94, 0.42);
  background:
    radial-gradient(circle at top left, rgba(255, 205, 216, 0.5), transparent 36%),
    linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,238,242,0.96) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.98),
    inset 0 -18px 24px rgba(253, 205, 211, 0.24),
    0 18px 36px rgba(244, 63, 94, 0.1);
}
.upload-dropzone--rose.is-dragover {
  border-color: rgba(244, 63, 94, 0.64);
  background:
    radial-gradient(circle at top left, rgba(251, 182, 206, 0.58), transparent 38%),
    linear-gradient(180deg, rgba(255,245,247,1) 0%, rgba(255,228,233,0.98) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -18px 24px rgba(251, 182, 206, 0.24),
    0 20px 38px rgba(244, 63, 94, 0.14);
}
.upload-dropzone--slate {
  background:
    radial-gradient(circle at top left, rgba(226, 232, 240, 0.42), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(242,245,249,0.96) 100%);
}
.upload-dropzone--slate:hover {
  border-color: rgba(71, 85, 105, 0.42);
  background:
    radial-gradient(circle at top left, rgba(203, 213, 225, 0.52), transparent 36%),
    linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(235,240,246,0.96) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.98),
    inset 0 -18px 24px rgba(203, 213, 225, 0.22),
    0 18px 36px rgba(15, 23, 42, 0.1);
}
.upload-dropzone--slate.is-dragover {
  border-color: rgba(30, 41, 59, 0.62);
  background:
    radial-gradient(circle at top left, rgba(191, 201, 214, 0.56), transparent 38%),
    linear-gradient(180deg, rgba(247,248,250,1) 0%, rgba(225,232,240,0.98) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -18px 24px rgba(191, 201, 214, 0.22),
    0 20px 38px rgba(15, 23, 42, 0.14);
}
.upload-dropzone__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  color: #4f46e5;
  background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(224,231,255,0.92) 100%);
  border: 1px solid rgba(199, 210, 254, 0.7);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.96), 0 10px 20px rgba(79, 70, 229, 0.08);
}
.upload-dropzone--rose .upload-dropzone__icon {
  color: #f43f5e;
  background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(255,228,233,0.92) 100%);
  border-color: rgba(251, 182, 206, 0.72);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.96), 0 10px 20px rgba(244, 63, 94, 0.08);
}
.upload-dropzone--slate .upload-dropzone__icon {
  color: #0f172a;
  background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(226,232,240,0.92) 100%);
  border-color: rgba(203, 213, 225, 0.82);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.96), 0 10px 20px rgba(15, 23, 42, 0.08);
}
.upload-dropzone__title { color: #0f172a; font-size: 13px; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; }
.upload-dropzone__hint { color: #94a3b8; font-size: 11px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; }
.upload-dropzone__meta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 14px;
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.4;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: 999px;
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(226, 232, 240, 0.9);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.84);
}
.upload-dropzone.has-file .upload-dropzone__meta {
  color: #0f172a;
  background: rgba(255,255,255,0.96);
  border-color: rgba(199, 210, 254, 0.8);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.98), 0 10px 18px rgba(79, 70, 229, 0.06);
}

@media (max-width: 767px) {
    .lang-menu { right: 50%; transform: translate(50%, -8px) scale(0.98); }
    .lang-menu.is-open { transform: translate(50%, 0) scale(1); }
}