/* =========================
   Gilroy (TTF) - filenames match your zip
   ========================= */
@font-face{
  font-family:"Gilroy";
  src:url("/static/fonts/Gilroy-Regular.ttf") format("truetype");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Gilroy";
  src:url("/static/fonts/Gilroy-Medium.ttf") format("truetype");
  font-weight:500;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Gilroy";
  src:url("/static/fonts/Gilroy-SemiBold.ttf") format("truetype");
  font-weight:600;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Gilroy";
  src:url("/static/fonts/Gilroy-Bold.ttf") format("truetype");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Gilroy";
  src:url("/static/fonts/Gilroy-ExtraBold.ttf") format("truetype");
  font-weight:800;
  font-style:normal;
  font-display:swap;
}

/* =========================
   Theme (Premium)
   ========================= */
:root{
  --bg:#f6f7fb;
  --card:#ffffff;
  --text:#111827;
  --muted:#6b7280;
  --border:#e5e7eb;
  --shadow:0 14px 36px rgba(17,24,39,.10);
  --radius:16px;

  /* Brand (premium, no pink/red) */
  --b1:#4f46e5;  /* indigo */
  --b2:#6366f1;  /* indigo-500 */
  --b3:#0ea5e9;  /* sky */
  --grad: linear-gradient(135deg, var(--b1), var(--b2) 45%, var(--b3));
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Gilroy", system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background:var(--bg);
  color:var(--text);
}
a{color:inherit}

.wrap{
  max-width:1280px; /* wider */
  margin:0 auto;
  padding:22px;
}

/* =========================
   Topbar (header)
   ========================= */
.topbar{
  position:sticky;
  top:0;
  z-index:10;
  background:rgba(255,255,255,.88);
  border-bottom:1px solid rgba(17,24,39,.08);
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
}
.topbar-inner{
  max-width:1280px; /* wider */
  margin:0 auto;
  padding:12px 22px;
  display:flex;
  gap:16px;
  align-items:center;
  justify-content:space-between;
}
.logo{
  text-decoration:none;
  display:flex;
  align-items:center;
  gap:10px;
}
.logo-img{
  width:34px;
  height:34px;
  display:block;
}
.logo-text{
  font-weight:800;
  letter-spacing:.2px;
  font-size:18px;
}
.logo-dot{color:var(--b3)}

.menu{
  display:flex;
  gap:14px;
  align-items:center;
}
.menu-link{
  text-decoration:none;
  color:rgba(17,24,39,.62);
  font-weight:800;
  font-size:13px;
}
.menu-link:hover{color:var(--text)}

.lang{display:flex;gap:8px}
.langbtn{
  text-decoration:none;
  padding:8px 10px;
  border:1px solid rgba(17,24,39,.10);
  border-radius:12px;
  color:rgba(17,24,39,.62);
  font-weight:800;
  font-size:12px;
  background:rgba(255,255,255,.75);
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
}
.langbtn.active{
  border-color:rgba(17,24,39,.35);
  color:#111827;
}

/* =========================
   Footer
   ========================= */
.footer{
  border-top:1px solid rgba(17,24,39,.08);
  margin-top:46px;
  background:rgba(255,255,255,.86);
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
}
.footer-inner{
  max-width:1280px; /* wider */
  margin:0 auto;
  padding:14px 22px;
  display:flex;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}

.footer-links{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
}
.footer-link{
  color: inherit;
  text-decoration: none;
  opacity: .9;
}
.footer-link:hover{
  text-decoration: underline;
  opacity: 1;
}
.dot{ opacity:.5; }

.muted{color:var(--muted)}
.small{font-size:12px;color:var(--muted)}
.mono{
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace
}

