/* Quranify UGC · creator cabinet. Brand palette from quranify.pro (graphite + blue accent). */

/* ---------- tokens ---------- */
:root {
  --bg: #0f0f0f; --bg2: #121212; --s1: #1a1a1a; --s2: #1c1c1c; --s3: #282828;
  --line: rgba(255, 255, 255, .07); --line2: rgba(255, 255, 255, .13);
  --t1: #f1f1f1; --t2: #a6a6a6; --t3: #6e6e6e;
  --acc: #4d8eff; --acc2: #9ac9ff; --accbg: rgba(77, 142, 255, .13);
  --sales: #fff8e6; --salesbg: rgba(255, 248, 230, .10);
  --views: #9ac9ff; --viewsbg: rgba(154, 201, 255, .12);
  --ok: #8fd6a8; --warn: #f2c46b; --hot: #ff5a66;
  --r1: 10px; --r2: 14px; --r3: 20px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --side: 248px;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #f6f6f6; --bg2: #efefef; --s1: #ffffff; --s2: #f4f4f4; --s3: #e6e6e6;
  --line: rgba(0, 0, 0, .07); --line2: rgba(0, 0, 0, .13);
  --t1: #111827; --t2: #4b5160; --t3: #8a8f99;
  --acc: #2f73ec; --acc2: #2f73ec; --accbg: rgba(47, 115, 236, .10);
  --sales: #111827; --salesbg: rgba(17, 24, 39, .07);
  --views: #2f73ec; --viewsbg: rgba(47, 115, 236, .10);
  --ok: #1f8a55; --warn: #a6760f; --hot: #d92030;
  color-scheme: light;
}

/* ---------- base ---------- */
* { box-sizing: border-box; margin: 0; padding: 0 }
html, body { background: var(--bg); color: var(--t1); font: 15px/1.45 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer }
input, textarea, select { font: inherit; color: inherit }
svg { width: 18px; height: 18px; flex: none }
[hidden] { display: none !important }
a { color: var(--acc2); text-decoration: none }
:focus-visible { outline: 2px solid var(--acc2); outline-offset: 2px; border-radius: 6px }
h1 { font-size: 26px; letter-spacing: -.02em; font-weight: 700 }
.sub { color: var(--t2); margin-top: 4px }
.eyebrow { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--acc2); font-weight: 600 }
.sec { margin-top: 32px }
.sec-h { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 16px }
.sec-h h2 { font-size: 21px; letter-spacing: -.015em; margin-top: 6px }
.enter { animation: up .35s var(--ease) }
@keyframes up { from { opacity: 0; transform: translateY(8px) } }
@keyframes fade { from { opacity: 0 } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important } }

/* ---------- shell ---------- */
.shell { display: grid; grid-template-columns: var(--side) 1fr; min-height: 100vh }
.side { position: sticky; top: 0; height: 100vh; padding: 20px 16px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; background: var(--bg2) }
.brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 16px }
.brand .lg { width: 34px; height: 34px; border-radius: 10px; background: var(--s2); border: 1px solid var(--line2); display: grid; place-items: center; color: var(--t1) }
.lg svg { width: 58%; height: 58% }
.brand b { font-size: 15.5px; letter-spacing: -.01em }
.brand small { display: block; color: var(--t3); font-size: 12px }
.nav { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r1); color: var(--t2); font-weight: 500; transition: background .2s, color .2s }
.nav:hover { background: var(--s1); color: var(--t1) }
.nav.on { background: var(--accbg); color: var(--acc2) }
.side .grow { flex: 1 }
.me { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: var(--r2); background: var(--s1); border: 1px solid var(--line) }
.me .t { font-weight: 600; font-size: 14px } .me .s { font-size: 12px; color: var(--t3) }
.me button { margin-left: auto; color: var(--t3); font-size: 12.5px }
.ava { width: 34px; height: 34px; border-radius: 50%; background: var(--s3); display: grid; place-items: center; font-size: 13px; font-weight: 600; flex: none; overflow: hidden }
.ava img { width: 100%; height: 100%; object-fit: cover }
.main { min-width: 0; padding: 32px 36px 120px; max-width: 1240px }
.tabbar, .mob { display: none }

