:root{--pri:#0b3a66;--acc:#f37021;--bg:#f4f6f9;--card:#fff;--line:#dde3ea;--txt:#1d2733;--mut:#6b7785;--ok:#1a8f4c;--err:#c62828}
*{box-sizing:border-box}
body{margin:0;font-family:'Sarabun',system-ui,-apple-system,'Segoe UI',Tahoma,sans-serif;background:var(--bg);color:var(--txt);font-size:16px;line-height:1.5}
a{color:var(--pri)}
.topbar{display:flex;align-items:center;gap:20px;flex-wrap:wrap;background:var(--pri);color:#fff;padding:10px 24px}
.topbar a{color:#fff;text-decoration:none}
.brand{font-weight:700;font-size:1.1rem}
.topbar nav{display:flex;gap:4px;flex:1}
.topbar nav a{padding:6px 12px;border-radius:6px;opacity:.85}
.topbar nav a.on,.topbar nav a:hover{background:rgba(255,255,255,.18);opacity:1}
.who{font-size:.9rem}.who small{opacity:.7}.who a{margin-left:10px;text-decoration:underline}
.wrap{max-width:1180px;margin:0 auto;padding:22px 20px 60px}
h1{margin:.2em 0 .6em;font-size:1.6rem;color:var(--pri)}
h2{margin:0 0 .7em;font-size:1.2rem}
h3{margin:.2em 0 .5em}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:18px 20px;margin-bottom:18px}
.card.narrow{max-width:460px;margin:40px auto}
.danger-zone{border-color:#f0c4c4}
.muted{color:var(--mut)}.small{font-size:.85rem}
.flash{padding:10px 14px;border-radius:8px;margin-bottom:14px;border:1px solid}
.flash.ok{background:#e8f6ee;border-color:#a8dcc0;color:#155d33}
.flash.err{background:#fdecec;border-color:#f3b5b5;color:#8f1d1d}
.form label{display:block;font-weight:600;font-size:.92rem;margin-bottom:12px}
.form input:not([type=checkbox]):not([type=color]):not([type=range]),.form select{display:block;width:100%;margin-top:4px;padding:8px 10px;border:1px solid var(--line);border-radius:7px;font:inherit;background:#fff}
.form input:focus,.form select:focus{outline:2px solid #9bc2ee;border-color:#6fa5e0}
.form.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.span2{grid-column:1/-1}
.form.inline{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.form.inline input,.form.inline select{width:auto!important;margin:0!important}
.inline{display:inline-flex;align-items:center;gap:6px}
.inline-form{display:inline}
.btn{display:inline-block;padding:8px 16px;border:1px solid var(--line);background:#fff;border-radius:7px;font:inherit;cursor:pointer;text-decoration:none;color:var(--txt)}
.btn:hover{background:#eef2f7}
.btn.primary{background:var(--pri);border-color:var(--pri);color:#fff}.btn.primary:hover{background:#0a2f54}
.btn.ok{background:#e8f6ee;border-color:#a8dcc0;color:#155d33}
.btn.danger{color:var(--err);border-color:#e9b9b9}.btn.danger:hover{background:#fdecec}
.btn.small{padding:4px 10px;font-size:.88rem}
.btn.on{background:var(--pri);color:#fff;border-color:var(--pri)}
.tbl{width:100%;border-collapse:collapse}
.tbl th,.tbl td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
.tbl th{background:#f0f3f7;font-size:.88rem}
.tbl .r{text-align:right}.nowrap{white-space:nowrap}
.badge{display:inline-block;padding:2px 10px;border-radius:99px;font-size:.78rem;font-weight:600;background:#eceff3;color:#4a5562}
.badge.active{background:#e1f4e9;color:#14703c}.badge.open{background:#e1f4e9;color:#14703c}.badge.err{background:#f9d9d5;color:#a1241a}.badge.closed{background:#f3e2e2;color:#8f1d1d}.badge.draft{background:#fff1d9;color:#8a5a00}
.swatch{display:inline-block;width:18px;height:18px;border-radius:4px;border:1px solid #0003;vertical-align:middle}
.logo-sm{height:30px;width:30px;object-fit:contain}
.thumb{width:44px;aspect-ratio:5/6;object-fit:cover;border-radius:4px;border:1px solid var(--line)}
.nophoto{font-size:.75rem;color:var(--err)}
.rowhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.ctxbar{background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px 18px;margin-bottom:16px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;align-items:center}
.tabs{display:flex;gap:6px;flex-wrap:wrap}
.tabs a{padding:5px 12px;border-radius:7px;text-decoration:none;border:1px solid var(--line)}
.tabs a.on{background:var(--pri);color:#fff;border-color:var(--pri)}
.stats{display:flex;gap:14px;flex-wrap:wrap;margin:10px 0 14px}
.stat{min-width:140px;padding:14px 18px;border:1px solid var(--line);border-radius:10px;text-align:center;text-decoration:none;color:inherit;background:#fafbfc}
.stat b{display:block;font-size:1.8rem;color:var(--pri)}.stat.warn b{color:var(--acc)}
.stat span{font-size:.88rem;color:var(--mut)}
/* ฟอร์มสมาชิก + Crop รูป */
.fields{display:grid;grid-template-columns:1fr 1fr;gap:0 18px;align-content:start}
.fields>label:first-child{grid-column:1/-1}
form.grid2:has(.photo-col){grid-template-columns:1fr 300px}
.photo-col{padding-left:6px}
.photo-preview{width:100%;max-width:240px;margin:8px 0;border:2px dashed var(--line);border-radius:8px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#fafbfc}
.photo-preview img{width:100%;height:100%;object-fit:cover;display:block}
.crop-box{margin-top:8px;padding:10px;border:1px solid var(--line);border-radius:8px;background:#f7f9fb}
.crop-box canvas{width:100%;max-width:260px;border:2px solid var(--pri);border-radius:6px;touch-action:none;cursor:grab;display:block;background:#fff}
.zoomrow{display:flex;gap:8px;align-items:center;margin:8px 0 0!important}
.check{font-weight:400!important;font-size:.88rem}
.actions{display:flex;gap:10px;flex-wrap:wrap}
.kit-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.kit-grid fieldset{border:1px solid var(--line);border-radius:8px;margin:0 0 12px;padding:8px 12px}
.kitrow{display:grid;grid-template-columns:70px 1fr 48px;gap:8px;align-items:center;margin:6px 0}
.kitrow input[type=color]{width:44px;height:34px;padding:0;border:1px solid var(--line);border-radius:6px}
@media(max-width:820px){.form.grid2,.fields,.kit-grid,form.grid2:has(.photo-col){grid-template-columns:1fr}.topbar{padding:10px 14px}.wrap{padding:14px 10px}.tbl{display:block;overflow-x:auto}}
@media print{.no-print{display:none!important}}

.logo-widget .logo-preview{width:140px;height:100px;margin:6px 0;border:2px dashed var(--line);border-radius:8px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:repeating-conic-gradient(#e6e9ed 0% 25%,#fff 0% 50%) 0 0/16px 16px}
.logo-widget .logo-preview img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.logo-widget .lc-box{margin-top:8px;padding:10px;border:1px solid var(--line);border-radius:8px;background:#f7f9fb;max-width:380px}
.logo-widget .lc-box canvas{width:100%;border:1px solid var(--line);border-radius:6px;touch-action:none;display:block}
.logo-widget .lc-box p{margin:6px 0 0;font-size:12px;color:var(--muted,#667)}

.photo-col .crop-box{max-width:380px}
.photo-col .crop-box canvas{width:100%;max-width:none;border:1px solid var(--line);cursor:default}

/* เมนู Setting แบบ dropdown */
.topbar nav{display:flex;align-items:center;gap:2px;flex-wrap:wrap}
.dd{position:relative;display:inline-block}
.dd .ddm{display:none;position:absolute;left:0;top:100%;min-width:190px;background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.15);padding:6px;z-index:50}
.dd:hover .ddm,.dd:focus-within .ddm{display:block}
.dd .ddm a{display:block;color:#1c2b3a!important;padding:8px 12px;border-radius:6px;white-space:nowrap}
.dd .ddm a:hover{background:#eef3f8}
/* ช่องวันที่ */
.dateinp{position:relative;display:inline-flex;align-items:center;gap:4px}
.dateinp input[data-date]{width:9.5em}
.dateinp .calbtn{border:1px solid var(--line);background:#fff;border-radius:6px;padding:4px 7px;cursor:pointer;line-height:1}
.dateinp .datehid{position:absolute;right:0;bottom:0;width:1px;height:1px;opacity:0;pointer-events:none;border:0;padding:0}
/* อื่น ๆ */
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px;align-items:start}
.affbox{border:1px solid var(--line);border-radius:8px;padding:10px 14px;background:#f9fbfd}
.affbox legend{font-weight:600;padding:0 6px}
tr.dim td{opacity:.55}
tr.dim td:last-child{opacity:1}
code{background:#eef3f8;padding:1px 6px;border-radius:4px;font-size:.9em}

/* คำอธิบายสถานะ Tournament */
.statushelp{background:#f3f7ff;border:1px solid #cfdcf5;border-radius:8px;padding:10px 14px;font-size:14px}
.statushelp ul{margin:6px 0 8px 18px;padding:0}
.statushelp .sh[hidden]{display:none}

/* ตารางแข่งขัน */
.sched{background:#fff;padding:14px 16px;border:1px solid var(--line);border-radius:8px}
.sched-title{text-align:center;margin-bottom:10px}.sched-title .s1{font-weight:700;font-size:1.15rem}.sched-title .s2{font-weight:700;font-size:1.35rem;color:var(--pri)}.sched-title .s3{color:var(--mut);font-size:.9rem}
.sched-tbl{width:100%;border-collapse:collapse;font-size:.95rem}
.sched-tbl th{background:#0b3a66;color:#fff;padding:6px 8px;border:1px solid #0b3a66}
.sched-tbl td{border:1px solid #9aa7b5;padding:5px 8px;vertical-align:middle}
.sched-tbl td.c{text-align:center;white-space:nowrap}
.sched-tbl td.dcell{text-align:center;background:#f0f3f7;white-space:nowrap}.sched-tbl td.dcell span{color:var(--acc);font-weight:700}
.sched-tbl td.hcell{font-weight:600;text-align:right;width:25%}.sched-tbl td.acell{font-weight:600;text-align:left;width:25%}.sched-tbl td.vcell{text-align:center;color:var(--mut);font-style:italic;width:34px;padding:5px 2px}
.sched-tbl tr.note td.ncell{text-align:center;font-style:italic;background:#fffbe8}
.sched-foot{font-size:.88rem;margin-top:8px}
@media print{@page{size:A4 landscape;margin:10mm}body{background:#fff}.wrap{max-width:none;padding:0}.sched{border:0;padding:0}.sched-tbl th{-webkit-print-color-adjust:exact;print-color-adjust:exact}.sched-tbl td.dcell,.sched-tbl tr.note td.ncell{-webkit-print-color-adjust:exact;print-color-adjust:exact}}
.slotgrid{display:flex;flex-wrap:wrap;gap:14px;margin:10px 0}.slotbox{border:1px solid var(--line);border-radius:8px;padding:10px 12px;min-width:250px;background:#fafbfd}
.slotrow{display:flex;align-items:center;gap:8px;margin-top:6px}.slotrow .code{display:inline-block;min-width:38px;text-align:center;background:var(--pri);color:#fff;border-radius:5px;padding:2px 6px;font-weight:700}
.tblwrap{overflow-x:auto}.mtbl input{padding:4px 6px}.w40{width:46px}.w50{width:58px}.w60{width:70px}.w90{width:84px}.w110{width:100px}.w140{width:100px}
.mtbl .dateinp input[data-date]{width:108px}

/* หัวกระดาษเอกสารพิมพ์ */
.rh{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:stretch;margin-bottom:8px}
.rh-col{display:flex;gap:8px;min-width:0}.rh-col.l{justify-content:flex-start}.rh-col.r{justify-content:flex-end}
.rh-col.c{flex-direction:column;justify-content:center}
.rh-logo{width:auto;max-width:60mm;object-fit:contain}
.rh-line{line-height:1.25;word-break:break-word}
.sheetprev{background:#fff;border:1px solid var(--line);box-shadow:0 1px 6px rgba(0,0,0,.12);padding:10mm;margin:10px 0}
.sheetprev.landscape{max-width:297mm}.sheetprev.portrait{max-width:210mm}

/* toast สำหรับข้อความแจ้งเตือนเมื่อกลับมาที่ section เดิม */
.flash.toast{position:fixed;top:12px;right:12px;z-index:60;max-width:420px;box-shadow:0 4px 18px rgba(0,0,0,.25);cursor:pointer}
.mrow.sel td{background:#fff3d6!important}.mrow{cursor:pointer}.selchip{display:inline-block;min-width:26px;text-align:center;border:2px solid var(--line);border-radius:14px;padding:1px 6px;font-weight:700;color:var(--mut)}
.mrow.sel .selchip{border-color:var(--acc);background:var(--acc);color:#fff}
#swapbar{position:sticky;bottom:0;z-index:30;background:#0b3a66;color:#fff;padding:10px 14px;border-radius:8px 8px 0 0;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
#swapbar[hidden]{display:none}
.sidetxt{margin-top:3px;width:100%}
.sidesel{max-width:150px}

/* ---- AD card editor ---- */
.adtools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 8px 0; }
.adtools .inl, .inl { display: inline-flex; gap: 6px; align-items: center; }
.adedit { display: grid; grid-template-columns: auto minmax(280px, 1fr); gap: 16px; align-items: start; }
.adstagewrap { background: #cfd6de; padding: 16px; border-radius: 8px; overflow: auto; max-height: 82vh; }
.adstage { position: relative; background: #fff; touch-action: none; user-select: none; cursor: crosshair; margin: 0 auto; }
.adstage .adcard { pointer-events: none; }
.adstage .adsel { z-index: 3; }
.adside { background: #fff; border: 1px solid #e3e6ea; border-radius: 8px; padding: 10px 12px; max-height: 82vh; overflow: auto; }
.adlist { margin: 0 0 10px; padding: 0; list-style: none; max-height: 180px; overflow: auto; border: 1px solid #e3e6ea; border-radius: 6px; }
.adlist li { padding: 4px 8px; cursor: pointer; font-size: 13px; border-bottom: 1px solid #f0f2f4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adlist li.on { background: #e6f0ff; font-weight: 600; }
.pgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; }
.pgrid label { font-size: 12px; display: flex; flex-direction: column; gap: 2px; }
.pgrid .span2 { grid-column: span 2; }
.pgrid input[type=number], .pgrid select, .pgrid textarea { width: 100%; }
.pgrid .chk { flex-direction: row; align-items: center; gap: 6px; }
.colrow { display: flex; gap: 4px; align-items: center; }
.colrow input[type=color] { width: 34px; height: 26px; padding: 0; }
.pbtns { margin-top: 10px; }
.chipc { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: middle; margin: 0 3px 0 8px; }
@media (max-width: 900px) { .adedit { grid-template-columns: 1fr; } }

/* ---- นำเข้าข้อมูล ---- */
.imp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:.8rem;margin:.8rem 0}
.imp-tile{display:flex;flex-direction:column;gap:.25rem;padding:.9rem 1rem;border:1px solid var(--line,#d8dee6);border-radius:10px;background:#fff;color:inherit;text-decoration:none}
.imp-tile:hover{border-color:#1f6feb;box-shadow:0 2px 8px rgba(31,111,235,.15)}
.imp-tile .ic{font-size:1.6rem}.imp-tile small{color:#667}
.imp-tbl td,.imp-tbl th{white-space:nowrap}.imp-tbl td.small{white-space:normal;min-width:180px}
.imp-err{background:#fff3f1}.imp-skip{color:#888}
.tblwrap{overflow-x:auto;max-height:60vh;overflow-y:auto}
fieldset.opt{border:1px dashed #b8c2cf;border-radius:8px;margin:.6rem 0;padding:.6rem .9rem}
.row-actions{display:flex;gap:.5rem;flex-wrap:wrap;margin:.6rem 0}
.import-link{float:right}