/* Creative Hub's original, self-branded light website inspired by the owner's reference.
   Public pages only: no admin/account styling changes. No third-party assets. */
:root{color-scheme:light}
body.reference-layout{--bg:#ffffff;--panel:#ffffff;--border:#e5edf5;--sub:#707d8b;color:#182638!important;background:#ffffff!important;font-family:system-ui,Tahoma,Arial,sans-serif!important}
body.reference-layout header{background:#ffffffed!important;border-bottom:1px solid #edf1f6;box-shadow:0 4px 22px #1e538b0a;min-height:88px;height:auto;color:#1d385a}
body.reference-layout .brand{white-space:normal}
body.reference-layout .brand b{font-size:21px;color:#154b75}
body.reference-layout .brand em{color:#1096e0}
body.reference-layout .brand small{color:#71869a}
body.reference-layout .brand i{background:linear-gradient(145deg,#22b8fc,#096fda);box-shadow:0 4px 15px #1f95e43a;color:#fff}
body.reference-layout header>.search,body.reference-layout .search{border:1px solid #dbe7f1;background:#f8fbff;border-radius:26px;color:#243f58}
body.reference-layout .search input{color:#243f58}
body.reference-layout .search input::placeholder{color:#92a3b2}
body.reference-layout .search button{background:#078ae0;color:#fff;border-radius:24px}
body.reference-layout #menu{border:1px solid #d5e5f2;background:#f0f7ff;color:#1367a4;border-radius:14px}
body.reference-layout .account-link,body.reference-layout header #accountLink{border-color:#b7dfff!important;background:#edf8ff!important;color:#006eb5!important;box-shadow:none!important}
body.reference-layout aside{display:none!important}
body.reference-layout main{width:min(1160px,100%);max-width:1160px;margin:0 auto!important;padding:25px 25px 116px;min-height:72vh}
body.reference-layout .hero{background-color:#0a83d1;min-height:340px;border:0;border-radius:20px;box-shadow:0 15px 36px #188fdb22;isolation:isolate}
body.reference-layout .hero:after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(100deg,#005ea5aa,#0499e539);border-radius:inherit}
body.reference-layout .hero-copy{z-index:3;position:relative;color:#fff!important}
body.reference-layout .hero h1,body.reference-layout .hero h1 em{color:#fff!important;text-shadow:0 2px 12px #034a7b55}
body.reference-layout .hero p,body.reference-layout .hero .eyebrow{color:#f1f9ff!important}
body.reference-layout .hero .search{border:0;background:#fff}
body.reference-layout .hero .search input{color:#1d3852}
body.reference-layout .hero .search button{background:#fff;color:#0677b9}
body.reference-layout .quick{grid-template-columns:repeat(5,minmax(0,1fr));margin:30px 0 16px;gap:12px}
body.reference-layout .quick button,body.reference-layout .category{display:flex;flex-direction:column;align-items:center;text-align:center;gap:7px;justify-content:flex-start;color:#243646;background:transparent!important;border:0!important;border-radius:18px;box-shadow:none!important;transform:none!important;min-width:0}
body.reference-layout .quick button:hover,body.reference-layout .category:hover{background:#f5faff!important;box-shadow:none}
body.reference-layout .quick .orb,body.reference-layout .category .orb,body.reference-layout .hub-shortcuts i{width:82px;height:82px;max-width:100%;display:grid;place-items:center;margin:0 auto 7px;border:1px solid #e2eaf1;border-radius:50%;background:radial-gradient(circle at 50% 45%,#fff 29%,color-mix(in srgb,var(--accent,#058bdd),#fff 81%) 68%,#f6f9fc 100%)!important;color:var(--accent,#058bdd);font-size:33px;box-shadow:0 7px 19px #215fa611;text-shadow:none}
body.reference-layout .quick button{font-weight:650;font-size:13px;padding:9px 3px}
body.reference-layout .heading{justify-content:center;flex-wrap:wrap;position:relative;margin:34px 0 27px;text-align:center;gap:10px}
body.reference-layout .heading h2{font-size:29px;font-weight:500;color:#26303b}
body.reference-layout .heading h2:after{content:"";display:block;width:80px;height:4px;border-radius:8px;background:#18a3ed;margin:7px auto 0}
body.reference-layout .heading button{position:absolute;left:0;top:6px;border:0;background:#ecf8ff;color:#007cbd}
body.reference-layout .categories{grid-template-columns:repeat(3,minmax(0,1fr));gap:26px 12px}
body.reference-layout .category{padding:7px 6px}
body.reference-layout .category b{font-size:15px;color:#2b3946}
body.reference-layout .category small{font-size:12px;color:#7c8897;line-height:1.5}
body.reference-layout .hub-shortcuts{flex-wrap:wrap}
body.reference-layout .hub-shortcuts a{font-weight:600;color:#2b4055}
body.reference-layout .hub-shortcuts i{font-size:31px}
body.reference-layout .tutorial,body.reference-layout .hub-card,body.reference-layout .product,body.reference-layout .published-post,body.reference-layout .lens-card,body.reference-layout .sponsor-card,body.reference-layout .prices article{background:#fff;color:#283b50;border:1px solid #e4eaf2;border-radius:18px;box-shadow:0 10px 25px #174f8611;overflow:hidden}
body.reference-layout .tutorial h3,body.reference-layout .hub-card h3,body.reference-layout .published-post h3,body.reference-layout .product h3{color:#19374f}
body.reference-layout .tutorial p,body.reference-layout .hub-card p,body.reference-layout .published-post p,body.reference-layout .product p{color:#6c7d8a}
body.reference-layout .cover{background:linear-gradient(135deg,#e6f4ff,#f2f7ff);border:0}
body.reference-layout .cover:before{border-color:var(--accent,#65aafa);box-shadow:0 0 15px var(--glow,#358ef044)}
body.reference-layout .banner,body.reference-layout .notice,body.reference-layout .lens-hero,body.reference-layout .lens-callout{background:#eef8ff;color:#214e72;border:1px solid #cce8fc}
body.reference-layout .banner p,body.reference-layout .banner small,body.reference-layout .lens-hero p,body.reference-layout .lens-callout p{color:#577189}
body.reference-layout .title,body.reference-layout .sub,body.reference-layout .hub-body{color:#293c4b}
body.reference-layout .empty{border-color:#d5e5f0;color:#64798b}
body.reference-layout .filters button{background:#f6fbff;color:#216a9e;border-color:#d3e7f4}
body.reference-layout .filters button.active{background:#1684d4;color:#fff}
body.reference-layout .primary,body.reference-layout .snap-open{background:#087fdb!important;color:white!important;border-color:#087fdb!important}
body.reference-layout .form input,body.reference-layout .form textarea,body.reference-layout .builder textarea,body.reference-layout .builder select{color:#213954;background:#fff;border-color:#d4e4f3}
body.reference-layout .builder,body.reference-layout .command{background:#fff;color:#253c51;border:1px solid #e2ebf4}
body.reference-layout dialog{background:#ffffff;color:#213a50;border:1px solid #e0eaf4;box-shadow:0 24px 75px #16395729}
body.reference-layout dialog::backdrop{background:#061d3782}
body.reference-layout dialog .menu-group{color:#0d7fc9}
body.reference-layout .menu-grid button,body.reference-layout .menu-grid .menu-account-link{background:#f1f8ff;color:#1d5b8b;border:1px solid #dceaf5}
body.reference-layout .menu-grid button:hover,body.reference-layout .menu-grid .menu-account-link:hover{background:#e7f4ff}
body.reference-layout .search,body.reference-layout button{transition:background-color .12s,border-color .12s}
body.reference-layout #bottom{display:flex!important;position:fixed;bottom:12px;left:50%;right:auto;transform:translateX(-50%);width:min(780px,calc(100% - 26px));z-index:45;border:1px solid #dce5ed;background:#fffffff7;border-radius:40px;padding:7px 10px calc(7px + env(safe-area-inset-bottom));justify-content:space-around;box-shadow:0 9px 34px #1c4c7c25}
body.reference-layout #bottom button{border:0;background:transparent;color:#6e7b89;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;flex:1;min-height:52px;padding:6px 3px;border-radius:25px;font-size:12px}
body.reference-layout #bottom button.active{background:#e8f2ff;color:#1972d0;font-weight:700}
body.reference-layout #bottom i{font-style:normal;font-size:22px}
body.reference-layout .legal-links{margin-right:0!important;background:#f6fbff!important;color:#446079!important;border-top:1px solid #d9e9f7!important;padding-bottom:100px!important}
body.reference-layout .legal-links a{color:#0871b3}
body.reference-layout .foot{color:#6d8699}
body.reference-layout .pwa-actions button{color:#1670b9;background:#ecf8ff}
body.reference-layout #toast{background:#0c77b9;color:#fff}
@media(max-width:1100px){
body.reference-layout main{margin:0 auto!important;padding:16px 20px 118px}
body.reference-layout header>.search{width:35%}
body.reference-layout .quick{grid-template-columns:repeat(5,minmax(0,1fr))}
body.reference-layout .quick button:nth-child(n+5){display:flex}
body.reference-layout .hero-copy{width:65%}
}
@media(max-width:760px){
body.reference-layout header{min-height:72px;padding:10px 12px;gap:6px}
body.reference-layout .brand b{font-size:16px}
body.reference-layout .brand i{width:39px;height:39px;font-size:23px}
body.reference-layout .brand small{font-size:9px}
body.reference-layout main{padding:12px 11px 112px}
body.reference-layout .hero{min-height:290px;border-radius:14px;padding:24px 18px}
body.reference-layout .hero-copy{width:100%}
body.reference-layout .hero h1{font-size:clamp(27px,7vw,38px)}
body.reference-layout .hero p{font-size:12px}
body.reference-layout .quick{gap:6px;grid-template-columns:repeat(4,minmax(0,1fr))}
body.reference-layout .quick .orb,body.reference-layout .category .orb,body.reference-layout .hub-shortcuts i{width:66px;height:66px;font-size:27px}
body.reference-layout .quick button{font-size:11px}
body.reference-layout .categories{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 6px}
body.reference-layout .category b{font-size:12px}
body.reference-layout .category small{font-size:10px}
body.reference-layout .heading{margin:27px 0 23px}
body.reference-layout .heading h2{font-size:24px}
body.reference-layout .heading button{position:static}
body.reference-layout #bottom{bottom:8px;width:calc(100% - 16px);padding:6px 5px calc(6px + env(safe-area-inset-bottom));border-radius:30px}
body.reference-layout #bottom button{font-size:10px;padding:6px 2px}
body.reference-layout #bottom i{font-size:21px}
body.reference-layout .hub-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(prefers-reduced-motion:reduce){body.reference-layout *{transition:none!important}}

/* Short new RYXO brand safely wraps in small Safari screens. */
body.reference-layout .brand{min-width:0;max-width:100%}
body.reference-layout .brand b{overflow-wrap:anywhere}
@media(max-width:760px){body.reference-layout .brand b{font-size:clamp(13px,3.7vw,16px)}}