.integration-notice {
    padding: .85rem 1rem;
    border-left: .25rem solid var(--brand);
    border-radius: .4rem;
    background: var(--brand-soft);
    color: var(--ink);
}

.integration-notice a { font-weight: 800; }

.integration-form {
    display: grid;
    gap: .8rem;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.integration-form[disabled] { opacity: .72; }

.integration-options {
    display: grid;
    gap: .6rem;
    margin: .4rem 0;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: .7rem;
}

.integration-options legend {
    padding-inline: .35rem;
    color: var(--muted);
    font-size: .82rem;
    font-weight: 800;
}

.account-section-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
}

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

.session-heading-row form,
.session-card form {
    display: block !important;
    margin: 0 !important;
}

.session-list {
    display: grid;
    gap: .75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.session-card {
    display: grid;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: .8rem;
    background: color-mix(in srgb, var(--panel) 92%, var(--brand-soft));
}

.session-card__title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .45rem;
}

.session-card__badge {
    display: inline-flex;
    min-height: 1.55rem;
    align-items: center;
    padding: .18rem .48rem;
    border-radius: 999px;
    background: var(--brand-soft);
    color: var(--brand-deep);
    font-size: .68rem;
    font-weight: 800;
}

.session-card__badge--muted {
    background: color-mix(in srgb, var(--muted) 10%, var(--panel));
    color: var(--muted);
}

.session-card__browser {
    margin: .35rem 0 .2rem;
    overflow-wrap: anywhere;
    color: var(--ink);
    font-size: .86rem;
}

.session-card__details {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem .75rem;
    color: var(--muted);
    font-size: .78rem;
}

.session-card .button--quiet {
    border: 1px solid var(--line);
    white-space: nowrap;
}

@media (max-width: 34rem) {
    .session-heading-row {
        align-items: stretch;
        flex-direction: column;
    }

    .session-heading-row button,
    .session-card button {
        width: 100%;
    }

    .session-card {
        grid-template-columns: minmax(0, 1fr);
    }
}

.rule-page { max-width: 74rem; margin: 2rem auto; padding: 0 1rem 4rem; }
.rule-panel { margin: 1.5rem 0 2.5rem; padding: clamp(1rem, 3vw, 1.75rem); border: 1px solid var(--line); border-radius: 1rem; background: var(--panel); }
.rule-panel__heading, .rule-card__summary { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.rule-panel__heading h2, .rule-card__summary h3 { margin: 0; }
.rule-panel__heading > span { padding: .3rem .65rem; border-radius: 999px; background: var(--brand-soft); color: var(--brand-deep); font-weight: 800; }
.rule-builder { margin: 1rem 0; padding: 1rem; border: 1px solid var(--line); border-radius: .8rem; }
.rule-builder legend { padding: 0 .4rem; font-weight: 850; }
.rule-builder__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem 1rem; }
.rule-builder label { display: grid; gap: .3rem; min-width: 0; font-weight: 720; }
.rule-builder label small { color: var(--muted); font-weight: 500; }
.rule-builder input:not([type="checkbox"]), .rule-builder select { width: 100%; min-width: 0; }
.rule-builder__compound { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: .4rem; }
.rule-builder__checks { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding: .75rem; border: 1px solid var(--line); border-radius: .65rem; }
.rule-builder__checks label, .rule-builder__enabled { display: flex !important; align-items: center; gap: .45rem; }
.rule-builder__delete { padding: .75rem; border-left: .2rem solid #b56a00; background: color-mix(in srgb, #b56a00 8%, transparent); }
.rule-preview { margin: 1.5rem 0; padding: clamp(1rem, 3vw, 1.5rem); border: 2px solid var(--brand); border-radius: 1rem; background: var(--brand-soft); }
.rule-preview__messages { max-height: 18rem; overflow: auto; margin: 1rem 0; border: 1px solid var(--line); border-radius: .7rem; background: var(--panel); }
.rule-preview__messages article { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .15rem 1rem; padding: .7rem .85rem; border-bottom: 1px solid var(--line); }
.rule-preview__messages article:last-child { border-bottom: 0; }
.rule-preview__messages span { grid-column: 1 / -1; overflow-wrap: anywhere; color: var(--muted); font-size: .78rem; }
.rule-preview__messages time { color: var(--muted); font-size: .75rem; }
.rule-list { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.rule-card { padding: clamp(1rem, 3vw, 1.35rem); border: 1px solid var(--line); border-radius: .9rem; background: var(--panel); }
.rule-card--inactive { background: color-mix(in srgb, var(--panel) 92%, var(--muted)); }
.rule-card--empty { text-align: center; }
.rule-card__summary > div { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.rule-card__summary > p { margin: .25rem 0 0; color: var(--muted); font-size: .78rem; text-align: right; }
.rule-card__position { display: grid; width: 1.8rem; height: 1.8rem; place-items: center; border-radius: .45rem; background: var(--brand-soft); color: var(--brand-deep); font-size: .78rem; font-weight: 900; }
.rule-card__status { padding: .18rem .45rem; border-radius: 999px; background: color-mix(in srgb, #b56a00 12%, transparent); color: var(--ink); font-size: .68rem; font-weight: 800; }
.rule-card__status--active { background: color-mix(in srgb, #238636 14%, transparent); }
.rule-card__definition { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin: 1rem 0; }
.rule-card__definition > div { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.rule-card__definition code { padding: .2rem .4rem; border-radius: .35rem; background: var(--brand-soft); overflow-wrap: anywhere; font-size: .72rem; }
.rule-card__actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.rule-card__actions form, .rule-preview form, .rule-card__delete form { display: block !important; margin: 0 !important; }
.rule-card__editor, .rule-card__delete { margin-top: .85rem; padding-top: .7rem; border-top: 1px solid var(--line); }
.rule-card details > summary { cursor: pointer; color: var(--brand-deep); font-weight: 800; }
.rule-card__editor form { margin-top: 1rem; }

@media (max-width: 44rem) {
    .rule-builder__grid, .rule-card__definition { grid-template-columns: minmax(0, 1fr); }
    .rule-panel__heading, .rule-card__summary { align-items: stretch; flex-direction: column; }
    .rule-card__summary > p { text-align: left; }
    .rule-preview__messages article { grid-template-columns: minmax(0, 1fr); }
}