uraji-theme-selector { display: inline-flex; flex: 0 0 auto; font-family: inherit; }
.appearance-slot { display: inline-flex; flex: 0 0 128px; min-height: 38px; }
uraji-theme-selector.auth-appearance { position: fixed; right: 22px; top: 20px; z-index: 80; }
.appearance-trigger { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; padding: 8px 11px; margin: 0; border: 1px solid var(--border-default); border-radius: 9px; background: var(--button-secondary-bg); color: var(--button-secondary-text); font: inherit; font-size: 12px; font-weight: 650; cursor: pointer; }
.topbar .appearance-trigger, .workspace-topbar .appearance-trigger { color: var(--nav-text); background: var(--glass-surface); border-color: var(--glass-border); }
.appearance-trigger:hover { border-color: var(--brand-primary); }
.appearance-panel { position: fixed; inset: 0; margin: auto; width: min(640px, calc(100vw - 32px)); max-height: calc(100dvh - 40px); overflow: auto; padding: 24px; border: 1px solid var(--modal-border); border-radius: 18px; background: var(--modal-bg); color: var(--text-primary); box-shadow: var(--card-shadow); font-family: inherit; font-size: 14px; }
.appearance-panel::backdrop { background: var(--modal-overlay); }
.appearance-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 18px; }
.appearance-heading strong { display: block; font-size: 20px; line-height: 1.3; }
.appearance-heading p { color: var(--text-secondary); font-size: 13px; margin: 6px 0 0; }
.appearance-close { border: 1px solid var(--border-default); border-radius: 8px; padding: 0; width: 36px; min-height: 36px; background: var(--button-secondary-bg); color: var(--text-secondary); font: inherit; font-size: 24px; cursor: pointer; }
.appearance-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.appearance-option { display: block; text-align: left; padding: 10px; min-width: 0; border: 1px solid var(--border-default); border-radius: 12px; background: var(--card-bg); color: var(--text-primary); font: inherit; cursor: pointer; }
.appearance-option:hover { background: var(--card-hover); border-color: var(--brand-primary); }
.appearance-option[aria-pressed="true"] { border: 1px solid var(--brand-primary); box-shadow: 0 0 0 2px var(--brand-soft); }
.appearance-option-label { display: flex; align-items: center; justify-content: space-between; gap: 4px; margin-top: 12px; }
.appearance-option-label strong { display: inline; font-size: 14px; line-height: 1.4; }
.appearance-option small { display: block; font-size: 11px; color: var(--text-secondary); margin-top: 4px; }
.appearance-check { font-size: 15px; color: var(--brand-primary); visibility: hidden; }
.appearance-option[aria-pressed="true"] .appearance-check { visibility: visible; }
.appearance-hint { margin: 18px 0 0; font-size: 11px; color: var(--text-secondary); line-height: 1.6; }
.appearance-status { margin: 4px 0 0; min-height: 18px; color: var(--text-secondary); font-size: 12px; }
.appearance-preview { height: 90px; display: grid; grid-template-columns: 24px 1fr; overflow: hidden; border-radius: 7px; border: 1px solid var(--preview-border); background: var(--preview-page); }
.preview-classic { --preview-page: #f5f7f9; --preview-sidebar: #073a33; --preview-surface: #fff; --preview-accent: #117865; --preview-border: #dce6e8; --preview-line: #e4e9ee; }
.preview-ember-dark { --preview-page: #101112; --preview-sidebar: #14181b; --preview-surface: #222629; --preview-accent: #fca229; --preview-border: #3d444a; --preview-line: #343b41; }
.preview-ember-light { --preview-page: #f5f5f2; --preview-sidebar: #202326; --preview-surface: #ffffff; --preview-accent: #fca229; --preview-border: #d5d8d8; --preview-line: #d5d8d8; }
.preview-sidebar { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 4px; background: var(--preview-sidebar); }
.preview-sidebar i { display: block; width: 12px; height: 3px; background: var(--preview-line); border-radius: 2px; }
.preview-sidebar i:first-child { background: var(--preview-accent); }
.preview-main { display: flex; flex-direction: column; gap: 7px; padding: 8px; }
.preview-topbar { height: 9px; width: 100%; border-radius: 2px; background: var(--preview-surface); }
.preview-lines { display: flex; flex-direction: column; gap: 4px; padding: 7px; background: var(--preview-surface); border-radius: 3px; }
.preview-lines i { display: block; width: 80%; height: 3px; background: var(--preview-line); border-radius: 2px; }
.preview-lines i:last-child { width: 55%; }
.preview-action { width: 30%; height: 8px; border-radius: 3px; background: var(--preview-accent); }
.appearance-trigger:focus-visible, .appearance-option:focus-visible, .appearance-close:focus-visible { outline: 3px solid var(--border-focus); outline-offset: 3px; }
@media (max-width: 600px) {
  .topbar .appearance-slot, .workspace-topbar .appearance-slot { flex-basis: 38px; }
  .topbar .appearance-trigger, .workspace-topbar .appearance-trigger { width: 38px; padding: 8px; }
  .topbar .appearance-trigger > span, .workspace-topbar .appearance-trigger > span { display: none; }
  .appearance-panel { padding: 18px; }
  .appearance-options { grid-template-columns: 1fr; }
  .appearance-option { display: grid; grid-template-columns: 96px 1fr; column-gap: 12px; align-items: center; }
  .appearance-preview { grid-row: span 2; height: 62px; }
  .appearance-option-label { margin-top: 0; align-self: end; }
  .appearance-option small { align-self: start; }
  uraji-theme-selector.auth-appearance { right: 14px; top: 14px; }
}

/* Miniatures show restrained surfaces, with the accent confined to active navigation. */
:root:is([data-theme="ember-dark"], [data-theme="ember-light"]) .appearance-option[aria-pressed="true"] { box-shadow: inset 0 0 0 1px var(--nav-active-border), 0 0 0 2px var(--brand-soft); }
.preview-sidebar i:first-child { box-shadow: 0 0 0 2px var(--preview-border); }

/* Shared search actions use existing buttons and the same query model. */
.ura-search-control { display:flex; align-items:center; gap:6px; min-width:0; flex:1; margin:0; }
.ura-search-control input.ura-search-input { flex:1; width:0; min-width:60px; }
.ura-search-control button { display:inline-flex; align-items:center; justify-content:center; gap:5px; flex-shrink:0; }
.table-search-wrap:has(.ura-search-control) { flex:1; min-width:0; }
.faq-card[hidden], .video-card[hidden], #helpSearchEmpty[hidden] { display:none !important; }
@media(max-width:600px) { .ura-search-control button span { display:none; } .ura-search-control { flex-basis:100%; } }

/* Secondary management tools live only in Company Workspace. */
.workforce-accordion { margin:0 0 20px; border-block:1px solid var(--border-default); color:var(--text-primary); }
.workforce-accordion > summary { display:flex; align-items:center; gap:16px; padding:16px 4px; cursor:pointer; list-style:none; }
.workforce-accordion > summary::-webkit-details-marker { display:none; }
.workforce-accordion > summary:focus-visible { outline:2px solid var(--border-focus); outline-offset:3px; }
.workforce-heading { display:flex; flex-direction:column; gap:4px; flex:1; min-width:0; }
.workforce-heading strong { font-size:16px; }
.workforce-heading small { color:var(--text-secondary); font-size:13px; }
.workforce-count { flex-shrink:0; font-size:12px; font-weight:600; color:var(--text-secondary); }
.workforce-chevron { flex-shrink:0; transition:transform .15s ease; }
.workforce-accordion[open] > summary .workforce-chevron { transform:rotate(180deg); }
.workforce-tools { padding:0 4px 16px; }
.workforce-tool { padding:16px 0; }
.workforce-tool + .workforce-tool { border-top:1px solid var(--border-default); }
.workforce-tool h2 { margin:0 0 8px; font-size:16px; }
.workforce-tool > p, .workforce-tool > small { color:var(--text-secondary); font-size:14px; }
.workforce-tool > small { display:block; margin-top:8px; }
.workforce-tool .table-scroll { margin-top:12px; }
@media(max-width:600px) {
  .workforce-accordion > summary { flex-wrap:wrap; gap:8px 12px; }
  .workforce-heading { flex-basis:calc(100% - 32px); }
  .workforce-count { order:3; flex-basis:100%; }
}