:root { --ink:#17212b; --muted:#657385; --line:#d9e0e7; --bg:#f4f7fa; --card:#fff; --blue:#175cd3; --danger:#b42318; --green:#067647; --amber:#b54708; }
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; min-width:0; background:var(--bg); color:var(--ink); font-family:Tahoma,"Noto Sans Thai",Arial,sans-serif; font-size:15px; }
.topbar { min-height:64px; background:#0f1f33; color:#fff; display:flex; align-items:center; padding:0 clamp(14px,3vw,28px); gap:clamp(18px,3vw,32px); position:sticky; top:0; z-index:10; }
.brand { flex:none; font-size:20px; font-weight:700; color:#fff; text-decoration:none; white-space:nowrap; }
.site-menu { min-width:0; flex:1; display:flex; align-items:center; gap:24px; }
.topbar nav { min-width:0; display:flex; gap:clamp(12px,2vw,18px); flex:1; flex-wrap:wrap; }
.topbar nav a,.account,.account a { color:#dce7f5; text-decoration:none; }
.topbar nav a { white-space:nowrap; }
.account { flex:none; display:flex; gap:12px; align-items:center; flex-wrap:wrap; justify-content:flex-end; }
.account form { margin:0; }
.link-button { border:0; background:transparent; color:#fff; text-decoration:underline; padding:0; }
.menu-toggle { display:none; width:44px; height:44px; margin-left:auto; padding:10px; border-color:#50637b; background:transparent; }
.menu-toggle span { display:block; height:2px; margin:4px 0; border-radius:2px; background:#fff; }
.container { width:100%; max-width:1220px; margin:0 auto; padding:clamp(20px,3vw,30px) clamp(12px,3vw,22px) 60px; }
.page-head { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:22px; }
h1 { font-size:clamp(24px,4vw,28px); line-height:1.25; margin:0 0 5px; }
h2 { font-size:19px; margin:0 0 14px; }
p { color:var(--muted); margin:4px 0 14px; }
.panel,.card,.login-card,.details,.preview-panel { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:20px; box-shadow:0 1px 2px rgba(16,24,40,.04); }
.login-card { max-width:430px; margin:7vh auto; padding:32px; }
.stack { display:grid; gap:14px; }
.form-grid,.filters { display:flex; align-items:end; gap:14px; flex-wrap:wrap; }
.filters { background:#fff; border:1px solid var(--line); border-radius:10px; padding:14px; margin-bottom:18px; }
label { min-width:0; display:grid; gap:6px; color:#344054; font-weight:600; }
input,select,textarea,button,.button { max-width:100%; min-height:42px; font:inherit; border:1px solid #b8c3cf; border-radius:7px; padding:9px 11px; background:#fff; color:var(--ink); }
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),select,textarea { width:100%; min-width:0; }
textarea { min-height:68px; resize:vertical; }
button,.button { cursor:pointer; text-decoration:none; font-weight:700; display:inline-block; }
.primary { background:var(--blue); color:#fff; border-color:var(--blue); }
.danger { color:var(--danger); border-color:#f0b5ae; }
button:disabled { opacity:.5; cursor:not-allowed; }
.alert { padding:12px 14px; border-radius:8px; margin:12px 0; }
.alert.error { background:#fef3f2; color:var(--danger); border:1px solid #fecdca; }
.table-wrap { max-width:100%; overflow:auto; background:#fff; border:1px solid var(--line); border-radius:10px; -webkit-overflow-scrolling:touch; }
table { width:100%; border-collapse:collapse; }
th,td { padding:12px 14px; text-align:left; border-bottom:1px solid var(--line); vertical-align:top; }
th { background:#edf2f7; font-size:13px; }
.empty { text-align:center; color:var(--muted); padding:30px; }
.status { display:inline-block; border-radius:999px; padding:4px 9px; background:#edf2f7; font-size:12px; font-weight:700; }
.status.ready { background:#ecfdf3; color:var(--green); }
.status.review,.status.processing { background:#fffaeb; color:var(--amber); }
.status.error { background:#fef3f2; color:var(--danger); }
.cards { display:grid; gap:14px; margin-top:18px; }
.user-edit { margin:14px 0; padding:14px; border:1px solid var(--line); border-radius:9px; background:#f8fafc; }
.card-title,.actions { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.actions { justify-content:flex-start; }
.actions form { margin:0; }
.inline { display:flex; gap:6px; }
.label-grid { min-width:0; display:grid; grid-template-columns:minmax(0,1.5fr) minmax(330px,.7fr); gap:20px; }
.label-grid > *,.details form,.stack,.item-editor,.two,.two > * { min-width:0; }
.preview-panel { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px; align-items:start; background:#e7ebef; padding:12px; }
.image-block { min-width:0; }
.image-block h2 { margin:0 0 10px; font-size:1rem; }
.original-image { max-height:70vh; margin:auto; object-fit:contain; }
.label-image { display:block; max-width:100%; height:auto; background:#fff; }
.details { min-width:0; align-self:start; overflow-wrap:anywhere; }
.item-editor { border:1px solid var(--line); border-radius:8px; padding:12px; display:grid; gap:10px; }
.two { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.item-read { display:grid; gap:4px; border-bottom:1px solid var(--line); padding:9px 0; }
.item-read span { color:var(--muted); }
.print-action { width:100%; margin:18px 0; }
.print-history { padding-left:22px; color:var(--muted); }
.mono { font-family:Consolas,monospace; font-size:12px; }
.break-anywhere { overflow-wrap:anywhere; word-break:break-word; }
.check { display:flex; grid-auto-flow:column; justify-content:start; align-items:center; }
.check input { width:auto; }
.empty-preview { padding:80px 20px; color:var(--muted); }
@media (max-width:900px) {
  .topbar { min-height:60px; flex-wrap:wrap; padding-top:8px; padding-bottom:8px; }
  .menu-toggle { display:block; }
  .site-menu { display:none; flex:0 0 100%; flex-direction:column; align-items:stretch; gap:12px; padding:4px 0 10px; }
  .site-menu.open { display:flex; }
  .topbar nav { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
  .topbar nav a { min-height:42px; display:flex; align-items:center; padding:8px 10px; border-radius:7px; background:rgba(255,255,255,.07); }
  .account { justify-content:flex-start; padding-top:12px; border-top:1px solid rgba(255,255,255,.18); }
  .label-grid { grid-template-columns:1fr; }
  .page-head { flex-wrap:wrap; }
}
@media (max-width:640px) {
  .panel,.card,.login-card,.details,.preview-panel { padding:14px; border-radius:10px; }
  .login-card { margin:3vh auto; }
  .form-grid,.filters { display:grid; grid-template-columns:1fr; align-items:stretch; gap:12px; }
  .form-grid label,.filters label,.form-grid input:not([type="hidden"]),.form-grid select,.filters input,.filters select { width:100%; }
  .actions { align-items:stretch; }
  .actions form,.actions button,.actions .button { max-width:none; }
  .inline { min-width:0; flex:1 1 100%; flex-wrap:wrap; }
  .inline input { flex:1 1 180px; }
  .two { grid-template-columns:1fr; }
  .preview-panel { grid-template-columns:1fr; }
  .responsive-table,.responsive-table tbody,.responsive-table tr,.responsive-table td { display:block; width:100%; }
  .responsive-table thead { display:none; }
  .responsive-table tr { padding:12px 14px; border-bottom:1px solid var(--line); }
  .responsive-table tr:last-child { border-bottom:0; }
  .responsive-table td { display:grid; grid-template-columns:minmax(100px,42%) minmax(0,1fr); gap:10px; padding:7px 0; border:0; text-align:right; }
  .responsive-table td::before { content:attr(data-label); color:var(--muted); font-weight:700; text-align:left; }
  .responsive-table td[colspan] { display:block; text-align:center; }
  .responsive-table td[colspan]::before,.responsive-table .row-action::before { display:none; }
  .responsive-table .row-action { display:flex; justify-content:flex-end; padding-top:10px; }
  .responsive-table .row-action .actions { justify-content:flex-end; }
  .empty-preview { padding:48px 12px; }
}
@media print {
  html,body { width:4in; height:6in; background:#fff; }
  .no-print,.topbar,.details { display:none!important; }
  .container { width:4in; height:6in; max-width:none; margin:0; padding:0; }
  .label-grid,.preview-panel { display:block; width:4in; height:6in; border:0; padding:0; box-shadow:none; background:#fff; }
  .label-image { display:block; width:4in; height:6in; max-height:none; object-fit:contain; page-break-inside:avoid; }
  @page { size:4in 6in; margin:0; }
}