:root {
    --app-font-sans: 'Inter', 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --app-bg: #F3F6FC;
    --app-surface: #FFFFFF;
    --app-surface-muted: #ECF2FB;
    --app-border: rgba(31, 42, 68, .10);
    --app-border-strong: rgba(31, 42, 68, .18);
    --app-heading: #1A2740;
    --app-text: #23314C;
    --app-muted: #5F6B80;
    --app-accent: #3AB59A;
    --app-accent-dark: #1B3B66;
    --app-shadow-soft: 0 20px 40px -28px rgba(20, 31, 56, .35);
    --app-shadow-card: 0 12px 28px -20px rgba(18, 30, 56, .28);
    --app-radius-xl: 22px;
    --app-radius-lg: 18px;
    --app-radius-md: 12px;
    --app-radius-sm: 10px;
}

*, *::before, *::after {
    box-sizing: border-box;
}

body {
    font-family: var(--app-font-sans);
    background: var(--app-bg);
    color: var(--app-text);
    line-height: 1.55;
    min-height: 100vh;
}

.app-body {
    background:
        radial-gradient(120% 120% at 8% -10%, rgba(76, 185, 160, .18), transparent 58%),
        radial-gradient(100% 120% at 100% 0%, rgba(88, 142, 255, .14), transparent 62%),
        var(--app-bg);
    padding: 2.75rem 0 3rem;
}

a {
    color: var(--app-accent-dark);
}

a:hover {
    color: #0f1f33;
}

h1, h2, h3, h4, h5 {
    color: var(--app-heading);
    font-weight: 600;
}

.text-muted {
    color: var(--app-muted) !important;
}

/* Shell: на всю ширину окна, боковые поля только для читаемости */
.app-shell {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding-left: clamp(0.75rem, 2.5vw, 2rem);
    padding-right: clamp(0.75rem, 2.5vw, 2rem);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

/* Navbar */
.app-navbar {
    background: rgba(255, 255, 255, .86);
    backdrop-filter: blur(12px);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-xl);
    box-shadow: var(--app-shadow-card);
    padding: 1.05rem 1.35rem;
}

.app-brand {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    border-radius: var(--app-radius-md);
    font-weight: 600;
    color: var(--app-heading);
    letter-spacing: .02em;
}

.app-brand i {
    font-size: 1.3rem;
    color: var(--app-accent);
}

.app-tabs .nav-link {
    border-radius: var(--app-radius-sm);
    padding: .45rem .95rem;
    font-weight: 500;
    color: var(--app-muted);
    transition: all .16s ease;
}

.app-tabs .nav-link:hover {
    background-color: rgba(27, 53, 79, .06);
    color: var(--app-heading);
}

.app-tabs .nav-link.active {
    background: linear-gradient(135deg, rgba(58, 181, 154, .18), rgba(80, 130, 240, .14));
    color: var(--app-accent-dark);
    box-shadow: inset 0 0 0 1px rgba(58, 181, 154, .45);
}

.navbar-toggler {
    border-radius: var(--app-radius-sm);
    border-color: var(--app-border);
}

.navbar-toggler:focus {
    box-shadow: 0 0 0 .2rem rgba(67, 178, 157, .35);
}

/* Flash */
.alert-slim {
    padding: .5rem .95rem;
    border-radius: var(--app-radius-md);
}

.app-flash {
    display: none;
}

.app-flash.app-flash--visible {
    display: block;
}

.app-flash .alert {
    margin-bottom: 0;
    border-width: 1px;
}

.app-flash .alert-success {
    background: rgba(67, 178, 157, .18);
    border-color: rgba(67, 178, 157, .4);
    color: var(--app-accent-dark);
}

.app-flash .alert-danger {
    background: rgba(220, 53, 69, .12);
    border-color: rgba(220, 53, 69, .3);
    color: #8F1B28;
}

/* Main surface */
.app-main {
    display: flex;
}

.app-surface {
    background: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, .92));
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-xl);
    padding: 2.25rem 2.5rem;
    box-shadow: var(--app-shadow-soft);
    width: 100%;
}

.card {
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-lg);
    box-shadow: var(--app-shadow-card);
    background: rgba(255, 255, 255, .96);
}

.card .card-header {
    border-bottom: 1px solid rgba(31, 42, 68, .08);
    background: linear-gradient(180deg, rgba(247, 250, 255, .9), rgba(255, 255, 255, .7));
}

/* Dashboard helpers */
.dashboard-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1.25rem;
    margin-bottom: 2.25rem;
}

