/* TRUST DESIGN · Clarity
 * Approved interface study applied to the existing application components.
 * Screen-only: quote, receipt and contract print styles retain their original
 * tokens, dimensions and pagination. No functional controls are hidden here.
 */
@media screen {
  :root {
    --td-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Microsoft JhengHei', sans-serif;
    --td-canvas: #F6F7F9;
    --td-surface: #FFFFFF;
    --td-surface-alt: #F8F9FA;
    --td-surface-hover: #F3F5F7;
    --td-surface-hover-2: #F1F3F5;
    --td-surface-group: #F0F4F5;
    --td-text: #202529;
    --td-text-2: #424B53;
    --td-text-3: #59636D;
    --td-muted: #626C75;
    --td-faint: #707B85;
    --td-brand: #087C85;
    --td-brand-hover: #066771;
    --td-brand-text: #07646C;
    --td-brand-fill: #087C85;
    --td-brand-fill-hover: #066771;
    --td-brand-soft: #E7F3F3;
    --td-hairline: #E5E9ED;
    --td-hairline-2: #EBEEF1;
    --td-hairline-3: #EEF1F3;
    --td-hairline-4: #F1F3F5;
    --td-border-control: #DCE2E7;
    --td-r-card: 18px;
    --td-r-control: 10px;
    --td-r-sm: 7px;
    --td-side-w: 218px;
    --td-top-h: 72px;
    --td-fs-page: calc(27px * var(--td-scale));
    --td-fs-greet: calc(28px * var(--td-scale));
    --td-fs-section: calc(15px * var(--td-scale));
    --td-fs-body: calc(13px * var(--td-scale));
    --td-fs-body-sm: calc(12px * var(--td-scale));
    --td-pad-x: 36px;
    --td-pad-y: 28px;
    --td-pad-head: 32px;
    --td-pad-head-b: 24px;
    --td-ctl-h: calc(37px * var(--td-hscale));
    --td-ctl-h-sm: calc(30px * var(--td-hscale));
    --td-btn-h: calc(40px * var(--td-hscale));
    --td-btn-h-sm: calc(31px * var(--td-hscale));
    --td-row-pady: 12px;
    --td-clarity-sidebar: #F0F2F5;
    --td-clarity-shadow: 0 3px 16px rgba(32, 45, 55, .035);
    --td-clarity-float: 0 16px 46px rgba(32, 45, 55, .13);
  }

  :root[data-theme="dark"] {
    --td-canvas: #14191D;
    --td-surface: #1D2429;
    --td-surface-alt: #222A30;
    --td-surface-hover: #283239;
    --td-surface-hover-2: #252F36;
    --td-surface-group: #253139;
    --td-text: #EDF1F3;
    --td-text-2: #D0D8DE;
    --td-text-3: #B8C2CB;
    --td-muted: #AEBAC4;
    --td-faint: #A0ADB8;
    --td-brand: #75CED0;
    --td-brand-hover: #9CDEE0;
    --td-brand-text: #A8E0E2;
    --td-brand-soft: #173E43;
    --td-hairline: #323C44;
    --td-hairline-2: #2D373F;
    --td-hairline-3: #29343B;
    --td-hairline-4: #263038;
    --td-border-control: #485761;
    --td-clarity-sidebar: #191F24;
    --td-clarity-shadow: 0 3px 16px rgba(0, 0, 0, .08);
    --td-clarity-float: 0 16px 46px rgba(0, 0, 0, .28);
  }

  body.td-clarity { font-family: var(--td-font); color: var(--td-text); line-height: 1.6; -webkit-font-smoothing: antialiased; }
  /* AI 唯讀：收起儲存／上傳掣。伺服器先係保證；登出連結係 <a>，唔藏。 */
  body.ai-ro form[method="post" i] :is(button, input[type="submit"]),
  body.ai-ro button[type="submit"],
  body.ai-ro input[type="file"] { display: none !important; }
  .td-clarity [hidden] { display: none !important; }
  .td-clarity :is(button, a, input, select, textarea) { -webkit-tap-highlight-color: transparent; }
  .td-clarity :focus-visible { outline: 3px solid var(--td-brand); outline-offset: 3px; }
  .td-clarity .td-skip { position: fixed; top: -100px; left: 16px; z-index: 2000;
    padding: 10px 18px; border-radius: 10px; background: var(--td-surface); color: var(--td-brand); }
  .td-clarity .td-skip:focus { top: 12px; }
  .td-clarity .td-main { min-width: 0; }
  .td-clarity .td-content { min-width: 0; }

  /* A quiet, visible hierarchy: brand, grouped destinations, signed-in person. */
  .td-clarity .td-side { background: var(--td-clarity-sidebar); color: var(--td-text);
    border-right: 1px solid var(--td-hairline); height: 100dvh; }
  .td-clarity .td-side__top { position: relative; border-bottom: 0; padding: 17px 10px 6px; }
  .td-clarity .td-side__brand { padding: 10px 8px 17px; gap: 10px; border: 0; color: var(--td-text); }
  .td-clarity .td-side__mark { width: 34px; height: 34px; border: 0; border-radius: 10px;
    background: var(--td-surface); }
  .td-clarity .td-side__mark img { width: 27px; height: 27px; }
  .td-clarity .td-side__name { font-size: max(12px, calc(11px * var(--td-scale, 1.14))); letter-spacing: 1px; }
  .td-clarity .td-side__sub { color: var(--td-muted); font-size: max(12px, calc(11px * var(--td-scale, 1.14))); margin-top: 5px; }
  .td-clarity .td-side__hide { position: absolute; right: 12px; bottom: -10px;
    padding: 3px 8px; font-size: max(12px, calc(11px * var(--td-scale, 1.14))); border: 0; color: var(--td-muted); background: transparent; }
  .td-clarity .td-side__hide:hover { color: var(--td-brand); background: var(--td-surface); }
  .td-clarity .td-side__nav { padding: 19px 13px 16px; gap: 4px; scrollbar-width: thin; }
  .td-clarity .td-side__group { padding: 20px 12px 7px; font-family: var(--td-font);
    font-size: max(12px, calc(11px * var(--td-scale, 1.14))); font-weight: 600; letter-spacing: .07em; color: var(--td-muted); }
  .td-clarity .td-side__item { min-height: 43px; padding: 10px 11px; gap: 10px;
    border-radius: 11px; color: var(--td-text-3); line-height: 1.35; font-size: calc(12px * var(--td-scale)); }
  .td-clarity .td-side__item .td-side__ico { display: block; width: 19px; height: 19px; flex: none; }
  .td-clarity .td-side__item .td-side__dot { display: none; }
  .td-clarity .td-side__item:hover { color: var(--td-text); background: var(--td-hairline); }
  .td-clarity .td-side__item.is-active { background: var(--td-surface); color: var(--td-brand);
    font-weight: 600; box-shadow: var(--td-clarity-shadow); }
  .td-clarity .td-side__n { color: var(--td-muted); font-family: var(--td-font); font-size: max(12px, calc(11px * var(--td-scale, 1.14))); }
  .td-clarity .td-side__n--warn { color: var(--td-warn-text); }
  .td-clarity .td-side__user { padding: 18px 22px; gap: 11px; border-color: var(--td-hairline); }
  .td-clarity .td-side__user b { color: var(--td-text); font-size: max(12px, calc(13px * var(--td-scale, 1.14))); }
  .td-clarity .td-side__user span { color: var(--td-muted); line-height: 1.6; }
  .td-clarity .td-side__user .td-avatar { background: var(--td-brand-soft); color: var(--td-brand-text); }
  .td-clarity .td-side__foot { padding: 0 22px 18px; }
  .td-clarity .td-side__foot a { color: var(--td-text-3); padding: 8px 0; }

  /* Keep search, explicit back links, theme and type controls in the header. */
  .td-clarity .td-top { background: var(--td-canvas); padding-inline: 30px; gap: 14px; }
  .td-clarity .td-top__crumb { font-size: max(12px, calc(12px * var(--td-scale, 1.14))); line-height: 1.5; max-width: 30%; }
  .td-clarity .td-top__search { max-width: 380px; min-width: 120px; margin-left: auto; }
  .td-clarity .td-top .td-search { width: 100%; }
  .td-clarity .td-top .td-search input { width: 100%; min-width: 0; height: 39px;
    background: var(--td-surface); border-radius: 10px; }
  .td-clarity .td-top > .td-spacer { flex: 0; }
  .td-clarity .td-top__sync { font-size: max(12px, calc(11px * var(--td-scale, 1.14))); white-space: nowrap; }
  .td-clarity .td-top__link { padding: 10px 0; font-size: max(12px, calc(12px * var(--td-scale, 1.14))); white-space: nowrap; }
  .td-clarity .td-tool { width: 38px; height: 38px; border-color: transparent; background: transparent; }
  .td-clarity .td-tool:hover { background: var(--td-hairline); }
  .td-clarity .td-fs__pop { border-radius: 14px; padding: 14px; gap: 12px; box-shadow: var(--td-clarity-float); }
  .td-clarity .td-size__b { min-height: 36px; }
  .td-clarity .td-findbox { padding: 10px; border-radius: 14px; box-shadow: var(--td-clarity-float); }
  .td-clarity .td-findbox__i { padding: 11px; flex-wrap: wrap; gap: 4px 12px; }
  .td-clarity .td-head { background: transparent; border-bottom: 0; }
  .td-clarity .td-head__row { gap: 18px; }
  .td-clarity .td-head__meta { margin-top: 10px; flex-wrap: wrap; }
  .td-clarity .td-h1 { font-weight: 650; letter-spacing: -.035em; line-height: 1.3; }
  .td-clarity .td-page { gap: 24px; }
  .td-clarity .td-page--wide { padding: 28px 36px; }
  .td-clarity .td-page--canvas { padding: 24px 28px; }
  .td-clarity .td-head + .td-page { padding-top: 4px; }
  .td-clarity .td-tabs { gap: 25px; margin-top: 25px; border-bottom: 1px solid var(--td-hairline);
    overflow-x: auto; scrollbar-width: thin; }
  .td-clarity .td-tab { padding-bottom: 13px; min-height: 40px; white-space: nowrap; }
  .td-clarity .td-tab.is-active { color: var(--td-brand); }
  .td-clarity .td-toolbar { padding: 14px 18px; gap: 12px; flex-wrap: wrap; }
  .td-clarity .td-card { box-shadow: var(--td-clarity-shadow); }
  .td-clarity .td-card__head { padding: 20px 22px; gap: 12px; }
  .td-clarity .td-card__title { line-height: 1.4; }
  .td-clarity .td-card__body { padding: 20px 22px; }
  .td-clarity .td-card__foot { padding: 14px 22px; }
  .td-clarity .td-kpi { padding: 21px 22px; box-shadow: var(--td-clarity-shadow); }
  .td-clarity .td-kpi__k { line-height: 1.4; }
  .td-clarity .td-kpi__n { font-family: var(--td-font); font-weight: 650; letter-spacing: -.035em; }
  .td-clarity .td-kpi__n--money { letter-spacing: -.015em; }
  .td-clarity .td-kpi__f { line-height: 1.5; }
  .td-clarity .td-pill { padding: 4px 9px; border-radius: 7px; line-height: 1.4; }
  .td-clarity .td-thead { background: var(--td-surface-alt); font-family: var(--td-font); letter-spacing: .02em; }
  .td-clarity .td-btn { transition: background .15s, border-color .15s; }
  .td-clarity :is(.td-input, .td-select):focus { outline: 2px solid var(--td-brand-soft); outline-offset: 2px; }
  .td-clarity .td-field__label { font-size: var(--td-fs-meta); line-height: 1.5; margin-bottom: 7px; }
  .td-clarity .td-empty-state { padding: 38px 20px; }

  /* Bootstrap pages keep their actual forms, tables, uploads and modal wiring. */
  .td-clarity .td-content > .td-legacy { width: 100%; max-width: 1520px; margin-inline: auto;
    padding: 32px 36px 48px !important; }
  .td-clarity .td-legacy { font-size: var(--td-fs-body); }
  .td-clarity .td-legacy :is(h1, .h1) { font-size: var(--td-fs-page); letter-spacing: -.035em; line-height: 1.3; }
  .td-clarity .td-legacy :is(h2, .h2) { font-size: calc(20px * var(--td-scale)); letter-spacing: -.025em; line-height: 1.4; }
  .td-clarity .td-legacy :is(h3, .h3) { line-height: 1.4; }
  .td-clarity .td-legacy .card { border-radius: var(--td-r-card); border-color: var(--td-hairline);
    box-shadow: var(--td-clarity-shadow); background: var(--td-surface); }
  .td-clarity .td-legacy .card-header { padding: 18px 22px; background: var(--td-surface);
    border-color: var(--td-hairline-2); font-weight: 600; }
  .td-clarity .td-legacy .card-body { padding: 22px; }
  .td-clarity .td-legacy .table > :not(caption) > * > * { padding: 12px 14px; vertical-align: middle; }
  .td-clarity .td-legacy .table thead th { font-family: var(--td-font); font-size: var(--td-fs-meta); letter-spacing: .01em; }
  .td-clarity .td-legacy :is(.form-control, .form-select) { min-height: var(--td-ctl-h); }
  .td-clarity .td-legacy .form-label { color: var(--td-text-3); font-size: var(--td-fs-meta); }
  .td-clarity .td-legacy .btn { justify-content: center; }
  .td-clarity .td-legacy :is(.btn-primary, .btn-brand, .btn-success) {
    background: var(--td-brand-fill); border-color: var(--td-brand-fill); color: var(--td-on-brand); }
  .td-clarity .td-legacy :is(.btn-primary, .btn-brand, .btn-success):hover {
    background: var(--td-brand-fill-hover); border-color: var(--td-brand-fill-hover); color: var(--td-on-brand); }
  .td-clarity .td-legacy :is(.btn-primary, .btn-brand, .btn-success):disabled {
    background: var(--td-surface-hover); color: var(--td-disabled); border-color: var(--td-hairline); }
  .td-clarity .td-legacy .nav-tabs { gap: 8px; border-color: var(--td-hairline); }
  .td-clarity .td-legacy .nav-tabs .nav-link { border: 0; border-bottom: 2px solid transparent;
    background: transparent; padding: 12px 14px; color: var(--td-muted); }
  .td-clarity .td-legacy .nav-tabs .nav-link.active { color: var(--td-brand); border-bottom-color: var(--td-brand); font-weight: 600; }
  .td-clarity .td-legacy .modal-content { box-shadow: var(--td-clarity-float); }

  /* Client and sign-in chrome: same visual family, no internal navigation. */
  .td-clarity .cx-top { background: var(--td-canvas); }
  .td-clarity .cx-top__in { padding-top: 24px; padding-bottom: 22px; }
  .td-clarity .cx-logo { height: 38px; }
  .td-clarity .cx-nav { gap: 24px; overflow-x: auto; padding-top: 6px; }
  .td-clarity .cx-nav a { white-space: nowrap; min-height: 38px; }
  .td-clarity .cx-nav a.is-active { color: var(--td-brand); }
  .td-clarity .cx-page { padding-top: 28px; gap: 22px; }
  .td-clarity .au-wrap { min-height: 100dvh; background: var(--td-canvas); }
  .td-clarity .au-card { max-width: 420px; padding: 38px 34px; border-radius: 24px; box-shadow: var(--td-clarity-float); }
  .td-clarity .au-logo { height: 60px; margin-bottom: 8px; }
  .td-clarity .au-h { margin-top: 20px; }

  .td-clarity .td-mobile-nav { display: none; }
  .td-clarity .td-drawer-close { display: none; }
  /* Prototype information architecture: eight main destinations, the rest in a tools hub. */
  .td-clarity .td-side--focused .td-side__top { padding: 27px 16px 12px; }
  .td-clarity .td-side--focused .td-side__brand { padding: 0 8px 14px; gap: 10px; }
  .td-clarity .td-side--focused .td-side__sub { letter-spacing: 2px; }
  .td-clarity .td-side--focused .td-side__nav { padding: 0 16px 20px; gap: 3px; }
  .td-clarity .td-side--focused .td-side__group { font-size: max(12px, calc(10px * var(--td-scale, 1.14))); letter-spacing: 2px; padding: 20px 13px 9px; }
  .td-clarity .td-side--focused .td-side__item { min-height: 45px; padding: 10px 13px; gap: 12px; font-size: max(12px, calc(13px * var(--td-scale, 1.14))); font-weight: 500; margin: 2px 0; }
  .td-clarity .td-side--focused .td-side__more { border: 0; width: 100%; text-align: left; background: transparent; cursor: pointer; }
  .td-clarity .td-side--focused .td-side__more.is-active { background: var(--td-surface); color: var(--td-brand); }
  .td-clarity .td-side--focused .td-side__more:hover { background: var(--td-hairline); }
  .td-clarity .td-side__purpose { margin-top: auto; padding: 20px 24px 10px; font-size: max(12px, calc(11px * var(--td-scale, 1.14))); color: var(--td-muted); line-height: 1.7; }
  .td-clarity .td-side__purpose strong { display: block; color: var(--td-text); font-size: max(12px, calc(11px * var(--td-scale, 1.14))); font-weight: 600; margin-bottom: 6px; }
  .td-clarity .td-side__purpose span { display: block; overflow-wrap: anywhere; }
  .td-clarity .td-side__bottom-tools { display: flex; align-items: center; gap: 16px; padding: 7px 24px 22px; }
  .td-clarity .td-side--focused .td-side__hide { position: static; padding: 0; font-size: max(12px, calc(11px * var(--td-scale, 1.14))); cursor: pointer; }
  .td-clarity .td-side__bottom-tools > a { color: var(--td-muted); font-size: max(12px, calc(11px * var(--td-scale, 1.14))); }
  .td-clarity .td-side__fallback { padding: 10px 20px; }
  .td-clarity .td-side__fallback a { display: block; padding: 8px 0; }
  .td-clarity .td-top { gap: 17px; padding-inline: 36px; }
  .td-clarity .td-account { position: relative; flex: none; }
  .td-clarity .td-account__trigger { list-style: none; cursor: pointer; display: flex; align-items: center; border-radius: 50%; }
  .td-clarity .td-account__trigger::-webkit-details-marker { display: none; }
  .td-clarity .td-account__trigger .td-avatar { width: 33px; height: 33px; font-size: max(12px, calc(11px * var(--td-scale, 1.14))); background: var(--td-surface); border: 1px solid var(--td-hairline); color: var(--td-text-3); }
  .td-clarity .td-account__panel { position: absolute; top: 46px; right: 0; z-index: 150; width: 230px;
    border: 1px solid var(--td-hairline); border-radius: 16px; background: var(--td-surface); padding: 20px; box-shadow: var(--td-clarity-float); }
  .td-clarity .td-account__panel > strong { display: block; font-size: 15px; margin-bottom: 3px; }
  .td-clarity .td-account__panel > span { font-size: max(12px, calc(12px * var(--td-scale, 1.14))); color: var(--td-muted); }
  .td-clarity .td-account__panel > a { display: block; font-size: max(12px, calc(13px * var(--td-scale, 1.14))); padding: 10px 0; }
  .td-clarity .td-account__sync { display: flex; align-items: center; gap: 7px; margin: 14px 0 8px; border-bottom: 1px solid var(--td-hairline); padding-bottom: 15px; color: var(--td-muted); font-size: max(12px, calc(11px * var(--td-scale, 1.14))); }
  .td-clarity .td-hub { width: min(1120px, calc(100vw - 72px)); max-width: none; max-height: calc(100dvh - 80px);
    margin: auto; padding: 0; border: 1px solid var(--td-hairline); border-radius: 24px; background: var(--td-canvas); color: var(--td-text);
    box-shadow: var(--td-clarity-float); overflow-y: auto; }
  .td-clarity .td-hub::backdrop { background: rgba(20, 29, 36, .35); backdrop-filter: blur(7px); }
  .td-clarity .td-hub__inside { padding: 36px 40px 40px; }
  .td-clarity .td-hub__heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
  .td-clarity .td-hub__eyebrow { font-size: max(12px, calc(10px * var(--td-scale, 1.14))); letter-spacing: 1.8px; color: var(--td-muted); margin-bottom: 9px; }
  .td-clarity .td-hub__heading h2 { font-size: 30px; font-weight: 650; letter-spacing: -.8px; margin: 0; }
  .td-clarity .td-hub__heading p { font-size: max(12px, calc(13px * var(--td-scale, 1.14))); color: var(--td-muted); margin-top: 10px; }
  .td-clarity .td-hub__close { flex: none; width: 38px; height: 38px; padding: 9px; display: grid; place-items: center;
    border: 1px solid var(--td-hairline); border-radius: 11px; color: var(--td-text-3); background: var(--td-surface); cursor: pointer; }
  .td-clarity .td-hub__close svg { width: 20px; height: 20px; }
  .td-clarity .td-hub__search { display: flex; align-items: center; gap: 12px; padding: 0 15px; border: 1px solid var(--td-hairline);
    background: var(--td-surface); border-radius: 12px; margin-bottom: 30px; }
  .td-clarity .td-hub__search svg { width: 19px; height: 19px; color: var(--td-muted); flex: none; }
  .td-clarity .td-hub__search input { height: 46px; flex: 1; min-width: 0; border: 0; background: transparent; color: var(--td-text); outline: 0; font-size: 14px; }
  .td-clarity .td-hub__search:focus-within { outline: 2px solid var(--td-brand); outline-offset: 2px; }
  .td-clarity .td-hub__search span { color: var(--td-muted); font-size: max(12px, calc(11px * var(--td-scale, 1.14))); }
  .td-clarity .td-hub__group { margin-top: 24px; }
  .td-clarity .td-hub__group h3 { margin: 0 0 12px; color: var(--td-muted); font-size: max(12px, calc(12px * var(--td-scale, 1.14))); font-weight: 500; }
  .td-clarity .td-hub__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 17px; }
  .td-clarity .td-hub__card { display: flex; align-items: center; gap: 13px; min-height: 104px; padding: 21px;
    background: var(--td-surface); border: 1px solid var(--td-hairline); border-radius: 16px; color: var(--td-text); }
  .td-clarity .td-hub__card:hover, .td-clarity .td-hub__card.is-active { border-color: var(--td-brand); box-shadow: var(--td-clarity-shadow); color: var(--td-brand); }
  .td-clarity .td-hub__icon { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 12px;
    background: var(--td-brand-soft); color: var(--td-brand); }
  .td-clarity .td-hub__icon svg { width: 22px; height: 22px; }
  .td-clarity .td-hub__copy { min-width: 0; flex: 1; }
  .td-clarity .td-hub__copy strong { display: block; font-size: 14px; font-weight: 600; margin-bottom: 5px; }
  .td-clarity .td-hub__copy small { display: block; font-size: max(12px, calc(12px * var(--td-scale, 1.14))); line-height: 1.5; color: var(--td-muted); }
  .td-clarity .td-hub__count { color: var(--td-muted); font-size: max(12px, calc(12px * var(--td-scale, 1.14))); font-variant-numeric: tabular-nums; }
  .td-clarity .td-hub__count.is-warning { color: var(--td-warn-text); }
  .td-clarity .td-hub__arrow { color: var(--td-muted); font-size: 17px; }
  .td-clarity .td-hub__empty { text-align: center; padding: 55px 20px; color: var(--td-muted); }
  .td-clarity .td-hub__empty p { margin-top: 8px; font-size: max(12px, calc(13px * var(--td-scale, 1.14))); }
  @media (min-width: 901px) and (max-width: 1200px) {
    .td-clarity .td-top { padding-inline: 20px; gap: 10px; }
    .td-clarity .td-top__crumb { max-width: 22%; }
    .td-clarity .td-top__sync { max-width: 92px; white-space: normal; }
  }
  @media (max-width: 900px) {
    :root { --td-top-h: 66px; --td-pad-x: 18px; --td-pad-y: 20px;
      --td-pad-head: 25px; --td-pad-head-b: 20px;
      --td-fs-page: calc(23px * var(--td-scale)); --td-fs-greet: calc(24px * var(--td-scale)); }
    .td-clarity .td-top { min-height: 66px; height: auto; padding: 11px 16px; gap: 9px; flex-wrap: wrap; }
    .td-clarity .td-top__search { flex: 1; min-width: 110px; margin: 0; }
    .td-clarity .td-top .td-search input { font-size: 16px; }
    .td-clarity .td-top__back { max-width: calc(100% - 136px); font-size: max(12px, calc(12px * var(--td-scale, 1.14))); }
    .td-clarity .td-top:has(.td-top__back) .td-top__search { flex-basis: 100%; order: 8; }
    .td-clarity .td-top:has(.td-top__back) .td-tools { margin-left: auto; }
    .td-clarity .td-top > .td-top__link { display: none; }
    .td-clarity .td-burger { width: 38px; height: 38px; margin: 0; }
    .td-clarity .td-side { width: min(304px, calc(100vw - 40px)); }
    .td-clarity .td-side--focused .td-side__top { padding-right: 50px; }
    .td-clarity .td-side--focused .td-side__hide { display: none; }
    .td-clarity .td-hub { width: calc(100vw - 24px); max-height: calc(100dvh - 40px); border-radius: 20px; }
    .td-clarity .td-hub__inside { padding: 23px 19px; }
    .td-clarity .td-hub__heading { gap: 12px; margin-bottom: 20px; }
    .td-clarity .td-hub__heading h2 { font-size: 25px; }
    .td-clarity .td-hub__heading p { max-width: 220px; font-size: max(12px, calc(12px * var(--td-scale, 1.14))); }
    .td-clarity .td-hub__search span { display: none; }
    .td-clarity .td-hub__search input { font-size: 16px; }
    .td-clarity .td-hub__grid { grid-template-columns: 1fr; gap: 10px; }
    .td-clarity .td-hub__card { min-height: 84px; padding: 17px 15px; gap: 12px; }
    .td-clarity .td-hub__copy small { font-size: max(12px, calc(11px * var(--td-scale, 1.14))); }
    .td-clarity .td-side__top { padding-top: 14px; padding-right: 48px; }
    .td-clarity .td-side__name { font-size: max(12px, calc(12px * var(--td-scale, 1.14))); }
    .td-clarity .td-side__item { min-height: 46px; }
    .td-clarity .td-drawer-close { display: inline-flex; align-items: center; justify-content: center;
      position: absolute; top: 26px; right: 12px; width: 36px; height: 36px; border: 0;
      border-radius: 10px; background: var(--td-surface); color: var(--td-text); font-size: 22px; cursor: pointer; }
    .td-clarity .td-side__foot { padding-bottom: max(18px, env(safe-area-inset-bottom)); }
    .td-clarity .td-findbox { min-width: 0; width: 100%; }
    .td-clarity .td-page, .td-clarity .td-page--wide, .td-clarity .td-page--canvas { padding: 20px 18px; gap: 18px; }
    .td-clarity .td-head + .td-page { padding-top: 4px; }
    .td-clarity .td-content > .td-legacy { padding: 24px 18px 32px !important; }
    .td-clarity .td-card__head, .td-clarity .td-card__body, .td-clarity .td-legacy .card-body { padding: 18px; }
    .td-clarity .td-card__head { flex-wrap: wrap; }
    .td-clarity .td-kpi { padding: 17px 16px; }
    .td-clarity .td-toolbar { padding: 12px 14px; gap: 9px; }
    .td-clarity .td-tabs { gap: 22px; margin-top: 22px; }
    .td-clarity .td-shell { padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }
    .td-clarity .td-mobile-nav { position: fixed; inset: auto 0 0; z-index: 45;
      display: flex; align-items: stretch; gap: 3px; min-height: 67px;
      padding: 7px 12px calc(7px + env(safe-area-inset-bottom, 0px));
      background: var(--td-surface); border-top: 1px solid var(--td-hairline); }
    .td-clarity .td-mobile-nav__item { flex: 1; min-width: 0; padding: 5px 2px;
      display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
      border: 0; border-radius: 10px; color: var(--td-muted); background: transparent;
      font: 500 max(12px, calc(11px * var(--td-scale, 1.14)))/1.25 var(--td-font); text-decoration: none; cursor: pointer; }
    .td-clarity .td-mobile-nav__item svg { width: 21px; height: 21px; }
    .td-clarity .td-mobile-nav__item.is-active { color: var(--td-brand); background: var(--td-brand-soft); }
    .td-clarity .td-mobile-nav__item:focus-visible { outline-offset: 0; }
    .td-clarity .td-savebar { bottom: calc(67px + env(safe-area-inset-bottom, 0px)); }
    .td-clarity .td-toast--float { bottom: calc(82px + env(safe-area-inset-bottom, 0px)); }
    .td-clarity .cx-top__in { padding-inline: 18px; }
    .td-clarity .cx-nav { padding-inline: 18px; gap: 22px; }
    .td-clarity .cx-wrap { padding-inline: 16px; }
  }
  @media (max-width: 420px) {
    .td-clarity .td-top { padding-inline: 12px; gap: 5px; }
    .td-clarity .td-tools { gap: 2px; }
    .td-clarity .td-tool { width: 34px; }
    .td-clarity .au-wrap { padding: 18px; }
    .td-clarity .au-card { padding: 32px 24px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .td-clarity .td-side, .td-clarity .td-btn { transition: none; }
  }
}
@media print {
  .td-mobile-nav, .td-drawer-close, .td-skip, .td-hub { display: none !important; }
}

