/*
   E-Dani Pro Hub | hub_design.css — the ONE Hub design layer (TASK-437, 2026-09-09)
   ---------------------------------------------------------------------------------------
   Every Hub page except the admin panel loads this file through hub/www/_hub_shell.php and
   nothing else page-local for chrome: background, top bar, cards, panels, forms, buttons,
   alerts, toggles, the auth (login) stage and the dashboard grid all live here. Before this
   file each page carried its own copy of `.top-nav`, `.profile-card`, `.btn`, `.alert` — five
   hand-written top bars and seven inline stylesheets that had drifted apart.

   RULES
   · Tokens come from shared/tokens.css + shared/suite_components.css (--primary-color,
     --accent-color, --space-*, --radius-*, --transition-*). This file only ALIASES them and adds
     Hub-scoped values (--hub-*). No new colour is introduced outside the --hub-* block.
   · No `.main-content { padding }` here — the content gutter is owned by shared/suite_layout.css
     (tests/suite/unit/main_gutter_single_source.unit.js). Hub pages size themselves with the
     inner `.hub-page` wrapper instead.
   · Motion is a feature (owner: "bold and funny animations") AND a preference: every animation
     is switched off under prefers-reduced-motion at the bottom of this file.
   · Selectors are class-scoped (`.hub-*`) or scoped under `body.hub-dashboard` — never bare
     elements — so this sheet can never leak into shared components or the admin panel.
*/

/* ══════════════════════════════════════════════════════════════════════════════════════════
   0. TOKENS + 2. TOP BAR — moved to shared/hub_topbar.css (TASK-439, 2026-09-09), loaded
   BEFORE this file by hub/www/_hub_shell.php. The tokens (--primary/--hub-*) live there now.
   ══════════════════════════════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════════════════════════════
   1. PAGE FRAME — body, background veil, main
   ══════════════════════════════════════════════════════════════════════════════════════════ */
body.hub-dashboard {
    font-family: var(--hub-font);
    color: var(--hub-ink);
    background-color: var(--primary);
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 100vh !important;
    overflow: visible !important;
    position: relative;
    transition: background-color 1s ease;
}
/* The rotating photo (shared/suite_backgrounds.js) — kept, but calmed: a navy→clear veil plus two
   slowly drifting colour blobs sit between the photo and the cards, so the cards read as one
   surface whatever picture is behind them. Both are pure transform/opacity animations. */
body.hub-dashboard.bg-ready {
    background-image: url('/shared/images/backgrounds/dashboard-bg.jpeg');
    background-image: var(--suite-bg-image, image-set(url('/shared/images/backgrounds/dashboard-bg.webp') 1x type('image/webp'), url('/shared/images/backgrounds/dashboard-bg.jpeg') 1x));
}
body.hub-dashboard::before {
    content: '';
    position: fixed; inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(1200px 600px at 10% -10%, rgba(253, 126, 20, 0.22), transparent 60%),
        radial-gradient(900px 500px at 110% 20%, rgba(59, 130, 246, 0.25), transparent 60%),
        linear-gradient(180deg, rgba(0, 31, 84, 0.46) 0%, rgba(0, 31, 84, 0.30) 55%, rgba(0, 31, 84, 0.40) 100%);
}
body.hub-dashboard::after {
    content: '';
    position: fixed;
    width: 60vmax; height: 60vmax;
    left: -20vmax; top: 30vh;
    z-index: 0;
    pointer-events: none;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(253, 126, 20, 0.16), transparent 62%);
    filter: blur(20px);
    animation: hub-drift 38s ease-in-out infinite alternate;
}
@keyframes hub-drift {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(45vw, -22vh, 0) scale(1.25); }
}
/* the page's own blocks sit above the veil. Listed explicitly — a blanket `body > *` would also
   reposition the shared fixed elements (bottom-nav drawer, menu FAB, help FAB) and drop them into
   the flow: measured 2026-09-09 as a 567px blank band above the hero on a phone. */
