/* Product fixes: header theme toggle, duration picker, payout terms, creator earnings claim. Loaded last. */

/* Theme toggle, top right in the header */
.theme-toggle{display:inline-grid;place-items:center;width:38px;height:38px;flex:none;border:1px solid var(--outline);border-radius:8px;background:transparent;color:var(--text);cursor:pointer;transition:background .15s,border-color .15s}
.theme-toggle:hover{background:var(--soft)}
.theme-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.theme-toggle .icon{grid-area:1/1;width:17px;height:17px;color:currentColor;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.theme-toggle .icon-sun{display:none}
[data-theme=dark] .theme-toggle .icon-moon{display:none}
[data-theme=dark] .theme-toggle .icon-sun{display:block}
.header .header-actions{display:flex;align-items:center;gap:10px}

/* Case duration */
.duration-field{display:flex;flex-direction:column;gap:10px;margin-top:21px}
.duration-field .field-label{font-size:12px;font-weight:550;color:var(--text)}
.duration-field small{font-size:10px;line-height:1.5;color:var(--muted);font-weight:400}
.duration-field small.is-bad{color:var(--error)}
#duration-summary{font-size:11px;color:var(--text)}
.segmented{display:inline-flex;align-self:flex-start;gap:3px;padding:3px;border:1px solid var(--outline);border-radius:8px;background:var(--surface)}
.segmented label{position:relative;cursor:pointer}
.segmented input{position:absolute;opacity:0;width:1px;height:1px}
.segmented span{display:block;padding:7px 13px;border-radius:5px;font-size:11px;font-weight:500;color:var(--muted)}
.segmented input:checked+span{background:var(--soft);color:var(--text)}
.segmented input:focus-visible+span{outline:2px solid var(--accent);outline-offset:1px}
.duration-length{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.duration-length[hidden],.duration-end[hidden]{display:none}
.unit-input{position:relative;display:block}
.unit-input input{width:100%;box-sizing:border-box;padding-right:64px}
.unit-input span{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:11px;color:var(--muted);pointer-events:none}
.duration-end input{width:100%;box-sizing:border-box}

/* Payout terms (replaces the old cramped "Winner takes / Auto-restarts" strip) */
.payout-terms{margin:22px 0 0;padding:4px 16px;border:1px solid var(--line);border-radius:10px;background:var(--soft)}
.payout-terms>div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:11px 0;border-top:1px solid var(--line)}
.payout-terms>div:first-child{border-top:0}
.payout-terms dt{font-size:11px;color:var(--muted);flex:none}
.payout-terms dd{margin:0;font-size:12px;font-weight:550;color:var(--text);text-align:right}

/* Creator earnings: case page */
.creator-panel{display:flex;flex-direction:column;gap:10px}
.creator-panel>strong{font-size:28px;letter-spacing:-1px;color:var(--text)}
.creator-panel>strong>small{font-size:12px;letter-spacing:0;font-weight:450;color:var(--muted)}
.creator-panel>p{margin:0;font-size:10px;line-height:1.55;color:var(--muted)}
.creator-panel .button{justify-content:center;font-size:12px;padding:0 14px;gap:6px;min-height:38px}

/* Creator earnings: profile */
.claim-panel{margin-bottom:22px}
.claim-head{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap}
.claim-head strong{display:block;font-size:28px;letter-spacing:-1px;margin:6px 0;color:var(--text)}
.claim-head strong small{font-size:12px;letter-spacing:0;font-weight:450;color:var(--muted)}
.claim-head p{margin:0;font-size:11px;color:var(--muted);max-width:420px}
.claim-head .button{font-size:12px;padding:0 16px;gap:6px;min-height:40px}
.claim-list{list-style:none;margin:16px 0 0;padding:0;border-top:1px solid var(--line)}
.claim-list li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:16px;padding:10px 0;border-bottom:1px solid var(--line)}
.claim-list a{display:flex;align-items:center;gap:10px;min-width:0;color:var(--text);text-decoration:none;font-size:12px;font-weight:500}
.claim-list a span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.claim-list img{border-radius:6px;flex:none}
.claim-amount{font-size:12px;font-variant-numeric:tabular-nums;color:var(--text)}
.claim-list .text-button[disabled]{opacity:.4;cursor:default}
.claim-due{color:var(--accent);font-weight:600}

