:root {
  --ink: #102b3e;
  --navy: #0c2638;
  --teal: #087f7b;
  --teal-dark: #05605d;
  --paper: #f5f6f1;
  --white: #ffffff;
  --muted: #607889;
  --line: #d5e0de;
  --yellow: #f4bd38;
  --note-yellow: #fff1a8;
  --note-pink: #ffd9cf;
  --note-blue: #d7eeee;
  --note-green: #dcefcf;
  --tape: rgba(225, 201, 143, .58);
  --pinned-shadow: rgba(16, 43, 62, .10);
  color: var(--ink);
  background: var(--paper);
  font-family: "Noto Sans Thai", "DM Sans", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { min-width: 320px; margin: 0; background-color: var(--paper); background-image: linear-gradient(rgba(16, 43, 62, .025) 1px, transparent 1px), linear-gradient(90deg, rgba(16, 43, 62, .018) 1px, transparent 1px); background-size: 28px 28px; }
button, a { font: inherit; }
button { cursor: pointer; }
.container { width: min(1140px, calc(100% - 40px)); margin: 0 auto; }
.eyebrow { margin: 0 0 13px; color: var(--teal); font: 500 11px/1.2 "DM Mono", monospace; letter-spacing: .11em; }
:where(.ticket-panel, .billing-order-detail, .offline-notice) { position: relative; transition: transform .18s ease, box-shadow .18s ease; }
:where(.ticket-panel, .billing-order-detail, .offline-notice)::before { content: ""; position: absolute; z-index: 1; top: -8px; left: calc(50% - 36px); width: 72px; height: 17px; background: var(--tape); pointer-events: none; transform: rotate(-1.5deg); }

@media (hover: hover) and (pointer: fine) {
  :where(.ticket-panel, .billing-order-detail, .offline-notice):hover { box-shadow: 7px 9px 0 var(--pinned-shadow); transform: translateY(-2px); }
}

/* Shared operational-desk treatment for every customer and staff route. */
:root { --surface: #fffef9; --surface-muted: #fbfcf9; --surface-line: #b9ccce; --surface-shadow: rgba(16, 43, 62, .055); }
:where(.site-header, .document-page, .account-main, .request-page) { background-color: var(--paper) !important; background-image: linear-gradient(rgba(16, 43, 62, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(16, 43, 62, .025) 1px, transparent 1px) !important; background-size: 28px 28px !important; }
:where(.product-card, .catalog-principle, .roadmap-title, .roadmap-item, .account-panel, .message-center, .admin-management, .ticket-panel, .case-file, .request-sheet, .quotation-document, .legal-document, .billing-order-detail, .admin-inbox, .admin-billing-desk-grid, .ticket-list-item, .billing-order-item, .message-item, .quotation-link, .offline-notice) { border-color: var(--surface-line) !important; background: var(--surface) !important; box-shadow: 3px 4px 0 var(--surface-shadow) !important; transform: none !important; }
:where(.product-card, .catalog-principle, .roadmap-title, .roadmap-item, .account-panel, .message-center, .admin-management, .ticket-panel, .case-file, .request-sheet, .quotation-document, .legal-document, .billing-order-detail, .admin-inbox, .admin-billing-desk-grid, .ticket-list-item, .billing-order-item, .message-item, .quotation-link, .offline-notice)::before { background: var(--tape) !important; }
:where(.catalog-filters, .system-nav, .tabs, .case-facts, .document-reference, .request-reference, .account-details, .billing-facts) { border-color: var(--surface-line) !important; background: var(--surface-muted) !important; }
:where(.catalog-filter, .secondary-button, .message-tool, .document-print, .request-close) { border-color: var(--surface-line) !important; color: var(--teal-dark) !important; background: var(--white) !important; box-shadow: none !important; transform: none !important; }
:where(.catalog-filter, .secondary-button, .message-tool, .document-print, .request-close):hover, :where(.catalog-filter)[aria-pressed="true"] { border-color: var(--teal) !important; color: var(--white) !important; background: var(--teal) !important; }
:where(input, select, textarea) { border-color: var(--surface-line) !important; border-radius: 0 !important; background: var(--white) !important; }
:where(.access-dialog, .access-auth-panel, .access-record, .header-actions, .admin-view-indicator, .case-file-head, .case-brief, .case-records, .conversation, .document-masthead, .document-reference, .document-actions, .document-section th, .document-section tfoot th, .request-reference) { border-color: var(--surface-line) !important; background: var(--surface) !important; }
.access-dialog { border: 1px solid var(--surface-line) !important; box-shadow: 6px 8px 0 var(--pinned-shadow) !important; transform: none !important; }
.access-dialog section::before { background: var(--tape) !important; }
.access-dialog::backdrop { background: rgba(16, 43, 62, .22) !important; }
:where(.access-dialog, .admin-view-indicator, .case-file-head, .case-brief, .case-records, .conversation, .document-masthead, .document-reference, .document-actions, .request-reference) { color: var(--ink) !important; }
:where(.state, .account-role-badge, .unread-badge, .admin-unread-count) { color: var(--white) !important; background: var(--teal) !important; box-shadow: none !important; transform: none !important; }
:where(.ticket-status, .count) { color: var(--teal-dark) !important; border: 1px solid var(--surface-line) !important; background: transparent !important; }
:where(.account-profile, .account-details, .account-details p, .access-auth-panel, .dialog-note, .access-record, .case-facts div, .document-masthead dl div, .document-section th, .document-section td, .document-actions, .request-reference) { border-color: var(--surface-line) !important; }
.document-mark > span { border-color: var(--teal) !important; color: var(--teal) !important; transform: none !important; }
.document-masthead { border-bottom-width: 1px !important; border-bottom-color: var(--teal) !important; }
.message-tool-delete { border-color: #b34532 !important; color: #8b3028 !important; }
.message-tool-delete:hover { color: var(--white) !important; background: #b34532 !important; }

@media (hover: hover) and (pointer: fine) {
  :where(.product-card, .catalog-principle, .roadmap-title, .roadmap-item, .account-panel, .message-center, .admin-management, .ticket-panel, .case-file, .request-sheet, .quotation-document, .legal-document, .billing-order-detail, .admin-inbox, .admin-billing-desk-grid, .ticket-list-item, .billing-order-item, .message-item, .quotation-link, .offline-notice):hover { box-shadow: 6px 8px 0 var(--pinned-shadow) !important; transform: translateY(-2px) !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

@media (max-width: 680px) {
  .container { width: min(100% - 28px, 580px); }
}

/* Compact entry zones: page identity first, then the nearest search or work control. */
.catalog-section { padding-top: 20px !important; padding-bottom: 52px !important; }
.catalog-head { align-items: end !important; gap: 14px !important; margin-bottom: 10px !important; }
.catalog-head h1 { margin-bottom: 3px !important; font-size: 28px !important; line-height: 1.2 !important; }
.catalog-head > div > p:last-child { font-size: 12px !important; line-height: 1.45 !important; }
.catalog-principle { display: none !important; }
.catalog-filters { padding: 7px 0 10px !important; }
.account-main { min-height: auto !important; padding: 28px 0 52px !important; background: var(--paper) !important; }
.account-layout h1 { margin-bottom: 4px !important; font-size: 28px !important; line-height: 1.2 !important; }
.account-intro { margin-bottom: 14px !important; font-size: 13px !important; line-height: 1.5 !important; }
.ticket-main { padding: 24px 0 52px !important; }
.case-page-head { align-items: center !important; gap: 12px !important; }
.case-page-head h1 { font-size: 22px !important; line-height: 1.25 !important; }
.ticket-intro { margin: 4px 0 12px !important; font-size: 13px !important; line-height: 1.5 !important; }
.document-main { padding-top: 28px !important; padding-bottom: 52px !important; }
.document-masthead { padding-top: 18px !important; padding-bottom: 14px !important; }
.document-masthead h1 { font-size: 23px !important; }