body.hub-dashboard > main.main-content,
body.hub-dashboard > .hub-footer { position: relative; z-index: 1; }
/* the bar stays sticky and ABOVE the page — its user menu and popups drop over the cards
   (measured 2026-09-09: a `position:relative; z-index:1` on the bar put the menu behind them) */
body.hub-dashboard > .hub-topbar { position: sticky; z-index: 120; }

@media (max-width: 1024px) {
    /* iOS ignores background-attachment:fixed — scroll instead of showing the navy fallback */
    body.hub-dashboard { background-attachment: scroll !important; }
}

body.hub-dashboard main.main-content {
    background: transparent !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    overflow: visible;
}
/* the page's own content column — sized HERE, never on .main-content */
.hub-page {
    width: 100%;
    max-width: 1800px;
    margin: 0 auto;
}
.hub-page--narrow { max-width: 1100px; }
.hub-page--reading { max-width: 860px; }
/* the standard "tool" page (owner, 2026-09-09: "a fifth of the vertical space is taken by the
   menus and ui gaps. too much"): the bar, then the content filling the viewport — no page title
   strip, no gaps. The framed tool carries its own header if it needs one. */
.hub-page--fill { display: flex; flex-direction: column; margin-top: -5px; height: calc(100vh - var(--hub-topbar-h, 64px) - 42px); min-height: 520px; }
.hub-frame-wrap { flex: 1; min-height: 0; border-radius: 18px; overflow: hidden; background: #fff; border: 1px solid rgba(255,255,255,0.72); box-shadow: 0 18px 50px -20px rgba(0,31,84,0.35); }
.hub-frame-wrap--clear { background: transparent; border: 0; box-shadow: none; border-radius: 0; overflow: visible; }
.hub-frame { width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 1024px) { .hub-page--fill { height: auto; margin-top: 0; } .hub-frame-wrap { height: calc(100vh - var(--hub-topbar-h, 64px) - 60px); min-height: 480px; } .hub-frame { height: calc(100vh - var(--hub-topbar-h, 64px) - 62px); min-height: 478px; } }   /* the iframe needs its own height here: 100% of an auto-height page collapsed it to the browser's 150 px default (owner, 2026-09-09: AI-Assistent on a narrow window) */


/* ══════════════════════════════════════════════════════════════════════════════════════════
   3. HERO / PAGE HEADERS
   ══════════════════════════════════════════════════════════════════════════════════════════ */
.hub-hero {
    display: grid;
    grid-template-columns: minmax(320px, 1fr) minmax(0, auto);   /* the greeting keeps room; the pills wrap (owner, 2026-09-09: title squeezed to one word per line at ~1150 px) */
    gap: 20px 30px;
    align-items: center;
    padding: 26px 34px;
    margin: 18px 0 8px;
    border-radius: 28px;
    background: var(--hub-glass);
    backdrop-filter: blur(22px) saturate(1.3);
    -webkit-backdrop-filter: blur(22px) saturate(1.3);
    border: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow: var(--hub-shadow-1);
    animation: hub-rise 0.6s var(--hub-ease-out) both;
    overflow: hidden;
    position: relative;
}
.hub-hero::after {
    content: '';
    position: absolute; right: -80px; top: -80px;
    width: 260px; height: 260px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(253, 126, 20, 0.28), transparent 70%);
    pointer-events: none;
}
.hub-hero__eyebrow { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--hub-ink-muted); margin-bottom: 6px; }
.hub-hero__title {
    font-size: clamp(1.6rem, 2.6vw, 2.5rem);
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1.05;
    color: var(--primary);
    margin: 0 0 6px;
}
.hub-hero__title .hub-wave { display: inline-block; transform-origin: 70% 70%; animation: hub-wave 2.2s ease-in-out 0.6s 2; }
@keyframes hub-wave {
    0%, 100% { transform: rotate(0); }
    15% { transform: rotate(16deg); } 30% { transform: rotate(-8deg); }
    45% { transform: rotate(14deg); } 60% { transform: rotate(-4deg); } 75% { transform: rotate(8deg); }
}
.hub-hero__sub { color: var(--hub-ink-soft); font-size: 0.95rem; font-weight: 500; margin: 0; }
.hub-hero__side { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; align-items: center; }

