/*
   AIoFax dialog design system.
   Ported from https://ofaxy-dialogs.ai.studio (index-Dwiy4N1Q.css).
   The Tailwind v4 preamble from that build is deliberately NOT imported.
   Token blocks are scoped to .aio-dialog-scope so the rest of the app keeps
   its own Radzen palette (--rz-primary: #4a00cc).
   Hand-maintained from here on: do not overwrite with a fresh export.
*/
.aio-dialog-scope{--rz-primary:#4a00cc;--rz-primary-darker:#3800a0;--rz-primary-lighter:#6022e0;--rz-on-primary:#fff;--rz-text-color:#1e1b2e;--rz-text-secondary-color:#645f78;--rz-text-disabled-color:#9d98ad;--rz-base-background-color:#fff;--rz-body-background-color:#f7f6fb;--rz-base-100:#fbfaff;--rz-base-200:#f3f1f9;--rz-base-300:#e8e4f3;--rz-border-color:#dfdbed;--rz-danger:#d92d20;--rz-danger-bg:#fee4e2;--rz-danger-border:#fecdca;--rz-on-danger:#fff;--rz-success:#079455;--rz-success-bg:#d1fadf;--rz-success-border:#a6f4c5;--rz-on-success:#fff;--rz-warning:#dc6803;--rz-warning-bg:#fef0c7;--rz-warning-border:#fedf89;--rz-on-warning:#fff;--rz-info:#026aa2;--rz-info-bg:#e0f2fe;--rz-info-border:#b9e6fe;--rz-on-info:#fff;--dlg-radius:14px;--dlg-radius-sm:8px;--dlg-radius-pill:9999px;--dlg-shadow:0 24px 48px -12px #1e1b2e38, 0 0 1px 1px #1e1b2e14;--dlg-shadow-stacked:0 32px 64px -12px #1e1b2e59, 0 0 1px 1px #4a00cc33;--dlg-scrim-bg:#120e228c;--dlg-scrim-stacked-bg:#120e22b8;--dlg-header-bg:#fff;--dlg-header-border:#eeebf7;--dlg-footer-bg:#fbfaff;--dlg-footer-border:#eeebf7;--dlg-gutter:24px;--dlg-section-gap:20px;--dlg-field-gap:14px;--dlg-focus-ring:0 0 0 3px var(--rz-primary)}@supports (color:color-mix(in lab,red,red)){.aio-dialog-scope{--dlg-focus-ring:0 0 0 3px color-mix(in srgb, var(--rz-primary) 22%, transparent)}}.aio-dialog-scope[data-theme="dark"]{--rz-primary:#8b5cf6;--rz-primary-darker:#7c3aed;--rz-primary-lighter:#a78bfa;--rz-on-primary:#fff;--rz-text-color:#f1eff8;--rz-text-secondary-color:#a49eb7;--rz-text-disabled-color:#656078;--rz-base-background-color:#171523;--rz-body-background-color:#0d0c15;--rz-base-100:#1e1b2e;--rz-base-200:#252238;--rz-base-300:#312d47;--rz-border-color:#35304f;--rz-danger:#f04438;--rz-danger-bg:#f044382e;--rz-danger-border:#f0443859;--rz-on-danger:#fff;--rz-success:#12b76a;--rz-success-bg:#12b76a2e;--rz-success-border:#12b76a59;--rz-on-success:#fff;--rz-warning:#f79009;--rz-warning-bg:#f790092e;--rz-warning-border:#f7900959;--rz-on-warning:#fff;--rz-info:#0ba5ec;--rz-info-bg:#0ba5ec2e;--rz-info-border:#0ba5ec59;--rz-on-info:#fff;--dlg-radius:14px;--dlg-radius-sm:8px;--dlg-radius-pill:9999px;--dlg-shadow:0 28px 56px -12px #000000a6, 0 0 1px 1px #ffffff14;--dlg-shadow-stacked:0 36px 72px -12px #000c, 0 0 1px 1px #8b5cf64d;--dlg-scrim-bg:#040309b8;--dlg-scrim-stacked-bg:#020206d9;--dlg-header-bg:#171523;--dlg-header-border:#29253d;--dlg-footer-bg:#14121f;--dlg-footer-border:#29253d;--dlg-gutter:24px;--dlg-section-gap:20px;--dlg-field-gap:14px;--dlg-focus-ring:0 0 0 3px var(--rz-primary)}@supports (color:color-mix(in lab,red,red)){.aio-dialog-scope[data-theme="dark"]{--dlg-focus-ring:0 0 0 3px color-mix(in srgb, var(--rz-primary) 32%, transparent)}}.dlg-overlay{z-index:1000;background-color:var(--dlg-scrim-bg);-webkit-backdrop-filter:blur(4px);color:var(--rz-text-color);box-sizing:border-box;justify-content:center;align-items:center;padding:16px;font-family:Archivo,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;animation:.18s cubic-bezier(.16,1,.3,1) forwards dlgFadeIn;display:flex;position:fixed;top:0;right:0;bottom:0;left:0}.dlg-overlay--stacked{z-index:1100;background-color:var(--dlg-scrim-stacked-bg)}.dlg-shell{background-color:var(--rz-base-background-color);border-radius:var(--dlg-radius);box-shadow:var(--dlg-shadow);border:1px solid var(--rz-border-color);box-sizing:border-box;flex-direction:column;width:520px;max-width:100%;max-height:calc(100vh - 32px);animation:.2s cubic-bezier(.16,1,.3,1) forwards dlgRiseIn;display:flex;position:relative;overflow:hidden}.dlg-shell--stacked{box-shadow:var(--dlg-shadow-stacked);border-color:var(--rz-primary)}@supports (color:color-mix(in lab,red,red)){.dlg-shell--stacked{border-color:color-mix(in srgb,var(--rz-primary) 40%,var(--rz-border-color))}}@keyframes dlgFadeIn{0%{opacity:0}to{opacity:1}}@keyframes dlgRiseIn{0%{opacity:0;transform:translateY(8px)scale(.985)}to{opacity:1;transform:translateY(0)scale(1)}}@media(prefers-reduced-motion:reduce){.dlg-overlay,.dlg-shell{transition:none!important;animation:none!important}}@media(max-width:639.98px){.dlg-overlay{align-items:flex-end;padding:0}.dlg-shell{border-bottom:none;border-bottom-right-radius:0;border-bottom-left-radius:0;height:94vh;width:100%!important;max-width:100%!important;max-height:94vh!important}}.dlg-header{z-index:10;padding:14px var(--dlg-gutter);background-color:var(--dlg-header-bg);border-bottom:1px solid var(--dlg-header-border);-webkit-user-select:none;user-select:none;flex-shrink:0;justify-content:space-between;align-items:center;display:flex;position:sticky;top:0}.dlg-header-left{align-items:center;gap:10px;min-width:0;display:flex}.dlg-header-icon{color:var(--rz-primary);flex-shrink:0;justify-content:center;align-items:center;font-size:20px;display:inline-flex}.dlg-title{color:var(--rz-text-color);white-space:nowrap;text-overflow:ellipsis;margin:0;font-size:17px;font-weight:700;line-height:1.3;overflow:hidden}.dlg-header-actions{flex-shrink:0;align-items:center;gap:6px;margin-left:12px;display:flex}.dlg-close-btn,.dlg-icon-btn{border-radius:var(--dlg-radius-sm);width:32px;height:32px;color:var(--rz-text-secondary-color);cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;transition:all .12s;display:inline-flex}.dlg-close-btn:hover,.dlg-icon-btn:hover{background-color:var(--rz-base-200);color:var(--rz-text-color)}.dlg-close-btn:focus-visible,.dlg-icon-btn:focus-visible{box-shadow:var(--dlg-focus-ring);outline:none}.dlg-body{padding:var(--dlg-gutter);overscroll-behavior:contain;gap:var(--dlg-section-gap);flex-direction:column;flex:auto;display:flex;overflow:hidden auto}.dlg-body::-webkit-scrollbar{width:6px}.dlg-body::-webkit-scrollbar-thumb{background:var(--rz-border-color);border-radius:999px}.dlg-footer{z-index:10;padding:14px var(--dlg-gutter);background-color:var(--dlg-footer-bg);border-top:1px solid var(--dlg-footer-border);flex-shrink:0;justify-content:space-between;align-items:center;gap:12px;display:flex;position:sticky;bottom:0}.dlg-footer-right{align-items:center;gap:10px;margin-left:auto;display:flex}.dlg-footer-left{color:var(--rz-text-secondary-color);align-items:center;gap:8px;font-size:13px;display:flex}.dlg-form-group{flex-direction:column;gap:6px;width:100%;display:flex}.dlg-label{color:var(--rz-text-color);letter-spacing:.01em;justify-content:space-between;align-items:center;font-size:12.5px;font-weight:600;display:flex}.dlg-label-req{color:var(--rz-danger);margin-left:2px}.dlg-hint{color:var(--rz-text-secondary-color);margin-top:2px;font-size:12px;line-height:1.4}.dlg-input,.dlg-select,.dlg-textarea{width:100%;color:var(--rz-text-color);background-color:var(--rz-base-background-color);border:1px solid var(--rz-border-color);border-radius:var(--dlg-radius-sm);box-sizing:border-box;padding:8px 12px;font-family:inherit;font-size:14px;line-height:1.45;transition:border-color .14s,box-shadow .14s}.dlg-input:hover,.dlg-select:hover,.dlg-textarea:hover{border-color:var(--rz-text-secondary-color)}@supports (color:color-mix(in lab,red,red)){.dlg-input:hover,.dlg-select:hover,.dlg-textarea:hover{border-color:color-mix(in srgb,var(--rz-text-secondary-color) 40%,var(--rz-border-color))}}.dlg-input:focus,.dlg-select:focus,.dlg-textarea:focus{border-color:var(--rz-primary);box-shadow:var(--dlg-focus-ring);outline:none}.dlg-input::placeholder,.dlg-textarea::placeholder{color:var(--rz-text-disabled-color)}.dlg-input:disabled,.dlg-select:disabled,.dlg-textarea:disabled{background-color:var(--rz-base-200);color:var(--rz-text-disabled-color);cursor:not-allowed;border-color:var(--rz-border-color)}.dlg-textarea{resize:vertical;min-height:70px}.dlg-input-error{border-color:var(--rz-danger)!important}.dlg-error-msg{color:var(--rz-danger);align-items:center;gap:4px;font-size:12px;font-weight:500;display:flex}.dlg-grid-2{gap:var(--dlg-field-gap);grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.dlg-grid-3{gap:var(--dlg-field-gap);grid-template-columns:repeat(3,minmax(0,1fr));display:grid}.dlg-grid-4{gap:var(--dlg-field-gap);grid-template-columns:repeat(4,minmax(0,1fr));display:grid}@media(max-width:600px){.dlg-grid-2,.dlg-grid-3,.dlg-grid-4{grid-template-columns:1fr}}.dlg-section-title{text-transform:uppercase;letter-spacing:.05em;color:var(--rz-text-secondary-color);justify-content:space-between;align-items:center;margin:0;font-size:13px;font-weight:700;display:flex}.dlg-card{background-color:var(--rz-base-100);border:1px solid var(--rz-border-color);border-radius:var(--dlg-radius-sm);padding:14px}.dlg-btn{border-radius:var(--dlg-radius-sm);cursor:pointer;white-space:nowrap;-webkit-user-select:none;user-select:none;box-sizing:border-box;border:1px solid #0000;justify-content:center;align-items:center;gap:6px;padding:8px 16px;font-family:inherit;font-size:13.5px;font-weight:600;line-height:1;transition:all .14s;display:inline-flex}.dlg-btn:focus-visible{box-shadow:var(--dlg-focus-ring);outline:none}.dlg-btn:disabled{opacity:.55;cursor:not-allowed;pointer-events:none}.dlg-btn-primary{background-color:var(--rz-primary);color:var(--rz-on-primary);border-color:var(--rz-primary);box-shadow:0 1px 2px #0000001f}.dlg-btn-primary:hover:not(:disabled){background-color:var(--rz-primary-darker);border-color:var(--rz-primary-darker)}.dlg-btn-secondary{background-color:var(--rz-base-200);color:var(--rz-text-color);border-color:var(--rz-border-color)}.dlg-btn-secondary:hover:not(:disabled){background-color:var(--rz-base-300)}.dlg-btn-light{color:var(--rz-text-color);border-color:var(--rz-border-color);background-color:#0000}.dlg-btn-light:hover:not(:disabled){background-color:var(--rz-base-200)}.dlg-btn-ghost{color:var(--rz-text-secondary-color);background-color:#0000;border-color:#0000}.dlg-btn-ghost:hover:not(:disabled){background-color:var(--rz-base-200);color:var(--rz-text-color)}.dlg-btn-danger{background-color:var(--rz-danger);color:var(--rz-on-danger);border-color:var(--rz-danger)}.dlg-btn-danger:hover:not(:disabled){background-color:var(--rz-danger)}@supports (color:color-mix(in lab,red,red)){.dlg-btn-danger:hover:not(:disabled){background-color:color-mix(in srgb,var(--rz-danger) 85%,#000)}}.dlg-btn-danger-light{background-color:var(--rz-danger-bg);color:var(--rz-danger);border-color:var(--rz-danger-border)}.dlg-btn-danger-light:hover:not(:disabled){background-color:var(--rz-danger)}@supports (color:color-mix(in lab,red,red)){.dlg-btn-danger-light:hover:not(:disabled){background-color:color-mix(in srgb,var(--rz-danger) 25%,transparent)}}.dlg-btn-sm{border-radius:6px;padding:5px 10px;font-size:12px}.dlg-btn .material-icons,.dlg-btn .material-icons-outlined,.dlg-btn .material-icons-round{font-size:17px;line-height:1}.dlg-spinner{border:2px solid;border-right-color:#0000;border-radius:50%;width:15px;height:15px;animation:.7s linear infinite dlgSpin;display:inline-block}@keyframes dlgSpin{to{transform:rotate(360deg)}}.dlg-manage-list{flex-direction:column;gap:8px;width:100%;display:flex}.dlg-manage-row{background-color:var(--rz-base-100);border:1px solid var(--rz-border-color);border-radius:var(--dlg-radius-sm);justify-content:space-between;align-items:center;gap:10px;padding:8px 10px;transition:border-color .12s;display:flex}.dlg-manage-row:hover{border-color:var(--rz-primary)}@supports (color:color-mix(in lab,red,red)){.dlg-manage-row:hover{border-color:color-mix(in srgb,var(--rz-primary) 30%,var(--rz-border-color))}}.dlg-manage-row-left{flex-wrap:wrap;align-items:center;gap:8px;min-width:0;display:flex}.dlg-manage-row-actions{flex-shrink:0;align-items:center;gap:4px;display:flex}.dlg-manage-row-edit{flex-wrap:wrap;align-items:center;gap:8px;width:100%;padding:4px 0;display:flex}.dlg-manage-add-row{background-color:var(--rz-primary);align-items:center;gap:8px;padding:10px;display:flex}@supports (color:color-mix(in lab,red,red)){.dlg-manage-add-row{background-color:color-mix(in srgb,var(--rz-primary) 4%,var(--rz-base-100))}}.dlg-manage-add-row{border:1px dashed var(--rz-primary)}@supports (color:color-mix(in lab,red,red)){.dlg-manage-add-row{border:1px dashed color-mix(in srgb,var(--rz-primary) 40%,var(--rz-border-color))}}.dlg-manage-add-row{border-radius:var(--dlg-radius-sm)}.dlg-pill{--chip-color:var(--rz-primary);border-radius:var(--dlg-radius-pill);background-color:var(--chip-color);align-items:center;gap:6px;padding:3px 10px;font-size:12.5px;font-weight:600;display:inline-flex}@supports (color:color-mix(in lab,red,red)){.dlg-pill{background-color:color-mix(in srgb,var(--chip-color) 13%,transparent)}}.dlg-pill{border:1px solid var(--chip-color);color:var(--chip-color);white-space:nowrap;-webkit-user-select:none;user-select:none;line-height:1.4}.dlg-pill .material-icons,.dlg-pill .material-icons-outlined,.dlg-pill .material-icons-round{font-size:14px}.dlg-pill--selected{background-color:var(--chip-color);color:#fff}.dlg-badge-system{text-transform:uppercase;letter-spacing:.05em;background-color:var(--rz-base-200);color:var(--rz-text-secondary-color);border:1px solid var(--rz-border-color);border-radius:4px;padding:2px 6px;font-size:10px;font-weight:700}.dlg-badge-kanban{background-color:var(--rz-primary);border-radius:4px;padding:2px 6px;font-size:11px;font-weight:800}@supports (color:color-mix(in lab,red,red)){.dlg-badge-kanban{background-color:color-mix(in srgb,var(--rz-primary) 15%,transparent)}}.dlg-badge-kanban{color:var(--rz-primary);border:1px solid var(--rz-primary);cursor:pointer;transition:all .12s}.dlg-badge-kanban--off{background-color:var(--rz-base-200);color:var(--rz-text-disabled-color);border-color:var(--rz-border-color)}.dlg-attachment-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;display:grid}.dlg-attachment-card{background-color:var(--rz-base-100);border:1px solid var(--rz-border-color);border-radius:var(--dlg-radius-sm);flex-direction:column;padding:8px;transition:all .12s;display:flex;position:relative}.dlg-attachment-card:hover{border-color:var(--rz-primary)}.dlg-attachment-thumb{background-color:var(--rz-base-200);border-radius:4px;justify-content:center;align-items:center;width:100%;height:68px;margin-bottom:6px;display:flex;overflow:hidden}.dlg-attachment-thumb img{object-fit:cover;width:100%;height:100%}.dlg-attachment-name{color:var(--rz-text-color);white-space:nowrap;text-overflow:ellipsis;font-size:11.5px;font-weight:600;overflow:hidden}.dlg-attachment-size{color:var(--rz-text-secondary-color);font-size:10.5px}.dlg-attachment-remove{background:var(--rz-base-background-color);border:1px solid var(--rz-border-color);width:20px;height:20px;color:var(--rz-danger);cursor:pointer;border-radius:50%;justify-content:center;align-items:center;font-size:13px;display:flex;position:absolute;top:4px;right:4px}.dlg-dropzone{border:2px dashed var(--rz-border-color);border-radius:var(--dlg-radius-sm);text-align:center;background-color:var(--rz-base-100);padding:20px}@supports (color:color-mix(in lab,red,red)){.dlg-dropzone{background-color:color-mix(in srgb,var(--rz-base-100) 60%,transparent)}}.dlg-dropzone{cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:6px;transition:all .14s;display:flex}.dlg-dropzone:hover,.dlg-dropzone--dragover{border-color:var(--rz-primary);background-color:var(--rz-primary)}@supports (color:color-mix(in lab,red,red)){.dlg-dropzone:hover,.dlg-dropzone--dragover{background-color:color-mix(in srgb,var(--rz-primary) 6%,var(--rz-base-background-color))}}.dlg-dropzone-icon{color:var(--rz-primary);font-size:32px}.dlg-dropzone-text{color:var(--rz-text-color);font-size:13px;font-weight:500}.dlg-dropzone-sub{color:var(--rz-text-secondary-color);font-size:11.5px}.dlg-checklist-progress{align-items:center;gap:10px;margin-bottom:8px;display:flex}.dlg-progress-bar{background-color:var(--rz-base-200);border-radius:999px;flex:1;height:6px;overflow:hidden}.dlg-progress-fill{background-color:var(--rz-success);border-radius:999px;height:100%;transition:width .2s}.dlg-progress-label{color:var(--rz-text-secondary-color);text-align:right;min-width:32px;font-size:12px;font-weight:700}.dlg-checklist-list{flex-direction:column;gap:6px;display:flex}.dlg-checklist-item{background-color:var(--rz-base-100);border:1px solid var(--rz-border-color);border-radius:var(--dlg-radius-sm);justify-content:space-between;align-items:center;gap:8px;padding:6px 10px;display:flex}.dlg-checklist-item--done .dlg-checklist-text{color:var(--rz-text-disabled-color);text-decoration:line-through}.dlg-checklist-text{color:var(--rz-text-color);flex:1;font-size:13px}.dlg-repeat-panel{border:1px solid var(--rz-border-color);background-color:var(--rz-base-100);border-radius:var(--dlg-radius-sm);flex-direction:column;gap:12px;padding:14px;display:flex}.dlg-weekday-row{gap:4px;width:100%;display:flex}.dlg-weekday-btn{border:1px solid var(--rz-border-color);background-color:var(--rz-base-background-color);height:32px;color:var(--rz-text-secondary-color);cursor:pointer;border-radius:6px;flex:1;font-size:12px;font-weight:700;transition:all .12s}.dlg-weekday-btn--active{background-color:var(--rz-primary);border-color:var(--rz-primary);color:#fff}.dlg-repeat-summary{color:var(--rz-text-secondary-color);background-color:var(--rz-primary);font-size:12px}@supports (color:color-mix(in lab,red,red)){.dlg-repeat-summary{background-color:color-mix(in srgb,var(--rz-primary) 6%,transparent)}}.dlg-repeat-summary{border-left:3px solid var(--rz-primary);border-radius:0 6px 6px 0;padding:8px 10px;line-height:1.4}.dlg-rte-wrapper{border:1px solid var(--rz-border-color);border-radius:var(--dlg-radius-sm);background-color:var(--rz-base-background-color);overflow:hidden}.dlg-rte-toolbar{background-color:var(--rz-base-200);border-bottom:1px solid var(--rz-border-color);flex-wrap:wrap;align-items:center;gap:2px;padding:6px 8px;display:flex}.dlg-rte-btn{width:28px;height:28px;color:var(--rz-text-secondary-color);cursor:pointer;background:0 0;border:none;border-radius:4px;justify-content:center;align-items:center;display:inline-flex}.dlg-rte-btn:hover{background-color:var(--rz-base-300);color:var(--rz-text-color)}.dlg-rte-btn .material-icons,.dlg-rte-btn .material-icons-outlined{font-size:16px}.dlg-rte-separator{background-color:var(--rz-border-color);width:1px;height:18px;margin:0 4px}.dlg-rte-content{min-height:90px;color:var(--rz-text-color);padding:10px 12px;font-size:14px;line-height:1.5}.dlg-icon-grid{border:1px solid var(--rz-border-color);border-radius:var(--dlg-radius-sm);background-color:var(--rz-base-100);grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:6px;max-height:180px;padding:6px;display:grid;overflow-y:auto}.dlg-icon-cell{background-color:var(--rz-base-background-color);cursor:pointer;border:1px solid #0000;border-radius:6px;flex-direction:column;justify-content:center;align-items:center;padding:8px 4px;transition:all .12s;display:flex}.dlg-icon-cell:hover{border-color:var(--rz-primary);background-color:var(--rz-primary)}@supports (color:color-mix(in lab,red,red)){.dlg-icon-cell:hover{background-color:color-mix(in srgb,var(--rz-primary) 8%,var(--rz-base-background-color))}}.dlg-icon-cell--selected{border-color:var(--rz-primary);background-color:var(--rz-primary)}@supports (color:color-mix(in lab,red,red)){.dlg-icon-cell--selected{background-color:color-mix(in srgb,var(--rz-primary) 18%,var(--rz-base-background-color))}}.dlg-icon-cell--selected{color:var(--rz-primary)}.dlg-icon-cell-name{color:var(--rz-text-secondary-color);white-space:nowrap;text-overflow:ellipsis;max-width:100%;margin-top:4px;font-size:10px;overflow:hidden}.dlg-swatch-row{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.dlg-swatch{cursor:pointer;border:2px solid #0000;border-radius:50%;width:26px;height:26px;transition:transform .12s;position:relative}.dlg-swatch:hover{transform:scale(1.15)}.dlg-swatch--selected{outline:2px solid var(--rz-primary);outline-offset:2px}.dlg-notice-warning{background-color:var(--rz-warning-bg);border:1px solid var(--rz-warning-border);border-radius:var(--dlg-radius-sm);color:var(--rz-warning);align-items:flex-start;gap:10px;padding:10px 14px;font-size:12.5px;line-height:1.45;display:flex}.dlg-notice-warning .material-icons{flex-shrink:0;margin-top:1px;font-size:18px}.dlg-toast{z-index:2000;background-color:var(--rz-base-background-color);border-radius:var(--dlg-radius-sm);border:1px solid var(--rz-border-color);align-items:center;gap:10px;max-width:360px;padding:12px 18px;animation:.15s forwards dlgFadeIn;display:flex;position:fixed;top:24px;right:24px;box-shadow:0 10px 30px -5px #0000004d}.dlg-toast--success{border-left:4px solid var(--rz-success)}.dlg-toast--warning{border-left:4px solid var(--rz-warning)}.dlg-toast--danger{border-left:4px solid var(--rz-danger)}.dlg-timer-container{flex-direction:column;justify-content:center;align-items:center;padding:16px 0;display:flex}.dlg-timer-ring-svg{width:200px;height:200px;transform:rotate(-90deg)}.dlg-timer-track{fill:none;stroke:var(--rz-base-200);stroke-width:8px}.dlg-timer-progress{fill:none;stroke:var(--rz-primary);stroke-width:8px;stroke-linecap:round;transition:stroke-dashoffset .3s}.dlg-timer-progress--done{stroke:var(--rz-success)}.dlg-timer-center{flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute}.dlg-timer-digits{font-variant-numeric:tabular-nums;letter-spacing:-.02em;color:var(--rz-text-color);font-size:38px;font-weight:800;line-height:1}.dlg-timer-state{color:var(--rz-text-secondary-color);margin-top:6px;font-size:13px;font-weight:600}.dlg-myday-row{border-radius:var(--dlg-radius-sm);background-color:var(--rz-base-100);border:1px solid var(--rz-border-color);align-items:center;gap:12px;padding:10px 14px;transition:all .14s;display:flex}.dlg-myday-row--on{background-color:#f59e0b}@supports (color:color-mix(in lab,red,red)){.dlg-myday-row--on{background-color:color-mix(in srgb,#f59e0b 12%,var(--rz-base-background-color))}}.dlg-myday-row--on{border-color:#f59e0b}.dlg-myday-row--on .dlg-myday-icon{color:#f59e0b}.dlg-myday-row--off{opacity:.75}.dlg-myday-row--off .dlg-myday-icon{color:var(--rz-text-disabled-color)}body{background-color:var(--rz-body-background-color);color:var(--rz-text-color);-webkit-font-smoothing:antialiased;margin:0;font-family:Archivo,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}

/* Width is supplied per dialog by AioDialogHost as a custom property. */
.dlg-shell { width: var(--dlg-width, 480px); }

/* ------------------------------------------------------------------
   Helper classes replacing the inline styles used in the artboards.
   The project forbids inline style attributes except for setting a
   data-driven custom property, so every repeated inline rule from the
   design is lifted here with identical values.
   ------------------------------------------------------------------ */

/* Confirm dialog (E1) */
.dlg-header-icon--danger { color: var(--rz-danger); }
.dlg-body--confirm { gap: 12px; }
.dlg-confirm-text { margin: 0; font-size: 14px; line-height: 1.5; color: var(--rz-text-color); }

/* Stacked column layout used inside dlg-card throughout the artboards */
.dlg-stack { display: flex; flex-direction: column; gap: 12px; }
.dlg-stack-sm { display: flex; flex-direction: column; gap: 8px; }
.dlg-row { display: flex; align-items: center; gap: 8px; }
.dlg-row-tight { display: flex; gap: 2px; }
.dlg-flex-1 { flex: 1; }

/* Optional fixed height, supplied per dialog by AioDialogHost. */
.dlg-shell--sized { height: var(--dlg-height); }

/* Checkbox + label pairs (Repeat, All day, weekday availability) */
.dlg-check { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; cursor: pointer; }
.dlg-check input[type="checkbox"] { cursor: pointer; width: 16px; height: 16px; }

/* My Day row (A1, A2) */
.dlg-myday-row { cursor: pointer; user-select: none; }
.dlg-myday-icon { font-size: 20px; }
.dlg-myday-copy { flex: 1; }
.dlg-myday-title { font-size: 13px; font-weight: 700; }
.dlg-myday-sub { font-size: 11px; color: var(--rz-text-secondary-color); }
.dlg-myday-row input[type="checkbox"] { cursor: pointer; width: 16px; height: 16px; }

/* Colour swatches take their fill from a data-driven custom property */
.dlg-swatch { background-color: var(--swatch-color); }

/* Coloured pills take their tint from a data-driven custom property */
.dlg-pill { --chip-color: var(--rz-primary); }

/* Development-only dialog gallery harness. */
.dev-gallery { padding: 24px; }
.dev-gallery-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0; }

