/* The portal pages (Status, My account, Reseller panel, Administration, and the frame the chat
   pages share). The first part carries the layout rules of the stylesheet this design replaced on
   2026-10-08, with its colours, type, corners and glows brought to this design; the second part is
   written for this design. Loaded after site.css. */

/* ---- Carried over from the previous stylesheet ------------------------------------------------ */
.account-launcher-card+.account-additional-loaders{margin-top:22px}.reseller-extra-loaders{margin-top:20px;padding-top:16px;border-top:1px solid #272c32}.launcher-options-block{margin-top:18px;padding-top:16px;border-top:1px solid #272c32}.launcher-options-block .field{display:grid;gap:6px;margin-top:12px}.launcher-options-block .field>input,.launcher-options-block .field>select,.launcher-options-block .field>textarea{width:100%;box-sizing:border-box;border:1px solid #2d333a;border-radius:6px;padding:11px 12px;background:#06080c;color:#f5f6f8;font:500 15px var(--sans)}.launcher-options-block .field>textarea{resize:vertical;min-height:112px}.launcher-options-block .field>input:focus,.launcher-options-block .field>select:focus,.launcher-options-block .field>textarea:focus{outline:none;border-color:#2f9dff;box-shadow:none}.launcher-options-block input[type=file]{padding:7px}.launcher-options-block input[type=file]::file-selector-button{margin-right:10px;border:1px solid #2d333a;border-radius:4px;padding:7px 10px;background:#11161d;color:#f5f6f8;font:600 13px var(--sans);cursor:pointer}.reseller-logo-preview{display:inline-grid;gap:7px;color:#72bdff}.reseller-logo-preview img{display:block;max-width:220px;max-height:150px;object-fit:contain;border:1px solid #2d333a;border-radius:6px;background:#040608}
.account-review-heading{margin-bottom:16px}.account-review-heading h2{margin-bottom:0}.account-vouch-panel+.account-vouch-panel{margin-top:18px}.account-vouch-list{display:grid;gap:10px;margin-top:14px}.account-vouch-row{display:flex;align-items:center;justify-content:space-between;gap:16px;border:1px solid #21252b;background:#090c10;border-radius:6px;padding:13px}.account-vouch-row div{display:grid;gap:3px;min-width:0}.account-vouch-row small,.account-vouch-row span{color:var(--muted)}.account-vouch-row strong{overflow-wrap:anywhere}.account-vouch-form{display:grid;gap:14px}.account-vouch-form .modal-top p{margin:4px 0;color:var(--muted)}.account-vouch-form label{display:grid;gap:6px;color:#d9dbdf;font-weight:600}.account-vouch-form select,.account-vouch-form textarea,.account-vouch-form input[type=file]{width:100%;box-sizing:border-box;border:1px solid #2d333a;background:#06080c;color:#ffffff;border-radius:6px;padding:12px;font:500 15px var(--sans)}.account-vouch-form textarea{resize:vertical;min-height:130px}.account-vouch-form select:focus,.account-vouch-form textarea:focus,.account-vouch-form input[type=file]:focus{outline:none;border-color:#2f9dff;box-shadow:inset 0 0 0 1px #2f9dff}.account-vouch-form input[type=file]::file-selector-button{margin-right:10px;border:1px solid #2d333a;border-radius:4px;padding:7px 10px;background:#11161d;color:#f5f6f8;font:600 13px var(--sans);cursor:pointer}.account-vouch-form label>small{text-align:right;color:var(--muted)}
.account-active-products .section-title{margin-top:0}.account-section-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:22px 0}.account-section-tabs button{display:inline-flex;align-items:center;gap:7px;border:1px solid #2d333a;border-radius:6px;padding:10px 14px;background:#0a0e13;color:#d9dbdf;font:600 14px var(--sans);cursor:pointer}.account-section-tabs button:hover,.account-section-tabs button.active{border-color:#2f9dff;background:#18202c;color:#ffffff;box-shadow:none}.account-section-tabs button strong{display:grid;place-items:center;min-width:20px;height:20px;border-radius:999px;background:#d92e54;color:#ffffff;font-size:11px}.account-vouch-pagination{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-top:14px}.account-vouch-pagination span{color:var(--muted)}
@media(max-width:760px){.account-vouch-row{align-items:stretch;flex-direction:column}.account-vouch-row .button{width:100%}.account-vouch-form .action-row{display:grid}.account-vouch-form .button{width:100%}.account-section-tabs{flex-wrap:nowrap;overflow-x:auto;padding-bottom:7px;scrollbar-width:thin}.account-section-tabs button{flex:0 0 auto}.account-vouch-pagination{justify-content:space-between}}
.portal-main{max-width:1500px;margin:auto;padding:70px clamp(22px,5vw,82px) 110px}.portal-hero{margin-bottom:34px}.portal-hero h1{font:800 clamp(34px,5vw,58px)/1.1 var(--sans);font-stretch:118%;margin:12px 0}.portal-hero p{max-width:760px;color:var(--muted);font-size:17.5px}.metric-grid,.panel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin:22px 0}.metric,.panel{border:1px solid var(--line);background:linear-gradient(145deg,rgba(17,21,27,.9),rgba(8,10,14,.96));border-radius:8px;padding:20px;box-shadow:0 15px 45px #00000055;transition:.22s transform,.22s border-color,.22s box-shadow}.metric:hover,.panel:hover{transform:translateY(-3px);border-color:#2f9dff75;box-shadow:0 16px 42px #00000088}.metric small{color:var(--muted)}.metric strong{display:block;font:700 28px var(--sans);font-stretch:118%;margin-top:7px}.panel h2,.panel h3{font-family:var(--sans);font-stretch:118%}.panel-wide{grid-column:1/-1}.data-list{display:grid;gap:10px}.data-row{display:grid;grid-template-columns:minmax(170px,1.5fr) minmax(110px,.7fr) minmax(130px,.8fr) auto;gap:14px;align-items:center;border:1px solid #21252b;background:#090c10;border-radius:6px;padding:13px}.data-row>div>small{display:block;margin-top:6px;line-height:1.3;color:var(--muted)}.data-row code{color:#8fcbff;word-break:break-all}.state{display:inline-flex;width:max-content;border:1px solid;padding:4px 9px;border-radius:999px;text-transform:capitalize;font-size:12px}.state.active,.state.online,.state.updated{color:var(--green);border-color:#35e6a555;background:#153d32}.state.unused,.state.testing,.state.updating,.state.activate{color:var(--orange);border-color:#ffad4255;background:#3d2f17}.state.expired,.state.offline{color:var(--red);border-color:#ff547055;background:#3e1721}.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:18px 0}.toolbar select,.toolbar input,.form-grid select,.form-grid input{border:1px solid #272c32;background:#080b0f;color:white;border-radius:6px;padding:11px;font:500 15px var(--sans)}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.form-grid label{color:#c9ccd0}.form-grid label>*{display:block;width:100%;margin-top:5px}.span-all{grid-column:1/-1}.empty-state{padding:35px;text-align:center;color:var(--muted);border:1px dashed #272c32;border-radius:6px}.status-groups{display:grid;gap:24px}.status-group h2{font:700 22px var(--sans);font-stretch:118%}.status-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(245px,1fr));gap:13px}.status-card{position:relative;border:1px solid var(--line);background:linear-gradient(145deg,#101419,#090b0f);border-radius:6px;padding:17px;overflow:hidden;transition:.2s}.status-card:hover{transform:translateY(-3px) scale(1.01);box-shadow:0 12px 35px #00000088}.status-card:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--green)}.status-card.updating:before,.status-card.testing:before{background:var(--orange)}.status-card.offline:before{background:var(--red)}.status-card h3{font:700 14px/1.4 var(--sans);font-stretch:118%;margin:0 0 13px}.status-meta{display:flex;justify-content:space-between;color:var(--muted)}.masked-key{filter:blur(5px);transition:.2s}.masked-key:hover{filter:none}.section-title{font:700 24px var(--sans);font-stretch:118%;margin:34px 0 15px}.secure-note{color:var(--muted);font-size:13px}.action-row{display:flex;gap:8px;flex-wrap:wrap}.button-small{padding:7px 11px;font-size:12px}@media(max-width:760px){.data-row{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}.span-all{grid-column:auto}}
.portal-section-picker{display:block;max-width:420px;margin:22px 0;color:var(--muted);font-weight:600}.portal-section-picker select{display:block;width:100%;margin-top:6px;border:1px solid #2f9dff;background:#0a0e13;color:#ffffff;border-radius:6px;padding:12px;font:600 15px var(--sans)}.portal-section{display:none}.portal-section.active{display:block}
.reseller-product-group+.reseller-product-group{margin-top:24px}.reseller-product-group h3{font:700 17px var(--sans);font-stretch:118%;color:#eaedf1}.reseller-product-row p{margin:4px 0}.reseller-product-row p small{display:block;color:var(--muted)}
.tutorial-section+.tutorial-section{margin-top:28px}.tutorial-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}.tutorial-heading h3{font:700 17px var(--sans);font-stretch:118%;margin:0}.discord-message{min-width:0;border:1px solid #21252b;background:#080b0f;border-radius:6px;padding:14px;margin:10px 0;overflow:hidden}.discord-message>p,.discord-embed p,.discord-field p{white-space:pre-wrap;overflow-wrap:anywhere}.discord-message>small{display:block;color:var(--muted);margin-top:10px}.discord-embed{border-left:3px solid #2f9dff;background:#0e1116;border-radius:5px 6px 6px 5px;padding:12px;margin:8px 0}.discord-field{margin-top:10px}.discord-field p{margin:3px 0;color:#cdd0d4}.portal-media{display:block;margin-top:10px}.portal-media img,.portal-video{display:block;width:100%;max-height:520px;object-fit:contain;border:1px solid #2d333a;border-radius:6px;background:#040608}.portal-media-small img{max-width:180px}.log-filter{min-width:min(360px,100%)}.admin-results{display:grid;gap:10px}
.discord-message a,.discord-embed a{color:#70bcff;text-decoration:underline;text-underline-offset:2px}.discord-inline-code,.discord-code-label{display:inline-block;border:1px solid #2d333a;background:#040609;color:#9ed2ff;border-radius:4px;padding:2px 6px;font:600 .92em/1.35 var(--mono)}.discord-code-block{margin:9px 0;padding:12px;border:1px solid #2d333a;background:#040609;border-radius:4px;overflow:auto;white-space:pre-wrap}.discord-code-block code{color:#eaedf1;font:500 14px/1.45 var(--mono)}.discord-message strong,.discord-embed strong{color:#f7f8fa}.chat-format-button{min-width:32px;padding-inline:9px;white-space:nowrap}.chat-format-button strong,.chat-format-button em,.chat-format-button u,.chat-format-button s{font-family:serif;font-size:15px}.vex-format-toolbar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:7px}.vex-format-advanced[hidden]{display:none!important}.vex-format-toggle{min-width:58px;white-space:nowrap;line-height:1}.vex-format-language-menu{position:fixed;z-index:250;display:grid;grid-template-columns:repeat(2,minmax(100px,1fr));gap:5px;width:min(280px,calc(100vw - 16px));max-height:min(360px,calc(100vh - 16px));overflow:auto;padding:8px;border:1px solid #2d333a;border-radius:6px;background:#090c10;box-shadow:0 18px 55px #000000cc}.vex-format-language-menu[hidden]{display:none}.vex-format-language-menu button{border:1px solid #272c32;background:#0f131a;color:#e8ebef;border-radius:4px;padding:7px 9px;text-align:left;font:600 12px var(--sans);cursor:pointer}.vex-format-language-menu button:hover,.vex-format-language-menu button:focus-visible{border-color:#2f9dff;background:#1b242f;color:#ffffff;outline:none}
.reseller-support-messages{height:min(56vh,580px);min-height:360px;overflow-y:auto;display:flex;flex-direction:column;gap:10px;padding:10px 2px}.reseller-support-message{display:grid;grid-template-columns:40px minmax(0,1fr);gap:11px;border:1px solid #21252b;background:#080b0f;border-radius:6px;padding:12px}.reseller-support-message>img{width:40px;height:40px;border-radius:50%;object-fit:cover;background:#19202b}.reseller-support-message header{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}.reseller-support-message header small{color:var(--muted)}.reseller-support-message p{white-space:pre-wrap;overflow-wrap:anywhere;margin:6px 0;color:#d9dbdf}.reseller-support-media{display:flex;gap:8px;flex-wrap:wrap}.reseller-support-media img,.reseller-support-media video{display:block;max-width:min(100%,460px);max-height:340px;object-fit:contain;border:1px solid #2d333a;border-radius:6px;background:#040608}.reseller-support-actions{display:flex;justify-content:flex-end;gap:6px;margin-top:7px}.reseller-support-composer{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;border-top:1px solid #21252b;padding-top:12px}.reseller-support-composer .support-compose-reply{display:flex;grid-column:1/-1;grid-row:1;align-items:center;justify-content:space-between;gap:8px;border-left:3px solid #2f9dff;background:#0d1117;border-radius:4px;padding:8px 10px;color:#ced1d5}.reseller-support-composer .support-compose-reply[hidden]{display:none}.reseller-support-composer .support-compose-reply div{display:flex;flex-direction:column;min-width:0}.reseller-support-composer .support-compose-reply span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.reseller-support-composer .support-compose-reply button{border:0;background:none;color:#e3e6eb;font-size:20.5px;cursor:pointer}.reseller-support-composer textarea{grid-column:1;grid-row:2;width:100%;box-sizing:border-box;resize:none;border:1px solid #2d333a;background:#06080c;color:#ffffff;border-radius:6px;padding:12px;font:500 15px var(--sans)}.reseller-support-composer textarea:focus{outline:none;border-color:#2f9dff;box-shadow:none}.reseller-support-composer>button[type=submit]{grid-column:2;grid-row:2/4}.reseller-support-file-row{grid-column:1;grid-row:3;display:flex;align-items:center;gap:8px;min-width:0}.reseller-support-file-row span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted)}
.reseller-support-file-row [hidden]{display:none!important}.panel[data-reseller-section="support"]:hover{transform:none}
.reseller-support-expand-toggle{display:none}
@media(min-width:901px){
  .reseller-support-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}
  .reseller-support-expand-toggle{display:inline-flex;flex-shrink:0}
  body.reseller-support-expanded{overflow:hidden}
  body.reseller-support-expanded .panel[data-reseller-section="support"].active{position:fixed;z-index:80;inset:12px;width:auto;max-width:none;height:auto;box-sizing:border-box;margin:0;padding:14px;display:flex;flex-direction:column;overflow:hidden;background:linear-gradient(145deg,#10141b,#080b0f);border-color:#2f9dff;box-shadow:0 28px 90px #000000ee;transform:none!important}
  body.reseller-support-expanded .reseller-support-heading{flex-shrink:0;margin-bottom:12px}
  body.reseller-support-expanded .reseller-support-heading h2{margin:0}
  body.reseller-support-expanded .panel[data-reseller-section="support"]>.secure-note{display:none}
  body.reseller-support-expanded .reseller-support-messages{flex:1;min-height:0;height:auto;max-height:none;overflow:auto;overscroll-behavior:contain}
  body.reseller-support-expanded .reseller-support-message{flex-shrink:0}
  body.reseller-support-expanded .reseller-support-composer{flex-shrink:0;min-height:0;max-height:45vh;overflow:auto}
  body.reseller-support-expanded .reseller-support-expand-toggle{border-color:#2f9dff;background:#18202c;box-shadow:none}
}
.reseller-support-author{display:inline;padding:0;border:0;background:none;color:#70bcff;font:inherit;font-weight:600;cursor:pointer}.reseller-support-author:hover,.reseller-support-author:focus-visible{color:#ffffff;text-decoration:underline;outline:none}.profile-mobile-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}.vex-context-menu{position:fixed;z-index:500;display:grid;min-width:210px;padding:7px;border:1px solid #2c2e32;border-radius:6px;background:#121418;box-shadow:0 18px 55px #000000cc;color:#f5f6f8}.vex-context-menu button{display:grid;grid-template-columns:24px minmax(0,1fr);gap:7px;align-items:center;width:100%;border:0;border-radius:5px;padding:9px;background:transparent;color:inherit;text-align:left;font:600 13px var(--sans);cursor:pointer}.vex-context-menu button:hover,.vex-context-menu button:focus-visible{background:#2f9dff;color:#ffffff;outline:none}.vex-context-menu button:disabled{opacity:.6;cursor:wait}.context-separator{height:1px;margin:5px 3px;background:#27292d}
.reseller-support-reply{display:flex;flex-direction:column;gap:2px;margin:0 0 7px;border-left:3px solid #2f9dff;border-radius:5px;background:#0d1117;padding:7px 9px;color:#ced1d5}.reseller-support-reply span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:760px){.reseller-support-messages{height:52vh;min-height:320px}.reseller-support-message{grid-template-columns:32px minmax(0,1fr);padding:9px}.reseller-support-message>img{width:32px;height:32px}.reseller-support-composer{grid-template-columns:1fr}.reseller-support-composer>button[type=submit]{grid-column:1;grid-row:auto;width:100%}}
.toast.toast-clickable{cursor:pointer;pointer-events:auto;border-color:#2f9dff;box-shadow:none}.toast.toast-clickable:hover{transform:translateY(-2px);filter:brightness(1.08)}
/* Shared clipboard/drag attachment state for every website chat composer. */
.chat-file-drop-target{position:relative}.chat-file-drop-active{outline:2px solid #2f9dff;outline-offset:-2px;box-shadow:inset 0 0 30px #2f9dff2b}.chat-file-drop-active::after{content:"Drop files to attach";position:absolute;inset:8px;z-index:40;display:grid;place-items:center;border:2px dashed #2f9dff;border-radius:6px;background:#080b10e8;color:#f1f3f6;font:700 clamp(16px,2vw,22px) var(--sans);font-stretch:118%;text-align:center;pointer-events:none;backdrop-filter:blur(5px)}
.chat-attachment-previews,.media-selection{display:flex;align-items:center;gap:7px;flex-wrap:wrap;min-width:0}.chat-attachment-previews[hidden],.media-selection[hidden]{display:none}.chat-attachment-preview{position:relative;display:flex;align-items:center;gap:6px;max-width:190px;padding:4px 24px 4px 5px;border:1px solid #2d333a;border-radius:4px;background:#090c11;color:#dee1e6}.chat-attachment-preview img{width:42px;height:42px;border-radius:4px;object-fit:cover;background:#040609}.chat-attachment-file-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:4px;background:#181f2a;color:#73beff;font:800 10px var(--sans);font-stretch:118%}.chat-attachment-preview-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:500 11px var(--sans)}.chat-attachment-preview-remove{position:absolute;right:3px;top:3px;width:19px;height:19px;padding:0;border:0;border-radius:50%;background:#9b2437;color:#ffffff;cursor:pointer;font:700 15px/19px Arial}.chat-attachment-preview-remove:hover{background:#d73a54}
.vex-chat-image-viewer{width:min(94vw,1200px);max-width:none;border:1px solid #2d333a;border-radius:8px;padding:0;background:#090c11;color:#ffffff;box-shadow:0 30px 90px #000000dd}.vex-chat-image-viewer::backdrop{background:#030406d9;backdrop-filter:blur(7px)}.vex-chat-image-viewer-card{display:grid;gap:12px;padding:14px}.vex-chat-image-viewer .modal-top{margin:0}.vex-chat-image-viewer img{display:block;max-width:100%;max-height:82vh;margin:auto;border-radius:6px;object-fit:contain}.vex-chat-image-viewer .close-button{color:#ff9bad;border-color:#8b3045;background:#451824}.vex-chat-image-viewer .close-button:hover,.vex-chat-image-viewer .close-button:focus-visible{color:#ffffff;border-color:#ff607a;background:#a52e47;outline:none}
.close-button{color:#ff9bad!important;border:1px solid #8b3045!important;background:#451824!important;transition:transform .16s ease,background-color .16s ease,border-color .16s ease,box-shadow .16s ease}.close-button:hover,.close-button:focus-visible{transform:scale(1.06);color:#ffffff!important;border-color:#ff607a!important;background:#a52e47!important;box-shadow:none;outline:none}
.vex-member-mention-picker{position:fixed;z-index:1000;display:grid;gap:4px;max-height:300px;overflow:auto;padding:7px;border:1px solid #2d333a;border-radius:6px;background:#090c10;box-shadow:0 18px 55px #000000cc}.vex-member-mention-picker[hidden]{display:none}.vex-member-mention-picker button{display:flex;align-items:center;gap:9px;width:100%;border:0;border-radius:4px;padding:8px;background:transparent;color:#f5f6f8;text-align:left;cursor:pointer}.vex-member-mention-picker button:hover,.vex-member-mention-picker button:focus-visible{background:#1a232c;outline:1px solid #2f9dff}.vex-member-mention-picker img,.vex-member-mention-symbol{width:34px;height:34px;flex:0 0 34px;border-radius:50%}.vex-member-mention-picker img{object-fit:cover}.vex-member-mention-symbol{display:grid;place-items:center;border:1px solid #2f9dff;background:#131922;color:#7ec3ff;font:800 17px/1 var(--sans);font-stretch:118%;font-style:normal}.vex-member-mention-symbol.everyone{border-color:#ffb13b;background:#3a2912;color:#ffd082}.vex-member-mention-picker span,.vex-member-mention-picker strong,.vex-member-mention-picker small{display:block;min-width:0}.vex-member-mention-picker strong,.vex-member-mention-picker small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vex-member-mention-picker small{color:#a1a9b3}
.discord-message code,.discord-embed code{display:inline-block;border:1px solid #2d333a;background:#040609;color:#9ed2ff;border-radius:5px;padding:1px 5px;font:600 .9em/1.35 var(--mono)}.discord-message pre,.discord-embed pre{overflow:auto;padding:10px;border:1px solid #2d333a;border-radius:4px;background:#040609;white-space:pre-wrap}.discord-field.inline{display:inline-block;vertical-align:top;min-width:180px;max-width:calc(50% - 12px);margin-right:18px}.discord-mention,.discord-message time,.discord-embed time{display:inline-block;border-radius:4px;padding:0 4px;background:#252a31;color:#eaedf1}.discord-message .admin-member-link,.discord-embed .admin-member-link{display:inline;border:0;background:#252a31;color:#eaedf1;border-radius:4px;padding:0 4px;font:inherit;font-weight:600;cursor:pointer}.discord-message .admin-member-link:hover,.discord-embed .admin-member-link:hover{background:#353d47;color:#ffffff}
.chat-identity-badges{display:inline-flex;align-items:center;align-self:center;gap:4px;line-height:1;vertical-align:middle}.chat-identity-role{display:block;flex:0 0 20px;width:20px;height:20px;object-fit:contain}.chat-identity-role-emoji,.chat-identity-client{display:inline-grid;place-items:center;flex:0 0 20px;width:20px;height:20px;font-size:15px;line-height:1}.chat-identity-client.mobile{font-size:16px}.chat-identity-client.desktop{font-size:14px}
.vex-temporary-role-dialog{width:min(480px,calc(100vw - 24px));border:1px solid #2d333a;border-radius:8px;padding:0;background:#0c1015;color:#f5f6f8;box-shadow:0 24px 80px #000000cc}.vex-temporary-role-dialog::backdrop{background:#030405d9;backdrop-filter:blur(7px)}.vex-temporary-role-card{display:grid;gap:13px;padding:20px}.vex-temporary-role-card h2{margin:4px 0 0}.vex-temporary-role-card label{display:grid;gap:6px;color:#eaedf1;font-weight:600}.vex-temporary-role-card select,.vex-temporary-role-card textarea{width:100%;border:1px solid #2d333a;border-radius:6px;padding:10px;background:#050609;color:#ffffff;font:500 14px var(--sans)}.vex-temporary-role-card select:focus,.vex-temporary-role-card textarea:focus{outline:none;border-color:#2f9dff;box-shadow:none}.vex-temporary-role-state{border:1px solid #272c32;border-radius:6px;padding:10px;background:#090c10;color:#b1b4b9}.admin-profile-chip,.support-profile-chip{border-color:var(--role-color,#2d333a)}
.discord-embed{display:flex;align-items:flex-start;gap:12px;border-left-color:var(--embed-color,#2f9dff)}.discord-embed-copy{flex:1;min-width:0}.discord-embed-author{display:block;margin-bottom:5px;color:#c7c9cd}.discord-embed-thumbnail,.discord-embed-image{border:0;padding:0;background:none;cursor:pointer}.discord-embed-thumbnail{flex:0 0 76px}.discord-embed-thumbnail img{display:block;width:76px;height:76px;border-radius:4px;object-fit:cover}.discord-embed-image{display:block;width:100%;margin-top:10px}.discord-embed-image img{display:block;max-width:100%;max-height:420px;border-radius:4px;object-fit:contain}
.private-member-profile{text-align:center}.private-profile-avatar{width:96px;height:96px;border:4px solid #2f9dff;border-radius:50%;object-fit:cover;box-shadow:none}.profile-chips{display:flex;justify-content:center;gap:7px;flex-wrap:wrap}.profile-role,.profile-product{border:1px solid var(--role-color,#687585);border-radius:999px;padding:4px 9px;color:#eaedf1;text-decoration:none}.profile-product{border-color:#687e9b;background:#141b24;color:#add9ff}.profile-empty{color:#9097a0}
.profile-mobile-actions{display:none}
@media(max-width:760px),(hover:none) and (pointer:coarse){.profile-mobile-actions{display:grid;grid-template-columns:1fr;gap:8px;margin:16px 0 18px}.profile-mobile-actions .button{width:100%}}
.vex-emoji-category-tabs{display:flex;gap:4px;overflow-x:auto;padding:0 0 7px;margin-bottom:6px;border-bottom:1px solid #252a30;scrollbar-width:thin}.vex-emoji-category-tab{flex:0 0 34px!important;width:34px!important;height:32px!important;display:grid!important;place-items:center!important;border:1px solid transparent!important;border-radius:4px!important;padding:0!important;background:#0e1218!important;color:#ffffff!important;font-size:16.5px!important;cursor:pointer}.vex-emoji-category-tab:hover,.vex-emoji-category-tab.active{border-color:#2f9dff!important;background:#19202b!important}.vex-emoji-category-title{color:#babfc7;font:600 11px var(--sans);text-transform:uppercase;letter-spacing:.08em;margin:0 0 5px}.vex-emoji-category-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(36px,1fr));gap:4px}.vex-emoji-choice{display:grid!important;place-items:center!important;min-width:34px!important;width:auto!important;height:36px!important;padding:3px!important;border:1px solid transparent!important;border-radius:4px!important;background:transparent!important;color:#ffffff!important;font-size:19.5px!important;cursor:pointer}.vex-emoji-choice:hover{border-color:#2f9dff!important;background:#1b242f!important}.vex-emoji-choice img{width:25px!important;height:25px!important;object-fit:contain}.message-reaction-picker,.emoji-picker,.private-emoji-picker,.admin-reseller-emoji-picker{display:block!important}.message-reaction-picker[hidden],.emoji-picker[hidden],.private-emoji-picker[hidden],.admin-reseller-emoji-picker[hidden]{display:none!important}.message-reaction-picker,.private-emoji-picker{width:min(370px,calc(100vw - 16px))!important;max-width:min(370px,calc(100vw - 16px))!important;max-height:300px;overflow-y:auto}.message-reaction-picker .vex-emoji-category-tabs button,.private-emoji-picker .vex-emoji-category-tabs button{width:34px;height:32px}.admin-reseller-emoji-picker{max-height:300px}.emoji-picker{grid-template-columns:none!important}
.message-reaction-picker{position:fixed;z-index:120;box-sizing:border-box;border:1px solid #2d333a;border-radius:6px;padding:8px;background:#090c10;box-shadow:0 16px 45px #000000cc}.reseller-support-footer{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-top:7px}.reseller-support-footer .reseller-support-actions{margin-top:0}.chat-reactions{display:flex;flex-wrap:wrap;gap:5px}.chat-reaction{display:inline-flex;align-items:center;gap:5px;border:1px solid #272c32;border-radius:999px;padding:3px 8px;background:#0b0e13;color:#dfe2e7;cursor:pointer}.chat-reaction:hover,.chat-reaction.active{border-color:#2f9dff;background:#18202c;box-shadow:none}.chat-reaction img{width:18px;height:18px;object-fit:contain}
.account-vouch-row .account-vouch-meta{display:flex;align-items:center;flex-wrap:wrap;gap:5px}.account-vouch-row .account-rating{display:inline-flex;gap:0;letter-spacing:2px;white-space:nowrap}.account-vouch-row .account-rating-filled{color:#ffd166}.account-vouch-row .account-rating-empty{color:#3d4044}
.vex-local-message{box-sizing:border-box;flex-shrink:0;min-width:0;max-width:100%;border:1px solid #272c32;border-radius:6px;background:#0b0f14;margin:10px 0;padding:14px;overflow-wrap:anywhere}.vex-local-message>div{white-space:pre-wrap;margin-top:8px}.vex-local-message>img{display:block;max-width:min(360px,100%);max-height:260px;object-fit:contain;border-radius:4px;margin-top:10px}
.admin-support-rich-text,.support-embed>div{overflow-wrap:anywhere}.discord-text-line{display:block;min-height:1.35em}.discord-empty-line{display:block;height:.72em}.discord-heading{display:block;margin:.45em 0 .22em;color:#f9f9fa;font-family:var(--sans);font-weight:700;line-height:1.2}.discord-heading-1{font-size:1.45em}.discord-heading-2{font-size:1.25em}.discord-heading-3{font-size:1.1em}.discord-list-item{display:grid;grid-template-columns:1.35em minmax(0,1fr);gap:.25em;padding-left:calc(.35em + var(--discord-list-depth,0)*1.2em);line-height:1.45}.discord-quote{display:block;margin:.25em 0;padding:.3em .7em;border-left:4px solid #babbbc;background:#3f4147;color:#f3f3f4}.discord-quote-multiline{margin-block:0}.discord-subtext{display:block;color:var(--muted);font-size:.86em}.discord-code-block{position:relative;display:block;max-width:100%;overflow-x:auto;white-space:pre-wrap}.discord-code-language{display:block;margin:-4px 0 8px;color:#939da9;font:600 10px/1.2 var(--sans);text-transform:uppercase;letter-spacing:.08em}.discord-spoiler{display:inline;border:0;border-radius:3px;padding:0 .18em;background:#0f1011;color:transparent;cursor:pointer;font:inherit}.discord-spoiler:hover,.discord-spoiler:focus-visible{background:#18191b}.discord-spoiler.revealed{background:#2b2d31;color:inherit}
.modal-content.context-edit-form{display:grid;gap:14px}.modal-content.context-edit-form label{display:grid;gap:6px;color:#d9dbdf;font-weight:600}.modal-content.context-edit-form textarea{display:block;width:100%;min-height:120px;box-sizing:border-box;resize:vertical;border:1px solid #2d333a;background:#06080c;color:#ffffff;border-radius:6px;padding:12px;font:500 15px var(--sans)}.modal-content.context-edit-form textarea:focus{outline:none;border-color:#2f9dff;box-shadow:inset 0 0 0 1px #2f9dff}
.reseller-partner-row{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid #272c32;border-radius:6px;padding:12px 14px;background:#090c10;overflow-wrap:anywhere}.reseller-partner-form{max-width:460px;margin-top:18px}.reseller-partner-form label{min-width:0}.reseller-partner-form input{box-sizing:border-box;width:100%;border:1px solid #272c32;background:#080b0f;color:#ffffff;border-radius:6px;padding:11px;font:500 15px var(--sans)}.reseller-partner-form input:focus{outline:none;border-color:#2f9dff;box-shadow:none}.reseller-partner-row .button{flex:0 0 auto}@media(max-width:560px){.reseller-partner-row{align-items:stretch;flex-direction:column}}
.support-timeout-status{margin:12px 0 0;border:1px solid #a43b50;border-radius:6px;padding:10px 12px;background:#3e1721;color:#ffb1be;font-weight:600}.support-timeout-status[hidden]{display:none}

/* ---- Written for this design ------------------------------------------------------------------ */
/* The header stays at the top and takes its own space. */
body { min-height: 100vh; }
.top { position: sticky; top: 0; }

/* Page frame: the same gutters and measure as the store. */
.portal-main { max-width: 1480px; padding: 54px var(--gutter) 96px; font-size: 15.5px; }
.portal-hero { margin-bottom: 30px; }
.portal-hero h1 {
  margin: 14px 0 14px;
  font: 800 clamp(30px, 4.4vw, 58px)/.98 var(--sans);
  font-stretch: 125%;
  letter-spacing: -.03em;
  text-transform: uppercase;
}
.portal-hero p { max-width: 720px; margin: 0; color: var(--ink-dim); font-size: 17px; }
.portal-hero .action-row { margin-top: 22px; }
.section-title { margin: 34px 0 16px; font: 700 21px/1.2 var(--sans); font-stretch: 118%; letter-spacing: -.01em; }
.secure-note { color: var(--ink-faint); font-size: 13.5px; }

/* Buttons at the size these denser pages need; the store's larger ones are for its landing views. */
.button { min-height: 42px; padding: 0 16px; font-size: 14.5px; }
.button-small { min-height: 34px; padding: 0 12px; font-size: 13px; }

/* Figures: a label over a number on a hairline, in place of a row of boxes. */
.metric-grid { gap: 0 var(--gutter); margin: 26px 0; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.metric { padding: 15px 0 20px; border: 0; border-top: 1px solid var(--line-strong); border-radius: 0; background: none; box-shadow: none; }
.metric small { display: block; color: var(--ink-faint); font: 500 11px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.metric strong { margin-top: 10px; font: 700 30px/1 var(--sans); font-stretch: 118%; font-variant-numeric: tabular-nums; }

/* Panels are flat surfaces on a hairline. Nothing lifts or glows on hover. */
.panel { border: 1px solid var(--line); border-radius: 6px; background: #0a0d12; box-shadow: none; }
.metric:hover,
.panel:hover { border-color: var(--line); box-shadow: none; transform: none; }
.metric:hover { border-color: var(--line-strong); }
.panel h2,
.panel h3 { font-family: var(--sans); font-stretch: 114%; letter-spacing: -.01em; }
.panel h2 { font-size: 20px; }
.panel h3 { font-size: 16.5px; }

/* A state is a small tag: a dot and a label in the state's colour. */
.state[class] {
  align-items: center;
  gap: 7px;
  padding: 5px 9px;
  border-color: color-mix(in srgb, currentColor 36%, transparent);
  border-radius: 4px;
  background: none;
  font: 500 11px/1.2 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.state::before { content: ""; flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* Lists are rows on hairlines, not stacks of boxes. */
.data-list { gap: 0; border-bottom: 1px solid var(--line); }
.data-row { padding: 16px 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; }
.data-row > div > small { color: var(--ink-faint); }
.data-row code { color: #9ecfff; font: 500 13px/1.4 var(--mono); }
.empty-state { border: 1px dashed var(--line-strong); border-radius: 6px; color: var(--ink-faint); }
.data-list > .empty-state { margin: 16px 0; }

/* Section tabs: labels on a rule, with the chosen one underlined, as in the store catalog. */
.account-section-tabs { gap: 0 26px; margin: 28px 0 26px; border-bottom: 1px solid var(--line); }
.account-section-tabs button,
.account-section-tabs button:hover,
.account-section-tabs button.active { border: 0; border-radius: 0; background: none; box-shadow: none; }
.account-section-tabs button {
  position: relative;
  padding: 14px 0;
  color: var(--ink-dim);
  font: 500 12px/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color .25s var(--ease);
}
.account-section-tabs button:hover,
.account-section-tabs button.active { color: var(--ink); }
.account-section-tabs button::after { content: ""; position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.account-section-tabs button.active::after { transform: none; }
.account-section-tabs button strong { min-width: 18px; height: 18px; background: #e73558; font: 600 10px/1 var(--mono); letter-spacing: 0; }
.portal-section-picker { color: var(--ink-dim); font: 500 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.portal-section-picker select { margin-top: 10px; border-color: var(--line-strong); border-radius: 4px; background: #0a0d12; font: 500 15px var(--sans); letter-spacing: 0; text-transform: none; }

/* Toolbars and their search box. */
.toolbar { gap: 10px 14px; margin: 22px 0; }
.toolbar .search { padding: 0 14px; background: none; }
.toolbar .search input { min-height: 40px; padding: 0; border: 0; border-radius: 0; background: none; font: 400 15px var(--sans); }

/* Product status. */
.status-groups { gap: 34px; }
.status-group h2 { margin: 0 0 14px; font: 700 19px/1.2 var(--sans); font-stretch: 118%; letter-spacing: -.01em; }
.status-grid { gap: 12px; }
.status-card { padding: 16px 16px 15px; border: 1px solid var(--line); border-radius: 6px; background: #0a0d12; }
.status-card::before { display: none; }
.status-card h3 { margin: 0 0 14px; font: 600 15.5px/1.35 var(--sans); font-stretch: 100%; }
.status-meta { align-items: center; gap: 12px; color: var(--ink-faint); font: 500 11px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; }

/* My account. */
.account-vouch-row { border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; padding: 14px 0; }
.account-vouch-list { gap: 0; }
.account-vouch-row small { font: 500 11px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.account-rating-filled { color: #ffd166; }

@media (max-width: 760px) {
  .portal-main { padding-top: 34px; font-size: 15px; }
  .account-section-tabs { gap: 0 22px; padding-bottom: 0; }
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
  .metric strong { font-size: 25px; }
}

/* The header sits above the sticky bars and panels of these pages. */
.top { z-index: 20; }

/* Quoted lines inside rendered messages: a rule at the side instead of a grey slab. */
.discord-quote { padding: .15em .85em; border-left: 2px solid var(--line-strong); background: none; color: var(--ink-dim); }

/* ---- The board behind the page -------------------------------------------------------------------
   The inner pages stand in the same world as the store's journey. site.js runs the scene on the
   canvas, parks the camera at this page's place, and lets the pointer and the scroll move it. With
   reduced motion or without WebGL2 the canvas stays empty and the page is as it was. */
/* The board comes up quickly: it is the first thing that moves when a page opens (the camera flies
   down to this page's place), and a slow fade left the page dark for most of that flight. */
.world { position: fixed; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; opacity: 0; pointer-events: none; transition: opacity .45s ease; }
.scene-on .world { opacity: 1; }
/* A shade between the board and the page: lighter where the heading stands over the scene, deeper
   where the content is read. */
.scene-on body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* --depth runs from 0 to 1 over the first screen of scrolling (site.js), so text that has moved up
     under the header is never read against the bright part of the scene. */
  background:
    linear-gradient(rgba(6, 8, 11, calc(var(--depth, 0) * .62)), rgba(6, 8, 11, calc(var(--depth, 0) * .62))),
    linear-gradient(90deg, rgba(6, 8, 11, .86) 0%, rgba(6, 8, 11, .6) 38%, rgba(6, 8, 11, .1) 74%),
    linear-gradient(180deg, rgba(6, 8, 11, 0) 0, rgba(6, 8, 11, .12) 190px, rgba(6, 8, 11, .7) 400px, rgba(6, 8, 11, .9) 700px);
}
/* The gateway is centred in its view; on a wide screen it moves into the half the heading leaves free. */
@media (min-width: 761px) and (min-aspect-ratio: 1/1) {
  body[data-scene="9"] .world { left: 21vw; }
}
@media (max-width: 760px), (max-aspect-ratio: 1/1) {
  .scene-on body::after {
    background:
      linear-gradient(rgba(6, 8, 11, calc(var(--depth, 0) * .62)), rgba(6, 8, 11, calc(var(--depth, 0) * .62))),
      linear-gradient(180deg, rgba(6, 8, 11, .35) 0, rgba(6, 8, 11, .72) 240px, rgba(6, 8, 11, .92) 520px);
  }
}
.portal-main,
.community-main,
.message-page { position: relative; z-index: 1; }
/* An expanded chat covers the whole window, the header included. The layer above is what holds the
   page over the board, so it is raised over the header while a chat is expanded. */
body.admin-support-expanded .portal-main,
body.admin-reseller-support-expanded .portal-main,
body.reseller-support-expanded .portal-main { z-index: 30; }
/* The header lets the board show through as the page moves under it. */
.scene-on .top { background: rgba(6, 8, 11, .68); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }

/* Surfaces are dark glass over the board, and a soft light follows the pointer across them. */
.scene-on .panel,
.scene-on .status-card,
.scene-on .support-shell,
.scene-on .chat-shell,
.scene-on .message-layout { background-color: rgba(9, 12, 17, .8); }
.panel,
.status-card,
.support-shell,
.chat-panel,
.member-sidebar,
.conversation-sidebar,
.conversation-panel,
.conversation-members { background-image: radial-gradient(460px circle at var(--mx, -700px) var(--my, -700px), rgba(47, 157, 255, .09), transparent 64%); }
.scene-on .chat-panel,
.scene-on .member-sidebar,
.scene-on .conversation-sidebar,
.scene-on .conversation-panel,
.scene-on .conversation-members { background-color: rgba(9, 12, 17, .55); }

/* The account control replaces the two page-specific ones once it has been drawn; both stay in the
   page for the scripts that fill them. */
.site-header:has(#accountActions .account-chip) #accountAction,
.site-header:has(#accountActions .account-chip) #adminNav { display: none !important; }

/* ---- Arrival and movement -------------------------------------------------------------------------
   The first moments of a page are marked "arriving", and the moment after a tab is picked
   "switching" (site.js). What comes in during those rises into place; background refreshes do not
   move. Every page is sent with "arriving" already on it (class on the html element), so what is
   there when the page opens rises in from its very first frame; site.js takes the mark off again.
   When the mark was added by site.js instead, the page was drawn once without it while the scripts
   loaded, and then everything on it started over from hidden. Because the mark no longer waits
   for a script, the rules that use it ask about reduced motion themselves. */
@keyframes rise-in { from { opacity: 0; transform: translate3d(0, 20px, 0); } }
@keyframes reveal-line { from { clip-path: inset(0 0 100% 0); transform: translate3d(0, 40%, 0); } to { clip-path: inset(-20% 0 -20% 0); transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .arriving .portal-hero > *,
  .arriving .message-heading > * { animation: rise-in .8s var(--ease) backwards; }
  .arriving .portal-hero > h1,
  .arriving .message-heading > h1 { animation: reveal-line 1s var(--ease) backwards .06s; }
  .arriving .portal-hero > :nth-child(3),
  .arriving .message-heading > :nth-child(3) { animation-delay: .18s; }
  .arriving .portal-hero > :nth-child(4) { animation-delay: .26s; }
  .arriving .metric,
  .arriving .toolbar,
  .arriving .account-section-tabs,
  .arriving .admin-tabs,
  .arriving .panel,
  .arriving .status-group,
  .arriving .data-row,
  .arriving .support-shell,
  .arriving .chat-shell,
  .arriving .message-layout,
  .arriving .section-title { animation: rise-in .75s var(--ease) backwards .16s; }
  .arriving .metric:nth-child(2) { animation-delay: .22s; }
  .arriving .metric:nth-child(3) { animation-delay: .28s; }
  .arriving .metric:nth-child(4) { animation-delay: .34s; }
  .arriving .status-group:nth-child(2) { animation-delay: .24s; }
  .arriving .status-group:nth-child(3) { animation-delay: .32s; }
  .arriving .status-group:nth-child(n + 4) { animation-delay: .4s; }
  .arriving .data-row:nth-child(2) { animation-delay: .22s; }
  .arriving .data-row:nth-child(3) { animation-delay: .28s; }
  .arriving .data-row:nth-child(n + 4) { animation-delay: .34s; }
}
/* Only what changed rises: the section under a row of tabs, not the heading and the tabs above
   it. A whole section of the Administration page rises only when it was picked from that page's
   own menu (switching-view); a tab, a ticket or a conversation picked inside it leaves it still. */
.switching .portal-section.active,
.switching-view .admin-view.active,
.switching .reseller-section:not([hidden]),
.switching .panel[data-reseller-section].active { animation: rise-in .5s var(--ease) backwards; }
/* A state that is in progress breathes. */
@keyframes state-pulse { 50% { opacity: .35; } }
.state.updating::before,
.state.testing::before,
.state.pending::before,
.state.activate::before { animation: state-pulse 1.8s ease-in-out infinite; }

/* ---- Earlier history of a conversation -----------------------------------------------------------
   The support and reseller conversations open on their newest messages. "Load older messages" sits
   above the first message shown; "Search messages" opens a dialog whose results are read-only copies
   of the matching messages, newest first. */
.load-older { display: block; flex: 0 0 auto; margin: 10px auto 0; padding: 9px 14px; border: 1px solid var(--line-strong); border-radius: 4px; background: #0a0d12; color: var(--ink-dim); font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; transition: border-color .2s var(--ease), color .2s var(--ease); }
.load-older:hover { border-color: var(--accent); color: var(--ink); box-shadow: none; }
.load-older:disabled { opacity: .6; cursor: default; }
.load-older[hidden] { display: none; }
.support-ticket-actions,
.reseller-support-heading-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
dialog:has(.chat-search) { width: min(780px, 94vw); max-width: none; }
.chat-search { display: grid; gap: 14px; min-width: 0; }
.chat-search-form { display: flex; gap: 8px; }
.chat-search-form input { flex: 1; min-width: 0; padding: 11px 12px; border: 1px solid var(--line-strong); border-radius: 4px; background: #080b0f; color: var(--ink); font: 400 15px var(--sans); }
.chat-search-form input:focus-visible { border-color: var(--accent); outline: none; }
.chat-search-status { margin: 0; }
/* A plain block list: in a grid or flex list with a height limit the messages were squeezed to fit
   instead of scrolling. */
.chat-search-results { display: block; max-height: 54vh; overflow: auto; overscroll-behavior: contain; padding-right: 6px; border-top: 1px solid var(--line); }
.chat-search-results > * { margin: 0; }
.chat-search-results:empty { display: none; }
.chat-search-results span[class] { cursor: default; }
.chat-search-more { margin-top: 0; }
@media (max-width: 560px) { .chat-search-form { flex-direction: column; } }

/* A figure that needs attention: a reseller's credit below their low-balance warning amount. The
   figure turns red and a line under it says why, so the state does not rest on colour alone. */
.metric-low { border-top-color: #e73558; }
.metric-low strong { color: var(--red); }
.metric-note { display: block; margin-top: 8px; color: #ff9bad; font: 500 12.5px/1.4 var(--sans); }