.dashboard-header__title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: .45rem;
    letter-spacing: -.01em;
}

.dashboard-header__subtitle {
    color: #5e6676;
    max-width: 40rem;
    line-height: 1.6;
    font-size: .98rem;
}

.dashboard-header__cta {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
}

.dashboard-header__cta .btn {
    border-radius: var(--app-radius-md);
    padding: .65rem 1.2rem;
    font-weight: 600;
}

/* Metric cards */
.metric-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 1rem;
    margin-bottom: 1.8rem;
}

.metric-card {
    background: linear-gradient(160deg, rgba(67, 178, 157, .12), rgba(255, 255, 255, .92));
    border: 1px solid rgba(67, 178, 157, .25);
    border-radius: var(--app-radius-lg);
    padding: 1.1rem 1rem;
    display: flex;
    flex-direction: column;
    gap: .45rem;
    box-shadow: var(--app-shadow-card);
    transition: transform .15s ease, box-shadow .15s ease;
    position: relative;
}

.metric-card[data-tone="teal"] {
    background: linear-gradient(145deg, rgba(67, 178, 157, .18), rgba(255, 255, 255, .95));
    border-color: rgba(67, 178, 157, .4);
}

.metric-card[data-tone="blue"] {
    background: linear-gradient(150deg, rgba(96, 165, 250, .18), rgba(255, 255, 255, .95));
    border-color: rgba(96, 165, 250, .42);
}

.metric-card[data-tone="amber"] {
    background: linear-gradient(150deg, rgba(252, 211, 77, .22), rgba(255, 255, 255, .95));
    border-color: rgba(252, 211, 77, .38);
}

.metric-card[data-tone="indigo"] {
    background: linear-gradient(150deg, rgba(165, 180, 252, .24), rgba(255, 255, 255, .95));
    border-color: rgba(165, 180, 252, .36);
}

.metric-card[data-tone="red"] {
    background: linear-gradient(150deg, rgba(248, 113, 113, .18), rgba(255, 255, 255, .95));
    border-color: rgba(248, 113, 113, .4);
}

.metric-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 40px -28px rgba(15, 23, 42, .32);
}

.metric-card__icon {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: .8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: var(--app-accent-dark);
    background: rgba(27, 53, 79, .07);
    box-shadow: inset 0 0 0 1px rgba(27, 53, 79, .08);
}

.metric-card__value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--app-heading);
    line-height: 1.15;
}

.metric-card__label {
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .78rem;
    font-weight: 600;
    color: rgba(27, 53, 79, .72);
}

.metric-card__desc {
    font-size: .83rem;
    color: #657083;
    line-height: 1.45;
}

.metric-card__link {
    margin-top: auto;
    font-weight: 600;
    font-size: .82rem;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: var(--app-accent-dark);
    text-decoration: none;
}

.metric-card__link i {
    font-size: 1rem;
}

.metric-card__link:hover {
    color: #0f1f33;
}

/* Status sections */
.status-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 1.1rem;
    margin-bottom: 2.25rem;
}

.status-card {
    border-radius: var(--app-radius-lg);
    padding: 1.25rem 1.3rem;
    color: var(--app-heading);
    position: relative;
    overflow: hidden;
    box-shadow: var(--app-shadow-card);
}

.status-card::after {
    content: '';
    position: absolute;
    inset: 0;
    opacity: .55;
    background: linear-gradient(135deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .25));
    pointer-events: none;
}

.status-card__label {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    margin-bottom: .35rem;
    font-weight: 600;
}

.status-card__value {
    font-size: 1.75rem;
    font-weight: 700;
}

.status-card__meta {
    font-size: .82rem;
    color: rgba(255, 255, 255, .9);
}

.status-card[data-tone="planned"] .status-card__meta {
    color: rgba(6, 57, 43, .75);
}

.status-card[data-tone="progress"] .status-card__meta,
.status-card[data-tone="done"] .status-card__meta {
    color: rgba(255, 255, 255, .85);
}

