/* ---------- LINE Seed Sans TH (self-hosted, ไม่พึ่ง CDN) ---------- */
@font-face{
  font-family:"LINE Seed Sans TH"; font-style:normal; font-weight:400; font-display:swap;
  src:url("LINESeedSansTH_Rg.woff2") format("woff2");
}
@font-face{
  font-family:"LINE Seed Sans TH"; font-style:normal; font-weight:700; font-display:swap;
  src:url("LINESeedSansTH_Bd.woff2") format("woff2");
}
@font-face{
  font-family:"LINE Seed Sans TH"; font-style:normal; font-weight:800; font-display:swap;
  src:url("LINESeedSansTH_XBd.woff2") format("woff2");
}

/* ===================== PictureCon theme =====================
   พาเลตจากโลโก้: navy #011547 / cyan #27fffd / amber #fbb713 / off-white #f4f4f4
   ธีมเดียวแบบ dark ตามแบรนด์ ไม่สลับตามระบบ
   ============================================================ */
:root{
  --bg:#011547;
  --surface:#04205e;
  --surface-2:#08296f;
  --line:#16408f;
  --line-soft:#0e2f78;
  --text:#f4f4f4;
  --muted:#8ea8dd;
  --cyan:#27fffd;
  --amber:#ffc715;
  --danger:#ff7b7b;
  --radius:14px;
  --font:"LINE Seed Sans TH",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html{color-scheme:dark}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font);
  line-height:1.6;
}

/* ---------- topbar / wordmark ---------- */
.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
  padding:18px 24px; background:var(--bg); border-bottom:1px solid var(--line-soft);
}
.brand{display:flex; flex-direction:column; gap:7px; text-decoration:none; color:inherit}
.wordmark{
  display:flex; flex-direction:column; align-items:flex-start; gap:.06em;
  margin:0; font-size:34px; line-height:1; font-weight:800; letter-spacing:0;
}
.wm-top{color:var(--cyan)}
.wm-bottom{display:block; white-space:nowrap}
/* สัดส่วนถอดมาจากไฟล์โลโก้ต้นฉบับ: กรอบรูป 495.93x159.53 เทียบฟอนต์ 247.47px */
.wm-pic{
  display:inline-block; vertical-align:baseline;
  height:.7em; width:2.176em; margin-right:.093em;
}
.wm-pic .pm-fg{fill:var(--text)}
.wm-pic .pm-bg{fill:var(--bg)}
.wm-con{font-size:.921em; color:var(--amber)}
.tagline{margin:0; color:var(--muted); font-size:.84rem}
.privacy{
  font-size:.8rem; color:var(--cyan); background:rgba(39,255,253,.09);
  border:1px solid rgba(39,255,253,.35); padding:6px 13px; border-radius:999px; text-decoration:none;
}
a.privacy:hover{background:rgba(39,255,253,.16)}

/* ---------- tabs ---------- */
.tabs{
  display:flex; gap:6px; padding:0 24px; overflow-x:auto;
  background:var(--bg); border-bottom:1px solid var(--line-soft);
}
.tab{
  flex:0 0 auto; border:none; border-bottom:2px solid transparent; background:transparent; color:var(--muted);
  font-family:var(--font); font-weight:500; font-size:.95rem; padding:13px 15px; cursor:pointer; white-space:nowrap;
}
.tab:hover{color:var(--text)}
.tab.active{color:var(--cyan); border-bottom-color:var(--amber); font-weight:600}

/* ---------- panels ---------- */
main{max-width:900px; margin:0 auto; padding:28px 20px 60px}
.panel{display:none}
.panel.active{display:block; animation:fade .18s ease}
@keyframes fade{from{opacity:0; transform:translateY(4px)}to{opacity:1;transform:none}}
.panel h2{margin:0 0 6px; font-family:var(--font); font-weight:600; font-size:1.45rem; color:var(--text)}
.hint{margin:0 0 18px; color:var(--muted); font-size:.9rem}
.hint b{color:var(--text)}

/* ---------- dropzone ---------- */
.drop{
  border:2px dashed var(--line); border-radius:var(--radius); background:var(--surface);
  padding:34px 20px; text-align:center; cursor:pointer; transition:.15s;
}
.drop:hover,.drop.over{border-color:var(--cyan); background:var(--surface-2)}
.drop-inner{color:var(--muted); font-size:.95rem}
.drop-inner b{color:var(--cyan)}

