/* VELORA File Studio — Commercial UI layer v4.1 */
:root{
 --v41-page:#f5f8ff;
 --v41-panel:rgba(255,255,255,.92);
 --v41-border:rgba(190,204,228,.72);
 --v41-shadow:0 22px 65px rgba(42,63,110,.10),0 4px 16px rgba(42,63,110,.045);
}
html,body,#root{min-height:100%}
body{
 background:
  radial-gradient(900px 520px at 88% 11%,rgba(103,207,255,.17),transparent 68%),
  radial-gradient(760px 520px at 7% 24%,rgba(119,111,255,.12),transparent 70%),
  linear-gradient(180deg,#f8faff 0%,#f4f8ff 46%,#f7f9fd 100%)!important;
 background-attachment:fixed!important;
}
body:before{
 opacity:.7!important;
 background-image:
  linear-gradient(rgba(111,126,164,.025) 1px,transparent 1px),
  linear-gradient(90deg,rgba(111,126,164,.025) 1px,transparent 1px)!important;
 background-size:44px 44px!important;
 mask-image:linear-gradient(to bottom,rgba(0,0,0,.25),transparent 64%)!important;
}
.studio-app{position:relative;isolation:isolate}
.studio-app:before,.studio-app:after{content:"";position:fixed;pointer-events:none;z-index:-1;border-radius:999px;filter:blur(16px)}
.studio-app:before{width:340px;height:340px;right:-150px;top:170px;background:rgba(77,187,255,.08)}
.studio-app:after{width:300px;height:300px;left:-150px;top:330px;background:rgba(103,92,238,.065)}
.topbar{background:rgba(255,255,255,.82)!important;backdrop-filter:blur(20px) saturate(1.2);-webkit-backdrop-filter:blur(20px) saturate(1.2)}
.account-bar,.work-panel,.settings-panel{
 background:var(--v41-panel)!important;
 border-color:var(--v41-border)!important;
 box-shadow:var(--v41-shadow)!important;
 backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)
}
.workspace-top{padding-top:8px}
.intro h1{font-size:clamp(28px,3vw,42px)!important;letter-spacing:-1.15px!important;line-height:1.08!important;color:#16213a!important}
.eyebrow{letter-spacing:1.6px!important}
.drop-zone{background:linear-gradient(145deg,rgba(249,251,255,.97),rgba(244,248,255,.91))!important;border-color:#8ea0ff!important;box-shadow:inset 0 1px rgba(255,255,255,.9),0 14px 35px rgba(72,91,170,.055)!important}
.drop-zone:hover{background:linear-gradient(145deg,#f7f8ff,#eff7ff)!important;border-color:#6674ee!important;box-shadow:0 16px 36px rgba(80,93,207,.10)!important}
.primary-button{background:linear-gradient(135deg,#5d5ee8,#3f81ef)!important;box-shadow:0 9px 22px rgba(75,84,219,.22)!important}
.primary-button:hover{transform:translateY(-1px);box-shadow:0 12px 26px rgba(75,84,219,.28)!important}
.settings-panel{overflow:hidden}
.settings-panel:after{content:"";position:absolute;width:150px;height:150px;right:-80px;top:-90px;border-radius:50%;background:radial-gradient(circle,rgba(76,174,255,.10),transparent 70%);pointer-events:none}
.footer{margin-top:28px!important;padding-bottom:28px!important;border-top-color:rgba(196,207,225,.72)!important}
.footer>a{display:none!important}
@media(max-width:700px){
 body{background:linear-gradient(180deg,#f8faff,#f4f7fc)!important}
 .intro h1{font-size:30px!important;letter-spacing:-.8px!important}
 .account-bar,.work-panel,.settings-panel{backdrop-filter:none;-webkit-backdrop-filter:none}
}
:root[data-theme=dark] body{
 background:
  radial-gradient(900px 560px at 88% 10%,rgba(25,149,223,.13),transparent 70%),
  radial-gradient(760px 520px at 7% 22%,rgba(100,91,224,.13),transparent 70%),
  linear-gradient(180deg,#0e1624 0%,#101a2a 52%,#0e1725 100%)!important;
}
:root[data-theme=dark] .topbar{background:rgba(14,22,36,.82)!important}
:root[data-theme=dark] .account-bar,:root[data-theme=dark] .work-panel,:root[data-theme=dark] .settings-panel{background:rgba(21,31,48,.91)!important;border-color:rgba(58,76,103,.82)!important;box-shadow:0 24px 68px rgba(0,0,0,.26)!important}
:root[data-theme=dark] .intro h1{color:#f0f4fb!important}
:root[data-theme=dark] .drop-zone{background:linear-gradient(145deg,rgba(28,39,59,.94),rgba(23,35,54,.93))!important;border-color:#5264c9!important}