/* Shared visual language for administrator-panel illustrations. */
.onz-admin-illustration {
    container: admin-scene / inline-size;
    --admin-ui-accent: #f59e0b;
    --admin-ui-ink: #172d3c;
    --admin-ui-line: #e0e5e6;
    width: 100%;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 18px;
    color: var(--admin-ui-ink);
    background: #f2f5f3;
    box-shadow: 0 28px 65px rgba(0,0,0,.25);
    text-align: left;
}
.onz-admin-illustration__disclaimer { padding: 8px 12px; background: #0b202a; color: #b7c3c8; font-size: 9px; line-height: 1.5; text-align: right; }
.onz-web-shot:has(> .onz-admin-illustration) { transform: none; }
.onz-web-shot:has(> .onz-admin-illustration)::before { display: none; }
.onz-experience-panel.is-desktop .onz-experience-panel__visual:has(> .onz-admin-illustration) { padding: 30px; }
.onz-experience-panel__visual > .onz-admin-illustration { position: relative; z-index: 1; }
.onz-admin-panel-data__screens figure,.onz-accounting-screens figure { display: flex; flex-direction: column; }
.onz-admin-panel-data__screens figure > .onz-web-shot,.onz-accounting-screens figure > .onz-web-shot { flex: 1; display: flex; }
.onz-web-shot--compact > .onz-admin-illustration { display: flex; flex-direction: column; }
.onz-web-shot--compact .onz-admin-illustration__layout { flex: 1; }
.onz-admin-panel-gallery__item figure:has(.onz-admin-illustration) figcaption { position: static; width: fit-content; margin: 10px 0 0 auto; border-radius: 6px; }
.onz-web-shot > .onz-admin-illustration { box-shadow: 0 14px 35px rgba(11,32,42,.12); }
.onz-admin-scene { border: 1px solid var(--admin-ui-line); border-radius: 12px; background: white; overflow: hidden; font-size: 11px; line-height: 1.5; }
.onz-admin-scene strong { color: var(--admin-ui-ink); font-size: 12px; font-weight: 600; line-height: 1.5; }
.onz-admin-scene small { display: block; color: #61727d; font-size: 10px; font-weight: 400; line-height: 1.5; }
.onz-admin-scene__tabs { display: flex; gap: 16px; padding: 14px; border-bottom: 1px solid var(--admin-ui-line); color: #61727d; flex-wrap: wrap; }
.onz-admin-scene__tabs b { color: #995800; border-bottom: 2px solid var(--admin-ui-accent); }
.onz-admin-scene__form { padding: 16px; }
.onz-admin-scene__field { margin-bottom: 12px; min-width: 0; }
.onz-admin-scene__field > strong { display: flex; justify-content: space-between; gap: 6px; margin-top: 5px; padding: 10px; border: 1px solid var(--admin-ui-line); border-radius: 7px; font-size: 11px; }
.onz-admin-scene__pair { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.onz-admin-scene__editor { border: 1px solid var(--admin-ui-line); border-radius: 7px; overflow: hidden; }
.onz-admin-scene__editor > div { display: flex; gap: 14px; padding: 9px 12px; background: #f2f5f3; }
.onz-admin-scene__editor p { padding: 14px; margin: 0; color: #435761; font-size: 12px; line-height: 1.7; }
.onz-admin-scene__setting { display: flex; align-items: center; justify-content: space-between; padding: 17px; gap: 14px; border-bottom: 1px solid var(--admin-ui-line); }
.onz-admin-scene__toggle { display: block; flex: 0 0 28px; width: 28px; height: 16px; border-radius: 10px; background: #c4cdd0; position: relative; }
.onz-admin-scene__toggle::after { content: ''; position: absolute; width: 12px; height: 12px; left: 2px; top: 2px; border-radius: 50%; background: white; }
.onz-admin-scene__toggle.is-on { background: var(--admin-ui-accent); }
.onz-admin-scene__toggle.is-on::after { left: 14px; }
.onz-admin-scene__action { display: flex; width: fit-content; max-width: calc(100% - 28px); gap: 12px; align-items: center; margin: 16px 14px; padding: 10px 14px; border-radius: 7px; background: var(--admin-ui-accent); color: #172d3c; font-size: 11px; font-weight: 600; }
.onz-admin-scene__timeline { margin: 15px 8px; border-left: 1px solid #f3cc83; }
.onz-admin-scene__timeline > div { display: flex; gap: 12px; padding: 10px; }
.onz-admin-scene__timeline i { color: #995800; }
.onz-admin-scene__banner { display: flex; align-items: center; gap: 12px; padding: 18px 14px; background: #fff9ef; border-bottom: 1px solid var(--admin-ui-line); }
.onz-admin-scene__banner > i { color: #995800; font-size: 20px; }
.onz-admin-scene__banner > span { margin-left: auto; font-size: 10px; color: #61727d; }
.onz-admin-scene__matrix > div { display: grid; grid-template-columns: minmax(0,1.6fr) repeat(3,minmax(0,1fr)); align-items: center; gap: 8px; padding: 18px 14px; border-bottom: 1px solid var(--admin-ui-line); }
.onz-admin-scene__matrix > div:first-child { background: #f2f5f3; color: #61727d; }
.onz-admin-scene__matrix i { color: #995800; font-size: 16px; text-align: center; }
.onz-admin-scene__matrix small { text-align: center; }
.onz-admin-scene__note { display: flex; gap: 8px; align-items: center; padding: 16px 14px; margin: 0; color: #61727d; font-size: 10px; line-height: 1.6; }
.onz-admin-scene__note > i { color: #995800; }
.onz-admin-scene__transfer { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 24px 14px; background: #fffaf2; }
.onz-admin-scene__transfer > i { font-size: 30px; color: #995800; }
.onz-admin-scene__mapping { display: grid; grid-template-columns: minmax(0,1fr) 18px minmax(0,1fr) 16px; gap: 8px; align-items: center; padding: 18px 14px; border-top: 1px solid var(--admin-ui-line); }
.onz-admin-scene__mapping > i { color: #995800; }
.onz-admin-scene__secret { margin: 20px 14px 0; padding: 14px; border: 1px solid var(--admin-ui-line); border-radius: 7px; letter-spacing: .2em; font-size: 14px; }
.onz-admin-scene__schedule-row { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; padding: 17px 14px; align-items: center; border-bottom: 1px solid var(--admin-ui-line); }
.onz-admin-scene .is-heading { color: #61727d; font-size: 10px; background: #f2f5f3; }
.onz-admin-scene__calendar { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); padding: 12px; gap: 4px; }
.onz-admin-scene__calendar > b { text-align: center; padding: 5px; }
.onz-admin-scene__calendar > div { min-height: 58px; background: #f2f5f3; border-radius: 5px; padding: 6px; }
.onz-admin-scene__calendar .is-booked { background: #fff0d2; border-left: 2px solid var(--admin-ui-accent); }
.onz-admin-scene__calendar strong { font-size: 9px; }
.onz-admin-scene__calendar small { font-size: 8px; }
.onz-admin-scene__ledger > div { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 14px; padding: 20px 14px; border-bottom: 1px solid var(--admin-ui-line); align-items: center; }
.onz-admin-scene__ledger > div:has(> :nth-child(3)) { grid-template-columns: minmax(0,1fr) auto auto; }
.onz-admin-scene__ledger > div > span:not(:first-child) { font-variant-numeric: tabular-nums; text-align: right; }
.onz-admin-scene__budget-bars { padding: 14px; }
.onz-admin-scene__budget-bars > div { margin-bottom: 12px; }
.onz-admin-scene__budget-bars i { display: block; width: var(--bar); height: 5px; margin-top: 4px; background: var(--admin-ui-accent); border-radius: 3px; }
.onz-admin-scene__search { display: flex; align-items: center; gap: 8px; padding: 16px 14px; color: #61727d; border-bottom: 1px solid var(--admin-ui-line); }
.onz-admin-scene__search > span { display: flex; margin-left: auto; gap: 4px; }
.onz-admin-scene__record { display: grid; grid-template-columns: 28px minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 20px 14px; border-bottom: 1px solid var(--admin-ui-line); }
.onz-admin-scene__record > i { display: grid; place-items: center; width: 28px; height: 32px; color: #995800; background: #fff6e9; border-radius: 7px; font-size: 17px; }
.onz-admin-scene__record small { margin-top: 5px; }
.onz-admin-scene__badge { padding: 5px 7px; border-radius: 6px; background: #fff4df; color: #8a5100; font-size: 9px; }
.onz-admin-illustration * { box-sizing: border-box; }
.onz-admin-illustration strong,.onz-admin-illustration span,.onz-admin-illustration small { overflow-wrap: anywhere; }
@container admin-scene (max-width: 520px) {
    .onz-admin-illustration .onz-admin-illustration__layout { grid-template-columns: 42px minmax(0,1fr); }
    .onz-admin-illustration .onz-admin-illustration__brand { justify-content: center; padding: 14px 0; }
    .onz-admin-illustration__brand b,.onz-admin-illustration__brand small,.onz-admin-illustration__sidebar > p,.onz-admin-illustration__navigation span,.onz-admin-illustration .onz-admin-illustration__identity { display: none; }
    .onz-admin-illustration .onz-admin-illustration__navigation { padding: 16px 3px; }
    .onz-admin-illustration .onz-admin-illustration__navigation > div { justify-content: center; padding: 9px 0; }
    .onz-admin-illustration .onz-admin-illustration__body,.onz-admin-illustration .onz-admin-illustration__toolbar { padding: 12px; }
    .onz-admin-scene__pair { grid-template-columns: minmax(0,1fr); gap: 0; }
    .onz-admin-scene__record { gap: 8px; grid-template-columns: 24px minmax(0,1fr); }
    .onz-admin-scene__record > .onz-admin-scene__badge { grid-column: 2; justify-self: start; }
    .onz-admin-scene__ledger > div { gap: 8px; padding: 15px 10px; font-size: 10px; }
    .onz-admin-scene__ledger strong { font-size: 10px; }
    .onz-admin-scene__matrix > div { padding-inline: 10px; gap: 4px; }
    .onz-admin-scene__matrix strong { font-size: 10px; }
}
.onz-admin-illustration__layout { display: grid; grid-template-columns: 116px minmax(0,1fr); }
.onz-admin-illustration__sidebar { display: flex; flex-direction: column; background: #0b202a; color: #b7c3c8; }
.onz-admin-illustration__brand { min-height: 58px; padding: 14px 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 3px; border-bottom: 1px solid #263842; color: white; }
.onz-admin-illustration__brand b { font-size: 12px; letter-spacing: -.03em; }
.onz-admin-illustration__brand small { width: 100%; padding-left: 18px; color: var(--admin-ui-accent); font-size: 9px; letter-spacing: .08em; }
.onz-admin-illustration__sidebar > p { margin: 21px 12px 10px; font-size: 8px; line-height: 1.5; letter-spacing: .08em; text-transform: uppercase; color: #91a2aa; }
.onz-admin-illustration__navigation { padding: 0 7px; }
.onz-admin-illustration__navigation > div { display: flex; align-items: center; gap: 8px; min-height: 41px; padding: 9px 7px; border-left: 2px solid transparent; border-radius: 7px; }
.onz-admin-illustration__navigation span { font-size: 10px; line-height: 1.35; overflow-wrap: anywhere; }
.onz-admin-illustration__navigation i { font-size: 15px; flex: 0 0 auto; }
.onz-admin-illustration__navigation .is-selected { border-color: var(--admin-ui-accent); background: rgba(245,158,11,.13); color: white; }
.onz-admin-illustration__navigation .is-selected i { color: var(--admin-ui-accent); }
.onz-admin-illustration__identity { margin-top: auto; padding: 18px 11px; display: flex; gap: 7px; align-items: center; }
.onz-admin-illustration__identity > span { padding: 6px; background: #263842; border-radius: 6px; color: white; font-size: 10px; }
.onz-admin-illustration__identity strong,.onz-admin-illustration__identity small { display: block; font-size: 8px; line-height: 1.6; }
.onz-admin-illustration__main { min-width: 0; }
.onz-admin-illustration__toolbar { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 20px; border-bottom: 1px solid var(--admin-ui-line); background: white; font-size: 10px; }
.onz-admin-illustration__toolbar b { margin-inline: 5px; color: var(--admin-ui-accent); }
.onz-admin-illustration__toolbar > i { font-size: 17px; }
.onz-admin-illustration__body { padding: 20px; }
.onz-admin-illustration__scope { display: flex; align-items: center; gap: 6px; color: #61727d; font-size: 9px; }
.onz-admin-illustration__scope i:first-child { color: #b76b00; }
.onz-admin-illustration__title { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 10px 0 18px; }
.onz-admin-illustration__title > strong { font-size: clamp(19px,1.8vw,25px); line-height: 1.1; letter-spacing: -.04em; overflow-wrap: anywhere; }
.onz-admin-illustration__title > span { display: flex; align-items: center; gap: 4px; padding: 9px; border-radius: 6px; background: var(--admin-ui-accent); color: #13232c; font-size: 9px; font-weight: 700; line-height: 1.3; }
.onz-admin-illustration__metrics { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); overflow: hidden; border: 1px solid var(--admin-ui-line); border-radius: 10px; margin-bottom: 15px; background: white; }
.onz-admin-illustration__metrics > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 13px; }
.onz-admin-illustration__metrics > div:first-child { border-right: 1px solid var(--admin-ui-line); border-bottom: 2px solid var(--admin-ui-accent); background: #fff9ef; }
.onz-admin-illustration__metrics span { font-size: 10px; line-height: 1.4; color: #61727d; }
.onz-admin-illustration__metrics strong { font-size: 23px; line-height: 1; }
.onz-admin-illustration__metrics strong small { font-size: 10px; color: #61727d; font-weight: 400; }
.onz-admin-illustration__directory { overflow: hidden; border: 1px solid var(--admin-ui-line); border-radius: 11px; background: white; }
.onz-admin-illustration__filter { display: flex; align-items: center; gap: 8px; padding: 12px; }
.onz-admin-illustration__filter > span { min-width: 0; flex: 1; padding: 7px; display: flex; align-items: center; gap: 6px; border: 1px solid var(--admin-ui-line); border-radius: 5px; color: #61727d; font-size: 9px; }
.onz-admin-illustration__filter > small { display: flex; gap: 5px; align-items: center; font-size: 9px; }
.onz-admin-illustration__columns { display: flex; justify-content: space-between; padding: 9px 13px; border-block: 1px solid var(--admin-ui-line); background: #f2f5f3; font-size: 8px; text-transform: uppercase; letter-spacing: .04em; color: #61727d; }
.onz-admin-illustration__row { display: grid; grid-template-columns: 25px minmax(0,1fr) auto 12px; align-items: center; gap: 9px; padding: 14px 12px; border-bottom: 1px solid var(--admin-ui-line); }
.onz-admin-illustration__row > i:first-child { display: grid; place-items: center; width: 25px; height: 28px; border-radius: 6px; background: #fff6e9; color: #b76b00; font-size: 13px; }
.onz-admin-illustration__row div strong { display: block; font-size: 11px; line-height: 1.3; }
.onz-admin-illustration__row div small { display: block; margin-top: 4px; font-size: 9px; color: #61727d; line-height: 1.3; }
.onz-admin-illustration__row.has-work div small { color: #a35d00; }
.onz-admin-illustration__row > i:last-child { color: #61727d; font-size: 11px; }
.onz-admin-illustration__count { text-align: right; font-size: 14px; font-weight: 600; }
.onz-admin-illustration__count small { display: block; font-size: 8px; font-weight: 400; color: #61727d; }
.onz-admin-illustration__footer { padding: 10px 12px; display: flex; justify-content: space-between; align-items: center; color: #61727d; font-size: 9px; }
.onz-admin-illustration__footer i { color: #b76b00; }
.onz-admin-panel-hero__screen--illustrated figcaption { position: static; margin-top: 14px; padding: 0 4px; background: none; color: rgba(255,255,255,.66); backdrop-filter: none; font-size: 11px; font-weight: 400; line-height: 1.5; }
@media (max-width: 575.98px) {
    .onz-admin-illustration__layout { grid-template-columns: 42px minmax(0,1fr); }
    .onz-admin-illustration__brand { justify-content: center; padding: 14px 0; }
    .onz-admin-illustration__brand b,.onz-admin-illustration__brand small,.onz-admin-illustration__sidebar > p,.onz-admin-illustration__navigation span,.onz-admin-illustration__identity { display: none; }
    .onz-admin-illustration__navigation { padding: 16px 3px; }
    .onz-admin-illustration__navigation > div { justify-content: center; padding: 9px 0; }
    .onz-admin-illustration__body { padding: 12px; }
    .onz-admin-illustration__toolbar { padding-inline: 12px; }
    .onz-admin-illustration__title { gap: 8px; }
    .onz-admin-illustration__title > span { max-width: 96px; padding: 7px; }
    .onz-admin-illustration__metrics > div { padding: 10px; }
    .onz-admin-illustration__row { gap: 6px; grid-template-columns: 23px minmax(0,1fr) auto; padding: 12px 10px; }
    .onz-admin-illustration__row > i:last-child { display: none; }
    .onz-admin-illustration__row div strong { font-size: 10px; }
    .onz-admin-panel-hero__screen--illustrated figcaption { display: block; }
}