:root{--cm-bg:#0f1011;--cm-card:#171819;--cm-card2:#202122;--cm-text:#f2f2f2;--cm-muted:#a3a3a3;--cm-accent:#8b3dff;--cm-accent2:#5b45ff;--cm-soft:#b875ff}
.cm-page{max-width:1810px;margin:0 auto;padding:78px 56px 72px;color:var(--cm-text)}
.cm-breadcrumb{font-size:16px;color:#8e8e8e;margin-bottom:34px}.cm-breadcrumb strong{color:#e9e9e9;font-weight:600}.cm-slash{padding:0 10px;color:#666}
.cm-hero h1{margin:0;background:linear-gradient(110deg,var(--cm-soft),var(--cm-accent),#755bff);-webkit-background-clip:text;background-clip:text;color:transparent;font-size:58px;line-height:1;font-weight:800;letter-spacing:-2px;text-transform:uppercase}.cm-hero p{max-width:1240px;margin:28px 0 0;color:#b7b7b7;font-size:20px;line-height:1.55}
.cm-toolbar{display:flex;align-items:flex-end;justify-content:space-between;margin:52px 0 38px;gap:24px}.cm-section-label{font-size:18px;font-weight:600;padding:0 8px 18px;border-bottom:2px solid #eee;min-width:185px}.cm-search{width:250px;height:42px;border:1px solid transparent;border-radius:14px;background:#1d1f20;color:#fff;padding:0 16px 0 42px;font-size:16px;outline:none;transition:.2s}.cm-search:focus{border-color:rgba(184,117,255,.55);box-shadow:0 0 0 3px rgba(139,61,255,.08)}.cm-search-wrap{position:relative}.cm-search-wrap:before{content:'⌕';position:absolute;left:15px;top:7px;color:#8f9294;font-size:23px}
.cm-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px 18px}.cm-card{position:relative;background:var(--cm-card);border-radius:22px;min-width:0;padding:1px;overflow:hidden;isolation:isolate;transition:transform .24s ease,box-shadow .24s ease}.cm-card:before{content:"";position:absolute;inset:-70%;z-index:-2;background:conic-gradient(from 0deg,transparent 0 70%,rgba(184,117,255,.15) 76%,#b875ff 82%,#8b3dff 86%,transparent 92%);opacity:0;animation:cm-orbit 2.8s linear infinite;transition:opacity .2s}.cm-card:after{content:"";position:absolute;inset:1px;border-radius:21px;background:var(--cm-card);z-index:-1}.cm-card:hover{transform:translateY(-2px);box-shadow:0 12px 36px rgba(91,69,255,.10)}.cm-card:hover:before{opacity:1}@keyframes cm-orbit{to{transform:rotate(360deg)}}
.cm-card-inner{border-radius:21px;overflow:hidden}.cm-video-wrap{position:relative;aspect-ratio:16/9;background:#141516;overflow:hidden;cursor:pointer}.cm-video{width:100%;height:100%;object-fit:cover;display:block;background:#141516}.cm-video-thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;opacity:1;transition:opacity .18s}.cm-video-wrap.is-ready .cm-video-thumb,.cm-video-wrap.is-playing .cm-video-thumb{opacity:0}.cm-play{position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);width:52px;height:52px;border-radius:50%;border:1px solid rgba(255,255,255,.55);background:rgba(0,0,0,.42);color:#fff;font-size:18px;display:grid;place-items:center;backdrop-filter:blur(6px);transition:.2s}.cm-video-wrap.is-playing .cm-play{opacity:0;pointer-events:none}.cm-video-wrap:hover .cm-play{transform:translate(-50%,-50%) scale(1.05)}
.cm-card-body{padding:16px 18px 18px}.cm-card h3{font-size:20px;margin:0 0 16px;font-weight:650}.cm-copy{width:100%;height:52px;border:1px solid #3e4044;border-radius:11px;background:#333538;color:#fff;font-size:17px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:.18s}.cm-copy:hover{background:#3b3d41;border-color:rgba(184,117,255,.45)}.cm-copy.copied{background:linear-gradient(135deg,var(--cm-accent),var(--cm-accent2));border-color:transparent;color:#fff}.cm-copy svg{width:14px;height:14px;flex:0 0 14px}
.cm-ad{position:relative;border-radius:22px;padding:1px;overflow:hidden;min-width:0;background:linear-gradient(145deg,rgba(184,117,255,.55),rgba(91,69,255,.15) 38%,rgba(255,255,255,.05) 70%);min-height:0}.cm-ad-inner{height:100%;min-height:100%;border-radius:21px;background:radial-gradient(circle at 75% 10%,rgba(139,61,255,.18),transparent 36%),#171819;display:flex;flex-direction:column;justify-content:flex-end;padding:28px;aspect-ratio:16/9;box-sizing:border-box}.cm-ad-label{position:absolute;top:18px;right:18px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#8f9194}.cm-ad h3{font-size:25px;margin:0 0 8px}.cm-ad p{margin:0 0 20px;color:#a9aaad;line-height:1.45;max-width:380px}.cm-ad a{width:max-content;text-decoration:none;color:#fff;font-weight:750;padding:10px 15px;border-radius:10px;background:linear-gradient(135deg,var(--cm-accent),var(--cm-accent2))}
.cm-pagination{display:flex;justify-content:center;align-items:center;gap:58px;margin:58px auto 8px}.cm-page-btn{min-width:126px;height:58px;border:1px solid #3c3e42;border-radius:17px;background:#242629;color:#f4f4f4;font-size:20px;cursor:pointer;transition:.2s}.cm-page-btn:hover:not(:disabled){border-color:rgba(184,117,255,.55);background:#2b2d31}.cm-page-btn:disabled{background:#1d1f21;color:#666;cursor:not-allowed}.cm-page-count{font-size:22px;color:#9b9b9b;min-width:55px;text-align:center}.cm-empty{grid-column:1/-1;padding:70px;text-align:center;color:#888}
@media(max-width:1100px){.cm-page{padding:64px 28px}.cm-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.cm-hero h1{font-size:48px}}
@media(max-width:700px){.cm-page{padding:42px 16px}.cm-grid{grid-template-columns:1fr;gap:18px}.cm-hero h1{font-size:38px}.cm-hero p{font-size:16px;margin-top:18px}.cm-toolbar{margin:36px 0 24px;align-items:stretch;flex-direction:column}.cm-search{width:100%}.cm-section-label{width:max-content}.cm-pagination{gap:18px;margin-top:38px}.cm-page-btn{min-width:105px;height:52px}.cm-card,.cm-ad{border-radius:18px}.cm-card:after,.cm-card-inner,.cm-ad-inner{border-radius:17px}}

/* Color Lab */
.color-card .cm-video-wrap{cursor:default}.color-image{width:100%;height:100%;object-fit:cover;display:block}.color-swatches{height:22px;display:grid;grid-template-columns:repeat(8,1fr);overflow:hidden}.color-swatches span{display:block}.color-card .cm-card-body{padding-top:12px}.color-card .cm-copy.copied{background:linear-gradient(135deg,#7c4dff,#b46cff)!important;border-color:#a66cff!important;color:#fff!important}.color-card .cm-play{display:none!important}

/* Color Lab v2 visual direction */
.color-page{position:relative;isolation:isolate}
.color-page:before{content:"";position:fixed;z-index:-2;inset:0;background:linear-gradient(rgba(8,9,16,.76),rgba(8,9,16,.88)),url("hero/color-studio-bg.webp") center/cover no-repeat;filter:blur(8px);transform:scale(1.04);pointer-events:none}
.color-page:after{content:"";position:fixed;z-index:-1;inset:0;background:radial-gradient(circle at 50% 12%,rgba(113,49,192,.16),transparent 38%),linear-gradient(180deg,rgba(9,10,17,.16),rgba(9,10,17,.78));pointer-events:none}
.color-page .cm-breadcrumb{margin-bottom:24px;color:#b9b9bf}.color-page .cm-breadcrumb strong{font-weight:550;color:#d7d7dc}
.color-kicker{font-size:12px;letter-spacing:.38em;color:#a8a2b5;margin:0 0 10px 2px}
.color-hero h1{font-size:76px;line-height:.95;letter-spacing:-4px;background:linear-gradient(100deg,#b45cff 0%,#743cff 15%,#8ed8ff 31%,#55c8ff 39%,#ffb5a1 51%,#ed56c9 62%,#ad4dff 73%,#6ca6ff 90%,#6d5dff 100%);background-size:180% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:color-title-shift 10s ease-in-out infinite alternate}
@keyframes color-title-shift{from{background-position:0% 50%}to{background-position:100% 50%}}
.color-hero p{margin-top:14px;max-width:920px;font-size:18px;line-height:1.4;color:#b7b5c1}
.color-banner{height:300px;margin-top:26px;border:1px solid rgba(157,77,255,.75);border-radius:20px;overflow:hidden;position:relative;background:#11131c;box-shadow:0 14px 50px rgba(59,19,104,.18)}
.color-banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.color-banner:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,10,18,.86) 0%,rgba(10,10,18,.58) 30%,rgba(10,10,18,.05) 62%,rgba(8,10,20,.14) 100%)}
.color-banner-copy{position:absolute;z-index:2;left:48px;top:50%;transform:translateY(-50%);color:#eee}
.color-banner-copy h2{font-size:21px;line-height:1.28;letter-spacing:.34em;font-weight:450;margin:0}.color-banner-copy span{display:block;width:40px;height:2px;background:#a857ff;margin:20px 0 18px}.color-banner-copy p{font-size:15px;line-height:1.45;color:#b9b7c0;margin:0;letter-spacing:.02em}
.color-page .cm-toolbar{margin-top:34px}
.color-card .cm-card-inner{background:#171a20}.color-card .cm-video-wrap{aspect-ratio:16/9}.color-card .cm-card-body{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 14px 13px}.color-card .cm-card-body h3{margin:0;font-size:16px;font-weight:520;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.color-card .cm-copy{width:34px;height:34px;min-width:34px;border:0;background:transparent;padding:0;border-radius:8px}.color-card .cm-copy span{display:none}.color-card .cm-copy svg{width:16px;height:16px}.color-card .cm-copy:hover{background:rgba(255,255,255,.07)}.color-card .cm-copy.copied{width:auto;min-width:86px;padding:0 10px}.color-card .cm-copy.copied span{display:inline;font-size:12px}.color-swatches{height:27px}
@media(max-width:1100px){.color-hero h1{font-size:62px}.color-banner{height:260px}}
@media(max-width:700px){.color-kicker{font-size:9px;letter-spacing:.28em}.color-hero h1{font-size:45px;letter-spacing:-2.5px}.color-banner{height:220px;border-radius:16px}.color-banner-copy{left:24px}.color-banner-copy h2{font-size:16px}.color-banner-copy p{font-size:13px}}

/* v2.1 requested card + footer refinements */
.color-card .cm-video-wrap{position:relative!important;}
.color-card .color-swatches{position:absolute!important;left:0!important;right:0!important;bottom:0!important;z-index:4!important;height:30px!important;display:grid!important;grid-template-columns:repeat(8,1fr)!important;overflow:hidden!important;box-shadow:0 -5px 14px rgba(0,0,0,.16)!important;}
.color-card .color-image{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;}
.color-card .cm-copy{width:40px!important;height:40px!important;min-width:40px!important;}
.color-card .cm-copy svg{width:21px!important;height:21px!important;flex:0 0 21px!important;stroke-width:1.8!important;}
.color-page + .o4p-footer,.o4p-footer{display:block!important;visibility:visible!important;opacity:1!important;position:relative!important;z-index:2!important;}

/* v2.2 copy control refinement */
.color-card .cm-copy{width:44px!important;height:44px!important;min-width:44px!important;border-radius:10px!important;}
.color-card .cm-copy svg{width:23px!important;height:23px!important;flex:0 0 23px!important;}
.color-card .cm-copy.copied{width:auto!important;min-width:112px!important;height:44px!important;padding:0 15px!important;border-radius:10px!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:7px!important;white-space:nowrap!important;}
.color-card .cm-copy.copied span{display:inline!important;font-size:14px!important;font-weight:650!important;line-height:1!important;white-space:nowrap!important;}

/* v3.7 Background is now shared globally from assets/style.css */
.color-page:before,.color-page:after{content:none!important;display:none!important;}

/* v3.16 unified pagination */
.cm-pagination{display:flex;justify-content:center;align-items:center;gap:18px;margin:58px auto 8px}.cm-page-numbers{display:flex;gap:18px}.cm-page-btn{min-width:74px;height:58px;padding:0 22px;border:1px solid rgba(255,255,255,.16);border-radius:17px;background:rgba(20,19,27,.82);color:#f4f4f4;font-size:19px;font-weight:700;cursor:pointer;transition:.2s}.cm-wide-btn{min-width:150px}.cm-page-btn.active{border-color:#9f59ff;box-shadow:0 0 18px rgba(137,69,255,.2)}.cm-page-btn:hover:not(:disabled){border-color:#9f59ff;background:rgba(27,25,35,.92)}.cm-page-btn:disabled{opacity:.38;background:rgba(20,19,27,.82);cursor:default}@media(max-width:700px){.cm-pagination{gap:8px;flex-wrap:wrap}.cm-page-numbers{gap:8px}.cm-page-btn{min-width:52px;height:50px;padding:0 13px;font-size:16px}.cm-wide-btn{min-width:110px}}

/* v3.17 — compact site-wide pagination */
.cm-pagination{gap:14px!important;margin-top:58px!important}.cm-page-numbers{gap:14px!important}.cm-page-btn{min-width:60px!important;height:56px!important;padding:0 16px!important;border-radius:15px!important;font-size:16px!important}.cm-wide-btn{min-width:128px!important}@media(max-width:700px){.cm-pagination,.cm-page-numbers{gap:8px!important}.cm-page-btn{min-width:48px!important;height:48px!important;padding:0 12px!important;font-size:14px!important}.cm-wide-btn{min-width:100px!important}}

/* v3.1 requested: no color swatches */
.color-swatches{display:none!important}

/* v3.1 consistency fixes */
.color-swatches{display:none!important;}

/* Final media fit: every card image fills its frame. */
.color-image,.cm-video-wrap img,.typography-card img{width:100%!important;height:100%!important;object-fit:cover!important;display:block!important;}