.status-card[data-tone="planned"] {
    background: linear-gradient(160deg, #5BC4A9, #3AA98D);
    color: #06392B;
}

.status-card[data-tone="progress"] {
    background: linear-gradient(160deg, #60A5FA, #2563EB);
    color: #061C3A;
}

.status-card[data-tone="done"] {
    background: linear-gradient(160deg, #34D399, #059669);
    color: #022315;
}

/* Focus cards */
.focus-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.focus-card {
    border-radius: var(--app-radius-lg);
    border: 1px solid var(--app-border);
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 16px 34px -30px rgba(15, 23, 42, .45);
    padding: 1rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: .55rem;
}

.focus-card__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.focus-card__head i {
    font-size: 1.1rem;
}

.focus-card__title {
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 700;
}

.focus-card__value {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.1;
}

.focus-card__desc {
    margin: 0;
    font-size: .85rem;
    color: var(--app-muted);
}

.focus-card__link {
    margin-top: auto;
    text-decoration: none;
    font-size: .84rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

.focus-card[data-tone="danger"] {
    background: linear-gradient(160deg, rgba(254, 226, 226, .78), rgba(255, 255, 255, .95));
    border-color: rgba(220, 53, 69, .25);
}

.focus-card[data-tone="danger"] .focus-card__title,
.focus-card[data-tone="danger"] .focus-card__value,
.focus-card[data-tone="danger"] .focus-card__head i {
    color: #8F1B28;
}

.focus-card[data-tone="warning"] {
    background: linear-gradient(160deg, rgba(255, 243, 205, .86), rgba(255, 255, 255, .95));
    border-color: rgba(255, 193, 7, .35);
}

.focus-card[data-tone="warning"] .focus-card__title,
.focus-card[data-tone="warning"] .focus-card__value,
.focus-card[data-tone="warning"] .focus-card__head i {
    color: #7A5400;
}

/* Generic blocks */
.app-block {
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-lg);
    background: rgba(255, 255, 255, .95);
    padding: 1.75rem;
    box-shadow: 0 18px 38px -34px rgba(15, 23, 42, .45);
    margin-bottom: 2rem;
}

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

.app-block__meta {
    color: var(--app-muted);
    font-size: .85rem;
}

/* Alerts panel */
.critical-panel {
    border-radius: var(--app-radius-lg);
    border: 1px solid rgba(220, 53, 69, .25);
    padding: 1.75rem;
    background: linear-gradient(165deg, rgba(254, 226, 226, .65), rgba(255, 255, 255, .92));
    box-shadow: 0 18px 40px -32px rgba(220, 53, 69, .55);
    margin-bottom: 2rem;
}

.critical-panel__title {
    display: flex;
    align-items: center;
    gap: .75rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
}

.critical-panel__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
}

.critical-panel .alert {
    border-radius: var(--app-radius-md);
    margin: 0;
    border: none;
    box-shadow: none;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.critical-panel .alert i {
    font-size: 2rem;
}

/* Quick actions */
.quick-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

.quick-actions__item {
    border: 1px dashed var(--app-border);
    border-radius: var(--app-radius-lg);
    padding: 1rem 1.25rem;
    background: rgba(255, 255, 255, .96);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-weight: 600;
    color: #243047;
    transition: border-color .2s ease, transform .2s ease, background .2s ease, box-shadow .2s ease;
}

.quick-actions__item:hover {
    border-color: rgba(67, 178, 157, .65);
    background: rgba(67, 178, 157, .10);
    transform: translateY(-3px);
    box-shadow: 0 16px 28px -22px rgba(58, 181, 154, .5);
}

/* Workplace cards */
.executor-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.25rem;
}

.executor-card {
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-lg);
    background: rgba(255, 255, 255, .95);
    padding: 1.6rem;
    display: flex;
    flex-direction: column;
    gap: .75rem;
    box-shadow: 0 16px 32px -30px rgba(15, 23, 42, .45);
    transition: transform .2s ease, box-shadow .2s ease;
}

.executor-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 40px -32px rgba(15, 23, 42, .45);
}

.executor-card__icon {
    width: 3rem;
    height: 3rem;
    border-radius: 1rem;
    background: rgba(67, 178, 157, .16);
    color: var(--app-accent-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
}

.executor-card__title {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0;
    color: var(--app-heading);
}

.executor-card__code {
    margin: 0;
    color: var(--app-muted);
    font-size: .85rem;
}

.executor-card__footer {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: .55rem;
}

/* Info panel */
.info-panel {
    border-radius: var(--app-radius-lg);
    background: rgba(238, 242, 248, .8);
    border: 1px dashed rgba(31, 42, 68, .18);
    padding: 1.6rem 1.8rem;
    display: grid;
    gap: 1.1rem;
}

.info-panel__columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

.info-panel ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: .65rem;
}

.info-panel li {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    color: var(--app-muted);
    line-height: 1.35;
}

.info-panel li i {
    color: #34D399;
}

/* Forms */
.form-control,
.form-select {
    border-radius: var(--app-radius-sm);
    border-color: var(--app-border);
    background-color: rgba(255, 255, 255, .95);
}

