/* Єдині пропорції сторінок. Кольори та поведінка розділів лишаються їхніми. */
:root{--ui-gap:16px;--ui-card-pad:20px;--ui-control:42px;--ui-radius:14px}
body{padding:20px 24px;line-height:1.5}
.app{grid-template-columns:208px minmax(0,1fr);gap:24px;max-width:1480px;align-items:start}
.app>.main,.app .page,.app .page section,.app .page aside{min-width:0}
.app>.side{padding:20px 14px;border-radius:18px;top:20px;max-height:calc(100dvh - 40px);overflow-y:auto;scrollbar-width:thin}
.app .logo{font-size:29px;line-height:1.15}.app .who{margin:8px 0 18px;line-height:1.5}
.app .nav{gap:4px}.app .nav a{font-size:13px;line-height:1.4;min-height:40px;padding:10px 12px;gap:9px}
.app .nav a>i{flex:0 0 18px;text-align:center;font-size:17px}
#appwrap .page h1{font-size:clamp(30px,2.4vw,38px);line-height:1.15;margin:0 0 8px;overflow-wrap:anywhere}
#appwrap .page .sub{font-size:13px;line-height:1.65;margin-bottom:20px;max-width:900px}
#appwrap .page .ct{font-size:23px;line-height:1.25;margin-bottom:12px;overflow-wrap:anywhere}
#appwrap .page .card{padding:var(--ui-card-pad);border-radius:var(--ui-radius);margin-bottom:16px;min-width:0}
#appwrap .page .card .card{padding:16px;border-radius:12px}
#appwrap .page :is(.workspace-heading,.nature-heading){gap:12px;margin-bottom:20px;align-items:center}
#appwrap .page :is(.workspace-heading,.nature-heading) h1{margin-bottom:0}
#appwrap .page .workspace-heading .sub{margin:6px 0 0}
#appwrap .page :is(.workspace-help,.mr-help){font-size:12px;line-height:1.65;overflow-wrap:anywhere}
#appwrap .page .workspace-help{margin:10px 0 14px}
#appwrap .page :is(.muted,.sub,.workspace-help):empty{display:none}
#appwrap .page :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=hidden]),select){height:var(--ui-control);min-height:var(--ui-control);max-width:100%;min-width:0;padding:9px 12px;border-radius:9px;font-size:13px;line-height:1.5;box-sizing:border-box}
#appwrap .page textarea{max-width:100%;min-width:0;border-radius:9px;padding:12px;font:400 13px/1.6 Manrope,sans-serif}
#appwrap .page input:is([type=checkbox],[type=radio]){width:18px;height:18px;min-height:0;flex:0 0 18px;margin:0;vertical-align:middle}
#appwrap .page input[type=range]{height:24px;min-height:0;padding:0}
#appwrap .page input[type=file]{height:auto;min-height:42px;max-width:100%;padding:8px;font-size:12px;line-height:1.5}
#appwrap .page input[type=file]::file-selector-button{min-height:30px;padding:5px 10px;margin-right:10px;border:1px solid #b9ad9b;border-radius:7px;background:#f3eee5;color:inherit;font:600 12px Manrope,sans-serif;cursor:pointer}
#appwrap .page label:has(>select,>textarea,>input:not([type=checkbox]):not([type=radio]):not([type=range])){display:flex;flex-direction:column;gap:6px;min-width:0;font-size:12px;font-weight:600;line-height:1.5}
#appwrap .page .workspace-field{gap:6px;font-size:12px;margin-top:14px;min-width:0}
#appwrap .page .workspace-check{font-size:12px;line-height:1.6;gap:8px;margin:12px 0;align-items:center}
#appwrap .page :is(button.sm,button.go,.subtab,.reference-link,.vbtn,.cd-button,.cd-tab){display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:var(--ui-control);height:auto;padding:10px 14px;border-radius:9px;font:600 12px/1.5 Manrope,sans-serif;white-space:normal;max-width:100%;text-align:center;vertical-align:middle;box-sizing:border-box}
#appwrap .page button.go{margin-top:14px;font-size:13px}
#appwrap .page button:is(.sm,.go,.subtab):focus-visible,#appwrap .page :is(input,select,textarea):focus-visible{outline:2px solid #8c709d;outline-offset:2px}
#appwrap .page :is(.subtabs,.workspace-actions,.mr-actions,.mc-actions,.cd-actions,.cd-tabs,.hm-tabs){display:flex;align-items:center;flex-wrap:wrap;gap:8px}
#appwrap .page .row{gap:12px;align-items:flex-end;min-width:0}
#appwrap .page .row>*{min-width:0;max-width:100%}
#appwrap .page .row>label{flex:1 1 190px}
#appwrap .page .row>:is(input,select){flex:1 1 190px}
#appwrap .page .row>:is(button,.reference-link){flex:0 0 auto;min-width:0}
#appwrap .page .row>button.go{flex:1 1 180px;width:auto;margin-top:0}
#appwrap .page .niche-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:12px;align-items:end;margin:14px 0}
#appwrap .page :is(.workspace-top,.settings-links,.mc-channels,.shorts-fields){gap:var(--ui-gap);min-width:0}
#appwrap .page .workspace-top>.card{margin:0}
#appwrap .page :is(.tpl-grid,.nf-grid,.mc-channels){grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:16px}
#appwrap .page :is(.tpl-grid,.mc-channels)>.card{margin:0}
#appwrap .page :is(.mc-grid,.shorts-grid,.mr-clip-grid){grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:16px}
#appwrap .page :is(.qitem,.vrow){gap:12px;padding:12px;border-radius:10px;min-width:0}
#appwrap .page .qitem>div{min-width:0}.app .page :is(.qitem,.vrow) b{overflow-wrap:anywhere}
#appwrap .page :is(.mr-section-head,.ds-card-head,.nf-head){gap:10px;align-items:center;flex-wrap:wrap}
#appwrap .page :is(.mr-section-head,.ds-card-head,.nf-head)>.ct{margin-bottom:0}
#appwrap .page .stats{gap:12px}#appwrap .page .stat{padding:16px;border-radius:12px;min-width:0}
#appwrap .page .stat .n{font-size:30px;line-height:1.2;margin-top:6px}
#appwrap .page :is(img,video,audio,canvas){max-width:100%}
#appwrap .page :is(pre,code){overflow-wrap:anywhere;white-space:pre-wrap}
#appwrap .page table{max-width:100%;display:block;overflow-x:auto}
#appwrap .page details>summary{cursor:pointer;line-height:1.6;font-size:13px}
#appwrap .page details[open]>summary{margin-bottom:12px}
#appwrap .page .empty{padding:24px 16px;font-size:13px;line-height:1.65}
#appwrap .page .dropzone{padding:24px 16px;border-radius:12px;font-size:13px}
/* Дашборд: плитки заповнюють ряд, стан і лічильники мають сталу ієрархію. */
#appwrap #page-dash .dash-niche-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:16px}
#appwrap #page-dash .niche-launch{min-height:108px;padding:18px;grid-template-columns:36px minmax(0,1fr) 16px;gap:12px}
#appwrap #page-dash .niche-launch b{font-size:21px;line-height:1.25}
#appwrap #page-dash .niche-launch small{line-height:1.6;margin-top:6px}
#appwrap #page-dash .dash-system{grid-template-columns:minmax(0,1.7fr) minmax(250px,1fr);gap:16px}
#appwrap #page-dash .dash-health{margin:0}.dash-niche-section{margin-bottom:20px}
#appwrap #page-dash .dash-shortcuts{gap:10px}.dash-shortcuts button{justify-content:flex-start!important}
/* Моменти: коротка форма, нижче — задачі та випуски. */
#appwrap #page-radar .mr-toolbar{grid-template-columns:minmax(220px,320px) minmax(0,1fr);gap:16px;align-items:end}
#appwrap #page-radar .mr-toolbar .workspace-field{margin:0}
#appwrap #page-radar .mr-panel{padding:18px;border-radius:12px}
#appwrap #page-radar .mr-form-row{grid-template-columns:minmax(160px,1fr) minmax(0,2fr);gap:12px}
#appwrap #page-radar .mr-overview{gap:12px}#appwrap #page-radar .mr-overview b{font-size:24px}
#appwrap #page-radar .mr-release-row{padding:12px}
/* Катастрофи та кадри: права колонка не стискає підписи й дії. */
#appwrap #page-disasters .ds-layout{grid-template-columns:minmax(0,1.1fr) minmax(360px,.9fr);gap:16px}
#appwrap #page-disasters .ds-side{gap:16px}#appwrap #page-disasters .ds-side>.card{margin:0}
#appwrap #page-disasters #ds-topics{grid-template-columns:1fr;max-height:720px;gap:12px}
#appwrap #page-disasters .ds-video-layout{grid-template-columns:132px minmax(0,1fr);gap:12px}
#appwrap #page-disasters .ds-topic{padding:12px}#appwrap #page-disasters .ds-topic[aria-pressed=true]{padding:11px}
#appwrap #page-disasters :is(.ds-topic-title,.ds-video-layout .ds-topic-title){font-size:13px;line-height:1.55}
#appwrap #page-disasters .ds-toggle{width:36px;min-height:36px;padding:0;font-size:20px}
#appwrap #page-disasters .ds-check .sm{min-height:34px;padding:6px 10px}
#appwrap #page-disasters #ds-selected{font-size:15px;margin:14px 0}
/* Каталоги, канали й налаштування. */
#appwrap #page-settings{gap:16px}
#appwrap #page-settings>.card{margin:0;padding:20px}
#appwrap #page-settings .ct{font-size:23px;min-height:0;margin-bottom:14px}
#appwrap #page-settings .settings-links{gap:10px;margin:0}
#appwrap #page-settings .settings-link{min-height:104px;padding:16px 38px 16px 16px;line-height:1.5;border-radius:11px}
#appwrap #page-settings .settings-link b{font-size:15px;margin-bottom:6px}
#appwrap #page-settings .settings-link span{font-size:12px;line-height:1.6}
#appwrap #page-settings .settings-link i{top:18px;right:14px;font-size:17px}
#appwrap #page-mychannels>.mr-overview{display:flex;padding:0;border:0;margin:0 0 16px}
#appwrap .page .geo-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:8px}
#appwrap .page .geo-cell{min-width:0;padding:8px 10px}.app .geo-cell .nm{min-width:0}
#appwrap #page-voices .vfilters{align-items:end;gap:10px}
#appwrap #page-voices .vact{width:auto;flex-wrap:wrap;gap:8px}
#appwrap #page-voices .vbtn{min-height:36px;padding:7px 11px}
#appwrap #page-voices .vlist{max-height:560px}
#appwrap #page-brand :is(.br-variants,.br-channels){min-width:0}
#appwrap #page-brand .qitem{flex-wrap:wrap}
#appwrap #page-media #mediaList>div{grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr))!important;gap:16px!important}
#appwrap #page-discovery :is(.cd-toolbar,.cd-filters){gap:12px}
#appwrap #page-discovery .cd-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:16px}
#appwrap #page-discovery .cd-card{padding:16px;margin:0}
#appwrap #page-discovery .cd-heart{width:42px;padding:0;flex:0 0 42px}
#appwrap #page-discovery .cd-filters input{max-width:none;min-width:0;flex:1 1 220px}
#appwrap #page-nature #nature-videos{grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:12px}
#appwrap #page-nature #nature-videos .nature-video{padding:12px;margin:0}
#appwrap #page-nature #nature-clips{grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr))!important}
#appwrap #page-machines .mc-videos{grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:16px}
#appwrap #page-machines .mc-video-body{padding:14px}
#appwrap #page-machines .mc-footage-layout{grid-template-columns:minmax(0,1fr) minmax(240px,290px);gap:16px}
#appwrap #page-machines .mc-shot-sidebar{padding:16px;top:20px}
#appwrap #page-musicchannels .mc-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:16px}
#appwrap #page-musicchannels .hm-item{gap:12px;flex-wrap:wrap}
#appwrap #page-musicchannels .hm-info{flex:1 1 200px}
#appwrap #page-musicchannels .hm-tabs{gap:8px}
#appwrap #page-musicchannels .hm-note:empty{display:none}
#appwrap :is(#st-clips,#st-search-res){grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr))!important;gap:16px!important}
#appwrap :is(#kd-grid,#cmp-cards,#sim-result){min-width:0}
@media(min-width:1101px){#appwrap #page-settings.active{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:1100px){
 .app{grid-template-columns:180px minmax(0,1fr);gap:18px}body{padding:16px}
 #appwrap #page-disasters .ds-layout{grid-template-columns:minmax(0,1fr)}
 #appwrap #page-disasters .ds-side{grid-template-columns:repeat(2,minmax(0,1fr))}
 #appwrap #page-disasters #ds-event-card{grid-column:1/-1}
 #appwrap #page-dash .dash-system{grid-template-columns:minmax(0,1fr)}
 #appwrap #page-dash .dash-health{grid-row:auto}
 #appwrap #page-settings.active{grid-template-columns:repeat(2,minmax(0,1fr))}
 #appwrap #page-machines .mc-footage-layout{grid-template-columns:minmax(0,1fr)}
 #appwrap #page-machines .mc-shot-sidebar{position:static;max-height:420px}
 #appwrap .page .workspace-top{grid-template-columns:1fr}
}
@media(max-width:760px){
 :root{--ui-card-pad:16px;--ui-gap:12px}body{padding:12px}
 .app{grid-template-columns:minmax(0,1fr);gap:16px}
 .app>.side{position:static;max-height:none;overflow:visible;padding:14px;border-radius:14px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px}
 .app .logo{font-size:25px;margin:0}.app .who{font-size:11px;margin:0;text-align:right}
 .app .nav{grid-column:1/-1;flex-direction:row;flex-wrap:nowrap;overflow-x:auto;min-width:0;padding-bottom:4px;gap:6px;scrollbar-width:thin;scrollbar-color:#6b5d70 #242128}
 .app .nav a{flex:0 0 auto;min-height:38px;padding:9px 11px;font-size:12px;white-space:nowrap;margin:0!important;border-top:0!important;border-radius:9px}
 #appwrap .page h1{font-size:30px}#appwrap .page .ct{font-size:22px}
 #appwrap .page .sub{margin-bottom:16px}
 #appwrap .page :is(.workspace-heading,.nature-heading){align-items:flex-start;margin-bottom:16px}
 #appwrap .page :is(.shorts-fields,.mc-channels,.tpl-grid){grid-template-columns:minmax(0,1fr)}
 #appwrap #page-settings.active{grid-template-columns:minmax(0,1fr)}
 #appwrap #page-disasters .ds-side{grid-template-columns:minmax(0,1fr)}
 #appwrap #page-disasters .ds-video-layout{grid-template-columns:112px minmax(0,1fr)}
 #appwrap #page-radar .mr-toolbar,#appwrap #page-radar .mr-form-row{grid-template-columns:minmax(0,1fr);gap:10px}
 #appwrap #page-radar #mr-type-note{padding:10px 12px}
 #appwrap #page-dash .dash-health #dash-state{grid-template-columns:repeat(2,minmax(0,1fr))}
 #appwrap .page .qitem{flex-wrap:wrap}
 #appwrap .page .vrow{flex-wrap:wrap;gap:10px}#appwrap .page .vmain{flex:1 1 180px}
 #appwrap .page .vact{flex:1 1 100%;justify-content:flex-start}
 #appwrap .page .vplayer{flex-wrap:wrap}#appwrap .page .vplayer audio{min-width:0;flex:1 1 100%}
 #appwrap .page #vNowPlaying{max-width:100%!important}
 #appwrap .page .row>label{min-width:0!important}
 #appwrap .page :is(#kd-grid,#sim-result)>div{grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr))!important}
}
@media(max-width:480px){
 :root{--ui-card-pad:14px}body{padding:10px}
 #appwrap .page .row>:is(input,select,label){flex:1 1 100%!important;max-width:100%!important;min-width:0!important}
 #appwrap .page .row>:is(button,.reference-link){flex:1 1 auto!important;min-width:0!important;white-space:normal!important}
 #appwrap .page .niche-fields{grid-template-columns:minmax(0,1fr)}
 #appwrap .page :is(.ds-search,.shorts-fields,.mr-overview){grid-template-columns:1fr}
 #appwrap #page-radar .mr-overview{grid-template-columns:repeat(2,minmax(0,1fr))}
 #appwrap #page-dash .dash-health #dash-state{grid-template-columns:minmax(0,1fr)}
 #appwrap #page-dash .niche-launch{min-height:92px;padding:16px}
 #appwrap #page-disasters .ds-video-layout{grid-template-columns:minmax(0,1fr)}
 #appwrap #page-disasters .ds-video-thumb{max-width:100%}
 #appwrap .page .stats{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 #appwrap .page :is(.cd-filters,.mc-input-row,.vfilters){flex-wrap:wrap}
 #appwrap .page .vfilters>:is(input,select){width:100%;flex-basis:100%}
 #appwrap #page-discovery .cd-filters>:is(input,select){width:100%!important;flex:1 1 100%}
 #appwrap #page-machines .mc-input-row>:is(input,select,button){flex-basis:100%}
 #appwrap #page-machines .mc-tools details{min-width:0}
 #appwrap #page-brand .geo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 #appwrap .page dialog{max-width:calc(100vw - 24px)}
}