/* Claymorphism theme. Active only when <html data-ui="clay">; remove the setting value to return to glass. */
html[data-ui="clay"]{color-scheme:light;--bg:#e9e4fb;--ink:#2a2152;--muted:#5b5285;--accent:#5a3bd6;--line:rgba(110,90,190,.16);--glass:#f6f3ff;--c-surface:#f6f3ff;--c-well:#efeafe;--c-primary:#6d4fe0;--radius:28px;--clay-raised:12px 14px 28px rgba(110,90,190,.26),inset -7px -7px 14px rgba(120,95,200,.15),inset 7px 7px 14px #fff;--clay-soft:6px 8px 16px rgba(110,90,190,.22),inset -4px -4px 8px rgba(120,95,200,.14),inset 4px 4px 8px #fff;--clay-pressed:inset 4px 4px 9px rgba(110,90,190,.2),inset -4px -4px 9px #fff;background:var(--bg);color:var(--ink)}
html[data-ui="clay"] body{background:var(--bg)!important;color:var(--ink)}
html[data-ui="clay"] .background-film,html[data-ui="clay"] #atmosphere{display:none!important}
/* Every text colour from the dark theme gives way, so nothing light sits on the light surfaces. */
html[data-ui="clay"] #app *,html[data-ui="clay"] #modal *{color:var(--ink)}
html[data-ui="clay"] #app :is(small,.consent,th,.eyebrow,.nav-caption,.footer,.breadcrumb,.hero p,.auth p,.stat-footer span,.card-small,.exchange span,.page-title p),html[data-ui="clay"] #modal :is(small,.consent,th){color:var(--muted)!important}
html[data-ui="clay"] #app :is(.sidebar,.topbar,.panel,.stat,.hero,.document-card,.setting-card,.auth-copy,.auth-art,.demo-banner,.receipt-tab,.glass-card),html[data-ui="clay"] dialog{background:var(--c-surface)!important;border:0!important;border-radius:28px;box-shadow:var(--clay-raised)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
html[data-ui="clay"] dialog::backdrop{background:rgba(70,55,130,.35)}
html[data-ui="clay"] .hero:before{border-color:rgba(109,79,224,.2)}
html[data-ui="clay"] #app :is(.brand-mark,.stat-icon,.icon-button,.quick,.exchange,.custom-list article,.sidebar-note,.profile,.provider-status span,.file-row){background:var(--c-well)!important;border:0!important;border-radius:20px;box-shadow:var(--clay-soft)!important}
html[data-ui="clay"] #modal :is(.custom-list article,.scan-result,.note,.payout-summary,.payout-net,.settlement-details){background:var(--c-well)!important;border:0!important;border-radius:20px;box-shadow:var(--clay-pressed)!important}
html[data-ui="clay"] :is(#app,#modal) :is(.button,button.button){background:#ffe3a8!important;color:#4a3300!important;border:0!important;border-radius:20px;min-height:44px;box-shadow:6px 8px 16px rgba(190,140,50,.3),inset -4px -4px 8px rgba(170,110,20,.24),inset 4px 4px 8px rgba(255,255,255,.7)!important;filter:none!important}
html[data-ui="clay"] :is(#app,#modal) :is(.button.dark,.button:not(.secondary):not(.small)){background:var(--c-primary)!important;color:#fff!important;box-shadow:6px 8px 16px rgba(90,60,200,.4),inset -4px -4px 8px rgba(40,10,130,.35),inset 4px 4px 8px rgba(255,255,255,.35)!important}
html[data-ui="clay"] :is(#app,#modal) :is(.button.dark,.button:not(.secondary):not(.small)) *{color:#fff!important}
html[data-ui="clay"] :is(#app,#modal) .button.secondary *,html[data-ui="clay"] :is(#app,#modal) .button.small *{color:#4a3300!important}
html[data-ui="clay"] #app .sidebar .nav-item{background:none;border:0;border-radius:18px;box-shadow:none}
html[data-ui="clay"] #app .sidebar .nav-item:hover{background:var(--c-well)}
html[data-ui="clay"] #app .sidebar .nav-item.active{background:var(--c-primary)!important;color:#fff!important;box-shadow:6px 8px 14px rgba(90,60,200,.35),inset 3px 3px 6px rgba(255,255,255,.3)!important}
html[data-ui="clay"] #app .sidebar .nav-item.active *{color:#fff!important}
html[data-ui="clay"] :is(#app,#modal) :is(input,select,textarea){background:var(--c-well)!important;color:var(--ink)!important;border:0!important;border-radius:16px;box-shadow:var(--clay-pressed)!important}
html[data-ui="clay"] :is(#app,#modal) :is(input,textarea)::placeholder{color:var(--muted)}
html[data-ui="clay"] :is(#app,#modal) :is(table,tr,td,th){border-color:var(--line)!important;background:transparent}
html[data-ui="clay"] :is(#app,#modal) .upload-box{background:var(--c-well)!important;border:2px dashed rgba(109,79,224,.4)!important;border-radius:20px;box-shadow:none!important}
html[data-ui="clay"] :is(#app,#modal) .badge{backdrop-filter:none;-webkit-backdrop-filter:none;border:0!important;font-weight:700}
html[data-ui="clay"] :is(#app,#modal) .badge.pending_accept,html[data-ui="clay"] :is(#app,#modal) .badge.in_process{background:#ffe9ae!important;color:#5b4200!important}
html[data-ui="clay"] :is(#app,#modal) .badge.at_office{background:#cfe0ff!important;color:#143a80!important}
html[data-ui="clay"] :is(#app,#modal) .badge.claimed{background:#ffd6b3!important;color:#6e3300!important}
html[data-ui="clay"] :is(#app,#modal) .badge.completed{background:#c7f3da!important;color:#0d5230!important}
html[data-ui="clay"] :is(#app,#modal) .badge.rejected,html[data-ui="clay"] :is(#app,#modal) .badge.cancelled{background:#ffd2d2!important;color:#7a1414!important}
html[data-ui="clay"] :is(#app,#modal) .badge.reversed{background:#e3e1ec!important;color:#3c3952!important}
html[data-ui="clay"] #modal .timeline .stage{backdrop-filter:none;-webkit-backdrop-filter:none}
html[data-ui="clay"] #modal .timeline .stage i{background:var(--c-well);color:var(--muted)}
html[data-ui="clay"] #modal .timeline .stage.done i{background:#7fdcae;color:#07391f}
html[data-ui="clay"] #modal .timeline .stage.current i{background:#6d4fe0;color:#fff;box-shadow:inset 2px 2px 4px rgba(255,255,255,.4)}
html[data-ui="clay"] .bar{background:#6d4fe0}html[data-ui="clay"] .bar.soft{background:#c9bdf3}
html[data-ui="clay"] #toast{background:#2a2152;color:#fff;border-radius:18px}
html[data-ui="clay"] .boot,html[data-ui="clay"] .boot p{color:var(--ink);background:var(--bg)}
@media (prefers-reduced-motion:reduce){html[data-ui="clay"] .hero:before{animation:none}}
html[data-ui="clay"] :is(#app,#modal) .upload-box.drag-over{background:#ddd5ff!important;border:2px solid #6d4fe0!important}

/* Dark clay: same soft shapes on a deep violet ground. */
html[data-ui="clay"][data-mode="dark"]{color-scheme:dark;--bg:#17132c;--ink:#f1edff;--muted:#bdb4e2;--accent:#a48dff;--line:rgba(190,175,255,.16);--glass:#241e41;--c-surface:#241e41;--c-well:#1c1735;--c-primary:#7a5cf0;--clay-raised:12px 14px 28px rgba(0,0,0,.5),inset -6px -6px 12px rgba(0,0,0,.28),inset 6px 6px 12px rgba(255,255,255,.07);--clay-soft:6px 8px 16px rgba(0,0,0,.42),inset -4px -4px 8px rgba(0,0,0,.25),inset 4px 4px 8px rgba(255,255,255,.07);--clay-pressed:inset 4px 4px 9px rgba(0,0,0,.45),inset -3px -3px 7px rgba(255,255,255,.05);background:#17132c}
html[data-ui="clay"][data-mode="dark"] :is(#app,#modal) :is(.badge.pending_accept,.badge.in_process){background:#4a3a0c!important;color:#ffe08a!important}
html[data-ui="clay"][data-mode="dark"] :is(#app,#modal) .badge.at_office{background:#14315f!important;color:#b9d3ff!important}
html[data-ui="clay"][data-mode="dark"] :is(#app,#modal) .badge.claimed{background:#55300f!important;color:#ffcfa3!important}
html[data-ui="clay"][data-mode="dark"] :is(#app,#modal) .badge.completed{background:#0f4229!important;color:#a8f0c8!important}
html[data-ui="clay"][data-mode="dark"] :is(#app,#modal) :is(.badge.rejected,.badge.cancelled){background:#5a1a1a!important;color:#ffb9b9!important}
html[data-ui="clay"][data-mode="dark"] :is(#app,#modal) .badge.reversed{background:#35334a!important;color:#d9d7e6!important}
html[data-ui="clay"][data-mode="dark"] :is(#app,#modal) .upload-box{border-color:rgba(164,141,255,.5)!important}
html[data-ui="clay"][data-mode="dark"] .scan-checks .check-fail{color:#ff9d9d!important}
html[data-ui="clay"][data-mode="dark"] #toast{background:#f1edff;color:#17132c}
html[data-ui="clay"][data-mode="dark"] dialog::backdrop{background:rgba(5,3,15,.6)}
/* Colour: each area of the app has its own hue. */
html[data-ui="clay"] #app .hero{background:linear-gradient(115deg,#b45cd6,#7a4fe6 48%,#4f33c9)!important;background-size:170% 170%!important}
html[data-ui="clay"] #app .hero *{color:#fff!important}
html[data-ui="clay"] #app .hero:after{display:none}
html[data-ui="clay"] #app .hero:before{border-color:rgba(255,255,255,.28)}
html[data-ui="clay"] #app .hero-art :is(.glass-card,.orbital){display:none}
html[data-ui="clay"] #app .hero .button{background:#ffe3a8!important;box-shadow:6px 8px 16px rgba(30,10,90,.4),inset -4px -4px 8px rgba(170,110,20,.24),inset 4px 4px 8px rgba(255,255,255,.7)!important}
html[data-ui="clay"] #app .hero .button,html[data-ui="clay"] #app .hero .button *{color:#4a3300!important}
html[data-ui="clay"] #app .stat:nth-child(1){background:#ece6ff!important}
html[data-ui="clay"] #app .stat:nth-child(2){background:#e0f6ea!important}
html[data-ui="clay"] #app .stat:nth-child(3){background:#fff0d6!important}
html[data-ui="clay"] #app .stat:nth-child(4){background:#dfeeff!important}
html[data-ui="clay"][data-mode="dark"] #app .stat:nth-child(1){background:#2d2257!important}
html[data-ui="clay"][data-mode="dark"] #app .stat:nth-child(2){background:#143a2b!important}
html[data-ui="clay"][data-mode="dark"] #app .stat:nth-child(3){background:#40300f!important}
html[data-ui="clay"][data-mode="dark"] #app .stat:nth-child(4){background:#142f54!important}
html[data-ui="clay"] #app .stat:nth-child(1) .stat-icon *{color:#5a3bd6}
html[data-ui="clay"] #app .stat:nth-child(2) .stat-icon *{color:#0d7a4b}
html[data-ui="clay"] #app .stat:nth-child(3) .stat-icon *{color:#a35a00}
html[data-ui="clay"] #app .stat:nth-child(4) .stat-icon *{color:#1c5fc0}
html[data-ui="clay"] #app .stat-icon{color:inherit}
html[data-ui="clay"][data-mode="dark"] #app .stat-icon *{color:var(--ink)}
html[data-ui="clay"] #app .sidebar .nav-item:nth-of-type(6n+1) svg{color:#5a3bd6}
html[data-ui="clay"] #app .sidebar .nav-item:nth-of-type(6n+2) svg{color:#0d7a4b}
html[data-ui="clay"] #app .sidebar .nav-item:nth-of-type(6n+3) svg{color:#a35a00}
html[data-ui="clay"] #app .sidebar .nav-item:nth-of-type(6n+4) svg{color:#1c5fc0}
html[data-ui="clay"] #app .sidebar .nav-item:nth-of-type(6n+5) svg{color:#b02a7a}
html[data-ui="clay"] #app .sidebar .nav-item:nth-of-type(6n) svg{color:#0b7f8c}
html[data-ui="clay"][data-mode="dark"] #app .sidebar .nav-item svg{color:#cdbfff}
html[data-ui="clay"] #app .sidebar .nav-item.active svg{color:#fff}
html[data-ui="clay"] #app .language{background:var(--c-well)!important;border:0!important;box-shadow:var(--clay-soft)!important}
/* Motion: entrance when a page opens, soft reaction to the pointer. */
html[data-ui="clay"].clay-enter #app :is(.hero,.stat,.panel){animation:clay-in .55s cubic-bezier(.2,.9,.3,1.2) both}
html[data-ui="clay"].clay-enter #app .stat:nth-child(2){animation-delay:.06s}
html[data-ui="clay"].clay-enter #app .stat:nth-child(3){animation-delay:.12s}
html[data-ui="clay"].clay-enter #app .stat:nth-child(4){animation-delay:.18s}
html[data-ui="clay"] #app .hero{animation:clay-hero 14s ease-in-out infinite alternate}
html[data-ui="clay"].clay-enter #app .hero{animation:clay-in .55s cubic-bezier(.2,.9,.3,1.2) both,clay-hero 14s ease-in-out infinite alternate}
html[data-ui="clay"] #app :is(.stat,.panel,.icon-button,.sidebar .nav-item),html[data-ui="clay"] :is(#app,#modal) .button{transition:transform .22s cubic-bezier(.2,.9,.3,1.4),box-shadow .22s ease,background-color .22s ease}
html[data-ui="clay"] #app .stat:hover{transform:translateY(-5px) rotate(-.4deg)}
html[data-ui="clay"] #app .sidebar .nav-item:hover{transform:translateX(-4px)}
html[data-ui="clay"] :is(#app,#modal) .button:hover{transform:translateY(-3px) scale(1.02)}
html[data-ui="clay"] :is(#app,#modal) .button:active{transform:translateY(1px) scale(.97)}
html[data-ui="clay"] #app .icon-button:hover{transform:translateY(-2px) rotate(-6deg)}
html[data-ui="clay"] dialog[open]{animation:clay-pop .28s cubic-bezier(.2,.9,.3,1.25)}
html[data-ui="clay"] :is(#app,#modal) .upload-box.drag-over{animation:clay-pulse .9s ease-in-out infinite}
html[data-ui="clay"] body.no-motion *{animation:none!important;transition:none!important}
@media (prefers-reduced-motion:reduce){html[data-ui="clay"] *{animation:none!important;transition:none!important}}
html[data-ui="clay"] #app#app .hero :is(p,span,small,strong,.hero-label){color:#fff!important}
html[data-ui="clay"] #app#app .hero .button{background:#ffe3a8!important;color:#4a3300!important;box-shadow:6px 8px 16px rgba(30,10,90,.4),inset -4px -4px 8px rgba(170,110,20,.24),inset 4px 4px 8px rgba(255,255,255,.7)!important}
html[data-ui="clay"] #app#app .hero .button *{color:#4a3300!important}
html[data-ui="clay"] #app#app .date-chip{background:var(--c-well)!important;border:0!important;border-radius:18px;box-shadow:var(--clay-soft)!important}
html[data-ui="clay"] #app#app .date-chip *{color:var(--ink)}
html[data-ui="clay"] #app#app .hero{box-shadow:12px 14px 28px rgba(80,50,180,.32),inset -6px -6px 14px rgba(30,10,110,.28),inset 6px 6px 14px rgba(255,255,255,.2)!important}