/* ===== AUTHENTIK GLASSMORPHISM THEME - V1.1 (Badge Fix) ===== */

/* Design tokens — keep blur / timing values consistent across the stylesheet
   so any future tuning (perf, motion) is a one-line change. Catppuccin-leaning
   palette; sub-300ms durations match Authentik's own micro-interactions. */
:root {
    --filter-glass: blur(20px);
    --filter-glass-strong: blur(25px);
    --dur-fast: 150ms;
    --dur-mid: 260ms;
    --ease-snap: cubic-bezier(.2,.8,.2,1);
}

/*
 * iOS Safari z-index fix: the Matrix canvas is position:fixed z-index:0.
 * On WebKit, shadow-DOM host elements don't auto-stack above it.
 * Explicitly lift ak-flow-executor to z-index:1 so it's always on top.
 * These rules live in the outer document (not :host), so they target the host element.
 */
ak-flow-executor {
    position: relative !important;
    z-index: 1 !important;
    display: block !important;
    isolation: isolate !important;
}

:root {
    --ak-flow-background: none;
    --ak-social-separator-text: "Continuer avec";
    --ak-accent: #d0ced0;
}

:host(ak-stage-authenticator-totp) .pf-c-button.pf-m-secondary {
    background: rgba(255, 255, 255, 0.1) !important;
    color: white !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 12px !important;
    padding: 8px 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.3s ease !important;
    margin-top: 5px !important;
}

:host(ak-stage-authenticator-totp) qr-code {
    max-width: 150px !important;
    width: 150px !important;
    height: 150px !important;
    margin: 0 0 15px 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
    background: white !important;
    overflow: hidden !important;
}

:root {
    --pf-global--BackgroundColor--100: oklab(0.2303 -0.0008 -0.0083) !important;
    --pf-global--Color--100: oklab(0.9067 -0 0) !important;
    color-scheme: dark !important;
}

.pf-c-login .pf-c-form__actions,
.pf-c-login .pf-c-form__group-control,
body:has(.pf-c-login) .pf-c-form__actions,
body:has(.pf-c-login) .pf-c-form__group-control {
    display: flex !important;
    gap: 15px !important;
    margin-top: 25px !important;
    justify-content: space-between !important;
    overflow: visible !important;
    padding: 5px !important;
}

:host(ak-stage-identification) .pf-c-button.pf-m-primary,
:host(ak-stage-identification) button[type="submit"].pf-c-button.pf-m-primary {
    background: rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: white !important;
    font-weight: 600 !important;
    padding: 14px 24px !important;
    border-radius: 14px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(255, 255, 255, 0.1) !important;
}

:host(ak-stage-user-login) .pf-c-button.pf-m-primary,
:host(ak-stage-user-login) .pf-c-button.pf-m-secondary {
    background: rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: white !important;
    font-weight: 500 !important;
    padding: 10px 24px !important;
    border-radius: 14px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
    margin: 0 !important;
}

:host(ak-stage-identification) .pf-c-button.pf-m-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.2) 50%, transparent 100%);
    transition: left 0.6s ease;
    z-index: 1;
    border-radius: 14px;
}

:host(ak-stage-identification) .pf-c-button.pf-m-primary:hover::before {
    left: 100%;
}

:host(ak-stage-user-login) .pf-c-button.pf-m-secondary,
:host(ak-stage-identification) .pf-c-button.pf-m-secondary {
    background: rgba(220, 53, 69, 0.15) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    border: 1.5px solid rgba(220, 53, 69, 0.3) !important;
}

:host(ak-stage-identification) .source-button {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: white !important;
    border-radius: 12px !important;
    padding: 10px 20px !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
    position: relative !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    gap: 8px !important;
    backdrop-filter: blur(10px) !important;
    overflow: hidden !important;
}

@media (prefers-reduced-motion: no-preference) {
    @keyframes socialShine {
        100% { left: 130%; }
    }
}

.pf-c-login .pf-c-check__input,
.pf-c-login input[type="checkbox"],
body:has(.pf-c-login) input[type="checkbox"],
input[id*="authentik-remember-me"],
input[name*="remember"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 16px !important;
    height: 16px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 5px !important;
    cursor: pointer !important;
}

ak-brand-links,
ul.pf-c-list.pf-m-inline,
.pf-c-list.pf-m-inline {
    display: none !important;
    visibility: hidden !important;
}

