/* Additions on top of the forked agency stylesheets (environment switcher, preview bar, 5-stage board). */

/* The channel pipeline has 5 stages (the agency has 6) */
#main-app #view-pipeline .kanban-board { grid-template-columns: repeat(5, minmax(170px, 1fr)); }
@media (max-width: 1240px) { #main-app #view-pipeline .kanban-board { grid-template-columns: repeat(5, minmax(150px, 1fr)); } }

/* ---------- Environment switcher (bottom left) ---------- */
#env-float { position: fixed; left: 18px; bottom: 18px; z-index: 60; }
#env-float .env-switch { background: #fff; border: 1px solid #DEDEE1; border-radius: 16px; padding: 10px 10px 10px; box-shadow: 0 1px 2px rgba(18,18,20,0.06), 0 14px 32px -10px rgba(18,18,20,0.28); }
#env-float .env-btn { box-shadow: none; background: #F7F7F8; }
#env-float:empty { display: none; }
.env-switch { position: relative; }
.env-switch .env-cap { font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8F8F9C; margin: 0 4px 5px; display: block; }
.env-btn { display: flex; align-items: center; gap: 9px; min-width: 190px; width: 100%; background: #fff; border: 1px solid #D4D4D9; border-radius: 12px; padding: 10px 12px; font-family: inherit; font-size: 13.5px; font-weight: 700; color: #19191C; cursor: pointer; box-shadow: 0 1px 2px rgba(18,18,20,0.06), 0 6px 16px -6px rgba(18,18,20,0.16); }
.env-btn:hover { border-color: #C4C4CA; }
.env-btn i.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c, #1A1A1D); flex-shrink: 0; }
.env-btn span { flex: 1; text-align: left; }
.env-btn .ph { color: #8F8F9C; font-size: 14px; }
.env-menu { position: absolute; left: 0; bottom: calc(100% + 8px); min-width: 100%; background: #fff; border: 1px solid #DEDEE1; border-radius: 12px; box-shadow: 0 14px 40px -8px rgba(18,18,20,0.32); padding: 6px; z-index: 70; }
.env-menu button { width: 100%; display: flex; align-items: center; gap: 9px; border: 0; background: none; padding: 9px 10px; border-radius: 8px; font-family: inherit; font-size: 13.5px; font-weight: 650; color: #19191C; text-align: left; cursor: pointer; }
.env-menu button:hover, .env-menu button.on { background: #F1F1F3; }
.env-menu i.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.env-menu small { margin-left: auto; color: #8F8F9C; font-weight: 600; font-size: 11.5px; }
#sidebar-env { margin-bottom: 12px; }
#sidebar-env:empty { display: none; }
.env-pill { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; color: #646470; background: #fff; border: 1px solid #DEDEE1; border-radius: 999px; padding: 4px 11px; margin-left: 4px; }
.env-pill i.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }

/* ---------- Preview bar ---------- */
#demo-bar { position: fixed; bottom: 14px; left: 50%; transform: translateX(-50%); z-index: 90; background: #FDF6EA; border: 1px solid #F3E4C6; color: #9A6B12; border-radius: 999px; padding: 6px 14px; font-size: 12px; font-weight: 600; display: flex; align-items: center; gap: 10px; box-shadow: 0 6px 18px -8px rgba(18,18,20,.3); }
#demo-bar select { border: 1px solid #E6D3A8; background: #fff; border-radius: 7px; padding: 3px 6px; font-family: inherit; font-size: 12px; }
body.has-demo #main-app { padding-top: 0; }

/* New channel card inputs follow the agency login-input look in the light theme */
#new-channel-card .login-input { margin-bottom: 12px; padding: 10px; width: 100%; box-sizing: border-box; }
#new-channel-card .msg { margin-top: 8px; font-size: 12px; min-height: 14px; }

/* My channels list */
.my-card .role { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: #EFEFF2; color: #4A4A55; margin-left: 6px; }
.my-card .role.mgr { background: #19191C; color: #fff; }

/* Review pill on the card only when attention is needed */
#main-app .kanban-card .vc-review { margin-bottom: 2px; }
#main-app .kanban-card .vc-numline { font-size: 11px; font-weight: 800; letter-spacing: .04em; color: #81818F; margin-bottom: 4px; }
#main-app .kanban-card .vc-title:empty::before { content: 'Untitled'; color: #A2A2AC; }

/* Modal blocks */
#details-modal .dl-multi { margin-top: 8px; }
#details-modal .assign-row { display: flex; align-items: center; gap: 8px; }
#details-modal .assign-row b { font-size: 12px; min-width: 78px; color: #3A3A42; }
#details-modal .assign-row select { flex: 1; padding: 6px 8px; font-size: 12.5px; border: 1px solid #E2E2E5; border-radius: 8px; background: #fff; font-family: inherit; }
#details-modal .assign-row select:disabled { background: #F5F5F6; }
.pr-card-foot .pr-note { color: #8D8D9A; font-size: 12px; }

#details-modal .btn { white-space: nowrap; }
#details-modal .vn-wrap input { width: 64px; }

/* Same as the agency: the Channels page is full width, only the Production page (crm-mode) sits in a centered 1320px column */
#admin-dashboard.crm-mode > * { width: 100%; }

/* Board columns scroll vertically inside the screen (all videos reachable) */
#main-app #view-pipeline { min-height: 0; }
#main-app #view-pipeline .kanban-board { flex: 1; min-height: 0; grid-template-rows: minmax(0, 1fr); align-items: stretch; }
#main-app #view-pipeline .kanban-column { min-height: 0; height: 100%; display: flex; flex-direction: column; }
#main-app #view-pipeline .kanban-column .column-body { flex: 1; min-height: 0; overflow-y: auto; }
#main-app .main-content { min-height: 0; }

.nr-idea-vids { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.nr-idea-vid { display: flex; align-items: center; gap: 8px; width: 230px; padding: 4px; border: 1px solid var(--border, #e5e5ea); border-radius: 8px; background: #fff; text-decoration: none; color: inherit; font-size: 12px; }
.nr-idea-vid img { width: 64px; height: 36px; object-fit: cover; border-radius: 5px; flex: none; }
.nr-idea-vid span { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* No funnel stages in this tool */
.nr-ch-funnel, .nr-adj-top, .nr-adj-sep, .nr-stage, select[data-libf="stage"], select[data-lf="stage"], select[data-k$=".stage"] { display: none !important; }
div:has(> select[data-lf="stage"]) { display: none !important; }
.nr-fblock .nr-block-head + .nr-chips, .nr-chips:has(> .nr-chip[data-a="stage-filter"]) { display: none !important; }

/* Send-to-board dialog */
.sf-ov { position: fixed; inset: 0; background: rgba(20,20,24,.38); backdrop-filter: blur(3px); z-index: 9999; display: flex; align-items: center; justify-content: center; }
.sf-card { background: #fff; border-radius: 20px; padding: 28px; width: 440px; max-width: 92vw; box-shadow: 0 30px 80px rgba(0,0,0,.28); font-family: inherit; }
.sf-title { font-size: 20px; font-weight: 700; letter-spacing: -.01em; color: #17171A; }
.sf-sub { font-size: 13px; color: #8A8A93; margin: 4px 0 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-lab { display: block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #6B6B74; margin: 14px 0 6px; }
.sf-in { width: 100%; box-sizing: border-box; height: 44px; padding: 0 14px; border: 1px solid #E3E3E8; border-radius: 12px; background: #F7F7F9; font: inherit; font-size: 14px; color: #17171A; outline: none; transition: border-color .15s, background .15s, box-shadow .15s; }
.sf-in:focus { border-color: #17171A; background: #fff; box-shadow: 0 0 0 3px rgba(23,23,26,.08); }
.sf-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 26px; }
.sf-btn { height: 42px; padding: 0 20px; border-radius: 12px; border: 1px solid #E3E3E8; background: #fff; font: inherit; font-size: 14px; font-weight: 600; color: #17171A; cursor: pointer; }
.sf-btn:hover { background: #F4F4F6; }
.sf-primary { background: #17171A; color: #fff; border-color: #17171A; }
.sf-primary:hover { background: #2B2B31; }
.sf-primary:disabled { opacity: .6; cursor: default; }

/* Connected channels (SpongeTruths + NichtFurKinder): soft yellow glow */
.client-card.linked-pair { background: linear-gradient(180deg, #FFFBE6, #FFF6CC) !important; border: 1px solid #F1DF8A !important; box-shadow: 0 0 0 4px rgba(250, 224, 90, .22), 0 10px 30px rgba(230, 200, 70, .25) !important; }

/* Studio */
.st-wrap { max-width: 1000px; margin: 0 auto; padding-bottom: 90px; }
.st-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.st-seg { display: inline-flex; gap: 2px; padding: 4px; background: #fff; border-radius: 14px; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.st-seg button { border: 0; background: transparent; padding: 9px 16px; border-radius: 10px; font: inherit; font-size: 14px; font-weight: 600; color: #6B6B74; cursor: pointer; }
.st-seg button.on { background: #17171A; color: #fff; }
.st-tiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 16px; }
.st-tile { text-align: left; background: #fff; border: 1px solid #E8E8EC; border-radius: 16px; padding: 16px 18px; cursor: pointer; font: inherit; display: flex; flex-direction: column; gap: 6px; }
.st-tile span { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #8A8A93; }
.st-tile b { font-size: 30px; letter-spacing: -.02em; color: #17171A; }
.st-tile.blue span { color: #2F6FB5; } .st-tile.amber span { color: #C98A2E; } .st-tile.green span { color: #2F8A5E; }
.st-tile.on { border-color: #17171A; box-shadow: 0 0 0 3px rgba(23,23,26,.08); }
.st-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; align-items: start; }
.st-card { background: #fff; border-radius: 18px; padding: 20px; box-shadow: 0 1px 3px rgba(0,0,0,.06); margin-bottom: 16px; }
.st-two .st-card { margin-bottom: 0; }
.st-card-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; font-size: 15px; }
.st-card-h em { font-style: normal; background: #F1F1F4; border-radius: 999px; padding: 2px 9px; font-size: 12px; font-weight: 700; }
.st-tools { display: flex; gap: 8px; align-items: center; }
.st-row { display: flex; align-items: center; gap: 12px; padding: 9px 4px; border-top: 1px solid #F0F0F3; }
.st-row:first-of-type { border-top: 0; }
.st-row.sel { background: #FAFAFC; }
.st-row img { width: 62px; height: 35px; object-fit: cover; border-radius: 6px; background: #EEE; flex: none; }
.st-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.st-row-main a { color: #17171A; font-weight: 600; font-size: 14px; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-row-main span, .st-use { font-size: 12px; color: #8A8A93; }
.st-chip { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: #EEF0FF; color: #4C5BC9; white-space: nowrap; }
.st-sel, .st-in { height: 36px; border: 1px solid #E3E3E8; border-radius: 10px; background: #F7F7F9; padding: 0 10px; font: inherit; font-size: 13px; color: #17171A; outline: none; }
.st-in { min-width: 180px; } .st-in.sm { min-width: 0; width: 90px; }
.st-in:focus, .st-sel:focus { border-color: #17171A; background: #fff; }
.st-btn { height: 36px; padding: 0 14px; border-radius: 10px; border: 1px solid #E3E3E8; background: #fff; font: inherit; font-size: 13px; font-weight: 600; color: #17171A; cursor: pointer; white-space: nowrap; }
.st-btn:hover { background: #F4F4F6; } .st-btn.dark { background: #17171A; color: #fff; border-color: #17171A; } .st-btn.dark:hover { background: #2B2B31; }
.st-btn.danger { color: #D64545; } .st-btn:disabled { opacity: .5; cursor: default; }
.st-link { border: 0; background: none; color: #4C5BC9; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.st-pill { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: #E8F1FF; color: #2F6FB5; }
.st-pill.green { background: #E4F6EC; color: #2F8A5E; }
.st-prod { margin-bottom: 14px; } .st-prod-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.st-next { background: #FAFAFC; border: 1px solid #EEE; border-radius: 14px; padding: 12px; }
.st-next-h { font-size: 12px; font-weight: 700; color: #6B6B74; margin-bottom: 6px; }
.st-total { margin: 10px 4px; font-size: 14px; color: #6B6B74; } .st-total b { color: #17171A; }
.st-actions { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; align-items: center; } .st-actions.left { margin-top: 0; }
.st-empty, .st-empty-inline { color: #9A9AA3; font-size: 13px; padding: 14px 4px; }
.st-float { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: #17171A; color: #fff; border-radius: 16px; padding: 10px 14px; display: flex; gap: 12px; align-items: center; box-shadow: 0 14px 40px rgba(0,0,0,.3); z-index: 50; font-size: 14px; }
.st-float .st-btn { background: #fff; color: #17171A; } .st-float .st-btn.dark { background: #FFD84D; border-color: #FFD84D; }
.st-order { display: flex; flex-direction: column; gap: 2px; margin: 6px 0 10px; }
.st-ord { display: flex; gap: 10px; align-items: center; padding: 6px 4px; font-size: 14px; border-top: 1px solid #F0F0F3; }
.st-ord i { font-style: normal; width: 24px; height: 24px; border-radius: 8px; background: #F1F1F4; display: grid; place-items: center; font-size: 12px; font-weight: 700; flex: none; }
.st-ord span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .st-ord em { font-style: normal; color: #8A8A93; font-size: 12px; }
.st-comp { border-top: 1px solid #F0F0F3; } .st-comp-h { display: flex; align-items: center; gap: 12px; padding: 14px 4px; cursor: pointer; }
.st-comp-h b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .st-comp-h span:not(.st-pill) { font-size: 12px; color: #8A8A93; }
.st-pkg { padding: 4px 4px 18px; } .st-pkg > label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #6B6B74; margin: 14px 0 6px; }
.st-pkg .st-in { width: 100%; box-sizing: border-box; } .st-actions .st-in { width: auto; flex: 1; } .st-cardrow .st-in.sm { flex: 0 0 92px; width: 92px; min-width: 92px; text-align: center; }
.st-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: #44444C; text-transform: none; letter-spacing: 0; font-weight: 500; }
.st-pkg .st-check { display: flex; margin: 4px 0; }
@media (max-width: 900px) { .st-tiles { grid-template-columns: repeat(2, 1fr); } .st-two { grid-template-columns: 1fr; } }

.st-wrap { min-width: 0; max-width: 100%; }
.st-two > *, .st-tiles > * { min-width: 0; }
.st-wrap { width: 100%; box-sizing: border-box; }

.st-noimg { width: 62px; height: 35px; border-radius: 6px; background: linear-gradient(135deg, #FFF3B0, #FFD84D); flex: none; display: block; }

.st-cards { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.st-cardrow { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #FAFAFC; border: 1px solid #EEE; border-radius: 12px; }
.st-cardrow b { flex: 1; min-width: 0; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-cardrow em { font-style: normal; font-size: 13px; color: #6B6B74; font-weight: 600; }

/* Six columns (SpongeTruths + NichtFurKinder only): same row, other channels keep their five */
#main-app #view-pipeline .kanban-board.six { grid-template-columns: repeat(6, minmax(150px, 1fr)); }
@media (max-width: 1240px) { #main-app #view-pipeline .kanban-board.six { grid-template-columns: repeat(6, minmax(136px, 1fr)); } }

/* Overview of SpongeTruths / NichtFurKinder: panels keep their own height (no empty space) */
#view-analytics.ov-six .ov-row { align-items: start; }
#view-analytics.ov-six .ov-panel { height: auto; min-height: 0; }

.asg-add { align-self: flex-start; margin-top: 4px; padding: 6px 12px !important; font-size: 12px !important; }
.asg-x { padding: 2px 9px !important; margin-left: 6px; }

.st-chip.st-new { background: #E4F6EC; color: #2F8A5E; }

.st-dl { font-size: 12px; font-weight: 700; color: #2F6FB5; background: #E8F1FF; border-radius: 8px; padding: 4px 9px; text-decoration: none; white-space: nowrap; }
.st-dl:hover { background: #D6E7FF; }
.st-ord .st-dl, .st-ord .st-link { margin-left: 8px; flex: none; }

/* Safety: backups + recently deleted */
.sg-card { background: #fff; border: 1px solid #E8E8EC; border-radius: 16px; padding: 18px 20px; margin-bottom: 16px; }
.sg-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.sg-h b { font-size: 15px; color: #17171A; } .sg-h span { font-size: 12.5px; color: #8A8A93; }
.sg-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.sg-restore { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 700; color: #6B6B74; text-transform: uppercase; letter-spacing: .05em; }
.sg-restore select { height: 38px; border: 1px solid #E3E3E8; border-radius: 10px; background: #F7F7F9; padding: 0 10px; font: inherit; font-size: 13px; text-transform: none; letter-spacing: 0; color: #17171A; }
.sg-sub { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #8A8A93; margin: 10px 0 4px; }
.sg-list { display: flex; flex-direction: column; margin-top: 8px; }
.sg-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 2px; border-top: 1px solid #F0F0F3; font-size: 14px; color: #17171A; }
.sg-row em { display: block; font-style: normal; font-size: 12px; color: #8A8A93; }
.sg-row .btn { padding: 6px 12px; font-size: 12.5px; }
.sg-note { margin-top: 10px; font-size: 12px; color: #9A9AA3; }
.del-count { background: #F1F1F4; border-radius: 999px; padding: 2px 9px; font-size: 12px; font-weight: 700; }
.del-list { display: flex; flex-direction: column; gap: 8px; }
.del-row { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid #E8E8EC; border-radius: 12px; padding: 12px 14px; }
.del-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .del-main span { font-size: 12px; color: #8A8A93; }
.del-x { color: #D64545 !important; }

/* YouTube panel on the channel overview */
.ov-yt { margin-top: 26px; }
.yt-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.yt-head h3 a { color: inherit; text-decoration: none; }
.yt-badge { display: inline-block; vertical-align: middle; margin-left: 8px; font-size: 11.5px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: #F1F1F4; color: #6B6B74; letter-spacing: 0; }
.yt-badge.up { background: #E4F6EC; color: #2F8A5E; } .yt-badge.down { background: #FDECEC; color: #D64545; }
.yt-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; margin-top: 16px; }
.yt-vid { display: flex; align-items: center; gap: 12px; padding: 8px; background: #fff; border: 1px solid #ECECEF; border-radius: 12px; text-decoration: none; color: inherit; }
.yt-vid:hover { border-color: #D8D8DE; }
.yt-vid img { width: 96px; height: 54px; object-fit: cover; border-radius: 8px; flex: none; background: #EEE; }
.yt-vid-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.yt-vid-main b { font-size: 13px; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.yt-vid-main span { font-size: 12px; color: #8A8A93; }
.yt-score { font-style: normal; font-size: 12px; font-weight: 800; padding: 3px 8px; border-radius: 8px; background: #F1F1F4; color: #6B6B74; flex: none; }
.yt-score.hot { background: #E4F6EC; color: #2F8A5E; } .yt-score.cold { background: #FDECEC; color: #D64545; }
.yt-empty { display: flex; align-items: center; justify-content: space-between; gap: 14px; } .yt-empty b { display: block; font-size: 15px; } .yt-empty span { font-size: 13px; color: #8A8A93; }

.yt-score.warm { background: #FFF3D6; color: #B7791F; }
.yt-note { margin-top: 10px; font-size: 12px; color: #9A9AA3; }

.yt-perf .ov-kpi-value { font-size: 20px !important; }
.yt-perf.up { background: #E9F7EF !important; } .yt-perf.up .ov-kpi-value { color: #2F8A5E; }
.yt-perf.warn { background: #FFF6E3 !important; } .yt-perf.warn .ov-kpi-value { color: #B7791F; }
.yt-perf.down { background: #FDEEEE !important; } .yt-perf.down .ov-kpi-value { color: #D64545; }

/* Pipeline stage + review status belong together: one highlighted block in the video card */
.stage-key { display: grid; gap: 14px; padding: 14px 16px 16px; border-radius: 14px; background: #fff; border: 1.5px solid #17171b; box-shadow: 0 6px 18px rgba(0,0,0,0.08); }

/* ---- Production check (nothing may be forgotten) ---- */
.pr-alert { background: #FFF6EE; border: 1px solid #F3D3B5; border-radius: 14px; padding: 12px 14px; margin: 0 0 16px; display: flex; flex-direction: column; gap: 6px; }
.pr-alert-h { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: #9A4A0C; }
.pr-alert-h em { font-style: normal; font-weight: 500; color: #B7742F; margin-left: 4px; }
.pr-alert-h i { font-size: 18px; }
.pr-alert-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .7fr) minmax(0, 2fr); gap: 12px; align-items: baseline; text-align: left; width: 100%; padding: 8px 10px; border: 0; border-radius: 10px; background: rgba(255,255,255,.7); cursor: pointer; font: inherit; font-size: 12.5px; color: #3A2A1A; }
.pr-alert-row:hover { background: #fff; box-shadow: 0 1px 0 rgba(154,74,12,.15); }
.pr-alert-row b { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-alert-row span { color: #8A7766; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-alert-row i { font-style: normal; color: #9A4A0C; }
.pr-alert-more { font-size: 12px; color: #8A7766; padding: 2px 10px; }
.pr-ok { display: flex; align-items: center; gap: 8px; background: #EEF8F2; border: 1px solid #CDE8D8; color: #2F7A52; border-radius: 12px; padding: 9px 14px; margin: 0 0 16px; font-size: 13px; font-weight: 600; }
.pr-auto { background: #E8F0FB; color: #2F5FA3; border-radius: 6px; padding: 1px 6px; font-size: 10px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.vc-prodwarn { display: inline-flex; align-items: center; gap: 5px; background: #FFF1E6; color: #B4540A; border-radius: 8px; padding: 3px 8px; font-size: 11px; font-weight: 700; }
.dl-sub { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: #81818F; margin: 8px 0 6px; }
.dl-warn { margin-top: 6px; font-size: 12px; color: #B4540A; }
.login-input.dl-bad { border-color: #E3A36C !important; background: #FFF8F1 !important; }
.dl-frame { display: flex; gap: 8px; align-items: center; }
@media (max-width: 760px) { .pr-alert-row { grid-template-columns: 1fr; gap: 2px; } }
.af-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; background: #F6F6F8; border: 1px solid #ECECEF; border-radius: 12px; padding: 9px 14px; margin: 0 0 16px; font-size: 12.5px; color: #3A3A42; }
.af-bar b { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.af-sw { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.af-sw input { accent-color: #17171A; }
.af-note { flex-basis: 100%; font-size: 11.5px; color: #81818F; }
.af-note code { background: #fff; border: 1px solid #E3E3E8; border-radius: 6px; padding: 1px 5px; font-size: 11px; user-select: all; }
.pr-alert-row { display: flex; align-items: center; gap: 8px; padding: 0; background: transparent; box-shadow: none; }
.pr-alert-main { flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .7fr) minmax(0, 2fr); gap: 12px; align-items: baseline; text-align: left; padding: 8px 10px; border: 0; border-radius: 10px; background: rgba(255,255,255,.7); cursor: pointer; font: inherit; font-size: 12.5px; color: #3A2A1A; }
.pr-alert-main:hover { background: #fff; }
.pr-alert-main b { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-alert-main span { color: #8A7766; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-alert-main i { font-style: normal; color: #9A4A0C; }
.pr-accept, .pr-accept-all { border: 0; border-radius: 9px; background: #17171A; color: #fff; font: inherit; font-size: 12px; font-weight: 700; padding: 7px 11px; cursor: pointer; white-space: nowrap; }
.pr-accept:hover, .pr-accept-all:hover { background: #333; }
.pr-accept-all { margin-left: auto; }
@media (max-width: 760px) { .pr-alert-main { grid-template-columns: 1fr; gap: 2px; } }

/* ---- Production check: clean cards-with-chips layout ---- */
.pr-alert { background: #fff; border: 1px solid #ECECEF; border-left: 4px solid #E8913A; border-radius: 14px; padding: 14px 16px; margin: 0 0 14px; gap: 10px; box-shadow: 0 1px 2px rgba(23,23,26,.04); }
.pr-alert-h { gap: 10px; align-items: center; color: #17171A; }
.pr-alert-h > i { font-size: 22px; color: #E8913A; flex: none; }
.pr-alert-h > span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pr-alert-h > span b { font-size: 14px; font-weight: 700; }
.pr-alert-h > span em { margin: 0; font-size: 12px; font-weight: 500; color: #81818F; }
.pr-alert-list { display: flex; flex-direction: column; gap: 6px; }
.pr-alert-row { display: flex; align-items: center; gap: 10px; }
.pr-alert-main { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; flex: 1; min-width: 0; padding: 10px 12px; border: 1px solid #F0F0F3; border-radius: 10px; background: #FAFAFB; color: #17171A; transition: background .12s, border-color .12s; }
.pr-alert-main:hover { background: #fff; border-color: #DADADF; }
.pr-t { display: flex; align-items: baseline; gap: 8px; max-width: 100%; min-width: 0; }
.pr-t b { font-size: 13px; font-weight: 700; color: #17171A; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-t em { font-style: normal; font-size: 11.5px; color: #81818F; white-space: nowrap; flex: none; }
.pr-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.pr-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; line-height: 1.3; max-width: 100%; }
.pr-chip i { font-size: 13px; font-style: normal; flex: none; }
.pr-chip.warn { background: #FFF1E2; color: #A4540C; }
.pr-chip.bad { background: #FDE8E8; color: #B42318; }
.pr-chip.info { background: #E8F0FB; color: #2F5FA3; }
.pr-chip.mute { background: #EEEEF1; color: #5E5E69; }
.pr-acts { display: flex; flex-direction: column; gap: 4px; flex: none; }
.pr-accept { background: #17171A; }
.pr-accept-all { margin-left: auto; flex: none; }
.pr-extra { display: none; }
.pr-alert.open .pr-extra { display: flex; }
.pr-alert-more { align-self: center; border: 0; background: none; font: inherit; font-size: 12px; font-weight: 700; color: #5E5E69; cursor: pointer; padding: 4px 10px; border-radius: 8px; }
.pr-alert-more:hover { background: #F2F2F5; color: #17171A; }
.pr-ok { border-radius: 14px; }
/* Auto-fill settings: collapsed by default */
details.af-bar { display: block; padding: 0; background: #fff; border: 1px solid #ECECEF; overflow: hidden; }
details.af-bar summary { list-style: none; display: flex; align-items: center; gap: 8px; padding: 10px 14px; cursor: pointer; }
details.af-bar summary::-webkit-details-marker { display: none; }
details.af-bar summary:hover { background: #FAFAFB; }
.af-state { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 2px 7px; border-radius: 999px; background: #EEEEF1; color: #5E5E69; }
.af-caret { margin-left: auto; color: #81818F; transition: transform .15s; }
details.af-bar[open] .af-caret { transform: rotate(180deg); }
.af-body { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 4px 14px 12px; border-top: 1px solid #F2F2F5; padding-top: 12px; }
@media (max-width: 760px) { .pr-alert-row { flex-direction: column; align-items: stretch; } .pr-acts { flex-direction: row; } }

/* Production incomplete badge: solid colors so it stays readable on every card */
.vc-prodwarn { background: #FFE3C2 !important; color: #7A3300 !important; border: 1px solid #F0A55C; opacity: 1 !important; font-size: 11.5px; font-weight: 700; text-shadow: none; }
.vc-prodwarn i { color: #C2410C; font-size: 14px; opacity: 1; }
/* Production check chips: darker text for contrast */
.pr-chip.warn { background: #FFE9D0; color: #7A3300; }
.pr-chip.bad { background: #FBD5D5; color: #8A1C12; }
.pr-chip.info { background: #D9E7FA; color: #1E4A8A; }
.pr-chip.mute { background: #E4E4E9; color: #3F3F48; }
.pr-t em { color: #5E5E69; }
.pr-alert-h > span em { color: #5E5E69; }
.sf-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 12px; }
.sf-link { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 10px; background: #E8F0FB; color: #1E4A8A; font-size: 13px; font-weight: 700; text-decoration: none; }
.sf-link:hover { background: #D9E7FA; }
.sf-link i { font-size: 16px; }

/* ---- One soft color per process: script, voice over, thumbnail, edit, mega comp ---- */
.k-script { --k-bg: #EEF3FF; --k-bd: #D5E1FB; --k-ac: #3563C4; --k-dk: #24478F; }
.k-vo     { --k-bg: #F3EFFF; --k-bd: #E0D8FA; --k-ac: #7351D1; --k-dk: #523399; }
.k-thumb  { --k-bg: #FFF0F3; --k-bd: #F8D7DE; --k-ac: #CC4468; --k-dk: #94294A; }
.k-edit   { --k-bg: #EAF7F0; --k-bd: #CBEBDA; --k-ac: #2B8A5F; --k-dk: #1B6444; }
.k-mega   { --k-bg: #FFF6E4; --k-bd: #F4E0B3; --k-ac: #B4781A; --k-dk: #82560F; }
/* Delivery blocks in the video window */
.dl-card { background: var(--k-bg); border: 1px solid var(--k-bd); border-left: 4px solid var(--k-ac); border-radius: 14px; padding: 14px 16px 16px; box-shadow: 0 1px 2px rgba(23,23,26,.03); }
.dl-card .luxury-label { color: var(--k-dk); }
.dl-card .luxury-label > span:first-child i { color: var(--k-ac); font-size: 16px; }
.dl-card .dl-sub { color: var(--k-dk); opacity: .8; }
.dl-card .login-input { background: #fff; border-color: var(--k-bd); }
.dl-card .login-input:focus { border-color: var(--k-ac); box-shadow: 0 0 0 3px var(--k-bg); }
/* Production stats boxes on the video card */
.pr-card-part[class*="k-"] { background: var(--k-bg); border-color: var(--k-bd); }
.pr-card-part[class*="k-"].filled { border-color: var(--k-ac); }
.pr-card-part[class*="k-"] .pr-cp-top { color: var(--k-dk); }
.pr-card-part[class*="k-"] .pr-cp-top i { color: var(--k-ac); }
.pr-card-part[class*="k-"] .pr-cp-amt { background: #fff; }
/* Assignees rows */
#details-modal .assign-row[class*="k-"] { background: var(--k-bg); border: 1px solid var(--k-bd); border-left: 3px solid var(--k-ac); border-radius: 10px; padding: 6px 8px; margin-bottom: 6px; }
#details-modal .assign-row[class*="k-"] b { color: var(--k-dk); }

/* Stronger selectors + a bit more color, so no other style can turn the section background white */
.k-script { --k-bg: #E8F0FF; --k-bd: #C9DAFA; }
.k-vo     { --k-bg: #F0EAFF; --k-bd: #D9CCF8; }
.k-thumb  { --k-bg: #FFEBF0; --k-bd: #F6C9D4; }
.k-edit   { --k-bg: #E3F5EC; --k-bd: #BDE5D0; }
.k-mega   { --k-bg: #FFF2D6; --k-bd: #EFD79B; }
#details-modal .form-group.dl-card, .modal .form-group.dl-card { background: var(--k-bg) !important; border: 1px solid var(--k-bd) !important; border-left: 5px solid var(--k-ac) !important; border-radius: 14px; padding: 14px 16px 16px; }
#details-modal .form-group.dl-card label, .modal .form-group.dl-card label.luxury-label { color: var(--k-dk) !important; }
#details-modal .form-group.dl-card input.login-input { background: #fff !important; border: 1px solid var(--k-bd) !important; }
.pr-card-part[class*="k-"] { background: var(--k-bg) !important; border: 1px solid var(--k-bd) !important; }
.pr-card-part[class*="k-"].filled { border-color: var(--k-ac) !important; }

/* New freelancer: Google Drive access reminder */
.dr-alert { border-left-color: #3B82C4; }
.dr-alert .pr-alert-h > i { color: #3B82C4; }
.tm-drive { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; padding: 8px 10px; border-radius: 10px; background: #E8F0FB; color: #1E4A8A; font-size: 12px; font-weight: 600; }
.tm-drive i { font-size: 15px; vertical-align: -2px; }
.tm-drive button { border: 0; border-radius: 8px; background: #17171A; color: #fff; font: inherit; font-size: 11.5px; font-weight: 700; padding: 5px 10px; cursor: pointer; white-space: nowrap; }
.dr-mail { display: flex; gap: 8px; align-items: center; margin-bottom: 4px; }
.dr-mail .sf-in { flex: 1; }

/* ---- Production to complete: the same warm card style as the agency dashboard ---- */
.pr-alert { background: linear-gradient(180deg, #FFFAF0 0%, #FFF6E6 100%); border: 1px solid #F5E1B6; border-left: 1px solid #F5E1B6; border-radius: 20px; padding: 20px 22px 18px; margin: 0 0 18px; gap: 14px; box-shadow: 0 10px 30px rgba(190,130,30,.10), 0 1px 2px rgba(190,130,30,.08); }
.dr-alert { background: linear-gradient(180deg, #F7FAFF 0%, #EEF4FD 100%); border-color: #CFE0F5; box-shadow: 0 10px 30px rgba(59,130,196,.10), 0 1px 2px rgba(59,130,196,.08); }
.pr-alert-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.pr-ah-main { min-width: 0; }
.pr-ah-title { display: flex; align-items: center; gap: 9px; }
.pr-ah-title i { font-size: 20px; color: #17171A; }
.pr-ah-title b { font-size: 17px; font-weight: 800; color: #17171A; letter-spacing: -.01em; }
.pr-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: #E5383B; color: #fff; font-size: 12px; font-weight: 800; }
.dr-alert .pr-badge { background: #3B82C4; }
.pr-ah-sub { margin-top: 5px; font-size: 12.5px; color: #6E6A62; }
.pr-alert-list { display: flex; flex-direction: column; gap: 10px; }
.pr-alert-row { background: #fff; border: 1px solid #F0E6D2; border-radius: 14px; padding: 0 12px 0 0; gap: 10px; box-shadow: 0 1px 2px rgba(23,23,26,.03); transition: border-color .12s, box-shadow .12s; }
.pr-alert-row:hover { border-color: #E4D2AE; box-shadow: 0 4px 14px rgba(190,130,30,.10); }
.dr-alert .pr-alert-row { border-color: #DCE7F5; }
.pr-alert-main { flex-direction: row; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 8px 14px 18px; background: transparent !important; border: 0 !important; border-radius: 14px; }
.pr-l { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
.pr-t b { font-size: 14px; font-weight: 700; }
.pr-open { flex: none; font-size: 13px; font-weight: 700; color: #4F46E5; }
.pr-alert-main:hover .pr-open { text-decoration: underline; }
.pr-chip { padding: 4px 11px; font-size: 12px; font-weight: 700; }
.pr-chip.warn, .pr-chip.bad { background: #FDE6E8; color: #C42B35; }
.pr-chip.info { background: #E3EEFC; color: #1F4E96; }
.pr-chip.mute { background: #ECEBE7; color: #55524B; }
.pr-accept, .pr-accept-all { border-radius: 999px; padding: 8px 15px; }
.pr-alert-more { color: #6E6A62; }
details.af-bar { border-radius: 14px; border-color: #F0E6D2; }
@media (max-width: 760px) { .pr-alert { padding: 16px; } .pr-alert-main { padding: 12px; } .pr-alert-row { flex-wrap: wrap; padding-bottom: 8px; } }
.pr-alert-main .pr-open { color: #4F46E5 !important; }
.pr-alert-main .pr-chip i { color: inherit !important; }

/* Title and the problems on ONE line (wraps only when it really does not fit), the whole row opens the card */
.pr-l { flex-direction: row !important; flex-wrap: wrap; align-items: center !important; gap: 8px 14px !important; }
.pr-l .pr-t { flex: 0 1 auto; max-width: 100%; }
.pr-l .pr-t b { white-space: normal; }
.pr-chips { gap: 6px; }
.pr-alert-main { padding: 12px 8px 12px 18px; cursor: pointer; width: 100%; text-align: left; }
.pr-alert-list { gap: 8px; }

/* Hidden channels (collapsed list under the channels) */
.hid-box { margin-top: 12px; border: 1px dashed #D9D9DE; border-radius: 14px; background: rgba(255,255,255,.5); overflow: hidden; }
.hid-box summary { list-style: none; display: flex; align-items: center; gap: 8px; padding: 12px 16px; cursor: pointer; font-size: 13px; font-weight: 700; color: #6E6A62; }
.hid-box summary::-webkit-details-marker { display: none; }
.hid-box summary .ph-caret-down { margin-left: auto; transition: transform .15s; }
.hid-box[open] summary .ph-caret-down { transform: rotate(180deg); }
.hid-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; border-top: 1px solid #EFEFF2; font-size: 14px; }

/* Channel settings modal (admins) */
#chset-modal.tm-modal { width: min(480px, calc(100vw - 32px)); max-height: calc(100vh - 48px); flex-direction: column; padding: 0; overflow: hidden; background: #fff; border: 1px solid #E1E1E5; border-radius: 20px; box-shadow: 0 1px 2px rgba(18,18,20,.06), 0 28px 70px -20px rgba(18,18,20,.32); color: #19191C; }
#chset-modal .cs-head { display: flex; align-items: center; gap: 14px; padding: 22px 24px 18px; border-bottom: 1px solid #EDEDEF; }
#chset-modal .cs-ico { width: 42px; height: 42px; border-radius: 13px; background: #18181B; color: #fff; display: grid; place-items: center; font-size: 21px; flex: none; }
#chset-modal .cs-ttl { flex: 1; min-width: 0; }
#chset-modal .cs-ttl h2 { margin: 0; font-size: 18px; font-weight: 700; color: #19191C; }
#chset-modal .cs-ttl p { margin: 4px 0 0; display: flex; align-items: center; gap: 6px; font-size: 13px; color: #5B5B69; }
#chset-modal .cs-ttl p em { font-style: normal; font-size: 11px; font-weight: 600; color: #7C7C8B; background: #F2F2F4; border-radius: 999px; padding: 2px 8px; margin-left: 2px; }
#chset-modal .cs-body { padding: 18px 24px 8px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
#chset-modal .cs-sec { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8A8A98; margin-bottom: 2px; }
#chset-modal .cs-row { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid #E8E8EB; border-radius: 14px; background: #FAFAFB; cursor: pointer; transition: border-color .15s, background .15s; }
#chset-modal .cs-row:hover { border-color: #CFCFD6; background: #fff; }
#chset-modal .cs-ri { width: 36px; height: 36px; border-radius: 11px; background: #fff; border: 1px solid #E8E8EB; display: grid; place-items: center; font-size: 18px; color: #3A3A44; flex: none; }
#chset-modal .cs-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
#chset-modal .cs-tx b { font-size: 14px; font-weight: 650; color: #19191C; }
#chset-modal .cs-tx small { font-size: 12.5px; line-height: 1.4; color: #7C7C8B; }
#chset-modal .cs-sw { position: relative; width: 42px; height: 24px; flex: none; }
#chset-modal .cs-sw input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
#chset-modal .cs-sw i { position: absolute; inset: 0; border-radius: 999px; background: #D4D4DA; transition: background .18s; }
#chset-modal .cs-sw i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .18s; }
#chset-modal .cs-sw input:checked + i { background: #18181B; }
#chset-modal .cs-sw input:checked + i::after { transform: translateX(18px); }
#chset-modal .cs-sw input:focus-visible + i { box-shadow: 0 0 0 3px rgba(24,24,27,.15); }
#chset-modal .cs-note { display: flex; gap: 8px; align-items: flex-start; margin: 4px 0 8px; font-size: 12.5px; line-height: 1.5; color: #7C7C8B; }
#chset-modal .cs-note i { font-size: 15px; margin-top: 1px; flex: none; }
#chset-modal .cs-foot { display: flex; justify-content: flex-end; padding: 14px 24px; border-top: 1px solid #EDEDEF; }

/* Stage columns: coloured line with the days on it (like the agency dashboard) */
#main-app #view-pipeline .kanban-column[data-status] { position: relative; }
#main-app #view-pipeline .kanban-column[data-status] .col-line { position: absolute; top: 12px; left: 14px; right: 14px; height: 3px; border-radius: 3px; background: var(--st, #8F8F9C); pointer-events: none; z-index: 1; }
#main-app #view-pipeline .kanban-column[data-status] .col-line em { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-style: normal; font-size: 11px; font-weight: 600; line-height: 1; color: #2A2A31; background: #fff; border: 1px solid #E1E1E5; border-radius: 999px; padding: 4px 10px; white-space: nowrap; box-shadow: 0 1px 2px rgba(18,18,20,.05); }
#main-app #view-pipeline .kanban-column[data-status][data-pair] { overflow: visible; }
#main-app #view-pipeline .kanban-column[data-status][data-pair="start"] { z-index: 2; }
#main-app #view-pipeline .kanban-column[data-status][data-pair="start"] .col-line { right: -20px; border-radius: 3px 0 0 3px; background: #D9A54A; z-index: 3; }
#main-app #view-pipeline .kanban-column[data-status][data-pair="start"] .col-line em { left: auto; right: 12px; transform: translate(50%, -50%); background: #FBF1DC; border-color: #EBCF97; color: #8A6414; }
#main-app #view-pipeline .kanban-column[data-status][data-pair="end"] .col-line { left: -4px; border-radius: 0 3px 3px 0; background: #D9A54A; }
@media (max-width: 1500px) { #main-app #view-pipeline .kanban-column[data-status][data-pair="start"] .col-line em { right: 14px; } }
#main-app #view-pipeline .kanban-column[data-status] .column-header { padding-top: 28px !important; }
#main-app #view-pipeline .kanban-column[data-status] .column-header:has(.col-limit) { min-height: 0; }

/* Deadlines & defaults modal */
#stage-modal.sd-modal { width: min(480px, calc(100vw - 32px)); }
#stage-modal .sd-every { padding-top: 4px; }
#stage-modal .sd-every .sd-name { font-size: 15px; font-weight: 700; }
#stage-modal .sd-every .sd-input input { width: 72px; font-size: 16px; font-weight: 600; }
#stage-modal .sd-per:empty { display: none; }
#stage-modal .sd-per { margin: 4px 0 2px; }
#stage-modal .sd-per span { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: #1E7A4C; background: #E8F5EE; border-radius: 10px; padding: 7px 12px; }
#stage-modal .sd-per b { font-weight: 800; }
#stage-modal .sd-group { margin: 6px 0; padding: 6px 12px 6px 14px; border: 1px solid #E9E9EB; border-left: 4px solid #D9A54A; border-radius: 12px; background: #FAFAFC; }
#stage-modal .sd-group .sd-row { padding: 7px 0; }
#stage-modal .sd-group .sd-row:last-of-type { border-bottom: none; }
#stage-modal .sd-group .sd-total { display: flex; justify-content: flex-end; gap: 5px; padding: 2px 0 3px; font-size: 11.5px; color: #7C7C8B; }
#stage-modal .sd-group .sd-total:empty { display: none; }
#stage-modal .sd-group .sd-total b { color: #19191C; font-weight: 700; }
#stage-modal .sd-check { display: flex; align-items: flex-start; gap: 10px; margin: 6px 0 10px; padding: 12px 14px; border: 1px solid #E8E8EB; border-radius: 12px; background: #FAFAFB; font-size: 13px; line-height: 1.4; color: #3A3A44; cursor: pointer; }
#stage-modal .sd-check input { accent-color: #17171A; margin-top: 2px; }

#chset-modal .cs-doc { display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px; border: 1px solid #E8E8EB; border-radius: 14px; background: #FAFAFB; }
#chset-modal .cs-doc .cs-tx { gap: 7px; }
#chset-modal .cs-doc input { width: 100%; padding: 9px 12px; font-size: 13px; border: 1px solid #DCDCE0; border-radius: 10px; background: #fff; color: #19191C; font-family: inherit; }
#chset-modal .cs-doc input:focus { outline: none; border-color: #18181B; box-shadow: 0 0 0 3px rgba(24,24,27,.08); }

/* Due today (Overview) */
#ov-upcoming .ov-item.is-late .ov-date { background: #FDECEC; color: #B42318; }
#ov-upcoming .ov-item.is-late .ov-date span { color: #B42318; }
#ov-upcoming .ov-late { font-style: normal; font-weight: 700; color: #B42318; }
#ov-upcoming .ov-due-empty { display: flex; flex-direction: column; gap: 4px; line-height: 1.45; }
#ov-upcoming .ov-due-empty b { font-weight: 700; color: #19191C; margin-bottom: 10px; }
#ov-upcoming .ov-due-empty span { color: #3A3A44; }
#ov-upcoming .ov-due-empty small { font-size: 12px; color: #8A8A98; }

/* Due today: empty state */
#ov-upcoming .ov-due-empty { display: flex; flex-direction: column; gap: 10px; padding: 2px 0; }
#ov-upcoming .ov-due-ok { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: 14px; background: #EAF6EF; color: #1E7A4C; font-weight: 700; font-size: 14px; }
#ov-upcoming .ov-due-ok i { font-size: 20px; }
#ov-upcoming .ov-next-label { margin: 6px 2px 0; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8A8A98; }

/* Video window: one block per task with the person AND the numbers */
#details-modal .pn-card { box-sizing: border-box; width: 100%; border: 1px dashed #CFCFD6; border-radius: 16px; padding: 14px; background: #FBFBFC; display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
#details-modal .pn-head { display: flex; align-items: flex-start; gap: 6px; font-size: 12px; font-weight: 700; line-height: 1.35; color: #7C7C8B; }
#details-modal .pn-row { background: var(--k-bg); border: 1px solid var(--k-bd); border-left: 4px solid var(--k-ac); border-radius: 14px; padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 8px; }
#details-modal .pn-top { display: flex; align-items: center; gap: 8px; }
#details-modal .pn-top b { flex: none; font-size: 14px; font-weight: 800; color: var(--k-dk); min-width: 74px; }
#details-modal .pn-who { flex: 1; min-width: 0; padding: 9px 10px; font-size: 14px; border: 1px solid var(--k-bd); border-radius: 12px; background: #fff; color: #19191C; font-family: inherit; }
#details-modal .pn-who:disabled { background: #F5F5F6; color: #55555F; }
#details-modal .pn-fixedwho { flex: 1; text-align: right; font-size: 13px; color: #55555F; }
#details-modal .pn-x { flex: none; padding: 3px 10px; border: 1px solid var(--k-bd); border-radius: 10px; background: #fff; color: #7C7C8B; cursor: pointer; font-size: 15px; line-height: 1; }
#details-modal .pn-x:hover { color: #B42318; border-color: #F0B8B2; }
#details-modal .pn-line { display: flex; align-items: center; gap: 10px; }
#details-modal .pn-line > span { flex: none; min-width: 74px; font-size: 12.5px; font-weight: 700; color: var(--k-dk); }
#details-modal .pn-amt { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; }
#details-modal .pn-amt .pr-cp-amt { margin: 0; flex: 1; min-width: 0; padding: 9px 12px; font-size: 14px; border: 1px solid var(--k-bd); border-radius: 12px; background: #fff; text-align: left; }
#details-modal .pn-amt .pr-cp-amt:disabled { background: #F5F5F6; }
#details-modal .pn-amt .pr-cp-more { flex: none; margin: 0; width: 36px; height: 36px; border: 1px solid var(--k-bd); border-radius: 12px; background: #fff; color: var(--k-ac); }
#details-modal .pn-same { font-size: 12px; color: #7C7C8B; }
#details-modal .pn-none { font-size: 13px; color: #7C7C8B; }
#details-modal .pn-card .asg-add { align-self: flex-start; }