.project-list-heading{display:flex;align-items:center;justify-content:space-between;margin:34px 0 20px}.primary.compact{width:auto;padding:0 18px;min-height:39px}.projects-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;min-height:400px;align-content:start}.project-card{position:relative;background:white;border:1px solid #e5ebf4;border-radius:13px;padding:25px;text-align:left;transition:.2s;min-height:220px}.project-card:hover{border-color:#8cacf4;transform:translateY(-3px);box-shadow:0 8px 24px #3468ed0c}.project-folder{display:grid;place-items:center;width:46px;height:46px;background:#eef4ff;color:#678ee4;font-size:32px;border-radius:12px;margin-bottom:19px}.project-card strong{display:block;font-size:16px;font-weight:600;color:#324865;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.project-card p{color:#98a5b9;font-size:11px;margin:12px 0}.project-card p span{margin:0 8px}.project-card small{font-size:9px;color:#b0b9c9}.project-open{position:absolute;right:22px;bottom:26px;color:#7799dd;font-size:10px}.project-toolbar{display:flex;align-items:center;gap:15px;margin:0 0 22px}.project-toolbar>span{color:#99a6ba;font-size:11px}.project-toolbar>button:last-child{margin-left:auto}.resources-panel{padding:24px;margin-bottom:22px}.resources-panel .section-heading{margin-bottom:18px}.resources-panel .section-heading>div>span:last-child:not(.step){font-size:10px;color:#9aa7bb}.resource-selection{display:flex;gap:17px;font-size:10px;color:#8b9bb3}.resource-selection input{accent-color:var(--blue);vertical-align:middle}.resource-selection label{cursor:pointer}.resources-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px}.resource-card{border:1px solid #e7ecf5;border-radius:9px;overflow:hidden;min-width:0}.resource-card.checked{border-color:#779dec;box-shadow:0 0 0 1px #779dec}.resource-visual{background:linear-gradient(140deg,#edf3ff,#e4ebf9);height:125px;position:relative;display:grid;place-items:center}.resource-visual label{position:absolute;left:9px;top:9px;cursor:pointer}.resource-visual input{accent-color:var(--blue)}.resource-visual>.resource-preview{background:#fff;border:0;border-radius:50%;width:41px;height:41px;color:#5b80d5;font-size:26px;box-shadow:0 3px 12px #3468ed15}.resource-visual>span{position:absolute;bottom:9px;right:10px;font-size:9px;background:#7c91b5b0;color:white;border-radius:3px;padding:3px 5px}.resource-caption{padding:12px}.resource-caption strong{display:block;font-size:11px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#596c88}.resource-caption small{display:block;font-size:9px;color:#9ca9bd;margin:7px 0 11px}.resource-caption button{color:#648ae1;font-size:10px}.resources-empty{grid-column:1/-1;text-align:center;padding:34px 15px;background:#f8faff;color:#a2aec1;font-size:12px;border:1px dashed #dce5f5;border-radius:8px}.resources-panel>.hint{font-size:10px;margin-bottom:0}.file-list{margin-bottom:12px}#upload-resources{min-height:37px;font-size:11px}#project-name{width:100%;border:1px solid #dce4f1;border-radius:7px;padding:12px;margin-bottom:22px;font:inherit;font-size:13px}#project-form>.field-label{margin-top:20px}.tasks-panel table{min-width:1050px}.task-table-wrap{overflow-x:auto}.task-compare{display:block;border:0;background:#eef3ff;border-radius:4px;color:#517bdd;font-size:10px;padding:5px 8px;margin-top:6px;white-space:nowrap}.task-table-wrap td small{white-space:normal}.task-table-wrap td{padding:16px}.task-table-wrap th{padding-left:16px;padding-right:16px}.preview-dialog{max-width:1300px;width:calc(100vw - 50px);padding:24px;background:#f8faff}.preview-dialog .dialog-header p{font-size:11px;color:#8a9ab2;margin:8px 0 0}.preview-screens{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:24px}.preview-screens.single{grid-template-columns:minmax(0,1fr);max-width:850px;margin-left:auto;margin-right:auto}.preview-screens>div{min-width:0;border:1px solid #dfe7f4;border-radius:10px;overflow:hidden;background:#101a2b}.preview-screens video{display:block;width:100%;height:clamp(180px,36vw,470px);object-fit:contain;background:#101a2b}.screen-label{background:#fff;color:#8291a9;font-size:11px;padding:11px 15px}.screen-label.enhanced{color:#5482e5}.player-controls{display:flex;align-items:center;gap:12px;margin-top:20px}.player-controls>input[type=range]{flex:1;min-width:80px;accent-color:var(--blue)}.player-controls>select{width:77px;padding:8px}.player-controls>span{font-size:11px;color:#8392a9;min-width:85px;white-space:nowrap}.player-controls>label{white-space:nowrap;font-size:10px;color:#7e8fa8}.player-controls input[type=checkbox]{accent-color:var(--blue)}.preview-dialog>.hint{margin-bottom:0;font-size:10px}.project-card:focus-visible{outline:3px solid #95b1ef;outline-offset:3px}
@media(max-width:1100px){.projects-grid{grid-template-columns:repeat(2,1fr)}.resources-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:780px){.projects-grid{grid-template-columns:1fr;gap:14px}.project-card{min-height:195px}.resources-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.resources-panel{padding:18px}.resource-visual{height:105px}.resource-selection{gap:8px}.preview-dialog{width:calc(100vw - 20px);padding:16px}.preview-screens{gap:8px}.preview-screens video{height:210px}.player-controls{flex-wrap:wrap;gap:9px}.player-controls>input[type=range]{order:2;flex-basis:100%}.player-controls .secondary{padding:8px}.project-toolbar>span{font-size:10px}.project-toolbar{gap:9px}}

.project-pages{display:flex;gap:24px;border-bottom:1px solid #e1e8f3;margin:0 0 25px}.project-pages a{font-size:13px;color:#91a0b6;padding:0 5px 14px;cursor:pointer;border-bottom:2px solid transparent}.project-pages a.active{color:var(--blue);border-color:var(--blue);font-weight:500}.resource-upload-layout{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(240px,1fr);gap:22px;align-items:start;margin-bottom:24px}.upload-guide{padding:28px}.upload-guide h2{margin:16px 0}.upload-guide p,.upload-guide li{font-size:12px;color:#8c9bb0;line-height:2}.upload-guide ol{padding-left:18px;margin:22px 0}.upload-guide .secondary{color:var(--blue);padding:11px 15px}.task-create-layout{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:22px;align-items:start}.task-picker .resources-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.task-picker .section-heading{gap:10px}.task-picker .resource-selection{gap:9px;white-space:nowrap}#resource-library .resource-selection,#resource-library .resource-visual label{display:none}#resource-library .resource-card.checked{border-color:#e7ecf5;box-shadow:none}.task-picker{margin-bottom:0}#resources-page .resources-panel>.section-heading .step{display:none}
@media(max-width:1000px){.task-create-layout{grid-template-columns:1fr}.task-picker .resources-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.resource-upload-layout{grid-template-columns:1.4fr 1fr}}
@media(max-width:780px){.resource-upload-layout{grid-template-columns:1fr}.upload-guide{padding:20px}.task-picker .resources-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.project-pages{gap:20px;margin-bottom:20px}}

#task-list-page .tasks-panel{margin-top:0}.project-pages{flex-wrap:wrap;row-gap:0}

/* Large comparison workspace, with shared zoom and pan. */
.preview-dialog{width:calc(100vw - 24px);max-width:none;height:calc(100dvh - 24px);max-height:calc(100dvh - 24px);padding:18px;box-sizing:border-box;overflow:hidden}
.preview-dialog[open]{display:flex;flex-direction:column;gap:14px}
:root:fullscreen .preview-dialog{width:100vw;height:100dvh;max-height:none;border:0;border-radius:0}
.preview-dialog .dialog-header{flex:0 0 auto;gap:16px;min-width:0}
.preview-dialog .dialog-header>div:first-child{min-width:0}
.preview-dialog h2{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.preview-window-actions{display:flex;align-items:center;gap:16px;flex-shrink:0}
.preview-dialog .dialog-header #fullscreen-preview{font-size:13px;border:1px solid #dce4f1;background:white;border-radius:6px;padding:8px 14px;white-space:nowrap}
.preview-screens,.preview-screens.single{flex:1;min-height:0;width:100%;max-width:none;margin:0;gap:12px}
.preview-screens>div{display:flex;flex-direction:column;min-height:0}
.preview-screens>div[hidden]{display:none}
.screen-label{flex:0 0 auto;position:relative;z-index:1;background:#172438}
.video-viewport{flex:1;min-height:0;overflow:hidden;position:relative;display:flex;align-items:center;justify-content:center}
.preview-screens video{width:100%;height:100%;min-height:0;object-fit:contain;flex:none}
.preview-screens.zoomed .video-viewport{cursor:grab;touch-action:none}
.preview-screens.zoomed .video-viewport:active{cursor:grabbing}
.player-controls{flex:0 0 auto;margin:0;flex-wrap:wrap}
#preview-message{flex:0 0 auto;margin:0;font-size:11px}
.zoom-hint{color:#8a9ab2;font-size:11px}
.task-delete,.task-restore{display:block;border:0;background:none;font-size:11px;padding:6px 0;white-space:nowrap;color:#c46c64}
.task-restore{color:#517bdd}
@media(max-width:780px){.preview-dialog{padding:12px;width:calc(100vw - 12px);height:calc(100dvh - 12px);max-height:calc(100dvh - 12px)}.preview-dialog[open]{gap:10px}.preview-screens{gap:6px}.zoom-hint{display:none}.preview-dialog h2{font-size:15px}.preview-dialog .dialog-header p{font-size:10px}.task-actions{flex-wrap:wrap}}

/* Compact task actions and filter tabs. */
.task-row-actions{display:flex;align-items:center;gap:8px;white-space:nowrap}
.task-row-actions button{display:inline-flex;align-items:center;justify-content:center;margin:0;padding:6px 9px;min-height:30px;font-size:11px;border-radius:5px}
.task-row-actions .task-download{background:#f3f6fc;color:#5976a7}
.task-row-actions .task-compare{background:#edf2ff;color:#416fe0}
.task-row-actions .task-delete{color:#c46c64;background:transparent}
.task-row-actions .task-delete:hover{background:#fff0ee}
.task-stats{gap:8px;align-items:center;flex-wrap:wrap;padding-bottom:14px}
.status-tab{display:inline-flex;align-items:center;gap:7px;border:1px solid transparent;background:transparent;color:#8190a7;padding:8px 12px;border-radius:6px;font-size:12px;white-space:nowrap}
.status-tab:hover{background:#f5f7fc}.status-tab.active{background:#edf3ff;border-color:#dce7ff;color:#416fe0}
.status-tab:focus-visible{outline:2px solid #8cabee;outline-offset:2px}
.stat-dot.red{background:#d98880}.status-tab b{font-size:12px;color:inherit}.task-stats .concurrency{margin-left:auto}
/* Small tiles and pagination for large resource libraries. */
.resources-grid.compact-grid,.task-picker .resources-grid.compact-grid{grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px;align-content:start}
.resource-tools{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 16px}
.resource-tools input{width:260px;max-width:75%;border:1px solid #e1e7f1;border-radius:6px;background:#fbfcff;padding:9px 12px;font-size:12px;color:#526581}
.resource-tools>span{font-size:11px;color:#97a4b8;white-space:nowrap}
.compact-grid .resource-card{border-radius:8px;transition:border-color .15s,box-shadow .15s}
.compact-grid .resource-card:hover{border-color:#95afea;box-shadow:0 3px 10px #3468ed0c}
.compact-grid .resource-visual{height:auto;aspect-ratio:1.55;min-height:65px}
.compact-grid .resource-visual>.resource-preview{width:29px;height:29px;font-size:20px;cursor:pointer}
.compact-grid .resource-visual label{top:5px;left:5px}
.compact-grid .resource-visual>span{bottom:5px;right:5px;font-size:9px;padding:2px 4px}
.compact-grid .resource-caption{padding:9px 8px}
.compact-grid .resource-caption strong{font-size:11px}.compact-grid .resource-caption small{margin:5px 0 0;font-size:10px}
.resource-pagination{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:18px;color:#8c9bb0;font-size:11px}
.resource-pagination>div{display:flex;align-items:center;gap:12px}.resource-pagination button:disabled{opacity:.4;cursor:default}
.task-picker .section-heading{flex-wrap:wrap}.task-picker .resource-selection{margin-left:auto}
@media(max-width:780px){.task-stats{gap:4px}.status-tab{padding:7px 8px;font-size:11px}.task-stats .concurrency{width:100%;margin-top:6px}.resource-pagination{flex-wrap:wrap}.resources-grid.compact-grid,.task-picker .resources-grid.compact-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}}

/* Readable, generously sized preview controls. */
.preview-dialog .player-controls{gap:12px}
.preview-dialog .player-controls button,.preview-dialog .dialog-header #fullscreen-preview{min-height:44px;padding:10px 20px;border:1px solid #3468ed;border-radius:8px;background:#3468ed;color:#fff;font-size:16px;font-weight:500;line-height:1.4;white-space:nowrap}
.preview-dialog .player-controls button:hover,.preview-dialog .dialog-header #fullscreen-preview:hover{background:#2859d9;border-color:#2859d9}
.preview-dialog button:focus-visible,.preview-dialog select:focus-visible{outline:3px solid #9cb9ff;outline-offset:3px}
.preview-dialog .player-controls>select{width:auto;min-width:96px;min-height:44px;padding:9px 12px;font-size:15px;color:#405675;border-radius:8px}
.preview-dialog .player-controls>span{font-size:14px;color:#63758e}
.preview-dialog .player-controls>label{display:flex;align-items:center;gap:7px;min-height:44px;font-size:15px;color:#526581}
.preview-dialog #preview-mute{width:18px;height:18px}
.preview-dialog #preview-seek{min-height:32px}
.preview-dialog .dialog-header p,.preview-dialog #preview-message{font-size:13px;color:#71819a}
.preview-dialog .screen-label{font-size:14px}
.preview-dialog #close-preview{display:grid;place-items:center;min-width:44px;min-height:44px;font-size:30px;border-radius:8px}
.preview-dialog #close-preview:hover{background:#eaf0fc}
@media(max-width:780px){.preview-dialog .player-controls{gap:8px}.preview-dialog .player-controls button,.preview-dialog .dialog-header #fullscreen-preview{padding:9px 14px;font-size:15px}.preview-dialog .player-controls>select{min-width:90px;font-size:14px}.preview-dialog .player-controls>.zoom-hint{display:none}.preview-dialog #preview-message{font-size:12px}}