/* ---------- controls ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 9px 16px; border-radius: var(--r1); background: var(--s2); border: 1px solid var(--line); font-weight: 500; transition: background .2s, transform .15s }
.btn:hover { background: var(--s3) }
.btn:active { transform: scale(.98) }
.btn.pri { background: var(--acc); border-color: transparent; color: #fff }
.btn.pri:hover { filter: brightness(1.08) }
.btn.block { width: 100% }
.btn:disabled { opacity: .5; pointer-events: none }
.btn.sm { min-height: 32px; padding: 6px 12px; font-size: 13.5px }
.field { width: 100%; padding: 11px 13px; border-radius: var(--r1); background: var(--s1); border: 1px solid var(--line); outline: none }
.field:focus { border-color: var(--acc) }
.seg { display: inline-flex; padding: 4px; border-radius: 12px; background: var(--s1); border: 1px solid var(--line) }
.seg button { padding: 7px 14px; border-radius: 9px; color: var(--t2); font-size: 13.5px; white-space: nowrap }
.seg button.on { background: var(--s3); color: var(--t1) }
.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px }
.chips button { padding: 7px 14px; border-radius: 999px; background: var(--s1); border: 1px solid var(--line); white-space: nowrap; font-size: 13.5px; color: var(--t2) }
.chips button.on { background: var(--accbg); border-color: transparent; color: var(--acc2) }
.chips button i { font-style: normal; opacity: .6; margin-left: 4px }
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600 }
.badge.sales { background: var(--sales); color: #0f0f0f }
.badge.views { background: var(--views); color: #0f0f0f }
:root[data-theme="light"] .badge.sales, :root[data-theme="light"] .badge.views { color: #fff }
.pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 500; background: var(--s3); color: var(--t2) }
.pill.review { background: var(--accbg); color: var(--acc2) }
.pill.approved, .pill.posted { background: var(--viewsbg); color: var(--ok) }
.pill.changes { background: rgba(242, 196, 107, .13); color: var(--warn) }
.pill.rejected { background: rgba(255, 90, 102, .12); color: var(--hot) }
.hint { margin-top: 12px; padding: 12px 14px; border-radius: var(--r2); background: var(--accbg); color: var(--acc2); font-size: 13.5px }
.quote { padding: 12px 14px; border-radius: var(--r1); background: var(--s1); border-left: 3px solid var(--acc); white-space: pre-wrap }
.empty { text-align: center; color: var(--t3); padding: 56px 16px; display: grid; gap: 12px; justify-items: center }
.empty svg { width: 34px; height: 34px; opacity: .5 }
.toast { position: fixed; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 60; padding: 11px 16px; border-radius: 12px; background: var(--t1); color: var(--bg); font-weight: 500; font-size: 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, .3); animation: fade .2s }
.skel { height: 240px; border-radius: 16px; margin-top: 20px; background: linear-gradient(90deg, var(--s2), var(--s3), var(--s2)); background-size: 200% 100%; animation: sk 1.2s linear infinite }
@keyframes sk { to { background-position: -200% 0 } }

/* ---------- home: brand card + formats ---------- */
.bcard { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: var(--r3); background: var(--s1); border: 1px solid var(--line) }
button.bcard { cursor: pointer; width: 100%; text-align: left }
.bcard .lg { width: 52px; height: 52px; border-radius: 14px; background: var(--bg); border: 1px solid var(--line2); display: grid; place-items: center; color: var(--t1); flex: none }
.bcard .t { font-weight: 600; font-size: 17px }
.bcard .s { color: var(--t2); font-size: 13.5px; margin-top: 2px }
.bcard .rules { margin-left: auto; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--r2); background: var(--accbg); color: var(--acc2); font-weight: 500; text-align: left }
.bcard .rules small { display: block; color: var(--t2); font-weight: 400; font-size: 12.5px }
.cat { display: flex; align-items: center; gap: 10px; margin: 24px 0 12px }
.cat .dot { width: 10px; height: 10px; border-radius: 50% }
.cat b { font-size: 16px } .cat span { color: var(--t3); font-size: 13px }
.sales .dot { background: var(--sales) } .views .dot { background: var(--views) }
.fgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px }
.fc { position: relative; aspect-ratio: 9/15; border-radius: var(--r3); overflow: hidden; background: var(--s2); border: 1px solid var(--line); cursor: pointer; text-align: left; transition: transform .25s var(--ease), border-color .2s }
.fc:hover { transform: translateY(-3px); border-color: var(--line2) }
.fc img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }
.fc::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .85)) }
.fc .in { position: absolute; left: 12px; right: 54px; bottom: 12px; z-index: 1; color: #fff }
.fc .in b { display: block; font-size: 16px; line-height: 1.2; letter-spacing: -.01em }
.fc .in small { display: block; opacity: .75; font-size: 12.5px; margin-top: 4px }
.fc .badge { position: absolute; top: 10px; left: 10px; z-index: 1 }
.fc .plus { position: absolute; right: 10px; bottom: 10px; z-index: 2; width: 36px; height: 36px; border-radius: 50%; background: var(--acc); display: grid; place-items: center; color: #fff }

/* ---------- side sheet ---------- */
.sheet { position: fixed; inset: 0; z-index: 50 }
.sheet-bg { position: absolute; inset: 0; background: rgba(0, 0, 0, .55); animation: fade .25s }
.sheet-card { position: absolute; top: 0; right: 0; bottom: 0; width: min(540px, 100%); background: var(--bg2); border-left: 1px solid var(--line); display: flex; flex-direction: column; animation: slide .32s var(--ease) }
@keyframes slide { from { transform: translateX(40px); opacity: 0 } }
.sh-h { display: flex; align-items: flex-start; gap: 12px; padding: 20px; border-bottom: 1px solid var(--line) }
.sh-h b { font-size: 18px; letter-spacing: -.01em }
.sh-h .x { margin-left: auto; width: 36px; height: 36px; border-radius: 50%; background: var(--s2); display: grid; place-items: center; flex: none }
.sh-b { flex: 1; overflow: auto; padding: 20px 20px 24px; display: flex; flex-direction: column; gap: 20px }
.sh-b > * { flex-shrink: 0 }
.sh-f { padding: 14px 20px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); display: flex; gap: 10px }
.player { width: 300px; max-width: 100%; aspect-ratio: 9/16; margin: 0 auto; border-radius: var(--r3); background: #000; overflow: hidden; display: block }
.player video, .player img { width: 100%; height: 100%; object-fit: cover; display: block }
.cap { text-align: center; color: var(--t3); font-size: 12.5px; margin-top: -8px }
.thumbs { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap }
.thumbs button { width: 58px; aspect-ratio: 9/14; border-radius: 10px; overflow: hidden; position: relative; border: 2px solid transparent }
.thumbs button.on { border-color: var(--acc) }
.thumbs img { width: 100%; height: 100%; object-fit: cover }
.thumbs span { position: absolute; left: 0; right: 0; bottom: 0; font-size: 11px; font-weight: 600; color: #fff; background: linear-gradient(transparent, rgba(0, 0, 0, .8)); padding: 8px 0 3px }
.blk h4 { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--t3); font-weight: 600; margin-bottom: 8px }
.hook { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r1); background: var(--s1); border: 1px solid var(--line); margin-bottom: 6px }
.hook span { flex: 1 }
.hook button { color: var(--acc2); font-size: 13px; font-weight: 500 }
.steps { display: grid; gap: 8px; counter-reset: s }
.steps li { list-style: none; display: flex; gap: 10px; padding: 10px 12px; border-radius: var(--r1); background: var(--s1); border: 1px solid var(--line); font-size: 14px }
.steps li::before { counter-increment: s; content: counter(s); flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--accbg); color: var(--acc2); display: grid; place-items: center; font-size: 12px; font-weight: 600 }
.chk { display: grid; gap: 6px }
.chk div { display: flex; gap: 8px; font-size: 14px; color: var(--t2) }
.chk.ok div::before { content: "✓"; color: var(--ok); font-weight: 700 }
.chk.no div::before { content: "✕"; color: var(--hot); font-weight: 700 }
.rows { display: grid; gap: 8px }
.rows div { display: flex; justify-content: space-between; font-size: 14px; padding: 8px 0; border-bottom: 1px solid var(--line) }

