/* RYXO luxury theme: public UI only, no auth/admin/data changes */
body.reference-layout{color-scheme:dark;--bg:#060a17;--panel:#101b32;--border:#35456b;--sub:#c1cce2;background:radial-gradient(ellipse at 8% 0%,#35206370,transparent 45%),linear-gradient(160deg,#050913,#0b1430 58%,#060b1b)!important;color:#f5f7ff!important}
body.reference-layout header{background:#080e22ed!important;color:#f5f7ff!important;border-color:#34456d!important}
body.reference-layout .brand b,body.reference-layout .heading h2,body.reference-layout .title,body.reference-layout .hub-body,body.reference-layout .category b{color:#f7f7ff!important}
body.reference-layout .brand em{color:#dfbb74!important}
body.reference-layout .brand small,body.reference-layout .sub,body.reference-layout .category small,body.reference-layout .hub-card p,body.reference-layout .tutorial p{color:#c4d0e6!important}
body.reference-layout .search,body.reference-layout header>.search{background:#101c36!important;border-color:#52648a!important;color:#fff!important}
body.reference-layout .search input{color:#fff!important}
body.reference-layout .search input::placeholder{color:#c4cee0!important}
body.reference-layout .hero{background:radial-gradient(ellipse at 12% 30%,#813cf655,transparent 52%),radial-gradient(ellipse at 85% 80%,#1364cc77,transparent 45%),linear-gradient(130deg,#0c1534,#060c1c)!important;border:1px solid #8264bf!important;box-shadow:0 18px 65px #0008!important}
body.reference-layout .hero:after{background:linear-gradient(110deg,#0c153955,#162d7050)!important}
body.reference-layout .hero h1 em{color:#f4d48d!important}
body.reference-layout .quick button,body.reference-layout .category{color:#f5f7ff!important}
body.reference-layout .quick .orb,body.reference-layout .category .orb,body.reference-layout .hub-shortcuts i{background:radial-gradient(circle at 35% 25%,#5a4e8a,#18264a 68%,#0b1530)!important;border:1px solid #6976b2!important;color:#f5d9a3!important;box-shadow:inset 0 1px 0 #ffffff30,0 8px 25px #0006!important}
body.reference-layout .tutorial,body.reference-layout .hub-card,body.reference-layout .product,body.reference-layout .published-post,body.reference-layout .lens-card{background:linear-gradient(155deg,#192643e8,#0b1429f5)!important;color:#f5f7ff!important;border:1px solid #40547c!important;box-shadow:0 15px 38px #0005!important}
body.reference-layout .tutorial h3,body.reference-layout .hub-card h3,body.reference-layout .published-post h3,body.reference-layout .product h3{color:#fff!important}
body.reference-layout .hub-card>a:not(.primary){color:#8dd5ff!important;text-decoration:underline;text-underline-offset:4px}
body.reference-layout .cover{background:radial-gradient(circle at 30% 25%,#7952d088,transparent 60%),#0d1933!important}
body.reference-layout .primary,body.reference-layout .snap-open,body.reference-layout .hub-card .primary{background:linear-gradient(110deg,#4a66ee,#8a4cda)!important;color:#fff!important;border:1px solid #a59aff!important}
body.reference-layout .filters button,body.reference-layout .menu-grid button{background:#1b2c4d!important;color:#e6f1ff!important;border-color:#4e658f!important}
body.reference-layout .filters button.active{background:#495fcb!important;color:#fff!important}
body.reference-layout dialog{background:#111a30!important;color:#fff!important;border-color:#52648a!important}
body.reference-layout #bottom{background:#0d1832f5!important;border-color:#506187!important;box-shadow:0 10px 35px #0008!important}
body.reference-layout #bottom button{color:#cbd8f2!important}
body.reference-layout #bottom button.active{background:#283d78!important;color:#fff!important}
body.reference-layout .legal-links{background:#0b142b!important;color:#d0dbed!important;border-color:#35476b!important}
body.reference-layout .legal-links a{color:#9bd5ff!important}
body.reference-layout .hub-card img{aspect-ratio:3/2;object-fit:cover}
body.reference-layout .hub-card,body.reference-layout .tutorial,body.reference-layout .category{transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease!important}
@media(hover:hover){body.reference-layout .hub-card:hover,body.reference-layout .tutorial:hover,body.reference-layout .category:hover{transform:translateY(-4px)!important;border-color:#a18cf2!important;box-shadow:0 18px 45px #36217e70!important}}
body.reference-layout .hub-card:active,body.reference-layout .tutorial:active,body.reference-layout .category:active{border-color:#d5b477!important}
body.reference-layout :is(button,a,input):focus-visible{outline:3px solid #f3cf8c!important;outline-offset:3px}
@media(prefers-reduced-motion:reduce){body.reference-layout .hub-card,body.reference-layout .tutorial,body.reference-layout .category{transition:none!important}}

/* Six approved RYXO directions translated into real, accessible components */
body.reference-layout{--ryxo-gold:#f5ce76;--ryxo-blue:#55c8ff;--ryxo-violet:#b98aff}
body.reference-layout .hero{min-height:380px!important;background:radial-gradient(circle at 78% 20%,#c28d474a,transparent 24%),radial-gradient(circle at 25% 75%,#5c34cc80,transparent 40%),linear-gradient(120deg,#080d1c,#102448 55%,#060b1a)!important}
body.reference-layout .hero:before{background:radial-gradient(circle at 78% 42%,transparent 0 17%,#caa66c55 17.3%,transparent 18.2%),linear-gradient(135deg,transparent 40%,#7b4edb33 55%,transparent 70%)!important}
body.reference-layout .hero h1{font-weight:900!important;letter-spacing:-.025em}
body.reference-layout .hero .search{border:1px solid #9a83cb!important;border-radius:30px!important;background:#10172cdd!important}
body.reference-layout .hero .search button{background:linear-gradient(110deg,#f4cf79,#c79338)!important;color:#12121c!important;font-weight:800}
body.reference-layout .heading h2:after{background:linear-gradient(90deg,#a95cff,#42bdfb,#f4c76b)!important}
body.reference-layout .tutorials,body.reference-layout .hub-grid{gap:18px!important}
body.reference-layout .hub-card,body.reference-layout .tutorial{position:relative;isolation:isolate;border-radius:19px!important;overflow:hidden}
body.reference-layout .hub-card:before,body.reference-layout .tutorial:before{content:"";position:absolute;inset:0 0 auto;height:2px;background:linear-gradient(90deg,transparent,#9b73ed,#f4c86d,transparent);opacity:.7;pointer-events:none;z-index:2}
body.reference-layout .hub-card img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:13px}
body.reference-layout .hub-card h3{font-size:clamp(16px,1.6vw,21px);line-height:1.5}
body.reference-layout .hub-card p{font-size:14px;line-height:1.7}
body.reference-layout .hub-card>a:not(.primary){display:inline-flex;align-items:center;min-height:44px;color:#9bdfff!important;font-weight:700}
body.reference-layout .tutorial .cover{min-height:175px;position:relative;background:radial-gradient(circle at 25% 20%,#5e2ca6a0,transparent 52%),radial-gradient(circle at 80% 80%,#0059b4aa,transparent 50%),#101b36!important}
body.reference-layout .tutorial .cover span{filter:drop-shadow(0 0 18px #b36dff)}
body.reference-layout .category{border:1px solid #425279!important;border-radius:20px!important;background:linear-gradient(155deg,#18233f,#0d162d)!important;padding:18px 9px!important}
body.reference-layout .category small{max-width:220px}
body.reference-layout .hub-shortcuts a{color:#f0f5ff!important}
body.reference-layout .hub-shortcuts i{transition:transform .2s ease}
body.reference-layout .hub-shortcuts a:active i{transform:scale(.94)}
body.reference-layout .filters{display:flex;gap:9px;overflow-x:auto;scrollbar-width:thin;padding:8px 0;overscroll-behavior-x:contain}
body.reference-layout .filters button{white-space:nowrap;min-height:44px;border-radius:25px}
body.reference-layout .hub-cover{border:1px solid #6173a2;box-shadow:0 20px 55px #0008}
body.reference-layout .hub-detail{max-width:920px}
body.reference-layout .hub-detail h1{color:#f7e3b3}
body.reference-layout .hub-detail button{min-height:44px}
body.reference-layout .banner,body.reference-layout .notice,body.reference-layout .lens-hero,body.reference-layout .lens-callout{background:linear-gradient(120deg,#21173b,#10233e)!important;color:#fff!important;border:1px solid #645b9e!important}
body.reference-layout .banner p,body.reference-layout .lens-hero p,body.reference-layout .lens-callout p{color:#d0daed!important}
body.reference-layout .hub-card:focus-within,body.reference-layout .tutorial:focus-within{border-color:#e2c07b!important;box-shadow:0 0 0 2px #e2c07b66!important}
@media(hover:hover){body.reference-layout .hub-card:hover img{filter:saturate(1.15);transform:scale(1.025)}body.reference-layout .hub-card img{transition:transform .3s ease,filter .3s ease}}
@media(max-width:760px){body.reference-layout .hero{min-height:320px!important}body.reference-layout .hub-grid{gap:11px!important}body.reference-layout .hub-card{padding:11px!important}body.reference-layout .hub-card h3{font-size:15px}body.reference-layout .hub-card p{font-size:12px}body.reference-layout .category{padding:11px 5px!important}}
@media(prefers-reduced-motion:reduce){body.reference-layout .hub-card img,body.reference-layout .hub-shortcuts i{transition:none!important}}