/* Layout belongs only to the new appearance panel. Existing screen geometry is unchanged. */
@media screen {
  .tdr-appearance-dialog {
    background: var(--tdr-color-surface); color: var(--tdr-color-text-primary);
    border: 1px solid var(--tdr-color-border); border-radius: 18px;
    box-shadow: var(--tdr-shadow-3); width: min(940px, calc(100vw - 28px));
    max-height: min(860px, calc(100dvh - 28px)); padding: 0; overflow: hidden;
  }
  .tdr-appearance-dialog[open] { display: flex; flex-direction: column; }
  .tdr-appearance-dialog::backdrop { background: rgba(0, 0, 0, .45); }
  .tdr-appearance-heading { padding: 24px 28px 16px; flex: none; }
  .tdr-appearance-kicker { color: var(--tdr-color-text-secondary); font-size: 12px; }
  .tdr-appearance-heading h2 { margin: 4px 0 6px; font-size: 26px; }
  .tdr-appearance-heading p, .tdr-appearance-hint { color: var(--tdr-color-text-secondary); margin: 0; }
  .tdr-appearance-body { padding: 0 28px 24px; overflow-y: auto; min-height: 0; }
  .tdr-appearance-section { border: 0; padding: 0; margin: 0 0 22px; min-width: 0; }
  .tdr-appearance-section legend, .tdr-appearance-section h3 { font-size: 14px; font-weight: 600; margin: 0 0 12px; }
  .tdr-appearance-presets { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
  .tdr-appearance-preset { background: var(--tdr-color-raised-surface); color: var(--tdr-color-text-primary); border: 2px solid var(--tdr-color-border); border-radius: 12px; padding: 8px; display: grid; gap: 8px; min-width: 0; }
  .tdr-appearance-preset[aria-pressed="true"] { border-color: var(--tdr-color-focus); background: var(--tdr-color-input-focus); }
  html[data-tdr-theme] body:is(.tdr-app-shell, .tdr-guest-shell) .tdr-appearance-dialog .tdr-appearance-preset { display: grid !important; grid-template-columns: minmax(0, 1fr); align-items: stretch; text-align: center; }
  html[data-tdr-theme] body:is(.tdr-app-shell, .tdr-guest-shell) .tdr-appearance-dialog .tdr-appearance-section { border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; }
  .tdr-appearance-dialog button:focus-visible, .tdr-appearance-dialog input:focus-visible { outline: 2px solid var(--tdr-color-focus); outline-offset: 2px; }
  .tdr-preset-mini { display: flex; width: 100%; min-width: 0; height: 68px; border-radius: 6px; overflow: hidden; background: #F2F5F6; }
  .tdr-preset-sidebar { width: 24%; background: #DEE7EC; }
  .tdr-preset-content { flex: 1; padding: 9px 7px; display: grid; gap: 5px; }
  .tdr-preset-line { height: 4px; width: 60%; background: #70787C; border-radius: 2px; }
  .tdr-preset-card { height: 16px; background: #FFFFFF; border-radius: 3px; }
  .tdr-preset-action { height: 10px; width: 60%; border-radius: 3px; background: #147FB8; }
  .tdr-preset-forest .tdr-preset-action { background: #2E7D57; } .tdr-preset-forest .tdr-preset-sidebar { background: #DCE9E0; }
  .tdr-preset-lavender .tdr-preset-action { background: #6750A4; } .tdr-preset-lavender .tdr-preset-sidebar { background: #E8E1F0; }
  .tdr-preset-sand .tdr-preset-action { background: #A46A23; } .tdr-preset-sand .tdr-preset-sidebar { background: #EEE4D4; }
  .tdr-preset-rose .tdr-preset-action { background: #A23E62; } .tdr-preset-rose .tdr-preset-sidebar { background: #F0E0E5; }
  .tdr-preset-custom .tdr-preset-action { background: linear-gradient(90deg, #147FB8, #6750A4, #A23E62); }
  .tdr-appearance-mode { display: flex; gap: 26px; }
  .tdr-appearance-mode label, .tdr-appearance-support-option { display: flex; align-items: center; gap: 8px; }
  .tdr-appearance-dialog input[type="radio"], .tdr-appearance-dialog input[type="checkbox"] { accent-color: var(--tdr-color-primary); }
  .tdr-appearance-colours { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
  .tdr-appearance-colours label { margin-bottom: 8px; }
  .tdr-appearance-colour-input { display: flex; gap: 8px; }
  .tdr-appearance-colour-input input[type="color"] { width: 50px; min-width: 50px; height: 40px; padding: 4px; border: 1px solid var(--tdr-color-border-strong); border-radius: 8px; background: var(--tdr-color-input-surface); }
  .tdr-appearance-colour-input input[type="text"] { width: 100%; min-width: 0; height: 40px; padding: 8px 12px; }
  .tdr-appearance-hint { margin-top: 10px; font-size: 12px; }
  .tdr-appearance-previews { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .tdr-appearance-preview { background: var(--tdr-color-canvas); color: var(--tdr-color-text-primary); border: 1px solid var(--tdr-color-border); border-radius: 12px; overflow: hidden; font-size: 11px; }
  .tdr-preview-top { background: var(--tdr-color-shell-header-surface); padding: 10px 12px; display: flex; justify-content: space-between; }
  .tdr-preview-workspace { display: flex; min-width: 0; }
  .tdr-preview-navigation { background: var(--tdr-color-sidebar); color: var(--tdr-color-sidebar-text); width: 24%; min-width: 0; display: flex; flex-direction: column; gap: 8px; padding: 12px 4px; }
  .tdr-preview-navigation span, .tdr-preview-navigation strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 5px 4px; }
  .tdr-preview-navigation strong { background: var(--tdr-color-navigation-selection-surface); color: var(--tdr-color-navigation-selection-text); border-radius: 4px; }
  .tdr-preview-card { background: var(--tdr-color-surface); margin: 10px; padding: 12px; border: 1px solid var(--tdr-color-border); border-radius: 8px; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
  .tdr-preview-total { font-size: 20px; font-weight: 600; }
  .tdr-preview-actions { display: flex; gap: 5px; }
  .tdr-preview-actions span { padding: 5px 6px; border-radius: 4px; }
  .tdr-preview-primary { background: var(--tdr-color-primary); color: var(--tdr-color-primary-text); }
  .tdr-preview-secondary { background: var(--tdr-color-navigation-selection-surface); color: var(--tdr-color-navigation-selection-text); }
  .tdr-preview-danger { background: var(--tdr-color-danger); color: var(--tdr-color-danger-contrast-text); }
  .tdr-preview-input { background: var(--tdr-color-input-focus); color: var(--tdr-color-text-primary); border: 2px solid var(--tdr-color-focus); border-radius: 4px; padding: 6px; }
  .tdr-preview-disabled { background: var(--tdr-color-surface-disabled); color: var(--tdr-color-text-disabled); border-radius: 4px; padding: 6px; }
  .tdr-preview-grid { display: flex; flex-direction: column; }
  .tdr-preview-grid span { background: var(--tdr-color-grid-row); color: var(--tdr-color-text-primary); padding: 5px; }
  .tdr-preview-grid span:first-child { background: var(--tdr-color-grid-header); }
  .tdr-preview-grid span:nth-child(2) { background: var(--tdr-color-grid-alternate); }
  .tdr-preview-grid span.tdr-preview-selected { background: var(--tdr-color-grid-selection); color: var(--tdr-color-grid-selection-text); }
  .tdr-preview-grid span.tdr-preview-grid-total { background: var(--tdr-color-grid-total); }
  .tdr-preview-grid b { float: right; font-weight: 600; }
  .tdr-preview-statuses { display: flex; gap: 4px; }
  .tdr-preview-statuses span { padding: 4px 5px; border-radius: 4px; }
  .tdr-preview-success { background: var(--tdr-color-grid-success); color: var(--tdr-color-success-text); }
  .tdr-preview-warning { background: var(--tdr-color-warning-surface); color: var(--tdr-color-warning-text); }
  .tdr-preview-error { background: var(--tdr-color-danger-surface); color: var(--tdr-color-danger-text); }
  .tdr-preview-hover { background: var(--tdr-color-surface-hover); color: var(--tdr-color-text-primary); padding: 5px; }
  .tdr-preview-tooltip { float: right; background: var(--tdr-color-menu-surface); color: var(--tdr-color-text-primary); border: 1px solid var(--tdr-color-border); border-radius: 3px; padding: 1px 3px; }
  .tdr-appearance-footer { background: var(--tdr-color-raised-surface); border-top: 1px solid var(--tdr-color-border); padding: 14px 28px; flex: none; }
  .tdr-appearance-footer p { margin: 0 0 10px; font-size: 12px; color: var(--tdr-color-text-secondary); }
  .tdr-appearance-footer-actions { display: flex; gap: 8px; }
  .tdr-appearance-footer-actions > span { flex: 1; }
  .tdr-guest-appearance { position: fixed; right: 16px; top: 16px; z-index: 1100; }
  @media (max-width: 700px) {
    .tdr-appearance-heading { padding: 18px 18px 12px; }
    .tdr-appearance-body { padding: 0 18px 18px; }
    .tdr-appearance-presets { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .tdr-appearance-colours, .tdr-appearance-previews { grid-template-columns: 1fr; gap: 16px; }
    .tdr-appearance-footer { padding: 12px 18px; }
    .tdr-appearance-footer-actions { flex-wrap: wrap; }
    .tdr-appearance-footer-actions [data-appearance-reset] { margin-right: auto; }
    .tdr-appearance-footer-actions > span { display: none; }
    .tdr-appearance-footer-actions button { padding: 8px 10px; min-width: 0; }
  }
}
@media print { .tdr-appearance-dialog, [data-tdr-appearance-open], [data-appearance-save-status] { display: none !important; } }