/* Shared new UI components. Brand values belong to design-system.css. */
@layer tokens, base, shell, modules, utilities, accessibility;
@layer modules {
    :where([data-ui-version="7"], .ui-surface) .btn {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 8px 16px; border-radius: var(--radius-control); min-height: var(--control-size);
      font-size: .85rem; font-weight: 700; cursor: pointer;
      border: 1px solid var(--line);
      background: var(--brand-soft);
      color: var(--text);
      transition: background .15s, border-color .15s;
    }
    :where([data-ui-version="7"], .ui-surface) .btn:hover { background: var(--brand-soft); }
    :where([data-ui-version="7"], .ui-surface) .btn-primary {
      background: var(--brand-primary);
      border-color: var(--brand-primary);
      color: var(--white);
    }
    :where([data-ui-version="7"], .ui-surface) .btn-primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); }
    :where([data-ui-version="7"], .ui-surface) .btn-sm { padding: 5px 12px; font-size: .8rem; }
    :where([data-ui-version="7"], .ui-surface) .btn-danger { background: var(--danger-bg); border-color: var(--danger-line); color: var(--danger-text); }
    :where([data-ui-version="7"], .ui-surface) .btn-danger:hover { background: var(--danger-bg); }
    :where([data-ui-version="7"], .ui-surface) .btn-success { background: var(--success-bg); border-color: var(--success-line); color: var(--success-text); }
    :where([data-ui-version="7"], .ui-surface) .btn-success:hover { background: var(--success-line); }

}
@layer modules {
.ui-surface { font-family:var(--font-ui); font-size: .9375rem; line-height: 1.5; color: var(--text); }
.ui-surface *, .ui-surface *::before, .ui-surface *::after { box-sizing: border-box; }
.ui-surface [hidden] { display: none !important; }
.ui-surface .btn { justify-content: center; line-height: 1.5; text-decoration: none; }
.ui-surface .btn:disabled { opacity: .55; cursor: not-allowed; }
.ui-surface .btn-icon { width: var(--control-size); height: var(--control-size); padding: 0; flex: 0 0 auto; }
.ui-panel, .ui-dialog, .ui-accordion { background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius-md); }
.ui-dialog { padding: var(--space-5); box-shadow: var(--shadow-md); }
.ui-dialog::backdrop { background: color-mix(in srgb, var(--brand-primary) 24%, transparent); }
.ui-dialog__header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin: 0; padding: 0 0 var(--space-4); border-bottom: 1px solid var(--line); background: var(--panel); color: var(--text); }
.ui-dialog__header > div { display: block; margin: 0; max-width: none; min-width: 0; }
.ui-eyebrow { font-size: .75rem; font-weight: 600; color: var(--muted); }
.ui-surface .ui-title { font-family:var(--font-ui); font-size: 1.5rem; font-weight: 650; line-height: 1.2; letter-spacing: -.035em; color: var(--brand-primary); margin: var(--space-1) 0 0; }
.ui-surface .ui-heading { font-family:var(--font-ui); font-size: 1.125rem; font-weight: 650; line-height: 1.4; color: var(--brand-primary); margin: var(--space-5) 0 var(--space-3); }
.ui-field { display: block; width: 100%; min-width: 0; min-height: var(--control-size); padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--panel); color: var(--text); font: inherit; }
.ui-label { display: block; margin: var(--space-4) 0 var(--space-2); font-size: .8125rem; font-weight: 600; }
.ui-muted { font-size: .8125rem; color: var(--muted); }
.ui-badge { padding: var(--space-1) var(--space-2); border-radius: var(--radius-control); background: var(--accent-soft); color: var(--accent-text); font-size: .75rem; font-weight: 600; }
.ui-message { padding: var(--space-3) var(--space-4); border-radius: var(--radius-control); background: var(--brand-soft); color: var(--text); font-size: .875rem; }
.ui-message.is-error { background: var(--danger-bg); color: var(--danger); }
.ui-accordion { margin: var(--space-3) 0; padding: 0 var(--space-4); }
.ui-accordion > summary { padding: var(--space-4) 0; cursor: pointer; font-weight: 600; color: var(--brand-primary); }
.ui-accordion > div { padding-bottom: var(--space-4); }
.ui-accordion p { margin: var(--space-2) 0 var(--space-4); }
.ui-accordion small { display: block; color: var(--muted); }
.ui-accordion .btn { margin-right: var(--space-3); }
.ui-link { color: var(--brand-primary); font-weight: 600; text-decoration: underline; text-underline-offset: .2em; }
.ui-tooltip { padding: var(--space-3) var(--space-4); border-radius: var(--radius-control); background: var(--brand-primary); color: var(--white); box-shadow: var(--shadow-md); font-size: .875rem; }
.ui-progress { width: 100%; height: var(--space-2); border: 0; border-radius: var(--radius-control); overflow: hidden; background: var(--brand-soft); accent-color: var(--brand-accent); }
.ui-progress::-webkit-progress-bar { background: var(--brand-soft); }
.ui-progress::-webkit-progress-value { background: var(--brand-accent); }
.ui-progress::-moz-progress-bar { background: var(--brand-accent); }
.ui-info-button { display: inline-flex; align-items: center; justify-content: center; width: var(--control-size); height: var(--control-size); min-height: var(--control-size); padding: 0; border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--panel); color: var(--brand-primary); cursor: pointer; }
.ui-info-button:hover { background: var(--brand-soft); border-color: var(--brand-primary); }
.ui-info-button .ui-icon { width: 20px; height: 20px; }
}