/* Uses the existing Settings surface and shared theme, never an overlay. */
#settingsArchived { color:var(--text-100); width:100%; min-width:0; padding:8px 0 32px; }
#settingsArchived h2 { font-size:24px; line-height:1.3; font-weight:600; margin:0 0 24px; }
#settingsArchived .archived-toolbar, #settingsArchived .archived-filters { display:flex; flex-wrap:wrap; gap:16px; align-items:end; margin-bottom:20px; }
#settingsArchived .archived-field, #settingsArchived .archived-filters > div { display:flex; flex:1 1 230px; min-width:0; flex-direction:column; gap:8px; }
#settingsArchived label { color:var(--text-200); font-size:13px; font-weight:500; }
#settingsArchived input, #settingsArchived select { box-sizing:border-box; width:100%; min-width:0; min-height:42px; padding:10px 12px; border:1px solid var(--border-200); border-radius:10px; background:var(--bg-100); color:var(--text-100); font:inherit; }
#settingsArchived input::placeholder { color:var(--text-300,var(--text-200)); }
#settingsArchived #archivedStatus { color:var(--text-200); font-size:13px; min-height:20px; margin:12px 0; }
#settingsArchived .archived-group { margin:22px 0; }
#settingsArchived .archived-group h3 { padding:0 0 12px; margin:0; font-size:13px; font-weight:600; color:var(--text-200); border-bottom:1px solid var(--zb-shell-divider,var(--border-200)); overflow-wrap:anywhere; }
#settingsArchived .archived-row { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:16px; min-height:70px; border-bottom:1px solid var(--zb-shell-divider,var(--border-200)); padding:12px 0; }
#settingsArchived button { font:inherit; color:var(--text-100); cursor:pointer; border:1px solid var(--border-200); border-radius:9px; background:transparent; padding:8px 12px; }
#settingsArchived button:hover { background:var(--bg-200); }
#settingsArchived button:disabled, #settingsArchived select:disabled { cursor:default; opacity:.55; }
#settingsArchived button:focus-visible, #settingsArchived input:focus-visible, #settingsArchived select:focus-visible { outline:2px solid var(--text-200); outline-offset:3px; }
#settingsArchived .archived-summary { display:flex; flex-direction:column; align-items:flex-start; min-width:0; gap:2px; }
#settingsArchived .archived-title { border:0; padding:0; border-radius:4px; text-align:left; overflow-wrap:anywhere; line-height:1.5; }
#settingsArchived .archived-date { color:var(--text-200); font-size:12px; line-height:1.5; }
#settingsArchived .archived-actions { display:flex; gap:8px; font-size:12px; }
#settingsArchived .archived-actions button { border:0; border-radius:999px; background:var(--bg-200); padding:10px 16px; }
#settingsArchived .archived-actions button:hover { background:var(--bg-300,var(--bg-200)); }
#settingsArchived .archived-actions button:last-child { color:var(--danger,#c94646); background:color-mix(in srgb,var(--danger,#c94646) 12%,transparent); }
#settingsArchived .archived-actions .archived-delete { display:inline-flex; align-items:center; justify-content:center; flex:none; width:36px; height:36px; min-height:36px; padding:0; border-radius:50%; }
#settingsArchived .archived-delete svg { flex:none; width:20px; height:20px; }
#settingsArchived [hidden] { display:none !important; }
#settingsArchived .archived-footer { display:flex; gap:10px; margin-top:20px; }
@media (max-width:640px) {
    #settingsArchived h2 { font-size:22px; }
    #settingsArchived .archived-toolbar, #settingsArchived .archived-filters { gap:12px; }
    #settingsArchived .archived-field, #settingsArchived .archived-filters > div { flex-basis:100%; }
    #settingsArchived .archived-row { grid-template-columns:minmax(0,1fr) auto; gap:8px 12px; }
    #settingsArchived .archived-summary { grid-column:1; }
    #settingsArchived .archived-actions { grid-column:2; flex-direction:column; }
}