.pf-c-login .pf-c-page::before,
body:has(.pf-c-login) .pf-c-page::before {
    content: "" !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(180deg, #07131c 0%, #305472 100%) !important;
    z-index: -1 !important;
    pointer-events: none !important;
}

.pf-c-login .pf-c-login__container {
    backdrop-filter: blur(40px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 24px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    padding: 40px !important;
    min-width: 450px !important;
    width: 100% !important;
    max-width: 700px !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    margin: auto !important;
    height: auto !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    flex-basis: auto !important;
    max-height: none !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-self: center !important;
    justify-self: center !important;
}

.pf-c-login .pf-c-login__main {
    box-sizing: border-box;
    background: transparent !important;
    backdrop-filter: var(--filter-glass) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 66px !important;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 16px, rgba(255, 255, 255, 0.05) 0px 1px 0px inset !important;
    padding: 45px !important;
    position: relative !important;
    z-index: 10 !important;
    height: fit-content !important;
    min-height: 0 !important;
    flex-grow: 0 !important;
    overflow-y: visible !important;
    min-width: auto !important;
    max-height: none !important;
    width: 100% !important;
    max-width: 570px !important;
    margin: auto !important;
}

ak-loading-overlay {
    border-radius: 66px !important;
    overflow: hidden !important;
}

:host(ak-flow-executor) .pf-c-title,
:host(ak-flow-executor) h1,
:host(ak-flow-executor) h2,
:host(ak-flow-executor) h3,
:host(ak-flow-executor) p,
:host(ak-flow-executor) span,
:host(ak-flow-executor) div,
:host(ak-flow-executor) label,
:host(ak-stage-identification) label,
:host(ak-stage-password) label,
:host(ak-stage-identification) .pf-c-title,
:host(ak-stage-password) .pf-c-title {
    color: white !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
}

:host(ak-stage-identification) .pf-c-form-control,
:host(ak-stage-password) .pf-c-form-control,
:host(ak-stage-identification) input:not([type="checkbox"]),
:host(ak-stage-password) input:not([type="checkbox"]),
:host(ak-stage-authenticator-validate) .pf-c-form-control,
:host(ak-stage-authenticator-totp) .pf-c-form-control,
:host(ak-user-settings) .pf-c-form-control,
:host(ak-form-element-horizontal) .pf-c-form-control,
:host(ak-form-element-horizontal) input,
:host(ak-form-element-horizontal) select,
:host(ak-user-stage-prompt) .pf-c-form-control,
:host(ak-stage-prompt) .pf-c-form-control {
    background-color: rgba(255, 255, 255, 0.06) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 14px !important;
    padding: 10px 15px !important;
    font-size: 16px !important;
    color: white !important;
    height: auto !important;
    min-height: 40px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    backdrop-filter: var(--filter-glass) saturate(130%) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

:host(ak-stage-identification) .pf-c-button.pf-m-primary,
:host(ak-stage-password) .pf-c-button.pf-m-primary,
:host(ak-stage-consent) .pf-c-button.pf-m-primary,
:host(ak-stage-authenticator-validate) .pf-c-button.pf-m-primary,
:host(ak-stage-authenticator-totp) .pf-c-button.pf-m-primary,
:host(ak-user-settings) .pf-c-button.pf-m-primary,
:host(ak-user-settings-flow-executor) .pf-c-button.pf-m-primary,
:host(ak-user-settings-password) .pf-c-button.pf-m-primary,
:host(ak-user-stage-prompt) .pf-c-button.pf-m-primary,
:host(ak-stage-prompt) .pf-c-button.pf-m-primary,
:host(ak-user-settings-source-oauth) .pf-c-button.pf-m-primary {
    background: rgba(255, 255, 255, 0.15) !important;
    color: white !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 14px !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(255, 255, 255, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: var(--filter-glass) !important;
    transition: all 0.3s ease !important;
    text-transform: none !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
}

:host(ak-user-settings-source-oauth) .pf-c-button.pf-m-danger {
    background: rgba(220, 20, 60, 0.25) !important;
    color: white !important;
    border: 1px solid rgba(255, 100, 100, 0.3) !important;
    border-radius: 14px !important;
    backdrop-filter: var(--filter-glass) !important;
    transition: all 0.3s ease !important;
    font-weight: 600 !important;
}

:host(ak-stage-identification) .pf-c-button.pf-m-secondary,
:host(ak-stage-password) .pf-c-button.pf-m-secondary,
:host(ak-stage-authenticator-validate) .pf-c-button.pf-m-secondary,
:host(ak-flow-executor) .pf-c-button.pf-m-secondary {
    background: rgba(255, 255, 255, 0.08) !important;
    color: white !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 14px !important;
    backdrop-filter: var(--filter-glass) !important;
    transition: all 0.3s ease !important;
    font-weight: 500 !important;
    margin-top: 10px !important;
    display: block !important;
    width: 100% !important;
    text-align: center !important;
}

.pf-c-login__main-footer-band a {
    color: rgba(255, 255, 255, 0.6) !important;
    text-decoration: none !important;
    font-size: 14px !important;
    transition: all 0.2s ease !important;
}

:root {
    --sb-size: 10px;
    --sb-radius: 12px;
    --sb-track: rgba(255, 255, 255, 0.06);
    --sb-thumb: rgba(255, 255, 255, 0.28);
}

*::-webkit-scrollbar { width: var(--sb-size); height: var(--sb-size); }
*::-webkit-scrollbar-track { background: var(--sb-track); border-radius: var(--sb-radius); margin: 4px; }
*::-webkit-scrollbar-thumb { background-color: var(--sb-thumb); border-radius: var(--sb-radius); border: 2px solid transparent; background-clip: padding-box; }

.pf-c-card.pf-m-compact,
:host(ak-user-settings) .pf-c-card,
:host(ak-user-settings-flow-executor) .pf-c-card,
:host(ak-user-settings-password) .pf-c-card,
:host(ak-user-settings-mfa) .pf-c-card,
:host(ak-user-settings-source) .pf-c-card {
    position: relative;
    overflow: hidden;
    border-radius: 20px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: var(--filter-glass) saturate(130%) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    transition: all 0.3s ease-in-out !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

:host(ak-user-settings) .pf-c-tabs__button { color: rgba(255, 255, 255, 0.7) !important; }

.pf-c-page__sidebar {
    background: rgba(19, 19, 19, 0.4) !important;
    backdrop-filter: var(--filter-glass) saturate(120%) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.pf-c-page>.pf-c-page__header {
    background: rgba(0, 0, 0, 0.4) !important;
    backdrop-filter: blur(18px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.pf-c-page {
    position: relative !important;
    background-image: var(--ak-flow-background) !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
}

:host(ak-interface-admin) .pf-c-page {
    background-image: none !important;
    background-color: var(--pf-global--BackgroundColor--100) !important;
}

/* Outer-document rules — target host elements directly (no :host() needed here) */
ak-interface-user,
ak-library-impl,
ak-loading {
    background: transparent !important;
    background-color: transparent !important;
}

:host(ak-library-impl),
:host(ak-interface-user) {
    --pf-global--BackgroundColor--100: transparent !important;
    --pf-c-page--BackgroundColor: transparent !important;
    --pf-c-page__main-section--BackgroundColor: transparent !important;
    background: transparent !important;
    background-color: transparent !important;
}

:host(ak-library-impl) .pf-c-page,
:host(ak-library-impl) .pf-c-page__main,
:host(ak-library-impl) .pf-c-page__main-section,
:host(ak-interface-user) .pf-c-page,
:host(ak-interface-user) .pf-c-page__main,
:host(ak-interface-user) .pf-c-page__main-section {
    background: transparent !important;
    background-color: transparent !important;
}

.pf-c-input-group {
    position: relative !important;
    display: flex !important;
    width: 100% !important;
}

.pf-c-button.pf-m-control {
    position: absolute !important;
    top: 50% !important;
    right: 5px !important;
    transform: translateY(-50%) !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    z-index: 9999 !important;
    padding: 5px !important;
    margin: 0 !important;
    height: auto !important;
    min-width: 0 !important;
    width: 30px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
}

[data-ak-interface-root="ak-interface-admin"] .pf-c-button.pf-m-plain,
[data-ak-interface-root="ak-interface-admin"] .pf-c-button.pf-m-secondary,
[data-ak-interface-root="ak-interface-admin"] .pf-c-button.pf-m-primary {
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    transform: none !important;
    background: var(--pf-c-button--m-plain--BackgroundColor, transparent) !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--pf-c-button--m-plain--Color, inherit) !important;
}

:host(ak-interface-user) a[href*="/if/admin/"],
:host(ak-interface-user-presentation) a[href*="/if/admin/"] {
    border-radius: 50px !important;
    border: none !important;
    background: rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(10px) !important;
    color: white !important;
    padding: 8px 24px !important;
    transition: all 0.3s ease !important;
    font-weight: 500 !important;
}

:host(ak-stage-identification) .pf-c-button.pf-m-primary {
    background: rgba(40, 167, 69, 0.25) !important;
    backdrop-filter: blur(10px) !important;
    border: 1.5px solid rgba(40, 167, 69, 0.4) !important;
    color: white !important;
    font-weight: 600 !important;
    padding: 10px 24px !important;
    border-radius: 14px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    box-shadow: 0 4px 15px rgba(40, 167, 69, 0.15), 0 2px 8px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
    position: relative !important;
    overflow: hidden !important;
    margin-top: 4px !important;
    margin-bottom: 4px !important;
}

/* ── Library tile redesign ──
   ak-library-app uses LitElement shadow DOM and renders:
     .pf-c-card.pf-m-hoverable.pf-m-compact
       > .pf-c-card__header > a > ak-app-icon
       > .pf-c-card__title (contains <a>App Name</a>)
       > .expander
       > [optional] <ak-expand> with publisher/description
   The component hardcodes .pf-c-card__title { height: 48px } — must override.
   We use the .pf-m-compact qualifier so these rules only hit library cards. */

.pf-c-card.pf-m-hoverable.pf-m-compact {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    min-height: 220px !important;
    padding: 14px !important;
    gap: 8px !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.pf-c-card.pf-m-hoverable.pf-m-compact:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

.pf-c-card.pf-m-hoverable.pf-m-compact .pf-c-card__header {
    flex: 1 1 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 6px !important;
    min-height: 110px !important;
    width: 100% !important;
}

.pf-c-card.pf-m-hoverable.pf-m-compact .pf-c-card__header a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
}

.pf-c-card.pf-m-hoverable.pf-m-compact .pf-c-card__header ak-app-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 200px !important;
    height: 110px !important;
    --icon-height: 110px !important;
}

.pf-c-card.pf-m-hoverable.pf-m-compact .expander {
    display: none !important;
    flex-grow: 0 !important;
}

.pf-c-card.pf-m-hoverable.pf-m-compact .pf-c-card__title {
    height: auto !important;
    min-height: 0 !important;
    flex: 0 0 auto !important;
    align-self: center !important;
    display: inline-block !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.06) !important;
    padding: 6px 14px !important;
    margin: 0 auto !important;
    text-align: center !important;
    overflow: visible !important;
    color: white !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
    font-weight: 600 !important;
}

.pf-c-card.pf-m-hoverable.pf-m-compact .pf-c-card__title a {
    color: white !important;
    text-decoration: none !important;
    font-weight: 600 !important;
}

/* ── "More details" expander — lean and tucked inside the card ── */
/* ak-expand renders <button class="pf-c-expandable-section__toggle"> inside
   its own shadow root. data-inject reaches it. */

.pf-c-card.pf-m-hoverable.pf-m-compact ak-expand {
    flex: 0 0 auto !important;
    align-self: stretch !important;
    margin-top: 4px !important;
    background: transparent !important;
}

.pf-c-expandable-section.pf-m-display-lg {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
}

.pf-c-expandable-section__toggle {
    background: transparent !important;
    border: none !important;
    color: rgba(255, 255, 255, 0.65) !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    padding: 4px 8px !important;
    margin: 0 auto !important;
    width: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    cursor: pointer !important;
    border-radius: 6px !important;
    transition: color 0.15s ease, background 0.15s ease !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important;
}

.pf-c-expandable-section__toggle:hover {
    color: white !important;
    background: rgba(255, 255, 255, 0.06) !important;
}

.pf-c-expandable-section__toggle-icon {
    font-size: 0.7rem !important;
    margin-right: 2px !important;
}

.pf-c-expandable-section__content {
    padding: 6px 8px !important;
    margin-top: 4px !important;
    background: rgba(0, 0, 0, 0.25) !important;
    border-radius: 8px !important;
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 0.78rem !important;
    text-align: center !important;
}

/* Center the toggle row within the card */
.pf-c-card.pf-m-hoverable.pf-m-compact ak-expand .pf-c-expandable-section {
    text-align: center !important;
}

/* ── Library tile usage overlay (driven by ak-tiles.js) ──
   Adds: glass badge top-right (count + relative time), heat ring around the
   icon scaled by usage rank, milestone sparkle. All purely additive. */

.pf-c-card.pf-m-hoverable.pf-m-compact { overflow: visible !important; }

.ak-tile-badge {
    position: absolute !important;
    top: 4px !important;
    right: 4px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    pointer-events: none !important;
    z-index: 5 !important;
    padding: 3px 7px !important;
    background: rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(8px) saturate(140%) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 8px !important;
    line-height: 1.05 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6) !important;
    transition: transform 0.15s ease !important;
}

.pf-c-card.pf-m-hoverable.pf-m-compact:hover .ak-tile-badge {
    transform: scale(1.08) !important;
}

.ak-tile-count {
    font-weight: 700 !important;
    font-size: 0.78rem !important;
    color: #fff !important;
    letter-spacing: 0.02em !important;
}

.ak-tile-time {
    font-size: 0.6rem !important;
    color: rgba(255, 255, 255, 0.6) !important;
    margin-top: 1px !important;
}

/* Skeleton state — shown immediately on card mount, before /coc-api resolves.
   Subtle shimmer on the badge slot so users see it appear instantly. */
.ak-tile-badge.ak-tile-badge--skeleton {
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.04) 0%,
        rgba(255, 255, 255, 0.10) 50%,
        rgba(255, 255, 255, 0.04) 100%
    ) !important;
    background-size: 200% 100% !important;
    animation: ak-tile-skeleton 1.4s ease-in-out infinite !important;
    min-width: 38px !important;
}

.ak-tile-badge.ak-tile-badge--skeleton .ak-tile-count,
.ak-tile-badge.ak-tile-badge--skeleton .ak-tile-time {
    color: transparent !important;
    text-shadow: none !important;
    background: rgba(255, 255, 255, 0.18) !important;
    border-radius: 3px !important;
    display: block !important;
    height: 8px !important;
    margin: 1px 0 !important;
}

.ak-tile-badge.ak-tile-badge--skeleton .ak-tile-count {
    width: 18px !important;
    height: 10px !important;
}

.ak-tile-badge.ak-tile-badge--skeleton .ak-tile-time {
    width: 28px !important;
}

@media (prefers-reduced-motion: no-preference) {
    @keyframes ak-tile-skeleton {
        0%   { background-position: 200% 0; }
        100% { background-position: -200% 0; }
    }
}

/* Heat ring on the icon — subtle hue-shifted glow that scales with rank.
   --heat is set inline by ak-tiles.js (0..1). Kept restrained: 1px outline,
   2px offset, soft glow. Cool blue (low heat) → warm pink (high heat). */
ak-app-icon.ak-tile-heat {
    border-radius: 14px !important;
    outline: 1px solid hsla(
        calc(210 - var(--heat, 0) * 180),
        80%, 60%,
        calc(0.3 + var(--heat, 0) * 0.35)
    ) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 6px hsla(
        calc(210 - var(--heat, 0) * 180),
        80%, 60%,
        calc(0.2 + var(--heat, 0) * 0.25)
    ) !important;
}

/* Suppress the browser's focus ring on launch links — replaced by a
   custom soft glow that doesn't fight the heat ring. */
.pf-c-card.pf-m-hoverable.pf-m-compact a:focus,
.pf-c-card.pf-m-hoverable.pf-m-compact a:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25) !important;
    border-radius: 6px !important;
}

/* Milestone sparkle — covers the card briefly then fades. */
.ak-tile-sparkle {
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    z-index: 10 !important;
    border-radius: 20px !important;
    background:
        radial-gradient(circle at 18% 28%, rgba(255, 215, 0, 0.9), transparent 6%),
        radial-gradient(circle at 82% 36%, rgba(255, 255, 255, 0.9), transparent 6%),
        radial-gradient(circle at 52% 78%, rgba(0, 255, 255, 0.9), transparent 6%),
        radial-gradient(circle at 28% 84%, rgba(255, 0, 255, 0.9), transparent 6%),
        radial-gradient(circle at 72% 18%, rgba(0, 255, 128, 0.9), transparent 6%),
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.4), transparent 30%);
    animation: ak-tile-sparkle 1.5s ease-out forwards;
}

@media (prefers-reduced-motion: no-preference) {
    @keyframes ak-tile-sparkle {
        0%   { opacity: 0; transform: scale(0.85); }
        25%  { opacity: 1; transform: scale(1); }
        100% { opacity: 0; transform: scale(1.25); }
    }
}

/* The <img> lives inside ak-app-icon's OWN shadow root. data-inject
   clones this stylesheet into every shadow, so a rule that matches inside
   that shadow (img.icon.pf-c-avatar) reaches it. */
img.icon.pf-c-avatar {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    border-radius: 12px !important;
}

/* Same path for the SVG fallback (initials) ak-app-icon renders when no icon */
.icon.pf-c-avatar {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
}

