/* Contour Studio: scoped styles, designed to coexist with site.css and shared-nav.css */
body.contour-page{--cs-bg:#14191c;--cs-panel:#20272b;--cs-border:rgba(255,255,255,.11);--cs-orange:#ff5a3c;margin:0;min-height:100vh;background:#14191c;color:rgba(255,255,255,.94);font:14px Inter,Arial,sans-serif;display:flex;flex-direction:column}
body.contour-page *,body.contour-page *::before,body.contour-page *::after{box-sizing:border-box}
body.contour-page .cs-header{flex:0 0 auto;min-height:84px;padding:14px 22px;background:#20272b;border-bottom:1px solid rgba(255,255,255,.11);display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
body.contour-page .cs-header h1{font-size:24px;margin:0 0 4px;font-weight:800}body.contour-page .cs-header h1 span{color:#ff8069}body.contour-page .cs-header small{font-size:12px;color:rgba(255,255,255,.66)}body.contour-page .cs-header-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
body.contour-page .cs-layout{width:100%;max-width:none;flex:1 1 auto;min-height:620px;height:calc(100vh - 170px);display:grid;grid-template-columns:minmax(265px,286px) minmax(0,1fr) minmax(265px,300px);gap:12px;padding:12px;align-items:stretch;overflow:hidden;margin:0}
body.contour-page .cs-panel{min-width:0;min-height:0;overflow-y:auto;overflow-x:hidden;background:var(--cs-panel);border:1px solid var(--cs-border);border-radius:12px;padding:16px;scrollbar-width:thin}body.contour-page .cs-panel h2{font-size:16px;margin:0 0 17px}body.contour-page .cs-panel h3{font-size:13px;margin:20px 0 10px;color:rgba(255,255,255,.88)}
body.contour-page .hint{font-size:12px;line-height:1.5;color:rgba(255,255,255,.66)}body.contour-page .upload{display:flex;min-height:70px;flex-direction:column;align-items:center;justify-content:center;gap:5px;border:1px dashed rgba(255,255,255,.22);border-radius:10px;background:rgba(255,255,255,.035);color:rgba(255,255,255,.9);cursor:pointer;font-weight:600;text-align:center;padding:10px}body.contour-page .upload small{color:rgba(255,255,255,.55);font-size:11px;font-weight:400}
body.contour-page .field{margin:15px 0}body.contour-page .field label{display:flex;justify-content:space-between;margin-bottom:8px;color:rgba(255,255,255,.78);font-size:12px}body.contour-page output{color:#ff8069}body.contour-page input[type=range]{width:100%;accent-color:#ff5a3c;padding:0;box-shadow:none}body.contour-page input[type=checkbox]{width:auto;accent-color:#ff8069;box-shadow:none}body.contour-page input[type=color]{width:100%;height:36px;padding:2px;background:transparent;cursor:pointer}
body.contour-page .cs-panel select,body.contour-page .cs-panel textarea,body.contour-page .cs-panel input:not([type=range]):not([type=checkbox]):not([type=color]):not([type=file]){width:100%;min-width:0;border:1px solid rgba(255,255,255,.12);background:#20272b;color:#fff;padding:10px;border-radius:7px;font:inherit;box-shadow:none}body.contour-page .cs-panel textarea{resize:vertical;min-height:85px}body.contour-page .check{display:flex;align-items:center;gap:8px;margin:13px 0;color:rgba(255,255,255,.72);font-size:12px}
body.contour-page .cs-layout button,body.contour-page .cs-header-actions button{border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.045);color:rgba(255,255,255,.92);padding:10px 11px;border-radius:7px;cursor:pointer;font:inherit;font-size:12px;line-height:1.3;white-space:normal;min-height:34px;box-shadow:none;transform:none}body.contour-page .cs-layout button:hover,body.contour-page .cs-header-actions button:hover{background:rgba(255,255,255,.10)}body.contour-page .cs-layout button.primary,body.contour-page .cs-header-actions button.primary{background:#ff5a3c;color:#fff;border-color:#ff5a3c;font-weight:700}body.contour-page .cs-layout button.primary:hover{background:#ff8069}body.contour-page .cs-layout button.active{background:#ff5a3c;color:#fff;border-color:#ff5a3c}body.contour-page .wide{width:100%}body.contour-page .split{display:flex;gap:7px;align-items:stretch;margin:9px 0}body.contour-page .split>button{flex:1 1 0;min-width:0}
body.contour-page .status{margin-top:14px;border-radius:8px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.10);color:rgba(255,255,255,.72);padding:10px;font-size:11px;line-height:1.5;overflow-wrap:anywhere}
body.contour-page .cs-selector-panel{margin:14px 0;padding:12px;border:1px solid #4b5056;border-radius:12px;background:#252a30}body.contour-page .cs-selector-panel h3{margin:0 0 7px;font-size:15px}body.contour-page .cs-selector-panel .hint{margin:6px 0 12px}body.contour-page .cs-brush-label{display:flex;align-items:center;gap:8px;margin:11px 0 6px;font-size:12px;color:rgba(255,255,255,.82)}
body.contour-page .cs-layer-list{display:flex;flex-direction:column;gap:6px;margin:10px 0;max-height:270px;overflow-y:auto;overflow-x:hidden}body.contour-page .cs-layer-row{display:flex;align-items:center;gap:6px;padding:6px;border:1px solid rgba(255,255,255,.10);border-radius:8px;background:rgba(255,255,255,.035);min-width:0}body.contour-page .cs-layer-row.is-active{border-color:#ff5a3c;background:rgba(255,90,60,.10)}body.contour-page .cs-layer-row button{flex:1;min-width:0;text-align:left;padding:7px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}body.contour-page .cs-layer-row input{flex:none}
body.contour-page .cs-workspace{display:flex;flex-direction:column;min-width:0;min-height:0;border:1px solid rgba(255,255,255,.11);border-radius:12px;overflow:hidden;background:#14191c}body.contour-page .cs-toolbar{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 13px;background:#20272b;font-size:12px;color:rgba(255,255,255,.72);flex-wrap:wrap}body.contour-page .cs-toolbar button{padding:6px 10px;min-height:29px}
body.contour-page .cs-stage{position:relative;flex:1 1 auto;min-height:340px;min-width:0;display:flex;align-items:center;justify-content:center;overflow:hidden;background-color:#14191c;background-image:linear-gradient(45deg,#20272b 25%,transparent 25%),linear-gradient(-45deg,#20272b 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#20272b 75%),linear-gradient(-45deg,transparent 75%,#20272b 75%);background-size:24px 24px;background-position:0 0,0 12px,12px -12px,-12px 0}
body.contour-page #artboard{display:block;width:min(100%,1000px);max-width:100%;max-height:100%;height:auto;aspect-ratio:10/7;box-shadow:0 10px 35px #0007;touch-action:none;user-select:none;flex:none}body.contour-page .empty-state{position:absolute;pointer-events:none;text-align:center;color:rgba(255,255,255,.45);display:flex;flex-direction:column;gap:10px;padding:20px;max-width:90%}body.contour-page .empty-state strong{font-size:18px;color:rgba(255,255,255,.58)}body.contour-page .empty-state span{font-size:12px}body.contour-page .cs-footer{flex:0 0 auto;display:flex;justify-content:space-between;gap:10px;padding:11px;background:#20272b;color:rgba(255,255,255,.66);font-size:11px;flex-wrap:wrap}
body.contour-page #nodes circle{fill:#ff5a3c;stroke:#fff;stroke-width:1.3;cursor:move}body.contour-page #nodes circle:hover{fill:#fff;stroke:#ff5a3c}body.contour-page #selectionBox{fill:rgba(255,90,60,.12);stroke:#ff5a3c;stroke-width:2.5;stroke-dasharray:10 6}body.contour-page #artboard.cs-selecting{cursor:crosshair}body.contour-page #brushSurface{pointer-events:all}body.contour-page #maskPaintCanvas{touch-action:none;cursor:none!important;user-select:none}body.contour-page #artboard.cs-brushing #nodes{pointer-events:none}
body.contour-page .cs-processing{position:absolute;inset:0;display:none;align-items:center;justify-content:center;flex-direction:column;gap:16px;z-index:30;background:rgba(20,25,28,.20);backdrop-filter:blur(10px);color:#fff;font-size:clamp(20px,3vw,30px);font-weight:800;text-shadow:0 1px 12px #fffe;pointer-events:all}body.contour-page .cs-processing.is-active{display:flex}body.contour-page .cs-spinner{width:38px;height:38px;border:4px solid #ff5a3c44;border-top-color:#ff5a3c;border-radius:50%;animation:cs-spin .8s linear infinite}@keyframes cs-spin{to{transform:rotate(360deg)}}body.contour-page #photoOpacity:disabled{opacity:.45;cursor:not-allowed}body.contour-page .cs-auth-status{color:rgba(255,255,255,.72);font-size:12px}
@media(max-width:1200px){body.contour-page .cs-layout{grid-template-columns:260px minmax(0,1fr);height:auto;min-height:700px;overflow:visible}body.contour-page .cs-workspace{min-height:650px}body.contour-page .cs-panel.right{grid-column:1/-1;max-height:none}body.contour-page .cs-panel:not(.right){max-height:760px}}
@media(max-width:700px){body.contour-page .cs-layout{display:flex;flex-direction:column;min-height:0}body.contour-page .cs-workspace{min-height:480px}body.contour-page .cs-panel:not(.right){max-height:none}body.contour-page .cs-header{align-items:flex-start}body.contour-page .cs-toolbar{justify-content:flex-start}}

/* Four-tool mask editor */
body.contour-page .cs-tool-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin:10px 0}
body.contour-page .cs-tool-grid .cs-tool{min-width:0;padding:11px 7px;border:1px solid rgba(255,255,255,.10);border-radius:9px;background:rgba(255,255,255,.035);color:rgba(255,255,255,.94);font-weight:700;font-size:12px;white-space:normal}
body.contour-page .cs-tool-grid .cs-tool:hover{border-color:#ff8069}
body.contour-page .cs-tool-grid .cs-tool.active{background:rgba(255,90,60,.14);border-color:#ff5a3c;color:white;box-shadow:inset 0 0 0 1px #ff5a3c}
body.contour-page #maskToolHelp{min-height:34px}
body.contour-page #finishToolPath,body.contour-page #cancelToolPath{font-size:12px}

/* Layer name editing and full-canvas processing veil */
body.contour-page .cs-layer-row .cs-layer-name-input{flex:1 1 0;width:0!important;min-width:0!important;padding:7px!important;border:1px solid #ff5a3c!important;outline:2px solid #ff5a3c55;background:#20272b;color:#fff}
body.contour-page .cs-layer-row .cs-layer-name{cursor:text}
body.contour-page .cs-stage{isolation:isolate}
body.contour-page .cs-processing{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;min-width:100%!important;min-height:100%!important;z-index:100!important;background:rgba(20,25,28,.34)!important;backdrop-filter:blur(12px)!important;-webkit-backdrop-filter:blur(12px)!important;color:#fff!important;text-shadow:0 2px 12px #000!important;}

/* Processing veil follows the visible, scrollable image viewport at every zoom. */
body.contour-page #processingOverlay{position:fixed!important;inset:auto!important;min-width:0!important;min-height:0!important;margin:0!important;z-index:2147483000!important;border-radius:0;overflow:hidden;}

/* Processing overlay: clipped to centre workspace, never full screen. */
body.contour-page .cs-workspace{position:relative!important;isolation:isolate;}
body.contour-page #processingOverlay{position:absolute!important;inset:auto!important;min-width:0!important;min-height:0!important;margin:0!important;z-index:500!important;box-sizing:border-box!important;border-radius:0;overflow:hidden;}
/* Per-layer identification colors: the name, row accent, and extraction mask share one color. */
body.contour-page .credit-note{margin:4px 0 12px;color:rgba(255,255,255,.58);font-size:11px;line-height:1.4;text-align:center}
body.contour-page .cs-layer-row{border-left:3px solid var(--layer-color,rgba(255,255,255,.2))}
body.contour-page .cs-layer-row.is-active{border-color:var(--layer-color,#ff5a3c);background:color-mix(in srgb,var(--layer-color,#ff5a3c) 12%,#20272b)}
body.contour-page .cs-layer-row .cs-layer-name{background:transparent!important;border-color:transparent!important}
body.contour-page .cs-layer-row .cs-layer-name:hover{background:rgba(255,255,255,.055)!important}