/* public/assets/style.css
   Modern responsive UI, logo header, language switcher, tool layout,
   beautiful typography, subtle animations, and mobile-friendly behavior.
*/

/* ========== ROOT VARIABLES ========== */
:root{--primary-color:#114d40;  --primary-hover:#0d3a31;  --bg-color:#fbfaf7;  --card-bg:#ffffff;  --muted-card:#fbfdfb;  --border-color:#e6ece7;  --text-color:#333333;  --muted-text:#6b7280;  --surface-dark:#0b1320;  --footer-bg:#0f1724;  --footer-muted:#b9c1c9;} 

/* ========== GLOBAL RESET & BASE ========== */
*{box-sizing:border-box;} 
body{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;  margin:0;  color:var(--text-color);  background:linear-gradient(180deg,#fcfdfb 0%,var(--bg-color) 200%);  -webkit-font-smoothing:antialiased;  -moz-osx-font-smoothing:grayscale;  line-height:1.45;} 
.container{max-width:1080px;  margin:0 auto; padding:0.2rem; } 

/* ========== HEADER & LOGO ========== */
.site-header{background:linear-gradient(180deg,rgba(11,26,24,0.95),rgba(8,22,20,0.95));  color:#fff;  padding:1.2rem 0;  border-bottom-left-radius:18px;  border-bottom-right-radius:18px;  box-shadow:0 6px 30px rgba(5,20,18,0.12);  animation:headerDrop 0.7s ease-out 0s 1;} 
.header-inner{display:flex;  justify-content:space-between;  align-items:center;  gap:1rem;  flex-wrap:wrap;} 
.site-logo{display:flex;  align-items:center;} 
.site-logo img{height:55px;  width:auto;  display:block;  filter:drop-shadow(0 4px 10px rgba(0,0,0,0.25));  transition:transform 0.2s ease,filter 0.2s ease;} 
.site-logo img:hover{transform:translateY(-1px) scale(1.02);  filter:drop-shadow(0 6px 16px rgba(0,0,0,0.35));} 
.brand{margin-left:20px;  flex:1;  min-width:0;} 
.brand h1{margin:0;  font-size:1.7rem;  letter-spacing:0.4px;     text-align: center; padding-bottom: 1rem;} 
.brand .subtitle{margin:0;  font-size:0.97rem;  opacity:0.9;} 
h2#upload-heading, .brand  { padding: 1rem; }

/* ========== LANGUAGE SWITCHER & HEADER NAV ========== */
.lang-switch{display:flex;  align-items:center;  gap:.6rem;  flex-wrap:wrap;  justify-content:flex-end;} 
a.home-link{color:orange;  padding:5px;  text-decoration:none;  font-weight:600;} 
a.home-link:hover{text-decoration:underline;} 
.lang-dropdown{position:relative;} 
.lang-dropdown select{appearance:none;  -webkit-appearance:none;  background:#fff;  color:var(--surface-dark);  border-radius:8px;  padding:.6rem 2rem .6rem .8rem;  border:0;  font-weight:600;  cursor:pointer;  box-shadow:0 4px 12px rgba(8,20,18,0.06);  font-size:0.9rem;} 
.lang-dropdown::after{content:"▾";  position:absolute;  right:12px;  top:50%;  transform:translateY(-50%);  pointer-events:none;  color:#64748b;  font-size:.8rem;} 

/* ========== MAIN LAYOUT ========== */
main{padding:2rem 0;  animation:contentFadeUp 0.75s ease-out 0.1s 1;} 

/* ========== TOOL STAGE CARD ========== */
.stage-card{background:var(--card-bg);  border:1px solid var(--border-color);  border-radius:14px;  padding:1rem;  box-shadow:0 10px 30px rgba(12,18,16,0.06);  display:grid;  grid-template-columns:1fr;  gap:1rem;  animation:floatIn 0.8s ease-out 0.15s 1;}
.stage-grid{display:grid;grid-template-columns:1fr;gap:1.25rem;align-items:start;}
.stage-column{display:flex;flex-direction:column;gap:1rem;width:100%;}
.stage-left,.stage-right{justify-content:flex-start;}
.stage-right .results-panel{margin:0 auto;max-width:1000px;width:100%;}


/* ========== PREVIEW & OUTPUT WRAPPERS ========== */
.preview-wrap{padding:.25rem 0;text-align:center; max-width: 1000px; margin: auto; width: 100%;}
.output-wrap{padding:.25rem 0; max-width: 1000px;   margin: auto;}

/* ========== PREVIEW GRID & CARDS ========== */
/* Responsive counts: 1 mobile, 2 tablet, 3 desktop <1400, 4 at >=1400 */
.preview-list {
  display: grid;
  gap: 14px;
  margin: 0.6rem auto 0;
  width: 100%;
  max-width: 100%;
  padding: 0 0.5rem;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  justify-items: stretch;
}
.preview-card {
  width: 100%;
  max-width: 320px;
  min-width: 0;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  padding: 1rem;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
  text-align: center;
  min-height: 170px;
  transition: box-shadow 0.18s ease, transform 0.18s ease;
  box-shadow: 0 8px 24px rgba(9,20,18,0.08);
}
.preview-card:hover{box-shadow:0 14px 36px rgba(9,20,18,0.16);transform:translateY(-2px);}
.thumb{width:96px;height:96px;object-fit:cover;border-radius:12px;background:#f8fafc;flex-shrink:0;}
.thumb.low-quality{filter:blur(.6px) saturate(.9) contrast(.98);image-rendering:-webkit-optimize-contrast;opacity:0.98;}
.file-meta{font-size:.86rem;color:var(--muted-text);text-align:center;width:100%;display:flex;flex-direction:column;gap:.25rem;align-items:center;}
.file-name{font-weight:700;color:var(--text-color);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%;max-width:140px;}
.file-size{font-size:.82rem;color:var(--muted-text);}

/* ========== ACTION BUTTONS ========== */
.actions{display:flex;  gap:.5rem;  margin-top:.4rem;} 
.btn{border:0;  padding:.7rem 1rem;  border-radius:12px;  cursor:pointer;  background:linear-gradient(180deg,var(--primary-color),var(--primary-hover));  color:#fff;  font-weight:700;  box-shadow:0 6px 18px rgba(17,77,64,0.12);  transition:transform .12s ease,box-shadow .12s ease,opacity .12s;} 
.btn:hover{box-shadow:0 10px 26px rgba(17,77,64,0.18);  transform:translateY(-1px);} 
.btn:active{transform:translateY(1px);  box-shadow:0 3px 10px rgba(17,77,64,0.18);} 
.btn.secondary{background:linear-gradient(180deg,#f5f7f6,#ffffff);  color:var(--surface-dark);  border:1px solid var(--border-color);  box-shadow:none;} 
button#convert-button{font-size:1.25rem;  background:#ff3030;  min-width:150px;} 
.download-btn{padding:.4rem .5rem;  background:#fff0f0;  border-radius:9px;  border:1px solid rgba(11,19,18,0.04);  text-decoration:none;  color:var(--surface-dark);  font-weight:700;  font-size:.9rem;  box-shadow:0 6px 18px rgba(8,20,18,0.04);} 
.download-btn.primary{background:var(--primary-color);  color:#fff;  border:none;  box-shadow:0 8px 26px rgba(17,77,64,0.12);} 

/* ========== CONTROLS (QUALITY SLIDER + CONVERT) ========== */

.controls{display:flex;align-items:center;gap:1.2rem;margin-top:1.2rem;flex-wrap:nowrap;justify-content:center;}
.controls .quality-control{display:flex;align-items:center;gap:.75rem;margin-right:.8rem;font-size:1.125rem;color:#374151;font-weight:500;}
.controls .quality-control label{margin-right:.25rem;}

.options-grid{display:flex;flex-direction:column;gap:0.75rem; align-items: center; margin-top:0.4rem;background:linear-gradient(180deg,#ffffff,#f8fbf9);border:1px solid var(--border-color);border-radius:14px;padding:0.9rem 1rem;box-shadow:0 8px 24px rgba(15,23,42,0.06);   max-width: 1000px;  width: 100%; margin: auto;}
.option-row{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;}
.option-row--center{justify-content:center;}
.option-group{display:flex;align-items:center;gap:.65rem;flex-wrap:wrap;}
.option-label{font-weight:700;color:#0f172a;font-size:0.95rem;min-width:120px;}
.radio-chip{display:flex;align-items:center;gap:.45rem;padding:.45rem .75rem;border:1px solid var(--border-color);border-radius:999px;background:#fff;box-shadow:0 4px 12px rgba(15,23,42,0.05);cursor:pointer;transition:transform .12s ease,box-shadow .12s ease;}
.radio-chip input{margin:0;}
.radio-chip:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(15,23,42,0.08);}
.input-select{min-width:140px;padding:.55rem .7rem;border-radius:10px;border:1px solid var(--border-color);background:#fff;font-weight:600;color:#0f172a;box-shadow:0 4px 14px rgba(15,23,42,0.05);}
.quality-pack{display:flex;align-items:center;gap:.65rem;flex-wrap:wrap;}
#quality-range{max-width: 180px ! IMPORTANT;appearance:none;height:8px;border-radius:999px;background:linear-gradient(90deg,#e5e7eb,#d1d5db);outline:none;cursor:pointer;transition:background .15s ease,box-shadow .15s ease;}
#quality-range:hover{box-shadow:0 0 0 4px rgba(37,99,235,0.08);}
#quality-range::-webkit-slider-thumb{appearance:none;width:16px;height:16px;border-radius:50%;background:#2563eb;border:2px solid #ffffff;box-shadow:0 2px 6px rgba(15,23,42,0.3);transition:transform .12s ease,box-shadow .12s ease;}
#quality-range:active::-webkit-slider-thumb{transform:scale(1.05);box-shadow:0 3px 8px rgba(15,23,42,0.4);}
#quality-range::-moz-range-track{height:6px;border-radius:999px;background:linear-gradient(90deg,#e5e7eb,#d1d5db);}
#quality-range::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#2563eb;border:2px solid #ffffff;box-shadow:0 2px 6px rgba(15,23,42,0.3);transition:transform .12s ease,box-shadow .12s ease;}
#quality-range:active::-moz-range-thumb{transform:scale(1.05);box-shadow:0 3px 8px rgba(15,23,42,0.4);}

#quality-number{width:70px;padding:.45rem .5rem;border-radius:10px;border:1px solid #e5e7eb;font-weight:700;font-size:.95rem;text-align:center;box-shadow:0 2px 5px rgba(15,23,42,0.06);}

button#convert-button, .wide-btn{font-size:1.2rem; background:#ff3030; min-width:180px; border-radius:14px; padding:.7rem 1.8rem;border:0;color:#fff;font-weight:800;cursor:pointer;box-shadow:0 6px 20px rgba(220,38,38,0.32);transition:transform .14s ease,box-shadow .14s ease,opacity .12s ease;}
button#convert-button:hover{transform:translateY(-1px);box-shadow:0 14px 32px rgba(220,38,38,0.4);opacity:.97;}
button#convert-button:active{transform:translateY(1px);box-shadow:0 7px 18px rgba(220,38,38,0.35);opacity:.9;}
.option-area--convert {    padding: 1rem 0 0.6rem;}
input.page-range-input { width: auto; min-width: 100px;  border: 1px solid #969696; border-radius: 8px;   height: 20px;   padding: 4px 6px;}

/* ========== MESSAGES / STATUS ========== */
.message-area{margin-top:1rem;  padding:.85rem;  border-radius:10px;  display:none;  font-weight:600;}
.page-range-hint{margin-top:.45rem;font-size:.9rem;color: #f91515;text-align:center;}
.message-area.visible{display:block;} 
.message-area.success{background:#ecfdf5;  border:1px solid #bbf7d0;  color:#065f46;} 
.message-area.error{background:#fff1f2;  border:1px solid #fecaca;  color:#7f1d1d;} 
.message-area.info{background:#eef6f2;  border:1px solid #cfe6d9;  color:#0b3b33;} 
div#message-area {   max-width: 720px;    width: 100%;    margin: auto;}

/* ========== CONVERTED LIST & ITEMS ========== */
.converted-list {
  display: grid;
  gap: 14px;
  margin: 0.6rem auto 0;
  width: 100%;
  max-width: 100%;
  padding: 0 0.5rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  justify-items: stretch;
}

.results-panel.color-card {  border-left: 0;  padding: 1.25rem;  border: 1px solid var(--border-color); border-radius: 16px;  box-shadow: 0 12px 32px rgba(9,20,18,0.08);   background: var(--card-bg); }

.pdf-result {
  width: 100%;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: center;
  text-align: center;
  box-shadow: 0 8px 24px rgba(9,20,18,0.08);
}

.preview-card.pdf-result { align-items: stretch;  text-align: left;}

.pdf-result-thumb-wrap {   width: 100%;  display: flex;  justify-content: center;}

.pdf-result-thumb { height: 140px; width: auto;  max-width: 100%; border-radius: 14px;  object-fit: contain;  background: rgba(243, 244, 246, 0.6); }

.pdf-result-title {  font-weight: 600;  color: var(--text-color);  font-size: 1rem;  margin: 0;  text-align: center;}

.pdf-result-stats { display: flex;  justify-content: center;  gap: 0.75rem;  font-size: 0.9rem;  color: var(--muted-text);  flex-wrap: wrap;}

.pdf-result-stats span {  white-space: nowrap;}

.pdf-result-actions {  width: 100%;  display: flex;  gap: 0.6rem;  flex-wrap: wrap;  justify-content: center;}

.pdf-result-actions .btn {   flex: 1 1 calc(50% - 0.3rem);  min-width: 120px;}

.converted-list.loading::before {
  content: "Converting…";
  position: absolute;
  left: 12px;
  top: 12px;
  padding: .45rem .9rem;
  border-radius: 8px;
  background: rgba(15,23,36,0.06);
  color: var(--muted-text);
  font-weight: 700;
  z-index: 2;
  backdrop-filter: blur(2px);
}
.converted-item{display:flex;  align-items:center;  gap:12px;  background:linear-gradient(180deg,var(--card-bg),var(--muted-card));  padding:.6rem;  border:1px solid var(--border-color);  border-radius:10px;  flex-wrap:wrap;  max-width:100%;  animation:cardFadeIn 0.45s ease-out;}
.converted-thumb{width:72px;  height:54px;  object-fit:cover;  border-radius:6px;} 
.converted-meta{flex:1;  min-width:0;  margin:auto;} 
.converted-name{font-weight:500;color:var(--text-color);font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left;margin:0;max-width:200px;}

.converted-size{margin:auto;} 
.converted-actions{display:flex;  gap:.5rem;  align-items:center;  margin:auto;} 
a.btn.primary { text-decoration: none;    text-align: center; }

/* ========== PAGE CONTENT / SEO SECTION ========== */
.page-content{margin-top:1.8rem;  background:transparent;  padding:1rem 0 2rem 0;} 
.content-body{display:flex;  flex-direction:column;  gap:1.25rem;} 
.color-card{padding:.5rem 1rem 1.5rem;  border-radius:14px;  display:flex;  flex-direction:column;  gap:1rem;  align-items:flex-start;  background:var(--card-bg);  border-left:3px solid green;} 

/* Content card with better typography */
.content-card{margin:0 auto;  padding:1.6rem 1.8rem;  border-radius:14px;  box-shadow:0 14px 44px rgba(11,20,18,0.06);  display:flex;  flex-direction:column;  gap:1rem;  align-items:flex-start;  background:var(--card-bg);  border:1px solid var(--border-color);  animation:contentFadeUp 0.8s ease-out 0.2s 1;} 
.content-card>h2{margin:0 0 .6rem 0;  font-size:1.6rem;  color:var(--surface-dark);  line-height:1.2;  letter-spacing:0.2px;} 
.content-card h3{margin:.4rem 0 .5rem 0;  color:var(--surface-dark);  font-size:1.25rem;  font-weight:700;} 
.content-card p{margin:0 0 .9rem 0;  line-height:1.75;  font-size:1rem;  color:var(--text-color);} 
.content-card ul,.content-card ol{margin:.3rem 0 1rem 1.4rem;  line-height:1.75;} 
.content-card li{margin-bottom:.4rem;    color:var(--text-color);    }
.section-block{padding-top:.6rem;    padding-bottom:.4rem;    width:100%;} 
.section-block+.section-block{margin-top:.6rem;} 
.section-divider{height:1px;  background:linear-gradient(90deg,rgba(14,35,50,0.06),rgba(14,35,50,0.02));  margin:1rem 0;  width:100%;} 
.seo-text{color:var(--muted-text);  line-height:1.8;  font-size:1.02rem;} 
.more-text{margin-top:.8rem;  color:var(--muted-text);} 
p.sub-text{padding-left:10px;} 

/* ========== FEATURE CHIPS & BENEFITS ========== */
.feature-chips{display:grid;  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));  gap:.6rem;  margin-top:.5rem;  padding-left:0;  list-style:none;} 
.feature-chip{border:1px solid rgba(14,35,50,0.06);  background:linear-gradient(180deg,#fbfdff,#ffffff);  padding:.6rem .8rem;  border-radius:10px;  font-weight:600;  color:#15313a;  box-shadow:0 6px 18px rgba(11,20,18,0.03);  display:flex;  align-items:flex-start;  gap:.5rem;} 
.benefits-list{display:grid;  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));  gap:.6rem;  margin-top:.6rem;  padding-left:0;  list-style:none;} 
.benefits-list li{background:transparent;  padding:.8rem;  border-radius:8px;  font-weight:400;  color:var(--surface-dark);  display:flex;  align-items:center;  gap:.5rem;} 

/* ========== FAQ STYLING ========== */
.faq-section{margin-top:1rem;  padding-top:.6rem;  border-top:1px dashed rgba(14,35,50,0.04);  width:100%;} 
.faq-list{margin-top:.8rem;  display:flex;  flex-direction:column;  gap:1.6rem;} 
.faq-item{padding:0;  border-radius:0;  border:0;  background:transparent;} 
.faq-q{font-weight:700;  margin-bottom:.18rem;  font-size:1.02rem;  color:var(--surface-dark);  padding-left:8px;} 
.faq-a{color:var(--muted-text);  line-height:1.75;  margin:0;  padding-left:20px;  padding-top:4px;  font-size:0.97rem;} 

/* ========== FOOTER ========== */
footer.site-footer{background:var(--footer-bg);  color:#fff;  padding:2rem 0 1.25rem;  margin-top:2.5rem;  border-top:1px solid rgba(255,255,255,0.03);} 
.footer-inner{display:flex;  gap:2rem;  align-items:flex-start;  justify-content:space-between;  flex-wrap:wrap;} 
.footer-brand h3{margin:0;  font-size:1.1rem;} 
.footer-brand .muted{color:var(--footer-muted);  margin-top:.3rem;  font-size:.95rem;} 
.footer-links{display:flex;  gap:2rem;  align-items:flex-start;  flex-wrap:wrap;} 
.footer-column h4{margin:0 0 .5rem 0;  color:var(--footer-muted);  font-size:.95rem;} 
.footer-column ul{margin:0;  padding:0;  list-style:none;} 
.footer-column a{color:#fff;  text-decoration:none;  display:block;  margin-bottom:.4rem;  opacity:0.95;  font-size:.9rem;} 
.footer-column a:hover{opacity:1;  text-decoration:underline;} 
.footer-bottom{margin-top:1rem;  text-align:center;  padding-top:1rem;  border-top:1px solid rgba(255,255,255,0.04);} 
.footer-bottom small{color:var(--footer-muted);} 

/* ========== PREVIEW / CONVERTED NAME TWEAKS ========== */
.preview-list .file-name,.converted-list .converted-name{display:block;  overflow:hidden;  text-overflow:ellipsis;  white-space:nowrap;  max-width:100%;} 
.converted-size,.converted-name{margin:auto; text-align:center} 
.converted-name{ font-size:0.9rem}

/* ========== UTILITY CLASSES ========== */
.visually-hidden{position:absolute;  width:1px;  height:1px;  padding:0;  margin:-1px;  overflow:hidden;  clip:rect(0 0 0 0);  white-space:nowrap;  border:0;} 
div#zip-wrapper{margin:auto;} 
button#download-zip{border-color:red;  font-size:1rem;  color:blue;  margin:auto;} 

/* ========== RESPONSIVE QUERIES ========== */

@media (max-width:520px){
  .preview-list{grid-template-columns:repeat(1,minmax(170px,1fr));}
}

@media (min-width:520px){
  .preview-list{grid-template-columns:repeat(2,minmax(170px,1fr));}
}
@media (min-width:900px){
  .preview-list{grid-template-columns:repeat(3,minmax(200px,1fr));}
}
@media (min-width:1400px){
    .container {max-width:1080px}
  .preview-list{grid-template-columns:repeat(4,minmax(200px,1fr));}
}

@media (max-width: 1400px) { 
    .container {max-width:980px}
    .preview-list {   grid-template-columns: repeat(3, minmax(200px, 1fr));  } }

@media (max-width:880px){
  .header-inner{flex-direction:column;  align-items:center;  gap:.6rem;  text-align:center;  padding-top: 0px;}
  .brand{margin-left:0;}
  .footer-inner{flex-direction:column;  gap:1rem;  align-items:flex-start;}
  .controls{flex-direction:column;  align-items:center;  padding-top:20px;}
  #quality-range{width:200px;}
  .upload-area{padding:1.3rem 1rem;margin:1rem auto 0;}
  .preview-list{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));padding:0 0.4rem;}
  .preview-card{max-width:100%;}
  .converted-item{flex-direction:row;}
}

@media (max-width:720px){
  .feature-chips{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));} 
  .content-card{padding:1.1rem 1rem;  gap:.75rem;} 
  .content-card>h2{font-size:1.35rem;} 
  .content-card p{font-size:.97rem;  line-height:1.8;} 
}

@media (max-width:520px){
  .preview-list{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));padding:0 0.3rem;}
  .thumb{width:80px;  height:80px;}
  .upload-area{padding:1.1rem 0.8rem;}
  .converted-item{flex-direction:column;  align-items:flex-start;  gap:.5rem;}
  .converted-thumb{width:100%; height:130px; object-fit:contain;}
  #quality-range{width:100%;}
  .controls{gap:.6rem;}
  .file-name{max-width:100%;  white-space:normal;  -webkit-line-clamp:2;  display:block;}
  .preview-list .file-name,.converted-list .converted-name{font-size:.85rem;}
  .preview-card,.converted-item{padding:.5rem;  gap:8px;}
}

/* ========== ANIMATIONS ========== */
@keyframes headerDrop{0%{opacity:0;  transform:translateY(-18px);} 100%{opacity:1;  transform:translateY(0);} }
@keyframes contentFadeUp{0%{opacity:0;  transform:translateY(18px);} 100%{opacity:1;  transform:translateY(0);} }
@keyframes floatIn{0%{opacity:0;  transform:translateY(14px) scale(0.98);} 100%{opacity:1;  transform:translateY(0) scale(1);} }
@keyframes cardFadeIn{0%{opacity:0;  transform:translateY(8px);} 100%{opacity:1;  transform:translateY(0);} }


/* Upload preview animation: only newly added items */
.preview-card{animation:none !important;}
.preview-card.new-upload{animation:cardFadeIn 0.45s ease-out !important; animation-fill-mode:both;}

/* Custome css */

/* Modern professional upload box */
.upload-area{width:100%;max-width:920px;margin:1.4rem auto 0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1.6rem 1.4rem;border-radius:14px;cursor:pointer;min-height:160px;background:linear-gradient(135deg,#f9fafb,#eef7f5);border:1px dashed rgba(17,77,64,0.45);box-shadow:0 12px 30px rgba(15,23,42,0.06);position:relative;overflow:hidden;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease;}
.upload-area::before{content:"📁";font-size:2.1rem;margin-bottom:.6rem;opacity:.95;animation:folderPulse 2.4s ease-in-out infinite;}
.upload-area::after{content:none!important;}

.upload-area.dragover{outline:none;background:linear-gradient(135deg,#ecfdf3,#dff7ef);border-color:var(--primary-color);box-shadow:0 18px 40px rgba(15,118,110,0.22);transform:translateY(-2px);animation:uploadGlow 1.4s ease-in-out infinite alternate;}

.upload-area:focus-visible{outline:2px solid rgba(17,77,64,0.55);outline-offset:4px;box-shadow:0 6px 16px rgba(15,23,42,0.18);}

.upload-area:active{transform:translateY(1px) scale(.985);box-shadow:0 8px 22px rgba(15,23,42,0.2);}
.upload-area--disabled{opacity:0.55;pointer-events:none;cursor:not-allowed;filter:grayscale(0.35);transition:opacity .2s ease,box-shadow .2s ease;}

.drop-hint{order:2;margin:.75rem 0 0;color:#4b5563;font-size:.95rem;font-weight:500;text-align:center;max-width:420px;}
.upload-status{margin-top:.35rem;font-size:1rem;font-weight:600;color:#065f46;text-align:center;display:none;transition:opacity .2s ease;}
.upload-status.visible{display:block;}

.upload-button{order:1;font-size:1rem;display:inline-block;color:#ffffff;padding:.55rem 1.35rem;border-radius:999px;text-decoration:none;margin-top:.15rem;cursor:pointer;font-weight:600;background:linear-gradient(135deg,var(--primary-color),var(--primary-hover));border:0;box-shadow:0 8px 22px rgba(17,77,64,0.22);transition:transform .16s ease,box-shadow .16s ease,opacity .16s ease;}
.upload-button:hover{transform:translateY(-1px);box-shadow:0 12px 28px rgba(17,77,64,0.30);opacity:.97;}
.upload-button:active{transform:translateY(1px);box-shadow:0 5px 14px rgba(17,77,64,0.25);opacity:.9;}
input[type=file]{display:none;}
.pdf-preview-area {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  width: 100%;
}
.pdf-preview-area img {
    width: auto;
    max-width: 220px;
    height: 200px;
    border-radius: 12px;
    object-fit: contain;
}

.modal-gallery{position:relative;overflow:hidden;}
.modal-close{position:absolute;top:12px;right:12px;z-index:2;}
.modal-close-btn{background:#fee2e2;color:#b91c1c;border:none;border-radius:50%;width:36px;height:36px;display:flex;align-items:center;justify-content:center;font-weight:700;box-shadow:0 6px 14px rgba(16,24,40,0.2);cursor:pointer;transition:transform .15s ease,box-shadow .15s ease;}
.modal-close-btn:hover{transform:scale(1.04);box-shadow:0 10px 20px rgba(16,24,40,0.25);}

.modal-nav{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-top:12px;width:100%;}
.modal-nav-controls,.modal-zoom-controls{display:flex;align-items:center;gap:10px;}
.modal-nav-btn,.modal-zoom-btn{border-radius:999px;width:40px;height:40px;border:none;background:#f1f5f9;color:#0f172a;font-weight:700;box-shadow:0 6px 16px rgba(15,23,42,0.18);cursor:pointer;transition:transform .15s ease,box-shadow .15s ease;}
.modal-nav-btn:hover,.modal-zoom-btn:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(15,23,42,0.25);}


@keyframes uploadGlow{0%{box-shadow:0 12px 30px rgba(8,24,20,0.18),0 0 0 0 rgba(34,197,94,0.35);}100%{box-shadow:0 18px 40px rgba(8,24,20,0.3),0 0 0 10px rgba(34,197,94,0);}}
@keyframes folderPulse{0%{transform:translateY(0) scale(1);opacity:.9;}50%{transform:translateY(-2px) scale(1.06);opacity:1;}100%{transform:translateY(0) scale(1);opacity:.9;}}


.preview-card,
.pdf-result {
  overflow: hidden;
}

.file-name,
.pdf-result-title {
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  word-break: break-all;
}