@media (max-width:620px){
  .duration-length{grid-template-columns:1fr}
  .payout-terms>div{flex-direction:column;gap:3px}
  .payout-terms dd{text-align:left}
  .claim-head .button{width:100%;justify-content:center}
}

/* Creator earnings simulation (create page) */
.creator-sim{margin-top:22px;padding:18px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.creator-sim .preview-eyebrow{margin:0 0 6px}
.sim-intro{margin:0 0 14px;font-size:12px;line-height:1.5;color:var(--muted)}
.sim-intro b{color:var(--text);font-weight:600}
.sim-rows{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.sim-rows li{display:grid;grid-template-columns:64px minmax(0,1fr) 96px;align-items:center;gap:12px;cursor:default}
.sim-n{font-size:13px;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums;line-height:1.1}
.sim-n small,.sim-val small{display:block;font-size:10px;font-weight:400;color:var(--muted)}
.sim-bar{height:10px;border-radius:0 4px 4px 0;background:var(--soft);overflow:hidden}
.sim-bar i{display:block;height:100%;background:var(--accent);border-radius:0 4px 4px 0}
.sim-rows li:hover .sim-bar i{filter:brightness(1.12)}
.sim-val{text-align:right;font-variant-numeric:tabular-nums;line-height:1.15}
.sim-val strong{font-size:13px;color:var(--text)}
.sim-note,.sim-empty{margin:12px 0 0;font-size:10px;line-height:1.5;color:var(--muted)}

/* Creator PnL simulator */
.creator-sim{--pos:var(--positive);--neg:var(--error)}
.is-pos{color:var(--pos)!important}
.is-neg{color:var(--neg)!important}
.pnl-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin:4px 0 6px}
.pnl-label{display:block;font-size:11px;color:var(--muted)}
.pnl-label b{color:var(--text);font-variant-numeric:tabular-nums}
.pnl-value{display:block;font-size:30px;letter-spacing:-1px;font-variant-numeric:tabular-nums;line-height:1.15;transition:color .2s}
.pnl-per{text-align:right;font-size:12px;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums}
.pnl-per small{display:block;font-size:10px;font-weight:400;color:var(--muted)}
.pnl-chart{display:block;width:100%;height:auto;max-width:100%;margin:4px 0 2px;overflow:visible}
.pnl-area-pos{fill:var(--pos);opacity:.16}
.pnl-area-neg{fill:var(--neg);opacity:.14}
.pnl-line-pos,.pnl-line-neg{fill:none;stroke-width:2;stroke-linejoin:round}
.pnl-line-pos{stroke:var(--pos)}
.pnl-line-neg{stroke:var(--neg)}
.pnl-zero{stroke:var(--muted);stroke-width:1;stroke-dasharray:3 3;opacity:.7}
.pnl-be{stroke:var(--muted);stroke-width:1;stroke-dasharray:2 3;opacity:.6}
.pnl-cursor{stroke:var(--text);stroke-width:1;opacity:.25}
.pnl-dot-pos,.pnl-dot-neg{stroke:var(--surface);stroke-width:2}
.pnl-dot-pos{fill:var(--pos)}
.pnl-dot-neg{fill:var(--neg)}
.sim-tick{font-size:9px;fill:var(--muted);stroke:none;font-weight:400;font-variant-numeric:tabular-nums}
#sim-range{width:100%;margin:8px 0 10px;accent-color:var(--accent);cursor:pointer}
.sim-chips{display:flex;flex-wrap:wrap;gap:6px}
.sim-chips button{flex:1 1 0;min-width:44px;padding:6px 0;border:1px solid var(--outline);border-radius:6px;background:transparent;color:var(--muted);font-size:11px;font-weight:600;cursor:pointer;font-variant-numeric:tabular-nums}
.sim-chips button:hover{color:var(--text);border-color:var(--text)}
.sim-chips button[aria-pressed=true]{background:var(--soft);color:var(--text);border-color:var(--text)}
.sim-chips button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pnl-breakdown{margin:14px 0 0;padding:0}
.pnl-breakdown>div{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-top:1px solid var(--line);font-size:11px}
.pnl-breakdown dt{color:var(--muted)}
.pnl-breakdown dd{margin:0;font-weight:600;font-variant-numeric:tabular-nums}
.pnl-breakdown .pnl-total{border-top:1px solid var(--text)}
.pnl-breakdown .pnl-total dt{color:var(--text);font-weight:600}
.pnl-breakdown .pnl-total dd{font-size:13px}
@media (prefers-reduced-motion:reduce){.pnl-value{transition:none}}

/* Status sticker plus an optional LOW ENTRY sticker */
.case-stickers{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
.case-sticker-extra{transform:rotate(2deg)}

/* Live mode: the bench panel (replaces the demo jury controls) */
.live-bench .payout-terms{margin-top:6px}
@media(max-width:740px){.live-bench{order:4;width:100%}.creator-panel{order:3;width:100%}}

/* Featured Pepe Milady tribute; slot 50 keeps its stable ID and chain index. */
.avatar-grid .avatar-tribute{grid-column:1/-1;display:flex;flex-direction:row;align-items:center;gap:22px;padding:18px;border:1px solid var(--line);border-radius:12px;background:var(--surface);text-align:left;margin-bottom:8px;overflow:hidden}
.avatar-grid .avatar-tribute>img{width:112px;height:112px;flex:none;border-radius:13px;object-fit:cover}
.avatar-grid .avatar-tribute .tribute-copy{display:flex;flex-direction:column;gap:9px;text-align:left;white-space:normal;overflow:visible;text-transform:none;width:auto;min-width:0;color:var(--text)}
.tribute-eyebrow{font-size:8px;letter-spacing:1.6px;color:var(--accent);font-weight:650}
.tribute-copy strong{font-size:24px;line-height:1.1;letter-spacing:-.6px;color:var(--text)}
.tribute-caption{font-size:12px;line-height:1.5;color:var(--muted);overflow-wrap:anywhere}
.tribute-action{font-size:11px;color:var(--accent);margin-top:3px}
.avatar-grid .avatar-tribute:hover,.avatar-grid .avatar-tribute[aria-pressed=true]{border-color:var(--accent)}
@media(max-width:520px){.avatar-grid .avatar-tribute{padding:12px;gap:14px}.avatar-grid .avatar-tribute>img{width:84px;height:84px}.tribute-copy strong{font-size:21px}.tribute-caption{font-size:10px}.tribute-eyebrow{font-size:7px;letter-spacing:1px}.tribute-action{font-size:10px}.avatar-grid .avatar-tribute .tribute-copy{gap:6px}}

/* Create page: the preview card is clearly a preview; the real action sits right under it */
.case-entry-preview{border:1.5px dashed rgba(var(--case-rgb),.45);background:transparent!important;color:var(--muted)!important;cursor:default;pointer-events:none}
.case-entry-preview .entry-call,.case-entry-preview .entry-price strong{color:var(--muted)}
.preview-cta{display:flex;flex-direction:column;gap:9px;margin-top:16px}
.preview-cta .button{justify-content:center;width:100%;min-height:50px;font-size:14px}
.preview-cta small{font-size:10px;line-height:1.5;color:var(--muted);text-align:center}
@media(max-width:740px){.preview-cta{display:none}}

/* Icons inside buttons sit on the text's optical centre */
.button>.icon{width:15px;height:15px;flex:none;vertical-align:middle;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.button:has(>.icon){display:inline-flex;align-items:center;gap:7px}

/* Selects: one chevron, drawn by us, at a fixed spot in every browser */
select:not([multiple]){-webkit-appearance:none;appearance:none;padding-right:34px!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%238a93a0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;background-size:11px 8px}

/* Wallet logos from EIP-6963 */
.wallet-icon{width:40px;height:40px;flex:none;border-radius:10px;object-fit:contain;background:var(--soft);padding:4px;box-sizing:border-box}
.wallet-symbol{flex:none;width:40px;height:40px;display:grid;place-items:center;padding:0;box-sizing:border-box}

/* Testnet banner: hard to miss while the swarm is not connected */
.demo-mode-bar.is-testnet{margin:12px 0 4px;padding:12px 16px;border:1px solid #6b5844;border-radius:8px;background:#322c25;color:#e3c9a8;font-size:12px;line-height:1.6;align-items:center}
.demo-mode-bar.is-testnet>.demo-chip{border-color:#c79a5e;color:#f0c88f;background:transparent;font-weight:700}
[data-theme=light] .demo-mode-bar.is-testnet{background:#fff3df;border-color:#e4c99a;color:#6f4f1f}
[data-theme=light] .demo-mode-bar.is-testnet>.demo-chip{background:#ffe2b0;border-color:#d9a85a;color:#7a4f10}
@media(max-width:740px){.demo-mode-bar.is-testnet{font-size:11px;padding:10px 12px;align-items:flex-start}}
.testnet-link{color:inherit;text-decoration:underline;text-underline-offset:2px;font-weight:600;white-space:nowrap}

/* Get IMD: the one external link in the main nav */
.header nav a.nav-external{color:var(--accent);white-space:nowrap}
@media(max-width:740px){.header nav{overflow-x:auto;scrollbar-width:none}.header nav::-webkit-scrollbar{display:none}.header nav a{flex:none}}

/* Share on X / Copy link under the case clock */
.share-row{display:flex;gap:8px;margin-top:4px}
.share-row .button{font-size:11px;min-height:32px;padding:0 12px;white-space:nowrap}
@media(max-width:740px){.case-page-heading{flex-wrap:wrap}.case-deadline{align-items:flex-start}}

/* Error toast: bottom left, stays 8 s, can be dismissed */
.error-toast{position:fixed;left:24px;bottom:24px;z-index:30;display:flex;align-items:flex-start;gap:12px;max-width:min(420px,calc(100% - 32px));padding:14px 14px 14px 16px;border-radius:10px;background:#2d1f1d;border:1px solid #8a4a3f;color:#f3d9d3;font-size:13px;line-height:1.5;box-shadow:0 8px 30px #0006;opacity:0;transform:translateY(10px);transition:opacity .18s,transform .18s}
.error-toast.visible{opacity:1;transform:none}
.error-toast-mark{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:#e58c7d;color:#2d1f1d;font-weight:800;font-size:13px}
.error-toast>span[data-error-text]{flex:1;min-width:0;overflow-wrap:anywhere;padding-top:1px}
.error-toast button{flex:none;color:inherit;opacity:.7;font-size:13px;padding:2px 4px;line-height:1}
.error-toast button:hover{opacity:1}
[data-theme=light] .error-toast{background:#fff1ee;border-color:#e3b2a8;color:#7a2e21;box-shadow:0 8px 30px #0002}
[data-theme=light] .error-toast-mark{background:#b64e3c;color:#fff}
@media(max-width:740px){.error-toast{left:16px;right:16px;bottom:16px;max-width:none}}

/* Case card dialog */
#card-dialog{max-width:720px}
.card-frame{border-radius:10px;overflow:hidden;border:1px solid var(--outline);background:#15171b;aspect-ratio:1200/630}
.card-frame img{display:block;width:100%;height:auto}
.card-note{font-size:12px;color:var(--muted);margin:12px 0 18px}
.card-actions{display:flex;gap:10px;flex-wrap:wrap}
@media(max-width:740px){.case-deadline{flex-wrap:wrap}.case-deadline strong{white-space:nowrap}.share-row{flex-basis:100%;margin-top:6px}}

/* Case cards in a row line up: the brief block takes the slack, so standard, clock and button sit at the bottom */
.case-card{display:flex;flex-direction:column}
.case-card .brief-to-beat{flex:1;display:flex;flex-direction:column}
.case-card .brief-standard{margin-top:auto}
@media(min-width:741px){.case-card .case-task{min-height:calc(3 * 1.65em)}}

/* Testnet: Get test IMD / Get test ETH in the header, before the wallet button (own row on phones) */
.testnet-pills{display:flex;gap:8px;margin-left:auto}
.testnet-pills+.header-actions{margin-left:0}
.testnet-pill,.testnet-pill:hover{min-height:40px;padding:0 15px;font-size:12px;white-space:nowrap;border:1px solid var(--accent);color:var(--accent);background:transparent;text-decoration:none}
.testnet-pill:hover{background:color-mix(in srgb,var(--accent) 10%,transparent)}
@media(min-width:741px) and (max-width:1180px){.header nav a[data-nav="docs"]{display:none}}
@media(max-width:740px){.testnet-pills{order:10;flex-basis:100%;margin:0 0 4px}.testnet-pills+.header-actions{margin-left:auto}.testnet-pill{flex:1;justify-content:center;min-height:36px;font-size:11px}}

/* Telegram alerts panel on your own profile (live): same frame as the wallet panel, a phrase instead of a number */
.telegram-panel{margin-top:14px}
.profile-page .telegram-panel strong{font-size:22px;letter-spacing:-.4px;margin:10px 0 8px}
.telegram-panel p{max-width:560px}
.telegram-linked{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border:1px solid var(--outline,#3b424d);border-radius:999px;font-size:11px;color:var(--accent);white-space:nowrap}
@media(max-width:740px){.profile-page .telegram-panel strong{font-size:20px}.telegram-linked{white-space:normal;justify-content:center;text-align:center;line-height:1.4;padding:8px 14px}}

/* X (Twitter) link: an icon button in the header, a line in the footer */
.icon-link.x-link{display:inline-grid;place-items:center;width:38px;height:38px;flex:none;border:1px solid var(--outline);border-radius:8px;color:var(--text);transition:border-color .15s,color .15s}
.icon-link.x-link:hover{border-color:var(--accent);color:var(--accent)}
/* Brand silhouettes use fill only; the global SVG stroke makes X look bold. */
.x-icon{width:17px;height:17px;fill:currentColor;stroke:none;stroke-width:0}
.footer-about .footer-x{display:flex;width:max-content;align-items:center;gap:7px;margin-top:10px}
.footer-x .x-icon{width:13px;height:13px}

/* Holders-only cases */
.case-sticker-holders{transform:rotate(1deg);color:#b9c99b;background:rgba(185,201,155,.09);border-color:rgba(185,201,155,.35)}
.holders-notice{display:flex;flex-direction:column;gap:7px;border:1px solid #4d5a3f;background:#20261d;border-radius:6px;padding:13px;margin-bottom:16px}
.holders-notice .micro-label{font-size:8px;letter-spacing:1.4px;color:#b9c99b}
.holders-notice p{margin:0;font-size:12px;line-height:1.7;color:#c7d1bb}
.holders-notice b{font-weight:600;color:#e3ecd6}
[data-theme=light] .case-sticker-holders{color:#4c733c;background:rgba(76,115,60,.08);border-color:rgba(76,115,60,.3)}
[data-theme=light] .holders-notice{background:#eef4e6;border-color:#c9d8b8}
[data-theme=light] .holders-notice .micro-label{color:#4c733c}
[data-theme=light] .holders-notice p{color:#41553a}
[data-theme=light] .holders-notice b{color:#2c3d25}
.form-section .holders-amount{margin-top:14px}
/* terms note under the file and open buttons */
.terms-note{font-size:9px;line-height:1.6;color:#8c9aad;margin:12px 0 0}.terms-note a{color:inherit;text-decoration:underline;text-underline-offset:2px}.terms-note a:hover{color:var(--accent)}
.create-submit+.terms-note{text-align:right}
[data-theme=light] .terms-note{color:var(--muted)}
@media(max-width:740px){.terms-note{font-size:10px}.create-submit+.terms-note{text-align:left}}

/* the winner claims the pot (live) */
.case-money-panel .pot-claim{width:100%;justify-content:center;margin:14px 0 4px;grid-column:1/-1}
.case-money-panel .pot-wait{grid-column:1/-1;font-size:10px;line-height:1.6;color:var(--muted);margin:14px 0 0;padding:0;border:0}
.pots-panel{border-color:rgba(var(--accent-rgb),.45)}

/* wins: what a pot paid out, big and green (not PnL: what the win sent to the wallet) */
.won-amount{display:block;color:var(--positive);font-weight:700;letter-spacing:-.8px;font-variant-numeric:tabular-nums;line-height:1.1}
.profile-stats .stat-won strong{font-size:30px}
.profile-stats .stat-won .won-amount{font-size:30px}
.profile-stats .won-note{font-size:10px;color:var(--muted);line-height:1.5}
.profile-stats .stat-won.has-wins{border-color:color-mix(in srgb,var(--positive) 45%,transparent);background:linear-gradient(160deg,color-mix(in srgb,var(--positive) 14%,var(--surface)) 0%,var(--surface) 70%);position:relative;overflow:hidden}
.profile-stats .stat-won.has-wins span{color:var(--positive);font-weight:600;letter-spacing:.3px}
.profile-stats .stat-won.has-wins::after{content:"";position:absolute;right:-28px;top:-28px;width:96px;height:96px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--positive) 28%,transparent),transparent 70%);pointer-events:none}
.my-brief.is-won{border-color:color-mix(in srgb,var(--positive) 50%,transparent);background:linear-gradient(170deg,color-mix(in srgb,var(--positive) 11%,var(--surface)) 0%,var(--surface) 60%)}
.my-brief .won-line{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:-4px 0 14px;padding:12px 0;border-block:1px dashed color-mix(in srgb,var(--positive) 40%,transparent)}
.my-brief .won-line span{font-size:10px;color:var(--muted)}
.my-brief .won-line .won-amount{font-size:26px}
.won-amount{white-space:nowrap}
@media(max-width:740px){.profile-stats:has(.has-wins){grid-template-columns:1fr 1fr}.profile-stats .stat-won.has-wins{grid-column:1/-1}.profile-stats .stat-won strong{font-size:24px}.profile-stats .stat-won .won-amount{font-size:28px}.profile-stats .won-note{font-size:9px}.my-brief .won-line .won-amount{font-size:22px}}
/* live banner: which chain the IMD must be on */
.demo-mode-bar .chain-note-link{margin-left:auto;color:var(--accent);font-weight:600;white-space:nowrap}
@media(max-width:740px){.demo-mode-bar .chain-note-link{display:inline;margin-left:0}.demo-mode-bar:has(.chain-note-link){flex-wrap:wrap}}

/* a held payment or a won pot right under the wallet panel */
.wallet-panel + .claim-panel{margin-top:16px}

/* live bar: the audit badge next to "Get IMD" */
.demo-mode-bar .bar-links{margin-left:auto;display:inline-flex;align-items:center;gap:14px;white-space:nowrap}
.demo-mode-bar .bar-links .chain-note-link{margin-left:0}
.demo-mode-bar .audit-badge{display:inline-flex;align-items:center;gap:6px;padding:3px 9px 3px 7px;border:1px solid color-mix(in srgb,#2f9e5b 45%,transparent);border-radius:999px;background:color-mix(in srgb,#2f9e5b 10%,transparent);color:#5fd08b;font-weight:700;font-size:11px;letter-spacing:.01em;text-decoration:none;transition:background .15s,border-color .15s}
.demo-mode-bar .audit-badge:hover{background:color-mix(in srgb,#2f9e5b 18%,transparent);border-color:#2f9e5b}
.demo-mode-bar .audit-badge svg{width:13px;height:13px;flex:none}
.demo-mode-bar .audit-badge svg path{fill:currentColor}
.demo-mode-bar .audit-badge svg path.tick{fill:none;stroke:var(--bg,#fff);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
[data-theme=light] .demo-mode-bar .audit-badge{color:#1f7a43}
@media(max-width:740px){.demo-mode-bar .bar-links{margin-left:0;gap:12px;flex-wrap:wrap}}