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

/* ===========================================================
   PDF Tools — shared stylesheet
   Works on phones, tablets, laptops; portrait + landscape.
   =========================================================== */
:root{
  --bg-1:#f5f9fd;
  --bg-2:#e8f0f9;
  --card:#ffffff;
  --ink:#0b1b33;
  --ink-2:#33455f;
  --muted:#6b7c95;
  --line:#e4ebf5;
  --blue:#1769f0;
  --blue-strong:#0f57cc;
  --blue-soft:#eaf1fe;
  --blue-soft-2:#f2f7ff;
  --green:#16a34a;
  --green-soft:#e6f7ec;
  --red:#ef4444;
  --red-soft:#fdecec;
  --purple:#8b5cf6;
  --purple-soft:#f3edfe;
  --orange:#f97316;
  --orange-soft:#fff0e6;
  --teal:#14b8a6;
  --teal-soft:#e6faf7;
  --radius-l:18px;
  --radius-m:14px;
  --radius-s:10px;
  --shadow-s:0 1px 2px rgba(16,38,76,.05);
  --shadow-m:0 1px 2px rgba(16,38,76,.05),0 8px 22px rgba(16,38,76,.07);
  --shadow-l:0 18px 50px rgba(11,27,51,.20);
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-l:env(safe-area-inset-left,0px);
  --safe-r:env(safe-area-inset-right,0px);
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box;}
[hidden]{display:none !important;}
html,body{
  height:100%;
  height:100dvh;
  width:100%;
  max-width:100%;
  margin:0;
  overflow:hidden;
}
body{
  margin:0;
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color:var(--ink);
  background:linear-gradient(160deg,var(--bg-1) 0%,var(--bg-2) 100%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior:none;
}
button{font:inherit;color:inherit;}
:focus-visible{outline:3px solid rgba(23,105,240,.45);outline-offset:2px;border-radius:8px;}

/* ---------- App shell ---------- */
.app{
  height:100%;
  height:100dvh;
  max-height:100dvh;
  width:100vw;
  max-width:100vw;
  min-width:0;
  display:flex;
  overflow:hidden;
  flex-direction:column;
  padding-left:var(--safe-l);
  padding-right:var(--safe-r);
}
.view{display:none;flex:1 1 auto;min-height:0;flex-direction:column;overflow:hidden;}
.view.is-active{display:flex;}

/* ---------- Top bar ---------- */
.topbar{
  position:relative;
  display:flex;align-items:center;justify-content:center;gap:14px;
  min-height:50px;
  padding:10px 16px;
  flex:0 0 auto;
}
.topbar > .iconbtn:first-child,
.topbar .backBtn {
  position:absolute;
  left:10px;
  top:50%;
  transform:translateY(-50%);
  display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;
  border-radius:8px;
  background:transparent;
  box-shadow:none;
  border:0;
  color:inherit;
}
.topbar > .iconbtn:first-child svg,
.topbar .backBtn svg {
  width:24px;height:24px;
}
.topbar .spacer{flex:1 1 auto;}
.iconbtn{
  width:34px;height:34px;flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;
  border:0;border-radius:8px;
  background:transparent;
  cursor:pointer;transition:transform .12s ease,background .12s ease;
}
.iconbtn:hover{background:rgba(0,0,0,0.05);}
.iconbtn:active{transform:scale(.94);}
.iconbtn svg{width:24px;height:24px;}
.page-title{
  margin:0 auto;
  font-size:1.2rem;
  font-weight:400;
  font-style:normal;
  letter-spacing:normal;
  font-family:"Roboto",sans-serif;
  color:#000;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  text-align:center;
}
.content{
  flex:1 1 auto;
  min-height:0;
  min-width:0;
  width:100%;
  max-width:100%;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  padding:0 clamp(14px,3.5vw,34px) clamp(10px,2vh,20px);
}
.wrap{
  max-width:1180px;
  min-width:0;
  margin:0 auto;
  width:100%;
  max-width:100%;
}

/* ---------- Drop zone ---------- */
.dropzone{
  margin:clamp(8px,2vh,20px) auto 0;
  max-width:1180px;
  min-height:min(50vh,440px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;text-align:center;
  padding:clamp(18px,5vw,44px);
  border:2px dashed var(--blue);
  border-radius:22px;
  background:rgba(255,255,255,.45);
  transition:background .15s ease,border-color .15s ease,transform .15s ease;
}
.dropzone.is-over{background:var(--blue-soft);transform:scale(1.005);}
.dz-icon{
  width:clamp(70px,12vw,100px);aspect-ratio:1;
  border-radius:50%;
  background:var(--blue-soft);
  display:grid;place-items:center;
  margin-bottom:clamp(6px,1.6vh,14px);
}
.dz-icon svg{width:46%;height:46%;color:var(--blue);}
.dz-title{margin:0;font-size:clamp(20px,3.4vw,32px);font-weight:800;letter-spacing:-.02em;}
.dz-sub{margin:0;color:var(--muted);font-size:clamp(14px,1.7vw,18px);}

/* ---------- Banner Ad ---------- */
.ad-banner-wrapper{
  flex:0 0 var(--ad-banner-height, 70px);
  width:100%;
  height:var(--ad-banner-height, 70px);
  overflow:hidden;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#ffffff;
  position:relative;
  z-index:20;
}
.ad-banner-wrapper .adsbygoogle{
  max-height:var(--ad-banner-height, 70px);
  overflow:hidden;
}
.btn{
  border:0;border-radius:12px;cursor:pointer;
  background:var(--blue);color:#fff;font-weight:700;
  padding:14px 30px;font-size:clamp(15px,1.8vw,18px);
  box-shadow:0 6px 16px rgba(23,105,240,.28);
  transition:background .12s ease,transform .12s ease;
}
.btn:hover{background:var(--blue-strong);}
.btn:active{transform:scale(.97);}
.btn:disabled{background:#b9cdf0;box-shadow:none;cursor:not-allowed;}
.btn-block{display:block;width:100%;padding:17px 20px;border-radius:14px;}
.btn-ghost{
  background:var(--blue-soft);color:var(--blue);box-shadow:none;font-weight:700;
}
.btn-ghost:hover{background:#dfe9fe;}
.mt{margin-top:clamp(14px,3vh,26px);}
.visually-hidden{position:fixed;top:0;left:-10000px;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

/* ---------- File card ---------- */
.filecard{
  display:flex;align-items:center;gap:16px;
  background:var(--card);border-radius:var(--radius-l);
  padding:14px 18px;box-shadow:var(--shadow-s);
  border:1px solid var(--line);
  width:100%;text-align:left;cursor:pointer;
}
.filecard .badge{
  width:56px;height:56px;flex:0 0 auto;border-radius:14px;
  background:var(--red-soft);display:grid;place-items:center;color:var(--red);
  font-weight:800;font-size:12px;letter-spacing:.04em;
}
.filecard .meta{flex:1 1 auto;min-width:0;display:block;}
.filecard .name{display:block;font-weight:700;font-size:clamp(15px,1.9vw,19px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.filecard .size{display:block;color:var(--muted);font-size:clamp(13px,1.6vw,16px);margin-top:2px;}
.filecard .chev{color:var(--muted);flex:0 0 auto;display:flex;align-items:center;}

.section-title{
  margin:clamp(18px,3.4vh,28px) 0 12px;
  font-size:clamp(18px,2.3vw,25px);font-weight:800;letter-spacing:-.02em;
}

/* ---------- Toast ---------- */
.toast{
  position:fixed;left:50%;bottom:calc(26px + var(--safe-b));
  transform:translate(-50%,18px);
  background:#0b1b33;color:#fff;
  padding:12px 20px;border-radius:999px;
  font-size:14px;font-weight:600;
  box-shadow:var(--shadow-l);
  opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease;
  z-index:90;max-width:min(92vw,460px);text-align:center;
}
.toast.is-on{opacity:1;transform:translate(-50%,0);}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important;}
}