/* ============================================================
   Design tokens
   Colors are unchanged from the previous release. Everything
   else (spacing, radius, elevation) is a small, consistent scale.
   ============================================================ */
:root{
  --paper:#f5f5f1; --paper2:#efefe9; --ink:#1c1d1c; --muted:#6c6f6a;
  --line:#dcdcd2; --accent:#1f5f4f; --accent-ink:#123a30; --accent-soft:#e4efe9;
  --err:#9c3b2e; --err-soft:#f6e9e6; --focus:rgba(31,95,79,.35);
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --sans:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-7:32px;
  --r-sm:8px; --r-md:10px; --r-lg:14px; --r-pill:999px;
  --shadow-sm:0 1px 2px rgba(28,29,28,.05);
  --shadow-md:0 1px 2px rgba(28,29,28,.04),0 10px 24px -14px rgba(28,29,28,.22);
  --ease:cubic-bezier(.2,.7,.3,1);
}
*{box-sizing:border-box}
html{background:var(--paper)}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:16px/1.5 var(--sans);padding:var(--sp-4);overflow-x:hidden;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
main{max-width:640px;margin:0 auto}
h1,h2{font-family:var(--sans)}

/* ============================================================
   Header
   ============================================================ */
header{margin:var(--sp-1) 0 var(--sp-5)}
h1{
  font-size:clamp(1.35rem,4.5vw,1.7rem);letter-spacing:-.02em;font-weight:800;
  margin:0 0 var(--sp-2);color:var(--ink);
}
.sub{color:var(--muted);font-size:.9rem;line-height:1.55;margin:0 0 var(--sp-3);max-width:52ch}
.trust{
  display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:600;
  color:var(--accent-ink);background:var(--accent-soft);border:1px solid #cfe3da;
  border-radius:var(--r-pill);padding:5px 11px 5px 9px;line-height:1.35;
}
.trust svg{width:13px;height:13px;flex:none}

/* ============================================================
   Card / panel
   ============================================================ */
section.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--sp-5);margin-bottom:var(--sp-4);box-shadow:var(--shadow-md);
}

label.fieldlabel{display:block;font-weight:650;font-size:.82rem;margin-bottom:var(--sp-2);color:var(--ink)}

/* ============================================================
   Dropzone
   ============================================================ */
