@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@500;600;700;800&display=swap');

:root {
    --ink: #172033;
    --muted: #6f7889;
    --line: #e4e8f0;
    --surface: #ffffff;
    --canvas: #f5f7fb;
    --violet: #725cff;
    --cyan: #18b9d1;
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    min-height: 100%;
    color: var(--ink);
    background: var(--canvas);
    font-family: 'DM Sans', system-ui, sans-serif;
}

h1, h2, h3, strong {
    font-family: 'Manrope', system-ui, sans-serif;
}

a, button, input, select {
    font: inherit;
}

button, a {
    -webkit-tap-highlight-color: transparent;
}

button {
    cursor: pointer;
}

.legacy-home-menu {
    margin: 0 0 2rem;
    padding: .65rem .9rem;
    border-radius: 15px;
    background: linear-gradient(90deg, #0d6efd, #6610f2);
    box-shadow: 0 12px 30px rgba(65, 48, 190, .2);
}

.legacy-home-menu .navbar-brand {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-family: 'Manrope', system-ui, sans-serif;
    font-size: .86rem;
    font-weight: 800;
}

.legacy-home-menu .navbar-brand span {
    display: grid;
    place-items: center;
    width: 31px;
    height: 31px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .16);
    font-size: .65rem;
}

.legacy-home-menu .nav-link {
    padding-right: .9rem;
    padding-left: .9rem;
    border-radius: 8px;
    font-size: .78rem;
    font-weight: 700;
}

.legacy-home-menu .nav-link:hover,
.legacy-home-menu .nav-link.active,
.legacy-home-menu .nav-link.show {
    background: rgba(255, 255, 255, .13);
}

.legacy-home-menu .dropdown-menu {
    padding: .45rem;
    border: 0;
    border-radius: 12px;
    box-shadow: 0 16px 38px rgba(22, 31, 54, .18);
}

.legacy-home-menu .dropdown-item {
    padding: .65rem .8rem;
    border-radius: 8px;
    color: #354052;
    font-size: .75rem;
}

.legacy-home-menu .dropdown-item:hover {
    color: #5841d8;
    background: #f0edff;
}

.legacy-menu-status {
    color: rgba(255, 255, 255, .72);
    font-size: .67rem;
    font-weight: 700;
}

.page-heading {
    margin-bottom: 2rem;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2rem;
}

.page-heading h1 {
    margin: .35rem 0 .55rem;
    font-size: clamp(2rem, 4vw, 3.25rem);
    letter-spacing: -.055em;
}

.page-heading p {
    max-width: 680px;
    margin: 0;
    color: var(--muted);
    line-height: 1.7;
}

.eyebrow {
    color: var(--violet);
    font-size: .65rem;
    font-weight: 900;
    letter-spacing: .17em;
}

.eyebrow.light {
    color: #a997ff;
}

.preview-badge, .status-pill, .code-pill {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem .8rem;
    border: 1px solid #ded9ff;
    border-radius: 999px;
    color: #5d48df;
    background: #f0edff;
    font-size: .68rem;
    font-weight: 800;
}

.status-pill {
    color: #24845f;
    border-color: #ccecdf;
    background: #edfaf5;
}

.status-pill i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #38c98c;
}