/* Dropzone (A1, A2, A3, B1, C2) */
.dlg-dropzone-browse { color: var(--rz-primary); font-weight: 700; }
.dlg-dropzone-paste { margin-top: 4px; }
.dlg-dropzone-input { display: none; }

/* Attachment cards take their file-type tint from a data-driven custom property */
.dlg-attachment-icon { font-size: 32px; color: var(--file-color, var(--rz-text-secondary-color)); }
.dlg-attachment-remove .material-icons-outlined { font-size: 13px; }
.dlg-attachment-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* Checklist */
.dlg-checklist-progress-title { font-size: 13px; font-weight: 700; }
.dlg-progress-fill { width: var(--progress-pct, 0%); }
.dlg-checklist-check { background: none; border: none; padding: 0; cursor: pointer; display: flex; align-items: center; }
.dlg-checklist-check .material-icons-outlined { font-size: 20px; }
.dlg-checklist-check--done .material-icons-outlined { color: var(--rz-success); }
.dlg-checklist-text { cursor: pointer; }
.dlg-checklist-actions { display: flex; gap: 2px; }
.dlg-checklist-actions .dlg-icon-btn { width: 24px; height: 24px; }
.dlg-checklist-actions .material-icons-outlined { font-size: 15px; }
.dlg-icon-btn--danger .material-icons-outlined { color: var(--rz-danger); }

