/* ShrinkSpot — crop-mark theme: near-monochrome + one vermilion accent, single column */
:root{
  --paper:#fbfbf9;
  --panel:#ffffff;
  --ink:#141412;
  --muted:#8c8c84;
  --muted-2:#b6b6ac;
  --line:#e7e7e1;
  --line-2:#d6d6ce;
  --accent:#ff4d2e;         /* 朱: 選択・実行中・ドラッグ など「今アクティブ」だけ */
  --accent-soft:#ffe9e3;
  --sans:-apple-system,BlinkMacSystemFont,"Helvetica Neue","Arial","Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP",sans-serif;
  --mono:"SF Mono","Roboto Mono",ui-monospace,"Menlo","Consolas",monospace;
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans);
  line-height:1.7; -webkit-font-smoothing:antialiased;
}
.wrap{width:100%; max-width:760px; margin:0 auto; padding:0 22px;}
b,strong{font-weight:700;}

/* ---------- top bar ---------- */
.topbar{border-bottom:1px solid var(--line); background:var(--paper);}
.bar-inner{display:flex; align-items:center; justify-content:space-between; gap:14px;
           padding:16px 0; flex-wrap:wrap;}
.wordmark{display:inline-flex; align-items:center; gap:9px;
          font-weight:800; font-size:18px; letter-spacing:-.01em;}
.wm-mark{width:13px; height:13px; flex:none; position:relative;}
.wm-mark::before,.wm-mark::after{content:""; position:absolute; width:13px; height:13px;}
.wm-mark::before{top:0; left:0; border-top:3px solid var(--accent); border-left:3px solid var(--accent);}
.wm-mark::after{bottom:0; right:0; border-bottom:3px solid var(--ink); border-right:3px solid var(--ink);}
.privacy{font-size:12px; color:var(--muted);}
.privacy b{color:var(--ink);}
.privacy .lock{display:inline-block; width:8px; height:7px; margin-right:6px; position:relative; vertical-align:1px;
               border:1.5px solid var(--muted); border-radius:1px 1px 2px 2px;}
.privacy .lock::before{content:""; position:absolute; left:1px; top:-4px; width:4px; height:4px;
               border:1.5px solid var(--muted); border-bottom:0; border-radius:3px 3px 0 0;}

.page{padding:34px 22px 72px;}

/* ---------- section rhythm ---------- */
.field{padding:22px 0; border-top:1px solid var(--line);}
.controls > .field:first-child{border-top:0; padding-top:26px;}
.field-label{display:block; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
             color:var(--muted); font-weight:700; margin-bottom:13px;}
.hint{margin:11px 0 0; font-size:12px; color:var(--muted); line-height:1.6;}

/* ---------- hero drop zone (crop frame) ---------- */
.stage{padding-top:12px;}
.dropzone{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:260px; padding:40px 20px; text-align:center; cursor:pointer; outline:none;
  background:var(--panel); border:1px solid var(--line);
  transition:background .14s, border-color .14s;
}
.dropzone:hover{border-color:var(--line-2);}
.dropzone:focus-visible{border-color:var(--ink);}
.dropzone.is-drag{background:var(--accent-soft); border-color:var(--accent);}
/* 四隅トンボ */
.corner{position:absolute; width:22px; height:22px; pointer-events:none; transition:border-color .14s;}
.corner.tl{top:-1px; left:-1px; border-top:2px solid var(--ink); border-left:2px solid var(--ink);}
.corner.tr{top:-1px; right:-1px; border-top:2px solid var(--ink); border-right:2px solid var(--ink);}
.corner.bl{bottom:-1px; left:-1px; border-bottom:2px solid var(--ink); border-left:2px solid var(--ink);}
.corner.br{bottom:-1px; right:-1px; border-bottom:2px solid var(--ink); border-right:2px solid var(--ink);}
.dropzone:hover .corner,.dropzone:focus-visible .corner,.dropzone.is-drag .corner{border-color:var(--accent);}
.drop-lead{margin:0; font-size:19px; font-weight:700;}
.drop-sub{margin:8px 0 0; font-size:13px; color:var(--muted);}
.drop-formats{margin:16px 0 0; font-family:var(--mono); font-size:11px; letter-spacing:.02em; color:var(--muted-2);}

