.bf-button{min-height:var(--bf-touch-target);border:0;border-radius:var(--bf-radius-control);padding:.75rem 1rem;font:inherit;font-weight:800;cursor:pointer;transition:transform 90ms ease,box-shadow 120ms ease,filter 120ms ease,opacity 120ms ease;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.bf-button:not(:disabled):hover{filter:brightness(.97);box-shadow:0 3px 10px rgba(30,30,25,.12)}.bf-button:not(:disabled):active{transform:translateY(2px) scale(.975);filter:brightness(.9);box-shadow:inset 0 2px 5px rgba(30,30,25,.2)}.bf-button:focus-visible{outline:3px solid color-mix(in srgb,var(--bf-accent) 65%,#000);outline-offset:2px}.bf-button:disabled{cursor:not-allowed;opacity:.62}.bf-button[aria-busy="true"]{position:relative;padding-left:2.7rem}.bf-button[aria-busy="true"]::before{content:"";position:absolute;left:1rem;width:1rem;height:1rem;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:bf-button-spin .65s linear infinite}@keyframes bf-button-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.bf-button{transition:none}.bf-button[aria-busy="true"]::before{animation-duration:1.4s}}.bf-button--primary{background:var(--bf-accent);color:var(--bf-accent-text)}.bf-button--secondary{border:1px solid var(--bf-line);background:var(--bf-surface);color:var(--bf-ink)}.bf-button--danger{background:var(--bf-danger);color:#fff}.bf-button--quiet{background:transparent;color:var(--bf-ink)}.bf-card{border:1px solid var(--bf-line);border-radius:var(--bf-radius-card);background:var(--bf-surface);padding:1rem}.bf-badge{display:inline-flex;align-items:center;min-height:1.75rem;padding:.25rem .625rem;border-radius:.5rem;background:#efeee9;color:var(--bf-ink);font-size:.75rem;font-weight:900}.bf-badge--success{background:#dff2e6;color:var(--bf-success)}.bf-badge--warning{background:#fff0ba;color:#765700}.bf-badge--danger{background:#ffe0d9;color:var(--bf-danger)}.bf-progress{height:.5rem;overflow:hidden;border-radius:999px;background:#ece9e0}.bf-progress>span{display:block;height:100%;border-radius:inherit;background:var(--bf-accent);transition:width 240ms ease}
.routine-runner{margin-top:1rem;padding:1rem;border:1px solid var(--bf-line);border-radius:var(--bf-radius-card);background:var(--bf-surface)}.routine-runner>header{display:flex;justify-content:space-between;align-items:flex-start}.routine-runner h3{margin:.6rem 0}.routine-runner>header>button{width:var(--bf-touch);height:var(--bf-touch);border:0;border-radius:50%;background:#fff;font-size:1.5rem}.routine-runner article{display:grid;grid-template-columns:2.25rem 1fr;gap:.75rem;padding:1rem 0;border-top:1px solid var(--bf-line)}.routine-runner article>span{width:2.25rem;height:2.25rem;border-radius:50%;display:grid;place-items:center;background:#fff;border:2px solid var(--bf-accent);font-weight:900}.routine-runner article.complete>span{background:var(--bf-accent)}.routine-runner article>div{display:grid;gap:.55rem}.routine-runner article p{margin:0;color:var(--bf-muted);line-height:1.45}.routine-runner article input[type=text],.routine-runner article input[type=number]{min-height:var(--bf-touch);padding:.75rem;border:1px solid var(--bf-line);border-radius:var(--bf-radius-control);font:inherit}.routine-photo{min-height:var(--bf-touch);display:grid;place-items:center;border:1px dashed var(--bf-accent);border-radius:var(--bf-radius-control);background:#fff8dc;font-weight:800}.routine-photo input{position:absolute;opacity:0;pointer-events:none}.routine-deviation{justify-self:start;border:0;background:transparent;color:var(--bf-danger);font-weight:800;padding:.5rem 0}
.bf-dialog-backdrop{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:1.25rem;background:rgba(31,30,26,.62);backdrop-filter:blur(3px)}.bf-dialog{display:grid;gap:1.25rem;width:min(100%,34rem);padding:1.5rem;border:2px solid var(--bf-accent);border-radius:1.5rem;background:var(--bf-surface);box-shadow:0 24px 70px rgba(20,19,16,.24)}.bf-dialog-heading span{color:var(--bf-accent-text);font-size:.75rem;font-weight:900;letter-spacing:.12em}.bf-dialog-heading h2{margin:.45rem 0 0;font-size:clamp(1.45rem,5vw,2rem);line-height:1.15}.bf-dialog-heading p{margin:.75rem 0 0;color:var(--bf-muted);line-height:1.5}.bf-dialog textarea{width:100%;min-height:8rem;padding:1rem;border:1px solid var(--bf-line);border-radius:1rem;background:#fff;color:var(--bf-ink);font:inherit;font-size:1rem;line-height:1.5;resize:vertical}.bf-dialog textarea:focus{outline:3px solid color-mix(in srgb,var(--bf-accent) 45%,transparent);border-color:var(--bf-accent)}.bf-dialog-actions{display:grid;grid-template-columns:1fr 1.4fr;gap:.75rem}.bf-dialog-actions button{min-height:3.25rem;padding:.75rem 1rem;border-radius:.9rem;font:inherit;font-weight:900}.bf-dialog-actions .secondary{border:1px solid var(--bf-line);background:#fff;color:var(--bf-ink)}.bf-dialog-actions .primary{border:1px solid var(--bf-accent);background:var(--bf-accent);color:var(--bf-accent-text)}.bf-dialog-actions .primary:disabled{opacity:.45}@media(max-width:440px){.bf-dialog{padding:1.2rem}.bf-dialog-actions{grid-template-columns:1fr}.bf-dialog-actions .primary{grid-row:1}}
.deviations-hub{display:grid;gap:1rem}.deviations-hub>header{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}.deviations-hub>header span{font-size:.8rem;letter-spacing:.12em;font-weight:900;color:var(--bf-accent-text)}.deviations-hub h2{font-size:clamp(2rem,5vw,3.25rem);margin:.45rem 0}.deviations-hub>header p{color:var(--bf-muted);max-width:42rem}.deviation-form{display:grid;gap:1rem}.deviation-form>div{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.deviation-form label{display:grid;gap:.4rem;font-weight:800}.deviation-form input,.deviation-form select,.deviation-form textarea{min-height:var(--bf-touch);border:1px solid var(--bf-line);border-radius:var(--bf-radius-control);background:#fff;padding:.75rem;font:inherit}.deviation-form textarea{min-height:7rem;resize:vertical}.deviation-photo{min-height:6rem;place-items:center;border:2px dashed var(--bf-accent)!important;border-radius:var(--bf-radius-control);background:#fff8dc}.deviation-photo input{position:absolute;opacity:0;pointer-events:none}.deviation-filters{display:flex;padding:.35rem;border-radius:var(--bf-radius-control);background:#e9e6de}.deviation-filters button{flex:1;min-height:var(--bf-touch);border:0;border-radius:.7rem;background:transparent;font-weight:800}.deviation-filters button.active{background:#fff;color:var(--bf-accent-text)}.deviation-list-new{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.deviation-list-new>.bf-card{padding:1.25rem}.deviation-card-top{display:flex;justify-content:space-between;align-items:center}.deviation-card-top>span{font-weight:800;color:var(--bf-muted)}.deviation-list-new h3{font-size:1.35rem;margin:1rem 0 .5rem}.deviation-list-new p,.deviation-list-new small{color:var(--bf-muted);line-height:1.5}.deviation-list-new blockquote{margin:1rem 0 0;padding:.8rem;border-left:4px solid var(--bf-accent);background:#fff8dc}.deviation-actions{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1rem}.deviation-actions button{min-height:var(--bf-touch);border:1px solid var(--bf-line);border-radius:.7rem;background:#fff;padding:.65rem;font-weight:800}.deviation-message{padding:1rem;border-radius:var(--bf-radius-control);background:#fff4c6}@media(max-width:760px){.deviations-hub>header{display:grid}.deviation-form>div,.deviation-list-new{grid-template-columns:1fr}}
.deviation-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem}.deviation-kpis article{display:grid;gap:.25rem;padding:1rem;border:1px solid var(--bf-line);border-radius:var(--bf-radius-control);background:#fff}.deviation-kpis b{font-size:1.75rem;color:var(--bf-accent-text)}.deviation-kpis span{font-size:.85rem;color:var(--bf-muted)}.deviation-action-list{display:grid;gap:.4rem;margin-top:1rem}.deviation-action-list>div{display:flex;justify-content:space-between;align-items:center;gap:.5rem;padding:.65rem;border-radius:.6rem;background:#f4f2ec}.deviation-action-list button{border:0;background:transparent;color:var(--bf-accent-text);font-weight:800}@media(max-width:760px){.deviation-kpis{grid-template-columns:repeat(2,1fr)}}
.deviation-header-actions{display:flex;gap:.5rem;flex-wrap:wrap}
.deviation-media{display:flex;gap:.5rem;overflow:auto;margin-top:1rem}.deviation-media img{width:7rem;height:7rem;object-fit:cover;border-radius:.75rem;border:1px solid var(--bf-line)}
.deviation-assignment{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-top:1rem}.deviation-assignment select,.deviation-assignment input{min-height:var(--bf-touch);border:1px solid var(--bf-line);border-radius:.7rem;background:#fff;padding:.6rem;font:inherit}@media(max-width:760px){.deviation-assignment{grid-template-columns:1fr}}
.deviation-history{margin-top:1rem}.deviation-history summary{cursor:pointer;font-weight:800;color:var(--bf-accent-text)}.deviation-history p{display:flex;justify-content:space-between;gap:.5rem;margin:.5rem 0!important;font-size:.85rem}.deviation-history span{color:var(--bf-muted)}

/* Appskallet er alltid telefonbredt, også i et bredt PC-vindu. */
.deviation-form>div,.deviation-list-new{grid-template-columns:1fr}.deviation-form label,.deviation-list-new>.bf-card{min-width:0}.deviation-form input,.deviation-form select,.deviation-form textarea{width:100%;min-width:0}.deviation-card-top{gap:.5rem;flex-wrap:wrap}.deviation-list-new h3,.deviation-list-new p,.deviation-list-new small{overflow-wrap:anywhere}
.deviation-form-help{margin:0;color:var(--bf-muted);font-size:.88rem}.deviation-search{display:grid;gap:.45rem;font-weight:850}.deviation-search input{width:100%;min-height:var(--bf-touch);border:1px solid var(--bf-line);border-radius:var(--bf-radius-control);background:#fff;padding:.75rem;font:inherit}.deviation-case-number{margin-bottom:.65rem;color:var(--bf-accent-text);font-size:.8rem;font-weight:950;letter-spacing:.08em}.deviation-next-action{border-left:4px solid var(--bf-accent);border-radius:.4rem;background:var(--bf-surface-warm);padding:.75rem;color:var(--bf-ink)!important}.deviation-assignment label{display:grid;gap:.35rem;color:var(--bf-muted);font-size:.8rem;font-weight:850}
.routine-manager{display:grid;gap:1rem}.routine-manager>header{display:flex;justify-content:space-between;align-items:center}.routine-manager>header span{font-size:.8rem;letter-spacing:.12em;font-weight:900;color:var(--bf-accent-text)}.routine-manager h3{margin:.4rem 0;font-size:1.5rem}.routine-manager>label,.routine-manager form label{display:grid;gap:.4rem;font-weight:800}.routine-manager select,.routine-manager input,.routine-manager textarea{min-height:var(--bf-touch);border:1px solid var(--bf-line);border-radius:var(--bf-radius-control);background:#fff;padding:.7rem;font:inherit}.routine-version-bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.8rem;border-radius:var(--bf-radius-control);background:#fff8dc;font-weight:800}.routine-manager .bf-card{padding:1rem}.routine-manager ol{padding-left:1.5rem}.routine-manager li{padding:.8rem 0;border-bottom:1px solid var(--bf-line)}.routine-manager li>div{display:grid;gap:.3rem}.routine-manager li p{margin:0;color:var(--bf-muted)}.routine-manager li small{color:var(--bf-accent-text);font-weight:800}.routine-manager li>button{border:0;background:transparent;color:var(--bf-danger);font-weight:800}.routine-manager form{display:grid;gap:.8rem;margin:1rem 0}.routine-manager textarea{min-height:5rem}
.course-player{display:grid;gap:1rem}.course-player-head{display:flex;align-items:center;justify-content:space-between;gap:1rem}.course-back{border:0;background:transparent;color:var(--bf-accent-text);font:inherit;font-weight:850;padding:.6rem 0;cursor:pointer}.course-hero{display:grid;grid-template-columns:5.5rem 1fr;align-items:center;gap:1rem;padding:1.25rem;border-radius:var(--bf-radius-card);background:linear-gradient(140deg,#292b28,#151613);color:#fff;box-shadow:0 14px 32px rgba(24,25,22,.14)}.course-hero-mark{display:grid;place-items:center;aspect-ratio:1;border-radius:1.2rem;background:var(--bf-accent);color:#2a250f;font-size:1.75rem;font-weight:950}.course-hero span,.lesson-kicker,.understanding-check>span{font-size:.75rem;font-weight:900;letter-spacing:.1em}.course-hero h3{margin:.35rem 0;font-size:clamp(1.55rem,6vw,2.15rem)}.course-hero p{margin:0;color:#deddd7;line-height:1.45}.course-progress-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:.8rem}.course-progress-row strong{font-size:.8rem;color:var(--bf-muted)}.lesson-steps{display:flex;justify-content:center;gap:.6rem}.lesson-steps button{width:2.4rem;height:2.4rem;border:1px solid var(--bf-line);border-radius:50%;background:#fff;color:var(--bf-muted);font:inherit;font-weight:900}.lesson-steps button.active{border:3px solid var(--bf-accent);color:var(--bf-ink)}.lesson-steps button.done{background:var(--bf-accent);border-color:var(--bf-accent);color:#2a250f}.lesson-panel{display:grid;gap:1.15rem;padding:1.25rem;border:1px solid var(--bf-line);border-radius:var(--bf-radius-card);background:#fff}.lesson-kicker{display:flex;justify-content:space-between;color:var(--bf-accent-text)}.lesson-panel>h4{margin:0;font-size:1.6rem;line-height:1.15}.lesson-panel>p{margin:0;color:var(--bf-muted);line-height:1.7;white-space:pre-line}.understanding-check{display:grid;gap:.8rem;padding:1rem;border-radius:var(--bf-radius-control);background:var(--bf-accent-soft);border:1px solid color-mix(in srgb,var(--bf-accent) 60%,#fff)}.understanding-check>span{color:var(--bf-accent-text)}.understanding-check h5{margin:0;font-size:1.05rem;line-height:1.4}.understanding-check small{color:var(--bf-muted);line-height:1.4}.answer-options{display:grid;gap:.55rem}.answer-options label{display:flex;align-items:flex-start;gap:.7rem;padding:.8rem;border:1px solid var(--bf-line);border-radius:.8rem;background:#fff;line-height:1.4;cursor:pointer}.answer-options label.selected{border:2px solid var(--bf-accent);padding:calc(.8rem - 1px);font-weight:800}.answer-options input{width:1.25rem;height:1.25rem;flex:0 0 auto;accent-color:var(--bf-accent)}.lesson-actions{display:flex;justify-content:space-between;gap:.75rem}.course-notice{margin:0;padding:1rem;border-radius:var(--bf-radius-control);background:var(--bf-accent-soft);font-weight:800;line-height:1.4}@media(max-width:520px){.course-hero{grid-template-columns:4.3rem 1fr;padding:1rem}.course-hero-mark{font-size:1.35rem}.course-hero p{font-size:.9rem}.lesson-actions{display:grid;grid-template-columns:1fr}.lesson-actions>span{display:none}.lesson-actions .bf-button{width:100%}}
.lesson-copy{display:grid;gap:1rem}.lesson-copy p{margin:0;line-height:1.7;max-width:76ch}
.lesson-panel{scroll-margin-top:1rem}.course-save-confirmed,.course-save-confirmed:disabled{background:#16864a!important;border-color:#16864a!important;color:#fff!important;opacity:1!important}.course-complete{place-items:center;text-align:center;padding:clamp(2rem,8vw,4rem) 1.25rem;border:1px solid var(--bf-line);border-radius:var(--bf-radius-card);background:#fff;scroll-margin-top:1rem}.course-complete-mark{display:grid;place-items:center;width:5rem;height:5rem;border-radius:50%;background:#16864a;color:#fff;font-size:2.6rem;font-weight:950}.course-complete h3{margin:0;font-size:clamp(1.7rem,6vw,2.4rem)}.course-complete p{max-width:34rem;margin:0;color:var(--bf-muted);font-size:1.05rem;line-height:1.6}.course-complete .bf-button{min-width:min(100%,20rem)}
.operations-modules{display:grid;gap:1rem}.operations-modules>header span{font-size:.8rem;letter-spacing:.12em;font-weight:900;color:var(--bf-accent-text)}.operations-modules>header h2{font-size:clamp(2rem,5vw,3.25rem);margin:.45rem 0}.operations-modules>nav{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem}.operations-modules>nav button{min-height:5.2rem;border:1px solid var(--bf-line);border-radius:var(--bf-radius-control);background:#fff;padding:.8rem;text-align:left;display:grid;gap:.3rem}.operations-modules>nav button.active{background:var(--bf-accent-soft);border-color:var(--bf-accent)}.operations-modules>nav small{color:var(--bf-muted);line-height:1.3}.module-content,.module-list{display:grid;gap:1rem}.module-list{grid-template-columns:repeat(2,minmax(0,1fr))}.module-form{display:grid;gap:1rem}.module-form>div{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.module-form label{display:grid;gap:.4rem;font-weight:800}.module-form input,.module-form select,.module-form textarea{min-height:var(--bf-touch);border:1px solid var(--bf-line);border-radius:var(--bf-radius-control);padding:.75rem;font:inherit;background:#fff}.module-form textarea{min-height:7rem}.module-form .check-line{grid-template-columns:auto 1fr;align-items:center;align-content:center}.module-form .check-line input{width:1.4rem;height:1.4rem;min-height:0;accent-color:var(--bf-accent)}.module-row-head,.request-row,.inline-actions{display:flex;align-items:center;justify-content:space-between;gap:.6rem}.module-list h3{margin:.9rem 0 .4rem}.module-list p,.module-list small{color:var(--bf-muted);line-height:1.5}.module-list .bf-button{margin-top:1rem}.text-button{display:block;border:0;background:none;color:var(--bf-accent-text);font-weight:800;padding:.8rem 0}.request-row{padding:.7rem 0;border-bottom:1px solid var(--bf-line)}.request-row button,.inline-actions a{border:1px solid var(--bf-line);background:#fff;border-radius:.65rem;padding:.7rem;font-weight:800;color:var(--bf-accent-text);text-decoration:none}.error-text{color:#a7352b!important}@media(max-width:800px){.operations-modules>nav{grid-template-columns:1fr 1fr}.operations-modules>nav small{display:none}.module-list,.module-form>div{grid-template-columns:1fr}}

/* Appskallet er alltid telefonbredt, også i et bredt PC-vindu. */
.operations-modules{min-width:0}.operations-modules>nav{grid-template-columns:repeat(2,minmax(0,1fr))}.operations-modules>nav button,.module-content,.module-list,.module-form label{min-width:0}.module-list,.module-form>div{grid-template-columns:1fr}.module-form input,.module-form select,.module-form textarea{width:100%;min-width:0}.module-row-head,.request-row,.inline-actions{flex-wrap:wrap}.module-list h3,.module-list p,.module-list small{overflow-wrap:anywhere}@media(max-width:520px){.operations-modules>nav small{display:none}}
.operations-modules--focused>header{padding:.4rem 0}.operations-modules--focused>header h2{font-size:2rem}
.message-confirmation{display:grid;gap:.75rem;align-items:start;margin-top:1rem}.message-confirmation small{display:block}.message-confirmation .bf-button{width:100%;margin-top:0}@media(min-width:700px){.message-confirmation{grid-template-columns:auto minmax(15rem,max-content);align-items:center}.message-confirmation .bf-button{width:auto}}
.learning-library{gap:1.1rem}.learning-summary{display:grid;grid-template-columns:1fr auto;align-items:center;gap:1rem;padding:1.25rem;border-radius:var(--bf-radius-card);background:linear-gradient(140deg,#292b28,#171815);color:#fff}.learning-summary span{font-size:.75rem;font-weight:900;letter-spacing:.11em;color:#f4c618}.learning-summary h3{margin:.35rem 0;font-size:1.75rem}.learning-summary p{margin:0;color:#deddd7}.learning-summary>strong{display:flex;align-items:center;gap:.55rem;font-size:2.5rem;color:#f4c618}.learning-summary>strong small{font-size:.72rem;line-height:1.3;color:#fff}.course-library{display:grid;gap:1rem}.course-card{display:grid;grid-template-columns:6rem 1fr;gap:1rem;padding:0;overflow:hidden}.course-cover{display:grid;align-content:space-between;padding:1rem;background:linear-gradient(160deg,#f8d735,#e4af00);color:#292711}.course-cover span{font-size:.75rem;font-weight:900;letter-spacing:.08em}.course-cover b{font-size:1.55rem}.course-card--completed .course-cover{background:linear-gradient(160deg,#e7e6df,#cbc9bf)}.course-card-body{display:grid;align-content:start;padding:1rem 1rem 1rem 0;min-width:0}.course-card-body h3{margin:.8rem 0 .35rem}.course-card-body p{margin:0 0 .9rem;color:var(--bf-muted);line-height:1.5}.course-open-button{display:block;width:100%;margin-top:auto;border:0;border-radius:var(--bf-radius-control);background:var(--bf-accent);color:var(--bf-accent-text);padding:.8rem 1rem;text-align:center;text-decoration:none;font:inherit;font-weight:850;cursor:pointer}.course-open-button.secondary{border:1px solid var(--bf-line);background:#fff}.course-completion{display:flex;align-items:baseline;gap:.45rem;margin-top:.5rem}.course-completion strong{font-size:1.25rem}.course-completion span{color:var(--bf-muted);font-size:.85rem}@media(max-width:440px){.course-card{grid-template-columns:4.75rem 1fr}.course-cover{padding:.8rem}.course-cover b{font-size:1.2rem}.course-card-body{padding:.9rem .9rem .9rem 0}.course-card-body .module-row-head{align-items:flex-start}.course-card-body .module-row-head small{font-size:.72rem}}
.course-cover.cover-dark{background:linear-gradient(160deg,#373936,#181916);color:#f8d735}.course-cover.cover-light{background:#fff;color:#8b6500;border-right:1px solid var(--bf-line)}.course-card--completed .course-cover{background:linear-gradient(160deg,#e7e6df,#cbc9bf);color:#45443f}.course-meta{display:flex;flex-wrap:wrap;gap:.4rem .8rem;margin:-.25rem 0 .8rem;color:var(--bf-muted);font-size:.78rem;font-weight:750}

.shift-planner{gap:1rem}.shift-toolbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;border-top:5px solid var(--bf-accent)}.shift-toolbar span{font-size:.75rem;font-weight:900;letter-spacing:.11em;color:var(--bf-accent-text)}.shift-toolbar h3{margin:.3rem 0;font-size:1.55rem}.shift-toolbar p{margin:0;color:var(--bf-muted)}.shift-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.7rem}.shift-summary article{display:grid;gap:.2rem;padding:1rem;border:1px solid var(--bf-line);border-radius:16px;background:#fff}.shift-summary article.needs-attention{border-color:#e3bd31;background:#fff8d5}.shift-summary b{font-size:1.6rem}.shift-summary span{font-size:.8rem;color:var(--bf-muted);font-weight:800}.shift-calendar-card{padding:0;overflow:hidden}.shift-calendar-controls{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem;border-bottom:1px solid var(--bf-line)}.shift-period,.shift-view-tabs{display:flex;align-items:center;gap:.4rem}.shift-period strong{min-width:13rem;text-align:center;text-transform:capitalize}.shift-period button,.shift-view-tabs button{min-height:40px;border:1px solid var(--bf-line);border-radius:10px;background:#fff;padding:.5rem .75rem;color:var(--bf-ink);font:inherit;font-weight:800}.shift-view-tabs{padding:.25rem;border-radius:12px;background:#efede5}.shift-view-tabs button{border:0;background:transparent}.shift-view-tabs button.active{background:#282a27;color:#fff}.shift-week-grid{display:grid;grid-template-columns:repeat(7,minmax(120px,1fr));overflow-x:auto}.shift-week-grid>section{min-height:330px;border-right:1px solid var(--bf-line);background:#fff}.shift-week-grid>section:last-child{border:0}.shift-week-grid>section>header{display:flex;justify-content:space-between;align-items:center;padding:.8rem;border-bottom:1px solid var(--bf-line);text-transform:capitalize}.shift-week-grid>section.today>header{background:#fff3ae}.shift-week-grid>section>header span{font-size:.8rem;font-weight:850;color:var(--bf-muted)}.shift-week-grid>section>header b{display:grid;place-items:center;width:30px;height:30px;border-radius:50%}.shift-week-grid>section.today>header b{background:#282a27;color:#fff}.shift-week-grid>section>div{display:grid;gap:.5rem;padding:.55rem}.shift-week-grid article{display:grid;gap:.2rem;padding:.65rem;border-left:4px solid #282a27;border-radius:8px;background:#f2f1ec}.shift-week-grid article.open{border-left-color:#d5a600;background:#fff6c9}.shift-week-grid article strong{font-size:.78rem}.shift-week-grid article span{font-size:.74rem;font-weight:800}.shift-week-grid article small{font-size:.68rem;color:var(--bf-muted)}.shift-week-grid article button{margin-top:.35rem;border:0;border-radius:7px;background:#f4c618;padding:.45rem;font-weight:850}.empty-day{padding:.5rem;color:#999}.shift-month-grid{display:grid;grid-template-columns:repeat(7,1fr);background:var(--bf-line);gap:1px}.shift-month-grid button{position:relative;min-height:105px;border:0;background:#fff;padding:.65rem;display:grid;align-content:start;justify-items:start;gap:.35rem;color:var(--bf-ink);font:inherit;text-align:left}.shift-month-grid button:hover{background:#fffaf0}.shift-month-grid button.outside{color:#aaa;background:#f5f3ed}.shift-month-grid button.today{box-shadow:inset 0 0 0 3px #f4c618}.shift-month-grid button>span{font-weight:900}.shift-month-grid button>b{font-size:.74rem}.shift-month-grid button>small{color:#aaa}.shift-month-grid button>em{padding:.2rem .35rem;border-radius:6px;background:#fff0a6;color:#725500;font-size:.67rem;font-style:normal;font-weight:850}.shift-list-view{display:grid}.shift-list-view article{display:grid;grid-template-columns:8rem 1fr auto;align-items:center;gap:1rem;padding:1rem 1.2rem;border-bottom:1px solid var(--bf-line)}.shift-list-view article:last-child{border:0}.shift-list-view time{font-weight:850;text-transform:capitalize}.shift-list-view article>div{display:grid;gap:.2rem}.shift-list-view article span{color:var(--bf-muted);font-size:.84rem}.shift-create-card{border-top:5px solid #282a27}.shift-detail-list{display:none}
.employee-shift-scope{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:6px;border-radius:14px;background:#efede5}.employee-shift-scope button{min-height:48px;border:0;border-radius:10px;background:transparent;color:var(--bf-muted);font:inherit;font-weight:850}.employee-shift-scope button.active{background:#fff;color:var(--bf-accent-text);box-shadow:0 2px 8px rgba(40,42,39,.1)}.shift-week-grid article.my-shift{box-shadow:inset 0 0 0 2px #f4c618}.shift-week-grid article.coworker-shift{opacity:.86}
@media(max-width:900px){.shift-toolbar,.shift-calendar-controls{display:grid}.shift-summary{grid-template-columns:1fr 1fr}.shift-calendar-controls{align-items:stretch}.shift-period{justify-content:space-between}.shift-period strong{min-width:0}.shift-view-tabs button{flex:1}.shift-month-grid button{min-height:82px}.shift-month-grid button>b{font-size:.65rem}.shift-list-view article{grid-template-columns:1fr auto}.shift-list-view time{grid-column:1/-1}.shift-detail-list{display:grid}}
@media(max-width:520px){.shift-summary{grid-template-columns:1fr 1fr}.shift-week-grid{grid-template-columns:repeat(7,minmax(148px,1fr))}.shift-month-grid button{min-height:62px;padding:.4rem}.shift-month-grid button>b{display:none}.shift-list-view article{padding:.85rem}.shift-toolbar .bf-button{width:100%}}

.shift-week-grid article>em{justify-self:start;padding:.18rem .35rem;border-radius:5px;background:#e4e2da;color:#4d4b44;font-size:.62rem;font-style:normal;font-weight:900;text-transform:uppercase;letter-spacing:.03em}.shift-week-grid article.shift-early{border-left-color:#d7a900}.shift-week-grid article.shift-middle{border-left-color:#5c7f67}.shift-week-grid article.shift-evening{border-left-color:#3f4350}.month-shift-counts{width:100%;display:grid;gap:.2rem}.month-shift-counts b{padding:.18rem .3rem;border-radius:5px;font-size:.65rem}.month-shift-counts .early{background:#fff0a6;color:#725500}.month-shift-counts .middle{background:#e1eee4;color:#285338}.month-shift-counts .evening{background:#e5e6eb;color:#353946}
.shift-editor-actions{display:flex!important;gap:12px;flex-wrap:wrap}.shift-editor-actions>*{flex:1 1 180px}
.task-standards{margin-top:1rem}.task-standards-head{display:flex;justify-content:space-between;gap:1rem;align-items:flex-start}.task-standards-head>div>span{font-size:.75rem;font-weight:800;letter-spacing:.12em;color:var(--bf-accent-text)}.task-standards-head h3{margin:.25rem 0}.task-standards-head p{margin:.25rem 0;color:var(--bf-muted)}.standards-list,.exemption-list{display:grid;gap:.65rem;margin-top:1rem}.standards-list article,.exemption-list article{display:flex;justify-content:space-between;gap:1rem;align-items:center;padding:.9rem;border:1px solid var(--bf-line);border-radius:1rem;background:var(--bf-surface)}.standards-list article.mandatory{border-color:var(--bf-accent)}.standards-list b{display:block;margin:.35rem 0}.standards-list small{color:var(--bf-muted)}.standard-badges{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}.standard-switch{display:grid;justify-items:center;gap:.25rem;font-size:.75rem}.standard-switch input{width:1.25rem;height:1.25rem;accent-color:var(--bf-accent)}.standard-footnote{color:var(--bf-muted);font-size:.85rem}.standards-form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem;margin-top:1rem}.standards-form label{display:grid;gap:.3rem;font-weight:700}.standards-form input:not([type=checkbox]),.standards-form select{width:100%;padding:.75rem;border:1px solid var(--bf-line);border-radius:.75rem;background:white}.standards-form .standard-check{display:flex;align-items:center}.standard-check input{width:1.2rem;height:1.2rem;accent-color:var(--bf-accent)}.exemption-list article>div:last-child{display:flex;gap:.5rem}.exemption-list button,.standards-list button{border:1px solid var(--bf-accent);background:white;color:var(--bf-accent-text);border-radius:.7rem;padding:.55rem .75rem;font-weight:750}@media(max-width:760px){.standards-form{grid-template-columns:1fr}.standards-list article,.exemption-list article{align-items:flex-start;flex-direction:column}.task-standards-head{flex-direction:column}.exemption-list article>div:last-child{width:100%}}
.pilot-readiness{display:grid;gap:1rem;border:2px solid var(--bf-accent)}.pilot-readiness>header{display:flex;justify-content:space-between;gap:1rem;align-items:flex-start}.pilot-readiness>header span:first-child{font-size:.75rem;font-weight:900;letter-spacing:.12em;color:var(--bf-accent-text)}.pilot-readiness h3{font-size:1.6rem;margin:.35rem 0}.pilot-readiness header p,.pilot-actions p{color:var(--bf-muted)}.pilot-checks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.65rem}.pilot-checks article{padding:.8rem;border:1px solid var(--bf-line);border-radius:var(--bf-radius-control);display:grid;gap:.2rem}.pilot-checks strong{font-size:1.25rem}.pilot-checks small{font-weight:800}.pilot-checks .ready small{color:var(--bf-success)}.pilot-checks .missing{background:#fff8dc}.pilot-checks .missing small{color:var(--bf-accent-text)}.pilot-actions{display:flex;align-items:center;gap:1rem}@media(max-width:700px){.pilot-checks{grid-template-columns:repeat(2,1fr)}.pilot-readiness>header,.pilot-actions{flex-direction:column}}
.operational-report,.chain-operating-report{display:grid;gap:1rem}.operational-report header span,.chain-operating-report header span{font-size:.75rem;font-weight:900;letter-spacing:.12em;color:var(--bf-accent-text)}.operational-report h3,.chain-operating-report h3{margin:.35rem 0;font-size:1.5rem}.operational-report header p{margin:.25rem 0 0;color:var(--bf-muted)}.report-kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.65rem}.report-kpi{grid-column:span 2;display:grid;gap:.35rem;min-width:0;padding:.85rem;text-align:left;color:var(--bf-ink);font:inherit;border:1px solid var(--bf-line);border-radius:var(--bf-radius-control);background:#fff}.report-kpi:nth-child(n+4){grid-column:span 3}.report-kpis button.report-kpi{cursor:pointer;transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease}.report-kpis button.report-kpi:hover{border-color:var(--bf-accent);box-shadow:0 8px 20px rgba(35,34,29,.08);transform:translateY(-1px)}.report-kpis button.report-kpi:focus-visible{outline:3px solid var(--bf-accent);outline-offset:2px}.report-kpis strong{font-size:1.35rem}.report-kpis small{color:var(--bf-muted)}.report-kpis em{margin-top:.2rem;color:var(--bf-accent-text);font-size:.82rem;font-style:normal;font-weight:800}.chain-report-table{overflow:auto}.report-row{min-width:680px;display:grid;grid-template-columns:1.5fr repeat(5,1fr);gap:.7rem;padding:.8rem;border-bottom:1px solid var(--bf-line)}.report-row.heading{background:var(--bf-surface-warm);border-radius:.6rem;font-size:.8rem}.report-row span{color:var(--bf-muted)}@media(max-width:700px){.report-kpis{grid-template-columns:1fr 1fr}.report-kpi,.report-kpi:nth-child(n+4){grid-column:span 1}.report-kpi:last-child:nth-child(odd){grid-column:1/-1}}
.course-studio{display:grid;gap:1.2rem}.studio-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}.studio-heading span{font-size:.75rem;font-weight:900;letter-spacing:.11em;color:var(--bf-accent-text)}.studio-heading h3{margin:.35rem 0;font-size:1.6rem}.studio-heading p{margin:0;color:var(--bf-muted)}.ai-course-draft{display:grid;gap:.65rem;padding:1rem;border-radius:var(--bf-radius-control);background:#292b28;color:#fff}.ai-course-draft p{margin:0;color:#ddd;line-height:1.45}.ai-course-draft textarea{min-height:6rem;border:1px solid #5a5b57;border-radius:var(--bf-radius-control);background:#fff;color:var(--bf-ink);padding:.8rem;font:inherit}.studio-fields,.option-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem}.studio-modules{display:grid;gap:1rem}.studio-modules fieldset{display:grid;gap:.75rem;border:1px solid var(--bf-line);border-radius:var(--bf-radius-card);padding:1rem}.studio-modules legend{padding:0 .5rem;font-weight:900;color:var(--bf-accent-text)}.studio-remove{justify-self:start;border:0;background:none;color:#a7352b;font:inherit;font-weight:800}.studio-actions{display:flex;justify-content:flex-end;gap:.75rem}.studio-preview{display:grid;gap:.8rem;padding:1.25rem;border-radius:var(--bf-radius-card);background:#f8d735}.studio-preview.cover-dark{background:#292b28;color:#fff}.studio-preview.cover-light{background:#fff;border:1px solid var(--bf-line)}.studio-preview>span{font-size:.75rem;font-weight:900;letter-spacing:.1em}.studio-preview>h3{font-size:1.8rem;margin:0}.studio-preview>p{margin:0}.studio-preview article{padding:1rem;border-radius:var(--bf-radius-control);background:rgba(255,255,255,.9);color:var(--bf-ink)}.studio-preview article h4{margin:.35rem 0}.studio-preview article p{line-height:1.5}.studio-notice{padding:1rem;border-radius:var(--bf-radius-control);background:var(--bf-accent-soft);font-weight:800}@media(max-width:620px){.studio-fields,.option-grid{grid-template-columns:1fr}.studio-actions{display:grid}.studio-actions .bf-button{width:100%}}

/* Course studio owns its form geometry. This prevents generic checkbox rules
   in the chain dashboard from shrinking ordinary text fields on mobile. */
.course-studio {
  display: grid;
  gap: 1.35rem;
  padding: clamp(1rem, 3vw, 1.6rem);
  border-top: 5px solid var(--bf-accent);
  box-shadow: 0 14px 34px rgba(40, 42, 39, 0.06);
}
.course-studio .studio-heading {
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--bf-line);
}
.course-studio .studio-heading-actions { display: grid; justify-items: end; gap: 0.7rem; }
.course-studio .course-editor-intro { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 1.15rem; border: 1px solid #e1c765; border-radius: 16px; background: #fff8d7; }
.course-studio .course-editor-intro span { color: var(--bf-accent-text); font-size: 0.75rem; font-weight: 900; letter-spacing: 0.1em; }
.course-studio .course-editor-intro h4 { margin: 0.25rem 0; font-size: 1.25rem; }
.course-studio .course-editor-intro p { margin: 0; color: var(--bf-muted); }
.course-studio .studio-heading h3 { font-size: clamp(1.6rem, 4vw, 2rem); }
.course-studio > .chain-form { gap: 1.15rem; }
.course-studio > .chain-form > label,
.course-studio .studio-fields label,
.course-studio .studio-modules label {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: stretch !important;
  gap: 0.45rem;
  color: var(--bf-ink);
  font-size: 0.95rem;
  font-weight: 850;
}
.course-studio input:not([type="checkbox"]),
.course-studio select,
.course-studio textarea {
  box-sizing: border-box;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 52px !important;
  border: 1px solid #d8cfb6 !important;
  border-radius: 14px !important;
  background: #fff !important;
  color: var(--bf-ink) !important;
  padding: 0.8rem 0.9rem !important;
  font: inherit !important;
  line-height: 1.45;
}
.course-studio input:not([type="checkbox"]):focus,
.course-studio select:focus,
.course-studio textarea:focus {
  outline: 3px solid rgba(244, 198, 24, 0.3);
  border-color: #b68a00 !important;
}
.course-studio textarea { resize: vertical; min-height: 112px !important; }
.course-studio > .chain-form > label > textarea { min-height: 96px !important; }
.course-studio .ai-course-draft {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.75rem 1rem;
  padding: 1.15rem;
  border-radius: 18px;
}
.course-studio .ai-course-draft > b,
.course-studio .ai-course-draft > p { grid-column: 1 / -1; }
.course-studio .ai-course-draft > b { font-size: 1.15rem; }
.course-studio .ai-course-draft textarea { min-height: 112px !important; border-color: #5a5b57 !important; }
.course-studio .ai-course-draft .bf-button { align-self: end; min-width: 180px; }
.course-studio .studio-fields {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
}
.course-studio .chain-check {
  display: flex !important;
  grid-template-columns: none !important;
  align-items: center !important;
  gap: 0.75rem;
  padding: 0.8rem 1rem;
  border: 1px solid var(--bf-line);
  border-radius: 14px;
  background: #fffaf0;
  font-size: 1rem;
}
.course-studio .chain-check input[type="checkbox"] {
  flex: 0 0 auto;
  width: 1.45rem !important;
  height: 1.45rem !important;
  min-height: 1.45rem !important;
}
.course-studio .studio-modules { gap: 1.35rem; }
.course-studio .studio-modules fieldset {
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1rem 1.15rem;
  border-top: 4px solid var(--bf-accent);
  background: #fffdf8;
  padding: 1.2rem;
}
.course-studio .studio-modules legend {
  padding: 0 0.7rem;
  font-size: 1.2rem;
  font-weight: 950;
}
.course-studio .studio-modules fieldset > label:nth-of-type(1),
.course-studio .studio-modules fieldset > label:nth-of-type(2),
.course-studio .studio-modules .option-grid,
.course-studio .studio-modules .studio-remove { grid-column: 1 / -1; }
.course-studio .studio-modules fieldset > label:nth-of-type(2) textarea { min-height: 150px !important; }
.course-studio .option-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
  padding: 1rem;
  border-radius: 16px;
  background: #f4f2eb;
}
.course-studio .studio-actions { flex-wrap: wrap; padding-top: 0.25rem; }
@media (max-width: 760px) {
  .course-studio .studio-heading { display: grid; }
  .course-studio .studio-heading-actions { justify-items: stretch; }
  .course-studio .studio-heading-actions .bf-button { width: 100%; }
  .course-studio .course-editor-intro { display: grid; }
  .course-studio .studio-fields,
  .course-studio .studio-modules fieldset,
  .course-studio .option-grid { grid-template-columns: minmax(0, 1fr); }
  .course-studio .studio-modules fieldset > * { grid-column: 1 !important; }
  .course-studio .ai-course-draft { grid-template-columns: 1fr; }
  .course-studio .ai-course-draft .bf-button { width: 100%; min-width: 0; }
  .course-studio .studio-actions { display: grid; }
  .course-studio .studio-actions .bf-button { width: 100%; }
  .course-studio input:not([type="checkbox"]),
  .course-studio select { min-height: 56px !important; }
  .course-studio textarea { min-height: 128px !important; }
}
@media (max-width: 420px) {
  .course-studio { padding: 0.9rem; }
  .course-studio .studio-modules fieldset { padding: 1rem 0.85rem; }
  .course-studio .studio-heading .bf-badge { justify-self: start; }
}
.published-courses {
  display: grid;
  gap: .65rem;
  padding: 1rem;
  border: 1px solid var(--bf-line);
  border-radius: var(--bf-radius-card);
  background: #fff;
}
.published-courses > div,
.published-courses article,
.published-courses article span { display: flex; gap: .5rem; }
.published-courses > div { justify-content: space-between; }
.published-courses > div small,
.published-courses article small { color: var(--bf-muted); }
.published-courses article {
  align-items: center;
  justify-content: space-between;
  padding-top: .65rem;
  border-top: 1px solid var(--bf-line);
}
.published-courses article span { flex-direction: column; }
@media (max-width: 620px) {
  .published-courses > div,
  .published-courses article { align-items: stretch; flex-direction: column; }
}
.workflow-notifications{margin:0 0 18px;background:#fff;border:1px solid var(--line,#dfd8c8);border-left:5px solid var(--accent,#f8ca12);border-radius:16px;overflow:hidden}.workflow-notifications summary{cursor:pointer;list-style:none;display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:center;padding:14px 16px}.workflow-notifications summary>span{font-size:12px;letter-spacing:.12em;font-weight:900;color:var(--gold,#9b6d00)}.workflow-notifications summary>b{grid-column:1;font-size:16px}.workflow-notifications summary>span:last-child{grid-column:2;grid-row:1/3}.workflow-notifications>div{border-top:1px solid var(--line,#dfd8c8)}.workflow-notifications article{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:13px 16px;border-bottom:1px solid var(--line,#dfd8c8)}.workflow-notifications article:last-child{border-bottom:0}.workflow-notifications article>span{display:grid;gap:4px}.workflow-notifications small{color:#74746d;font-size:14px}.workflow-notifications article>div{display:flex;gap:8px;align-items:center}.workflow-notifications article>div>button:last-child{border:0;background:transparent;color:#6d5100;font-weight:800;white-space:nowrap}@media(max-width:700px){.workflow-notifications article{align-items:flex-start;flex-direction:column}.workflow-notifications article>div{width:100%;justify-content:flex-end}}
.chain-user-admin{display:grid;gap:1rem}.chain-user-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.8rem}.chain-user-summary .bf-card{padding:1rem;border-top:4px solid var(--bf-accent);display:grid;gap:.3rem}.chain-user-summary b{font-size:2rem}.chain-user-summary span{color:var(--bf-muted);font-weight:800}.chain-user-scope{display:flex;gap:.5rem;padding:.4rem;border-radius:14px;background:#ebe8df;overflow:auto}.chain-user-scope button{min-height:46px;padding:.65rem 1rem;border:0;border-radius:10px;background:transparent;white-space:nowrap;font:inherit;font-weight:850;color:var(--bf-muted);cursor:pointer}.chain-user-scope button.active{background:#282a27;color:#fff}.chain-user-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);gap:1rem}.chain-user-grid>.bf-card{padding:1.2rem}.chain-user-grid header{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}.chain-user-grid header span{font-size:.76rem;letter-spacing:.1em;font-weight:900;color:var(--bf-accent-text)}.chain-user-grid h3{margin:.3rem 0 1rem}.chain-member-list article{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(160px,auto) auto;gap:.7rem;align-items:center;padding:.85rem 0;border-top:1px solid var(--bf-line)}.chain-member-list article.inactive{opacity:.6}.chain-member-avatar{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#fff1a8;font-weight:900}.chain-member-name{display:grid;gap:.2rem;min-width:0}.chain-member-name small{color:var(--bf-muted);overflow:hidden;text-overflow:ellipsis}.chain-member-list select,.chain-access-button,.chain-invite-form input,.chain-invite-form select{min-height:46px;border:1px solid var(--bf-line);border-radius:10px;background:#fff;padding:.65rem .75rem;font:inherit}.chain-member-list select,.chain-access-button{font-weight:800}.chain-access-button{color:#9d3028;cursor:pointer}.chain-access-button:disabled{color:var(--bf-muted);cursor:not-allowed}.chain-invite-form{display:grid;gap:.8rem}.chain-invite-form p,.chain-invite-form small{margin:0;color:var(--bf-muted)}.chain-invite-form label{display:grid;gap:.35rem;font-weight:800}.chain-invitation-list{margin-top:1.25rem}.chain-invitation-list article{display:flex;justify-content:space-between;gap:.7rem;align-items:center;padding:.75rem 0;border-top:1px solid var(--bf-line)}.chain-invitation-list article>div{display:grid;gap:.2rem;min-width:0}.chain-invitation-list small{color:var(--bf-muted)}.chain-invitation-list button{border:0;background:transparent;color:#9d3028;font:inherit;font-weight:850;cursor:pointer}.chain-user-notice{position:sticky;bottom:1rem;margin:0;padding:.9rem 1rem;border-radius:12px;background:#282a27;color:#fff;box-shadow:0 8px 25px rgba(40,42,39,.2)}@media(max-width:900px){.chain-user-summary{grid-template-columns:1fr 1fr}.chain-user-grid{grid-template-columns:1fr}}@media(max-width:600px){.chain-user-summary{grid-template-columns:1fr 1fr}.chain-member-list article{grid-template-columns:auto 1fr}.chain-member-list select,.chain-access-button{grid-column:2;width:100%}}
.security-readiness{display:grid;gap:1rem}.security-check-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.8rem}.security-check-grid>.bf-card{padding:1rem;border-top:4px solid var(--bf-accent);display:grid;gap:.65rem;align-content:start}.security-check-grid span{font-weight:900}.security-check-grid small{color:var(--bf-muted)}.security-columns{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.security-columns>.bf-card{padding:1.2rem}.security-columns h3{margin:0 0 .5rem}.security-columns p{color:var(--bf-muted);line-height:1.5}.security-columns form{display:grid;gap:.75rem}.security-columns label{display:grid;gap:.35rem;font-weight:800}.security-columns input,.security-columns select,.security-columns textarea{min-height:46px;border:1px solid var(--bf-line);border-radius:10px;background:#fff;padding:.7rem;font:inherit}.security-columns textarea{min-height:96px}.security-event-list article{display:grid;gap:.25rem;padding:.8rem 0;border-top:1px solid var(--bf-line)}.security-event-list small{color:var(--bf-muted)}.security-notice{padding:.9rem 1rem;border-radius:12px;background:#282a27;color:#fff}@media(max-width:800px){.security-check-grid{grid-template-columns:1fr 1fr}.security-columns{grid-template-columns:1fr}}
.chain-dashboard{display:grid;gap:1.25rem;margin-top:1.5rem}.chain-dashboard-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;padding-bottom:.75rem;border-bottom:1px solid var(--bf-line)}.chain-dashboard-heading span,.chain-work-queue>header span{font-size:.78rem;letter-spacing:.12em;font-weight:900;color:var(--bf-accent-text)}.chain-dashboard-heading h2{font-size:clamp(2rem,4vw,3rem);line-height:1.05;margin:.45rem 0}.chain-dashboard-heading p,.chain-work-queue>header p{margin:.25rem 0 0;color:var(--bf-muted)}.chain-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.8rem}.chain-kpis article{position:relative;overflow:hidden;min-height:142px;background:#fff;color:var(--bf-ink);border:1px solid var(--bf-line);border-top:5px solid var(--bf-accent);border-radius:var(--bf-radius-card);padding:1.15rem;display:grid;align-content:start;gap:.35rem;box-shadow:0 10px 28px rgba(40,42,39,.05)}.chain-kpis article:after{content:"";position:absolute;right:-25px;bottom:-38px;width:95px;height:95px;border-radius:50%;background:#fff5bd}.chain-kpis b{position:relative;z-index:1;font-size:2.25rem;line-height:1;color:var(--bf-ink)}.chain-kpis span{position:relative;z-index:1;font-size:.93rem;font-weight:850}.chain-kpis small{position:relative;z-index:1;color:var(--bf-muted);font-size:.78rem}.chain-work-queue{padding:1.25rem 1.4rem;border-top:5px solid var(--bf-accent)}.chain-work-queue>header{display:flex;justify-content:space-between;gap:1rem;align-items:flex-start;padding-bottom:1rem;border-bottom:1px solid var(--bf-line)}.chain-work-queue h3{font-size:1.45rem;margin:.35rem 0}.chain-store-list article{display:grid;grid-template-columns:1fr auto;gap:.5rem 1rem;padding:1rem 0;border-bottom:1px solid var(--bf-line)}.chain-store-list article:last-child{border:0}.chain-store-list div{display:grid;gap:.25rem}.chain-store-list small{color:var(--bf-muted)}.chain-store-list .bf-progress{grid-column:1/-1}.chain-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.chain-form{display:grid;gap:.9rem}.chain-form label{display:grid;gap:.35rem;font-weight:800}.chain-form input,.chain-form select,.chain-form textarea{min-height:var(--bf-touch);border:1px solid var(--bf-line);border-radius:var(--bf-radius-control);padding:.7rem;font:inherit}.chain-form textarea{min-height:7rem}.chain-form fieldset{display:grid;gap:.55rem;border:1px solid var(--bf-line);border-radius:var(--bf-radius-control);padding:1rem}.chain-form fieldset label,.chain-check{grid-template-columns:auto 1fr;align-items:center}.chain-form fieldset input,.chain-check input{min-height:0;width:1.2rem;height:1.2rem;accent-color:var(--bf-accent)}.chain-publications{display:grid;gap:.8rem}.chain-publications article{display:grid;gap:.45rem;border-bottom:1px solid var(--bf-line);padding:.5rem 0 1rem}.chain-publications p,.chain-publications small{margin:0;color:var(--bf-muted)}.chain-pilot-drawer{border:1px solid var(--bf-line);border-radius:var(--bf-radius-card);background:#fff}.chain-pilot-drawer>summary{min-height:76px;padding:1rem 1.25rem;display:flex;justify-content:space-between;align-items:center;gap:1rem;cursor:pointer;list-style:none}.chain-pilot-drawer>summary::-webkit-details-marker{display:none}.chain-pilot-drawer>summary span:first-child{display:grid;gap:.25rem}.chain-pilot-drawer>summary small{color:var(--bf-muted);font-weight:500}.chain-pilot-drawer>summary span:last-child{font-size:1.5rem;color:var(--bf-accent-text)}.chain-pilot-drawer[open]>summary span:last-child{transform:rotate(45deg)}.chain-pilot-drawer .pilot-readiness{margin:0 1rem 1rem}.chain-dashboard>.chain-operating-report{order:0}@media(max-width:800px){.chain-dashboard{gap:1rem}.chain-dashboard-heading,.chain-work-queue>header{display:grid}.chain-kpis{grid-template-columns:1fr 1fr}.chain-kpis article{min-height:128px}.chain-grid{grid-template-columns:1fr}}@media(max-width:520px){.chain-kpis{grid-template-columns:1fr}.chain-kpis article{min-height:112px}.chain-pilot-drawer>summary small{display:none}}

.chain-dashboard-shell{width:min(1540px,100%);margin:0 auto;display:grid;grid-template-columns:260px minmax(0,1fr);gap:1.5rem;align-items:start}.chain-dashboard-shell>.chain-dashboard{min-width:0;margin-top:0}.chain-sidebar{position:sticky;top:1rem;min-height:calc(100vh - 2rem);padding:1.15rem;background:#282a27;color:#fff;border-radius:22px;display:flex;flex-direction:column;gap:1.25rem;box-shadow:0 18px 48px rgba(40,42,39,.14)}.chain-sidebar-context{padding:.8rem .75rem 1rem;border-bottom:1px solid rgba(255,255,255,.16);display:grid;gap:.25rem}.chain-sidebar-context small{font-size:.74rem;letter-spacing:.12em;color:#f4c618;font-weight:900}.chain-sidebar-context strong{font-size:1.15rem}.chain-sidebar-context span{font-size:.82rem;color:#c9c9c4}.chain-sidebar nav{display:grid;gap:.35rem}.chain-sidebar nav button{position:relative;min-height:50px;width:100%;padding:.7rem .8rem;border:0;border-radius:12px;background:transparent;color:#fff;display:grid;grid-template-columns:24px 1fr auto;gap:.65rem;align-items:center;text-align:left;font:inherit;font-weight:800;cursor:pointer}.chain-sidebar nav button:hover{background:rgba(255,255,255,.08)}.chain-sidebar nav button.is-active{background:#f4c618;color:#282a27}.chain-sidebar nav button>b{min-width:23px;height:23px;padding:0 .35rem;border-radius:999px;background:#b93a2f;color:#fff;display:grid;place-items:center;font-size:.72rem}.chain-sidebar nav button>span{font-size:1.1rem;text-align:center}.chain-mobile-view{display:none}.chain-overview-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem}.chain-overview-actions button{min-height:125px;padding:1.1rem;border:1px solid var(--bf-line);border-radius:var(--bf-radius-card);background:#fff;color:var(--bf-ink);display:grid;gap:.3rem;text-align:left;cursor:pointer}.chain-overview-actions button:hover{border-color:var(--bf-accent);box-shadow:0 10px 28px rgba(40,42,39,.07)}.chain-overview-actions b{font-size:1.3rem}.chain-overview-actions span{font-weight:800}.chain-overview-actions small{color:var(--bf-accent-text);font-weight:850}.chain-dashboard>p[role=status]{position:sticky;bottom:1rem;z-index:5;margin:0;padding:.85rem 1rem;border-radius:12px;background:#282a27;color:#fff;box-shadow:0 8px 25px rgba(40,42,39,.2)}

@media(max-width:980px){.chain-dashboard-shell{grid-template-columns:1fr}.chain-sidebar{display:none}.chain-mobile-view{display:grid;gap:.35rem;padding:.9rem 1rem;border-radius:14px;background:#282a27;color:#fff;font-weight:850}.chain-mobile-view span{font-size:.76rem;letter-spacing:.08em;color:#f4c618}.chain-mobile-view select{min-height:48px;border:1px solid #5b5c58;border-radius:10px;background:#fff;color:#282a27;padding:0 .8rem;font:inherit;font-weight:800}.chain-overview-actions{grid-template-columns:1fr 1fr}}@media(max-width:600px){.chain-overview-actions{grid-template-columns:1fr}.chain-overview-actions button{min-height:104px}}

/* Summary cards are navigation, not passive decoration. */
.chain-kpis > button{position:relative;overflow:hidden;min-height:142px;background:#fff;color:var(--bf-ink);border:1px solid var(--bf-line);border-top:5px solid var(--bf-accent);border-radius:var(--bf-radius-card);padding:1.15rem;display:grid;align-content:start;gap:.35rem;text-align:left;font:inherit;box-shadow:0 10px 28px rgba(40,42,39,.05);cursor:pointer}.chain-kpis>button:hover,.chain-kpis>button:focus-visible{border-color:#bd9200;transform:translateY(-2px);box-shadow:0 14px 34px rgba(40,42,39,.1)}.chain-kpis>button:focus-visible{outline:3px solid rgba(244,198,24,.35);outline-offset:2px}.chain-kpis>button:after{content:"";position:absolute;right:-25px;bottom:-38px;width:95px;height:95px;border-radius:50%;background:#fff5bd}.chain-kpis>button b,.chain-kpis>button span,.chain-kpis>button small{position:relative;z-index:1}.chain-kpis>button b{font-size:2.25rem;line-height:1}.chain-kpis>button span{font-size:.93rem;font-weight:850}.chain-kpis>button small{color:var(--bf-accent-text);font-size:.78rem;font-weight:800}@media(max-width:800px){.chain-kpis>button{min-height:128px}}@media(max-width:520px){.chain-kpis>button{min-height:112px}}
.chain-case-tools{display:flex;gap:16px;align-items:end;justify-content:space-between;margin:18px 0}.chain-case-tools label{display:grid;gap:7px;flex:1;font-weight:750}.chain-case-tools input{width:100%;min-height:48px;border:1px solid var(--bf-border,#ddd3b8);border-radius:12px;padding:0 14px;background:#fff;color:inherit;font:inherit}.chain-case-tools>div{display:flex;padding:4px;border-radius:12px;background:#f0eee7}.chain-case-tools button{border:0;border-radius:9px;padding:11px 15px;background:transparent;font-weight:750}.chain-case-tools button.active{background:#252724;color:#fff}
@media(max-width:700px){.chain-case-tools{align-items:stretch;flex-direction:column}.chain-case-tools>div{display:grid;grid-template-columns:repeat(3,1fr)}}
.chain-case-list{display:grid;gap:.7rem}.chain-case-list>article{display:flex;justify-content:space-between;gap:1rem;padding:1rem 0;border-bottom:1px solid var(--bf-line)}.chain-case-list>article>div:first-child{display:grid;gap:.4rem}.case-actions{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}.case-actions button{min-height:var(--bf-touch);border:1px solid var(--bf-line);border-radius:.7rem;background:#fff;padding:.6rem;font-weight:800}@media(max-width:800px){.chain-case-list>article{display:grid}}
.chain-case-heading{display:flex!important;align-items:center;justify-content:space-between;gap:.75rem}.chain-case-heading>strong{color:var(--bf-accent-text);font-size:.82rem;letter-spacing:.06em}.chain-case-list blockquote{margin:.35rem 0;padding:.7rem;border-left:4px solid var(--bf-accent);background:var(--bf-surface-warm)}.chain-next-action{padding:.7rem;border-radius:.6rem;background:#fff4c6;color:var(--bf-ink)!important}
.chain-case-media{display:flex;gap:.65rem;flex-wrap:wrap;margin:.5rem 0}.chain-case-media img{width:8rem;height:8rem;object-fit:cover;border:1px solid var(--bf-line);border-radius:.75rem}
.message-draft-tools{display:grid;gap:.7rem;padding:1rem;border-radius:var(--bf-radius-control);background:#fff8d8;border:1px solid #efd36b}.message-draft-tools label{display:grid;gap:.45rem;font-weight:800}.message-draft-tools textarea{min-height:5.5rem}.message-draft-tools>div{display:flex;flex-wrap:wrap;gap:.6rem}.ai-ad-button{width:100%;min-height:var(--bf-touch);margin:.7rem 0;border:1px solid #d4af16;border-radius:var(--bf-radius-control);background:#fff8d8;color:#6d5100;font:inherit;font-weight:850;cursor:pointer}.ai-ad-button:disabled{cursor:not-allowed;opacity:.55}
@media source(none){

@layer theme, base, components, utilities;
}

@media source(none){

@layer theme {
  @theme default {
    --font-sans:
      ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
    --font-mono:
      ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;

    --color-red-50: oklch(97.1% 0.013 17.38);
    --color-red-100: oklch(93.6% 0.032 17.717);
    --color-red-200: oklch(88.5% 0.062 18.334);
    --color-red-300: oklch(80.8% 0.114 19.571);
    --color-red-400: oklch(70.4% 0.191 22.216);
    --color-red-500: oklch(63.7% 0.237 25.331);
    --color-red-600: oklch(57.7% 0.245 27.325);
    --color-red-700: oklch(50.5% 0.213 27.518);
    --color-red-800: oklch(44.4% 0.177 26.899);
    --color-red-900: oklch(39.6% 0.141 25.723);
    --color-red-950: oklch(25.8% 0.092 26.042);

    --color-orange-50: oklch(98% 0.016 73.684);
    --color-orange-100: oklch(95.4% 0.038 75.164);
    --color-orange-200: oklch(90.1% 0.076 70.697);
    --color-orange-300: oklch(83.7% 0.128 66.29);
    --color-orange-400: oklch(75% 0.183 55.934);
    --color-orange-500: oklch(70.5% 0.213 47.604);
    --color-orange-600: oklch(64.6% 0.222 41.116);
    --color-orange-700: oklch(55.3% 0.195 38.402);
    --color-orange-800: oklch(47% 0.157 37.304);
    --color-orange-900: oklch(40.8% 0.123 38.172);
    --color-orange-950: oklch(26.6% 0.079 36.259);

    --color-amber-50: oklch(98.7% 0.022 95.277);
    --color-amber-100: oklch(96.2% 0.059 95.617);
    --color-amber-200: oklch(92.4% 0.12 95.746);
    --color-amber-300: oklch(87.9% 0.169 91.605);
    --color-amber-400: oklch(82.8% 0.189 84.429);
    --color-amber-500: oklch(76.9% 0.188 70.08);
    --color-amber-600: oklch(66.6% 0.179 58.318);
    --color-amber-700: oklch(55.5% 0.163 48.998);
    --color-amber-800: oklch(47.3% 0.137 46.201);
    --color-amber-900: oklch(41.4% 0.112 45.904);
    --color-amber-950: oklch(27.9% 0.077 45.635);

    --color-yellow-50: oklch(98.7% 0.026 102.212);
    --color-yellow-100: oklch(97.3% 0.071 103.193);
    --color-yellow-200: oklch(94.5% 0.129 101.54);
    --color-yellow-300: oklch(90.5% 0.182 98.111);
    --color-yellow-400: oklch(85.2% 0.199 91.936);
    --color-yellow-500: oklch(79.5% 0.184 86.047);
    --color-yellow-600: oklch(68.1% 0.162 75.834);
    --color-yellow-700: oklch(55.4% 0.135 66.442);
    --color-yellow-800: oklch(47.6% 0.114 61.907);
    --color-yellow-900: oklch(42.1% 0.095 57.708);
    --color-yellow-950: oklch(28.6% 0.066 53.813);

    --color-lime-50: oklch(98.6% 0.031 120.757);
    --color-lime-100: oklch(96.7% 0.067 122.328);
    --color-lime-200: oklch(93.8% 0.127 124.321);
    --color-lime-300: oklch(89.7% 0.196 126.665);
    --color-lime-400: oklch(84.1% 0.238 128.85);
    --color-lime-500: oklch(76.8% 0.233 130.85);
    --color-lime-600: oklch(64.8% 0.2 131.684);
    --color-lime-700: oklch(53.2% 0.157 131.589);
    --color-lime-800: oklch(45.3% 0.124 130.933);
    --color-lime-900: oklch(40.5% 0.101 131.063);
    --color-lime-950: oklch(27.4% 0.072 132.109);

    --color-green-50: oklch(98.2% 0.018 155.826);
    --color-green-100: oklch(96.2% 0.044 156.743);
    --color-green-200: oklch(92.5% 0.084 155.995);
    --color-green-300: oklch(87.1% 0.15 154.449);
    --color-green-400: oklch(79.2% 0.209 151.711);
    --color-green-500: oklch(72.3% 0.219 149.579);
    --color-green-600: oklch(62.7% 0.194 149.214);
    --color-green-700: oklch(52.7% 0.154 150.069);
    --color-green-800: oklch(44.8% 0.119 151.328);
    --color-green-900: oklch(39.3% 0.095 152.535);
    --color-green-950: oklch(26.6% 0.065 152.934);

    --color-emerald-50: oklch(97.9% 0.021 166.113);
    --color-emerald-100: oklch(95% 0.052 163.051);
    --color-emerald-200: oklch(90.5% 0.093 164.15);
    --color-emerald-300: oklch(84.5% 0.143 164.978);
    --color-emerald-400: oklch(76.5% 0.177 163.223);
    --color-emerald-500: oklch(69.6% 0.17 162.48);
    --color-emerald-600: oklch(59.6% 0.145 163.225);
    --color-emerald-700: oklch(50.8% 0.118 165.612);
    --color-emerald-800: oklch(43.2% 0.095 166.913);
    --color-emerald-900: oklch(37.8% 0.077 168.94);
    --color-emerald-950: oklch(26.2% 0.051 172.552);

    --color-teal-50: oklch(98.4% 0.014 180.72);
    --color-teal-100: oklch(95.3% 0.051 180.801);
    --color-teal-200: oklch(91% 0.096 180.426);
    --color-teal-300: oklch(85.5% 0.138 181.071);
    --color-teal-400: oklch(77.7% 0.152 181.912);
    --color-teal-500: oklch(70.4% 0.14 182.503);
    --color-teal-600: oklch(60% 0.118 184.704);
    --color-teal-700: oklch(51.1% 0.096 186.391);
    --color-teal-800: oklch(43.7% 0.078 188.216);
    --color-teal-900: oklch(38.6% 0.063 188.416);
    --color-teal-950: oklch(27.7% 0.046 192.524);

    --color-cyan-50: oklch(98.4% 0.019 200.873);
    --color-cyan-100: oklch(95.6% 0.045 203.388);
    --color-cyan-200: oklch(91.7% 0.08 205.041);
    --color-cyan-300: oklch(86.5% 0.127 207.078);
    --color-cyan-400: oklch(78.9% 0.154 211.53);
    --color-cyan-500: oklch(71.5% 0.143 215.221);
    --color-cyan-600: oklch(60.9% 0.126 221.723);
    --color-cyan-700: oklch(52% 0.105 223.128);
    --color-cyan-800: oklch(45% 0.085 224.283);
    --color-cyan-900: oklch(39.8% 0.07 227.392);
    --color-cyan-950: oklch(30.2% 0.056 229.695);

    --color-sky-50: oklch(97.7% 0.013 236.62);
    --color-sky-100: oklch(95.1% 0.026 236.824);
    --color-sky-200: oklch(90.1% 0.058 230.902);
    --color-sky-300: oklch(82.8% 0.111 230.318);
    --color-sky-400: oklch(74.6% 0.16 232.661);
    --color-sky-500: oklch(68.5% 0.169 237.323);
    --color-sky-600: oklch(58.8% 0.158 241.966);
    --color-sky-700: oklch(50% 0.134 242.749);
    --color-sky-800: oklch(44.3% 0.11 240.79);
    --color-sky-900: oklch(39.1% 0.09 240.876);
    --color-sky-950: oklch(29.3% 0.066 243.157);

    --color-blue-50: oklch(97% 0.014 254.604);
    --color-blue-100: oklch(93.2% 0.032 255.585);
    --color-blue-200: oklch(88.2% 0.059 254.128);
    --color-blue-300: oklch(80.9% 0.105 251.813);
    --color-blue-400: oklch(70.7% 0.165 254.624);
    --color-blue-500: oklch(62.3% 0.214 259.815);
    --color-blue-600: oklch(54.6% 0.245 262.881);
    --color-blue-700: oklch(48.8% 0.243 264.376);
    --color-blue-800: oklch(42.4% 0.199 265.638);
    --color-blue-900: oklch(37.9% 0.146 265.522);
    --color-blue-950: oklch(28.2% 0.091 267.935);

    --color-indigo-50: oklch(96.2% 0.018 272.314);
    --color-indigo-100: oklch(93% 0.034 272.788);
    --color-indigo-200: oklch(87% 0.065 274.039);
    --color-indigo-300: oklch(78.5% 0.115 274.713);
    --color-indigo-400: oklch(67.3% 0.182 276.935);
    --color-indigo-500: oklch(58.5% 0.233 277.117);
    --color-indigo-600: oklch(51.1% 0.262 276.966);
    --color-indigo-700: oklch(45.7% 0.24 277.023);
    --color-indigo-800: oklch(39.8% 0.195 277.366);
    --color-indigo-900: oklch(35.9% 0.144 278.697);
    --color-indigo-950: oklch(25.7% 0.09 281.288);

    --color-violet-50: oklch(96.9% 0.016 293.756);
    --color-violet-100: oklch(94.3% 0.029 294.588);
    --color-violet-200: oklch(89.4% 0.057 293.283);
    --color-violet-300: oklch(81.1% 0.111 293.571);
    --color-violet-400: oklch(70.2% 0.183 293.541);
    --color-violet-500: oklch(60.6% 0.25 292.717);
    --color-violet-600: oklch(54.1% 0.281 293.009);
    --color-violet-700: oklch(49.1% 0.27 292.581);
    --color-violet-800: oklch(43.2% 0.232 292.759);
    --color-violet-900: oklch(38% 0.189 293.745);
    --color-violet-950: oklch(28.3% 0.141 291.089);

    --color-purple-50: oklch(97.7% 0.014 308.299);
    --color-purple-100: oklch(94.6% 0.033 307.174);
    --color-purple-200: oklch(90.2% 0.063 306.703);
    --color-purple-300: oklch(82.7% 0.119 306.383);
    --color-purple-400: oklch(71.4% 0.203 305.504);
    --color-purple-500: oklch(62.7% 0.265 303.9);
    --color-purple-600: oklch(55.8% 0.288 302.321);
    --color-purple-700: oklch(49.6% 0.265 301.924);
    --color-purple-800: oklch(43.8% 0.218 303.724);
    --color-purple-900: oklch(38.1% 0.176 304.987);
    --color-purple-950: oklch(29.1% 0.149 302.717);

    --color-fuchsia-50: oklch(97.7% 0.017 320.058);
    --color-fuchsia-100: oklch(95.2% 0.037 318.852);
    --color-fuchsia-200: oklch(90.3% 0.076 319.62);
    --color-fuchsia-300: oklch(83.3% 0.145 321.434);
    --color-fuchsia-400: oklch(74% 0.238 322.16);
    --color-fuchsia-500: oklch(66.7% 0.295 322.15);
    --color-fuchsia-600: oklch(59.1% 0.293 322.896);
    --color-fuchsia-700: oklch(51.8% 0.253 323.949);
    --color-fuchsia-800: oklch(45.2% 0.211 324.591);
    --color-fuchsia-900: oklch(40.1% 0.17 325.612);
    --color-fuchsia-950: oklch(29.3% 0.136 325.661);

    --color-pink-50: oklch(97.1% 0.014 343.198);
    --color-pink-100: oklch(94.8% 0.028 342.258);
    --color-pink-200: oklch(89.9% 0.061 343.231);
    --color-pink-300: oklch(82.3% 0.12 346.018);
    --color-pink-400: oklch(71.8% 0.202 349.761);
    --color-pink-500: oklch(65.6% 0.241 354.308);
    --color-pink-600: oklch(59.2% 0.249 0.584);
    --color-pink-700: oklch(52.5% 0.223 3.958);
    --color-pink-800: oklch(45.9% 0.187 3.815);
    --color-pink-900: oklch(40.8% 0.153 2.432);
    --color-pink-950: oklch(28.4% 0.109 3.907);

    --color-rose-50: oklch(96.9% 0.015 12.422);
    --color-rose-100: oklch(94.1% 0.03 12.58);
    --color-rose-200: oklch(89.2% 0.058 10.001);
    --color-rose-300: oklch(81% 0.117 11.638);
    --color-rose-400: oklch(71.2% 0.194 13.428);
    --color-rose-500: oklch(64.5% 0.246 16.439);
    --color-rose-600: oklch(58.6% 0.253 17.585);
    --color-rose-700: oklch(51.4% 0.222 16.935);
    --color-rose-800: oklch(45.5% 0.188 13.697);
    --color-rose-900: oklch(41% 0.159 10.272);
    --color-rose-950: oklch(27.1% 0.105 12.094);

    --color-slate-50: oklch(98.4% 0.003 247.858);
    --color-slate-100: oklch(96.8% 0.007 247.896);
    --color-slate-200: oklch(92.9% 0.013 255.508);
    --color-slate-300: oklch(86.9% 0.022 252.894);
    --color-slate-400: oklch(70.4% 0.04 256.788);
    --color-slate-500: oklch(55.4% 0.046 257.417);
    --color-slate-600: oklch(44.6% 0.043 257.281);
    --color-slate-700: oklch(37.2% 0.044 257.287);
    --color-slate-800: oklch(27.9% 0.041 260.031);
    --color-slate-900: oklch(20.8% 0.042 265.755);
    --color-slate-950: oklch(12.9% 0.042 264.695);

    --color-gray-50: oklch(98.5% 0.002 247.839);
    --color-gray-100: oklch(96.7% 0.003 264.542);
    --color-gray-200: oklch(92.8% 0.006 264.531);
    --color-gray-300: oklch(87.2% 0.01 258.338);
    --color-gray-400: oklch(70.7% 0.022 261.325);
    --color-gray-500: oklch(55.1% 0.027 264.364);
    --color-gray-600: oklch(44.6% 0.03 256.802);
    --color-gray-700: oklch(37.3% 0.034 259.733);
    --color-gray-800: oklch(27.8% 0.033 256.848);
    --color-gray-900: oklch(21% 0.034 264.665);
    --color-gray-950: oklch(13% 0.028 261.692);

    --color-zinc-50: oklch(98.5% 0 0);
    --color-zinc-100: oklch(96.7% 0.001 286.375);
    --color-zinc-200: oklch(92% 0.004 286.32);
    --color-zinc-300: oklch(87.1% 0.006 286.286);
    --color-zinc-400: oklch(70.5% 0.015 286.067);
    --color-zinc-500: oklch(55.2% 0.016 285.938);
    --color-zinc-600: oklch(44.2% 0.017 285.786);
    --color-zinc-700: oklch(37% 0.013 285.805);
    --color-zinc-800: oklch(27.4% 0.006 286.033);
    --color-zinc-900: oklch(21% 0.006 285.885);
    --color-zinc-950: oklch(14.1% 0.005 285.823);

    --color-neutral-50: oklch(98.5% 0 0);
    --color-neutral-100: oklch(97% 0 0);
    --color-neutral-200: oklch(92.2% 0 0);
    --color-neutral-300: oklch(87% 0 0);
    --color-neutral-400: oklch(70.8% 0 0);
    --color-neutral-500: oklch(55.6% 0 0);
    --color-neutral-600: oklch(43.9% 0 0);
    --color-neutral-700: oklch(37.1% 0 0);
    --color-neutral-800: oklch(26.9% 0 0);
    --color-neutral-900: oklch(20.5% 0 0);
    --color-neutral-950: oklch(14.5% 0 0);

    --color-stone-50: oklch(98.5% 0.001 106.423);
    --color-stone-100: oklch(97% 0.001 106.424);
    --color-stone-200: oklch(92.3% 0.003 48.717);
    --color-stone-300: oklch(86.9% 0.005 56.366);
    --color-stone-400: oklch(70.9% 0.01 56.259);
    --color-stone-500: oklch(55.3% 0.013 58.071);
    --color-stone-600: oklch(44.4% 0.011 73.639);
    --color-stone-700: oklch(37.4% 0.01 67.558);
    --color-stone-800: oklch(26.8% 0.007 34.298);
    --color-stone-900: oklch(21.6% 0.006 56.043);
    --color-stone-950: oklch(14.7% 0.004 49.25);

    --color-mauve-50: oklch(98.5% 0 0);
    --color-mauve-100: oklch(96% 0.003 325.6);
    --color-mauve-200: oklch(92.2% 0.005 325.62);
    --color-mauve-300: oklch(86.5% 0.012 325.68);
    --color-mauve-400: oklch(71.1% 0.019 323.02);
    --color-mauve-500: oklch(54.2% 0.034 322.5);
    --color-mauve-600: oklch(43.5% 0.029 321.78);
    --color-mauve-700: oklch(36.4% 0.029 323.89);
    --color-mauve-800: oklch(26.3% 0.024 320.12);
    --color-mauve-900: oklch(21.2% 0.019 322.12);
    --color-mauve-950: oklch(14.5% 0.008 326);

    --color-olive-50: oklch(98.8% 0.003 106.5);
    --color-olive-100: oklch(96.6% 0.005 106.5);
    --color-olive-200: oklch(93% 0.007 106.5);
    --color-olive-300: oklch(88% 0.011 106.6);
    --color-olive-400: oklch(73.7% 0.021 106.9);
    --color-olive-500: oklch(58% 0.031 107.3);
    --color-olive-600: oklch(46.6% 0.025 107.3);
    --color-olive-700: oklch(39.4% 0.023 107.4);
    --color-olive-800: oklch(28.6% 0.016 107.4);
    --color-olive-900: oklch(22.8% 0.013 107.4);
    --color-olive-950: oklch(15.3% 0.006 107.1);

    --color-mist-50: oklch(98.7% 0.002 197.1);
    --color-mist-100: oklch(96.3% 0.002 197.1);
    --color-mist-200: oklch(92.5% 0.005 214.3);
    --color-mist-300: oklch(87.2% 0.007 219.6);
    --color-mist-400: oklch(72.3% 0.014 214.4);
    --color-mist-500: oklch(56% 0.021 213.5);
    --color-mist-600: oklch(45% 0.017 213.2);
    --color-mist-700: oklch(37.8% 0.015 216);
    --color-mist-800: oklch(27.5% 0.011 216.9);
    --color-mist-900: oklch(21.8% 0.008 223.9);
    --color-mist-950: oklch(14.8% 0.004 228.8);

    --color-taupe-50: oklch(98.6% 0.002 67.8);
    --color-taupe-100: oklch(96% 0.002 17.2);
    --color-taupe-200: oklch(92.2% 0.005 34.3);
    --color-taupe-300: oklch(86.8% 0.007 39.5);
    --color-taupe-400: oklch(71.4% 0.014 41.2);
    --color-taupe-500: oklch(54.7% 0.021 43.1);
    --color-taupe-600: oklch(43.8% 0.017 39.3);
    --color-taupe-700: oklch(36.7% 0.016 35.7);
    --color-taupe-800: oklch(26.8% 0.011 36.5);
    --color-taupe-900: oklch(21.4% 0.009 43.1);
    --color-taupe-950: oklch(14.7% 0.004 49.3);

    --color-black: #000;
    --color-white: #fff;

    --spacing: 0.25rem;

    --breakpoint-sm: 40rem;
    --breakpoint-md: 48rem;
    --breakpoint-lg: 64rem;
    --breakpoint-xl: 80rem;
    --breakpoint-2xl: 96rem;

    --container-3xs: 16rem;
    --container-2xs: 18rem;
    --container-xs: 20rem;
    --container-sm: 24rem;
    --container-md: 28rem;
    --container-lg: 32rem;
    --container-xl: 36rem;
    --container-2xl: 42rem;
    --container-3xl: 48rem;
    --container-4xl: 56rem;
    --container-5xl: 64rem;
    --container-6xl: 72rem;
    --container-7xl: 80rem;

    --text-xs: 0.75rem;
    --text-xs--line-height: calc(1 / 0.75);
    --text-sm: 0.875rem;
    --text-sm--line-height: calc(1.25 / 0.875);
    --text-base: 1rem;
    --text-base--line-height: calc(1.5 / 1);
    --text-lg: 1.125rem;
    --text-lg--line-height: calc(1.75 / 1.125);
    --text-xl: 1.25rem;
    --text-xl--line-height: calc(1.75 / 1.25);
    --text-2xl: 1.5rem;
    --text-2xl--line-height: calc(2 / 1.5);
    --text-3xl: 1.875rem;
    --text-3xl--line-height: calc(2.25 / 1.875);
    --text-4xl: 2.25rem;
    --text-4xl--line-height: calc(2.5 / 2.25);
    --text-5xl: 3rem;
    --text-5xl--line-height: 1;
    --text-6xl: 3.75rem;
    --text-6xl--line-height: 1;
    --text-7xl: 4.5rem;
    --text-7xl--line-height: 1;
    --text-8xl: 6rem;
    --text-8xl--line-height: 1;
    --text-9xl: 8rem;
    --text-9xl--line-height: 1;

    --font-weight-thin: 100;
    --font-weight-extralight: 200;
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --font-weight-black: 900;

    --tracking-tighter: -0.05em;
    --tracking-tight: -0.025em;
    --tracking-normal: 0em;
    --tracking-wide: 0.025em;
    --tracking-wider: 0.05em;
    --tracking-widest: 0.1em;

    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
    --leading-loose: 2;

    --radius-xs: 0.125rem;
    --radius-sm: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;
    --radius-3xl: 1.5rem;
    --radius-4xl: 2rem;

    --shadow-2xs: 0 1px rgb(0 0 0 / 0.05);
    --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --shadow-md:
      0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg:
      0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl:
      0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);

    --inset-shadow-2xs: inset 0 1px rgb(0 0 0 / 0.05);
    --inset-shadow-xs: inset 0 1px 1px rgb(0 0 0 / 0.05);
    --inset-shadow-sm: inset 0 2px 4px rgb(0 0 0 / 0.05);

    --drop-shadow-xs: 0 1px 1px rgb(0 0 0 / 0.05);
    --drop-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.15);
    --drop-shadow-md: 0 3px 3px rgb(0 0 0 / 0.12);
    --drop-shadow-lg: 0 4px 4px rgb(0 0 0 / 0.15);
    --drop-shadow-xl: 0 9px 7px rgb(0 0 0 / 0.1);
    --drop-shadow-2xl: 0 25px 25px rgb(0 0 0 / 0.15);

    --text-shadow-2xs: 0px 1px 0px rgb(0 0 0 / 0.15);
    --text-shadow-xs: 0px 1px 1px rgb(0 0 0 / 0.2);
    --text-shadow-sm:
      0px 1px 0px rgb(0 0 0 / 0.075), 0px 1px 1px rgb(0 0 0 / 0.075),
      0px 2px 2px rgb(0 0 0 / 0.075);
    --text-shadow-md:
      0px 1px 1px rgb(0 0 0 / 0.1), 0px 1px 2px rgb(0 0 0 / 0.1),
      0px 2px 4px rgb(0 0 0 / 0.1);
    --text-shadow-lg:
      0px 1px 2px rgb(0 0 0 / 0.1), 0px 3px 2px rgb(0 0 0 / 0.1),
      0px 4px 8px rgb(0 0 0 / 0.1);

    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

    --animate-spin: spin 1s linear infinite;
    --animate-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
    --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    --animate-bounce: bounce 1s infinite;

    @keyframes spin {
      to {
        transform: rotate(360deg);
      }
    }

    @keyframes ping {
      75%,
      100% {
        transform: scale(2);
        opacity: 0;
      }
    }

    @keyframes pulse {
      50% {
        opacity: 0.5;
      }
    }

    @keyframes bounce {
      0%,
      100% {
        transform: translateY(-25%);
        animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
      }

      50% {
        transform: none;
        animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
      }
    }

    --blur-xs: 4px;
    --blur-sm: 8px;
    --blur-md: 12px;
    --blur-lg: 16px;
    --blur-xl: 24px;
    --blur-2xl: 40px;
    --blur-3xl: 64px;

    --perspective-dramatic: 100px;
    --perspective-near: 300px;
    --perspective-normal: 500px;
    --perspective-midrange: 800px;
    --perspective-distant: 1200px;

    --aspect-video: 16 / 9;

    --default-transition-duration: 150ms;
    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    --default-font-family: --theme(--font-sans, initial);
    --default-font-feature-settings: --theme(
      --font-sans--font-feature-settings,
      initial
    );
    --default-font-variation-settings: --theme(
      --font-sans--font-variation-settings,
      initial
    );
    --default-mono-font-family: --theme(--font-mono, initial);
    --default-mono-font-feature-settings: --theme(
      --font-mono--font-feature-settings,
      initial
    );
    --default-mono-font-variation-settings: --theme(
      --font-mono--font-variation-settings,
      initial
    );
  }

  /* Deprecated */
  @theme default inline reference {
    --blur: 8px;
    --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
    --drop-shadow: 0 1px 2px rgb(0 0 0 / 0.1), 0 1px 1px rgb(0 0 0 / 0.06);
    --radius: 0.25rem;
    --max-width-prose: 65ch;
  }
}

@layer base {
  /*
  1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
  2. Remove default margins and padding
  3. Reset all borders.
*/

  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    box-sizing: border-box; /* 1 */
    margin: 0; /* 2 */
    padding: 0; /* 2 */
    border: 0 solid; /* 3 */
  }

  /*
  1. Use a consistent sensible line-height in all browsers.
  2. Prevent adjustments of font size after orientation changes in iOS.
  3. Use a more readable tab size.
  4. Use the user's configured `sans` font-family by default.
  5. Use the user's configured `sans` font-feature-settings by default.
  6. Use the user's configured `sans` font-variation-settings by default.
  7. Disable tap highlights on iOS.
*/

  html,
  :host {
    line-height: 1.5; /* 1 */
    -webkit-text-size-adjust: 100%; /* 2 */
    tab-size: 4; /* 3 */
    font-family: --theme(
      --default-font-family,
      ui-sans-serif,
      system-ui,
      sans-serif,
      "Apple Color Emoji",
      "Segoe UI Emoji",
      "Segoe UI Symbol",
      "Noto Color Emoji"
    ); /* 4 */
    font-feature-settings: --theme(
      --default-font-feature-settings,
      normal
    ); /* 5 */
    font-variation-settings: --theme(
      --default-font-variation-settings,
      normal
    ); /* 6 */
    -webkit-tap-highlight-color: transparent; /* 7 */
  }

  /*
  1. Add the correct height in Firefox.
  2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
  3. Reset the default border style to a 1px solid border.
*/

  hr {
    height: 0; /* 1 */
    color: inherit; /* 2 */
    border-top-width: 1px; /* 3 */
  }

  /*
  Add the correct text decoration in Chrome, Edge, and Safari.
*/

  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }

  /*
  Remove the default font size and weight for headings.
*/

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-size: inherit;
    font-weight: inherit;
  }

  /*
  Reset links to optimize for opt-in styling instead of opt-out.
*/

  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }

  /*
  Add the correct font weight in Edge and Safari.
*/

  b,
  strong {
    font-weight: bolder;
  }

  /*
  1. Use the user's configured `mono` font-family by default.
  2. Use the user's configured `mono` font-feature-settings by default.
  3. Use the user's configured `mono` font-variation-settings by default.
  4. Correct the odd `em` font sizing in all browsers.
*/

  code,
  kbd,
  samp,
  pre {
    font-family: --theme(
      --default-mono-font-family,
      ui-monospace,
      SFMono-Regular,
      Menlo,
      Monaco,
      Consolas,
      "Liberation Mono",
      "Courier New",
      monospace
    ); /* 1 */
    font-feature-settings: --theme(
      --default-mono-font-feature-settings,
      normal
    ); /* 2 */
    font-variation-settings: --theme(
      --default-mono-font-variation-settings,
      normal
    ); /* 3 */
    font-size: 1em; /* 4 */
  }

  /*
  Add the correct font size in all browsers.
*/

  small {
    font-size: 80%;
  }

  /*
  Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

  sub,
  sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }

  sub {
    bottom: -0.25em;
  }

  sup {
    top: -0.5em;
  }

  /*
  1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
  2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
  3. Remove gaps between table borders by default.
*/

  table {
    text-indent: 0; /* 1 */
    border-color: inherit; /* 2 */
    border-collapse: collapse; /* 3 */
  }

  /*
  Use the modern Firefox focus style for all focusable elements.
*/

  :-moz-focusring {
    outline: auto;
  }

  /*
  Add the correct vertical alignment in Chrome and Firefox.
*/

  progress {
    vertical-align: baseline;
  }

  /*
  Add the correct display in Chrome and Safari.
*/

  summary {
    display: list-item;
  }

  /*
  Make lists unstyled by default.
*/

  ol,
  ul,
  menu {
    list-style: none;
  }

  /*
  1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
  2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
      This can trigger a poorly considered lint error in some tools but is included by design.
*/

  img,
  svg,
  video,
  canvas,
  audio,
  iframe,
  embed,
  object {
    display: block; /* 1 */
    vertical-align: middle; /* 2 */
  }

  /*
  Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

  img,
  video {
    max-width: 100%;
    height: auto;
  }

  /*
  1. Inherit font styles in all browsers.
  2. Remove border radius in all browsers.
  3. Remove background color in all browsers.
  4. Ensure consistent opacity for disabled states in all browsers.
*/

  button,
  input,
  select,
  optgroup,
  textarea,
  ::file-selector-button {
    font: inherit; /* 1 */
    font-feature-settings: inherit; /* 1 */
    font-variation-settings: inherit; /* 1 */
    letter-spacing: inherit; /* 1 */
    color: inherit; /* 1 */
    border-radius: 0; /* 2 */
    background-color: transparent; /* 3 */
    opacity: 1; /* 4 */
  }

  /*
  Restore default font weight.
*/

  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }

  /*
  Restore indentation.
*/

  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }

  /*
  Restore space after button.
*/

  ::file-selector-button {
    margin-inline-end: 4px;
  }

  /*
  Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
*/

  ::placeholder {
    opacity: 1;
  }

  /*
  Set the default placeholder color to a semi-transparent version of the current text color in browsers that do not
  crash when using `color-mix(…)` with `currentcolor`. (https://github.com/tailwindlabs/tailwindcss/issues/17194)
*/

  @supports (not (-webkit-appearance: -apple-pay-button)) /* Not Safari */ or
    (contain-intrinsic-size: 1px) /* Safari 17+ */ {
    ::placeholder {
      color: color-mix(in oklab, currentcolor 50%, transparent);
    }
  }

  /*
  Prevent resizing textareas horizontally by default.
*/

  textarea {
    resize: vertical;
  }

  /*
  Remove the inner padding in Chrome and Safari on macOS.
*/

  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }

  /*
  1. Ensure date/time inputs have the same height when empty in iOS Safari.
  2. Ensure text alignment can be changed on date/time inputs in iOS Safari.
*/

  ::-webkit-date-and-time-value {
    min-height: 1lh; /* 1 */
    text-align: inherit; /* 2 */
  }

  /*
  Prevent height from changing on date/time inputs in macOS Safari when the input is set to `display: block`.
*/

  ::-webkit-datetime-edit {
    display: inline-flex;
  }

  /*
  Remove excess padding from pseudo-elements in date/time inputs to ensure consistent height across browsers.
*/

  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }

  ::-webkit-datetime-edit,
  ::-webkit-datetime-edit-year-field,
  ::-webkit-datetime-edit-month-field,
  ::-webkit-datetime-edit-day-field,
  ::-webkit-datetime-edit-hour-field,
  ::-webkit-datetime-edit-minute-field,
  ::-webkit-datetime-edit-second-field,
  ::-webkit-datetime-edit-millisecond-field,
  ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }

  /*
  Center dropdown marker shown on inputs with paired `<datalist>`s in Chrome. (https://github.com/tailwindlabs/tailwindcss/issues/18499)
*/

  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }

  /*
  Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

  :-moz-ui-invalid {
    box-shadow: none;
  }

  /*
  Correct the inability to style the border radius in iOS Safari.
*/

  button,
  input:where([type="button"], [type="reset"], [type="submit"]),
  ::file-selector-button {
    appearance: button;
  }

  /*
  Correct the cursor style of increment and decrement buttons in Safari.
*/

  ::-webkit-inner-spin-button,
  ::-webkit-outer-spin-button {
    height: auto;
  }

  /*
  Make elements with the HTML hidden attribute stay hidden by default.
*/

  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}

@layer utilities {
  @tailwind utilities;
}
}
@source "../app";
@source "../components";
@source "../pilot-static";
:root {
  /* Butikkflyt product tokens. Brand profiles may override --bf-accent. */
  --bf-ink: #282a27;
  --bf-ink-strong: #1e201e;
  --bf-canvas: #f2ede3;
  --bf-surface: #ffffff;
  --bf-surface-warm: #fbf7ee;
  --bf-accent: #f4c618;
  --bf-accent-soft: #fff8dc;
  --bf-accent-text: #4a3900;
  --bf-muted: #74756f;
  --bf-line: #e6dfcf;
  --bf-success: #2c805a;
  --bf-warning: #b97800;
  --bf-danger: #c84032;
  --bf-radius-control: 12px;
  --bf-radius-card: 18px;
  --bf-radius-panel: 24px;
  --bf-touch-target: 44px;
  --bf-touch: var(--bf-touch-target);
  --blue: #1129aa;
  --brand-soft: #eef0ff;
  --brand-soft-strong: #e9edff;
  --brand-tab: #e9edf5;
  --brand-border: #aeb9f5;
  --brand-hero-start: #172fb4;
  --brand-hero-end: #0c1d79;
  --brand-hero-kicker: #bec8ff;
  --brand-hero-copy: #e0e4ff;
  --brand-shadow: rgba(17, 41, 170, 0.14);
  --control-line: #cbd3e7;
  --secondary-ink: #4e586b;
  --divider: #e3e7f0;
  --surface-tint: #f5f7fb;
  --task-accent: #7b61c9;
  --task-line: #d9d0f1;
  --task-surface: #f7f4ff;
  --ink: #101522;
  --muted: #667085;
  --line: #e7eaf0;
  --bg: var(--surface-tint);
}

@media (min-width:1000px){
  .role-manager .ads-hub,.role-admin .ads-hub{width:min(1280px,100%);margin:0 auto}.role-manager .ads-toolbar,.role-admin .ads-toolbar{margin-bottom:16px}.role-manager .ads-toolbar h2,.role-admin .ads-toolbar h2{font-size:2rem}
  .role-manager .offer-list,.role-admin .offer-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.role-manager .offer-card,.role-admin .offer-card{min-height:170px;padding:18px;border-width:2px}.role-manager .offer-card.selected,.role-admin .offer-card.selected{grid-column:1/-1}
  .role-manager .offer-main,.role-admin .offer-main{grid-template-columns:30px 112px 1fr;gap:16px}.role-manager .offer-check,.role-admin .offer-check{width:24px;height:24px}.role-manager .offer-thumb,.role-admin .offer-thumb{width:112px;height:128px}
  .role-manager .source-tag,.role-admin .source-tag,.role-manager .field-label,.role-admin .field-label{font-size:12px}.role-manager .offer-copy strong,.role-admin .offer-copy strong{font-size:19px}.role-manager .offer-copy small,.role-admin .offer-copy small,.role-manager .offer-copy em,.role-admin .offer-copy em,.role-manager .upsell-box>p,.role-admin .upsell-box>p,.role-manager .upsell-box>small,.role-admin .upsell-box>small{font-size:14px}.role-manager .offer-copy b,.role-admin .offer-copy b{font-size:28px}
  .role-manager .offer-options,.role-admin .offer-options{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:start}.role-manager .offer-options>.offer-setup-panel,.role-admin .offer-options>.offer-setup-panel{grid-column:1}.role-manager .offer-options>.upsell-box,.role-admin .offer-options>.upsell-box{grid-column:2;margin-top:0;padding:18px}
  .role-manager .mode-toggle button,.role-admin .mode-toggle button,.role-manager .upsell-chips button,.role-admin .upsell-chips button{min-height:44px;font-size:14px}
}

/* Desktop arbeidsflate: bruk skjermbredden til lesbar informasjon, ikke tomrom. */
@media (min-width: 1000px) {
  .role-manager .module-page,
  .role-admin .module-page {
    max-width: 1440px;
    margin-inline: auto;
  }

  .role-manager .module-head,
  .role-admin .module-head {
    padding: 12px 4px 24px;
  }

  .role-manager .module-head h2,
  .role-admin .module-head h2 {
    font-size: clamp(2rem, 2.3vw, 2.65rem);
    letter-spacing: -0.035em;
  }

  .role-manager .module-head p:last-child,
  .role-admin .module-head p:last-child {
    font-size: 1rem;
  }

  .role-manager .round-action,
  .role-admin .round-action {
    width: 58px;
    height: 58px;
    font-size: 2rem;
  }

  .role-manager .voice-task-button-top,
  .role-admin .voice-task-button-top,
  .role-manager .template-bank-button,
  .role-admin .template-bank-button {
    min-height: 66px;
    font-size: 1.15rem;
  }

  .role-manager .calendar-nav,
  .role-admin .calendar-nav {
    margin-top: 18px;
  }

  .role-manager .calendar-nav strong,
  .role-admin .calendar-nav strong {
    font-size: 1rem;
  }

  .role-manager .calendar-strip.task-date-strip button,
  .role-admin .calendar-strip.task-date-strip button {
    min-height: 76px;
  }

  .role-manager .calendar-strip.task-date-strip small,
  .role-admin .calendar-strip.task-date-strip small {
    font-size: 0.76rem;
  }

  .role-manager .calendar-strip.task-date-strip b,
  .role-admin .calendar-strip.task-date-strip b {
    font-size: 1.25rem;
  }

  .role-manager .shift-tabs button,
  .role-admin .shift-tabs button {
    min-height: 48px;
    font-size: 0.95rem;
  }

  .role-manager .module-card,
  .role-admin .module-card {
    padding: 10px 18px;
  }

  .role-manager .work-row,
  .role-admin .work-row {
    grid-template-columns: 48px minmax(0, 1fr) 52px;
    gap: 18px;
    min-height: 150px;
    padding: 24px 18px;
  }

  .role-manager .task-toggle,
  .role-admin .task-toggle {
    font-size: 2.15rem;
  }

  .role-manager .work-row strong,
  .role-admin .work-row strong {
    font-size: clamp(1.2rem, 1.35vw, 1.5rem);
    line-height: 1.25;
  }

  .role-manager .work-row small,
  .role-admin .work-row small {
    margin-top: 8px;
    font-size: 0.95rem;
    line-height: 1.45;
  }

  .role-manager .work-row em,
  .role-admin .work-row em {
    width: 46px;
    height: 46px;
    font-size: 0.82rem;
  }

  .role-manager .fixed-label,
  .role-admin .fixed-label,
  .role-manager .upsell-label,
  .role-admin .upsell-label {
    margin-left: 10px;
    padding: 5px 9px;
    font-size: 0.72rem;
  }

  .role-manager .task-status-menu,
  .role-admin .task-status-menu {
    gap: 8px;
    margin-top: 14px;
  }

  .role-manager .task-status-menu button,
  .role-admin .task-status-menu button {
    min-height: 42px;
    padding: 0 16px;
    font-size: 0.9rem;
  }

  .role-manager .leader-hint,
  .role-admin .leader-hint {
    padding: 20px 24px;
  }

  .role-manager .leader-hint strong,
  .role-admin .leader-hint strong {
    font-size: 1rem;
  }

  .role-manager .leader-hint p,
  .role-admin .leader-hint p {
    font-size: 0.9rem;
  }
}
* {
  box-sizing: border-box;
}
html {
  background: #dfe4ec;
}
body {
  margin: 0;
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  background: var(--bg);
}

html[data-text-size="large"] .app-shell,
html[data-text-size="xlarge"] .app-shell {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.text-size-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.text-size-options button {
  padding: 12px 6px;
  border: 1px solid var(--control-line);
  border-radius: 12px;
  background: #fff;
  color: var(--secondary-ink);
  font-weight: 800;
}

.text-size-options button.active {
  border-color: var(--blue);
  background: var(--brand-soft-strong);
  color: var(--blue);
}

html[data-text-size="large"] .task-status-menu button,
html[data-text-size="xlarge"] .task-status-menu button {
  min-height: 40px;
  padding: 8px 10px;
  border-radius: 12px;
  font-size: 13px !important;
  line-height: 1.2;
}

html[data-text-size="xlarge"] .task-status-menu button {
  min-height: 44px;
  padding: 9px 12px;
  font-size: 14px !important;
}

html[data-text-size="large"] .work-row > div > strong {
  font-size: 16px !important;
}

html[data-text-size="xlarge"] .work-row > div > strong {
  font-size: 18px !important;
}

html[data-text-size="large"] .work-row small {
  font-size: 12px !important;
  line-height: 1.45;
}

html[data-text-size="xlarge"] .work-row small {
  font-size: 13px !important;
  line-height: 1.45;
}

html[data-text-size="large"] :is(.fixed-label, .upsell-label, .evidence-label),
html[data-text-size="xlarge"]
  :is(.fixed-label, .upsell-label, .evidence-label) {
  padding: 5px 9px;
  border-radius: 8px;
  font-size: 11px !important;
}

html[data-text-size="xlarge"]
  :is(.fixed-label, .upsell-label, .evidence-label) {
  padding: 6px 10px;
  font-size: 12px !important;
}

html[data-text-size="large"]
  :is(.home-stats span, .home-shift-summary small, .bottom-nav button) {
  font-size: 11px !important;
}
html[data-text-size="xlarge"]
  :is(.home-stats span, .home-shift-summary small, .bottom-nav button) {
  font-size: 12px !important;
}
html[data-text-size="large"]
  :is(
    .home-task small,
    .calendar-preview small,
    .timeline small,
    .work-row small
  ) {
  font-size: 12px !important;
  line-height: 1.5;
}
html[data-text-size="xlarge"]
  :is(
    .home-task small,
    .calendar-preview small,
    .timeline small,
    .work-row small
  ) {
  font-size: 13px !important;
  line-height: 1.5;
}
html[data-text-size="large"]
  :is(.module-head p:last-child, .calendar-nav strong) {
  font-size: 13px !important;
}
html[data-text-size="xlarge"]
  :is(.module-head p:last-child, .calendar-nav strong) {
  font-size: 14px !important;
}
html[data-text-size="large"]
  :is(.calendar-strip small, .calendar-strip.seven small) {
  font-size: 9px !important;
}
html[data-text-size="xlarge"]
  :is(.calendar-strip small, .calendar-strip.seven small) {
  font-size: 10px !important;
}
html[data-text-size="large"] :is(.section-title button, .more-tasks-button) {
  font-size: 12px !important;
}
html[data-text-size="xlarge"] :is(.section-title button, .more-tasks-button) {
  font-size: 13px !important;
}
button,
input,
select {
  font: inherit;
}
button {
  cursor: pointer;
}
.login-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: linear-gradient(145deg, #fbf7ee, #f3eee3);
}
.login-card {
  width: min(100%, 420px);
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 20px 55px var(--brand-shadow);
}
.login-card .brand-mark {
  margin-bottom: 24px;
  width: 56px;
  color: #f4c618;
  background: #282a27;
  box-shadow: 0 0 0 2px #f4c618;
}
.login-card h1 {
  margin: 8px 0 10px;
  font-size: 28px;
}
.login-card > p {
  color: var(--muted);
  line-height: 1.5;
}
.login-card form {
  display: grid;
  gap: 14px;
  margin-top: 24px;
}
.login-card label {
  display: grid;
  gap: 7px;
  font-size: 13px;
  font-weight: 700;
}
.login-card input {
  width: 100%;
  padding: 14px;
  border: 1px solid var(--control-line);
  border-radius: 12px;
}
.login-card button {
  padding: 14px;
  border: 0;
  border-radius: 12px;
  color: #fff;
  background: #282a27;
  font-weight: 800;
}
.login-card button:disabled {
  opacity: 0.55;
}
.login-message {
  padding: 12px;
  border-radius: 10px;
  background: #eef8f1;
  color: #176b39 !important;
  font-size: 13px;
}
.screen-error {
  display: grid;
  gap: 12px;
  margin-top: 18px;
  padding: 24px;
  border: 1px solid var(--control-line);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 12px 28px var(--brand-shadow);
}
.screen-error h2,
.screen-error p {
  margin: 0;
}
.screen-error button {
  min-height: 48px;
  border: 0;
  border-radius: 12px;
  background: var(--bf-ink);
  color: #fff;
  font-weight: 800;
}
.home-page{display:flex;flex-direction:column;gap:16px}.role-home-heading{padding:14px 2px 0}.role-home-heading h2{margin:8px 0 0;font-size:2rem;line-height:1.05}.next-shift-card{position:relative;margin:0}.next-shift-card h3{margin:8px 0 4px;font-size:1.35rem}.next-shift-card>span{position:absolute;right:20px;top:50%;transform:translateY(-50%);padding:9px 13px;border-radius:999px;background:var(--bf-accent);color:var(--bf-ink);font-weight:900}.home-deviation-button{min-height:58px;border:0;border-radius:16px;background:var(--bf-accent);color:var(--bf-ink);font-size:1rem;font-weight:900;box-shadow:0 8px 20px var(--brand-shadow)}.employee-home .home-stats{margin:0}.leader-home .home-stats{grid-template-columns:repeat(2,minmax(0,1fr));margin:0}.leader-home .home-stats button{min-height:104px;text-align:left;padding:16px;border-top:4px solid var(--bf-accent)}.leader-home .home-stats strong{font-size:1.8rem;color:var(--bf-ink)}.leader-home .leader-panel{display:none}.role-report-page{display:grid;gap:16px;padding-top:18px}.role-report-page>h2{margin:0;font-size:2rem}.role-report-page>.secondary-button{margin:0;min-height:50px}.staffing-alert{width:100%;border:1px solid #e4c33b;border-radius:18px;background:#fff8c9;color:var(--ink);padding:16px 18px;display:flex;align-items:center;justify-content:space-between;text-align:left}.staffing-alert span{display:grid;gap:5px}.staffing-alert small{font-weight:900;color:var(--blue);letter-spacing:.08em}.staffing-alert strong{font-size:1rem}.staffing-alert b{color:var(--blue);font-size:.8rem}.leader-attention-panel{display:grid;gap:0;padding:18px;border:1px solid var(--line);border-top:5px solid var(--bf-accent);border-radius:20px;background:#fff;box-shadow:0 10px 28px rgba(40,42,39,.05)}.leader-attention-panel .section-title{margin-bottom:4px}.leader-attention-panel .section-title h3{color:var(--ink);font-size:1.35rem}.leader-attention-row{width:100%;min-height:72px;display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:12px;text-align:left;border:0;border-top:1px solid var(--line);background:#fff;color:var(--ink);padding:12px 2px}.leader-attention-row>span:first-child{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#ffe4de;color:#a7352b;font-weight:950}.leader-attention-row>span:nth-child(2){display:grid;gap:4px}.leader-attention-row small{color:var(--muted)}.leader-attention-row i{color:var(--blue);font-size:1.25rem;font-style:normal}.leader-all-clear{margin:10px 0 0;padding:14px;border-radius:12px;background:#e8f5ec;color:#17673d;font-weight:800}.leader-daily-operations{border-top:5px solid #282a27}.leader-desktop-sidebar{display:none}
.empty-published {
  padding: 30px 22px;
  border: 1px dashed var(--control-line);
  border-radius: 18px;
  background: #fff;
  text-align: center;
}
.empty-published p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}
.restore-post-button {
  margin-top: 9px;
  padding: 7px 9px;
  border: 1px solid var(--control-line);
  border-radius: 9px;
  background: #fff;
  color: var(--blue);
  font-size: 10px;
  font-weight: 800;
}
.cloud-save-status {
  margin: 10px 2px 0;
  color: var(--muted);
  font-size: 11px;
  text-align: right;
}
.app-shell {
  max-width: 520px;
  min-height: 100vh;
  margin: 0 auto;
  padding: 0 20px 96px;
  background: var(--bg);
}
.home-page,
.module-page,
.ads-hub {
  padding-bottom: 18px;
}
.home-hero {
  padding: 24px 22px;
  border-radius: 22px;
  color: #fff;
  background: linear-gradient(135deg, var(--brand-hero-start), var(--brand-hero-end));
  box-shadow: 0 14px 30px var(--brand-shadow);
}
.home-hero .eyebrow {
  color: var(--brand-hero-copy);
}
.home-hero h2 {
  margin: 7px 0 5px;
  font-size: 29px;
}
.home-hero p:last-child {
  margin: 0;
  color: var(--brand-hero-copy);
  font-size: 13px;
}
.home-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  margin: 12px 0 18px;
}
.home-stats button {
  padding: 15px 8px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 6px 18px rgba(16, 24, 40, 0.05);
}
.home-stats strong,
.home-stats span {
  display: block;
}
.home-stats strong {
  color: var(--blue);
  font-size: 23px;
}
.home-stats span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}
.home-section {
  margin-top: 14px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
}
.section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.section-title h3 {
  margin: 4px 0 0;
  font-size: 18px;
}
.section-title button {
  border: 0;
  background: none;
  color: var(--blue);
  font-size: 11px;
  font-weight: 800;
}
.home-task {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  gap: 9px;
  align-items: center;
  padding: 13px 0;
  border-top: 1px solid var(--line);
}
.home-task:first-of-type {
  border-top: 0;
}
.task-check {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border: 2px solid #b7c1d1;
  border-radius: 50%;
  color: #fff;
  font-weight: 900;
}
.task-check.done {
  border-color: #29a061;
  background: #29a061;
}
.task-check.in_progress {
  border-color: #d69a00;
  background: #f2bf38;
  color: #5e4300;
}
.task-check.cannot_do {
  border-color: #c9493d;
  background: #c9493d;
  color: #fff;
}
.home-task.status-in_progress {
  margin: 4px -8px;
  padding-left: 8px;
  padding-right: 8px;
  border-radius: 12px;
  background: #fff8df;
}
.home-task.status-cannot_do {
  margin: 4px -8px;
  padding-left: 8px;
  padding-right: 8px;
  border-radius: 12px;
  background: #fff0ee;
}
.home-status-label {
  color: var(--blue);
}
.status-in_progress .home-status-label {
  color: #a66b00;
}
.status-cannot_do .home-status-label {
  color: #b22f27;
}
.home-overdue-label {
  display: inline !important;
  color: #b22f27;
  font-weight: 800;
}
.home-task-comment {
  color: #a0442e !important;
  font-style: italic;
}
.home-task strong,
.home-task small {
  display: block;
}
.home-task strong {
  font-size: 13px;
}
.home-task small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 10px;
}
.home-task.completed strong {
  color: var(--muted);
  text-decoration: line-through;
}
.home-task i {
  padding: 5px 7px;
  border-radius: 999px;
  background: #fff1e6;
  color: #a84f05;
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
}
.home-voice-button {
  width: 100%;
  margin: 12px 0;
  padding: 15px;
  border: 0;
  border-radius: 15px;
  background: var(--blue);
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  box-shadow: 0 8px 20px var(--brand-shadow);
}
.home-voice-status {
  margin: -4px 0 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #eef8f1;
  color: #176b39;
  font-size: 10px;
  line-height: 1.4;
}
.calendar-preview {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 12px;
  align-items: center;
  padding: 11px 0;
  border-top: 1px solid var(--line);
}
.calendar-preview time {
  display: grid;
  place-items: center;
  padding: 7px;
  border-radius: 11px;
  background: var(--brand-soft);
  color: var(--blue);
}
.calendar-preview time b {
  font-size: 18px;
}
.calendar-preview time span {
  font-size: 8px;
  font-weight: 800;
}
.calendar-preview strong,
.calendar-preview small {
  display: block;
}
.calendar-preview strong {
  font-size: 13px;
}
.calendar-preview small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 10px;
}
.leader-panel {
  margin-top: 14px;
  padding: 20px;
  border-radius: 20px;
  color: #fff;
  background: var(--bf-ink);
}
.leader-panel .eyebrow {
  color: #aebae6;
}
.leader-panel h3 {
  margin: 5px 0 15px;
}
.leader-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}
.leader-grid span {
  padding: 11px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  font-size: 10px;
}
.leader-grid b {
  display: block;
  margin-bottom: 3px;
  font-size: 17px;
}
.module-head,
.ads-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 8px 2px 16px;
}
.module-head h2,
.ads-toolbar h2 {
  margin: 5px 0 6px;
  font-size: 25px;
}
.module-head p:last-child {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.round-action {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font-size: 25px;
  font-weight: 700;
}
.shift-tabs,
.ads-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
  padding: 5px;
  border-radius: 13px;
  background: var(--brand-tab);
}
.shift-tabs button,
.ads-tabs button {
  flex: 1;
  padding: 9px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}
.shift-tabs .active,
.ads-tabs .active {
  background: #fff;
  color: var(--blue);
  box-shadow: 0 2px 8px rgba(16, 24, 40, 0.08);
}
.module-card {
  padding: 4px 18px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
}
.work-row {
  display: grid;
  grid-template-columns: 28px 1fr 32px;
  gap: 9px;
  align-items: center;
  padding: 16px 0;
  border-top: 1px solid var(--line);
}
.work-row:first-child {
  border-top: 0;
}
.work-row > span {
  font-size: 23px;
  color: var(--blue);
}
.work-row strong,
.work-row small {
  display: block;
}
.work-row strong {
  font-size: 13px;
}
.work-row small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 10px;
}
.work-row em {
  display: grid;
  place-items: center;
  width: 31px;
  height: 31px;
  border-radius: 50%;
  background: var(--brand-soft-strong);
  color: var(--blue);
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
}
.work-row.completed {
  opacity: 0.58;
}
.work-row.completed strong {
  text-decoration: line-through;
}
.voice-task-button {
  width: 100%;
  margin-top: 12px;
  padding: 15px;
  border: 1px solid var(--brand-border);
  border-radius: 14px;
  background: var(--brand-soft);
  color: var(--blue);
  font-weight: 800;
}
.leader-hint {
  margin-top: 12px;
  padding: 15px;
  border-radius: 14px;
  background: #fff8e8;
  color: #704d00;
}
.leader-hint strong {
  font-size: 12px;
}
.leader-hint p {
  margin: 5px 0 0;
  font-size: 10px;
  line-height: 1.45;
}
.voice-task-button-top {
  margin: 4px 0 12px;
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
  box-shadow: 0 8px 20px var(--brand-shadow);
}
.voice-status {
  margin: 8px 3px 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: #eef8f1;
  color: #176b39;
  font-size: 11px;
  line-height: 1.4;
}
.quick-add-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  margin-bottom: 12px;
  padding: 12px;
  border: 1px solid var(--brand-border);
  border-radius: 15px;
  background: var(--brand-soft);
}
.quick-add-form input {
  min-width: 0;
  padding: 11px;
  border: 1px solid var(--control-line);
  border-radius: 10px;
  background: #fff;
}
.quick-add-form button {
  padding: 0 15px;
  border: 0;
  border-radius: 10px;
  background: var(--blue);
  color: #fff;
  font-weight: 800;
}
.calendar-form {
  grid-template-columns: 1fr;
}
.calendar-form button {
  padding: 12px;
}
.task-toggle {
  padding: 0;
  border: 0;
  background: none;
  color: var(--blue);
  font-size: 23px;
}
.empty-list {
  padding: 18px 4px;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}
.calendar-form select {
  padding: 11px;
  border: 1px solid var(--control-line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  font-weight: 700;
}

.event-participants {
  display: grid;
  gap: 8px;
  max-height: 250px;
  overflow: auto;
  border: 1px solid var(--control-line);
  border-radius: 14px;
  padding: 12px;
}

.event-participants legend {
  padding: 0 6px;
  color: var(--secondary-ink);
  font-weight: 800;
}

.event-participants label {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 38px;
}

.event-participants input {
  width: 20px;
  height: 20px;
}

.event-participants .whole-store-choice {
  padding-bottom: 8px;
  border-bottom: 1px solid var(--divider);
  color: var(--blue);
  font-weight: 800;
}

.calendar-reminder-note {
  display: block;
  color: var(--secondary-ink);
  line-height: 1.4;
}
.task-add-form {
  grid-template-columns: 1fr;
}
.task-add-form select {
  padding: 11px;
  border: 1px solid var(--control-line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  font-weight: 700;
}
.task-add-form button {
  padding: 12px;
}
.task-add-form label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}
.task-add-form label input {
  width: 100%;
  color: var(--ink);
}
.template-bank-button {
  width: 100%;
  margin-bottom: 12px;
  padding: 13px;
  border: 1px solid var(--brand-border);
  border-radius: 13px;
  background: var(--brand-soft);
  color: var(--blue);
  font-weight: 800;
}
.template-picker {
  max-height: 440px;
  overflow: auto;
  margin-bottom: 14px;
  padding: 15px;
  border: 1px solid var(--brand-border);
  border-radius: 16px;
  background: #fff;
}
.template-picker > div {
  margin-bottom: 10px;
}
.template-picker > div strong,
.template-picker > div small {
  display: block;
}
.template-picker > div small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
}
.template-picker label {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 8px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}
.template-picker label b,
.template-picker label small {
  display: block;
}
.template-picker label b {
  font-size: 11px;
}
.template-picker label small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 9px;
}
.template-picker > button {
  width: 100%;
  padding: 12px;
  border: 0;
  border-radius: 10px;
  background: var(--blue);
  color: #fff;
  font-weight: 800;
}
.fixed-task {
  margin: 7px -10px;
  padding-left: 10px;
  padding-right: 10px;
  border: 1px solid var(--brand-border) !important;
  border-radius: 14px;
  background: var(--brand-soft);
}
.fixed-label {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 5px;
  border: 1px solid var(--brand-border);
  border-radius: 5px;
  background: #fff;
  color: var(--bf-accent-text, var(--blue));
  font-size: 7px;
  font-weight: 900;
  font-style: normal;
}
.task-status-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 8px;
}
.task-status-menu button {
  padding: 5px 7px;
  border: 1px solid var(--control-line);
  border-radius: 7px;
  background: #fff;
  color: var(--secondary-ink);
  font-size: 8px;
  font-weight: 800;
}
.task-comment {
  color: #a0442e !important;
}
.work-row > div {
  min-width: 0;
}
.template-row {
  padding: 8px 0 12px;
  border-top: 1px solid var(--line);
}
.template-row > label {
  border: 0;
  padding: 4px 0;
}
.template-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin-left: 30px;
}
.template-controls label {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  padding: 0;
  border: 0;
  color: var(--muted);
  font-size: 8px;
  font-weight: 800;
}
.template-controls select,
.template-controls input {
  width: 100%;
  padding: 7px;
  border: 1px solid var(--control-line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font-size: 10px;
}
.template-picker .new-template-button {
  margin-bottom: 10px;
  background: var(--brand-soft);
  color: var(--blue);
  border: 1px solid var(--brand-border);
}
.new-template-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 14px;
  padding: 12px;
  border-radius: 12px;
  background: var(--surface-tint);
}
.new-template-form > input {
  grid-column: 1/-1;
}
.new-template-form input,
.new-template-form select {
  width: 100%;
  padding: 9px;
  border: 1px solid var(--control-line);
  border-radius: 8px;
  background: #fff;
}
.new-template-form label {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  padding: 0;
  border: 0;
  color: var(--muted);
  font-size: 8px;
  font-weight: 800;
}
.new-template-form button {
  grid-column: 1/-1;
  padding: 10px;
  border: 0;
  border-radius: 8px;
  background: var(--blue);
  color: #fff;
  font-weight: 800;
}
.remove-template-button {
  margin: 8px 0 0 30px;
  padding: 6px 8px;
  border: 0;
  background: none;
  color: #a52828;
  font-size: 8px;
  font-weight: 800;
}
.task-add-form .save-fixed-choice {
  display: flex;
  grid-template-columns: none;
  align-items: center;
  gap: 8px;
  padding: 9px;
  border-radius: 9px;
  background: var(--brand-soft);
  color: var(--blue);
  font-size: 10px;
}
.save-fixed-choice input {
  width: auto !important;
}
.work-row.work-status-in_progress {
  background: #fff8df;
}
.work-row.work-status-cannot_do {
  background: #fff0ee;
}
.task-toggle.in_progress,
.work-status-in_progress .work-status-label {
  color: #a66b00;
}
.task-toggle.cannot_do,
.work-status-cannot_do .work-status-label {
  color: #b22f27;
}
.work-status-label {
  color: var(--blue);
}
.work-row.upsell-task {
  margin: 7px -10px;
  padding-left: 10px;
  padding-right: 10px;
  border: 1px solid #bfe3d5;
  border-radius: 14px;
  background: #effaf6;
}
.upsell-label {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 5px;
  border-radius: 5px;
  background: #ccefe1;
  color: #13704e;
  font-size: 7px;
  font-style: normal;
  font-weight: 900;
}
.calendar-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 7px;
  margin-bottom: 14px;
}
.calendar-strip button {
  display: grid;
  gap: 5px;
  padding: 11px 4px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #fff;
  color: var(--muted);
}
.calendar-strip small {
  font-size: 8px;
  font-weight: 800;
}
.calendar-strip b {
  font-size: 18px;
}
.calendar-strip .active {
  border-color: var(--blue);
  background: var(--blue);
  color: #fff;
}
.calendar-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 9px;
}
.calendar-nav button {
  width: 36px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--blue);
  font-size: 24px;
}
.calendar-nav strong {
  font-size: 12px;
}
.calendar-strip.seven {
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.calendar-strip.seven button {
  padding: 9px 2px;
}
.calendar-strip.seven b {
  font-size: 15px;
}
.calendar-strip.seven small {
  font-size: 7px;
}
.timeline {
  padding: 8px 18px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
}
.timeline article {
  display: grid;
  grid-template-columns: 65px 1fr;
  gap: 12px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
}
.timeline article:first-child {
  border-top: 0;
}
.timeline time {
  color: var(--blue);
  font-size: 11px;
  font-weight: 800;
}
.timeline strong,
.timeline small {
  display: block;
}
.timeline strong {
  font-size: 13px;
}
.timeline small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 10px;
}
.timeline .future {
  margin-top: 5px;
}
.timeline .future time {
  color: #a55c00;
}
.timeline .editable-event {
  cursor: pointer;
}
.timeline .editable-event:active {
  background: var(--brand-soft);
}
.edit-event-hint {
  color: var(--blue) !important;
  font-weight: 800;
}
.event-editor > strong {
  font-size: 13px;
}
.event-editor-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}
.event-editor-actions .secondary {
  background: #fff;
  color: var(--blue);
  border: 1px solid var(--brand-border);
}
.event-editor-actions .danger {
  grid-column: 1/-1;
  background: #fff;
  color: #a52828;
  border: 1px solid #efb8b8;
}
.task-date-strip {
  margin-bottom: 12px;
}
.calendar-legend {
  display: flex;
  gap: 14px;
  margin: 0 4px 9px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
}
.calendar-legend span:before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 5px;
  border-radius: 50%;
  vertical-align: middle;
}
.calendar-legend .event-dot:before {
  background: var(--blue);
}
.calendar-legend .task-dot:before {
  background: var(--task-accent);
}
.combined-timeline .calendar-entry {
  border-left: 4px solid var(--blue);
  padding-left: 10px;
}
.combined-timeline .calendar-task-entry {
  margin: 6px 0;
  border: 1px solid var(--task-line);
  border-left: 4px solid var(--task-accent);
  border-radius: 12px;
  padding: 13px 10px;
  background: var(--task-surface);
}
.combined-timeline .calendar-task-entry.task-in_progress {
  border-left-color: #d69a00;
  background: #fff8df;
}
.combined-timeline .calendar-task-entry.task-done {
  border-left-color: #29a061;
  background: #effaf3;
}
.combined-timeline .calendar-task-entry.task-cannot_do {
  border-left-color: #c9493d;
  background: #fff0ee;
}
.ads-toolbar select {
  padding: 10px;
  border: 1px solid var(--control-line);
  border-radius: 11px;
  background: #fff;
  color: var(--blue);
  font-size: 11px;
  font-weight: 800;
}
.empty-week {
  padding: 38px 24px;
  border: 1px dashed var(--control-line);
  border-radius: 20px;
  background: #fff;
  text-align: center;
}
.empty-week > span {
  font-size: 34px;
}
.empty-week h3 {
  margin: 12px 0 7px;
}
.empty-week p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}
.empty-week button {
  padding: 11px 14px;
  border: 0;
  border-radius: 10px;
  background: var(--blue);
  color: #fff;
  font-weight: 800;
}
.view-panel.hidden {
  display: none;
}
.more-page {
  padding: 16px 0 20px;
}
.more-page > h2 {
  margin: 5px 0 8px;
  font-size: 25px;
}
.more-intro {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}
.invite-card,
.settings-card {
  margin-bottom: 14px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.05);
}
.invite-card {
  display: grid;
  gap: 12px;
}
.invite-card h3,
.settings-card h3 {
  margin: 0 0 4px;
  font-size: 16px;
}
.task-detail-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 18px;
  background: rgba(16, 24, 40, 0.46);
}
.task-detail-sheet {
  width: min(100%, 520px);
  max-height: 88vh;
  overflow: auto;
  padding: 22px;
  border-radius: 22px 22px 16px 16px;
  background: #fff;
  box-shadow: 0 -10px 36px rgba(16, 24, 40, 0.18);
}
.task-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.task-detail-head h3 {
  margin: 3px 0 0;
  font-size: 22px;
}
.task-detail-head > button {
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--blue);
  font-size: 28px;
  line-height: 1;
}
.task-detail-sheet form,
.task-detail-sheet label {
  display: grid;
  gap: 8px;
}
.task-detail-sheet form {
  gap: 14px;
}
.task-detail-sheet label > span {
  color: #394150;
  font-size: 12px;
  font-weight: 800;
}
.task-detail-sheet input,
.task-detail-sheet select {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--control-line);
  border-radius: 11px;
  background: #fff;
  color: var(--ink);
  font: inherit;
}
.task-detail-sheet :disabled {
  opacity: 1;
  background: #f5f6fa;
  color: #667085;
}
.task-detail-comment,
.task-detail-readonly {
  margin: 0;
  padding: 12px;
  border-radius: 11px;
  background: #f5f6fa;
  color: #667085;
  font-size: 13px;
  line-height: 1.45;
}
.install-notification-card button {
  width: 100%;
  margin-top: 14px;
  padding: 14px 16px;
  border: 0;
  border-radius: 12px;
  background: var(--blue);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  box-shadow: 0 7px 17px var(--brand-shadow);
}
.install-notification-card .notification-test-button {
  margin-top: 9px;
  border: 1px solid var(--brand-border);
  background: var(--brand-soft);
  color: var(--blue);
  box-shadow: none;
}
.invite-card label {
  display: grid;
  gap: 6px;
  color: #394150;
  font-size: 12px;
  font-weight: 800;
}
.invite-card input,
.invite-card select,
.member-row select {
  width: 100%;
  padding: 11px;
  border: 1px solid var(--control-line);
  border-radius: 10px;
  background: #fff;
}
.invite-card button,
.logout-wide {
  padding: 13px;
  border: 0;
  border-radius: 11px;
  background: var(--blue);
  color: #fff;
  font-weight: 800;
}
.task-report {
  display: grid;
  gap: 10px;
}
.report-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.report-head h3 {
  margin-top: 3px;
}
.report-head select {
  padding: 8px;
  border: 1px solid var(--control-line);
  border-radius: 9px;
  background: #fff;
  color: var(--blue);
  font-size: 10px;
  font-weight: 800;
}
.employee-report-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto 42px;
  gap: 7px;
  align-items: center;
  padding: 11px 0;
  border-top: 1px solid var(--line);
}
.employee-report-row strong,
.employee-report-row small {
  display: block;
}
.employee-report-row strong {
  font-size: 11px;
}
.employee-report-row small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 8px;
}
.employee-report-row span {
  padding: 6px;
  border-radius: 8px;
  font-size: 8px;
}
.employee-report-row span b {
  font-size: 12px;
}
.report-done {
  background: #effaf3;
  color: #187345;
}
.report-missed {
  background: #fff0ee;
  color: #a52e27;
}
.employee-report-row em {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--blue);
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
}
.missed-details {
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.missed-details h4 {
  margin: 0 0 6px;
  font-size: 11px;
}
.missed-details article {
  padding: 9px 0;
  border-top: 1px solid var(--line);
}
.missed-details article strong,
.missed-details article small {
  display: block;
}
.missed-details article strong {
  font-size: 10px;
}
.missed-details article small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 8px;
}
.missed-details article p {
  margin: 5px 0 0;
  color: #a0442e;
  font-size: 9px;
}
.report-note {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 8px;
  line-height: 1.45;
}
@media (max-width: 520px) {
  .employee-report-row {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .employee-report-row > div {
    grid-column: 1/-1;
  }
  .employee-report-row em {
    position: absolute;
    right: 34px;
    margin-top: -48px;
  }
}
.invite-card button:disabled {
  opacity: 0.55;
}
.invite-card small {
  color: var(--muted);
  line-height: 1.4;
}
.settings-message {
  padding: 11px 13px;
  border-radius: 10px;
  background: #eef8f1;
  color: #176b39;
  font-size: 12px;
  line-height: 1.4;
}
.member-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 130px;
  gap: 8px 10px;
  align-items: center;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}