/* brief chips: today's numbers, clickable */
.hub-chip {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 14px 9px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(0, 31, 84, 0.08);
    color: var(--hub-ink);
    text-decoration: none;
    font-size: 0.82rem; font-weight: 700;
    box-shadow: var(--hub-shadow-1);
    transition: transform 0.25s var(--hub-ease-spring), box-shadow 0.2s;
    animation: hub-rise 0.5s var(--hub-ease-out) both;
}
.hub-chip:hover { transform: translateY(-3px) rotate(-1deg); box-shadow: var(--hub-shadow-2); }
.hub-chip__icon { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(0, 31, 84, 0.06); font-size: 0.9rem; }
.hub-chip__num { font-weight: 900; color: var(--primary); font-variant-numeric: tabular-nums; }
.hub-chip--hot .hub-chip__icon { background: rgba(253, 126, 20, 0.16); }
.hub-chip--hot .hub-chip__num { color: var(--accent); }
.hub-chip--calm { opacity: 0.85; }

.hub-page-title { color: var(--primary); font-size: clamp(1.5rem, 2.2vw, 2.2rem); font-weight: 900; letter-spacing: -0.03em; margin: 0; }
.hub-page-lead { color: var(--hub-ink-soft); margin: 4px 0 0; font-size: 0.95rem; }