.form-control:focus,
.form-select:focus {
    border-color: rgba(67, 178, 157, .55);
    box-shadow: 0 0 0 .2rem rgba(67, 178, 157, .18);
}

/* Buttons */
.btn {
    border-radius: var(--app-radius-sm);
    font-weight: 600;
    letter-spacing: .01em;
}

.btn-primary {
    background: linear-gradient(135deg, #2563EB, #1E4FD9);
    border-color: #1E4FD9;
    box-shadow: 0 10px 20px -14px rgba(37, 99, 235, .6);
}

.btn-primary:hover {
    background: linear-gradient(135deg, #2259D7, #1A46C2);
    border-color: #1A46C2;
}

.btn-success {
    background: linear-gradient(135deg, #029E7F, #008D72);
    border-color: #008D72;
}

.btn-warning {
    color: #854D0E;
    background-color: #FCD34D;
    border-color: #FCD34D;
}

.btn-outline-secondary {
    color: var(--app-muted);
    border-color: var(--app-border);
    background: rgba(255, 255, 255, .8);
}

.btn-outline-secondary:hover {
    background: rgba(31, 42, 68, .06);
    color: var(--app-heading);
}

.table {
    --bs-table-bg: transparent;
    --bs-table-striped-bg: rgba(31, 42, 68, .025);
    --bs-table-hover-bg: rgba(58, 181, 154, .07);
    color: var(--app-text);
    border-color: rgba(31, 42, 68, .08);
}

.table thead th {
    font-weight: 600;
    color: #42506a;
    font-size: .84rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.modal-content {
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-lg);
    box-shadow: 0 30px 55px -38px rgba(15, 23, 42, .6);
}

/* Responsive */
@media (max-width: 992px) {
    .app-body {
        padding: 2.25rem 0 2.5rem;
    }

    .app-shell {
        gap: 1.5rem;
    }

    .app-navbar {
        padding: .85rem 1rem;
    }

    .app-surface {
        padding: 1.5rem;
    }
}

@media (max-width: 576px) {
    .dashboard-header__title {
        font-size: 1.55rem;
    }

    .app-surface {
        border-radius: 16px;
    }

    .quick-actions__item {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Мир кухни: read-only сетка маршрута */
.route-grid-mk {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    grid-template-rows: auto auto;
    gap: 0.5rem;
}

.mk-cell {
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: .25rem;
    padding: .4rem;
    font-size: .85rem;
}

/* Список заказов / просмотр: лёгкая подсветка по статусу этапа */
.route-grid-mk .mk-cell.mk-cell-status-done {
    background-color: rgba(25, 135, 84, 0.14);
    border-color: rgba(25, 135, 84, 0.28);
}

.route-grid-mk .mk-cell.mk-cell-status-progress {
    background-color: rgba(255, 193, 7, 0.28);
    border-color: rgba(214, 162, 6, 0.45);
}

.mk-r1c1 { grid-column: 1; grid-row: 1; }
.mk-r1c2 { grid-column: 2; grid-row: 1; }
.mk-r1c3 { grid-column: 3; grid-row: 1; }
.mk-r2c1 { grid-column: 1; grid-row: 2; }
.mk-r2c2span { grid-column: 2; grid-row: 2; }
.mk-group2 {
    grid-column: 1 / span 3;
    grid-row: 2;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
}

.mk-seq-assembly1,
.mk-seq-paint,
.mk-seq-assembly2 {
    grid-row: 1 / span 2;
    align-self: stretch;
    display: flex;
    flex-direction: column;
}
.mk-seq-assembly1 { grid-column: 4; }
.mk-seq-paint { grid-column: 5; }
.mk-seq-assembly2 { grid-column: 6; }

.mk-pack-line1 { grid-column: 7; grid-row: 1; }
.mk-pack-line2 { grid-column: 7; grid-row: 2; }

.mk-pack-selected {
    box-shadow: inset 0 0 0 2px rgba(25, 135, 84, .35);
}

/* Список заказов: сетка + ячейка номера справа */
.mk-order-list-item {
    display: grid;
    grid-template-columns: minmax(140px, 180px) 1fr;
    gap: 0.75rem;
    align-items: stretch;
}

.mk-order-number-cell {
    background: rgba(255, 255, 255, .92);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-md);
    padding: 0.75rem 0.9rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.65rem;
    box-shadow: 0 16px 34px -30px rgba(15, 23, 42, .35);
}

.mk-order-number-cell__label {
    font-size: .78rem;
    color: var(--app-muted);
}

.mk-order-number-cell__value {
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: .02em;
}

/* Orders list polish */
.orders-list-page .mk-order-list-item {
    gap: 1rem;
}

.orders-list-page .mk-order-number-cell {
    border-color: rgba(31, 42, 68, .12);
    background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(249, 252, 255, .95));
    box-shadow: 0 18px 30px -24px rgba(15, 23, 42, .32);
}

.orders-list-page .mk-order-number-cell__label {
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.orders-list-page .mk-order-number-cell__value {
    font-size: 1.2rem;
}

.orders-list-page .app-block {
    border-radius: 14px;
    padding: 1rem 1rem .85rem;
}

.orders-list-page .app-block .fw-semibold {
    font-size: .98rem;
    letter-spacing: .01em;
}

/* Order form polish */
.order-form-page > h2 {
    font-size: 1.35rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.order-form-page #orderForm {
    background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(247, 250, 255, .92));
    border: 1px solid rgba(31, 42, 68, .10);
    border-radius: 16px;
    padding: 1.1rem 1rem 1rem;
    box-shadow: 0 20px 36px -28px rgba(15, 23, 42, .35);
}

.order-form-page #orderForm .form-label {
    font-size: .82rem;
    font-weight: 600;
    color: #4a5770;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: .35rem;
}

.order-form-page #orderForm .btn {
    min-height: 38px;
}

.order-form-page #orderForm .alert {
    border-radius: 12px;
}