/* ---------- file list ---------- */
.filelist-head{display:flex; justify-content:space-between; align-items:center; margin-top:16px;}
.file-summary{font-family:var(--mono); font-size:12px; color:var(--muted);}
.link-btn{background:none; border:0; padding:0; color:var(--accent); font-size:12px; cursor:pointer; text-decoration:underline;}
.file-list{list-style:none; margin:12px 0 0; padding:0; display:flex; flex-direction:column;}
.file-item{display:flex; align-items:center; gap:12px; padding:9px 0; border-top:1px solid var(--line);}
.file-item:first-child{border-top:0;}
.file-thumb{width:40px; height:40px; object-fit:cover; background:#f0f0ea; flex:none;}
.file-meta{display:flex; flex-direction:column; min-width:0; flex:1;}
.file-name{font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.file-size{font-family:var(--mono); font-size:11px; color:var(--muted);}
.file-remove{flex:none; width:26px; height:26px; border:1px solid var(--line); background:var(--panel);
             color:var(--muted); font-size:15px; line-height:1; cursor:pointer;}
.file-remove:hover{border-color:var(--accent); color:var(--accent);}

/* ---------- tabs (text + underline) ---------- */
.tabs{display:flex; gap:26px; border-bottom:1px solid var(--line);}
.tab{appearance:none; background:none; border:0; padding:0 0 11px; margin-bottom:-1px; cursor:pointer;
     font-family:inherit; font-size:14px; font-weight:600; color:var(--muted); border-bottom:2px solid transparent;}
.tab:hover{color:var(--ink);}
.tab.is-active{color:var(--ink); border-bottom-color:var(--accent);}
/* タブ内容: どのタブでも高さを一定にして切替時に揺れないようにする */
.tab-panels{margin-top:16px;}
.tab-panel{min-height:76px;}

/* プリセット(select) */
.preset-select{font-family:var(--mono); font-size:16px; color:var(--ink); background:var(--panel);
  border:1px solid var(--line-2); padding:9px 34px 9px 12px; min-width:132px; cursor:pointer; appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);
  background-position:calc(100% - 16px) 53%, calc(100% - 11px) 53%; background-size:5px 5px,5px 5px; background-repeat:no-repeat;}
.preset-select:focus{outline:none; border-color:var(--ink);}

/* ---------- preset grid (mono numbers) ---------- */
.preset-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(66px,1fr)); gap:8px;}
.preset-btn{font-family:var(--mono); font-size:13px; padding:11px 4px; cursor:pointer;
            background:var(--panel); border:1px solid var(--line); color:var(--ink); transition:.12s;}
