.zone-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 14px}.zone-toolbar span,.zone-toolbar small{font-size:11px;color:#93879e}.zone-toolbar small{display:block;margin-top:6px}.zone-toolbar button{font-size:11px}.zone-company{margin:0 0 22px}.zone-company>h3{font-size:15px;margin:12px 0;color:#62556e}.zone-company>h3 small{font-size:11px;font-weight:400;margin-left:8px;color:#998ca7}.zone-layout{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start}.zone-box{border:1px solid #d8cce5;border-radius:10px;background:#eee9f4;max-width:100%;min-width:280px;min-height:180px;overflow:auto;padding:12px}.zone-box.resizable{resize:both}.zone-title{height:auto;min-height:30px;border:0;gap:8px;margin-bottom:10px}.zone-title strong{font-size:13px}.zone-title small{margin-right:auto;color:#9a8ca7}.zone-title button{font-size:10px;padding:4px 6px}.zone-title[draggable=true]{cursor:grab}.zone-projects{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}.zone-projects .tile{min-height:108px}.zone-unassigned{width:100%;background:#f0f0f4;border:1px dashed #d7d5df;min-height:100px}.zone-unassigned .zone-projects{grid-template-columns:repeat(auto-fill,minmax(140px,180px))}.zone-empty{font-size:12px;color:#9b8ba7;grid-column:1/-1;padding:20px 5px}.zone-box.drop-over{outline:2px solid #a286bd;background:#e6dbf0}@media(max-width:650px){.zone-box{min-width:0;width:100%!important}.zone-projects,.zone-unassigned .zone-projects{grid-template-columns:repeat(2,minmax(0,1fr))}.zone-toolbar{align-items:flex-start}.zone-title{padding:0}.zone-box.resizable{resize:vertical}}

@media(min-width:1151px){
#zoneCanvas.zone-overview{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-items:start}
.zone-overview .zone-company{margin:0;min-width:0;background:#eeeef3;border:1px solid #dedbe5;border-radius:8px;padding:9px}
.zone-overview .zone-company>h3{margin:0 0 7px;font-size:12px}
.zone-overview .zone-layout{gap:6px}
.zone-overview .zone-box{width:100%!important;height:auto!important;min-width:0;min-height:0;padding:6px;resize:none;overflow:visible}
.zone-overview .zone-title{min-height:18px;margin-bottom:5px}
.zone-overview .zone-title strong{font-size:10px}
.zone-overview .zone-title button{padding:2px 4px;font-size:9px}
.zone-overview .zone-projects{grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
.zone-overview .tile{padding:5px;min-height:49px}
.zone-overview .tile h3{font-size:9px;min-height:22px;margin:0;gap:3px}
.zone-overview .tile-icon{width:14px;height:14px;flex-basis:14px;font-size:8px}
.zone-overview .tile-owner{display:none}
.zone-overview .tile-url{font-size:8px;-webkit-line-clamp:1}
.zone-overview .tile-actions{min-height:16px;padding-top:3px;font-size:8px}
.zone-overview .copy-url{min-height:16px!important;font-size:7px!important;padding:1px!important}
.zone-overview .tile-detail{font-size:7px;min-height:16px;padding:2px;top:3px;right:3px}
.zone-overview .tile.has-detail h3{padding-right:19px}
.zone-overview .zone-empty{padding:4px;margin:0;font-size:10px}
.zone-toolbar{margin-bottom:8px}
}
@media(min-width:1151px){
.zone-overview .tile{height:48px;min-height:48px;overflow:hidden}
.zone-overview .tile h3{height:22px;min-height:22px;overflow:hidden;line-height:11px}
.zone-overview .tile h3>span:last-child{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.zone-overview .tile-actions{height:15px;min-height:15px;padding-top:1px}
.zone-overview .zone-company{padding:7px}
.zone-overview .zone-projects{gap:3px}
.zone-toolbar small{display:none}
.zone-toolbar{margin-bottom:7px}
}
@media(min-width:1151px) and (max-height:800px){
body:has(#zoneCanvas.zone-overview:not([hidden])) main>header{height:44px}
body:has(#zoneCanvas.zone-overview:not([hidden])) .page-nav{padding:3px 0}
body:has(#zoneCanvas.zone-overview:not([hidden])) .toolbar{padding:3px 0}
body:has(#zoneCanvas.zone-overview:not([hidden])) .notice{margin-bottom:3px}
body:has(#zoneCanvas.zone-overview:not([hidden])) .company-trigger{min-height:32px;padding:6px 10px}
body:has(#zoneCanvas.zone-overview:not([hidden])) #allScreen{padding-top:6px}
body:has(#zoneCanvas.zone-overview:not([hidden])) .list-heading{margin-bottom:6px}
body:has(#zoneCanvas.zone-overview:not([hidden])) .zone-toolbar button{padding:4px 7px}
}

.zone-box:not(.zone-unassigned){--zone-color:#ad90c7;background:color-mix(in srgb,var(--zone-color) 15%,white);border-color:color-mix(in srgb,var(--zone-color) 55%,white);border-top:3px solid var(--zone-color)}
.zone-color-label{display:inline-flex;align-items:center;cursor:pointer}
.zone-color-label input{width:24px;height:22px;padding:1px;border:1px solid #ffffff;border-radius:5px;background:white;cursor:pointer}
.zone-projects{grid-template-columns:repeat(auto-fill,minmax(130px,180px))}
.zone-dense .zone-projects{grid-template-columns:repeat(auto-fill,minmax(110px,145px))}
@media(min-width:1151px){.zone-overview .zone-dense .zone-projects{grid-template-columns:repeat(4,minmax(0,1fr))}.zone-overview .zone-color-label input{width:18px;height:18px}}
@media(max-width:650px){.zone-projects,.zone-dense .zone-projects{grid-template-columns:repeat(2,minmax(0,180px))}}

.selection-mode .tile{cursor:crosshair!important;user-select:none}.card-selected{outline:2px solid #8562ad!important;background:#f1e8fc!important}.selection-rectangle{position:fixed;pointer-events:none;border:1px solid #8765ac;background:#a783ce30;z-index:1000}.zone-toolbar button[aria-pressed=true]{background:#e4d8f2;color:#604078}

.zone-color-label{gap:4px;background:white;border:1px solid #d9cde4;border-radius:5px;padding:2px 5px;flex-shrink:0}.zone-color-label span{font-size:10px;color:#655074;white-space:nowrap}
/* User-controlled layout: fixed card maximums; editable containers in overview too. */
#zoneCanvas.zone-overview{display:flex;flex-wrap:wrap;align-items:flex-start;gap:10px}
#zoneCanvas .zone-company{width:var(--company-width,calc((100% - 20px)/3));max-width:100%;min-width:280px;flex:none;background:color-mix(in srgb,var(--company-color,#ad90c7) 12%,white);border:1px solid color-mix(in srgb,var(--company-color,#ad90c7) 40%,white);padding:8px;border-radius:8px}
.zone-company>h3{display:flex;align-items:center;flex-wrap:wrap;gap:5px}.zone-company>h3 .zone-color-label{margin-left:auto}
#zoneCanvas .zone-box{width:var(--box-width,100%)!important;height:var(--box-height,auto)!important;min-width:160px;min-height:90px;max-width:100%;overflow:auto;background:color-mix(in srgb,var(--zone-color,#ad90c7) 12%,white);border-color:color-mix(in srgb,var(--zone-color,#ad90c7) 50%,white)}
#zoneCanvas .zone-box.resizable{resize:both}
#zoneCanvas .zone-projects{grid-template-columns:repeat(var(--zone-columns,4),minmax(0,180px))!important}
#zoneCanvas .zone-title{flex-wrap:wrap;height:auto;min-height:24px;gap:4px;cursor:grab}
.zone-columns{display:flex;align-items:center;gap:3px;font-size:10px;color:#70617e}.zone-columns select{padding:2px;font-size:10px}
#zoneCanvas .tile{height:auto;min-height:56px}.project-label{font-size:9px;color:#302b37;border-left:5px solid var(--label-color);background:color-mix(in srgb,var(--label-color) 18%,white);padding:2px 4px;margin-top:3px;border-radius:3px;overflow-wrap:anywhere}
.label-editor{border-top:1px solid #ddd;padding-top:12px}.label-editor input[name=label]{display:block;width:100%;padding:8px}.label-editor input[type=color]{display:block;width:54px;height:32px}.label-editor [role=status]{font-size:12px;color:#526b52}
@media(max-width:1150px){#zoneCanvas .zone-company{width:var(--company-width,100%)}}
@media(max-width:650px){#zoneCanvas .zone-company{min-width:0;width:100%}#zoneCanvas .zone-projects{grid-template-columns:repeat(min(var(--zone-columns,4),2),minmax(0,180px))!important}}

#zoneCanvas .zone-box,#zoneCanvas .zone-company{position:relative;padding-bottom:17px}#zoneCanvas .zone-box.resizable{resize:none}.zone-resize-handle{position:absolute;bottom:0;right:0;width:18px;height:18px;padding:0;border:0;background:transparent;color:#857496;cursor:nwse-resize;touch-action:none;z-index:2;font-size:13px;min-height:18px}
.free-toolbar{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin-bottom:8px}.free-toolbar button{font-size:11px}.free-toolbar span{font-size:11px;color:#83758c}.free-viewport.is-free{height:calc(100vh - 270px);min-height:300px;overflow:auto;position:relative;contain:strict;border:1px solid #d8d0e2;border-radius:8px;background-image:radial-gradient(#bdb3c8 1px,transparent 1px);background-size:18px 18px}
#zoneCanvas.free-canvas{display:block!important;position:relative;width:4000px;height:2600px;transform-origin:0 0}
#zoneCanvas.free-canvas .zone-company,#zoneCanvas.free-canvas .zone-box{position:absolute!important;left:var(--free-x)!important;top:var(--free-y)!important;width:var(--free-w)!important;height:var(--free-h)!important;max-width:none!important;min-width:0!important;margin:0!important;overflow:auto}
#zoneCanvas.free-canvas .zone-company{overflow:visible}#zoneCanvas.free-canvas .zone-layout{display:block;position:static}#zoneCanvas.free-canvas .zone-title,#zoneCanvas.free-canvas .zone-company>h3{cursor:move;touch-action:none}#zoneCanvas.free-canvas .zone-resize-handle{touch-action:none}.project-label:empty{height:4px;padding:0}
@media(max-width:650px){.free-viewport.is-free{height:60vh}.free-toolbar span:last-child{display:none}}

#zoneCanvas.uniform-cards .zone-projects{grid-template-columns:repeat(var(--zone-columns,4),120px)!important;grid-auto-rows:76px}#zoneCanvas.uniform-cards .tile{width:120px;height:76px;min-height:76px;overflow:hidden}

.free-viewport.is-free:not(.is-editing){background-image:none}

.rename-zone-dialog input{display:block;width:100%;margin-top:8px;padding:10px;border:1px solid #d9d1e1;border-radius:6px}

#zoneCanvas.uniform-cards .zone-projects{grid-template-columns:repeat(var(--zone-columns,4),var(--card-w,120px))!important;grid-auto-rows:var(--card-h,76px)}#zoneCanvas.uniform-cards .tile{width:var(--card-w,120px);height:var(--card-h,76px);min-height:var(--card-h,76px)}