/* VELORA File Studio — Commercial UI layer v3
   Additive only: preserves application logic and processing engines. */
:root{
  --velora-brand:#5b5ce2;
  --velora-brand-2:#3b82f6;
  --velora-cyan:#22c6f5;
  --velora-success:#16a36a;
  --velora-radius-xl:24px;
  --velora-radius-lg:18px;
  --velora-shadow:0 18px 48px rgba(30,41,79,.10),0 2px 8px rgba(30,41,79,.05);
  --velora-shadow-hover:0 24px 64px rgba(45,55,115,.16),0 4px 14px rgba(30,41,79,.06);
}
html{background:#f5f7fb;scroll-behavior:smooth}
body{background:
 radial-gradient(circle at 8% -5%,rgba(91,92,226,.11),transparent 31rem),
 radial-gradient(circle at 95% 18%,rgba(34,198,245,.08),transparent 28rem),
 linear-gradient(180deg,#f8faff 0,#f4f7fb 48%,#f7f9fc 100%);
 color:#172033;
}
.studio-app{min-height:100vh;background:transparent!important}

/* Premium navigation */
.topbar{height:82px!important;background:rgba(255,255,255,.86)!important;border-bottom:1px solid rgba(218,225,239,.9)!important;backdrop-filter:blur(18px) saturate(145%);-webkit-backdrop-filter:blur(18px) saturate(145%);position:sticky;top:0;z-index:60;box-shadow:0 1px 0 rgba(36,49,85,.02)}
.brand{gap:11px!important}
.brand img{width:40px!important;height:40px!important;border-radius:13px;filter:drop-shadow(0 8px 14px rgba(68,75,185,.18))}
.brand strong{font-size:21px!important;letter-spacing:-.55px!important;font-weight:750!important}
.brand small{letter-spacing:2.1px!important;font-size:9px!important;color:#7b879c!important;font-weight:700}
.brand-dot{color:var(--velora-brand)!important}
.topbar-note{background:#f7f9fd;border:1px solid #e6ebf4;padding:9px 12px;border-radius:12px;color:#64728a!important;font-weight:500}
.topbar-note svg{width:17px;height:17px;padding:3px;box-sizing:content-box;border-radius:7px;background:#eceefe;color:var(--velora-brand)!important}
.language-select,.theme-toggle{height:40px!important;border-radius:11px!important;border:1px solid #dde4ef!important;background:#fff!important;box-shadow:0 2px 8px rgba(31,45,81,.04);transition:.18s ease}
.language-select:hover,.theme-toggle:hover{border-color:#bfc9dc!important;box-shadow:0 6px 16px rgba(31,45,81,.07);transform:translateY(-1px)}
.theme-toggle svg{width:16px;height:16px}

/* Hero and primary navigation */
.workspace-top{padding:34px 0 26px!important}
.eyebrow{color:var(--velora-brand)!important;letter-spacing:1.7px!important;font-weight:750!important;background:linear-gradient(90deg,var(--velora-brand),var(--velora-brand-2));-webkit-background-clip:text;background-clip:text;color:transparent!important}
.intro h1{font-size:31px!important;line-height:1.34!important;letter-spacing:-1.15px!important;font-weight:720!important;color:#19233a!important}
.main-tabs{height:56px!important;padding:5px!important;border-radius:15px!important;border:1px solid #dfe5ef!important;background:#edf1f7!important;box-shadow:inset 0 1px 2px rgba(31,43,72,.03)}
.main-tabs [data-slot=tabs-trigger]{min-height:44px!important;border-radius:11px!important;font-weight:600!important;color:#66748b!important;transition:.2s ease!important}
.main-tabs [data-slot=tabs-trigger] svg{width:18px;height:18px;stroke-width:1.9}
.main-tabs [data-state=active]{color:#25355f!important;background:#fff!important;box-shadow:0 5px 14px rgba(40,52,88,.10)!important}
.main-tabs [data-state=active] svg{color:var(--velora-brand)!important}

/* Main commercial cards */
.tool-layout{gap:24px!important;grid-template-columns:minmax(0,1fr) 342px!important}
.work-panel,.settings-panel,.account-bar{border:1px solid rgba(216,224,237,.95)!important;border-radius:var(--velora-radius-lg)!important;background:rgba(255,255,255,.94)!important;box-shadow:var(--velora-shadow)!important;transition:box-shadow .22s ease,border-color .22s ease}
.work-panel:hover,.settings-panel:hover{border-color:#cfd8e8!important;box-shadow:var(--velora-shadow-hover)!important}
.panel-head{padding:21px 24px!important;background:linear-gradient(180deg,#fff 0,#fcfdff 100%);border-bottom:1px solid #e8edf5!important}
.panel-title{gap:11px!important}
.panel-title>svg{width:19px!important;height:19px!important;box-sizing:content-box;padding:9px;border-radius:11px;background:linear-gradient(135deg,#eff0ff,#eef8ff);border:1px solid #dde3ff;color:var(--velora-brand)!important;stroke-width:1.9}
.panel-title h2{font-weight:700!important;color:#1b2740!important;letter-spacing:-.2px}
.panel-title p{color:#7d899c!important}
.small-badge{border-radius:999px!important;background:#f1f3ff!important;color:#5059b8!important;border:1px solid #e0e3ff!important;padding:5px 10px!important;font-weight:700!important;letter-spacing:.02em}
.panel-body{padding:25px!important}
.mode-tabs{height:43px!important;border-radius:11px!important;background:#f1f4f8!important;padding:4px!important}
.mode-tabs [data-slot=tabs-trigger]{border-radius:8px!important;font-weight:600!important}
.mode-tabs [data-state=active]{background:#fff!important;color:#31406a!important;box-shadow:0 3px 9px rgba(31,43,75,.08)!important}

/* Upload surface */
.dropzone{min-height:286px!important;border:1.5px dashed #aebbe0!important;border-radius:17px!important;background:linear-gradient(180deg,#f9fbff 0,#f5f8ff 100%)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.75);transition:.22s ease!important}
.dropzone:hover,.dropzone.drag-over{border-color:#7b84e8!important;background:linear-gradient(180deg,#f6f7ff 0,#eef4ff 100%)!important;box-shadow:inset 0 0 0 1px rgba(111,117,231,.05),0 14px 32px rgba(72,80,170,.08);transform:translateY(-1px)}
.upload-icon{width:64px!important;height:64px!important;border-radius:19px!important;background:linear-gradient(145deg,#fff,#f1f4ff)!important;border:1px solid #dfe4fa!important;color:var(--velora-brand)!important;box-shadow:0 13px 28px rgba(69,78,175,.12)!important}
.upload-icon svg{width:27px;height:27px;stroke-width:1.8}
.dropzone strong{font-weight:650!important;color:#24304b!important}
.dropzone p,.dropzone .file-hint{color:#7c899e!important}
.dropzone .upload-cta{min-height:44px!important;border-radius:11px!important;background:linear-gradient(135deg,var(--velora-brand),#4c7cf0)!important;box-shadow:0 10px 22px rgba(79,83,210,.22);font-weight:650!important;transition:.18s ease!important}
.dropzone .upload-cta:hover{filter:brightness(1.04);transform:translateY(-1px);box-shadow:0 14px 28px rgba(79,83,210,.27)}
.quick-note{color:#8390a4!important}

/* Files, controls and status */
.file-row{border-radius:12px!important;border-color:#e2e7f0!important;background:#fff!important;box-shadow:0 2px 8px rgba(31,43,72,.025)}
.file-row.selected{background:#f6f8ff!important;border-color:#b9c2ef!important;box-shadow:0 0 0 2px rgba(91,92,226,.06)}
.file-symbol{border-radius:9px!important}
.text-input,.select-control{min-height:43px!important;border-radius:11px!important;border-color:#dbe3ee!important;background:#fff!important;box-shadow:0 1px 3px rgba(31,45,81,.02);transition:.18s ease}
.text-input:focus,.select-control:focus{border-color:#9da9ee!important;box-shadow:0 0 0 3px rgba(91,92,226,.10)!important;outline:none!important}
.format-option,.swatch-option{border-radius:12px!important;border-color:#e0e6ef!important;transition:.18s ease!important}
.format-option:hover,.swatch-option:hover{border-color:#bbc5dc!important;background:#fbfcff!important;transform:translateY(-1px)}
.format-option.active,.swatch-option.active{border-color:#8c95ea!important;background:#f5f6ff!important;box-shadow:0 0 0 2px rgba(91,92,226,.08)!important}

/* Commercial buttons */
.primary-button{min-height:48px!important;border-radius:12px!important;background:linear-gradient(135deg,var(--velora-brand),#4a7bf1)!important;font-weight:700!important;box-shadow:0 11px 24px rgba(78,83,206,.22)!important;transition:.18s ease!important}
.primary-button:hover:not(:disabled){background:linear-gradient(135deg,#5253d7,#4173e8)!important;transform:translateY(-1px);box-shadow:0 15px 30px rgba(78,83,206,.28)!important}
.primary-button svg,.secondary-button svg,.text-button svg{stroke-width:1.9}
.secondary-button{min-height:40px!important;border-radius:11px!important;border-color:#dce3ee!important;color:#47556d!important;background:#fff!important;font-weight:600!important;transition:.18s ease!important}
.secondary-button:hover{background:#f7f9fc!important;border-color:#c6d0e1!important;transform:translateY(-1px);box-shadow:0 6px 14px rgba(31,45,81,.06)}
.text-button{font-weight:650!important}
.settings-footer{background:linear-gradient(180deg,#fcfdff,#fafbfe)!important;padding:20px 22px!important}

/* Results / photo studio */
.preview-surface,.photo-frame{border-radius:14px!important;border-color:#e0e6ef!important;background:#f1f4f8!important}
.preview-surface img,.photo-frame.output img{border-radius:5px;box-shadow:0 10px 24px rgba(31,43,72,.13)!important}
.results-area{border-color:#e6ebf3!important}
.result-row{border-radius:12px!important;background:#f2faf6!important;border-color:#d7ebdf!important}
.result-row a{border-radius:9px!important;font-weight:650!important}
.photo-batch-card{border-radius:14px!important;border-color:#e1e7f0!important;background:#fff!important;transition:.18s ease!important}
.photo-batch-card:hover{transform:translateY(-1px);box-shadow:0 9px 22px rgba(30,42,70,.07)}
.photo-batch-card.active{border-color:#8e97ec!important;box-shadow:0 0 0 2px rgba(91,92,226,.08)!important}
.photo-controls{border-radius:14px!important}

/* Account and billing */
.account-bar{max-width:1340px!important;margin:18px auto 0!important;padding:17px 22px!important}
.account-bar strong{color:#1e2941}
.account-content{border-color:#e7ecf4!important}
.cookie-banner{border-radius:19px!important;border-color:#dbe3ef!important;box-shadow:0 24px 60px rgba(25,37,65,.18)!important;background:rgba(255,255,255,.96)!important;backdrop-filter:blur(18px)}
.cookie-banner h2{font-weight:750!important;color:#202c45}
.cookie-actions button{border-radius:11px!important}

/* Dark theme — softer, premium, not pure black */
:root[data-theme=dark]{
 --background:#0d1320!important;--foreground:#edf2fa!important;--card:#151e2e!important;--card-foreground:#edf2fa!important;--popover:#151e2e!important;--popover-foreground:#edf2fa!important;--muted:#202b3e!important;--muted-foreground:#a8b5c9!important;--border:#2a3950!important;--input:#33445d!important;--ring:#8f98ff!important;color-scheme:dark
}
:root[data-theme=dark] html{background:#0d1320}
:root[data-theme=dark] body{background:radial-gradient(circle at 8% -5%,rgba(93,95,231,.18),transparent 32rem),radial-gradient(circle at 95% 20%,rgba(34,198,245,.08),transparent 30rem),linear-gradient(180deg,#0d1320,#101827 52%,#0d1421)!important;color:#edf2fa}
:root[data-theme=dark] .topbar{background:rgba(13,19,32,.84)!important;border-color:#26344a!important}
:root[data-theme=dark] :is(.work-panel,.settings-panel,.account-bar,.account-content,.cookie-banner){background:rgba(21,30,46,.95)!important;border-color:#2b3a51!important;box-shadow:0 20px 55px rgba(0,0,0,.22)!important}
:root[data-theme=dark] .panel-head{background:linear-gradient(180deg,#172133,#141e2e)!important;border-color:#293850!important}
:root[data-theme=dark] :is(.panel-title h2,.intro h1,.dropzone strong,.cookie-banner h2,.account-bar strong){color:#edf2fa!important}
:root[data-theme=dark] .panel-title>svg{background:linear-gradient(135deg,#28345a,#203752)!important;border-color:#354869!important;color:#aeb8ff!important}
:root[data-theme=dark] :is(.language-select,.theme-toggle,.secondary-button,.text-input,.select-control,.file-row,.format-option,.swatch-option,.photo-batch-card){background:#172235!important;border-color:#31415a!important;color:#e8eef8!important}
:root[data-theme=dark] :is(.language-select,.theme-toggle,.secondary-button):hover{background:#1d2a40!important;border-color:#40526f!important}
:root[data-theme=dark] .main-tabs{background:#192437!important;border-color:#2d3c54!important}
:root[data-theme=dark] .main-tabs [data-state=active]{background:#25344d!important;color:#edf2ff!important;box-shadow:0 5px 14px rgba(0,0,0,.16)!important}
:root[data-theme=dark] .dropzone{background:linear-gradient(180deg,#162237,#141f31)!important;border-color:#435779!important}
:root[data-theme=dark] .dropzone:hover,:root[data-theme=dark] .dropzone.drag-over{background:linear-gradient(180deg,#1b2941,#17243a)!important;border-color:#7585de!important}
:root[data-theme=dark] .upload-icon{background:linear-gradient(145deg,#202d44,#1a263a)!important;border-color:#3a4d6c!important;color:#aeb8ff!important}
:root[data-theme=dark] .mode-tabs{background:#1b273a!important}
:root[data-theme=dark] .mode-tabs [data-state=active]{background:#2b3a54!important;color:#f1f5fb!important}
:root[data-theme=dark] .small-badge{background:#242f54!important;color:#c7ceff!important;border-color:#394777!important}
:root[data-theme=dark] :is(.preview-surface,.photo-frame,.photo-controls){background:#111a28!important;border-color:#2c3a50!important}
:root[data-theme=dark] .settings-footer{background:#121b2a!important;border-color:#2a3850!important}
:root[data-theme=dark] .file-row.selected,:root[data-theme=dark] .format-option.active,:root[data-theme=dark] .swatch-option.active{background:#232f4d!important;border-color:#7781da!important}
:root[data-theme=dark] .cookie-banner p{color:#b4c0d2!important}

/* Mobile and tablet */
@media(max-width:980px){.tool-layout{grid-template-columns:1fr!important}.settings-panel{position:relative!important;top:auto!important}.workspace-top{align-items:flex-start!important}.main-tabs{min-width:0}.topbar-note{display:none!important}}
@media(max-width:700px){
 .topbar{height:70px!important;padding:0 13px!important}
 .brand img{width:35px!important;height:35px!important;border-radius:11px}
 .brand strong{font-size:18px!important}.brand small{font-size:8px!important;letter-spacing:1.4px!important}
 .studio-tabs{padding:0 12px!important}
 .workspace-top{padding:25px 0 20px!important;gap:16px!important;flex-direction:column!important}
 .intro h1{font-size:25px!important;line-height:1.36!important}
 .main-tabs{width:100%;height:auto!important;min-height:54px!important}
 .main-tabs [data-slot=tabs-trigger]{padding:11px 12px!important;font-size:13px!important;flex:1}
 .work-panel,.settings-panel,.account-bar{border-radius:15px!important}
 .panel-head{padding:18px!important}.panel-body{padding:17px!important}
 .dropzone{min-height:235px!important;padding:25px 15px!important}
 .account-bar{margin:12px!important;padding:14px!important}
 .cookie-banner{border-radius:16px!important}
}

/* Accessible focus */
:is(button,a,input,select,[role=tab]):focus-visible{outline:3px solid rgba(91,92,226,.22)!important;outline-offset:2px!important}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}