/*
 * Tenant-Branded CRM App Surface
 *
 * A tenant-safe presentation layer that adds depth, touch comfort, and
 * phone/tablet polish without changing any CRM workflow or page structure.
 */

:root {
    --app-canvas: #f6f1e7;
    --app-canvas-deep: #eee5d6;
    --app-surface: rgba(255, 255, 255, .94);
    --app-surface-warm: rgba(255, 252, 246, .96);
    --app-navy: #243247;
    --app-navy-deep: #172338;
    --app-navy-soft: #354863;
    --app-gold: #c8a35a;
    --app-gold-deep: #997128;
    --app-gold-light: #f1dca8;
    --app-line: rgba(132, 106, 59, .22);
    --app-line-strong: rgba(153, 113, 40, .38);
    --app-shadow-xs: 0 4px 8px rgba(27, 38, 55, .09), 0 1px 2px rgba(27, 38, 55, .07);
    --app-shadow-sm: 0 12px 25px rgba(27, 38, 55, .11), 0 3px 7px rgba(27, 38, 55, .07), 0 1px 1px rgba(27, 38, 55, .04);
    --app-shadow-md: 0 22px 48px rgba(27, 38, 55, .14), 0 7px 15px rgba(27, 38, 55, .08), 0 2px 3px rgba(27, 38, 55, .05);
    --app-shadow-lg: 0 34px 88px rgba(20, 31, 48, .2), 0 11px 28px rgba(20, 31, 48, .1), 0 3px 8px rgba(20, 31, 48, .07);
    --app-shadow-card: 0 2px 3px rgba(20, 31, 48, .07), 0 12px 26px rgba(20, 31, 48, .12), 0 34px 68px rgba(20, 31, 48, .11);
    --app-shadow-card-hover: 0 5px 9px rgba(20, 31, 48, .1), 0 22px 42px rgba(20, 31, 48, .17), 0 45px 82px rgba(20, 31, 48, .13);
    --app-shadow-float: 0 7px 13px rgba(20, 31, 48, .1), 0 28px 58px rgba(20, 31, 48, .18), 0 58px 110px rgba(20, 31, 48, .12);
    --app-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, .98), inset 1px 0 0 rgba(255, 255, 255, .44), inset 0 -1px 0 rgba(76, 57, 25, .1);
    --app-radius-sm: 10px;
    --app-radius: 16px;
    --app-radius-lg: 22px;
    --app-focus: 0 0 0 4px rgba(200, 163, 90, .24);
}