.hero-card {
    min-height: 285px;
    padding: clamp(2rem, 4vw, 3.5rem);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    border-radius: 24px;
    color: white;
    overflow: hidden;
    position: relative;
    background:
        radial-gradient(circle at 78% 48%, rgba(127, 105, 255, .38), transparent 25%),
        linear-gradient(120deg, #161d30, #1c2240 58%, #262052);
    box-shadow: 0 18px 50px rgba(28, 32, 64, .18);
}

.hero-card::after {
    content: "";
    width: 260px;
    height: 260px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 50%;
    position: absolute;
    right: -70px;
    top: -110px;
}

.hero-card > div:first-child {
    max-width: 680px;
    position: relative;
    z-index: 1;
}

.hero-kicker {
    color: #a997ff;
    font-size: .65rem;
    font-weight: 900;
    letter-spacing: .18em;
}

.hero-card h2 {
    margin: .75rem 0;
    max-width: 600px;
    font-size: clamp(2rem, 4vw, 3.35rem);
    letter-spacing: -.055em;
}

.hero-card p {
    max-width: 610px;
    margin: 0;
    color: #aeb6cb;
    line-height: 1.75;
}

.runtime-orbit {
    flex: none;
    width: 155px;
    height: 155px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 50%;
    position: relative;
    text-align: center;
}

.runtime-orbit::after {
    content: "";
    position: absolute;
    inset: 13px;
    border: 1px dashed rgba(255, 255, 255, .2);
    border-radius: 50%;
}

.runtime-orbit strong {
    font-size: .78rem;
    line-height: 1.45;
    position: relative;
    z-index: 1;
}

.orbit-dot {
    width: 9px;
    height: 9px;
    position: absolute;
    left: 10px;
    top: 55px;
    border-radius: 50%;
    background: #67e8bf;
    box-shadow: 0 0 18px #67e8bf;
}

.dashboard-grid {
    margin-top: 1.35rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.35rem;
}

.study-card {
    min-height: 210px;
    padding: 1.7rem;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 1.2rem;
    align-items: start;
    border: 1px solid var(--line);
    border-radius: 18px;
    color: var(--ink);
    background: var(--surface);
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease;
}

.study-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 45px rgba(28, 39, 65, .1);
}

.card-number {
    display: grid;
    place-items: center;
    width: 45px;
    height: 45px;
    border-radius: 12px;
    font-weight: 900;
}

.accent-violet .card-number {
    color: #684eea;
    background: #eeeaff;
}

.accent-cyan .card-number {
    color: #078ba0;
    background: #e3f8fb;
}

.card-label {
    color: #8b93a2;
    font-size: .61rem;
    font-weight: 900;
    letter-spacing: .13em;
}

.study-card h3 {
    margin: .45rem 0 .6rem;
    font-size: 1.35rem;
}

.study-card p {
    margin: 0;
    color: var(--muted);
    line-height: 1.65;
}

.card-arrow {
    color: #929aaa;
    font-size: 1.5rem;
}

.concept-strip {
    margin-top: 1.35rem;
    padding: 1.2rem 1.5rem;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: var(--surface);
}

.concept-strip div {
    display: flex;
    flex-direction: column;
}

.concept-strip strong {
    font-size: .78rem;
}

.concept-strip span {
    margin-top: .2rem;
    color: #9098a7;
    font-size: .68rem;
}

.demo-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.35rem;
}

.panel {
    padding: 1.7rem;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--surface);
}