:host(ak-user-settings) .pf-c-card:hover,
:host(ak-user-settings-flow-executor) .pf-c-card:hover,
:host(ak-user-settings-password) .pf-c-card:hover {
    transform: none !important;
    background: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

:host(ak-user-session-list) .pf-c-table,
:host(ak-user-settings-mfa) .pf-c-table,
:host(ak-user-consent-list) .pf-c-table,
:host(ak-user-token-list) .pf-c-table,
:host(ak-user-session-list) .pf-c-table tr,
:host(ak-user-settings-mfa) .pf-c-table tr,
:host(ak-user-consent-list) .pf-c-table tr,
:host(ak-user-token-list) .pf-c-table tr {
    background-color: transparent !important;
    background: transparent !important;
    --pf-c-table--BackgroundColor: transparent !important;
}

:host(ak-user-settings-mfa) .pf-c-dropdown__toggle.pf-m-primary {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: white !important;
}

:host(ak-table-search) .pf-c-form-control,
:host(ak-table-search) input[type="search"] {
    background-color: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: white !important;
    border-radius: 6px !important;
}

.pf-c-chip,
ak-chip {
    --pf-c-chip--BackgroundColor: #333333 !important;
    --pf-c-chip__text--Color: white !important;
    --pf-c-chip--Color: white !important;
    color: white !important;
}

ak-app-icon[size="pf-m-lg"] { --icon-height: 3rem !important; }
ak-app-icon::part(icon) { border-radius: 15px !important; overflow: hidden !important; }

.pf-c-label.pf-m-green {
    --pf-c-label--BackgroundColor: #1c1c1c !important;
    --pf-c-label__icon--Color: #4d9144;
    --pf-c-label__content--before--BorderColor: #474747 !important;
}

.pf-c-label.pf-m-gray {
    --pf-c-label--BackgroundColor: #1a1a1a !important;
    --pf-c-label__icon--Color: #d91e1e !important;
}

.pf-c-login__main-footer-links {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 12px !important;
    margin-top: 10px !important;
    position: relative !important;
}

.pf-c-login__main-footer-links::before {
    content: var(--ak-social-separator-text) !important;
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    font-size: 15px !important;
    color: #ffffff !important;
    margin-bottom: 20px !important;
    margin-top: 10px !important;
    font-weight: 400 !important;
    background: linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 32%, transparent 32%, transparent 68%, rgba(255,255,255,1) 68%, rgba(255,255,255,1) 100%) !important;
    background-size: 100% 1px !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

.pf-c-login__main-footer-links-item { display: inline-flex !important; width: auto !important; }

.pf-c-login__main-footer-links-item button {
    background: rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: white !important;
    font-weight: 600 !important;
    border-radius: 12px !important;
    padding: 10px 16px !important;
    font-size: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    min-width: 100px !important;
    max-width: 120px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(255, 255, 255, 0.1) !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
}

.pf-c-login__main-footer-links-item button:hover {
    background: rgba(255, 255, 255, 0.25) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    transform: translateY(-2px) !important;
    cursor: pointer;
}

@media (max-width: 768px) {
    .pf-c-login {
        width: 100vw !important;
        max-width: 100vw !important;
        min-width: 100vw !important;
        height: 100vh !important;
        min-height: 100vh !important;
        padding: 0 !important;
        margin: 0 !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    .pf-c-login .pf-c-login__container {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        box-sizing: border-box !important;
        height: auto !important;
        position: relative !important;
        margin: auto !important;
        border-radius: 0 !important;
        border: none !important;
        padding: 20px !important;
        background: transparent !important;
        backdrop-filter: none !important;
        box-shadow: none !important;
    }

    .pf-c-login .pf-c-login__main {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        border-radius: 20px !important;
        border: none !important;
        padding: 30px 20px !important;
        background: transparent !important;
        backdrop-filter: none !important;
        box-shadow: none !important;
        margin: auto !important;
    }

    html, body {
        min-height: 100dvh !important;
        position: relative !important;
    }
    /* Transparent host elements so the rain canvas beneath shows through */
    :host(ak-interface-user), :host(ak-library-impl) {
        background: transparent !important;
        background-color: transparent !important;
    }

    :host(ak-library-impl) .pf-l-gallery {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    :host(ak-library-impl) .pf-c-card.pf-m-hoverable {
        min-height: 180px !important;
        padding: 10px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    :host(ak-library-impl) .pf-c-card__title {
        padding: 5px 10px !important;
        font-size: 0.9rem !important;
    }

    /* Compact usage badge on phones — drop the relative-time line. */
    .ak-tile-badge {
        top: 3px !important;
        right: 3px !important;
        padding: 2px 5px !important;
    }
    .ak-tile-count { font-size: 0.7rem !important; }
    .ak-tile-time { display: none !important; }
}
/* ===== SQ LOGO BRANDING ===== */

/* Logo container — centered */
.ak-brand,
.pf-c-login__main-header.ak-brand {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    padding: 0 !important;
    margin: 0 auto 12px auto !important;
    width: 100% !important;
    border-bottom: none !important;
    background: none !important;
    overflow: visible !important;
}

/* Massive logo with Matrix green glow.
 * PatternFly injects padding:0 32px and max-height:144px on brand imgs —
 * override both so the full image renders without clipping. */
.ak-brand img,
.pf-c-login__main-header.ak-brand img {
    width: 280px !important;
    height: auto !important;
    max-height: none !important;
    padding: 0 !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
    overflow: visible !important;
    mix-blend-mode: screen !important;
    filter:
        drop-shadow(0 0 18px rgba(0, 255, 80, 0.65))
        drop-shadow(0 0 45px rgba(0, 200, 60, 0.4)) !important;
    transition: transform 0.3s ease, filter 0.3s ease !important;
}

.ak-brand img:hover,
.pf-c-login__main-header.ak-brand img:hover {
    transform: scale(1.06) !important;
    filter:
        drop-shadow(0 0 28px rgba(0, 255, 80, 0.9))
        drop-shadow(0 0 60px rgba(0, 200, 60, 0.6)) !important;
}

/* ===== LOGIN CARD BACKGROUND (desktop + mobile) ===== */
/* Body is forced #000 by Matrix canvas — card needs its own visible background */
.pf-c-login .pf-c-login__main {
    background: rgba(0, 18, 8, 0.82) !important;
    backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(0, 255, 80, 0.18) !important;
    border-radius: 32px !important;
    box-shadow:
        0 0 0 1px rgba(0, 255, 80, 0.06),
        0 8px 40px rgba(0, 0, 0, 0.9),
        inset 0 1px 0 rgba(0, 255, 80, 0.08) !important;
    overflow: visible !important;
    padding: 20px !important;
}

/* ===== COMPACT FORM — kill PatternFly's excessive padding/margins ===== */
/*
 * Gaps identified via DOM inspection (390px mobile, 638px card height):
 *   - header.pf-c-login__main-header  padding: 48px 32px 16px  ← main culprit
 *   - .pf-c-login__main-body          padding: 0 32px 32px
 *   - .pf-c-form__group.pf-m-action   margin-top: 32px
 *   - footer ul                        padding: 8px 64px 32px
 *   - ak-stage-identification          padding-bottom: 64px
 * All overridden below.
 */

/* Stage identification + password share the same shadow DOM structure */
:host(ak-stage-identification) header.pf-c-login__main-header,
:host(ak-stage-password) header.pf-c-login__main-header,
:host(ak-stage-authenticator-validate) header.pf-c-login__main-header,
:host(ak-stage-authenticator-totp) header.pf-c-login__main-header {
    padding: 8px 16px 8px !important;
}

:host(ak-stage-identification) .pf-c-login__main-body,
:host(ak-stage-password) .pf-c-login__main-body,
:host(ak-stage-authenticator-validate) .pf-c-login__main-body,
:host(ak-stage-authenticator-totp) .pf-c-login__main-body {
    padding: 0 16px 12px !important;
}

:host(ak-stage-identification) .pf-c-form__group.pf-m-action,
:host(ak-stage-password) .pf-c-form__group.pf-m-action,
:host(ak-stage-authenticator-validate) .pf-c-form__group.pf-m-action {
    margin-top: 12px !important;
}

:host(ak-stage-identification) .pf-c-login__main-footer,
:host(ak-stage-password) .pf-c-login__main-footer {
    padding: 0 !important;
}

:host(ak-stage-identification) .pf-c-login__main-footer-links,
:host(ak-stage-password) .pf-c-login__main-footer-links {
    padding: 4px 16px 8px !important;
    margin-top: 4px !important;
}

/* Outer element padding (applies from outer doc scope) */
ak-stage-identification,
ak-stage-password,
ak-stage-authenticator-validate,
ak-stage-authenticator-totp {
    padding-bottom: 0 !important;
    display: block !important;
}

/* ===== MOBILE LOGIN FIX ===== */
@media (max-width: 768px) {
    /* Logo floats without a card — card background moves to body + footer only */
    .pf-c-login .pf-c-login__main {
        background: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border: none !important;
        box-shadow: none !important;
        padding: 8px 16px !important;
    }

    .pf-c-login .pf-c-login__main-body {
        background: rgba(0, 18, 8, 0.92) !important;
        border: 1px solid rgba(0, 255, 80, 0.25) !important;
        border-radius: 24px !important;
        box-shadow: 0 0 60px rgba(0, 0, 0, 0.95) !important;
        padding: 24px 20px !important;
    }

    .pf-c-login .pf-c-login__main-footer {
        background: rgba(0, 18, 8, 0.80) !important;
        border: 1px solid rgba(0, 255, 80, 0.15) !important;
        border-radius: 20px !important;
        padding: 12px 20px !important;
        margin-top: 8px !important;
    }

    .ak-brand img,
    .pf-c-login__main-header.ak-brand img {
        width: 200px !important;
        mix-blend-mode: screen !important;
    }
}

/* ===== LIBRARY TILE COMPACT REDESIGN ===================================
 * Desktop (>= 769px): horizontal pill cards, auto-fill grid (kanban-ish).
 *   Icon left, name right, no expander, dense rows that flow into multiple
 *   columns naturally as the viewport widens.
 * Mobile (<= 768px): phone app-drawer — 4-col square grid, icon-dominant
 *   with a tiny label below. 3-col under 380px.
 * Original ".pf-m-compact" rules above (lines ~505-650) are overridden here
 * via later-cascade. Heat ring, badge, sparkle continue to work.
 * ====================================================================== */

/* The library renders inside nested PatternFly `.pf-l-grid` containers
   (NOT `.pf-l-gallery` — that class never matches here). The INNER grid
   is the only one that carries `pf-m-all-6-col-on-sm pf-m-all-4-col-on-md
   pf-m-all-5-col-on-lg pf-m-all-2-col-on-xl`, so we use that as the
   targeting marker to avoid hitting the outer 12-col wrapper.
   Desktop layout is intentionally PatternFly-default (5/6 pills per row
   from `pf-m-all-2-col-on-xl`) — overrides live in the mobile media
   queries below. */
.pf-l-grid.pf-m-gutter.pf-m-all-6-col-on-sm {
    grid-auto-rows: min-content !important;
    align-items: start !important;
}

/* Card becomes a horizontal pill (icon | name) on desktop. */
.pf-c-card.pf-m-hoverable.pf-m-compact {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    min-height: 0 !important;
    padding: 10px 12px !important;
    gap: 12px !important;
    border-radius: 14px !important;
    position: relative !important;
}

.pf-c-card.pf-m-hoverable.pf-m-compact:hover {
    transform: translateY(-2px) !important;
}

.pf-c-card.pf-m-hoverable.pf-m-compact .pf-c-card__header {
    flex: 0 0 auto !important;
    width: 48px !important;
    height: 48px !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

.pf-c-card.pf-m-hoverable.pf-m-compact .pf-c-card__header a {
    width: 48px !important;
    height: 48px !important;
}

.pf-c-card.pf-m-hoverable.pf-m-compact .pf-c-card__header ak-app-icon {
    width: 48px !important;
    height: 48px !important;
    max-width: 48px !important;
    --icon-height: 48px !important;
    border-radius: 12px !important;
}

.pf-c-card.pf-m-hoverable.pf-m-compact .pf-c-card__title {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    align-self: center !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    text-align: left !important;
    font-size: 0.95rem !important;
    line-height: 1.25 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    display: block !important;
}

.pf-c-card.pf-m-hoverable.pf-m-compact .pf-c-card__title a {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6) !important;
    font-size: 0.95rem !important;
}

/* No more "More details" expander cluttering tiles. */
.pf-c-card.pf-m-hoverable.pf-m-compact ak-expand,
.pf-c-card.pf-m-hoverable.pf-m-compact .expander,
.pf-c-card.pf-m-hoverable.pf-m-compact .pf-c-expandable-section {
    display: none !important;
}

/* Badge sits in the header (per ak-tiles.js); shrink for the pill layout. */
.pf-c-card.pf-m-hoverable.pf-m-compact .ak-tile-badge {
    top: -4px !important;
    right: -4px !important;
    padding: 2px 6px !important;
    border-radius: 10px !important;
    background: rgba(0, 0, 0, 0.7) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
}
.pf-c-card.pf-m-hoverable.pf-m-compact .ak-tile-count { font-size: 0.7rem !important; }
.pf-c-card.pf-m-hoverable.pf-m-compact .ak-tile-time  { font-size: 0.55rem !important; }

/* Heat ring stays — re-target the smaller icon. */
ak-app-icon.ak-tile-heat {
    border-radius: 12px !important;
    outline-offset: 1px !important;
}

/* ── Desktop pill polish (>= 769px) ──────────────────────────────────
 * Keeps the horizontal-pill layout (icon | name | usage badge) the
 * library already had, but escapes the badge from the icon header so
 * it sits on the empty right side of the whole pill, and dresses the
 * pill with subtle depth (gradient, inset highlight, smoother hover). */
@media (min-width: 769px) {
    /* Pill width: fixed columns aligned to the start so a single
       "Studio" pill doesn't stretch and a multi-card row doesn't pad
       each pill out to ~310px. Empty space goes to the row end, not
       between title and badge. 260px is the sweet spot for long names
       like "Terminal — salik" to fit without truncation. */
    .pf-l-grid.pf-m-gutter.pf-m-all-6-col-on-sm {
        grid-template-columns: repeat(auto-fill, 260px) !important;
        gap: 12px !important;
        justify-content: start !important;
    }
    .pf-l-grid.pf-m-gutter.pf-m-all-6-col-on-sm > .pf-l-grid__item,
    .pf-l-grid.pf-m-gutter.pf-m-all-6-col-on-sm > ak-library-app {
        grid-column: auto !important;
        max-width: 260px !important;
    }

    /* ak-tiles.js appends the badge into `.pf-c-card__header` and sets
       `header.style.position = "relative"` inline — that's why the
       previous `right: 10px` landed inside the 48px icon box. Force the
       header back to `static` so the badge resolves against the card. */
    .pf-c-card.pf-m-hoverable.pf-m-compact .pf-c-card__header {
        position: static !important;
        overflow: visible !important;
    }

    /* Reserve right-side real estate inside each pill for the badge. */
    .pf-c-card.pf-m-hoverable.pf-m-compact {
        padding-right: 60px !important;
        background:
            linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.015) 100%),
            rgba(18, 22, 28, 0.55) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,0.06),
            0 1px 0 rgba(0,0,0,0.3),
            0 2px 8px rgba(0,0,0,0.18) !important;
        transition: transform 180ms cubic-bezier(.2,.7,.2,1),
                    background 180ms ease,
                    box-shadow 180ms ease,
                    border-color 180ms ease !important;
    }
    .pf-c-card.pf-m-hoverable.pf-m-compact:hover {
        transform: translateY(-2px) !important;
        background:
            linear-gradient(180deg, rgba(255,255,255,0.09) 0%, rgba(255,255,255,0.03) 100%),
            rgba(22, 28, 36, 0.7) !important;
        border-color: rgba(255, 255, 255, 0.16) !important;
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,0.1),
            0 6px 18px rgba(0,0,0,0.35) !important;
    }

    /* Move the click counter + "ago" timestamp from the icon corner to
       a vertically-centered chip on the right side of the pill. */
    .pf-c-card.pf-m-hoverable.pf-m-compact .ak-tile-badge {
        position: absolute !important;
        top: 50% !important;
        right: 10px !important;
        left: auto !important;
        bottom: auto !important;
        transform: translateY(-50%) !important;
        padding: 4px 10px !important;
        min-width: 44px !important;
        border-radius: 12px !important;
        background:
            linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%),
            rgba(0, 0, 0, 0.55) !important;
        border: 1px solid rgba(255, 255, 255, 0.14) !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.08) !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 1px !important;
        line-height: 1 !important;
    }
    .pf-c-card.pf-m-hoverable.pf-m-compact .ak-tile-count {
        font-size: 0.95rem !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        letter-spacing: -0.01em !important;
        color: #fff !important;
    }
    .pf-c-card.pf-m-hoverable.pf-m-compact .ak-tile-time {
        font-size: 0.58rem !important;
        line-height: 1 !important;
        opacity: 0.68 !important;
        white-space: nowrap !important;
        font-variant-numeric: tabular-nums !important;
    }

    /* Title gets a touch more weight + slightly tighter tracking. */
    .pf-c-card.pf-m-hoverable.pf-m-compact .pf-c-card__title a {
        font-weight: 600 !important;
        letter-spacing: -0.005em !important;
    }
}