/* ---------- upload ---------- */
.drop { display: grid; place-items: center; gap: 8px; padding: 34px 16px; border-radius: var(--r3); border: 1.5px dashed var(--line2); background: var(--s1); text-align: center; color: var(--t2); cursor: pointer }
.drop b { color: var(--t1) }
.drop.has { border-style: solid; border-color: var(--acc) }
.fsel { display: grid; grid-template-columns: 1fr 1fr; gap: 8px }
.fsel button { padding: 10px 12px; border-radius: var(--r1); background: var(--s1); border: 1px solid var(--line); text-align: left; font-size: 13.5px }
.fsel button small { display: block; color: var(--t3); font-size: 11.5px }
.fsel button.on { border-color: var(--acc); background: var(--accbg) }
.prog { height: 8px; border-radius: 99px; background: var(--s3); overflow: hidden }
.prog i { display: block; height: 100%; width: 0; background: var(--acc); transition: width .2s }
.done { text-align: center; padding: 30px 0; display: grid; gap: 8px; justify-items: center }
.done .ic { width: 64px; height: 64px; border-radius: 50%; background: var(--viewsbg); color: var(--ok); display: grid; place-items: center }
.done .ic svg { width: 30px; height: 30px }

/* ---------- my videos ---------- */
.acc { margin-top: 16px; padding: 18px 20px; border-radius: var(--r3); background: var(--s1); border: 1px solid var(--line); display: grid; grid-template-columns: auto 1fr; gap: 16px 24px; align-items: center }
.accl { display: flex; align-items: center; gap: 18px }
.acci { width: 56px; height: 56px; border-radius: 50%; background: var(--accbg); color: var(--acc2); display: grid; place-items: center; flex: none }
.acci svg { width: 24px; height: 24px }
.accn { display: flex; gap: 26px }
.accn div { display: grid; justify-items: center }
.accn b { font-size: 22px; letter-spacing: -.02em; font-variant-numeric: tabular-nums }
.accn small, .accr small { color: var(--t3); font-size: 12px }
.spark2 { height: 120px; margin-top: 6px; display: flex; align-items: center }
.plats { grid-column: 1/-1; display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--bg2); border: 1px solid var(--line); width: max-content; max-width: 100%; overflow-x: auto }
.plats button { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 9px; color: var(--t2); font-size: 13.5px; white-space: nowrap }
.plats button svg { width: 16px; height: 16px }
.plats button.on { background: var(--s3); color: var(--t1) }
.vtools { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; align-items: center }
.vtools #vq { max-width: 300px }
.pnav { display: inline-flex; align-items: center; gap: 8px }
.pnav button { width: 34px; height: 34px; border-radius: 50%; background: var(--s1); border: 1px solid var(--line); display: grid; place-items: center }
.pnav button:first-child svg { transform: rotate(180deg) }
.pnav button:disabled { opacity: .35 }
.pnav span { min-width: 110px; text-align: center; font-weight: 500; font-size: 14px }
.prange { display: inline-flex; align-items: center; gap: 8px } .prange .field { width: auto; padding: 7px 10px }
.vgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 16px; margin-top: 16px }
.vc { border-radius: var(--r2); overflow: hidden; background: var(--s1); border: 1px solid var(--line); cursor: pointer; text-align: left }
.vc .th { aspect-ratio: 9/13; background: var(--s3); position: relative }
.vc .th img { width: 100%; height: 100%; object-fit: cover; display: block }
.vc .th .num { position: absolute; left: 8px; top: 8px; min-width: 26px; height: 26px; padding: 0 7px; border-radius: 9px; background: rgba(0, 0, 0, .6); color: #fff; font-size: 12.5px; font-weight: 600; display: grid; place-items: center }
.vc .th .vst { position: absolute; left: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: rgba(0, 0, 0, .65); color: #fff; font-size: 11.5px; font-weight: 600 }
.vc .th .vst svg { width: 12px; height: 12px }
.vc .bd { padding: 12px 14px 14px; display: grid; gap: 6px }
.vc .bd .f { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.vc .bd .pd { font-size: 12px; color: var(--ok); font-weight: 500 }
.vc .bd .sv { display: flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600 }
.vc .bd .sv svg { width: 13px; height: 13px }
.vc .bd .fb { font-size: 12.5px; color: var(--t2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden }

/* ---------- stats ---------- */
.lvl { padding: 18px 20px; border-radius: var(--r3); background: var(--s1); border: 1px solid var(--line); display: grid; gap: 10px }
.lvl .top { display: flex; align-items: center; gap: 12px }
.lvl .top b { font-size: 16px }
.lvl .bar { height: 10px; border-radius: 99px; background: var(--s3); overflow: hidden }
.lvl .bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--acc), var(--views)); border-radius: 99px; transition: width .9s var(--ease) }
.lvl small { color: var(--t3) }
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 12px }
.kpi { padding: 16px 18px; border-radius: var(--r3); background: var(--s1); border: 1px solid var(--line) }
.kpi .l { font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--t3); font-weight: 600 }
.kpi .v { font-size: 28px; font-weight: 700; letter-spacing: -.02em; margin-top: 6px; font-variant-numeric: tabular-nums }
.kpi .v.ok { color: var(--ok) }
.kpi .h { font-size: 12px; color: var(--t3); margin-top: 2px }
.card { padding: 20px 24px; border-radius: var(--r3); background: var(--s1); border: 1px solid var(--line); margin-top: 12px }
.card h3 { font-size: 15px; margin-bottom: 16px; display: flex; align-items: center; gap: 10px }
.ch { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px } .ch h3 { margin: 0 }
.lg2 { display: flex; gap: 14px; font-size: 12.5px; color: var(--t3) } .lg2 span { display: flex; align-items: center; gap: 6px }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 12px }
.split .s { padding: 14px; border-radius: var(--r2); background: var(--s2) }
.split .s b { font-size: 24px }
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums }
.tbl th { text-align: left; font-weight: 500; color: var(--t3); font-size: 12px; padding: 0 0 10px; border-bottom: 1px solid var(--line) }
.tbl td { padding: 12px 0; border-bottom: 1px solid var(--line) } .tbl tr:last-child td { border-bottom: 0 }
.tbl th:not(:first-child), .tbl td:not(:first-child) { text-align: right }
.tbl .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 8px; vertical-align: middle }

