/* Shared game-operations theme. All roles use the same accessible dark surfaces. */
:root {
  color-scheme: dark;
  --ink: #eff7ff;
  --muted: #9db2c9;
  --subtle: #7892ac;
  --border: #25435e;
  --border-bright: #33748a;
  --teal: #16e0e4;
  --teal-soft: #83f6f6;
  --bg: #071323;
  --surface: #102239;
  --surface-raised: #162d47;
  --success: #43e6ae;
  --warning: #ffc26b;
  --danger: #ff8796;
}
* { box-sizing: border-box; }
html { min-width: 320px; background: var(--bg); scroll-behavior: smooth; }
body { margin: 0; background: radial-gradient(ellipse at 80% 0%, #14325166, transparent 55%), var(--bg); color: var(--ink); font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; border: 0; transition: background .16s, border-color .16s, box-shadow .16s; }
button:disabled { opacity: .45; cursor: not-allowed; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline: 3px solid #6ef9ff; outline-offset: 3px; }
h1, h2, h3, p { margin: 0; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { color: var(--ink); }
input::placeholder, textarea::placeholder { color: #809bb8; opacity: 1; }
input, select, textarea { accent-color: var(--teal); }
select option { background: #102239; color: var(--ink); }
::selection { background: #16e0e450; color: #fff; }
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-thumb { background: #34536e; border-radius: 10px; }
::-webkit-scrollbar-track { background: #09192b; }
.app-shell { display: flex; min-height: 100vh; }
.sidebar { width: 220px; position: fixed; inset: 0 auto 0 0; display: flex; flex-direction: column; padding: 28px 16px 23px; background: linear-gradient(180deg, #0d2036, #071221 82%); border-right: 1px solid #1d3f58; color: var(--muted); z-index: 20; overflow-y: auto; }
.brand { display: flex; align-items: center; gap: 12px; padding: 0 10px; color: #fff; font-size: 26px; font-weight: 750; letter-spacing: 2px; }
.brand-mark { display: grid; place-items: center; width: 43px; height: 43px; flex-shrink: 0; border: 1px solid #27e4e98c; border-radius: 11px; color: #40f4f2; background: linear-gradient(135deg, #143b51, #063b44); box-shadow: 0 0 20px #00e4e31c; font-size: 31px; }
.brand-sub { display: block; margin-top: 1px; font-size: 9px; letter-spacing: 2.4px; color: #8ab9cd; font-weight: 500; }
.workspace-label { font-size: 11px; color: #7f9bb6; margin: 35px 12px 15px; letter-spacing: 1px; }
.workspace-label span { font-size: 8px; border: 1px solid #2d6375; border-radius: 4px; padding: 2px 4px; margin-left: 5px; color: #80ced5; }
.sidebar nav { display: flex; flex-direction: column; gap: 8px; }
.sidebar nav button { display: flex; align-items: center; gap: 13px; min-height: 46px; padding: 12px 15px; text-align: left; color: #bacbdd; background: transparent; border: 1px solid transparent; border-radius: 7px; font-size: 13px; }
.sidebar nav button:hover { background: #18334b; color: #fff; }
.sidebar nav button.active { color: #caffff; background: linear-gradient(100deg, #0b6e7c, #104451); border-color: #20cad066; box-shadow: inset 3px 0 #16e0e4, 0 0 16px #00cbd215; font-weight: 650; }
.sidebar nav button.active > span:first-child { color: #1df8f3; }
.sidebar nav button b { margin-left: auto; min-width: 21px; padding: 1px 5px; border-radius: 20px; text-align: center; background: #b52d4e; color: #fff; font-size: 10px; }
.sidebar-bottom { margin-top: auto; padding: 30px 10px 0; font-size: 11px; color: #99c1cf; }
.sidebar-bottom p { color: #7391ad; margin-top: 8px; font-size: 10px; }
.sidebar-bottom button { margin-top: 20px; padding: 0; color: #9eb5cd; font-size: 11px; background: transparent; }
.sandbox-dot, .live-label i { display: inline-block; width: 6px; height: 6px; margin-right: 7px; background: var(--teal); border-radius: 50%; box-shadow: 0 0 8px #16e0e480; }
main { min-width: 0; margin-left: 220px; flex: 1; }
.topbar { height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 32px; background: linear-gradient(100deg, #102238f5, #132a43e6); border-bottom: 1px solid #284359; }
.breadcrumb { display: flex; align-items: center; gap: 13px; font-size: 12px; color: #8aa5be; }
.breadcrumb strong { color: #dbe9f7; font-weight: 550; }
.top-actions { display: flex; align-items: center; gap: 12px; }
.today { font-size: 11px; color: var(--muted); margin-right: 6px; font-variant-numeric: tabular-nums; }
.icon-button { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; min-height: 34px; padding: 5px; color: #b5cbe0; background: transparent; border-radius: 6px; font-size: 22px; }
.icon-button:hover { background: #24435c; color: #fff; }
.avatar { display: grid; place-items: center; width: 35px; height: 35px; flex-shrink: 0; margin-left: 5px; border: 1px solid #357993; border-radius: 50%; color: #a9f2f7; background: linear-gradient(135deg, #254e6b, #103f53); font-size: 12px; }
.role-switch { min-width: 0; }
.role-switch label { display: block; font-size: 10px; color: #8eabc4; margin-bottom: 2px; }
.role-switch select { max-width: 220px; padding: 1px 20px 1px 0; background: transparent; border: 0; color: #e7f6ff; font-size: 12px; cursor: pointer; }
.sandbox-banner { display: flex; align-items: center; gap: 14px; padding: 10px 32px; background: #0d2837; border-bottom: 1px solid #204650; color: #a2bdcb; font-size: 11px; }
.sandbox-banner > span { white-space: nowrap; color: #91e7e4; font-weight: 600; }
.sandbox-banner p { line-height: 1.7; }
.sandbox-banner button { margin-left: auto; padding: 3px 0; color: #7ee8ec; background: transparent; white-space: nowrap; font-size: 11px; }
.page-content { max-width: 1600px; margin: 0 auto; padding: 28px 32px 0; }
.page-heading { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-bottom: 24px; }
.page-heading > div { min-width: 0; }
.eyebrow { margin-bottom: 8px; color: #6ba8bb; font-size: 9px; letter-spacing: 2px; font-weight: 650; }
h1 { font-size: 27px; line-height: 1.35; letter-spacing: -.4px; font-weight: 700; color: #f4faff; }
.page-heading p { margin-top: 8px; color: #9fb5cc; font-size: 12px; line-height: 1.8; }
.live-label { font-size: 11px; color: #9ad2d6; white-space: nowrap; }
.primary, .secondary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px; padding: 10px 16px; border: 1px solid transparent; border-radius: 6px; font-size: 12px; line-height: 1.4; font-weight: 650; white-space: nowrap; }
.primary { color: #022632; background: linear-gradient(180deg, #25e9e6, #08bfc9); border-color: #58eeef; box-shadow: 0 3px 15px #00c6d21c; }
.primary:hover { background: linear-gradient(180deg, #7cffff, #17d0da); box-shadow: 0 0 19px #08dce333; }
.secondary { color: #c7dff2; background: #142d44; border-color: #395875; }
.secondary:hover { color: #efffff; background: #1d3e55; border-color: #65bccb; }
.hero-card { position: relative; min-height: 240px; display: flex; justify-content: space-between; overflow: hidden; padding: 28px 32px; background: radial-gradient(ellipse at 85% 65%, #14718d55, transparent 58%), linear-gradient(110deg, #12334b, #0f223a); border: 1px solid #2a7088; border-radius: 11px; box-shadow: inset 0 1px #89eeff0f; }
.hero-card > div:first-child { z-index: 2; }
.hero-kicker { color: #8ce3e5; font-size: 11px; letter-spacing: 1px; }
.hero-card h2 { margin-top: 10px; color: #ecffff; font-size: 28px; line-height: 1.5; font-weight: 700; letter-spacing: .5px; }
.hero-card p { margin-top: 10px; color: #a1c4d8; font-size: 12px; }
.hero-card button { margin-top: 20px; padding: 11px 16px; border: 1px solid #5df6f2; border-radius: 6px; color: #062b36; background: linear-gradient(#2be8e2, #0bbdc9); font-size: 12px; font-weight: 650; }
.hero-art { position: relative; width: 380px; margin-right: 20px; }
.orbit { position: absolute; width: 350px; height: 350px; top: -55px; right: -25px; border: 1px solid #28769065; border-radius: 50%; }
.orbit-two { width: 270px; height: 270px; right: 15px; top: -16px; }
.art-card { position: absolute; border: 1px solid #3b9aaf; border-radius: 12px; box-shadow: 0 14px 30px #00122660; }
.card-back { width: 174px; height: 162px; right: 15px; top: 15px; padding: 18px; background: linear-gradient(120deg, #165a71, #14405c); color: #6be8f4; transform: rotate(12deg); }
.bar-chart { display: flex; gap: 7px; align-items: flex-end; height: 63px; margin-top: 17px; }
.bar-chart i { width: 13px; background: linear-gradient(#63f3ee, #049ec6); border-radius: 3px 3px 0 0; }
.card-front { width: 172px; height: 183px; right: 138px; top: 10px; padding: 20px; background: linear-gradient(140deg, #284b6e, #142c48); transform: rotate(-9deg); }
.art-play { display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto 19px; border: 1px solid #7cffff; border-radius: 50%; background: #0b7b96; color: #efffff; font-size: 18px; box-shadow: 0 0 20px #07e4e02b; }
.card-front > span { color: #8bc7df; font-size: 7px; letter-spacing: 1px; }
.art-line { height: 6px; margin-top: 10px; border-radius: 3px; background: #426a89; }
.art-line.short { width: 66%; margin-top: 7px; }
.art-tag { position: absolute; right: 36px; bottom: 0; padding: 10px 13px; border: 1px solid #3d7b8f; border-radius: 6px; color: #9df9ec; background: #103c4b; font-size: 10px; transform: rotate(3deg); }
.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 20px 0; }
.stat { min-width: 0; padding: 21px; border: 1px solid #2d5278; border-radius: 9px; background: linear-gradient(125deg, #173458, #10223a); box-shadow: inset 0 1px #83c1ff0c; }
.stat:nth-child(2) { border-color: #246276; background: linear-gradient(125deg, #114653, #102434); }
.stat:nth-child(3) { border-color: #71564a; background: linear-gradient(125deg, #3e3334, #262637); }
.stat:nth-child(4), .stat.accent { border-color: #2c697e; background: linear-gradient(125deg, #173d5a, #102b40); }
.stat > span { display: flex; align-items: center; justify-content: space-between; gap: 7px; font-size: 12px; color: #c1d2e4; }
.stat > span > span { color: #53d9f0; font-size: 18px; }
.stat:nth-child(3) > span > span { color: #ffbd69; }
.stat > strong { display: block; margin-top: 12px; color: #f7fbff; font-size: clamp(23px, 2.1vw, 32px); line-height: 1.3; letter-spacing: -.6px; font-weight: 750; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.stat strong small { color: #8eaac2; font-size: 11px; font-weight: 400; letter-spacing: 0; }
.stat p { margin-top: 8px; color: #9fb6cd; font-size: 11px; line-height: 1.7; }
.stat.accent strong { color: #adfdf7; }
.overview-grid, .dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.panel { min-width: 0; overflow: hidden; margin-bottom: 22px; border: 1px solid #2a4d68; border-radius: 10px; background: linear-gradient(120deg, #132a42dd, #0d1d31ed); box-shadow: 0 5px 18px #010b1718, inset 0 1px #9ad9f409; }
.panel-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 22px; border-bottom: 1px solid #29445e; }
.panel-heading > div { min-width: 0; }
.panel-heading h2 { color: #ecf6ff; font-size: 16px; font-weight: 650; }
.panel-heading p { margin-top: 6px; color: #9ab2c9; font-size: 11px; line-height: 1.8; }
.text-button { padding: 4px 0; color: #62d8f1; background: transparent; font-size: 12px; white-space: nowrap; }
.text-button:hover { color: #b2ffff; }
.flow-list { padding: 3px 22px 10px; }
.flow-list button { display: flex; align-items: center; gap: 15px; width: 100%; padding: 17px 0; text-align: left; color: #e8f3ff; background: transparent; border-bottom: 1px solid #223c55; }
.flow-list button:last-child { border-bottom: 0; }
.flow-list button:hover { color: #7ffbfc; }
.step-number { display: grid; place-items: center; width: 34px; height: 34px; flex-shrink: 0; border: 1px solid #2e6680; border-radius: 7px; color: #6adeee; background: #16384e; font-size: 12px; font-weight: 600; }
.flow-list strong { font-size: 13px; font-weight: 550; }
.flow-list p { margin-top: 5px; color: #8eaac4; font-size: 11px; line-height: 1.6; }
.activity-list { padding: 22px; }
.activity-list > div { display: flex; gap: 14px; padding-bottom: 20px; }
.activity-list > div:last-child { padding-bottom: 0; }
.activity-list > div > div { min-width: 0; }
.activity-dot { width: 7px; height: 7px; flex-shrink: 0; margin-top: 6px; border-radius: 50%; background: #24dce2; box-shadow: 0 0 0 4px #174252; }
.activity-list strong { font-size: 13px; font-weight: 550; }
.activity-list p { margin-top: 5px; color: #a1b9cf; font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; }
.activity-list small { display: block; margin-top: 5px; color: #7f9bb7; font-size: 10px; }
.page-footer { display: flex; justify-content: space-between; gap: 15px; margin-top: 15px; padding: 22px 0; border-top: 1px solid #203c54; color: #7893ac; font-size: 10px; }
.page-footer span:last-child { font-size: 9px; letter-spacing: 1.3px; }
.notice { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; padding: 12px 15px; border: 1px solid var(--border); border-radius: 7px; font-size: 13px; line-height: 1.7; overflow-wrap: anywhere; }
.notice.error { color: #ffc1c4; background: #452330; border-color: #925164; }
.storage-status p { margin: 3px 0 0; }
.notice.success { color: #9af2d3; background: #123d3c; border-color: #227667; }
.notice button { flex-shrink: 0; margin-left: auto; color: inherit; background: transparent; font-size: 19px; }
.toolbar { display: flex; justify-content: space-between; align-items: center; gap: 15px; padding: 19px 22px; }
.tabs { display: flex; flex-wrap: wrap; gap: 5px; }
.tabs button { padding: 8px 12px; border: 1px solid transparent; border-radius: 5px; color: #9fb6cc; background: transparent; font-size: 12px; }
.tabs button:hover { color: #d7ffff; background: #163b50; }
.tabs button.selected { color: #002e35; background: #19d7db; border-color: #66f5ef; font-weight: 650; box-shadow: 0 0 14px #03d6d629; }
.search { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 8px 11px; border: 1px solid #385773; border-radius: 6px; color: #a2bfd6; background: #0c1f34; }
.search input { width: 180px; min-width: 0; border: 0; outline: 0; color: #e5f7ff; background: transparent; font-size: 12px; }
.search:focus-within { border-color: var(--teal); box-shadow: 0 0 0 2px #16e0e41f; }
.video-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 19px; padding: 0 22px 22px; }
.video-card { min-width: 0; overflow: hidden; border: 1px solid #2f4c68; border-radius: 8px; background: #11273f; }
.video-cover { position: relative; height: 155px; overflow: hidden; color: #54edf2; background: radial-gradient(ellipse at 70% 60%, #18617b, transparent 70%), #08263b; }
.cover-1 { color: #a6a1ff; background: radial-gradient(ellipse at 70% 60%, #4c407a, transparent 70%), #25203f; }
.cover-2 { color: #76bcff; background: radial-gradient(ellipse at 70% 60%, #265886, transparent 70%), #112d4a; }
.cover-3 { color: #ffb4c9; background: radial-gradient(ellipse at 70% 60%, #73445f, transparent 70%), #332239; }
.video-category { position: absolute; top: 12px; left: 13px; padding: 4px 7px; border: 1px solid #93e6ff40; border-radius: 4px; color: #e4f7ff; background: #051a3280; font-size: 10px; }
.cover-symbol { position: absolute; top: -16px; right: 34px; color: inherit; opacity: .45; transform: rotate(-15deg); font-size: 117px; }
.cover-caption { position: absolute; bottom: 17px; left: 14px; color: #d3e5f5; font-size: 9px; letter-spacing: 1.6px; }
.play-circle { position: absolute; right: 15px; bottom: 14px; display: grid; place-items: center; width: 29px; height: 29px; border: 1px solid #a5eaff8c; border-radius: 50%; color: #eaffff; background: #0d3d5a80; font-size: 9px; }
.video-info { padding: 16px; }
.video-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #96afc7; font-size: 11px; }
.video-info h3 { margin-top: 11px; color: #e8f4ff; font-size: 14px; line-height: 1.6; font-weight: 600; }
.video-info p { margin-top: 7px; color: #99b1ca; font-size: 11px; }
.video-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 16px; padding-top: 13px; border-top: 1px solid #28435d; }
.video-footer small { color: #8ca6bd; font-size: 10px; }
.video-footer button { padding: 4px 0; color: #5ae9e8; background: transparent; font-size: 12px; }
.video-footer .muted { font-size: 11px; }
.badge { display: inline-block; padding: 4px 8px; border: 1px solid #3c526f; border-radius: 5px; color: #aec4db; background: #21344c; font-size: 10px; line-height: 1.5; font-weight: 500; white-space: nowrap; }
.badge.available, .badge.approved { color: #6ff2c6; background: #0d4845; border-color: #1b7060; }
.badge.claimed, .badge.human_pending { color: #ffd189; background: #49371e; border-color: #73532b; }
.badge.ai_pending { color: #a6cdff; background: #233d67; border-color: #395c8d; }
.badge.rejected { color: #ffb0bd; background: #51283c; border-color: #82506a; }
.badge.archived { color: #a0b1c8; background: #27374b; border-color: #3b5068; }
.empty { display: flex; flex-direction: column; align-items: center; padding: 48px 20px; text-align: center; color: #5d96b2; }
.empty p { margin: 13px 0 7px; color: #b3c9dc; font-size: 13px; }
.empty small { color: #85a0b9; font-size: 11px; line-height: 1.8; }
.table-wrap { width: 100%; overflow: auto; overscroll-behavior-x: contain; }
table { width: 100%; border-collapse: collapse; text-align: left; font-size: 12px; }
th { padding: 12px 20px; color: #b6cce1; background: #1a344e; font-size: 11px; font-weight: 600; white-space: nowrap; }
td { padding: 15px 20px; border-top: 1px solid #263f58; line-height: 1.7; }
tbody tr:nth-child(even) { background: #15304933; }
tbody tr:hover { background: #19405b55; }
td strong { color: #e3f1fd; font-size: 12px; font-weight: 550; }
td small { display: block; margin-top: 4px; color: #8ea8c2; font-size: 10px; }
.numeric { font-variant-numeric: tabular-nums; font-weight: 550; }
.nowrap { white-space: nowrap; }
.muted { color: #8da9c1; }
.row-actions { display: flex; gap: 7px; white-space: nowrap; }
.mini { min-height: 29px; padding: 5px 8px; border: 1px solid #486581; border-radius: 5px; color: #bdd7ec; background: #193149; font-size: 10px; }
.mini:hover { color: #f0ffff; border-color: #6dc6d4; background: #244b61; }
.mini.positive { color: #71f9de; background: #104b4d; border-color: #227c7a; }
.summary-strip { display: flex; align-items: center; gap: 28px; margin-bottom: 22px; padding: 24px; border: 1px solid #2e687c; border-radius: 10px; background: linear-gradient(110deg, #153c50, #10263e); }
.summary-strip > div { min-width: 0; flex: 1; }
.summary-strip span { display: block; color: #a2ccdd; font-size: 12px; line-height: 1.7; }
.summary-strip strong { display: block; margin-top: 8px; color: #a5fff4; font-size: clamp(21px, 2.1vw, 28px); font-weight: 650; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.summary-strip p { max-width: 30%; color: #97b9cf; font-size: 11px; line-height: 1.9; }
.info-banner { display: flex; gap: 13px; margin-bottom: 22px; padding: 17px 21px; border: 1px solid #2c6376; border-radius: 8px; color: #72dcdf; background: #102f40; }
.info-banner > span { flex-shrink: 0; font-size: 20px; }
.info-banner strong { color: #c3f6f6; font-size: 13px; font-weight: 600; }
.info-banner p { margin-top: 5px; color: #9ebfd1; font-size: 12px; line-height: 1.8; }
.alerts-list { padding: 0 22px; }
.alerts-list > div { display: flex; align-items: center; gap: 14px; padding: 19px 0; border-bottom: 1px solid #3f4551; color: #ffbf69; }
.alerts-list > div:last-child { border-bottom: 0; }
.alerts-list strong { color: #f3c997; font-size: 13px; }
.alerts-list p { margin-top: 5px; color: #b7bbc8; font-size: 12px; line-height: 1.7; }
.alerts-list button { margin-left: auto; }
.member { display: flex; align-items: center; gap: 11px; }
.member-avatar { display: grid; place-items: center; width: 34px; height: 34px; flex-shrink: 0; border: 1px solid #3c5b77; border-radius: 50%; color: #accde4; background: #203e59; font-size: 12px; }
.member-avatar.self { color: #7cf0ec; border-color: #2a9296; background: #11474f; }
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.channel-list { padding: 0 22px; }
.channel-list > div { display: flex; align-items: center; gap: 11px; padding: 18px 0; border-bottom: 1px solid #28435b; }
.channel-list > div:last-child { border-bottom: 0; }
.channel-icon { display: grid; place-items: center; width: 35px; height: 35px; flex-shrink: 0; border: 1px solid #2a7787; border-radius: 7px; color: #45e8e5; background: #11444f; font-size: 22px; }
.channel-list strong { color: #e0effb; font-size: 12px; font-weight: 550; }
.channel-list small { display: block; margin-top: 5px; color: #93aec6; font-size: 10px; }
.channel-list .badge { margin-left: auto; }
.boundary { padding: 11px 22px 20px; }
.boundary p { margin: 15px 0; color: #a4c4d6; font-size: 12px; line-height: 1.7; }
.test-guide { padding: 3px 24px 18px; counter-reset: guide; list-style: none; }
.test-guide li { position: relative; padding: 17px 0 17px 43px; border-bottom: 1px solid #284159; counter-increment: guide; }
.test-guide li:last-child { border-bottom: 0; }
.test-guide li::before { content: counter(guide); position: absolute; top: 17px; left: 0; display: grid; place-items: center; width: 27px; height: 27px; border: 1px solid #2a6878; border-radius: 6px; color: #70e4e8; background: #124153; font-size: 12px; }
.test-guide strong { color: #e0eef9; font-size: 13px; font-weight: 550; }
.test-guide p { margin-top: 6px; color: #99b2c9; font-size: 12px; line-height: 1.9; }
.modal-overlay { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; overflow-y: auto; padding: 22px; background: #020915c9; backdrop-filter: blur(6px); }
.modal { width: 490px; max-width: 100%; max-height: calc(100dvh - 44px); overflow: auto; padding: 26px; border: 1px solid #39778e; border-radius: 13px; color: #eaf4ff; background: linear-gradient(130deg, #19334f, #102137); box-shadow: 0 22px 90px #000a16a8, 0 0 50px #00ccd90a; }
.modal-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 23px; }
.modal-heading h2 { color: #f0faff; font-size: 22px; font-weight: 650; }
.modal-heading .eyebrow { font-size: 9px; }
.modal form > label { display: block; margin-top: 17px; color: #b5cee1; font-size: 12px; }
.modal input:not([type=file]):not([type=hidden]), .modal select, .modal textarea { display: block; width: 100%; margin-top: 8px; padding: 11px 12px; border: 1px solid #3b607c; border-radius: 6px; color: #e3f6ff; background: #0b2036; font-size: 14px; }
.modal textarea { min-height: 95px; resize: vertical; }
.modal input[type=file] { display: block; max-width: 100%; margin-top: 11px; color: #adc6db; font-size: 12px; }
input[type=file]::file-selector-button { margin-right: 10px; padding: 7px 10px; border: 1px solid #477b94; border-radius: 5px; color: #d8f5fa; background: #214960; cursor: pointer; }
.modal .upload-field { display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 22px; border: 1px dashed #438ea7; border-radius: 8px; text-align: center; background: #103048; }
.upload-field strong { color: #c2edfa; font-size: 13px; font-weight: 550; }
.upload-field small { color: #94bad0; font-size: 11px; }
.form-help { margin-top: 15px; color: #98b6ce; font-size: 12px; line-height: 1.9; }
.modal-footer { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; padding-top: 19px; border-top: 1px solid #2e4f6a; }
.screenshot-modal { width: 100%; max-width: 800px; max-height: 90dvh; overflow: auto; border: 1px solid #39768c; border-radius: 12px; background: #11283f; }
.screenshot-modal > div { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; }
.screenshot-modal img { display: block; width: 100%; max-height: 80dvh; object-fit: contain; background: #081626; }
.loading-screen { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; gap: 20px; padding: 25px; text-align: center; }
.loading-screen h2 { color: #e2f4ff; font-size: 22px; }
.loading-screen p { color: #9fb9ce; font-size: 13px; }
/* Reusable role-specific dashboards, charts and review workspaces. */
.channel-distribution { display: flex; align-items: center; gap: 24px; padding: 22px; }
.channel-bars { display: flex; flex: 1; flex-direction: column; gap: 18px; min-width: 0; }
.channel-bar { display: flex; flex-direction: column; gap: 8px; color: #b6d2e4; font-size: 12px; }
.channel-bar > div:first-child { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; }
.channel-bar > div:first-child strong { color: #d5ecf7; font-size: 11px; font-weight: 500; white-space: nowrap; }
.channel-bar > small { color: #8caec5; font-size: 10px; }
.channel-bar > strong { min-width: 30px; color: #e9f7ff; text-align: right; font-size: 12px; font-variant-numeric: tabular-nums; }
.channel-bar-track { width: 100%; height: 9px; overflow: hidden; border: 1px solid #284c67; border-radius: 9px; background: #0b1d31; }
.channel-bar-fill { display: block; height: 100%; min-width: 0; border-radius: inherit; background: linear-gradient(90deg, #0daed8, #1cebe1); }
.channel-bar:nth-child(3n+2) .channel-bar-fill { background: linear-gradient(90deg, #426cde, #64c4ff); }
.channel-bar:nth-child(3n+3) .channel-bar-fill { background: linear-gradient(90deg, #6654ca, #a497f2); }
.trend-chart { min-width: 0; padding: 22px; color: #86b6cf; }
.trend-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.trend-chart svg text { fill: #a8c0d7; font-family: inherit; }
.trend-chart > p, .channel-distribution > p { color: #8daec6; font-size: 11px; line-height: 1.7; }
.review-workspace { display: grid; padding: 16px; grid-template-columns: minmax(220px, .72fr) minmax(0, 1.55fr); gap: 18px; align-items: start; margin-bottom: 22px; }
.review-workspace .panel { margin-bottom: 0; }
.review-queue { border: 1px solid #29475f; border-radius: 8px; background: #0b1c2e; display: flex; flex-direction: column; min-width: 0; gap: 9px; padding: 15px; }
.review-item { display: flex; flex-direction: column; gap: 8px; width: 100%; min-width: 0; padding: 14px; border: 1px solid #2c4863; border-radius: 7px; text-align: left; color: #d0e4f5; background: #142c44; }
.review-item:hover { border-color: #468ca1; background: #1b3c53; }
.review-item.selected, .review-item.active { border-color: #27d8de; background: linear-gradient(110deg, #145063, #16334a); box-shadow: inset 3px 0 #18e4e1, 0 0 16px #15d7e019; }
.review-item > div { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.review-item strong { color: #effbff; font-size: 13px; }
.review-item p, .review-item small { color: #9db8d0; font-size: 11px; line-height: 1.7; overflow-wrap: anywhere; }
.review-detail { min-width: 0; padding: 18px; border: 1px solid #2a4d68; border-radius: 8px; background: #10253b; }
.review-detail > .panel-heading { padding: 0 0 16px; margin-bottom: 16px; }
.review-detail > .boundary { padding: 0; }
.review-proof > button { display: flex; align-items: center; justify-content: center; width: 100%; padding: 0; color: inherit; background: transparent; }
.review-item > span:not(.badge) { color: #92b1cb; font-size: 11px; }
.review-item > .badge { align-self: flex-start; }
.review-detail > h2, .review-detail > h3 { margin-bottom: 15px; color: #e8f7ff; font-size: 17px; }
.review-detail > p { margin: 12px 0; color: #a8c0d5; font-size: 12px; line-height: 1.8; overflow-wrap: anywhere; }
.review-detail .row-actions { gap: 10px; padding-top: 19px; margin-top: 20px; border-top: 1px solid #2c4b66; }
.review-proof { display: flex; justify-content: center; align-items: center; min-height: 220px; padding: 12px; overflow: hidden; border: 1px solid #355b79; border-radius: 7px; background: #081a2d; }
.review-proof img { display: block; max-width: 100%; max-height: 340px; object-fit: contain; border-radius: 4px; }
.review-proof .empty { padding: 26px 12px; }
.review-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; margin: 20px 0; }
.review-facts > div { min-width: 0; }
.review-facts span, .review-facts dt { display: block; margin: 0 0 5px; color: #8eacc5; font-size: 11px; }
.review-facts strong, .review-facts dd { display: block; margin: 0; color: #e2f4ff; font-size: 13px; font-weight: 550; overflow-wrap: anywhere; }
.mobile-tasks { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px; align-items: start; margin-bottom: 22px; }
.task-card { min-width: 0; padding: 23px; border: 1px solid #326079; border-radius: 10px; background: linear-gradient(125deg, #183c58, #10243c); }
.task-card h2, .task-card h3 { color: #ecf8ff; font-size: 17px; font-weight: 650; }
.task-card > p { margin-top: 10px; color: #a7c4d9; font-size: 12px; line-height: 1.85; }
.task-card > .primary, .task-card > .secondary { margin-top: 20px; }
.task-card .badge { margin: 10px 0 4px; }
.task-card .row-actions { flex-wrap: wrap; margin-top: 19px; }
.task-steps { display: flex; flex-direction: column; gap: 0; padding: 0; margin: 20px 0 0; list-style: none; counter-reset: task; }
.task-steps li { position: relative; padding: 0 0 18px 38px; color: #bdcedf; font-size: 12px; line-height: 1.7; counter-increment: task; }
.task-steps li::before { content: counter(task); position: absolute; top: 0; left: 0; display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid #3e8b9b; border-radius: 50%; color: #7ef4eb; background: #114551; font-size: 11px; }
.task-steps li:not(:last-child)::after { content: ''; position: absolute; top: 27px; bottom: 4px; left: 12px; width: 1px; background: #326076; }
.task-steps li:last-child { padding-bottom: 0; }
.task-steps strong { display: block; color: #e5f8ff; font-size: 13px; }
.task-steps p, .task-steps small { color: #9cb7ce; font-size: 11px; }
.creator-earnings { display: flex; flex-direction: column; align-items: stretch; gap: 12px; padding: 22px; border: 1px solid #297284; border-radius: 10px; background: linear-gradient(125deg, #144454, #0e2d40); }
.creator-earnings span { display: block; color: #a1ccda; font-size: 12px; }
.creator-earnings strong { display: block; margin-top: 9px; color: #9bfff0; font-size: 27px; font-weight: 700; line-height: 1.3; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.creator-earnings p, .creator-earnings small { color: #90b9cb; font-size: 11px; line-height: 1.7; }
.role-C .page-content { max-width: 1160px; }

.task-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.task-heading > div { min-width: 0; flex: 1; }
.task-heading p { margin-top: 5px; color: #a4c1d8; font-size: 11px; line-height: 1.7; }
.task-heading h2 small { padding-left: 5px; color: #93dce8; font-size: 12px; font-weight: 550; }
.task-heading .badge { margin: 0; }
.task-icon { display: grid; place-items: center; width: 45px; height: 45px; flex-shrink: 0; border: 1px solid #467db8; border-radius: 8px; color: #cfebff; background: linear-gradient(135deg, #3d75ca, #235191); box-shadow: 0 0 18px #2674e638; font-size: 28px; }
.task-card .task-hint { margin-top: 12px; color: #87adc4; font-size: 11px; line-height: 1.8; }
.task-status { display: flex; align-items: center; gap: 15px; margin-top: 13px; padding: 12px 14px; border: 1px solid #285d69; border-radius: 7px; background: #102f3c; }
.task-status .badge { margin: 0; }
.task-status > strong { margin-left: auto; color: #e0fff5; font-size: 18px; }
.task-video { display: flex; align-items: center; gap: 14px; margin-top: 19px; padding: 15px; border: 1px solid #355c78; border-radius: 8px; background: #0b2136; }
.task-video > div { min-width: 0; }
.task-video strong { display: block; font-size: 13px; line-height: 1.6; }
.task-video p { color: #91b1c9; font-size: 11px; line-height: 1.7; margin-top: 5px; }
.task-play { display: grid; place-items: center; width: 52px; height: 48px; flex-shrink: 0; color: #d5faff; background: linear-gradient(140deg, #214e71, #10314c); border: 1px solid #3b82a1; border-radius: 6px; }
.task-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 21px; }
.task-actions > .primary { flex: 1; }
.task-steps .done::before { content: '✓'; color: #a3ffdd; background: #0a5b4e; border-color: #27a68b; }
.task-steps .active::before { border-color: #37e5e3; color: #a6ffff; box-shadow: 0 0 10px #16e0e428; }
.creator-earnings > .task-heading { margin-bottom: 7px; }
.creator-earnings > p { margin-top: 0; }
.creator-earnings > .text-button { align-self: flex-start; }
.creator-report-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 18px; }
.creator-report-list .task-card { background: #112d43; }
.creator-report-list .task-heading { align-items: flex-start; }
.creator-report-list .task-heading h3 { font-size: 14px; line-height: 1.7; }
.alerts-list small { display: block; color: #a9b2c2; font-size: 11px; line-height: 1.7; margin-top: 5px; }

/* Tablet: preserve text labels until there is genuinely no room. */
@media (min-width: 1500px) {
  .page-content { padding-top: 32px; }
  .hero-card { min-height: 270px; }
  .hero-art { margin-right: 100px; }
  .hero-card h2 { font-size: 33px; }
  .video-cover { height: 185px; }
}
@media (max-width: 1180px) {
  .sidebar { width: 196px; padding: 26px 13px; }
  main { margin-left: 196px; }
  .page-content { padding: 25px 23px 0; }
  .topbar { padding: 0 23px; }
  .sandbox-banner { padding: 10px 23px; }
  .hero-art { width: 280px; margin-right: 0; transform: scale(.85); transform-origin: right center; }
  .hero-card { padding: 25px; }
  .hero-card h2 { font-size: 26px; }
  .stat { padding: 17px; }
  .video-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .summary-strip { flex-wrap: wrap; gap: 20px; }
  .summary-strip p { max-width: none; flex-basis: 100%; }
  .review-workspace { grid-template-columns: minmax(195px, .75fr) minmax(0, 1.4fr); gap: 15px; }
  .today { display: none; }
  .channel-bar { gap: 9px; }
}
@media (max-width: 940px) {
  .sidebar { width: 76px; padding: 25px 10px; }
  .brand { padding: 0; justify-content: center; }
  .brand > span:last-child, .workspace-label, .sidebar nav button span:nth-child(2), .sidebar nav button b, .sidebar-bottom { display: none; }
  .brand-mark { width: 40px; height: 40px; border-radius: 10px; }
  .sidebar nav { margin-top: 35px; gap: 12px; }
  .sidebar nav button { padding: 13px; justify-content: center; }
  main { margin-left: 76px; }
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat > strong { font-size: 29px; }
  .overview-grid, .settings-grid, .dashboard-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .sandbox-banner { align-items: flex-start; }
  .sandbox-banner button { display: none; }
  .hero-art { width: 250px; transform: scale(.8); }
  .hero-card h2 { font-size: 25px; }
  .mobile-tasks { grid-template-columns: minmax(0, 1fr); }
  .channel-distribution { padding: 22px; }
}
/* Mobile: a readable task-first workspace, with real bottom navigation. */
@media (max-width: 620px) {
  body { font-size: 14px; }
  .sidebar { top: auto; right: 0; bottom: 0; left: 0; width: 100%; height: calc(69px + env(safe-area-inset-bottom)); padding: 5px 5px calc(5px + env(safe-area-inset-bottom)); overflow-x: auto; overflow-y: hidden; border-top: 1px solid #337283; border-right: 0; background: #081a2ef5; backdrop-filter: blur(16px); box-shadow: 0 -4px 22px #020e1f99; }
  .sidebar .brand { display: none; }
  .sidebar nav { flex-direction: row; justify-content: space-around; gap: 3px; width: max-content; min-width: 100%; height: 100%; margin: 0; }
  .sidebar nav button { flex: 1 0 auto; flex-direction: column; justify-content: center; gap: 4px; min-width: 64px; min-height: 53px; padding: 6px 9px; border-radius: 6px; }
  .sidebar nav button.active { border-color: #2f9aab77; box-shadow: inset 0 2px #19e8e8; background: linear-gradient(#145068, #103243); }
  .sidebar nav button span:nth-child(2) { display: block; font-size: 10px; white-space: nowrap; }
  .sidebar nav button span:first-child { font-size: 18px !important; line-height: 1.2; }
  .sidebar nav.role-tabs, .role-C .sidebar nav { width: 100%; }
  .role-C .sidebar nav button { min-width: 0; }
  main { width: 100%; margin-left: 0; padding-bottom: calc(69px + env(safe-area-inset-bottom)); }
  .topbar { height: 72px; gap: 10px; padding: 0 16px; }
  .breadcrumb { gap: 6px; font-size: 11px; flex-shrink: 0; }
  .top-actions { gap: 5px; min-width: 0; }
  .avatar { width: 30px; height: 30px; margin-left: 1px; font-size: 11px; }
  .role-switch label { font-size: 9px; }
  .role-switch select { max-width: 143px; font-size: 11px; padding-right: 0; }
  .icon-button { min-width: 30px; min-height: 34px; padding: 3px; }
  .sandbox-banner { display: block; padding: 10px 16px; }
  .sandbox-banner > span { font-size: 11px; }
  .sandbox-banner p { margin-top: 4px; font-size: 10px; line-height: 1.7; }
  .page-content { padding: 22px 16px 0; }
  .page-heading { flex-wrap: wrap; align-items: flex-start; gap: 14px; margin-bottom: 20px; }
  .eyebrow { font-size: 8px; letter-spacing: 1.5px; }
  h1 { font-size: 24px; }
  .page-heading p { margin-top: 7px; font-size: 12px; line-height: 1.8; }
  .page-heading > .primary, .page-heading > .secondary { min-height: 40px; }
  .live-label { display: none; }
  .hero-card { display: block; min-height: 255px; padding: 24px; }
  .hero-card h2 { font-size: 26px; line-height: 1.5; }
  .hero-kicker { font-size: 11px; }
  .hero-card p { position: relative; z-index: 3; max-width: 220px; font-size: 11px; line-height: 1.8; }
  .hero-card button { position: relative; z-index: 3; }
  .hero-card > div:first-child { position: relative; }
  .hero-art { position: absolute; top: 26px; right: -55px; width: 240px; height: 205px; opacity: .35; transform: scale(.64); transform-origin: right center; }
  .card-front { right: 110px; }
  .art-tag { display: none; }
  .stat-grid { gap: 10px; margin: 16px 0; }
  .stat { padding: 16px 13px; }
  .stat > span { font-size: 11px; }
  .stat > span > span { font-size: 16px; }
  .stat > strong { margin-top: 10px; font-size: 25px; }
  .stat strong small { font-size: 10px; }
  .stat p { margin-top: 7px; font-size: 10px; line-height: 1.7; }
  .panel { margin-bottom: 16px; }
  .panel-heading { flex-wrap: wrap; gap: 10px; padding: 16px; }
  .panel-heading h2 { font-size: 15px; }
  .panel-heading p { font-size: 11px; }
  .flow-list { padding: 0 16px 7px; }
  .flow-list > button { padding: 16px 0; gap: 12px; }
  .flow-list p { font-size: 11px; }
  .activity-list { padding: 20px 16px; }
  .page-footer { display: block; padding: 20px 0; text-align: center; line-height: 2.3; }
  .page-footer span { display: block; }
  .toolbar { flex-direction: column; align-items: stretch; gap: 13px; padding: 15px; }
  .tabs { flex-wrap: nowrap; justify-content: space-between; gap: 2px; }
  .tabs button { min-height: 36px; padding: 8px; font-size: 11px; }
  .search { min-height: 39px; }
  .search input { width: 100%; font-size: 14px; }
  .video-grid { grid-template-columns: minmax(0, 1fr); gap: 15px; padding: 0 15px 15px; }
  .video-cover { height: 180px; }
  .video-info { padding: 16px; }
  .video-info h3 { font-size: 15px; }
  .video-info p { font-size: 12px; }
  .video-footer button, .video-footer a { min-height: 30px; }
  .summary-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; padding: 18px; margin-bottom: 16px; }
  .summary-strip > div { min-width: 0; }
  .summary-strip > div:nth-child(3) { grid-column: 1 / -1; padding-top: 12px; border-top: 1px solid #2a5267; }
  .summary-strip span { font-size: 11px; }
  .summary-strip strong { font-size: 23px; }
  .summary-strip p { grid-column: 1 / -1; font-size: 11px; }
  .info-banner { gap: 10px; padding: 15px; margin-bottom: 16px; }
  .info-banner strong { font-size: 12px; }
  .info-banner p { font-size: 11px; }
  .table-wrap th { padding: 11px 15px; font-size: 11px; }
  .table-wrap td { min-width: 100px; padding: 14px 15px; font-size: 12px; }
  .table-wrap td:first-child { min-width: 150px; }
  .table-wrap .mini { min-height: 33px; font-size: 11px; }
  .modal-overlay { padding: 12px; }
  .modal { padding: 21px; max-height: calc(100dvh - 24px); }
  .modal-heading h2 { font-size: 20px; }
  .modal input:not([type=file]):not([type=hidden]), .modal select, .modal textarea { font-size: 16px; }
  .modal-footer .primary, .modal-footer .secondary { min-height: 44px; }
  .channel-list { padding: 0 16px; }
  .channel-list .badge { font-size: 9px; }
  .notice { padding: 11px 12px; font-size: 12px; }
  .alerts-list { padding: 0 16px; }
  .alerts-list > div { flex-wrap: wrap; gap: 10px; }
  .alerts-list > div > div { flex: 1; min-width: 0; }
  .alerts-list button { margin-left: 28px; }
  .test-guide { padding: 0 17px 15px; }
  .test-guide p { font-size: 11px; }
  .boundary { padding: 6px 17px 15px; }
  .boundary p { font-size: 11px; }
  .channel-distribution { display: block; padding: 18px 16px; }
  .channel-bar { gap: 10px; font-size: 11px; }
  .trend-chart { padding: 18px 16px; }
  .review-workspace { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 12px; }
  .review-queue { max-height: 320px; overflow-y: auto; padding: 12px; }
  .review-item { padding: 13px; }
  .review-detail { padding: 16px; }
  .review-proof { min-height: 180px; padding: 9px; }
  .review-proof img { max-height: 300px; }
  .review-facts { gap: 14px 16px; }
  .review-detail .row-actions { flex-wrap: wrap; }
  .review-detail .row-actions button { flex: 1; min-height: 42px; }
  .mobile-tasks { gap: 16px; margin-bottom: 16px; }
  .task-card { padding: 19px 17px; }
  .task-card h2, .task-card h3 { font-size: 16px; }
  .task-heading { gap: 9px; }
  .task-heading .text-button { font-size: 11px; }
  .task-actions { flex-direction: column; }
  .task-actions > a, .task-actions > button { min-height: 44px; }
  .creator-report-list { grid-template-columns: minmax(0, 1fr); padding: 12px; gap: 12px; }
  .task-card > .primary, .task-card > .secondary { display: flex; width: 100%; min-height: 44px; }
  .task-card .row-actions { flex-direction: column; gap: 10px; }
  .task-card .row-actions .primary, .task-card .row-actions .secondary { min-height: 44px; }
  .creator-earnings { gap: 16px; padding: 20px 17px; }
  .creator-earnings span { font-size: 11px; }
  .creator-earnings strong { font-size: 24px; }
  .role-C .page-content { padding-top: 22px; }
}
@media (max-width: 375px) {
  .topbar { padding: 0 12px; }
  .breadcrumb { font-size: 10px; }
  .breadcrumb strong, .breadcrumb > span { display: none; }
  .top-actions .avatar { display: none; }
  .role-switch select { max-width: 140px; }
  .page-content { padding-left: 12px; padding-right: 12px; }
  .stat { padding: 14px 11px; }
  .stat > strong { font-size: 23px; }
  .tabs button { padding: 7px 6px; font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* A separate, unmistakable viewing mode. This is a UI guard, not an account login. */
.preview-banner { position: sticky; top: 0; z-index: 15; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 17px 32px; border-bottom: 1px solid #d7a14b; color: #ffe8be; background: #49371f; box-shadow: 0 5px 18px #030c1840; }
.preview-banner > div { min-width: 0; }
.preview-banner strong { display: block; font-size: 15px; overflow-wrap: anywhere; }
.preview-banner p { margin-top: 5px; font-size: 11px; line-height: 1.7; color: #e6d2b0; }
.preview-banner > button { flex-shrink: 0; border-color: #c79d59; color: #fff1d9; background: #684b29; min-height: 40px; }
.member-link { padding: 0; text-align: left; color: #8debf1; font-size: 12px; line-height: 1.7; font-weight: 600; background: transparent; text-decoration: underline; text-underline-offset: 3px; }
.member-link:hover { color: #d6ffff; }
.member-profile { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 22px; }
.member-profile div { min-width: 0; }
.member-profile dt { font-size: 11px; color: var(--muted); }
.member-profile dd { margin: 6px 0 0; font-size: 13px; overflow-wrap: anywhere; }
.is-preview .role-switch select { cursor: not-allowed; opacity: .7; }
@media (max-width: 940px) { .member-profile { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) {
  .preview-banner { flex-direction: column; align-items: stretch; gap: 12px; padding: 14px 16px; }
  .preview-banner strong { font-size: 14px; }
  .preview-banner > button { min-height: 44px; width: 100%; }
  .member-profile { padding: 17px; gap: 17px; }
  .member-profile > div:last-child { grid-column: 1 / -1; }
}

/* Inventory is a manual test plan. These panels never control file retention. */
.inventory-notice { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 0 0 22px; padding: 18px 22px; border: 1px solid #2e687c; border-radius: 9px; background: #102f40; }
.inventory-notice > div { min-width: 0; }
.inventory-notice strong { color: #baf7ec; font-size: 14px; }
.inventory-notice p { margin-top: 7px; color: #a4c1d4; font-size: 12px; line-height: 1.8; }
.inventory-notice.is-low { border-color: #8f6a39; background: #382e28; }
.inventory-notice.is-low strong { color: #ffdb9b; }
.inventory-content { padding: 22px; }
.inventory-summary, .inventory-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 18px; margin: 0; }
.inventory-summary { padding-bottom: 22px; border-bottom: 1px solid #2c4d66; }
.inventory-summary > div, .inventory-metrics > div { min-width: 0; }
.inventory-summary dt, .inventory-metrics dt { color: #b6cede; font-size: 12px; }
.inventory-summary dd, .inventory-metrics dd { margin: 9px 0 0; color: #e2f9f9; font-size: 22px; font-weight: 650; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.inventory-summary p, .inventory-metrics p { margin-top: 7px; color: #9ab7ca; font-size: 11px; line-height: 1.7; }
.inventory-channel-list { display: grid; gap: 16px; padding-top: 22px; }
.inventory-channel { min-width: 0; padding: 20px; border: 1px solid #30536b; border-radius: 8px; background: #0e2437; }
.inventory-channel.is-low { border-color: #9a7446; }
.inventory-channel-heading { display: flex; align-items: start; justify-content: space-between; gap: 14px; margin-bottom: 23px; }
.inventory-channel-heading > div { min-width: 0; }
.inventory-channel h3 { color: #edf7ff; font-size: 14px; line-height: 1.7; overflow-wrap: anywhere; }
.inventory-channel-heading p { margin-top: 5px; color: #9ab6cb; font-size: 11px; line-height: 1.6; }
.inventory-metrics dd { font-size: 19px; }
.inventory-detail { margin-top: 19px; color: #9cbace; font-size: 11px; line-height: 1.8; }
.inventory-channel-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 17px; }
.inventory-help { margin-top: 24px; padding: 17px 19px; border: 1px solid #335970; border-radius: 7px; background: #153347; }
.inventory-help strong { color: #c2eded; font-size: 13px; line-height: 1.7; }
.inventory-help ol { padding-left: 20px; margin: 11px 0; color: #b5cfde; font-size: 12px; line-height: 1.9; }
.inventory-help p { color: #9cbace; font-size: 11px; line-height: 1.9; }
@media (max-width: 940px) {
  .inventory-summary, .inventory-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
}
@media (max-width: 620px) {
  .inventory-content { padding: 16px; }
  .inventory-notice { flex-direction: column; align-items: stretch; padding: 16px; margin-bottom: 16px; }
  .inventory-notice button { min-height: 44px; }
  .inventory-channel { padding: 16px; }
  .inventory-channel-heading { flex-wrap: wrap; margin-bottom: 20px; }
  .inventory-channel-actions { flex-direction: column; }
  .inventory-channel-actions button { min-height: 44px; white-space: normal; }
  .inventory-summary, .inventory-metrics { gap: 18px 13px; }
  .inventory-summary dd { font-size: 20px; }
  .inventory-metrics dd { font-size: 18px; }
  .inventory-help { padding: 15px; }
}
.retention-banner { border-color: #8f6a39; background: #382e28; color: #ffd391; }
.retention-banner strong { color: #ffe1a9; }
.retention-banner p { color: #d8c8b2; }

/* Creator workspace: one task, one status, one monthly summary. */
.creator-shell { display: block; }
.creator-shell main { width: 100%; margin-left: 0; padding-bottom: calc(86px + env(safe-area-inset-bottom)); }
.creator-shell .page-content { max-width: 740px; padding: 22px 24px 0; }
.creator-topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 740px; height: 68px; padding: 0 24px; margin: 0 auto; }
.creator-wordmark { display: inline-flex; align-items: center; gap: 10px; min-width: 0; font-size: 15px; font-weight: 650; }
.creator-wordmark > span { color: #64e8e6; font-size: 24px; }
.creator-tools { display: flex; align-items: center; gap: 8px; }
.creator-tools .icon-button, .creator-menu > summary { min-height: 44px; min-width: 40px; }
.creator-menu { position: relative; z-index: 30; }
.creator-menu > summary { display: grid; place-items: center; border-radius: 7px; color: #b2c9de; cursor: pointer; list-style: none; letter-spacing: 2px; }
.creator-menu > summary::-webkit-details-marker { display: none; }
.creator-menu > summary:hover, .creator-menu[open] > summary { background: #16344b; }
.creator-menu > summary:focus-visible, .announcement-item > summary:focus-visible { outline: 3px solid #6ef9ff; outline-offset: 3px; }
.creator-menu-content { position: absolute; right: 0; top: calc(100% + 6px); width: min(300px,calc(100vw - 32px)); padding: 20px; border: 1px solid #365973; border-radius: 12px; background: #11253a; box-shadow: 0 16px 45px #0007; }
.creator-menu-content > strong { display: block; margin-bottom: 18px; overflow-wrap: anywhere; }
.creator-menu-content .role-switch label { margin-bottom: 7px; font-size: 11px; }
.creator-menu-content .role-switch select { width: 100%; max-width: 100%; min-height: 44px; padding: 9px; border: 1px solid #375c76; border-radius: 7px; font-size: 13px; background: #0b1c2d; }
.creator-menu-content > button { width: 100%; margin-top: 16px; min-height: 44px; }
.creator-menu-content > p { margin-top: 13px; color: #a3b9ca; font-size: 11px; }
.creator-sandbox { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 32px; padding: 6px 16px; color: #a4bbca; background: #0e2533; font-size: 11px; }
.creator-sandbox > span { color: #9fe1d5; }
.creator-page-heading { margin-bottom: 18px; gap: 12px; }
.creator-page-heading h1 { font-size: 25px; }
.creator-page-heading p { margin-top: 5px; color: #9bb2c7; font-size: 11px; }
.creator-home { grid-template-columns: minmax(0,1fr); gap: 14px; }
.announcement-shortcut { display: flex; align-items: center; gap: 13px; width: 100%; min-height: 68px; padding: 14px 18px; text-align: left; color: #c9ddeb; border: 1px solid #29485e; border-radius: 12px; background: #102437; }
.announcement-shortcut:hover { border-color: #43949f; background: #142c40; }
.announcement-shortcut-icon { flex-shrink: 0; color: #6ad4cd; font-size: 21px; }
.announcement-shortcut > span:nth-child(2) { display: grid; gap: 3px; flex: 1; min-width: 0; }
.announcement-shortcut strong { color: #e3f0fa; font-size: 12px; font-weight: 650; }
.announcement-shortcut strong small { margin-left: 4px; color: #9bb5c8; font-size: 10px; font-weight: 400; }
.announcement-shortcut > span:nth-child(2) > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: #9bb5c8; }
.announcement-shortcut > span:last-child { color: #789bb3; font-size: 21px; }
.creator-home .task-card { padding: 21px 22px; border-radius: 13px; border-color: #2b4a61; background: #11273a; box-shadow: none; }
.creator-home .task-card h2 { font-size: 15px; }
.creator-home .task-heading { margin: 0; }
.creator-task-count { font-size: 11px; color: #a6c7d7; }
.creator-home .creator-daily { border-color: #327982; background: #11313e; }
.creator-home .creator-material-title { margin-top: 14px; color: #ecf8ff; font-size: 17px; line-height: 1.55; overflow-wrap: anywhere; }
.creator-home .creator-task-subtitle { margin-top: 4px; font-size: 11px; color: #99b9ca; }
.creator-daily-actions { display: flex; align-items: center; gap: 18px; margin-top: 18px; }
.creator-main-action { flex: 1; min-height: 46px; border-radius: 8px; font-size: 14px; box-shadow: none; background: #45d8cf; border-color: #68ece2; }
.creator-home .task-hint { margin-top: 10px; color: #a3bfce; font-size: 10px; }
.creator-status-line { display: flex; align-items: center; gap: 9px; margin-top: 14px; }
.creator-status-line strong { min-width: 0; color: #e2edf7; font-size: 14px; font-weight: 550; }
.creator-status-line .badge { margin: 0 0 0 auto; font-size: 9px; }
.status-orb { width: 7px; height: 7px; flex-shrink: 0; border-radius: 50%; background: #8babc2; }
.status-orb.human_pending, .status-orb.ai_pending { background: #f4c276; }
.status-orb.approved { background: #6fe3b4; }
.status-orb.rejected { background: #f698a9; }
.creator-home .creator-status-note { margin-top: 7px; color: #a0b9cc; font-size: 11px; }
.creator-home .creator-report-reference { margin-top: 6px; color: #91a8ba; font-size: 10px; overflow-wrap: anywhere; }
.creator-home .creator-submit-action { width: 100%; min-height: 44px; margin-top: 15px; border-radius: 8px; color: #baf5ee; border-color: #427a85; background: #173b4c; }
.creator-home .creator-earnings { display: block; }
.creator-home .creator-earnings .task-heading > span { font-size: 10px; color: #9bb5c8; }
.creator-money { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; margin: 20px 0 15px; }
.creator-money > div { min-width: 0; }
.creator-money dt { font-size: 11px; color: #9db6c9; }
.creator-money dd { margin: 5px 0 0; font-size: clamp(22px,4.8vw,30px); line-height: 1.2; font-weight: 650; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; color: #edf6ff; }
.creator-money > div:last-child dd { color: #8ceada; }
.creator-earnings-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px solid #2b4659; padding-top: 11px; }
.creator-home .creator-earnings-foot p { font-size: 10px; color: #9ab4c6; }
.creator-earnings-foot .text-button { font-size: 11px; }
.creator-footer { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 14px 0 20px; color: #8fa9bd; font-size: 10px; }
.creator-footer .text-button { font-size: 10px; }
.creator-shell .preview-banner { position: relative; }

/* Announcements are persisted simulated posts, never outbound notifications. */
.announcement-list { padding: 0 22px; }
.announcement-item { padding: 20px 0; border-bottom: 1px solid #2b455d; }
.announcement-item:last-child { border-bottom: 0; }
.announcement-item > summary { display: flex; align-items: center; justify-content: space-between; gap: 15px; cursor: pointer; list-style: none; }
.announcement-item > summary::-webkit-details-marker { display: none; }
.announcement-item > summary > div { flex: 1; min-width: 0; }
.announcement-item > summary > span { color: #89b0c7; transition: transform .15s; }
.announcement-item[open] > summary > span { transform: rotate(180deg); }
.announcement-meta { display: flex; flex-wrap: wrap; gap: 8px 15px; color: #92b0c6; font-size: 10px; }
.announcement-meta span { color: #8adace; overflow-wrap: anywhere; }
.announcement-item h3 { margin-top: 7px; color: #edf7ff; font-size: 15px; line-height: 1.6; font-weight: 600; overflow-wrap: anywhere; }
.announcement-body { margin-top: 16px; color: #c0d3e2; font-size: 13px; line-height: 1.9; white-space: pre-wrap; overflow-wrap: anywhere; }
.announcement-author { margin-top: 17px; color: #90a9bf; font-size: 10px; }
.announcement-form-notice { padding: 13px 15px; border: 1px solid #377279; border-radius: 8px; background: #113c47; }
.announcement-form-notice strong { color: #b8f4e9; font-size: 12px; }
.announcement-form-notice p { margin-top: 6px; color: #b5d6df; font-size: 11px; line-height: 1.7; }
.announcement-team-options { margin: 20px 0 0; padding: 0; border: 0; }
.announcement-team-options legend { margin-bottom: 9px; color: #b5cee1; font-size: 12px; }
.announcement-team-options > label { display: flex; align-items: center; gap: 12px; margin-top: 8px; padding: 13px 12px; border: 1px solid #31556d; border-radius: 7px; background: #10283b; cursor: pointer; }
.modal .announcement-team-options input[type=checkbox] { display: block; flex-shrink: 0; width: 20px; height: 20px; margin: 0; padding: 0; }
.announcement-team-options strong { display: block; font-size: 12px; font-weight: 550; }
.announcement-team-options small { display: block; margin-top: 4px; color: #9cb6c9; font-size: 10px; }
@media (max-width: 620px) {
  .creator-topbar { height: 58px; padding: 0 18px; }
  .creator-wordmark { font-size: 14px; }
  .creator-shell .page-content { padding: 19px 16px 0; }
  .creator-page-heading { margin-bottom: 16px; }
  .creator-page-heading h1 { font-size: 23px; }
  .creator-home { gap: 12px; }
  .announcement-shortcut { min-height: 62px; padding: 12px 16px; }
  .creator-home .task-card { padding: 18px; }
  .creator-home .creator-material-title { font-size: 16px; }
  .creator-daily-actions { gap: 14px; margin-top: 15px; }
  .creator-daily-actions .text-button { font-size: 11px; }
  .creator-home .task-heading h2 { font-size: 14px; }
  .creator-status-line strong { font-size: 13px; }
  .creator-status-line .badge { display: none; }
  .creator-home .creator-status-note { line-height: 1.65; }
  .creator-money { margin-top: 18px; }
  .creator-earnings-foot { align-items: flex-start; }
  .creator-home .creator-earnings-foot p { max-width: 230px; line-height: 1.7; }
  .announcement-list { padding: 0 16px; }
  .announcement-item { padding: 18px 0; }
  .announcement-body { font-size: 13px; }
}
@media (max-width: 375px) {
  .creator-shell .page-content { padding-left: 12px; padding-right: 12px; }
  .creator-home .task-card { padding: 16px; }
  .creator-money dd { font-size: 22px; }
  .creator-sandbox { gap: 7px; font-size: 10px; }
}

/* Category selection exposes no unassigned video metadata. */
.game-claim-picker { padding: 20px; }
.creator-daily > .game-claim-picker { padding: 16px 0 0; }
.game-claim-picker > label { display: block; margin-bottom: 9px; font-size: 13px; color: #d8eaf5; }
.game-claim-picker > input { width: 100%; min-height: 46px; border: 1px solid #42647b; border-radius: 8px; padding: 12px; background: #0e2639; color: #eef9ff; font: inherit; }
.game-claim-picker > input:focus { outline: 2px solid #10d5df; outline-offset: 2px; }
.game-category-options { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.game-category { border: 1px solid #3d5d72; border-radius: 8px; padding: 10px 12px; text-align: left; color: #d6e7f2; background: #142e43; overflow-wrap: anywhere; }
.game-category small { display: block; font-size: 10px; color: #a9c2d2; margin-top: 5px; }
.game-category.selected { border-color: #10d5df; background: #164454; }
.game-claim-picker .task-hint { margin: 14px 0; line-height: 1.7; }
.claim-rule { font-size: 11px; color: #a9c2d2; line-height: 1.8; margin-top: 12px; }
.creator-assigned { padding-top: 20px; margin-top: 20px; border-top: 1px solid #315269; }
.creator-assigned > a { display: inline-flex; margin-top: 12px; }
.assigned-task-list { padding: 0 20px; }
.assigned-task { display: flex; justify-content: space-between; gap: 18px; padding: 20px 0; border-bottom: 1px solid #29485e; }
.assigned-task:last-child { border: 0; }
.assigned-task h3 { margin: 12px 0 7px; font-size: 15px; overflow-wrap: anywhere; }
.assigned-task p { color: #a9c2d2; font-size: 11px; }
.assigned-task .row-actions { flex-wrap: wrap; align-content: center; }
@media (max-width: 620px) {
 .assigned-task { flex-direction: column; }
 .game-claim-picker > input { font-size: 16px; }
 .game-claim-picker { padding: 16px; }
 .game-category { flex: 1 1 125px; }
}

/* One C screen: the active task stays visible; secondary content expands in place. */
.creator-shell main { padding-bottom: env(safe-area-inset-bottom); }
.creator-shell .page-content, .creator-topbar { max-width: 680px; }
.creator-single-screen { gap: 14px; }
.creator-disclosure { min-width: 0; border: 1px solid #29485e; border-radius: 11px; background: #102437; }
.creator-disclosure > summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 58px; padding: 14px 20px; cursor: pointer; list-style: none; }
.creator-disclosure > summary::-webkit-details-marker, .creator-note > summary::-webkit-details-marker { display: none; }
.creator-disclosure > summary:focus-visible, .creator-note > summary:focus-visible { outline: 3px solid #6ef9ff; outline-offset: 3px; }
.creator-disclosure > summary > span:first-child { min-width: 0; }
.creator-disclosure > summary strong { display: block; color: #d8eaf5; font-size: 13px; font-weight: 600; }
.creator-disclosure > summary small { display: block; margin-top: 3px; color: #9bb5c8; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.creator-disclosure > summary > span:last-child { color: #84b2c5; }
.creator-disclosure[open] > summary > span:last-child { transform: rotate(180deg); }
.creator-disclosure[open] > summary { border-bottom: 1px solid #29485e; }
.creator-disclosure-body { min-width: 0; }
.creator-quiet, .creator-history-total { padding: 16px 20px; color: #9db8ca; font-size: 11px; line-height: 1.9; overflow-wrap: anywhere; }
.creator-active-task { padding-top: 20px; }
.creator-task-identity { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.creator-task-identity > div { min-width: 0; }
.creator-task-identity h3 { color: #ecf7ff; font-size: 16px; line-height: 1.6; overflow-wrap: anywhere; }
.creator-task-identity p { margin-top: 5px; color: #9dbccb; font-size: 11px; overflow-wrap: anywhere; }
.creator-task-identity a { flex-shrink: 0; min-height: 44px; }
.creator-report-form { margin-top: 19px; padding-top: 18px; border-top: 1px solid #315269; }
.creator-report-form fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.creator-report-form legend { margin-bottom: 14px; padding: 0; color: #e1eff8; font-size: 14px; font-weight: 600; }
.creator-report-form label { display: block; color: #b8d1df; font-size: 12px; }
.creator-report-form input:not([type=file]):not([type=hidden]), .creator-report-form textarea { display: block; width: 100%; margin-top: 8px; padding: 11px 12px; border: 1px solid #3b607c; border-radius: 7px; color: #e3f6ff; background: #0b2036; font-size: 16px; }
.creator-report-form input:disabled, .creator-report-form textarea:disabled { opacity: .6; }
.creator-report-form textarea { min-height: 76px; resize: vertical; }
.creator-report-form .creator-upload { margin-top: 15px; }
.creator-upload input { display: block; width: 100%; min-width: 0; margin-top: 8px; font-size: 12px; }
.creator-upload small { display: block; margin-top: 8px; color: #8fadbF; font-size: 10px; overflow-wrap: anywhere; }
.creator-note { margin-top: 15px; }
.creator-note > summary { cursor: pointer; color: #9bc2d3; font-size: 11px; list-style: none; padding: 5px 0; }
.creator-report-form .form-help { font-size: 10px; margin-top: 12px; }
.creator-report-form .creator-main-action, .creator-daily > .game-claim-picker .creator-main-action { width: 100%; margin-top: 13px; min-height: 46px; }
.creator-return { margin-top: 14px; }
.creator-income-note { color: #9ab4c6; font-size: 10px; line-height: 1.8; }
.creator-history-tasks { padding: 0 20px; }
.creator-history-task { padding: 16px 0; border-top: 1px solid #29485e; }
.creator-history-task strong { display: block; font-size: 13px; color: #e2edf5; overflow-wrap: anywhere; }
.creator-history-task p { margin-top: 5px; color: #9ab5c8; font-size: 11px; }
.creator-history-task .row-actions { display: flex; flex-wrap: wrap; margin-top: 12px; }
.creator-history-task .row-actions > * { min-height: 44px; }
.creator-disclosure .creator-report-list { display: grid; grid-template-columns: minmax(0,1fr); gap: 12px; padding: 16px; }
.creator-disclosure .creator-report-list .task-card { border-radius: 8px; padding: 16px; }
.creator-disclosure .creator-report-list h3 { font-size: 13px; }
.creator-disclosure .creator-report-list .review-facts { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.creator-disclosure .creator-report-list .review-facts strong { font-size: 12px; overflow-wrap: anywhere; }
.creator-footer { display: block; padding-top: 0; }
.creator-footer .creator-disclosure { border-color: transparent; background: transparent; }
.creator-footer .creator-disclosure > summary { min-height: 44px; padding: 12px 4px; }
.creator-footer .creator-disclosure > summary strong { color: #8fa9bd; font-size: 11px; font-weight: 400; }
.creator-footer .role-switch { padding: 18px 20px; }
.creator-footer .role-switch label { margin-bottom: 7px; font-size: 11px; }
.creator-footer .role-switch select { width: 100%; max-width: 100%; min-height: 44px; padding: 9px; border: 1px solid #375c76; border-radius: 7px; font-size: 13px; background: #0b1c2d; }
.creator-footer .panel { margin: 0; background: transparent; border: 0; box-shadow: none; }
.creator-footer .panel-heading { padding: 12px 20px; }
.creator-footer .panel-heading h2 { font-size: 13px; }
.creator-footer .member-profile { grid-template-columns: repeat(2,minmax(0,1fr)); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 620px) {
 .creator-topbar { height: 56px; }
 .creator-shell .page-content { padding-top: 17px; }
 .creator-page-heading h1 { font-size: 22px; }
 .creator-disclosure > summary { padding: 13px 17px; }
 .creator-task-identity { flex-direction: column; align-items: stretch; gap: 12px; }
 .creator-active-task { padding-top: 16px; }
 .creator-disclosure .creator-report-list .review-facts { grid-template-columns: repeat(2,minmax(0,1fr)); }
 .creator-history-task .row-actions > * { flex: 1; }
 .creator-home .game-category { flex: 1 1 calc(50% - 8px); padding: 9px 11px; }
 .creator-home .game-claim-picker .task-hint { font-size: 11px; }
 .creator-home .claim-rule { font-size: 10px; }
 .creator-sandbox { flex-wrap: wrap; row-gap: 2px; }
 .creator-money { margin-top: 16px; margin-bottom: 12px; }
}

/* Account-wide first-claim qualification, separate from daily revenue review. */
.badge.upstream_pending { color: #ffd189; background: #49371e; border-color: #73532b; }
.badge.ops_pending { color: #a6cdff; background: #233d67; border-color: #395c8d; }
.creator-qualification { padding-top: 18px; }
.qualification-intro { color: #c5dde9; font-size: 13px; line-height: 1.9; }
.qualification-flow { margin-top: 9px; color: #8fc4cc; font-size: 11px; line-height: 1.9; }
.qualification-summary { padding-top: 16px; }
.qualification-version { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #b8d4e2; font-size: 11px; }
.qualification-version small { display: block; margin-top: 5px; color: #8baabe; font-size: 10px; overflow-wrap: anywhere; }
.qualification-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; margin: 18px 0; }
.qualification-facts > div { min-width: 0; }
.qualification-facts dt { color: #8daec2; font-size: 11px; }
.qualification-facts dd { margin: 5px 0 0; color: #e0edf6; font-size: 13px; line-height: 1.7; overflow-wrap: anywhere; white-space: pre-wrap; }
.qualification-proof-status { color: #a7c6d6; font-size: 11px; line-height: 1.8; }
.qualification-proof-status .text-button { margin-left: 4px; min-height: 36px; }
.qualification-review-notes p { margin-top: 10px; color: #b4ccd9; font-size: 12px; line-height: 1.8; overflow-wrap: anywhere; white-space: pre-wrap; }
.qualification-review-notes small { display: block; margin-top: 3px; color: #8baabe; font-size: 10px; }
.qualification-review-notes .qualification-rejection { border: 1px solid #82506a; border-radius: 7px; padding: 12px; color: #ffcad1; background: #51283c66; }
.qualification-inputs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.qualification-inputs label { min-width: 0; line-height: 1.7; }
.qualification-wait { margin-top: 18px; padding: 15px; border: 1px solid #2a6979; border-radius: 8px; background: #12394a; }
.qualification-wait strong { color: #b0f5ed; font-size: 13px; }
.qualification-wait p { color: #a5c9d6; font-size: 11px; margin-top: 8px; line-height: 1.8; }
.qualification-wait .text-button { min-height: 36px; }
.qualification-history { padding: 0 20px 18px; }
.qualification-history article + article, .qualification-past article + article { margin-top: 18px; padding-top: 2px; border-top: 1px solid #2a4c62; }
.qualification-review-content { min-width: 0; padding: 0 22px 22px; }
.qualification-review-content .review-proof { padding: 0; margin: 16px 0; }
.qualification-review-content .review-actions { padding: 16px 0 0; flex-wrap: wrap; }
.qualification-review-content .review-actions .muted { font-size: 12px; line-height: 1.8; white-space: normal; }
.qualification-past { margin-top: 22px; border-top: 1px solid #2a4c62; }
.qualification-past > summary { padding: 16px 0; color: #a8c9d9; cursor: pointer; font-size: 12px; }
.qualification-overview-notice { margin-bottom: 20px; }
@media (max-width: 620px) {
 .qualification-inputs { grid-template-columns: minmax(0, 1fr); gap: 13px; }
 .qualification-review-content { padding: 0 16px 18px; }
 .qualification-review-content .review-actions > button { flex: 1 1 160px; min-height: 44px; }
 .qualification-facts { gap: 12px; }
 .qualification-facts dd { font-size: 12px; }
 .qualification-history { padding: 0 17px 16px; }
 .qualification-version { align-items: flex-start; }
}
.qualification-image-error { padding: 26px 20px; text-align: left; color: #ffd0d5; background: #462737; border: 1px solid #82506a; border-radius: 8px; }
.qualification-image-error strong { font-size: 14px; }
.qualification-image-error p { margin-top: 10px; color: #dabecb; font-size: 12px; line-height: 1.9; }
.qualification-draft-proof { margin-top: 10px; }
.qualification-draft-error { color: #ffc1c4; font-size: 11px; line-height: 1.8; }

.screenshot-modal > .qualification-image-error { display: block; }

/* Demo-only exit is visible on every role, including C's single-screen workspace. */
.demo-exit-button { min-height: 38px; padding: 8px 12px; color: var(--muted); flex-shrink: 0; }
.creator-top-actions { display: flex; align-items: center; gap: 8px; }
.demo-entry { display: grid; place-items: center; min-height: 100vh; min-height: 100dvh; margin: 0; padding: 28px 20px; }
.demo-entry-card { width: 100%; max-width: 520px; padding: 32px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); box-shadow: 0 16px 60px #0003; }
.demo-entry-card > .brand-mark { margin-bottom: 24px; }
.demo-entry-card > p { color: var(--muted); margin-top: 14px; }
.demo-entry-boundary { margin: 24px 0; padding: 18px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); }
.demo-entry-boundary strong { color: var(--teal-soft); }
.demo-entry-boundary p { color: var(--muted); font-size: 13px; margin-top: 10px; }
.demo-entry-actions { display: grid; gap: 10px; }
.demo-exit-dialog #demo-exit-description p + p { margin-top: 16px; }
.demo-exit-dialog #demo-exit-description { color: var(--muted); line-height: 1.8; }
.demo-exit-overlay { z-index: 110; }
@media (max-width: 940px) { .demo-exit-button .demo-exit-suffix { display: none; } }
@media (max-width: 620px) { .demo-entry-card { padding: 24px 20px; } .demo-entry h1 { font-size: 24px; } .demo-exit-dialog .modal-footer { flex-wrap: wrap; } .demo-exit-dialog .modal-footer button { flex: 1 1 150px; } .creator-top-actions { gap: 4px; } }
@media (max-width: 620px) { .demo-exit-button { min-width: 44px; min-height: 44px; } .demo-exit-dialog button, .demo-entry-actions button { min-height: 44px; } }

/* C stays on one page: comfortable phone controls and a wider desktop work area. */
.creator-shell { font-size: 15px; line-height: 1.65; }
.creator-shell .page-content, .creator-topbar { max-width: 780px; }
.creator-topbar { min-height: 68px; height: auto; padding-top: 8px; padding-bottom: 8px; }
.creator-top-actions > button { min-width: 44px; min-height: 44px; }
.creator-shell :is(button, a.secondary, a.primary, select) { min-height: 44px; }
.creator-shell :is(.text-button, .secondary, .primary, .game-category) { font-size: 14px; }
.creator-shell :is(.text-button, .icon-button) { min-width: 44px; }
.creator-shell .notice button { min-width: 44px; min-height: 44px; flex-shrink: 0; }
.creator-shell .creator-page-heading h1 { font-size: 28px; }
.creator-shell :is(.creator-page-heading p, .creator-task-subtitle, .creator-status-note, .creator-report-reference, .creator-task-identity p, .creator-history-task p, .creator-quiet, .creator-history-total, .creator-income-note, .claim-rule, .task-hint, .form-help, .qualification-flow, .qualification-proof-status, .qualification-wait p, .qualification-review-notes p, .qualification-draft-error) { font-size: 13px; line-height: 1.8; }
.creator-shell .game-claim-picker .task-hint, .creator-shell .creator-report-form .form-help { font-size: 13px; }
.creator-shell :is(.creator-sandbox, .creator-task-count, .creator-money dt, .creator-earnings .task-heading > span, .creator-status-line .badge, .qualification-version, .qualification-version small, .qualification-facts dt, .qualification-review-notes small, .announcement-meta, .announcement-author, .creator-disclosure > summary small, .creator-upload small, .game-category small, .review-facts span, .member-profile dt) { font-size: 12px; line-height: 1.7; }
.creator-shell .creator-sandbox { gap: 4px 12px; padding: 8px 16px; flex-wrap: wrap; }
.creator-shell :is(.creator-home .task-heading h2, .creator-report-form legend) { font-size: 17px; }
.creator-shell :is(.creator-disclosure > summary strong, .creator-history-task strong, .creator-disclosure .creator-report-list h3) { font-size: 15px; }
.creator-shell :is(.creator-report-form label, .qualification-facts dd, .qualification-wait strong, .creator-disclosure .creator-report-list .review-facts strong, .creator-status-line strong, .announcement-body) { font-size: 14px; line-height: 1.75; }
.creator-shell .creator-upload input { min-height: 48px; padding: 0; font-size: 16px; line-height: 1.6; color: #bdd3e3; }
.creator-shell .creator-upload input::file-selector-button { min-height: 44px; max-width: 100%; margin-right: 10px; padding: 10px 12px; border: 1px solid #42647b; border-radius: 7px; background: #17364d; color: #e3f6ff; font: inherit; cursor: pointer; }
.creator-shell .creator-upload input:focus-visible { outline: 3px solid #6ef9ff; outline-offset: 3px; }
.creator-shell .creator-note > summary { display: flex; align-items: center; min-height: 44px; padding: 10px 0; font-size: 14px; }
.creator-shell .creator-note > summary::after { content: '＋'; margin-left: auto; padding: 0 8px; font-size: 18px; }
.creator-shell .creator-note[open] > summary::after { content: '−'; }
.creator-shell .creator-report-form textarea { min-height: 112px; }
.creator-shell .creator-report-form input:not([type=file]):not([type=hidden]) { min-height: 48px; }
.creator-shell .creator-main-action { min-height: 48px; font-size: 15px; }
.creator-shell .creator-disclosure > summary { min-height: 60px; }
.creator-shell .creator-disclosure > summary small { white-space: normal; overflow-wrap: anywhere; }
.creator-shell .creator-footer :is(.role-switch label, .creator-disclosure > summary strong) { font-size: 13px; }
.creator-shell .creator-footer .role-switch select { font-size: 16px; }
.creator-shell .creator-history-task .row-actions { gap: 10px; }
.creator-shell .creator-money dd { font-size: clamp(24px, 4.8vw, 32px); }
.creator-shell .preview-banner { max-width: 1120px; margin: 0 auto; }
.creator-shell .preview-banner p { font-size: 13px; }
.creator-shell .creator-home .creator-earnings { min-width: 0; }
@media (min-width: 1000px) {
 .creator-shell .page-content, .creator-topbar { max-width: 1120px; }
 .creator-shell .page-content { padding-top: 28px; }
 .creator-shell .creator-single-screen { grid-template-columns: minmax(0, 1.65fr) minmax(300px, 1fr); gap: 20px; }
 .creator-single-screen > [data-creator-details="announcements"] { grid-column: 1 / -1; }
 .creator-single-screen > #creator-task { grid-column: 1; grid-row: 2 / span 3; }
 .creator-single-screen > .creator-earnings, .creator-single-screen > .creator-disclosure:not([data-creator-details="announcements"]) { grid-column: 2; }
 .creator-shell .creator-home .task-card { padding: 24px; }
 .creator-shell .creator-disclosure .creator-report-list .review-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 .creator-shell .creator-footer .member-profile { grid-template-columns: repeat(3, minmax(0, 1fr)); }
 .creator-shell .creator-footer { margin-top: 20px; }
}
@media (max-width: 620px) {
 .creator-topbar { min-height: 64px; padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); gap: 8px; }
 .creator-wordmark { gap: 7px; font-size: 15px; }
 .creator-top-actions { gap: 6px; }
 .creator-shell .page-content { padding: 20px max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left)); }
 .creator-shell .creator-page-heading h1 { font-size: 25px; }
 .creator-shell .creator-home { gap: 16px; }
 .creator-shell .creator-home .task-card { padding: 20px 16px; }
 .creator-shell .creator-disclosure > summary { padding: 15px 16px; }
 .creator-shell .creator-note { margin-top: 16px; }
 .creator-shell .creator-history-task .row-actions > * { flex: 1 1 120px; white-space: normal; }
 .creator-shell .creator-status-line { align-items: flex-start; }
 .creator-shell .creator-status-line .status-orb { margin-top: 9px; }
 .creator-shell .qualification-facts { grid-template-columns: minmax(0, 1fr); gap: 16px; }
 .creator-shell .creator-money { gap: 12px; }
 .creator-shell .creator-footer .member-profile { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 375px) {
 .creator-topbar { padding-left: 12px; padding-right: 12px; }
 .creator-shell .page-content { padding-left: 12px; padding-right: 12px; }
 .creator-shell .creator-home .task-card { padding: 18px 14px; }
 .creator-shell .creator-money dd { font-size: 24px; }
}

/* Native dropdowns retain keyboard/phone picker support and a visible down arrow. */
.creator-report-form select { display: block; width: 100%; min-width: 0; min-height: 48px; margin-top: 8px; padding: 11px 38px 11px 12px; border: 1px solid #3b607c; border-radius: 7px; color: #e3f6ff; background-color: #0b2036; font-size: 16px; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%23b8d1df' stroke-width='1.8'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
.creator-report-form select:disabled { opacity: .65; cursor: not-allowed; }
.qualification-choice-help { display: block; margin-top: 7px; color: #9db8ca; font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; }
.qualification-choice-stale { display: block; color: #f1c38c; }
.backend-settings { padding: 0 22px 22px; color: #a7c2d4; font-size: 13px; line-height: 1.8; overflow-wrap: anywhere; }
.backend-list { margin-top: 16px; }
.backend-list article { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 0; border-top: 1px solid #29485e; }
.backend-list article > div:first-child { min-width: 0; }
.backend-list strong, .backend-games > strong { color: #dcecf7; }
.backend-list small { display: block; color: #8fadc3; }
.backend-list .row-actions { flex-shrink: 0; flex-wrap: wrap; }
.backend-empty { margin-top: 15px; padding: 14px; border: 1px solid #36596d; border-radius: 7px; }
.backend-games { margin-top: 18px; border-top: 1px solid #29485e; padding-top: 14px; }
.backend-games small { display: block; }
@media (max-width: 620px) { .backend-settings { padding: 0 16px 18px; } .backend-list article { align-items: flex-start; flex-wrap: wrap; gap: 8px; } .backend-list .mini { min-height: 44px; } }

/* Primary configuration entry for chief and operations. */
.catalog-overview { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 22px; padding: 22px; border: 1px solid #32768a; border-radius: 12px; background: linear-gradient(115deg, #113549, #122b3c); }
.catalog-overview > div:first-child { min-width: 0; }
.catalog-overview h2 { margin: 5px 0 8px; color: #e4f5ff; font-size: 19px; }
.catalog-overview p { margin: 0; color: #a7c2d4; font-size: 13px; line-height: 1.8; }
.catalog-overview-actions { display: flex; flex-wrap: wrap; gap: 8px; flex-shrink: 0; }
@media (max-width: 1100px) { .catalog-overview { align-items: flex-start; flex-direction: column; } }
@media (max-width: 620px) { .catalog-overview { padding: 16px; } .catalog-overview-actions { width: 100%; } .catalog-overview-actions button { min-height: 44px; flex: 1 1 auto; } }

/* Opening defaults are separate from each existing member's personal point rate. */
.default-rates-summary { padding: 0 22px 22px; }
.default-rates-summary dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0 0 16px; }
.default-rates-summary dt { color: var(--muted); font-size: 12px; }
.default-rates-summary dd { margin: 5px 0 0; font-size: 24px; font-weight: 700; }
.default-rates-summary p { color: var(--muted); font-size: 13px; line-height: 1.8; }
@media (max-width: 620px) { .default-rates-summary { padding: 0 16px 18px; } .default-rates-summary dl { gap: 10px; } .default-rates-summary dd { font-size: 22px; } }

/* A current C daily report has one video proof; old dual proofs remain readable. */
.review-proof.single-proof { grid-template-columns: minmax(0, 1fr); }

/* Individual account adjustments retain a visible hierarchy and scope boundary. */
.individual-rate-summary { padding: 16px; margin-bottom: 18px; border: 1px solid var(--border); border-radius: 10px; background: rgba(18, 53, 73, .45); }
.individual-rate-summary > strong { display: block; color: var(--ink); overflow-wrap: anywhere; }
.individual-rate-summary dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 14px 0 0; }
.individual-rate-summary dt { color: var(--muted); font-size: 12px; }
.individual-rate-summary dd { margin: 5px 0 0; line-height: 1.6; overflow-wrap: anywhere; }
@media (max-width: 620px) { .individual-rate-summary dl { grid-template-columns: minmax(0, 1fr); gap: 10px; } }

/* Explicit chief delegation remains inside the owner-private role simulation. */
.delegation-banner { background: #233c4b; border-bottom-color: #65bed0; color: #d9f7ff; }
.delegation-banner p { color: #c3dce6; }
.delegation-actions { display: flex; flex-wrap: wrap; gap: 9px; flex-shrink: 0; }
.delegation-actions button { min-height: 42px; white-space: nowrap; }
@media (max-width: 760px) {
  .delegation-banner { flex-direction: column; align-items: stretch; }
  .delegation-actions { width: 100%; }
  .delegation-actions button { flex: 1; min-width: 140px; }
}

/* Authenticated standalone workspace additions. */
.session-account { display: flex; flex-direction: column; max-width: 210px; overflow-wrap: anywhere; }
.session-account small { color: var(--muted); font-size: 11px; }
.channel-progress { width: 100%; height: 8px; border: 0; border-radius: 4px; appearance: none; overflow: hidden; background: #25435e; }
.channel-progress::-webkit-progress-bar { background: #25435e; }
.channel-progress::-webkit-progress-value { background: #16e0e4; }
.channel-progress::-moz-progress-bar { background: #16e0e4; }
@media(max-width: 720px) { .top-actions { flex-wrap: wrap; justify-content: flex-end; } .session-account { max-width: 140px; } .creator-top-actions { flex-wrap: wrap; gap: 5px; } .creator-topbar { align-items: flex-start; } .creator-top-actions .secondary { padding: 8px 10px; } }
@media(max-width: 760px) {
  .topbar { height: auto; min-height: 78px; padding-top: 12px; padding-bottom: 12px; flex-wrap: wrap; }
  .top-actions { width: 100%; flex-wrap: wrap; justify-content: flex-start; }
  .top-actions .today { display: none; }
  .session-account { flex: 1 1 110px; max-width: none; min-width: 0; }
  .top-actions .secondary, .creator-top-actions .secondary { min-height: 44px; font-size: 12px; padding: 8px 10px; }
  .creator-topbar { flex-wrap: wrap; }
  .creator-top-actions { width: 100%; min-width: 0; }
}

.file-retention { max-width: 46em; color: #bdcfdd; font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.file-retention strong { color: #dcebf6; }
.file-retention p { margin: 3px 0 0; }
[data-video-retention] .secondary { display: inline-block; margin-top: 6px; }

.ingest-dialog label { display: grid; gap: 6px; margin: 12px 0; }
.ingest-dialog input, .ingest-dialog select { width: 100%; min-width: 0; }
.ingest-scope { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.ingest-dialog h3 { margin-top: 24px; }
.ingest-key-list { padding: 0; list-style: none; }
.ingest-key-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.ingest-key-list small { display: block; color: var(--muted); overflow-wrap: anywhere; }
.ingest-secret input { font-family: monospace; }
@media (max-width: 540px) { .ingest-scope { grid-template-columns: 1fr; gap: 0; } }