.workspace-main {
    display: block;
    overflow: hidden;
    background: #f4f7fb;
}

.workspace-scroll {
    height: 100%;
    overflow-y: auto;
    padding: 1.15rem;
}

.workspace-welcome {
    width: min(1280px, 100%);
    margin: 0 auto;
    color: #172033;
}

/* ── Per-hue accent (shared by stat tiles + capability cards) ───────────── */
.stat-item.blue,   .capability-card.data  { --tile: #3b82f6; }
.stat-item.violet, .capability-card.pages { --tile: #8b5cf6; }
.stat-item.pink,   .capability-card.logic { --tile: #ec4899; }
.stat-item.green,  .capability-card.ship  { --tile: #10b981; }

/* ── Motion primitives ──────────────────────────────────────────────────── */
@property --progress-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes ws-rise  { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes ws-ring  { from { --progress-angle: 0deg; } }
@keyframes ws-floatA { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-18px, 16px); } }
@keyframes ws-floatB { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(16px, -14px); } }
@keyframes ws-dot   { 0%, 100% { box-shadow: 0 0 0 4px rgba(52, 211, 153, .16); } 50% { box-shadow: 0 0 0 8px rgba(52, 211, 153, .04); } }

.workspace-welcome > .workspace-hero,
.workspace-welcome > .workspace-stats,
.workspace-welcome > .workspace-section,
.workspace-welcome > .build-path {
    animation: ws-rise .55s cubic-bezier(.22, 1, .36, 1) both;
}
.workspace-welcome > .workspace-stats   { animation-delay: .06s; }
.workspace-welcome > .workspace-section  { animation-delay: .12s; }
.workspace-welcome > .build-path         { animation-delay: .18s; }

/* ── Hero ───────────────────────────────────────────────────────────────── */
.workspace-hero {
    position: relative;
    isolation: isolate;
    min-height: 250px;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 2rem;
    align-items: center;
    padding: 2.1rem 2.3rem;
    border-radius: 24px;
    color: #fff;
    background: linear-gradient(125deg, #0f172a 0%, #172554 45%, #3730a3 75%, #7c3aed 100%);
    box-shadow: 0 24px 50px rgba(30, 41, 59, .22);
}

/* faint dot-grid gives the flat gradient some depth, fading toward the copy */
.workspace-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: radial-gradient(rgba(255, 255, 255, .10) 1px, transparent 1px);
    background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(130% 130% at 84% -10%, #000 0%, transparent 62%);
            mask-image: radial-gradient(130% 130% at 84% -10%, #000 0%, transparent 62%);
    opacity: .7;
}

.hero-glow { position: absolute; border-radius: 999px; filter: blur(8px); opacity: .32; pointer-events: none; z-index: 0; }
.hero-glow-one { width: 300px; height: 300px; right: 6%; top: -58%; background: #38bdf8; animation: ws-floatA 13s ease-in-out infinite; }
.hero-glow-two { width: 240px; height: 240px; left: 30%; bottom: -72%; background: #f0abfc; animation: ws-floatB 16s ease-in-out infinite; }
.hero-content, .hero-status { position: relative; z-index: 1; }

.welcome-kicker {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin-bottom: .85rem;
    color: #bfdbfe;
    font-size: .76rem;
    font-weight: 750;
    letter-spacing: .035em;
    text-transform: uppercase;
}

.workspace-hero h1 { max-width: 760px; margin: 0 0 .8rem; font-size: clamp(1.9rem, 3vw, 3.05rem); font-weight: 850; letter-spacing: -.04em; line-height: 1.04; text-wrap: balance; }
.workspace-hero h1 span { color: #93c5fd; }
.workspace-hero p { max-width: 720px; margin: 0 0 1.25rem; color: #dbeafe; font-size: .96rem; line-height: 1.65; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .6rem; }

.hero-status {
    appearance: none;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .8rem;
    padding: 1.2rem 1.1rem;
    border: 1px solid rgba(255, 255, 255, .17);
    border-radius: 20px;
    background: rgba(255, 255, 255, .09);
    backdrop-filter: blur(12px);
    color: inherit;
    font: inherit;
    text-align: inherit;
    cursor: pointer;
    transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.hero-status:hover {
    transform: translateY(-3px);
    border-color: rgba(103, 232, 249, .62);
    background: rgba(255, 255, 255, .14);
    box-shadow: 0 14px 32px rgba(15, 23, 42, .22);
}

.hero-status:focus-visible {
    outline: 3px solid rgba(103, 232, 249, .72);
    outline-offset: 4px;
}

.progress-ring {
    position: relative;
    width: 102px;
    height: 102px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: conic-gradient(#67e8f9 var(--progress-angle), rgba(255, 255, 255, .16) 0);
    animation: ws-ring 1.15s cubic-bezier(.22, 1, .36, 1) both;
}
.progress-ring::before { content: ''; position: absolute; width: 80px; height: 80px; border-radius: 50%; background: #293283; }
.progress-ring::after  { content: ''; position: absolute; inset: -7px; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(103, 232, 249, .38), transparent 72%); }
.progress-ring-content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }
.progress-ring strong { font-size: 1.2rem; font-weight: 850; font-variant-numeric: tabular-nums; }
.progress-ring small, .database-pill small { color: #bfdbfe; font-size: .65rem; }
.database-pill { display: flex; align-items: center; gap: .6rem; }
.database-pill-copy { display: flex; flex-direction: column; }
.database-dot { width: 9px; height: 9px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 5px rgba(52, 211, 153, .14); animation: ws-dot 2.6s ease-in-out infinite; }
.database-target { display: block; max-width: 100%; color: #cbd5e1; font-size: .68rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.database-manage-hint {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin-top: -.1rem;
    padding: .28rem .55rem;
    border-radius: 999px;
    background: rgba(15, 23, 42, .24);
    color: #e0f2fe;
    font-size: .62rem;
    font-weight: 750;
    letter-spacing: .015em;
    transition: background .18s ease;
}

.hero-status:hover .database-manage-hint { background: rgba(8, 145, 178, .3); }

/* ── KPI stat tiles ─────────────────────────────────────────────────────── */
.workspace-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .8rem;
    margin: 1rem 0;
}

.stat-item {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: .8rem;
    min-width: 0;
    padding: .95rem 1.05rem;
    border: 1px solid #e3e9f1;
    border-radius: 16px;
    background: #fff;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
/* left accent rail reveals in the tile's hue on hover */
.stat-item::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--tile, #6366f1);
    opacity: 0;
    transition: opacity .18s ease;
}
.stat-item:hover { transform: translateY(-3px); }
.stat-item:hover::before { opacity: 1; }

.stat-icon {
    position: relative;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    font-size: 1.1rem;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tile, #6366f1) 22%, transparent);
    transition: transform .18s ease;
}
.stat-item:hover .stat-icon { transform: scale(1.06); }
.stat-icon.blue   { color: #2563eb; background: #eff6ff; }
.stat-icon.violet { color: #7c3aed; background: #f5f3ff; }
.stat-icon.pink   { color: #db2777; background: #fdf2f8; }
.stat-icon.green  { color: #059669; background: #ecfdf5; }
.stat-item > div { min-width: 0; display: flex; flex-direction: column; }
.stat-item strong { font-size: 1.42rem; font-weight: 850; line-height: 1.05; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.stat-item small { margin-top: .1rem; color: #64748b; font-size: .69rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Section + capability cards ─────────────────────────────────────────── */
.workspace-section {
    padding: 1.25rem;
    border: 1px solid #e3e9f1;
    border-radius: 18px;
    background: #fff;
}
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: .95rem; }
.section-heading span { color: #4f46e5; font-size: .68rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.section-heading h2 { margin: .2rem 0 0; font-size: 1.1rem; font-weight: 850; letter-spacing: -.02em; }
.section-heading > a { display: inline-flex; align-items: center; gap: .3rem; color: #4f46e5; font-size: .75rem; font-weight: 700; text-decoration: none; white-space: nowrap; transition: gap .18s ease; }
.section-heading > a:hover { gap: .5rem; }
.capability-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; }
.capability-card {
    position: relative;
    overflow: hidden;
    min-width: 0;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    gap: .7rem;
    align-items: start;
    padding: .95rem;
    border: 1px solid #e8ecf2;
    border-radius: 15px;
    color: #1e293b;
    text-decoration: none;
    transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
/* hue wash blooms from the corner on hover */
.capability-card::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(135deg, color-mix(in srgb, var(--tile, #6366f1) 10%, transparent), transparent 55%);
    opacity: 0;
    transition: opacity .18s ease;
}
.capability-card > * { position: relative; z-index: 1; }
.capability-card:hover { transform: translateY(-3px); }
.capability-card:hover::before { opacity: 1; }
.capability-icon {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    font-size: 1.05rem;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tile, #6366f1) 18%, transparent);
    transition: transform .18s ease;
}
.capability-card:hover .capability-icon { transform: scale(1.07) rotate(-3deg); }
.capability-card.data .capability-icon  { color: #2563eb; background: #eff6ff; }
.capability-card.pages .capability-icon { color: #7c3aed; background: #f5f3ff; }
.capability-card.logic .capability-icon { color: #db2777; background: #fdf2f8; }
.capability-card.ship .capability-icon  { color: #059669; background: #ecfdf5; }
.capability-card h3 { margin: .05rem 0 .3rem; font-size: .86rem; font-weight: 850; }
.capability-card p { margin: 0; color: #64748b; font-size: .71rem; line-height: 1.45; }
.capability-card > .bi { color: #94a3b8; font-size: .8rem; transition: transform .18s ease, color .18s ease; }
.capability-card:hover > .bi { transform: translate(3px, -3px); color: var(--tile, #6366f1); }

/* ── Build path rail ────────────────────────────────────────────────────── */
.build-path {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: .9rem;
    padding: .95rem 1.15rem;
    border: 1px solid #dbe3ee;
    border-radius: 16px;
    background: #f8fafc;
}
.path-title { display: flex; align-items: center; gap: .7rem; }
.path-title > i { color: #4f46e5; font-size: 1.25rem; }
.path-title > div { display: flex; flex-direction: column; }
.path-title strong { font-size: .8rem; font-weight: 800; }
.path-title small { color: #64748b; font-size: .67rem; }
.path-steps { display: flex; align-items: center; gap: .35rem; }
.path-steps a { display: flex; align-items: center; gap: .4rem; padding: .32rem .55rem; border-radius: 999px; color: #334155; font-size: .72rem; font-weight: 700; text-decoration: none; white-space: nowrap; transition: background .16s ease, color .16s ease; }
.path-steps a:hover { background: #eef2ff; color: #4338ca; }
.path-steps b { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: linear-gradient(135deg, #6366f1, #8b5cf6); font-size: .66rem; font-weight: 800; box-shadow: 0 2px 6px rgba(99, 102, 241, .35); }
.path-steps > i { color: #cbd5e1; font-size: .6rem; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1050px) {
    .workspace-hero { grid-template-columns: minmax(0, 1fr) 240px; }
    .capability-grid { grid-template-columns: repeat(2, 1fr); }
    .build-path { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 767.98px) {
    .workspace-scroll { padding: .75rem; }
    .workspace-hero { min-height: 0; grid-template-columns: 1fr; padding: 1.4rem; border-radius: 18px; }
    .hero-status { display: grid; grid-template-columns: auto 1fr; justify-items: start; }
    .progress-ring { grid-row: span 2; width: 82px; height: 82px; }
    .progress-ring::before { width: 64px; height: 64px; }
    .workspace-stats { grid-template-columns: repeat(2, 1fr); }
    .section-heading { align-items: flex-start; flex-direction: column; }
    .path-steps { width: 100%; overflow-x: auto; padding-bottom: .25rem; }
}

@media (max-width: 480px) {
    .workspace-stats, .capability-grid { grid-template-columns: 1fr; }
    .hero-status { grid-template-columns: 1fr; }
    .progress-ring { grid-row: auto; justify-self: center; }
}

@media (prefers-reduced-motion: reduce) {
    .workspace-welcome > .workspace-hero,
    .workspace-welcome > .workspace-stats,
    .workspace-welcome > .workspace-section,
    .workspace-welcome > .build-path,
    .hero-glow-one, .hero-glow-two,
    .progress-ring, .database-dot { animation: none !important; }
    .stat-item, .capability-card, .stat-icon, .capability-icon,
    .capability-card > .bi, .hero-status { transition: none !important; }
}