.member-row:first-of-type {
  border-top: 0;
}
.member-row div {
  min-width: 0;
}
.member-row strong,
.member-row small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}
.member-row strong {
  font-size: 13px;
}
.member-row small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
}
.member-row select {
  padding: 8px;
  font-size: 11px;
}
.text-action {
  grid-column: 2;
  justify-self: end;
  border: 0;
  background: none;
  color: #a52828;
  font-size: 10px;
  font-weight: 800;
}
.logout-wide {
  width: 100%;
  background: #fff;
  color: #a52828;
  border: 1px solid #efcaca;
}
.topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 0 15px;
}
.brand-mark {
  display: grid;
  place-items: center;
  width: 43px;
  height: 43px;
  color: #fff;
  background: var(--blue);
  border-radius: 11px;
  font-size: 24px;
  font-weight: 900;
  box-shadow:
    inset 0 0 0 3px #fff,
    0 0 0 2px var(--blue);
}
.brand-bunnpris .brand-mark {
  width: 112px;
  height: 43px;
  border-radius: 8px;
  background: #282a27;
  color: #f4c618;
  box-shadow: 0 0 0 2px #f4c618;
  font-size: 17px;
  letter-spacing: .5px;
}
.brand-bunnpris {
  --blue: #9b6d00;
  --ink: #282a27;
  --muted: #706b61;
  --line: #e5d8b8;
  --bg: #fbf7ee;
  --brand-soft: #fff8dc;
  --brand-soft-strong: #ffefad;
  --brand-tab: #eee8dc;
  --brand-border: #d6ab25;
  --brand-hero-start: #282a27;
  --brand-hero-end: #171817;
  --brand-hero-kicker: #f4c618;
  --brand-hero-copy: #f8e69c;
  --brand-shadow: rgba(86, 61, 0, .14);
  --control-line: #ded5c3;
  --secondary-ink: #706b61;
  --divider: #e8e0d2;
  --surface-tint: #fbf7ee;
  --task-accent: #9b6d00;
  --task-line: #e5d8b8;
  --task-surface: #fff8dc;
  background: #fbf7ee;
}
.brand-bunnpris .ads-hub {
  color: #282a27;
}
.brand-bunnpris .ads-toolbar .eyebrow,
.brand-bunnpris .planner-head .eyebrow,
.brand-bunnpris .price,
.brand-bunnpris .offer-copy b,
.brand-bunnpris .source-tag,
.brand-bunnpris .ads-tabs .active {
  color: #9b6d00;
}
.brand-bunnpris .ads-tabs {
  background: #eee8dc;
}
.brand-bunnpris .planner-head,
.brand-bunnpris .week-head {
  color: #fff;
  background: linear-gradient(145deg, #282a27, #171817);
  box-shadow: 0 12px 28px rgba(40, 42, 39, .16);
}
.brand-bunnpris .planner-head > p:not(.eyebrow),
.brand-bunnpris .planner-head .eyebrow {
  color: #f8e69c;
}
.brand-bunnpris .offer-card {
  border-color: #e5d8b8;
  background: #fffdf8;
  box-shadow: 0 7px 22px rgba(86, 61, 0, .06);
}
.brand-bunnpris .offer-card.selected {
  border-color: #d6ab25;
  background: #fff8dd;
  box-shadow: 0 8px 24px rgba(155, 109, 0, .12);
}
.brand-bunnpris .source-tag {
  background: #ffefad;
}
.brand-bunnpris .offer-check {
  accent-color: #f4c618;
}
.brand-bunnpris .round-action,
.brand-bunnpris button.primary,
.brand-bunnpris .primary-button {
  background: #282a27;
  color: #fff;
}
.topbar h1 {
  font-size: 17px;
  margin: 2px 0 0;
}
.eyebrow {
  margin: 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.15px;
  color: var(--muted);
}
.eyebrow.blue {
  color: var(--blue);
}
.profile-button {
  margin-left: auto;
  border: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--brand-tab);
  color: var(--blue);
  font-weight: 800;
}
.week-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 21px;
  border-radius: 20px;
  color: #fff;
  background: linear-gradient(135deg, var(--brand-hero-start), var(--brand-hero-end));
  box-shadow: 0 12px 28px var(--brand-shadow);
}
.planner-head {
  padding: 23px 21px 20px;
  border-radius: 20px;
  color: #fff;
  background: linear-gradient(135deg, var(--brand-hero-start), var(--brand-hero-end));
  box-shadow: 0 12px 28px var(--brand-shadow);
}
.planner-head .eyebrow {
  color: var(--brand-hero-kicker);
}
.planner-head h2 {
  margin: 6px 0 7px;
  font-size: 26px;
  letter-spacing: -0.8px;
}
.planner-head > p:not(.eyebrow) {
  margin: 0;
  color: var(--brand-hero-copy);
  font-size: 13px;
  line-height: 1.45;
}
.planner-counts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  margin-top: 18px;
}
.planner-counts span {
  padding: 9px 5px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.12);
  text-align: center;
  font-size: 10px;
}
.planner-counts strong {
  display: block;
  margin-bottom: 2px;
  font-size: 17px;
}
.occasion-alert {
  display: grid;
  grid-template-columns: 38px 1fr auto;
  gap: 10px;
  align-items: center;
  margin-top: 13px;
  padding: 14px;
  border: 1px solid #f2d79d;
  border-radius: 16px;
  background: #fff9ea;
}
.occasion-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: #ffe6ae;
  font-size: 19px;
}
.occasion-alert > div:nth-child(2) {
  min-width: 0;
  display: grid;
}
.occasion-alert strong {
  margin-top: 3px;
  font-size: 12px;
}
.occasion-alert span {
  margin-top: 3px;
  color: #765a25;
  font-size: 9px;
  line-height: 1.35;
}
.occasion-alert button {
  padding: 7px;
  border: 0;
  border-radius: 9px;
  background: #fff;
  color: #8a5a00;
  font-size: 9px;
  font-weight: 800;
}
.event-calendar {
  margin-top: 10px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: #fff;
}
.event-calendar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.event-calendar-head h3 {
  margin: 4px 0 0;
  font-size: 17px;
}
.event-calendar-head > span {
  padding: 5px 8px;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--blue);
  font-size: 10px;
  font-weight: 800;
}
.event-row {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 10px;
  padding: 11px 0;
  border-top: 1px solid var(--line);
}
.event-date {
  display: grid;
  align-content: center;
  padding: 7px;
  border-radius: 10px;
  background: var(--surface-tint);
  text-align: center;
}
.event-date strong {
  font-size: 12px;
}
.event-date small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 9px;
}
.event-row > div:last-child {
  display: grid;
}
.event-row i {
  justify-self: start;
  color: #b54708;
  font-size: 8px;
  font-style: normal;
  font-weight: 800;
  text-transform: uppercase;
}
.event-row > div > strong {
  margin-top: 3px;
  font-size: 12px;
}
.event-row p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.35;
}
.calendar-source {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.4;
}
.offer-list {
  display: grid;
  gap: 11px;
  margin: 15px 0;
}
.offer-card {
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 5px 18px rgba(16, 24, 40, 0.04);
}
.offer-card.selected {
  border-color: var(--brand-border);
  box-shadow: 0 7px 20px var(--brand-shadow);
}
.offer-card.produced-offer {
  border-color: #e8c86d;
  background: #fffaf0;
}
.offer-card.published-offer {
  border-color: #6fc79a;
  background: #effaf4;
}
.offer-progress-badge {
  justify-self: start;
  margin-top: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
}
.offer-progress-badge.produced {
  background: #fff1c7;
  color: #8a5a00;
}
.offer-progress-badge.published {
  background: #dff5e9;
  color: #08783e;
}
.offer-main {
  display: grid;
  grid-template-columns: 22px 78px 1fr;
  gap: 10px;
  align-items: center;
  cursor: pointer;
}
.offer-check {
  width: 19px;
  height: 19px;
  accent-color: var(--blue);
}
.offer-thumb {
  width: 78px;
  height: 93px;
  border: 1px solid var(--line);
  border-radius: 10px;
  object-fit: contain;
  background: #fff;
}
.offer-copy {
  min-width: 0;
  display: grid;
}
.source-tag {
  justify-self: start;
  margin-bottom: 5px;
  padding: 3px 6px;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--blue);
  font-size: 8px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.35px;
  text-transform: uppercase;
}
.source-tag.regional {
  background: #eaf8f0;
  color: #067647;
}
.offer-copy strong {
  font-size: 14px;
  line-height: 1.2;
}
.offer-copy small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.3;
}
.offer-copy b {
  margin-top: 7px;
  color: var(--blue);
  font-size: 24px;
  line-height: 1;
}
.offer-copy em {
  margin-top: 4px;
  color: #667085;
  font-size: 9px;
  font-style: normal;
}
.offer-options {
  margin-top: 13px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.offer-setup-panel {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}
.upsell-box {
  margin-top: 12px;
  padding: 12px;
  border-radius: 12px;
  background: var(--brand-soft);
}
.upsell-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.upsell-heading .field-label {
  margin-bottom: 3px;
}
.upsell-heading strong {
  font-size: 12px;
}
.upsell-heading > span {
  padding: 4px 6px;
  border-radius: 999px;
  background: #fff;
  color: var(--muted);
  font-size: 8px;
  font-weight: 800;
}
.upsell-box > p {
  margin: 7px 0;
  color: #596171;
  font-size: 10px;
  line-height: 1.35;
}
.ai-upsell-button {
  width: 100%;
  min-height: 44px;
  margin: 4px 0 9px;
  border: 2px solid #282a27;
  border-radius: 11px;
  background: #282a27;
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}
.ai-upsell-button:disabled {
  cursor: wait;
  opacity: .65;
}
.ai-upsell-status {
  display: block;
  margin: 0 0 9px;
  color: #55420a;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
}
.ai-upsell-selection {
  display: grid;
  gap: 4px;
  margin: 0 0 10px;
  padding: 10px 12px;
  border: 1px solid #d9b52b;
  border-radius: 10px;
  background: #fff;
  color: #3c310c;
}
.ai-upsell-selection strong {
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.ai-upsell-selection span {
  font-size: 13px;
  font-weight: 800;
  line-height: 1.45;
}
.upsell-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.upsell-chips button {
  padding: 6px 8px;
  border: 1px solid var(--brand-tab);
  border-radius: 999px;
  background: #fff;
  color: var(--blue);
  font-size: 9px;
  font-weight: 800;
}
.upsell-chips button.active {
  border-color: #12a45d;
  background: #eaf8f0;
  color: #067647;
}
.upsell-box > small {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: 8px;
  line-height: 1.35;
}
.chosen-upsells {
  margin: 0 0 13px;
  padding: 10px;
  border-radius: 10px;
  background: #f0fbf5;
  color: #067647;
}
.chosen-upsells strong {
  font-size: 10px;
  text-transform: uppercase;
}
.chosen-upsells p {
  margin: 4px 0 0;
  font-size: 11px;
}
.overview-upsell {
  margin-top: 5px;
  color: #067647 !important;
  font-size: 8px !important;
  line-height: 1.3;
}
.field-label {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.55px;
}
.mode-toggle {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 7px;
}
.mode-toggle button {
  min-height: 39px;
  padding: 7px;
  border: 2px solid #b9b4aa;
  border-radius: 10px;
  background: #fff;
  color: #282a27;
  font-size: 11px;
  font-weight: 800;
}
.mode-toggle button.active {
  border-color: #282a27;
  background: #f4c618;
  color: #282a27;
  box-shadow: inset 0 0 0 1px #282a27;
}
.schedule-row {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 8px;
  margin-top: 11px;
}
.schedule-row select,
.schedule-row input {
  width: 100%;
  height: 42px;
  padding: 0 10px;
  border: 1px solid #dfe3ec;
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  font-size: 13px;
}
.selected-publication-day {
  display: block;
  margin-top: 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: capitalize;
}
.plan-summary {
  margin: 0 0 15px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
}
.day-load {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
  margin: 12px 0 15px;
}
.day-load span {
  display: grid;
  place-items: center;
  min-height: 50px;
  border-radius: 9px;
  background: #f2f4f7;
  color: #98a2b3;
}
.day-load span.has-ads {
  background: var(--brand-soft);
  color: var(--blue);
}
.day-load span.produced-day {
  background: #fff1c7;
  color: #8a5a00;
}
.day-load span.published-day {
  background: #dff5e9;
  color: #08783e;
}
.day-load b {
  font-size: 8px;
  text-transform: uppercase;
}
.day-load strong {
  font-size: 17px;
}
.day-load small {
  font-size: 6px;
  font-weight: 700;
  white-space: nowrap;
}
.save-plan {
  width: 100%;
  min-height: 49px;
  border: 0;
  border-radius: 13px;
  background: var(--blue);
  color: #fff;
  font-weight: 800;
  box-shadow: 0 7px 17px var(--brand-shadow);
}
.save-plan:disabled {
  background: #aeb4c5;
  box-shadow: none;
}
.saved-banner {
  margin: 11px 0 0;
  padding: 11px;
  border-radius: 10px;
  background: #eaf8f0;
  color: #067647;
  font-size: 12px;
  line-height: 1.4;
  font-weight: 700;
}
.compose-head {
  margin-bottom: 15px;
}
.composer-list {
  display: grid;
  gap: 12px;
}
.composer-card {
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 7px 22px rgba(16, 24, 40, 0.05);
}
.composer-workspace,
.composer-media-column,
.composer-copy-column {
  display: grid;
  gap: 12px;
}
.composer-copy-column {
  align-content: start;
}
.composer-media-column .chosen-upsells {
  margin-bottom: 0;
}
.composer-media-column .composer-camera {
  margin-bottom: 0;
}
.composer-card.produced-composer {
  border-color: #e8c86d;
  background: #fffaf0;
}
.composer-card.published-composer {
  border-color: #6fc79a;
  background: #effaf4;
  box-shadow: 0 7px 20px rgba(8, 120, 62, 0.08);
}
.composer-card.published-composer .create-ad-button {
  background: #149556;
  color: #fff;
  opacity: 1;
}
.composer-product {
  display: grid;
  grid-template-columns: 25px 74px 1fr;
  gap: 9px;
  align-items: center;
  margin-bottom: 14px;
}
.composer-number {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
}
.composer-product img {
  width: 74px;
  height: 88px;
  border: 1px solid var(--line);
  border-radius: 9px;
  object-fit: contain;
}
.composer-product div {
  min-width: 0;
  display: grid;
}
.composer-product small {
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
}
.composer-product strong {
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.2;
}
.composer-product b {
  margin-top: 5px;
  color: var(--blue);
  font-size: 20px;
}
.composer-product em {
  margin-top: 3px;
  color: #667085;
  font-size: 9px;
  font-style: normal;
}
.tone-toggle {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}
.composer-camera {
  margin: 0 0 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.camera-empty {
  min-height: 112px;
  display: grid;
  place-content: center;
  gap: 4px;
  border: 2px dashed #cfd5e1;
  border-radius: 12px;
  background: #f8f9fc;
  color: var(--muted);
  text-align: center;
}
.camera-empty > span {
  font-size: 25px;
}
.camera-empty strong {
  color: var(--ink);
  font-size: 13px;
}
.camera-empty small {
  font-size: 10px;
}
.store-photo-preview {
  width: 100%;
  height: 230px;
  border-radius: 12px;
  object-fit: cover;
}
.camera-button {
  min-height: 43px;
  display: grid;
  place-items: center;
  margin-top: 8px;
  border-radius: 11px;
  background: var(--brand-soft);
  color: var(--blue);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.camera-button input {
  display: none;
}
.photo-upload-status {
  margin: 8px 0 0;
  color: #176b39;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
}
.photo-upload-status.error {
  color: #a52828;
}
.ai-ad-context-note {
  margin: 0;
  padding: 10px 12px;
  border-left: 4px solid #f4c618;
  border-radius: 0 10px 10px 0;
  background: #fff9df;
  color: #554f42;
  font-size: 12px;
  line-height: 1.45;
}
.tone-toggle button {
  min-height: 38px;
  padding: 6px;
  border: 1px solid #dfe3ec;
  border-radius: 10px;
  background: #f8f9fc;
  color: #596171;
  font-size: 10px;
  font-weight: 800;
}
.tone-toggle button.active {
  border-color: var(--blue);
  background: var(--brand-soft);
  color: var(--blue);
}
.own-copy {
  width: 100%;
  min-height: 100px;
  margin-top: 9px;
  padding: 11px;
  resize: vertical;
  border: 1px solid #dfe3ec;
  border-radius: 10px;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  line-height: 1.45;
}
.create-ad-button {
  width: 100%;
  min-height: 44px;
  margin-top: 10px;
  border: 0;
  border-radius: 11px;
  background: var(--blue);
  color: #fff;
  font-weight: 800;
}
.create-ad-button:disabled {
  background: #aeb4c5;
  cursor: not-allowed;
}
.photo-required {
  margin: 7px 0 0;
  color: #b54708;
  font-size: 10px;
  text-align: center;
}
.generated-copy {
  margin-top: 10px;
  padding: 12px;
  border-radius: 11px;
  background: var(--brand-soft);
  color: #30384b;
  font-size: 12px;
  line-height: 1.45;
}

.share-facebook-button {
  width: 100%;
  margin-top: 12px;
  border: 0;
  border-radius: 14px;
  padding: 13px 16px;
  background: #1877f2;
  color: #fff;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.share-facebook-button:active {
  transform: translateY(1px);
}

.share-help,
.share-notice {
  display: block;
  margin-top: 8px;
}

.facebook-connection-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 16px 0;
  padding: 16px;
  border: 1px solid #dbe7df;
  border-radius: 16px;
  background: #f7fbf8;
}

.facebook-connection-card div {
  display: grid;
  gap: 4px;
}

.facebook-connection-card small {
  color: #667085;
  font-weight: 800;
}

.connect-facebook-button {
  border-radius: 12px;
  padding: 11px 14px;
  background: #1877f2;
  color: #fff;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}
.disconnect-facebook-button {
  border: 1px solid #f0b4b4;
  background: #fff;
  color: #a32626;
  border-radius: 12px;
  padding: 10px 12px;
  font-weight: 800;
}
.manual-post-actions {
  display: flex !important;
  gap: 6px;
  margin-top: 8px;
}
.manual-post-actions button,
.manual-post-actions a {
  border: 1px solid #cfd6ea;
  background: var(--brand-soft);
  color: var(--blue);
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 9px;
  font-weight: 800;
  text-decoration: none;
}
.manual-notice {
  color: #067647 !important;
  margin-top: 5px;
}
.manual-facebook-card {
  margin-top: 14px;
  padding: 15px;
  border: 1px solid #d9dfed;
  border-radius: 14px;
  background: #f8f9fc;
}
.manual-facebook-card strong {
  font-size: 13px;
}
.manual-facebook-card p {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
  margin: 7px 0 11px;
}
.manual-facebook-card > a {
  display: block;
  background: #1877f2;
  color: #fff;
  text-align: center;
  text-decoration: none;
  border-radius: 11px;
  padding: 11px;
  font-weight: 800;
}
.status-not-sent {
  color: #7a8190 !important;
  background: #f2f4f7 !important;
}
.manual-status-actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 7px;
}
.manual-status-actions button {
  border: 1px solid #d8ddea;
  background: #fff;
  color: #626b7b;
  border-radius: 8px;
  padding: 7px 5px;
  font-size: 8px;
  font-weight: 800;
}
.manual-status-actions button.active {
  color: var(--blue);
  border-color: var(--brand-border);
  background: var(--brand-soft);
}
.manual-status-actions button.active.published {
  color: #067647;
  border-color: #9bd5b5;
  background: #eaf8f0;
}

.saved-banner.error {
  color: #991b1b;
  background: #fef2f2;
}

.share-help {
  color: #667085;
}

.share-notice {
  color: #166534;
  font-weight: 700;
}
.generated-copy img {
  width: 100%;
  max-height: 260px;
  margin-top: 9px;
  border-radius: 10px;
  object-fit: contain;
  background: #fff;
}
.generated-copy p:last-child {
  margin: 6px 0 0;
}
.back-to-plan {
  width: 100%;
  min-height: 47px;
  margin: 13px 0 0;
  border: 1px solid #dfe3ec;
  border-radius: 12px;
  background: #fff;
  color: var(--blue);
  font-weight: 800;
}
.compose-progress,
.submit-week {
  margin-top: 13px;
  padding: 17px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: #fff;
}
.compose-progress > p,
.submit-week > p:first-child {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}
.compose-progress strong,
.submit-week strong {
  color: var(--ink);
}
.week-overview {
  display: grid;
  gap: 9px;
}
.overview-row {
  display: grid;
  grid-template-columns: 47px 68px 1fr;
  gap: 9px;
  align-items: center;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: #fff;
}
.overview-time {
  display: grid;
  gap: 3px;
  color: var(--blue);
  text-align: center;
  text-transform: uppercase;
}
.overview-time b {
  font-size: 10px;
}
.overview-time strong {
  font-size: 12px;
}
.overview-row > img {
  width: 68px;
  height: 78px;
  border: 1px solid var(--line);
  border-radius: 9px;
  object-fit: contain;
}
.overview-copy {
  min-width: 0;
  display: grid;
}
.overview-copy > small {
  color: var(--muted);
  font-size: 8px;
  font-weight: 800;
}
.overview-copy > strong {
  margin-top: 3px;
  font-size: 13px;
  line-height: 1.2;
}
.overview-copy > span {
  margin-top: 3px;
  color: var(--blue);
  font-size: 16px;
  font-weight: 900;
}
.overview-copy > div {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}
.overview-copy i {
  padding: 3px 5px;
  border-radius: 999px;
  font-size: 8px;
  font-style: normal;
  font-weight: 800;
}
.status-ready {
  background: #eaf8f0;
  color: #067647;
}
.status-planned {
  background: var(--brand-soft);
  color: var(--blue);
}
.week-head .eyebrow {
  color: var(--brand-border);
}
.week-head h2 {
  margin: 5px 0 3px;
  font-size: 25px;
  letter-spacing: -0.8px;
}
.week-head p:last-child {
  margin: 0;
  color: var(--brand-border);
  font-size: 13px;
}
.progress-ring {
  width: 62px;
  height: 62px;
  display: grid;
  place-content: center;
  border: 5px solid rgba(255, 255, 255, 0.24);
  border-top-color: #fff;
  border-radius: 50%;
  text-align: center;
}
.progress-ring strong {
  font-size: 21px;
}
.progress-ring span {
  font-size: 12px;
  opacity: 0.7;
}
.day-strip {
  display: flex;
  gap: 8px;
  overflow: auto;
  padding: 18px 1px 14px;
  scrollbar-width: none;
}
.day {
  min-width: 67px;
  padding: 10px 8px 9px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  color: var(--muted);
  text-align: center;
}
.day span {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: 0.7px;
}
.day strong {
  display: block;
  margin: 3px 0 6px;
  color: var(--ink);
  font-size: 18px;
}
.day.active {
  border: 2px solid var(--blue);
  background: var(--brand-soft);
  color: var(--blue);
  box-shadow: 0 5px 14px var(--brand-shadow);
}
.dot {
  display: block;
  margin: auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.dot.orange {
  background: #f79009;
}
.dot.green {
  background: #12b76a;
}
.task-card {
  padding: 22px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: 0 12px 32px rgba(16, 24, 40, 0.07);
}
.task-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 20px;
  color: var(--muted);
  font-size: 11px;
}
.pill {
  padding: 6px 9px;
  border-radius: 999px;
  font-weight: 800;
}
.orange-pill {
  background: #fff1df;
  color: #b54708;
}
.green-pill {
  background: #e8f8ef;
  color: #067647;
}
.task-card h2 {
  margin: 7px 0 0;
  font-size: 23px;
  line-height: 1.15;
  letter-spacing: -0.65px;
}
.price {
  margin: 13px 0 8px;
  color: var(--blue);
  font-size: 38px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -1.4px;
}
.task-details {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}
.asset-strip {
  margin: 4px 0 16px;
  display: grid;
  gap: 8px;
}
.asset-strip.multi {
  grid-template-columns: repeat(2, 1fr);
}
.asset-strip img {
  width: 100%;
  max-height: 320px;
  object-fit: contain;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #fff;
}
.asset-strip.multi img {
  max-height: 210px;
}
.capture-area {
  display: grid;
  gap: 10px;
}
.camera-placeholder {
  min-height: 156px;
  display: grid;
  place-content: center;
  gap: 5px;
  border: 2px dashed #cfd5e1;
  border-radius: 16px;
  background: #f8f9fc;
  text-align: center;
  color: var(--muted);
}
.camera-placeholder span {
  margin: auto;
  display: grid;
  place-items: center;
  width: 43px;
  height: 43px;
  border-radius: 50%;
  color: #fff;
  background: var(--blue);
  font-size: 27px;
}
.camera-placeholder strong {
  color: var(--ink);
  font-size: 14px;
}
.camera-placeholder small {
  font-size: 11px;
}
.photo-preview {
  width: 100%;
  height: 240px;
  border-radius: 16px;
  object-fit: cover;
}
.primary-button,
.secondary-button {
  width: 100%;
  min-height: 49px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 13px;
  font-weight: 800;
  text-align: center;
}
.primary-button {
  color: #fff;
  background: var(--blue);
  box-shadow: 0 7px 17px var(--brand-shadow);
}
.primary-button input {
  display: none;
}
.secondary-button {
  background: var(--brand-soft);
  color: var(--blue);
}
.notice {
  margin: 13px 0 0;
  padding: 11px;
  border-radius: 11px;
  background: #eaf8f0;
  color: #067647;
  font-size: 13px;
  font-weight: 700;
}
.safety-note {
  display: flex;
  gap: 12px;
  margin: 14px 0;
  padding: 16px;
  border-radius: 15px;
  border: 1px solid #cfe9da;
  background: #f0fbf5;
}
.safety-note > span {
  display: grid;
  place-items: center;
  flex: 0 0 25px;
  height: 25px;
  border-radius: 50%;
  background: #12b76a;
  color: #fff;
  font-weight: 900;
}
.safety-note strong {
  font-size: 13px;
}
.safety-note p {
  margin: 3px 0 0;
  color: #52715f;
  font-size: 12px;
  line-height: 1.35;
}
.bottom-nav {
  position: fixed;
  z-index: 5;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(520px, 100%);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  padding: 10px 12px 16px;
  background: rgba(255, 255, 255, 0.96);
  border-top: 1px solid var(--line);
  backdrop-filter: blur(12px);
}
.bottom-nav button {
  display: grid;
  gap: 3px;
  border: 0;
  background: none;
  color: #7a8190;
  font-size: 9px;
  font-weight: 700;
}
.bottom-nav span {
  font-size: 19px;
}
.bottom-nav .selected {
  color: var(--blue);
}
.role-manager .bottom-nav,.role-admin .bottom-nav{grid-template-columns:repeat(6,1fr)}
.ad-preview {
  margin-top: 14px;
  padding: 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: 0 12px 32px rgba(16, 24, 40, 0.07);
}
.preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.preview-head h2 {
  margin: 4px 0 13px;
  font-size: 20px;
}
.preview-head > span {
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--blue);
  font-size: 11px;
  font-weight: 800;
}
.ad-preview > img {
  width: 100%;
  max-height: 300px;
  object-fit: cover;
  border-radius: 14px;
}
.preview-assets {
  display: grid;
  gap: 8px;
}
.preview-assets.multi {
  grid-template-columns: repeat(2, 1fr);
}
.preview-assets img {
  width: 100%;
  max-height: 420px;
  object-fit: contain;
  border: 1px solid var(--line);
  border-radius: 14px;
}
.preview-assets.multi img {
  max-height: 260px;
}
.post-copy {
  padding: 14px 2px 9px;
  font-size: 14px;
  line-height: 1.45;
}
.post-copy p {
  margin: 7px 0;
}
.consent {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 5px 0 14px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}
.consent input {
  margin-top: 2px;
  accent-color: var(--blue);
}
.publish-button {
  width: 100%;
  min-height: 49px;
  border: 0;
  border-radius: 13px;
  background: #12a45d;
  color: #fff;
  font-weight: 800;
}
.publish-button:disabled {
  background: #8bd0ad;
}
.connection-note {
  text-align: center;
  color: var(--muted);
  font-size: 11px;
  margin: 9px 0 0;
}

.recurring-settings {
  margin-top: 18px;
}

.routine-library,
.leader-tool-drawer {
  overflow: hidden;
}

.routine-library > summary,
.leader-tool-drawer > summary,
.routine-guide > summary {
  cursor: pointer;
  list-style: none;
}

.routine-library > summary::-webkit-details-marker,
.leader-tool-drawer > summary::-webkit-details-marker,
.routine-guide > summary::-webkit-details-marker {
  display: none;
}

.routine-library > summary,
.leader-tool-drawer > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
}

.routine-library > summary::after,
.leader-tool-drawer > summary::after,
.routine-guide > summary::after {
  content: "+";
  color: var(--blue);
  font-size: 1.6rem;
  font-weight: 700;
}

.routine-library[open] > summary::after,
.leader-tool-drawer[open] > summary::after,
.routine-guide[open] > summary::after {
  content: "−";
}

.routine-library summary span,
.leader-tool-drawer summary span,
.routine-guide summary span {
  display: grid;
  gap: 4px;
}

.routine-library summary small,
.leader-tool-drawer summary small,
.routine-guide summary small {
  color: var(--secondary-ink);
  font-weight: 500;
}

.routine-library > input {
  width: 100%;
  margin: 12px 0 16px;
  padding: 14px;
  border: 1px solid var(--control-line);
  border-radius: 14px;
  font: inherit;
}

.routine-guide-list {
  display: grid;
  gap: 10px;
}

.routine-guide {
  padding: 14px 16px;
  border: 1px solid #dce2ee;
  border-radius: 16px;
  background: #f8f9fd;
}

.routine-guide > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.routine-guide p {
  margin: 14px 0 10px;
  line-height: 1.45;
}

.routine-guide div {
  padding: 10px 12px;
  border-radius: 10px;
  background: #eaf7f0;
  color: #17673d;
  line-height: 1.4;
}

.routine-guide video,
.install-video-guide video {
  width: 100%;
  max-height: 560px;
  margin: 12px 0;
  border-radius: 16px;
  background: var(--bf-ink);
}

.installation-platforms {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 14px 0;
}

.installation-platforms button {
  min-height: 44px;
  border: 1px solid var(--brand-border);
  border-radius: 12px;
  background: #fff;
  color: #536079;
  font-weight: 700;
}

.installation-platforms button.active {
  border-color: var(--blue);
  background: var(--brand-soft-strong);
  color: var(--blue);
}

.installation-videos video {
  display: block;
  width: 100%;
  max-height: 70vh;
  border-radius: 18px;
  background: var(--bf-ink);
}

.install-video-guide {
  margin: 14px 0;
  border: 1px solid var(--brand-border);
  border-radius: 14px;
  padding: 12px;
  background: var(--brand-soft);
}

.install-video-guide summary {
  cursor: pointer;
  color: var(--blue);
  font-weight: 800;
}

.leader-tool-drawer {
  margin-top: 18px;
  border: 1px solid var(--control-line);
  border-radius: 20px;
  background: #fff;
}

.leader-tool-drawer > summary {
  padding: 18px 22px;
}

.leader-tool-drawer .recurring-settings {
  margin: 0;
  border: 0;
  border-top: 1px solid var(--divider);
  border-radius: 0;
}

.routine-library,
.leader-tool-drawer {
  overflow: hidden;
}

.routine-library > summary,
.leader-tool-drawer > summary,
.routine-guide > summary {
  cursor: pointer;
  list-style: none;
}

.routine-library > summary::-webkit-details-marker,
.leader-tool-drawer > summary::-webkit-details-marker,
.routine-guide > summary::-webkit-details-marker {
  display: none;
}

.routine-library > summary,
.leader-tool-drawer > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
}

