body{padding-bottom:32px}
.brand{margin-bottom:0;box-shadow:none}.brand h1{font-size:1.6rem}.brand-copy p{font-size:.88rem}
.account-strip{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 2px;margin-bottom:20px;border-bottom:1px solid #dce5fa}
.account-strip a{font-size:.86rem;color:#173baf;text-decoration:none;font-weight:600}.account-strip p{font-size:.75rem;color:#60709a;margin:0}.account-strip.is-demo{background:#fff5e3;padding:12px;border-radius:10px}
.intro{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;align-items:center}.intro h2{margin:0}.intro .sub{grid-column:1/-1}.intro .add-customer{margin:0;min-height:46px;white-space:nowrap}
.view-tabs{position:sticky;top:0;z-index:6;background:#eef3fff5;padding:10px 0;gap:8px}.view-tabs button{flex:1;font-size:.88rem;margin:0}
#directory>.card:has(#key){display:none}
.app-feedback{margin:0;color:#175837;font-size:.9rem;line-height:1.7}.app-feedback:not(:empty){padding:12px;background:#e7f5ec;border-radius:10px;margin:12px 0}
#customer-detail .detail-head{padding:20px;border:0;background:#e4ecff}#customer-detail .detail-head h2{font-size:1.4rem;overflow-wrap:anywhere}
.detail-contract{background:white;padding:20px;border-radius:16px}.detail-contract>h3{line-height:1.7}
.new-contract-dialog{width:min(620px,calc(100% - 24px));max-height:92dvh;overflow:auto;padding:0;border:1px solid #dce5fa;border-radius:18px;background:white;color:#10204e}
.new-contract-dialog::backdrop,.photo-viewer::backdrop{background:#07165a99}.new-contract-dialog .dialog-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px 20px;border-bottom:1px solid #e1e8f8}.dialog-heading h2{margin:0}.dialog-heading button{margin:0;min-width:44px;min-height:44px}
.new-contract-dialog #form{border:0;box-shadow:none;margin:0;border-radius:0;padding:20px}.new-contract-dialog #form>h2{display:none}.new-contract-dialog #form>button{width:100%;min-height:50px}
.photo-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}.photo-grid .contract-photo{border:1px solid #dce5fa;margin-top:8px}.photo-grid a{display:block}.photo-grid a:focus-visible{outline:3px solid #8da5ff;border-radius:10px}
.photo-viewer{width:min(1000px,calc(100% - 16px));max-height:94dvh;padding:16px;border:1px solid #cbd8f5;border-radius:16px;background:#f7f9ff;color:#10204e}.photo-viewer .viewer-toolbar{display:flex;gap:8px;justify-content:space-between;align-items:center;flex-wrap:wrap}.viewer-toolbar button{margin:0;min-height:44px}.viewer-stage{height:65dvh;overflow:auto;background:#e8edfa;border-radius:10px;margin:12px 0;text-align:center}.viewer-stage img{display:block;width:100%;height:100%;object-fit:contain;margin:auto}.viewer-stage.zoomed img{width:180%;height:auto;max-width:none;max-height:none}.photo-viewer .viewer-nav{display:flex;justify-content:space-between;align-items:center;gap:8px}.viewer-nav button{margin:0;min-height:44px}.viewer-count{font-size:.85rem;color:#52638e}
button:disabled{opacity:.55;cursor:default}
.list-utilities{display:flex;justify-content:flex-end;margin:0 0 10px}.list-utilities #tab-archive{margin:0;padding:8px 10px;min-height:40px;background:transparent;color:#60709a;box-shadow:none;font-size:.8rem}.list-utilities #tab-archive.active{background:#e7edff;color:#173baf}
#page-subtitle,#list-title,#summary{display:none}
.list-tools{grid-template-columns:1fr}.list-tools #filter{display:none}
#rows td:nth-child(2)>small,#rows td:nth-child(2)>br,#rows td:nth-child(3),#rows td.hide-mobile{display:none!important}
table th:nth-child(3),table th:nth-child(4),table th:nth-child(5){display:none}
#rows tr.nearing-expiry td:nth-child(3){display:table-cell!important}
#rows td.countdown-cell:nth-child(3){display:table-cell!important}#rows .countdown-cell .badge{font-size:.72rem;padding:4px 8px}
.nearing-expiry .badge.urgent{background:#ffe0a6;color:#783900;border:1px solid #e8a344;font-weight:800}
#rows tr.nearing-expiry td:nth-child(2) strong{color:#783900;background:#fff0d6;border-radius:8px;padding:5px 8px;display:inline-block}
.detail-contract.nearing-expiry{border-color:#e8a344;border-left:4px solid #d98820}
@media(max-width:700px){
  body{padding:0 14px calc(24px + env(safe-area-inset-bottom));font-size:15px;max-width:100%}
  .brand{margin:0 -14px;padding:20px 16px;gap:12px;min-height:112px}.brand-mark{width:54px;height:54px;flex-basis:54px;background-size:158px}.brand h1{font-size:1.3rem}.brand-copy p{font-size:.78rem}.brand .eyebrow{font-size:.66rem}
  .account-strip{display:block;margin-bottom:18px;padding:10px 0}.account-strip p{margin-top:3px}
  .intro h2{font-size:1.1rem}.intro .sub{font-size:.83rem}.intro .add-customer{padding:10px 12px;font-size:.9rem}
  .view-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-bottom:12px}.view-tabs button{font-size:.85rem;padding:10px 3px;min-height:48px}
  .card{padding:16px;margin:12px 0;border-radius:16px}.summary{gap:6px}.metric{padding:10px 6px}.metric b{font-size:1.4rem}.metric span{font-size:.7rem}.list-tools,.grid{grid-template-columns:1fr}
  input,textarea,select{min-height:48px;font-size:16px;min-width:0}.list-tools{gap:8px;margin-bottom:12px}
  table,tbody{display:block;width:100%}thead{display:none}#rows>tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;padding:18px 0;border-top:1px solid #e7ecf8}#rows>tr:first-child{border-top:0;padding-top:0}#rows td{display:block;min-width:0;border:0;padding:0;font-size:.9rem}#rows td:first-child{grid-column:1/-1}#rows td:first-child br{display:none}#rows td:first-child small{display:block;margin:0 0 4px;font-size:.82rem}#rows td:nth-child(2){grid-column:1;grid-row:2}#rows td:nth-child(3){grid-column:2;grid-row:2;align-self:center}#rows td.hide-mobile{display:block;grid-column:1/-1;grid-row:3;color:#64739b;font-size:.78rem}#rows td.hide-mobile:before{content:'ผู้รับผิดชอบ: '}#rows td:empty{display:none}#rows td[colspan]{grid-column:1/-1;grid-row:auto!important;line-height:1.7}
  .customer-link{font-size:1rem;line-height:1.7;min-height:44px;width:100%}.badge{font-size:.72rem;max-width:130px;white-space:normal;text-align:center}
  #rows tr.nearing-expiry td:nth-child(3){display:block!important}
  #rows td.countdown-cell:nth-child(3){display:block!important}
  #customer-detail .back{width:100%;min-height:46px;margin-bottom:12px;text-align:left}#customer-detail .detail-head{padding:20px 16px}#customer-detail .detail-head h2{font-size:1.25rem}.detail-contract{padding:16px}.detail-meta{grid-template-columns:1fr 1fr;gap:16px 10px}.photo-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.photo-grid .contract-photo{height:170px}
  .new-contract-dialog .grid{grid-template-columns:1fr}.new-contract-dialog .dialog-heading{padding:14px 16px}.new-contract-dialog #form{padding:16px}.new-contract-dialog .dialog-heading h2{font-size:1.1rem}.contract-options .archive-actions{min-width:200px}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}