/* ATLAS application screens: shared visual language, isolated preview components. */
.review-strip{display:flex;align-items:center;justify-content:center;gap:24px;padding:11px 20px;background:#e8efff;color:#415f9c;font-size:13px;border-bottom:1px solid #d6e1fb}
.review-strip>span{font-size:13px;font-weight:800;letter-spacing:1.4px}
.review-strip a{font-weight:750;text-decoration:underline;text-underline-offset:4px}
.design-atlas .main-nav>a:not(.active){color:#536b96}
.post-main h3>a{display:block}.post-main h3>a:hover{color:var(--brand-vivid)}
.mockup .header-inner{max-width:1600px;min-height:84px}
.mockup .header-actions select{border:1px solid #d5def0;border-radius:8px;padding:8px;color:#354b7a;background:white}
.mockup .header-actions .button{border-radius:25px}
.mock-loading{max-width:900px;margin:40px auto;padding:24px}
.m-shell{max-width:1600px;margin:auto;display:grid;grid-template-columns:270px minmax(0,1fr);gap:32px;padding:28px 36px 0}
.m-side{border-right:1px solid #dbe4f4;padding-right:23px}
.m-side nav{position:sticky;top:20px;max-height:calc(100vh - 40px);overflow:auto;scrollbar-width:thin;padding-right:4px}
.m-side nav>a{display:block;padding:11px 12px;font-weight:750;font-size:14px;border-radius:8px;margin-bottom:4px;color:#566b93}
.m-side details{margin:16px 0}
.m-side summary{font-size:13px;color:#6b80a6;font-weight:800;letter-spacing:.4px;cursor:pointer;padding:8px 0}
.m-side details a{display:block;padding:8px 12px;font-size:13px;color:#597097;border-radius:7px;margin:2px 0}
.m-side a.active{color:var(--brand-vivid);background:#e2ebff;font-weight:800}
.m-side a:hover{background:#e8effd}
.m-side>p{font-size:13px;color:#7d8fad;margin:25px 10px}
#mock-content{min-width:0}
.m-preview-notice{font-size:13px;line-height:1.8;color:#6b7d9e;padding:12px 16px;background:#eaf0fc;border-radius:9px;border:1px dashed #cdd9ee}
.m-breadcrumb{display:flex;gap:10px;flex-wrap:wrap;color:#8290a9;font-size:13px;margin:24px 0 20px}
.m-breadcrumb a{color:#5b75a6}
.m-page-heading{margin-bottom:28px}
.m-page-heading>p:first-child{font-size:13px;color:#5778ba;letter-spacing:2px;font-weight:800}
.m-page-heading h1{font-size:34px;line-height:1.4;letter-spacing:-1px;margin:10px 0 8px;color:#172c55}
.m-page-heading>p:last-child{font-size:15px;color:#6b80a3;line-height:1.9}
.m-page-content{min-height:400px}
.m-page-content> .m-actions:first-child{margin-bottom:20px}
.m-panel{background:white;border:1px solid #dbe4f5;border-radius:16px;padding:26px;margin-bottom:22px;min-width:0;box-shadow:0 5px 18px #254dea03}
.m-panel h2{font-size:19px;line-height:1.5;color:#233c6d;margin:0 0 20px;letter-spacing:-.4px}
.m-panel h3{font-size:17px;line-height:1.7;margin:8px 0;color:#293e64}
.m-panel p{color:#6c7f9f;font-size:14px;line-height:1.9;margin:12px 0;overflow-wrap:anywhere}
.m-prose{white-space:pre-line}
.m-panel .button{font-size:13px;border-radius:25px;gap:16px}
.m-panel>.button{margin-top:12px}
.m-columns{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(250px,1fr);gap:24px;align-items:start}
.m-columns>div,.m-columns>aside{min-width:0}
.m-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:20px 0 0}
.m-actions:empty{display:none}
.m-actions .button{max-width:100%;white-space:normal;text-align:center;line-height:1.6}
.m-notice{background:var(--brand-tint2);border-left:3px solid var(--brand-soft);color:#6178a3;padding:14px 16px;margin:18px 0;font-size:13px;line-height:1.85;overflow-wrap:anywhere}
.m-notice.warning{background:#fff4de;border-color:#f0c26e;color:#98783b}
.m-tag{display:inline-flex;padding:4px 9px;background:#edf2fc;color:#6980a5;font-size:13px;border-radius:5px;line-height:1.5;margin:4px 5px 4px 0}
.m-tag.green{background:#e2f5ed;color:#2f8466}.m-tag.blue{background:#e6edff;color:#3865d9}
.m-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:22px 0}
.m-stats>div{border:1px solid #dce5f6;border-radius:12px;background:white;padding:19px 21px;min-width:0}
.m-stats span{font-size:13px;color:#7184a7;display:block;margin-bottom:9px}
.m-stats strong{font-size:27px;line-height:1.3;letter-spacing:-.8px;color:var(--brand-vivid);overflow-wrap:anywhere;display:block}
.m-panel .m-stats{gap:8px}.m-panel .m-stats>div{padding:14px 12px;background:#f6f8fd;border:0}.m-panel .m-stats strong{font-size:22px}
.m-flow-leads{display:grid;gap:12px;margin:25px 0}
.m-flow-lead{display:flex;align-items:center;gap:22px;border:1px solid #d3def7;background:#fff;border-radius:14px;padding:23px}
.m-flow-lead>span{font:italic 32px Georgia,serif;color:#a4b9ec}
.m-flow-lead strong{font-size:15px;line-height:1.8;color:#365385}
.m-flow-lead b{margin-left:auto;color:var(--brand-vivid);font-size:22px}
.m-flow-lead:first-child{background:var(--brand-vivid);border-color:var(--brand-vivid)}.m-flow-lead:first-child strong,.m-flow-lead:first-child b{color:#fff}.m-flow-lead:first-child>span{color:#adbeff}
.m-guide-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 22px}
.m-screen-list{padding:0;margin:0;list-style:none;counter-reset:screen}
.m-screen-list li{counter-increment:screen;border-bottom:1px solid #edf1f9}
.m-screen-list li:last-child{border:0}
.m-screen-list a{display:flex;align-items:center;gap:15px;padding:12px 0;color:#5273a6;font-size:14px}
.m-screen-list a:before{content:counter(screen,decimal-leading-zero);font-size:13px;color:#a4b5d0}
.m-screen-list a>span{margin-left:auto}.m-screen-list a:hover{color:var(--brand-vivid)}
.m-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.m-fields .wide{grid-column:1/-1}
.m-field{display:flex;flex-direction:column;gap:8px;margin:0 0 18px;min-width:0}
.m-fields .m-field{margin:0}
.m-field>span{font-size:13px;color:#61769b;font-weight:650}
.m-field i{color:#d89946;font-style:normal}
.m-form input:not([type=checkbox]),.m-form textarea,.m-form select,.m-table-wrap select,.m-team-banner select{width:100%;min-width:0;border:1px solid #cbd8ee;border-radius:8px;background:#fcfdff;color:#344a72;padding:11px 13px;font:inherit;font-size:14px}
.m-form textarea{resize:vertical;min-height:70px;line-height:1.8}
.m-form input:focus,.m-form textarea:focus,.m-form select:focus{outline:3px solid #c8d7ff;border-color:#6c91ed}
.m-form input[type=checkbox]{width:17px;height:17px;accent-color:var(--brand-vivid)}
.m-form fieldset{border:1px solid #dce4f3;border-radius:10px;margin:24px 0;padding:15px}
.m-form legend{font-size:13px;color:#607aa7;padding:0 6px}
.m-check{display:flex;align-items:center;gap:9px;font-size:13px;color:#687d9f;margin:14px 0;line-height:1.7}
.m-form>.button{margin-top:22px}
.m-form-error{color:#b74e53!important;margin:12px 0 0!important;font-size:13px!important}
.m-form-error:empty{display:none}
.m-rating-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;background:#f0f5ff;padding:18px;border-radius:10px}
.m-detail-lead{background:var(--brand-vivid);border-radius:16px;padding:30px;margin-bottom:22px;color:white}
.m-detail-lead h2{font-size:27px;line-height:1.6;margin:15px 0 18px;letter-spacing:-.5px;overflow-wrap:anywhere}
.m-detail-lead p{font-size:14px;color:#d7e2ff;margin:6px 0;overflow-wrap:anywhere}
.m-detail-lead .m-tag{background:#ffffff24;color:#e2ebff}
.m-profile-heading{display:flex;align-items:center;gap:14px;margin:10px 0 20px}
.m-avatar{width:50px;height:50px;display:inline-grid;place-items:center;border-radius:50%;background:#e8efff;color:#5478d1;font-weight:800;font-size:20px;flex:none}
.m-avatar.small{width:32px;height:32px;font-size:13px}
.m-success{max-width:730px;margin:30px auto;padding:45px 32px;text-align:center;background:white;border:1px solid #d7e2f4;border-radius:20px}
.m-success-icon{width:75px;height:75px;background:#e6f4ee;color:#469b79;font-size:38px;border-radius:50%;display:grid;place-items:center;margin:0 auto 25px}
.m-success h2{font-size:26px;margin:15px 0}.m-success p{color:#7a8ba7;line-height:1.9}.m-success .m-actions{justify-content:center}
.m-welcome,.m-team-banner{display:flex;align-items:center;justify-content:space-between;gap:25px;background:var(--brand-vivid);border-radius:18px;padding:32px;color:white;margin-bottom:24px}
.m-welcome p,.m-team-banner p{font-size:13px;color:#d5dfff;line-height:1.9;margin:6px 0}
.m-welcome p:first-child,.m-team-banner p:first-child{font-size:13px;letter-spacing:2px;font-weight:700}
.m-welcome h2,.m-team-banner h2{font-size:29px;margin:10px 0;line-height:1.5}
.m-welcome h2>span{font-size:13px;color:#b6caff;font-weight:500}
.m-welcome .light{color:var(--brand-vivid);white-space:nowrap}
.m-team-banner{background:linear-gradient(120deg,#1e3ca2,var(--brand-vivid));justify-content:flex-start}
.m-team-banner>div{flex:1;min-width:0}
.m-team-banner label{font-size:13px;color:#d4dfff;min-width:170px;display:flex;gap:8px;flex-direction:column}
.m-team-banner select{font-size:13px;padding:9px}
.m-crest{display:inline-grid;place-content:center;text-align:center;border:2px solid #a3b9ff;border-radius:12px 12px 38px 38px;font:italic bold 47px/1.2 Georgia,serif;width:95px;height:115px;flex:none;background:#ffffff0d}
.m-crest small{font:700 13px/2.5 system-ui,sans-serif;letter-spacing:2px}
.m-match-summary{display:flex;align-items:center;gap:20px;background:var(--brand-tint);border:1px solid #d4dffa;border-radius:13px;padding:22px;margin-bottom:22px}
.m-panel .m-match-summary{padding:16px;background:#f4f7ff}
.m-date-tile{font:700 24px monospace;color:var(--brand-vivid);min-width:75px;padding-right:17px;border-right:1px solid #ccdafa}
.m-date-tile small{display:block;font:13px system-ui,sans-serif;letter-spacing:2px;margin-top:6px;color:#8da3cc}
.m-match-summary strong{font-size:16px;color:#365387;line-height:1.8;overflow-wrap:anywhere}
.m-match-summary p{font-size:13px;color:#6980a9;margin:5px 0;overflow-wrap:anywhere}
.m-versus{color:#90a5c8;font-size:13px;font-weight:400;padding:0 5px}
.m-menu{display:grid;gap:12px}.m-menu .button{justify-content:space-between;border-radius:8px;font-size:13px}
.m-rating-number{font-size:48px;font-weight:800;color:var(--brand-vivid)}.m-rating-number span{font-size:13px;font-weight:500;color:#7690bc}
.m-tabs{display:flex;gap:10px;border-bottom:1px solid #d6e1f4;padding-bottom:15px;margin-bottom:22px}
.m-tabs button{padding:9px 19px;border-radius:25px;color:#6c80a2;font-size:14px;background:white;border:1px solid #d7e1f2}
.m-tabs button.active{background:var(--brand-vivid);color:white;border-color:var(--brand-vivid)}
.m-chat-layout{display:grid;grid-template-columns:200px minmax(0,1fr);gap:20px}
.m-chat-list{background:#e7efff;border:1px solid #d4e0f6;border-radius:12px;padding:20px;align-self:start;font-size:14px;color:#5272a4}
.m-chat-list p{font-size:13px;margin:10px 0}
.m-chat-heading{display:flex;align-items:center;justify-content:space-between;gap:15px}.m-chat-heading h2{margin:0}
.m-chat-messages{display:flex;flex-direction:column;gap:18px;padding:20px 0;max-height:500px;overflow:auto}
.m-bubble{align-self:flex-start;max-width:85%;background:#eef3fc;color:#526b94;padding:15px 18px;border-radius:0 16px 16px 16px;font-size:14px;line-height:1.9;white-space:pre-wrap;overflow-wrap:anywhere}
.m-bubble.mine{align-self:flex-end;background:var(--brand-vivid);color:white;border-radius:16px 0 16px 16px}
.m-bubble small{display:block;font-size:13px;opacity:.7;margin-top:7px;letter-spacing:1px}
.m-chat form{border-top:1px solid #e1e8f5;padding-top:18px}
.m-chat form>.button{margin-top:10px}
.m-table-wrap{overflow-x:auto;margin-top:22px}.m-table-wrap table{border-collapse:collapse;width:100%;min-width:400px;font-size:13px}
.m-table-wrap th{background:#f2f6ff;color:#738ab0;font-weight:500;padding:13px;text-align:left}
.m-table-wrap td{padding:15px 13px;border-bottom:1px solid #e9eef8;color:#536b91}
.m-table-wrap select{padding:7px;font-size:13px;min-width:100px}
#invite-result{font-size:13px;color:var(--brand-vivid);margin-top:14px;overflow-wrap:anywhere}
.m-calendar-week,.m-calendar-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.m-calendar-week{background:#f0f5ff;border-radius:8px 8px 0 0;text-align:center;font-size:13px;color:#7890b7;padding:11px 0}
.m-calendar-days{border-top:1px solid #dfe7f6;border-left:1px solid #dfe7f6}
.m-calendar-days>div{min-height:88px;padding:10px 7px;border-right:1px solid #dfe7f6;border-bottom:1px solid #dfe7f6;font-size:13px;color:#738bb2;min-width:0}
.m-calendar-days>div.blank{background:#fafbfe}
.m-calendar-days a{display:block;padding:4px;margin-top:8px;background:#e5eeff;color:#3768d1;border-radius:3px;font-size:13px;overflow-wrap:anywhere}
.m-calendar-days a:hover{background:var(--brand-vivid);color:white}
.calendar-dot{display:none}
.m-segment{display:flex;gap:10px;flex-wrap:wrap}
.m-segment button{padding:12px 23px;background:var(--brand-tint2);border:1px solid #d1def6;color:#6581b1;border-radius:25px;font-size:14px}
.m-segment button[aria-pressed=true]{color:white;background:var(--brand-vivid);border-color:var(--brand-vivid)}
.m-roster{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.m-roster>div{display:flex;align-items:center;gap:10px;border-bottom:1px solid #eef2fa;padding:8px 0;font-size:13px;color:#647da5}
.m-roster .m-tag{margin-left:auto;white-space:nowrap}
.m-checklist{list-style:none;padding:0;font-size:14px;color:#5f7caa;line-height:2.5}
.m-score-entry{display:flex;align-items:center;justify-content:center;gap:22px;margin:28px 0}
.m-score-entry label{display:grid;text-align:center;gap:12px;font-size:13px;color:#6e86b0;flex:1;max-width:220px}
.m-score-entry input{font-size:42px!important;text-align:center;color:var(--brand-vivid)!important;font-weight:800}
.m-score-entry>span{font-size:32px;color:#a2b5d9}
.m-rating-hero{display:grid;grid-template-columns:1fr 1.5fr;align-items:center;gap:30px;background:var(--brand-vivid);border-radius:18px;padding:32px;color:white}
.m-rating-hero p{font-size:13px;letter-spacing:1px;color:#c2d3ff}
.m-rating-hero>div>strong{font-size:83px;line-height:1.3;letter-spacing:-4px;display:block}
.m-rating-hero>div>span{color:#cbd9ff;font-size:13px}
.m-rating-hero .m-stats{grid-template-columns:1fr;gap:0;margin:0}
.m-rating-hero .m-stats>div{display:flex;justify-content:space-between;align-items:center;background:none;border:0;border-bottom:1px solid #ffffff26;border-radius:0;padding:13px 0}
.m-rating-hero .m-stats span{color:#c5d6ff;margin:0}.m-rating-hero .m-stats strong{color:white;font-size:25px}
.m-chart{display:flex;align-items:flex-end;gap:14px;justify-content:space-around;padding:25px 0 10px}
.m-chart>div{display:flex;flex:1;min-width:0;flex-direction:column;align-items:center;gap:10px}
.m-chart strong{font-size:13px;color:#4c73c4}.m-chart span{width:80%;max-width:45px;background:#d9e5ff;border-radius:6px 6px 0 0}.m-chart>div:last-child span{background:var(--brand-vivid)}
.m-chart small{font-size:13px;color:#7186a6;white-space:normal;text-align:center;overflow-wrap:anywhere}
.m-person-card{display:flex;align-items:center;gap:18px;border:1px solid #d8e3f7;border-radius:13px;padding:20px;margin-top:16px;flex-wrap:wrap}
.m-person-card>div:not(.m-actions){flex:1;min-width:160px}.m-person-card h3{margin:0}.m-person-card p{font-size:13px;margin:6px 0}
.m-person-card .m-actions{width:100%;margin-top:4px;padding-top:14px;border-top:1px solid #edf1f9;justify-content:flex-end}
.m-person-card.muted{background:#f3f5fa;border-style:dashed;color:#8999b5}
.m-slot-list>div{display:flex;align-items:center;flex-wrap:wrap;gap:14px;border-bottom:1px solid #e4ebf8;padding:15px 0;font-size:13px;color:#667faa}
.m-slot-list>div>.button{margin-left:auto;font-size:13px;padding:5px 12px;min-height:34px}
.m-auth{max-width:610px;margin:0 auto}.m-auth .m-panel{padding:35px}.m-auth form>.button{width:100%}
.m-notifications>a{display:flex;gap:17px;align-items:center;padding:20px 0;border-bottom:1px solid #e4ebf8}
.m-notifications>a:last-child{border:0}.m-notifications h3{font-size:15px;margin:0}.m-notifications p{font-size:13px;margin:5px 0}
.m-notifications>a>div{flex:1}.m-notifications>a>span:last-child{color:#7896cd}
.m-notification-dot{width:8px;height:8px;border-radius:50%;background:var(--brand-vivid);flex:none}.m-notification-dot.read{background:#c8d4e9}
.m-footer{display:flex;justify-content:space-between;gap:20px;font-size:13px;color:#8195b9;margin-top:35px;padding:25px 0;border-top:1px solid #dce5f5}
.m-footer a{color:#5072b3;font-weight:700}
.m-mobile-nav{display:none}
#mock-toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);opacity:0;pointer-events:none;padding:13px 22px;border-radius:10px;background:#19368e;color:white;box-shadow:0 5px 30px #142b7530;max-width:calc(100% - 32px);font-size:13px;transition:.2s;z-index:100}
#mock-toast.visible{opacity:1;transform:translate(-50%,0)}
[hidden]{display:none!important}
/* A dedicated navigation panel makes the page hierarchy and current location explicit. */
@media(min-width:901px){
 .m-side{border:0;padding:0;position:relative}
 .m-side nav{background:#172f69;border:1px solid #254785;border-radius:18px;padding:18px 14px;box-shadow:0 10px 26px #16357818;scrollbar-color:#617dac #172f69}
 .m-side nav>a{display:flex;align-items:center;min-height:48px;padding:12px 16px;font-size:15px;color:#ecf2ff;background:#ffffff0a;border:1px solid #ffffff15;margin-bottom:8px;border-radius:10px}
 .m-side details{margin:18px 0 0;padding-top:14px;border-top:1px solid #ffffff29}
 .m-side summary{display:flex;align-items:center;justify-content:space-between;gap:8px;list-style:none;font-size:14px;letter-spacing:0;color:#d9e5ff;padding:10px 10px 12px;line-height:1.7}
 .m-side summary::-webkit-details-marker{display:none}
 .m-side summary:after{content:'＋';font-size:18px;color:#a8c2ff;font-weight:400}
 .m-side details[open]>summary:after{content:'−'}
 .m-side details a{position:relative;min-height:42px;padding:11px 15px 11px 24px;margin:4px 0;color:#cbdaf5;font-size:14px;line-height:1.65;border-radius:9px}
 .m-side details a:before{content:'';width:4px;height:4px;background:#7f9cd0;border-radius:50%;position:absolute;left:11px;top:21px}
 .m-side a:hover{background:#2a4781;color:white}
 .m-side a.active{background:#fff;color:var(--brand-vivid);box-shadow:0 3px 12px #071d4e26;font-weight:800;border-color:white}
 .m-side details a.active:before{width:4px;height:22px;left:0;top:50%;transform:translateY(-50%);border-radius:0 3px 3px 0;background:#7394ff}
 .m-side a:focus-visible,.m-side summary:focus-visible{outline:3px solid #ffce65;outline-offset:2px}
 .m-side>p{font-size:13px;line-height:1.9;color:#63799e;padding:16px 8px;margin:0}
}
@media(max-width:1200px){
 .m-shell{grid-template-columns:250px minmax(0,1fr);gap:22px;padding:24px}.m-side{padding-right:15px}
 .m-columns{grid-template-columns:1fr}.m-columns>aside{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:start}
 .m-columns>aside>.m-panel:only-child{grid-column:1/-1}.m-panel{padding:22px}
 .m-team-banner{flex-wrap:wrap}.m-team-banner label{width:100%;flex-direction:row;align-items:center;gap:15px}.m-team-banner select{width:auto;min-width:200px}
 .m-team-banner p{font-size:13px}.m-chat-layout{grid-template-columns:150px minmax(0,1fr)}
}
@media(max-width:900px){
 .m-shell{display:block}.m-side{display:none}.m-columns{grid-template-columns:1.5fr 1fr;gap:18px}.m-columns>aside{display:block}
 .m-stats>div{padding:17px}.m-stats strong{font-size:25px}.m-roster{grid-template-columns:1fr}
 .m-chat-layout{grid-template-columns:170px minmax(0,1fr)}
}
@media(max-width:760px){
 .review-strip{gap:12px;padding:10px 12px;font-size:13px;flex-wrap:wrap}.review-strip>span{font-size:13px;letter-spacing:.5px}
 .mockup .header-inner{min-height:74px}.mockup .header-actions{gap:8px}.mockup .header-actions select{font-size:13px;padding:7px}.mockup .header-actions .button{font-size:13px;padding:8px 13px;min-height:35px}
 .mockup .brand small{font-size:13px}.mockup .brand{font-size:24px;gap:7px}.mockup .brand-mark{width:32px;height:32px;font-size:35px}
 .m-shell{padding:18px 16px 0}.m-preview-notice{font-size:13px;padding:10px 12px}
 .m-page-heading{margin-bottom:22px}.m-page-heading h1{font-size:27px;letter-spacing:-.6px}.m-page-heading>p:last-child{font-size:13px}
 .m-breadcrumb{font-size:13px;margin:17px 0;gap:7px}.m-page-heading>p:first-child{font-size:13px}
 .m-columns,.m-guide-grid{grid-template-columns:1fr}.m-columns>aside{display:block}
 .m-panel{padding:20px 17px;border-radius:12px;margin-bottom:18px}.m-panel h2{font-size:18px;margin-bottom:16px}.m-panel p{font-size:13px}
 .m-notice{font-size:13px;padding:12px}.m-stats{gap:8px;margin:18px 0}.m-stats>div{padding:13px 10px;border-radius:9px}.m-stats span{font-size:13px}.m-stats strong{font-size:21px}
 .m-flow-lead{padding:19px 15px;gap:15px}.m-flow-lead strong{font-size:13px}.m-flow-lead>span{font-size:25px}
 .m-screen-list a{font-size:13px;padding:11px 0}
 .m-fields{grid-template-columns:1fr;gap:16px}.m-rating-fields{gap:9px;padding:12px}.m-rating-fields .m-field>span{font-size:13px}
 .m-form input:not([type=checkbox]),.m-form textarea,.m-form select{font-size:16px;padding:10px}.m-check{font-size:13px}
 .m-detail-lead{padding:24px 20px;border-radius:12px}.m-detail-lead h2{font-size:23px}.m-detail-lead p{font-size:13px}
 .m-welcome,.m-team-banner{padding:24px 20px;flex-wrap:wrap;gap:15px;border-radius:14px}.m-welcome h2,.m-team-banner h2{font-size:23px}
 .m-welcome h2>span{display:block;font-size:13px;margin-top:7px}.m-welcome p,.m-team-banner p{font-size:13px}
 .m-crest{width:65px;height:85px;font-size:35px;border-radius:8px 8px 25px 25px}.m-crest small{font-size:13px;letter-spacing:1px}
 .m-team-banner select{min-width:0;flex:1}.m-team-banner label{font-size:13px}
 .m-match-summary{padding:18px 14px;gap:12px}.m-match-summary strong{font-size:14px}.m-match-summary p{font-size:13px}
 .m-date-tile{font-size:21px;min-width:63px;padding-right:12px}
 .m-chat-layout{grid-template-columns:1fr;gap:15px}.m-chat-list{display:none}.m-chat-heading h2{font-size:16px}.m-chat-heading .button{font-size:13px;padding:8px 12px}
 .m-chat-messages{max-height:450px}.m-bubble{font-size:13px;max-width:90%;padding:12px 15px}
 .m-calendar-days>div{min-height:64px;padding:7px 4px;font-size:13px}.m-calendar-days a{font-size:13px;line-height:1.4;padding:3px 1px}
 .m-roster{grid-template-columns:1fr}.m-roster>div{font-size:13px}.m-segment button{padding:10px 20px;font-size:13px}
 .m-score-entry{gap:12px}.m-score-entry input{font-size:34px!important}.m-score-entry label{font-size:13px}
 .m-rating-hero{padding:25px;grid-template-columns:1fr;gap:10px}.m-rating-hero>div>strong{font-size:76px}.m-rating-hero .m-stats strong{font-size:22px}
 .m-chart{gap:8px}.m-chart small{font-size:13px}.m-chart strong{font-size:13px}
 .m-person-card{padding:16px;gap:12px}.m-person-card>div:not(.m-actions){min-width:130px}.m-person-card .m-actions{justify-content:flex-start}.m-person-card .button{font-size:13px}
 .m-auth .m-panel{padding:24px 20px}.m-success{padding:30px 20px}.m-success h2{font-size:23px}.m-success p{font-size:13px}
 .m-notifications>a{gap:10px}.m-notifications h3{font-size:13px}.m-notifications .m-tag{font-size:13px;white-space:nowrap}
 .m-footer{font-size:13px;gap:10px}.m-footer>span{font-size:13px}
 .m-mobile-nav{display:flex;justify-content:space-around;position:fixed;bottom:0;left:0;right:0;padding:8px 8px max(8px,env(safe-area-inset-bottom));background:#fffffff5;border-top:1px solid #d5e0f5;backdrop-filter:blur(10px);z-index:20}
 .m-mobile-nav a{display:flex;flex-direction:column;align-items:center;font-size:21px;color:var(--brand-vivid);min-width:60px}.m-mobile-nav span{font-size:13px;color:#6883b0}
 #mock-toast{bottom:82px;width:max-content;text-align:center;font-size:13px}
}
@media(max-width:360px){
 .mockup .header-inner{padding:14px}.mockup .header-actions .button{padding:7px 10px;font-size:13px}.m-shell{padding-left:12px;padding-right:12px}
 .m-page-heading h1{font-size:24px}.m-panel{padding:18px 14px}.m-stats strong{font-size:19px}.m-panel .m-stats strong{font-size:19px}
 .m-calendar-days a>span:last-child{display:none}.calendar-dot{display:block;width:5px;height:5px;border-radius:50%;background:var(--brand-vivid);margin:3px auto}.m-calendar-days a{min-height:18px}
 .m-rating-fields{grid-template-columns:1fr}.m-notifications .m-tag{display:none}
}