.preset-btn:hover{border-color:var(--ink);}
.preset-btn.is-active{background:var(--ink); border-color:var(--ink); color:#fff;}

/* ---------- number inputs ---------- */
.inline-field{display:inline-flex; align-items:baseline; gap:8px;}
.num-input{width:150px; max-width:56vw; padding:9px 12px; font-family:var(--mono); font-size:18px;
           color:var(--ink); background:var(--panel); border:1px solid var(--line-2);}
.num-input:focus{outline:none; border-color:var(--ink);}
.unit{font-family:var(--mono); font-size:13px; color:var(--muted);}

/* ---------- chips (base edge / rotate / anime) ---------- */
.chips{display:flex; flex-wrap:wrap; gap:8px; align-items:center;}
.chip{font-family:inherit; font-size:13px; padding:8px 15px; cursor:pointer; color:var(--ink);
      background:var(--panel); border:1px solid var(--line); transition:.12s;}
.chip:hover{border-color:var(--ink);}
.chip.is-active{background:var(--ink); border-color:var(--ink); color:#fff;}

/* ---------- slider ---------- */
.slider-row{display:flex; align-items:center; gap:14px;}
.slider-cap{font-size:12px; color:var(--muted); flex:none;}
.slider{flex:1; accent-color:var(--accent); height:22px;}
.quality-val{font-family:var(--mono); font-size:14px; font-weight:700; color:var(--accent); margin-left:4px;}

/* ---------- checkboxes ---------- */
.checks{display:grid; gap:12px;}
.check{display:flex; align-items:center; gap:11px; cursor:pointer; font-size:13.5px;}
.check input{width:17px; height:17px; accent-color:var(--accent); flex:none;}

/* ---------- output format / lossless / help ---------- */
.lossless-row{display:flex; align-items:center; gap:8px;}
.check-lossless{align-items:center;}
.fmt-row{margin-top:13px;}
/* 画質のおすすめプリセット */
.q-presets{margin-top:12px;}
.q-presets .chip{display:inline-flex; align-items:baseline; gap:6px; padding:7px 13px;}
.q-presets .chip small{font-family:var(--mono); font-size:10px; opacity:.7; font-weight:400;}
.help-wrap{position:relative; display:inline-flex; margin-left:2px;}
.help{width:18px; height:18px; padding:0; flex:none; cursor:pointer; font-family:var(--mono);
      font-size:11px; font-weight:700; line-height:1; color:var(--muted);
      background:var(--panel); border:1px solid var(--line-2); border-radius:50%;}
.help:hover,.help[aria-expanded="true"]{color:#fff; background:var(--accent); border-color:var(--accent);}
.popover{position:absolute; left:0; top:26px; z-index:40; width:min(320px,78vw);
         background:var(--ink); color:#fff; font-size:12px; line-height:1.65; padding:12px 14px;
         box-shadow:0 8px 26px rgba(0,0,0,.28);}
.popover b{color:#fff;}
.popover .pop-note{display:block; margin-top:7px; color:var(--muted-2); font-size:11px;}

/* 画質スライダーが無効(可逆)のとき */
.is-disabled{opacity:.42; pointer-events:none;}
.is-disabled .quality-val{color:var(--muted);}

/* ---------- anime ---------- */
.field-anime .field-label{color:var(--ink);}
.badge-beta{font-family:var(--mono); font-size:10px; letter-spacing:.04em; color:var(--muted);
            border:1px solid var(--line-2); padding:1px 6px; vertical-align:1px; text-transform:none;}
.anime-strength{margin-top:14px;}
.strength-label{font-size:12px; color:var(--muted); margin-right:4px;}

/* ---------- 変更後サイズ ---------- */
.size-preview{margin-top:26px; padding:14px 16px; background:var(--panel); border:1px solid var(--line);}
.size-preview .sp-row{display:flex; align-items:baseline; flex-wrap:wrap; gap:8px;}
.size-preview .sp-row + .sp-row{margin-top:8px; padding-top:8px; border-top:1px dashed var(--line);}
.size-preview .sp-label{width:3.2em; flex:none; font-size:11px; letter-spacing:.12em; color:var(--muted); align-self:center;}
.size-preview .sp-src,.size-preview .sp-bytes-src{font-family:var(--mono); font-size:14px; color:var(--muted);}
.size-preview .sp-arrow{color:var(--muted); font-size:14px;}
.size-preview .sp-out,.size-preview .sp-bytes-out{font-family:var(--mono); font-size:20px; font-weight:700; color:var(--accent);}
.size-preview .sp-unit{font-family:var(--mono); font-size:12px; color:var(--muted);}
.size-preview .sp-ratio{margin-left:6px; align-self:center; font-size:12px; font-weight:700; font-family:var(--mono);
  padding:2px 8px; border-radius:999px; background:var(--line); color:var(--muted);}
.size-preview .sp-ratio.is-down{background:rgba(255,77,46,.12); color:var(--accent);}
.size-preview .sp-ratio.is-up{background:rgba(120,120,120,.14); color:var(--muted);}
.size-preview .sp-more{display:block; margin-top:8px; font-size:11px; color:var(--muted-2);}

/* ---------- actions ---------- */
.actions{display:flex; gap:14px; align-items:center; margin-top:22px;}
.btn{font-family:inherit; font-size:15px; font-weight:700; cursor:pointer; border:1px solid transparent;
     padding:14px 30px; background:none; color:var(--ink); transition:.12s;}
.btn-sm{padding:9px 16px; font-size:13px;}
.btn-primary{flex:1; background:var(--ink); color:#fff; border-color:var(--ink);}
.btn-primary:hover:not(:disabled){background:var(--accent); border-color:var(--accent);}
.btn-primary:disabled{background:none; color:var(--muted-2); border-color:var(--line-2); cursor:not-allowed;}
.btn-ghost{flex:none; padding:14px 4px; color:var(--muted); border:0; text-decoration:underline; font-weight:600;}
.btn-ghost:hover{color:var(--ink);}
.results-head .btn-primary{flex:none;}

/* ---------- progress ---------- */
.progress{margin-top:20px;}
.progress-track{height:3px; background:var(--line); overflow:hidden;}
.progress-bar{height:100%; width:0; background:var(--accent); transition:width .2s;}
.progress-text{margin:9px 0 0; font-family:var(--mono); font-size:12px; color:var(--muted); text-align:center;}

/* ---------- results ---------- */
.results{padding:34px 0 0; border-top:1px solid var(--line); margin-top:34px;}
.results-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; flex-wrap:wrap;}
.results-head .field-label{margin:0;}
.results-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(158px,1fr)); gap:18px;}
.result-card{display:flex; flex-direction:column;}
.result-card.is-error{padding:14px; border:1px solid var(--accent); background:var(--accent-soft);}
.result-thumb{width:100%; height:132px; object-fit:contain; background:var(--panel); border:1px solid var(--line);}
.result-info{padding:10px 1px 2px;}
.result-dims{font-family:var(--mono); font-size:14px; font-weight:700;}
.result-size{font-family:var(--mono); font-size:11px; color:var(--muted);}
.result-note{font-size:11px; color:var(--accent); margin-top:2px;}
.result-err{font-size:13px; color:var(--accent); word-break:break-all;}
.result-actions{display:flex; flex-direction:column; gap:7px; margin-top:9px;}
.btn-download{font-size:12px; font-weight:700; padding:9px; text-align:center; text-decoration:none;
              background:var(--ink); color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block;}
.btn-download:hover{background:var(--accent);}
.btn-share{font-size:12px; font-weight:700; padding:8px; cursor:pointer; background:var(--panel);
           color:var(--ink); border:1px solid var(--line-2);}
.btn-share:hover{border-color:var(--ink);}

/* ---------- footer ---------- */
.site-footer{border-top:1px solid var(--line); padding:26px 0; color:var(--muted); font-size:12px; text-align:center;}
.site-footer p{margin:4px 0;}
.site-footer .small{font-family:var(--mono); font-size:11px; color:var(--muted-2);}

/* ---------- toast ---------- */
.toast{position:fixed; left:50%; bottom:26px; transform:translate(-50%,16px); background:var(--ink); color:#fff;
       padding:12px 20px; font-size:13px; opacity:0; pointer-events:none; transition:.22s; max-width:90vw;
       text-align:center; z-index:50;}
.toast.is-show{opacity:1; transform:translate(-50%,0);}

/* ---------- responsive ---------- */
@media (max-width:560px){
  .page{padding:26px 18px 56px;}
  .privacy{width:100%;}
  .actions{flex-wrap:wrap;}
  .btn-primary{flex:1 1 100%;}
  .preset-grid{grid-template-columns:repeat(auto-fill,minmax(58px,1fr));}
  .results-grid{grid-template-columns:repeat(auto-fill,minmax(132px,1fr));}
  .num-input{width:120px;}
}
@media (prefers-reduced-motion:reduce){ *{transition:none !important;} }

/* ---------- dark ---------- */
@media (prefers-color-scheme:dark){
  :root{
    --paper:#131311; --panel:#1c1b18; --ink:#f2f1ec; --muted:#8f8e86; --muted-2:#6a6960;
    --line:#2b2a26; --line-2:#3a3934; --accent-soft:#3a201a;
  }
  .preset-btn.is-active,.chip.is-active,.btn-primary,.btn-download{color:#131311;}
  .btn-primary:hover:not(:disabled),.btn-download:hover{color:#fff;}
  .toast{background:#000;}
}