/* Section titles with a trailing hint */
.dlg-section-hint { font-size: 11px; text-transform: none; font-weight: 500; }

/* Native colour input, styled to match dlg-input */
.dlg-color-input {
    width: 38px; height: 36px; padding: 2px;
    border: 1px solid var(--rz-border-color);
    border-radius: var(--dlg-radius-sm);
    cursor: pointer;
    background: var(--rz-base-background-color);
    flex: none;
}

/* Empty states (C1, C3, B3, C8) */
.dlg-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 8px; padding: 28px 16px; text-align: center;
    color: var(--rz-text-secondary-color); font-size: 13px;
}
.dlg-empty .material-icons-outlined { font-size: 32px; opacity: 0.55; }

/* Spinner sizing helpers */
.dlg-spinner--sm { width: 12px; height: 12px; }
.dlg-spinner--lg { width: 28px; height: 28px; border-width: 3px; }
.dlg-loading { display: flex; align-items: center; justify-content: center; padding: 48px; color: var(--rz-primary); }

/* Select popup used by AioSelect (no native equivalent for templated options) */
.dlg-select-wrap { position: relative; width: 100%; }
.dlg-select-trigger { display: flex; align-items: center; gap: 6px; text-align: left; }
.dlg-select-trigger .dlg-select-caret { margin-left: auto; color: var(--rz-text-secondary-color); font-size: 18px; }
.dlg-select-popup {
    position: absolute; z-index: 10; top: calc(100% + 4px); left: 0; right: 0;
    background: var(--rz-base-background-color);
    border: 1px solid var(--rz-border-color);
    border-radius: var(--dlg-radius-sm);
    box-shadow: var(--dlg-shadow);
    max-height: 260px; overflow-y: auto; padding: 4px;
}
.dlg-select-popup--narrow { width: 220px; right: auto; }
.dlg-select-filter { margin: 4px; width: calc(100% - 8px); }
.dlg-select-option {
    display: flex; align-items: center; gap: 8px; width: 100%;
    padding: 7px 10px; border: none; background: none; cursor: pointer;
    border-radius: 6px; font-family: inherit; font-size: 14px;
    color: var(--rz-text-color); text-align: left;
}
.dlg-select-option:hover { background-color: var(--rz-base-200); }
.dlg-select-option--selected { background-color: color-mix(in srgb, var(--rz-primary) 14%, transparent); }
.dlg-select-swatch { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--option-color, var(--rz-primary)); }
.dlg-select-empty { padding: 10px; font-size: 13px; color: var(--rz-text-secondary-color); }

