:root {
  --primary: #f05a43;
  --primary-foreground: #fffaf7;
  --background: #f8f7f4;
  --foreground: #202321;
  --card: #fff;
  --card-foreground: #202321;
  --popover: #fff;
  --popover-foreground: #202321;
  --secondary: #f0efeb;
  --secondary-foreground: #444844;
  --muted: #f0efeb;
  --muted-foreground: #777d77;
  --accent: #fff0eb;
  --accent-foreground: #c34735;
  --destructive: #d64242;
  --destructive-foreground: #fff;
  --border: #e6e4dd;
  --input: #e2e0d9;
  --ring: #f05a43;
  --radius: .8rem;
  font-family: "Noto Sans Bengali", "Hind Siliguri", "Nirmala UI", system-ui, sans-serif;
  color-scheme: light;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}
* { box-sizing: border-box; }
html { min-width: 320px; background: var(--background); scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--background); color: var(--foreground); font-size: 14px; }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid #f05a4355; outline-offset: 2px; }
::selection { background: #f05a4333; }

.app-frame { min-height: 100vh; }
.topbar { height: 74px; position: sticky; top: 0; z-index: 30; display: grid; grid-template-columns: 222px minmax(260px, 1fr) 220px; align-items: center; gap: 26px; padding: 0 36px; background: rgba(248,247,244,.94); backdrop-filter: blur(16px); border-bottom: 1px solid #e9e7e1; }
.brand-lockup { display: inline-flex; align-items: center; gap: 10px; width: fit-content; }
.brand-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px 11px 11px 3px; background: var(--primary); box-shadow: 0 6px 14px #e75e4d36; }
.play-glyph { display: block; width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 9px solid white; margin-left: 2px; }
.brand-word { color: #252925; font-family: Inter, system-ui, sans-serif; font-size: 21px; font-weight: 800; letter-spacing: -.9px; }
.brand-word span { color: var(--primary); }
.top-search { justify-self: center; width: min(100%, 520px); height: 42px; border: 1px solid #e5e3dc; background: #fff; border-radius: 999px; display: flex; align-items: center; gap: 10px; padding: 0 12px 0 17px; color: #8e928c; transition: box-shadow .18s,border-color .18s; }
.top-search:focus-within { border-color: #f4aa9d; box-shadow: 0 0 0 3px #f05a4312; }
.top-search input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; color: #333; font-size: 13px; }
.top-search input::placeholder { color: #a2a49e; }
.top-search button { border: 0; background: #f5f4f0; color: #575c57; border-radius: 50%; width: 29px; height: 29px; display: grid; place-items: center; }
.top-actions { display: flex; justify-content: flex-end; align-items: center; gap: 17px; }
.upload-link { display: inline-flex; align-items: center; gap: 6px; color: #464b46; font-size: 13px; font-weight: 600; }
.upload-link:hover { color: var(--primary); }
.login-button { height: 38px; padding: 0 14px; gap: 7px; border: 0; border-radius: 999px; color: white; background: #252925; font-size: 13px; font-weight: 650; }
.login-button:hover { background: #3a403a; }
.user-avatar { width: 37px; height: 37px; border-radius: 50%; display: grid; place-items: center; color: white; background: #d17e63; font-size: 16px; font-weight: 700; }
.icon-button { width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: #3d433d; }
.mobile-menu-trigger { display: none; }
.page-layout { display: grid; grid-template-columns: 222px minmax(0,1fr); gap: 0; padding: 0 36px; max-width: 1680px; margin: 0 auto; }
.sidebar { position: sticky; top: 74px; height: calc(100vh - 74px); min-height: 540px; padding: 32px 24px 22px 0; border-right: 1px solid #eae8e2; display: flex; flex-direction: column; }
.sidebar-label { margin: 0 0 10px 13px; color: #9a9d97; text-transform: uppercase; letter-spacing: .11em; font: 700 10px/1.4 Inter,system-ui,sans-serif; }
.sidebar nav { display: grid; gap: 4px; }
.nav-item { height: 43px; padding: 0 13px; display: flex; align-items: center; gap: 13px; color: #636961; border-radius: 10px; font-size: 13px; font-weight: 550; transition: color .15s,background .15s; }
.nav-item:hover { background: #efeee9; color: #252925; }
.nav-item-active { color: #cf4a37; background: #fff0eb; }
.nav-item-active:hover { color: #cf4a37; background: #ffebe5; }
.sidebar-divider { height: 1px; background: #e9e7e1; margin: 24px 8px 23px; }
.sidebar-note { margin: auto 10px 20px 0; padding: 15px 14px 16px; border: 1px solid #ece7dc; border-radius: 15px; background: linear-gradient(135deg,#fff 20%,#f3f0e8); }
.sidebar-note-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; color: var(--primary); background: #ffede7; }
.sidebar-note p { margin: 11px 0 4px; font-size: 13px; font-weight: 700; }
.sidebar-note span { display: block; color: #8b8f88; font-size: 11px; }
.sidebar-footer { color: #aaa9a1; font-size: 10px; line-height: 1.6; padding-left: 4px; }
.main-content { min-width: 0; padding: 28px 0 60px 34px; }
.mobile-bottom-nav { display: none; }

.hero-panel { position: relative; min-height: 326px; overflow: hidden; border-radius: 20px; background: #354344; color: white; isolation: isolate; }
.hero-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 53%; z-index: -2; }
.hero-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg,rgba(16,24,25,.79) 0%,rgba(16,24,25,.55) 42%,rgba(16,24,25,.04) 100%),linear-gradient(0deg,rgba(13,18,17,.4),transparent 43%); }
.hero-copy { width: min(480px,65%); padding: 39px 0 40px 43px; }
.hero-eyebrow,.section-kicker { display: flex; align-items: center; gap: 7px; color: #ffc9bc; font-size: 11px; font-weight: 700; letter-spacing: .05em; }
.hero-copy h1 { margin: 15px 0 12px; font-size: clamp(37px,4.4vw,60px); line-height: 1.05; letter-spacing: -.035em; font-weight: 800; }
.hero-copy h1 em { color: #ff9b86; font-style: normal; }
.hero-copy p { color: #e8e9e4; margin: 0 0 22px; font-size: 13px; }
.hero-cta { display: inline-flex; align-items: center; gap: 9px; height: 41px; padding: 0 16px; background: var(--primary); color: #fff; border-radius: 999px; font-size: 12px; font-weight: 700; box-shadow: 0 8px 22px #b33c2738; transition: transform .16s,background .16s; }
.hero-cta:hover { transform: translateY(-2px); background: #db4a35; }
.hero-caption { position: absolute; right: 25px; bottom: 26px; display: flex; flex-direction: column; gap: 5px; text-align: right; color: #fff; text-shadow: 0 1px 8px #0009; }
.hero-caption-kicker { color: #e7d8c4; font-size: 10px; }
.hero-caption strong { max-width: 290px; font-size: 13px; }
.hero-caption>span:last-child { font-size: 10px; color: #efebe3; }
.hero-progress { position: absolute; left: 43px; bottom: 0; width: 118px; height: 3px; background: #ffffff55; }
.hero-progress span { display: block; height: 100%; width: 42%; background: #ff9b86; }
.feed-section { padding-top: 36px; }
.feed-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 17px; }
.section-kicker { color: #b85b49; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.feed-heading h2,.results-heading h2,.recommendations-title h2 { margin: 4px 0 0; font-size: 23px; font-weight: 750; letter-spacing: -.03em; }
.see-all { display: inline-flex; align-items: center; gap: 5px; color: #676d66; font-size: 12px; font-weight: 650; padding-bottom: 4px; }
.see-all:hover,.text-link:hover { color: var(--primary); }
.category-strip { display: flex; gap: 8px; margin: 0 0 20px; overflow-x: auto; scrollbar-width: none; }
.category-strip::-webkit-scrollbar { display:none; }
.category-chip { white-space: nowrap; height: 33px; padding: 0 13px; border-radius: 999px; border: 1px solid #e7e5de; background: #fff; color: #6f746e; font-size: 11px; font-weight: 600; transition: all .16s; }
.category-chip:hover { border-color: #eeb4a8; color: #c84d3a; }
.category-chip-active { border-color: #252925; background: #252925; color: white; }
.category-chip-active:hover { border-color: #252925; background: #252925; color: white; }
.video-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px 18px; }
.video-card { min-width: 0; }
.video-card-featured { grid-column: span 2; }
.video-thumb-link { display: block; }
.video-thumb { position: relative; overflow: hidden; aspect-ratio: 16/9; border-radius: 12px; background: linear-gradient(135deg,var(--thumb-accent,#d69848),#465d5b); isolation: isolate; }
.video-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.video-card:hover .video-thumb img { transform: scale(1.035); }
.thumb-play { position: absolute; display: grid; place-items: center; left: 50%; top: 50%; width: 42px; height: 42px; border: 1px solid #ffffff88; border-radius: 50%; color: white; background: #161b1a61; transform: translate(-50%,-50%) scale(.85); opacity: 0; transition: .18s; backdrop-filter: blur(4px); }
.video-card:hover .thumb-play,.video-card-featured .thumb-play { opacity: 1; transform: translate(-50%,-50%) scale(1); }
.thumb-play .play-glyph { border-top-width: 7px; border-bottom-width: 7px; border-left-width: 10px; }
.video-duration { position: absolute; right: 9px; bottom: 9px; padding: 4px 7px; border-radius: 5px; color: #fff; background: #181b1be0; font: 600 10px/1 Inter,system-ui,sans-serif; }
.video-card-body { display: flex; align-items: flex-start; gap: 10px; padding-top: 12px; }
.creator-avatar { flex: 0 0 auto; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: white; font-size: 14px; font-weight: 700; box-shadow: inset 0 0 0 1px #fff6; }
.video-copy { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 5px; }
.video-title { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: #252925; font-size: 13px; font-weight: 700; line-height: 1.45; }
.video-title:hover { color: #d44f3c; }
.creator-name { width: fit-content; color: #777d76; font-size: 11px; }
.creator-name:hover { color: #ca4e3b; }
.video-meta { display: flex; align-items: center; gap: 6px; color: #91958e; font-size: 10px; }
.meta-dot { width: 3px; height: 3px; border-radius: 50%; background: #aaa9a1; }
.card-actions { flex: 0 0 auto; display: flex; flex-direction: column; gap: 1px; margin-left: auto; opacity: 0; transition: opacity .15s; }
.video-card:hover .card-actions { opacity: 1; }
.card-icon { width: 29px; height: 28px; display: grid; place-items: center; border: 0; background: transparent; color: #82877f; border-radius: 7px; }
.card-icon:hover { color: var(--primary); background: #fff0eb; }
.card-icon-liked { color: var(--primary); }
.empty-state { display: flex; flex-direction: column; align-items: center; padding: 70px 18px; text-align: center; }
.empty-state-icon { display: grid; place-items: center; width: 47px; height: 47px; border-radius: 15px; color: var(--primary); background: #fff0eb; font-size: 23px; }
.empty-state h3 { margin: 15px 0 4px; font-size: 17px; }
.empty-state p { margin: 0 0 16px; color: #858a83; font-size: 12px; }
.text-link { display: inline-flex; gap: 5px; align-items: center; color: #5f675f; font-size: 12px; font-weight: 650; }
.creator-callout { display: flex; align-items: center; gap: 16px; margin: 40px 0 0; padding: 20px 23px; border: 1px solid #ece8df; border-radius: 15px; background: linear-gradient(100deg,#fff,#faf5ed); }
.creator-callout-mark { flex: 0 0 auto; width: 43px; height: 43px; display: grid; place-items: center; color: white; background: var(--primary); border-radius: 14px 14px 14px 4px; }
.creator-callout .section-kicker { display: block; font-size: 9px; }
.creator-callout h3 { margin: 3px 0; font-size: 15px; }
.creator-callout p { margin: 0; color: #82867f; font-size: 11px; }
.outline-cta { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 9px 13px; white-space: nowrap; border: 1px solid #e7c8bd; border-radius: 999px; color: #a64634; font-size: 11px; font-weight: 700; }
.outline-cta:hover { background: #fff0eb; }

.page-heading { margin: 10px 0 25px; }
.page-heading h1 { margin: 5px 0 6px; font-size: 30px; font-weight: 780; letter-spacing: -.04em; }
.page-heading p { margin: 0; color: #7c827b; font-size: 13px; }
.search-heading { margin-top: 18px; }
.search-large { display: flex; align-items: center; gap: 11px; max-width: 650px; height: 56px; padding: 0 15px; border: 1px solid #e4e1d9; border-radius: 12px; color: #8c918b; background: #fff; box-shadow: 0 3px 15px #2221; }
.search-large:focus-within { border-color: #efa99c; }
.search-large input { flex: 1; min-width: 0; border: 0; outline: 0; font-size: 14px; color: #292d29; }
.search-large input::placeholder { color: #a8aaa4; }
.search-clear { width: 28px; height: 28px; display: grid; place-items: center; border: 0; background: transparent; color: #999e97; }
.search-filters { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 22px 0 26px; }
.search-filters>span { display: inline-flex; align-items: center; gap: 6px; margin-right: 3px; color: #757a74; font-size: 11px; }
.results-heading { display: flex; align-items: baseline; gap: 10px; margin-bottom: 15px; }
.results-heading h2 { font-size: 18px; }
.results-heading span { color: #999d97; font-size: 11px; }

.watch-layout { display: grid; grid-template-columns: minmax(0,1fr) 280px; gap: 25px; }
.watch-main { min-width: 0; }
.player-stage { position: relative; display: grid; place-items: center; overflow: hidden; aspect-ratio: 16/9; background-position: center; background-size: cover; border-radius: 14px; color: white; background-color: #1d2524; }
.player-stage::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg,#101211b8,transparent 25%); pointer-events: none; }
.player-state-note { position: absolute; top: 15px; left: 15px; z-index: 1; display: flex; align-items: center; gap: 7px; padding: 7px 10px; color: #fff; background: #161a1ab5; border: 1px solid #ffffff36; border-radius: 999px; font-size: 10px; backdrop-filter: blur(6px); }
.player-live-dot { width: 6px; height: 6px; border-radius: 50%; background: #ff806d; box-shadow: 0 0 0 4px #ff806d32; }
.player-center-play { z-index: 1; width: 58px; height: 58px; display: grid; place-items: center; padding-left: 4px; border: 1px solid #ffffff88; border-radius: 50%; color: white; background: #20262566; backdrop-filter: blur(5px); transition: transform .15s,background .15s; }
.player-center-play:hover { transform: scale(1.07); background: #f05a43dd; }
.player-controls { position: absolute; z-index: 1; bottom: 11px; left: 14px; right: 14px; display: flex; align-items: center; gap: 12px; }
.player-controls button { display: grid; place-items: center; padding: 0; width: 26px; height: 26px; border: 0; color: #fff; background: transparent; }
.player-time { white-space: nowrap; font: 10px Inter,system-ui,sans-serif; }
.player-track { height: 3px; flex: 1; border-radius: 3px; background: #ffffff80; }
.player-track span { display: block; width: 0%; height: 100%; background: var(--primary); }
.watch-title { margin: 18px 0 8px; font-size: 20px; line-height: 1.45; letter-spacing: -.02em; }
.watch-subtitle { display: flex; align-items: center; gap: 8px; color: #898e87; font-size: 11px; }
.watch-category { margin-left: 3px; padding: 4px 8px; border-radius: 999px; color: #af4b39; background: #fff0eb; }
.watch-creator-row { display: flex; align-items: center; gap: 11px; padding: 17px 0; border-bottom: 1px solid #e8e6df; }
.creator-avatar-large { width: 41px; height: 41px; font-size: 17px; }
.watch-creator-text { display: flex; flex-direction: column; gap: 3px; }
.watch-creator-text .creator-name { color: #252925; font-size: 12px; font-weight: 700; }
.watch-creator-text span { color: #969a94; font-size: 10px; }
.follow-button { padding: 9px 15px; border: 0; border-radius: 999px; background: #252925; color: #fff; font-size: 11px; font-weight: 700; white-space: nowrap; }
.follow-button:hover { background: #434a43; }
.watch-actions { display: flex; align-items: center; gap: 7px; margin-left: auto; }
.action-pill { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 34px; padding: 0 11px; border: 1px solid #e5e3dc; border-radius: 999px; color: #5f655e; background: #fff; font-size: 10px; font-weight: 650; white-space: nowrap; }
.action-pill:hover { background: #f2f0eb; }
.action-pill-liked { color: #ca4a39; border-color: #f0c4ba; background: #fff3ef; }
.icon-only { width: 34px; padding: 0; }
.video-description { margin-top: 14px; padding: 12px 14px; border-radius: 10px; background: #f0efeb; }
.video-description p { margin: 0 0 5px; font-size: 11px; line-height: 1.7; }
.video-description span { color: #a04a39; font-size: 10px; font-weight: 700; }
.comments-heading { display: flex; align-items: center; gap: 10px; margin-top: 24px; }
.comments-heading h2 { margin: 0; font-size: 15px; }
.comments-heading span { color: #999d97; font-size: 10px; }
.comments-placeholder { margin-top: 11px; padding: 15px; border: 1px dashed #dedcd4; border-radius: 10px; color: #989c95; font-size: 11px; }
.recommendations { display: flex; flex-direction: column; gap: 18px; }
.recommendations-title { display: flex; align-items: baseline; justify-content: space-between; }
.recommendations-title h2 { margin: 0; font-size: 15px; }
.recommendations-title span { color: #999d97; font-size: 10px; }
.recommendations .video-card-body { gap: 8px; padding-top: 8px; }
.recommendations .creator-avatar { display: none; }
.recommendations .video-title { font-size: 11px; -webkit-line-clamp: 2; }
.recommendations .creator-name,.recommendations .video-meta { font-size: 9px; }
.recommendations .card-actions { display: none; }

.channel-cover { position: relative; overflow: hidden; height: 178px; display: flex; align-items: end; padding: 0 30px 21px; color: #fff; background: linear-gradient(110deg,#c4533f,#dd8e65 43%,#d5b985); border-radius: 14px; isolation: isolate; }
.channel-cover::before { content:""; position:absolute; inset:0; z-index:-1; opacity:.5; background-image:radial-gradient(circle at 75% 20%,#ffe4bc 0,transparent 28%),linear-gradient(20deg,transparent 55%,#ffffff3b 55.2%,transparent 55.7%); }
.cover-orbit { position:absolute; border:1px solid #ffffff44; border-radius:50%; }
.cover-orbit-one { width:340px;height:340px;right:10%;top:-210px; }
.cover-orbit-two { width:250px;height:250px;right:16%;top:-160px; }
.cover-caption { font-size: 12px; text-shadow: 0 1px 5px #0004; }
.channel-profile { display: flex; align-items: center; gap: 18px; padding: 22px 4px 21px; border-bottom: 1px solid #e8e6df; }
.channel-avatar { flex: 0 0 auto; width: 72px; height: 72px; display: grid; place-items: center; border: 4px solid #f8f7f4; box-shadow: 0 0 0 1px #e8e5dd; border-radius: 50%; color: #fff; font-size: 28px; font-weight: 750; }
.channel-info { min-width: 0; flex: 1; }
.channel-info h1 { margin: 0 0 4px; font-size: 22px; letter-spacing: -.03em; }
.channel-handle { color: #7a8079; font-size: 10px; }
.channel-handle i { padding: 0 4px; color: #c0c0b9; font-style: normal; }
.channel-info p { max-width: 650px; margin: 9px 0 6px; color: #697069; font-size: 11px; line-height: 1.65; }
.channel-joined { display: inline-flex; align-items: center; gap: 5px; color: #979c95; font-size: 10px; }
.channel-actions { display: flex; align-items: center; gap: 8px; }
.channel-tabs { display: flex; align-items: center; gap: 21px; border-bottom: 1px solid #e8e6df; }
.channel-tabs button,.channel-tabs>a { height: 45px; display: inline-flex; align-items: center; gap: 7px; padding: 0 4px; border: 0; background: transparent; color: #737972; font-size: 11px; }
.channel-tabs .channel-tab-active { color: #c34a37; border-bottom: 2px solid var(--primary); font-weight: 700; }
.channel-tabs .channel-upload-link { margin-left: auto; color: #9b4a38; font-weight: 650; }
.channel-grid { padding-top: 21px; }

.upload-page { max-width: 760px; margin: 0 auto; }
.upload-page .page-heading { margin-top: 12px; }
.upload-form { display: flex; flex-direction: column; gap: 17px; padding: 23px; border: 1px solid #e9e7e0; border-radius: 15px; background: #fff; box-shadow: 0 4px 18px #1b1e1908; }
.dropzone { min-height: 190px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; padding: 20px; text-align: center; border: 1px dashed #d6d3ca; border-radius: 12px; color: #737a72; background: #fbfaf7; transition: border .16s,background .16s; cursor: pointer; }
.dropzone:hover,.dropzone-active { border-color: #e58574; background: #fff7f4; }
.dropzone input { display: none; }
.drop-icon { display: grid; place-items: center; width: 48px; height: 48px; color: var(--primary); border-radius: 15px; background: #ffede8; }
.dropzone strong { margin-top: 2px; color: #343934; font-size: 13px; }
.dropzone>span:not(.drop-icon):not(.drop-browse) { color: #999d96; font-size: 10px; }
.drop-browse { margin-top: 3px; color: #c14b39; font-size: 11px; font-weight: 700; }
.selected-file { width: 100%; display: flex; align-items: center; gap: 12px; text-align: left; }
.file-icon { width: 43px; height: 43px; display: grid; place-items: center; color: var(--primary); border-radius: 12px; background: #fff0eb; }
.selected-file div { flex: 1; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.selected-file strong { overflow: hidden; color: #363b36; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.selected-file span { color: #92968f; font-size: 10px; }
.remove-file { width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 50%; color: #777d76; background: transparent; }
.form-field { display: flex; flex-direction: column; gap: 7px; }
.form-field>span { color: #444a44; font-size: 11px; font-weight: 700; }
.form-field b { color: #cc5140; }
.form-field small { color: #a1a49e; font-size: 10px; font-weight: 400; }
.form-field input,.form-field textarea { width: 100%; padding: 11px 12px; resize: vertical; border: 1px solid #e3e1da; border-radius: 8px; outline: 0; color: #343934; background: #fff; font-size: 12px; }
.form-field input:focus,.form-field textarea:focus { border-color: #e9a196; box-shadow: 0 0 0 3px #f05a4311; }
.form-field input::placeholder,.form-field textarea::placeholder { color: #b0b2ac; }
.notice { display: flex; align-items: flex-start; gap: 10px; padding: 12px 13px; border-radius: 9px; font-size: 11px; line-height: 1.6; }
.notice svg { flex: 0 0 auto; margin-top: 1px; }
.notice-warn { color: #91642f; background: #fff8eb; border: 1px solid #f2e5c8; }
.notice-warn a { text-decoration: underline; font-weight: 700; }
.notice-success { color: #3b8058; background: #eff9f2; border: 1px solid #d3eedc; }
.upload-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 14px; border-top: 1px solid #efeee9; }
.upload-footer>span { color: #969a93; font-size: 10px; }
.primary-cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 17px; border: 0; border-radius: 999px; color: white; background: var(--primary); font-size: 11px; font-weight: 700; }
.primary-cta:hover { background: #d84c38; }
.primary-cta:disabled { opacity: .7; cursor: wait; }
.spin { animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.upload-footnote { margin: 13px 0; text-align: center; color: #9b9f99; font-size: 10px; }
.login-panel { max-width: 460px; margin: 10vh auto; padding: 42px; display: flex; flex-direction: column; align-items: flex-start; border: 1px solid #e8e5dd; border-radius: 20px; background: linear-gradient(145deg,#fff,#faf5ee); box-shadow: 0 18px 50px #2528210c; }
.login-symbol { width: 50px; height: 50px; display: grid; place-items: center; margin-bottom: 23px; color: white; background: var(--primary); border-radius: 16px 16px 16px 4px; }
.login-panel h1 { margin: 12px 0; font-size: 39px; line-height: 1.17; letter-spacing: -.04em; }
.login-panel p { max-width: 340px; margin: 0 0 24px; color: #71776f; line-height: 1.8; font-size: 13px; }
.login-wide { width: 100%; min-height: 45px; }
.login-footnote { margin-top: 15px; color: #999d97; text-align: center; font-size: 10px; }

@media (max-width: 1100px) {
  .topbar { grid-template-columns: 190px minmax(220px,1fr) 180px; gap: 17px; padding: 0 24px; }
  .page-layout { grid-template-columns: 190px minmax(0,1fr); padding: 0 24px; }
  .sidebar { padding-right: 18px; }
  .main-content { padding-left: 24px; }
  .video-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .video-card-featured { grid-column: span 2; }
  .watch-layout { grid-template-columns: minmax(0,1fr) 235px; gap: 18px; }
}
@media (max-width: 760px) {
  .topbar { height: 62px; grid-template-columns: 34px 1fr auto; gap: 10px; padding: 0 15px; }
  .mobile-menu-trigger { display: grid; }
  .brand-icon { width: 30px; height: 30px; border-radius: 10px 10px 10px 3px; }
  .brand-word { font-size: 19px; }
  .topbar>.brand-lockup { grid-column: 2; }
  .top-actions { grid-column: 3; gap: 7px; }
  .top-search { position: absolute; top: 62px; left: 14px; right: 14px; z-index: 2; width: auto; height: 36px; border-radius: 10px; padding: 0 10px; background: #fff; }
  .top-search>svg { width: 15px; }
  .top-search input { font-size: 11px; }
  .top-search button { width: 26px; height: 26px; }
  .upload-link { width: 34px; height: 34px; justify-content: center; border-radius: 50%; background: #fff0eb; color: #c64a36; }
  .upload-link span { display: none; }
  .login-button { width: 36px; height: 36px; padding: 0; justify-content: center; }
  .login-button span { display: none; }
  .page-layout { display: block; padding: 0 15px; }
  .sidebar { position: fixed; z-index: 25; top: 62px; bottom: 0; left: 0; width: 245px; height: auto; min-height: 0; padding: 27px 20px; transform: translateX(-104%); transition: transform .2s ease; background: #fbfaf7; box-shadow: 12px 0 32px #20252012; }
  .sidebar-open { transform: translateX(0); }
  .main-content { padding: 88px 0 90px; }
  .mobile-bottom-nav { position: fixed; z-index: 32; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-around; align-items: center; height: 61px; padding-bottom: env(safe-area-inset-bottom); border-top: 1px solid #e8e6df; background: rgba(250,249,246,.96); backdrop-filter: blur(12px); }
  .mobile-bottom-nav>a { min-width: 58px; display: flex; flex-direction: column; align-items: center; gap: 3px; color: #81867f; font-size: 9px; }
  .mobile-bottom-nav>a.mobile-nav-active { color: #d34e3a; }
  .mobile-upload { width: 30px; height: 26px; display: grid; place-items: center; color: white; border-radius: 10px; background: var(--primary); }
  .mobile-bottom-nav>a:has(.mobile-upload) { gap: 1px; }
  .hero-panel { min-height: 285px; border-radius: 14px; }
  .hero-copy { width: 75%; padding: 30px 0 38px 24px; }
  .hero-copy h1 { font-size: 41px; }
  .hero-copy p { max-width: 250px; font-size: 11px; line-height: 1.6; }
  .hero-caption { right: 13px; bottom: 17px; max-width: 135px; }
  .hero-caption strong { font-size: 10px; }
  .hero-caption>span:last-child { font-size: 8px; }
  .hero-progress { left: 24px; width: 85px; }
  .feed-section { padding-top: 27px; }
  .feed-heading h2 { font-size: 20px; }
  .see-all { font-size: 10px; }
  .category-strip { margin-bottom: 15px; }
  .category-chip { height: 31px; padding: 0 11px; font-size: 10px; }
  .video-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 21px 11px; }
  .video-card-featured { grid-column: span 2; }
  .video-thumb { border-radius: 9px; }
  .video-card-body { gap: 7px; padding-top: 8px; }
  .creator-avatar { width: 27px; height: 27px; font-size: 11px; }
  .video-title { font-size: 10px; line-height: 1.5; }
  .creator-name { font-size: 9px; }
  .video-meta { font-size: 8px; gap: 4px; }
  .card-actions { display: none; }
  .thumb-play { width: 34px; height: 34px; }
  .video-duration { right: 6px; bottom: 6px; padding: 3px 5px; font-size: 8px; }
  .creator-callout { flex-wrap: wrap; gap: 11px; margin-top: 28px; padding: 15px; }
  .creator-callout-mark { width: 36px; height: 36px; }
  .creator-callout>div:nth-child(2) { flex: 1; min-width: 170px; }
  .creator-callout h3 { font-size: 12px; }
  .creator-callout p { font-size: 9px; }
  .outline-cta { margin-left: 47px; padding: 7px 10px; font-size: 9px; }
  .watch-layout { display: flex; flex-direction: column; gap: 24px; }
  .player-stage { margin: 0 -15px; width: calc(100% + 30px); border-radius: 0; }
  .player-state-note { top: 9px; left: 10px; font-size: 8px; }
  .player-center-play { width: 47px; height: 47px; }
  .watch-title { font-size: 17px; }
  .watch-creator-row { gap: 8px; flex-wrap: wrap; }
  .watch-creator-text { flex: 1; min-width: 100px; }
  .watch-creator-text .creator-name { font-size: 10px; }
  .follow-button { padding: 8px 11px; font-size: 9px; }
  .watch-actions { flex-basis: 100%; margin: 4px 0 0 48px; }
  .action-pill { height: 30px; padding: 0 9px; }
  .recommendations { display: grid; grid-template-columns: 1fr 1fr; gap: 15px 10px; }
  .recommendations-title { grid-column: span 2; }
  .recommendations .video-title { font-size: 9px; }
  .channel-cover { height: 132px; margin: 0 -15px; border-radius: 0; padding-left: 18px; }
  .channel-profile { align-items: flex-start; flex-wrap: wrap; gap: 12px; padding: 17px 0; }
  .channel-avatar { width: 56px; height: 56px; font-size: 22px; }
  .channel-info { width: calc(100% - 75px); flex: 1 1 calc(100% - 75px); }
  .channel-info h1 { font-size: 18px; }
  .channel-handle { font-size: 9px; line-height: 1.5; }
  .channel-info p { font-size: 10px; }
  .channel-actions { margin-left: 68px; margin-top: -10px; }
  .channel-tabs { gap: 16px; }
  .channel-tabs button,.channel-tabs>a { font-size: 9px; }
  .channel-grid { padding-top: 16px; }
  .page-heading { margin: 0 0 18px; }
  .page-heading h1 { font-size: 24px; }
  .page-heading p { font-size: 11px; }
  .search-heading { margin-top: 0; }
  .search-large { height: 48px; padding: 0 11px; }
  .search-large input { font-size: 12px; }
  .search-filters { gap: 6px; margin: 17px 0 21px; }
  .search-filters>span { width: 100%; }
  .results-heading h2 { font-size: 15px; }
  .upload-page { margin: 0; }
  .upload-form { gap: 13px; padding: 14px; }
  .dropzone { min-height: 165px; }
  .upload-footer { align-items: flex-start; flex-direction: column; }
  .upload-footer .primary-cta { width: 100%; }
  .login-panel { margin: 4vh auto; padding: 28px 22px; }
  .login-panel h1 { font-size: 32px; }
}
@media (max-width: 385px) {
  .page-layout { padding: 0 11px; }
  .topbar { padding: 0 11px; }
  .hero-copy { padding-left: 18px; }
  .hero-copy h1 { font-size: 35px; }
  .video-grid { gap: 18px 9px; }
  .watch-actions { margin-left: 42px; }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}


.player-stage-embed { background-color: #090a09; }
.player-embed { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; border: 0; background: #090a09; }
.upload-progress { display: flex; flex-direction: column; gap: 7px; margin-top: -7px; color: #737a72; font-size: 10px; }
.upload-progress>div:first-child { display: flex; justify-content: space-between; }
.upload-progress strong { color: #c74c39; font: 700 10px Inter,system-ui,sans-serif; }
.progress-track { height: 5px; border-radius: 999px; overflow: hidden; background: #f0ece6; }
.progress-track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#f68c70,#f05a43); transition: width .2s ease; }
.form-field select { width: 100%; height: 40px; padding: 0 11px; border: 1px solid #e3e1da; border-radius: 8px; color: #343934; background: #fff; font-size: 12px; }
.form-field select:focus { outline: 0; border-color: #e9a196; box-shadow: 0 0 0 3px #f05a4311; }
.form-field select:disabled { background: #f6f5f2; color: #989c95; }
.demo-note { margin: 11px 0 0; color: #a0a49d; font-size: 10px; line-height: 1.5; }


.profile-edit-panel { display: flex; flex-direction: column; gap: 15px; margin: 16px 0 6px; padding: 18px; border: 1px solid #e9e5dc; border-radius: 13px; background: #fff; }
.profile-edit-title { display: flex; align-items: center; justify-content: space-between; color: #393e39; font-size: 13px; }
.handle-input { display: flex; align-items: center; gap: 7px; padding: 0 11px; border: 1px solid #e3e1da; border-radius: 8px; background: #fff; color: #9a9e98; }
.handle-input input { border: 0; padding-left: 0; box-shadow: none !important; }
.profile-edit-panel .form-field>small { color: #a1a49e; font-size: 9px; }
.profile-edit-actions { display: flex; justify-content: flex-end; gap: 9px; padding-top: 5px; }
.player-controls button:disabled { cursor: not-allowed; opacity: .55; }
.logout-button { width: 30px; height: 30px; color: #878c85; }
.logout-button:hover { color: var(--primary); background: #fff0eb; }
@media (max-width:760px) { .profile-edit-panel { padding: 14px; } .profile-edit-actions { justify-content: stretch; } .profile-edit-actions>* { flex: 1; justify-content: center; } }

.card-actions .card-icon { display: inline-flex; align-items: center; justify-content: center; gap: 5px; width: auto; min-width: 30px; padding: 0 7px; white-space: nowrap; }
.card-like-count { color: #777d75; font: 600 9px Inter,system-ui,sans-serif; }
.card-icon-liked .card-like-count { color: var(--primary); }


/* YouTube-only upload, owner settings and privacy pages */
.video-thumb-youtube { background: linear-gradient(135deg,#1c2825,#34433d 55%,#151918); }
.video-thumb-placeholder { position:absolute; inset:0; display:flex; align-items:flex-end; padding:13px; color:#fff; background:radial-gradient(circle at 76% 22%,#f05a4338,transparent 33%),linear-gradient(135deg,#202b27,#101514); }
.video-thumb-placeholder small { font:600 9px Inter,"Noto Sans Bengali",system-ui,sans-serif; letter-spacing:.08em; text-transform:uppercase; opacity:.78; }
.player-stage-embed::after { display:none; }

.settings-page { max-width:840px; margin:0 auto; }
.settings-page>.page-heading { margin-top:8px; }
.settings-card { display:flex; flex-direction:column; gap:15px; margin:14px 0; padding:19px; border:1px solid #e8e5dd; border-radius:14px; background:#fff; box-shadow:0 4px 18px #1b1e1908; }
.settings-card-heading { display:flex; align-items:flex-start; gap:11px; color:var(--primary); }
.settings-card-heading>svg { flex:0 0 auto; margin-top:2px; }
.settings-card-heading h2 { margin:0 0 4px; color:#303630; font-size:15px; }
.settings-card-heading p { margin:0; color:#7d837c; font-size:11px; line-height:1.6; }
.settings-help { margin:0; color:#7b8179; font-size:10px; line-height:1.7; }
.settings-help a,.settings-footer a,.settings-card a:not(.outline-cta) { color:#b64634; text-decoration:underline; text-underline-offset:2px; }
.settings-actions { display:flex; flex-wrap:wrap; align-items:center; gap:9px; }
.settings-actions .outline-cta { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:38px; }
.settings-card .notice { align-items:flex-start; }
.connected-channel { display:flex; align-items:center; gap:11px; padding:13px; border:1px solid #d7ebdb; border-radius:10px; color:#42805a; background:#f2faf3; }
.connected-channel>div { flex:1; display:flex; flex-direction:column; gap:4px; min-width:0; }
.connected-channel strong { color:#283e2e; font-size:12px; }
.connected-channel span { color:#708276; font-size:10px; line-height:1.5; }
.connected-channel>a { display:grid; place-items:center; width:34px; height:34px; border-radius:50%; color:#36724c; background:#e2f1e5; }
.upload-target { margin:0 0 14px; }
.redirect-box { display:flex; align-items:center; gap:9px; padding:9px 10px; border:1px solid #e6e3db; border-radius:9px; background:#f8f7f3; }
.redirect-box code { flex:1; overflow-wrap:anywhere; color:#4e564e; font-size:10px; line-height:1.55; }
.icon-button { width:34px; height:34px; display:grid; flex:0 0 auto; place-items:center; border:1px solid #e4e1d9; border-radius:8px; color:#71776f; background:#fff; }
.consent-row { display:flex; align-items:flex-start; gap:9px; color:#6f756e; font-size:10px; line-height:1.65; }
.consent-row input { flex:0 0 auto; width:15px; height:15px; margin:2px 0 0; accent-color:var(--primary); }
.consent-row a { color:#b64634; text-decoration:underline; text-underline-offset:2px; }
.upload-consents { display:flex; flex-direction:column; gap:12px; padding:13px; border:1px solid #ece8df; border-radius:10px; background:#fbfaf7; }
.inline-error { margin:0; color:#b43e31; font-size:11px; line-height:1.55; }
.settings-footer { display:flex; flex-wrap:wrap; gap:17px; margin:20px 0 8px; color:#858b83; font-size:10px; }
.library-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 0; border-top:1px solid #eeece5; }
.library-row>div { min-width:0; display:flex; flex-direction:column; gap:4px; }
.library-row strong { overflow:hidden; color:#373d37; text-overflow:ellipsis; white-space:nowrap; font-size:11px; }
.library-row span { color:#898f87; font-size:9px; }
.library-row .outline-cta { min-height:33px; padding:0 11px; flex:0 0 auto; }
.sidebar-policy-links { display:flex; gap:11px; margin-top:7px; font-size:9px; }
.sidebar-policy-links a { color:#8d938a; text-decoration:none; }
.sidebar-policy-links a:hover { color:var(--primary); }
.policy-page { width:min(100%,820px); margin:0 auto; padding:3px 0 36px; color:#4f564f; font-size:13px; line-height:1.8; }
.policy-page .section-kicker { display:flex; align-items:center; gap:6px; }
.policy-page h1 { margin:10px 0 4px; color:#29302a; font-size:32px; letter-spacing:-.035em; }
.policy-page h2 { margin:27px 0 8px; color:#303730; font-size:17px; }
.policy-page p { margin:11px 0; }
.policy-page ul { padding-left:22px; }
.policy-page li { margin:7px 0; }
.policy-page a { color:#b64634; text-decoration:underline; text-underline-offset:2px; }
.policy-page a svg { vertical-align:middle; }
.policy-updated { color:#969b94; font-size:10px; }
.policy-footer { margin-top:30px !important; padding-top:15px; border-top:1px solid #e8e6df; color:#838980; font-size:11px; }
.private-video-note { margin-top:12px; }
.primary-cta:disabled { cursor:not-allowed; opacity:.58; }
@media (max-width:760px) {
  .settings-card { gap:13px; margin:11px 0; padding:14px; }
  .settings-actions { align-items:stretch; flex-direction:column; }
  .settings-actions>* { width:100%; justify-content:center; }
  .library-row { align-items:flex-start; flex-direction:column; }
  .library-row .outline-cta { width:auto; }
  .policy-page { font-size:12px; }
  .policy-page h1 { font-size:26px; }
  .policy-page h2 { font-size:15px; }
}


/* Static ClipNest shell and R2-backed interactions */
#accountArea { display:flex; align-items:center; justify-content:flex-end; }
.account-wrap { position:relative; }
.account-toggle { min-height:38px; display:flex; align-items:center; gap:8px; max-width:190px; padding:4px 10px 4px 5px; border:1px solid #e5e3dc; border-radius:999px; background:#fff; color:#353a35; font-size:12px; font-weight:650; }
.account-toggle:hover { background:#faf9f6; }
.account-toggle .user-avatar { width:28px; height:28px; font-size:12px; }
.account-toggle .account-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.account-menu { display:none; position:absolute; z-index:40; top:calc(100% + 8px); right:0; min-width:205px; padding:7px; border:1px solid #e8e5dd; border-radius:12px; background:#fff; box-shadow:0 14px 38px #26271e1a; }
.account-menu.open { display:grid; gap:3px; }
.account-menu .menu-note { padding:8px 10px 10px; color:#969b94; border-bottom:1px solid #efeee8; font-size:10px; }
.account-menu a,.account-menu button { width:100%; padding:9px 10px; text-align:left; border:0; border-radius:8px; background:transparent; color:#515750; font-size:11px; }
.account-menu a:hover,.account-menu button:hover { color:#bd4936; background:#fff0eb; }
.account-menu .logout-item { color:#a44135; }
#app > section, #app > .upload-page, #app > .settings-page, #app > .policy-page { min-width:0; }
#app .video-grid > .empty-state { grid-column:1/-1; }
#app .video-grid > .empty-state p { max-width:420px; line-height:1.6; }
.video-thumb img { z-index:0; }
.video-thumb .thumb-overlay { position:absolute; inset:0; z-index:1; background:linear-gradient(0deg,#10141285 0%,transparent 54%); pointer-events:none; }
.thumb-play,.video-duration { z-index:2; }
.video-card-featured .video-thumb { border-radius:14px; }
.video-card-featured .video-thumb img { object-position:center 54%; }
.card-like-count { color:#777d75; font:600 9px Inter,system-ui,sans-serif; }
.card-icon-liked,.card-icon-liked .card-like-count { color:var(--primary); }
.player-media { position:absolute; inset:0; width:100%; height:100%; z-index:1; border:0; background:#090a09; object-fit:contain; }
.player-stage-has-video::after { display:none; }
.player-stage-has-video .player-state-note { display:none; }
.watch-actions { flex-wrap:wrap; }
.watch-actions .watch-stats { font-size:10px; }
.watch-creator-row .channel-link { margin-left:4px; }
.watch-main .video-description { white-space:pre-wrap; }
.profile-edit-panel[hidden] { display:none; }
.profile-edit-panel { display:flex; flex-direction:column; gap:15px; margin:16px 0; padding:18px; border:1px solid #e9e5dc; border-radius:13px; background:#fff; }
.profile-edit-title { display:flex; align-items:center; justify-content:space-between; color:#393e39; font-size:13px; }
.profile-edit-actions { display:flex; justify-content:flex-end; gap:9px; padding-top:5px; }
.notice a,.upload-footnote a,.settings-help a { color:#b64634; text-decoration:underline; text-underline-offset:2px; }
.upload-footer>span { max-width:50%; line-height:1.5; }
.upload-progress { display:flex; flex-direction:column; gap:7px; margin-top:-7px; color:#737a72; font-size:10px; }
.upload-progress>div:first-child { display:flex; justify-content:space-between; }
.upload-progress strong { color:#c74c39; font:700 10px Inter,system-ui,sans-serif; }
.progress-track { height:5px; overflow:hidden; border-radius:999px; background:#f0ece6; }
.progress-track span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#f68c70,#f05a43); transition:width .2s ease; }
.form-field select { width:100%; height:40px; padding:0 11px; border:1px solid #e3e1da; border-radius:8px; color:#343934; background:#fff; font-size:12px; }
.form-field select:focus { outline:0; border-color:#e9a196; box-shadow:0 0 0 3px #f05a4311; }
.form-field select:disabled { background:#f6f5f2; color:#989c95; }
.dropzone input { display:none; }
.dropzone-busy { opacity:.65; pointer-events:none; }
.notice-warn { align-items:center; }
.video-meta .meta-dot { flex:0 0 auto; }
.section-kicker .icon { display:inline-flex; }
.text-button { padding:0; border:0; background:transparent; color:#bd4936; font-size:11px; font-weight:700; }
.icon-only .card-like-count { font-size:9px; }
@media(max-width:760px) {
  #accountArea { gap:5px; }
  .account-toggle { width:36px; min-width:36px; height:36px; justify-content:center; padding:3px; border:0; background:transparent; }
  .account-toggle .account-name,.account-toggle .chevron { display:none; }
  .account-toggle .user-avatar { width:31px; height:31px; }
  .account-menu { top:calc(100% + 7px); }
  .profile-edit-panel { padding:14px; }
  .profile-edit-actions { justify-content:stretch; }
  .profile-edit-actions>* { flex:1; justify-content:center; }
  .upload-footer>span { max-width:none; }
}

[hidden] { display:none !important; }
.channels-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(235px,1fr)); gap:12px; }
.channel-discovery-card { min-width:0; display:flex; align-items:center; gap:12px; padding:14px; border:1px solid #e8e5dd; border-radius:14px; background:#fff; transition:transform .16s,border-color .16s,box-shadow .16s; }
.channel-discovery-card:hover { transform:translateY(-2px); border-color:#e9c6bb; box-shadow:0 7px 22px #26271e0b; }
.channel-discovery-card .channel-avatar { flex:0 0 auto; }
.channel-discovery-copy { min-width:0; flex:1; display:flex; flex-direction:column; gap:3px; }
.channel-discovery-copy h3 { display:flex; align-items:center; gap:4px; overflow:hidden; margin:0; color:#303630; text-overflow:ellipsis; white-space:nowrap; font-size:13px; }
.channel-discovery-copy h3 .channel-name-text { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.channel-discovery-copy>span { overflow:hidden; color:#81877f; text-overflow:ellipsis; white-space:nowrap; font-size:10px; }
.channel-discovery-copy small { color:#a0a49d; font-size:9px; }
.channel-discovery-arrow { color:#bd4936; font-size:16px; }
.toast-error { border-color:#e6b3a8 !important; color:#8e342a !important; background:#fff4f1 !important; }
@media(max-width:760px) {
  .channels-grid { grid-template-columns:1fr; }
}


/* ClipNest creator-and-viewer features: familiar video patterns, original coral/cream visual identity. */
.creator-avatar-link { flex: 0 0 auto; display: grid; place-items: center; }
.creator-avatar img,.channel-avatar img,.comment-avatar img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.video-card { transition: transform .16s ease; }
.video-card:hover { transform: translateY(-2px); }
.video-thumb { border: 1px solid #20252008; }
.video-meta { flex-wrap: wrap; }
.video-duration { max-width: 90%; overflow: hidden; text-overflow: ellipsis; }
.card-actions { opacity: 1; }
.card-icon { min-width: 30px; }
.card-save,.card-remove { font-size: 14px; }
.card-remove:hover { color: #c34139; background: #fff0ef; }
.load-more { margin: 24px auto 0 !important; display: flex !important; justify-content: center; }

.player-stage { background: #151817; }
.player-stage-has-video { aspect-ratio: 16/9; }
.player-media { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: contain; background: #090a09; }
.player-stage::after { z-index: 2; }
.watch-creator-row { align-items: center; }
.watch-creator-text { min-width: 120px; }
.watch-creator-text .subscriber-count { display: block; margin-top: 3px; color: #858a83; font-size: 10px; }
.follow-button { min-height: 38px; padding: 0 16px; border: 0; border-radius: 999px; color: #fff; background: var(--primary); font-size: 11px; font-weight: 750; white-space: nowrap; transition: background .15s, transform .15s; }
.follow-button:hover { transform: translateY(-1px); background: #d94c37; }
.follow-button-active { color: #444a43; background: #eeede8; }
.follow-button-active:hover { color: #b44433; background: #f8e9e4; }
.follow-button:disabled { opacity: .6; cursor: wait; }
.video-description { display: block; margin: 17px 0 23px; padding: 13px 15px; border: 1px solid #ece9e2; border-radius: 12px; background: #f0efeb; color: #4f554e; font-size: 11px; line-height: 1.75; }
.video-description summary { color: #424941; font-size: 11px; font-weight: 700; cursor: pointer; }
.video-description p { margin: 10px 0 5px; white-space: pre-wrap; overflow-wrap: anywhere; }
.video-description>span { color: #9a9d96; font-size: 9px; }
.discussion { margin-top: 24px; }
.comments-heading { display: flex; align-items: baseline; gap: 11px; margin: 0 0 13px; }
.comments-heading h2 { margin: 0; color: #292e29; font-size: 18px; letter-spacing: -.02em; }
.comment-count { color: #8d928b; font-size: 10px; }
.comment-form { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.comment-form textarea { width: 100%; min-height: 50px; resize: vertical; padding: 11px 13px; border: 1px solid #e3e1da; border-radius: 10px; background: #fff; color: #333831; font-size: 11px; line-height: 1.65; }
.comment-form textarea:focus { outline: 0; border-color: #e9a196; box-shadow: 0 0 0 3px #f05a4311; }
.comment-form textarea:disabled { background: #f3f2ee; cursor: not-allowed; }
.comment-form-footer { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.comment-submit { min-height: 34px; padding: 0 14px; font-size: 10px; }
.comment-cancel { border: 0; background: transparent; color: #848a82; font-size: 10px; }
.comment-cancel:hover,.comment-reply:hover { color: var(--primary); }
.reply-notice { padding: 7px 10px; border-radius: 8px; color: #a34839; background: #fff0eb; font-size: 10px; }
.comments-list { display: flex; flex-direction: column; gap: 15px; }
.comment-item { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.comment-avatar { flex: 0 0 auto; display: grid; place-items: center; width: 31px; height: 31px; overflow: hidden; border-radius: 50%; color: white; font-size: 11px; font-weight: 700; }
.comment-body { min-width: 0; flex: 1; }
.comment-meta { display: flex; align-items: baseline; gap: 8px; }
.comment-meta strong { color: #343a34; font-size: 10px; }
.comment-meta span { color: #989d96; font-size: 9px; }
.comment-body p { margin: 5px 0; color: #525850; font-size: 11px; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }
.comment-reply { padding: 3px 0; border: 0; color: #8a8f88; background: transparent; font-size: 9px; font-weight: 650; }
.comment-replies { display: flex; flex-direction: column; gap: 11px; margin: 12px 0 2px 8px; padding-left: 13px; border-left: 2px solid #f0e2dc; }
.comment-replies .comment-avatar { width: 25px; height: 25px; font-size: 9px; }
.comment-reply-body .comment-meta strong { color: #656b63; }

.library-page { min-width: 0; }
.library-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.library-heading .outline-cta { margin-left: auto; }
.playlist-create-form { display: grid; grid-template-columns: minmax(160px,1fr) minmax(160px,1fr) auto auto; align-items: center; gap: 10px; margin: 17px 0 22px; padding: 15px; border: 1px solid #ece8df; border-radius: 13px; background: #fff; }
.playlist-create-form>input { min-width: 0; height: 39px; padding: 0 10px; border: 1px solid #e4e1d9; border-radius: 8px; color: #343934; background: #fff; font-size: 10px; }
.playlist-create-form>input:focus { outline: 0; border-color: #e9a196; }
.playlist-create-form .primary-cta { height: 38px; padding: 0 12px; font-size: 10px; white-space: nowrap; }
.playlist-public-toggle { display: flex; align-items: center; gap: 6px; color: #747a72; font-size: 9px; white-space: nowrap; }
.playlist-public-toggle input { accent-color: var(--primary); }
.playlist-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.playlist-card { min-width: 0; min-height: 94px; display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid #e9e6de; border-radius: 13px; background: #fff; transition: border-color .15s,transform .15s,box-shadow .15s; }
.playlist-card:hover { transform: translateY(-2px); border-color: #edc0b4; box-shadow: 0 8px 20px #33271d0a; }
.playlist-art { flex: 0 0 auto; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 12px; color: #bd4b39; background: #fff0eb; font-size: 24px; }
.playlist-card-copy { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 5px; }
.playlist-card-copy strong { overflow: hidden; color: #303630; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.playlist-card-copy small { color: #8b9189; font-size: 9px; line-height: 1.5; }
.playlist-arrow { color: #b4b7b0; }
.playlist-picker { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: -4px 0 12px 49px; padding: 10px; border: 1px solid #ece7df; border-radius: 10px; background: #fff; }
.playlist-picker-item { min-height: 30px; padding: 0 11px; border: 1px solid #e8e4dc; border-radius: 999px; color: #656b64; background: #faf9f6; font-size: 10px; }
.playlist-picker-item:hover { border-color: #edb5a9; color: #b84634; background: #fff3ef; }
.playlist-picker>.text-link { padding: 6px; }

@media (max-width: 1100px) {
  .playlist-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .playlist-create-form { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .watch-creator-row { gap: 9px; }
  .watch-creator-row .follow-button { margin-left: 0; }
  .watch-actions { flex-basis: 100%; margin-left: 0; }
  .watch-actions .watch-stats { width: 100%; }
  .video-description { margin-top: 13px; padding: 11px 12px; }
  .discussion { margin-top: 19px; }
  .comments-heading h2 { font-size: 16px; }
  .comment-form textarea { font-size: 11px; }
  .playlist-grid { grid-template-columns: 1fr; }
  .playlist-create-form { grid-template-columns: 1fr; align-items: stretch; }
  .playlist-public-toggle { min-height: 28px; }
  .playlist-create-form .primary-cta { width: 100%; }
  .library-heading { align-items: flex-start; flex-direction: column; }
  .library-heading .outline-cta { margin: 0; }
  .channel-profile .channel-avatar img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
  .card-actions { opacity: 1; }
  .playlist-picker { margin-left: 0; }
}

.hero-image { z-index: 0; }
.hero-shade { z-index: 1; }
.hero-copy { position: relative; z-index: 2; }
.hero-caption,.hero-progress { z-index: 2; }
#app:focus { outline: none; }

/* Creator studio, administration, advertising and moderation console */
.console-page { max-width: 1120px; margin: 0 auto; }
.console-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:16px; margin: 4px 0 22px; }
.console-heading h1 { margin:5px 0 4px; font-size:clamp(24px,3vw,34px); letter-spacing:-.035em; }
.console-heading p { margin:0; color:#777d77; font-size:12px; line-height:1.65; }
.console-tabs { display:flex; flex-wrap:wrap; gap:7px; margin:0 0 20px; padding:7px; width:fit-content; max-width:100%; border:1px solid #e8e4dc; border-radius:13px; background:#fff; }
.console-tab { border:0; border-radius:9px; padding:9px 13px; color:#62685f; background:transparent; font-size:11px; font-weight:700; }
.console-tab.active,.console-tab:hover { color:#b84534; background:#fff0eb; }
.console-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-bottom:18px; }
.milestone-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; align-items:stretch; }
.milestone-progress,.milestone-apply { padding:16px; border:1px solid #e9e6de; border-radius:15px; background:#fff; }
.milestone-progress-heading { display:flex; justify-content:space-between; gap:12px; color:#252925; }
.milestone-progress-heading span { color:#248a58; font-weight:800; }
.milestone-progress-track { height:10px; margin:12px 0 8px; overflow:hidden; border-radius:999px; background:#e7eee9; }
.milestone-progress-fill { height:100%; min-width:0; border-radius:inherit; background:linear-gradient(90deg,#2baa68,#54c77e); transition:width .35s ease; }
.milestone-apply { display:flex; flex-direction:column; align-items:flex-start; gap:8px; }
.milestone-apply strong { color:#248a58; font-size:18px; }
.milestone-apply .primary-cta:disabled { cursor:not-allowed; opacity:.55; }
.console-stat { min-width:0; padding:16px; border:1px solid #e9e6de; border-radius:15px; background:#fff; }
.console-stat-label { display:block; color:#858a83; font-size:10px; font-weight:650; }
.console-stat-value { display:block; margin-top:8px; color:#252925; font-size:24px; font-weight:800; letter-spacing:-.04em; overflow-wrap:anywhere; }
.console-stat-note { display:block; margin-top:5px; color:#999d97; font-size:9px; line-height:1.5; }
.console-panel { margin:0 0 16px; padding:18px; border:1px solid #e9e6de; border-radius:16px; background:#fff; }
.console-panel h2 { margin:0 0 5px; font-size:17px; letter-spacing:-.02em; }
.console-panel>p { margin:0 0 14px; color:#858a83; font-size:11px; line-height:1.7; }
.console-form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; }
.console-form .form-field { margin:0; }
.console-form .form-field input,.console-form .form-field select,.console-form .form-field textarea { width:100%; min-height:39px; padding:9px 11px; border:1px solid #e5e2da; border-radius:10px; background:#fff; color:#303630; font-size:11px; }
.console-form .form-field textarea { min-height:80px; resize:vertical; }
.console-form .span-2 { grid-column:1/-1; }
.console-form-actions { grid-column:1/-1; display:flex; flex-wrap:wrap; align-items:center; gap:9px; }
.console-table-wrap { overflow-x:auto; }
.console-table { width:100%; border-collapse:collapse; font-size:10px; }
.console-table th,.console-table td { padding:10px 9px; border-bottom:1px solid #efede8; text-align:left; vertical-align:top; }
.console-table th { color:#858a83; font-size:9px; font-weight:700; white-space:nowrap; }
.console-table td { color:#424841; line-height:1.6; }
.console-table td strong { color:#282d28; }
.console-badge { display:inline-flex; align-items:center; padding:3px 8px; border-radius:999px; color:#62685f; background:#f0efeb; font-size:9px; font-weight:700; white-space:nowrap; }
.console-badge.good { color:#2d7554; background:#e8f5ee; }
.console-badge.warn { color:#a25a22; background:#fff2dc; }
.console-badge.bad { color:#a93434; background:#ffebeb; }
.console-actions { display:flex; flex-wrap:wrap; gap:6px; }
.console-actions button,.console-small-button { min-height:30px; padding:5px 9px; border:1px solid #e5e2da; border-radius:8px; color:#555c55; background:#fff; font-size:9px; font-weight:700; }
.console-actions button:hover,.console-small-button:hover { border-color:#efb3a7; color:#b84634; }
.console-danger { color:#a93434!important; }
.console-notice { margin:10px 0; padding:10px 12px; border:1px solid #f0d1c9; border-radius:10px; color:#8d4538; background:#fff4f0; font-size:10px; line-height:1.7; }
.console-empty { padding:18px 12px; text-align:center; color:#8a8f88; font-size:11px; }
.console-chart { display:grid; grid-template-columns:repeat(14,minmax(0,1fr)); align-items:end; gap:7px; min-height:132px; padding:15px 4px 25px; border-bottom:1px solid #eeece6; }
.console-chart-bar { position:relative; min-height:3px; border-radius:6px 6px 2px 2px; background:linear-gradient(180deg,#f08b73,#e75a43); }
.console-chart-bar span { position:absolute; left:50%; bottom:-21px; transform:translateX(-50%); color:#969a94; font-size:8px; white-space:nowrap; }
.console-toggle { display:flex; align-items:center; gap:9px; color:#444a43; font-size:11px; font-weight:650; }
.console-toggle input { accent-color:var(--primary); width:16px; height:16px; }
.sponsored-card { --ad-size-width:var(--ad-desktop-width,640px); --ad-size-height:var(--ad-desktop-height,360px); --ad-ratio:var(--ad-desktop-ratio,16/9); position:relative; min-width:0; overflow:hidden; border:1px solid #edc5b9; border-radius:15px; background:#fff; }
.sponsored-card > a { display:block; color:inherit; text-decoration:none; }
.sponsored-image-frame { width:100%; max-width:var(--ad-size-width); aspect-ratio:var(--ad-ratio); overflow:hidden; background:#f1eee8; }
.sponsored-image-frame img { display:block; width:100%; height:100%; object-fit:contain; background:#f1eee8; }
.sponsored-copy { display:flex; flex-direction:column; gap:5px; padding:11px 12px 12px; }
.sponsored-label { color:#ad563f; font-size:8px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.sponsored-copy strong { color:#303630; font-size:11px; line-height:1.5; }
.sponsored-copy small { color:#888e87; font-size:9px; }
.sponsored-cta { display:inline-flex; align-self:flex-start; padding:6px 10px; border-radius:999px; color:#fff; background:var(--primary); font-size:9px; font-weight:750; }
.sponsored-watch { display:block; margin:14px 0; padding:10px; }
.sponsored-watch > a { display:grid; grid-template-columns:minmax(0,var(--ad-size-width)) minmax(0,1fr); align-items:start; gap:11px; }
.sponsored-watch .sponsored-image-frame { border-radius:9px; }
.sponsored-feed-cell { grid-column:auto; min-width:0; margin:0; }
.console-muted { color:#8a8f88; font-size:10px; line-height:1.7; }
.studio-shell { max-width:1280px; margin:0 auto; }
.studio-hero { display:flex; justify-content:space-between; align-items:center; gap:22px; margin:4px 0 20px; padding:26px 28px; border:1px solid #294638; border-radius:22px; background:radial-gradient(ellipse at 92% 0%,#14553f88,transparent 46%),linear-gradient(120deg,#10231b,#0b1712); box-shadow:0 16px 44px #0002; }
.studio-hero h1 { margin:5px 0 6px; font-size:clamp(24px,3vw,36px); letter-spacing:-.04em; }
.studio-hero p { max-width:540px; margin:0; color:#a3b8ad; font-size:12px; line-height:1.7; }
.studio-hero-actions { display:flex; flex-wrap:wrap; gap:8px; }
.studio-layout { display:grid; grid-template-columns:210px minmax(0,1fr); align-items:start; gap:18px; }
.studio-nav { position:sticky; top:84px; display:grid; gap:5px; padding:10px; border:1px solid #263c32; border-radius:16px; background:#0c1913; }
.studio-nav button { display:flex; align-items:center; gap:10px; min-height:42px; padding:9px 11px; border:0; border-radius:10px; color:#9bb1a5; background:transparent; text-align:left; font-size:11px; font-weight:700; cursor:pointer; }
.studio-nav button:hover,.studio-nav button.active { color:#a3f0db; background:#15382c; }
.studio-nav .studio-nav-count { margin-left:auto; padding:2px 7px; border-radius:99px; background:#214537; font-size:9px; }
.studio-content { min-width:0; }
.studio-content .console-heading { margin-top:4px; }
.studio-content .console-panel { box-shadow:0 8px 26px #0001; }
.studio-toolbar { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; margin:0 0 14px; }
.studio-video-cell { display:flex; align-items:center; min-width:190px; gap:10px; }
.studio-thumb { width:78px; aspect-ratio:16/9; display:grid; place-items:center; flex:none; overflow:hidden; border:1px solid #30483c; border-radius:9px; color:#8ce9d1; background:linear-gradient(135deg,#183d30,#0a1712); font-size:18px; }
.studio-thumb img { width:100%; height:100%; object-fit:cover; }
.studio-content .console-table td { vertical-align:middle; }
.studio-comment { display:grid; gap:9px; min-width:240px; padding:10px; border:1px solid #263c32; border-radius:11px; background:#0b1712; }
.studio-comment textarea { min-height:64px; padding:9px; border:1px solid #294238; border-radius:9px; color:#e5f2ec; background:#09140f; font:inherit; }
.studio-notification { display:grid; grid-template-columns:34px minmax(0,1fr) auto; align-items:start; gap:12px; padding:13px 0; border-bottom:1px solid #20342b; }
.studio-notification:last-child { border-bottom:0; }
.studio-notification-icon { display:grid; place-items:center; width:34px; height:34px; border-radius:11px; color:#8ce9d1; background:#163b2e; }
.studio-notification p { margin:4px 0 0; color:#9aafa4; font-size:10px; line-height:1.6; }
.studio-resource-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.studio-resource { display:block; padding:15px; border:1px solid #294238; border-radius:13px; color:#d6e9df; background:#0b1712; }
.studio-resource strong { display:block; margin-bottom:5px; font-size:12px; }
.studio-resource span { color:#9aafa4; font-size:10px; line-height:1.7; }
.studio-cover-preview { min-height:130px; display:flex; align-items:flex-end; padding:15px; border:1px solid #294238; border-radius:14px; color:#fff; background:linear-gradient(0deg,#07120fdd,transparent 75%),linear-gradient(125deg,#1b7256,#0d241a); background-size:cover; background-position:center; }
.studio-inline-note { margin:10px 0; color:#99b0a4; font-size:10px; line-height:1.7; }
@media(max-width:900px){.studio-layout{grid-template-columns:1fr}.studio-nav{position:static;display:flex;overflow-x:auto}.studio-nav button{white-space:nowrap}.studio-hero{align-items:flex-start;flex-direction:column}}
@media(max-width:560px){.studio-hero{padding:20px;border-radius:17px}.studio-resource-grid{grid-template-columns:1fr}.studio-comment{min-width:220px}}
@media (max-width:900px) { .console-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:760px) { .console-heading { align-items:flex-start; flex-direction:column; } .console-tabs { width:100%; overflow-x:auto; flex-wrap:nowrap; } .console-tab { white-space:nowrap; } .console-form { grid-template-columns:1fr; } .console-form .span-2,.console-form-actions { grid-column:1; } .console-panel { padding:14px; } .console-chart { gap:4px; } .console-stat-value { font-size:20px; } .milestone-grid { grid-template-columns:1fr; } }


/* Atharo | আঠারো — deep green-black theme */
:root {
  --primary: #16b89b;
  --primary-foreground: #062019;
  --background: #07120f;
  --foreground: #e5f2ec;
  --card: #0e1b16;
  --card-foreground: #e5f2ec;
  --popover: #102019;
  --popover-foreground: #e5f2ec;
  --secondary: #172923;
  --secondary-foreground: #d2e4db;
  --muted: #192a22;
  --muted-foreground: #9ab0a4;
  --accent: #153b30;
  --accent-foreground: #8ce9d1;
  --destructive: #e16b68;
  --destructive-foreground: #fff;
  --border: #263c32;
  --input: #294238;
  --ring: #20c2a2;
  color-scheme: dark;
}
html,body { background:var(--background); color:var(--foreground); }
body { color:var(--foreground); }
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible { outline-color:#20c2a288; }
::selection { background:#16b89b55; color:#f0fff9; }
.topbar { background:rgba(7,18,15,.96); border-bottom-color:var(--border); }
.brand-lockup { gap:5px; padding:4px 8px; border:1px solid #b7e9d933; border-radius:13px; background:#dff4e9; box-shadow:0 5px 22px #0003; }
.brand-latin { color:#006e64; font:800 12px/1 Inter,system-ui,sans-serif; white-space:nowrap; }
.brand-logo { display:block; width:130px; height:auto; max-height:45px; object-fit:contain; }
.top-search,.account-toggle,.account-menu,.console-tabs { background:#101e18; border-color:var(--border); color:var(--foreground); }
.top-search:focus-within { border-color:#248f78; box-shadow:0 0 0 3px #16b89b22; }
.top-search input,.search-large input,.form-field input,.form-field textarea,.form-field select,.comment-form textarea,.playlist-create-form>input,.console-form .form-field input,.console-form .form-field select,.console-form .form-field textarea { background:#0a1712; color:#e5f2ec; border-color:#2b4338; }
.top-search input::placeholder,.search-large input::placeholder,.form-field input::placeholder,.form-field textarea::placeholder,.comment-form textarea::placeholder { color:#80998c; }
.top-search button,.search-clear,.icon-button { color:#c5d8ce; background:#1a2b23; border-color:#30483c; }
.upload-link,.icon-button,.top-actions { color:#d1e4da; }
.upload-link:hover,.text-link:hover,.see-all:hover { color:#72dfc4; }
.login-button { color:#eafff6; background:#0b3329; }
.login-button:hover { background:#12503f; }
.page-layout { color:var(--foreground); }
.sidebar { border-right-color:var(--border); background:#091510; }
.sidebar-label,.sidebar-footer { color:#80998c; }
.nav-item { color:#b4c9bf; }
.nav-item:hover { color:#effbf5; background:#14271f; }
.nav-item-active,.nav-item-active:hover { color:#8de8d2; background:#12352b; }
.sidebar-divider { background:var(--border); }
.sidebar-note { color:#e5f2ec; border-color:#2a4639; background:linear-gradient(135deg,#12241c,#0d1a14); }
.sidebar-note-icon { color:#7fe2ca; background:#153b30; }
.sidebar-note span { color:#9ab0a4; }
.main-content,#app { color:#dcebe3; }
#app h1,#app h2,#app h3,#app h4,#app .video-title,#app .watch-creator-text .creator-name,#app .channel-info h1,#app .profile-edit-title,#app .console-stat-value,#app .console-table td strong { color:#e5f2ec; }
#app p,#app .page-heading p,#app .creator-callout p,#app .watch-creator-text span,#app .video-meta,#app .creator-name,#app .channel-handle,#app .channel-info p,#app .channel-joined,#app .login-panel p,#app .comments-heading span,#app .comment-meta span,#app .comment-count,#app .recommendations-title span,#app .console-heading p,#app .console-panel>p,#app .console-stat-label,#app .console-stat-note,#app .console-muted,#app .console-empty,#app .settings-help,#app .settings-footer,#app .policy-updated { color:#9aafa4; }
.section-kicker,.hero-eyebrow { color:#8ce9d1; }
.section-kicker { color:#73d9bc; }
.hero-copy h1 em { color:#86e4cb; }
.hero-panel { background:#102820; }
.hero-shade { background:linear-gradient(90deg,rgba(3,15,11,.87) 0%,rgba(3,15,11,.56) 45%,rgba(3,15,11,.06) 100%),linear-gradient(0deg,rgba(3,12,9,.46),transparent 45%); }
.hero-cta,.primary-cta,.follow-button { color:#05221a; background:#21c5a3; box-shadow:0 8px 22px #0b6e5838; }
.hero-cta:hover,.primary-cta:hover,.follow-button:hover { color:#041c15; background:#56d9bb; }
.feed-heading h2,.results-heading h2,.recommendations-title h2 { color:#e7f4ed; }
.category-chip,.action-pill,.outline-cta,.console-actions button,.console-small-button { color:#c7dbd0; background:#101e18; border-color:#2a4136; }
.milestone-progress,.milestone-apply { color:#dcebe3; background:#0e1b16; border-color:#293f34; }
.milestone-progress-heading { color:#e5f2ec; }
.milestone-progress-track { background:#20372d; }
.category-chip:hover,.action-pill:hover,.outline-cta:hover,.console-actions button:hover,.console-small-button:hover { color:#9af0d9; border-color:#28745f; background:#153329; }
.category-chip-active,.category-chip-active:hover { color:#eafff7; border-color:#166b57; background:#115540; }
.video-title:hover,.creator-name:hover,.channel-tab-active,.channel-upload-link { color:#7ee2c7; }
.creator-callout,.login-panel,.upload-form,.profile-edit-panel,.settings-card,.console-stat,.console-panel,.account-menu,.channel-discovery-card,.playlist-create-form,.sponsored-card { color:#e5f2ec; border-color:#293f34; background:#0e1b16; box-shadow:0 10px 28px #0002; }
.creator-callout { background:linear-gradient(100deg,#10231a,#0c1913); }
.creator-callout-mark,.login-symbol,.drop-icon,.file-icon { color:#052019; background:#20b999; }
.video-thumb { border-color:#263a31; }
.empty-state-icon { color:#7fe2ca; background:#15382d; }
.empty-state p,.creator-callout p,.video-meta,.card-like-count,.subscriber-count,.comment-meta span { color:#93a99d; }
.page-heading h1,.watch-title,.channel-info h1,.policy-page h1,.policy-page h2 { color:#e7f4ed; }
.search-large { color:#9ab0a4; background:#101e18; border-color:#2b4338; box-shadow:0 4px 18px #0003; }
.watch-creator-row,.channel-profile,.channel-tabs { border-color:var(--border); }
.watch-category { color:#9ee8d5; background:#14382d; }
.follow-button-active,.follow-button-active:hover { color:#a9cbbd; background:#1a3027; }
.video-description { color:#cadbd2; border-color:#293f34; background:#101e18; }
.video-description summary,.comments-heading h2,.comment-meta strong { color:#e0eee7; }
.video-description>span { color:#89a397; }
.action-pill-liked { color:#8fe8d2; border-color:#2d705e; background:#12372d; }
.comment-form textarea { background:#0a1712; color:#e5f2ec; border-color:#2b4338; }
.comment-form textarea:disabled { background:#111f19; }
.comment-body p { color:#c2d4ca; }
.comment-reply,.comment-cancel { color:#9aafa4; }
.comment-replies { border-left-color:#315044; }
.channel-cover { background:linear-gradient(110deg,#0d493b,#116b55 48%,#1c382c); }
.channel-avatar { border-color:#07120f; box-shadow:0 0 0 1px #294438; }
.channel-tabs button,.channel-tabs>a { color:#a9beb3; }
.dropzone { color:#bfcec5; border-color:#365347; background:#0d1a14; }
.dropzone:hover,.dropzone-active { border-color:#22a889; background:#10281f; }
.dropzone strong,.selected-file strong,.form-field>span,.profile-edit-title { color:#e1eee7; }
.dropzone>span:not(.drop-icon):not(.drop-browse),.selected-file span,.form-field small,.login-footnote,.upload-footer>span,.upload-footnote { color:#91a79b; }
.drop-browse,.text-button,.settings-help a,.settings-footer a,.settings-card a:not(.outline-cta),.policy-page a { color:#77dfc4; }
.form-field input:focus,.form-field textarea:focus,.form-field select:focus,.console-form .form-field input:focus,.console-form .form-field select:focus,.console-form .form-field textarea:focus { border-color:#279578; box-shadow:0 0 0 3px #16b89b20; }
.form-field select:disabled { color:#81958b; background:#14221b; }
.notice-warn,.console-notice { color:#e5c58c; border-color:#665236; background:#2b2418; }
.notice-success { color:#9ce2b4; border-color:#315b43; background:#10291a; }
.upload-footer,.library-row,.console-table th,.console-table td,.console-chart { border-color:var(--border); }
.progress-track { background:#1c3027; }
.progress-track span,.console-chart-bar { background:linear-gradient(90deg,#69dfbd,#17a988); }
.account-toggle:hover { background:#16271f; }
.account-menu .menu-note { color:#93a99d; border-color:var(--border); }
.account-menu a,.account-menu button { color:#c8d9d0; }
.account-menu a:hover,.account-menu button:hover { color:#a0f0db; background:#15382d; }
.logout-button { color:#9aafa4; }
.channel-discovery-copy h3,.library-row strong { color:#e5f2ec; }
.channel-discovery-copy>span,.channel-discovery-copy small,.library-row span { color:#9aafa4; }
.channel-discovery-arrow { color:#78dfc4; }
.policy-page { color:#c6d8ce; }
.policy-page h1,.policy-page h2 { color:#e5f2ec; }
.policy-footer { border-color:var(--border); color:#9aafa4; }
.console-heading h1 { color:#e9f5ee; }
.console-tabs { background:#0d1b15; }
.console-tab { color:#b3c7bc; }
.console-tab.active,.console-tab:hover { color:#8ce9d1; background:#15382d; }
.console-stat-value { color:#e8f4ed; }
.console-panel { background:#0e1b16; }
.console-panel h2 { color:#e3f0e8; }
.console-form .form-field input,.console-form .form-field select,.console-form .form-field textarea { background:#091610; color:#e5f2ec; border-color:#2b4338; }
.console-table th,.console-table td { border-color:#263c32; }
.console-table th { color:#9aafa4; }
.console-table td { color:#c6d8ce; }
.console-badge { color:#c4d5cc; background:#1b2d24; }
.console-badge.good { color:#9ce2b4; background:#153322; }
.console-badge.warn { color:#e9c77f; background:#342a18; }
.console-badge.bad,.console-danger { color:#f09a96 !important; background:#351c1c; }
.console-notice { color:#d9c59c; border-color:#504431; background:#262116; }
.console-chart-bar { background:linear-gradient(180deg,#55d8b6,#128c6f); }
.console-toggle { color:#d1e1d8; }
.sponsored-card { border-color:#2c5443; background:#0e1b16; }
.sponsored-card img { background:#14241b; }
.sponsored-label { color:#82d9be; }
.sponsored-copy strong { color:#e5f2ec; }
.sponsored-copy small { color:#9aafa4; }
.sponsored-cta { color:#05221a; background:#21c5a3; }
.toast-error { border-color:#6a3932 !important; color:#ffd5cc !important; background:#301b18 !important; }
@media (max-width:760px) {
  .brand-logo { width:97px; max-height:34px; }
  .brand-latin { font-size:10px; }
  .brand-lockup { gap:4px; padding:3px 7px; border-radius:11px; }
  .top-search { background:#101e18; border-color:#30483c; }
  .sidebar { background:#091510; box-shadow:12px 0 32px #0008; }
  .mobile-bottom-nav { border-color:var(--border); background:rgba(7,18,15,.97); }
  .mobile-bottom-nav>a { color:#a2b7ab; }
  .mobile-bottom-nav>a.mobile-nav-active { color:#7ee2c7; }
  .upload-link { color:#98e8d4; background:#12382d; }
}


/* Atharo P0 learning/playback tools */
.resume-section { margin: 0 0 26px; }
.resume-progress { position:absolute; z-index:4; left:0; bottom:0; height:3px; background:#20c2a2; box-shadow:0 0 8px #20c2a277; }
.player-status { position:absolute; z-index:3; top:12px; left:12px; max-width:calc(100% - 24px); padding:7px 10px; border:1px solid #ffffff30; border-radius:8px; color:#f1fbf5; background:#07120fe0; font-size:11px; }
.player-tools { position:absolute; z-index:3; top:12px; right:12px; display:flex; align-items:center; gap:8px; }
.player-speed-label { display:flex; align-items:center; gap:6px; padding:5px 8px; border:1px solid #ffffff40; border-radius:8px; color:#eef8f2; background:#07120fc9; font-size:10px; }
.player-speed { max-width:88px; padding:3px 5px; border:1px solid #ffffff36; border-radius:5px; color:#f0fff8; background:#0c1c16; }
.player-tools .outline-cta { min-height:30px; padding:5px 9px; font-size:10px; }
.chapters-panel,.transcript-details { margin-top:14px; padding:13px 15px; border:1px solid #2b4338; border-radius:11px; color:#dcebe3; background:#101e18; }
.chapters-panel h2 { margin:0 0 10px; font-size:14px; }
.chapter-list { display:flex; flex-wrap:wrap; gap:7px; }
.chapter-button { padding:8px 10px; border:1px solid #315342; border-radius:8px; color:#c9e2d5; background:#14291f; font-size:11px; }
.chapter-button:hover { border-color:#20c2a2; color:#9af0d9; }
.transcript-details summary { color:#8ce9d1; cursor:pointer; font-weight:700; }
.transcript-copy { max-height:320px; overflow:auto; white-space:pre-wrap; color:#c8d9d0; font:12px/1.8 inherit; }
.report-dialog { width:min(520px,calc(100% - 28px)); max-width:520px; padding:22px; border:1px solid #2e4b3c; border-radius:16px; color:#e5f2ec; background:#0e1b16; box-shadow:0 22px 70px #0009; }
.report-dialog::backdrop { background:#030806bb; backdrop-filter:blur(3px); }
.report-dialog h2 { margin:0 0 16px; font-size:18px; }
.report-dialog form { display:grid; gap:12px; }
.report-dialog textarea,.report-dialog select { width:100%; padding:10px; border:1px solid #2b4338; border-radius:8px; color:#e5f2ec; background:#091610; }
.report-dialog .console-form-actions { justify-content:flex-end; }
.console-list { display:grid; gap:8px; margin:10px 0; }
.console-list-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 11px; border:1px solid #293f34; border-radius:8px; color:#dcebe3; background:#0c1913; }
.console-form .console-small-button { align-self:end; min-height:38px; }
.console-list-row .console-small-button { flex:none; }
@media(max-width:760px){.player-tools{top:7px;right:7px}.player-status{top:7px;left:7px;font-size:9px}.player-speed-label{padding:4px 5px;font-size:9px}.player-speed{max-width:72px}.report-dialog{padding:17px}.console-list-row{align-items:flex-start}}

/* Custom YouTube-style player controls */
.player-stage-has-video .player-media { cursor: pointer; }
.player-controls { opacity: 0; transform: translateY(5px); transition: opacity .2s ease, transform .2s ease; padding: 9px 10px 7px; left: 8px; right: 8px; bottom: 8px; gap: 8px; border-radius: 10px; background: linear-gradient(180deg,transparent,#06130dcc 42%); }
.player-stage:hover .player-controls, .player-stage.player-controls-visible .player-controls, .player-stage:focus-within .player-controls { opacity: 1; transform: translateY(0); }
.player-control-button { width: 30px !important; height: 30px !important; flex: 0 0 auto; color: #71e5af !important; border-radius: 7px !important; font-size: 15px; font-weight: 700; }
.player-control-button:hover { color: #b4f8d2 !important; background: #1a704d88 !important; }
.player-play-button { font-size: 17px; }
.player-progress { min-width: 40px; flex: 1; accent-color: #35c982; cursor: pointer; }
.player-progress::-webkit-slider-runnable-track, .player-volume-range::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: #ffffff66; }
.player-progress::-webkit-slider-thumb, .player-volume-range::-webkit-slider-thumb { width: 12px; height: 12px; margin-top: -4px; }
.player-time { flex: 0 0 auto; color: #d8f7e6; font: 10px Inter,system-ui,sans-serif; white-space: nowrap; }
.player-volume-range { width: 64px; accent-color: #35c982; cursor: pointer; }
.player-caption-select, .player-speed-dock select, .player-settings-menu select { min-height: 28px; padding: 3px 5px; border: 1px solid #42c88b99; border-radius: 6px; color: #8cf0bd; background: #071b12e8; font-size: 10px; }
.player-controls .text-link { flex: 0 0 auto; margin: 0; padding: 6px 4px; color: #71e5af; font-size: 10px; font-weight: 700; }
.player-controls .text-link:hover { color: #c0fbd9; }
.player-speed-dock { position: absolute; z-index: 4; left: 12px; bottom: 10px; display: flex; align-items: center; gap: 5px; padding: 4px 6px; border: 1px solid #42c88b99; border-radius: 7px; color: #71e5af; background: #06130de8; font-size: 10px; font-weight: 700; }
.player-stage:hover .player-speed-dock, .player-stage.player-controls-visible .player-speed-dock { bottom: 56px; }
.player-settings-menu { position: absolute; z-index: 5; right: 12px; bottom: 55px; display: flex; align-items: center; gap: 7px; padding: 8px; border: 1px solid #42c88b99; border-radius: 8px; color: #8cf0bd; background: #071b12f2; font-size: 10px; }
.player-settings-menu[hidden] { display: none; }
@media(max-width:760px){.player-controls{gap:3px;padding-left:5px;padding-right:5px}.player-volume-range{width:42px}.player-time{font-size:9px}.player-caption-select{max-width:37px}.player-controls .text-link{font-size:0}.player-controls .text-link::before{content:'⚑';font-size:14px}.player-speed-dock{left:8px}.player-stage:hover .player-speed-dock,.player-stage.player-controls-visible .player-speed-dock{bottom:56px}}

/* Updated behavior: every control, including speed, fades together after idle. */
.player-controls,
.player-speed-dock { opacity: 0; transform: translateY(5px); transition: opacity .2s ease, transform .2s ease, bottom .2s ease; }
.player-stage.player-controls-visible .player-controls,
.player-stage.player-controls-visible .player-speed-dock,
.player-stage:focus-within .player-controls,
.player-stage:focus-within .player-speed-dock { opacity: 1; transform: translateY(0); }
.player-stage:hover .player-controls,
.player-stage:hover .player-speed-dock { opacity: 0; transform: translateY(5px); }
.player-stage:hover.player-controls-visible .player-controls,
.player-stage:hover.player-controls-visible .player-speed-dock { opacity: 1; transform: translateY(0); }
.player-caption-select,
.player-controls .text-link,
.player-settings-button,
.player-speed-dock,
.player-speed-dock select { color: #71e5af !important; border-color: #42c88b99; }
.player-caption-select:focus,
.player-speed-dock select:focus { outline: 2px solid #71e5af; outline-offset: 1px; }

/* Hide the pointer together with the faded player controls. */
.player-stage:not(.player-controls-visible),
.player-stage:not(.player-controls-visible) .player-media { cursor: none; }
.player-stage.player-controls-visible,
.player-stage.player-controls-visible .player-media { cursor: default; }

/* Home resume shelf: three larger desktop cards, hidden when there is no history. */
.resume-section .resume-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 22px; }
.resume-section .resume-grid .video-thumb { aspect-ratio: 16 / 9; }
.resume-section .resume-grid .video-title { font-size: 14px; }
.sidebar { overscroll-behavior: contain; }
@media (max-width: 760px) {
  .video-grid, .resume-section .resume-grid { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .video-card-featured { grid-column: auto; }
  .resume-section .resume-grid .video-title { font-size: 12px; }
  .sidebar { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; }
}

.channel-ad-slot { margin: 18px 0 4px; }
.channel-ad-slot:empty { display: none; }
.channel-ad-slot .sponsored-card { width:100%; max-width:none; }
.channel-ad-slot .sponsored-image-frame { max-width:100%; }

.home-sticky-ad-slot { min-height: 0; }
.home-sticky-ad-slot:empty { display: none; }
.home-sticky-ad-slot .sponsored-sticky_banner { position: sticky; top: 84px; z-index: 8; margin: 16px 0 0; }
.postroll-ad-slot:empty { display: none; }
.postroll-ad-slot { margin-top: 14px; }
.sponsored-postroll { max-width: 720px; }

/* L-shape ad: two uncropped creative slots configured independently for desktop and mobile. */
.l-shape-ad { position:absolute; z-index:12; inset:0; pointer-events:none; opacity:0; transform:translateX(22px); transition:opacity .36s ease,transform .36s ease; }
.l-shape-ad.l-ad-visible { opacity:1; transform:translateX(0); }
.l-shape-ad.l-ad-hiding { opacity:0; transform:translateX(22px); }
.l-shape-right-link { position:absolute; top:0; right:0; display:block; width:var(--l-active-right-width,150px); height:var(--l-active-right-height,642px); overflow:hidden; pointer-events:auto; background:#10291e; }
.l-shape-right-image { display:block; width:100%; height:100%; object-fit:contain; }
.l-shape-body { position:absolute; right:0; bottom:0; left:0; height:10.8%; display:flex; align-items:center; gap:12px; padding:4px 8px 4px 12px; overflow:hidden; pointer-events:auto; background:#0d261b; color:#effff6; }
.l-shape-landing-url { flex:0 1 32%; overflow:hidden; color:#7fe2ca; font-size:10px; font-weight:750; text-overflow:ellipsis; white-space:nowrap; }
.l-shape-details { min-width:0; display:flex; flex:1 1 auto; flex-direction:column; gap:2px; overflow:hidden; }
.l-shape-details strong { overflow:hidden; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.l-shape-details small { overflow:hidden; color:#a8c8b6; font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
.l-shape-bottom-image-link { display:block; flex:0 0 var(--l-active-bottom-width,320px); width:var(--l-active-bottom-width,320px); height:var(--l-active-bottom-height,78px); max-height:100%; margin-left:auto; overflow:hidden; background:#10291e; }
.l-shape-bottom-image { display:block; width:100%; height:100%; object-fit:contain; }
.l-shape-close { position:absolute; z-index:2; top:5px; right:5px; width:23px; height:23px; border:0; border-radius:50%; color:#fff; background:#07150fdd; pointer-events:auto; font-size:17px; line-height:1; }
.player-stage.l-ad-active .player-media { width:calc(100% - var(--l-active-right-width,150px)); height:calc(100% - 10.8%); object-fit:contain; object-position:left top; }
.player-stage.l-ad-active .player-controls { right:calc(8px + var(--l-active-right-width,150px)); }
@media(max-width:760px){
  .sponsored-card { --ad-size-width:var(--ad-mobile-width,360px); --ad-size-height:var(--ad-mobile-height,203px); --ad-ratio:var(--ad-mobile-ratio,16/9); }
  .l-shape-right-link { width:var(--l-active-right-width,40px); height:var(--l-active-right-height,167px); }
  .l-shape-body { height:24%; gap:4px; padding:3px 5px; }
  .l-shape-landing-url { flex-basis:34%; font-size:7px; }
  .l-shape-details { flex:1 1 20%; }
  .l-shape-details strong { font-size:8px; }
  .l-shape-details small { font-size:6px; }
  .l-shape-bottom-image-link { flex-basis:var(--l-active-bottom-width,160px); width:var(--l-active-bottom-width,160px); height:var(--l-active-bottom-height,39px); }
  .l-shape-close { top:3px; right:3px; width:20px; height:20px; font-size:15px; }
  .player-stage.l-ad-active .player-media { width:calc(100% - var(--l-active-right-width,40px)); height:76%; }
  .player-stage.l-ad-active .player-controls { right:calc(5px + var(--l-active-right-width,40px)); }
}
.player-stage .player-media, .player-stage .player-controls { transition: width .36s ease, height .36s ease; }
@media(max-width:760px){.sponsored-feed-cell{grid-column:1/-1;margin:14px 0}}


/* Education filters appear only after choosing the Education category. */
.education-upload-fields { grid-column:1/-1; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; padding:16px; border:1px solid #2b493b; border-radius:14px; background:#0d1b14; }
.education-upload-fields[hidden] { display:none; }
.education-filter-form { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)) auto; align-items:end; gap:12px; margin:0 0 20px; padding:16px; border:1px solid var(--border); border-radius:16px; background:var(--surface); }
.education-filter-form .form-field { margin:0; }
.education-filter-form .outline-cta { min-height:42px; white-space:nowrap; }
@media (min-width:761px) {
  .feed-section .video-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .feed-section .video-card-featured { grid-column:span 1; }
  .feed-section .video-card-featured .video-thumb { aspect-ratio:4/3; }
  .feed-section .video-card-featured .video-title { font-size:15px; }
  .feed-section .video-card-featured .creator-avatar { width:38px; height:38px; }
}
/* Creator Studio is a dedicated workspace, not nested beside the consumer sidebar. */
body.studio-fullscreen .page-layout { display:block; max-width:none; padding:0 38px; }
body.studio-fullscreen .sidebar,body.studio-fullscreen .mobile-bottom-nav,body.studio-fullscreen .mobile-menu-trigger { display:none !important; }
body.studio-fullscreen .main-content { width:100%; padding:24px 0 52px; }
body.studio-fullscreen .studio-shell { max-width:none; width:100%; }
body.studio-fullscreen .studio-nav button { min-height:48px; padding:10px 12px; font-size:13px; }
body.studio-fullscreen .studio-nav .studio-nav-count { font-size:11px; }
body.studio-fullscreen .studio-content .console-panel { padding:20px; }
body.studio-fullscreen .studio-content .console-table th,body.studio-fullscreen .studio-content .console-table td { padding:12px 10px; font-size:12px; }
body.studio-fullscreen .studio-content .console-actions button,body.studio-fullscreen .studio-content .console-small-button,body.studio-fullscreen .studio-content .console-form-actions button { min-height:40px; padding:8px 14px; font-size:12px; }
body.studio-fullscreen .studio-nav button:focus-visible,body.studio-fullscreen .studio-content button:focus-visible { outline:2px solid #77dfc1; outline-offset:2px; }
@media (max-width:760px) {
  .feed-section .video-grid { grid-template-columns:minmax(0,1fr); }
  .feed-section .video-card-featured { grid-column:auto; }
  .feed-section .video-card-featured .video-thumb { aspect-ratio:4/3; }
  .education-upload-fields,.education-filter-form { grid-template-columns:minmax(0,1fr); }
  body.studio-fullscreen .page-layout { padding:0 15px; }
  body.studio-fullscreen .main-content { padding:18px 0 30px; }
  body.studio-fullscreen .studio-content .console-panel { padding:14px; }
  body.studio-fullscreen .studio-content .console-table { min-width:700px; }
}

.studio-education-fields { grid-column:1/-1; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; padding:15px; border:1px solid #294638; border-radius:12px; background:#0c1a13; }
.studio-education-fields[hidden] { display:none; }
@media (max-width:760px) { .studio-education-fields { grid-template-columns:minmax(0,1fr); } }

body.studio-fullscreen .top-search { display:none; }
body.studio-fullscreen .topbar { grid-template-columns:minmax(0,1fr) auto; }
@media (max-width:760px) {
  body.studio-fullscreen .topbar { grid-template-columns:minmax(0,1fr) auto; }
  body.studio-fullscreen .topbar>.brand-lockup,body.studio-fullscreen .top-actions { grid-column:auto; }
}


/* Professional, fullscreen admin workspace */
body.admin-fullscreen { background:#08120d; }
body.admin-fullscreen .topbar,body.admin-fullscreen .sidebar,body.admin-fullscreen .mobile-bottom-nav,body.admin-fullscreen .mobile-menu-trigger { display:none !important; }
body.admin-fullscreen .page-layout { display:block; width:100%; max-width:none; min-height:100vh; padding:0; margin:0; }
body.admin-fullscreen .main-content { width:100%; max-width:none; min-height:100vh; padding:0; margin:0; }
.admin-shell { width:min(100%,1680px); max-width:none; margin:0 auto; padding:0 clamp(32px,5vw,80px) 60px; }
.admin-toolbar { position:sticky; top:0; z-index:25; min-height:72px; display:flex; align-items:center; justify-content:space-between; gap:18px; margin:0 calc(clamp(32px,5vw,80px)*-1) 28px; padding:12px clamp(32px,5vw,80px); border-bottom:1px solid #263c32; background:rgba(8,18,13,.96); backdrop-filter:blur(16px); }
.admin-brand,.admin-toolbar-actions { display:flex; align-items:center; gap:12px; }
.admin-brand>div { display:grid; gap:3px; }
.admin-workspace-label strong { color:#e5f2ec; font-size:16px; }
.admin-workspace-label span { color:#9aafa4; font-size:12px; }
.admin-return-link { min-height:42px; display:inline-flex; align-items:center; padding:0 14px; border:1px solid #345044; border-radius:10px; color:#d4e5dc; background:#102019; font-size:14px; font-weight:650; }
.admin-return-link:hover { color:#8ce9d1; border-color:#278b70; }
.admin-shell .console-heading { align-items:flex-start; margin:0 0 22px; }
.admin-shell .console-heading .section-kicker { color:#83d8bd; font-size:12px; letter-spacing:.12em; }
.admin-shell .console-heading h1 { margin:7px 0 5px; color:#eef8f2; font-size:clamp(28px,3vw,38px); }
.admin-shell .console-heading p { max-width:840px; color:#adbbb3; font-size:15px; line-height:1.65; }
.admin-shell .console-tabs { position:sticky; top:72px; z-index:20; width:100%; display:flex; flex-wrap:wrap; gap:7px; margin:0 0 22px; padding:9px; border-color:#263c32; background:rgba(13,27,21,.97); box-shadow:0 8px 25px #0002; }
.admin-shell .console-tab { min-height:46px; padding:10px 16px; color:#c6d8ce; font-size:14px; font-weight:700; }
.admin-shell .console-tab.active { color:#091710; background:#83dec2; }
.admin-shell .console-tab:hover:not(.active) { color:#9af0d9; background:#173329; }
.admin-shell .console-panel { margin-bottom:20px; padding:24px; border-color:#293f34; border-radius:18px; background:#0e1b16; box-shadow:0 12px 32px #0002; }
.admin-shell .console-panel h2 { color:#e9f5ee; font-size:20px; line-height:1.4; }
.admin-shell .console-panel>p { margin:4px 0 18px; color:#a9b9b0; font-size:14px; line-height:1.7; }
.admin-shell .console-grid { gap:14px; margin-bottom:18px; }
.admin-shell .console-stat { min-height:112px; padding:18px; border-color:#293f34; border-radius:15px; background:#112019; }
.admin-shell .console-stat-label { color:#adbbb3; font-size:13px; line-height:1.5; }
.admin-shell .console-stat-value { color:#eff9f3; font-size:27px; }
.admin-shell .console-stat-note { color:#9aafa4; font-size:12px; }
.admin-shell .form-field { gap:7px; color:#d6e4dc; font-size:13px; font-weight:650; line-height:1.5; }
.admin-shell .console-form { gap:14px; }
.admin-shell .console-form .form-field input,.admin-shell .console-form .form-field select,.admin-shell .console-form .form-field textarea { min-height:46px; padding:11px 13px; border-radius:10px; border-color:#355044; background:#091610; color:#eff8f3; font-size:14px; line-height:1.5; }
.admin-shell .console-form .form-field textarea { min-height:88px; }
.admin-shell .console-form .form-field input::placeholder,.admin-shell .console-form .form-field textarea::placeholder { color:#8da297; }
.admin-shell .console-table { min-width:680px; font-size:13px; }
.admin-shell .console-table th,.admin-shell .console-table td { padding:13px 12px; line-height:1.65; }
.admin-shell .console-table th { color:#b2c4ba; font-size:12px; }
.admin-shell .console-table td { color:#d0e0d7; }
.admin-shell .console-badge { padding:5px 10px; font-size:12px; }
.admin-shell .console-actions { gap:8px; }
.admin-shell .console-actions button,.admin-shell .console-small-button { min-height:42px; padding:8px 13px; border-radius:9px; font-size:13px; line-height:1.4; }
.admin-shell .primary-cta,.admin-shell .console-form-actions .primary-cta { min-height:44px; padding:10px 16px; border-radius:10px; font-size:14px; font-weight:750; }
.admin-shell .console-notice { padding:13px 15px; font-size:13px; line-height:1.7; }
.admin-shell .console-empty { padding:26px 14px; color:#b2c4ba; font-size:14px; }
.admin-shell .console-muted { color:#a9b9b0; font-size:12px; }
.admin-shell :focus-visible { outline:3px solid #7be2c4; outline-offset:3px; }
.admin-shell input[type=checkbox] { width:18px; height:18px; accent-color:#68d4b4; }
.admin-shell .console-chart { min-height:160px; gap:10px; padding:18px 6px 30px; }
.admin-shell .console-chart-bar span { color:#b2c4ba; font-size:11px; }
.admin-quick-actions { display:flex; flex-wrap:wrap; gap:10px; }
.admin-metric-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
.console-filter-bar { align-items:end; margin-bottom:16px; }
.console-pager { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:10px; padding:14px 2px 4px; color:#a9b9b0; font-size:13px; }
.console-pager button:disabled { opacity:.45; cursor:not-allowed; }
.console-results-summary { margin:0 0 12px; color:#adbbb3; font-size:13px; }
.review-card { display:grid; grid-template-columns:minmax(220px,1fr) minmax(300px,.95fr); gap:20px; margin:12px 0; padding:20px; border:1px solid #2b4338; border-radius:16px; background:#0b1912; }
.review-card-copy { min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:9px; }
.review-card-copy>a,.review-card-copy>strong { color:#e7f4ed; font-size:17px; font-weight:750; line-height:1.5; overflow-wrap:anywhere; }
.review-card-meta { display:flex; flex-wrap:wrap; align-items:center; gap:8px; color:#a9b9b0; font-size:12px; }
.console-review-detail { margin:0; color:#c3d4ca; font-size:14px; line-height:1.75; white-space:pre-wrap; overflow-wrap:anywhere; }
.review-card-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-content:start; gap:12px; }
.review-card-actions .form-field:nth-child(2),.review-card-actions .console-form-actions { grid-column:1/-1; }
.review-card-actions .console-form-actions { justify-content:flex-start; }
.review-card-actions .form-field textarea { min-height:78px; }
.review-card-actions .console-toggle { align-items:center; min-height:44px; font-size:13px; }
.campaign-preview { min-height:140px; display:flex; align-items:center; justify-content:center; gap:18px; padding:12px; border:1px dashed #426251; border-radius:12px; background:#091610; }
.campaign-preview-frame { width:min(100%,260px); max-width:100%; aspect-ratio:16/9; overflow:hidden; border-radius:8px; background:#15261e; }
.campaign-preview-frame img { display:block; width:100%; height:100%; object-fit:contain; }
.campaign-preview-frame[hidden],.campaign-preview-link[hidden] { display:none!important; }
.campaign-preview-meta { color:#a8edd9; font-size:10px; font-variant-numeric:tabular-nums; }
.campaign-preview-link { min-height:40px; display:inline-flex; align-items:center; padding:0 12px; border:1px solid #355044; border-radius:9px; color:#a8edd9; font-size:13px; }
@media(max-width:1050px){.admin-metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.review-card{grid-template-columns:1fr}.admin-shell .console-tabs{position:sticky}.review-card-actions{grid-template-columns:1fr 1fr}}
@media(max-width:760px){
  .admin-shell{padding:0 20px 34px}
  .admin-toolbar{min-height:unset;display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin:0 -20px 20px;padding:10px 20px}
  .admin-workspace-label strong{font-size:14px}
  .admin-workspace-label span{font-size:11px}
  .admin-return-link{min-height:40px;padding:0 10px;font-size:12px}
  .admin-toolbar-actions{justify-content:flex-end;gap:7px}
  .admin-shell .console-tabs{top:116px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin}
  .admin-shell .console-tab{min-height:44px;padding:9px 13px;white-space:nowrap;font-size:13px}
  .admin-shell .console-panel{padding:17px}
  .admin-shell .console-stat{min-height:98px;padding:14px}
  .admin-shell .console-stat-value{font-size:23px}
  .admin-shell .console-form{grid-template-columns:1fr}
  .admin-shell .console-form .span-2,.admin-shell .console-form-actions{grid-column:1}
  .console-filter-bar{grid-template-columns:1fr}
  .console-filter-bar .console-form-actions{grid-column:1}
  .review-card{padding:15px;gap:16px}
  .review-card-actions{grid-template-columns:1fr}
  .review-card-actions .form-field:nth-child(2),.review-card-actions .console-form-actions{grid-column:1}
  .campaign-preview{align-items:stretch;flex-direction:column}
}


/* Creator access, preferences, playlists, feedback and notification center */
.topbar { grid-template-columns:222px minmax(180px,1fr) minmax(300px,auto); }
.top-actions { gap:10px; }
.language-control { display:inline-flex; align-items:center; gap:6px; }
.language-control .language-label { color:#4bd798; font-size:11px; font-weight:750; }
.language-control select,.language-control-select { min-height:36px; padding:0 10px; border:1px solid #4bb77b; border-radius:9px; color:#116e45; background:#e5f8ec; font-size:12px; font-weight:700; cursor:pointer; }
.language-control-select { min-height:40px; border-color:#4bb77b; color:#116e45; background:#e5f8ec; }
.language-control select:focus-visible,.language-control-select:focus-visible { outline:2px solid #1da15e; outline-offset:2px; }
.notification-wrap { position:relative; }
.notification-toggle { position:relative; width:40px; height:40px; display:grid; place-items:center; border:1px solid #e3e5de; border-radius:50%; color:#267a5c; background:#f0fbf5; font-size:19px; }
.notification-toggle:hover { color:#075d42; background:#dcf8e9; }
.notification-count { position:absolute; top:-4px; right:-4px; min-width:18px; height:18px; display:grid; place-items:center; padding:0 4px; border:2px solid #fff; border-radius:999px; color:#fff; background:#13a36f; font:700 10px/1 Inter,system-ui,sans-serif; }
.notification-popover { position:absolute; z-index:45; top:48px; right:0; width:min(370px,calc(100vw - 20px)); max-height:min(70vh,540px); overflow:auto; border:1px solid #dce9df; border-radius:15px; color:#263a30; background:#fff; box-shadow:0 18px 45px #192b2030; }
.notification-popover[hidden] { display:none; }
.notification-head { position:sticky; top:0; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:13px 15px; border-bottom:1px solid #e8eee9; background:#fff; }
.notification-head strong { font-size:14px; }
.notification-mark-read { border:0; color:#16865d; background:transparent; font-size:11px; font-weight:700; }
.notification-list { display:grid; }
.notification-item { display:flex; gap:11px; padding:13px 15px; border-bottom:1px solid #edf1ee; color:#344a3c; }
.notification-item:hover,.notification-unread { background:#f1fbf5; }
.notification-item-dot { flex:0 0 auto; width:9px; height:9px; margin-top:5px; border-radius:50%; background:#19aa71; box-shadow:0 0 0 4px #19aa711c; }
.notification-item:not(.notification-unread) .notification-item-dot { background:#b5c2b9; box-shadow:none; }
.notification-item-copy { min-width:0; display:grid; gap:3px; }
.notification-item-copy strong { font-size:12px; }
.notification-item-copy small { color:#64766a; font-size:11px; line-height:1.5; }
.notification-item-copy time { color:#95a197; font-size:10px; }
.notification-empty { padding:26px 16px; color:#7e8e83; text-align:center; font-size:12px; }
.toast-success { border-color:#168c63 !important; color:#d9ffed !important; background:#0d6045 !important; }
.creator-name-row { display:flex; align-items:center; gap:5px; min-width:0; }
.verified-badge { flex:0 0 auto; display:inline-block; width:19px; height:19px; object-fit:contain; vertical-align:middle; }
.channel-info h1 .verified-badge { width:22px; height:22px; }
.comment-meta .verified-badge { width:16px; height:16px; margin-left:4px; }
.video-more-menu { position:relative; }
.video-more-menu>summary { width:32px; height:30px; display:grid; place-items:center; border-radius:8px; color:#627167; cursor:pointer; list-style:none; font-size:22px; line-height:1; }
.video-more-menu>summary::-webkit-details-marker { display:none; }
.video-more-menu>summary:hover,.video-more-menu[open]>summary { color:#116e4c; background:#e5f8ed; }
.video-more-popover { position:absolute; z-index:18; right:0; top:32px; min-width:178px; display:grid; gap:2px; padding:6px; border:1px solid #dce8df; border-radius:11px; background:#fff; box-shadow:0 12px 30px #20342929; }
.video-more-option { min-height:38px; padding:8px 10px; border:0; border-radius:7px; color:#36473c; background:transparent; text-align:left; font-size:12px; }
.video-more-option:hover { color:#0a6d49; background:#eaf9f0; }
.video-more-option.text-link { display:flex; width:100%; }
.channel-playlists { margin:20px 0 30px; }
.playlist-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:12px; }
.playlist-card { min-width:0; display:flex; align-items:center; gap:12px; padding:13px; border:1px solid #e4e8e2; border-radius:13px; color:#34453a; background:#fff; }
.playlist-card:hover { border-color:#a2d9b8; background:#f5fcf7; }
.playlist-art { flex:0 0 auto; width:43px; height:43px; display:grid; place-items:center; border-radius:12px; color:#14764e; background:#e3f7ea; font-size:21px; }
.playlist-card-copy { min-width:0; flex:1; display:grid; gap:4px; }
.playlist-card-copy strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; }
.playlist-card-copy small { overflow:hidden; color:#78877c; text-overflow:ellipsis; white-space:nowrap; font-size:10px; }
.playlist-arrow { color:#728178; }
.studio-application-shell { max-width:1080px; margin:0 auto; }
.studio-application-status { display:flex; align-items:center; flex-wrap:wrap; gap:12px; }
.studio-application-shell .console-form { margin-top:16px; }
.studio-application-shell .console-toggle { display:flex; align-items:center; gap:10px; min-height:44px; }
@media (hover:none) { .card-actions { opacity:1; } }
@media (max-width:1050px) { .topbar { grid-template-columns:175px minmax(140px,1fr) minmax(275px,auto); gap:14px; padding-right:22px; padding-left:22px; } .top-actions { gap:7px; } }
@media (max-width:760px) {
  .topbar { grid-template-columns:34px minmax(0,1fr) auto; gap:8px; padding:0 12px; }
  .topbar>.brand-lockup { grid-column:2; }
  .topbar>.top-search { grid-row:2; grid-column:1/-1; width:100%; margin:0 0 8px; }
  .top-actions { grid-column:3; grid-row:1; gap:5px; }
  .top-actions .upload-link { width:34px; height:34px; justify-content:center; padding:0; border-radius:50%; }
  .top-actions .upload-link>span:last-child { display:none; }
  .language-control select { width:49px; min-height:34px; padding:0 3px; font-size:10px; }
  .language-control .language-label { font-size:9px; }
  .notification-toggle { width:34px; height:34px; font-size:17px; }
  .account-name-row { display:none; }
  .notification-popover { right:-44px; }
  .card-actions { gap:0; }
  .studio-application-shell .console-form { grid-template-columns:1fr; }
  .studio-application-shell .console-form .span-2,.studio-application-shell .console-form-actions { grid-column:1; }
}
@media (max-width:420px) { .language-control .language-label { display:none; } .topbar>.brand-lockup { transform:scale(.9); transform-origin:left center; } .top-actions { gap:3px; } .top-actions .account-toggle { padding:2px; } .user-avatar { width:32px; height:32px; } .language-control select { width:44px; } }

.verified-avatar { position:relative; outline:1px solid #18a165; outline-offset:1px; }
.account-name-row,.hero-caption-byline { display:inline-flex; align-items:center; gap:4px; min-width:0; }
.account-name-row { flex:1; overflow:hidden; }
.account-name-row .account-name { min-width:0; flex:1; }
.account-menu .menu-note { display:flex; align-items:center; gap:5px; }


/* Login page brand uses the same official Atharo artwork as the site header. */
.login-brand-logo { display:block; width:128px; height:72px; margin:0 auto 18px; object-fit:contain; }
.login-wide { cursor:pointer; }
.login-wide:disabled { cursor:wait; opacity:.72; }


/* Owner-only ad pixel and ratio calculator. */
.ad-layout-heading { margin:0 0 12px; color:#d8f3e8; font-size:15px; }
.ad-layout-editor { display:grid; gap:12px; }
.ad-layout-card { min-width:0; padding:14px; border:1px solid #294638; border-radius:13px; background:#0b1912; }
.ad-layout-card > h3 { margin:0 0 10px; color:#a8edd9; font-size:13px; }
.ad-layout-device-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.ad-layout-display-controls { display:flex; flex-wrap:wrap; gap:12px 20px; margin:0 0 12px; padding:9px 10px; border:1px solid #20372c; border-radius:9px; background:#0a1711; }
.ad-layout-device { min-width:0; padding:12px; border:1px solid #20372c; border-radius:10px; background:#0e1d15; }
.ad-layout-device > h3 { margin:0 0 9px; color:#d7e6dd; font-size:11px; }
.ad-layout-size { margin:0 0 11px; padding:9px; border:1px solid #20372c; border-radius:9px; background:#0a1711; }
.ad-layout-size h4 { margin:0 0 7px; color:#aab9b0; font-size:10px; }
.ad-layout-dimensions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.ad-layout-dimensions .form-field { margin:0; }
.ad-layout-dimensions input { min-height:34px; padding:6px 8px; font-size:11px; }
.ad-layout-ratio { display:block; margin:8px 0; color:#86e0c3; font-size:10px; font-variant-numeric:tabular-nums; }
.ad-layout-sample-wrap { min-height:96px; display:flex; align-items:center; justify-content:center; padding:5px; border:1px dashed #365344; border-radius:7px; background:repeating-conic-gradient(#14241b 0 25%,#0e1b14 0 50%) 50% / 16px 16px; }
.ad-layout-sample { max-width:100%; max-height:90px; display:flex; align-items:center; justify-content:center; overflow:hidden; border:1px solid #65c9a9; border-radius:4px; color:#ebfff7; background:linear-gradient(135deg,#1e6b50,#4b9a77); font-size:9px; font-weight:800; }
@media(max-width:760px){.ad-layout-device-grid{grid-template-columns:minmax(0,1fr)}.ad-layout-card{padding:10px}.ad-layout-device{padding:9px}}


/* Separate L-shape bottom image and destination editor. */
.l-banner-fields { grid-column:1/-1; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; padding:12px; border:1px solid #2b493b; border-radius:12px; background:#0b1912; }
.l-banner-fields[hidden] { display:none !important; }
.campaign-bottom-preview { min-height:112px; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:12px; padding:10px; border:1px dashed #426251; border-radius:10px; background:#091610; }
.campaign-bottom-preview .campaign-preview-frame { max-width:100%; }
@media(max-width:760px){.l-banner-fields{grid-template-columns:minmax(0,1fr);padding:9px}.l-banner-fields .span-2{grid-column:1}.campaign-bottom-preview{align-items:stretch;flex-direction:column}}

.ad-layout-card .form-field > span { color:#aebbb4; }
.ad-layout-card .form-field input { border-color:#355544; color:#e7f5ee; background:#102219; }

/* Shared collapsible navigation: desktop drawer, compact phone header, and an unobstructed watch page. */
.mobile-search-link { display:none; }
.account-language-control { display:none; }
@media (min-width:761px) {
  .topbar { grid-template-columns:40px minmax(160px,222px) minmax(180px,1fr) minmax(300px,auto); gap:18px; }
  .mobile-menu-trigger { display:grid; grid-column:1; grid-row:1; }
  .topbar>.brand-lockup { grid-column:2; grid-row:1; }
  .topbar>.top-search { grid-column:3; grid-row:1; }
  .top-actions { grid-column:4; grid-row:1; }
  .page-layout { display:block; padding:0 36px; }
  .main-content { padding:28px 0 60px; }
  .sidebar { position:fixed; z-index:29; top:74px; bottom:0; left:0; width:250px; height:auto; min-height:0; overflow-y:auto; padding:26px 20px 18px; border-right:1px solid var(--border); background:var(--background); box-shadow:12px 0 32px #2025201c; transform:translateX(-105%); transition:transform .2s ease; }
  .sidebar.sidebar-open { transform:translateX(0); }
  body.watch-player-page .sidebar,body.watch-player-page .mobile-menu-trigger { display:none !important; }
  body.watch-player-page .page-layout { display:block; padding:0 36px; }
  body.watch-player-page .main-content { padding:28px 0 60px; }
}
@media (min-width:761px) and (max-width:1000px) {
  .topbar { grid-template-columns:38px minmax(130px,190px) minmax(100px,1fr) minmax(250px,auto); gap:9px; padding:0 12px; }
  .top-actions { gap:6px; }
  .top-actions .language-label { display:none; }
  .top-actions>.upload-link { width:36px; justify-content:center; }
  .top-actions>.upload-link>span:last-child,.account-name-row { display:none; }
  .top-actions .account-toggle { max-width:64px; padding:3px; }
}
@media (max-width:760px) {
  .topbar { height:62px; grid-template-columns:34px minmax(0,1fr) 34px auto; gap:6px; padding:0 12px; }
  .topbar>.mobile-menu-trigger { display:grid; grid-column:1; grid-row:1; }
  .topbar>.brand-lockup { grid-column:2; grid-row:1; transform:none; }
  .mobile-search-link { width:34px; height:34px; place-items:center; grid-column:3; grid-row:1; display:grid; border-radius:50%; font-size:22px; }
  .topbar>.top-search { display:none; }
  .top-actions { grid-column:4; grid-row:1; gap:4px; }
  .top-actions>.upload-link { display:none; }
  body.has-user-profile .top-actions>.language-control { display:none; }
  body:not(.has-user-profile) .top-actions>.language-control { display:inline-flex; }
  .account-menu .account-language-control { display:flex; flex-direction:column; gap:6px; padding:8px 10px; border-bottom:1px solid var(--border); color:var(--muted-foreground); font-size:10px; font-weight:700; }
  .account-menu .account-language-control select { width:100%; min-height:36px; padding:0 9px; border:1px solid var(--border); border-radius:8px; color:var(--foreground); background:var(--background); font-size:12px; }
  .main-content { padding:22px 0 90px; }
  body.watch-player-page .mobile-menu-trigger,body.watch-player-page .sidebar { display:none !important; }
  body.watch-player-page .main-content { padding:16px 0 90px; }
}

/* 2026-10 navigation polish: green slide controls, profile-owned language, balanced cards. */
.desktop-language-control { display: none !important; }
.mobile-menu-trigger { color: #1aa36d; font-size: 25px; font-weight: 800; line-height: 1; }
.mobile-menu-trigger:hover { color: #0d7f52; background: #e7f8ee; }
.account-language-control { display: flex !important; flex-direction: column; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--border); color: var(--muted-foreground); font-size: 10px; font-weight: 700; }
.account-language-control select { width: 100%; min-height: 36px; padding: 0 9px; border: 1px solid #4bb77b; border-radius: 8px; color: #116e45; background: #e5f8ec; font-size: 12px; font-weight: 700; }
.account-login-toggle { min-width: 82px; justify-content: center; color: #116e45; border-color: #4bb77b; background: #e5f8ec; }
.account-login-toggle:hover { color: #075d42; background: #d9f5e5; }
.account-login-label { font-size: 12px; font-weight: 750; }
.profile-menu-icon { color: #168c63; font-size: 15px; }
.account-menu .login-button { width: 100%; min-height: 38px; margin: 6px 0 2px; color: #fff; background: #168c63; }
.account-menu .login-button:hover { background: #0d704d; }
.notification-toggle { overflow: visible; color: #118861; border-color: #78c89d; background: #eefbf3; }
.notification-toggle:hover { color: #075d42; background: #dcf8e9; }
.notification-bell-icon { width: 23px; height: 23px; display: block; object-fit: contain; }
.notification-count { top: -7px; right: -7px; min-width: 19px; height: 19px; border-color: var(--background); background: #e04c42; font-size: 10px; }
/* Keep the first card the same visual weight as every following card. */
.video-card-featured { grid-column: auto; }
.video-card-featured .video-thumb,
.feed-section .video-card-featured .video-thumb { aspect-ratio: 16 / 9; border-radius: 12px; }
.video-card-featured .video-title { font-size: 13px; }
.video-card-featured .creator-avatar { width: 34px; height: 34px; }
@media (max-width: 760px) {
  .mobile-menu-trigger { font-size: 24px; }
  .mobile-bottom-nav { height: 72px; padding: 7px 7px env(safe-area-inset-bottom); border-top-color: #bfe7cf; background: rgba(244, 253, 247, .98); }
  .mobile-bottom-nav > a { min-width: 68px; min-height: 57px; justify-content: center; gap: 4px; color: #168c63; font-size: 10px; font-weight: 700; }
  .mobile-bottom-nav > a > span:first-child { display: grid; place-items: center; width: 34px; height: 34px; color: #168c63; font-size: 24px; line-height: 1; }
  .mobile-bottom-nav > a.mobile-nav-active { color: #075d42; }
  .mobile-bottom-nav > a.mobile-nav-active > span:first-child { color: #075d42; }
  .mobile-bottom-nav > a:has(.mobile-upload) > span:first-child { width: 40px; height: 40px; border-radius: 13px; color: #fff; background: #168c63; font-size: 27px; box-shadow: 0 5px 15px #168c6340; }
  .account-login-toggle { min-width: 34px; width: 34px; height: 34px; padding: 3px; border: 1px solid #78c89d; }
  .account-login-label, .account-login-toggle .chevron { display: none; }
  .profile-menu-icon { font-size: 17px; }
  .notification-bell-icon { width: 20px; height: 20px; }
  .notification-count { top: -6px; right: -6px; }
  .video-card-featured .video-thumb,
  .feed-section .video-card-featured .video-thumb { aspect-ratio: 16 / 9; }
}

/* Video player polish: action row above, progress/fullscreen row below. */
.player-top-controls { position: absolute; z-index: 4; top: 10px; right: 10px; display: flex; align-items: center; gap: 5px; opacity: 0; transform: translateY(-4px); transition: opacity .2s ease, transform .2s ease; }
.player-stage:hover .player-top-controls, .player-stage.player-controls-visible .player-top-controls, .player-stage:focus-within .player-top-controls { opacity: 1; transform: translateY(0); }
.player-top-controls .player-control-button { width: 31px !important; height: 31px !important; color: #71e5af !important; border: 1px solid #42c88b99; border-radius: 7px !important; background: #06130dcc; font-size: 14px; }
.player-top-controls select { min-width: 35px; height: 31px; padding: 3px 4px; border: 1px solid #42c88b99; border-radius: 7px; color: #71e5af; background: #06130dcc; font-size: 10px; font-weight: 750; }
.player-top-controls .player-toggle-active { color: #d1ffe5 !important; background: #168c63dd !important; }
.atharo-player-loader { position: absolute; z-index: 5; left: 50%; top: 50%; display: grid; place-items: center; gap: 6px; min-width: 76px; padding: 9px 11px; transform: translate(-50%, -50%); border: 1px solid #55d39c66; border-radius: 12px; color: #c9fbe0; background: #06130dcc; font-size: 10px; font-weight: 700; }
.atharo-player-loader[hidden] { display: none; }
.atharo-player-loader img { width: 31px; height: 31px; object-fit: contain; animation: atharo-loader-pulse 1s ease-in-out infinite; }
.player-action-feedback { position: absolute; z-index: 6; left: 50%; top: 50%; min-width: 82px; padding: 10px 13px; transform: translate(-50%, -50%); border: 1px solid #55d39c88; border-radius: 10px; color: #dcffea; background: #06130de8; text-align: center; font: 750 12px/1.2 Inter,system-ui,sans-serif; animation: atharo-feedback-in .18s ease-out; }
.player-action-feedback[hidden] { display: none; }
@keyframes atharo-loader-pulse { 0%,100% { opacity: .45; transform: scale(.86) rotate(0deg); } 50% { opacity: 1; transform: scale(1.08) rotate(8deg); } }
@keyframes atharo-feedback-in { from { opacity: 0; transform: translate(-50%, -50%) scale(.86); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
.player-stage:fullscreen { width: 100vw; height: 100vh; max-height: 100vh; border-radius: 0; background: #000; }
.player-stage:fullscreen .player-media { width: 100%; height: 100%; }
.player-stage:fullscreen .player-controls { bottom: 18px; }
.player-stage:fullscreen .player-top-controls { top: 18px; right: 18px; }
.comments-toggle-hint { display: none; }
.atharo-page-loader { display: grid; place-items: center; gap: 9px; min-height: 150px; color: #5bd39e; font-size: 11px; font-weight: 700; }
.atharo-page-loader img { width: 42px; height: 42px; object-fit: contain; animation: atharo-loader-pulse 1s ease-in-out infinite; }
@media (max-width: 760px) {
  .player-top-controls { top: 7px; right: 7px; gap: 3px; opacity: 1; transform: none; }
  .player-top-controls .player-control-button { width: 29px !important; height: 29px !important; font-size: 13px; }
  .player-top-controls select { height: 29px; min-width: 32px; font-size: 9px; }
  .player-settings-menu { top: 42px; right: 7px; bottom: auto; }
  .player-controls { left: 5px; right: 5px; bottom: 5px; gap: 3px; padding: 8px 5px 5px; opacity: 1; transform: none; }
  .player-controls .player-play-button, .player-controls .player-time, .player-controls .player-volume-button, .player-controls .player-volume-range { display: none; }
  .player-controls .player-progress { width: auto; min-width: 0; height: 18px; }
  .player-controls .player-fullscreen-button { width: 34px !important; height: 32px !important; font-size: 18px; }
  .player-stage:not(.player-controls-visible) .player-controls, .player-stage:not(.player-controls-visible) .player-top-controls { opacity: 1; }
  .player-stage:fullscreen .player-top-controls { top: 10px; right: 10px; }
  .player-stage:fullscreen .player-controls { bottom: 10px; }
  .discussion.comments-collapsed .comments-list, .discussion.comments-collapsed .comment-form { display: none; }
  .discussion.comments-collapsed .comments-heading { cursor: pointer; padding: 12px 10px; border: 1px solid #2b493b; border-radius: 10px; background: #0d2118; }
  .comments-toggle-hint { display: inline; margin-left: auto; color: #70dca8; font-size: 9px; }
  .recommendations { display: flex; flex-direction: column; gap: 16px; }
  .recommendations-title { display: flex; }
  .recommendations .video-card { width: 100%; }
  .recommendations .video-thumb { aspect-ratio: 16 / 9; }
  .recommendations .video-title { font-size: 11px; }
  /* Restore the compact home footer, with clearer green icons. */
  .mobile-bottom-nav { height: 61px; padding: 4px 6px env(safe-area-inset-bottom); border-top: 1px solid #294638; background: rgba(7, 18, 15, .98); }
  .mobile-bottom-nav > a { min-width: 58px; min-height: 51px; gap: 3px; color: #78cda5; font-size: 9px; font-weight: 650; }
  .mobile-bottom-nav > a > span:first-child { width: 30px; height: 29px; color: #78cda5; font-size: 22px; }
  .mobile-bottom-nav > a.mobile-nav-active, .mobile-bottom-nav > a.mobile-nav-active > span:first-child { color: #b0f5d1; }
  .mobile-bottom-nav > a:has(.mobile-upload) > span:first-child { width: 30px; height: 29px; border-radius: 0; color: #78cda5; background: transparent; font-size: 23px; box-shadow: none; }
}

/* Premium creator marketplace */
.premium-page { max-width: 1180px; margin: 0 auto; }
.premium-hero,.premium-detail-hero { position:relative; overflow:hidden; padding:42px; border:1px solid #294b3d; border-radius:22px; color:#e8f5ed; background:radial-gradient(circle at 85% 10%,#d4a94f2a,transparent 32%),linear-gradient(125deg,#0d241a,#132c22 58%,#0a1711); box-shadow:0 18px 45px #06130c33; }
.premium-hero h1,.premium-detail-hero h1 { max-width:700px; margin:13px 0 11px; color:#f1f7f2; font-size:clamp(30px,4vw,54px); line-height:1.08; letter-spacing:-.045em; }
.premium-hero p,.premium-detail-hero p { max-width:580px; margin:0; color:#b7ccbf; font-size:13px; line-height:1.8; }
.premium-kicker,.premium-badge { color:#e7c878; }
.premium-trust-row,.premium-detail-meta { display:flex; flex-wrap:wrap; gap:18px; margin-top:25px; color:#bdd4c6; font-size:11px; }
.premium-catalog { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; padding:27px 0; }
.premium-card { display:flex; flex-direction:column; min-height:355px; overflow:hidden; border:1px solid #294536; border-radius:18px; background:#0e1d16; box-shadow:0 10px 28px #06130c20; transition:transform .18s,border-color .18s; }
.premium-card:hover { transform:translateY(-3px); border-color:#d4a94f88; }
.premium-card-top { display:flex; justify-content:space-between; align-items:center; padding:14px 16px 0; }
.premium-badge { display:inline-flex; align-items:center; width:fit-content; padding:5px 8px; border:1px solid #d4a94f66; border-radius:999px; color:#e7c878; background:#d4a94f14; font:700 9px Inter,system-ui,sans-serif; letter-spacing:.1em; }
.premium-price { color:#f2d98c; font-size:14px; font-weight:800; }
.premium-art { display:grid; place-items:center; height:128px; margin:14px; border-radius:13px; color:#e7c878; font-size:53px; background:radial-gradient(circle at 50% 42%,#d4a94f44,transparent 30%),linear-gradient(140deg,#203f31,#0d1a14); }
.premium-card-copy { flex:1; padding:0 16px 16px; }
.premium-card-copy .section-kicker { font-size:9px; }
.premium-card-copy h2 { margin:7px 0 7px; color:#ecf5ef; font-size:17px; }
.premium-card-copy p { min-height:37px; margin:0; color:#9bb3a5; font-size:11px; line-height:1.6; }
.premium-card-meta { display:flex; justify-content:space-between; gap:8px; margin-top:14px; color:#829b8d; font-size:10px; }
.premium-card>.primary-cta { align-self:flex-start; margin:0 16px 17px; }
.premium-detail-hero { margin-bottom:17px; }
.premium-purchase-panel { display:flex; align-items:center; gap:18px; padding:20px; border:1px solid #d4a94f55; border-radius:16px; background:#18251b; color:#e9f5ec; }
.premium-purchase-panel strong { font-size:18px; }
.premium-purchase-panel p { flex:1; margin:0; color:#a9beaf; font-size:12px; line-height:1.6; }
.premium-outline { border-color:#294536; }
.premium-video-list { display:grid; gap:7px; }
.premium-video-row { display:flex; align-items:center; gap:14px; padding:13px; border:1px solid #294536; border-radius:10px; color:#dcece2; background:#101f17; }
.premium-video-row:hover { border-color:#d4a94f88; }
.premium-video-row.locked { color:#7f988a; cursor:default; }
.premium-video-index { color:#d4a94f; font:700 11px Inter,system-ui,sans-serif; }
.premium-video-title { flex:1; font-size:12px; }
.premium-video-state { color:#d4a94f; font:700 10px Inter,system-ui,sans-serif; }
.premium-toggle.premium-on { color:#e8ca79; border-color:#7c6329; }
.premium-disclaimer { margin-top:14px; border-color:#6a5627; color:#d8bd72; }
@media(max-width:900px){.premium-catalog{grid-template-columns:repeat(2,minmax(0,1fr));}.premium-hero,.premium-detail-hero{padding:28px}.premium-purchase-panel{align-items:flex-start;flex-direction:column;}}
@media(max-width:560px){.premium-catalog{grid-template-columns:1fr}.premium-hero h1,.premium-detail-hero h1{font-size:32px}.premium-hero,.premium-detail-hero{padding:23px}.premium-purchase-panel{padding:15px}.premium-card{min-height:0}}

/* Premium marketplace and creator payout workspace */
.premium-section { margin-top: 26px; }
.premium-section .page-heading { margin-bottom: 14px; }
.premium-section .page-heading h2 { margin: 6px 0 0; color:#e9f4ed; font-size:24px; letter-spacing:-.03em; }
.premium-card { border-color:#315341; background:linear-gradient(155deg,#12281d,#0c1912 72%); }
.premium-card-top { min-height:43px; }
.premium-art { position:relative; display:grid; place-items:center; min-height:132px; margin:13px 14px 9px; overflow:hidden; border:1px solid #d1aa5540; border-radius:13px; color:#e8cd82; background:radial-gradient(ellipse at 50% 20%,#d1aa5526,transparent 62%),linear-gradient(135deg,#13271d,#18261a); font-size:38px; }
.premium-video-art img { position:absolute; width:100%; height:100%; inset:0; object-fit:cover; opacity:.78; }
.premium-video-art>span { z-index:1; display:grid; place-items:center; width:54px; height:54px; border:1px solid #e7cc8b90; border-radius:50%; color:#f1d993; background:#09150db5; }
.premium-video-card { min-height:390px; }
.premium-feed-price { position:absolute; z-index:2; top:10px; left:10px; padding:6px 9px; border:1px solid #ddbc6a88; border-radius:999px; color:#f6df9e; background:#111d17ef; font:800 9px/1 Inter,system-ui,sans-serif; letter-spacing:.06em; box-shadow:0 4px 15px #0006; }
.premium-manage-list { display:grid; gap:12px; }
.premium-manage-card { overflow:hidden; border:1px solid #2b4939; border-radius:14px; background:linear-gradient(145deg,#11241a,#0c1912); }
.premium-manage-summary { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:16px 18px; cursor:pointer; list-style:none; }
.premium-manage-summary::-webkit-details-marker { display:none; }
.premium-manage-summary>div:first-child { display:grid; gap:5px; }
.premium-manage-summary strong { color:#e5f3ea; font-size:15px; }
.premium-manage-summary small,.premium-manage-metrics { color:#91aa9a; font-size:11px; }
.premium-manage-metrics { display:flex; align-items:center; gap:12px; }
.premium-manage-metrics strong { color:#e8cd82; }
.premium-playlist-form,.premium-video-pricing-form,.withdrawal-request-form { margin:0; padding:17px; border-top:1px solid #294536; }
.premium-preview-picker { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; max-height:270px; overflow:auto; padding:7px; border:1px solid #2a4336; border-radius:11px; background:#0a1711; }
.premium-preview-option { display:flex; align-items:center; gap:9px; min-height:38px; padding:7px 9px; border:1px solid #223b2e; border-radius:8px; color:#c9dbd0; background:#102019; font-size:11px; }
.premium-preview-option input,.console-toggle input { accent-color:#42cba6; }
.premium-preview-option>span:nth-child(2) { flex:1; }
.premium-video-pricing-form .console-form-actions,.premium-playlist-form .console-form-actions,.withdrawal-request-form .console-form-actions { grid-column:1/-1; }
.payout-destination { display:flex; flex-wrap:wrap; gap:8px 16px; padding:11px 13px; border:1px solid #33513f; border-radius:10px; color:#dcebe2; background:#0a1711; }
.payout-destination span { overflow-wrap:anywhere; font-family:ui-monospace,SFMono-Regular,monospace; }
.withdrawal-review-card { border-color:#3c5947; }
.admin-tabs .console-tab { white-space:nowrap; }
@media(max-width:760px){
  .premium-preview-picker{grid-template-columns:1fr}
  .premium-manage-summary{align-items:flex-start;flex-direction:column}
  .premium-manage-metrics{width:100%;justify-content:space-between}
  .premium-video-card{min-height:0}
}