.routine-library > summary::after,
.leader-tool-drawer > summary::after,
.routine-guide > summary::after {
  content: "+";
  color: var(--blue);
  font-size: 1.6rem;
  font-weight: 700;
}

.routine-library[open] > summary::after,
.leader-tool-drawer[open] > summary::after,
.routine-guide[open] > summary::after {
  content: "−";
}

.routine-library summary span,
.leader-tool-drawer summary span,
.routine-guide summary span {
  display: grid;
  gap: 4px;
}

.routine-library summary small,
.leader-tool-drawer summary small,
.routine-guide summary small {
  color: var(--secondary-ink);
  font-weight: 500;
}

.routine-library > input {
  width: 100%;
  margin: 12px 0 16px;
  padding: 14px;
  border: 1px solid var(--control-line);
  border-radius: 14px;
  font: inherit;
}

.routine-guide-list {
  display: grid;
  gap: 10px;
}

.routine-guide {
  padding: 14px 16px;
  border: 1px solid #dce2ee;
  border-radius: 16px;
  background: #f8f9fd;
}

.routine-guide > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.routine-guide p {
  margin: 14px 0 10px;
  line-height: 1.45;
}

.routine-guide div {
  padding: 10px 12px;
  border-radius: 10px;
  background: #eaf7f0;
  color: #17673d;
  line-height: 1.4;
}

