:root{--bg:#f5f6f8;--fg:#1c1e21;--muted:#6b7280;--card:#fff;--line:#e2e5ea;--pri:#2563eb;--bad:#dc2626;--good:#16a34a}
@media (prefers-color-scheme:dark){:root{--bg:#15171a;--fg:#e6e8eb;--muted:#9aa1ab;--card:#1e2126;--line:#2f343b}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:15px/1.5 "Sarabun",system-ui,-apple-system,"Segoe UI",sans-serif}
a{color:var(--pri);text-decoration:none}
.top{display:flex;justify-content:space-between;align-items:center;padding:10px 20px;background:var(--card);border-bottom:1px solid var(--line)}
.brand{font-weight:700;color:var(--fg);font-size:17px}
.wrap{max-width:1000px;margin:24px auto;padding:0 16px}.wrap.narrow{max-width:640px}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:20px;margin-bottom:16px}
.center{text-align:center}.muted{color:var(--muted)}.mono{font-family:ui-monospace,monospace;word-break:break-all;font-size:13px}
.btn{display:inline-block;padding:8px 14px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--fg);cursor:pointer;font:inherit}
.btn.sm{padding:4px 10px;font-size:13px}.btn.primary{background:var(--pri);border-color:var(--pri);color:#fff}
.btn.danger{color:var(--bad)}
input,select{font:inherit;padding:6px 10px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--fg)}
.inline{display:inline-flex;gap:6px;align-items:center;margin:0}
.toolbar{display:flex;gap:16px;flex-wrap:wrap;margin:14px 0}
.crumbs{margin:4px 0 10px}
table.list{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.list th,.list td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left}
.list td.actions{text-align:right;white-space:nowrap}
.alert{padding:10px 14px;border-radius:8px;background:#fee2e2;color:#991b1b}
.alert.info{background:#dbeafe;color:#1e3a8a}.alert.good-bg{background:#dcfce7;color:#166534}
.good{color:var(--good)}.bad{color:var(--bad)}
dl{display:grid;grid-template-columns:110px 1fr;gap:6px 12px}dt{color:var(--muted)}dd{margin:0}
@media(max-width:640px){.list td.actions{white-space:normal}dl{grid-template-columns:1fr}}

/* ===== หน้าไฟล์ (สไตล์ OneDrive) ===== */
:root{--od:#0f6cbd;--od-soft:#ebf3fc;--hover:#f5f5f5;--folder:#f7c948;--pdf:#d13438}
@media (prefers-color-scheme:dark){:root{--od:#4f9be0;--od-soft:#1c2b3a;--hover:#262a30}}
body:has(.drive) .wrap{max-width:none;margin:0;padding:0}
.drive{display:grid;grid-template-columns:240px 1fr;min-height:calc(100vh - 51px)}
.side{background:var(--bg);border-right:1px solid var(--line);padding:12px 8px}
.side-item{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:6px;color:var(--fg);font-size:14px}
.side-item.sub{margin-left:16px;font-size:13px}
.side-item:hover{background:var(--hover)}
.side-item.active{background:var(--od-soft);font-weight:600;box-shadow:inset 3px 0 0 var(--od)}
.main{position:relative;background:var(--card);padding:0 24px 40px}
.cmdbar{display:flex;align-items:center;gap:8px;padding:10px 0;border-bottom:1px solid var(--line)}
.cmdbar .grow{flex:1}
.cmd{border:0;background:none;color:var(--fg);padding:7px 12px;border-radius:6px;cursor:pointer;font:inherit}
.cmd:hover{background:var(--hover)}
.btn.primary{background:var(--od);border-color:var(--od)}
.crumbs2{font-size:20px;margin:18px 0 10px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.crumbs2 a{color:var(--fg)}.crumbs2 a:hover{background:var(--hover);border-radius:4px}
.crumbs2 .chev{color:var(--muted)}
.toast{background:var(--od-soft);color:var(--fg);padding:8px 14px;border-radius:6px;border-left:3px solid var(--od);margin:0 0 10px;font-size:14px}
table.files{width:100%;border-collapse:collapse;font-size:14px}
.files th{font-weight:600;font-size:13px;color:var(--muted);text-align:left;padding:8px 10px;border-bottom:1px solid var(--line)}
.files td{padding:0 10px;height:44px;border-bottom:1px solid var(--line)}
.files tbody tr:hover{background:var(--hover)}
.files .c-name{width:55%}.files .c-name a{color:var(--fg)}.files .c-name a:hover{color:var(--od);text-decoration:underline}
.files .c-date,.files .c-size{color:var(--muted);white-space:nowrap}
.files .c-act{text-align:right;white-space:nowrap;width:90px}
.files .c-name{display:table-cell}
.ico{display:inline-flex;align-items:center;justify-content:center;width:24px;height:20px;margin-right:10px;vertical-align:middle;flex:none}
.folder-ico{position:relative;background:var(--folder);border-radius:2px 4px 3px 3px;height:17px;width:22px}
.folder-ico::before{content:"";position:absolute;top:-4px;left:0;width:10px;height:5px;background:var(--folder);border-radius:2px 3px 0 0}
.pdf-ico{background:var(--pdf);color:#fff;font-size:8px;font-weight:700;border-radius:3px;height:22px;width:18px}
.side-item .ico{margin-right:0}
.quick{display:none;color:var(--od);padding:4px 8px;border-radius:4px}
.files tr:hover .quick{display:inline-block}.quick:hover{background:var(--od-soft)}
details.more{position:relative;display:inline-block}
details.more>summary{list-style:none;cursor:pointer;padding:2px 9px;border-radius:4px;font-size:18px;line-height:1.2;user-select:none}
details.more>summary::-webkit-details-marker{display:none}
details.more:not(.new)>summary{opacity:0}
.files tr:hover details.more>summary,details.more[open]>summary{opacity:1}
details.more:not(.new)>summary:hover{background:var(--line)}
details.new>summary{font-size:14px;padding:7px 14px;border:1px solid var(--od);color:#fff}
.menu{position:absolute;right:0;top:100%;z-index:20;min-width:200px;background:var(--card);border:1px solid var(--line);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.18);padding:4px;text-align:left}
details.new .menu{left:0;right:auto}
.menu form{margin:0}
.menu-item{display:flex;align-items:center;width:100%;gap:8px;padding:8px 12px;border:0;background:none;color:var(--fg);border-radius:4px;font:inherit;font-size:14px;cursor:pointer;text-align:left}
.menu-item:hover{background:var(--hover)}.menu-item.danger{color:var(--bad)}
.menu-item .ico{margin:0}
.empty{text-align:center;padding:70px 0;color:var(--muted)}.empty-ico{font-size:64px}.empty h3{color:var(--fg);margin:8px 0 2px}
.dropmask{display:none;position:absolute;inset:8px;border:2px dashed var(--od);background:color-mix(in srgb,var(--od-soft) 85%,transparent);border-radius:10px;align-items:center;justify-content:center;font-size:20px;color:var(--od);z-index:30}
.dropmask.on{display:flex}
@media(max-width:820px){.drive{grid-template-columns:1fr}.side{display:none}.files .c-date,.files .c-size,.files th.c-date,.files th.c-size{display:none}.main{padding:0 12px}}
.drop-on{background:var(--od-soft)!important;outline:2px solid var(--od);outline-offset:-2px;border-radius:4px}
#moveDlg{min-width:320px;max-height:70vh}#moveDlg .tree{max-height:50vh;overflow:auto}
#moveDlg .row{display:flex;gap:8px;margin-top:10px}#moveDlg .row.end{justify-content:flex-end}
dialog{border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--fg);padding:18px}
dialog::backdrop{background:rgba(0,0,0,.4)}

/* ===== เครื่องมือ PDF ===== */
.topnav{display:flex;gap:16px;margin-right:auto;margin-left:24px}.topnav a{color:var(--fg)}.topnav a:hover{color:var(--od,var(--pri))}
.tools{max-width:820px;margin:24px auto;padding:0 16px}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:12px 0}
.tab{border:0;background:none;color:var(--fg);padding:10px 16px;cursor:pointer;font:inherit;border-bottom:3px solid transparent}
.tab.active{border-bottom-color:var(--od,var(--pri));font-weight:600}
.panel{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:18px}
.panel .row{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;margin:12px 0}
.panel label{display:flex;flex-direction:column;gap:4px;font-size:14px}
.panel label.btn{flex-direction:row}
.srclist{list-style:none;margin:12px 0;padding:0;border:1px solid var(--line);border-radius:8px}
.srclist li{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid var(--line)}
.srclist li:last-child{border-bottom:0}.srclist .nm{overflow:hidden;text-overflow:ellipsis}.srclist .ctl{white-space:nowrap}
fieldset.modes{border:1px solid var(--line);border-radius:8px;display:flex;flex-direction:column;gap:8px;padding:12px}
fieldset.modes label{flex-direction:row;align-items:center;gap:8px}
.status{min-height:1.4em;color:var(--muted)}.status.bad{color:var(--bad)}
.picklist{max-height:50vh;overflow:auto;margin:10px 0;min-width:min(520px,80vw)}
.pickrow{display:flex!important;flex-direction:row!important;align-items:center;gap:8px;padding:6px 4px;border-radius:6px;cursor:pointer}
.pickrow:hover{background:var(--hover,var(--bg))}
#pickDlg .row{display:flex;gap:8px;justify-content:flex-end}
.panel textarea{width:100%;font:inherit;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--fg)}
.qrresult{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.qrresult img{max-width:min(100%,400px);border:1px solid var(--line);border-radius:8px}
.qrdrop{border:2px dashed var(--line);border-radius:10px;padding:28px;text-align:center;cursor:pointer;color:var(--muted)}
.qrdrop:hover,.qrdrop.drop-on{border-color:var(--od,var(--pri))}
.qrdrop img{display:block;max-width:100%;max-height:260px;margin:12px auto 0}