/* Gemeinsame Komponenten. Fachliche Gesten, Aufgabenkreise und Statusfarben
   bleiben Aufgabe der jeweiligen App. Form und Abstände kommen aus tokens. */
:root {
  font-size:var(--ui-font-size,16px);
  --family-system-background: #ffffff;
  --family-system-foreground: #202632;
  --accent: #1265aa;
  --bg: light-dark(#ffffff,#171b24);
  --fg: light-dark(#202632,#f0f2f5);
  --background: light-dark(#ffffff,#171b24);
  --text: light-dark(#202632,#f0f2f5);
  --ui-background: var(--family-background,var(--bg,var(--background)));
  --ui-foreground: var(--family-foreground,var(--fg,var(--text)));
  --ui-accent: var(--family-accent,var(--accent));
  --ui-on-accent: var(--family-accent-text,var(--on-accent,#ffffff));
  --ui-surface: color-mix(in srgb,var(--ui-background) 94%,var(--ui-foreground));
  --ui-raised: color-mix(in srgb,var(--ui-background) 90%,var(--ui-foreground));
  --ui-line: color-mix(in srgb,var(--ui-foreground) 20%,transparent);
  --ui-muted: color-mix(in srgb,var(--ui-foreground) 72%,transparent);
  --surface: var(--ui-surface); --raised: var(--ui-raised); --line: var(--ui-line); --muted: var(--ui-muted);
}
@media(prefers-color-scheme:dark){:root{--family-system-background:#171b24;--family-system-foreground:#f0f2f5}}
.family-ui{--ui-background:var(--family-background,var(--bg));--ui-foreground:var(--family-foreground,var(--fg));--ui-accent:var(--family-accent,var(--accent));--ui-on-accent:var(--family-accent-text,var(--on-accent,#ffffff));--ui-surface:color-mix(in srgb,var(--ui-background) 94%,var(--ui-foreground));--ui-raised:color-mix(in srgb,var(--ui-background) 90%,var(--ui-foreground));--ui-line:color-mix(in srgb,var(--ui-foreground) 20%,transparent);--ui-muted:color-mix(in srgb,var(--ui-foreground) 72%,transparent);--surface:var(--ui-surface);--raised:var(--ui-raised);--line:var(--ui-line);--muted:var(--ui-muted);font-family:var(--ui-font,"Segoe UI",sans-serif);font-size:var(--ui-font-size,16px);line-height:1.5;background:var(--ui-background);color:var(--ui-foreground)}
.app-crawler{--ui-background:var(--background);--ui-foreground:var(--text)}
.family-ui :is(button,.btn,.menu-button){font-family:inherit;font-size:1rem;border-radius:var(--ui-radius-button,10px);min-height:var(--ui-control-height,44px);padding:var(--ui-button-y,9px) var(--ui-button-x,16px);box-shadow:none}
.family-ui :is(button,.btn):disabled{opacity:.5;cursor:not-allowed}
.family-ui :is(input,select,textarea,.form-control,.form-select){font:inherit;border-radius:var(--ui-radius-field,10px);border-color:var(--ui-line);background-color:var(--ui-background);color:var(--ui-foreground)}
.family-ui :is(input,select,textarea):disabled{background:var(--ui-surface);color:var(--ui-muted);opacity:1}
.family-ui input::placeholder,.family-ui textarea::placeholder{color:var(--ui-muted);opacity:1}
.family-ui :is(input[type=checkbox],input[type=radio]){accent-color:var(--ui-accent)}
.family-ui :is(.btn-primary,.primary,.search-submit){background:var(--ui-accent);border:1px solid var(--ui-accent);color:var(--ui-on-accent)}
.family-ui :is(.btn-primary,.primary,.search-submit):hover{background:var(--ui-accent);color:var(--ui-on-accent);filter:brightness(1.08)}
.family-ui :is(.btn-outline-primary,.btn-outline-secondary,button.secondary,.menu-button){background:var(--ui-surface);border:1px solid var(--ui-line);color:var(--ui-foreground)}
.family-ui :is(button,.btn,input,select,textarea,a):focus-visible{outline:2px solid var(--ui-accent);outline-offset:3px;box-shadow:none}
.family-ui a{color:var(--ui-accent)}
.family-ui :is(h1,h2,h3){font-family:inherit;font-weight:650;line-height:1.25;letter-spacing:-.02em}
.family-ui h1{font-size:1.8rem}.family-ui h2{font-size:1.2rem}
.family-ui :is(dialog,.panel,.search-panel,.file-results,.overview-link,.composer,.reset-confirm){border-radius:var(--ui-radius-card,14px);border-color:var(--ui-line)}
.family-ui dialog{border-radius:var(--ui-radius-dialog,18px);background:var(--ui-surface);color:var(--ui-foreground)}
.family-ui :is(.app-header,.top,.mobile-header){background:var(--ui-surface);color:var(--ui-foreground)}
.family-ui .app-header{height:var(--ui-header-height,64px)}
.family-ui :is(.sidebar,.aside){background:var(--ui-surface);color:var(--ui-foreground);border-color:var(--ui-line)}
.family-ui .sidebar :is(a,button),.family-ui .aside a{color:var(--ui-foreground)}
.family-ui :is(.sidebar a[aria-current=page],.nav-pills .nav-link.active,.selected){background:color-mix(in srgb,var(--ui-accent) 15%,transparent);color:var(--ui-foreground);box-shadow:inset 3px 0 var(--ui-accent);border-radius:var(--ui-radius-button,10px)}
.family-ui :is(.btn-link,.nav-link){text-decoration:none}
.family-ui .form-floating>.form-control:disabled~label{color:var(--ui-muted)}
.family-ui .form-check-input:checked{background-color:var(--ui-accent);border-color:var(--ui-accent)}
.app-portal .page>.sidebar{background:var(--ui-surface)!important;border-right:1px solid var(--ui-line)}
.app-portal .page>.sidebar :is(a,button){color:var(--ui-foreground)!important}
.app-portal .top-row{border-color:var(--ui-line)}
.app-portal .content{padding-top:var(--ui-page-padding,24px)}
.app-portal .sidebar nav{padding:0!important}
.app-portal .mobile-header{min-height:var(--ui-header-height,64px);padding:10px 16px}
.app-portal .navigation-links{padding:16px}
.app-crawler main{padding:var(--ui-page-padding,24px)}
.app-listen .content{padding:var(--ui-page-padding,24px)}
.family-ui .settings-sections{gap:var(--ui-gap,16px)}
.family-ui .settings-sections section{background:var(--ui-surface);border:1px solid var(--ui-line);border-radius:var(--ui-radius-card,14px);padding:var(--ui-card-padding,20px)}
.app-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:var(--ui-gap,16px);max-width:1000px;margin-top:24px}
.app-tile{display:flex;align-items:center;gap:var(--ui-gap,16px);padding:var(--ui-card-padding,20px);border:1px solid var(--ui-line);border-radius:var(--ui-radius-card,14px);background:var(--ui-surface);color:var(--ui-foreground)!important;text-decoration:none;min-height:120px;transition:border-color .15s}
.app-tile:hover{border-color:var(--ui-accent);text-decoration:none}.app-tile strong{display:block;font-size:1.15rem}.app-tile small{display:block;color:var(--ui-muted);margin-top:4px}.app-tile .app-mark{width:56px;height:56px;border-radius:var(--ui-radius-card,14px);display:grid;place-items:center;color:var(--ui-accent);background:color-mix(in srgb,var(--ui-accent) 13%,transparent);flex-shrink:0}.app-mark img{width:40px;height:40px}.app-mark svg{width:32px;height:32px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.app-crawler button{background:var(--ui-surface);color:var(--ui-foreground);border-color:var(--ui-line)}
.app-crawler :is(.search-submit,button[data-start],#pair,#sourceForm button:not([type=button]),#credential button,#grant button){background:var(--ui-accent);color:var(--ui-on-accent);border-color:var(--ui-accent)}
.app-crawler .file-kind{color:var(--ui-accent);background:color-mix(in srgb,var(--ui-accent) 13%,transparent)}
.app-crawler .preview-button{padding:3px;font-size:.7rem}
.app-listen :is(.row,.composer,.aside,dialog){background:var(--ui-surface);border-color:var(--ui-line)}
.app-listen :is(.row,.item,.composer,.overview-link){border-radius:var(--ui-radius-card,14px)}
.app-listen :is(.icon,.star,.grip){padding:8px;min-height:44px;background:transparent}
.app-listen .circle{padding:0;min-height:30px;border-radius:50%}
.app-listen .sort{padding:4px 0;border:0;background:transparent}
.app-listen .star{font-size:28px}.app-listen .grip{font-size:22px}.app-listen .composer button{display:grid;place-items:center;flex:0 0 48px;width:48px;min-width:48px;height:48px;min-height:48px;padding:0;line-height:1;font-size:27px}.app-listen .composer input{background:transparent;border:0}.app-listen .top h1,.family-ui .brand{font-size:1.15rem;font-weight:650}
.module-frame{min-height:100dvh;background:var(--ui-background)}.module-bar{display:flex;align-items:center;gap:16px;padding:12px var(--ui-page-padding,24px);min-height:var(--ui-header-height,64px);background:var(--ui-surface);border-bottom:1px solid var(--ui-line)}.module-bar strong{font-size:1.15rem}.module-bar a{text-decoration:none}.module-tabs{display:flex;gap:8px;flex-wrap:wrap;padding:10px var(--ui-page-padding,24px);border-bottom:1px solid var(--ui-line)}.module-tabs a{padding:8px 12px;border-radius:var(--ui-radius-button,10px);color:var(--ui-foreground)}.module-tabs a[aria-current=page]{background:color-mix(in srgb,var(--ui-accent) 15%,transparent);box-shadow:inset 0 -3px var(--ui-accent)}.module-content{max-width:1100px;margin:auto;padding:var(--ui-page-padding,24px)}
@media(min-width:641px){.app-portal .page>.sidebar{width:var(--ui-sidebar-width,250px)}}
@media(max-width:760px){.family-ui h1{font-size:1.6rem}.app-crawler tr{border-radius:var(--ui-radius-card,14px)}.app-crawler .sidebar nav a[aria-current=page]{box-shadow:inset 0 -3px var(--ui-accent)}.app-tile{min-height:104px}.family-ui .menu-button{padding:8px 12px}}
@media(prefers-reduced-motion:reduce){.app-tile{transition:none}}
/* The same header and tabs on catalog, management, appearance and account. */
.family-ui .shell-header{display:flex;align-items:center;gap:12px;min-height:var(--ui-header-height,64px);padding:10px var(--ui-page-padding,24px);border-bottom:1px solid var(--ui-line);background:var(--ui-surface);color:var(--ui-foreground)}
.family-ui .shell-header a,.family-ui .shell-tabs a{text-decoration:none!important;color:var(--ui-foreground)}
.family-ui .shell-back{display:grid;place-items:center;min-width:44px;min-height:44px;border-radius:var(--ui-radius-button,10px);font-size:1.5rem;flex-shrink:0}
.family-ui .shell-brand{display:flex;align-items:center;gap:10px;font-size:1.15rem;font-weight:650;flex:1;min-width:0}
.family-ui .shell-brand svg{width:26px;height:26px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.family-ui .shell-header button{flex-shrink:0}
.family-ui .shell-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0;padding:12px var(--ui-page-padding,24px);background:var(--ui-surface);border-bottom:1px solid var(--ui-line)}
.family-ui .shell-tabs a{display:grid;place-items:center;min-height:44px;padding:8px 12px;border-radius:var(--ui-radius-button,10px);font-size:.9rem;text-align:center;line-height:1.4}
.family-ui .shell-tabs a[aria-current=page]{background:color-mix(in srgb,var(--ui-accent) 16%,transparent);box-shadow:inset 0 -3px var(--ui-accent);font-weight:650}
.family-ui .shell-tabs a:hover,.family-ui .shell-back:hover{background:var(--ui-raised)}
.family-ui .shell-tabs a[aria-current=page]:hover{background:color-mix(in srgb,var(--ui-accent) 16%,transparent)}
.app-crawler .filters-toggle{border:0;background:transparent;color:var(--ui-foreground);padding:4px 0;border-radius:0;font-size:.9rem}
.crawler-frame>main{max-width:1480px;width:100%;margin:auto}
@media(max-width:760px){.family-ui .shell-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}.family-ui .shell-header{gap:6px;padding-inline:12px}.family-ui .shell-header button{font-size:.85rem;padding-inline:10px}.family-ui .shell-brand{font-size:1.05rem}.family-ui .shell-back{min-width:32px}.family-ui .shell-brand svg{width:22px;height:22px}}