/* Secondary workspaces use the same first-prototype page rhythm and real data. */
@media screen {
body[data-clarity-page="secondary"] .td-main{background:var(--td-canvas)}
body[data-clarity-page="secondary"] .td-head{padding:38px 42px 24px;background:transparent;border:0}
body[data-clarity-page="secondary"] .td-head__row{align-items:center;gap:20px}
body[data-clarity-page="secondary"] .td-h1,.clarity-secondary-heading h1{font-size:30px;font-weight:650;line-height:1.3;letter-spacing:-.8px;color:var(--td-text)}
body[data-clarity-page="secondary"] .td-head__row>div:first-child>div{font-size:max(12px, calc(13px * var(--td-scale, 1.14)))!important;line-height:1.6!important;margin-top:9px}
body[data-clarity-page="secondary"] .td-crumb{font-size:max(12px, calc(11px * var(--td-scale, 1.14)));margin-bottom:13px}
body[data-clarity-page="secondary"] .td-page{padding:0 42px 32px!important}
body[data-clarity-page="secondary"] .td-toolbar{padding:0 42px 24px;background:transparent;border:0;flex-wrap:wrap;gap:12px}
body[data-clarity-page="secondary"] .td-legacy :is(.container,.container-fluid){max-width:1580px!important;padding:38px 42px!important}
.clarity-secondary-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:29px}
.clarity-secondary-heading p{color:var(--td-muted);font-size:max(12px, calc(13px * var(--td-scale, 1.14)));margin:9px 0 0}
.clarity-secondary-back{display:inline-block;font-size:max(12px, calc(11px * var(--td-scale, 1.14)));color:var(--td-muted);margin-bottom:12px}
.clarity-secondary-summary{display:flex;flex-wrap:wrap;align-items:center;gap:24px;margin-bottom:25px;font-size:max(12px, calc(12px * var(--td-scale, 1.14)));color:var(--td-muted)}
.clarity-secondary-summary :is(span,a){display:inline-flex;align-items:baseline;gap:8px;color:inherit;text-decoration:none}
.clarity-secondary-summary b{font-size:24px;font-weight:600;color:var(--td-text);font-variant-numeric:tabular-nums;letter-spacing:-.4px}
.clarity-secondary-summary small{font-size:max(12px, calc(12px * var(--td-scale, 1.14)))}
.clarity-secondary-section{padding:24px 25px 20px}.clarity-secondary-section h2{font-size:17px;font-weight:650;margin:0}.clarity-secondary-section p{font-size:max(12px, calc(12px * var(--td-scale, 1.14)));color:var(--td-muted);margin:7px 0 0}
body[data-clarity-page="secondary"] .td-tabs{gap:5px;flex-wrap:wrap;margin-top:22px;padding:5px;border:1px solid var(--td-hairline);border-radius:11px;width:fit-content;background:var(--td-surface-hover)}
body[data-clarity-page="secondary"] .td-tab{border:0;border-radius:7px;padding:7px 13px;min-height:34px;font-size:max(12px, calc(12px * var(--td-scale, 1.14)))}
body[data-clarity-page="secondary"] .td-tab.is-active{background:var(--td-surface);box-shadow:0 1px 4px #2025290a}
.clarity-segments{display:flex!important;flex-wrap:wrap;gap:5px!important;padding:5px!important;background:var(--td-surface-hover)!important;border:1px solid var(--td-hairline);border-radius:11px;width:fit-content}
.clarity-segments .btn{border:0!important;min-height:33px;border-radius:7px!important;font-size:max(12px, calc(12px * var(--td-scale, 1.14)))!important}
.clarity-segments .btn-brand{background:var(--td-surface)!important;color:var(--td-brand-text)!important;box-shadow:0 1px 4px #2025290a}
.clarity-partner-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.td-clarity .clarity-partner-grid .pt-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:15px 12px;padding:24px!important;height:auto;border:1px solid var(--td-hairline);border-radius:18px;background:var(--td-surface);min-width:0;align-items:start}
.clarity-partner-grid .pt-name{grid-column:1;grid-row:1}.clarity-partner-grid .pt-name b{font-size:17px;font-weight:600;white-space:normal;line-height:1.4}
.clarity-partner-grid .pt-row>div:nth-child(2){grid-area:2/1}.clarity-partner-grid .pt-row>div:nth-child(7){grid-area:1/2}
.td-clarity .clarity-partner-grid .pt-row>div[data-label]{display:block;grid-area:auto;grid-column:1/-1;font-size:max(12px, calc(13px * var(--td-scale, 1.14)));white-space:normal;overflow-wrap:anywhere}
.clarity-partner-grid [data-label]:before{content:attr(data-label);display:block;font-size:max(12px, calc(10px * var(--td-scale, 1.14)));color:var(--td-muted);margin-bottom:4px;letter-spacing:.2px}
.clarity-partner-grid [data-label="銀行戶口"]{border-top:1px solid var(--td-hairline);padding-top:12px}
.clarity-planning-overview{display:flex;align-items:center;justify-content:space-between;gap:24px;background:var(--td-surface);border:1px solid var(--td-hairline);border-radius:18px;padding:25px;margin-bottom:22px}
.clarity-secondary-eyebrow{font-size:max(12px, calc(10px * var(--td-scale, 1.14)));color:var(--td-muted);letter-spacing:1px;margin-bottom:8px;display:block}
.clarity-planning-overview h2{font-size:20px;font-weight:600;margin:0}.clarity-planning-overview p{font-size:max(12px, calc(12px * var(--td-scale, 1.14)));color:var(--td-muted);margin:9px 0 0}.clarity-planning-overview .clarity-secondary-warning{color:var(--td-warn-text)}
.clarity-site-list .sp-row{min-height:76px}.clarity-site-list .sp-note input{padding:8px 10px;border:1px solid var(--td-hairline);border-radius:8px;background:var(--td-surface-alt)}
body[data-secondary="employees"] .clarity-access-table{overflow:auto}.clarity-access-table>.em-t{min-width:950px}.clarity-access-table .td-row{min-height:75px}.clarity-access-table .em-name b{font-size:14px;font-weight:600}.clarity-access-table .em-legend{min-width:950px}
.clarity-permission-reference{margin:0 42px 30px!important}.clarity-permission-reference>summary{padding:20px 24px;font-size:max(12px, calc(13px * var(--td-scale, 1.14)));font-weight:550;cursor:pointer}.clarity-permission-reference .td-card__head{border-top:1px solid var(--td-hairline)}
body[data-secondary="craft_library"] .cl-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.td-clarity .cl-photo,.td-clarity .cl-photo img{height:180px}.td-clarity .cl-body{padding:20px;gap:11px}.td-clarity .cl-name{font-size:17px;font-weight:600}.td-clarity .cl-foot{padding-top:14px;margin-top:8px;border-top:1px solid var(--td-hairline);font-size:max(12px, calc(11px * var(--td-scale, 1.14)))}
dialog.clarity-material-dialog{width:min(850px,calc(100vw - 32px));max-height:88dvh;overflow:auto;padding:0;border:1px solid var(--td-hairline);box-shadow:var(--td-clarity-float);color:var(--td-text)}dialog.clarity-material-dialog:not([open]){display:none}dialog.clarity-material-dialog::backdrop{background:#151d254d;backdrop-filter:blur(4px)}
.clarity-access-filters{display:flex;align-items:center;flex-wrap:wrap;gap:18px;justify-content:space-between;margin-bottom:25px}.clarity-access-filters .tru-toolbar{margin:0!important}.clarity-access-search{display:flex;align-items:center;gap:10px;font-size:max(12px, calc(11px * var(--td-scale, 1.14)));color:var(--td-muted)}
.clarity-access-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:start}.clarity-access-card{border:1px solid var(--td-hairline);border-radius:18px;background:var(--td-surface);overflow:hidden}.clarity-access-card-heading{display:flex;justify-content:space-between;gap:12px;align-items:start;padding:23px 23px 17px}.clarity-access-card h2{font-size:17px;font-weight:600;margin:0 0 6px;line-height:1.5}.clarity-access-card p{font-size:max(12px, calc(12px * var(--td-scale, 1.14)));color:var(--td-muted);margin:0}.clarity-access-card-foot{padding:0 23px 17px;font-size:max(12px, calc(12px * var(--td-scale, 1.14)))}.clarity-access-card-foot a{color:var(--td-brand-text)}
.clarity-access-settings{border-top:1px solid var(--td-hairline)}.clarity-access-settings>summary{padding:15px 23px;cursor:pointer;font-size:max(12px, calc(12px * var(--td-scale, 1.14)));list-style:none}.clarity-access-settings>summary span{float:right}.clarity-access-settings[open]>summary{background:var(--td-surface-alt)}.clarity-access-form{display:grid;gap:15px;padding:18px 23px 23px}.clarity-access-form>label{font-size:max(12px, calc(11px * var(--td-scale, 1.14)));color:var(--td-muted);display:grid;gap:6px}.clarity-access-form>label.clarity-access-enabled{display:flex;align-items:center;gap:8px}.clarity-access-form .form-control{width:100%;min-width:0}
@media(max-width:1150px){.clarity-partner-grid,.clarity-access-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){body[data-clarity-page="secondary"] .td-head{padding:26px 18px 20px}body[data-clarity-page="secondary"] .td-page{padding:0 18px 25px!important}body[data-clarity-page="secondary"] .td-toolbar{padding:0 18px 20px}body[data-clarity-page="secondary"] .td-legacy :is(.container,.container-fluid){padding:26px 18px!important}.clarity-secondary-heading{align-items:flex-start;flex-wrap:wrap;gap:16px}.clarity-secondary-heading h1,body[data-clarity-page="secondary"] .td-h1{font-size:27px}.clarity-secondary-summary{gap:14px 20px}.clarity-secondary-summary b{font-size:22px}.clarity-planning-overview{padding:22px;flex-wrap:wrap}.clarity-partner-grid,.clarity-access-grid,body[data-secondary="craft_library"] .cl-grid{grid-template-columns:1fr}.clarity-permission-reference{margin:0 18px 25px!important}.clarity-site-list .td-thead{display:none}.clarity-site-list .sp-row{min-width:0;grid-template-columns:1fr auto;padding:22px!important;gap:16px;--td-tmin:0}.clarity-site-list .sp-row>div:nth-child(2){grid-area:1/1;white-space:normal!important}.clarity-site-list .sp-row>div:first-child{grid-area:1/2}.clarity-site-list .sp-row>div:nth-child(3),.clarity-site-list .sp-row>div:nth-child(4){grid-column:1/-1}.clarity-site-list [data-label]:before{content:attr(data-label);display:block;font-size:max(12px, calc(10px * var(--td-scale, 1.14)));color:var(--td-muted);margin-bottom:7px}.clarity-site-list .sp-note{padding-left:0}.clarity-access-search{width:100%}.clarity-access-search input{flex:1;min-width:0}.clarity-secondary-section{padding:20px}.td-clarity .cl-photo,.td-clarity .cl-photo img{height:210px}}
}
@media screen {
body[data-clarity-page="secondary"] .td-legacy{padding:0!important}
body[data-clarity-page="secondary"] .td-head__row>div:first-child{min-width:0}
.td-clarity .td-legacy .clarity-access-card h2{font-size:17px;font-weight:600;letter-spacing:-.25px}
.clarity-access-search>span{white-space:nowrap}.clarity-site-counts{margin:24px 0}
@media(max-width:900px){body[data-clarity-page="secondary"] .td-head__row{flex-direction:column;align-items:flex-start}body[data-clarity-page="secondary"] .td-head__row>div:first-child{flex:auto!important;width:100%}body[data-clarity-page="secondary"] .td-head__row>div:last-child{flex-wrap:wrap}.clarity-site-counts>small{flex-basis:100%}}
}
@media screen {
.clarity-stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:20px 0 24px}.clarity-stat{padding:22px;border:1px solid var(--td-hairline);border-radius:18px;background:var(--td-surface)}.clarity-stat .tru-stat__label{font-size:max(12px, calc(11px * var(--td-scale, 1.14)));color:var(--td-muted);margin-bottom:12px}.clarity-stat .tru-stat__value{font-size:24px;font-weight:600;letter-spacing:-.6px;color:var(--td-text);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
body[data-clarity-page="secondary"] .td-head .td-menu__btn.td-btn{width:39px;height:39px;border:1px solid var(--td-hairline);background:var(--td-surface);border-radius:9px;font-size:18px;color:var(--td-text-2)}
@media(max-width:900px){.clarity-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.clarity-stat{padding:17px}.clarity-stat .tru-stat__value{font-size:21px}}
}