/* PindaiKu — modern clean UI.
   Swiss-minimal direction (UI/UX Pro Max design system): light neutral
   background, white cards, one accent color, generous spacing, soft
   shadows only, 44px+ touch targets, no decoration without function. */
:root{
  --green:#177245;
  --green-dark:#0f5132;
  --wa:#1faa55;
  --ink:#101828;
  --muted:#667085;
  --line:#e4e7ec;
  --bg:#f6f7f8;
  --card:#ffffff;
  --danger:#c0362c;
  --shadow-card:0 1px 2px rgba(16,24,40,.05), 0 10px 30px rgba(16,24,40,.06);
  --shadow-pop:0 12px 34px rgba(16,24,40,.16);
  --radius:18px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background:var(--bg);
  color:var(--ink);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
.hidden{display:none !important}
button{font-family:inherit}
:focus-visible{outline:2.5px solid var(--green); outline-offset:2px}
@media (prefers-reduced-motion: reduce){
  *{transition:none !important; animation:none !important}
}

/* ---------- top bar ---------- */
.topbar{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 18px;
  padding-top:calc(12px + env(safe-area-inset-top));
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex; align-items:center; gap:11px}
.brand-icon{width:38px; height:38px; border-radius:10px}
.brand-name{font-size:19px; font-weight:800; letter-spacing:-.02em; line-height:1.1}
.brand-sub{font-size:12px; color:var(--muted); font-weight:500}

main{max-width:560px; margin:0 auto; padding:16px 16px 30px}

/* ---------- buttons ---------- */
.btn{
  appearance:none; border:1.5px solid transparent; cursor:pointer;
  font-size:15px; font-weight:600; border-radius:999px;
  padding:12px 18px; min-height:48px;
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  transition:background .18s ease, border-color .18s ease, transform .12s ease;
  -webkit-tap-highlight-color:transparent;
}
.btn:active{transform:scale(.985)}
.btn-primary{background:var(--green); color:#fff}
.btn-primary:active{background:var(--green-dark)}
.btn-secondary{background:var(--card); color:var(--ink); border-color:var(--line)}
.btn-ghost{background:transparent; color:var(--muted); padding:10px 12px; min-height:44px}
.btn-ghost:active{color:var(--ink)}
.btn-danger{color:var(--danger)}
.btn-small{padding:8px 14px; min-height:40px; font-size:13.5px}
.btn-wa{background:var(--wa); color:#fff}
.btn-fab{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:calc(18px + env(safe-area-inset-bottom)); z-index:15;
  padding:15px 26px; font-size:16px; font-weight:700;
  box-shadow:var(--shadow-pop); max-width:calc(100vw - 32px);
}
.btn-fab:active{transform:translateX(-50%) scale(.98)}
.bottom-space{height:96px}

/* ---------- home ---------- */
.home-tools{display:flex; gap:8px; align-items:stretch; margin-bottom:14px}
.search-pill{
  flex:1; display:flex; align-items:center; gap:8px;
  background:var(--card); border:1.5px solid var(--line); border-radius:999px;
  padding:0 15px; color:var(--muted); min-height:46px;
}
.search-pill input{
  flex:1; border:none; outline:none; font:inherit; font-size:15px;
  background:transparent; color:var(--ink); min-width:0;
}
.sort-select{
  font:inherit; font-size:13.5px; font-weight:600; color:var(--ink);
  background:var(--card); border:1.5px solid var(--line); border-radius:999px;
  padding:0 10px; min-height:46px; max-width:118px;
}
#btn-select-mode.active{background:rgba(23,114,69,.09); color:var(--green-dark)}
.doc-grid{display:grid; grid-template-columns:1fr 1fr; gap:13px}
.doc-card{
  position:relative; text-align:left; padding:0; overflow:hidden; cursor:pointer;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-card); font:inherit; color:inherit; width:100%;
  transition:transform .15s ease, border-color .15s ease;
}
.doc-card:active{transform:scale(.985)}
.doc-card img{width:100%; aspect-ratio:3/3.4; object-fit:cover; object-position:top; display:block; background:#eceff1}
.dc-body{padding:11px 13px 13px}
.dc-title{font-size:14.5px; font-weight:600; line-height:1.35; word-break:break-word}
.dc-meta{font-size:12px; color:var(--muted); margin-top:3px; font-weight:500}
.doc-card .chk{
  position:absolute; top:9px; right:9px; width:26px; height:26px; border-radius:50%;
  background:rgba(255,255,255,.92); border:2px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  font-size:15px; font-weight:800; color:transparent;
}
.doc-card.selected{border-color:var(--green); border-width:2px}
.doc-card.selected .chk{background:var(--green); border-color:var(--green); color:#fff}
.merge-bar{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:calc(86px + env(safe-area-inset-bottom)); z-index:16;
  display:flex; align-items:center; gap:9px;
  background:var(--card); border:1px solid var(--line); border-radius:999px;
  box-shadow:var(--shadow-pop); padding:7px 8px 7px 16px;
  font-size:14px; font-weight:600; white-space:nowrap; max-width:calc(100vw - 24px);
}
.empty{text-align:center; padding:64px 24px 20px}
.empty-emoji{font-size:46px}
.empty-title{font-size:17px; font-weight:700; margin:12px 0 4px}
.empty-text{color:var(--muted); font-size:14.5px; margin:0}
.noresult{text-align:center; color:var(--muted); font-size:14.5px; padding:26px 10px}

/* ---------- session ---------- */
.session-head{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; min-height:44px}
.session-title{font-size:17px; font-weight:700}
.session-count{font-size:13px; color:var(--muted); font-weight:500; text-align:right}
.preview-hint{font-size:13.5px; color:var(--muted); margin:2px 2px 10px}
.session-preview img, .corner-stage img{
  width:100%; display:block; border-radius:var(--radius);
  border:1px solid var(--line); background:#fff; box-shadow:var(--shadow-card);
}
.filter-block{margin-top:18px}
.filter-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px}
.filter-label{font-size:15px; font-weight:700}
.filter-tiles{display:flex; gap:9px; overflow-x:auto; padding:2px 2px 8px; -webkit-overflow-scrolling:touch}
.ftile{
  flex:0 0 auto; width:78px; padding:5px; cursor:pointer;
  background:var(--card); border:2px solid var(--line); border-radius:14px;
  font:inherit; transition:border-color .15s ease;
}
.ftile img{width:100%; aspect-ratio:3/4; object-fit:cover; object-position:top; border-radius:9px; display:block; background:#eceff1}
.ftile span{display:block; font-size:11px; font-weight:600; text-align:center; margin-top:5px; color:var(--muted); line-height:1.2}
.ftile.active{border-color:var(--green)}
.ftile.active span{color:var(--green-dark)}
.filter-note{font-size:13px; color:var(--muted); line-height:1.55; margin:10px 2px 0}
.page-strip{display:flex; gap:9px; overflow-x:auto; margin-top:16px; padding:2px; -webkit-overflow-scrolling:touch}
.page-thumb{
  position:relative; flex:0 0 auto; width:62px; height:80px; border-radius:11px;
  overflow:hidden; border:2.5px solid var(--line); cursor:pointer; background:#fff;
  transition:border-color .15s ease;
}
.page-thumb img{width:100%; height:100%; object-fit:cover; object-position:top; display:block}
.page-thumb.active{border-color:var(--green)}
.pt-num{
  position:absolute; left:5px; bottom:4px; background:rgba(16,24,40,.72); color:#fff;
  font-size:11px; font-weight:700; border-radius:6px; padding:1px 6px;
}
.page-thumb.add-tile{
  display:flex; align-items:center; justify-content:center;
  font-size:27px; color:var(--green); background:rgba(23,114,69,.05);
  border-style:dashed; border-width:2px;
}
.page-tools{display:flex; align-items:center; justify-content:center; gap:10px; margin-top:10px}
.page-tools-label{font-size:12px; color:var(--muted); font-weight:500}
.session-actions{display:flex; gap:9px; margin-top:14px}
.session-actions .btn{flex:1}

/* ---------- corners ---------- */
.corner-stage{position:relative; touch-action:none; border-radius:var(--radius)}
.corner-stage img{box-shadow:var(--shadow-card)}
.corner-svg{position:absolute; inset:0; width:100%; height:100%; pointer-events:none}
.handle{
  position:absolute; width:34px; height:34px; margin:-17px 0 0 -17px;
  border-radius:50%; background:rgba(23,114,69,.22);
  border:2.5px solid var(--green); cursor:grab; touch-action:none; z-index:3;
}
.handle::after{
  content:""; position:absolute; inset:10px; border-radius:50%; background:var(--green);
}
.loupe{
  position:absolute; width:128px; height:128px; border-radius:50%;
  border:3px solid #fff; box-shadow:0 8px 26px rgba(16,24,40,.4);
  overflow:hidden; pointer-events:none; z-index:5; background:#111;
}
.loupe canvas{width:100%; height:100%; display:block}
.corner-strip{margin-top:14px}

/* ---------- detail ---------- */
.detail-title{font-size:21px; font-weight:800; letter-spacing:-.02em; margin:6px 0 3px; word-break:break-word}
.detail-meta{color:var(--muted); font-size:13.5px; font-weight:500; margin:0 0 14px}
.detail-pages{display:flex; flex-direction:column; gap:13px}
.detail-pages img{width:100%; border-radius:var(--radius); border:1px solid var(--line); background:#fff; box-shadow:var(--shadow-card)}
.detail-actions{display:flex; flex-direction:column; gap:9px; margin-top:16px}
.detail-actions .btn{width:100%}

/* ---------- dialogs ---------- */
dialog{
  border:none; border-radius:22px; padding:0; width:min(430px, calc(100vw - 30px));
  box-shadow:var(--shadow-pop); color:var(--ink);
}
dialog::backdrop{background:rgba(16,24,40,.45); backdrop-filter:blur(3px)}
.dlg-body{padding:22px}
.dlg-body h3{margin:0 0 14px; font-size:18px; font-weight:700}
.dlg-note{font-size:13.5px; color:var(--muted); line-height:1.55; margin:-6px 0 14px}
.dlg-body input[type="text"]{
  width:100%; font:inherit; font-size:16px; padding:12px 14px;
  border:1.5px solid var(--line); border-radius:13px; outline:none; background:#fff;
}
.dlg-body input[type="text"]:focus{border-color:var(--green)}
.tpl-chips{display:flex; gap:7px; margin-bottom:10px; flex-wrap:wrap}
.tpl-chip{
  font:inherit; font-size:13px; font-weight:600; cursor:pointer;
  padding:7px 13px; border-radius:999px; min-height:36px;
  border:1.5px solid var(--line); background:#fff; color:var(--muted);
}
.tpl-chip:active{border-color:var(--green); color:var(--green-dark)}
.q-label{font-size:12.5px; font-weight:700; color:var(--muted); margin:17px 0 8px; text-transform:uppercase; letter-spacing:.05em}
.q-options{display:flex; gap:8px}
.qchip{
  flex:1; font:inherit; cursor:pointer; padding:10px 4px 9px; border-radius:13px;
  border:2px solid var(--line); background:var(--card); color:var(--ink);
  font-size:14.5px; font-weight:700; line-height:1.15; min-height:56px;
  transition:border-color .15s ease, background .15s ease;
}
.qchip small{display:block; font-size:11px; font-weight:500; color:var(--muted); margin-top:3px}
.qchip.active{border-color:var(--green); background:rgba(23,114,69,.06)}
.qchip.active small{color:var(--green-dark)}
.dlg-actions{display:flex; gap:9px; margin-top:22px}
.dlg-actions .btn{flex:1}

/* ---------- busy & toast ---------- */
.busy{
  position:fixed; inset:0; z-index:50; background:rgba(246,247,248,.82);
  backdrop-filter:blur(3px);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:13px;
  font-size:14.5px; font-weight:600; color:var(--muted);
}
.spinner{
  width:36px; height:36px; border-radius:50%;
  border:3.5px solid var(--line); border-top-color:var(--green);
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.toast{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:calc(24px + env(safe-area-inset-bottom)); z-index:60;
  background:#101828; color:#fff; font-size:14px; font-weight:500;
  padding:12px 19px; border-radius:999px; box-shadow:var(--shadow-pop);
  max-width:calc(100vw - 36px); text-align:center; line-height:1.45;
}