:root{
  --blue:#1a73e8;
  --blue-dark:#1765cc;
  --bg:#f8f9fa;
  --surface:#ffffff;
  --text:#202124;
  --text-sub:#5f6368;
  --border:#dadce0;
  --danger:#d93025;
  --shadow-1:0 1px 2px 0 rgba(60,64,67,.30),0 1px 3px 1px rgba(60,64,67,.15);
  --shadow-2:0 1px 3px 0 rgba(60,64,67,.30),0 4px 8px 3px rgba(60,64,67,.15);
  --radius:8px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Roboto',system-ui,-apple-system,sans-serif;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
}

/* Top app bar */
.appbar{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;gap:16px;
  background:var(--surface);
  padding:12px 24px;
  box-shadow:var(--shadow-1);
}
.appbar .logo{
  width:32px;height:32px;border-radius:8px;
  background:var(--blue);color:#fff;
  display:grid;place-items:center;font-weight:700;font-size:16px;
}
.appbar h1{font-size:18px;font-weight:500;margin:0}
.appbar h1 .sub{font-size:12px;color:var(--text-sub);font-weight:400;margin-left:8px}
.appbar .spacer{flex:1}

.btn{
  font-family:inherit;font-size:14px;font-weight:500;
  border:none;border-radius:20px;padding:9px 18px;
  cursor:pointer;display:inline-flex;align-items:center;gap:8px;
  transition:background .15s,box-shadow .15s,opacity .15s;
  white-space:nowrap;
}
.btn-primary{background:var(--blue);color:#fff}
.btn-primary:hover{background:var(--blue-dark);box-shadow:var(--shadow-1)}
.btn-primary:disabled{background:#c3c7cc;cursor:not-allowed;box-shadow:none}
.btn-text{background:transparent;color:var(--blue)}
.btn-text:hover{background:rgba(26,115,232,.08)}
.btn-tonal{background:#e8f0fe;color:var(--blue-dark)}
.btn-tonal:hover{background:#d7e5fd}
.btn-danger{background:transparent;color:var(--danger)}
.btn-danger:hover{background:rgba(217,48,37,.08)}
.btn.small{padding:6px 12px;font-size:13px}

/* Hover info bubbles (tooltips) */
[data-tip]{position:relative}
[data-tip]:hover::after,[data-tip]:focus-visible::after{
  content:attr(data-tip);
  position:absolute;left:50%;bottom:calc(100% + 9px);transform:translateX(-50%);
  background:#202124;color:#fff;font-size:12px;font-weight:400;line-height:1.35;
  text-align:center;padding:7px 10px;border-radius:6px;
  width:max-content;max-width:230px;white-space:normal;
  box-shadow:var(--shadow-2);z-index:120;pointer-events:none;
}
[data-tip]:hover::before,[data-tip]:focus-visible::before{
  content:"";position:absolute;left:50%;bottom:calc(100% + 4px);transform:translateX(-50%);
  border:5px solid transparent;border-top-color:#202124;z-index:120;pointer-events:none;
}
/* Variant: show the bubble below the element (for top app bar) */
.tip-below[data-tip]:hover::after,.tip-below[data-tip]:focus-visible::after{
  bottom:auto;top:calc(100% + 9px);
}
.tip-below[data-tip]:hover::before,.tip-below[data-tip]:focus-visible::before{
  bottom:auto;top:calc(100% + 4px);
  border-top-color:transparent;border-bottom-color:#202124;
}

.wrap{max-width:1000px;margin:0 auto;padding:24px}

/* Limitations notice */
.notice{
  background:#fef7e0;border:1px solid #feefc3;border-radius:var(--radius);
  padding:14px 16px;margin-bottom:20px;display:flex;gap:12px;align-items:flex-start;
}
.notice .ic{font-size:20px;line-height:1}
.notice .body{flex:1;font-size:13.5px;color:#5f4b1f;line-height:1.5}
.notice .body strong{color:#3d3111}
.notice a{color:var(--blue);cursor:pointer;text-decoration:none;font-weight:500}
.notice .close{cursor:pointer;color:#9a8642;font-size:18px;background:none;border:none}

/* Drop zone / empty state */
.dropzone{
  background:var(--surface);border:2px dashed var(--border);
  border-radius:12px;padding:56px 24px;text-align:center;
  transition:border-color .15s,background .15s;cursor:pointer;
}
.dropzone.drag{border-color:var(--blue);background:#f0f6ff}
.dropzone .big{font-size:44px;margin-bottom:8px}
.dropzone h2{margin:0 0 6px;font-weight:500;font-size:20px}
.dropzone p{margin:0 0 18px;color:var(--text-sub);font-size:14px}
.limits-note{margin-top:16px;font-size:12.5px;color:var(--text-sub)}

/* How-to-use guide */
.guide{
  background:var(--surface);border:1px solid var(--border);
  border-radius:12px;padding:24px;margin-top:20px;box-shadow:var(--shadow-1);
}
.guide h3{margin:0 0 16px;font-weight:500;font-size:18px}
.guide-samples{
  display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;margin-bottom:8px;
}
.guide-samples figure{margin:0;text-align:center}
.guide-samples img{
  width:180px;height:auto;border:1px solid var(--border);border-radius:8px;background:#fff;
}
.guide-samples figcaption{margin-top:8px;font-size:12.5px;color:var(--text-sub)}
.guide-arrow{font-size:26px;color:var(--blue)}
.guide-steps p{font-size:14px;color:var(--text-sub);line-height:1.6;margin:12px 0 16px}
.guide-steps b{color:var(--text)}
.guide-buttons{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px;margin-bottom:8px;
}
.gb{
  display:flex;flex-direction:column;gap:3px;
  background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:10px 12px;
}
.gb-name{font-weight:500;font-size:13.5px;color:var(--text)}
.gb-desc{font-size:12.5px;color:var(--text-sub);line-height:1.45}
.guide-verify{
  margin:12px 0 0;font-size:12.5px;color:#137333;background:#e6f4ea;
  border-radius:8px;padding:10px 12px;
}

/* Toolbar */
.toolbar{
  position:sticky;top:57px;z-index:40;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);box-shadow:var(--shadow-1);
  padding:12px;margin-bottom:20px;
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;
}
.search{
  display:flex;align-items:center;gap:8px;
  background:var(--bg);border:1px solid var(--border);border-radius:24px;
  padding:6px 8px 6px 14px;flex:1;min-width:240px;
}
.search input{
  border:none;background:transparent;outline:none;font-size:14px;
  font-family:inherit;flex:1;color:var(--text);
}
.search .ic{color:var(--text-sub)}
.divider{width:1px;height:28px;background:var(--border);margin:0 2px}
.count-chip{
  font-size:13px;color:var(--text-sub);background:var(--bg);
  border-radius:16px;padding:6px 12px;font-weight:500;
}
.count-chip b{color:var(--text)}
.match-chip{
  font-size:12.5px;color:var(--text-sub);background:var(--bg);
  border-radius:16px;padding:6px 10px;font-weight:500;white-space:nowrap;
}
.drag-tip{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12.5px;color:var(--blue-dark);background:#e8f0fe;
  border:1px dashed #8ab4f8;border-radius:16px;padding:5px 12px;
  font-weight:500;white-space:nowrap;
}
.drag-hint{
  position:absolute;left:50%;top:14px;transform:translateX(-50%);
  background:rgba(32,33,36,.82);color:#fff;font-size:13px;font-weight:500;
  padding:8px 14px;border-radius:20px;z-index:4;pointer-events:none;
  display:flex;align-items:center;gap:8px;box-shadow:var(--shadow-1);
  animation:hintpulse 1.8s ease-in-out infinite;white-space:nowrap;
}
@keyframes hintpulse{0%,100%{opacity:.92}50%{opacity:.55}}
.hint{font-size:12.5px;color:var(--text-sub);width:100%;margin-top:2px}
.hint kbd{
  background:var(--bg);border:1px solid var(--border);border-radius:4px;
  padding:1px 6px;font-family:'Roboto Mono',monospace;font-size:11px;
}

/* Pages viewer */
#viewer{display:flex;flex-direction:column;align-items:center;gap:20px}
.page-card{
  position:relative;background:var(--surface);
  box-shadow:var(--shadow-2);border-radius:4px;overflow:visible;
  line-height:0;
}
.page-card canvas{display:block}
.overlay{position:absolute;inset:0;cursor:crosshair}
.redact-box{
  position:absolute;background:#000;
  outline:1px solid rgba(255,255,255,.35);
}
.redact-box .rm{
  position:absolute;top:-9px;right:-9px;
  width:20px;height:20px;border-radius:50%;
  background:#fff;color:var(--danger);border:1px solid var(--border);
  font-size:12px;line-height:18px;text-align:center;cursor:pointer;
  box-shadow:var(--shadow-1);z-index:3;
}
.redact-box.search{outline:1px dashed #8ab4f8}
.search-hl{
  position:absolute;background:rgba(251,188,4,.30);
  outline:1px solid #f9ab00;pointer-events:none;border-radius:2px;
}
.search-hl.current{background:rgba(26,115,232,.32);outline:2px solid var(--blue)}
.drawing{position:absolute;background:rgba(0,0,0,.45);border:1px solid #000}
.page-label{
  position:absolute;left:8px;top:8px;z-index:2;
  background:rgba(0,0,0,.55);color:#fff;font-size:11px;
  padding:2px 8px;border-radius:10px;line-height:1.4;
}

/* Modal */
.modal-bg{
  position:fixed;inset:0;background:rgba(32,33,36,.55);
  display:none;align-items:center;justify-content:center;z-index:100;padding:20px;
}
.modal-bg.show{display:flex}
.modal{
  background:var(--surface);border-radius:12px;max-width:560px;width:100%;
  box-shadow:var(--shadow-2);padding:24px;max-height:85vh;overflow:auto;
}
.modal h3{margin:0 0 12px;font-weight:500;font-size:20px}
.modal .modal-intro{color:var(--text-sub);font-size:14px;margin:0 0 14px;line-height:1.6}
.modal .modal-sub{font-weight:500;margin:12px 0 6px}
.modal ul{margin:0 0 8px;padding-left:20px;color:var(--text-sub);font-size:14px;line-height:1.7}
.modal ul b{color:var(--text)}
.modal .ok-row{display:flex;justify-content:flex-end;margin-top:16px}

/* Progress */
.progress-bg{
  position:fixed;inset:0;background:rgba(255,255,255,.7);
  display:none;align-items:center;justify-content:center;z-index:110;flex-direction:column;gap:14px;
}
.progress-bg.show{display:flex}
.spinner{
  width:44px;height:44px;border:4px solid #d7e5fd;border-top-color:var(--blue);
  border-radius:50%;animation:spin 1s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.progress-bg .lbl{font-size:14px;color:var(--text-sub);font-weight:500}

.hidden{display:none !important}
.footer{
  text-align:center;color:var(--text-sub);font-size:12.5px;
  padding:28px 0 40px;
}
.footer b{color:var(--text)}
.footer .made{margin-top:8px;font-size:12.5px}
.footer .made a{color:var(--blue);text-decoration:none;font-weight:500}
.footer .made a:hover{text-decoration:underline}
.footer .heart{color:#e0245e;font-style:normal}

/* Decorative random cute SVG art */
.doodle-layer{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.doodle{position:absolute;opacity:.14;will-change:transform;animation:floaty 9s ease-in-out infinite}
@keyframes floaty{
  0%,100%{transform:translateY(0) rotate(var(--rot,0deg))}
  50%{transform:translateY(-10px) rotate(var(--rot,0deg))}
}
/* Keep interactive content above the doodles */
.appbar,.wrap{position:relative}
.wrap{z-index:1}