/* sub-navigation pills (account section pages) */
.hub-subnav { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 18px; }
.hub-subnav__link {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 16px; border-radius: 13px;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.7);
    color: var(--hub-ink-soft); font-weight: 700; font-size: 0.85rem; text-decoration: none;
    backdrop-filter: blur(8px);
    transition: transform 0.25s var(--hub-ease-spring), background 0.2s, color 0.2s, box-shadow 0.2s;
}
.hub-subnav__link:hover { background: #fff; color: var(--primary); transform: translateY(-2px); box-shadow: var(--hub-shadow-1); }
.hub-subnav__link.is-active { background: var(--primary); color: #fff; border-color: var(--primary); box-shadow: 0 8px 20px rgba(0, 31, 84, 0.25); }
@media (max-width: 1024px) { .hub-subnav { display: none; } }   /* the shared bottom drawer covers it */

/* ══════════════════════════════════════════════════════════════════════════════════════════
   4. CARDS · the modal · 6. FORMS/BUTTONS/ALERTS — moved to shared/hub_components.css
   (TASK-439, 2026-09-09), loaded BEFORE this file by hub/www/_hub_shell.php.
   ══════════════════════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════════════════════
   5. DASHBOARD — sections, GridStack, edit mode, card tools, add-card gallery
   ══════════════════════════════════════════════════════════════════════════════════════════ */
.dashboard-section { width: 100%; display: flex; flex-direction: column; margin-top: 14px; }
/* A heading ROW that belongs to its grid (owner 2026-09-09: the floating pills "felt wrong where
   they are"): grip · title · count · a hairline that runs to the right edge · reset. Light text on
   the veiled photo, aligned with the card column below it. */
.section-header {
    align-self: stretch;
    display: flex; align-items: center; gap: 12px;
    margin: 0 10px 2px;
    padding: 6px 0;
    font-size: 0.74rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 1px 10px rgba(0, 31, 84, 0.7);
    user-select: none;
    animation: hub-rise 0.5s var(--hub-ease-out) both;
}
.section-header::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.06)); }
.section-header__count { font-weight: 700; color: rgba(255, 255, 255, 0.6); letter-spacing: 0; text-transform: none; font-size: 0.72rem; }
.section-grip {
    cursor: grab;
    width: 26px; height: 26px; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, 0.14); color: rgba(255, 255, 255, 0.85); font-size: 14px;
    transition: background 0.15s, color 0.15s, transform 0.3s var(--hub-ease-spring);
}
.section-grip:hover { background: rgba(255, 255, 255, 0.28); color: #fff; transform: rotate(90deg); }
.section-grip:active { cursor: grabbing; }
.dashboard-section.drag-over > .section-header { outline: 2px dashed var(--accent); outline-offset: 6px; border-radius: 8px; }
.dashboard-section.dragging { opacity: 0.4; }
.section-header .layout-reset-btn {
    order: 10;
    font-size: 0.68rem; font-weight: 700; letter-spacing: 0; text-transform: none;
    color: rgba(255, 255, 255, 0.85); background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 999px; padding: 3px 10px; cursor: pointer; font-family: inherit;
    transition: all 0.15s;
}
.section-header .layout-reset-btn:hover { color: var(--primary); background: #fff; border-color: #fff; }

/* GridStack integration */
.grid-stack { width: 100%; margin: 8px 0 8px; }
/* Owner, 2026-09-09: "this is how the hub loads on page refresh … just a split second" — before
   GridStack.init() writes its positioning CSS every card sits at 0/0, piled up top-left. Hidden
   until hub_dashboard.js marks the grid ready (initGrids); its catch marks it ready as well. */
.grid-stack:not(.is-ready) { visibility: hidden; }
.grid-stack-item { will-change: unset !important; }
.grid-stack-item-content { overflow: visible !important; }
.grid-stack-item-content > a, .grid-stack-item-content > div { height: 100%; }
.grid-stack-item:hover { z-index: 100; }
.grid-stack-item > .ui-resizable-handle { display: none !important; }
.grid-stack-item.ui-draggable-dragging .hub-card {
    transform: rotate(1.5deg) scale(1.03) !important;
    box-shadow: var(--hub-shadow-3) !important;
    background: #fff !important;
    border-color: var(--accent) !important;
}
.grid-stack-placeholder > .placeholder-content {
    border: 2px dashed rgba(253, 126, 20, 0.6) !important;
    border-radius: var(--hub-radius) !important;
    background: rgba(253, 126, 20, 0.08) !important;
}

/* card tools (top-right): drag grip + edit menu — visible on hover, always in edit mode */
.hub-card-tools {
    position: absolute; top: 10px; right: 10px;
    display: flex; gap: 4px;
    opacity: 0;
    transition: opacity 0.2s;
    z-index: 5;
}
.hub-card:hover .hub-card-tools, body.hub-editing .hub-card-tools { opacity: 1; }
.hub-card-tool, .hub-card-tools .gs-drag-handle {
    width: 28px; height: 28px;
    border-radius: 9px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(0, 31, 84, 0.07);
    color: var(--hub-ink-muted);
    font-size: 13px; line-height: 1;
    border: none; cursor: pointer; font-family: inherit;
    user-select: none;
    transition: background 0.15s, color 0.15s, transform 0.25s var(--hub-ease-spring);
}
.hub-card-tool:hover, .hub-card-tools .gs-drag-handle:hover { background: rgba(0, 31, 84, 0.14); color: var(--primary); transform: scale(1.1); }
.gs-drag-handle { cursor: grab; }
.gs-drag-handle:active { cursor: grabbing; }

/* edit mode: jiggle like a phone home screen */
body.hub-editing .grid-stack-item:not(.ui-draggable-dragging) .hub-card { animation: hub-jiggle 0.9s ease-in-out infinite; }
body.hub-editing .grid-stack-item:nth-child(2n) .hub-card { animation-delay: -0.3s; }
body.hub-editing .grid-stack-item:nth-child(3n) .hub-card { animation-delay: -0.6s; }
@keyframes hub-jiggle {
    0%, 100% { transform: rotate(-0.35deg); }
    50% { transform: rotate(0.35deg); }
}
body.hub-editing .app-card { cursor: grab; }
body.hub-editing .app-card:hover:not(.disabled-card) { transform: none; }

/* the "Dashboard anpassen" toolbar */
.hub-dashbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; justify-content: flex-end; }
.hub-btn-edit.is-on { background: var(--accent) !important; color: #fff !important; box-shadow: 0 8px 20px rgba(253, 126, 20, 0.4) !important; }

/* per-card editor popover */
.hub-cardedit {
    position: fixed;
    width: 320px; max-width: calc(100vw - 24px);
    padding: 16px;
    border-radius: 18px;
    background: var(--hub-glass-solid);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow: var(--hub-shadow-2);
    z-index: 900;
    animation: hub-menu-in 0.25s var(--hub-ease-spring) both;
}
.hub-cardedit[hidden] { display: none !important; }
.hub-cardedit__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; font-weight: 800; color: var(--primary); font-size: 0.9rem; }
.hub-cardedit__row { margin-bottom: 12px; }
.hub-cardedit__row label { display: block; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hub-ink-muted); margin-bottom: 6px; }
.hub-swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.hub-swatch {
    width: 26px; height: 26px; border-radius: 50%;
    border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
    cursor: pointer; padding: 0;
    transition: transform 0.25s var(--hub-ease-spring);
}
.hub-swatch:hover { transform: scale(1.2); }
.hub-swatch.is-on { transform: scale(1.2); box-shadow: 0 0 0 2px var(--primary); }
.hub-seg { display: inline-flex; background: rgba(0, 31, 84, 0.06); border-radius: 11px; padding: 3px; gap: 2px; }
.hub-seg button { border: none; background: none; padding: 6px 12px; border-radius: 9px; font-weight: 700; font-size: 0.78rem; color: var(--hub-ink-soft); cursor: pointer; font-family: inherit; transition: all 0.15s; }
.hub-seg button.is-on { background: #fff; color: var(--primary); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08); }
.hub-cardedit__foot { display: flex; justify-content: space-between; gap: 8px; margin-top: 4px; }


/* personal panels (tasks / calendar) */
.dash-panel {
    height: 100%; display: flex; flex-direction: column; overflow: hidden;
    padding: 0;
    /* the card colour (⋯ → Farbe) shows on a panel as this top bar plus the header tint below.
       BUG-1384: this declaration used to sit in a SECOND `.dash-panel` block further down, next
       to the header rules it belongs with. Merged here — the two blocks shared no property, so
       nothing was being overridden and the rendered result is unchanged (getComputedStyle on
       both live panels of the Hub dashboard: identical before and after). */
    border-top: 3px solid color-mix(in srgb, var(--card-accent) 70%, #fff);
}
/* panel header = a plain title row; moving/editing uses the SAME ⠿ / ⋯ tools every card has,
   top right (owner, 2026-09-09: "make this the same as other cards have") */
.dash-panel-header {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 70px 12px 22px;
    border-bottom: 1px solid var(--hub-line);
    background: linear-gradient(90deg, color-mix(in srgb, var(--card-accent) 10%, #fff), transparent 70%);
    font-size: 1.02rem; font-weight: 800; color: var(--primary); letter-spacing: -0.01em;
    user-select: none; flex-shrink: 0;
}
/* the card colour (⋯ → Farbe) shows on panels as the header tint + a bar before the title */
.dash-panel-header::before { content: ''; width: 5px; height: 22px; border-radius: 3px; background: var(--card-accent); flex-shrink: 0; }
.dash-panel-body { flex: 1; overflow: auto; min-height: 0; padding: 16px 22px 20px; }
.dash-panel-body.no-pad { padding: 0; }
.dash-panel .hub-card-tools { top: 12px; right: 12px; opacity: 1; }

.hub-footer { padding: 34px 20px 40px; text-align: center; color: rgba(255, 255, 255, 0.85); font-size: 0.82rem; font-weight: 500; text-shadow: 0 1px 8px rgba(0, 31, 84, 0.6); }
.hub-footer a { color: inherit; font-weight: 700; }

/* ══════════════════════════════════════════════════════════════════════════════════════════
   7. AUTH STAGE — login, MFA, password, registration, verification
   ══════════════════════════════════════════════════════════════════════════════════════════ */
body.hub-auth {
    font-family: var(--hub-font);
    margin: 0; min-height: 100vh;
    display: flex !important; align-items: center; justify-content: center;
    height: auto !important; overflow: auto !important;
    padding: 24px;
    color: var(--hub-ink);
    background-color: var(--primary);
    background-image: url('/shared/images/backgrounds/dashboard-bg.jpeg');
    background-image: var(--suite-bg-image, image-set(url('/shared/images/backgrounds/dashboard-bg.webp') 1x type('image/webp'), url('/shared/images/backgrounds/dashboard-bg.jpeg') 1x));
    background-size: cover; background-position: center; background-attachment: fixed;
    position: relative;
}
body.hub-auth::before {
    content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background:
        radial-gradient(900px 500px at 0% 0%, rgba(253, 126, 20, 0.25), transparent 60%),
        radial-gradient(800px 500px at 100% 100%, rgba(59, 130, 246, 0.28), transparent 60%),
        linear-gradient(160deg, rgba(0, 31, 84, 0.55), rgba(0, 31, 84, 0.25));
}
body.hub-auth > main.main-content { position: relative; z-index: 1; }
@media (max-width: 1024px) { body.hub-auth { background-attachment: scroll; padding: 0; } }
body.hub-auth main.main-content { display: contents; }
@media (max-width: 1024px) { body.hub-auth main.main-content { display: flex; width: 100%; align-self: stretch; flex: 1; align-items: center; justify-content: center; } }

.auth-stage {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    width: 980px; max-width: 100%;
    min-height: 600px;
    border-radius: 32px;
    overflow: hidden;
    background: var(--hub-glass-solid);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow: var(--hub-shadow-3);
    animation: hub-stage-in 0.7s var(--hub-ease-out) both;
}
.auth-stage--single { grid-template-columns: 1fr; width: 480px; min-height: 0; }
@keyframes hub-stage-in {
    from { opacity: 0; transform: translateY(30px) scale(0.97); }
    to   { opacity: 1; transform: none; }
}
.auth-brand {
    position: relative; overflow: hidden;
    padding: 46px 44px;
    display: flex; flex-direction: column; justify-content: space-between;
    color: #fff;
    background: linear-gradient(160deg, #001f54 0%, #0b2f7a 55%, #123b8f 100%);
}
.auth-brand__blob {
    position: absolute; border-radius: 50%; filter: blur(30px); pointer-events: none;
    animation: hub-blob 14s ease-in-out infinite alternate;
}
.auth-brand__blob--1 { width: 340px; height: 340px; right: -120px; top: -100px; background: rgba(253, 126, 20, 0.55); }
.auth-brand__blob--2 { width: 300px; height: 300px; left: -120px; bottom: -80px; background: rgba(96, 165, 250, 0.45); animation-delay: -6s; animation-duration: 18s; }
.auth-brand__blob--3 { width: 180px; height: 180px; left: 40%; top: 45%; background: rgba(255, 255, 255, 0.18); animation-delay: -3s; animation-duration: 11s; }
@keyframes hub-blob {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(40px, 30px, 0) scale(1.18); }
}
.auth-brand > :not(.auth-brand__blob) { position: relative; }
.auth-brand__logo { display: inline-flex; padding: 12px 16px; border-radius: 18px; background: rgba(255, 255, 255, 0.92); align-self: flex-start; box-shadow: var(--hub-shadow-1); }
.auth-brand__logo img { height: 40px; width: auto; display: block; }
.auth-brand__title { font-size: clamp(1.8rem, 3vw, 2.5rem); font-weight: 900; letter-spacing: -0.04em; line-height: 1.05; margin: 28px 0 12px; }
.auth-brand__title em { font-style: normal; color: #ffb066; }
.auth-brand__text { font-size: 0.98rem; line-height: 1.6; color: rgba(255, 255, 255, 0.82); margin: 0 0 26px; max-width: 34ch; }
.auth-brand__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.auth-brand__list li { display: flex; align-items: center; gap: 12px; font-size: 0.9rem; font-weight: 600; color: rgba(255, 255, 255, 0.92); animation: hub-rise 0.6s var(--hub-ease-out) both; animation-delay: calc(0.3s + var(--i, 0) * 120ms); }
.auth-brand__list .auth-brand__dot { width: 34px; height: 34px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.14); font-size: 1rem; flex-shrink: 0; transition: transform 0.4s var(--hub-ease-spring); }
.auth-brand__list li:hover .auth-brand__dot { transform: rotate(-10deg) scale(1.15); background: rgba(253, 126, 20, 0.5); }
.auth-brand__foot { font-size: 0.72rem; color: rgba(255, 255, 255, 0.55); margin-top: 30px; }

.auth-form {
    padding: 46px 44px;
    display: flex; flex-direction: column; justify-content: center;
}
.auth-form__logo { display: none; }
.auth-form__title { font-size: 1.6rem; font-weight: 900; color: var(--primary); letter-spacing: -0.03em; margin: 0 0 6px; }
.auth-form__lead { color: var(--hub-ink-soft); font-size: 0.92rem; margin: 0 0 24px; line-height: 1.55; }
.auth-form .hub-btn--primary { height: 50px; font-size: 1rem; margin-top: 4px; }
.auth-form__links { display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: center; margin-top: 20px; font-size: 0.82rem; }
.auth-form__links a { color: var(--hub-ink-soft); font-weight: 600; text-decoration: none; transition: color 0.15s; }
.auth-form__links a:hover { color: var(--primary); }
.auth-form__foot { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--hub-line); font-size: 0.86rem; color: var(--hub-ink-soft); text-align: center; }
.auth-form__foot a { color: var(--primary); font-weight: 800; text-decoration: none; }
.auth-form.is-shaking { animation: hub-shake 0.5s ease-in-out; }
.auth-stage--single .auth-form { padding: 40px 38px; text-align: center; }
.auth-stage--single .auth-form__logo { display: block; margin: 0 auto 22px; max-width: 200px; height: auto; }
.auth-stage--single .hub-field { text-align: left; }

@media (max-width: 900px) {
    .auth-stage { grid-template-columns: 1fr; width: 520px; min-height: 0; border-radius: 26px; }
    .auth-brand { padding: 30px 28px 26px; }
    .auth-brand__title { font-size: 1.6rem; margin-top: 18px; }
    .auth-brand__text { margin-bottom: 14px; }
    .auth-brand__list { display: none; }
    .auth-brand__foot { display: none; }
    .auth-form { padding: 28px 26px 30px; }
}
@media (max-width: 600px) {
    .auth-stage { border-radius: 0; min-height: 100vh; width: 100%; }
    body.hub-auth { padding: 0; align-items: stretch; }
    .auth-brand { padding: 22px 20px 20px; }
    .auth-brand__logo img { height: 32px; }
}

/* ══════════════════════════════════════════════════════════════════════════════════════════
   8. RESPONSIVE — dashboard grid collapse (GridStack runs with disableOneColumnMode)
   ══════════════════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1280px) {
    .hub-hero { grid-template-columns: 1fr; }
    .hub-hero__side { justify-content: flex-start; }
}
@media (max-width: 1024px) {
    .hub-hero { grid-template-columns: 1fr; padding: 20px 20px; margin-top: 8px; border-radius: 22px; }
    .hub-hero__side { justify-content: flex-start; }
    .grid-stack { height: auto !important; display: flex !important; flex-wrap: wrap !important; position: relative !important; }
    .grid-stack-item { position: relative !important; width: 50% !important; left: auto !important; top: auto !important; transform: none !important; height: auto !important; }
    .grid-stack-item-content { position: relative !important; inset: 0 !important; height: auto !important; padding: var(--space-xs, 4px) !important; }
    .gs-drag-handle, .ui-resizable-handle, .section-grip, .layout-reset-btn { display: none !important; }
    .hub-card-tools { opacity: 1; }
    .hub-dashbar .hub-btn-edit { display: none; }
    body.hub-editing .grid-stack-item .hub-card { animation: none; }
    .hub-grid-2, .hub-form-row { grid-template-columns: 1fr; }
    .app-card { min-height: 170px; }
}
@media (max-width: 600px) {
    .grid-stack-item { width: 100% !important; }
    .grid-stack-item-content { padding: var(--space-3xs, 2px) !important; }
    .app-card { padding: 16px; min-height: auto; }
    .card-icon { width: 44px; height: 44px; font-size: 1.4rem; border-radius: 14px; }
    .card-title-group h2 { font-size: 1.02rem; }
    .section-header { font-size: 0.68rem; padding: 6px 12px 6px 6px; }
    .hub-hero__title { font-size: 1.45rem; }
    .hub-chip { padding: 7px 11px 7px 8px; font-size: 0.76rem; }
    .hub-card--pad-lg, .hub-card { padding: 18px; }
    .dash-panel { padding: 0; }
    .dash-panel-body { padding: 14px; }
    .hub-modal { border-radius: 20px; }
}

/* ══════════════════════════════════════════════════════════════════════════════════════════
   9. REDUCED MOTION — every animation above is decoration; none carries meaning on its own
   ══════════════════════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    body.hub-dashboard::after,
    .auth-brand__blob,
    .hub-hero__title .hub-wave,
    body.hub-editing .grid-stack-item .hub-card,
    .stat-value.loading { animation: none !important; }
    .hub-anim-in, .hub-hero, .hub-chip, .section-header, .hub-topbar__inner, .auth-stage,
    .auth-brand__list li, .hub-alert, .hub-user__menu, .hub-popover, .hub-cardedit, .hub-modal, .hub-modal-backdrop {
        animation: none !important; opacity: 1 !important; transform: none !important;
    }
    .hub-card, .hub-navpill, .hub-btn, .hub-chip, .hub-toggle, .card-icon, .hub-user__chip, .hub-menu-item,
    .app-card::before, .btn-enter, .hub-swatch, .hub-switch::after { transition: none !important; }
    .app-card:hover:not(.disabled-card), .hub-btn:hover, .hub-chip:hover, .hub-navpill:hover { transform: none !important; }
}

/* TASK-439 — the identity card under the account tab strip: same glass, less height (the strip
   above it already carries the section title and its tabs). */
.hub-hero--compact { padding: 18px 26px; margin: 4px 0 8px; grid-template-columns: 1fr; }
.hub-hero--compact .hub-hero__eyebrow { display: none; }

/* TASK-439 — a Hub tool page framed in a satellite's overlay (?hubembed=1): no bar, no gutter, the
   frame is the page. */
body.hub-embed main.main-content { padding: 0 !important; }
body.hub-embed { background-attachment: scroll; }
.hub-page--embed { max-width: none; margin: 0; padding: 10px 12px; }
.hub-page--fill.hub-page--embed { height: calc(100vh - 20px); min-height: 0; margin-top: 0; }
body.hub-embed .hub-timer--fab, body.hub-embed #suiteHelpFab, body.hub-embed .suite-help-fab { display: none !important; }
@media (max-width: 1024px) { .hub-page--fill.hub-page--embed { height: calc(100vh - 20px); } .hub-page--fill.hub-page--embed .hub-frame-wrap { height: 100%; } }