/* Play v14: presentation only. Existing data, controls and flows are authoritative.
   Emerald is the base; mint actions, champagne rewards, two quiet section accents.
   Continuous motion is limited to two background layers, never fifty badges. */
:root {
  --panel: #142b26; --panel-2: #1c3630;
  --text: #f4f2e9; --muted: #b6c5be; --dim: #9aaea4;
  --cyan: #bee9d6; --cyan-2: #a8d7c6;
  --amber: #e8d1ab; --amber-2: #f0dbb9; --gold: #e8d1ab;
  --line: #38564a; --line-subtle: #2c443a; --line-strong: #587666;
  --play-blue: #b3d4df; --play-lavender: #c6bcdf;
}
body.premium-v7 .app-shell[data-view] {
  --ambient-primary: 190,233,214;
  --ambient-secondary: 179,212,223;
  --ambient-warm: 232,209,171;
  background: #091713;
}
body.premium-v7 .app-shell:is([data-view=rating],[data-view=bonuses]) { --ambient-secondary: 198,188,223; }
body.premium-v7 .ambient-world {
  background: radial-gradient(ellipse at 90% 4%,#315c5438,transparent 64%),
    radial-gradient(ellipse at 4% 82%,#233e5930,transparent 58%),#091713;
}
body.premium-v7 .ambient-world::after { background: linear-gradient(180deg,#09171300,#09171355); }
body.premium-v7 .ambient-depth { opacity: .8; mask-image: none; overflow: hidden; }
body.premium-v7 .ambient-depth::before,
body.premium-v7 .ambient-depth::after {
  content: ''; position: absolute; width: min(90vw,720px); aspect-ratio: 1;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(ellipse,rgba(var(--ambient-primary),.13),transparent 68%);
  animation: play-tide 24s ease-in-out infinite alternate;
}
body.premium-v7 .ambient-depth::before { top: -12%; right: -28%; }
body.premium-v7 .ambient-depth::after {
  bottom: -20%; left: -30%; animation-duration: 31s; animation-direction: alternate-reverse;
  background: radial-gradient(ellipse,rgba(var(--ambient-secondary),.11),transparent 68%);
}
body.premium-v7 .ambient-aurora { display: none; }
body.premium-v7 :is(.ambient-beacon,.ambient-beacon::after,.ambient-scan,.sigil-orbit) { animation: none!important; }
body.premium-v7 .ambient-sigil { opacity: .12; }
body.premium-v7 .ambient-grid { opacity: .08; }
body.premium-v7 .ambient-constellation { opacity: .14; }
@keyframes play-tide { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(-20px,16px,0) scale(1.06); } }

/* A separate image for each purpose, with a dark text-safe side. */
body.premium-v7 .bonus-title-hero { --editorial-art: url('assets/radar-play-v14-bonuses.webp'); }
body.premium-v7 .my-title-hero { --editorial-art: url('assets/radar-play-v14-workspace.webp'); }
body.premium-v7 .premium-title {
  border-color: #547066; background-position: center;
  background-image: linear-gradient(90deg,#0b211cee 0%,#0b211ca8 48%,#0b211c18 100%),var(--editorial-art);
}
body.premium-v7 .premium-title p { color: #d5e1da; font-size: 14px; }
body.premium-v7 :is(.premium-title,.radar-hero) h1 { text-wrap: balance; }
body.premium-v7 .feed-hero-shell { border-color: #547066; }
body.premium-v7 :is(.empty-state,.my-empty-state,.pr-empty) {
  position: relative; isolation: isolate; overflow: hidden; border-radius: 20px;
  border: 1px solid var(--line); background: #10261f;
  color: var(--muted); line-height: 1.6;
}
body.premium-v7 :is(.empty-state,.my-empty-state,.pr-empty)::before {
  content: ''; display: block; height: 120px; width: 100%; margin-bottom: 18px;
  border-radius: 14px;
  background: linear-gradient(0deg,#10261f,transparent 65%),url('assets/radar-play-v14-discovery.webp') 70% center/cover;
}
body.premium-v7 .my-empty-state { display: flex; flex-direction: column; align-items: center; }
body.premium-v7 .my-empty-state>span { display: none; }
body.premium-v7 :is(.empty-state,.my-empty-state,.pr-empty) :is(h2,h3,b) { color: var(--text); }
body.premium-v7 :is(.detail-card,.job-card,.filter-panel,.tariff-card,.pr-card,.pr-settings,
  .my-workspace-card,.my-vacancy-card,.reward-card,.mission-card,.achievement-collection) {
  background: linear-gradient(130deg,#1c3530,#122820); border-color: var(--line);
  box-shadow: inset 0 1px #f4f2e906,0 8px 24px #00000018;
}
body.premium-v7 .job-card.hot { border-color: #a38d66; }
body.premium-v7 :is(.job-card,.my-vacancy-card) { transition: border-color .18s ease,transform .18s ease; }
body.premium-v7 :is(.my-workspace-tabs,.profile-quick-nav) { gap: 8px; }
body.premium-v7 .my-workspace-tabs button { min-height: 44px; padding-inline: 12px; }
body.premium-v7 .work-route-steps button { min-height: 64px; grid-template-columns: 36px minmax(0,1fr) auto 18px; }
body.premium-v7 .work-route-steps button>span {
  width: 36px; height: 36px; display: grid; place-items: center;
  border: 1px solid #e8d1ab48; background: #e8d1ab12; color: var(--gold);
  font-size: 15px; font-variant-numeric: tabular-nums; line-height: 1;
}
body.premium-v7 :is(.work-route-steps small,.job-card .tiny-label,.metric-grid small,
  .my-vacancy-status,.status-pill,.ticket) { font-size: 11px; line-height: 1.4; }
body.premium-v7 :is(.job-card,.detail-card) :is(.original-summary-copy small,.estimate-summary-copy small) { font-size: 12px; }
body.premium-v7 :is(.tag,.ticket,.tag-line span,.pr-chips span) { background: #213c34; color: #d7e4dc; }
body.premium-v7 .bottom-nav { background: #11271ff8; }
body.premium-v7 .bottom-nav button { min-height: 44px; font-size: 11px; }
body.premium-v7 .bottom-nav button.active { color: var(--cyan); background: #bee9d614; transform: none; }
body.premium-v7 .bottom-nav button.active::after { background: var(--cyan); animation: none!important; }
body.premium-v7 :is(.primary-btn,.primary-btn.amber,.open-card-btn,.pr-primary),
body.premium-v7 .job-card:is(.hot,.active) .open-card-btn {
  min-height: 44px; background: linear-gradient(135deg,#f0dbb9,#dec39b);
  border-color: #e8d1ab; color: #202b23;
  box-shadow: inset 0 1px #fff6,0 5px 16px #0002;
  transition: transform .16s ease,box-shadow .16s ease;
}
body.premium-v7 :is(.outline-btn,.ghost-btn,.icon-only,.chip,.toggle-chip) { min-height: 44px; }
body.premium-v7 :is(.outline-btn,.ghost-btn,.icon-only) { border-color: var(--line); background: #1a352b; }
body.premium-v7 :is(.primary-btn,.outline-btn,.ghost-btn,.pr-primary):disabled { transform: none; box-shadow: none; }
body.premium-v7 :is(input,textarea,select):focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

/* Collectible plates use real rarity/unlocked data; locked goals stay unmistakable. */
body.premium-v7 .achievement-card { min-height: 146px; padding: 14px 10px; gap: 7px; background: #142b26; border-radius: 18px; }
body.premium-v7 .achievement-card.rarity-rare { --achievement-rgb: 179,212,223; }
body.premium-v7 .achievement-card.rarity-epic { --achievement-rgb: 198,188,223; }
body.premium-v7 .achievement-card.rarity-legendary { --achievement-rgb: 232,209,171; }
body.premium-v7 .achievement-card.open {
  background: linear-gradient(145deg,rgba(var(--achievement-rgb),.13),#142b26 72%);
  border-color: rgba(var(--achievement-rgb),.55);
}
body.premium-v7 .achievement-card:not(.open) { background: #12251f; border-color: var(--line); }
body.premium-v7 .achievement-card:not(.open) b { color: #b6c5be; }
body.premium-v7 .achievement-card b { font-size: 12px; line-height: 1.3; -webkit-line-clamp: 3; }
body.premium-v7 .achievement-card small { font-size: 11px; line-height: 1.4; }
body.premium-v7 .achievement-card :is(.achievement-rarity,.achievement-state) { font-size: 10px; line-height: 1.3; }
body.premium-v7 .achievement-symbol {
  width: 48px; height: 48px; border-radius: 15px;
  background: linear-gradient(145deg,rgba(var(--achievement-rgb),.24),rgba(var(--achievement-rgb),.07));
  box-shadow: inset 0 1px #ffffff20,0 6px 14px #0002; filter: none;
  transition: transform .22s ease;
}
body.premium-v7 .achievement-symbol::before { inset: -4px; transform: rotate(6deg); }
body.premium-v7 .achievement-symbol::after { box-shadow: none; }
body.premium-v7 .achievement-symbol .ui-icon { width: 28px; height: 28px; }
body.premium-v7 .achievement-progress { width: 100%; height: 4px; margin-top: 4px; background: #091713; border-radius: 4px; overflow: hidden; }
body.premium-v7 .bonus-coin {
  width: 84px; height: 84px; color: var(--gold); border: 1px solid #e8d1ab80;
  background: radial-gradient(circle at 30% 20%,#e8d1ab36,#1c3430 65%);
  box-shadow: inset 0 1px #fff2,0 8px 18px #0003; filter: none; animation: none!important;
}
body.premium-v7 .bonus-coin::before { border-color: #e8d1ab40; box-shadow: none; }
body.premium-v7 .bonus-coin .ui-icon { filter: none; }
body.premium-v7 :is(.league-card,.league-current) { border-color: #516858; }
body.premium-v7 .league-card::after { opacity: .18; filter: none; }
@media (hover:hover) {
  body.premium-v7 :is(.job-card,.my-vacancy-card):hover { transform: translateY(-2px); border-color: #7a9b89; }
  body.premium-v7 .achievement-card.open:hover .achievement-symbol { transform: translateY(-3px) rotate(-4deg); }
  body.premium-v7 :is(.primary-btn,.open-card-btn,.pr-primary):not(:disabled):hover { box-shadow: inset 0 1px #fff6,0 7px 20px #0003; }
}
@media (min-width:900px) {
  body.premium-v7 .premium-title p { max-width: 52%; }
  body.premium-v7 :is(.empty-state,.my-empty-state,.pr-empty)::before { height: 160px; }
}
@media (max-width:520px) {
  body.premium-v7 .premium-title { background-position: 62% center; padding: 20px; }
  body.premium-v7 .premium-title p { max-width: 86%; font-size: 13px; }
  body.premium-v7 .achievement-card { padding: 12px 7px; min-height: 150px; }
  body.premium-v7 .work-route-steps button { grid-template-columns: 36px minmax(0,1fr) 18px; gap: 9px; }
  body.premium-v7 .work-route-steps button>small { grid-column: 2; grid-row: 2; }
  body.premium-v7 .work-route-steps button>svg { grid-column: 3; grid-row: 1 / 3; }
}
@media (prefers-reduced-motion:reduce) {
  body.premium-v7 *,body.premium-v7 *::before,body.premium-v7 *::after { animation: none!important; transition: none!important; scroll-behavior: auto!important; }
}
/* V15: the separately paid workspace adds one slot, never an empty column. */
body.premium-v7 #bottom-nav {
  grid-template-columns: repeat(var(--radar-nav-count, 5), minmax(0, 1fr));
}
body.premium-v7 #bottom-nav button[hidden] { display: none !important; }

/* V16: readable existing reviews, independent from the write-review gate. */
.customer-review-pill[data-action="show-customer-reviews"] {
  min-height: 44px; cursor: pointer; color: inherit; font: inherit;
}
.customer-reviews { margin-top: 18px; padding-top: 18px; border-top: 1px solid #c8edda26; scroll-margin-top: 16px; }
.customer-reviews h4 { display:flex; align-items:center; gap:10px; margin:0 0 14px; font-size:16px; }
.customer-reviews h4 span { border-radius:20px; padding:3px 9px; background:#c8edda14; font-size:12px; }
.customer-reviews-list { display:grid; gap:10px; min-width:0; }
.customer-review-item { min-width:0; padding:14px; border:1px solid #c8edda26; border-radius:16px; background:#10271dcc; }
.customer-review-item header { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; }
.customer-review-item header b { flex:1 1 110px; min-width:0; overflow-wrap:anywhere; font-size:14px; }
.customer-review-score { color:#d9c88e; font-size:13px; white-space:nowrap; }
.customer-review-item header small { color:#b7c9bf; font-size:12px; }
.customer-review-item p { margin:10px 0 0; color:#e3ece6; line-height:1.55; font-size:14px; white-space:pre-wrap; overflow-wrap:anywhere; }
.customer-reviews-status { color:#b7c9bf; margin:10px 0; line-height:1.5; }

/* V17: one feed, explicit ordering and removable applied conditions. */
body.premium-v7 .feed-head { gap:10px 16px; margin:14px 0 8px; }
.feed-head [hidden], .feed-active-filters[hidden] { display:none!important; }
.feed-sort-control { display:flex; align-items:center; justify-content:space-between; gap:12px; flex:1 1 100%; min-width:0; }
.feed-sort-control > span { color:#b7c9bf; font-size:12px; }
.feed-sort-control select { min-width:0; max-width:100%; width:230px; min-height:46px; padding:10px 28px 10px 12px; border:1px solid #c8edda40; border-radius:14px; color:#edf5ef; background-color:#173125; font:inherit; font-size:13px; color-scheme:dark; cursor:pointer; }
.feed-sort-control select:focus-visible,.feed-active-filters button:focus-visible { outline:2px solid #bddd9c; outline-offset:3px; }
.feed-order-note { margin:0 0 12px; color:#b7c9bf; font-size:12px; line-height:1.55; }
.feed-active-filters { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 14px; min-width:0; }
.feed-active-filters button { display:inline-flex; align-items:center; gap:10px; min-width:0; max-width:100%; min-height:44px; padding:8px 12px; border:1px solid #c8edda30; border-radius:14px; background:#c8edda12; color:#e3ece6; font:inherit; font-size:12px; text-align:left; cursor:pointer; }
.feed-active-filters span { min-width:0; overflow-wrap:anywhere; }
.feed-active-filters i { flex:none; font-size:19px; font-style:normal; color:#bddd9c; }
@media (max-width:360px) {
  .feed-sort-control { flex-direction:column; align-items:stretch; gap:6px; }
  .feed-sort-control select { width:100%; }
}
@media (min-width:768px) {
  .feed-sort-control { flex:0 1 auto; margin-left:auto; }
}