/* ---------- charts (js/charts.js) ---------- */
.qc { position: relative; width: 100% }
.qc svg.qc-svg { display: block; overflow: visible; width: 100%; height: auto; max-width: 100% }
.qc-grid { stroke: var(--line); stroke-width: 1 }
.qc-axis { fill: var(--t3); font-size: 11.5px; font-variant-numeric: tabular-nums }
.qc-hover { fill: var(--s3); opacity: .5 }
.qc-cross { stroke: var(--t3); stroke-dasharray: 3 3; stroke-width: 1 }
.qc-fade { animation: fade .9s ease both }
.qc-tip { position: absolute; pointer-events: none; z-index: 5; min-width: 130px; padding: 9px 12px; border-radius: 10px; background: var(--s2); border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(0, 0, 0, .25); font-size: 12.5px; display: grid; gap: 4px }
.qc-tip b { font-weight: 600 }
.qc-tip span { display: flex; align-items: center; gap: 6px; color: var(--t2) }
.qc-tip em { font-style: normal; margin-left: auto; color: var(--t1); font-weight: 600; font-variant-numeric: tabular-nums }
.qc-tip i, .qc-legend i, .lg2 i { width: 8px; height: 8px; border-radius: 3px; display: inline-block }
.qc-stack { display: flex; height: 12px; border-radius: 99px; overflow: hidden; background: var(--s3); gap: 2px }
.qc-stack i { display: block; height: 100%; transition: width .8s var(--ease) }
.qc-legend { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 14px; font-size: 13px; color: var(--t2) }
.qc-legend span { display: flex; align-items: center; gap: 7px } .qc-legend b { color: var(--t1); font-variant-numeric: tabular-nums }