/* ── Phone app-drawer (<= 768px) ──────────────────────────────────────── */
@media (max-width: 768px) {
    .pf-l-grid.pf-m-gutter.pf-m-all-6-col-on-sm {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 8px !important;
        padding: 8px !important;
    }

    /* PatternFly's per-item column spans don't fire below 576px, leaving
       each item full-width. Cancel any span and force one-cell items. */
    .pf-l-grid.pf-m-gutter.pf-m-all-6-col-on-sm > .pf-l-grid__item,
    .pf-l-grid.pf-m-gutter.pf-m-all-6-col-on-sm > ak-library-app {
        grid-column: auto !important;
        max-width: 100% !important;
    }

    .pf-c-card.pf-m-hoverable.pf-m-compact {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        position: relative !important;
        aspect-ratio: unset !important;
        min-height: 102px !important;
        padding: 8px 4px 6px !important;
        gap: 6px !important;
        border-radius: 16px !important;
        background: rgba(255, 255, 255, 0.06) !important;
        cursor: pointer !important;
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: rgba(255, 255, 255, 0.12) !important;
    }

    .pf-c-card.pf-m-hoverable.pf-m-compact:hover {
        transform: scale(1.03) !important;
        background: rgba(255, 255, 255, 0.10) !important;
    }

    .pf-c-card.pf-m-hoverable.pf-m-compact .pf-c-card__header,
    .pf-c-card.pf-m-hoverable.pf-m-compact .pf-c-card__header a,
    .pf-c-card.pf-m-hoverable.pf-m-compact .pf-c-card__header ak-app-icon {
        width: 100% !important;
        max-width: 48px !important;
        height: 48px !important;
        --icon-height: 48px !important;
    }

    .pf-c-card.pf-m-hoverable.pf-m-compact .pf-c-card__header {
        position: static !important;
        z-index: auto !important;
    }

    /* Tap target: card's own ::after covers the whole tile so iOS Safari
       hit-testing works reliably. Using a::after (child anchor) extended
       its inset:0 beyond the anchor's 48px natural bounds — iOS Safari
       silently drops those out-of-bounds pseudo-element touch events,
       falling back to the non-interactive shadow host. card::after stays
       within the card's own bounds, so hit-testing lands on the card div
       (cursor:pointer) and ak-tiles.js + ak-curtain.js handle the click. */
    .pf-c-card.pf-m-hoverable.pf-m-compact::after {
        content: "" !important;
        position: absolute !important;
        inset: 0 !important;
        z-index: 20 !important;
        border-radius: 16px !important;
        cursor: pointer !important;
    }

    .pf-c-card.pf-m-hoverable.pf-m-compact .pf-c-card__header ak-app-icon {
        position: relative !important;
        z-index: 1 !important;
        border-radius: 12px !important;
    }

    /* Two-line ellipsis: enough room for "n8n — salik" / "Terminal — sa…". */
    .pf-c-card.pf-m-hoverable.pf-m-compact .pf-c-card__title,
    .pf-c-card.pf-m-hoverable.pf-m-compact .pf-c-card__title a {
        position: relative !important;
        z-index: 1 !important;
        font-size: 0.62rem !important;
        line-height: 1.1 !important;
        font-weight: 600 !important;
        max-width: 100% !important;
        text-align: center !important;
        white-space: normal !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        word-break: break-word !important;
    }

    /* Dot-style badge in the corner of the icon. */
    .pf-c-card.pf-m-hoverable.pf-m-compact .ak-tile-badge {
        top: 2px !important;
        right: 2px !important;
        padding: 1px 5px !important;
        border-radius: 999px !important;
        background: rgba(0, 0, 0, 0.78) !important;
    }
    .pf-c-card.pf-m-hoverable.pf-m-compact .ak-tile-count { font-size: 0.58rem !important; }
    .pf-c-card.pf-m-hoverable.pf-m-compact .ak-tile-time  { display: none !important; }
}