/* Native date and time inputs draw their own calendar glyph and popup, and the browser styles
   both from `color-scheme` rather than from our palette. With it left unset the browser assumes
   light, so in the dark theme the glyph came out near-black on a near-black field and read as
   "there is no date picker". Declaring the scheme is what makes the glyph visible and opens the
   popup in matching colours. */
.aio-dialog-scope { color-scheme: light; }
.aio-dialog-scope[data-theme="dark"] { color-scheme: dark; }

/* The glyph is the only affordance the control has, so give it a target worth aiming at and a
   pointer cursor; js/aioDialog.js additionally opens the picker from anywhere in the field. */
.dlg-input[type="date"], .dlg-input[type="datetime-local"], .dlg-input[type="time"] { cursor: pointer; }
.dlg-input[type="date"]::-webkit-calendar-picker-indicator,
.dlg-input[type="datetime-local"]::-webkit-calendar-picker-indicator,
.dlg-input[type="time"]::-webkit-calendar-picker-indicator {
    cursor: pointer; opacity: 0.75; padding: 2px; border-radius: 4px;
}
.dlg-input[type="date"]::-webkit-calendar-picker-indicator:hover,
.dlg-input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover,
.dlg-input[type="time"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1; background-color: var(--rz-base-300);
}

/* Inline label layout, used by every dialog. Labels sit in their own column, bold and followed
   by a colon, with the field beside them rather than beneath it. The label column is a fixed
   width on purpose: sizing each group to its own label leaves the fields starting at a different
   x in every row, which is the ragged look this replaces. Blocks of fields are therefore laid out
   at most two across (`dlg-grid-2`), since a label column plus a field does not fit three. */
