/* deploy9: phone app chrome + one-feature-at-a-time layout. Presentation only. */
:root{--cyb-green:#1d573c;--cyb-green-dark:#163e2e;--cyb-green-soft:#edf5e9;--cyb-line:#dce8df;--cyb-tabbar-h:64px}
/* Anchored headings stay visible below sticky headers when a shortcut jumps to them. */
[id]{scroll-margin-top:88px}

/* ---------- Bottom tab bar (phones only) ---------- */
.cyb-tabbar{display:none}
@media (max-width:760px){
  .cyb-tabbar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;align-items:stretch;justify-content:space-around;
    min-height:var(--cyb-tabbar-h);padding:4px max(6px,env(safe-area-inset-left)) env(safe-area-inset-bottom) max(6px,env(safe-area-inset-right));
    background:#fff;border-top:1px solid var(--cyb-line);box-shadow:0 -4px 18px #163e2e14;font-family:inherit}
  .cyb-tabbar>a,.cyb-tabbar>details{flex:1 1 0;min-width:0}
  .cyb-tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:56px;min-width:44px;padding:6px 2px;
    border-radius:14px;color:#55695c;text-decoration:none;font-size:12px;font-weight:700;line-height:1.15;cursor:pointer;list-style:none;-webkit-tap-highlight-color:transparent}
  .cyb-tab::-webkit-details-marker{display:none}
  .cyb-tab svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
  .cyb-tab span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .cyb-tab.is-active{color:var(--cyb-green)}
  .cyb-tab.is-active svg{stroke-width:2.3;background:var(--cyb-green-soft);border-radius:12px;padding:2px 10px;width:44px;height:28px;box-sizing:border-box}
  .cyb-tab:focus-visible{outline:3px solid #397955;outline-offset:-3px}
  .cyb-tab-more{position:static}
  .cyb-tab-more[open] .cyb-tab{color:var(--cyb-green)}
  .cyb-tab-sheet{position:fixed;left:10px;right:10px;bottom:calc(var(--cyb-tabbar-h) + env(safe-area-inset-bottom) + 8px);z-index:61;
    max-height:min(70vh,520px);overflow:auto;padding:14px;background:#fff;border:1px solid var(--cyb-line);border-radius:18px;box-shadow:0 14px 40px #163e2e33}
  .cyb-tab-sheet>b{display:block;margin:0 4px 8px;color:var(--cyb-green-dark);font-size:15px}
  .cyb-tab-sheet-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .cyb-tab-sheet-links a{display:flex;align-items:center;min-height:48px;padding:10px 12px;border:1px solid var(--cyb-line);border-radius:12px;background:#f8fbf7;color:var(--cyb-green-dark);font-weight:700;text-decoration:none;font-size:15px}
  .cyb-tab-sheet-links a.cyb-tab-more-out{color:#963d2c;background:#fff6f3;border-color:#f0d5cc}
  body.cyb-sheet-open::after{content:"";position:fixed;inset:0;z-index:59;background:#0f2a1f40}
  body.has-cyb-tabbar{padding-bottom:calc(var(--cyb-tabbar-h) + env(safe-area-inset-bottom) + 12px)!important}
  /* The tab bar replaces the long horizontal merchant nav strip and the duplicate site nav on phones. */
  body.has-cyb-tabbar .merchant-header>nav{display:none!important}
  body.has-cyb-tabbar .feedback-fab,body.has-cyb-tabbar .feedback-launcher{bottom:calc(var(--cyb-tabbar-h) + env(safe-area-inset-bottom) + 12px)!important}
}
@media print{.cyb-tabbar,.cyb-tab-sheet{display:none!important}body.has-cyb-tabbar{padding-bottom:0!important}}

/* ---------- 1. Merchant 更多 menu: never clipped, never auto-open ---------- */
.merchant-ux .merchant-header nav{overflow:visible}
.merchant-ux .merchant-more summary.is-current{background:var(--cyb-green-soft);border-color:#9fc3a6;color:var(--cyb-green)}
@media (max-width:760px){.merchant-ux .merchant-more-menu{position:fixed;left:12px;right:12px;top:auto;max-height:60vh;overflow:auto}}

/* ---------- 3. Vehicle passport: one feature at a time on phones ---------- */
.passport-views{display:none}
.passport-record-add>summary{display:flex;align-items:center;min-height:48px;padding:10px 14px;border:1px dashed #9fc3a6;border-radius:12px;background:#f8fbf7;color:var(--cyb-green);font-weight:850;cursor:pointer;list-style:none}
.passport-record-add>summary::-webkit-details-marker{display:none}
.passport-record-add[open]>summary{margin-bottom:12px;border-style:solid}
.passport-reminder-add>summary,.passport-preferences>summary{min-height:44px;display:flex;align-items:center}
@media (max-width:760px){
  .passport-views{position:sticky;top:0;z-index:15;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;margin:10px 0 14px;padding:4px;background:#eef4ec;border:1px solid var(--cyb-line);border-radius:14px}
  .passport-views a{display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px;border-radius:10px;color:#3e5a49;font-weight:800;text-decoration:none;font-size:15px}
  .passport-views a[aria-current]{background:#fff;color:var(--cyb-green);box-shadow:0 2px 8px #163e2e1a}
  .passport-views b{min-width:20px;padding:1px 6px;border-radius:10px;background:var(--cyb-green);color:#fff;font-size:12px;text-align:center}
  body[data-passport-view=overview] .passport-page :is(#reminders,#add-record){display:none}
  body[data-passport-view=reminders] .passport-page :is(.passport-ai-card,.passport-cost-panel,.passport-layout>section,#add-record,.passport-warranty-panel){display:none}
  body[data-passport-view=add-record] .passport-page :is(.passport-ai-card,.passport-cost-panel,.passport-layout>section,#reminders,.passport-warranty-panel){display:none}
  body[data-passport-view=reminders] .passport-hero,body[data-passport-view=add-record] .passport-hero{padding-top:14px;padding-bottom:14px}
  body[data-passport-view=reminders] .passport-hero>:not(:first-child),body[data-passport-view=add-record] .passport-hero>:not(:first-child){display:none}
  body[data-passport-view=add-record] .passport-record-add>summary{display:none}
}

/* ---------- 4. My garage: list first, add form folded, remove tucked away ---------- */
.garage-add-details>summary{display:flex;align-items:center;gap:10px;min-height:52px;cursor:pointer;list-style:none;color:var(--cyb-green)}
.garage-add-details>summary::-webkit-details-marker{display:none}
.garage-add-details>summary h2{margin:0}
.garage-add-plus{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--cyb-green-soft);font-weight:900}
.garage-add-details[open]>summary{margin-bottom:14px}
.garage-add-details[open] .garage-add-plus{transform:rotate(45deg)}
.vehicle-manage{margin-top:12px;border-top:1px solid var(--cyb-line);padding-top:6px}
.vehicle-manage>summary{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;color:#5d7064;font-weight:700;cursor:pointer}
.vehicle-manage[open]>summary{margin-bottom:8px}
@media (max-width:760px){
  .garage-layout{display:flex!important;flex-direction:column}
  .garage-layout>.garage-list{order:-1}
}

/* ---------- 6. Team permissions on phones ---------- */
:is(.staff-permission-grid,.staff-permission-picker,.staff-permission-editor,.invite-v2-picker) input[type=checkbox]{width:22px!important;height:22px!important;min-width:22px;min-height:0!important;flex:0 0 22px;margin:0;padding:0}
.staff-permission-grid label{min-height:44px}
@media (max-width:760px){
  .staff-permission-grid{grid-template-columns:1fr!important}
  .staff-permission-editor form{min-width:0!important}
  .staff-permission-grid label{gap:10px;line-height:1.3}
}

/* ---------- 8. Friendly merchant error page ---------- */
.cyb-friendly{display:grid;place-items:center;min-height:60vh;padding:28px 16px}
.cyb-friendly-card{max-width:460px;width:100%;padding:28px 22px;border:1px solid var(--cyb-line);border-radius:20px;background:#fff;text-align:center;box-shadow:0 8px 30px #163e2e12}
.cyb-friendly-icon{display:inline-grid;place-items:center;width:52px;height:52px;border-radius:50%;background:#fff3e6;color:#a35b12;font-size:26px;font-weight:900}
.cyb-friendly-card h1{margin:14px 0 8px;font-size:22px;color:var(--cyb-green-dark)}
.cyb-friendly-card p{margin:0 0 20px;color:#55695c;line-height:1.6}
.cyb-friendly-back{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px}

/* ---------- App home (signed-in owner) ---------- */
.cyb-app-home-page{background:#f4f8f2}
.cyb-app-home{max-width:640px;margin:0 auto;padding:16px 16px 28px;display:grid;gap:14px;color:#1b3527}
.cyb-app-hello small{display:block;color:#5d7064;font-size:15px;font-weight:700}
.cyb-app-hello h1{margin:2px 0 0;font-size:26px;line-height:1.2;color:var(--cyb-green-dark)}
.cyb-app-car{display:grid;gap:10px;padding:14px;border:1px solid var(--cyb-line);border-radius:20px;background:#fff;box-shadow:0 6px 22px #163e2e0f}
.cyb-app-car-switch{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px}
.cyb-app-car-switch a{flex:0 0 auto;display:flex;align-items:center;min-height:40px;padding:0 14px;border:1px solid var(--cyb-line);border-radius:20px;color:#3e5a49;text-decoration:none;font-weight:700;font-size:14px}
.cyb-app-car-switch a[aria-current]{background:var(--cyb-green);border-color:var(--cyb-green);color:#fff}
.cyb-app-car-main{display:flex;align-items:center;gap:14px;min-height:72px;color:inherit;text-decoration:none}
.cyb-app-car-photo{flex:0 0 72px;width:72px;height:72px;border-radius:16px;overflow:hidden;display:grid;place-items:center;background:linear-gradient(145deg,#e3efdf,#cfe3cc);color:var(--cyb-green)}
.cyb-app-car-photo img{width:100%;height:100%;object-fit:cover}
.cyb-app-car-photo svg{width:44px;height:44px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.cyb-app-car-text{flex:1;min-width:0;display:grid;gap:2px}
.cyb-app-car-text small{color:#5d7064;font-weight:700}
.cyb-app-car-text b{font-size:20px;color:var(--cyb-green-dark);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cyb-app-car-text em{font-style:normal;color:#5d7064;font-size:14px}
.cyb-app-chevron,.cyb-app-links i{color:#8aa392;font-size:26px;font-style:normal;line-height:1}
.cyb-app-next{display:grid;grid-template-columns:1fr auto;gap:2px 10px;align-items:center;min-height:64px;padding:12px 14px;border-radius:14px;background:var(--cyb-green-soft);color:inherit;text-decoration:none}
.cyb-app-next span{grid-column:1/-1;color:#4c6655;font-size:13px;font-weight:700}
.cyb-app-next b{font-size:17px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cyb-app-next em,.cyb-app-list em{font-style:normal;font-weight:800;white-space:nowrap}
.cyb-tone-urgent em,em.cyb-tone-urgent{color:#a3361f}
.cyb-app-next.cyb-tone-urgent{background:#fff3ee}
.cyb-tone-soon em,em.cyb-tone-soon{color:#8a5a00}
.cyb-tone-ok em,em.cyb-tone-ok{color:var(--cyb-green)}
.cyb-app-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.cyb-app-actions a{display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:10px;min-height:92px;padding:14px;border-radius:18px;background:var(--cyb-green);color:#fff;text-decoration:none;font-weight:800;font-size:17px;box-shadow:0 6px 18px #1d573c33}
.cyb-app-actions a:nth-child(n+2){background:#fff;color:var(--cyb-green-dark);border:1px solid var(--cyb-line);box-shadow:0 4px 14px #163e2e0d}
.cyb-app-actions a.cyb-app-action-rescue{color:#8f2f1c;border-color:#f0d5cc;background:#fff8f5}
.cyb-app-actions svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cyb-app-list{padding:14px;border:1px solid var(--cyb-line);border-radius:18px;background:#fff}
.cyb-app-list-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.cyb-app-list-head h2{margin:0;font-size:17px;color:var(--cyb-green-dark)}
.cyb-app-list-head a{display:inline-flex;align-items:center;min-height:44px;color:var(--cyb-green);font-weight:800;text-decoration:none}
.cyb-app-list ul{list-style:none;margin:4px 0 0;padding:0}
.cyb-app-list li{display:flex;justify-content:space-between;gap:12px;align-items:center;min-height:46px;border-top:1px solid #edf2ec}
.cyb-app-list li span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cyb-app-links{display:grid;border:1px solid var(--cyb-line);border-radius:18px;background:#fff;overflow:hidden}
.cyb-app-links a{display:flex;align-items:center;gap:10px;min-height:54px;padding:0 16px;color:#1b3527;text-decoration:none;font-weight:700;border-top:1px solid #edf2ec}
.cyb-app-links a:first-child{border-top:0}
.cyb-app-links a span{flex:1}
.cyb-app-badge{min-width:22px;padding:2px 7px;border-radius:11px;background:#c2462c;color:#fff;font-size:12px;text-align:center}
.cyb-app-car-empty b{font-size:20px;color:var(--cyb-green-dark)}
.cyb-app-car-empty p{margin:0;color:#55695c;line-height:1.6}
.cyb-app-primary{display:flex;align-items:center;justify-content:center;min-height:52px;border-radius:14px;background:var(--cyb-green);color:#fff;font-weight:800;text-decoration:none}
@media (min-width:761px){.cyb-app-home{padding-top:28px}.cyb-app-actions{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ---------- deploy10: shared icon set in the 更多 sheet; larger tab labels ---------- */
@media (max-width:760px){
  .cyb-tab{font-size:13px}
  .cyb-tab-sheet-links a{gap:10px}
  .cyb-tab-sheet-links a svg{width:22px;height:22px;flex:none;color:#2f7a4f}
  .cyb-tab-sheet-links a.cyb-tab-more-out svg{color:#963d2c}
  .cyb-tab-sheet-links a span{min-width:0;overflow-wrap:anywhere}
}
/* deploy10: merchant header nav icons (desktop strip) */
.merchant-header nav a svg.cyb-nav-ic{width:18px;height:18px;flex:none;margin-right:6px;vertical-align:-4px;color:#2f7a4f}
.merchant-header nav a[aria-current] svg.cyb-nav-ic{color:currentColor}
/* deploy10: shared icons in the owner app-home link list */
.cyb-app-links a>svg.cyb-ic{width:22px;height:22px;flex:none;color:#2f7a4f}
.cyb-app-links i svg{width:20px;height:20px;display:block}