@font-face{font-family:C103Jakarta;src:url(fonts/PlusJakartaSans.ttf) format('truetype');font-style:normal;font-weight:200 800;font-display:swap}
@font-face{font-family:C103Baloo;src:url(fonts/Baloo2.ttf) format('truetype');font-style:normal;font-weight:400 800;font-display:swap}
body.fm103-figma-page{background:#f4f6fc!important}
.c103-design{--blue:#0018ff;--yellow:#fedb24;--bg:#f4f6fc;--muted:#5a6280;margin:0;padding:0;width:100%;color:#000;background:var(--bg);font-family:C103Jakarta,sans-serif;font-size:14px;line-height:1.5}
.c103-design *{box-sizing:border-box}
.c103-design h1,.c103-design h2,.c103-design h3,.c103-design p{margin:0;padding:0;letter-spacing:0}
.c103-design h1,.c103-design h2{font-family:C103Baloo,sans-serif;font-weight:700}
.c103-design a{color:inherit;text-decoration:none}
.c103-design button,.c103-design input,.c103-design select{font-family:inherit;letter-spacing:0;box-shadow:none;text-transform:none;min-height:0}
.c103-design button{cursor:pointer}
.c103-design [hidden]{display:none!important}
.c103-design :focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.c103-design .c103-container{width:min(1120px,calc(100% - 64px));margin-inline:auto}
.c103-design .c103-header{background:#fff;padding:24px 0;position:relative}
.c103-design .c103-header .c103-container{display:flex;align-items:center;gap:16px;height:58px}
.c103-design .c103-logo{display:block;flex:0 0 96px;height:58px}
.c103-design .c103-logo img{display:block;width:96px;height:58px;object-fit:contain}
.c103-design .c103-brand{font-size:16px;font-weight:700;line-height:24px;flex:0 1 760px}
.c103-design .c103-live{flex:0 0 200px;height:43px;display:flex;align-items:center;gap:8px;border:0;border-radius:12px;background:var(--yellow);color:#000;padding:12px;font-size:13px;line-height:19px;font-weight:700;justify-content:flex-start;margin:0}
.c103-design .c103-nav{background:var(--blue);padding:16px 0}
.c103-design .c103-nav .c103-container{display:flex;gap:32px;align-items:center}
.c103-design .c103-nav a{color:#fff;font-size:12px;line-height:20px;font-weight:700;white-space:nowrap}
.c103-design .c103-nav a:nth-child(1){width:52px}.c103-design .c103-nav a:nth-child(2){width:142px}.c103-design .c103-nav a:nth-child(3){width:72px}.c103-design .c103-nav a:nth-child(4){width:92px}.c103-design .c103-nav a:nth-child(5){width:118px}.c103-design .c103-nav a:nth-child(6){width:116px}.c103-design .c103-nav a:nth-child(7){width:30px}.c103-design .c103-nav a:nth-child(8){width:94px}
.c103-design .c103-nav a[aria-current]{color:var(--yellow)}
.c103-design .c103-hero{background:#000;color:#fff;padding:24px 0 28px;min-height:194px}
.c103-design .c103-hero .c103-container{position:relative;display:flex;flex-direction:column;gap:7px}
.c103-design .c103-eyebrow{color:var(--yellow);font-size:12px;line-height:18px}
.c103-design .c103-hero h1{font-size:48px;line-height:55px;color:#fff}
.c103-design .c103-tagline{font-size:20px;line-height:29px}
.c103-design .c103-period{font-size:13px;line-height:19px}
.c103-design .c103-pattern-desktop{position:absolute;top:40px;left:calc(100% - 20px);max-width:none;width:74px;height:78px}
.c103-design .c103-pattern-mobile{display:none}
.c103-design .c103-main{padding:40px 0;background:var(--bg)}
.c103-design .c103-main>.c103-container{display:flex;flex-direction:column;gap:24px}
.c103-design .c103-filters{padding:16px;display:grid;grid-template-columns:280px minmax(0,1fr);gap:16px;border-radius:18px;background:#fff}
.c103-design .c103-field{padding:12px;background:var(--bg);border-radius:12px;min-width:0;display:flex;flex-direction:column;gap:8px}
.c103-design .c103-field label{font-size:11px;line-height:16px;color:var(--muted);font-weight:400;margin:0}
.c103-design .c103-field input,.c103-design .c103-field select{appearance:none;display:block;width:100%;height:21px;background:transparent!important;border:0!important;border-radius:0!important;outline-offset:4px;color:#000!important;padding:0!important;margin:0!important;font-size:14px;line-height:21px}
.c103-design .c103-field select{font-weight:700;cursor:pointer;padding-right:20px!important}
.c103-design .c103-field input::placeholder{opacity:1;color:var(--muted)}
.c103-design .c103-top-title{font-size:28px;line-height:41px}
.c103-design .c103-top-title>span:last-child{display:none}
.c103-design .c103-top{display:grid;grid-template-columns:368fr 352fr 352fr;gap:24px;align-items:start}
.c103-design .c103-card{padding:24px;background:#fff;border-radius:18px;display:grid;grid-template-columns:minmax(0,1fr) 44px;grid-template-rows:64px 37px 21px 44px;gap:12px 16px;min-height:250px}
.c103-design .c103-rank{color:var(--blue);font-family:C103Baloo,sans-serif;font-size:24px;line-height:35px;font-weight:700}
.c103-design .c103-card .c103-rank{grid-column:1/-1;grid-row:1;font-size:44px;line-height:64px}
.c103-design .c103-song{min-width:0}
.c103-design .c103-song h3{font:700 16px/24px C103Jakarta,sans-serif;color:inherit}
.c103-design .c103-song p{font-size:14px;line-height:21px;color:var(--muted);font-weight:400}
.c103-design .c103-card .c103-song{display:contents}
.c103-design .c103-card .c103-song h3{grid-column:1/-1;grid-row:2;font:700 25px/37px C103Baloo,sans-serif}
.c103-design .c103-card .c103-song p{grid-column:1/-1;grid-row:3}
.c103-design .c103-count{font-size:16px;line-height:24px;font-weight:700;white-space:nowrap}
.c103-design .c103-card .c103-count{grid-column:1;grid-row:4;align-self:center;font-size:14px;line-height:21px}
.c103-design .c103-preview{position:relative;display:grid;place-items:center;float:none;width:44px;height:44px;padding:0;margin:0;border:0;border-radius:12px;color:#000;background:var(--bg)!important;background-image:none!important;font-size:0;overflow:hidden}
.c103-design .c103-preview::before{content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:20px;height:20px;background:url(play.svg) center/20px 20px no-repeat;pointer-events:none}
.c103-design .c103-preview.is-playing::before{content:'';background-image:linear-gradient(to right,#000 0 3px,transparent 3px 7px,#000 7px 10px);background-position:center;background-size:10px 12px;background-repeat:no-repeat}
.c103-design .c103-preview:disabled{opacity:.5;cursor:wait}
.c103-design .c103-card .c103-preview{grid-column:2;grid-row:4}
.c103-design .c103-card--1{background:var(--blue);color:#fff;grid-template-rows:120px 41px 19px 44px;gap:16px;min-height:320px}
.c103-design .c103-card--1 .c103-rank{grid-column:1;align-self:center;color:var(--yellow);font-size:56px;line-height:82px}
.c103-design .c103-cover-slot{width:120px;height:120px;grid-column:2;grid-row:1;justify-self:end}
.c103-design .c103-cover-slot img{width:120px;height:120px;object-fit:cover;display:block}
.c103-design .c103-card:not(.c103-card--1) .c103-rank{grid-column:1;padding-right:72px}
.c103-design .c103-card:not(.c103-card--1) .c103-cover-slot,
.c103-design .c103-card:not(.c103-card--1) .c103-cover-slot img{width:64px;height:64px}
.c103-design .c103-card--1 .c103-song h3{font-size:28px;line-height:41px}
.c103-design .c103-card--1 .c103-song p{font-size:13px;line-height:19px;color:#fff}
.c103-design .c103-card--1 .c103-count{font-size:15px;line-height:22px}
.c103-design .c103-continue{font-size:26px;line-height:38px}
.c103-design .c103-help{font-size:12px;line-height:18px;color:var(--muted)}
.c103-design .c103-columns{height:50px;display:grid;grid-template-columns:28px minmax(0,700fr) 176fr 148fr;gap:12px;padding:16px;font-size:12px;line-height:18px;color:var(--muted)}
.c103-design .c103-columns span:last-child{text-align:right}
.c103-design .c103-list{display:flex;flex-direction:column;gap:8px}
.c103-design .c103-list .c103-row{display:grid;grid-template-columns:40px minmax(0,688fr) 176fr 44px 92fr;gap:12px;padding:16px;background:#fff;border-radius:12px;align-items:center;min-height:85px}
.c103-design .c103-list .c103-song{display:flex;flex-direction:column;gap:8px}
.c103-design .c103-list .c103-count{text-align:right}
.c103-design .c103-list .c103-count>span{display:none}
.c103-design .c103-more{width:100%;height:53px;border:0;border-radius:12px;background:#fff;color:var(--blue);padding:16px;font-size:14px;line-height:21px;font-weight:700;margin:0}
.c103-design .c103-source{font-size:11px;line-height:16px;color:var(--muted)}
.c103-design .c103-footer{background:#000;color:#fff;padding:40px 0}
.c103-design .c103-footer .c103-container{display:flex;flex-direction:column;gap:16px}
.c103-design .c103-footer h2{font-size:24px;line-height:35px;color:#fff}
.c103-design .c103-footer p{font-size:13px;line-height:19px}
.c103-design .c103-footer p:last-child{font-size:11px;line-height:16px}
.c103-design .c103-status,.c103-skip{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.c103-skip:focus{position:fixed;z-index:100000;width:auto;height:auto;clip-path:none;background:white;padding:12px;top:0;left:0}
@media(max-width:1100px) and (min-width:701px){.c103-design .c103-nav .c103-container{justify-content:space-between;gap:12px}.c103-design .c103-nav a{width:auto!important}.c103-design .c103-pattern-desktop{left:auto;right:-12px}.c103-design .c103-card{padding:18px}.c103-design .c103-card .c103-song h3{font-size:22px}.c103-design .c103-card .c103-song p{font-size:12px;overflow-wrap:anywhere}.c103-design .c103-cover-slot,.c103-design .c103-cover-slot img{width:100px;height:100px}}
body.fm103-figma-page .c103-design>.c103-header,body.fm103-figma-page .c103-design>.c103-nav,body.fm103-figma-page .c103-design>.c103-footer{display:none!important}
@media(max-width:700px){
 .c103-design .c103-container{width:calc(100% - 24px)}
 .c103-design .c103-header{padding:8px 0}
 .c103-design .c103-header .c103-container{gap:16px;height:36px;padding-right:6px}
 .c103-design .c103-logo{flex-basis:58px;height:35px}
 .c103-design .c103-logo img{width:58px;height:35px}
 .c103-design .c103-brand{flex:1;font-size:12px;line-height:17px}
 .c103-design .c103-brand span,.c103-design .c103-live-text,.c103-design .c103-nav{display:none}
 .c103-design .c103-live{flex:0 0 44px;width:44px;height:36px;padding:8px;font-size:13px;line-height:20px;border-radius:12px}
 .c103-design .c103-hero{padding:24px 0;min-height:134.5px;display:flex;align-items:center}
 .c103-design .c103-hero .c103-container{gap:0}
 .c103-design .c103-eyebrow,.c103-design .c103-tagline,.c103-design .c103-pattern-desktop{display:none}
 .c103-design .c103-hero h1{font-size:28px;line-height:38px;padding-right:64px}
 .c103-design .c103-period{font-size:12px;line-height:17px}
 .c103-design .c103-pattern-mobile{display:block;position:absolute;right:4px;top:2px;width:38px;height:40px;max-width:none}
 .c103-design .c103-main{padding:12px 0}
 .c103-design .c103-main>.c103-container{gap:8px}
 .c103-design .c103-filters{padding:0;grid-template-columns:1fr;gap:8px;border-radius:0}
 .c103-design .c103-field{padding:8px;gap:0;height:34px}
 .c103-design .c103-field label{position:absolute;clip-path:inset(50%);width:1px;height:1px;overflow:hidden}
 .c103-design .c103-field input,.c103-design .c103-field select{height:18px;font-size:13px;line-height:18px}
 .c103-design .c103-top-title{font-size:18px;line-height:25px}
 .c103-design .c103-top-title>span:first-child{display:none}
 .c103-design .c103-top-title>span:last-child{display:inline}
 .c103-design .c103-top{display:flex;flex-direction:column;gap:0}
 .c103-design .c103-cover-slot,.c103-design .c103-continue,.c103-design .c103-help,.c103-design .c103-columns{display:none}
 .c103-design .c103-list{gap:0}
 .c103-design .c103-card,.c103-design .c103-list .c103-row{display:grid;grid-template-columns:28px minmax(0,1fr) 44px 0;grid-template-rows:19px 17px 17px;gap:0 8px;padding:4px 8px;min-height:61px;height:auto;border-radius:0;background:#fff;color:#000;width:100%;align-items:center}
 .c103-design .c103-top .c103-card{background:var(--bg);grid-template-rows:19px 17px 15px;min-height:59px}
 .c103-design .c103-row .c103-rank{grid-column:1;grid-row:1/4;font-size:16px;line-height:22px;color:var(--blue);align-self:center}
 .c103-design .c103-card:not(.c103-card--1) .c103-rank{grid-column:1;padding-right:0}
 .c103-design .c103-row .c103-song{display:contents}
 .c103-design .c103-row .c103-song h3{grid-column:2;grid-row:1;font:700 14px/19px C103Jakarta,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .c103-design .c103-row .c103-song p{grid-column:2;grid-row:2;font-size:12px;line-height:17px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .c103-design .c103-row .c103-count{grid-column:2;grid-row:3;font-size:12px;line-height:17px;color:var(--muted);font-weight:400;text-align:left}
 .c103-design .c103-top .c103-card .c103-count{font-size:11px;line-height:15px}
 .c103-design .c103-row .c103-count>span{display:inline}
 .c103-design .c103-row .c103-preview{grid-column:3;grid-row:1/4;background:transparent!important;align-self:center}
 .c103-design .c103-preview::before{width:18px;height:18px;background-size:18px 18px}
 .c103-design .c103-more{height:34px;padding:8px;font-size:13px;line-height:18px}
 .c103-design .c103-source{font-size:11px;line-height:15px}
 .c103-design .c103-footer{padding:12px 0}
 .c103-design .c103-footer h2{font-size:18px;line-height:25px}
 .c103-design .c103-footer p{font-size:12px;line-height:17px}
 .c103-design .c103-footer p:last-child{font-size:10px;line-height:14px}
}

/* Responsividade 2026-10-08: limites por componente, não escala global. */
.c103-design .c103-container { width: min(var(--fm103-content-max, 1440px), calc(100% - 2 * var(--fm103-gutter, 32px))); margin-inline: auto; }
.c103-design .c103-hero h1 { font-size: clamp(30px, 3.34vw, 48px); line-height: 1.15; }
.c103-design .c103-hero :is(h1,.c103-tagline,.c103-period) { padding-right: 100px; }
.c103-design .c103-pattern-desktop { left: auto; right: 0; }
.c103-design .c103-filters { grid-template-columns: minmax(180px, 280px) minmax(0, 1fr); }
.c103-design .c103-top { grid-template-columns: minmax(0, 368fr) repeat(2, minmax(0, 352fr)); }
.c103-design .c103-card { min-width: 0; padding: clamp(16px, 1.67vw, 24px); grid-template-rows: 64px auto auto minmax(44px, auto); }
.c103-design .c103-card--1 { grid-template-rows: clamp(80px, 8.34vw, 120px) auto auto minmax(44px, auto); }
.c103-design .c103-card .c103-song :is(h3,p) { overflow-wrap: anywhere; }
.c103-design .c103-card .c103-song h3 { font-size: clamp(22px, 1.74vw, 25px); line-height: 1.3; }
.c103-design .c103-card--1 .c103-song h3 { font-size: clamp(24px, 1.95vw, 28px); }
.c103-design .c103-card--1 .c103-cover-slot,
.c103-design .c103-card--1 .c103-cover-slot img { width: clamp(80px, 8.34vw, 120px); height: clamp(80px, 8.34vw, 120px); }
.c103-design .c103-list .c103-row { grid-template-columns: 40px minmax(0, 1fr) minmax(100px, .25fr) 44px minmax(0, .12fr); }
.c103-design .c103-nav .c103-container { gap: clamp(12px, 2vw, 32px); flex-wrap: wrap; }
.c103-design .c103-nav a { width: auto!important; }
@media (max-width: 900px) and (min-width: 701px) {
  .c103-design .c103-top { gap: 16px; }
  .c103-design .c103-card { padding: 12px; gap: 12px; }
  .c103-design .c103-card--1 .c103-cover-slot,
  .c103-design .c103-card--1 .c103-cover-slot img { width: 80px; height: 80px; }
  .c103-design .c103-card--1 { grid-template-rows: 80px auto auto minmax(44px, auto); }
  .c103-design .c103-card .c103-count { white-space: normal; overflow-wrap: anywhere; }
}
@media (max-width: 700px) {
  .c103-design .c103-filters { grid-template-columns: minmax(0, 1fr); }
  .c103-design .c103-card, .c103-design .c103-list .c103-row { grid-template-columns: 28px minmax(0, 1fr) 44px 0; grid-template-rows: auto auto auto; padding: 8px; }
  .c103-design .c103-card .c103-song h3 { font-size: 14px; line-height: 19px; }
  .c103-design .c103-hero h1 { font-size: 28px; padding-right: 64px; }
  .c103-design .c103-period { padding-right: 48px; }
  .c103-design .c103-preview::before { width: 20px; height: 20px; background-size: 20px 20px; }
}