.leader-tool-drawer {
  margin-top: 18px;
  border: 1px solid var(--control-line);
  border-radius: 20px;
  background: #fff;
}

.leader-tool-drawer > summary {
  padding: 18px 22px;
}

.leader-tool-drawer .recurring-settings {
  margin: 0;
  border: 0;
  border-top: 1px solid var(--divider);
  border-radius: 0;
}
.recurring-settings h3 {
  margin: 4px 0 8px;
}
.prominent-template-button {
  width: 100%;
  min-height: 52px;
  margin-top: 8px;
}
.weekday-picker {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin: 4px 0 8px;
  padding: 0;
  border: 0;
}
.weekday-picker legend {
  grid-column: 1 / -1;
  margin-bottom: 7px;
  font-size: 13px;
  font-weight: 800;
}
.weekday-picker button {
  min-height: 40px;
  padding: 5px 2px;
  border: 1px solid var(--brand-border);
  border-radius: 10px;
  background: #fff;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}
.weekday-picker button.active {
  border-color: var(--blue);
  background: var(--blue);
  color: #fff;
}
.weekday-picker.compact {
  margin-top: 12px;
}
.legacy-schedule-note {
  margin: 4px 0 10px;
  color: #8a6400;
}
.daily-shift-grid {
  display: grid;
  gap: 8px;
  margin: 8px 0 12px;
}
.daily-shift-grid > strong {
  margin-bottom: 2px;
}
.daily-shift-grid label {
  display: grid;
  grid-template-columns: 72px 1fr;
  align-items: center;
  gap: 10px;
}
.daily-shift-grid label span {
  font-weight: 800;
}
.daily-shift-grid select {
  min-height: 42px;
}
.recurring-template-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}
.recurring-settings .template-row {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--brand-soft);
}
.recurring-settings .template-row > label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.recurring-settings .template-row span,
.recurring-settings .template-row small {
  display: block;
}
.recurring-period-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 16px;
}
.recurring-period-actions strong {
  grid-column: 1 / -1;
}
.recurring-period-actions button {
  min-height: 48px;
  padding: 8px;
  border: 1px solid var(--brand-border);
  border-radius: 13px;
  background: var(--brand-soft);
  color: var(--blue);
  font-weight: 800;
}
.reset-task-period {
  margin-top: 18px;
  padding: 14px;
  border: 1px solid #f1c9c5;
  border-radius: 16px;
  background: #fff8f7;
}
.reset-task-period p {
  margin: 4px 0 12px;
  color: var(--muted);
  font-size: 13px;
}
.reset-specific-date {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 8px;
  margin-bottom: 10px;
}
.reset-specific-date label {
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
}
.reset-specific-date input {
  width: 100%;
  min-height: 46px;
  margin-top: 5px;
  padding: 8px 10px;
  border: 1px solid #e6aaa3;
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  font: inherit;
}
.reset-task-period > div {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.reset-task-period button {
  min-height: 46px;
  padding: 8px;
  border: 1px solid #e6aaa3;
  border-radius: 12px;
  background: #fff;
  color: #a32c22;
  font-weight: 800;
}
@media (max-width: 560px) {
  .recurring-period-actions {
    grid-template-columns: 1fr;
  }
  .recurring-settings .template-controls {
    grid-template-columns: repeat(2, 1fr);
  }
  .reset-task-period > div {
    grid-template-columns: 1fr;
  }
  .reset-specific-date {
    grid-template-columns: 1fr !important;
  }
}
.settings-link-card{width:100%;display:grid!important;grid-template-columns:auto 1fr auto;align-items:center;gap:1rem;text-align:left;border:1px solid var(--bf-line);background:var(--bf-surface);color:var(--bf-ink)}.settings-link-card>span:first-child{font-size:1.5rem}.settings-link-card>span:nth-child(2){display:grid;gap:.3rem}.settings-link-card small{color:var(--bf-muted)}.settings-link-card em{font-size:1.5rem;font-style:normal;color:var(--bf-accent-text)}
.fixed-tasks-page{display:grid;gap:18px;padding-top:10px}.fixed-tasks-page>.module-head{margin-bottom:-4px}.fixed-tasks-page>.task-standards,.fixed-tasks-page>.recurring-settings{margin:0}
.chain-portal{--bf-ink:#282a27;--bf-accent:#f4c618;--bf-accent-text:#8b6300;--bf-line:#e3dcc9;--bf-surface:#fff;--bf-surface-warm:#fffaf0;--bf-muted:#6f6c64;--bf-success:#17673d;--bf-danger:#a7352b;--bf-radius-card:20px;--bf-radius-control:12px;--bf-touch:48px;min-height:100vh;padding:24px clamp(20px,5vw,72px) 60px;background:#f8f5ec;color:#282a27}.chain-portal-header{display:flex;align-items:center;gap:16px;max-width:1400px;margin:0 auto 22px}.chain-portal-header h1{margin:2px 0;font-size:1.35rem}.chain-portal-header button{margin-left:auto;min-height:44px;border:1px solid #d8cfb6;border-radius:10px;background:#fff;padding:0 18px;font-weight:800}.chain-portal>.chain-dashboard{max-width:1400px;margin:0 auto}
.app-shell button,.chain-portal button{transition:transform 90ms ease,filter 120ms ease,box-shadow 120ms ease;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.app-shell button:not(:disabled):active,.chain-portal button:not(:disabled):active{transform:translateY(2px) scale(.975);filter:brightness(.9);box-shadow:inset 0 2px 5px rgba(30,30,25,.2)}
@media (min-width:1000px){
  .app-shell.role-manager,.app-shell.role-admin{position:relative;width:100%;max-width:none;margin:0;padding:0 clamp(34px,4vw,72px) 48px 300px;min-height:100vh}
  .role-manager .leader-desktop-sidebar,.role-admin .leader-desktop-sidebar{display:flex;position:fixed;top:0;bottom:0;left:0;margin-left:0;width:266px;padding:30px 20px;background:#282a27;color:#fff;flex-direction:column;gap:22px;z-index:8}
  .desktop-brand-mark{border:2px solid #f4c618;border-radius:8px;padding:10px 12px;color:#f4c618;font-weight:950;letter-spacing:.06em;width:max-content}.desktop-store-card{display:grid;gap:4px;padding:14px;border-radius:12px;background:#383a36}.desktop-store-card small{color:#bbb9b0;font-size:.65rem;letter-spacing:.1em}.desktop-store-card span{color:#bbb9b0;font-size:.75rem}
  .leader-desktop-sidebar nav{display:grid;gap:6px}.leader-desktop-sidebar nav button,.desktop-settings{min-height:46px;border:0;border-radius:10px;background:transparent;color:#fff;text-align:left;padding:0 14px;font-weight:800}.leader-desktop-sidebar nav button span{display:inline-block;width:28px}.leader-desktop-sidebar nav button.selected{background:#f4c618;color:#282a27}.desktop-settings{margin-top:auto}
  .role-manager>.topbar,.role-admin>.topbar{padding:24px 0 18px}.role-manager>.topbar .brand-mark,.role-admin>.topbar .brand-mark{display:none}.role-manager .leader-home,.role-admin .leader-home{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(300px,.75fr);gap:18px}.role-manager .leader-home>.role-home-heading,.role-admin .leader-home>.role-home-heading,.role-manager .leader-home>.home-stats,.role-admin .leader-home>.home-stats,.role-manager .leader-home>.staffing-alert,.role-admin .leader-home>.staffing-alert{grid-column:1/-1}
  .role-manager .leader-home .home-stats,.role-admin .leader-home .home-stats{grid-template-columns:repeat(4,1fr)}.role-manager .leader-home .home-stats button,.role-admin .leader-home .home-stats button{min-height:112px;text-align:left;padding:20px}.role-manager .leader-home .home-stats strong,.role-admin .leader-home .home-stats strong{font-size:2rem}.role-manager .leader-home .home-stats span,.role-admin .leader-home .home-stats span{font-size:.8rem}.role-manager .bottom-nav,.role-admin .bottom-nav{display:none}.role-manager .view-panel,.role-admin .view-panel{min-width:0}.role-manager .home-section,.role-admin .home-section{margin-top:0}
  .app-shell.role-employee{width:min(760px,100%);max-width:760px;padding-left:28px;padding-right:28px}.role-employee .bottom-nav{width:min(760px,100%)}
  .role-manager .composer-list,.role-admin .composer-list{gap:18px}.role-manager .composer-card,.role-admin .composer-card{padding:20px}.role-manager .composer-product,.role-admin .composer-product{grid-template-columns:32px 86px minmax(0,1fr);margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid var(--line)}.role-manager .composer-product img,.role-admin .composer-product img{width:86px;height:98px}.role-manager .composer-product strong,.role-admin .composer-product strong{font-size:18px}.role-manager .composer-product b,.role-admin .composer-product b{font-size:26px}
  .role-manager .composer-workspace,.role-admin .composer-workspace{grid-template-columns:minmax(320px,.8fr) minmax(420px,1.2fr);gap:20px;align-items:start}.role-manager .composer-media-column,.role-admin .composer-media-column,.role-manager .composer-copy-column,.role-admin .composer-copy-column{padding:18px;border:1px solid var(--line);border-radius:14px;background:#fff}.role-manager .camera-empty,.role-admin .camera-empty{min-height:150px}.role-manager .store-photo-preview,.role-admin .store-photo-preview{height:260px}.role-manager .tone-toggle button,.role-admin .tone-toggle button,.role-manager .camera-button,.role-admin .camera-button,.role-manager .create-ad-button,.role-admin .create-ad-button{min-height:48px;font-size:14px}.role-manager .own-copy,.role-admin .own-copy{min-height:150px}.role-manager .ai-ad-button,.role-admin .ai-ad-button{min-height:48px;font-size:14px}
  .chain-portal{padding-left:clamp(24px,3vw,54px);padding-right:clamp(24px,3vw,54px)}.chain-portal-header{max-width:none}.chain-portal>.chain-dashboard-shell{width:100%;max-width:none}
}
.task-report-filters{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 16px}.task-report-filters button{border:1px solid var(--line,#ded7c6);border-radius:999px;background:#fff;padding:9px 14px;font-weight:750}.task-report-filters button.active{background:#252724;color:#fff;border-color:#252724}.task-completion-meta{display:block;margin-top:6px;color:#28734c;font-weight:750}

/* Compact ad editor: one focused ad with a clear plan overview. */
.ads-hub .compose-head {
  padding: 20px 22px;
  border-radius: 18px;
}
.ads-hub .compose-head h2 {
  margin: 3px 0 5px;
  font-size: clamp(1.35rem, 2vw, 1.8rem);
}
.ads-hub .composer-layout {
  display: grid;
  grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.ads-hub .composer-sidebar {
  position: sticky;
  top: 18px;
  overflow: hidden;
  border: 1px solid #ded7c6;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(40, 42, 39, 0.07);
}
.ads-hub .composer-sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px;
  border-bottom: 1px solid #e6dfcd;
  background: #f8f5ec;
}
.ads-hub .composer-sidebar-head div,
.ads-hub .composer-sidebar-copy {
  min-width: 0;
  display: grid;
}
.ads-hub .composer-sidebar-head span {
  color: #777267;
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ads-hub .composer-sidebar-head strong {
  margin-top: 2px;
  color: #282a27;
  font-size: 1rem;
}
.ads-hub .composer-sidebar-head > b {
  display: grid;
  place-items: center;
  min-width: 30px;
  height: 30px;
  border-radius: 999px;
  background: #282a27;
  color: #f4c618;
  font-size: 0.78rem;
}
.ads-hub .composer-sidebar-list {
  display: grid;
  gap: 6px;
  max-height: min(68vh, 680px);
  padding: 8px;
  overflow-y: auto;
}
.ads-hub .composer-sidebar-item {
  width: 100%;
  min-height: 92px;
  display: grid;
  grid-template-columns: 24px 54px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  padding: 9px;
  border: 1px solid transparent;
  border-radius: 13px;
  background: transparent;
  color: #282a27;
  text-align: left;
}
.ads-hub .composer-sidebar-item:hover {
  background: #f8f5ec;
}
.ads-hub .composer-sidebar-item.active {
  border-color: #d4ac12;
  background: #fff7d7;
  box-shadow: inset 3px 0 0 #f4c618;
}
.ads-hub .composer-sidebar-number {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #282a27;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 900;
}
.ads-hub .composer-sidebar-item.active .composer-sidebar-number {
  background: #f4c618;
  color: #282a27;
}
.ads-hub .composer-sidebar-item > img {
  width: 54px;
  height: 66px;
  border: 1px solid #e4decd;
  border-radius: 8px;
  background: #fff;
  object-fit: contain;
}
.ads-hub .composer-sidebar-copy small {
  overflow: hidden;
  color: #777267;
  font-size: 0.61rem;
  font-weight: 800;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.ads-hub .composer-sidebar-copy strong {
  overflow: hidden;
  margin-top: 2px;
  font-size: 0.82rem;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ads-hub .composer-sidebar-copy em {
  margin-top: 2px;
  color: #8b6300;
  font-size: 0.82rem;
  font-style: normal;
  font-weight: 900;
}
.ads-hub .composer-sidebar-status {
  width: max-content;
  margin-top: 5px;
  padding: 3px 7px;
  border-radius: 999px;
  background: #f2eee4;
  color: #6f6c64;
  font-size: 0.6rem;
  font-weight: 850;
}
.ads-hub .composer-sidebar-status.missing {
  background: #fde8e5;
  color: #9b3027;
}
.ads-hub .composer-sidebar-status.ready,
.ads-hub .composer-sidebar-status.published {
  background: #e6f5eb;
  color: #17673d;
}
.ads-hub .composer-list {
  min-width: 0;
}
.ads-hub .composer-card {
  padding: 20px;
  border-color: #ded7c6;
  border-radius: 18px;
  box-shadow: 0 8px 24px rgba(40, 42, 39, 0.06);
}
.ads-hub .composer-card.produced-composer {
  border-color: #d9bd59;
  background: #fffdf7;
}

.photo-assignment-editor {
  display: grid;
  gap: 12px;
  margin-top: 14px;
  padding: 16px;
  border: 1px solid #ded7c6;
  border-radius: 14px;
  background: #f8f5ec;
}
.photo-assignment-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.6fr);
  gap: 12px;
}
.photo-assignment-editor label {
  display: grid;
  gap: 6px;
  color: #59574f;
  font-size: 0.78rem;
  font-weight: 800;
}
.photo-assignment-editor select,
.photo-assignment-editor input {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid #cbc4b4;
  border-radius: 10px;
  background: #fff;
  color: #282a27;
  font: inherit;
}
.assign-photo-button,
.photo-approval-actions button {
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid #282a27;
  border-radius: 10px;
  background: #282a27;
  color: #fff;
  font-weight: 900;
}
.assign-photo-button:disabled {
  border-color: #b9b4a8;
  background: #dedbd2;
  color: #66635b;
  cursor: default;
}
.assignment-status,
.photo-assigned-note,
.photo-assigned-to-me {
  display: block;
  padding: 9px 11px;
  border-radius: 9px;
  background: #eeeae0;
  color: #5d5a52;
  font-size: 0.78rem;
  font-weight: 800;
}
.assignment-status.submitted,
.assignment-status.approved,
.photo-assigned-to-me {
  background: #e6f5eb;
  color: #17673d;
}
.assignment-status.retake {
  background: #fde8e5;
  color: #9b3027;
}
.photo-approval-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.photo-approval-actions button:last-child {
  border-color: #9b3027;
  background: #fff;
  color: #9b3027;
}

@media (max-width: 980px) {
  .ads-hub .composer-layout {
    grid-template-columns: 1fr;
  }
  .ads-hub .composer-sidebar {
    position: static;
  }
  .ads-hub .composer-sidebar-list {
    grid-auto-flow: column;
    grid-auto-columns: minmax(220px, 72vw);
    overflow-x: auto;
    overflow-y: hidden;
    max-height: none;
    scroll-snap-type: x proximity;
  }
  .ads-hub .composer-sidebar-item {
    scroll-snap-align: start;
  }
}

@media (max-width: 560px) {
  .photo-assignment-grid {
    grid-template-columns: 1fr;
  }
  .ads-hub .compose-head {
    padding: 17px;
  }
  .ads-hub .composer-layout {
    gap: 12px;
  }
  .ads-hub .composer-sidebar-head {
    padding: 13px;
  }
  .ads-hub .composer-card {
    padding: 14px;
  }
  .ads-hub .composer-sidebar-list {
    grid-auto-columns: minmax(210px, 84vw);
  }
}