/* Decorative banner; account controls remain high-contrast and keyboard accessible. */
.branding-plan{margin:24px 0;padding:20px;border:1px solid #c9d9ce;border-radius:10px;background:#f4f8f5}.branding-plan h4,.branding-schedule h4{font-size:18px;color:#254f38;margin:0 0 10px}.branding-plan-controls{display:flex;align-items:end;gap:12px;flex-wrap:wrap}.branding-plan-controls label{display:grid;gap:6px;font-size:14px;font-weight:600}.branding-plan input[type=date],.branding-schedule input[type=date]{font:inherit;font-size:14px;min-height:42px;border:1px solid #bacdbf;border-radius:6px;padding:8px;background:#fff;color:#254f38}.branding-schedule{margin-top:24px}.branding-schedule-item{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;border-bottom:1px solid #dbe5df;padding:14px 0}.branding-schedule-item strong{display:block;overflow-wrap:anywhere}.branding-schedule-item p{font-size:13px;color:#627368;margin:5px 0}.branding-schedule-item>div:last-child{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.branding-schedule-item button{min-height:42px}.branding-inventory-upload{margin-top:20px;padding:18px;background:#f4f8f5;border-radius:10px;border:1px solid #d5e1d7}.branding-inventory-upload label{font-size:14px;font-weight:650;display:block;margin-bottom:8px}.branding-inventory-row{display:flex;justify-content:space-between;gap:14px;font-size:14px;padding:8px 0;border-bottom:1px solid #dce6df}.branding-inventory-row span:first-child{overflow-wrap:anywhere}.branding-inventory-row span:last-child{flex:none;color:#456650}.branding-inventory-upload button{margin-top:12px;min-height:44px}
.branding-retention{padding:16px;margin:16px 0;background:#f1f6f2;border:1px solid #d5e1d7;border-radius:10px}.branding-retention label{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:650;cursor:pointer}.branding-retention input{width:18px;height:18px;accent-color:#214e3b;flex:none}.branding-retention .branding-hint{margin:8px 0 0 28px}.branding-library{margin-top:28px;padding-top:24px;border-top:1px solid #d5e1d7}.branding-library-heading{display:flex;align-items:center;gap:10px}.branding-library h4{font-size:18px;color:#254f38;margin:0}.branding-library-heading>span{padding:3px 9px;border-radius:20px;background:#e7eee8;color:#254f38;font-size:13px}.branding-library-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}.branding-library-card{border:1px solid #d5e1d7;border-radius:10px;padding:12px;min-width:0;background:#fff}.branding-library-card>img,.branding-library-missing{width:100%;height:120px;object-fit:contain;background:#edf3ef;border-radius:6px;display:block;margin-bottom:12px}.branding-library-card>strong{font-size:14px;display:block;overflow-wrap:anywhere}.branding-library-card>p,.branding-library-status{font-size:13px;color:#627368}.branding-library-card>div:last-child{display:flex;gap:12px;align-items:center}.branding-library-card button{min-height:40px}.branding-library-card button:disabled{opacity:.55;cursor:not-allowed}.branding-library-missing{display:flex;align-items:center;justify-content:center;font-size:13px;color:#627368}
/* The header's stacking context must sit above sticky navigation, but below dialogs. */
.branding-devices{display:flex;gap:6px;flex-wrap:wrap;padding:5px;background:#edf3ef;border:1px solid #d5e1d7;border-radius:10px;width:fit-content;margin:18px 0 12px}
.branding-device{border:1px solid transparent;border-radius:7px;padding:10px 18px;min-height:44px;background:transparent;color:#31503e;font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.branding-device[aria-pressed=true]{background:#214e3b;color:#fff;box-shadow:0 1px 3px #12382726}
.branding-device:hover:not([aria-pressed=true]){background:#dce9df}.branding-device:focus-visible{outline:3px solid #518ab2;outline-offset:2px}.branding-device:disabled{opacity:.6;cursor:wait}
.branding-preview-meta{font-size:13px;color:#5b705e;margin:0 0 10px;line-height:1.5}
.branding-preview-stage{padding:22px;background:#eef2ef;border:1px solid #d5e1d7;border-radius:12px;margin-bottom:12px;overflow:hidden}
.branding-preview-stage>.branding-preview{width:100%;margin:0 auto;border:0;border-radius:8px;box-shadow:0 2px 10px #183d2426}
@media(max-width:600px){.branding-preview-stage{padding:12px}.branding-device{padding:10px 12px}.branding-devices{width:100%}.branding-devices>button{flex:1}}
#app-screen.app-starting{visibility:hidden;pointer-events:none}
#loading .startup-error .btn{margin:4px 8px 0 0}
#app-screen>header{position:relative;isolation:isolate;z-index:200;overflow:visible;align-items:center}
#app-screen>header.has-brand-banner{min-height:96px;background:#214e3b}
#app-screen>header>.header-banner{position:absolute;inset:0;overflow:hidden;z-index:-1;pointer-events:none;display:none}
#app-screen>header.has-brand-banner>.header-banner{display:block}
.header-banner::before{content:"";position:absolute;inset:0;background-image:var(--header-banner);background-size:var(--banner-width,100%) var(--banner-height,auto);background-repeat:no-repeat;background-position:var(--banner-x,50%) var(--banner-y,30%)}
#app-screen>header>.header-date{display:inline-flex;align-items:center;align-self:flex-end;flex:0 1 auto;width:fit-content;max-width:100%;background:#fff;color:#214e3b;border:1px solid #ffffff;border-radius:5px;padding:3px 8px;font-size:12px;font-weight:500;line-height:1.35;box-shadow:0 1px 4px #1238271a;text-shadow:none;text-align:left}
.has-brand-banner .header-btn{background:#163b2bed;border-color:#ffffff75;color:#fff}.has-brand-banner .account-menu>summary{background:#163b2bed;border:1px solid #ffffff75}
.has-brand-banner .account-menu>summary:hover,.has-brand-banner .account-menu>summary:focus-visible,.has-brand-banner .account-menu[open]>summary{background:#163b2b;color:#fff}
.account-menu{position:relative}.account-menu>summary{display:flex;align-items:center;gap:12px;padding:8px 12px;border-radius:8px;cursor:pointer;list-style:none;border:1px solid #ffffff35;min-height:44px;color:#fff}.account-menu>summary::-webkit-details-marker{display:none}.account-menu>summary:hover{background:#ffffff12}.account-menu .header-user{display:flex;align-items:flex-start;flex-direction:column;text-align:left;gap:0;font-size:14px;line-height:1.4}.account-menu .header-user b{font-size:14px;color:#fff}.account-menu .header-user span{font-size:12px;color:#dce9df}.account-arrow{font-size:14px;transition:transform .15s}.account-menu[open] .account-arrow{transform:rotate(180deg)}.account-menu-items{position:absolute;right:0;top:calc(100% + 8px);min-width:235px;background:#fff;color:#25372e;border:1px solid #d7e2d6;border-radius:10px;padding:6px;box-shadow:0 10px 28px #102d2633;z-index:210}.account-menu-item{width:100%;border:0;background:none;padding:12px 14px;text-align:left;border-radius:6px;cursor:pointer;color:#2a4c37;font-size:14px;font-weight:550;min-height:44px}.account-menu-item:hover{background:#eef4e9}.account-menu-item.hidden{display:none!important}
.notification-bell{width:44px;height:44px;min-width:44px;justify-content:center;padding:10px;overflow:visible}.notification-bell svg{width:21px;height:21px}.notification-bell .notification-count{position:absolute;right:-7px;bottom:-7px;top:auto;font-size:12px;min-width:24px;height:24px;min-height:24px;padding:0 5px;border:2px solid #fff;background:#dc2626;color:#fff;border-radius:999px;box-shadow:0 1px 3px #4c101035;font-variant-numeric:tabular-nums;white-space:nowrap;line-height:1}
.branding-settings{margin-top:32px;padding-top:24px;border-top:1px solid var(--border);max-width:1000px}.branding-settings h3{font-size:20px;color:#254f38;margin:0 0 8px}.branding-hint{font-size:14px;color:#627368;margin:8px 0 16px}.branding-preview{position:relative;background:#214e3b;min-height:150px;aspect-ratio:5.5;display:flex;align-items:center;justify-content:center;border-radius:10px;overflow:hidden;color:#fff;border:1px solid var(--border)}.branding-preview img{position:absolute;width:100%;height:100%;object-fit:cover;object-position:center 30%}.branding-preview img[hidden],.branding-preview.with-image>span{display:none}.branding-filename{font-size:14px;font-weight:600;margin:10px 0 18px;overflow-wrap:anywhere}.branding-file-label{display:block;font-size:14px;font-weight:600;margin-bottom:6px}.branding-settings input[type=file]{display:block;max-width:100%;font-size:14px}.branding-settings input[type=file]::file-selector-button{border:1px solid #cbd8c8;border-radius:6px;padding:10px 12px;background:#f4f7ee;color:#214e3b;margin-right:10px;cursor:pointer}.branding-buttons{display:flex;gap:10px;flex-wrap:wrap}.branding-buttons .btn{font-size:14px}.branding-buttons [hidden]{display:none}.branding-status{font-size:14px;color:#365a3c;margin:12px 0}.branding-error{color:#9a392e;font-size:14px}
.branding-preview{min-height:0;aspect-ratio:8;isolation:isolate}.branding-preview img{left:var(--banner-x,50%);top:var(--banner-y,30%);width:var(--banner-width,100%);height:var(--banner-height,auto);max-width:none;max-height:none;object-fit:fill;transform:translate(calc(-1 * var(--banner-x,50%)),calc(-1 * var(--banner-y,30%)))}
.branding-frame{border:1px solid var(--border);border-radius:10px;margin:0 0 24px;padding:18px;background:#f7f9f5;min-width:0}.branding-frame[hidden]{display:none}.branding-frame legend{font-size:15px;font-weight:650;color:#254f38;padding:0 6px}.branding-sliders{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.branding-range label{display:flex;justify-content:space-between;gap:10px;font-size:14px;font-weight:600;color:#304839}.branding-range output{font-variant-numeric:tabular-nums;color:#476249;font-weight:500}.branding-range input[type=range]{width:100%;min-height:36px;padding:0;margin:6px 0 0;accent-color:#256346;cursor:pointer}.branding-range input:focus-visible{outline:3px solid #518ab2;outline-offset:2px}.branding-range-ends{display:flex;justify-content:space-between;gap:8px;color:#617265;font-size:12px}.branding-frame .btn-link{margin-top:16px;min-height:36px;font-size:14px}.branding-frame .branding-hint{margin-bottom:0}
@media(max-width:768px){#app-screen>header{flex-direction:column;align-items:stretch;gap:10px}#app-screen>header>.header-date{align-self:flex-start;order:2}#app-screen>header>.header-actions{order:1;width:100%;justify-content:flex-end}}
@media(max-width:760px){#app-screen>header.has-brand-banner{min-height:96px}#app-screen>header .header-actions{gap:14px;padding-bottom:7px}.account-menu .header-user{display:flex}.account-menu .header-user b{font-size:14px}.account-menu>summary{padding:6px 10px}.account-menu-items{right:0;max-width:calc(100vw - 30px);min-width:220px}.branding-preview{min-height:0}.branding-sliders{grid-template-columns:1fr;gap:18px}.branding-buttons>.btn{min-height:44px}}
@media(prefers-reduced-motion:reduce){.account-arrow{transition:none}}
#app-screen>header.has-brand-banner{min-height:var(--header-height,96px)}
.branding-sliders{grid-template-columns:repeat(2,minmax(0,1fr))}@media(max-width:760px){.branding-sliders{grid-template-columns:1fr}.branding-library-grid{grid-template-columns:repeat(auto-fill,minmax(min(220px,100%),1fr))}}
#nav-tabs{background:var(--navigation-bg,#e4eee4);border-bottom-color:var(--navigation-accent,#214e3b)}#nav-tabs>.tab-btn{color:var(--navigation-ink,#000);background:transparent}#nav-tabs>.tab-btn:hover,#nav-tabs>.tab-btn.active{background:var(--navigation-active,#fff);color:var(--navigation-ink,#000)}#nav-tabs>.tab-btn.active{border-bottom-color:var(--navigation-accent,#214e3b)}#nav-tabs>.tab-btn:focus-visible{outline:2px solid var(--navigation-ink,#000);outline-offset:-4px}
.navigation-settings{margin:24px 0;padding:22px 0;border-top:1px solid var(--border)}.navigation-settings h4{font-size:18px;color:#254f38;margin:0}.navigation-preview{display:flex;gap:4px;padding:8px 8px 0;background:var(--navigation-bg,#e4eee4);color:var(--navigation-ink,#000);border-radius:8px;border:1px solid #ccdccc;overflow:auto}.navigation-preview>span{padding:10px 14px;font-size:14px;white-space:nowrap}.navigation-preview>.selected{background:var(--navigation-active,#fff);border-bottom:3px solid var(--navigation-accent,#214e3b);font-weight:650}.navigation-color-controls{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-top:14px;font-size:14px}.navigation-color-controls label{font-weight:600}.navigation-color-controls input[type=color]{width:56px;height:40px;padding:3px;border:1px solid #bdcdbb;border-radius:6px;cursor:pointer;background:#fff}.navigation-color-controls output{font-variant-numeric:tabular-nums;color:#5b705e}.navigation-color-controls .btn-link{min-height:40px;font-size:14px}