/* UX02: Motoryar's RTL card system; Aurora-inspired surfaces and motion.
   Presentation only. No Aurora resources, records or runtime dependencies. */
:root{
 --card-radius:20px;--card-ease:cubic-bezier(.22,1,.36,1);
 --work-bg:#006ffd;--work-card:#006ffd;--work-raised:#1f2024;
 --work-line:#ffffff16;--work-ink:#f8f9fe;--work-muted:#c5c6cc;
 --work-mint:#6fbaff;--work-green:#2897ff;
}
/* Public cards use the same geometry and hierarchy in the existing light brand. */
#app :is(.service,.directory-card,.place-card,.card,.bike-card,.skill-card,.document-card,.review-card){border-radius:var(--card-radius);box-shadow:0 4px 18px #006ffd06;transition:border-color .22s,box-shadow .22s,transform .22s var(--card-ease)}
#app .service{background:linear-gradient(140deg,#ffffff,#f8f9fe);border-color:#d4d6dd;position:relative;overflow:hidden}
#app .service::after{content:'←';position:absolute;inset-inline-end:18px;bottom:14px;color:#006ffd;font-size:20px;pointer-events:none}
#app .service .badge{margin-bottom:4px}
#app .directory-card{background:linear-gradient(140deg,#ffffff,#f8f9fe);border-color:#d4d6dd}
#app .directory-card>span{display:inline-flex;align-items:center;gap:10px;border-top:1px solid #e8e9f1;padding-top:16px;margin-top:8px;font-weight:700}
#app .place-card{border-color:#d4d6dd;box-shadow:0 4px 18px #006ffd07}
#app .place-card.selected{border-color:#006ffd;box-shadow:0 0 0 2px #006ffd18}
.card-heading-icon{width:42px;height:42px;flex:0 0 42px;border-radius:13px;display:inline-flex;align-items:center;justify-content:center;background:#e8e9f1;border:1px solid #d4d6dd}
.card-heading-icon img{width:24px;height:24px;object-fit:contain}
#app .panel-heading h2{display:flex;align-items:center;gap:12px;min-width:0}
/* A dedicated work surface, mirrored for Persian. */
body.panel-view:not(.display-light){color:var(--work-ink);background:radial-gradient(ellipse at 90% 0,#006ffd24,transparent 45%),var(--work-bg);color-scheme:dark}
body.panel-view:not(.display-light) header{background:#006ffdf5;border-bottom:1px solid var(--work-line);box-shadow:none}
.panel-view:not(.display-light) header .brand-name{color:var(--work-ink)}
.panel-view:not(.display-light) header .brand-name>span{color:var(--work-mint)}
.panel-view:not(.display-light) header .brand-symbol{filter:brightness(0) invert(1);opacity:.96}
.panel-view:not(.display-light) header nav a{color:var(--work-muted)}
.panel-view:not(.display-light) header nav a:hover{color:var(--work-mint)}
.panel-view:not(.display-light) :is(h1,h2,h3,h4,b,strong,legend){color:var(--work-ink)}
.panel-view:not(.display-light) :is(p,small,.optional,.eyebrow,.panel-toolbar span){color:var(--work-muted)}
.panel-view:not(.display-light) .page-title{padding-block:32px 24px}
.panel-view:not(.display-light) .page-title h1{letter-spacing:-.6px}
.panel-view:not(.display-light) .workspace{gap:24px;align-items:start}
.panel-view:not(.display-light) .workspace>section{min-width:0}
.panel-view:not(.display-light) .sidebar{background:linear-gradient(165deg,#006ffd,#006ffd);border:1px solid var(--work-line);padding:20px 12px;border-radius:20px;box-shadow:0 12px 32px #1f202422;scrollbar-width:thin;scrollbar-color:#494a50 transparent}
.panel-view:not(.display-light) .sidebar h3{padding-inline:14px;color:#e8e9f1;font-size:17px}
.panel-view:not(.display-light) .sidebar a{color:var(--work-muted);position:relative;transition:background .18s,color .18s;border:1px solid transparent}
.panel-view:not(.display-light) .sidebar a:hover{background:#ffffff06;color:#ffffff}
.panel-view:not(.display-light) .sidebar a.active,.panel-view:not(.display-light) .sidebar a[aria-current=page]{background:#6fbaff14;border-color:#6fbaff2a;color:#b4dbff;box-shadow:none}
.panel-view:not(.display-light) .sidebar a[aria-current=page]::before{content:'';position:absolute;inset-inline-start:0;top:12px;bottom:12px;width:3px;background:var(--work-mint);border-radius:4px}
.panel-view:not(.display-light) .sidebar .nav-icon,.panel-view:not(.display-light) .panel-quick-nav img{filter:brightness(0) invert(1);opacity:.8}
.panel-view:not(.display-light) #app :is(.card,.order,.bike-card,.skill-card,.document-card,.review-card,.role-shortcuts>a,.stat){background:var(--work-card);border:1px solid var(--work-line);border-radius:var(--card-radius);box-shadow:0 4px 16px #1f202433;color:var(--work-ink)}
.panel-view:not(.display-light) #app .role-card{padding:28px;margin-bottom:24px}
.panel-view:not(.display-light) #app .panel-heading{padding-bottom:20px;border-bottom:1px solid var(--work-line);margin-bottom:24px;align-items:center}
.panel-view:not(.display-light) #app .panel-heading h2{font-size:22px;line-height:1.7}
.panel-view:not(.display-light) .card-heading-icon{background:#6fbaff10;border-color:#6fbaff24}
.panel-view:not(.display-light) .card-heading-icon img{filter:brightness(0) invert(1);opacity:.9}
.panel-view:not(.display-light) #app .role-welcome{background:radial-gradient(ellipse at 15% 0,#2897ff19,transparent 65%),#006ffd;border:1px solid #6fbaff2b;border-radius:20px;box-shadow:0 8px 28px #1f202422;padding:30px;position:relative;overflow:hidden}
.panel-view:not(.display-light) #app .role-welcome h2{font-size:27px}
.panel-view:not(.display-light) #app .role-welcome p{color:#c5c6cc;line-height:1.95}
.panel-view:not(.display-light) #app .stats{gap:16px;margin-block:24px}
.panel-view:not(.display-light) #app .stat{position:relative;padding:24px;overflow:hidden;min-height:148px}
.panel-view:not(.display-light) #app .stat span{color:var(--work-muted);font-size:16px;display:block;padding-inline-end:42px}
.panel-view:not(.display-light) #app .stat strong{font-size:32px;color:var(--work-ink);line-height:1.6;margin-top:18px;display:block}
.panel-view:not(.display-light) #app .stat .metric-icon{position:absolute;inset-inline-end:20px;top:20px;width:34px;height:34px;border:1px solid #6fbaff28;background:#6fbaff0b;border-radius:11px;display:grid;place-items:center}
.panel-view:not(.display-light) .metric-icon img{width:20px;height:20px;filter:brightness(0) invert(1);opacity:.75}
.panel-view:not(.display-light) #app .role-shortcuts>a{padding:24px;position:relative;overflow:hidden}
.panel-view:not(.display-light) #app .role-shortcuts>a b{display:block;margin-top:16px;font-size:19px}
.panel-view:not(.display-light) #app .role-shortcuts>a p{color:var(--work-muted);font-size:16px}
/* Orders are tickets: identity, current stage, context, then available actions. */
.panel-view:not(.display-light) #app .actual-order{padding:24px;position:relative;overflow:hidden;border-inline-start:3px solid #6fbaff5c}
.panel-view:not(.display-light) #app .actual-order[data-status=completed]{border-inline-start-color:#6fbaff}
.panel-view:not(.display-light) #app .actual-order[data-status=cancelled]{border-inline-start-color:#8f9098}
.panel-view:not(.display-light) #app .actual-order .order-top{gap:16px;padding-bottom:16px;align-items:flex-start}
.panel-view:not(.display-light) #app .actual-order .order-top b{font-size:19px;line-height:1.8;min-width:0}
.panel-view:not(.display-light) #app .actual-order .order-top .badge{flex:0 0 auto;max-width:100%}
.panel-view:not(.display-light) #app .actual-order p{font-size:17px;line-height:1.95;color:#c5c6cc;margin-block:12px}
.panel-view:not(.display-light) #app .actual-order>small{display:block;color:#c5c6cc;font-size:14px;font-variant-numeric:tabular-nums}
.order-stage{display:flex;gap:5px;margin-block:0 18px;max-width:240px}
.order-stage i{height:3px;border-radius:4px;background:#ffffff17;flex:1}
.order-stage i.reached{background:var(--work-mint)}
.panel-view:not(.display-light) #app .actual-order[data-status=cancelled] .order-stage{display:none}
.panel-view:not(.display-light) #app .actual-order .order-actions{padding-top:18px;margin-top:18px;border-top:1px solid var(--work-line);gap:10px}
.panel-view:not(.display-light) #app .actual-order .order-actions:empty{display:none}
.panel-view:not(.display-light) #app .actual-order>.button{margin-inline-end:8px;margin-top:12px}
.panel-view:not(.display-light) #app .order-offers:not(:empty){margin-top:16px;border-top:1px solid var(--work-line);padding-top:16px}
.panel-view:not(.display-light) #app .offer-row{border-color:var(--work-line);background:var(--work-raised);border-radius:14px;padding:18px;margin-block:10px}
/* Controls remain legible at both scales. */
.panel-view:not(.display-light) :is(.button,.button.dark){background:var(--work-mint);color:#006ffd;border:1px solid transparent;box-shadow:0 2px 8px #1f202411;font-weight:750}
.panel-view:not(.display-light) :is(.button,.button.dark):hover{background:#b4dbff;color:#006ffd;box-shadow:0 4px 16px #6fbaff16}
.panel-view:not(.display-light) :is(.button.outline,.button.white,.secondary,.header-mobile-toggle,.account-logout,.panel-nav-toggle){background:#006ffd;color:#e8e9f1;border:1px solid #ffffff25;box-shadow:none}
.panel-view:not(.display-light) :is(.button.outline,.secondary,.account-logout,.panel-nav-toggle):hover{background:#006ffd;border-color:#6fbaff55;color:#e8e9f1}
.panel-view:not(.display-light) :is(button,.button):disabled{opacity:.48;cursor:not-allowed}
.panel-view:not(.display-light) :is(input,select,textarea){background:#006ffd;color:#f8f9fe;border:1px solid #71727a;box-shadow:none;color-scheme:dark}
.panel-view:not(.display-light) :is(input,textarea)::placeholder{color:#8f9098}
.panel-view:not(.display-light) :is(input,select,textarea):focus{border-color:var(--work-mint);box-shadow:0 0 0 3px #6fbaff14}
.panel-view:not(.display-light) :is(a,button,input,textarea,select,summary):focus-visible{outline:3px solid #b4dbff;outline-offset:4px}
.panel-view:not(.display-light) :is(label.field,.report-meta,.report-fieldset legend,.symptom-selector legend){color:#d4d6dd}
.panel-view:not(.display-light) :is(.api-error,.field-error){color:#ffe2e5}
.panel-view:not(.display-light) #app .danger-text{background:#ff616d0c;color:#ffe2e5;border-color:#ff616d43}
.panel-view:not(.display-light) #app .badge,.panel-view:not(.display-light) #app .panel-toolbar .role-tag{background:#6fbaff14;color:#b4dbff;border:1px solid #6fbaff2b}
.panel-view:not(.display-light) #app .badge.muted{background:#ffffff08;color:#c5c6cc;border-color:#ffffff20}
.panel-view:not(.display-light) #app .badge[data-tone=warning]{background:#ff616d12;color:#ffe2e5;border-color:#ff616d30}
.panel-view:not(.display-light) #app .badge[data-tone=negative]{background:#ff616d12;color:#ffe2e5;border-color:#ff616d32}
.panel-view:not(.display-light) #app :is(.live-filters,.filter-tabs){background:#006ffd;border:1px solid var(--work-line);padding:8px;border-radius:15px;gap:6px}
.panel-view:not(.display-light) #app :is(.live-filters,.filter-tabs) button{background:transparent;border-color:transparent;color:#c5c6cc;min-height:44px}
.panel-view:not(.display-light) #app :is(.live-filters button.selected,.filter-tabs button[aria-selected=true]){background:#6fbaff16;border-color:#6fbaff34;color:#b4dbff}
.panel-view:not(.display-light) #app :is(.empty,.surface-note,.catalog-selection,.finance-support){background:#6fbaff08;border:1px dashed #6fbaff2d;border-radius:16px;color:#c5c6cc}
.panel-view:not(.display-light) #app .empty b{color:#e8e9f1}.panel-view:not(.display-light) #app .empty p{color:var(--work-muted)}
.panel-view:not(.display-light) #app :is(.catalog-option,.skill-services label,.account-role,.symptom-chips>span,.bike-facts>span){background:#ffffff04;border:1px solid var(--work-line);border-radius:12px;color:#d4d6dd}
.panel-view:not(.display-light) #app :is(.catalog-option,.skill-services label):has(input:checked){background:#6fbaff12;border-color:#6fbaff59}
.panel-view:not(.display-light) #app :is(.catalog-option small,.skill-event p,.bike-card p,.bike-facts,.bike-facts b){color:var(--work-muted)}
.panel-view:not(.display-light) #app .bike-card{padding:24px;gap:20px}
.panel-view:not(.display-light) #app .bike-card>img{background:#6fbaff0e;border:1px solid #6fbaff23;border-radius:16px;padding:14px;width:86px;height:86px;object-fit:contain}
.panel-view:not(.display-light) #app .bike-card .bike-facts{border-color:var(--work-line)}
.panel-view:not(.display-light) #app .document-card{padding:24px;margin-block:16px}
.panel-view:not(.display-light) #app :is(.skill-event,.case-entry,.history-entry){background:#ffffff03;border-color:var(--work-line);border-inline-start:2px solid #6fbaff45;border-radius:14px;padding:20px;margin-block:14px}
.panel-view:not(.display-light) #app :is(.skill-event small,.case-list-count,.case-empty,.case-facts dt){color:var(--work-muted)}
.panel-view:not(.display-light) #app :is(.case-person,.case-money article,.finance-stats article,.finance-receipt-meta,.invoice-summary,.invoice-totals){background:var(--work-raised);border:1px solid var(--work-line);border-radius:16px;color:#e8e9f1}
.panel-view:not(.display-light) #app .case-money article,.panel-view:not(.display-light) #app .finance-stats article{padding:22px;position:relative}
.panel-view:not(.display-light) #app :is(.case-money span,.finance-stats span){font-size:15px;color:var(--work-muted);line-height:1.9;display:block}
.panel-view:not(.display-light) #app :is(.case-money strong,.finance-stats b){display:block;color:#e8e9f1;margin-top:12px;font-variant-numeric:tabular-nums;line-height:1.75}
.panel-view:not(.display-light) #app .finance-list .finance-payment-item{background:#006ffd;border:1px solid var(--work-line);padding:22px;border-radius:16px;margin-block:14px}
.panel-view:not(.display-light) #app .finance-payment-item p{color:var(--work-muted)}
.panel-view:not(.display-light) #app .finance-breakdown{border-color:var(--work-line);background:#006ffd;border-radius:16px;overflow:hidden}
.panel-view:not(.display-light) #app .finance-breakdown>div{background:transparent;color:#e8e9f1;border-color:var(--work-line)}
.panel-view:not(.display-light) #app .finance-breakdown>div:last-child{background:#6fbaff0e}
.panel-view:not(.display-light) #app :is(.receipt-symbol,.receipt-success){background:#6fbaff15;color:#b4dbff;border-color:#6fbaff2b}
.panel-view:not(.display-light) #app :is(.table-wrap,th,td){border-color:var(--work-line)}
.panel-view:not(.display-light) #app th{background:#006ffd;color:#d4d6dd}.panel-view:not(.display-light) #app td{color:#e8e9f1;background:transparent}
.panel-view:not(.display-light) #app tr:hover td{background:#ffffff03}
.panel-view:not(.display-light) #app .case-section-index{border-color:var(--work-line)}
.panel-view:not(.display-light) #app .case-section-index>summary{color:#b4dbff}
.panel-view:not(.display-light) #app .order-state-timeline li>div{background:#006ffd;border:1px solid var(--work-line);border-radius:16px}
.panel-view:not(.display-light) #app .order-state-timeline li::before{background:#6fbaff;border-color:#1f2024}
.panel-view:not(.display-light) #app :is(.report-text,.report-card,.report-fieldset){background:#006ffd;border-color:var(--work-line);color:#e8e9f1}
.panel-view:not(.display-light) #app :is(.invoice-lines,.invoice-line,.invoice-history,.coverage-summary,.street-map-toolbar){border-color:var(--work-line);color:var(--work-muted)}
.panel-view:not(.display-light) #app .street-map-toolbar{background:#006ffd}
.panel-view:not(.display-light) #app :is(.street-map-status,.street-map-hint){color:var(--work-muted)!important}
/* Street map imagery and navigation brand logos retain their own colors. */
.panel-view:not(.display-light) #app .leaflet-popup-content-wrapper{background:#006ffd;color:#f8f9fe}.panel-view:not(.display-light) #app .leaflet-popup-tip{background:#006ffd}
.panel-view:not(.display-light) #app .leaflet-popup-content :is(p,b){color:#e8e9f1}
.panel-view:not(.display-light) #app .leaflet-control-attribution{background:#ffffff;color:#494a50}.panel-view:not(.display-light) #app .leaflet-control-attribution a{color:#006ffd}
.panel-view:not(.display-light) .panel-quick-nav{background:#006ffdf5;border-color:var(--work-line);box-shadow:0 -8px 24px #1f202433;backdrop-filter:blur(16px)}
.panel-view:not(.display-light) .panel-quick-nav a{color:#c5c6cc}.panel-view:not(.display-light) .panel-quick-nav a[aria-current=page]{background:#6fbaff14;color:#b4dbff}
.panel-view:not(.display-light) .ref-footer{background:#006ffd;border-top:1px solid var(--work-line)}
.panel-view:not(.display-light) .ref-footer b{color:#e8e9f1}
.panel-view:not(.display-light) #toast{background:#006ffd;color:#f8f9fe;border:1px solid #6fbaff3a;box-shadow:0 8px 24px #1f202444}
/* Enter only once per inserted card; static cards do not pretend to be buttons. */
.card-arrive{animation:motoryar-card-in .36s var(--card-ease) both}
@keyframes motoryar-card-in{from{opacity:.6;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
@media(hover:hover) and (pointer:fine){
 #app :is(a.service,a.directory-card,.role-shortcuts>a):hover{transform:translateY(-3px);border-color:#6fbaff;box-shadow:0 9px 24px #006ffd10}
 .panel-view:not(.display-light) #app .role-shortcuts>a:hover{border-color:#6fbaff50;box-shadow:0 8px 24px #1f202444;background:#006ffd}
 .panel-view:not(.display-light) #app :is(.actual-order,.document-card,.skill-card):focus-within{border-color:#6fbaff4d}
}
@media(max-width:1000px){.panel-view:not(.display-light) .workspace{gap:20px}.panel-view:not(.display-light) #app .role-card{padding:24px}}
@media(max-width:800px){
 .panel-view:not(.display-light) #app .panel-heading{gap:16px;padding-bottom:18px;margin-bottom:20px}
 .panel-view:not(.display-light) #app .panel-heading h2{font-size:21px}
 .panel-view:not(.display-light) #app .role-welcome{padding:24px}.panel-view:not(.display-light) #app .role-welcome h2{font-size:24px}
 .panel-view:not(.display-light) #app .actual-order{padding:20px}
 .panel-view:not(.display-light) #app .actual-order .order-top{flex-direction:column;gap:10px}
 .panel-view:not(.display-light) #app .actual-order .order-top b{font-size:18px}
 .panel-view:not(.display-light) #app .actual-order .order-actions>*{flex:1 1 auto;min-width:0;text-align:center;justify-content:center}
 .panel-view:not(.display-light) #app .stat{padding:20px;min-height:140px}.panel-view:not(.display-light) #app .stat strong{font-size:28px}
 .panel-view:not(.display-light) #app .case-money article,.panel-view:not(.display-light) #app .finance-stats article{padding:18px}
 .panel-view:not(.display-light) #app .finance-list .finance-payment-item{padding:20px;gap:16px;flex-wrap:wrap}
 .panel-view:not(.display-light) #app .bike-card{padding:20px}.panel-view:not(.display-light) #app .bike-card>img{width:68px;height:68px;padding:10px}
 .panel-view:not(.display-light) #app .document-card{padding:20px}
}
@media(max-width:420px){
 .panel-view:not(.display-light) #app .role-card,.panel-view:not(.display-light) #app .admin-case .card{padding:20px}
 .card-heading-icon{width:36px;height:36px;flex-basis:36px;border-radius:11px}.card-heading-icon img{width:21px;height:21px}
 .panel-view:not(.display-light) #app .panel-heading h2{gap:10px;font-size:20px}
 .panel-view:not(.display-light) #app .role-welcome{padding:20px}
 .panel-view:not(.display-light) #app .stat{padding:18px}.panel-view:not(.display-light) #app .stat .metric-icon{inset-inline-end:16px;top:18px;width:30px;height:30px}
 .panel-view:not(.display-light) #app .stat strong{font-size:27px}.panel-view:not(.display-light) #app .stat span{font-size:15px}
 .panel-view:not(.display-light) #app .role-shortcuts>a{padding:20px}
 .panel-view:not(.display-light) #app .actual-order{padding:18px}
 .panel-view:not(.display-light) #app .case-money strong,.panel-view:not(.display-light) #app .finance-stats b{font-size:21px}
}
@media(prefers-reduced-motion:reduce){.card-arrive{animation:none!important}#app :is(.card,.service,.directory-card,.actual-order,.role-shortcuts>a){transition:none!important;transform:none!important}}
@media print{
 body.panel-view:not(.display-light){color-scheme:light;background:#ffffff!important;color:#006ffd!important}
 .panel-view:not(.display-light) #app :is(.card,.order,.skill-event,.case-entry,.case-person,.case-money article,.finance-stats article,.finance-payment-item,.finance-receipt-meta,.finance-breakdown,.finance-breakdown>div,.invoice-summary,.invoice-totals,th,td){background:#ffffff!important;box-shadow:none!important;border-color:#d4d6dd!important;color:#006ffd!important}
 .panel-view:not(.display-light) #app :is(h1,h2,h3,h4,p,b,strong,small,span,dt,dd,legend){color:#006ffd!important}
 .card-arrive{animation:none!important}.card-heading-icon,.metric-icon{display:none!important}
}
/* Legacy embedded forms and the separate payment shell share the new surfaces. */
.panel-view:not(.display-light) #app .stat .metric-icon{padding:0;min-width:0}
.panel-view:not(.display-light) #app .stat .metric-icon img{flex-shrink:0;width:20px;min-width:20px}
.panel-view:not(.display-light) #app :is(.skill-card form,.document-card form,.document-preview,.skill-intro,.review-summary,.coverage-summary){background:#1f2024;border:1px solid var(--work-line);color:#e8e9f1;border-radius:16px}
.panel-view:not(.display-light) #app .document-access-note{background:#ff616d0a;color:#ffe2e5;border-color:#ff616d40}
.panel-view:not(.display-light) #app .document-access-note p{color:#ffe2e5}
.panel-view:not(.display-light) #app .review-rating input:checked+span{background:#6fbaff17;color:#b4dbff;border-color:#6fbaff66}
.panel-view:not(.display-light) #app .review-rating span{background:#1f2024;color:#e8e9f1;border-color:#ffffff20}
body.panel-view:not(.display-light).gateway-view{background:var(--work-bg)}
.panel-view:not(.display-light) #app :is(.gateway-form,.gateway-merchant){background:var(--work-card);border-color:var(--work-line);box-shadow:0 8px 30px #1f202433}
.panel-view:not(.display-light) #app :is(.gateway-wordmark,.gateway-card-head h1,.gateway-merchant dd){color:var(--work-ink)}
.panel-view:not(.display-light) #app :is(.gateway-wordmark>span,.gateway-merchant dd.gateway-amount){color:var(--work-mint)}
.panel-view:not(.display-light) #app :is(.gateway-lock,.gateway-timer,.gateway-fields b,.gateway-form details,.gateway-security,.gateway-merchant dt,.gateway-bottom,.gateway-wordmark small){color:var(--work-muted);font-size:15px}
.panel-view:not(.display-light) #app :is(.gateway-card-head,.gateway-fields>div){border-color:var(--work-line)}
.panel-view:not(.display-light) #app :is(.gateway-fields span,.gateway-timer b,.gateway-shop){background:#006ffd;color:#e8e9f1;border-color:var(--work-line)}
.panel-view:not(.display-light) #app .gateway-fake-card{background:linear-gradient(120deg,#006ffd,#006ffd);border:1px solid #6fbaff33}
.panel-view:not(.display-light) #app .gateway-fake-card :is(small,b){color:#e8e9f1}
.panel-view:not(.display-light) #app .gateway-buttons>.button{background:var(--work-mint);color:#006ffd;border-color:transparent}
.panel-view:not(.display-light) #app .gateway-buttons>.secondary{background:#006ffd;color:#e8e9f1;border-color:#ffffff25}
.panel-view:not(.display-light) #app .gateway-bottom a{color:#b4dbff}
@media print{
 .panel-view:not(.display-light) #app :is(.skill-card form,.document-card form,.document-preview,.skill-intro,.review-summary,.coverage-summary,.gateway-form,.gateway-merchant,.gateway-fields span,.gateway-fake-card){background:#ffffff!important;color:#006ffd!important;border-color:#d4d6dd!important}
}
.panel-view:not(.display-light) #app :is(.order-position,.order-location-point,.street-map-shell){background:#006ffd;border:1px solid var(--work-line);color:var(--work-ink)}
.panel-view:not(.display-light) #app :is(.invoice-kind,.request-steps .active,.wizard-steps .active){color:#b4dbff}
.panel-view:not(.display-light) #app .order-position-tabs [aria-pressed=true]{background:#6fbaff1b;color:#b4dbff;border-color:#6fbaff64}
@media print{.panel-view:not(.display-light) #app :is(.order-position,.order-location-point,.street-map-shell){background:#ffffff!important;color:#006ffd!important}}
.panel-view:not(.display-light) #app .progress{gap:10px;margin-bottom:28px}
.panel-view:not(.display-light) #app .progress span{font-size:14px;line-height:1.9;color:#c5c6cc;padding-top:12px;border-color:#494a50;min-width:0}
.panel-view:not(.display-light) #app .progress span.active{color:#b4dbff;border-color:#6fbaff}
.panel-view:not(.display-light) #app .admin-case .case-header .eyebrow{color:#b4dbff}
.panel-view:not(.display-light) #app .admin-case .case-header .optional,.panel-view:not(.display-light) #app .order-state-timeline time{color:var(--work-muted)}
.panel-view:not(.display-light) #app .order-state-timeline .timeline-number{background:#2f3036;color:#b4dbff;border:1px solid #6fbaff46}
.panel-view:not(.display-light) #app a.link{color:#b4dbff}
.panel-view:not(.display-light) #app .report-checks>div{background:#006ffd;border:1px solid var(--work-line);border-radius:13px;padding:16px;color:#e8e9f1}
.panel-view:not(.display-light) #app .check-result{color:#b4dbff;background:#6fbaff0e}.panel-view:not(.display-light) #app .check-result.attention{color:#ffe2e5;background:#ff616d12}
.panel-view:not(.display-light) #app .role-card:has(>.bike-card){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.panel-view:not(.display-light) #app .role-card:has(>.bike-card)>.panel-heading{grid-column:1/-1;margin-bottom:8px}
.panel-view:not(.display-light) #app .bike-card{display:grid;grid-template-columns:68px minmax(0,1fr);align-items:start;margin:0;padding:24px;column-gap:16px;row-gap:20px}
.panel-view:not(.display-light) #app .bike-card>img{width:68px;height:68px}
.panel-view:not(.display-light) #app .bike-card>div{min-width:0}.panel-view:not(.display-light) #app .bike-card b{font-size:18px;line-height:1.8;overflow-wrap:anywhere}
.panel-view:not(.display-light) #app .bike-card>div>p{font-size:15px;line-height:1.9;margin-block:6px 12px}
.panel-view:not(.display-light) #app .bike-facts{display:grid;gap:10px;margin-top:14px;border-top:1px solid var(--work-line);padding-top:14px;grid-column:1/-1}
.panel-view:not(.display-light) #app .bike-facts b{font-size:15px;color:#e8e9f1}.panel-view:not(.display-light) #app .bike-facts span{font-size:15px}
.panel-view:not(.display-light) #app .bike-card>a.link{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;min-height:48px;border-top:1px solid var(--work-line);padding-top:16px;font-size:16px;font-weight:650}
@media(max-width:1100px){.panel-view:not(.display-light) #app .role-card:has(>.bike-card){grid-template-columns:minmax(0,1fr)}}
@media(max-width:420px){.panel-view:not(.display-light) #app .bike-card{padding:18px;grid-template-columns:52px minmax(0,1fr);gap:14px}.panel-view:not(.display-light) #app .bike-card>img{width:52px;height:52px;padding:8px}}
/* Compact case metadata reads as a summary rather than a loose paragraph list. */
.panel-view:not(.display-light) #app .admin-case .case-header>p{display:inline-block;margin-block:12px 4px;margin-inline-end:10px;padding:7px 12px;border:1px solid var(--work-line);border-radius:9px;background:#ffffff03;font-size:15px}
@media print{
 .panel-view:not(.display-light) #app :is(label,label.field,.order-gps-consent,.gateway-fields b,.gateway-merchant dt,.gateway-merchant dd){color:#006ffd!important}
 .panel-view:not(.display-light) #app :is(.report-checks>div,.order-state-timeline li>div,.admin-case .case-header>p,.check-result,.timeline-number){background:#ffffff!important;border-color:#d4d6dd!important;color:#006ffd!important}
 .panel-view:not(.display-light) #app .stat span{padding:0}
}
.panel-view:not(.display-light) #app .consent,.panel-view:not(.display-light) #app .refund-event dt{color:var(--work-muted)}
@media print{.panel-view:not(.display-light) #app .consent,.panel-view:not(.display-light) #app .refund-event dt{color:#006ffd!important}}
#app .map-promo .pin span,#app .motoryar-map-pin{background:#006ffd}
#app .ref-future a.link,#app .service-directory>.eyebrow,#app .places-hero>span{color:#006ffd}
#app .ref-join{background-color:#006ffd}
#app .service-directory .eyebrow{color:#006ffd}