:root {
    color-scheme: dark light;
    --bg: #090b0a;
    --surface-hover: #171b18;
    --text: #f6f7f6;
    --muted-border: rgba(255,255,255,.09);
    --accent: #9be71b;
    --shadow: 0 18px 50px rgba(0,0,0,.28);
}

* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body {
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: radial-gradient(circle at 50% 0%, rgba(155,231,27,.08), transparent 34rem), var(--bg);
    color: var(--text);
}
.hub-shell {
    width: min(980px, calc(100% - 32px));
    margin: 0 auto;
    min-height: 100vh;
    padding: 56px 0 72px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-bottom: 42px;
    text-align: center;
}
.brand-logo { display: block; width: min(360px, 68vw); height: auto; object-fit: contain; }
.brand h1 { margin: 0; font-size: clamp(1.35rem, 2.3vw, 1.8rem); font-weight: 650; letter-spacing: .03em; text-transform: lowercase; }
.apps-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.app-card {
    min-height: 176px;
    padding: 28px;
    border: 1px solid var(--muted-border);
    border-radius: 24px;
    background: linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
    box-shadow: var(--shadow);
    color: inherit;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 22px;
    position: relative;
    overflow: hidden;
    transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.app-card::after {
    content: "";
    position: absolute;
    inset: auto -40px -80px auto;
    width: 170px;
    height: 170px;
    border-radius: 50%;
    background: rgba(155,231,27,.07);
    pointer-events: none;
}
.app-card:hover, .app-card:focus-visible {
    transform: translateY(-3px);
    border-color: rgba(155,231,27,.38);
    background: var(--surface-hover);
    outline: none;
}
.app-icon {
    width: 74px;
    height: 74px;
    border-radius: 20px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    background: #0d110e;
    border: 1px solid rgba(155,231,27,.22);
}
.app-icon svg {
    width: 42px;
    height: 42px;
    fill: none;
    stroke: #f6f7f6;
    stroke-width: 3.3;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.app-card:nth-child(2) .app-icon svg, .app-card:nth-child(4) .app-icon svg { stroke: var(--accent); }
.app-name { font-size: clamp(1.12rem, 2vw, 1.42rem); font-weight: 700; letter-spacing: -.015em; }

@media (prefers-color-scheme: light) {
    :root {
        --bg: #f5f7f5;
        --surface-hover: #ffffff;
        --text: #111512;
        --muted-border: rgba(9,18,12,.10);
        --shadow: 0 16px 40px rgba(19,34,23,.10);
    }
    body { background: radial-gradient(circle at 50% 0%, rgba(155,231,27,.16), transparent 34rem), var(--bg); }
    .brand-logo { background: #050505; border-radius: 22px; padding: 12px; }
    .app-card { background: rgba(255,255,255,.86); }
    .app-icon { background: #101410; }
    .app-icon svg { stroke: #fff; }
}

@media (max-width: 680px) {
    .hub-shell { width: min(100% - 24px, 520px); padding: 36px 0 48px; justify-content: flex-start; }
    .brand { margin: 28px 0 30px; }
    .brand-logo { width: min(300px, 78vw); }
    .apps-grid { grid-template-columns: 1fr; gap: 14px; }
    .app-card { min-height: 118px; padding: 20px; border-radius: 20px; }
    .app-icon { width: 62px; height: 62px; border-radius: 17px; }
    .app-icon svg { width: 34px; height: 34px; }
}

@media (prefers-reduced-motion: reduce) { .app-card { transition: none; } }