:root{--ink:#111827;--muted:#667085;--surface:#f7f8fc;--brand:#6750f8;--brand-2:#27c4ad;--line:#e7e9f1;--warning:#f59e0b;--shadow:0 18px 50px rgba(24,31,63,.09)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:var(--surface);line-height:1.55}.public-body{background:#fff}.navbar-brand{font-weight:800;letter-spacing:-.9px}.brand-mark{display:inline-grid;place-items:center;width:31px;height:31px;border-radius:10px;background:linear-gradient(135deg,var(--brand),#9a70ff);color:#fff;margin-right:.4rem;box-shadow:0 5px 15px rgba(103,80,248,.36)}.nav-link{font-weight:600;color:#475467}.nav-link:hover,.nav-link.active{color:var(--brand)}.btn{border-radius:11px;font-weight:700;padding:.62rem 1rem}.btn-primary{border:0;background:linear-gradient(135deg,var(--brand),#8e67fa);box-shadow:0 8px 18px rgba(103,80,248,.22)}.btn-primary:hover{background:linear-gradient(135deg,#563eea,#7e55e8);transform:translateY(-1px)}.btn-outline-primary{color:var(--brand);border-color:#cfc8ff}.btn-outline-primary:hover{background:var(--brand);border-color:var(--brand)}.hero{position:relative;overflow:hidden;color:#fff;background:radial-gradient(circle at 17% 15%,rgba(68,212,190,.32),transparent 27%),radial-gradient(circle at 90% 70%,rgba(188,126,255,.45),transparent 34%),linear-gradient(125deg,#171343 0%,#3a2785 52%,#4b38a4 100%);padding:7.2rem 0 6.2rem}.hero:before{content:"";position:absolute;inset:0;opacity:.16;background-image:linear-gradient(30deg,#fff 1px,transparent 1px),linear-gradient(90deg,#fff 1px,transparent 1px);background-size:50px 50px}.hero .container{position:relative}.eyebrow{display:inline-flex;align-items:center;gap:.5rem;padding:.42rem .72rem;border:1px solid rgba(255,255,255,.25);border-radius:30px;background:rgba(255,255,255,.1);font-size:.78rem;font-weight:750;letter-spacing:.06em;text-transform:uppercase}.display-title{font-size:clamp(2.5rem,5vw,4.7rem);letter-spacing:-.065em;line-height:1.02;font-weight:850}.hero p{color:#e8e5ff;font-size:1.13rem;max-width:42rem}.search-shell{padding:.75rem;border-radius:20px;background:#fff;box-shadow:0 20px 42px rgba(12,9,49,.25)}.search-shell .form-control,.search-shell .form-select{border:0;box-shadow:none;padding:.8rem .7rem}.search-shell .input-group-text{background:transparent;border:0;color:var(--brand)}.section{padding:5rem 0}.section-title{font-size:clamp(1.8rem,3vw,2.65rem);font-weight:800;letter-spacing:-.05em}.section-lead{color:var(--muted);max-width:41rem}.image-card{position:relative;border-radius:18px;overflow:hidden;background:#e9e9f0;box-shadow:0 7px 22px rgba(24,31,63,.08);isolation:isolate;height:100%;transition:.28s ease}.image-card:hover{transform:translateY(-7px);box-shadow:var(--shadow)}.image-card img{width:100%;aspect-ratio:1.19;object-fit:cover;display:block;transition:.45s ease}.image-card:hover img{transform:scale(1.05)}.image-card .image-card-content{position:absolute;inset:auto 0 0;padding:1.2rem;background:linear-gradient(transparent,rgba(8,10,27,.9));color:#fff;transform:translateY(10px);transition:.25s ease}.image-card:hover .image-card-content{transform:none}.image-card h3{font-size:1rem;font-weight:750;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.image-card a{color:#fff;text-decoration:none}.image-card .card-meta{font-size:.8rem;color:#e4e5ea}.image-card .card-actions{position:absolute;top:.75rem;right:.75rem;z-index:2;display:flex;gap:.4rem}.round-action{display:grid;place-items:center;width:36px;height:36px;border:0;border-radius:50%;background:rgba(255,255,255,.9);color:#322b61;box-shadow:0 4px 10px rgba(0,0,0,.13)}.round-action:hover{background:#fff;color:var(--brand)}.tag{display:inline-block;border-radius:99px;padding:.25rem .55rem;background:#f0edff;color:#5641c6;font-size:.73rem;font-weight:700}.category-card{height:100%;padding:1.4rem;border:1px solid var(--line);border-radius:18px;background:#fff;transition:.25s}.category-card:hover{border-color:#bdb2ff;transform:translateY(-4px);box-shadow:var(--shadow)}.category-icon{display:grid;place-items:center;width:46px;height:46px;border-radius:15px;background:linear-gradient(135deg,#eeeaff,#dffaf5);font-size:1.35rem;color:var(--brand)}.contributor-card,.price-card,.panel-card{border:1px solid var(--line);background:#fff;border-radius:20px;box-shadow:0 8px 22px rgba(24,31,63,.04)}.contributor-card{padding:1.5rem;text-align:center}.avatar{display:inline-grid;place-items:center;width:54px;height:54px;border-radius:50%;background:linear-gradient(135deg,#d5d0ff,#a7eadf);color:#40318f;font-weight:800}.avatar-lg{width:88px;height:88px;font-size:1.8rem}.price-card{padding:1.7rem;height:100%;position:relative}.price-card.featured{border:2px solid var(--brand);transform:scale(1.025);box-shadow:0 19px 45px rgba(103,80,248,.14)}.price{font-size:2.5rem;font-weight:850;letter-spacing:-.07em}.stat-band{background:#11112a;color:#fff}.stat-number{font-size:2.3rem;font-weight:800}.footer{background:#11112a;color:#d3d5e7}.footer a{color:#c2c5df;text-decoration:none}.footer a:hover{color:#fff}.glass{background:rgba(255,255,255,.72);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.65)}.page-hero{padding:4.2rem 0;background:linear-gradient(125deg,#f1efff,#ecfffb)}.page-hero h1{font-weight:850;letter-spacing:-.055em}.filter-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:1rem}.detail-preview{position:relative;border-radius:22px;overflow:hidden;background:#e9e9f0}.detail-preview img{width:100%;max-height:640px;object-fit:contain;display:block;background:#f1f2f7}.detail-price{font-size:2rem;font-weight:850}.stars{color:#f5a524}.empty-state{padding:4rem 1.2rem;text-align:center;border:1px dashed #cbd0e0;border-radius:18px;background:#fff;color:var(--muted)}
/* portal */.portal{min-height:100vh;background:#f7f8fc}.portal-sidebar{position:fixed;inset:0 auto 0 0;width:260px;background:#11112a;color:#d8d8e9;padding:1.35rem;z-index:1030}.portal-sidebar .navbar-brand{color:#fff}.portal-sidebar nav{margin-top:2rem}.portal-sidebar a{display:flex;align-items:center;gap:.75rem;padding:.68rem .8rem;border-radius:10px;color:#c9cadb;text-decoration:none;font-weight:600;margin:.18rem 0}.portal-sidebar a:hover,.portal-sidebar a.active{color:#fff;background:rgba(255,255,255,.12)}.portal-main{margin-left:260px;min-height:100vh}.portal-topbar{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 2rem;background:rgba(255,255,255,.83);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:1020}.portal-content{padding:2rem}.metric-card{padding:1.25rem;border:1px solid var(--line);border-radius:16px;background:#fff}.metric-card .icon{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:#eeebff;color:var(--brand)}.metric-card .value{font-size:1.65rem;font-weight:800;letter-spacing:-.04em}.table-card{overflow:hidden}.table-card .table{margin-bottom:0}.table>:not(caption)>*>*{padding:1rem;border-color:#eef0f5}.status{display:inline-flex;align-items:center;padding:.26rem .55rem;border-radius:30px;font-size:.75rem;font-weight:750}.status-approved,.status-active,.status-paid,.status-available,.status-verified{background:#ddf7eb;color:#087443}.status-pending,.status-processing,.status-pending_review,.status-awaiting_payment{background:#fff2cf;color:#946200}.status-rejected,.status-blocked,.status-suspended,.status-cancelled{background:#ffe5e6;color:#b32430}.status-duplicate_review{background:#f3e8ff;color:#7d32ac}.upload-drop{border:2px dashed #bcb3f2;border-radius:20px;background:#faf9ff;padding:3rem 1.5rem;text-align:center;cursor:pointer;transition:.2s}.upload-drop.drag{background:#eeeaff;border-color:var(--brand)}.upload-row{background:#fff;border:1px solid var(--line);border-radius:12px;padding:.75rem}.form-control,.form-select{border-color:#dce0ea;border-radius:10px;padding:.65rem .75rem}.form-control:focus,.form-select:focus{border-color:#a69bf3;box-shadow:0 0 0 .24rem rgba(103,80,248,.12)}.auth-wrap{min-height:100vh;background:radial-gradient(circle at 15% 20%,#bcefe7,transparent 30%),radial-gradient(circle at 90% 90%,#d2c9ff,transparent 30%),#f6f7fb}.auth-card{max-width:530px;border:1px solid rgba(255,255,255,.85);border-radius:25px;background:rgba(255,255,255,.86);box-shadow:0 23px 60px rgba(33,28,75,.14);backdrop-filter:blur(12px)}.accordion-button:not(.collapsed){color:var(--brand);background:#f2efff}@media(max-width:991.98px){.portal-sidebar{width:72px;padding:.9rem}.portal-sidebar .brand-text,.portal-sidebar .nav-text{display:none}.portal-sidebar a{justify-content:center;padding:.75rem}.portal-main{margin-left:72px}.portal-topbar{padding:0 1rem}.portal-content{padding:1.2rem}.price-card.featured{transform:none}.hero{padding:5.5rem 0}.section{padding:3.5rem 0}}@media(max-width:575.98px){.portal-sidebar{display:none}.portal-main{margin-left:0}.portal-content{padding:1rem}.portal-topbar{height:62px}.display-title{font-size:2.5rem}.image-card .image-card-content{transform:none}.section{padding:2.8rem 0}}
.portal-sidebar{overflow-y:auto}.portal-nav-label{display:block;margin:1.25rem .75rem .35rem;color:#85869d;font-size:.67rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.status-requires_revision{background:#fff0d5;color:#9a5c00}.status-internal_note{background:#e8ecf5;color:#44516b}

/* ── StockVault visual motion system ───────────────────────────────────── */
:root{--aurora-1:#7158f7;--aurora-2:#23c8ad;--aurora-3:#f4a6cf;--deep:#14122f;--radius-xl:24px;--ease-spring:cubic-bezier(.2,.8,.2,1)}
.public-body{position:relative;background:linear-gradient(180deg,#fff 0%,#fbfbff 46%,#f8fbff 100%);overflow-x:hidden}.public-body:before,.public-body:after{content:"";position:fixed;z-index:-1;display:block;width:34rem;height:34rem;border-radius:50%;filter:blur(78px);opacity:.16;pointer-events:none}.public-body:before{top:18%;left:-18rem;background:var(--aurora-2);animation:sv-drift 16s ease-in-out infinite alternate}.public-body:after{right:-18rem;bottom:8%;background:var(--aurora-3);animation:sv-drift 18s ease-in-out infinite alternate-reverse}
.public-body .navbar{background:rgba(255,255,255,.79)!important;backdrop-filter:blur(18px) saturate(145%);border-color:rgba(225,228,241,.75)!important;box-shadow:0 8px 26px rgba(29,31,67,.035)}.public-body .navbar-brand{transition:transform .35s var(--ease-spring)}.public-body .navbar-brand:hover{transform:translateY(-2px)}.brand-mark{position:relative;overflow:hidden}.brand-mark:after{content:"";position:absolute;inset:-80% 40% auto -60%;width:70%;height:260%;transform:rotate(27deg);background:rgba(255,255,255,.35);animation:sv-sheen 6s ease-in-out infinite}
.btn{position:relative;overflow:hidden;transition:transform .25s var(--ease-spring),box-shadow .25s var(--ease-spring),background .25s ease}.btn:focus-visible,.form-control:focus-visible,.form-select:focus-visible,a:focus-visible{outline:3px solid rgba(103,80,248,.35);outline-offset:3px}.btn-primary:hover{transform:translateY(-3px);box-shadow:0 15px 30px rgba(103,80,248,.3)}.btn-primary:active{transform:translateY(-1px);box-shadow:0 7px 14px rgba(103,80,248,.24)}.btn-primary:before{content:"";position:absolute;inset:0;transform:translateX(-115%) skewX(-20deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.27),transparent);transition:transform .65s ease}.btn-primary:hover:before{transform:translateX(130%) skewX(-20deg)}
.hero{min-height:clamp(480px,64vh,680px);display:flex;align-items:center;background-size:180% 180%;animation:sv-gradient 15s ease infinite}.hero:after{content:"";position:absolute;width:22rem;height:22rem;right:7%;top:9%;border:1px solid rgba(255,255,255,.18);border-radius:38% 62% 57% 43%/42% 48% 52% 58%;box-shadow:inset 0 0 60px rgba(255,255,255,.06),0 0 80px rgba(107,91,255,.2);animation:sv-orbit 17s linear infinite;pointer-events:none}.hero .container{z-index:1}.hero .search-shell{border:1px solid rgba(255,255,255,.65);transition:transform .35s var(--ease-spring),box-shadow .35s ease}.hero .search-shell:focus-within{transform:translateY(-4px);box-shadow:0 28px 60px rgba(12,9,49,.34)}.eyebrow{box-shadow:0 8px 24px rgba(7,7,37,.12);backdrop-filter:blur(10px)}
.page-hero{position:relative;overflow:hidden;background:linear-gradient(120deg,#f4f1ff 0%,#ecfffb 48%,#fff4fa 100%);background-size:180% 180%;animation:sv-gradient 16s ease infinite}.page-hero:after{content:"";position:absolute;right:8%;top:-70px;width:220px;height:220px;border-radius:50%;border:22px solid rgba(113,88,247,.08);box-shadow:0 0 80px rgba(35,200,173,.12);pointer-events:none}.page-hero .container{position:relative;z-index:1}
.section{position:relative}.section-title{background:linear-gradient(100deg,#111827 5%,#4935a2 86%);-webkit-background-clip:text;background-clip:text;color:transparent}.image-card{border:1px solid rgba(255,255,255,.45);transform:translateZ(0);will-change:transform}.image-card:before{content:"";position:absolute;z-index:1;inset:0;border-radius:inherit;border:1px solid rgba(255,255,255,.18);pointer-events:none}.image-card:hover{transform:translateY(-9px) rotate(.25deg);box-shadow:0 26px 50px rgba(24,31,63,.17)}.image-card .card-actions{opacity:.15;transform:translateY(-5px);transition:opacity .25s ease,transform .25s var(--ease-spring)}.image-card:hover .card-actions,.image-card:focus-within .card-actions{opacity:1;transform:translateY(0)}.round-action{transition:transform .22s var(--ease-spring),background .22s ease,color .22s ease}.round-action:hover{transform:scale(1.12) rotate(7deg)}
.category-card,.contributor-card,.price-card,.panel-card,.metric-card{position:relative;overflow:hidden;transition:transform .3s var(--ease-spring),box-shadow .3s ease,border-color .3s ease}.category-card:before,.panel-card:before,.metric-card:before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,var(--aurora-1),var(--aurora-2),var(--aurora-3));transform:scaleX(0);transform-origin:left;transition:transform .35s ease}.category-card:hover:before,.panel-card:hover:before,.metric-card:hover:before{transform:scaleX(1)}.category-card:hover,.contributor-card:hover,.panel-card:hover,.metric-card:hover{transform:translateY(-5px);border-color:rgba(113,88,247,.3);box-shadow:0 20px 42px rgba(28,31,68,.1)}.category-icon{transition:transform .35s var(--ease-spring),box-shadow .35s ease}.category-card:hover .category-icon{transform:rotate(-7deg) scale(1.1);box-shadow:0 11px 24px rgba(103,80,248,.17)}.contributor-card:hover .avatar{animation:sv-bob .75s var(--ease-spring)}.price-card{background:linear-gradient(145deg,#fff,#fbfaff)}.price-card.featured:before{content:"Recommended";position:absolute;top:17px;right:-38px;transform:rotate(43deg);padding:4px 42px;background:linear-gradient(90deg,var(--brand),#8e67fa);color:#fff;font-size:.65rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}.price-card.featured:hover{transform:translateY(-6px) scale(1.025)}
.filter-card{background:rgba(255,255,255,.84);box-shadow:0 14px 40px rgba(25,30,66,.06);backdrop-filter:blur(14px)}.detail-preview{box-shadow:0 24px 56px rgba(24,31,63,.13)}.detail-preview:after{content:"Protected preview";position:absolute;left:16px;bottom:16px;padding:5px 10px;border-radius:99px;background:rgba(15,16,44,.75);backdrop-filter:blur(8px);font-size:.72rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#fff}
.footer{position:relative;overflow:hidden;background:radial-gradient(circle at 12% 10%,rgba(113,88,247,.45),transparent 25%),radial-gradient(circle at 84% 80%,rgba(35,200,173,.25),transparent 28%),#11112a}.footer:before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.13) 1px,transparent 1px);background-size:26px 26px;mask-image:linear-gradient(90deg,#000,transparent 72%);opacity:.28;pointer-events:none}.footer .container{position:relative}
.portal{background:radial-gradient(circle at 92% 4%,rgba(113,88,247,.12),transparent 22%),radial-gradient(circle at 28% 90%,rgba(35,200,173,.1),transparent 25%),#f7f8fc}.portal-sidebar{background:linear-gradient(180deg,#151331 0%,#101125 100%);box-shadow:14px 0 38px rgba(13,13,38,.08)}.portal-sidebar a{transition:transform .2s var(--ease-spring),color .2s ease,background .2s ease}.portal-sidebar a:hover{transform:translateX(4px)}.portal-sidebar a.active{background:linear-gradient(90deg,rgba(113,88,247,.6),rgba(113,88,247,.12));box-shadow:inset 3px 0 0 #a897ff}.portal-topbar{box-shadow:0 7px 24px rgba(27,29,62,.035)}.metric-card{background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(249,249,255,.93))}.metric-card .value{background:linear-gradient(95deg,#181735,#5a42ce);-webkit-background-clip:text;background-clip:text;color:transparent}.table-card .table tbody tr{transition:background .2s ease,transform .2s ease}.table-card .table tbody tr:hover{background:rgba(113,88,247,.045)}.status{box-shadow:inset 0 0 0 1px rgba(0,0,0,.025)}
.auth-wrap:before{content:"";position:fixed;z-index:-1;width:420px;height:420px;top:-140px;left:-110px;border-radius:45% 55% 50% 50%;background:linear-gradient(135deg,rgba(113,88,247,.22),rgba(35,200,173,.18));filter:blur(12px);animation:sv-drift 12s ease-in-out infinite alternate}.auth-card{position:relative;overflow:hidden}.auth-card:before{content:"";position:absolute;width:170px;height:170px;right:-80px;top:-80px;border-radius:50%;background:radial-gradient(circle,rgba(113,88,247,.15),transparent 68%)}
[data-aos]{will-change:transform,opacity}@keyframes sv-gradient{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}@keyframes sv-drift{from{transform:translate3d(-20px,-10px,0) scale(.96)}to{transform:translate3d(36px,22px,0) scale(1.06)}}@keyframes sv-orbit{0%{transform:rotate(0) scale(1)}50%{transform:rotate(180deg) scale(1.08)}100%{transform:rotate(360deg) scale(1)}}@keyframes sv-sheen{0%,72%,100%{transform:translateX(-160%) rotate(27deg)}84%{transform:translateX(380%) rotate(27deg)}}@keyframes sv-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@media (max-width:991.98px){.hero:after{width:14rem;height:14rem;right:-4rem;top:4rem}.public-body:before,.public-body:after{opacity:.1}.portal-sidebar a:hover{transform:none}.price-card.featured:hover{transform:translateY(-4px)}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.animate__animated,.hero,.page-hero,.public-body:before,.public-body:after,.auth-wrap:before,.brand-mark:after{animation:none!important}.btn,.image-card,.category-card,.contributor-card,.price-card,.panel-card,.metric-card,.image-card img,.image-card .card-actions{transition:none!important}.image-card:hover,.category-card:hover,.contributor-card:hover,.panel-card:hover,.metric-card:hover,.btn-primary:hover{transform:none!important}}
.brand-logo{width:32px;height:32px;object-fit:contain;border-radius:10px;margin-right:.42rem;vertical-align:-7px;filter:drop-shadow(0 5px 12px rgba(78,60,172,.2))}.brand-setting-preview{display:block;width:54px;height:54px;object-fit:contain;border:1px solid var(--line);border-radius:12px;padding:5px;background:#fff}

/* Admin command center */
.metric-icon{display:inline-grid;place-items:center;width:2.45rem;height:2.45rem;border-radius:.85rem;font-size:1.1rem}.admin-chart-bar{min-height:4px;background:linear-gradient(180deg,#7b61ff 0%,#32c9ad 100%);box-shadow:0 6px 16px rgba(91,72,212,.18);transition:height .35s ease,filter .2s ease}.admin-chart-bar:hover{filter:brightness(1.08)}

/* Premium SaaS polish: shared loading, pagination, controls and responsive tables */
.skeleton{position:relative;overflow:hidden;background:#edf0f6;border-radius:.8rem;min-height:1em;color:transparent!important}.skeleton:after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.72),transparent);animation:cadpng-shimmer 1.45s infinite}@keyframes cadpng-shimmer{to{transform:translateX(100%)}}.pagination{gap:.35rem}.pagination .page-link{border:0;border-radius:.65rem;color:#372b86;font-weight:700;min-width:2.35rem;text-align:center;box-shadow:0 2px 8px rgba(43,35,99,.06)}.pagination .page-item.active .page-link{background:linear-gradient(135deg,#5d45d4,#8068f0);box-shadow:0 8px 18px rgba(93,69,212,.25)}.filter-card{border:1px solid rgba(95,74,202,.12);box-shadow:0 14px 38px rgba(34,27,78,.07);background:linear-gradient(135deg,#fff,#faf9ff)}.table-card .table thead th{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:#756f8b;background:#faf9ff}.table-card .table tbody tr{transition:background .18s ease}.table-card .table tbody tr:hover{background:#faf9ff}.form-control,.form-select{border-color:#dedbea;min-height:2.8rem}.form-control:focus,.form-select:focus{border-color:#725ae2;box-shadow:0 0 0 .22rem rgba(114,90,226,.14)}.btn{font-weight:700;border-radius:.72rem}.empty-state{border:1px dashed #d6d0ef;background:linear-gradient(135deg,#fbfaff,#f5f3ff);border-radius:1rem;padding:3rem 1.25rem;text-align:center;color:#716b82}@media(max-width:767px){.portal-content{padding:1rem}.panel-card{border-radius:1rem}.table-card .table{min-width:620px}.section{padding:3.5rem 0}}
:root{--sv-primary:#5d45d4;--sv-secondary:#32c9ad}.btn-primary{background-color:var(--sv-primary);border-color:var(--sv-primary)}.btn-primary:hover,.btn-primary:focus{background-color:#4a38b8;border-color:#4a38b8;background-color:color-mix(in srgb,var(--sv-primary) 86%,#000);border-color:color-mix(in srgb,var(--sv-primary) 86%,#000)}

/* ── Phase 13.3 — Accessibility Enhancements ────────────────────────────── */

/* Enhanced focus indicators for all interactive elements */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--brand, #6750f8);
    outline-offset: 2px;
    border-radius: 4px;
}

/* High-contrast focus for dark backgrounds */
.portal-sidebar a:focus-visible {
    outline-color: #a897ff;
    outline-offset: 3px;
    background: rgba(255, 255, 255, 0.15);
}

.footer a:focus-visible {
    outline-color: #fff;
    outline-offset: 3px;
}

/* Focus for buttons without outline-primary */
.btn:focus-visible {
    outline: 3px solid var(--brand, #6750f8);
    outline-offset: 2px;
    box-shadow: 0 0 0 0.25rem rgba(103, 80, 248, 0.25);
}

.btn-close:focus-visible {
    outline: 3px solid var(--brand, #6750f8);
    outline-offset: 2px;
    box-shadow: none;
}

/* Ensure form controls have visible focus */
.form-control:focus-visible,
.form-select:focus-visible {
    border-color: var(--brand, #6750f8);
    box-shadow: 0 0 0 0.25rem rgba(103, 80, 248, 0.25);
}

/* Improve contrast for muted text (WCAG AA) */
.text-muted {
    color: #555a6e !important;
}

/* Ensure status badges have sufficient contrast */
.status {
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* Screen reader only class for custom use */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Skip link styling */
.visually-hidden-focusable:focus {
    position: fixed !important;
    top: 10px !important;
    left: 10px !important;
    z-index: 99999 !important;
    padding: 12px 24px !important;
    background: var(--brand, #6750f8) !important;
    color: #fff !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    clip: auto !important;
    width: auto !important;
    height: auto !important;
}

/* Improve link underline visibility */
a:not(.btn):not(.nav-link):not(.navbar-brand):not(.dropdown-item):not(.page-link):not(.round-action):not(.alert-link):focus-visible {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Ensure carousel controls are accessible */
.carousel-control-prev:focus-visible,
.carousel-control-next:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
    border-radius: 8px;
}

/* Improve table accessibility */
.table thead th {
    scope: col;
}

/* Modal backdrop focus trap indicator */
.modal.show {
    outline: none;
}

/* Improve accordion accessibility */
.accordion-button:focus-visible {
    outline: 3px solid var(--brand, #6750f8);
    outline-offset: -3px;
    box-shadow: none;
}

/* Ensure sufficient touch target size (44x44 WCAG) */
.round-action,
.btn-close {
    min-width: 44px;
    min-height: 44px;
}

/* Improve pagination accessibility */
.pagination .page-link:focus-visible {
    outline: 3px solid var(--brand, #6750f8);
    outline-offset: 2px;
    z-index: 3;
}

/* Improve form check accessibility */
.form-check-input:focus-visible {
    outline: 3px solid var(--brand, #6750f8);
    outline-offset: 2px;
    box-shadow: none;
}

/* Ensure badge has sufficient contrast */
.badge {
    font-weight: 700;
}

/* Improve dropdown accessibility */
.dropdown-item:focus-visible {
    outline: 3px solid var(--brand, #6750f8);
    outline-offset: -3px;
    background-color: rgba(103, 80, 248, 0.1);
}

/* Improve alert accessibility */
.alert:focus-visible {
    outline: 3px solid var(--brand, #6750f8);
    outline-offset: 2px;
}

/* Ensure breadcrumb accessibility */
.breadcrumb-item a:focus-visible {
    outline: 3px solid var(--brand, #6750f8);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Improve tag accessibility */
.tag:focus-visible {
    outline: 3px solid var(--brand, #6750f8);
    outline-offset: 2px;
}

/* Ensure image card actions are accessible */
.image-card .card-actions button:focus-visible,
.image-card .card-actions a:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
}

/* Improve search shell accessibility */
.search-shell:focus-within {
    outline: 3px solid var(--brand, #6750f8);
    outline-offset: 2px;
}

/* Ensure upload drop zone is accessible */
.upload-drop:focus-visible {
    outline: 3px solid var(--brand, #6750f8);
    outline-offset: 2px;
}

/* Improve category card accessibility */
.category-card a:focus-visible {
    outline: 3px solid var(--brand, #6750f8);
    outline-offset: 2px;
    border-radius: 18px;
}

/* Ensure price card accessibility */
.price-card:focus-within {
    outline: 3px solid var(--brand, #6750f8);
    outline-offset: 2px;
}

/* Improve contributor card accessibility */
.contributor-card a:focus-visible {
    outline: 3px solid var(--brand, #6750f8);
    outline-offset: 2px;
}

/* Ensure panel card accessibility */
.panel-card a:focus-visible {
    outline: 3px solid var(--brand, #6750f8);
    outline-offset: 2px;
}

/* Improve metric card accessibility */
.metric-card:focus-visible {
    outline: 3px solid var(--brand, #6750f8);
    outline-offset: 2px;
}

/* Ensure filter card accessibility */
.filter-card input:focus-visible,
.filter-card select:focus-visible {
    border-color: var(--brand, #6750f8);
    box-shadow: 0 0 0 0.25rem rgba(103, 80, 248, 0.25);
}

/* Improve auth card accessibility */
.auth-card input:focus-visible,
.auth-card select:focus-visible {
    border-color: var(--brand, #6750f8);
    box-shadow: 0 0 0 0.25rem rgba(103, 80, 248, 0.25);
}

/* Ensure detail preview accessibility */
.detail-preview button:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
}

/* Improve empty state accessibility */
.empty-state:focus-visible {
    outline: 3px solid var(--brand, #6750f8);
    outline-offset: 2px;
}

/* Ensure skeleton accessibility */
.skeleton {
    aria-busy: true;
}

/* Improve toast accessibility */
.alert[role="alert"] {
    aria-live: assertive;
}

/* Ensure modal accessibility */
.modal:focus {
    outline: none;
}

.modal-dialog:focus-visible {
    outline: 3px solid var(--brand, #6750f8);
    outline-offset: 2px;
}

/* Improve form label visibility */
.form-label {
    font-weight: 600;
    color: var(--ink, #111827);
}

/* Ensure form error accessibility */
.is-invalid:focus-visible {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
}

/* Improve form success accessibility */
.is-valid:focus-visible {
    border-color: #198754;
    box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25);
}

/* Ensure form warning accessibility */
.is-warning:focus-visible {
    border-color: #ffc107;
    box-shadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.25);
}

/* Improve form info accessibility */
.is-info:focus-visible {
    border-color: #0dcaf0;
    box-shadow: 0 0 0 0.25rem rgba(13, 202, 240, 0.25);
}

/* Ensure form light accessibility */
.is-light:focus-visible {
    border-color: #f8f9fa;
    box-shadow: 0 0 0 0.25rem rgba(248, 249, 250, 0.25);
}

/* Improve form dark accessibility */
.is-dark:focus-visible {
    border-color: #212529;
    box-shadow: 0 0 0 0.25rem rgba(33, 37, 41, 0.25);
}

/* Ensure form primary accessibility */
.is-primary:focus-visible {
    border-color: var(--brand, #6750f8);
    box-shadow: 0 0 0 0.25rem rgba(103, 80, 248, 0.25);
}

/* Improve form secondary accessibility */
.is-secondary:focus-visible {
    border-color: #6c757d;
    box-shadow: 0 0 0 0.25rem rgba(108, 117, 125, 0.25);
}

/* Ensure form success accessibility */
.is-success:focus-visible {
    border-color: #198754;
    box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25);
}

/* Improve form danger accessibility */
.is-danger:focus-visible {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
}

/* Ensure form warning accessibility */
.is-warning:focus-visible {
    border-color: #ffc107;
    box-shadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.25);
}

/* Improve form info accessibility */
.is-info:focus-visible {
    border-color: #0dcaf0;
    box-shadow: 0 0 0 0.25rem rgba(13, 202, 240, 0.25);
}

/* Ensure form light accessibility */
.is-light:focus-visible {
    border-color: #f8f9fa;
    box-shadow: 0 0 0 0.25rem rgba(248, 249, 250, 0.25);
}

/* Improve form dark accessibility */
.is-dark:focus-visible {
    border-color: #212529;
    box-shadow: 0 0 0 0.25rem rgba(33, 37, 41, 0.25);
}

/* ── Phase 13.4 — Responsive QA Enhancements ────────────────────────────── */

/* Mobile-first table improvements */
@media (max-width: 767px) {
    .table-card .table {
        font-size: .85rem;
    }
    .table-card .table thead th {
        font-size: .68rem;
        padding: .65rem .5rem;
    }
    .table-card .table td {
        padding: .65rem .5rem;
    }
    /* Stack definition lists on mobile */
    dl.row dt, dl.row dd {
        padding: .25rem 0;
    }
    dl.row dt {
        font-size: .8rem;
    }
    /* Modal adjustments */
    .modal-dialog {
        margin: .5rem;
    }
    .modal-body {
        padding: 1rem;
    }
    /* Form groups stack on mobile */
    .row.g-3 > [class*="col-"] {
        margin-bottom: .5rem;
    }
    /* Dashboard metric cards */
    .metric-card .value {
        font-size: 1.3rem;
    }
    /* Hero section */
    .hero {
        padding: 3.5rem 0;
    }
    .display-title {
        font-size: 2rem;
    }
    /* Stat band */
    .stat-band .stat-number {
        font-size: 1.5rem;
    }
    /* Price cards */
    .price-card {
        margin-bottom: 1rem;
    }
    /* Contributor cards */
    .contributor-card {
        margin-bottom: 1rem;
    }
    /* Image grid */
    .image-card .card-actions {
        opacity: 1;
    }
    /* Filter sidebar */
    .filter-card {
        margin-bottom: 1rem;
    }
    /* Pagination */
    .pagination {
        flex-wrap: wrap;
        justify-content: center;
    }
    /* Footer */
    .footer .col-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }
    /* Auth card */
    .auth-card {
        margin: 1rem;
        padding: 1.5rem;
    }
    /* Upload area */
    .upload-drop {
        padding: 2rem 1rem;
    }
    /* Bulk actions toolbar */
    .bulk-toolbar {
        flex-direction: column;
        gap: .5rem;
    }
    .bulk-toolbar .btn {
        width: 100%;
    }
}

/* Tablet adjustments */
@media (min-width: 768px) and (max-width: 991.98px) {
    .table-card .table {
        font-size: .9rem;
    }
    .metric-card .value {
        font-size: 1.45rem;
    }
}

/* Ensure no horizontal overflow */
html, body {
    overflow-x: hidden;
}

/* Responsive images by default */
img {
    max-width: 100%;
    height: auto;
}

/* Code blocks don't overflow */
code, pre {
    overflow-x: auto;
    max-width: 100%;
}

/* Long words break on mobile */
@media (max-width: 575.98px) {
    .panel-card {
        word-break: break-word;
    }
    .font-monospace {
        font-size: .8rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CadPNG — Shutterstock-Inspired Creative UI
   Lightweight animations, modern grids, stunning hover effects
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Hero Section (Shutterstock-style) ─────────────────────────────────── */
.hero-cadpng {
    position: relative;
    min-height: 85vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
}

.hero-cadpng::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 30%, rgba(93, 69, 212, 0.3) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(50, 201, 173, 0.25) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.03) 0%, transparent 70%);
    animation: heroGlow 8s ease-in-out infinite alternate;
}

@keyframes heroGlow {
    0% { opacity: 0.7; transform: scale(1); }
    100% { opacity: 1; transform: scale(1.05); }
}

.hero-cadpng .hero-content {
    position: relative;
    z-index: 2;
}

.hero-cadpng h1 {
    font-size: clamp(2.5rem, 6vw, 5rem);
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1.05;
    background: linear-gradient(135deg, #fff 0%, #c4b5fd 50%, #5eead4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: textShimmer 3s ease-in-out infinite alternate;
}

@keyframes textShimmer {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

.hero-cadpng .hero-subtitle {
    font-size: 1.25rem;
    color: rgba(255, 255, 255, 0.7);
    max-width: 600px;
    line-height: 1.6;
}

/* Floating shapes in hero */
.hero-shapes {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.hero-shape {
    position: absolute;
    border-radius: 50%;
    opacity: 0.1;
    animation: float 20s ease-in-out infinite;
}

.hero-shape:nth-child(1) {
    width: 300px; height: 300px;
    background: linear-gradient(135deg, #8b5cf6, #06b6d4);
    top: -10%; right: -5%;
    animation-delay: 0s;
}

.hero-shape:nth-child(2) {
    width: 200px; height: 200px;
    background: linear-gradient(135deg, #f472b6, #fbbf24);
    bottom: -5%; left: 10%;
    animation-delay: -5s;
}

.hero-shape:nth-child(3) {
    width: 150px; height: 150px;
    background: linear-gradient(135deg, #34d399, #3b82f6);
    top: 30%; right: 20%;
    animation-delay: -10s;
}

@keyframes float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-20px) rotate(5deg); }
    50% { transform: translateY(10px) rotate(-3deg); }
    75% { transform: translateY(-15px) rotate(2deg); }
}

/* ── Search Bar (Shutterstock-style) ──────────────────────────────────── */
.search-hero {
    max-width: 700px;
    margin: 2rem auto 0;
}

.search-hero .input-group {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 60px;
    padding: 6px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.search-hero .input-group:focus-within {
    transform: translateY(-3px);
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.4);
}

.search-hero .form-control {
    border: none;
    background: transparent;
    font-size: 1.1rem;
    padding: 0.8rem 1.2rem;
    box-shadow: none !important;
}

.search-hero .btn-search {
    border-radius: 50px;
    padding: 0.8rem 2rem;
    background: linear-gradient(135deg, #5d45d4, #8b5cf6);
    border: none;
    color: white;
    font-weight: 700;
    transition: all 0.3s ease;
}

.search-hero .btn-search:hover {
    background: linear-gradient(135deg, #4c3bb5, #7c3aed);
    transform: scale(1.05);
}

/* ── Image Cards (Shutterstock-style) ─────────────────────────────────── */
.image-card-shutterstock {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background: #1a1a2e;
    cursor: pointer;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s ease;
}

.image-card-shutterstock:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
}

.image-card-shutterstock .card-image {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4/3;
}

.image-card-shutterstock .card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.image-card-shutterstock:hover .card-image img {
    transform: scale(1.08);
}

/* Overlay gradient */
.image-card-shutterstock .card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.85) 0%,
        rgba(0, 0, 0, 0.2) 40%,
        transparent 100%
    );
    opacity: 0;
    transition: opacity 0.35s ease;
}

.image-card-shutterstock:hover .card-overlay {
    opacity: 1;
}

/* Action buttons (appear on hover) */
.image-card-shutterstock .card-actions {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    opacity: 0;
    transform: translateX(10px);
    transition: all 0.3s ease 0.1s;
}

.image-card-shutterstock:hover .card-actions {
    opacity: 1;
    transform: translateX(0);
}

.image-card-shutterstock .action-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    display: grid;
    place-items: center;
    color: #333;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    backdrop-filter: blur(10px);
}

.image-card-shutterstock .action-btn:hover {
    background: #5d45d4;
    color: white;
    transform: scale(1.15);
}

/* Card info (bottom) */
.image-card-shutterstock .card-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 16px;
    color: white;
    transform: translateY(10px);
    opacity: 0;
    transition: all 0.35s ease;
}

.image-card-shutterstock:hover .card-info {
    transform: translateY(0);
    opacity: 1;
}

.image-card-shutterstock .card-title {
    font-size: 0.95rem;
    font-weight: 700;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.image-card-shutterstock .card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 6px;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
}

.image-card-shutterstock .card-price {
    font-weight: 800;
    color: #5eead4;
    font-size: 1rem;
}

/* Badge */
.image-card-shutterstock .card-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 4px 10px;
    border-radius: 20px;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    backdrop-filter: blur(10px);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.image-card-shutterstock:hover .card-badge {
    opacity: 1;
}

/* ── Category Cards ───────────────────────────────────────────────────── */
.category-card-modern {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    height: 220px;
    cursor: pointer;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.category-card-modern:hover {
    transform: translateY(-6px) scale(1.02);
}

.category-card-modern .category-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.6s ease;
}

.category-card-modern:hover .category-bg {
    transform: scale(1.1);
}

.category-card-modern .category-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(93, 69, 212, 0.8), rgba(50, 201, 173, 0.6));
    transition: opacity 0.3s ease;
}

.category-card-modern:hover .category-overlay {
    opacity: 0.9;
}

.category-card-modern .category-content {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 24px;
    color: white;
}

.category-card-modern h3 {
    font-size: 1.3rem;
    font-weight: 800;
    margin: 0;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.category-card-modern .category-count {
    font-size: 0.85rem;
    opacity: 0.8;
    margin-top: 4px;
}

/* ── Contributor Cards ────────────────────────────────────────────────── */
.contributor-card-modern {
    text-align: center;
    padding: 32px 24px;
    border-radius: 20px;
    background: white;
    border: 1px solid rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
}

.contributor-card-modern:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(93, 69, 212, 0.12);
    border-color: rgba(93, 69, 212, 0.2);
}

.contributor-card-modern .avatar-modern {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #5d45d4, #32c9ad);
    display: grid;
    place-items: center;
    margin: 0 auto 16px;
    color: white;
    font-size: 1.8rem;
    font-weight: 800;
    transition: transform 0.3s ease;
}

.contributor-card-modern:hover .avatar-modern {
    transform: scale(1.1) rotate(5deg);
}

/* ── Stats Counter Animation ──────────────────────────────────────────── */
.stat-counter {
    text-align: center;
    padding: 2rem;
}

.stat-counter .stat-number {
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 900;
    background: linear-gradient(135deg, #5d45d4, #32c9ad);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
}

.stat-counter .stat-label {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 8px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
}

/* ── Section Headers ──────────────────────────────────────────────────── */
.section-header {
    text-align: center;
    margin-bottom: 3rem;
}

.section-header h2 {
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    font-weight: 900;
    letter-spacing: -0.03em;
    margin-bottom: 0.5rem;
}

.section-header p {
    color: #6b7280;
    font-size: 1.1rem;
    max-width: 600px;
    margin: 0 auto;
}

/* ── Pricing Cards ────────────────────────────────────────────────────── */
.pricing-card-modern {
    border-radius: 24px;
    padding: 2rem;
    background: white;
    border: 2px solid transparent;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.pricing-card-modern.featured {
    border-color: #5d45d4;
    transform: scale(1.05);
}

.pricing-card-modern.featured::before {
    content: 'Most Popular';
    position: absolute;
    top: 16px;
    right: -30px;
    background: linear-gradient(135deg, #5d45d4, #8b5cf6);
    color: white;
    padding: 4px 40px;
    font-size: 0.75rem;
    font-weight: 700;
    transform: rotate(45deg);
}

.pricing-card-modern:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 50px rgba(93, 69, 212, 0.15);
}

.pricing-card-modern .price {
    font-size: 3rem;
    font-weight: 900;
    color: #1a1a2e;
}

.pricing-card-modern .price span {
    font-size: 1rem;
    color: #6b7280;
    font-weight: 400;
}

/* ── Smooth Scroll Reveal ─────────────────────────────────────────────── */
.reveal {
    opacity: 1;
    transform: none;
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.visible {
    opacity: 1;
    transform: none;
}

/* Stagger children */
.reveal-stagger > * {
    opacity: 1;
    transform: none;
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.reveal-stagger.visible > *:nth-child(1) { transition-delay: 0.1s; opacity: 1; transform: none; }
.reveal-stagger.visible > *:nth-child(2) { transition-delay: 0.2s; opacity: 1; transform: none; }
.reveal-stagger.visible > *:nth-child(3) { transition-delay: 0.3s; opacity: 1; transform: none; }
.reveal-stagger.visible > *:nth-child(4) { transition-delay: 0.4s; opacity: 1; transform: none; }
.reveal-stagger.visible > *:nth-child(5) { transition-delay: 0.5s; opacity: 1; transform: none; }
.reveal-stagger.visible > *:nth-child(6) { transition-delay: 0.6s; opacity: 1; transform: none; }

/* ── Marquee/Ticker ───────────────────────────────────────────────────── */
.ticker-wrap {
    overflow: hidden;
    white-space: nowrap;
    background: linear-gradient(135deg, #5d45d4, #32c9ad);
    padding: 12px 0;
}

.ticker-content {
    display: inline-block;
    animation: ticker 30s linear infinite;
}

.ticker-content span {
    display: inline-block;
    padding: 0 2rem;
    color: white;
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.05em;
}

@keyframes ticker {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ── Glassmorphism Cards ──────────────────────────────────────────────── */
.glass-card {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 20px;
    padding: 2rem;
    transition: all 0.3s ease;
}

.glass-card:hover {
    background: rgba(255, 255, 255, 0.85);
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

/* ── Button Styles ────────────────────────────────────────────────────── */
.btn-cadpng {
    background: linear-gradient(135deg, #5d45d4, #8b5cf6);
    color: white;
    border: none;
    border-radius: 50px;
    padding: 12px 32px;
    font-weight: 700;
    font-size: 1rem;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.btn-cadpng::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #4c3bb5, #7c3aed);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.btn-cadpng:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(93, 69, 212, 0.4);
    color: white;
}

.btn-cadpng:hover::before {
    opacity: 1;
}

.btn-cadpng span {
    position: relative;
    z-index: 2;
}

.btn-cadpng-outline {
    background: transparent;
    color: #5d45d4;
    border: 2px solid #5d45d4;
    border-radius: 50px;
    padding: 10px 30px;
    font-weight: 700;
    transition: all 0.3s ease;
}

.btn-cadpng-outline:hover {
    background: #5d45d4;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(93, 69, 212, 0.3);
}

/* ── Reduced Motion ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .hero-cadpng::before,
    .hero-shape,
    .ticker-content,
    .reveal,
    .reveal-stagger > * {
        animation: none !important;
        transition: none !important;
    }
    .image-card-shutterstock:hover,
    .category-card-modern:hover,
    .contributor-card-modern:hover,
    .pricing-card-modern:hover {
        transform: none;
    }
}

/* ── Mobile Adjustments ───────────────────────────────────────────────── */
@media (max-width: 767px) {
    .hero-cadpng {
        min-height: 70vh;
        padding: 2rem 0;
    }
    .hero-cadpng h1 {
        font-size: 2.2rem;
    }
    .image-card-shutterstock .card-actions {
        opacity: 1;
        transform: none;
    }
    .image-card-shutterstock .card-info {
        opacity: 1;
        transform: none;
    }
    .image-card-shutterstock .card-badge {
        opacity: 1;
    }
    .pricing-card-modern.featured {
        transform: none;
    }
    .category-card-modern {
        height: 180px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Portal Layout — Modern Sidebar
   ═══════════════════════════════════════════════════════════════════════════ */
.portal-sidebar {
    background: linear-gradient(180deg, #0f0c29 0%, #1a1a3e 100%);
    border-right: 1px solid rgba(255,255,255,0.06);
}

.portal-sidebar .portal-brand {
    padding: 1.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.portal-sidebar .portal-brand a {
    color: white;
    font-weight: 800;
    font-size: 1.2rem;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
}

.portal-sidebar nav a {
    color: rgba(255,255,255,0.5);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0.6rem 1.2rem;
    border-radius: 10px;
    margin: 2px 8px;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.portal-sidebar nav a:hover {
    color: white;
    background: rgba(255,255,255,0.06);
}

.portal-sidebar nav a.active {
    color: white;
    background: linear-gradient(135deg, rgba(93,69,212,0.3), rgba(50,201,173,0.2));
    font-weight: 600;
}

.portal-sidebar .portal-nav-label {
    color: rgba(255,255,255,0.3);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 1rem 1.2rem 0.3rem;
}

.portal-topbar {
    background: white;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    padding: 1rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.portal-content {
    padding: 1.5rem;
    background: #f8f9ff;
    min-height: calc(100vh - 60px);
}

/* Metric Cards */
.metric-card {
    background: white;
    border-radius: 16px;
    padding: 1.2rem;
    border: 1px solid rgba(0,0,0,0.06);
    transition: all 0.3s ease;
}

.metric-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.06);
}

.metric-card .value {
    font-size: 1.8rem;
    font-weight: 900;
    color: #1a1a2e;
}

/* Table Cards */
.table-card {
    background: white;
    border-radius: 20px;
    border: 1px solid rgba(0,0,0,0.06);
    overflow: hidden;
}

.table-card .table {
    margin-bottom: 0;
}

.table-card .table thead th {
    background: #f8f9ff;
    font-size: 0.8rem;
    font-weight: 700;
    color: #6b7280;
    border: none;
    padding: 0.8rem 1rem;
}

.table-card .table tbody td {
    padding: 0.8rem 1rem;
    vertical-align: middle;
}

/* Status Badges */
.status {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
}

.status-active { background: #d1fae5; color: #059669; }
.status-pending { background: #fef3c7; color: #d97706; }
.status-expired { background: #fee2e2; color: #ef4444; }
.status-completed { background: #d1fae5; color: #059669; }
.status-processing { background: #dbeafe; color: #3b82f6; }
.status-refunded { background: #fef3c7; color: #d97706; }
.status-cancelled { background: #f3f4f6; color: #6b7280; }

/* ═══════════════════════════════════════════════════════════════════════
   Interaction utilities
   Replace inline onmouseover/onmouseout handlers, which a nonce-based
   Content-Security-Policy blocks. Kept at the end so they win over
   component rules when both set the same property.
   ═══════════════════════════════════════════════════════════════════════ */

.hover-lift,
.hover-lift-sm,
.hover-lift-lg,
.hover-lift-xl,
.hover-shadow {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    will-change: transform;
}

.hover-lift-sm:hover { transform: translateY(-3px); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06); }
.hover-lift:hover    { transform: translateY(-4px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08); }
.hover-lift-lg:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(93, 69, 212, 0.1); }
.hover-lift-xl:hover { transform: translateY(-8px); box-shadow: 0 25px 50px rgba(93, 69, 212, 0.15); }
.hover-shadow:hover  { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06); }

@media (prefers-reduced-motion: reduce) {
    .hover-lift,
    .hover-lift-sm,
    .hover-lift-lg,
    .hover-lift-xl,
    .hover-shadow { transition: none; }
    .hover-lift-sm:hover,
    .hover-lift:hover,
    .hover-lift-lg:hover,
    .hover-lift-xl:hover { transform: none; }
}

/* Footer + dark-surface links that brighten on hover */
.link-hover-white { transition: color 0.2s ease; }
.link-hover-white:hover,
.footer-link:hover { color: #fff !important; }

.footer-link { color: rgba(255, 255, 255, 0.5); text-decoration: none; transition: color 0.2s ease; }

/* Neutral chip that tints to the brand colour on hover (copy buttons) */
.chip-hover {
    background: #f3f4f6; color: #6b7280;
    transition: background 0.2s ease, color 0.2s ease;
}
.chip-hover:hover { background: #ede9fe; color: #5d45d4; }