.logo-img{ height:32px; width:auto; display:block; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* =========================
   Hero (Liquid glass)
   ========================= */
.hero{
  position:relative;
  border:1px solid rgba(17,24,39,.08);
  border-radius:26px;
  overflow:hidden;
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(14px) saturate(1.25);
  -webkit-backdrop-filter: blur(14px) saturate(1.25);
  box-shadow: 0 18px 50px rgba(17,24,39,.10);
}
.hero-bg{
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 460px at 70% 20%, rgba(14,165,233,.16), transparent 62%),
    radial-gradient(820px 420px at 20% 62%, rgba(79,70,229,.14), transparent 62%),
    radial-gradient(620px 360px at 45% 35%, rgba(99,102,241,.10), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.55), rgba(246,247,251,.65));
}
.hero-inner{
  position:relative;
  padding:28px 22px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.hero-title{
  margin:0;
  font-size:42px;
  line-height:1.08;
  font-weight:900;
  letter-spacing:-.2px;
}
.hero-sub{
  margin:10px 0 0;
  color:rgba(17,24,39,.62);
  max-width:860px;
  line-height:1.6;
  font-size:16px;
}

.filters{
  margin-top:18px;
  display:flex;
  flex-direction:column;
  gap:12px;
  align-items:center;
  width:100%;
}
.pills{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center;
}
.pill{
  border:1px solid rgba(17,24,39,.10);
  background: rgba(255,255,255,.65);
  border-radius:999px;
  padding:10px 14px;
  font-weight:900;
  cursor:pointer;
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.pill:hover{
  transform: translateY(-1px);
  border-color: rgba(79,70,229,.22);
}
.pill.active{
  color:#fff;
  border:0;
  background:var(--grad);
  box-shadow: 0 10px 24px rgba(79,70,229,.22);
}

.search{width:min(820px, 100%)}
.inp{
  width:100%;
  padding:12px 12px;
  border:1px solid rgba(17,24,39,.10);
  border-radius:14px;
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(10px) saturate(1.15);
  -webkit-backdrop-filter: blur(10px) saturate(1.15);
  outline:none;
}
.inp:focus{
  border-color: rgba(79,70,229,.35);
  box-shadow:0 0 0 4px rgba(79,70,229,.14);
}

/* =========================
   Tools grid
   ========================= */
.section{margin-top:18px;padding-bottom:14px}

.grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:14px;
  margin-top:16px;
}
@media (max-width: 1100px){
  .grid{grid-template-columns: repeat(3, minmax(0, 1fr));}
}
@media (max-width: 820px){
  .grid{grid-template-columns: repeat(2, minmax(0, 1fr));}
}
@media (max-width: 520px){
  .grid{grid-template-columns: 1fr;}
}

.tcard{
  text-decoration:none;
  border:1px solid rgba(17,24,39,.10);
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(10px) saturate(1.15);
  -webkit-backdrop-filter: blur(10px) saturate(1.15);
  border-radius:18px;
  box-shadow: 0 14px 34px rgba(17,24,39,.10);
  padding:18px;
  min-height:190px;
  display:flex;
  flex-direction:column;
  gap:10px;
  transition:transform .12s ease, box-shadow .12s ease;
}
.tcard:hover{
  transform:translateY(-2px);
  box-shadow: 0 18px 44px rgba(17,24,39,.12);
}
.ttitle{
  margin-top:2px;
  font-weight:900;
  font-size:18px;
}
.tdesc{
  margin-top:auto;
  color:rgba(17,24,39,.62);
  line-height:1.45;
  font-size:13px;
}

/* =========================
   Icon slots (auto icons)
   ========================= */
.icon-slot{
  width:46px;
  height:46px;
  border-radius:14px;
  background:rgba(79,70,229,.08);
  border:1px solid rgba(79,70,229,.18);
  background-repeat:no-repeat;
  background-position:center;
  background-size:32px 32px;
}
.icon-slot.big{
  width:52px;
  height:52px;
  border-radius:16px;
  background-size:36px 36px;
}

/* =========================
   Tool page
   ========================= */
.toolwrap{margin-top:16px}
.toolhead{
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  align-items:flex-end;
}
.toolhead-left{
  display:flex;
  gap:12px;
  align-items:center;
}
.tooltitle{
  margin:0 0 6px;
  font-size:28px;
  line-height:1.1;
  font-weight:900;
}

.panel{
  margin-top:14px;
  border:1px solid rgba(17,24,39,.10);
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(10px) saturate(1.15);
  -webkit-backdrop-filter: blur(10px) saturate(1.15);
  border-radius:18px;
  box-shadow: 0 14px 34px rgba(17,24,39,.10);
  padding:16px;
}
.row{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
.label{
  display:flex;
  flex-direction:column;
  gap:8px;
  width:100%;
  margin-top:10px;
}

/* Buttons */
.btn{
  padding:11px 14px;
  border-radius:14px;
  border:1px solid rgba(17,24,39,.10);
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  font-weight:900;
  cursor:pointer;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.btn.primary{
  border:0;
  color:#fff;
  background:var(--grad);
}
.btn.primary:hover{filter:brightness(1.03)}
.btn.ghost{
  background:#111827;
  color:#fff;
  border:0;
}

/* Dropzone */
.dropzone{
  margin-top:12px;
  padding:16px;
  border-radius:18px;
  border:2px dashed rgba(17,24,39,.14);
  background: rgba(255,255,255,.70);
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  text-align:center;
  color:rgba(17,24,39,.62);
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.dropzone.hover{
  border-color:rgba(79,70,229,.35);
  background:rgba(79,70,229,.06);
}
.dropzone.drag{
  border-color: rgba(79,70,229,.45);
  background: rgba(79,70,229,.08);
  transform: scale(1.01);
}
.dz-title{
  font-weight:900;
  color:#111827;
}

.status{
  margin-left:auto;
  display:flex;
  gap:8px;
  align-items:center;
}

/* =========================
   File list (for new app.js)
   ========================= */
.filelist{
  list-style:none;
  padding:0;
  margin:12px 0 0;
  display:grid;
  gap:10px;
  width:100%;
}

.fileitem{
  display:grid;
  grid-template-columns: 1fr auto auto;
  gap:10px;
  align-items:center;
  padding:10px 12px;
  border-radius:14px;
  background: rgba(255,255,255,.78);
  border:1px solid rgba(17,24,39,.10);
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
}

.fileitem.muted{
  grid-template-columns: 1fr;
  text-align:center;
  padding:14px 12px;
  border-style:dashed;
  background: rgba(255,255,255,.68);
  color:rgba(17,24,39,.62);
}

.fname{
  font-weight:800;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.fmeta{
  color:rgba(17,24,39,.60);
  font-size:12px;
  white-space:nowrap;
}

.fremove{
  width:38px;
  height:38px;
  border-radius:12px;
  border:1px solid rgba(17,24,39,.12);
  background: rgba(255,255,255,.70);
  cursor:pointer;
  font-size:18px;
  line-height:1;
  color:#111827;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.fremove:hover{
  transform: scale(1.05);
  background: rgba(17,24,39,.06);
  border-color: rgba(17,24,39,.18);
}

/* Responsive tweaks */
@media (max-width: 720px){
  .hero-title{font-size:32px}
}

/* =========================
   Auto tool icons from /static/img/tool-icons/<key>.png
   ========================= */
.icon-slot[data-icon="merge_pdf"]{background-image:url("/static/img/tool-icons/merge_pdf.png");}
.icon-slot[data-icon="split_pdf"]{background-image:url("/static/img/tool-icons/split_pdf.png");}
.icon-slot[data-icon="compress_pdf"]{background-image:url("/static/img/tool-icons/compress_pdf.png");}
.icon-slot[data-icon="pdf_to_docx"]{background-image:url("/static/img/tool-icons/pdf_to_docx.png");}
.icon-slot[data-icon="docx_to_pdf"]{background-image:url("/static/img/tool-icons/docx_to_pdf.png");}
.icon-slot[data-icon="pdf_to_images"]{background-image:url("/static/img/tool-icons/pdf_to_images.png");}
.icon-slot[data-icon="images_to_pdf"]{background-image:url("/static/img/tool-icons/images_to_pdf.png");}
.icon-slot[data-icon="extract_pages"]{background-image:url("/static/img/tool-icons/extract_pages.png");}
.icon-slot[data-icon="remove_pages"]{background-image:url("/static/img/tool-icons/remove_pages.png");}

/* =========================
   Full-width layout (responsive for 4K/2K/FHD/mobile)
   ========================= */

/* Универсальная ширина контейнера:
   - минимум: 16px отступ
   - на больших экранах: ограничение чтобы не растягивалось бесконечно
*/
.wrap,
.topbar-inner,
.footer-inner{
  max-width: min(1560px, calc(100vw - 40px));
  padding-left: clamp(14px, 2vw, 26px);
  padding-right: clamp(14px, 2vw, 26px);
}

/* Hero на “всю доступную ширину” контейнера */
.hero{
  border-radius: clamp(18px, 2vw, 28px);
}

/* Сетка: на очень широких экранах 5 колонок */
.grid{
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (min-width: 1500px){
  .grid{ grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* На планшетах/мобиле остаётся как было, но чуть аккуратнее */
@media (max-width: 1100px){
  .grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 820px){
  .grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px){
  .grid{ grid-template-columns: 1fr; }
}

/* Hero текст: не делаем слишком широким на больших мониторах */
.hero-sub{
  max-width: min(900px, 92vw);
}
.search{
  width: min(920px, 100%);
}

/* Чуть больше воздуха на широких экранах */
@media (min-width: 1500px){
  .hero-inner{ padding: 34px 26px; }
  .tcard{ min-height: 200px; }
}
/* =========================
   Full-bleed modern hero (wide screens friendly)
   ========================= */
.hero-bleed{
  position: relative;
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  padding: clamp(14px, 2vw, 26px) 0;
}

.hero-bleed-bg{
  position:absolute;
  inset:0;
  background:
    radial-gradient(1200px 520px at 20% 15%, rgba(79,70,229,.10), transparent 60%),
    radial-gradient(1200px 520px at 80% 25%, rgba(14,165,233,.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.0), rgba(0,0,0,.0));
  pointer-events:none;
}

.hero-wide{
  max-width: min(1560px, calc(100vw - 40px));
  margin: 0 auto;
}

/* на очень широких экранах 5 колонок */
@media (min-width: 1500px){
  .grid{ grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
/* =========================
   Hero badges (modern)
   ========================= */
.badges{
  margin-top: 14px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center;
}

.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-radius:999px;
  font-weight:900;
  font-size:12px;
  color: rgba(17,24,39,.72);
  border:1px solid rgba(17,24,39,.10);
  background: rgba(255,255,255,.62);
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  box-shadow: 0 8px 18px rgba(17,24,39,.06);
}
/* =========================
   Readability patch (remove "blurry" feel)
   ========================= */

/* 1) Контраст текста */
:root{
  --text:#0b1220;
  --muted:rgba(11,18,32,.70);
}

/* 2) Убираем blur там, где много текста */
.tcard,
.panel,
.inp,
.fileitem,
.dropzone,
.btn,
.langbtn{
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* 3) Делаем фон блоков более "чистым" (не мутным) */
.tcard,
.panel{
  background: #ffffff !important;
  border: 1px solid rgba(11,18,32,.10) !important;
  box-shadow: 0 14px 34px rgba(11,18,32,.10) !important;
}

/* 4) Hero: стекло оставляем как фон, но текст читаемый */
.hero{
  background: rgba(255,255,255,.82) !important;
}
.hero-sub{
  color: rgba(11,18,32,.70) !important;
  font-size: 16.5px;
  line-height: 1.7;
}
.hero-title{
  color: rgba(11,18,32,.95);
}

/* 5) Заголовки/описания карточек — четче */
.ttitle{
  color: rgba(11,18,32,.92) !important;
  font-weight: 900;
}
.tdesc{
  color: rgba(11,18,32,.66) !important;
  font-size: 13.5px;
  line-height: 1.55;
}

/* 6) Pills — оставляем красивыми, но читаемыми */
.pill{
  background:#fff !important;
  border: 1px solid rgba(11,18,32,.12) !important;
}
.pill.active{
  color:#fff !important;
  border:0 !important;
  background: var(--grad) !important;
  box-shadow: 0 10px 24px rgba(79,70,229,.22) !important;
}

/* 7) Поиск — четче */
.inp{
  background:#fff !important;
  border: 1px solid rgba(11,18,32,.12) !important;
}
.inp:focus{
  border-color: rgba(79,70,229,.40) !important;
  box-shadow: 0 0 0 4px rgba(79,70,229,.14) !important;
}