.panel-heading {
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.panel-heading > div {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.panel-heading h2 {
    margin: 0;
    font-size: 1.15rem;
}

.panel-index {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    color: #654fea;
    background: #eeeaff;
    font-weight: 900;
}

.code-pill {
    color: #687183;
    border-color: #e5e8ee;
    background: #f8f9fb;
}

.muted {
    color: var(--muted);
    line-height: 1.65;
}

.counter-stage {
    margin: 2rem 0 1.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2.2rem;
}

.counter-stage strong {
    min-width: 95px;
    text-align: center;
    font-size: 4rem;
    letter-spacing: -.07em;
}

.round-action {
    width: 48px;
    height: 48px;
    border: 1px solid #dfe3ea;
    border-radius: 50%;
    color: #687183;
    background: white;
    font-size: 1.4rem;
}

.round-action.primary {
    color: white;
    border-color: var(--violet);
    background: var(--violet);
    box-shadow: 0 10px 24px rgba(114, 92, 255, .28);
}

.event-log {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    border-radius: 12px;
    background: #f7f8fb;
}

.event-log span {
    color: #929aaa;
    font-size: .66rem;
    font-weight: 800;
    text-transform: uppercase;
}

.event-log strong {
    margin-top: .3rem;
    font-size: .8rem;
}

.text-action {
    margin-top: .8rem;
    padding: 0;
    color: #7562e9;
    border: 0;
    background: transparent;
    font-size: .75rem;
    font-weight: 700;
}

.field {
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.field label {
    font-size: .74rem;
    font-weight: 800;
}

.field input, .field select, .search-field input {
    width: 100%;
    min-height: 46px;
    padding: 0 .85rem;
    border: 1px solid #dce1e9;
    border-radius: 10px;
    color: var(--ink);
    background: white;
    outline: none;
}

.field input:focus, .field select:focus, .search-field input:focus {
    border-color: #8c78ff;
    box-shadow: 0 0 0 3px rgba(114, 92, 255, .11);
}

.validation-message, .validation-summary {
    color: #c43d5d;
    font-size: .7rem;
}

.button-primary, .button-secondary {
    min-height: 44px;
    padding: 0 1rem;
    border-radius: 10px;
    font-weight: 800;
    font-size: .78rem;
}

.button-primary {
    color: white;
    border: 0;
    background: var(--violet);
}

.button-secondary {
    color: #6652da;
    border: 1px solid #ddd7ff;
    background: #f1eeff;
}

.success-note {
    margin-top: 1rem;
    padding: .8rem 1rem;
    border-radius: 10px;
    color: #247454;
    background: #e9f8f1;
    font-size: .76rem;
    font-weight: 700;
}

.learning-note {
    margin-top: 1.35rem;
    padding: 1.35rem 1.5rem;
    border-left: 3px solid var(--violet);
    border-radius: 0 14px 14px 0;
    background: #ece9ff;
}

.learning-note span {
    color: #6752df;
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: .12em;
}

.learning-note p {
    max-width: 920px;
    margin: .45rem 0 0;
    color: #524c77;
    line-height: 1.65;
}

.data-panel {
    padding: 0;
    overflow: hidden;
}

.toolbar {
    padding: 1.2rem 1.4rem;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid var(--line);
}

.search-field {
    width: min(520px, 100%);
    display: flex;
    align-items: center;
    position: relative;
}

.search-field span {
    position: absolute;
    left: 1rem;
    color: #8c94a3;
    font-size: 1.3rem;
}

.search-field input {
    padding-left: 2.7rem;
    background: #f8f9fb;
}

.grid-shell {
    overflow-x: auto;
}

.modern-grid {
    width: 100%;
    border-collapse: collapse;
}

.modern-grid ::deep thead {
    background: #f7f8fb;
}

.modern-grid ::deep th {
    padding: .8rem 1rem;
    color: #808999;
    border-bottom: 1px solid var(--line);
    text-align: left;
    font-size: .65rem;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.modern-grid ::deep td {
    padding: .95rem 1rem;
    border-bottom: 1px solid #edf0f5;
    font-size: .78rem;
}

.stock-badge {
    padding: .35rem .55rem;
    border-radius: 999px;
    font-size: .67rem;
    font-weight: 800;
}

.stock-badge.ok {
    color: #277758;
    background: #e7f8f0;
}

.stock-badge.low {
    color: #a15b28;
    background: #fff1e2;
}

.row-action {
    padding: .4rem .6rem;
    color: #6854dc;
    border: 1px solid #ddd8ff;
    border-radius: 8px;
    background: white;
    font-size: .66rem;
    font-weight: 800;
}

.grid-footer {
    min-height: 66px;
    padding: .8rem 1.4rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    color: #858e9e;
    background: #fafbfc;
    font-size: .68rem;
}

.grid-footer ::deep button {
    min-width: 30px;
    height: 30px;
    border: 1px solid #dfe3e9;
    border-radius: 7px;
    background: white;
}

.feature-cards {
    margin-top: 1.35rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.feature-cards > div {
    padding: 1.3rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: white;
}

.feature-cards span {
    color: #8b78f5;
    font-size: .65rem;
    font-weight: 900;
}

.feature-cards strong {
    margin: .3rem 0;
    display: block;
    font-size: .9rem;
}

.feature-cards p {
    margin: 0;
    color: #838c9c;
    font-size: .72rem;
    line-height: 1.55;
}

.login-page {
    min-height: calc(100vh - 76px - 6rem);
    display: grid;
    grid-template-columns: .95fr 1.05fr;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 22px 65px rgba(28, 39, 65, .13);
}

.login-intro {
    min-height: 700px;
    padding: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: white;
    background:
        radial-gradient(circle at 20% 78%, rgba(113, 88, 255, .35), transparent 28%),
        linear-gradient(145deg, #141b2d, #1f2147);
}

.login-brand {
    display: flex;
    align-items: center;
    gap: .65rem;
    font-family: 'Manrope', sans-serif;
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .11em;
}

.login-brand span {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--violet);
    font-size: .72rem;
}

.login-intro h1 {
    margin: .7rem 0 1.2rem;
    font-size: clamp(2.4rem, 5vw, 4.4rem);
    letter-spacing: -.065em;
    line-height: 1.02;
}

.login-intro h1 em {
    color: #a795ff;
    font-style: normal;
}

.login-intro p {
    max-width: 530px;
    color: #aab3c7;
    line-height: 1.8;
}

.login-features {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
}

.login-features span {
    padding: .5rem .7rem;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 999px;
    color: #b9c1d2;
    font-size: .66rem;
}

.login-form-area {
    padding: 3rem;
    display: grid;
    place-items: center;
    background: white;
}

.login-card {
    width: min(430px, 100%);
}

.login-card h2 {
    margin: .45rem 0;
    font-size: 2rem;
    letter-spacing: -.045em;
}

.login-card > p {
    margin: 0 0 1.8rem;
    color: var(--muted);
}

.legacy-connection {
    margin: -0.8rem 0 1.5rem;
    padding: .65rem .75rem;
    display: flex;
    align-items: center;
    gap: .55rem;
    border: 1px solid;
    border-radius: 9px;
    font-size: .68rem;
    font-weight: 700;
}

.legacy-connection i {
    width: 8px;
    height: 8px;
    flex: none;
    border-radius: 50%;
}

.legacy-connection.connected {
    color: #247454;
    border-color: #ccecdf;
    background: #edfaf5;
}

.legacy-connection.connected i {
    background: #38c98c;
    box-shadow: 0 0 0 3px rgba(56, 201, 140, .14);
}

.legacy-connection.disconnected {
    color: #8a6624;
    border-color: #eadcb9;
    background: #fff8e8;
}

.legacy-connection.disconnected i {
    background: #d7a63e;
}

.label-row {
    display: flex;
    justify-content: space-between;
}

.label-row a {
    color: #735ee8;
    font-size: .7rem;
    text-decoration: none;
}

.remember-row {
    margin: .3rem 0 1.2rem;
    display: flex;
    align-items: center;
    gap: .55rem;
    color: #697284;
    font-size: .72rem;
}

.login-button {
    width: 100%;
    min-height: 50px;
    padding: 0 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 0;
    border-radius: 11px;
    color: white;
    background: linear-gradient(90deg, #6953e9, #826eff);
    font-weight: 800;
    font-size: .8rem;
    box-shadow: 0 12px 25px rgba(114, 92, 255, .25);
}

.passkey-separator {
    margin: 1.4rem 0 .8rem;
    display: flex;
    align-items: center;
    gap: .7rem;
    color: #9aa1af;
    font-size: .63rem;
}

.passkey-separator::before, .passkey-separator::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #e6e9ef;
}

.passkey-button {
    width: 100%;
    min-height: 44px;
    border: 1px solid #dfe3ea;
    border-radius: 10px;
    color: #4f5869;
    background: white;
    font-size: .76rem;
    font-weight: 800;
}

.demo-credentials {
    margin-top: 1.5rem;
    padding: .9rem 1rem;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .35rem 1rem;
    border: 1px dashed #d9d4fb;
    border-radius: 11px;
    background: #f7f5ff;
}

.demo-credentials span {
    grid-column: 1 / -1;
    color: #7661e5;
    font-size: .58rem;
    font-weight: 900;
    letter-spacing: .12em;
}

.demo-credentials code {
    color: #57506f;
    font-size: .7rem;
}

.preview-warning {
    margin-top: 1rem;
    display: block;
    color: #9aa1af;
    font-size: .62rem;
    line-height: 1.5;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #27aa78;
}

.invalid {
    outline: 1px solid #d14364;
}

@media (max-width: 1000px) {
    .login-page {
        grid-template-columns: 1fr;
    }

    .login-intro {
        min-height: 380px;
    }

    .concept-strip {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 760px) {
    .page-heading, .toolbar, .grid-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .dashboard-grid, .demo-grid, .feature-cards {
        grid-template-columns: 1fr;
    }

    .hero-card {
        align-items: flex-start;
        flex-direction: column;
    }

    .runtime-orbit {
        width: 110px;
        height: 110px;
    }

    .concept-strip {
        grid-template-columns: 1fr;
    }

    .login-intro, .login-form-area {
        padding: 2rem 1.4rem;
    }

    .login-intro {
        min-height: 330px;
    }
}