.filebox{
  position:relative;border:1.5px dashed #bfc4bb;border-radius:var(--r-md);
  padding:var(--sp-5) var(--sp-4);background:var(--paper);
  text-align:center;transition:border-color .15s var(--ease),background-color .15s var(--ease),transform .15s var(--ease);
}
.filebox.drag{border-color:var(--accent);background:var(--accent-soft);transform:scale(1.008)}
@media(hover:hover){
  .filebox:hover{border-color:#c7cbc1}
}
.dropicon{width:26px;height:26px;color:var(--muted);margin:0 auto 8px;display:block;transition:color .15s var(--ease)}
.filebox.drag .dropicon{color:var(--accent)}
input[type=file]{
  display:block;width:100%;font:inherit;font-size:.82rem;color:var(--muted);
  margin-top:var(--sp-3);
}
input[type=file]::file-selector-button{
  font:inherit;font-size:.78rem;font-weight:650;color:var(--ink);
  background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);
  padding:7px 12px;margin-right:10px;cursor:pointer;
  transition:background-color .12s var(--ease),border-color .12s var(--ease);
}
@media(hover:hover){
  input[type=file]::file-selector-button:hover{background:var(--paper2);border-color:#c7cbc1}
}
.filebox-hint{display:block;cursor:pointer}
.fileinfo{margin-top:2px;color:var(--muted);font-size:.78rem;line-height:1.5;word-break:break-word}
@media(hover:hover){
  .filebox-hint:hover .fileinfo{color:var(--ink)}
}

.orrule{
  display:flex;align-items:center;gap:10px;color:var(--muted);font-size:.72rem;
  font-weight:700;letter-spacing:.04em;margin:var(--sp-5) 0;
}
.orrule::before,.orrule::after{content:"";flex:1;border-top:1px dashed var(--line)}

textarea{
  display:block;width:100%;height:170px;padding:var(--sp-3);
  border:1px solid var(--line);border-radius:var(--r-md);resize:vertical;
  font:15px/1.55 var(--sans);background:#fff;color:var(--ink);
  transition:border-color .12s var(--ease);
}
textarea::placeholder{color:var(--muted);opacity:.85}
@media(hover:hover){
  textarea:hover{border-color:#c7cbc1}
}
textarea:focus-visible,input:focus-visible,select:focus-visible,button:focus-visible{
  outline:3px solid var(--focus);outline-offset:2px;
}

/* ============================================================
   Segmented mode control
   ============================================================ */
.modes{
  display:flex;gap:3px;margin:var(--sp-5) 0 var(--sp-2);
  background:var(--paper2);border:1px solid var(--line);border-radius:var(--r-md);padding:3px;
}
.modebtn{
  flex:1;padding:8px 6px;border-radius:calc(var(--r-md) - 3px);border:0;background:transparent;
  color:var(--muted);font:inherit;font-size:.8rem;font-weight:650;cursor:pointer;
  transition:background-color .15s var(--ease),color .15s var(--ease),box-shadow .15s var(--ease);
}
.modebtn[aria-pressed=true]{background:var(--accent);color:#fff;box-shadow:var(--shadow-sm)}
@media(hover:hover){
  .modebtn:not([aria-pressed=true]):hover{color:var(--ink)}
}

.row{border-top:1px solid var(--line);margin-top:var(--sp-4);padding-top:var(--sp-4)}
.rangelabel{display:flex;justify-content:space-between;align-items:baseline;font-size:.86rem;font-weight:650}
.rangelabel b{color:var(--accent-ink);font-family:var(--mono);font-size:1rem;font-weight:700}
input[type=range]{width:100%;margin:12px 0 6px;accent-color:var(--accent);height:26px;cursor:pointer}

.meta{color:var(--muted);font-size:.78rem;font-family:var(--mono)}
.meta strong{color:var(--ink);font-weight:650}

/* ============================================================
   Buttons
   ============================================================ */
.btn{
  width:100%;min-height:48px;border:0;border-radius:var(--r-md);background:var(--accent);
  color:#fff;font:inherit;font-weight:700;font-size:.92rem;margin-top:var(--sp-3);cursor:pointer;
  touch-action:manipulation;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  transition:background-color .15s var(--ease),transform .08s var(--ease),box-shadow .15s var(--ease);
}
@media(hover:hover){
  .btn:not(:disabled):hover{background:var(--accent-ink);box-shadow:var(--shadow-sm)}
}
.btn:active{background:var(--accent-ink);transform:scale(.99)}
.btn.copied{background:var(--accent-ink)}
.btn.copied:active,.btn.copied.pressing{
  background:#0d2b23;transform:translateY(1px) scale(.985);
  box-shadow:inset 0 2px 5px rgba(0,0,0,.18);
}
.btn.reset{
  background:transparent;color:var(--muted);border:1px solid var(--line);
  font-weight:600;font-size:.82rem;min-height:auto;padding:9px;margin-top:var(--sp-3);
}
@media(hover:hover){
  .btn.reset:hover{background:var(--paper2);color:var(--ink);box-shadow:none}
}
.btn.reset:active{background:var(--paper)}
.btn:disabled{opacity:.55;cursor:not-allowed;box-shadow:none}
#split[aria-busy=true]::before{
  content:"";width:14px;height:14px;border-radius:50%;flex:none;
  border:2px solid rgba(255,255,255,.4);border-top-color:#fff;
  animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* Secondary treatment for the per-part copy buttons: the one true
   primary action stays solid; repeated per-part actions stay quiet. */
.part .btn{
  background:transparent;color:var(--accent-ink);border:1px solid #cfe3da;
  font-weight:650;box-shadow:none;
}
@media(hover:hover){
  .part .btn:not(:disabled):hover{background:var(--accent-soft);box-shadow:none}
}
.part .btn:active{background:var(--accent-soft);color:var(--accent-ink)}
.part .btn.copied{background:var(--accent);color:#fff;border-color:var(--accent)}
.part .btn.copied:active,.part .btn.copied.pressing{background:var(--accent-ink);border-color:var(--accent-ink)}

/* ============================================================
   Status messages
   ============================================================ */
.msg{
  padding:10px 12px;border-radius:var(--r-md);font-size:.82rem;font-weight:600;
  margin-bottom:var(--sp-3);border:1px solid transparent;border-left-width:3px;word-break:break-word;
  animation:msgIn .18s var(--ease) both;
}
.msg.err{background:var(--err-soft);color:var(--err);border-color:#e4c6bf;border-left-color:var(--err)}
.msg.ok{background:var(--accent-soft);color:var(--accent-ink);border-color:#cfe3da;border-left-color:var(--accent)}
@keyframes msgIn{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}

.file-status{
  margin-top:var(--sp-2);padding:8px 10px;border-radius:var(--r-sm);font-size:.76rem;
  font-weight:600;word-break:break-word;border-left-width:3px;border-style:solid;
}
.file-status.err{background:var(--err-soft);color:var(--err);border-color:#e4c6bf;border-left-color:var(--err)}
.file-status.ok{background:var(--accent-soft);color:var(--accent-ink);border-color:#cfe3da;border-left-color:var(--accent)}
.file-status.warn{background:#fff8e6;color:#7a5a00;border-color:#ead9a6;border-left-color:#7a5a00}

/* ============================================================
   Chip navigation
   ============================================================ */
.chiprow{
  display:flex;gap:6px;overflow-x:auto;padding:2px 2px 8px;margin-bottom:var(--sp-2);
  -webkit-overflow-scrolling:touch;scrollbar-width:thin;
  mask-image:linear-gradient(to right,transparent,#000 10px,#000 calc(100% - 10px),transparent);
}
.chip{
  flex:none;font-family:var(--mono);font-size:.76rem;font-weight:700;
  border:1px solid var(--line);background:#fff;color:var(--muted);
  border-radius:var(--r-sm);padding:5px 11px;cursor:pointer;
  transition:background-color .12s var(--ease),color .12s var(--ease),border-color .12s var(--ease);
}
@media(hover:hover){
  .chip:hover{border-color:#c7cbc1;color:var(--ink)}
}
.chip.copied{background:var(--accent-soft);color:var(--accent-ink);border-color:#cfe3da}

/* ============================================================
   File groups & parts
   ============================================================ */
.file-group{margin-bottom:var(--sp-5)}
.file-group-head{
  display:flex;justify-content:space-between;gap:10px;align-items:baseline;
  font-weight:700;font-size:.92rem;margin-bottom:4px;
}
.file-group-head .name{overflow-wrap:anywhere}
.file-group-head .count{font-family:var(--mono);font-size:.74rem;color:var(--accent-ink);white-space:nowrap}
.file-group-meta{color:var(--muted);font-size:.76rem;font-family:var(--mono);margin-bottom:var(--sp-3)}

.part{
  position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--sp-4);margin:0 2px var(--sp-3);box-shadow:var(--shadow-md);
  animation:partIn .22s var(--ease) both;
}
.part::before{
  content:"";position:absolute;left:8px;right:8px;top:-7px;height:0;
  border-top:2px dashed #c7cbc1;
}
.part:first-child::before{display:none}
@keyframes partIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.parthead{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:var(--sp-2)}
.parthead .idx{font-weight:700;font-size:.88rem}
.parthead .stat{font-family:var(--mono);font-size:.74rem;color:var(--muted);white-space:nowrap}
.preview{
  background:var(--paper2);border-radius:var(--r-sm);padding:var(--sp-3);color:#3a3c38;
  font-size:.84rem;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere;
  max-height:min(32vh,220px);overflow-y:auto;overflow-x:hidden;margin-bottom:var(--sp-3);
  -webkit-overflow-scrolling:touch;border:1px solid #e7e7df;
  scrollbar-width:thin;scrollbar-color:#c7cbc1 transparent;overscroll-behavior:contain;
}
.preview::-webkit-scrollbar{width:6px}
.preview::-webkit-scrollbar-thumb{background:#c7cbc1;border-radius:var(--r-pill)}

.filemode #text,.filemode .paste-label,.filemode .orrule{display:none}
.note{text-align:center;color:var(--muted);font-size:.72rem;margin:var(--sp-5) var(--sp-2) var(--sp-1);line-height:1.55}
.visually-hidden{
  position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;
}

/* ============================================================
   SEO / FAQ section
   ============================================================ */
.seo{margin:var(--sp-6) var(--sp-2) var(--sp-2);color:var(--muted);font-size:.84rem}
.seo h2{color:var(--ink);font-size:1rem;margin:var(--sp-6) 0 var(--sp-2)}
.seo p{margin:0 0 var(--sp-2)}
.seo ol{margin:var(--sp-2) 0 var(--sp-4);padding-left:22px}
.seo li{margin:4px 0}
.seo details{border-top:1px solid var(--line);padding:var(--sp-3) 0}
.seo summary{
  color:var(--ink);font-weight:650;cursor:pointer;list-style:none;position:relative;padding-right:24px;
}
.seo summary::-webkit-details-marker{display:none}
.seo summary::after{
  content:"+";position:absolute;right:2px;top:0;color:var(--muted);font-weight:400;
  font-size:1.05rem;transition:transform .15s var(--ease);
}
.seo details[open] summary::after{content:"–"}
.seo details p{margin:var(--sp-2) 0 0}

/* ============================================================
   Responsive
   ============================================================ */
@media(min-width:560px){
  #inputCard .row:last-of-type{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3)}
  #inputCard .row:last-of-type .meta{flex:1 1 100%}
  #inputCard .row:last-of-type .btn{flex:1;margin-top:0}
  #inputCard .row:last-of-type .btn.reset{flex:none;width:auto;padding:0 var(--sp-5);margin-top:0;align-self:stretch}
}
@media(min-width:700px){
  main{max-width:700px}
  body{padding:var(--sp-7) var(--sp-4)}
  section.card{padding:var(--sp-6)}
}
@media(max-width:420px){
  body{padding:var(--sp-3)}
  section.card{padding:var(--sp-4)}
  .part{margin-left:0;margin-right:0;padding:var(--sp-3)}
}
@media(prefers-reduced-motion:reduce){
  .btn,.filebox,.modebtn,.chip,textarea,input[type=file]::file-selector-button,.dropicon{transition:none}
  .msg,.part,#split[aria-busy=true]::before{animation:none}
  .pagescroll{transition:none}
}

/* ============================================================
   Page-level scroll control (scrolls the whole document; the
   .preview scrollbars above are separate and unaffected by this).
   ============================================================ */
.pagescroll{
  position:fixed;top:0;right:0;bottom:0;width:26px;z-index:9999;
  opacity:0;pointer-events:none;transition:opacity .22s var(--ease);
}
.pagescroll.visible{opacity:1;pointer-events:auto}
.pagescroll-thumb{
  position:absolute;right:0;width:100%;top:0;
  cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;
  pointer-events:none;
}
.pagescroll.visible .pagescroll-thumb{pointer-events:auto}
.pagescroll-thumb::after{
  content:"";position:absolute;top:0;bottom:0;right:5px;width:5px;
  border-radius:var(--r-pill);background:#8b9088;opacity:.5;transition:opacity .15s var(--ease);
}
.pagescroll-thumb:hover::after,.pagescroll-thumb:active::after{opacity:.8}
.pagescroll-thumb:active{cursor:grabbing}
body.pagescroll-dragging{cursor:grabbing;-webkit-user-select:none;user-select:none}