/* 120px clears every label in the app but one ("Appointment Type:" is the longest at 115px,
   measured at the real font), with a little headroom for a font fallback. Sizing for the single
   outlier instead would cost every other dialog 24px of field width, so that dialog raises
   --dlg-label-col for itself via dlg-body--wide-labels. */
.dlg-body { --dlg-label-col: 120px; container-type: inline-size; }

/* For a dialog whose longest label does not fit the standard column. */
.dlg-body--wide-labels { --dlg-label-col: 146px; }

/* A label column plus a field needs room, and dialogs range from 440px to 840px wide. Rather than
   pick a width per dialog, the two-across blocks fall back to one column once the body itself is
   narrow. This keys on the body rather than the viewport, so it is also correct when the user
   drags a resizable dialog narrow, which a media query cannot see. */
@container (max-width: 560px) {
    .dlg-grid-2 { grid-template-columns: 1fr; }
}
.dlg-body .dlg-form-group {
    display: grid;
    grid-template-columns: var(--dlg-label-col) minmax(0, 1fr);
    align-items: center;
    column-gap: 10px;
}
.dlg-body .dlg-label { display: block; font-weight: 700; line-height: 1.3; }
.dlg-body .dlg-label::after { content: ":"; }

/* Labels that write their own colon, because the required marker has to follow it. */
.dlg-body .dlg-label--literal::after { content: none; }