/* Workplace orders polish */
.workplace-orders-page .table-responsive {
    border-top: 1px solid rgba(31, 42, 68, .06);
}

.workplace-orders-page .table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: linear-gradient(180deg, rgba(245, 248, 253, .98), rgba(241, 246, 252, .94));
}

.workplace-orders-page .table tbody td {
    vertical-align: middle;
}

.workplace-orders-page .btn-group .btn {
    border-radius: 10px !important;
    margin-right: .3rem;
}

.workplace-orders-page .btn-group .btn:last-child {
    margin-right: 0;
}

/* Guide page */
.guide-page {
    display: grid;
    gap: 1.15rem;
}

.guide-hero {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.2rem 1.25rem;
    border-radius: 16px;
    border: 1px solid rgba(31, 42, 68, .10);
    background: linear-gradient(160deg, rgba(67, 178, 157, .16), rgba(255, 255, 255, .96));
    box-shadow: 0 20px 36px -28px rgba(15, 23, 42, .35);
}

.guide-hero__eyebrow {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #3a4b68;
    font-weight: 700;
}

.guide-hero__title {
    margin: 0 0 .4rem;
    font-size: 1.55rem;
    font-weight: 700;
}

.guide-hero__subtitle {
    margin: 0;
    color: var(--app-muted);
    max-width: 56rem;
}

.guide-hero__badge {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    border-radius: 999px;
    border: 1px solid rgba(31, 42, 68, .13);
    background: rgba(255, 255, 255, .85);
    padding: .5rem .75rem;
    font-size: .82rem;
    color: #2f3d58;
    white-space: nowrap;
}

.guide-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1rem;
}

.guide-card {
    border: 1px solid rgba(31, 42, 68, .10);
    border-radius: 14px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 18px 30px -26px rgba(15, 23, 42, .30);
    padding: 1rem 1rem .95rem;
}

.guide-card--accent {
    background: linear-gradient(170deg, rgba(255, 243, 205, .78), rgba(255, 255, 255, .96));
    border-color: rgba(255, 193, 7, .32);
}

.guide-card--todo {
    background: linear-gradient(170deg, rgba(224, 242, 254, .70), rgba(255, 255, 255, .96));
    border-color: rgba(56, 189, 248, .32);
}

.guide-card__title {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 .75rem;
    font-size: 1rem;
    font-weight: 700;
}

.guide-list {
    margin: 0;
    padding-left: 1rem;
    display: grid;
    gap: .4rem;
    color: #324258;
}

.guide-steps {
    margin: 0;
    padding-left: 1.1rem;
    display: grid;
    gap: .35rem;
    color: #324258;
}

.guide-footer-note {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    border: 1px dashed rgba(31, 42, 68, .20);
    background: rgba(238, 242, 248, .72);
    border-radius: 12px;
    padding: .8rem .9rem;
    color: #33425a;
}

@media (max-width: 900px) {
    .guide-hero {
        flex-direction: column;
    }

    .guide-hero__badge {
        white-space: normal;
    }
}