:root{--red-soft:#fdecef;--z-topbar:calc(var(--z-nav) + 2);--topbar-height:calc(var(--touch-target-min) + var(--space-12) * 2 + var(--border-width))}
/* MatchMio adopts the reference's exact palette, typography, spacing and surfaces. */

body{font-family:var(--font-family);font-size:var(--font-size-body);font-weight:var(--font-weight-regular);line-height:var(--line-height-body);background:var(--bg);color:var(--ink)}
h1,h2,h3,h4,h5,h6{font-family:inherit;font-weight:var(--font-weight-bold);line-height:var(--line-height-body);overflow-wrap:anywhere}
h1{font-size:var(--font-size-hero-mobile)}
h2{font-size:var(--font-size-section-title)}
h3{font-size:var(--font-size-card-title)}
h4,h5,h6{font-size:var(--font-size-body)}
b,strong{font-weight:var(--font-weight-bold)}
small{font-size:var(--font-size-caption)}
pre,code,kbd,samp{font-family:inherit;line-height:var(--line-height-body)}
.panel h2{font-size:var(--font-size-section-title);font-weight:var(--font-weight-bold);color:var(--ink)}
.metadata,.comment-meta{font-size:var(--font-size-caption);font-weight:var(--font-weight-regular);color:var(--ink-muted-readable);line-height:var(--line-height-body);overflow-wrap:anywhere}
.hint{font-size:var(--font-size-hint);font-weight:var(--font-weight-regular);line-height:var(--line-height-body);color:var(--ink-muted-readable)}
.detail-summary,.info-note{font-size:var(--font-size-small);font-weight:var(--font-weight-regular);color:var(--ink-2);line-height:var(--line-height-body);overflow-wrap:anywhere}
.info-panel{font-size:var(--font-size-body);font-weight:var(--font-weight-regular);line-height:var(--line-height-body);overflow-wrap:anywhere}
.info-panel .info-emphasis{font-size:var(--font-size-body);font-weight:var(--font-weight-semibold)}
.info-panel .info-value{font-size:var(--font-size-body);font-weight:var(--font-weight-regular);font-variant-numeric:tabular-nums}
.info-panel .info-value,.info-panel .info-note,.info-panel .info-link{margin-bottom:var(--space-6)}
.info-panel .info-link{display:inline-flex;align-items:center;max-width:100%;font-size:var(--font-size-body);font-weight:var(--font-weight-regular)}
.comment-meta .comment-author{font-size:inherit;font-weight:var(--font-weight-regular);color:var(--ink)}
.comment-item .text-link{font-size:var(--font-size-caption)}
.au b,.author b,.dmeta b,.launch-meta b{font-weight:var(--font-weight-regular)}
.st-tag{font-weight:var(--font-weight-semibold)}
.conv .t b{font-weight:var(--font-weight-semibold)}
.unread{background:var(--red-ink)}
.user-avatar{display:inline-block;width:var(--space-36);height:var(--space-36);flex:none;vertical-align:middle;object-fit:cover;image-rendering:pixelated;background:var(--bg);border-radius:var(--radius-input)}
.user-avatar.avatar-small{width:var(--space-20);height:var(--space-20);border-radius:var(--radius-tag)}
.user-avatar.avatar-large{width:var(--space-80);height:var(--space-80);border-radius:var(--radius)}
.user-avatar.avatar-profile{width:var(--space-56);height:var(--space-56);border-radius:var(--radius)}
.avatar-with-badge{position:relative;display:inline-flex;align-items:center;justify-content:center;line-height:0;flex:none}
.avatar-with-badge .avatar-worn-badge{position:absolute;right:calc(var(--space-5) * -1);bottom:calc(var(--space-5) * -1);display:inline-flex;align-items:center;justify-content:center;width:var(--space-28);height:var(--space-28);padding:var(--space-2);border:var(--space-2) solid var(--card);border-radius:var(--radius-pill);background:var(--card);line-height:1;z-index:1}
.avatar-worn-badge .medal-art{width:100%;height:100%;object-fit:contain}
.avatar-with-badge.avatar-small .avatar-worn-badge{right:calc(var(--space-6) * -1);bottom:calc(var(--space-6) * -1);width:var(--space-16);height:var(--space-16);padding:var(--border-width)}
.avatar-with-badge.avatar-large .avatar-worn-badge{width:var(--space-30);height:var(--space-30)}
.avatar-with-badge.avatar-profile .avatar-worn-badge{width:var(--space-24);height:var(--space-24)}
@media(max-width:640px){.profile-intro>.avatar-with-badge .user-avatar{width:var(--space-56);height:var(--space-56)}.profile-intro>.avatar-with-badge .avatar-worn-badge{width:var(--space-24);height:var(--space-24)}}
.creator .av{line-height:1;font-size:0;margin-bottom:var(--space-10)}
.avatar-picker{border:0;min-width:0;padding:0;margin:0 0 var(--space-14)}
.avatar-picker legend{padding:0;margin-bottom:var(--space-5);font-size:var(--font-size-small);color:var(--ink-2)}
.avatar-current{display:flex;align-items:center;gap:var(--space-14);padding:var(--space-14);background:var(--bg);border-radius:var(--radius-input);margin-bottom:var(--space-12)}
.avatar-current>div{min-width:0}.avatar-current b{font-size:var(--font-size-body);font-weight:var(--font-weight-semibold)}
.avatar-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--space-60),1fr));gap:var(--space-10);padding:var(--space-4);max-height:calc(var(--space-80) * 5);overflow-y:auto;overscroll-behavior:contain}
.avatar-picker .avatar-option{position:relative;display:flex;flex-direction:column;gap:var(--space-4);cursor:pointer;min-width:0}
.avatar-picker .avatar-radio{position:absolute;width:1px;height:1px;margin:0;padding:0;clip-path:inset(50%);overflow:hidden;white-space:nowrap}
.avatar-tile{position:relative;display:flex;align-items:center;justify-content:center;padding:var(--space-6);min-height:var(--touch-target-min);border:var(--border-width) solid var(--line);border-radius:var(--radius-input);background:var(--card);transition:background var(--motion-duration) var(--motion-easing),border-color var(--motion-duration) var(--motion-easing),transform var(--motion-duration) var(--motion-easing)}
.avatar-tile .user-avatar{width:var(--space-44);height:var(--space-44);border-radius:var(--radius-tag)}
.avatar-name{color:var(--ink-2);font-size:var(--font-size-caption);line-height:var(--line-height-body);text-align:center;overflow-wrap:anywhere}
.avatar-check{display:none;position:absolute;right:var(--space-2);top:var(--space-2);width:var(--space-18);height:var(--space-18);align-items:center;justify-content:center;background:var(--brand);color:var(--card);border-radius:var(--radius-pill);font-size:var(--font-size-badge)}
.avatar-option:hover .avatar-radio:not(:disabled)+.avatar-tile{background:var(--brand-soft)}
.avatar-option:active .avatar-radio:not(:disabled)+.avatar-tile{transform:translateY(var(--press-offset))}
.avatar-radio:checked+.avatar-tile{border-color:var(--brand);background:var(--brand-soft)}
.avatar-radio:checked+.avatar-tile .avatar-check{display:flex}
.avatar-radio:focus-visible+.avatar-tile{outline:var(--focus-width) solid var(--brand);outline-offset:var(--focus-offset)}
.avatar-radio:disabled+.avatar-tile{background:var(--bg);opacity:.55;cursor:not-allowed}
.avatar-radio:disabled~.avatar-name{color:var(--ink-3)}
.topbar{position:sticky;top:0;z-index:var(--z-topbar);background:var(--card);border-bottom:var(--border-width) solid var(--line)}
.topbar-in{max-width:var(--container-max);margin:0 auto;padding:var(--space-12) var(--page-gutter);display:flex;align-items:center;gap:var(--space-12)}
.topbar-brand{flex:none;color:var(--brand);font-size:var(--font-size-card-title);font-weight:var(--font-weight-bold);min-height:var(--touch-target-min);display:inline-flex;align-items:center;white-space:nowrap}
.topbar .topbar-toggle{display:none}
#navRight{display:flex;gap:var(--space-8);align-items:center;flex-wrap:nowrap;margin-left:auto;min-width:0}
.topbar #navRight>.tb-btn,.topbar #navRight>.tb-ico{display:inline-flex;align-items:center;justify-content:center;min-height:var(--touch-target-min);white-space:nowrap}
.topbar .tb-ico{width:var(--touch-target-min);height:var(--touch-target-min);padding:0;flex:none;color:var(--ink-2);font-size:var(--font-size-body);line-height:var(--line-height-body)}
.topbar .tb-ico>span[aria-hidden]{font-size:var(--space-18)}
.topbar .tb-ico:hover{background:var(--brand-soft)}
.topbar .tb-ico:active{transform:translateY(var(--press-offset))}
.tb-action-label{display:none}
.tb-account{gap:var(--space-6);min-width:0}
.tb-account>span[aria-hidden]{display:inline-flex;align-items:center;flex:none}
.tb-account .user-avatar{width:var(--space-24);height:var(--space-24)}
.tb-account-name{max-width:var(--search-width);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbar-toggle svg{width:var(--space-18);height:var(--space-18);flex:none}
.topbar-toggle[aria-expanded="true"]{background:var(--brand-soft);color:var(--brand);border-color:var(--brand)}
.topbar .tb-ico .dot{top:0;right:0;min-width:var(--space-18);height:var(--space-18);border-radius:var(--radius-pill);font-size:var(--font-size-badge);padding:0 var(--space-3);background:var(--red-ink)}
#app{scroll-margin-top:calc(var(--topbar-height) + var(--space-20))}
#masthead{padding:44px 24px 96px;background:var(--hero-gradient);border-radius:0;text-align:center;margin:0}
#masthead .logo{display:block;color:#fff;letter-spacing:4px;opacity:.75;font-size:var(--font-size-body);font-weight:var(--font-weight-regular);margin-bottom:10px}
#masthead h1{font-size:var(--font-size-hero);font-weight:var(--font-weight-bold);letter-spacing:1px}
#masthead .stats{margin-top:22px;gap:36px;justify-content:center;display:flex}
#masthead .stats b{font-size:var(--font-size-metric);font-variant-numeric:tabular-nums}
.nav{max-width:var(--container-max);margin:-56px auto 0;padding:0 var(--page-gutter);gap:12px}
.nav-links{display:flex;margin-bottom:0;gap:0;padding:5px}
.nav-links a{border-radius:var(--radius-pill);padding:9px 18px;font-size:var(--font-size-body);color:var(--ink-2);white-space:nowrap}
.nav-links a.on{color:#fff;background:var(--brand);font-weight:var(--font-weight-semibold)}
.tb-btn,.tb-ico{background:var(--card);border:var(--border-width) solid var(--line);padding:var(--space-9) var(--space-14);border-radius:var(--radius-pill);font-size:var(--font-size-small);line-height:var(--line-height-body)}
.tb-btn{padding:var(--space-10) var(--space-18);font-size:var(--font-size-body)}
.tb-btn.pri{border:0;padding:var(--space-11) var(--space-22);font-weight:var(--font-weight-semibold);box-shadow:var(--shadow)}
.tb-search{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-6);white-space:nowrap}
.tb-search svg{display:block;width:var(--space-18);height:var(--space-18);flex-shrink:0}
.tb-ico{position:relative}
main#app{max-width:var(--container-max);margin:28px auto 80px;padding:0 var(--page-gutter);min-height:220px}
.grid{grid-template-columns:repeat(auto-fill,minmax(min(var(--grid-card-min),100%),1fr));gap:var(--grid-gap)}
@media(min-width:984px){.grid{grid-template-columns:repeat(var(--grid-columns-max),minmax(0,1fr))}}
.card{border-radius:var(--radius);box-shadow:var(--shadow)}
.cover{height:120px;font-size:var(--cover-symbol-size)}
.cover img{width:100%;height:100%;object-fit:cover}
.cover.has-image{height:var(--cover-height)}
.card-b{padding:16px 18px 14px}
.card-b h3{font-size:var(--font-size-card-title);line-height:var(--line-height-body)}
.card-f{padding:12px 18px;gap:14px}
.card-f a{font-weight:var(--font-weight-semibold);font-size:var(--font-size-card-link)}
.au{margin:2px 0 8px;font-size:var(--font-size-caption)}
.tags{gap:6px;margin-top:10px}.tags span{padding:2px 9px}
.toolbar{gap:10px;margin-bottom:20px}.chip{padding:6px 16px}
.dcard{padding:18px 20px;gap:18px;margin-bottom:14px}.vote{width:56px;padding:8px 0}.vote b{font-size:var(--vote-number-size)}
.btn{border-radius:var(--radius-pill)}.btn:active,.chip:active,.tb-btn:active{transform:translateY(1px)}
button,a,input,select,textarea{transition:background .15s,border-color .15s,transform .15s}
:focus-visible{outline:var(--focus-width) solid var(--brand);outline-offset:var(--focus-offset)}
.skip-link{position:absolute;top:-100px;left:16px;z-index:var(--z-feedback);padding:10px 18px;background:#fff;border-radius:var(--radius-input)}.skip-link:focus{top:10px}
.detail{grid-template-columns:minmax(0,1fr) clamp(var(--grid-card-min),28vw,var(--detail-sidebar-max))}.panel{border-radius:var(--radius);padding:22px 24px}
.sec-h{gap:12px}.sec-h h2{font-size:var(--font-size-section-title)}.sec-h .hint{margin-left:auto}
.text-link{border:0;background:transparent;color:var(--brand);font-size:var(--font-size-small);padding:4px}
.pager{display:flex;align-items:center;justify-content:center;gap:14px;margin:24px 0;font-size:var(--font-size-small)}
.media-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:10px;margin-top:16px}.media-grid img,.media-grid video{width:100%;border-radius:var(--radius-input);max-height:380px;object-fit:contain;background:var(--bg)}
.upload-preview{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0}.upload-preview>div{position:relative;border:1px solid var(--line);border-radius:var(--radius-input);padding:8px;max-width:220px;font-size:var(--font-size-caption)}.upload-preview img{width:110px;height:70px;object-fit:cover;border-radius:var(--radius-input)}.upload-preview button{border:none;background:transparent;color:var(--red)}
.form .step{position:sticky;top:calc(var(--topbar-height) + var(--space-12));background:#fff;border-radius:var(--radius);padding:4px;z-index:3;box-shadow:var(--shadow);gap:6px}.step button{flex:1;border:none;padding:10px 4px;font-size:var(--font-size-caption);background:transparent;color:var(--ink-muted-readable);border-radius:var(--radius-pill)}.step button.on{background:var(--brand-soft);color:var(--brand);font-weight:var(--font-weight-semibold)}
.form-actions{display:flex;justify-content:space-between;gap:10px;margin-top:20px}.form-actions .right{display:flex;gap:10px}.field input[type=checkbox]{width:auto}.field input[type=file]{padding:10px;background:var(--bg)}
.draft-status{font-size:var(--font-size-caption);color:var(--ink-3);margin:10px 0}.form-error{padding:12px 16px;color:var(--red);background:var(--red-soft);border-radius:var(--radius-input);margin-bottom:12px}.field.invalid input,.field.invalid textarea,.field.invalid select{border-color:var(--red)}
.readonly-note{background:var(--amber-soft);color:var(--amber);padding:12px 16px;border-radius:var(--radius-input);font-size:var(--font-size-small);margin-bottom:16px}
.statusline{display:flex;gap:10px;flex-wrap:wrap;font-size:var(--font-size-caption);color:var(--ink-3)}
.chat-input{flex-wrap:wrap;position:static;bottom:auto}.chat-input input{min-width:180px}.chat-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.msg .b img{display:block;max-width:260px;max-height:300px;border-radius:var(--radius-input)}.send-status{font-size:var(--font-size-caption);margin-top:6px}.send-status button{color:inherit;background:none;border:0;text-decoration:underline;font-size:inherit}.chat .panel{max-height:52dvh;overflow-y:auto}
.mask{z-index:var(--z-modal)}.modal{border-radius:var(--radius-modal);max-height:88dvh}.modal-close{float:right;border:none;background:var(--bg);border-radius:50%;width:28px;height:28px;font-size:var(--font-size-metric);color:var(--ink-2)}
.toast{z-index:var(--z-feedback);top:20px}.skeleton{height:160px;border-radius:var(--radius);background:linear-gradient(90deg,#e8eaee,#f4f5f7,#e8eaee);background-size:200% 100%;animation:skeleton 1.2s ease infinite}@keyframes skeleton{to{background-position:-200% 0}}
.skeleton.launch-thumb{border-radius:var(--radius-input)}
.skeleton.launch-loading-vote{border-radius:var(--radius-vote)}
.mobile-actions{display:none}footer a{color:var(--ink-3)}footer p{margin-top:8px}html{scroll-behavior:smooth}a,button{touch-action:manipulation}img{max-width:100%}.tabs{flex-wrap:wrap}.txt{overflow-wrap:anywhere}.kv span{min-width:0;overflow-wrap:anywhere}
@media(max-width:900px){
  .topbar-in{flex-wrap:wrap}
  .topbar .topbar-toggle{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-6);margin-left:auto;min-height:var(--touch-target-min)}
  .topbar #navRight{display:none;width:100%;margin-left:0;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-8);padding-top:var(--space-12);border-top:var(--border-width) solid var(--line)}
  .topbar.is-open #navRight{display:grid}
  .topbar #navRight>.tb-btn,.topbar #navRight>.tb-ico{width:100%;min-width:0;gap:var(--space-6)}
  .topbar .tb-search,.topbar .tb-account,.topbar #navRight>a:last-child:not(.tb-ico){grid-column:1/-1}
  .tb-action-label{display:inline}
  .topbar .tb-ico .dot{position:static}
  .nav{justify-content:center}.nav .spacer{display:none}.detail{grid-template-columns:1fr}.tabs button{padding:8px 12px}
}
@media(max-width:640px){#masthead h1{font-size:var(--font-size-hero-mobile)}#masthead p{font-size:var(--font-size-subtitle)}.nav{padding:0 var(--page-gutter);gap:10px}.nav-links{overflow:visible;max-width:100%;flex-wrap:wrap}.nav-links a{padding:9px 13px;font-size:var(--font-size-body)}.nav .tabs{box-shadow:var(--shadow)}main#app{padding:0 var(--page-gutter);margin-top:24px}.row2{grid-template-columns:1fr}.panel{padding:18px}.grid{grid-template-columns:1fr}.dcard{flex-direction:column}.vote{width:auto;display:inline-flex;gap:8px;padding:6px 14px;align-items:center}.chat-input{position:static}.chat-input input{width:100%;flex-basis:100%}.toolbar .sel,.toolbar .q{max-width:100%}.sec-h{flex-wrap:wrap}.mobile-actions{display:flex;position:fixed;bottom:0;left:0;right:0;gap:10px;background:#fff;padding:10px 16px calc(10px + env(safe-area-inset-bottom));border-top:1px solid var(--line);z-index:20}.mobile-actions>*{flex:1;text-align:center;font-size:var(--font-size-small)}footer{padding-bottom:90px}.form-actions{flex-wrap:wrap}.step button{font-size:var(--font-size-caption)}.msg .b{max-width:85%}.msg .b img{max-width:100%}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}
@media(prefers-reduced-motion:reduce){.topbar .tb-btn:active,.topbar .tb-ico:active{transform:none}}

.cover.has-image{height:var(--cover-height)}.cover.has-image img{width:100%;height:100%;object-fit:cover}

/* Business components reuse the shared specification; readable colors preserve its hue. */
.au,.hint,.draft-status,.statusline,.kv b,.dmeta,.conv .t p,.ach.locked,.empty,footer,footer a,.card-f,.card-f button{color:var(--ink-muted-readable)}
.badge.oss,.tags .free,.st.coop,.avail.open,.st-tag.unlocked{color:var(--green-ink)}
.form-error,.err,.btn.red-soft,.st-tag.revoked{color:var(--red-ink)}
.toast.err{background:var(--card);color:var(--red-ink);border:var(--border-width) solid var(--red)}
.st.closed,.st.ended,.st.paused,.st.expired,.avail.closed,.st-tag.locked{color:var(--ink-muted-readable)}
.st{display:inline-block;white-space:nowrap}.ds{-webkit-line-clamp:3}.card-b h3{display:block}
.btn-primary,.btn:not(.sm){padding:var(--space-11) var(--space-22);font-size:var(--font-size-body)}
.btn.ghost{padding:var(--space-10) var(--space-18)}
.btn:hover:not(:disabled),.tb-btn.pri:hover:not(:disabled){background:var(--brand-hover)}.btn.ghost:hover:not(:disabled),.tb-btn:not(.pri):hover:not(:disabled),.btn-ghost:hover:not(:disabled){background:var(--brand-soft)}
.btn:disabled,.chip:disabled{background:var(--bg);color:var(--ink-3);transform:none;cursor:not-allowed}
.tabs{padding:var(--space-5)}.tabs button,.nav-links a{padding:var(--space-9) var(--space-22);font-size:var(--font-size-body)}
.modal{width:var(--modal-width);padding:var(--space-26) var(--space-28);max-height:88vh;max-height:var(--modal-max-height)}
.modal h3{font-size:var(--font-size-section-title);margin-bottom:var(--space-18)}
.mask{background:var(--overlay);padding:var(--overlay-gutter)}
.field{margin-bottom:var(--space-14)}.row2{gap:var(--space-12)}
.search,input.q{width:var(--search-width);padding:var(--space-8) var(--space-16)}
.card-f,.act-row,.dmeta{flex-wrap:wrap}.link-row{flex-wrap:wrap}.link-row input{min-width:0}
@media(max-width:640px){.search,input.q{width:100%;margin-left:0}.nav-links a{padding:9px 13px;font-size:var(--font-size-body)}a.btn,button:not(.modal-close),.chip,.text-link,.card-f a,.nav-links a{min-height:var(--touch-target-min);display:inline-flex;align-items:center;justify-content:center}.modal-close{width:var(--touch-target-min);height:var(--touch-target-min)}.card-f{gap:10px}.toolbar{align-items:stretch}.link-row>*{flex-basis:100%;width:100%}.step button{min-width:0}.hero .stats{gap:24px}.btn{max-width:100%}.sec-h .hint{margin-left:0}}

.card-f button.on{color:var(--red-ink)}

/* Footer follows content and reaches the viewport bottom on short pages. */
body{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
body>main{flex:1;width:100%}
body>.topbar{flex:none}
.site-footer{flex:none;background:var(--bg);border-top:var(--border-width) solid var(--line);padding:var(--space-12) 0 calc(var(--space-12) + env(safe-area-inset-bottom));color:var(--ink-muted-readable);font-size:var(--font-size-caption);text-align:center}
.site-footer-in{max-width:var(--container-max);margin:0 auto;padding-left:max(var(--page-gutter),env(safe-area-inset-left));padding-right:max(var(--page-gutter),env(safe-area-inset-right))}
.site-footer-links{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:0 var(--space-8)}
.site-footer-links a{display:inline-flex;align-items:center;justify-content:center;min-height:var(--touch-target-min);min-width:var(--touch-target-min);color:var(--ink-muted-readable)}
.site-footer-links a:hover{color:var(--brand)}
.site-footer-links a:active{transform:translateY(var(--press-offset))}
.site-footer p{margin-top:var(--space-4);overflow-wrap:anywhere}
@media(max-width:640px){.site-footer-links{column-gap:var(--space-16)}.site-footer-links>span{display:none}}
@media(prefers-reduced-motion:reduce){.site-footer-links a:active{transform:none}}