/* The body is a scrolling flex column, so every section in it must keep its natural
   height. A section that sets its own overflow (the rich text editor, the icon grid)
   has an automatic minimum size of zero, and once the sections together overrun the
   dialog the flex algorithm collapses those sections to nothing rather than scrolling:
   that is what made the description editor vanish from the task dialogs. */
.dlg-body > * { flex-shrink: 0; }

/* Rich text editor: the contenteditable host needs its own focus and placeholder treatment. */
.dlg-rte-content:focus { outline: none; box-shadow: inset 0 0 0 2px var(--rz-primary); }
.dlg-rte-content:empty::before { content: attr(data-placeholder); color: var(--rz-text-disabled-color); }

/* Manage-list add rows and row internals (A5, A6, B2, C6, C7, D2) */
.dlg-manage-add-row .dlg-input { flex: 1; }
.dlg-manage-row-left--grow { flex: 1; }
.dlg-color-input--sm {
    width: 36px; height: 34px; padding: 2px; flex: none;
    border: 1px solid var(--rz-border-color); border-radius: 6px;
    cursor: pointer; background: var(--rz-base-background-color);
}
.dlg-badge-system--default { background: var(--rz-warning-bg); color: var(--rz-warning); border-color: var(--rz-warning-border); }
.dlg-icon-btn--active-star { color: #f59e0b; }
.dlg-icon-btn:disabled { cursor: not-allowed; opacity: 0.55; }
.dlg-icon-btn:disabled .material-icons-outlined { color: var(--rz-text-disabled-color); }

/* Draggable / resizable shell (A4). The header is the drag handle and a grip sits bottom-right. */
.dlg-shell--draggable .dlg-header { cursor: move; }
.dlg-drag-handle { color: var(--rz-text-secondary-color); margin-right: 2px; }
/* The grip is drawn as corner hatching rather than an icon, so it reads as "drag me
   diagonally". Native CSS `resize` is deliberately not used: it demands `overflow: auto` on the
   shell, which takes the scrollbar away from the body and breaks the sticky header and footer.
   js/aioDialog.js drives the size instead, writing the same custom properties the shell reads. */
.dlg-resize-handle {
    position: absolute; right: 2px; bottom: 2px; z-index: 20;
    width: 16px; height: 16px; cursor: nwse-resize; touch-action: none;
    background: repeating-linear-gradient(135deg,
        transparent 0 3px, var(--rz-text-disabled-color) 3px 4px);
    -webkit-mask-image: linear-gradient(135deg, transparent 50%, #000 50%);
    mask-image: linear-gradient(135deg, transparent 50%, #000 50%);
    opacity: 0.8; transition: opacity 0.12s;
}
.dlg-resize-handle:hover { opacity: 1; background: repeating-linear-gradient(135deg,
    transparent 0 3px, var(--rz-primary) 3px 4px); }
.dlg-shell--resizable { position: relative; min-width: 360px; min-height: 280px; }
.dlg-shell--user-sized { height: var(--dlg-height); }

/* Held for the duration of a drag so the pointer does not select text it passes over. */
body.dlg-resizing { cursor: nwse-resize; user-select: none; }

/* The shell is a full-width sheet on phones, where there is nothing to resize it into. */
@media (max-width: 639.98px) {
    .dlg-resize-handle { display: none; }
    .dlg-shell--user-sized { height: 94vh; }
}

/* Focus session (A8) */
.dlg-body--centred { align-items: center; text-align: center; }
.dlg-fs-block { width: 100%; }
.dlg-fs-eyebrow {
    font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--rz-primary); margin-bottom: 4px;
}
.dlg-fs-title { font-size: 16px; font-weight: 700; margin: 0 0 8px; color: var(--rz-text-color); }
.dlg-fs-chips { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.dlg-fs-row { display: flex; gap: 8px; width: 100%; justify-content: center; }
.dlg-fs-controls { display: flex; gap: 10px; width: 100%; justify-content: center; margin-top: 6px; }
.dlg-fs-controls .dlg-btn { min-width: 130px; padding: 10px 20px; font-size: 15px; }
.dlg-footer-left .dlg-fs-clock { font-size: 16px; color: var(--rz-primary); }

/* Tag chips with an inline remove control (A1, A2) */
.dlg-tag-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.dlg-tag-chip-x {
    background: none; border: none; padding: 0 0 0 2px; cursor: pointer;
    color: inherit; font-size: 14px; line-height: 1; opacity: 0.75;
}
.dlg-tag-chip-x:hover { opacity: 1; }
.dlg-tag-add {
    display: inline-flex; align-items: center; gap: 4px;
    border: 1px dashed var(--rz-border-color); background: none;
    border-radius: var(--dlg-radius-pill); padding: 3px 10px;
    color: var(--rz-text-secondary-color); cursor: pointer; font-size: 12px; font-weight: 600;
}
.dlg-tag-add:hover { border-color: var(--rz-primary); color: var(--rz-primary); }
.dlg-tag-add .material-icons-outlined { font-size: 14px; }

/* Section title with a right-aligned pop-out action (Description headers) */
.dlg-section-title--action { display: flex; align-items: center; justify-content: space-between; }

/* Scheduling preferences weekday grid (B4). Seven identical rows: the alignment is the design. */
.dlg-week-grid { display: flex; flex-direction: column; gap: 6px; }
.dlg-week-row {
    display: grid; grid-template-columns: 1fr auto 24px auto; align-items: center; gap: 8px;
}
.dlg-week-row .dlg-input { width: auto; }
.dlg-week-sep { text-align: center; color: var(--rz-text-secondary-color); font-size: 12px; }
.dlg-week-row--off .dlg-input { opacity: 0.5; }

/* Habits (B3). Every colour here is data-driven, supplied as --habit-color. */
.dlg-habit-row { display: flex; align-items: center; gap: 10px; }
.dlg-habit-tile {
    width: 36px; height: 36px; flex: none; border-radius: var(--dlg-radius-sm);
    display: inline-flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--habit-color, var(--rz-primary)) 20%, transparent);
    color: var(--habit-color, var(--rz-primary));
}
.dlg-habit-name { flex: 1; font-size: 14px; font-weight: 600; }
.dlg-habit-time { font-size: 12px; color: var(--rz-text-secondary-color); }
.dlg-habit-edit { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.dlg-habit-edit-top { display: flex; align-items: center; gap: 8px; }
.dlg-habit-time-input { width: 110px; flex: none; }
.dlg-habit-section { font-size: 11px; font-weight: 700; text-transform: uppercase;
                     letter-spacing: 0.05em; color: var(--rz-text-secondary-color); }
.dlg-habit-add { border-top: 1px solid var(--rz-border-color); padding-top: 12px; margin-top: 4px; }

/* Appointment dialog (B1) */
.dlg-duration-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.dlg-duration-label { font-size: 12px; color: var(--rz-text-secondary-color); }
.dlg-accordion { border: 1px solid var(--rz-border-color); border-radius: var(--dlg-radius-sm); overflow: hidden; }
.dlg-accordion + .dlg-accordion { margin-top: 8px; }
.dlg-accordion-head {
    display: flex; align-items: center; gap: 8px; width: 100%;
    padding: 10px 12px; background: var(--rz-base-200); border: none;
    cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 700;
    color: var(--rz-text-color); text-align: left;
}
.dlg-accordion-head .dlg-select-caret { margin-left: auto; }
.dlg-accordion-body { padding: 12px; background: var(--rz-base-background-color); }
/* Notes cards: theme-aware surfaces, replacing the artboards' hard-coded dark cards. */
.dlg-note-card {
    position: relative; background: var(--rz-base-100);
    border: 1px solid var(--rz-border-color);
    border-left: 4px solid var(--rz-info);
    border-radius: var(--dlg-radius-sm); padding: 10px 40px 10px 12px; margin-bottom: 8px;
}
.dlg-note-body { font-size: 13px; line-height: 1.45; color: var(--rz-text-color); }
.dlg-note-remove { position: absolute; top: 6px; right: 6px; }

/* Pantry staples (C8): remove-chips and add-pills must not look alike. */
.dlg-staple-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dlg-staple-suggest {
    display: inline-flex; align-items: center; gap: 4px;
    border: 1px dashed var(--rz-border-color); background: none;
    border-radius: var(--dlg-radius-pill); padding: 4px 10px;
    color: var(--rz-text-secondary-color); cursor: pointer; font-size: 12px; font-weight: 600;
}
.dlg-staple-suggest:hover { border-color: var(--rz-primary); color: var(--rz-primary); }
.dlg-staple-suggest .material-icons-outlined { font-size: 14px; }
.dlg-section-hint--muted { font-size: 11px; font-weight: 500; text-transform: none;
                           color: var(--rz-text-secondary-color); }

/* Staples review (C9): the whole row highlights when ticked. */
.dlg-review-row {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 9px 12px; border: 1px solid var(--rz-border-color);
    border-radius: var(--dlg-radius-sm); background: var(--rz-base-100);
    cursor: pointer; font-size: 14px; transition: 0.12s;
}
.dlg-review-row:hover { border-color: var(--rz-primary); }
.dlg-review-row--on {
    border-color: var(--rz-primary);
    background: color-mix(in srgb, var(--rz-primary) 12%, transparent);
    color: var(--rz-primary); font-weight: 600;
}
.dlg-review-qty { margin-left: auto; font-size: 12px; color: var(--rz-text-secondary-color); }
.dlg-review-list { display: flex; flex-direction: column; gap: 6px; }

/* Grocery list editor (C4): live badge preview. */
.dlg-preview-box {
    display: flex; align-items: center; gap: 10px; padding: 12px;
    border: 1px solid var(--rz-border-color); border-radius: var(--dlg-radius-sm);
    background: var(--rz-base-100);
}
.dlg-preview-badge {
    width: 40px; height: 40px; flex: none; border-radius: var(--dlg-radius-sm);
    display: inline-flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--badge-color, var(--rz-primary)) 20%, transparent);
    color: var(--badge-color, var(--rz-primary));
}
.dlg-preview-name { font-size: 14px; font-weight: 700; }

