.install-page {
  min-height: 100vh;
  background: radial-gradient(circle at 10% 0%, rgba(11, 113, 105, .16), transparent 34rem), linear-gradient(145deg, #f4f8f7 0%, #e9f1ef 100%);
}
.install-action[hidden], .install-fallback[hidden], .install-already[hidden] { display: none !important; }
label[hidden], .wizard-inline-create[hidden], .wizard-inline-panel[hidden] { display: none !important; }
.install-shell { width: min(100% - 32px, 760px); margin: 0 auto; padding: 48px 0; }
.install-card { padding: clamp(28px, 6vw, 64px); border: 1px solid rgba(7, 91, 85, .12); border-radius: 28px; background: rgba(255, 255, 255, .95); box-shadow: 0 24px 64px rgba(18, 48, 45, .13); text-align: center; }
.install-brand { display: flex; justify-content: center; margin-bottom: 28px; }
.install-logo { width: min(100%, 270px); height: auto; object-fit: contain; }
.install-card h1 { margin: 8px 0 14px; }
.install-lead { max-width: 570px; margin: 0 auto; color: #4d615e; font-size: 1.08rem; line-height: 1.65; }
.install-action { margin-top: 32px; }
.install-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-width: min(100%, 310px); padding: 1rem 1.8rem; font-size: 1.05rem; font-weight: 800; border-radius: 14px; background: linear-gradient(135deg, #075b55 0%, #0c766d 100%); color: #fff; box-shadow: 0 8px 24px rgba(7, 91, 85, .24); letter-spacing: -.01em; transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; }
.install-button:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(7, 91, 85, .34); filter: brightness(1.05); }
.install-button:active { transform: translateY(0); }
.install-support { margin: 12px 0 0; color: #55716d; font-size: .92rem; }
.install-fallback, .install-already { display: flex; gap: 16px; align-items: flex-start; margin: 28px 0 0; padding: 18px 20px; border: 1px solid rgba(7, 91, 85, .14); border-radius: 16px; background: #f3f8f7; text-align: left; }
.install-fallback p, .install-already p { margin: 5px 0 0; color: #58706d; line-height: 1.5; }
.fallback-icon { flex: 0 0 auto; color: #075b55; font-size: 1.7rem; line-height: 1; }

.install-divider { display: flex; align-items: center; gap: 14px; margin: 34px auto 20px; max-width: 440px; color: #8da09c; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; }
.install-divider::before, .install-divider::after { content: ""; flex: 1; height: 1px; background: linear-gradient(to right, transparent, #c7dad6, transparent); }

.install-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 0 auto; max-width: 540px; }
.install-btn-app, .install-btn-store { display: inline-flex; align-items: center; gap: 12px; padding: 1rem 1.25rem; border-radius: 16px; text-decoration: none; text-align: left; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease; box-sizing: border-box; }
.install-btn-app { background: linear-gradient(135deg, #075b55 0%, #0b6d64 100%); color: #fff; border: 1px solid transparent; box-shadow: 0 6px 20px rgba(7, 91, 85, .2); }
.install-btn-app:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(7, 91, 85, .32); filter: brightness(1.05); color: #fff; }
.install-btn-app:active { transform: translateY(0); }
.install-btn-store { background: #ffffff; color: #26433f; border: 1.5px solid #cbdeda; box-shadow: 0 4px 14px rgba(25, 65, 60, .05); }
.install-btn-store:hover { transform: translateY(-2px); background: #f4faf8; border-color: #83b9ad; color: #075b55; box-shadow: 0 8px 22px rgba(25, 65, 60, .1); }
.install-btn-store:active { transform: translateY(0); }
.install-btn-app .btn-icon, .install-btn-store .btn-icon { display: grid; place-items: center; flex: 0 0 2.35rem; width: 2.35rem; height: 2.35rem; border-radius: 12px; font-size: 1.2rem; line-height: 1; }
.install-btn-app .btn-icon { background: rgba(255, 255, 255, .18); color: #fff; }
.install-btn-store .btn-icon { background: #edf6f4; color: #075b55; }
.install-btn-app .btn-text, .install-btn-store .btn-text { display: grid; gap: 2px; flex: 1; }
.install-btn-app .btn-text strong { font-size: .95rem; font-weight: 800; line-height: 1.2; }
.install-btn-app .btn-text small { color: #c9e4de; font-size: .76rem; font-weight: 500; }
.install-btn-store .btn-text strong { font-size: .95rem; font-weight: 800; line-height: 1.2; }
.install-btn-store .btn-text small { color: #6d827f; font-size: .76rem; font-weight: 500; }
.install-btn-app .btn-arrow { font-size: 1.15rem; font-weight: 800; opacity: .85; transition: transform .18s ease; }
.install-btn-app:hover .btn-arrow { transform: translateX(3px); opacity: 1; }
.install-privacy { margin: 30px 0 0; color: #728581; font-size: .86rem; }
.browser-mode-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 18px 0 0; padding: 13px 16px; border: 1px solid rgba(7, 91, 85, .14); border-radius: 14px; background: #eef8f6; color: #264b47; }
.browser-mode-banner span { color: #58706d; }
.browser-mode-banner a, .browser-mode-banner button { margin-left: auto; }
.access-gate { display: none !important; }
.access-gate-card { display: grid; justify-items: center; gap: 10px; width: min(100%, 330px); padding: 32px 24px; border: 1px solid rgba(7, 91, 85, .12); border-radius: 22px; background: #fff; box-shadow: 0 20px 50px rgba(18, 48, 45, .12); color: #264b47; text-align: center; }
.access-gate-card span { color: #718580; font-size: .92rem; }
.access-gate-logo { width: 48px; height: 48px; margin-bottom: 8px; border-radius: 12px; }
.wizard-progress{display:grid;grid-template-columns:repeat(5,1fr);gap:.45rem;margin:1.2rem 0 .7rem;padding:.25rem;border:1px solid #dbe3e1;border-radius:10px;background:#f5f8f7}
.wizard-progress span{display:flex;align-items:center;gap:.4rem;padding:.55rem .4rem;color:#71807f;font-size:.72rem;font-weight:700;line-height:1.2}
.wizard-progress b{display:grid;place-items:center;flex:0 0 1.5rem;width:1.5rem;height:1.5rem;border-radius:50%;background:#e2eae8;color:#63706f;font-size:.72rem}
.wizard-progress span.current{color:#075b55}.wizard-progress span.current b,.wizard-progress span.complete b{background:#075b55;color:#fff}
.wizard-guidance{margin:0 0 1rem;color:#687476;font-size:.9rem}
.wizard-quick-action{margin:-.45rem 0 1rem;padding:.5rem .75rem;font-size:.82rem}
.wizard-inline-create{margin:-.45rem 0 .8rem}.wizard-inline-trigger{padding:.35rem .6rem;border:0;background:transparent;color:#075b55;font-size:.78rem;font-weight:700;cursor:pointer}.wizard-inline-trigger:hover{text-decoration:underline}.wizard-inline-panel{display:grid;gap:.7rem;margin-top:.35rem;padding:.8rem;border:1px solid #c6dfda;border-radius:10px;background:#f5fbfa}.wizard-inline-panel>strong{color:#064943;font-size:.86rem}.wizard-inline-fields{display:grid;grid-template-columns:repeat(3,1fr);gap:.65rem}.wizard-inline-fields label{display:grid;gap:.25rem;color:#526461;font-size:.75rem;font-weight:700}.wizard-inline-fields input{width:100%;padding:.55rem;border:1px solid #cbd8d5;border-radius:7px;background:#fff;font:inherit}.wizard-inline-actions{display:flex;justify-content:flex-end;gap:.5rem}.wizard-inline-actions button{padding:.5rem .7rem;font-size:.78rem}
.wizard-review{margin-top:.8rem;padding:1rem;border:1px solid #c6dfda;border-radius:10px;background:#edf7f5}
.wizard-review h3{margin:0 0 .75rem;color:#064943}.review-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.65rem 1rem}.review-grid span{display:grid;gap:.1rem;color:#405250;font-size:.88rem}.review-grid b{color:#71807f;font-size:.7rem;text-transform:uppercase;letter-spacing:.05em}
@media (max-width: 620px) {
  .install-shell { width: min(100% - 20px, 760px); padding: 20px 0; }
  .install-card { border-radius: 22px; }
  .install-links { grid-template-columns: 1fr; gap: 10px; }
  .install-btn-app, .install-btn-store { width: 100%; }
  .browser-mode-banner a, .browser-mode-banner button { width: 100%; margin-left: 0; }
  .wizard-progress { grid-template-columns: 1fr 1fr; }
  .wizard-progress span { font-size: .68rem; }
  .review-grid { grid-template-columns: 1fr; }
  .wizard-inline-fields { grid-template-columns: 1fr; }
  .wizard-inline-actions { flex-direction:column-reverse; }
  .wizard-inline-actions button { width:100%; }
}

/* Cadastro contextual: uma tarefa por vez, dentro da mesma ordem. */
#order-dialog { width: min(680px, calc(100% - 24px)); max-height: calc(100dvh - 24px); }
#order-dialog [hidden] { display: none !important; }
#order-form { padding: 24px; }
#order-form .dialog-head h2 { font-size: 1.35rem; }
#order-form .wizard-progress { margin: 18px 0 12px; padding: 0; border: 0; background: transparent; gap: 6px; }
#order-form .wizard-progress span { flex-direction: column; align-items: flex-start; padding: 8px; font-size: 11px; border-top: 3px solid #e2eae8; }
#order-form .wizard-progress span.current { border-color: #075b55; }
#order-form .wizard-progress span.complete { border-color: #8ebeb3; }
#order-form .wizard-progress b { display: none; }
#order-form .wizard-guidance { font-size: 13px; margin-bottom: 16px; }
#order-form .form-grid { grid-template-columns: 1fr; gap: 0; }
#order-form label { margin: 6px 0 10px; font-size: 13px; }
#order-form input, #order-form select { min-height: 42px; padding: 9px 11px; }
#order-form .wizard-inline-trigger { padding: 6px 0; font-size: 12px; }
#order-form .wizard-inline-create { margin: 0 0 8px; }
#order-form .dialog-actions { border-top: 1px solid #e4ece9; margin-top: 18px; padding-top: 16px; }
#order-form.inline-editing > .wizard-progress,
#order-form.inline-editing > .wizard-guidance,
#order-form.inline-editing > .wizard-quick-action,
#order-form.inline-editing > .dialog-actions,
#order-form.inline-editing > label,
#order-form.inline-editing > #order-items,
#order-form.inline-editing > .form-grid > label,
#order-form.inline-editing .wizard-inline-create:not(.is-editing) { display: none !important; }
#order-form .wizard-inline-create.is-editing { margin: 18px 0 0; grid-column: 1 / -1; }
#order-form .wizard-inline-panel { gap: 16px; margin: 0; padding: 0; border: 0; background: transparent; }
#order-form .wizard-inline-panel > strong { display: block; padding: 12px 14px; border-left: 3px solid #075b55; border-radius: 0 8px 8px 0; background: #edf7f4; font-size: 14px; }
#order-form .wizard-inline-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
#order-form .wizard-inline-fields label { min-width: 0; margin: 0; gap: 6px; }
#order-form .wizard-inline-fields label:first-child { grid-column: 1 / -1; }
#order-form .wizard-inline-fields input { font-size: 14px; font-weight: 400; }
#order-form .wizard-inline-actions { flex-direction: row; justify-content: space-between; border-top: 1px solid #e4ece9; padding-top: 16px; gap: 12px; }
#order-form .wizard-inline-actions button { width: auto; min-height: 42px; padding: 9px 16px; font-size: 13px; }
@media (max-width: 620px) {
  #order-form { padding: 18px; }
  #order-form .wizard-progress { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  #order-form .wizard-progress span { padding: 6px 2px; font-size: 10px; }
  #order-form .wizard-inline-fields { grid-template-columns: 1fr; gap: 10px; }
  #order-form .wizard-inline-fields input { font-size: 16px; }
  #order-form .wizard-inline-actions button { padding: 9px 12px; }
}

#order-items { margin: 12px 0 16px; }
.order-item { padding: 12px; border: 1px solid #dbe7e4; border-radius: 10px; margin-bottom: 8px; background: #fafcfb; }
.order-item-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 14px; }
.order-item-heading button { padding: 5px 8px; font-size: 12px; color: #9b3029; background: transparent; }
.order-item-values { display: grid; grid-template-columns: 90px 1fr 1fr; align-items: end; gap: 12px; }
#order-form .order-item-values label { margin: 10px 0 0; font-size: 11px; }
.order-item-values > span { display: grid; gap: 8px; padding-bottom: 10px; font-size: 11px; text-align: right; color: #667775; }
.order-item-values strong { font-size: 14px; color: #075b55; }
.order-items-total { display: flex; justify-content: space-between; gap: 12px; padding: 12px; border-radius: 8px; background: #edf7f4; font-size: 13px; }
.order-items-total strong { white-space: nowrap; color: #075b55; }
@media (max-width: 480px) { .order-item-values { grid-template-columns: 72px 1fr; } .order-item-values > span { grid-column: 1 / -1; display: flex; justify-content: space-between; padding-bottom: 0; } }