/* ---------- rules & ideas ---------- */
.toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 6px }
.toc a { padding: 7px 12px; border-radius: 999px; background: var(--s1); border: 1px solid var(--line); color: var(--t2); font-size: 13px }
.rules-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; margin-top: 16px }
.rsec { padding: 18px 20px; border-radius: var(--r3); background: var(--s1); border: 1px solid var(--line); scroll-margin-top: 16px }
.rh { display: flex; align-items: center; gap: 12px; margin-bottom: 12px }
.rh small { color: var(--t3); font-size: 12px; font-weight: 600 }
.rh h3 { font-size: 16.5px; letter-spacing: -.01em }
.ri { width: 40px; height: 40px; border-radius: 12px; background: var(--accbg); color: var(--acc2); display: grid; place-items: center; flex: none }
.rsec ul { display: grid; gap: 9px; list-style: none }
.rsec li { position: relative; padding-left: 18px; font-size: 14.5px; color: var(--t2) }
.rsec li::before { content: ""; position: absolute; left: 3px; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--acc) }
#r-never li::before { background: var(--hot) }
#r-never .ri { background: rgba(255, 90, 102, .12); color: var(--hot) }
.igrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; margin-top: 16px }
.ic2 { border-radius: var(--r3); overflow: hidden; background: var(--s1); border: 1px solid var(--line); cursor: pointer; text-align: left }
.ic2 .th { aspect-ratio: 9/13; position: relative; background: var(--s3) }
.ic2 .th img { width: 100%; height: 100%; object-fit: cover; display: block }
.ic2 .th .pl { position: absolute; left: 8px; top: 8px; padding: 3px 8px; border-radius: 999px; background: rgba(0, 0, 0, .6); color: #fff; font-size: 11.5px }
.ic2 .th .badge { position: absolute; right: 8px; top: 8px }
.ic2 .bd { padding: 10px 12px }
.ic2 .st { display: flex; gap: 12px; font-size: 13px; font-weight: 600 }
.ic2 .st svg { width: 14px; height: 14px; vertical-align: -2px }
.ic2 .cp { font-size: 12.5px; color: var(--t2); margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden }

/* ---------- sign-in ---------- */
.login { min-height: 100vh; display: grid; place-items: center; padding: 24px }
.login .box { width: min(420px, 100%); display: grid; gap: 20px; text-align: center; justify-items: center }
.login .lg { width: 68px; height: 68px; border-radius: 20px; background: var(--s2); border: 1px solid var(--line2); display: grid; place-items: center; color: var(--t1) }
.login .tg { min-height: 44px; display: grid; place-items: center }
.login .err { color: var(--hot); font-size: 14px }
.login .dev { display: flex; gap: 8px; width: 100%; padding-top: 16px; border-top: 1px dashed var(--line2) }

/* ---------- mobile ---------- */
@media (max-width: 820px) {
  .shell { grid-template-columns: 1fr }
  .side { display: none }
  .main { padding: 16px 16px calc(96px + env(safe-area-inset-bottom)) }
  .mob { display: flex }
  .topbar { display: flex; align-items: center; gap: 10px; margin-bottom: 16px }
  .topbar .brand { padding: 0 }
  .topbar .btn { margin-left: auto }
  .tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); background: var(--bg2); border-top: 1px solid var(--line) }
  .tabbar button { display: grid; justify-items: center; gap: 3px; padding: 6px 0; font-size: 11px; color: var(--t3) }
  .tabbar button.on { color: var(--acc2) }
  .tabbar .up { color: #fff }
  .tabbar .up span.c { width: 42px; height: 42px; border-radius: 14px; background: var(--acc); display: grid; place-items: center; margin-top: -2px }
  .bcard { flex-wrap: wrap }
  .bcard .rules { margin-left: 0; width: 100% }
  h1 { font-size: 23px }
  .fgrid, .vgrid, .igrid { grid-template-columns: repeat(2, 1fr); gap: 10px }
  .kpis { grid-template-columns: repeat(2, 1fr) }
  .rules-list { grid-template-columns: 1fr }
  .acc { grid-template-columns: 1fr } .accn { gap: 16px } .accn b { font-size: 19px }
  .vtools #vq { max-width: none }
  .sheet-card { top: auto; height: 92vh; width: 100%; border-left: 0; border-top: 1px solid var(--line); border-radius: 22px 22px 0 0; animation: rise .35s var(--ease) }
  @keyframes rise { from { transform: translateY(40px); opacity: 0 } }
  .fsel { grid-template-columns: 1fr }
}