/* Ultra-narrow phones — drop to 3 columns so icons stay tappable. */
@media (max-width: 380px) {
    .pf-l-grid.pf-m-gutter.pf-m-all-6-col-on-sm {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

/* Item / custom-element hosts shouldn't reserve fixed heights — collapse
   them so the card box drives layout. */
.pf-l-grid__item,
ak-library-app {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    align-self: start !important;
}

/* Desktop pill height — locks the kanban-ish 68px row across breakpoints. */
.pf-c-card.pf-m-hoverable.pf-m-compact {
    box-sizing: border-box !important;
    height: 68px !important;
    min-height: 68px !important;
    max-height: 68px !important;
}

@media (max-width: 768px) {
    /* Release the 68px desktop pill clamp on phones and re-assert the
       mobile tile size. This block must come AFTER the desktop pill
       clamp above to win the cascade on equal specificity. */
    .pf-c-card.pf-m-hoverable.pf-m-compact {
        height: auto !important;
        min-height: 88px !important;
        max-height: none !important;
    }

    /* The `ak-library-impl` shadow host itself has ~12px / ~20px padding
       that wastes width and lifts the whole page off the bottom edge.
       Flat selector reaches the host because `data-inject` injects this
       stylesheet into every shadow root. */
    ak-library-impl {
        padding: 0 !important;
    }
    .pf-c-page__main {
        padding: 0 !important;
    }
    .pf-c-page__main-section {
        padding: 4px 6px !important;
    }

    /* Last section needs room for the Safari bottom toolbar (handle,
       tabs, share row). env() keeps the bottom inset honest on devices
       with home indicators. */
    .pf-c-page__main-section:last-child {
        padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* Outer 12-col wrapper carries the inter-section row gap. */
    .pf-l-grid.pf-m-gutter {
        gap: 2px !important;
        row-gap: 2px !important;
    }
    /* Inner per-app grid: tighten the inter-tile gap too. */
    .pf-l-grid.pf-m-gutter.pf-m-all-6-col-on-sm {
        gap: 4px !important;
        padding: 0 !important;
    }

    /* PatternFly's `.app-group-header` reserves 19.2px top + 16px bottom
       around each section title — by far the biggest contributor to
       inter-section vertical space. Crush it down. */
    .pf-c-content.app-group-header,
    .app-group-header {
        margin: 4px 0 2px !important;
        padding: 0 !important;
    }
    .pf-c-content h1,
    .pf-c-content h2,
    .pf-c-content h3,
    .pf-c-title {
        margin: 0 0 2px !important;
        padding: 0 !important;
        font-size: 0.92rem !important;
        line-height: 1.15 !important;
    }
}

/* ── ClaudeOnCloud Home · app-grid section headers (Task 12) ───────────── */
/* Injected by ak-home.js into the light-DOM grid container
   (.pf-l-grid.pf-m-gutter.pf-m-all-6-col-on-sm). Not shadow-piercing. */
.coc-section {
    grid-column: 1 / -1 !important;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 18px 0 4px;
    font: 600 12px/1 system-ui, sans-serif;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.78);
}
.coc-section:first-of-type { margin-top: 4px; }
.coc-section-label { white-space: nowrap; }
.coc-section-count {
    font-weight: 700;
    font-size: 10px;
    padding: 2px 7px;
    border-radius: 999px;
    color: #0a0e14;
    background: var(--coc-accent, #39e0a0);
}
.coc-section-rule {
    flex: 1 1 auto;
    height: 1px;
    background: linear-gradient(90deg, var(--coc-accent, #39e0a0) 0%, rgba(255,255,255,0) 70%);
    opacity: 0.55;
}
/* Five deterministic accent swatches (accentForGroup → 0..4). */
.coc-section[data-accent="0"] { --coc-accent: #39e0a0; }
.coc-section[data-accent="1"] { --coc-accent: #4ea8ff; }
.coc-section[data-accent="2"] { --coc-accent: #c77dff; }
.coc-section[data-accent="3"] { --coc-accent: #ffb454; }
.coc-section[data-accent="4"] { --coc-accent: #ff6b8a; }

/* ── ClaudeOnCloud Home · featured (most-used) tile (Task 13) ──────────── */
/* Host span — light DOM, makes the leader's grid cell wider. */
ak-library-app.coc-featured {
    grid-column: span 2 !important;
    max-width: 532px !important;   /* 2*260 + 12 gap */
}
/* Card glow — inside ak-library-app's shadow root (data-inject piercing). */
.pf-c-card.coc-featured {
    border: 1px solid rgba(57, 224, 160, 0.55) !important;
    box-shadow:
      0 0 0 1px rgba(57, 224, 160, 0.25),
      0 8px 30px rgba(57, 224, 160, 0.28),
      inset 0 0 40px rgba(57, 224, 160, 0.08) !important;
    background:
      linear-gradient(180deg, rgba(57,224,160,0.10) 0%, rgba(57,224,160,0.02) 100%),
      rgba(18, 22, 28, 0.6) !important;
}
.pf-c-card.coc-featured ak-app-icon {
    transform: scale(1.12);
    transform-origin: left center;
}

/* ===================================================================
   ===== CLAUDEONCLOUD HOME =====
   Personalizable home dashboard injected by ak-home.js on /if/user/.
   ak-home.js builds .coc-* nodes in LIGHT DOM as siblings inside the
   library page main, so these rules are GLOBAL (no data-inject, no
   !important flood). Tile/section shadow styling stays in the rules
   above. Colors/spacing pulled from concepts/u-desktop|u-edit|u-mobile.
   Mood tokens live on .coc-home and are overridden by
   :root[data-mood="aurora"|"deep-space"] .coc-home { ... } (see end).
   .coc-section and .coc-featured are scoped inside .coc-home to avoid
   clobbering the Task 12/13 rules for the legacy Authentik grid.
   =================================================================== */

.coc-home {
    /* palette tokens (mood = neon, the default) */
    --coc-accent:        #39FF14;   /* primary neon green */
    --coc-accent-2:      #1E90FF;   /* secondary blue */
    --coc-accent-3:      #8A2BE2;   /* tertiary purple */
    --coc-ink:           #0a0a0e;   /* on-accent text */
    --coc-text:          #f1f1f6;
    --coc-muted:         #a7a7b6;
    --coc-dim:           #6f6f80;
    /* glass surface tokens */
    --coc-glass-bg:      rgba(255, 255, 255, 0.06);
    --coc-glass-bg-2:    rgba(255, 255, 255, 0.055);
    --coc-glass-border:  rgba(255, 255, 255, 0.16);
    --coc-glass-inset:   inset 0 1px 0 rgba(255, 255, 255, 0.18);
    --coc-glass-blur:    blur(12px);
    --coc-radius:        18px;
    --coc-radius-sm:     14px;
    --coc-gap:           34px;

    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.66fr 1fr;
    gap: var(--coc-gap);
    align-items: start;
    box-sizing: border-box;
    padding: 30px 36px 40px;
    color: var(--coc-text);
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}
.coc-home * { box-sizing: border-box; }

/* left launcher column / right board column wrappers */
.coc-home .coc-left  { min-width: 0; }
.coc-home .coc-right { min-width: 0; }

/* ── shadow-DOM home placement ──────────────────────────────────────────────
   ak-home injects into ak-library-impl's shadow root. The <main> there becomes
   .coc-home (a 2-col grid). Its direct children:
     .coc-cmd-bar          → command bar, spans both columns (rule above)
     .pf-c-content.header  → Authentik's "My applications" h1 (+ native search);
                             tagged .coc-ak-header and hidden — the ⌘K palette
                             replaces it
     section.coc-gallery   → grouped app tiles  (column 1)
     .coc-board            → widget board        (column 2)                      */
.coc-home > .coc-ak-header { display: none; }
.coc-home > .coc-gallery   { min-width: 0; }
.coc-home > section.coc-gallery { padding: 0; margin: 0; }

/* Desktop layout: explicit rows because once there are two boards, grid
   auto-flow can't infer the col1/col2 interleave. Rows:
     1  edit toolbar (only while editing — empty row collapses to 0)
     2  command bar (full width)
     3  [ apps gallery (col1) | top widget board (col2, right rail) ]
     4  bottom widget board (full width, below everything)
     5  add-widget tray (only while editing) */
@media (min-width: 769px) {
  .coc-home > .coc-edit-toolbar              { grid-column: 1 / -1; grid-row: 1; }
  .coc-home > .coc-cmd-bar                   { grid-column: 1 / -1; grid-row: 2; }
  .coc-home > .coc-gallery                   { grid-column: 1; grid-row: 3; }
  .coc-home > .coc-board[data-zone="top"]    { grid-column: 2; grid-row: 3; }
  .coc-home > .coc-board[data-zone="bottom"] { grid-column: 1 / -1; grid-row: 4; }
  .coc-home > .coc-tray                      { grid-column: 1 / -1; grid-row: 5; }
}

/* ── accent-tag Authentik's OWN group headers (.app-group-header). These live in
   ak-library-application-list's shadow root — a DIFFERENT shadow root from
   .coc-home — so these rules must NOT be scoped under .coc-home. We only tag
   (ak-home adds .coc-sech + data-accent); Authentik still owns the markup. ── */
.coc-sech[data-accent] h2 {
    position: relative;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    padding-left: 13px;
    margin: 0;
    color: var(--coc-sech-accent, #a7a7b6) !important;
}
.coc-sech[data-accent] h2::before {
    content: "";
    position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 4px; height: 0.95em; border-radius: 2px;
    background: var(--coc-sech-accent, #a7a7b6);
    box-shadow: 0 0 10px -1px var(--coc-sech-accent, #a7a7b6);
}
.coc-sech[data-accent="0"] { --coc-sech-accent: #39e0a0; }
.coc-sech[data-accent="1"] { --coc-sech-accent: #4ea8ff; }
.coc-sech[data-accent="2"] { --coc-sech-accent: #c77dff; }
.coc-sech[data-accent="3"] { --coc-sech-accent: #ffb454; }
.coc-sech[data-accent="4"] { --coc-sech-accent: #ff6b8a; }

/* shared glass primitive */
.coc-glass {
    position: relative;
    background: var(--coc-glass-bg);
    border: 1px solid var(--coc-glass-border);
    border-radius: var(--coc-radius);
    backdrop-filter: var(--coc-glass-blur);
    -webkit-backdrop-filter: var(--coc-glass-blur);
    box-shadow: var(--coc-glass-inset), 0 18px 48px -24px rgba(0, 0, 0, 0.75);
}

/* shared gradient icon tile (emoji-in-gradient identity) */
.coc-icon {
    border-radius: var(--coc-radius-sm);
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    line-height: 1;
    color: var(--coc-text);
    background: linear-gradient(135deg, var(--coc-accent), var(--coc-accent-2));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 8px 22px -10px rgba(0, 0, 0, 0.6);
}

/* ── command bar / top row (spans both columns) ── */
.coc-cmd-bar {
    grid-column: 1 / -1;
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 30px;
}
.coc-cmd-avatar {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: var(--coc-radius-sm);
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 18px;
    color: var(--coc-ink);
    background: linear-gradient(135deg, var(--coc-accent), #00FFFF);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 8px 22px -8px rgba(57, 255, 20, 0.6);
}
/* coc-cmd-input: the ⌘K search trigger (button styled as an input row) */
.coc-cmd-input {
    flex: 1 1 auto;
    height: 44px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 0 16px;
    border-radius: var(--coc-radius-sm);
    background: var(--coc-glass-bg);
    border: 1px solid var(--coc-glass-border);
    backdrop-filter: var(--coc-glass-blur);
    -webkit-backdrop-filter: var(--coc-glass-blur);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
    color: var(--coc-muted);
    font-size: 14px;
    cursor: text;
    text-align: left;
    width: 100%;
}
.coc-brand { flex: 0 0 auto; display: flex; flex-direction: column; gap: 2px; margin-right: 6px; }
.coc-brand-name { font-size: 14px; font-weight: 700; letter-spacing: -0.01em; }
.coc-brand-sub  { font-size: 11px; color: var(--coc-dim); }

.coc-cmd {
    flex: 1 1 auto;
    height: 44px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 0 16px;
    border-radius: var(--coc-radius-sm);
    background: var(--coc-glass-bg);
    border: 1px solid var(--coc-glass-border);
    backdrop-filter: var(--coc-glass-blur);
    -webkit-backdrop-filter: var(--coc-glass-blur);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
    color: var(--coc-muted);
    font-size: 14px;
    cursor: text;
}
.coc-cmd-glyph { color: var(--coc-dim); font-size: 14px; }
.coc-cmd-text  { flex: 1 1 auto; }
.coc-cmd-hint {
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 600;
    color: var(--coc-muted);
    padding: 3px 8px;
    border-radius: 7px;
    background: var(--coc-glass-bg);
    border: 1px solid rgba(255, 255, 255, 0.14);
}
.coc-cmd-mood {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: var(--coc-radius-sm);
    display: grid;
    place-items: center;
    font-size: 17px;
    color: var(--coc-text);
    background: var(--coc-glass-bg);
    border: 1px solid var(--coc-glass-border);
    backdrop-filter: var(--coc-glass-blur);
    -webkit-backdrop-filter: var(--coc-glass-blur);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
    cursor: pointer;
}
.coc-cmd-customize {
    flex: 0 0 auto;
    height: 44px;
    border-radius: var(--coc-radius-sm);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 18px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--coc-text);
    background: rgba(57, 255, 20, 0.1);
    border: 1px solid rgba(57, 255, 20, 0.32);
    backdrop-filter: var(--coc-glass-blur);
    -webkit-backdrop-filter: var(--coc-glass-blur);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 10px 28px -16px rgba(57, 255, 20, 0.6);
    cursor: pointer;
}
.coc-cmd-customize .coc-cmd-customize-glyph { color: var(--coc-accent); font-size: 13px; }
.coc-cmd-customize:hover { background: rgba(57, 255, 20, 0.16); }

/* ── command palette overlay (opened by ⌘K) ── */
/* INERT WHEN CLOSED: palette is display:none by default so it can never
   intercept pointer events or focus when not open. .is-open shows it. */
.coc-palette {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    align-items: flex-start;
    justify-content: center;
    padding-top: 12vh;
    background: rgba(6, 6, 9, 0.62);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.coc-palette.is-open {
    display: flex;
}
.coc-palette[hidden] { display: none; }
.coc-palette-card {
    width: min(620px, 92vw);
    max-height: 64vh;
    display: flex;
    flex-direction: column;
    border-radius: 20px;
    background: rgba(16, 16, 22, 0.92);
    border: 1px solid rgba(57, 255, 20, 0.28);
    box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(57, 255, 20, 0.08);
    overflow: hidden;
}
.coc-palette-input {
    flex: 0 0 auto;
    height: 54px;
    padding: 0 18px;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: transparent;
    color: var(--coc-text);
    font-size: 16px;
    outline: none;
}
.coc-palette-input::placeholder { color: var(--coc-dim); }
.coc-palette-list { flex: 1 1 auto; overflow-y: auto; padding: 8px; }
.coc-palette-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 12px;
    border-radius: 12px;
    font-size: 14px;
    color: var(--coc-text);
    cursor: pointer;
}
.coc-palette-item .coc-palette-ic { width: 26px; text-align: center; font-size: 17px; }
.coc-palette-item .coc-palette-kind {
    margin-left: auto;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--coc-dim);
}
.coc-palette-label {
    padding: 4px 12px 2px;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--coc-dim);
}
.coc-palette-item.coc-active,
.coc-palette-item:hover { background: rgba(57, 255, 20, 0.12); }

/* ── widget board (iOS-style S/M/L grid; one per zone) ── */
.coc-board {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: minmax(128px, auto);
    gap: 16px;
    align-content: start;
}
/* The bottom board is full-width on desktop, so it fits more, smaller tiles. */
@media (min-width: 769px) {
    .coc-home > .coc-board[data-zone="bottom"] {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    }
}
/* An empty board vanishes when read-only, but in edit mode shows a labelled drop
   target so you can see where "top" and "bottom" live and aim widgets at them. */
.coc-board:empty { display: none; }
.coc-home.coc-editing .coc-board:empty {
    display: grid;
    min-height: 92px;
    border: 1.5px dashed rgba(255, 255, 255, 0.18);
    border-radius: 18px;
    place-items: center;
}
.coc-home.coc-editing .coc-board:empty::after {
    content: attr(data-empty-hint);
    grid-column: 1 / -1;
    text-align: center;
    font-size: 11.5px; letter-spacing: 0.04em; color: var(--coc-muted);
    padding: 0 14px;
}
.coc-board-head { display: flex; align-items: center; gap: 9px; margin-bottom: 2px; }
.coc-board-label {
    font-size: 11px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase;
    color: var(--coc-muted);
}
.coc-board-rule { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(30, 144, 255, 0.45), transparent); }
.coc-board-tag {
    font-size: 10px; font-weight: 600; color: var(--coc-accent-2);
    padding: 3px 9px; border-radius: 7px;
    background: rgba(30, 144, 255, 0.1); border: 1px solid rgba(30, 144, 255, 0.3);
}

.coc-widget {
    position: relative;
    min-width: 0;
    padding: 18px 19px;
    background: var(--coc-glass-bg);
    border: 1px solid var(--coc-glass-border);
    border-radius: var(--coc-radius);
    backdrop-filter: var(--coc-glass-blur);
    -webkit-backdrop-filter: var(--coc-glass-blur);
    box-shadow: var(--coc-glass-inset), 0 16px 44px -22px rgba(0, 0, 0, 0.7);
    /* default span = m; per-tile data-size overrides below */
    grid-column: span 2;
    grid-row: span 1;
}
/* iOS-style tile sizes on the 2-column board (at every width, incl. phones):
   s = half-width · m = full-width (span both cols) · l = full-width + 2 rows tall.
   Defaults are all m, so s only appears when the user chooses it in edit mode. */
.coc-widget[data-size="s"] { grid-column: span 1; grid-row: span 1; }
.coc-widget[data-size="m"] { grid-column: span 2; grid-row: span 1; }
.coc-widget[data-size="l"] { grid-column: span 2; grid-row: span 2; }
/* widget body: fills below the widget head */
.coc-wbody { display: block; padding-top: 2px; }
/* widget-head: the drag-handle + move/size/remove controls injected in edit mode.
   Wraps so the full control set fits even on a small (half-width) tile. */
.coc-widget-head {
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 10px;
}
.coc-wmove, .coc-wsize {
    flex: 0 0 auto;
    height: 24px; min-width: 24px; padding: 0 6px;
    display: grid; place-items: center;
    font-size: 12px; font-weight: 700; line-height: 1; color: var(--coc-muted);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 8px; cursor: pointer;
}
.coc-wmove:hover, .coc-wsize:hover {
    color: var(--coc-text); border-color: rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.1);
}
/* size button stands out (it's the resize control the user asked for) */
.coc-wsize {
    min-width: 28px; color: var(--coc-accent);
    border-color: rgba(57, 255, 20, 0.4); background: rgba(57, 255, 20, 0.1);
}
.coc-widget-label {
    flex: 1; font-size: 10px; font-weight: 700; letter-spacing: 0.13em;
    text-transform: uppercase; color: var(--coc-muted);
}
/* editable state: dashed border injected by JS when edit mode is on */
.coc-widget--editable { border-style: dashed !important; border-color: rgba(255, 255, 255, 0.28) !important; }
.coc-whead { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.coc-wlabel {
    flex: 1; font-size: 10.5px; font-weight: 700; letter-spacing: 0.13em;
    text-transform: uppercase; color: var(--coc-muted);
}
.coc-grip { font-size: 14px; color: #4d4d5c; letter-spacing: 2px; }

/* greeting-clock widget */
.coc-greet-hi { font-size: 15px; font-weight: 600; margin-bottom: 12px; }
.coc-greet-hi b { color: var(--coc-accent); font-weight: 700; }
.coc-greet-time { font-size: 44px; font-weight: 700; letter-spacing: -0.025em; line-height: 1; }
.coc-greet-ampm { font-size: 18px; font-weight: 600; color: var(--coc-muted); margin-left: 5px; }
.coc-greet-row { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
.coc-greet-date { font-size: 13px; color: var(--coc-muted); }
.coc-weather {
    font-size: 12px; font-weight: 600; color: var(--coc-text);
    padding: 5px 11px; border-radius: 9px;
    background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.15);
}

/* system-status widget */
.coc-statlist { display: flex; flex-direction: column; gap: 11px; }
.coc-statrow { display: flex; align-items: center; gap: 11px; font-size: 13px; }
.coc-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.coc-dot.coc-green { background: #39FF14; box-shadow: 0 0 9px #39FF14; }
.coc-dot.coc-amber { background: #FFD700; box-shadow: 0 0 9px #FFD700; }
.coc-dot.coc-red   { background: #FF1493; box-shadow: 0 0 9px #FF1493; }
.coc-statname { flex: 1; }
.coc-statval { font-size: 11px; color: var(--coc-dim); }
.coc-statval.coc-amber { color: #FFD700; }
.coc-statval.coc-red   { color: #FF6b8a; }

/* Per-app icon gradients — JS sets coc-ic-<slug> alongside .coc-icon. */
.coc-ic-iptele  { background: linear-gradient(135deg, #3da9ff, #1466c4); }
.coc-ic-iptv    { background: linear-gradient(135deg, #8a93a6, #4a5365); }
.coc-ic-admin   { background: linear-gradient(135deg, #5b6473, #2d333d); }
.coc-ic-grafana { background: linear-gradient(135deg, #f0a020, #d65a2a); }
.coc-ic-wwv     { background: linear-gradient(135deg, #2e7fff, #1b9e6b); }
.coc-ic-studio  { background: linear-gradient(135deg, #2a2a2a, #050505); }
.coc-ic-ssh     { background: linear-gradient(135deg, #3a3f4a, #23272f); }
.coc-ic-xapps   { background: linear-gradient(135deg, #2b2f38, #16191f); }
.coc-ic-default { background: linear-gradient(135deg, #3a3f4a, #23272f); }
/* summary line below the stat list (all-green / degraded / etc.) */
.coc-stat-summary {
    margin-top: 10px;
    font-size: 11px;
    font-weight: 600;
    padding: 5px 11px;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--coc-muted);
}
.coc-stat-summary.coc-state-up   { color: #39FF14; border-color: rgba(57, 255, 20, 0.25); background: rgba(57, 255, 20, 0.07); }
.coc-stat-summary.coc-state-slow { color: #FFD700; border-color: rgba(255, 215, 0, 0.25); background: rgba(255, 215, 0, 0.07); }
.coc-stat-summary.coc-state-down { color: #FF6b8a; border-color: rgba(255, 20, 147, 0.25); background: rgba(255, 20, 147, 0.07); }

/* uptime-ci widget */
.coc-uptime { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; }
.coc-uptime small { font-size: 12px; font-weight: 500; color: var(--coc-dim); margin-left: 7px; }
.coc-cichip {
    margin-top: 13px; display: flex; align-items: center; gap: 9px;
    font-size: 12px; color: var(--coc-muted);
    padding: 9px 12px; border-radius: 11px;
    background: rgba(57, 255, 20, 0.07); border: 1px solid rgba(57, 255, 20, 0.22);
}
.coc-cichip b { color: var(--coc-accent); font-weight: 700; }
.coc-cichip .coc-cibranch { color: var(--coc-text); font-weight: 600; }

/* jump-back-in widget */
.coc-jump { display: flex; flex-direction: column; gap: 12px; }
.coc-jrow { display: flex; align-items: center; gap: 12px; }
/* actionable recents — launch the app on click/Enter */
.coc-jrow--link { cursor: pointer; border-radius: 12px; padding: 6px; margin: -6px; transition: background 0.12s ease; }
.coc-jrow--link:hover { background: rgba(255, 255, 255, 0.07); }
.coc-jrow--link:active { background: rgba(255, 255, 255, 0.12); }
.coc-jrow--link:focus-visible { outline: 2px solid var(--coc-accent); outline-offset: 2px; }
.coc-jrow .coc-icon { width: 36px; height: 36px; border-radius: 11px; font-size: 18px; }
.coc-jname { flex: 1; font-size: 13px; font-weight: 600; }
.coc-jtime { font-size: 11px; color: var(--coc-dim); }

/* quick-actions widget */
.coc-qa { display: flex; flex-wrap: wrap; gap: 10px; }
.coc-pill {
    font-size: 12px; font-weight: 600; color: var(--coc-text);
    padding: 9px 15px; border-radius: 11px;
    background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
    cursor: pointer;
}
.coc-pill.coc-pill--accent { background: rgba(30, 144, 255, 0.14); border-color: rgba(30, 144, 255, 0.4); }
.coc-pill:hover { background: rgba(255, 255, 255, 0.12); }

/* activity-feed widget (v2 type, board-rendered) */
.coc-feed { display: flex; flex-direction: column; gap: 13px; }
.coc-feedrow { display: flex; gap: 11px; font-size: 13px; line-height: 1.4; }
.coc-feeddot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; }
.coc-feeddot.coc-green { background: #39FF14; box-shadow: 0 0 8px #39FF14; }
.coc-feeddot.coc-blue  { background: #1E90FF; box-shadow: 0 0 8px #1E90FF; }
.coc-feeddot.coc-gold  { background: #FFD700; box-shadow: 0 0 8px #FFD700; }
.coc-feedtxt { color: #e6e6ee; }
.coc-feedtxt b { font-weight: 700; color: var(--coc-text); }
.coc-feedtime { font-size: 11px; color: var(--coc-dim); margin-top: 2px; }

/* ── launcher column head ── */
.coc-colhead { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 20px; }
.coc-h1 { font-size: 23px; font-weight: 700; letter-spacing: -0.015em; margin: 0; }
.coc-h1-sub { font-size: 13px; font-weight: 500; color: var(--coc-dim); }

/* ── pinned / most-used rail ── */
.coc-pinrow { margin-bottom: 32px; }
.coc-railhead { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; }
.coc-railhead-label {
    font-size: 11px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase;
    color: var(--coc-muted);
}
.coc-railhead-rule { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(57, 255, 20, 0.45), transparent); }
.coc-pins { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 16px; align-items: stretch; }

/* ── featured hero tile (most-used app) — scoped inside .coc-home ── */
/* Note: ak-library-app.coc-featured and .pf-c-card.coc-featured (Task 13)
   are the legacy shadow-root rules; this .coc-home .coc-featured rule
   styles the new light-DOM home dashboard version. */
.coc-home .coc-featured {
    position: relative;
    padding: 20px;
    border-radius: 20px;
    background:
        radial-gradient(120% 90% at 100% 0%, rgba(57, 255, 20, 0.16), transparent 60%),
        rgba(57, 255, 20, 0.06);
    border: 1px solid rgba(57, 255, 20, 0.36);
    backdrop-filter: var(--coc-glass-blur);
    -webkit-backdrop-filter: var(--coc-glass-blur);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        0 0 0 1px rgba(57, 255, 20, 0.08),
        0 20px 56px -22px rgba(57, 255, 20, 0.55);
    display: flex;
    flex-direction: column;
    gap: 14px;
    cursor: pointer;
}
.coc-featured-top { display: flex; align-items: flex-start; justify-content: space-between; }
.coc-featured-badge {
    font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--coc-ink); background: var(--coc-accent);
    padding: 4px 9px; border-radius: 7px;
    box-shadow: 0 0 16px rgba(57, 255, 20, 0.55);
}
.coc-home .coc-featured .coc-icon { width: 62px; height: 62px; border-radius: 16px; font-size: 31px; }
.coc-featured-body { display: flex; flex-direction: column; gap: 5px; margin-top: auto; }
.coc-featured-name { font-size: 21px; font-weight: 700; letter-spacing: -0.015em; }
.coc-featured-meta { font-size: 12.5px; color: var(--coc-accent); font-weight: 500; }
.coc-featured-go {
    align-self: flex-start;
    font-size: 12.5px; font-weight: 600; color: var(--coc-ink);
    padding: 8px 16px; border-radius: 10px;
    background: var(--coc-accent); border: 1px solid rgba(57, 255, 20, 0.6);
    box-shadow: 0 8px 22px -10px rgba(57, 255, 20, 0.7);
}

/* small pinned tile beside the hero */
.coc-pin {
    padding: 18px; border-radius: var(--coc-radius); min-height: 142px;
    background: var(--coc-glass-bg); border: 1px solid var(--coc-glass-border);
    backdrop-filter: var(--coc-glass-blur); -webkit-backdrop-filter: var(--coc-glass-blur);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
    display: flex; flex-direction: column; justify-content: space-between;
    cursor: pointer;
}
.coc-pin .coc-icon { width: 50px; height: 50px; font-size: 25px; }
.coc-pin-body { display: flex; flex-direction: column; gap: 3px; }
.coc-pin-name { font-size: 14.5px; font-weight: 600; }
.coc-pin-meta { font-size: 11px; color: var(--coc-dim); }

/* ── launcher sections (app groups) — scoped inside .coc-home ── */
/* Note: .coc-section (Task 12) is the legacy Authentik grid row-header;
   .coc-home .coc-section overrides for the new home dashboard context. */
.coc-home .coc-section { margin-bottom: 26px; }
.coc-home .coc-section:last-child { margin-bottom: 0; }
.coc-sechead { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.coc-seclabel { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--coc-muted); }
.coc-seccount {
    font-size: 10px; font-weight: 700; color: var(--coc-muted);
    min-width: 20px; height: 20px; padding: 0 5px; border-radius: 7px; display: grid; place-items: center;
    background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12);
}
.coc-secdiv { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(167, 167, 182, 0.4), transparent); }

/* accent colors by section group */
.coc-home .coc-section.coc-acc-admin .coc-seclabel { color: #FF1493; }
.coc-home .coc-section.coc-acc-admin .coc-secdiv { background: linear-gradient(90deg, rgba(255, 20, 147, 0.5), transparent); }
.coc-home .coc-section.coc-acc-obs .coc-seclabel { color: #00FFFF; }
.coc-home .coc-section.coc-acc-obs .coc-secdiv { background: linear-gradient(90deg, rgba(0, 255, 255, 0.5), transparent); }
.coc-home .coc-section.coc-acc-music .coc-seclabel { color: #FFD700; }
.coc-home .coc-section.coc-acc-music .coc-secdiv { background: linear-gradient(90deg, rgba(255, 215, 0, 0.5), transparent); }
.coc-home .coc-section.coc-acc-aux .coc-seclabel { color: var(--coc-muted); }
.coc-home .coc-section.coc-acc-aux .coc-secdiv { background: linear-gradient(90deg, rgba(167, 167, 182, 0.4), transparent); }

/* richer in-section tiles */
.coc-secgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.coc-tile {
    position: relative; display: flex; align-items: center; gap: 14px;
    padding: 15px 16px; border-radius: 16px;
    background: var(--coc-glass-bg-2); border: 1px solid rgba(255, 255, 255, 0.14);
    backdrop-filter: var(--coc-glass-blur); -webkit-backdrop-filter: var(--coc-glass-blur);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
.coc-tile .coc-icon { width: 46px; height: 46px; border-radius: 13px; font-size: 23px; }
.coc-tile-body { min-width: 0; }
.coc-tile-name { font-size: 14px; font-weight: 600; }
.coc-tile-meta { font-size: 11px; color: var(--coc-dim); margin-top: 2px; }
.coc-usage {
    position: absolute; top: 11px; right: 12px;
    font-size: 10px; font-weight: 700; color: var(--coc-muted);
    padding: 2px 7px; border-radius: 6px;
    background: var(--coc-glass-bg); border: 1px solid rgba(255, 255, 255, 0.13);
}
.coc-usage.coc-never { color: var(--coc-dim); }

/* ── edit-mode toolbar (visible when .coc-home.coc-editing) ── */
.coc-edit-toolbar {
    grid-column: 1 / -1;
    position: relative;
    z-index: 4;
    display: none;          /* shown by .coc-editing below */
    align-items: center;
    gap: 18px;
    margin-bottom: 26px;
    padding: 15px 20px;
    border-radius: var(--coc-radius);
    background: linear-gradient(120deg, rgba(57, 255, 20, 0.11), rgba(30, 144, 255, 0.08));
    border: 1px solid rgba(57, 255, 20, 0.36);
    backdrop-filter: blur(13px);
    -webkit-backdrop-filter: blur(13px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 0 0 1px rgba(57, 255, 20, 0.06),
        0 18px 48px -26px rgba(57, 255, 20, 0.55);
}
.coc-home.coc-editing .coc-edit-toolbar { display: flex; }
.coc-home.coc-editing .coc-cmd-customize { display: none; }

.coc-edit-icon {
    flex: 0 0 auto; width: 42px; height: 42px; border-radius: 13px;
    display: grid; place-items: center; font-size: 20px; color: var(--coc-ink);
    background: linear-gradient(135deg, var(--coc-accent), #00FFFF);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 6px 20px -6px rgba(57, 255, 20, 0.6);
}
.coc-edit-txt { flex: 0 0 auto; min-width: 0; }
.coc-edit-title { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
.coc-edit-sub { font-size: 12px; color: var(--coc-muted); margin-top: 2px; }
.coc-edit-spacer { flex: 1 1 auto; }

/* mood swatch selector */
.coc-edit-mood {
    display: flex; align-items: center; gap: 11px; margin-left: 8px;
    padding: 8px 13px; border-radius: 13px;
    background: var(--coc-glass-bg); border: 1px solid var(--coc-glass-border);
}
.coc-edit-mood-lbl { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--coc-dim); }
.coc-edit-swatches { display: flex; align-items: center; gap: 9px; }
.coc-sw {
    position: relative; width: 24px; height: 24px; border-radius: 9px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
    cursor: pointer;
}
.coc-sw.coc-sw-neon  { background: linear-gradient(135deg, #39FF14, #FF1493); }
.coc-sw.coc-sw-aurora { background: linear-gradient(135deg, #00FFFF, #8A2BE2); }
.coc-sw.coc-sw-deep  { background: linear-gradient(135deg, #1E90FF, #0c0c12); }
.coc-sw.is-on {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 0 0 2px rgba(57, 255, 20, 0.85), 0 0 14px rgba(57, 255, 20, 0.55);
}

.coc-edit-reset {
    flex: 0 0 auto; font-size: 13px; font-weight: 600; color: var(--coc-muted);
    display: flex; align-items: center; gap: 6px;
    padding: 10px 15px; border-radius: 12px;
    background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.14);
    cursor: pointer;
}
.coc-edit-done {
    flex: 0 0 auto; height: 42px; border-radius: 13px;
    display: flex; align-items: center; gap: 8px; padding: 0 20px;
    font-size: 14px; font-weight: 700; color: var(--coc-ink);
    background: var(--coc-accent); border: 1px solid rgba(57, 255, 20, 0.6);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 24px -2px rgba(57, 255, 20, 0.6);
    cursor: pointer;
}

/* ── edit-mode widget affordances ── */
.coc-board-frame {
    position: relative;
    padding: 16px 16px 18px;
    border-radius: 22px;
    border: 1.5px dashed transparent;
    background: transparent;
}
.coc-home.coc-editing .coc-board-frame {
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.018);
}
.coc-widget-drag {
    display: none;
    font-size: 13px; color: #d1d1df; letter-spacing: 1px; line-height: 1; cursor: grab;
    touch-action: none;
}
.coc-widget-remove {
    display: none;
    width: 23px; height: 23px; border-radius: 8px; flex: 0 0 auto;
    place-items: center; font-size: 12px; line-height: 1; color: #FF6b8a;
    background: rgba(255, 20, 147, 0.13); border: 1px solid rgba(255, 20, 147, 0.36);
    cursor: pointer; margin-left: auto;
}
.coc-home.coc-editing .coc-widget-drag { display: inline-block; }
.coc-home.coc-editing .coc-widget-remove { display: grid; }
.coc-home.coc-editing .coc-widget {
    border-style: dashed;
    border-color: rgba(255, 255, 255, 0.32);
}
/* the picked-up widget */
.coc-widget.coc-lifted {
    border-style: dashed;
    border-color: rgba(57, 255, 20, 0.72);
    transform: rotate(-1.4deg) scale(1.02);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.25),
        0 0 0 1px rgba(57, 255, 20, 0.38),
        0 30px 60px -18px rgba(0, 0, 0, 0.85),
        0 0 32px -6px rgba(57, 255, 20, 0.45);
    z-index: 5;
}
.coc-widget.coc-lifted .coc-widget-drag { color: var(--coc-accent); cursor: grabbing; }
/* drop placeholder gap */
.coc-dropgap {
    min-height: 128px; border-radius: 16px;
    border: 1.5px dashed rgba(57, 255, 20, 0.5);
    background: repeating-linear-gradient(135deg, rgba(57, 255, 20, 0.06) 0 10px, transparent 10px 20px);
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
    color: rgba(57, 255, 20, 0.75);
    grid-column: span 2; grid-row: span 1;     /* default m; JS sets data-size */
}
.coc-dropgap[data-size="s"] { grid-column: span 1; grid-row: span 1; }
.coc-dropgap[data-size="m"] { grid-column: span 2; grid-row: span 1; }
.coc-dropgap[data-size="l"] { grid-column: span 2; grid-row: span 2; }

/* ── edit-mode app-tile affordances (pin / hide) ── */
.coc-tedit {
    display: none;
    position: absolute; z-index: 4; align-items: center; gap: 6px;
    top: 11px; left: 12px;
}
.coc-home.coc-editing .coc-tedit { display: flex; }
.coc-home.coc-editing .coc-tile,
.coc-home.coc-editing .coc-featured { padding-top: 40px; }
.coc-grip-app {
    font-size: 11px; color: #d1d1df; letter-spacing: 1px; line-height: 1;
    padding: 4px 5px; border-radius: 6px;
    background: rgba(0, 0, 0, 0.38); border: 1px solid rgba(255, 255, 255, 0.16);
}
.coc-tog {
    width: 25px; height: 21px; border-radius: 7px;
    display: grid; place-items: center; font-size: 11px; line-height: 1;
    background: rgba(0, 0, 0, 0.38); border: 1px solid rgba(255, 255, 255, 0.16); color: var(--coc-muted);
    cursor: pointer;
}
.coc-tog.coc-on { color: #FFD700; border-color: rgba(255, 215, 0, 0.5); background: rgba(255, 215, 0, 0.15); }
.coc-tog.coc-hide-on { color: var(--coc-dim); }
.coc-tile.coc-pinned { border-color: rgba(255, 215, 0, 0.42); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 0 0 1px rgba(255, 215, 0, 0.2); }
.coc-tile.coc-hidden { opacity: 0.45; }

/* ── add-widget tray (gallery, edit-mode only) ── */
.coc-tray {
    position: relative;
    display: none;
    grid-column: 1 / -1;   /* span both columns — drop-in gallery sits below apps + board */
    margin-top: 18px;
    padding: 18px 18px 20px;
    border-radius: 20px;
    background: linear-gradient(160deg, rgba(30, 144, 255, 0.12), rgba(255, 255, 255, 0.05));
    border: 1px solid rgba(30, 144, 255, 0.36);
    backdrop-filter: blur(13px);
    -webkit-backdrop-filter: blur(13px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        0 0 0 1px rgba(30, 144, 255, 0.06),
        0 20px 52px -24px rgba(0, 0, 0, 0.75);
}
.coc-home.coc-editing .coc-tray.is-open { display: block; }
.coc-tray-head { display: flex; align-items: center; gap: 11px; margin-bottom: 5px; }
.coc-tray-plus {
    flex: 0 0 auto; width: 28px; height: 28px; border-radius: 9px;
    display: grid; place-items: center; font-size: 17px; font-weight: 700; color: var(--coc-ink);
    background: linear-gradient(135deg, #1E90FF, #00FFFF);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.coc-tray-title { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.coc-tray-sub { font-size: 11.5px; color: var(--coc-muted); margin: 0 0 15px 39px; }
.coc-tray-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.coc-tray-chip {
    position: relative; display: flex; align-items: center; gap: 11px;
    padding: 13px 12px; border-radius: 14px; min-height: 60px;
    background: var(--coc-glass-bg); border: 1px solid var(--coc-glass-border);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
    cursor: pointer;
}
.coc-tray-chip-ic {
    width: 36px; height: 36px; border-radius: 11px; flex: 0 0 auto;
    display: grid; place-items: center; font-size: 18px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.coc-tray-chip-ic.coc-tic-feed    { background: linear-gradient(135deg, #FF1493, #DA70D6); color: #fff; }
.coc-tray-chip-ic.coc-tic-stats   { background: linear-gradient(135deg, #39FF14, #ADFF2F); }
.coc-tray-chip-ic.coc-tic-weather { background: linear-gradient(135deg, #00FFFF, #1E90FF); }
.coc-tray-chip-ic.coc-tic-notes   { background: linear-gradient(135deg, #FFD700, #FF6347); }
.coc-tray-chip-ic.coc-tic-clock   { background: linear-gradient(135deg, #8A2BE2, #1E90FF); color: #fff; }
.coc-tray-chip-ic.coc-tic-uptime  { background: linear-gradient(135deg, #ADFF2F, #39FF14); }
.coc-tray-chip-name { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 600; line-height: 1.2; }
.coc-tray-chip-name small { display: block; font-size: 10px; font-weight: 500; color: var(--coc-dim); margin-top: 2px; }
.coc-tray-chip-add {
    position: absolute; top: 10px; right: 10px;
    width: 21px; height: 21px; border-radius: 7px;
    display: grid; place-items: center; font-size: 13px; font-weight: 700; color: var(--coc-accent); line-height: 1;
    background: rgba(57, 255, 20, 0.14); border: 1px solid rgba(57, 255, 20, 0.4);
}
.coc-tray-chip.coc-added { border-color: rgba(57, 255, 20, 0.4); background: rgba(57, 255, 20, 0.07); }
.coc-tray-chip.coc-added .coc-tray-chip-add { color: var(--coc-ink); background: var(--coc-accent); border-color: var(--coc-accent); }
.coc-tray-foot { margin-top: 16px; font-size: 11px; color: var(--coc-dim); display: flex; align-items: center; gap: 8px; }
.coc-tray-foot b { color: var(--coc-muted); font-weight: 600; }

/* ── toast notification ── */
.coc-toast {
    position: fixed;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%) translateY(0);
    z-index: 10000;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 20px;
    border-radius: 999px;
    background: rgba(16, 16, 22, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 8px 32px -8px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    color: var(--coc-text, #f1f1f6);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
    animation: coc-toast-in 0.22s ease forwards;
}
.coc-toast.coc-toast-out { animation: coc-toast-out 0.22s ease forwards; }
@keyframes coc-toast-in  { from { opacity: 0; transform: translateX(-50%) translateY(12px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
@keyframes coc-toast-out { from { opacity: 1; transform: translateX(-50%) translateY(0); } to { opacity: 0; transform: translateX(-50%) translateY(12px); } }

/* ── app-stats widget ── */
.coc-appstats { display: flex; flex-direction: column; gap: 10px; }
.coc-asrow { display: flex; flex-direction: column; gap: 4px; }
.coc-asname { font-size: 12px; font-weight: 600; color: var(--coc-text, #f1f1f6); }
.coc-asbar {
    height: 5px; border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    position: relative; overflow: hidden;
}
.coc-asbar::after {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: var(--pct, 0%);
    border-radius: 999px;
    background: linear-gradient(90deg, var(--coc-accent, #39FF14), var(--coc-accent-2, #1E90FF));
    transition: width 0.5s ease;
}
.coc-ascount { font-size: 10px; color: var(--coc-dim, #6f6f80); font-variant-numeric: tabular-nums; }

/* ── weather widget sub-elements ── */
.coc-weather-glyph { font-size: 36px; line-height: 1; flex: 0 0 auto; }
.coc-weather-temp  { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; }
.coc-weather-loc   { font-size: 11px; color: var(--coc-muted, #a7a7b6); margin-top: 2px; }

/* ── world-clock widget ── */
.coc-wclock { display: flex; flex-direction: column; gap: 10px; }
.coc-wcrow  { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.coc-wclabel { flex: 1; color: var(--coc-muted, #a7a7b6); font-size: 12px; }
.coc-wctime  { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ── notes widget ── */
.coc-notes {
    width: 100%;
    min-height: 90px;
    resize: vertical;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--coc-text, #f1f1f6);
    font-size: 13px;
    line-height: 1.55;
    font-family: inherit;
    outline: none;
    transition: border-color 0.18s ease;
}
.coc-notes:focus { border-color: rgba(57, 255, 20, 0.4); }
.coc-notes::placeholder { color: var(--coc-dim, #6f6f80); }

/* ── gallery container (wraps the library impl in home mode) ── */
.coc-gallery { display: block; width: 100%; }

/* ── mood themes (token overrides; default neon lives on .coc-home) ── */
.coc-home[data-mood="aurora"] {
    --coc-accent:   #00FFFF;
    --coc-accent-2: #8A2BE2;
    --coc-accent-3: #1E90FF;
    --coc-glass-bg:     rgba(120, 200, 255, 0.07);
    --coc-glass-border: rgba(140, 220, 255, 0.2);
}
.coc-home[data-mood="aurora"] .coc-featured {
    background:
        radial-gradient(120% 90% at 100% 0%, rgba(0, 255, 255, 0.16), transparent 60%),
        rgba(0, 255, 255, 0.06);
    border-color: rgba(0, 255, 255, 0.36);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        0 0 0 1px rgba(0, 255, 255, 0.08),
        0 20px 56px -22px rgba(0, 255, 255, 0.5);
}
.coc-home[data-mood="aurora"] .coc-railhead-rule {
    background: linear-gradient(90deg, rgba(0, 255, 255, 0.45), transparent);
}

.coc-home[data-mood="deep-space"] {
    --coc-accent:   #1E90FF;
    --coc-accent-2: #8A2BE2;
    --coc-accent-3: #5b6cff;
    --coc-glass-bg:     rgba(255, 255, 255, 0.04);
    --coc-glass-border: rgba(255, 255, 255, 0.12);
}
.coc-home[data-mood="deep-space"] .coc-featured {
    background:
        radial-gradient(120% 90% at 100% 0%, rgba(30, 144, 255, 0.16), transparent 60%),
        rgba(30, 144, 255, 0.05);
    border-color: rgba(30, 144, 255, 0.34);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 0 0 1px rgba(30, 144, 255, 0.08),
        0 20px 56px -22px rgba(30, 144, 255, 0.5);
}
.coc-home[data-mood="deep-space"] .coc-railhead-rule {
    background: linear-gradient(90deg, rgba(30, 144, 255, 0.45), transparent);
}

/* ── mobile reflow: single column, board stacks below the launcher ── */
@media (max-width: 768px) {
    .coc-home {
        grid-template-columns: 1fr;
        gap: 22px;
        padding: 20px 16px 40px;
    }
    /* stacking order on a phone:
         edit toolbar → command row → TOP board → apps → BOTTOM board → tray.
       This is what makes "some widgets at landing, some at the bottom" real on
       mobile — the top board sits above the apps, the bottom board below them. */
    .coc-home .coc-cmd-bar { order: 0; flex-wrap: wrap; gap: 10px; }
    .coc-home .coc-cmd-input { order: 5; flex: 1 1 100%; height: 50px; }
    /* shadow-DOM home: everything drops its desktop explicit grid-column/row and
       spans the single column so it STACKS (otherwise column 2 re-creates a
       second track and the phone stays 2-up). */
    .coc-home > .coc-gallery,
    .coc-home > .coc-board,
    .coc-home > .coc-tray {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
    }
    .coc-home > .coc-board[data-zone="top"]    { order: 1; }
    .coc-home > .coc-gallery                   { order: 2; }
    .coc-home > .coc-board[data-zone="bottom"] { order: 3; }
    .coc-home > .coc-tray                      { order: 4; }
    .coc-home .coc-edit-toolbar { order: -1; flex-wrap: wrap; gap: 12px; }

    /* pinned rail collapses to a single column (hero only) on phones */
    .coc-pins { grid-template-columns: 1fr; }
    .coc-featured { padding: 18px; }
    .coc-featured .coc-icon { width: 56px; height: 56px; font-size: 28px; }

    /* sections: 2-col grid, taller touch tiles */
    .coc-secgrid { grid-template-columns: 1fr 1fr; gap: 12px; }
    .coc-tile { padding: 14px; min-height: 104px; }

    /* board stays a 2-up grid on phones (iOS-style: s = half-width, m/l = full);
       defaults are all m so a fresh layout reads as a clean full-width stack.
       bigger padding here for comfortable tap targets. */
    .coc-widget { padding: 16px 17px; }
    .coc-greet-time { font-size: 40px; }

    /* quick-action + palette items get touch-sized hit areas */
    .coc-pill { padding: 11px 16px; }
    .coc-palette { padding-top: 8vh; }
    .coc-palette-card { width: 94vw; max-height: 72vh; }
    .coc-palette-item { padding: 13px 12px; }

    /* tray + mood controls wrap on narrow widths */
    .coc-tray-chips { grid-template-columns: 1fr; }
    .coc-edit-mood { margin-left: 0; }
}
/* ===== END CLAUDEONCLOUD HOME ===== */