:root {
    --clay-bg: #eceaff;
    --clay-surface: #f5f3ff;
    --clay-surface-strong: #ffffff;
    --clay-ink: #302a4f;
    --clay-muted: #756e96;
    --clay-primary: #6c5ce7;
    --clay-primary-dark: #5746d3;
    --clay-peach: #ffad8a;
    --clay-mint: #8bd7c7;
    --clay-shadow: 12px 12px 24px rgba(109, 96, 169, .18), -9px -9px 22px rgba(255, 255, 255, .82);
    --clay-shadow-small: 7px 7px 14px rgba(109, 96, 169, .15), -5px -5px 12px rgba(255, 255, 255, .78);
    --clay-inset: inset 4px 4px 9px rgba(109, 96, 169, .12), inset -4px -4px 9px rgba(255, 255, 255, .82);
}

* { -webkit-tap-highlight-color: transparent; }

body.clay-app,
body.clay-auth {
    color: var(--clay-ink);
    background:
        radial-gradient(circle at 4% 6%, rgba(255, 173, 138, .48), transparent 22rem),
        radial-gradient(circle at 96% 9%, rgba(139, 215, 199, .42), transparent 25rem),
        radial-gradient(circle at 75% 92%, rgba(150, 137, 255, .3), transparent 26rem),
        var(--clay-bg);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.clay-app::before,
.clay-auth::before,
.clay-auth::after {
    content: "";
    position: fixed;
    z-index: -1;
    border-radius: 999px;
    filter: blur(2px);
    pointer-events: none;
}

.clay-app::before {
    right: 8%;
    bottom: 7%;
    width: 5.5rem;
    height: 5.5rem;
    background: rgba(255, 255, 255, .55);
    box-shadow: var(--clay-shadow);
}

.clay-auth::before {
    top: 8%;
    left: 6%;
    width: 8rem;
    height: 8rem;
    background: rgba(139, 215, 199, .52);
    box-shadow: var(--clay-shadow);
}

.clay-auth::after {
    right: 7%;
    bottom: 9%;
    width: 11rem;
    height: 11rem;
    background: rgba(255, 173, 138, .45);
    box-shadow: var(--clay-shadow);
}

.clay-app main {
    position: relative;
    max-width: 1680px;
}

.clay-app main .bg-white {
    background: rgba(249, 248, 255, .84) !important;
    border: 1px solid rgba(255, 255, 255, .9) !important;
    box-shadow: var(--clay-shadow) !important;
}

.clay-app main .rounded-xl { border-radius: 1.5rem !important; }
.clay-app main .rounded-2xl { border-radius: 1.8rem !important; }

.clay-app main .border-b,
.clay-app main .border-t,
.clay-app main .border-l,
.clay-app main .border-r {
    border-color: rgba(122, 108, 180, .15) !important;
}

.clay-app main table thead tr { border-color: rgba(122, 108, 180, .18) !important; }
.clay-app main table tbody tr { border-color: rgba(122, 108, 180, .12) !important; }
.clay-app main table tbody tr:hover { background: rgba(255, 255, 255, .62) !important; }

.clay-app main input:not([type="checkbox"]):not([type="radio"]),
.clay-app main select,
.clay-app main textarea,
.clay-auth input:not([type="checkbox"]):not([type="radio"]),
.clay-auth select,
.clay-auth textarea {
    background: rgba(239, 237, 252, .9) !important;
    color: var(--clay-ink) !important;
    border: 1px solid rgba(255, 255, 255, .95) !important;
    border-radius: .95rem !important;
    box-shadow: var(--clay-inset) !important;
    outline: none;
}

.clay-app main input:focus,
.clay-app main select:focus,
.clay-app main textarea:focus,
.clay-auth input:focus,
.clay-auth select:focus,
.clay-auth textarea:focus {
    border-color: rgba(108, 92, 231, .6) !important;
    box-shadow: var(--clay-inset), 0 0 0 4px rgba(108, 92, 231, .13) !important;
}

.clay-app .bg-primary,
.clay-auth .bg-primary {
    background: linear-gradient(145deg, #8175f4, #5e4ed6) !important;
    box-shadow: 7px 7px 14px rgba(87, 70, 211, .28), -4px -4px 10px rgba(255,255,255,.55);
}

.clay-app .text-primary,
.clay-auth .text-primary { color: var(--clay-primary) !important; }

.clay-app button,
.clay-app a,
.clay-auth button,
.clay-auth a { transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease; }

.clay-app button:not([disabled]):active,
.clay-auth button:not([disabled]):active { transform: translateY(2px); }

.clay-app main button[class*="bg-"],
.clay-app main a[class*="bg-"],
.clay-auth button[class*="bg-"],
.clay-auth a[class*="bg-"] { box-shadow: var(--clay-shadow-small); }

.clay-status-dot { box-shadow: 0 0 0 4px rgba(255, 255, 255, .55); }

.clay-sidebar {
    background: linear-gradient(155deg, #4c3f9a 0%, #302760 57%, #251e4d 100%);
    border-right: 1px solid rgba(255, 255, 255, .13);
    box-shadow: 15px 0 36px rgba(48, 39, 96, .25);
}

.clay-brand {
    background: rgba(255,255,255,.11);
    border: 1px solid rgba(255,255,255,.15);
    box-shadow: inset 1px 1px 0 rgba(255,255,255,.12), 5px 7px 18px rgba(18, 11, 58, .18);
}

.clay-brand-mark {
    background: linear-gradient(145deg, #ffb091, #f47f79);
    box-shadow: 5px 6px 12px rgba(22, 12, 58, .25), inset 2px 2px 4px rgba(255,255,255,.35);
}

.clay-nav-link {
    color: rgba(255, 255, 255, .72);
    border: 1px solid transparent;
}

.clay-nav-link:hover {
    color: #fff;
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .1);
}

.clay-nav-link-active {
    color: #fff;
    background: linear-gradient(135deg, rgba(255, 255, 255, .23), rgba(255, 255, 255, .11));
    border-color: rgba(255,255,255,.22);
    box-shadow: 5px 6px 14px rgba(15, 9, 49, .19), inset 1px 1px 0 rgba(255,255,255,.15);
}

.clay-nav-link-logout { color: #ffc2bc; }
.clay-nav-link-logout:hover { color: #fff0ed; background: rgba(255, 127, 116, .16); }

.clay-topbar {
    background: rgba(250, 249, 255, .7);
    border: 1px solid rgba(255,255,255,.9);
    border-radius: 1.4rem;
    box-shadow: var(--clay-shadow-small);
}

.clay-icon-button {
    background: var(--clay-surface);
    border: 1px solid rgba(255,255,255,.9);
    box-shadow: var(--clay-shadow-small);
}

.clay-icon-button:hover { transform: translateY(-2px); color: var(--clay-primary) !important; }

.clay-user-avatar {
    background: linear-gradient(145deg, #8175f4, #5f4fd6);
    box-shadow: 5px 6px 12px rgba(87,70,211,.28), inset 2px 2px 4px rgba(255,255,255,.26);
}

.clay-notification {
    background: rgba(249, 248, 255, .98) !important;
    border: 1px solid rgba(255,255,255,.94) !important;
    border-radius: 1.25rem !important;
    box-shadow: var(--clay-shadow) !important;
}

.clay-alert-success,
.clay-alert-error {
    border-radius: 1rem !important;
    box-shadow: var(--clay-shadow-small);
}

.clay-dashboard-hero {
    position: relative;
    overflow: hidden;
    min-height: 10rem;
    border: 1px solid rgba(255,255,255,.82);
    border-radius: 1.8rem;
    background: linear-gradient(125deg, rgba(108, 92, 231, .98), rgba(129, 117, 244, .9) 58%, rgba(139, 215, 199, .88));
    box-shadow: 14px 14px 28px rgba(87, 70, 211, .24), -7px -7px 18px rgba(255,255,255,.64), inset 1px 1px 1px rgba(255,255,255,.24);
}

.clay-dashboard-hero::before,
.clay-dashboard-hero::after {
    content: "";
    position: absolute;
    border-radius: 999px;
    background: rgba(255,255,255,.15);
}

.clay-dashboard-hero::before { width: 13rem; height: 13rem; right: -3rem; top: -7rem; }
.clay-dashboard-hero::after { width: 8rem; height: 8rem; right: 16%; bottom: -5rem; }
.clay-dashboard-hero > * { position: relative; z-index: 1; }

.clay-dashboard-hero .clay-hero-action {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    border: 1px solid rgba(255,255,255,.34);
    border-radius: .9rem;
    background: rgba(255,255,255,.17);
    box-shadow: inset 1px 1px 1px rgba(255,255,255,.18);
}

.clay-dashboard-hero .clay-hero-action:hover { background: rgba(255,255,255,.27); transform: translateY(-2px); }

.clay-auth-shell { width: min(100%, 1180px); }

.clay-auth-layout {
    display: grid;
    grid-template-columns: minmax(0, .88fr) minmax(340px, .78fr);
    align-items: stretch;
    gap: clamp(1.5rem, 5vw, 5rem);
}

.clay-auth-intro {
    color: var(--clay-ink);
    padding: clamp(1.25rem, 4vw, 3rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.clay-orb-logo {
    width: 6.5rem;
    height: 6.5rem;
    display: grid;
    place-items: center;
    border-radius: 2rem;
    color: white;
    background: linear-gradient(145deg, #ffba9c, #ee7e7b);
    box-shadow: 14px 14px 24px rgba(197, 103, 112, .24), -8px -8px 16px rgba(255,255,255,.74), inset 3px 3px 6px rgba(255,255,255,.34);
}

.clay-auth-card {
    background: rgba(248, 247, 255, .88);
    border: 1px solid rgba(255,255,255,.92);
    border-radius: 2rem;
    box-shadow: 18px 18px 34px rgba(109, 96, 169, .2), -11px -11px 26px rgba(255,255,255,.78);
}

.clay-auth-card button[type="submit"] {
    background: linear-gradient(145deg, #8175f4, #5e4ed6) !important;
    border-radius: 1rem !important;
    box-shadow: 7px 7px 14px rgba(87, 70, 211, .25), -4px -4px 10px rgba(255,255,255,.55);
}

.clay-auth-card button[type="submit"]:hover { transform: translateY(-2px); }

.clay-auth-card .bg-green-100,
.clay-auth-card .bg-red-100,
.clay-auth-card .bg-yellow-50,
.clay-auth-card .bg-blue-50 {
    border-radius: 1rem;
    box-shadow: var(--clay-shadow-small);
}

.clay-auth-card label { color: #514a70 !important; }
.clay-auth-card input::placeholder,
.clay-auth-card textarea::placeholder { color: #9a93b7; }

.clay-register-card { max-width: 900px; margin-inline: auto; }
.clay-form-section { border-color: rgba(122, 108, 180, .18) !important; }

@media (max-width: 1023px) {
    .clay-auth-layout { grid-template-columns: 1fr; }
    .clay-auth-intro { display: none; }
    .clay-auth-shell { max-width: 40rem; }
}

@media (max-width: 640px) {
    .clay-auth-card { border-radius: 1.5rem; }
    .clay-app main { padding: 1rem; }
    .clay-topbar { border-radius: 1.1rem; }
}