/* ---------- saved refs, briefing over the reference, video numbers, re-shoots, earnings ---------- */
/* save reference */
.btn.save{margin-top:-4px}
.btn.save svg{width:18px;height:18px}
.btn.save.on{background:var(--accbg);border-color:transparent;color:var(--acc2)}
.btn.save.on svg{fill:currentColor}
.ic2 .th .mk{position:absolute;right:8px;bottom:8px;width:28px;height:28px;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;display:grid;place-items:center}
.ic2 .th .mk svg{width:15px;height:15px;fill:currentColor}

.sh-f .btn[disabled]{opacity:.55;cursor:not-allowed}

/* video number 1…N */
.nsel{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.nsel button{min-height:46px;border-radius:var(--r1);background:var(--s1);border:1px solid var(--line);font-weight:600;font-size:15px;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.1}
.nsel button small{font-size:9.5px;font-weight:500;color:var(--t3);margin-top:2px}
.nsel button.on{border-color:var(--acc);background:var(--accbg);color:var(--acc2)}
.nsel button.busy{opacity:.45;cursor:not-allowed}
.nsel button.re{border-color:var(--warn)}
.nsel button.re small{color:var(--warn)}
.fsel button.off{opacity:.35}
@media (max-width:420px){.nsel{grid-template-columns:repeat(5,1fr)}}
.redo{display:grid;gap:8px}
.redo button{padding:12px 14px;border-radius:var(--r1);background:var(--s1);border:1px solid var(--warn);text-align:left;display:grid;gap:2px}
.redo button small{color:var(--t3);font-size:12px}
.redo button span{font-size:13px;color:var(--t2)}
.redo button.on{background:var(--accbg);border-color:var(--acc)}

/* earnings */
.earn{padding:20px;border-radius:var(--r3);background:linear-gradient(135deg,rgba(77,142,255,.16),rgba(143,214,168,.12));border:1px solid var(--line);margin-bottom:16px}
.earn.tap{cursor:pointer}
.earn .l{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--t3);font-weight:600}
.earn .et{display:flex;gap:16px;align-items:flex-start;justify-content:space-between}
.earn .big{font-size:40px;font-weight:800;letter-spacing:-.02em;line-height:1.1;margin-top:4px}
.earn small{display:block;color:var(--t3);font-size:12.5px;margin-top:4px}
.earn .ew{text-align:right}
.earn .ew b{display:block;font-size:22px;margin-top:4px}
.earn .epend{margin-top:12px;font-size:13px;color:var(--warn)}
.earn .ebonus{margin-top:14px}
.earn .ebonus .top{display:flex;justify-content:space-between;font-size:13px;color:var(--t2)}
.earn .ebonus .bar{height:6px;border-radius:3px;background:var(--line);margin-top:6px;overflow:hidden}
.earn .ebonus .bar i{display:block;height:100%;background:var(--ok);border-radius:3px}

