/* VELORA File Studio — Commercial UI layer v4
   Non-destructive visual upgrade over v3. */
:root{
  --v4-glow:0 0 0 1px rgba(255,255,255,.68) inset;
  --v4-blue:#5662ea;
  --v4-sky:#2da8f8;
  --v4-ink:#142038;
  --v4-soft:#f7f9fd;
}

/* Global polish */
body:before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;
  background-image:linear-gradient(rgba(98,111,148,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(98,111,148,.035) 1px,transparent 1px);
  background-size:34px 34px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.35),transparent 56%);
}
.topbar{padding-left:max(24px,calc((100vw - 1340px)/2))!important;padding-right:max(24px,calc((100vw - 1340px)/2))!important}
.topbar:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,rgba(91,92,226,.24),rgba(34,198,245,.2),transparent)}
.brand{position:relative}.brand:after{content:"PRO";align-self:flex-start;margin-left:3px;margin-top:1px;padding:3px 7px;border-radius:999px;font-size:8px;line-height:1;font-weight:800;letter-spacing:.8px;color:#fff;background:linear-gradient(135deg,#6768ee,#3d85f4);box-shadow:0 5px 12px rgba(80,85,218,.2)}

/* Hero feels like a finished SaaS product */
.workspace-top{position:relative}
.workspace-top:before{content:"";position:absolute;left:-18px;top:25px;width:4px;height:58px;border-radius:999px;background:linear-gradient(180deg,var(--v4-blue),var(--v4-sky));box-shadow:0 6px 18px rgba(79,88,220,.2)}
.intro h1{max-width:720px}
.eyebrow{display:inline-flex;align-items:center;gap:7px}.eyebrow:before{content:"";width:7px;height:7px;border-radius:50%;background:#19b979;box-shadow:0 0 0 5px rgba(25,185,121,.10)}

/* Tool navigation / icon language */
.main-tabs [data-slot=tabs-trigger]{position:relative;overflow:hidden}
.main-tabs [data-slot=tabs-trigger]:before{content:"";position:absolute;left:10%;right:10%;bottom:0;height:2px;border-radius:999px;background:linear-gradient(90deg,var(--v4-blue),var(--v4-sky));opacity:0;transform:scaleX(.35);transition:.2s ease}
.main-tabs [data-state=active]:before{opacity:1;transform:scaleX(1)}
.main-tabs [data-slot=tabs-trigger] svg{box-sizing:content-box;padding:5px;border-radius:8px;background:rgba(91,92,226,.065)}
.main-tabs [data-state=active] svg{background:linear-gradient(145deg,#edf0ff,#eef8ff);box-shadow:var(--v4-glow)}

/* Panels and information architecture */
.work-panel,.settings-panel{position:relative}
.work-panel:before,.settings-panel:before{content:"";position:absolute;left:0;top:0;right:0;height:3px;z-index:2;background:linear-gradient(90deg,var(--v4-blue),#6f77ee 50%,var(--v4-sky));opacity:.72}
.settings-panel{box-shadow:0 18px 48px rgba(30,41,79,.085),0 2px 8px rgba(30,41,79,.04)!important}
.settings-title{position:relative}
.field-label,.slider-label{font-weight:650!important;letter-spacing:-.05px}
.field-help{line-height:1.65!important}

/* Better icon chips everywhere */
.panel-title>svg,.settings-title>svg,.photo-info>svg,.quick-note>svg,.output-note>svg{filter:drop-shadow(0 4px 8px rgba(72,81,182,.08))}
.file-symbol{display:grid!important;place-items:center!important;min-width:38px!important;min-height:38px!important;background:linear-gradient(145deg,#f1f3ff,#eef8ff)!important;border:1px solid #dde3f2!important;box-shadow:0 4px 12px rgba(44,58,98,.05)!important}

/* Account / auth — commercial product treatment */
.account-bar{position:relative;overflow:hidden;background:linear-gradient(135deg,rgba(255,255,255,.98),rgba(249,251,255,.96))!important}
.account-bar:before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:linear-gradient(180deg,var(--v4-blue),var(--v4-sky))}
.account-bar>div:first-child{position:relative;padding-left:4px}
.account-bar>div:first-child strong{display:flex;align-items:center;gap:8px;font-size:14px!important;font-weight:780!important;letter-spacing:.1px}
.account-bar>div:first-child strong:before{content:"";width:9px;height:9px;border-radius:50%;background:#20bb7a;box-shadow:0 0 0 5px rgba(32,187,122,.09)}
.account-bar>.secondary-button{min-width:185px!important;background:linear-gradient(180deg,#fff,#f8faff)!important;border-color:#d8dfeb!important}

.account-content{position:relative;margin-top:2px;padding:24px!important;border-top:1px solid #e5eaf3!important;border-radius:15px;background:linear-gradient(180deg,#fbfcff,#f8faff)!important;box-shadow:inset 0 1px rgba(255,255,255,.7)}
.account-content>.text-button:first-child{position:absolute;right:18px;top:16px;z-index:2;padding:7px 10px!important;border-radius:9px!important;background:#f0f3f8!important;color:#66748a!important;text-decoration:none!important}
.account-content>.text-button:first-child:hover{background:#e8edf5!important;color:#2e3c56!important}
.account-content>p:first-of-type{max-width:780px;padding-right:64px;color:#66758c!important;line-height:1.7!important}
.account-content .photo-actions{gap:10px!important;margin-top:18px!important}
.account-content .photo-actions>*{flex:0 1 auto!important;min-width:155px}
.account-content .photo-actions .primary-button{min-width:190px}

/* Login/register card */
.account-form{max-width:560px!important;margin:12px auto 4px!important;padding:26px!important;gap:15px!important;border:1px solid #e0e6f0;border-radius:18px;background:#fff;box-shadow:0 16px 42px rgba(31,45,81,.09),0 2px 8px rgba(31,45,81,.03);position:relative;overflow:hidden}
.account-form:before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,var(--v4-blue),#7278ef,var(--v4-sky))}
.account-form h2{margin:2px 0 7px!important;font-size:22px!important;letter-spacing:-.5px!important;color:#17233c!important}
.account-form h2:after{content:"";display:block;width:38px;height:3px;margin-top:10px;border-radius:999px;background:linear-gradient(90deg,var(--v4-blue),var(--v4-sky))}
.account-form label{gap:8px!important;color:#46556d;font-weight:620!important}
.account-form .field-help{margin:2px 0!important;padding:12px 14px;border-radius:11px;background:#f4f7ff;color:#63728c!important;border:1px solid #e1e7f5;font-size:12px!important}
.account-form .primary-button{margin-top:2px;width:100%}
.account-form>.text-button:last-child{justify-self:center;padding:9px 12px!important;border-radius:9px!important;color:#535dc2!important}

/* Account details / admin surfaces */
.account-content details{border:1px solid #e1e6ef;border-radius:13px;background:#fff;margin-top:14px!important;overflow:hidden;box-shadow:0 3px 12px rgba(30,43,78,.03)}
.account-content details summary{padding:14px 16px!important;list-style:none;display:flex;align-items:center;justify-content:space-between;color:#2d3c56!important}
.account-content details summary::-webkit-details-marker{display:none}
.account-content details summary:after{content:"+";display:grid;place-items:center;width:23px;height:23px;border-radius:7px;background:#f1f4f9;color:#69778d;font-size:16px;transition:.18s ease}
.account-content details[open] summary:after{content:"−";background:#eef0ff;color:#555fd0}
.account-content details[open]{padding-bottom:15px}
.account-content details[open]>*:not(summary){margin-left:16px!important;margin-right:16px!important}
.admin-users{border:1px solid #e5eaf2;border-radius:12px;background:#fafcff;padding:8px}
.admin-users .result-row{background:#fff!important;border-color:#e4e9f1!important}

/* Pricing plan presentation added by v4 enhancement script */
.v4-plan-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:16px 0 18px}
.v4-plan-card{position:relative;border:1px solid #e0e6f0;border-radius:14px;background:#fff;padding:16px 17px;overflow:hidden;box-shadow:0 5px 16px rgba(31,44,78,.04)}
.v4-plan-card strong{display:flex;align-items:center;gap:8px;font-size:14px}.v4-plan-card p{margin:6px 0 0!important;font-size:12px!important;color:#77859a!important}
.v4-plan-card .v4-plan-icon{width:29px;height:29px;border-radius:9px;display:grid;place-items:center;background:#f0f3f9;color:#69758a}
.v4-plan-card.v4-pro{border-color:#cfd4ff;background:linear-gradient(145deg,#f8f8ff,#f2f8ff);box-shadow:0 10px 28px rgba(81,87,207,.08)}
.v4-plan-card.v4-pro:after{content:"PRO";position:absolute;right:10px;top:10px;padding:4px 7px;border-radius:999px;color:#fff;background:linear-gradient(135deg,var(--v4-blue),var(--v4-sky));font-size:8px;font-weight:800;letter-spacing:.7px}
.v4-plan-card.v4-pro .v4-plan-icon{background:linear-gradient(145deg,#eceeff,#eaf7ff);color:#5862d8}
.v4-secure-note{display:flex;align-items:center;justify-content:center;gap:7px;margin:10px auto 0;color:#7b889b;font-size:11px}
.v4-secure-note svg{width:14px;height:14px;color:#24a872}

/* Photo studio */
.photo-stage{position:relative}.photo-frame{background-image:linear-gradient(45deg,rgba(117,129,155,.07) 25%,transparent 25%),linear-gradient(-45deg,rgba(117,129,155,.07) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,rgba(117,129,155,.07) 75%),linear-gradient(-45deg,transparent 75%,rgba(117,129,155,.07) 75%)!important;background-size:18px 18px!important;background-position:0 0,0 9px,9px -9px,-9px 0!important}
.photo-controls{box-shadow:inset 0 1px rgba(255,255,255,.8)}
.photo-checks span{border:1px solid #d8eadf!important;border-radius:999px!important;padding:5px 9px!important;font-weight:650!important}
.photo-actions .primary-button,.photo-actions .secondary-button{min-height:43px!important}

/* Hover feedback without feeling flashy */
.work-panel,.settings-panel,.account-bar,.photo-batch-card,.file-row,.format-option,.swatch-option{transform:translateZ(0)}
.file-row:hover{border-color:#ccd6e6!important;box-shadow:0 7px 18px rgba(31,43,72,.055)!important}

/* Dark theme extensions */
:root[data-theme=dark] body:before{opacity:.35}
:root[data-theme=dark] .brand:after{box-shadow:0 5px 14px rgba(85,91,230,.25)}
:root[data-theme=dark] .main-tabs [data-slot=tabs-trigger] svg{background:rgba(140,150,255,.08)}
:root[data-theme=dark] .main-tabs [data-state=active] svg{background:#33415f}
:root[data-theme=dark] .file-symbol{background:linear-gradient(145deg,#21304a,#1b2b41)!important;border-color:#344865!important}
:root[data-theme=dark] .account-bar{background:linear-gradient(135deg,rgba(21,30,46,.97),rgba(18,28,43,.97))!important}
:root[data-theme=dark] .account-content{background:linear-gradient(180deg,#141e2e,#121c2b)!important;border-color:#2c3b52!important}
:root[data-theme=dark] .account-content>.text-button:first-child{background:#223047!important;color:#bbc7d8!important}
:root[data-theme=dark] .account-content>.text-button:first-child:hover{background:#293a55!important;color:#f0f4fa!important}
:root[data-theme=dark] .account-form,:root[data-theme=dark] .account-content details,:root[data-theme=dark] .v4-plan-card{background:#182338!important;border-color:#31415a!important;box-shadow:0 16px 42px rgba(0,0,0,.16)}
:root[data-theme=dark] .account-form h2{color:#eef3fa!important}
:root[data-theme=dark] .account-form label{color:#c5d0df!important}
:root[data-theme=dark] .account-form .field-help{background:#1e2b43!important;border-color:#324560!important;color:#abb9cc!important}
:root[data-theme=dark] .account-content details summary{color:#e7edf6!important}
:root[data-theme=dark] .account-content details summary:after{background:#24344d;color:#bdc8d8}
:root[data-theme=dark] .account-content details[open] summary:after{background:#2d3a61;color:#c8ceff}
:root[data-theme=dark] .admin-users{background:#111b2b;border-color:#2e3e56}
:root[data-theme=dark] .admin-users .result-row{background:#172338!important;border-color:#2d3d55!important}
:root[data-theme=dark] .v4-plan-card.v4-pro{background:linear-gradient(145deg,#202a4a,#182d45);border-color:#4b5689}
:root[data-theme=dark] .v4-plan-card .v4-plan-icon{background:#26344c;color:#b8c4d5}
:root[data-theme=dark] .v4-plan-card.v4-pro .v4-plan-icon{background:#2c3d66;color:#c7ceff}
:root[data-theme=dark] .v4-plan-card p{color:#a8b6c9!important}
:root[data-theme=dark] .photo-checks span{background:#193429!important;border-color:#29503e!important;color:#7bd0a4!important}

/* Tablet/mobile refinements */
@media(max-width:980px){
 .workspace-top:before{display:none}
 .settings-panel{box-shadow:var(--velora-shadow)!important}
 .v4-plan-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:700px){
 .topbar{padding-left:12px!important;padding-right:12px!important}
 .brand:after{display:none}
 .account-content{padding:18px 14px!important}
 .account-content>p:first-of-type{padding-right:42px}
 .account-form{padding:21px 16px!important;border-radius:15px!important}
 .account-form h2{font-size:20px!important}
 .account-content .photo-actions>*{flex:1 1 100%!important;width:100%}
 .v4-plan-grid{grid-template-columns:1fr}
 .account-content details[open]>*:not(summary){margin-left:12px!important;margin-right:12px!important}
 .cookie-actions{display:grid!important;grid-template-columns:1fr!important}
 .cookie-actions button{width:100%}
}
@media(max-width:420px){
 .main-tabs [data-slot=tabs-trigger] svg{padding:4px}
 .panel-title>svg{padding:7px!important}
 .account-bar{margin-left:10px!important;margin-right:10px!important}
 .account-form{box-shadow:none}
}