.front-office-page {
  --fo-cyan: #24e4e6;
  --fo-blue: #173ce8;
  --fo-line: rgba(129, 167, 196, .22);
  color: #f7fafc;
  min-height: calc(100vh - 112px);
  background:
    radial-gradient(circle at 9% 43%, rgba(0, 212, 220, .055), transparent 24%),
    radial-gradient(circle at 91% 22%, rgba(30, 64, 255, .075), transparent 27%),
    #01050a;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.front-office-page * { box-sizing: border-box; }
.front-office-page button { font: inherit; }
.front-office-layout { display: grid; grid-template-columns: minmax(0, 1.38fr) minmax(470px, 1fr); min-height: calc(100vh - 112px); }
.front-office-left { min-width: 0; border-right: 1px solid var(--fo-line); }
.front-office-hero { position: relative; min-height: 540px; overflow: hidden; background: #02070d; }
.front-office-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 34%, rgba(1, 5, 10, .32) 55%, #01050a 100%), linear-gradient(90deg, rgba(1, 5, 10, .1), transparent 60%); pointer-events: none; }
.front-office-hero-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 63% center; }
.front-office-hero-copy { position: absolute; z-index: 1; left: clamp(28px, 4vw, 64px); right: clamp(28px, 3vw, 50px); bottom: 26px; }
.front-office-hero-copy > span, .front-office-more-label { display: block; color: var(--fo-cyan); font-size: 15px; font-weight: 700; letter-spacing: .055em; text-transform: uppercase; }
.front-office-hero-copy h1 { margin: 7px 0 3px; font-size: clamp(50px, 4.25vw, 70px); line-height: .98; font-weight: 800; letter-spacing: -.045em; }
.front-office-hero-copy > p { margin: 12px 0 20px; color: rgba(255,255,255,.78); font-size: 17px; }
.front-office-primary-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 660px; }
.front-office-primary-actions button { min-height: 60px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; border: 1px solid rgba(92,255,247,.52); border-radius: 11px; background: var(--fo-cyan); color: #001012; font-size: 16px; font-weight: 800; line-height: 1; letter-spacing: .015em; text-transform: uppercase; cursor: pointer; }
.front-office-primary-actions button:nth-child(2) { border-color: rgba(79,96,255,.7); background: linear-gradient(135deg, #111ec2, #0a24dd); color: white; }
.front-office-primary-actions button, .front-office-quick-actions button, .front-office-pick > button { transition: transform .18s ease, filter .18s ease, border-color .18s ease; }
.front-office-primary-actions button:hover, .front-office-quick-actions button:hover, .front-office-pick > button:hover { filter: brightness(1.09); transform: translateY(-1px); }
.front-office-primary-actions button:active, .front-office-quick-actions button:active, .front-office-pick > button:active { transform: translateY(0); }
.front-office-primary-actions i { flex: 0 0 auto; width: 24px; height: 24px; margin: 0; }
.front-office-more-label { margin: 23px 0 11px; }
.front-office-quick-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.front-office-quick-actions button { min-width: 0; min-height: 76px; display: flex; gap: 13px; align-items: center; padding: 13px 15px; border: 1px solid rgba(132,164,191,.18); border-radius: 7px; background: rgba(20,27,34,.94); color: white; text-align: left; cursor: pointer; }
.front-office-quick-actions i { flex: 0 0 auto; width: 28px; height: 28px; color: var(--fo-cyan); }
.front-office-quick-actions span { min-width: 0; display: grid; gap: 3px; }
.front-office-quick-actions b { overflow: hidden; font-size: 15px; white-space: nowrap; text-overflow: ellipsis; }
.front-office-quick-actions small { color: rgba(255,255,255,.66); font-size: 13px; }
.front-office-roster { margin: 0 20px 20px; padding: 22px 18px 18px; border: 1px solid rgba(99,141,190,.27); border-top-color: rgba(61,220,228,.34); border-radius: 10px; background: radial-gradient(circle at 50% 115%, rgba(16,50,178,.42), transparent 58%), linear-gradient(135deg, rgba(4,17,29,.96), rgba(2,7,16,.98)); box-shadow: inset 0 1px rgba(255,255,255,.025), 0 18px 46px rgba(0,0,0,.22); }
.front-office-roster header { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 15px; }
.front-office-roster h2 { margin: 0; font-size: 19px; letter-spacing: .015em; text-transform: uppercase; }
.front-office-roster header span { color: var(--fo-cyan); font-size: 12px; }
.front-office-roster-track { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 9px; }
.front-office-agent-card { position: relative; min-width: 0; min-height: 250px; overflow: hidden; border: 1px solid rgba(151,178,203,.27); border-radius: 9px; background: #07111c; }
.front-office-agent-card::after { content: ""; position: absolute; inset: 42% 0 0; background: linear-gradient(transparent, rgba(2,7,13,.92) 37%, #02070d 68%); pointer-events: none; }
.front-office-agent-card > img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.front-office-agent-online { position: absolute; z-index: 2; top: 10px; left: 10px; display: flex; gap: 5px; align-items: center; color: rgba(255,255,255,.85); font-size: 8px; font-weight: 700; text-transform: uppercase; }
.front-office-agent-online i { width: 7px; height: 7px; border-radius: 50%; background: #12e75e; box-shadow: 0 0 10px rgba(18,231,94,.7); }
.front-office-agent-copy { position: absolute; z-index: 2; inset: auto 12px 12px; display: grid; gap: 3px; }
.front-office-agent-copy > strong { font-size: 19px; }
.front-office-agent-copy > span { color: rgba(255,255,255,.76); font-size: 12px; }
.front-office-agent-copy > small { display: flex; gap: 7px; align-items: center; margin-top: 6px; color: rgba(255,255,255,.8); font-size: 12px; }
.front-office-agent-copy > small b { display: grid; place-items: center; width: 18px; height: 18px; border: 1px solid rgba(255,255,255,.28); border-radius: 4px; color: var(--fo-cyan); font-size: 10px; }
.front-office-agent-copy footer { display: grid; gap: 5px; margin-top: 7px; }
.front-office-agent-copy footer em { color: rgba(255,255,255,.68); font-size: 11px; font-style: normal; }
.front-office-agent-copy footer > i { height: 4px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.13); }
.front-office-agent-copy footer > i b { display: block; width: var(--agent-usage); height: 100%; border-radius: inherit; background: var(--fo-cyan); box-shadow: 0 0 8px rgba(36,228,230,.38); }
.front-office-right { min-width: 0; padding: 20px 22px; display: grid; align-content: start; gap: 12px; background: #01050a; }
.front-office-metrics, .front-office-stars, .front-office-pick { position: relative; overflow: hidden; border: 1px solid var(--fo-line); border-top-color: rgba(73,204,220,.3); border-radius: 11px; background: linear-gradient(145deg, rgba(7,18,29,.985), rgba(2,8,14,.985)); box-shadow: inset 0 1px rgba(255,255,255,.025), 0 18px 48px rgba(0,0,0,.2); }
.front-office-metrics::before, .front-office-stars::before, .front-office-pick::before { content: ""; position: absolute; top: 0; left: 18px; width: 82px; height: 1px; background: linear-gradient(90deg, var(--fo-cyan), transparent); opacity: .78; }
.front-office-metrics { padding: 17px; }
.front-office-metrics > header { display: flex; align-items: center; gap: 8px; margin-bottom: 13px; color: rgba(255,255,255,.78); font-size: 15px; }
.front-office-metrics > header i { width: 19px; color: var(--fo-cyan); }
.front-office-metric-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.front-office-metric-grid article { min-width: 0; min-height: 122px; padding: 15px; border: 1px solid rgba(133,171,198,.21); border-radius: 7px; background: rgba(3,9,15,.78); }
.front-office-metric-grid article > span { color: var(--fo-cyan); font-size: 12px; font-weight: 700; letter-spacing: .025em; text-transform: uppercase; }
.front-office-metric-grid article > div { min-height: 50px; display: flex; align-items: center; justify-content: space-between; gap: 9px; }
.front-office-metric-grid article strong { font-size: clamp(25px, 2.1vw, 34px); letter-spacing: -.035em; }
.front-office-metric-grid article em { padding: 5px 8px; border: 1px solid rgba(255,255,255,.2); border-radius: 7px; color: rgba(255,255,255,.76); font-size: 11px; font-style: normal; }
.front-office-metric-grid article em.positive { border-color: rgba(27,226,64,.32); background: rgba(12,120,25,.2); color: #24ef51; font-size: 13px; font-weight: 700; }
.front-office-metric-grid article small { color: rgba(255,255,255,.55); font-size: 11px; }
.front-office-metric-grid article small b { margin-left: 10px; color: #25e950; }
.front-office-bars { height: 40px; display: flex; align-items: end; gap: 4px; }
.front-office-bars b { width: 5px; height: 35%; background: rgba(36,228,230,.45); }.front-office-bars b:nth-child(2){height:65%}.front-office-bars b:nth-child(3){height:90%}.front-office-bars b:nth-child(4){height:55%}.front-office-bars b:nth-child(5){height:72%}.front-office-bars b:nth-child(6){height:48%}.front-office-bars b:nth-child(7){height:80%}
.front-office-ring, .front-office-star-ring { --ring: 55%; position: relative; display: grid; place-items: center; width: 56px; aspect-ratio: 1; border-radius: 50%; background: conic-gradient(var(--fo-cyan) var(--ring), rgba(35,98,112,.4) 0); }
.front-office-ring::after, .front-office-star-ring::after { content: ""; position: absolute; inset: 7px; border-radius: inherit; background: #061019; }
.front-office-ring b, .front-office-star-ring b { z-index: 1; font-size: 11px; }
.front-office-stars { padding: 14px; }
.front-office-stars > header { display: flex; align-items: center; gap: 7px; }
.front-office-stars h2 { margin: 0; font-size: 17px; letter-spacing: .02em; text-transform: uppercase; }
.front-office-stars > header button { width: 24px; height: 24px; border: 0; background: transparent; color: rgba(255,255,255,.78); }.front-office-stars > header i{width:16px}
.front-office-stars > p { margin: 4px 0 12px; color: rgba(255,255,255,.58); font-size: 11px; }
.front-office-star-grid { display: grid; grid-template-columns: 1fr 1.12fr 1fr; border: 1px solid rgba(132,169,198,.2); border-radius: 8px; overflow: hidden; }
.front-office-star-grid article { min-width: 0; padding: 14px 12px; display: grid; align-content: start; gap: 8px; text-align: center; }
.front-office-star-grid article + article { border-left: 1px solid rgba(132,169,198,.2); }
.front-office-star-grid article > span { color: var(--fo-cyan); font-size: 11px; font-weight: 700; text-transform: uppercase; }
.front-office-star-grid .rewards > span { color: #f3b83f; }
.front-office-star-grid article > strong { display: flex; justify-content: center; align-items: center; gap: 9px; font-size: 35px; }.front-office-star-grid article > strong i{width:32px;height:32px;color:var(--fo-cyan)}
.front-office-star-grid .rewards > strong i { color: #f3b83f; }
.front-office-star-grid article > small { min-height: 30px; color: rgba(255,255,255,.66); font-size: 11px; }.front-office-star-grid article > small b{color:#f3b83f}
.front-office-star-grid article > button { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid rgba(255,255,255,.18); border-radius: 7px; background: #03070b; color: white; font-weight: 800; line-height: 1; text-transform: uppercase; cursor:pointer; }
.front-office-star-grid .playable > button { border-color: transparent; background: var(--fo-cyan); color: #001012; }.front-office-star-grid button i{flex:0 0 auto;width:18px;height:18px;margin:0}
.front-office-star-grid .rewards > button { border-color: rgba(255, 206, 91, .78); background: linear-gradient(135deg, #ffd66f, #efa925); color: #231500; box-shadow: 0 8px 22px rgba(239,169,37,.16); }
.front-office-star-grid .next { place-items: center; }.front-office-star-ring{--ring:72%;width:86px;background:conic-gradient(#2c77ff,var(--fo-cyan) var(--ring),rgba(35,98,112,.35) 0)}.front-office-star-ring::after{inset:9px}.front-office-star-ring b{font-size:22px}.front-office-star-grid .next>strong{font-size:12px}.front-office-star-grid .next>small{min-height:0;color:#4da9ff}
.front-office-pick { padding: 15px 15px 14px; }
.front-office-pick > span { color: var(--fo-cyan); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.front-office-pick-body { display: grid; grid-template-columns: 31% 1fr; gap: 16px; margin-top: 10px; }
.front-office-pick-body > img { width: 100%; height: 205px; object-fit: cover; object-position: center 18%; border: 1px solid rgba(130,169,198,.24); border-radius: 8px; }
.front-office-pick-body h2 { margin: 3px 0 5px; font-size: 24px; }.front-office-pick-body p{margin:0;color:rgba(255,255,255,.64);font-size:12px}.front-office-pick-body p b{display:inline-grid;place-items:center;width:20px;height:20px;margin-right:5px;border-radius:50%;background:#1679da;color:white}.front-office-pick-body p i{display:inline-block;width:3px;height:3px;margin:0 6px;border-radius:50%;background:rgba(255,255,255,.5)}
.front-office-pick-body div > small { display: block; margin-top: 16px; color: rgba(255,255,255,.58); font-size: 10px; text-transform: uppercase; }
.front-office-pick-body div > strong { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 29px; }.front-office-pick-body strong em{padding:4px 7px;border:1px solid rgba(255,255,255,.18);border-radius:7px;color:rgba(255,255,255,.7);font-size:10px;font-style:normal}.front-office-pick-body strong b{padding:5px 8px;border:1px solid rgba(33,226,73,.35);border-radius:99px;background:rgba(10,124,35,.18);color:#25e951;font-size:12px}
.front-office-pick-body h3 { margin: 13px 0 3px; font-size: 12px; }
.front-office-pick > button { width: 100%; min-height: 45px; margin-top: 11px; display: flex; align-items: center; justify-content: center; gap: 12px; border: 1px solid #2e50ff; border-radius: 7px; background: linear-gradient(90deg,#0d25bb,#0d32ed); color: white; font-weight: 800; text-transform: uppercase; cursor: pointer; }.front-office-pick>button i{width:18px}
@media (max-width: 1200px) {
  .front-office-layout { grid-template-columns: minmax(0, 1.12fr) minmax(420px, .88fr); }
  .front-office-roster-track { grid-template-columns: repeat(3, minmax(0, 1fr)); }.front-office-agent-card{min-height:260px}.front-office-agent-card:nth-child(n+4){display:none}
  .front-office-pick-body > img { height: 180px; }.front-office-hero{min-height:570px}
}
@media (max-width: 820px) {
  body:has(.front-office-page) .premium-market-ribbon { display: none; }
  .front-office-page { min-height: 100vh; }
  .front-office-layout { display: block; }
  .front-office-left { border: 0; }
  .front-office-hero { min-height: 650px; }
  .front-office-hero-art { height: 370px; object-position: 63% center; }
  .front-office-hero::after { background: linear-gradient(180deg, transparent 18%, rgba(1,5,10,.12) 33%, #01050a 57%); }
  .front-office-hero-copy { left: 18px; right: 18px; bottom: 12px; }
  .front-office-hero-copy h1 { font-size: 43px; }
  .front-office-hero-copy > p { font-size: 15px; }
  .front-office-primary-actions { gap: 9px; }.front-office-primary-actions button{min-height:54px;font-size:13px;gap:8px}.front-office-primary-actions i{width:20px;height:20px;margin:0}
  .front-office-quick-actions { overflow-x: auto; grid-template-columns: repeat(3, minmax(190px, 1fr)); margin-right: -18px; padding-right: 18px; scrollbar-width: none; }.front-office-quick-actions::-webkit-scrollbar{display:none}
  .front-office-roster { margin: 8px 0 13px; padding: 18px 0 18px 18px; border-left: 0; border-right: 0; border-radius: 0; }
  .front-office-roster { position: relative; }
  .front-office-roster::after { content: ""; position: absolute; z-index: 4; top: 54px; right: 0; bottom: 18px; width: 28px; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(2,10,23,.92)); }
  .front-office-roster header { padding-right: 18px; }.front-office-roster h2{font-size:17px}
  .front-office-roster-track { overflow-x: auto; display: flex; gap: 10px; padding-right: 18px; scroll-snap-type: x mandatory; scrollbar-width:none}.front-office-roster-track::-webkit-scrollbar{display:none}
  .front-office-agent-card, .front-office-agent-card:nth-child(n+4) { display: block; flex: 0 0 162px; min-height: 260px; scroll-snap-align: start; }
  .front-office-right { padding: 0 12px 30px; gap: 11px; }
  .front-office-metrics { padding: 13px; }.front-office-metric-grid article{min-height:112px;padding:12px}.front-office-metric-grid article strong{font-size:27px}.front-office-metric-grid article>span{line-height:1.2;min-height:24px;display:block}
  .front-office-star-grid { display: grid; grid-template-columns: 1fr 1fr; }.front-office-star-grid .next{grid-column:1/-1;grid-row:1;border-left:0;border-bottom:1px solid rgba(132,169,198,.2);grid-template-columns:auto 1fr;grid-template-rows:auto auto auto;column-gap:15px;text-align:left}.front-office-star-grid .next>span{grid-column:2}.front-office-star-ring{grid-row:1/4}.front-office-star-grid .next>strong,.front-office-star-grid .next>small{justify-self:start}.front-office-star-grid .rewards{border-left:1px solid rgba(132,169,198,.2)}
  .front-office-pick-body { grid-template-columns: 38% 1fr; }.front-office-pick-body>img{height:220px}.front-office-pick-body div>strong{flex-wrap:wrap;font-size:25px}
}
@media (max-width: 480px) {
  .front-office-hero { min-height: 675px; }.front-office-hero-art{height:350px;object-position:67% center}.front-office-hero-copy h1{font-size:40px}.front-office-hero-copy>span{font-size:12px}
  .front-office-primary-actions { grid-template-columns: 1fr; }.front-office-primary-actions button{min-height:49px}
  .front-office-more-label { margin-top: 17px; }.front-office-quick-actions button{min-height:69px}
  .front-office-metrics>header span{font-size:13px}.front-office-metric-grid{gap:7px}.front-office-metric-grid article{min-height:105px}.front-office-metric-grid article>span{font-size:10px}.front-office-metric-grid article strong{font-size:23px}.front-office-bars{display:none}.front-office-ring{width:46px}
  .front-office-stars h2{font-size:15px}.front-office-star-grid article{padding:12px 8px}.front-office-star-grid article>strong{font-size:30px}.front-office-star-grid article>span{font-size:9px}
  .front-office-pick-body{grid-template-columns: 1fr}.front-office-pick-body>img{height:260px;object-position:center 22%}.front-office-pick-body h2{font-size:25px}
}