/* briefing over the reference */
.player{position:relative}
.onb{position:absolute;inset:0;display:flex;flex-direction:column;padding:12px 14px 14px;background:linear-gradient(180deg,rgba(0,0,0,.72),rgba(0,0,0,.55) 45%,rgba(0,0,0,.82));color:#fff}
.onb[hidden]{display:none}
.onb-bars{display:flex;gap:4px}
.onb-bars i{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.3)}
.onb-bars i.d{background:#fff}
.onb-bars i.c{background:linear-gradient(90deg,#fff 50%,rgba(255,255,255,.3) 50%)}
.onb-body{flex:1;overflow-y:auto;display:flex;flex-direction:column;justify-content:center;gap:10px;padding:12px 2px}
.onb-body small{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.7);font-weight:600}
.onb-body p{font-size:19px;line-height:1.45;font-weight:600;margin:0}
.onb-body b{font-size:15px;margin-top:4px}
.onb-list{display:grid;gap:6px;font-size:13.5px;line-height:1.35}
.onb-list div{padding-left:20px;position:relative}
.onb-list.ok div::before{content:"✓";position:absolute;left:0;color:#8fd6a8;font-weight:700}
.onb-list.no div::before{content:"✕";position:absolute;left:0;color:#ff7b86;font-weight:700}
.onb-nav{display:flex;gap:8px}
.onb-nav .btn{flex:1;min-height:42px}
.onb-nav .btn:not(.pri){background:rgba(255,255,255,.14);border-color:transparent;color:#fff}
.onb-nav .btn[disabled]{opacity:.35}
.viewbar { position: sticky; top: 0; z-index: 30; padding: 10px 16px; background: rgba(242, 196, 107, .95); color: #2a1f00; font-size: 13.5px; text-align: center }
.wkgrp { margin-top: 22px }
.wkgrp:first-child { margin-top: 8px }
.wkh { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line) }
.wkh b { font-size: 16px }
.wkh span { color: var(--t3); font-size: 13px }