/* Form-builder controls keep their compact editing affordances inside the shared app surface. */
.app-shell button.form-builder-drag:not(.site-nav-toggle):not(.planning-lock-control),
.app-shell button.form-builder-drag:not(.site-nav-toggle):not(.planning-lock-control):hover,
.app-shell button.form-builder-drag:not(.site-nav-toggle):not(.planning-lock-control):active {
    display: grid;
    width: 100%;
    min-width: 42px;
    min-height: 44px;
    padding: 0;
    place-items: center;
    color: rgba(72, 58, 34, .62);
    border: 0;
    border-right: 1px solid rgba(116, 91, 47, .12);
    border-radius: 0;
    background: linear-gradient(90deg, rgba(246, 239, 224, .9), rgba(251, 247, 239, .72));
    box-shadow: none;
    font: 900 1.22rem/1 system-ui, sans-serif;
    text-shadow: none;
    cursor: grab;
    filter: none;
    transform: none;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

.app-shell .form-builder-row-actions button:not(.site-nav-toggle):not(.planning-lock-control),
.app-shell .form-builder-row-actions button:not(.site-nav-toggle):not(.planning-lock-control):hover,
.app-shell .form-builder-row-actions button:not(.site-nav-toggle):not(.planning-lock-control):active {
    display: grid;
    width: 34px;
    height: 34px;
    min-height: 34px;
    padding: 0;
    place-items: center;
    color: #344966;
    border: 1px solid #d8d1c2;
    border-radius: 9px;
    background: linear-gradient(#fff, #f4efe6);
    box-shadow: 0 3px 8px rgba(27, 38, 55, .07);
    text-shadow: none;
    filter: none;
    transform: none;
}

.app-shell .form-builder-add-bar button:not(.site-nav-toggle):not(.planning-lock-control),
.app-shell .form-builder-add-bar button:not(.site-nav-toggle):not(.planning-lock-control):hover,
.app-shell .form-builder-add-bar button:not(.site-nav-toggle):not(.planning-lock-control):active {
    display: flex;
    min-height: 40px;
    padding: 9px 11px;
    color: #344966;
    border: 1px solid #d8d1c2;
    border-radius: 10px;
    background: linear-gradient(#fff, #f6f1e8);
    box-shadow: 0 4px 10px rgba(27, 38, 55, .055);
    text-shadow: none;
    filter: none;
    transform: none;
}

.app-shell button.form-builder-summary:not(.site-nav-toggle):not(.planning-lock-control),
.app-shell button.form-builder-summary:not(.site-nav-toggle):not(.planning-lock-control):hover,
.app-shell button.form-builder-summary:not(.site-nav-toggle):not(.planning-lock-control):active {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    width: 100%;
    min-height: 48px;
    padding: 5px 7px;
    color: #243147;
    border: 0;
    border-radius: 11px;
    background: transparent;
    box-shadow: none;
    filter: none;
    text-align: left;
    text-shadow: none;
    transform: none;
}

.app-shell .form-builder-answer-styles button:not(.site-nav-toggle):not(.planning-lock-control),
.app-shell .form-builder-answer-styles button:not(.site-nav-toggle):not(.planning-lock-control):hover,
.app-shell .form-builder-answer-styles button:not(.site-nav-toggle):not(.planning-lock-control):active {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    min-height: 70px;
    padding: 9px;
    color: #34445c;
    border: 1px solid #d9d1c2;
    border-radius: 12px;
    background: linear-gradient(145deg, #fff, #f7f2e9);
    box-shadow: 0 4px 10px rgba(27, 38, 55, .055), inset 0 1px 0 #fff;
    filter: none;
    text-align: left;
    text-shadow: none;
    transform: none;
}

.app-shell .form-builder-answer-styles button[aria-pressed="true"]:not(.site-nav-toggle):not(.planning-lock-control),
.app-shell .form-builder-answer-styles button[aria-pressed="true"]:not(.site-nav-toggle):not(.planning-lock-control):hover,
.app-shell .form-builder-answer-styles button[aria-pressed="true"]:not(.site-nav-toggle):not(.planning-lock-control):active {
    color: #1f314b;
    border-color: #b88b38;
    background: linear-gradient(145deg, #fff9e9, #efd9a5);
    box-shadow: 0 7px 15px rgba(92, 65, 20, .12), inset 0 0 0 1px rgba(255,255,255,.8);
}

.app-shell .form-builder-add-bar button.is-primary:not(.site-nav-toggle):not(.planning-lock-control),
.app-shell .form-builder-add-bar button.is-primary:not(.site-nav-toggle):not(.planning-lock-control):hover,
.app-shell .form-builder-add-bar button.is-primary:not(.site-nav-toggle):not(.planning-lock-control):active {
    color: #fff;
    border-color: #20334f;
    background: linear-gradient(180deg, #486180, #253a58);
    box-shadow: 0 7px 15px rgba(31, 49, 75, .18), inset 0 1px 0 rgba(255,255,255,.22);
}

html {
    min-height: 100%;
    color-scheme: light;
    background: var(--app-canvas-deep);
    -webkit-text-size-adjust: 100%;
}

body.app-shell {
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden;
    background:
        radial-gradient(circle at 7% 4%, rgba(255, 255, 255, .92) 0, rgba(255, 255, 255, 0) 26rem),
        radial-gradient(ellipse at 48% 34%, rgba(255, 255, 255, .7) 0, rgba(255, 255, 255, 0) 44rem),
        radial-gradient(circle at 94% 22%, rgba(225, 197, 139, .22) 0, rgba(225, 197, 139, 0) 30rem),
        radial-gradient(ellipse at 50% 108%, rgba(31, 47, 70, .1) 0, rgba(31, 47, 70, 0) 36rem),
        linear-gradient(145deg, #fffdf8 0%, var(--app-canvas) 48%, #ece2d3 100%);
    background-attachment: scroll;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -webkit-tap-highlight-color: rgba(200, 163, 90, .16);
}

body.app-shell::before {
    position: fixed;
    z-index: -1;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, .22) 1px, transparent 1px),
        linear-gradient(rgba(255, 255, 255, .18) 1px, transparent 1px);
    background-size: 44px 44px;
    content: "";
    opacity: .18;
    -webkit-mask-image: linear-gradient(to bottom, var(--app-navy-deep), transparent 68%);
    mask-image: linear-gradient(to bottom, var(--app-navy-deep), transparent 68%);
}

.app-shell > main {
    position: relative;
    z-index: 1;
}

::selection {
    color: var(--app-navy-deep);
    background: rgba(225, 197, 139, .58);
}

/* App bar and role-specific navigation */
.app-shell .site-header {
    position: sticky;
    z-index: 100;
    top: 0;
    isolation: isolate;
    min-height: 76px;
    padding-top: calc(14px + env(safe-area-inset-top, 0px));
    padding-right: max(clamp(20px, 4vw, 64px), env(safe-area-inset-right, 0px));
    padding-bottom: 14px;
    padding-left: max(clamp(20px, 4vw, 64px), env(safe-area-inset-left, 0px));
    background:
        radial-gradient(circle at 12% -80%, rgba(255, 255, 255, .28), transparent 42%),
        linear-gradient(145deg, rgba(48, 65, 90, .98), rgba(25, 38, 58, .985));
    border-bottom: 1px solid rgba(241, 220, 168, .76);
    box-shadow: 0 17px 40px rgba(17, 28, 45, .23), 0 4px 10px rgba(17, 28, 45, .14), inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 -1px 0 rgba(18, 28, 43, .56);
}

.app-shell .site-header::after {
    position: absolute;
    z-index: -1;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent 2%, rgba(200, 163, 90, .72) 22%, rgba(241, 220, 168, .94) 50%, rgba(200, 163, 90, .72) 78%, transparent 98%);
    content: "";
    opacity: .78;
}

@supports ((-webkit-backdrop-filter: blur(18px)) or (backdrop-filter: blur(18px))) {
    .app-shell .site-header {
        background:
            radial-gradient(circle at 12% -80%, rgba(255, 255, 255, .28), transparent 42%),
            linear-gradient(145deg, rgba(48, 65, 90, .91), rgba(25, 38, 58, .94));
        -webkit-backdrop-filter: saturate(130%) blur(18px);
        backdrop-filter: saturate(130%) blur(18px);
    }
}

.app-shell .site-header .brand {
    text-shadow: 0 2px 4px rgba(8, 16, 29, .24);
}

.app-shell .site-header .brand strong {
    letter-spacing: -.015em;
}

.app-shell .site-header .brand span {
    color: var(--app-gold-light);
    text-shadow: 0 1px 2px rgba(8, 16, 29, .3);
}
.app-shell .site-header .brand .brand-copy { margin: 0; color: inherit; font: inherit; letter-spacing: normal; text-shadow: none; text-transform: none; }
.app-shell .site-header .brand .brand-area { color: var(--app-gold-light); text-shadow: 0 1px 2px rgba(8, 16, 29, .3); }

.app-shell .site-nav > a,
.app-shell .site-nav-group > summary {
    min-height: 36px;
    align-items: center;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: 10px;
    transition: color .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.app-shell .site-nav > a:hover,
.app-shell .site-nav > a:focus-visible,
.app-shell .site-nav-group > summary:hover,
.app-shell .site-nav-group > summary:focus-visible,
.app-shell .site-nav-group[open] > summary {
    background: rgba(255, 255, 255, .09);
    border-color: rgba(241, 220, 168, .34);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 4px 12px rgba(8, 16, 29, .12);
    transform: translateY(-1px);
}

.app-shell .site-nav .site-nav-session {
    min-height: 38px;
    padding: 9px 13px;
    background: linear-gradient(145deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .055));
    border-color: rgba(241, 220, 168, .55);
    border-radius: 11px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 6px 14px rgba(8, 16, 29, .13);
}

.app-shell .site-nav-dropdown {
    padding: 9px;
    overflow: hidden;
    background: rgba(255, 254, 251, .985);
    border: 1px solid rgba(174, 136, 65, .38);
    border-radius: 16px;
    box-shadow: var(--app-shadow-float), inset 0 1px 0 #fff;
    transform-origin: top right;
}

.app-shell .site-nav-dropdown a {
    min-height: 52px;
    padding: 11px 13px;
    border-radius: 11px;
}

.app-shell .site-nav-dropdown a:hover,
.app-shell .site-nav-dropdown a:focus-visible {
    background: linear-gradient(145deg, #fffaf0, #f6ecd8);
    box-shadow: inset 0 1px 0 #fff, var(--app-shadow-xs);
}

.app-shell .site-nav-toggle {
    min-height: 44px;
    background: linear-gradient(145deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, .07));
    border-color: rgba(241, 220, 168, .58);
    border-radius: 12px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 7px 16px rgba(8, 16, 29, .16);
}

.app-shell .site-nav-toggle:active {
    box-shadow: inset 0 2px 5px rgba(8, 16, 29, .18);
    transform: translateY(1px);
}

/* Typography and page framing */
.app-shell h1,
.app-shell h2,
.app-shell h3 {
    text-wrap: balance;
}

.app-shell .hero,
.app-shell .login-shell {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background:
        radial-gradient(circle at 16% 14%, rgba(241, 220, 168, .18), transparent 30rem),
        radial-gradient(circle at 88% 86%, rgba(109, 137, 174, .18), transparent 32rem),
        linear-gradient(145deg, var(--app-navy-soft), var(--app-navy-deep));
}

.app-shell .hero::before,
.app-shell .login-shell::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(115deg, transparent 24%, rgba(255, 255, 255, .055) 45%, transparent 62%);
    content: "";
}

.app-shell .page-heading,
.app-shell .portal-hero,
.app-shell .dashboard-welcome,
.app-shell .schedule-heading,
.app-shell .finance-heading,
.app-shell .catalog-heading,
.app-shell .resource-heading,
.app-shell .staff-admin-heading,
.app-shell .staff-portal-heading,
.app-shell .admin-event-heading {
    position: relative;
}

.app-shell .admin-event-heading {
    padding-top: 26px;
    padding-bottom: 12px;
}

.app-shell .admin-event-heading > a {
    display: inline-flex;
    margin-bottom: 12px;
}

.app-shell .admin-event-heading h1 {
    max-width: 980px;
    margin: 0 0 8px;
    font-size: clamp(1.85rem, 3.6vw, 3rem);
    line-height: 1.06;
}

.app-shell .admin-event-heading > p {
    display: inline;
    margin: 0 10px 0 0;
}

.app-shell .page-heading h1,
.app-shell .portal-hero h1,
.app-shell .dashboard-welcome h1,
.app-shell .schedule-heading h1,
.app-shell .finance-heading h1,
.app-shell .catalog-heading h1,
.app-shell .resource-heading h1,
.app-shell .staff-admin-heading h1,
.app-shell .staff-portal-heading h1,
.app-shell .admin-event-heading h1 {
    color: var(--app-navy-deep);
    letter-spacing: -.035em;
    text-shadow: 0 1px 0 #fff;
}

.app-shell .eyebrow {
    color: var(--app-gold-deep);
    font-weight: 850;
}

/* Raised controls with an actual pressed state on touch devices */
.app-shell .button,
.app-shell button:not(.site-nav-toggle):not(.planning-lock-control),
.app-shell input[type="submit"] {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    padding: 12px 19px;
    color: var(--app-navy-deep);
    background: linear-gradient(180deg, #dfc47e 0%, #c8a35a 54%, #b68c3e 100%);
    border: 1px solid #9d762e;
    border-radius: 12px;
    box-shadow: inset 0 1px 0 rgba(255, 250, 229, .9), inset 0 -1px 0 rgba(94, 61, 16, .18), 0 8px 17px rgba(89, 64, 24, .18), 0 2px 4px rgba(35, 43, 56, .1);
    font-weight: 820;
    line-height: 1.15;
    text-align: center;
    text-decoration: none;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .42);
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease, filter .15s ease;
    touch-action: manipulation;
}

.app-shell .button.secondary,
.app-shell .button-secondary,
.app-shell button.secondary,
.app-shell button.button.secondary {
    color: #fff;
    background: linear-gradient(180deg, #3b4d68 0%, #293a53 52%, #1c2a40 100%);
    border-color: #172338;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 -1px 0 rgba(3, 10, 19, .3), 0 8px 18px rgba(24, 37, 57, .2), 0 2px 4px rgba(24, 37, 57, .12);
    text-shadow: 0 1px 1px rgba(8, 16, 29, .34);
}

@media (hover: hover) and (pointer: fine) {
    .app-shell .button:not(.is-disabled):not([aria-disabled="true"]):hover,
    .app-shell button:not(.site-nav-toggle):not(.planning-lock-control):not(:disabled):hover,
    .app-shell input[type="submit"]:not(:disabled):hover {
        color: #14243a;
        background: linear-gradient(180deg, #f3dfa7 0%, #dab969 54%, #c7953d 100%);
        border-color: #84601f;
        box-shadow: inset 0 1px 0 #fff8df, inset 0 -1px 0 rgba(94, 61, 16, .2), 0 13px 25px rgba(89, 64, 24, .24), 0 4px 8px rgba(35, 43, 56, .13);
        filter: saturate(1.08);
        transform: translateY(-2px);
    }

    .app-shell .button.secondary:not(.is-disabled):not([aria-disabled="true"]):hover,
    .app-shell .button-secondary:not(.is-disabled):not([aria-disabled="true"]):hover,
    .app-shell button.secondary:not(:disabled):hover {
        color: #fff;
        background: linear-gradient(180deg, #536f96 0%, #354b6c 52%, #22334d 100%);
        border-color: #c8a35a;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -1px 0 rgba(3, 10, 19, .34), 0 14px 27px rgba(24, 37, 57, .28), 0 4px 8px rgba(24, 37, 57, .16);
    }
}

.app-shell .button:active,
.app-shell button:not(.site-nav-toggle):not(.planning-lock-control):active,
.app-shell input[type="submit"]:active {
    box-shadow: inset 0 3px 7px rgba(72, 47, 12, .2), 0 2px 4px rgba(35, 43, 56, .12);
    filter: brightness(.98);
    transform: translateY(1px);
}

.app-shell .button:focus-visible,
.app-shell button:focus-visible,
.app-shell input[type="submit"]:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
    box-shadow: var(--app-focus), inset 0 1px 0 rgba(255, 255, 255, .75), var(--app-shadow-sm);
}

.app-shell .button.is-disabled,
.app-shell .button[aria-disabled="true"],
.app-shell button:disabled,
.app-shell input[type="submit"]:disabled {
    box-shadow: var(--app-shadow-xs);
    filter: grayscale(.2);
    transform: none;
}

/* Comfortable, inset form controls */
.app-shell input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]),
.app-shell select,
.app-shell textarea {
    min-height: 48px;
    padding: 12px 14px;
    color: var(--app-navy-deep);
    background: linear-gradient(180deg, #fff 0%, #fffefa 100%);
    border: 1px solid rgba(91, 101, 115, .45);
    border-radius: 12px;
    box-shadow: inset 0 3px 8px rgba(24, 37, 57, .09), inset 0 -1px 0 rgba(255, 255, 255, .88), 0 2px 4px rgba(27, 38, 55, .05);
    font-size: max(16px, 1em);
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.app-shell textarea {
    min-height: 112px;
    line-height: 1.5;
    resize: vertical;
}

.app-shell input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):hover,
.app-shell select:hover,
.app-shell textarea:hover {
    border-color: rgba(153, 113, 40, .58);
}

.app-shell input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):focus,
.app-shell select:focus,
.app-shell textarea:focus {
    background: #fff;
    border-color: var(--app-gold-deep);
    outline: none;
    box-shadow: var(--app-focus), inset 0 2px 4px rgba(24, 37, 57, .04);
}

.app-shell input[type="checkbox"],
.app-shell input[type="radio"] {
    min-width: 20px;
    min-height: 20px;
    accent-color: var(--app-gold-deep);
}

.app-shell label {
    color: #26344a;
}

/* Shared layered surfaces */
.app-shell .steps article,
.app-shell .package-card,
.app-shell .review-card,
.app-shell .summary,
.app-shell .booking-form fieldset,
.app-shell .activation-form,
.app-shell .login-card,
.app-shell .client-quote-card,
.app-shell .quote-accept-form,
.app-shell .contract-client-actions,
.app-shell .contract-sign-form,
.app-shell .payment-next-step,
.app-shell .portal-event-card,
.app-shell .portal-package,
.app-shell .portal-payment-center,
.app-shell .portal-planning-tools,
.app-shell .portal-appointments,
.app-shell .portal-agreement,
.app-shell .event-panel,
.app-shell .dashboard-panel,
.app-shell .inquiry-inbox-panel,
.app-shell .inquiry-message-card,
.app-shell .inquiry-summary-card,
.app-shell .finance-filter-card,
.app-shell .catalog-card,
.app-shell .resource-card,
.app-shell .client-planning-form,
.app-shell .system-settings-form,
.app-shell .contract-preview-shell {
    background:
        radial-gradient(circle at 16% -18%, rgba(255, 255, 255, 1) 0, rgba(255, 255, 255, 0) 23rem),
        linear-gradient(145deg, var(--app-surface) 0%, var(--app-surface-warm) 100%);
    background-clip: padding-box;
    border-color: var(--app-line-strong);
    border-radius: var(--app-radius);
    box-shadow: var(--app-shadow-card), var(--app-shadow-inset);
    border-style: solid;
    border-width: 1px;
}

.app-shell .system-settings-form {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.app-shell .login-card {
    border-color: rgba(241, 220, 168, .46);
    border-radius: var(--app-radius-lg);
    box-shadow: 0 30px 80px rgba(8, 17, 31, .32), 0 8px 20px rgba(8, 17, 31, .18), inset 0 1px 0 #fff;
}

.app-shell .login-card h1 {
    color: var(--app-navy-deep);
    letter-spacing: -.04em;
}

.app-shell .notice {
    border: 1px solid rgba(200, 163, 90, .38);
    border-left: 4px solid var(--app-gold);
    border-radius: 12px;
    box-shadow: var(--app-shadow-sm), inset 0 1px 0 rgba(255, 255, 255, .75);
}

.app-shell .status {
    min-height: 27px;
    align-items: center;
    border: 1px solid rgba(36, 50, 71, .12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .76), 0 2px 5px rgba(36, 50, 71, .07);
}

/* Owner dashboard: compact like DJEP, but more tactile */
.app-shell .dashboard-command {
    background:
        radial-gradient(circle at 14% -34%, rgba(255, 255, 255, 1) 0, rgba(255, 255, 255, 0) 7rem),
        linear-gradient(145deg, rgba(255, 255, 255, .985), rgba(249, 244, 234, .98));
    border-color: var(--app-line);
    border-radius: 14px;
    box-shadow: 0 3px 5px rgba(20, 31, 48, .07), 0 16px 30px rgba(20, 31, 48, .14), 0 30px 52px rgba(20, 31, 48, .08), var(--app-shadow-inset);
}

.app-shell .dashboard-command-icon,
.app-shell .portal-quick-icon,
.app-shell .inquiry-heading-icon,
.app-shell .inquiry-hero-icon,
.app-shell .inquiry-booking-icon {
    background: linear-gradient(145deg, #fff9ea, #eddbaf);
    border-color: rgba(153, 113, 40, .35);
    box-shadow: inset 0 1px 0 #fff, 0 5px 11px rgba(97, 71, 25, .13);
}

.app-shell .dashboard-command-add {
    background: linear-gradient(145deg, #fffdf7, #f2e2bd);
    border-color: rgba(153, 113, 40, .42);
}

.app-shell .dashboard-command-add .dashboard-command-icon {
    background: linear-gradient(180deg, #ab8438, #826022);
    border-color: #76551d;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 6px 13px rgba(83, 57, 17, .21);
}

.app-shell .dashboard-command-count {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .74), 0 2px 5px rgba(36, 50, 71, .08);
}

.app-shell .dashboard-settings-link,
.app-shell .schedule-range-search,
.app-shell .finance-presets a {
    background: linear-gradient(180deg, #fff, #faf5ea);
    border-color: var(--app-line-strong);
    box-shadow: var(--app-shadow-xs), var(--app-shadow-inset);
}

.app-shell .schedule-range-search[open] {
    box-shadow: var(--app-shadow-md), var(--app-shadow-inset);
}

.app-shell .dashboard-attention {
    background: linear-gradient(145deg, rgba(255, 252, 243, .96), rgba(247, 237, 214, .9));
    border-color: rgba(184, 143, 65, .3);
    border-radius: 12px;
    box-shadow: var(--app-shadow-xs), inset 0 1px 0 rgba(255, 255, 255, .8);
}

/* Client portal */
.app-shell .portal-quick-actions > a {
    background:
        radial-gradient(circle at 14% -34%, rgba(255, 255, 255, 1) 0, rgba(255, 255, 255, 0) 8rem),
        linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(249, 243, 231, .96));
    border-color: var(--app-line-strong);
    border-radius: 15px;
    box-shadow: 0 3px 5px rgba(20, 31, 48, .07), 0 17px 34px rgba(20, 31, 48, .14), 0 32px 58px rgba(20, 31, 48, .08), var(--app-shadow-inset);
}

.app-shell .portal-countdown {
    border-color: rgba(153, 113, 40, .4);
    border-radius: var(--app-radius-lg);
    box-shadow: var(--app-shadow-lg), inset 0 1px 0 #fff;
}

.app-shell .portal-countdown-grid > span {
    background: linear-gradient(160deg, rgba(255, 255, 255, .97), rgba(248, 241, 226, .9));
    border-color: rgba(153, 113, 40, .32);
    border-radius: 13px;
    box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(92, 67, 21, .06), 0 9px 19px rgba(36, 50, 71, .08);
}

.app-shell .portal-event-card {
    border-top-width: 1px;
}

.app-shell .portal-event-card::before,
.app-shell .event-panel::before,
.app-shell .dashboard-panel::before {
    display: block;
    width: min(150px, 30%);
    height: 3px;
    margin: -1px auto 0;
    background: linear-gradient(90deg, transparent, rgba(200, 163, 90, .86), transparent);
    border-radius: 999px;
    content: "";
}

.app-shell .portal-package-financials article,
.app-shell .portal-event-summary,
.app-shell .portal-payment-history article,
.app-shell .planning-field,
.app-shell .planning-person-card,
.app-shell .planning-people-summary article,
.app-shell .contract-signing-steps li {
    background: linear-gradient(145deg, #fff, #faf6ed);
    border-color: var(--app-line);
    border-radius: 12px;
    box-shadow: var(--app-shadow-xs), inset 0 1px 0 #fff;
}

.app-shell .portal-package-financials .portal-balance {
    background: linear-gradient(145deg, #354863, #1c2a40);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 9px 20px rgba(24, 37, 57, .18);
}

/* Lists, schedules, data panels, and dropdown-like controls */
.app-shell .schedule-view-switch {
    padding: 7px;
    background: linear-gradient(180deg, #e9e1d3, #f5efe4);
    border-color: var(--app-line);
    border-radius: 14px;
    box-shadow: inset 0 2px 5px rgba(36, 50, 71, .08), 0 1px 0 #fff;
}

.app-shell .schedule-view-switch a {
    min-height: 40px;
    display: grid;
    place-items: center;
    border-radius: 10px;
}

.app-shell .schedule-view-switch a.is-active {
    background: linear-gradient(180deg, #3b4d68, #202f47);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 7px 15px rgba(24, 37, 57, .2);
}

.app-shell .schedule-event-month,
.app-shell .schedule-empty-state,
.app-shell .staff-event-list,
.app-shell .resource-list-shell,
.app-shell .finance-results,
.app-shell .table-scroll {
    background:
        radial-gradient(circle at 14% -28%, rgba(255, 255, 255, 1) 0, rgba(255, 255, 255, 0) 22rem),
        linear-gradient(145deg, rgba(255, 255, 255, .97), rgba(250, 246, 238, .96));
    border-color: var(--app-line-strong);
    border-radius: var(--app-radius);
    box-shadow: var(--app-shadow-card), var(--app-shadow-inset);
}

/* Compact information cards still sit on the same dimensional surface system. */
.app-shell .inquiry-inbox-metrics article,
.app-shell .email-metrics article,
.app-shell .finance-metrics article,
.app-shell .catalog-metrics article,
.app-shell .portal-package-financials article,
.app-shell .portal-payment-history article,
.app-shell .planning-people-summary article {
    background:
        radial-gradient(circle at 12% -36%, #fff 0, rgba(255, 255, 255, 0) 9rem),
        linear-gradient(145deg, rgba(255, 255, 255, .99), rgba(249, 244, 234, .98));
    border-color: var(--app-line-strong);
    border-radius: 13px;
    box-shadow: 0 2px 3px rgba(20, 31, 48, .06), 0 10px 23px rgba(20, 31, 48, .11), var(--app-shadow-inset);
}

/* Apple-like settings hierarchy: a floating window with distinct inner panes. */
.app-shell .settings-window {
    background:
        radial-gradient(circle at 8% 0, rgba(255, 255, 255, .96), transparent 22rem),
        linear-gradient(145deg, #fffdf9, #f2ebde);
    border-color: var(--app-line-strong);
    box-shadow: var(--app-shadow-float), var(--app-shadow-inset);
}

.app-shell .settings-pane,
.app-shell .branding-logo-card {
    background:
        radial-gradient(circle at 12% -18%, #fff 0, rgba(255, 255, 255, 0) 17rem),
        linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(248, 243, 233, .97));
    border-color: var(--app-line-strong);
    box-shadow: var(--app-shadow-card), var(--app-shadow-inset);
}

.app-shell .settings-group,
.app-shell .settings-link-group,
.app-shell .brand-color-control,
.app-shell .form-builder-item {
    border-color: var(--app-line);
    box-shadow: 0 2px 3px rgba(20, 31, 48, .05), 0 9px 18px rgba(20, 31, 48, .075), var(--app-shadow-inset);
}

.app-shell .schedule-event-month {
    border-top-width: 1px;
}

.app-shell .schedule-event-month > header,
.app-shell .resource-card > header {
    background: linear-gradient(145deg, #fff, #f7eedc);
}

.app-shell .schedule-event-row,
.app-shell .inquiry-list-row,
.app-shell .staff-event-list > a,
.app-shell .portal-form-list a,
.app-shell .admin-form-list a,
.app-shell .settings-link-group a {
    min-height: 52px;
    transition: color .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s cubic-bezier(.2, .8, .2, 1);
}

.app-shell .dashboard-command,
.app-shell .portal-quick-actions > a,
.app-shell .package-card,
.app-shell .schedule-month-jump a,
.app-shell .finance-presets a {
    transform: translateZ(0);
    transition: color .22s ease, background .22s ease, border-color .22s ease, box-shadow .22s ease, filter .22s ease, transform .22s cubic-bezier(.2, .8, .2, 1);
}

.app-shell .dashboard-command-icon,
.app-shell .portal-quick-icon,
.app-shell .dashboard-command-arrow {
    transition: color .22s ease, background .22s ease, box-shadow .22s ease, transform .22s cubic-bezier(.2, .8, .2, 1);
}

.app-shell table {
    border-collapse: separate;
    border-spacing: 0;
}

.app-shell th {
    color: #4e5969;
    background: rgba(244, 238, 225, .8);
    font-size: .72rem;
    letter-spacing: .055em;
    text-transform: uppercase;
}

.app-shell tr:hover td {
    background: rgba(255, 250, 237, .68);
}

/* Hover elevation is reserved for pointers; touch devices get press feedback. */
@media (hover: hover) and (pointer: fine) {
    .app-shell .dashboard-command:hover,
    .app-shell .portal-quick-actions > a:hover {
        color: var(--app-navy-deep);
        background: linear-gradient(145deg, #fff9e9, #efd8a5);
    }

    .app-shell .dashboard-command-add:hover {
        background: linear-gradient(145deg, #fff4d8, #e8c982);
    }

    .app-shell .dashboard-command:hover,
    .app-shell .portal-quick-actions > a:hover,
    .app-shell .package-card:hover,
    .app-shell .schedule-month-jump a:hover,
    .app-shell .finance-presets a:hover {
        border-color: rgba(153, 113, 40, .56);
        box-shadow: var(--app-shadow-card-hover), var(--app-shadow-inset);
        filter: saturate(1.035);
        transform: translateY(-5px) scale(1.008);
    }

    .app-shell .dashboard-command:hover .dashboard-command-icon,
    .app-shell .portal-quick-actions > a:hover .portal-quick-icon {
        box-shadow: inset 0 1px 0 #fff, 0 10px 20px rgba(97, 71, 25, .2);
        transform: translateY(-2px) scale(1.055);
    }

    .app-shell .dashboard-command:hover .dashboard-command-arrow {
        transform: translateX(3px);
    }

    .app-shell .schedule-event-row:hover,
    .app-shell .inquiry-list-row:hover,
    .app-shell .staff-event-list > a:hover,
    .app-shell .portal-form-list a:hover,
    .app-shell .admin-form-list a:hover,
    .app-shell .settings-link-group a:hover {
        background: linear-gradient(90deg, rgba(255, 250, 237, .95), rgba(255, 255, 255, .95));
        border-color: rgba(153, 113, 40, .48);
        box-shadow: inset 3px 0 0 rgba(200, 163, 90, .78), 0 8px 18px rgba(20, 31, 48, .08);
        transform: translateX(3px);
    }
}

.app-shell .dashboard-command:active,
.app-shell .portal-quick-actions > a:active,
.app-shell .package-card:active,
.app-shell .schedule-event-row:active,
.app-shell .inquiry-list-row:active,
.app-shell .staff-event-list > a:active,
.app-shell .portal-form-list a:active,
.app-shell .admin-form-list a:active,
.app-shell .settings-link-group a:active {
    box-shadow: inset 0 2px 7px rgba(36, 50, 71, .1), var(--app-shadow-xs);
    filter: brightness(.985);
    transform: translateY(2px) scale(.988);
}

@media (prefers-reduced-motion: no-preference) {
    .app-shell > main {
        animation: app-page-in .34s cubic-bezier(.2, .75, .2, 1) both;
    }

    .app-shell .site-nav-group[open] .site-nav-dropdown {
        animation: app-menu-in .2s cubic-bezier(.2, .75, .2, 1) both;
    }
}

@keyframes app-page-in {
    from { opacity: .72; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes app-menu-in {
    from { opacity: 0; transform: translateY(-6px) scale(.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.app-shell .site-footer {
    position: relative;
    z-index: 1;
    margin-top: 20px;
    padding-right: max(20px, env(safe-area-inset-right, 0px));
    padding-bottom: calc(30px + env(safe-area-inset-bottom, 0px));
    padding-left: max(20px, env(safe-area-inset-left, 0px));
    color: #667080;
    background: linear-gradient(180deg, rgba(246, 241, 231, 0), rgba(232, 223, 207, .55));
    border-top: 1px solid rgba(153, 113, 40, .12);
}

/* iPad and compact desktop navigation */
@media (max-width: 1100px) {
    .app-shell .site-header {
        padding-top: calc(13px + env(safe-area-inset-top, 0px));
        padding-right: max(20px, env(safe-area-inset-right, 0px));
        padding-bottom: 13px;
        padding-left: max(20px, env(safe-area-inset-left, 0px));
    }

    .app-shell .site-nav {
        padding: 10px;
        background: rgba(9, 18, 31, .34);
        border-color: rgba(241, 220, 168, .28);
        border-radius: 16px;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 8px 20px rgba(8, 16, 29, .13);
    }

    .app-shell .site-nav > a,
    .app-shell .site-nav-group > summary,
    .app-shell .site-nav .site-nav-session {
        border-radius: 11px;
    }

    .app-shell .site-nav-dropdown {
        margin-top: 6px;
        border-radius: 13px;
        box-shadow: inset 0 1px 0 #fff, 0 8px 18px rgba(8, 16, 29, .11);
    }
}

/* Phone-specific comfort and safe-area handling */
@media (max-width: 640px) {
    body.app-shell {
        background:
            radial-gradient(circle at 10% 2%, rgba(255, 255, 255, .96), transparent 21rem),
            linear-gradient(155deg, #faf7f0 0%, #f1e9dd 100%);
    }

    .app-shell .site-header {
        padding-top: calc(12px + env(safe-area-inset-top, 0px));
        padding-right: max(14px, env(safe-area-inset-right, 0px));
        padding-bottom: 12px;
        padding-left: max(14px, env(safe-area-inset-left, 0px));
        border-radius: 0 0 18px 18px;
        box-shadow: 0 12px 28px rgba(17, 28, 45, .2), inset 0 -1px 0 rgba(18, 28, 43, .45);
    }

    .app-shell .site-header .brand strong {
        font-size: 1.04rem;
    }

    .app-shell .site-nav {
        max-height: calc(100dvh - 104px - env(safe-area-inset-top, 0px));
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    .app-shell .site-nav > a,
    .app-shell .site-nav-group > summary,
    .app-shell .site-nav .site-nav-session {
        min-height: 48px;
    }

    .app-shell .login-shell {
        min-height: calc(100dvh - 78px);
        padding: 38px max(14px, env(safe-area-inset-right, 0px)) 48px max(14px, env(safe-area-inset-left, 0px));
    }

    .app-shell .login-card,
    .app-shell .activation-form,
    .app-shell .client-quote-card,
    .app-shell .quote-accept-form,
    .app-shell .contract-client-actions,
    .app-shell .contract-sign-form,
    .app-shell .payment-next-step,
    .app-shell .portal-event-card,
    .app-shell .event-panel,
    .app-shell .dashboard-panel,
    .app-shell .inquiry-inbox-panel,
    .app-shell .finance-filter-card,
    .app-shell .client-planning-form {
        border-radius: 17px;
        box-shadow: 0 3px 6px rgba(27, 38, 55, .065), 0 17px 38px rgba(27, 38, 55, .13), inset 0 1px 0 #fff;
    }

    .app-shell .dashboard-command {
        border-radius: 13px;
        box-shadow: 0 3px 5px rgba(20, 31, 48, .07), 0 13px 27px rgba(20, 31, 48, .13), var(--app-shadow-inset);
    }

    .app-shell .portal-quick-actions > a {
        border-radius: 14px;
        box-shadow: 0 3px 5px rgba(20, 31, 48, .07), 0 14px 29px rgba(20, 31, 48, .13), var(--app-shadow-inset);
    }

    .app-shell .portal-countdown {
        border-radius: 19px;
    }

    .app-shell .site-footer {
        padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px));
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-shell *,
    .app-shell *::before,
    .app-shell *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

@media print {
    body.app-shell {
        background: #fff;
    }

    body.app-shell::before,
    .app-shell .site-header,
    .app-shell .site-footer {
        display: none !important;
    }

    .app-shell .steps article,
    .app-shell .package-card,
    .app-shell .review-card,
    .app-shell .summary,
    .app-shell .event-panel,
    .app-shell .portal-event-card,
    .app-shell .contract-client-actions,
    .app-shell .contract-sign-form {
        box-shadow: none;
    }
}

/* Admin uses a compact app bar so the event workspace starts sooner. */
.app-shell-admin .site-header {
    min-height: 58px;
    padding-top: 9px;
    padding-bottom: 9px;
}
.app-shell-admin .site-header .brand strong { font-size: .98rem; }
.app-shell-admin .site-header .brand .brand-area { margin-top: 3px; font-size: .54rem; }

@media (max-width: 640px) {
    .app-shell-admin .site-header {
        min-height: 58px;
        padding-top: calc(8px + env(safe-area-inset-top, 0px));
        padding-bottom: 8px;
    }
    .app-shell-admin .site-header .brand strong { font-size: .92rem; }
    .app-shell-admin .site-header .brand .brand-area { margin-top: 3px; font-size: .5rem; }
}

/* Dashboard-only Luxe Future visual experiment. */
.app-shell .dashboard-future {
    position: relative;
    isolation: isolate;
    min-height: calc(100vh - 58px);
    padding-top: 1px;
    overflow: hidden;
    background:
        radial-gradient(circle at 7% 4%, rgba(81, 132, 169, .18), transparent 25rem),
        radial-gradient(circle at 93% 13%, rgba(205, 166, 91, .17), transparent 29rem),
        radial-gradient(circle at 52% 68%, rgba(75, 116, 153, .08), transparent 38rem),
        linear-gradient(145deg, rgba(252, 250, 245, .96), rgba(239, 235, 226, .97));
}

.app-shell .dashboard-future::before {
    position: absolute;
    z-index: -2;
    inset: 0;
    background-image:
        linear-gradient(rgba(52, 82, 116, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(52, 82, 116, .045) 1px, transparent 1px);
    background-size: 34px 34px;
    content: "";
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to bottom, #000 0, rgba(0,0,0,.7) 26%, transparent 74%);
    mask-image: linear-gradient(to bottom, #000 0, rgba(0,0,0,.7) 26%, transparent 74%);
}

.app-shell .dashboard-future::after {
    position: absolute;
    z-index: -1;
    top: -150px;
    left: 38%;
    width: 460px;
    height: 310px;
    background: radial-gradient(ellipse, rgba(129, 176, 206, .14), transparent 67%);
    content: "";
    filter: blur(8px);
    pointer-events: none;
    transform: rotate(-11deg);
}

.app-shell-admin:has(.dashboard-future) .site-header {
    background:
        radial-gradient(circle at 16% -120%, rgba(132, 181, 211, .34), transparent 38%),
        linear-gradient(112deg, #17263c, #263e5b 57%, #1b2c45);
    border-bottom-color: rgba(222, 187, 112, .76);
    box-shadow: 0 11px 30px rgba(16, 28, 46, .23), inset 0 -1px 0 rgba(129, 176, 206, .22);
}

.app-shell .dashboard-future .dashboard-welcome {
    position: relative;
}
.app-shell .dashboard-future .dashboard-welcome::after {
    position: absolute;
    right: 20px;
    bottom: 0;
    left: 20px;
    height: 1px;
    background: linear-gradient(90deg, rgba(55, 91, 128, .34), rgba(202, 164, 89, .58), transparent 78%);
    content: "";
}
.app-shell .dashboard-future .dashboard-welcome h1,
.app-shell .dashboard-future .dashboard-section-heading h2 {
    color: #1c314e;
    background: linear-gradient(112deg, #182b47 6%, #345d7e 63%, #7e6129 118%);
    -webkit-background-clip: text;
    background-clip: text;
    text-shadow: 0 10px 26px rgba(34, 60, 91, .13);
    -webkit-text-fill-color: transparent;
}
.app-shell .dashboard-future .dashboard-welcome p:last-child {
    color: #4b5d71;
}
.app-shell .dashboard-future .dashboard-welcome p:last-child::before {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 7px;
    background: #6d9db7;
    border: 2px solid rgba(255,255,255,.92);
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(109,157,183,.14), 0 0 12px rgba(74,132,165,.38);
    content: "";
    vertical-align: 1px;
}

.app-shell .dashboard-future .dashboard-settings-link {
    color: #304b68;
    background: linear-gradient(145deg, rgba(255,255,255,.78), rgba(232,239,242,.68));
    border-color: rgba(93, 128, 157, .35);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 8px 22px rgba(29, 48, 73, .13);
    -webkit-backdrop-filter: blur(18px) saturate(130%);
    backdrop-filter: blur(18px) saturate(130%);
}

.app-shell .dashboard-future .dashboard-tool-dock {
    position: relative;
    overflow: visible;
    background:
        radial-gradient(circle at 18% -60%, rgba(137, 184, 211, .36), transparent 48%),
        linear-gradient(135deg, rgba(25, 43, 67, .97), rgba(42, 67, 94, .95));
    border-color: rgba(216, 180, 107, .6);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.2),
        inset 0 -1px 0 rgba(8,18,31,.55),
        0 8px 18px rgba(25, 42, 65, .2),
        0 23px 48px rgba(25, 42, 65, .17),
        0 0 0 5px rgba(78, 129, 162, .055);
    -webkit-backdrop-filter: blur(22px) saturate(135%);
    backdrop-filter: blur(22px) saturate(135%);
}
.app-shell .dashboard-future .dashboard-tool-dock::before {
    position: absolute;
    top: 0;
    right: 12%;
    left: 12%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(187,220,235,.72), rgba(236,204,137,.76), transparent);
    content: "";
    pointer-events: none;
}
.app-shell .dashboard-future .dashboard-tool {
    color: rgba(250, 249, 245, .95);
}
.app-shell .dashboard-future .dashboard-tool + .dashboard-tool {
    border-left-color: rgba(207, 226, 237, .12);
}
.app-shell .dashboard-future .dashboard-tool-icon {
    color: #e5c881;
    background: linear-gradient(145deg, rgba(255,255,255,.17), rgba(115,157,183,.11));
    border-color: rgba(211, 229, 238, .3);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 7px 15px rgba(7,18,31,.24), 0 0 0 3px rgba(116,170,199,.06);
}
.app-shell .dashboard-future .dashboard-tool.is-primary .dashboard-tool-icon {
    color: #fff;
    background: linear-gradient(145deg, #d0a858, #8a6425);
    border-color: rgba(246,219,156,.8);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.34), 0 8px 18px rgba(10,21,35,.31), 0 0 18px rgba(208,168,88,.19);
}
.app-shell .dashboard-future .dashboard-tool-icon b {
    background: #507f9e;
    border-color: #243d59;
    box-shadow: 0 3px 8px rgba(4,13,24,.33), 0 0 12px rgba(104,171,207,.24);
}
.app-shell .dashboard-future .dashboard-tool.has-items .dashboard-tool-icon b {
    background: #c4933d;
}
.app-shell .dashboard-future .dashboard-tool-attention {
    margin-top: 3px;
    color: #38516c;
    background: linear-gradient(90deg, rgba(221,232,237,.72), rgba(255,255,255,.36));
    border: 1px solid rgba(90,128,157,.2);
    border-radius: 999px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 4px 11px rgba(31,51,74,.08);
}
.app-shell .dashboard-future .dashboard-tool-attention > span {
    background: linear-gradient(145deg, #688fa8, #355b77);
}

.app-shell .dashboard-future .dashboard-section-heading .eyebrow,
.app-shell .dashboard-future .schedule-event-month > header .eyebrow {
    color: #607f95;
}
.app-shell .dashboard-future .schedule-event-month,
.app-shell .dashboard-future .dashboard-panel {
    position: relative;
    background:
        linear-gradient(145deg, rgba(255,255,255,.9), rgba(245,244,239,.82)) padding-box,
        linear-gradient(120deg, rgba(209,172,97,.68), rgba(108,158,188,.55), rgba(255,255,255,.75)) border-box;
    border: 1px solid transparent;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.96),
        0 4px 9px rgba(28,45,67,.09),
        0 20px 44px rgba(28,45,67,.15),
        0 42px 78px rgba(38,57,78,.075);
    -webkit-backdrop-filter: blur(16px) saturate(118%);
    backdrop-filter: blur(16px) saturate(118%);
}
.app-shell .dashboard-future .schedule-event-month::before,
.app-shell .dashboard-future .dashboard-panel::before {
    position: absolute;
    z-index: 2;
    top: -1px;
    left: 9%;
    width: 36%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(122,180,208,.7), rgba(228,190,111,.72), transparent);
    content: "";
    pointer-events: none;
}
.app-shell .dashboard-future .schedule-event-month > header,
.app-shell .dashboard-future .dashboard-pipeline-heading,
.app-shell .dashboard-future .pending-booking-labels {
    background: linear-gradient(90deg, rgba(227,237,241,.62), rgba(250,247,238,.56));
    border-color: rgba(91,125,153,.16);
}
.app-shell .dashboard-future .schedule-event-row,
.app-shell .dashboard-future .pending-booking-row {
    background: rgba(255,255,255,.3);
    transition: background .18s ease, box-shadow .18s ease, transform .18s ease;
}

@media (hover:hover) and (pointer:fine) {
    .app-shell .dashboard-future .dashboard-tool:hover {
        color: #fff;
        background: linear-gradient(180deg, rgba(130,181,208,.18), rgba(255,255,255,.035));
    }
    .app-shell .dashboard-future .dashboard-tool:hover .dashboard-tool-icon {
        color: #f1d99c;
        background: linear-gradient(145deg, rgba(139,189,213,.29), rgba(255,255,255,.1));
        box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 9px 19px rgba(6,17,30,.3), 0 0 21px rgba(103,169,203,.2);
    }
    .app-shell .dashboard-future .schedule-event-row:hover,
    .app-shell .dashboard-future .pending-booking-row:hover {
        background: linear-gradient(90deg, rgba(231,242,246,.6), rgba(255,250,239,.66));
        box-shadow: inset 3px 0 0 rgba(92,146,177,.52);
        transform: translateX(2px);
    }
}

@media (max-width: 720px) {
    .app-shell .dashboard-future::before { background-size: 26px 26px; opacity: .82; }
    .app-shell .dashboard-future .dashboard-welcome::after { right: 14px; left: 14px; }
    .app-shell .dashboard-future .dashboard-tool-dock {
        overflow: hidden;
        border-radius: 16px;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 8px 17px rgba(25,42,65,.2), 0 20px 38px rgba(25,42,65,.15);
    }
    .app-shell .dashboard-future .dashboard-tool-attention { margin-left: 2px; }
}