/* ---------- file list ---------- */
.filelist{list-style:none; margin:14px 0 0; padding:0; display:flex; flex-direction:column; gap:8px}
.filelist li{
  display:flex; align-items:center; gap:12px; background:var(--surface); border:1px solid var(--line-soft);
  border-radius:10px; padding:10px 12px; font-size:.9rem;
}
.filelist .thumb{width:40px;height:40px;border-radius:7px;object-fit:cover;background:var(--surface-2);flex:0 0 auto}
.filelist .name{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.filelist .size{color:var(--muted); font-size:.82rem; flex:0 0 auto}
.filelist button{
  background:transparent; border:1px solid var(--line); color:var(--muted); border-radius:7px;
  width:28px; height:28px; cursor:pointer; font-size:.9rem; line-height:1; flex:0 0 auto;
}
.filelist button:hover{border-color:var(--cyan); color:var(--cyan)}
.filelist button.rm:hover{border-color:var(--danger); color:var(--danger)}

/* ---------- options ---------- */
.options{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px;
  margin:18px 0; padding:16px; background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--radius);
}
.options label{display:flex; flex-direction:column; gap:6px; font-size:.86rem; color:var(--muted)}
.options label.chk{flex-direction:row; align-items:center; gap:8px}
.options .inline{display:flex; gap:6px}
.options .inline input{flex:1 1 auto; min-width:70px}
.options .inline select{flex:0 0 82px; width:82px}
input[type=text],input[type=number],input[type=password],select{
  font:inherit; font-size:.92rem; padding:9px 11px; border-radius:9px;
  border:1px solid var(--line); background:var(--bg); color:var(--text); width:100%;
}
input[type=color]{width:100%; height:38px; padding:3px; border:1px solid var(--line); border-radius:9px; background:var(--bg)}
input[type=range]{accent-color:var(--cyan); width:100%}
input[type=checkbox]{accent-color:var(--cyan); width:16px; height:16px}
input:focus,select:focus{outline:2px solid rgba(39,255,253,.55); outline-offset:1px; border-color:var(--cyan)}
output{color:var(--cyan); font-weight:600; font-family:var(--font)}

/* ---------- action ---------- */
.go{
  width:100%; font-family:var(--font); font-weight:600; font-size:1.02rem; padding:13px; cursor:pointer;
  border:none; border-radius:var(--radius); color:var(--bg); background:var(--cyan);
  letter-spacing:.02em; transition:.15s;
}
.go:hover{background:#5cfffe; box-shadow:0 0 0 3px rgba(39,255,253,.2)}
.go:disabled{opacity:.45; cursor:not-allowed; box-shadow:none}

/* ---------- results ---------- */
.results{margin-top:20px; display:flex; flex-direction:column; gap:10px}
.result{
  display:flex; align-items:center; gap:12px; padding:12px; border-radius:11px;
  background:var(--surface); border:1px solid var(--line-soft); font-size:.9rem;
}
.result .info{flex:1; min-width:0}
.result .info b{display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text)}
.result .info small{color:var(--muted)}
.result a.dl{
  flex:0 0 auto; text-decoration:none; font-family:var(--font); font-size:.88rem; font-weight:600;
  padding:8px 15px; border-radius:9px; background:var(--amber); color:#3a2500;
}
.result a.dl:hover{background:#ffc63a}
.result.err{border-color:var(--danger)}
.result.err b,.result.err small{color:var(--danger)}
.result img.thumb{width:44px;height:44px;border-radius:8px;object-fit:cover;background:var(--surface-2)}
.dl-all{align-self:flex-start; background:var(--amber); color:#3a2500}
.dl-all:hover{background:#ffc63a; box-shadow:0 0 0 3px rgba(251,183,19,.22)}

/* ---------- overlay ---------- */
.overlay{position:fixed; inset:0; background:rgba(1,10,35,.78); display:grid; place-items:center; z-index:50; backdrop-filter:blur(3px)}
.overlay .box{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:28px 34px; text-align:center; min-width:280px}
.overlay p{margin:14px 0 10px; font-size:.92rem}
.spinner{
  width:34px;height:34px;margin:0 auto;border-radius:50%;
  border:3px solid var(--line); border-top-color:var(--cyan); animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.bar{height:6px; background:var(--bg); border-radius:99px; overflow:hidden}
.bar i{display:block; height:100%; width:0; background:linear-gradient(90deg,var(--cyan),var(--amber)); transition:width .2s}

footer{text-align:center; color:var(--muted); font-size:.8rem; padding:22px; border-top:1px solid var(--line-soft)}
footer a{color:var(--cyan); text-decoration:none}
footer a:hover{text-decoration:underline}
.hidden{display:none !important}

/* ---------- stats dashboard ---------- */
.sec{margin:30px 0 12px; font-family:var(--font); font-weight:600; font-size:1.05rem}
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px}
.card{
  background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--radius);
  padding:16px; display:flex; flex-direction:column; gap:2px;
}
.card strong{font-family:var(--font); font-size:1.6rem; line-height:1.25; color:var(--cyan)}
.card:nth-child(4) strong{color:var(--amber)}
.card span{font-size:.84rem; color:var(--muted)}
.card small{font-size:.76rem; color:var(--muted); opacity:.75}

.chart{
  display:flex; align-items:flex-end; gap:3px; height:170px; padding:12px;
  background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--radius); overflow-x:auto;
}
.chart .col{flex:1 0 16px; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; height:100%; gap:5px}
.chart .col i{width:100%; border-radius:4px 4px 0 0; background:linear-gradient(180deg,var(--cyan),var(--amber))}
.chart .col span{font-size:.62rem; color:var(--muted); writing-mode:vertical-rl; white-space:nowrap}

.bars{
  display:flex; flex-direction:column; gap:10px; padding:16px;
  background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--radius);
}
.bar-row{display:grid; grid-template-columns:minmax(110px,1fr) 2fr auto; gap:12px; align-items:center; font-size:.86rem}
.bar-track{height:9px; background:var(--bg); border-radius:99px; overflow:hidden}
.bar-track i{display:block; height:100%; background:linear-gradient(90deg,var(--cyan),var(--amber))}
.bar-value{color:var(--muted); font-size:.78rem; white-space:nowrap}
@media (max-width:560px){
  .bar-row{grid-template-columns:1fr; gap:4px}
  .bar-value{text-align:right}
  .wordmark{font-size:26px}
}