@font-face{font-family:Fixel;src:url('assets/FixelText-Regular.otf')}*{box-sizing:border-box}body{margin:0;background:#0e1519;color:#fcfcfc;font:14px Fixel,Arial,sans-serif}button,input{font:inherit}button{cursor:pointer;border:0}button:focus-visible,a:focus-visible{outline:2px solid #fff;outline-offset:4px}#viewport{position:relative;overflow:hidden}.page{width:1440px;height:720px;position:relative;transform-origin:top left;background:#0e1519}aside{position:absolute;width:176px;height:720px;background:#080b0c;padding:24px 12px}.brand{width:130px;height:20px}.space{margin-top:20px;background:#202b31;border-radius:18px;padding:8px 10px;color:#00c828;font-size:12px}nav{margin-top:16px}nav div{height:32px;display:flex;align-items:center;gap:8px;color:#94a0a5}nav div:last-child{color:#fff}nav img{width:16px;height:16px}footer{position:absolute;bottom:20px;left:12px;width:152px}footer>div{height:32px;margin:4px 0;border:1px solid #192329;border-radius:24px;font-size:12px;display:flex;align-items:center;justify-content:space-between;padding:6px 8px;color:#00c828}footer span{font-size:20px}footer .account{background:#202b31;color:#fff;justify-content:flex-start;gap:8px}footer .account span{margin-left:auto}footer img{width:24px;height:24px;border-radius:50%}footer small{font-size:8px;line-height:12px;color:#94a0a5;display:block;margin-top:16px}main{position:absolute;left:192px;width:1232px}.topbar{height:64px;display:flex;align-items:flex-start;padding-top:16px;justify-content:space-between}.topbar>span:first-child{font-size:14px;padding-top:6px}.topbar>span:nth-child(2){font-size:20px;padding-top:2px}.primary{background:#00c828;color:#080b0c;border-radius:24px;padding:7px 12px}.green{color:#00c828}.muted{color:#94a0a5}.header{height:168px;width:1232px;position:relative;background:#192329;border-radius:8px;overflow:hidden}.identity{position:absolute;left:0;top:0;width:400px;height:168px;z-index:4;background:#192329}.club-glow{position:absolute;inset:0;overflow:hidden;opacity:.3;filter:blur(30px)}.club-glow img{position:absolute;width:225px;height:322.941px;left:0;top:-29px}.photo{position:absolute;left:8px;top:8px;width:120px;height:152px}.photo img{position:absolute;inset:0;width:120px;height:152px;object-fit:cover;border-radius:4px}h1{position:absolute;left:140px;top:8px;width:260px;font-size:20px;line-height:24px;margin:0;font-weight:600}.role{position:absolute;left:140px;top:84px;color:#94a0a5;font-size:12px}.club{position:absolute;left:140px;top:127px;display:flex;gap:8px;font-size:12px;line-height:16px;align-items:end}.crest{position:relative;width:32px;height:32px;background:#fcfcfc;border-radius:2px}.crest img{position:absolute;left:6.08px;top:3px;width:19.833px;height:28px}#peel{position:absolute;left:400px;top:0;width:832px;height:168px}.peel-top{background:#192329}.peel-back{background:#27363f}.peel-bottom{background:#c8f4a6;color:#102415}.reports{position:absolute;left:40px;top:8px;font-size:32px;font-weight:300;line-height:36px}.reports small{display:block;font-size:12px;color:#94a0a5;line-height:16px;margin-top:2px}.stats{position:absolute;left:40px;top:128px;display:flex;gap:32px;font-size:12px}.stats>div{display:flex;gap:8px;align-items:center}.stats b{display:grid;place-items:center;width:32px;height:32px;background:#454f54;border-radius:2px;font-size:14px}.contacts{position:absolute;left:624px;top:8px;width:200px;font-size:12px;line-height:16px;display:flex;flex-direction:column}.contacts strong{font-weight:600}.contacts span{color:#94a0a5}.email-label{margin-top:8px}.contacts a{color:#00c828;text-decoration:none;font-size:11px}.divider{position:absolute;left:608px;top:8px;height:152px;width:1px}.divider img{height:1px;width:152px;transform:rotate(90deg);transform-origin:top left}.announcement{position:absolute;left:285px;top:13px;width:520px;height:146px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}.eyebrow{font-size:10px;letter-spacing:1.5px;font-weight:bold}h2{margin:4px 0;font-size:22px;line-height:26px}.announcement p{font-size:12px;line-height:17px;margin:2px 0 9px;max-width:500px}.actions{display:flex;align-items:center;gap:14px}.actions button{font-size:12px;padding:7px 12px;border-radius:20px;background:#163727;color:#fff}.actions .text-button{background:transparent;color:#163727;padding:7px 3px}#success{font-size:11px;max-width:190px}#corner{position:absolute;bottom:0;right:0;width:72px;height:62px;background:transparent;z-index:8;border-radius:8px 0 8px 0}#corner:focus-visible{outline-offset:-4px}body.open #corner{width:40px;height:30px}.table{margin-top:8px;background:#192329;border-radius:4px;overflow:hidden;height:216px}.table-top{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 16px}.tabs{display:flex;gap:14px}.tabs button{padding:0;background:transparent;color:#00c828;font-size:16px}.filter{background:#323d42;color:#00c828;border-radius:24px;padding:8px 12px}table{border-collapse:collapse;width:100%;font-size:14px;text-align:left;white-space:nowrap}th{font-size:12px;color:#00c828;font-weight:400;height:32px}th:nth-child(n+7){color:#94a0a5}td{height:64px}td:first-child,th:first-child{padding-left:16px;width:280px}td:nth-child(2){width:104px}td:nth-child(3){width:292px;color:#00c828}td:first-child{color:#00c828}td img{width:40px;height:40px;object-fit:cover;vertical-align:middle;margin-right:8px;border-radius:4px}tbody tr:nth-child(2){background:#202b31}.demo-controls{margin:38px auto 0;padding:20px 24px;max-width:1100px;display:flex;flex-wrap:wrap;align-items:center;gap:14px;color:#a8b4b8;font-size:12px;border-top:1px solid #283339}.demo-controls>span{color:#e6eeea;font-size:14px}.demo-controls i{display:inline-block;width:6px;height:6px;background:#b7e58e;border-radius:50%;margin-right:6px}.demo-controls p{width:100%;margin:0 0 3px;font-size:14px}.demo-controls button{background:#263238;color:#fff;padding:8px 16px;border-radius:20px}.demo-controls label{display:flex;gap:12px;align-items:center}.demo-controls input{accent-color:#b7e58e}.demo-controls small{margin-left:auto}.demo-controls a{color:#a8b4b8}#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#263238;padding:12px 20px;border-radius:8px;opacity:0;pointer-events:none;transition:opacity .2s}#toast.visible{opacity:1}

.player-photo{display:inline-block;position:relative;width:40px;height:40px;margin-right:8px;vertical-align:middle;border-radius:4px;overflow:hidden}.player-photo img{position:absolute;inset:0;width:40px;height:40px;margin:0}.player-photo .crop{height:130%;top:-20.77%}
#corner{touch-action:none}
.peel-bottom-shadow,.peel-top-shadow,.peel-back-shadow,.peel-back-reflection{pointer-events:none}

.header{overflow:clip}
/* Fold floats over the identity area; the header remains its outer boundary. */
.header{isolation:isolate}
#peel{z-index:5;overflow:visible}
.topbar{position:relative;z-index:10}

/* Updated visual treatment from Figma 1424:43685. Peel geometry is unchanged. */
@font-face{font-family:Fixel;src:url('assets/FixelText-SemiBold.woff2') format('woff2');font-weight:600}
.peel-bottom{background:#33e963;color:#080b0c}
.peel-back{background:#27363f}

.announcement{left:0;top:0;width:832px;height:168px;display:block}
.announcement-content{position:absolute;left:352px;top:16px;width:432px;display:flex;flex-direction:column;gap:24px}
.announcement h2{margin:0;font-weight:600;font-size:20px;line-height:24px;width:337px;color:#080b0c}
.feature-list{display:flex;gap:24px;align-items:center}
.feature{width:128px;flex:0 0 128px;display:flex;flex-direction:column;gap:8px;justify-content:center}
.feature img{display:block;flex:none}
.announcement .feature p{margin:0;font-size:12px;line-height:16px;color:#000;width:128px}
#close{position:absolute;right:8px;top:8px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:24px;background:transparent;padding:0;color:#080b0c}
#close:hover{background:rgba(8,11,12,.08)}
body.open #corner{pointer-events:none}

/* 8px physical sheet corners follow the reflected layer. */
.peel-top,.peel-bottom{border-radius:0 8px 8px 0}
.peel-back{border-radius:8px}
.identity{border-radius:8px 0 0 8px}
.announcement-content{left:296px;right:16px;width:auto}
.feature{width:auto;flex:1 1 0;min-width:0}
.announcement .feature p{width:auto}

#close{z-index:2}

/* Exact inner layout from Figma 1426:50111 (1232 × 168). */
.announcement-content{left:328px;right:16px;top:16px;width:488px;gap:16px}
.announcement h2{width:488px;font-size:20px;line-height:24px;font-weight:600}
.feature-list{gap:32px;width:488px;align-items:center}
.feature{flex:0 0 136px;width:136px;gap:8px}
.feature img{width:32px;height:32px}
.announcement .feature p{width:136px;font-size:12px;line-height:16px}

/* 16px from the native Peel.js crease at the content's top edge. */
.announcement-content{left:295.7102px;right:16px;width:auto}
.announcement h2{width:100%}
.feature-list{width:100%;gap:32px}
.feature{flex:1 1 0;width:auto;min-width:0}
.announcement .feature p{width:100%}

/* Only the outer header corners are rounded; the x=400px join is straight. */


/* Page proportions and navigation match the reference. */
html,body{margin:0;min-width:1440px;min-height:100%;}
#viewport{width:100%;min-height:max(900px,100vh);overflow:visible;margin:0;}
.page{width:100%;min-width:1440px;height:auto;min-height:max(900px,100vh);transform:none;}
aside{height:auto;top:0;bottom:0;width:176px;padding:24px 12px 20px;}
.brand{display:block;width:130px;height:20px;margin:0 0 20px;}
.space{margin:0 0 16px;padding:6px 10px;border-radius:24px;display:flex;align-items:center;justify-content:space-between;font-size:14px;line-height:20px;}
nav>div{height:32px;font-size:14px;line-height:20px;}
footer{bottom:20px;}
main{left:192px;right:16px;width:auto;}
.header{width:100%;}
#peel{left:auto;right:0;}
.demo-controls{display:none;}

/* Shadow must not inherit the top sheet's rectangular clipping boundary. */
.fold-shadow{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:visible;filter:drop-shadow(14px 2px 20px rgba(14,21,25,.3));}
.fold-shadow .peel-back{pointer-events:none;}

/* Figma content width; padding is measured against the visible open crease. */
.announcement-content{left:auto;right:16px;top:16px;width:399px;gap:16px;}
.feature-list{display:grid;grid-template-columns:124px 105px 106px;gap:32px;width:399px;}
.feature{width:auto;min-width:0;}
.announcement .feature p{white-space:nowrap;}

/* Shift the content and open crease left together by 16px. */
.announcement-content{right:32px;}