/* Recipe picker (C3): card grid with a fixed 16:9 thumbnail. */
.dlg-search { position: relative; display: flex; align-items: center; }
.dlg-search .material-icons-outlined { position: absolute; left: 10px; color: var(--rz-text-secondary-color); font-size: 18px; }
.dlg-search .dlg-input { padding-left: 34px; }
.dlg-chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.dlg-chip-btn {
    display: inline-flex; align-items: center; gap: 4px;
    border: 1px solid var(--chip-color, var(--rz-border-color));
    color: var(--chip-color, var(--rz-text-secondary-color));
    background: none; border-radius: var(--dlg-radius-pill);
    padding: 4px 12px; cursor: pointer; font-size: 12px; font-weight: 600;
}
.dlg-chip-btn--on {
    background: color-mix(in srgb, var(--chip-color, var(--rz-primary)) 16%, transparent);
}
.dlg-chip-btn .material-icons-outlined { font-size: 14px; }
.dlg-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.dlg-recipe-card {
    display: flex; flex-direction: column; text-align: left; padding: 0; overflow: hidden;
    border: 1px solid var(--rz-border-color); border-radius: var(--dlg-radius-sm);
    background: var(--rz-base-background-color); cursor: pointer; transition: 0.12s;
}
.dlg-recipe-card:hover { border-color: var(--rz-primary); transform: translateY(-1px); }
.dlg-recipe-card:focus-visible { outline: none; box-shadow: var(--dlg-focus-ring); }
.dlg-recipe-thumb {
    aspect-ratio: 16 / 9; width: 100%; background: var(--rz-base-200);
    display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.dlg-recipe-thumb img { width: 100%; height: 100%; object-fit: cover; }
.dlg-recipe-thumb .material-icons-outlined { font-size: 30px; color: var(--rz-text-disabled-color); }
.dlg-recipe-body { padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; }
.dlg-recipe-title { font-size: 13px; font-weight: 700; color: var(--rz-text-color); }
.dlg-recipe-meta { font-size: 11px; color: var(--rz-text-secondary-color); }

/* Recipe editor (C1) */
.dlg-photo {
    position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden;
    border: 2px dashed var(--rz-border-color); border-radius: var(--dlg-radius-sm);
    background: var(--rz-base-100); display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: 0.12s;
}
.dlg-photo:hover, .dlg-photo--drag { border-color: var(--rz-primary); background: color-mix(in srgb, var(--rz-primary) 8%, transparent); }
.dlg-photo img { width: 100%; height: 100%; object-fit: cover; }
.dlg-photo-placeholder { display: flex; flex-direction: column; align-items: center; gap: 6px;
                         color: var(--rz-text-secondary-color); font-size: 13px; text-align: center; }
.dlg-photo-placeholder .material-icons-outlined { font-size: 32px; }
.dlg-photo-sub { font-size: 11px; color: var(--rz-text-disabled-color); }
.dlg-photo-input { display: none; }
.dlg-photo-actions { display: flex; align-items: center; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.dlg-photo-status { font-size: 12px; color: var(--rz-text-secondary-color); }

.dlg-ing-row { display: grid; grid-template-columns: 64px 72px 1fr 120px 32px; gap: 6px; align-items: center; }
.dlg-step-row { display: grid; grid-template-columns: 28px 1fr 64px 32px; gap: 6px; align-items: start; }
.dlg-step-num {
    width: 24px; height: 24px; border-radius: 50%; display: inline-flex;
    align-items: center; justify-content: center; margin-top: 6px;
    background: var(--rz-primary); color: var(--rz-on-primary); font-size: 12px; font-weight: 700;
}
.dlg-rows { display: flex; flex-direction: column; gap: 6px; }
@media (max-width: 720px) {
    .dlg-ing-row { grid-template-columns: 1fr 1fr; }
    .dlg-step-row { grid-template-columns: 28px 1fr; }
}

/* Recipe import (C2): five entry paths need explicit hierarchy, then a live job list. */
.dlg-import-intro { font-size: 13px; line-height: 1.5; color: var(--rz-text-secondary-color); margin: 0; }
.dlg-import-row { display: flex; gap: 8px; align-items: stretch; }
.dlg-import-row .dlg-input, .dlg-import-row .dlg-textarea { flex: 1; }
.dlg-import-field { position: relative; display: flex; align-items: center; flex: 1; }
.dlg-import-field .material-icons-outlined { position: absolute; left: 10px; font-size: 18px; color: var(--rz-text-secondary-color); }
.dlg-import-field .dlg-input { padding-left: 34px; }
.dlg-import-youtube {
    display: flex; align-items: center; gap: 10px; padding: 10px 12px;
    border: 1px solid var(--rz-border-color); border-radius: var(--dlg-radius-sm);
    background: var(--rz-base-100);
}
.dlg-import-youtube-copy { flex: 1; font-size: 12px; color: var(--rz-text-secondary-color); }

.dlg-job-list { display: flex; flex-direction: column; gap: 6px; }
.dlg-job-row {
    display: grid; grid-template-columns: 1fr 150px 1.4fr; gap: 10px; align-items: center;
    padding: 8px 10px; border: 1px solid var(--rz-border-color);
    border-radius: var(--dlg-radius-sm); background: var(--rz-base-100); font-size: 12px;
}
.dlg-job-head { font-weight: 700; color: var(--rz-text-secondary-color);
                text-transform: uppercase; letter-spacing: 0.05em; font-size: 10px; background: none; border: none; }
.dlg-job-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dlg-job-status { display: flex; align-items: center; gap: 6px; }
.dlg-job-status .material-icons-outlined { font-size: 16px; }
.dlg-job--complete .dlg-job-status { color: var(--rz-success); }
.dlg-job--failed .dlg-job-status { color: var(--rz-danger); }
.dlg-job-detail { display: flex; align-items: center; gap: 8px; }
.dlg-job-detail .dlg-progress-bar { flex: 1; }
.dlg-job-error { color: var(--rz-danger); }
.dlg-job-warn { color: var(--rz-warning); }
.dlg-job-ok { color: var(--rz-success); }
@media (max-width: 640px) { .dlg-job-row { grid-template-columns: 1fr; } }

/* Transparent dismiss layer behind an open select popup. It sits below the popup so option
   clicks land on the option, and above everything else so a click anywhere else closes. */
.dlg-select-backdrop { position: fixed; inset: 0; z-index: 9; background: transparent; }

/* Video category tablets (D1). Driven by --cat-color plus a contrast-computed --cat-ink. */
.dlg-cat-tablet {
    display: inline-flex; align-items: center; gap: 6px;
    border: 1px solid var(--cat-color, var(--rz-border-color));
    background: color-mix(in srgb, var(--cat-color, var(--rz-primary)) 14%, transparent);
    color: var(--cat-color, var(--rz-text-color));
    border-radius: var(--dlg-radius-pill); padding: 5px 12px;
    cursor: pointer; font-size: 12px; font-weight: 600; transition: 0.12s;
}
.dlg-cat-tablet:hover:not(:disabled) { background: var(--cat-color); color: var(--cat-ink, #fff); }
.dlg-cat-tablet--on { background: var(--cat-color); color: var(--cat-ink, #fff); }
.dlg-cat-tablet:disabled { opacity: 0.55; cursor: not-allowed; }
.dlg-cat-count {
    background: color-mix(in srgb, currentColor 20%, transparent);
    border-radius: var(--dlg-radius-pill); padding: 0 6px; font-size: 11px;
}