/* Use the existing material layer: important layered rules outrank unlayered theme rules. */
/* Shared, opt-in surface system. Animations change only opacity and transforms. */
@media screen { @layer surface-material.foundation { html[data-ad-enabled="true"][data-theme][data-mode][data-ad-preset] #app-view .ad-surface,.ad-preview-card{isolation:isolate;box-shadow:0 3px 6px rgb(0 0 0 / calc(var(--ad-depth) * .2)),0 var(--ad-shadow-y) var(--ad-shadow-radius) rgb(0 0 0 / calc(var(--ad-depth) * .64)),0 0 var(--ad-edge-radius) color-mix(in srgb,var(--ad-a) calc(var(--ad-glow) * 30%),transparent),inset 0 1px 0 color-mix(in srgb,var(--ad-a) calc(var(--ad-glow) * 65%),transparent)!important;background:color-mix(in srgb,var(--panel,#111523) var(--ad-solid),transparent)!important;transition:translate var(--ad-duration) var(--ad-ease),rotate var(--ad-duration) var(--ad-ease);} } }
.ad-light{position:absolute;inset:0;border-radius:inherit;pointer-events:none!important;z-index:1;overflow:hidden;opacity:var(--ad-glow);border:1px solid color-mix(in srgb,var(--ad-a) 65%,transparent);background:radial-gradient(ellipse at calc(50% + var(--ad-x,0) * 45%) calc(50% + var(--ad-y,0) * 45%),color-mix(in srgb,var(--ad-a) 9%,transparent),transparent 70%);}
.ad-light::before{content:"";position:absolute;inset:-100%;border:1px solid transparent;background:conic-gradient(from 0deg,transparent 0 28%,var(--ad-a) 31%,var(--ad-b) 35%,transparent 39% 68%,var(--ad-c) 73%,transparent 78%);opacity:calc(var(--ad-glow) * .7);}
/* Mask the traveling plate to a perimeter; its center never covers text. */
.ad-light{mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;padding:1px;}
.ad-light::after{content:"";position:absolute;inset:-70%;background:linear-gradient(110deg,transparent 35%,color-mix(in srgb,var(--ad-b) 55%,transparent) 48%,transparent 60%);opacity:calc(var(--ad-motion) * .5);}
[data-ad-motion="on"] .ad-light::before{animation:ad-orbit var(--ad-period) linear infinite;}
[data-ad-motion="on"] .ad-light::after{animation:ad-reflect calc(var(--ad-period) * 1.7) ease-in-out infinite;}
html[data-ad-enabled="true"][data-theme][data-mode][data-ad-preset] #app-view .ad-surface::selection{background:var(--ad-b);}
@media screen { @layer surface-material.foundation { html[data-ad-enabled="true"][data-theme][data-mode][data-ad-preset] #app-view .ad-surface{border-color:color-mix(in srgb,var(--ad-a) calc(var(--ad-glow) * 70%),var(--line,#40445a))!important;} } }
@media screen { @layer surface-material.foundation { html[data-ad-enabled="true"][data-theme][data-mode][data-ad-preset="pixel"] #app-view .ad-surface{border-radius:2px;box-shadow:6px 6px 0 rgb(0 0 0 / calc(var(--ad-depth) * .65))!important;} } }
html[data-ad-preset="pixel"] .ad-light::before{animation-timing-function:steps(8);}
@media(hover:hover) and (pointer:fine){
 html[data-ad-motion="on"] .ad-surface.ad-hover,.ad-preview[data-ad-motion="on"] .ad-preview-card:hover{translate:0 calc(var(--ad-rise) * var(--ad-motion) * -1);rotate:1 -1 0 calc((var(--ad-x,0) + var(--ad-y,0)) * var(--ad-tilt) * var(--ad-motion));}
}
html[data-ad-motion="on"] .ad-surface:not(.sidebar):active{translate:0 1px;rotate:none;}
html[data-ad-enabled="true"][data-theme][data-mode][data-ad-preset] #app-view .ad-surface:focus-within{outline:2px solid var(--ad-a);outline-offset:3px;}
.ad-dialog{width:min(760px,calc(100vw - 24px));max-height:calc(100dvh - 32px);overflow:auto;padding:0;border:1px solid var(--line,#626d85);border-radius:20px;background:var(--panel,#151b29);color:var(--text,#eef1fa);}
.ad-dialog::backdrop{background:rgb(3 6 18 / .8);}
.ad-studio{padding:clamp(16px,4vw,30px);display:grid;gap:18px;}
.ad-studio h2,.ad-studio h3,.ad-studio p{margin:0;}.ad-studio header,.ad-studio label{display:grid;gap:8px;}.ad-studio p{line-height:1.5;}.ad-studio .ad-enable{display:flex;align-items:center;gap:10px;}.ad-studio input[type=checkbox]{width:20px;height:20px;}.ad-studio select{min-height:44px;}.ad-controls{display:grid;grid-template-columns:1fr 1fr;gap:20px;}.ad-controls label{grid-template-columns:1fr auto;align-items:center;}.ad-controls input{grid-column:1/-1;width:100%;min-height:28px;accent-color:var(--ad-a,#00edff);}.ad-controls output{font-variant-numeric:tabular-nums;}.ad-studio footer{display:flex;gap:10px;flex-wrap:wrap;}.ad-studio button{min-height:44px;}.ad-preview{padding:32px 24px;border-radius:16px;background:radial-gradient(ellipse at 15% 10%,#50306b,transparent 70%),#080e1c;perspective:900px;color:#f4f5ff;}.ad-preview-card{padding:24px;border-radius:16px;--panel:#121b2a;display:grid;gap:12px;}.ad-kicker{font-size:.7rem;letter-spacing:.16em;color:var(--ad-a);}.ad-preview-card button{justify-self:start;}.ad-preview[data-ad-enabled="false"] .ad-preview-card{box-shadow:none!important;background:#182135!important;}.ad-preview[data-ad-enabled="false"] .ad-light{display:none;}
@keyframes ad-orbit{to{transform:rotate(360deg);}}
@keyframes ad-reflect{0%,75%,100%{transform:translateX(-35%);opacity:0;}85%{opacity:calc(var(--ad-motion) * .5);}95%{transform:translateX(35%);opacity:0;}}
@media(max-width:600px){.ad-controls{grid-template-columns:1fr;}.ad-preview{padding:20px 12px;}html[data-ad-enabled="true"][data-theme][data-mode][data-ad-preset] #app-view .ad-surface{backdrop-filter:none;}}
/* Existing user preferences, hidden tabs, and reduced motion override max intensity. */
html[data-ad-motion="off"] .ad-light::before,html[data-ad-motion="off"] .ad-light::after{animation:none!important;}
@media(prefers-reduced-motion:reduce){.ad-light::before,.ad-light::after{animation:none!important;}.ad-surface,.ad-preview-card{translate:none!important;rotate:none!important;transition:none!important;}}
@media(update:slow){.ad-light::before,.ad-light::after{animation:none!important;}.ad-surface{backdrop-filter:none!important;}}
@media print{.ad-light{display:none!important;}.ad-surface{box-shadow:none!important;}}
.ad-sheen{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none!important;z-index:1;opacity:calc(var(--ad-glow) * .07);background:radial-gradient(ellipse at calc(50% + var(--ad-x,0) * 45%) calc(50% + var(--ad-y,0) * 45%),var(--ad-a),transparent 70%);}
.ad-sheen::before{content:"";position:absolute;inset:-80%;background:linear-gradient(110deg,transparent 40%,var(--ad-b) 50%,transparent 60%);opacity:0;}
[data-ad-motion="on"] .ad-sheen::before{animation:ad-reflect calc(var(--ad-period) * 2) ease-in-out infinite;}
[data-ad-preset="cyber"] .ad-light::after{animation-timing-function:steps(12,end);}
html[data-ad-motion="off"] .ad-sheen::before,[data-ad-visible="no"]>.ad-sheen::before,[data-ad-visible="no"]>.ad-light::before,[data-ad-visible="no"]>.ad-light::after{animation:none!important;}
@media(prefers-reduced-motion:reduce),(update:slow){.ad-sheen::before{animation:none!important;}}
@media print{.ad-sheen{display:none!important;}}

.ad-positioned{position:relative;}

/* One surface-light owner while the engine is enabled; legacy settings remain intact. */
html[data-ad-enabled="true"][data-theme][data-mode][data-ad-preset] #app-view .ad-surface > .nf-shell{display:none!important;}

@media(max-width:600px),(update:slow){.ad-light{backdrop-filter:none!important;}}

.ad-glass{position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none!important;backdrop-filter:blur(var(--ad-blur));}
@media(max-width:600px),(update:slow){.ad-glass{backdrop-filter:none!important;}}
@media print{.ad-glass{display:none!important;}}

@media screen { @layer surface-material.foundation { html[data-ad-enabled="true"][data-theme][data-mode][data-ad-preset] #app-view .view .ad-surface:is(:hover,:focus-within){box-shadow:0 3px 6px rgb(0 0 0 / calc(var(--ad-depth) * .25)),0 calc(var(--ad-shadow-y) + 2px) calc(var(--ad-shadow-radius) + 4px) rgb(0 0 0 / calc(var(--ad-depth) * .75)),0 0 var(--ad-edge-radius) color-mix(in srgb,var(--ad-a) calc(var(--ad-glow) * 38%),transparent)!important;} } }

/* The native engine owns live shadows; theme backgrounds, edges and textures remain native. */

@media(hover:hover) and (pointer:fine){html[data-ad-motion="on"] .ae-surface.ad-hover{translate:0 calc(var(--ad-rise) * var(--ad-motion) * -1)!important;rotate:1 -1 0 calc((var(--ad-x,0) + var(--ad-y,0)) * var(--ad-tilt) * var(--ad-motion))!important;}}
@media(prefers-reduced-motion:reduce){.ae-surface{translate:none!important;rotate:none!important;}}